/* ===== Extracted: inline-style-1 ===== */
:root{
        --bg:#f7efff;

        --panel:#f7e9ff;
        --panel-dark:#ead7ff;
        --line:#d8b8ee;

        --text:#5a4664;
        --text-soft:#75667d;

        --accent:#c8a8ff;
        --accent-strong:#a978df;
        --accent-soft:#ffd6ec;

        --soft:#fff8ff;
        --soft-green:#eefaf2;
        --soft-pink:#fff1fa;
        --soft-blue:#eef7ff;

        --glass: rgba(255,255,255,0.72);
        --glass-strong: rgba(255,255,255,0.86);
        --glass-soft: rgba(255,255,255,0.54);

        --dream-gradient: linear-gradient(135deg, rgba(255,246,252,0.88), rgba(238,247,255,0.80), rgba(248,226,255,0.82));
        --dream-header: linear-gradient(90deg, rgba(232,247,255,0.92) 0%, rgba(255,241,250,0.94) 50%, rgba(238,225,255,0.92) 100%);
    }

    * { box-sizing: border-box; }

    body {
        font-family: Arial, sans-serif;
        margin: 0;
        background:
            linear-gradient(rgba(255,255,255,0.04), rgba(255,255,255,0.04)),
            url("/images/ui/news_background.png") center top / cover fixed no-repeat;
        background-color: #eadfff;
        color: var(--text);
    }

    .page-wrap {
        background: transparent;
    }

    .box,
    .sale-card,
    .cat-manage-card,
    .ranking-card,
    .player-ranking-board,
    .cat-ranking-big-card,
    .trophies-sidebar,
    .trophies-big-card,
    .purr-feature-card,
    .achievement-card,
    .object-shop-main,
    .my-objects-panel,
    .inventory-object-hero,
    .inventory-detail-hero,
    .breeder-card,
    .public-side-card,
    .public-cat-status-card,
    .reserved-cat-card,
    .offspring-card,
    .find-stud-filter-card,
    .find-stud-list,
    .sale-list,
    .news-post {
        background: var(--glass);
        border: 1px solid rgba(216,184,238,0.72);
        box-shadow: 0 10px 24px rgba(88,64,120,0.10);
        backdrop-filter: blur(6px);
    }

    .side-panel,
    .purr-card,
    .middle-cat-panel,
    .breeding-panel,
    .appearance-panel,
    .genetics-panel,
    .cat-manage-header,
    .sell-cat-hero,
    .breeder-hero,
    .achievements-hero,
    .purr-feature-hero,
    .news-hero,
    .reserved-cats-intro,
    .offspring-intro,
    .find-stud-hero,
    .landing-hero {
        background: var(--dream-gradient);
        border: 1px solid rgba(216,184,238,0.76);
        box-shadow: 0 10px 24px rgba(88,64,120,0.10);
        backdrop-filter: blur(6px);
    }

    .side-panel-title,
    .breeding-panel-title,
    .appearance-panel-title,
    .genetics-panel-title,
    .object-panel-title,
    .object-category-title,
    .breeder-card-title,
    .ranking-title,
    .player-ranking-board-title,
    .cat-ranking-big-title,
    .trophies-big-title,
    .achievement-card-title,
    .purr-feature-card-title,
    .news-post-head,
    .sale-list-head,
    .find-stud-head {
        background: var(--dream-header);
        border-bottom: 1px solid rgba(216,184,238,0.55);
        color: #6b4b76;
    }

    #game {
        display: none;
    }

    .page-wrap {
        max-width: 1200px;
        margin: 0 auto;
        padding: 16px;
    }

    .auth-wrap {
        max-width: 900px;
        margin: 30px auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }

    .box {
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 14px;
        margin: 10px 0;
        background: rgba(255,255,255,0.72);
        backdrop-filter: blur(4px);
        box-shadow: 0 4px 10px rgba(0,0,0,0.07);
    }

    .topbar {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
        background: linear-gradient(135deg, rgba(238,250,255,0.88), rgba(255,238,249,0.88), rgba(240,224,255,0.86));
        color: #5a4664;
        padding: 14px 18px;
        border-radius: 0 0 24px 24px;
        box-shadow: 0 6px 18px rgba(88,64,120,0.16);
        min-height: 88px;
        border-bottom: 1px solid rgba(216,184,238,0.60);
        backdrop-filter: blur(10px);
    }

    .brand {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        justify-content: center;
        text-shadow: 0 1px 2px rgba(0,0,0,0.08);
        cursor: pointer;
        z-index: 3;
    }

    .brand:hover .brand-logo {
        transform: scale(1.03);
        filter: drop-shadow(0 4px 8px rgba(255,255,255,0.45));
    }

    .top-right {
        display: flex;
        align-items: center;
        gap: 10px;
        position: relative;
        margin-left: auto;
        z-index: 2;
    }

    .pill {
        background: rgba(255,255,255,0.58);
        border: 1px solid rgba(168,203,183,0.75);
        border-radius: 999px;
        padding: 9px 15px;
        cursor: pointer;
        user-select: none;
        font-weight: 900;
        color: #5a4a63;
        text-shadow: none;
        box-shadow: 0 2px 7px rgba(90, 74, 99, 0.10);
        transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
    }

    .pill:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,0.82);
        box-shadow: 0 4px 10px rgba(90, 74, 99, 0.16);
    }

    .topbar-icon-pill {
        width: 54px;
        min-width: 54px;
        height: 54px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .topbar-pill-icon {
        width: 24px;
        height: 24px;
        object-fit: contain;
        display: block;
    }

    .profile-wrap {
        position: relative;
    }

    .profile-icon {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: linear-gradient(180deg, rgba(255,255,255,0.52), rgba(255,255,255,0.22));
        border: 2px solid rgba(255,255,255,0.62);
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }

    .dropdown {
        display: none;
        position: absolute;
        top: 50px;
        right: 0;
        min-width: 190px;
        background: rgba(255,255,255,0.96);
        color: #4f4a5e;
        border: 1px solid #d6e4dc;
        border-radius: 12px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.12);
        z-index: 20;
        overflow: hidden;
    }

    .dropdown.show {
        display: block;
    }

    .dropdown-item {
        padding: 10px 12px;
        cursor: pointer;
        border-bottom: 1px solid #eee;
    }

    .dropdown-item:last-child {
        border-bottom: none;
    }

    .dropdown-item:hover {
        background: #f6f6f6;
    }

    .brand-logo {
        height: 90px;
        width: auto;
        display: block;
        object-fit: contain;
        transition: transform 0.12s ease, filter 0.12s ease;
    }

    .nav-row {
        display: flex;
        gap: 10px;
        margin: 18px 0;
        flex-wrap: wrap;
    }

    .nav-group {
        position: relative;
    }

    .nav-button {
        background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(239,226,255,0.82));
        border: 1px solid rgba(194,160,225,0.82);
        color: #5a4664;
        border-radius: 14px;
        padding: 10px 16px;
        font-weight: 800;
        cursor: pointer;
        box-shadow: 0 5px 12px rgba(88,64,120,0.12);
        backdrop-filter: blur(5px);
    }

    .nav-button:hover {
        background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,220,239,0.84));
        transform: translateY(-1px);
    }

    .nav-dropdown {
        position: absolute;
        top: 48px;
        left: 0;
        min-width: 220px;
        background: rgba(255,255,255,0.97);
        border: 1px solid #d6e4dc;
        border-radius: 12px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.11);
        display: none;
        z-index: 15;
        overflow: hidden;
    }

    .nav-dropdown.show {
        display: block;
    }

    .nav-dropdown .dropdown-item {
        font-weight: 600;
    }

    .cat-grid {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
    }

    .care-panel-wrap {
    max-width: 1180px;
    margin: 18px auto 24px auto;
    display: grid;
    grid-template-columns: 330px 1fr 330px;
    gap: 20px;
    align-items: start;
}

.side-panel {
    background: linear-gradient(180deg, rgba(230,245,235,0.96), rgba(248,239,246,0.92));
    border: 1px solid #bdd7c7;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

.side-panel-title {
    text-align: center;
    font-size: 20px;
    font-weight: 800;
    padding: 12px 10px;
    color: #6c4f5f;
    background: linear-gradient(90deg, #dff3e5 0%, #e8f7ff 50%, #f8dce9 100%);
    border-bottom: 1px solid #cfe2d7;
}

.tile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: rgba(255,255,255,0.22);
}

.action-tile {
    min-height: 116px;
    border-right: 1px solid #d8e7de;
    border-bottom: 1px solid #d8e7de;
    background: rgba(252, 255, 253, 0.72);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 8px;
    cursor: pointer;
    text-align: center;
    font-size: 14px;
    color: #5a5568;
    transition: background 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}

.action-tile:hover {
    background: rgba(255, 247, 251, 0.98);
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45);
}

.action-tile.disabled {
    background: rgba(190, 190, 195, 0.55);
    color: #8d9098;
    cursor: not-allowed;
    filter: grayscale(100%);
    opacity: 0.62;
    box-shadow: none;
}

.action-tile img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

/* ===== PurrPixels Detail Layout unten ===== */

.cat-detail-lower-layout {
    max-width: 1180px;
    margin: 28px auto 18px auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-items: start;
}

.cat-detail-column {
    min-width: 0;
}

.purr-tabs {
    display: flex;
    gap: 6px;
    margin: 0 0 -1px 0;
    padding-left: 12px;
}

.purr-tab {
    background: linear-gradient(180deg, #8fc6d8 0%, #f6cfe0 100%);
    border: 1px solid var(--line);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    padding: 8px 16px;
    font-weight: 800;
    color: white;
    box-shadow: 0 3px 8px rgba(0,0,0,0.05);
}

.purr-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(239,248,255,0.88));
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
    margin-bottom: 22px;
}

.purr-section {
    padding: 16px 18px;
    background: rgba(255,255,255,0.35);
    border-bottom: 1px solid rgba(168,203,183,0.45);
}

.purr-section:last-child {
    border-bottom: none;
}

.purr-title-row {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    font-weight: 900;
    font-size: 17px;
    margin-bottom: 12px;
    color: #4f4a5e;
}

.purr-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 34px;
    line-height: 1.45;
}

.purr-line-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 34px;
}

.purr-line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(79,74,94,0.08);
    padding: 4px 0;
}

.purr-value {
    font-weight: 800;
}

.blap-wrap {
    display: grid;
    grid-template-columns: 70px 1fr 60px;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.blap-bar {
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, #e90b0b, #e8f7ff, #39c0ed);
    position: relative;
    overflow: visible;
}

.blap-marker {
    position: absolute;
    top: -4px;
    width: 4px;
    height: 20px;
    border-radius: 999px;
    background: #4f4a5e;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.8);
}

.competition-cups {
    display: grid;
    grid-template-columns: 1fr repeat(3, 70px);
    align-items: center;
    gap: 8px;
}

.cup-box {
    text-align: center;
    font-size: 24px;
}

.cup-box img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    display: block;
    margin: 0 auto 4px auto;
}

.cup-box div {
    font-size: 15px;
    font-weight: 900;
    color: #4f4a5e;
}

.timeline-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.timeline-entry {
    padding: 8px 0;
    border-bottom: 1px solid rgba(79,74,94,0.09);
    line-height: 1.35;
}

.timeline-entry:last-child {
    border-bottom: none;
}

@media (max-width: 1000px) {
    .cat-detail-lower-layout {
        grid-template-columns: 1fr;
    }
}

button {
    background: linear-gradient(180deg, #ffffff, #f3fbf6);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px 12px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
}

button:hover {
    background: linear-gradient(180deg, #ffffff, #e8f7ff);
}

.middle-cat-panel {
    text-align: center;
    background: rgba(255,255,255,0.38);
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 22px;
    padding: 18px 18px 22px 18px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
    backdrop-filter: blur(4px);
}

.middle-cat-panel .cat-image-large {
    margin-bottom: 14px;
}

.breeding-panel {
    max-width: 760px;
    margin: 18px auto;
    background: linear-gradient(180deg, rgba(229,244,233,0.96), rgba(246,233,241,0.94));
    border: 1px solid #bfd8ca;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 14px rgba(0,0,0,0.07);
}

.breeding-panel-title {
    text-align: center;
    font-size: 24px;
    font-weight: 800;
    padding: 12px;
    color: #6b4d5f;
    background: linear-gradient(90deg, #dbf0e3 0%, #e8f6ff 45%, #f8dae7 100%);
    border-bottom: 1px solid #cde0d3;
}

.breeding-row {
    padding: 16px 18px;
    border-bottom: 1px solid #d7e6dd;
    font-size: 18px;
    color: #4f4a5e;
}

.breeding-row:last-child {
    border-bottom: none;
}

.breeding-link {
    color: #8a3d00;
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    font: inherit;
    padding: 0;
}

.breeding-actions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: rgba(255,255,255,0.18);
}

.breeding-action-tile {
    min-height: 116px;
    border-right: 1px solid #d8e7de;
    background: rgba(252,255,253,0.76);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    text-align: center;
    cursor: pointer;
    padding: 12px;
    color: #5a5568;
}

.breeding-action-tile:last-child {
    border-right: none;
}

.breeding-action-tile.disabled {
    background: rgba(196, 201, 207, 0.48);
    color: #8d9098;
    filter: grayscale(100%);
    opacity: 0.74;
    cursor: default;
}

.breeding-action-tile img {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

.appearance-panel {
    max-width: 900px;
    margin: 18px auto;
    background: linear-gradient(180deg, rgba(234,245,238,0.96), rgba(248,236,243,0.94));
    border: 1px solid #c7ddd0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}

.appearance-panel-title {
    text-align: center;
    font-size: 24px;
    font-weight: 800;
    padding: 12px;
    color: #664d5f;
    background: linear-gradient(90deg, #def3e5 0%, #e8f7ff 50%, #f8dce8 100%);
    border-bottom: 1px solid #d5e5dc;
}

.appearance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 16px;
}

.appearance-card {
    background: rgba(255,255,255,0.74);
    border: 1px solid #d9e7df;
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.appearance-main-stat {
    text-align: center;
    font-size: 30px;
    font-weight: 800;
    color: #5b4b61;
    padding: 18px 12px 4px 12px;
}

.appearance-main-label {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #7d6b81;
    padding-bottom: 16px;
}

.breed-color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-top: 12px;
}

.breed-color-card {
    background: rgba(255,255,255,0.78);
    border: 1px solid #d8e7de;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.breed-color-name {
    font-size: 18px;
    font-weight: 800;
    color: #5e5166;
    margin-bottom: 8px;
}

.breed-color-count {
    font-size: 15px;
    color: #5b5963;
}

.breed-summary-box {
    max-width: 700px;
    margin: 0 auto 16px auto;
}

.breed-color-eye-title {
    margin-top: -4px;
    margin-bottom: 10px;
    color: #4f7057;
    font-size: 15px;
    font-weight: 900;
}

.pedigree-card.mother-side {
    background: linear-gradient(180deg, rgba(255,244,249,0.95), rgba(255,250,252,0.92));
    border-color: #efd1de;
}

.pedigree-card.father-side {
    background: linear-gradient(180deg, rgba(239,249,255,0.95), rgba(247,255,251,0.92));
    border-color: #cfe4e8;
}

.pedigree-card.self-card {
    background: linear-gradient(180deg, rgba(245,255,248,0.98), rgba(255,244,249,0.95));
    border: 2px solid #d8d8e8;
    box-shadow: 0 8px 18px rgba(0,0,0,0.07);
}

.pedigree-card.mother-side .pedigree-card-title {
    color: #a05d7c;
}

.pedigree-card.father-side .pedigree-card-title {
    color: #5f7d8e;
}

.pedigree-card.self-card .pedigree-card-title {
    color: #6a5670;
    font-size: 17px;
}

.pedigree-level-label {
    text-align: center;
    font-size: 20px;
    font-weight: 800;
    color: #6a5a6a;
    margin-bottom: 10px;
}

.pedigree-section {
    margin-bottom: 24px;
}

.pedigree-divider-space {
    height: 6px;
}

.pedigree-shell .link-button {
    font-weight: 700;
}

.pedigree-meta div {
    margin-bottom: 2px;
}

.pedigree-empty {
    color: #8a8592;
    font-style: italic;
    padding: 36px 8px;
    text-align: center;
}

.pedigree-shell {
    max-width: 1250px;
    margin: 0 auto;
    position: relative;
}

.pedigree-self-center {
    display: flex;
    justify-content: center;
    margin-bottom: 26px;
}

.pedigree-level {
    display: grid;
    gap: 20px;
    margin-bottom: 24px;
    position: relative;
}

.pedigree-level.parents {
    grid-template-columns: repeat(2, 1fr);
}

.pedigree-level.grandparents {
    grid-template-columns: repeat(4, 1fr);
}

.pedigree-level::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -16px;
    transform: translateX(-50%);
    width: 3px;
    height: 16px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(164,193,183,0.7), rgba(220,177,196,0.7));
}

.pedigree-level.parents::after {
    content: "";
    position: absolute;
    left: 25%;
    right: 25%;
    top: -16px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(233,177,203,0.65), rgba(157,201,220,0.65));
}

.pedigree-level.grandparents::after {
    content: "";
    position: absolute;
    left: 12.5%;
    right: 12.5%;
    top: -16px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(233,177,203,0.65), rgba(157,201,220,0.65));
}

.pedigree-card.self-card {
    max-width: 320px;
    margin: 0 auto;
}

.pedigree-card {
    background: rgba(255,255,255,0.78);
    border: 1px solid #d7e6dd;
    border-radius: 16px;
    padding: 14px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.pedigree-card img {
    width: 150px;
    height: 150px;
    object-fit: contain;
    border-radius: 10px;
    margin-bottom: 10px;
}

.pedigree-card-title {
    font-size: 15px;
    font-weight: 800;
    color: #7a6678;
    margin-bottom: 8px;
}

.pedigree-meta {
    font-size: 14px;
    line-height: 1.5;
    color: #574f63;
}

.pedigree-page {
    max-width: 1260px;
    margin: 20px auto;
}

.pedigree-tree {
    display: grid;
    grid-template-columns: 1.1fr 1fr 0.9fr;
    gap: 20px;
    align-items: start;
}

.pedigree-top-layout {
    max-width: 1200px;
    margin: 0 auto;
}

.pedigree-self-row {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.pedigree-row {
    display: grid;
    gap: 18px;
    margin-bottom: 20px;
}

.pedigree-row.parents {
    grid-template-columns: repeat(2, 1fr);
}

.pedigree-row.grandparents {
    grid-template-columns: repeat(4, 1fr);
}

.pedigree-card-title {
    font-size: 14px;
    font-weight: 700;
    color: #7a6678;
    margin-bottom: 8px;
}

.pedigree-group {
    background: linear-gradient(180deg, rgba(230,245,235,0.95), rgba(248,238,245,0.93));
    border: 1px solid #c2d9cb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 5px 12px rgba(0,0,0,0.06);
}

.pedigree-group h3 {
    margin-top: 0;
    text-align: center;
    color: #684b5d;
    font-size: 24px;
}

.pedigree-card {
    background: rgba(255,255,255,0.72);
    border: 1px solid #d7e6dd;
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 14px;
    text-align: center;
    box-shadow: 0 3px 8px rgba(0,0,0,0.04);
}

.pedigree-card img {
    width: 150px;
    height: 150px;
    object-fit: contain;
    border-radius: 10px;
    margin-bottom: 10px;
}

.pedigree-card:last-child {
    margin-bottom: 0;
}

.pedigree-empty {
    color: #777;
    font-style: italic;
    padding: 40px 10px;
    text-align: center;
}

.genetics-panel {
    max-width: 760px;
    margin: 14px auto;
    background: linear-gradient(180deg, rgba(232,245,236,0.96), rgba(248,236,243,0.94));
    border: 1px solid #c7ddd0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}

.genetics-panel-title {
    text-align: center;
    font-size: 22px;
    font-weight: 800;
    padding: 10px;
    color: #664d5f;
    background: linear-gradient(90deg, #def3e5 0%, #e8f7ff 50%, #f8dce8 100%);
    border-bottom: 1px solid #d5e5dc;
}

.genetics-grid-beauty {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 12px;
}

.genetics-card {
    background: rgba(255,255,255,0.72);
    border: 1px solid #d9e7df;
    border-radius: 13px;
    padding: 11px 12px;
    min-height: 94px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.genetics-card-label {
    font-size: 13px;
    font-weight: 800;
    color: #76657b;
    margin-bottom: 5px;
    line-height: 1.2;
}

.genetics-card-value {
    font-size: 14px;
    line-height: 1.3;
    font-weight: 800;
    color: #4f4a5e;
    margin-bottom: 0;
    white-space: pre-line;
    word-break: normal;
    overflow-wrap: anywhere;
}

.genetics-card button {
    margin-top: 8px;
    padding: 6px 10px;
    font-size: 13px;
    border-radius: 10px;
}

.genetics-card.gene-unavailable {
    background: rgba(210, 210, 215, 0.58);
    border-color: rgba(170, 170, 180, 0.65);
    filter: grayscale(100%);
    opacity: 0.68;
}

.genetics-card.gene-unavailable .genetics-card-label {
    color: #77717d;
}

.gene-unavailable-note {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 800;
    color: #77717d;
    line-height: 1.25;
}

.gene-unavailable-button {
    margin-top: 8px;
    opacity: 0.55;
    cursor: not-allowed !important;
    filter: grayscale(100%);
}

.unlock-grid-beauty {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 12px;
}

.unlock-card {
    background: rgba(255,255,255,0.76);
    border: 1px solid #d9e7df;
    border-radius: 13px;
    padding: 10px 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.unlock-card-title {
    font-size: 14px;
    font-weight: 800;
    color: #5f536a;
    margin-bottom: 4px;
}

.unlock-status {
    display: none !important;
}

@media (max-width: 850px) {
    .genetics-grid-beauty,
    .unlock-grid-beauty {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ===== Mailbox polish overrides ===== */
.mail-center-content,
.mail-center-sidebar,
.mail-compose-card,
.mail-thread-header-card,
.mail-thread-message,
.mail-center-row,
.mailbox-empty-state {
    box-shadow: 0 10px 24px rgba(100, 75, 93, 0.07) !important;
}

.mail-center-content,
.mail-center-sidebar {
    border-color: rgba(214, 193, 232, 0.92) !important;
}

.mail-center-content {
    background: linear-gradient(180deg, rgba(255,252,255,0.96), rgba(250,246,255,0.90)) !important;
}

.mail-center-sidebar {
    background: linear-gradient(180deg, rgba(255,252,255,0.96), rgba(249,243,255,0.92)) !important;
}

.mail-center-nav.active,
.mail-center-compose {
    background: linear-gradient(135deg, rgba(252, 232, 242, 0.98), rgba(234, 243, 255, 0.95)) !important;
    border-color: rgba(206, 175, 226, 0.95) !important;
    color: #8a2f5a !important;
}

.mail-center-secondary {
    background: linear-gradient(135deg, rgba(255,255,255,0.94), rgba(248,244,255,0.88)) !important;
    border-color: rgba(214,193,232,0.82) !important;
}

.mail-center-count,
.mail-center-nav b {
    background: rgba(255,255,255,0.96) !important;
    border-color: rgba(214,193,232,0.82) !important;
    color: #8a2f5a !important;
}

.mail-center-row {
    background: linear-gradient(180deg, rgba(255,252,255,0.94), rgba(250,246,255,0.90)) !important;
    border-color: rgba(214,193,232,0.80) !important;
    padding: 11px 12px !important;
}

.mail-center-row.unread {
    border-left-color: #d07aa4 !important;
    background: linear-gradient(180deg, rgba(255,247,252,0.98), rgba(250,244,255,0.94)) !important;
}

.mail-center-row.official,
.mail-thread-header-card.official,
.mail-thread-message.official,
.mail-official-footer {
    background: linear-gradient(135deg, rgba(247,244,255,0.98), rgba(255,248,252,0.96)) !important;
    border-color: rgba(183, 212, 232, 0.78) !important;
}

.mail-thread-header-card {
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 14px 18px !important;
    align-items: start !important;
}

.mail-thread-header-actions {
    grid-column: 1 / -1 !important;
    justify-content: flex-start !important;
    padding-top: 2px !important;
}

.mail-thread-header-actions button,
.mail-thread-back-row button,
.mail-thread-reply-actions button,
.mail-thread-message-actions button,
.mailbox-empty-state button {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,244,255,0.92)) !important;
    border: 1px solid rgba(214,193,232,0.85) !important;
    color: #6e5265 !important;
    box-shadow: none !important;
}

.mail-thread-header-actions button:hover,
.mail-thread-back-row button:hover,
.mail-thread-reply-actions button:hover,
.mail-thread-message-actions button:hover,
.mailbox-empty-state button:hover {
    background: linear-gradient(180deg, rgba(252,242,248,0.98), rgba(240,246,255,0.94)) !important;
    border-color: rgba(201,169,221,0.90) !important;
    color: #8a2f5a !important;
}

.mail-center-row-open {
    grid-template-columns: 54px minmax(0,1fr) minmax(84px, 110px) !important;
    gap: 11px !important;
}

.mail-center-meta {
    min-width: 84px !important;
}

.mail-row-menu summary,
.mail-message-menu summary {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(214,193,232,0.84) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,244,255,0.92)) !important;
    color: #7a6780 !important;
    box-shadow: none !important;
    outline: none !important;
}

.mail-row-menu[open] summary,
.mail-message-menu[open] summary,
.mail-row-menu summary:hover,
.mail-message-menu summary:hover {
    background: linear-gradient(180deg, rgba(252,242,248,0.98), rgba(240,246,255,0.94)) !important;
    border-color: rgba(201,169,221,0.92) !important;
    color: #8a2f5a !important;
}

.mail-row-menu-popover,
.mail-message-menu > div {
    min-width: 192px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(214,193,232,0.84) !important;
    background: linear-gradient(180deg, rgba(255,253,255,0.99), rgba(250,246,255,0.97)) !important;
    box-shadow: 0 14px 32px rgba(100, 75, 93, 0.12) !important;
}

.mail-row-menu-popover button,
.mail-message-menu > div button {
    border-radius: 12px !important;
    padding: 8px 12px !important;
}

.mail-thread-list {
    gap: 12px !important;
}

.mail-thread-message {
    width: min(88%, 820px) !important;
    border-radius: 22px !important;
    border-color: rgba(214,193,232,0.78) !important;
    padding: 14px 16px !important;
}

.mail-thread-message.received {
    background: linear-gradient(180deg, rgba(255,252,255,0.97), rgba(249,245,255,0.92)) !important;
}

.mail-thread-message.sent {
    background: linear-gradient(180deg, rgba(252,240,246,0.95), rgba(244,248,255,0.90)) !important;
}

.mail-thread-message-head {
    gap: 10px !important;
    margin-bottom: 8px !important;
}

.mail-thread-message-body {
    line-height: 1.55 !important;
    color: #554b5f !important;
}

.mail-thread-message-actions {
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 12px !important;
}

.mail-thread-message-actions .mail-delete-inline {
    color: #9a4466 !important;
}

.mail-thread-reply-card,
.mail-compose-card {
    background: linear-gradient(180deg, rgba(255,252,255,0.96), rgba(249,245,255,0.92)) !important;
    border-color: rgba(214,193,232,0.82) !important;
}

.mail-report-modal {
    background: linear-gradient(180deg, rgba(255,253,255,0.99), rgba(251,246,255,0.98)) !important;
    border-color: rgba(214,193,232,0.85) !important;
}

@media (max-width: 980px) {
    .mail-thread-header-card {
        grid-template-columns: auto minmax(0, 1fr) !important;
    }

    .mail-thread-header-actions {
        grid-column: 1 / -1 !important;
        justify-content: flex-start !important;
    }
}

@media (max-width: 700px) {
    .mail-center-row-open {
        grid-template-columns: 46px minmax(0,1fr) !important;
    }

    .mail-center-meta {
        grid-column: 2 !important;
        min-width: 0 !important;
        margin-top: 2px !important;
        text-align: left !important;
    }

    .mail-thread-message {
        width: 100% !important;
    }

    .mail-thread-header-card {
        grid-template-columns: 1fr !important;
    }

    .mail-thread-avatar {
        width: 52px !important;
        height: 52px !important;
    }
}
@media (max-width: 520px) {
    .genetics-grid-beauty,
    .unlock-grid-beauty {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1100px) {
    .care-panel-wrap {
        grid-template-columns: 1fr;
    }

    .pedigree-tree {
        grid-template-columns: 1fr;
    }
}

    .cat-card {
        width: 180px;
        border: 1px solid #cfe1d7;
        border-radius: 16px;
        padding: 12px;
        text-align: center;
        cursor: pointer;
        background: rgba(255,255,255,0.78);
        backdrop-filter: blur(3px);
        transition: transform 0.12s ease, box-shadow 0.12s ease;
        box-shadow: 0 4px 8px rgba(0,0,0,0.05);
        position: relative;
        z-index: 1;
    }

    .cat-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 7px 14px rgba(0,0,0,0.08);
    }

    .cat-card img {
        width: 130px;
        height: 130px;
        object-fit: cover;
        margin-top: 8px;
        border-radius: 8px;
        pointer-events: none;
    }

    .cat-card-listed {
        border: 2px solid #f6cfe0;
        background: linear-gradient(180deg, rgba(255,241,247,0.92), rgba(232,247,255,0.76));
    }

    .sale-ribbon {
        position: absolute;
        top: 8px;
        right: 8px;
        background: linear-gradient(180deg, #f8dce8, #e8f7ff);
        border: 1px solid #a8cbb7;
        border-radius: 999px;
        padding: 4px 8px;
        font-size: 11px;
        font-weight: 900;
        color: #7a2f58;
        box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    }

    .cat-sale-mini {
        margin-top: 8px;
        padding: 7px 8px;
        border-radius: 12px;
        background: rgba(255,255,255,0.68);
        border: 1px solid rgba(168,203,183,0.55);
        font-size: 12px;
        color: #684b5d;
    }

    .centered-detail {
        text-align: center;
    }

    .cat-name {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 2px;
    }

    .cat-cattery {
        font-size: 14px;
        color: #555;
        margin-bottom: 16px;
    }

    .cat-image-large {
        width: 300px;
        height: 300px;
        object-fit: cover;
        display: block;
        margin: 0 auto 14px auto;
        border-radius: 16px;
    }

    .info-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 34px;
        max-width: 620px;
        margin: 0 auto 16px auto;
        text-align: left;
    }

    .bars {
        max-width: 520px;
        margin: 0 auto 16px auto;
    }

    .bar-label {
        margin: 8px 0 4px;
    }

    .bar-wrap {
        background: rgba(230,230,230,0.9);
        height: 14px;
        border-radius: 999px;
        overflow: hidden;
        border: 1px solid rgba(0,0,0,0.04);
        position: relative;
    }

    .bar-fill {
        height: 100%;
        border-radius: 999px;
        background-image: linear-gradient(90deg, #d62626 0%, #f6ed4c 50%, #52ec3a 100%);
        background-size: 500px 100%;
        background-repeat: no-repeat;
    }

    .actions {
        max-width: 760px;
        margin: 16px auto;
    }

    button {
        margin: 4px 6px 4px 0;
        cursor: pointer;
        border: 1px solid #cfded6;
        background: linear-gradient(180deg, #ffffff, #f3fbf6);
        color: var(--text);
        border-radius: 10px;
        padding: 8px 12px;
        font-weight: 600;
    }

    details {
        max-width: 760px;
        margin: 16px auto;
        background: rgba(239, 242, 191, 0.96);
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 10px 12px;
    }

    .genetics-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 28px;
        margin-top: 12px;
    }

    .link-button {
        background: none;
        border: none;
        color: #1a5fb4;
        cursor: pointer;
        padding: 0;
        font: inherit;
        text-decoration: underline;
    }

    .pedigree-wrap {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 18px;
        align-items: start;
        max-width: 1100px;
        margin: 0 auto;
}

.pedigree-column {
    background: rgba(255,255,255,0.35);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
}

.pedigree-column h4 {
    margin-top: 0;
    margin-bottom: 12px;
    text-align: center;
}

.cat-manage-page {
    max-width: 980px;
    margin: 18px auto 40px auto;
}

.cat-manage-header-with-icon {
    display: grid;
    grid-template-columns: 1fr 140px;
    gap: 20px;
    align-items: center;
}

.cat-manage-hero-icon {
    width: 130px;
    height: 130px;
    border-radius: 28px;
    background: rgba(255,255,255,0.62);
    border: 1px solid rgba(168,203,183,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,0.35);
}

.cat-manage-hero-icon-img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    display: block;
}

@media (max-width: 760px) {
    .cat-manage-header-with-icon {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .cat-manage-hero-icon {
        margin: 0 auto;
    }
}

.cat-manage-header {
    background: linear-gradient(135deg, rgba(223,243,229,0.96), rgba(232,247,255,0.94), rgba(248,220,232,0.92));
    border: 1px solid #a8cbb7;
    border-radius: 22px;
    padding: 18px 22px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    margin-bottom: 18px;
}

.cat-manage-small {
    font-weight: 900;
    color: #4f7057;
    margin-bottom: 6px;
}

.cat-manage-title {
    font-size: 28px;
    font-weight: 900;
    color: #7a2f58;
}

.cat-manage-card {
    background: rgba(255,255,255,0.78);
    border: 1px solid #a8cbb7;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
    margin-bottom: 20px;
}

.cat-manage-card-title {
    font-size: 24px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 14px;
}

.cat-manage-card-title.smaller {
    font-size: 21px;
    margin-top: 18px;
}

.cat-manage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.cat-manage-grid input,
.cat-manage-grid select,
.sale-info-box input {
    border: 1px solid #cfe2d7;
    border-radius: 10px;
    padding: 8px;
    background: rgba(255,255,255,0.9);
}

.cat-sale-preview {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 22px;
    align-items: center;
    margin-bottom: 18px;
}

.cat-sale-preview img {
    width: 250px;
    height: 250px;
    object-fit: contain;
}

.cat-sale-preview h2 {
    margin-top: 0;
    color: #6a3f54;
}

.sale-choice-box {
    background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(248,255,246,0.68));
    border: 1px solid #cfe2d7;
    border-radius: 16px;
    padding: 16px 20px;
    display: grid;
    gap: 13px;
    margin-bottom: 16px;
}

.sale-choice-box.compact {
    max-width: 420px;
}

.sale-choice-box label {
    font-weight: 900;
    color: #315339;
}

.sale-info-box {
    background: linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,247,251,0.62));
    border: 1px solid #cfe2d7;
    border-radius: 16px;
    padding: 16px 20px;
    line-height: 1.55;
    margin-bottom: 16px;
}

#managePriceHint {
    margin-left: 10px;
    color: #6a4f63;
}

@media (max-width: 850px) {
    .cat-manage-grid,
    .cat-sale-preview {
        grid-template-columns: 1fr;
    }

    .cat-sale-preview img {
        margin: 0 auto;
    }
}

.ped-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ped-box {
    text-align: center;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    padding: 10px;
    background: rgba(239, 242, 191, 0.75);
    min-height: 170px;
}

.ped-box img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    margin: 0 auto 8px auto;
}

.ped-empty {
    color: #777;
    font-style: italic;
    padding-top: 45px;
}

    .section-title {
        font-size: 28px;
        font-weight: 800;
        margin: 12px 0 16px;
        color: #624f65;
    }

    .small-note {
        color: #666;
        font-size: 13px;
    }

    .day-box {
        max-width: 760px;
        margin: 0 auto 16px auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 20px;
    }

    input, select {
        margin: 4px 0;
        padding: 7px;
    }

    @media (max-width: 820px) {
        .auth-wrap {
            grid-template-columns: 1fr;
        }
        .info-grid, .genetics-grid, .pedigree-wrap, .day-box {
            grid-template-columns: 1fr;
        }
    }

    .currency-bar {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
}

.currency {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.62);
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(216,184,238,0.58);
    font-weight: 900;
    color: #5a4664;
    box-shadow: 0 4px 12px rgba(88,64,120,0.10);
    backdrop-filter: blur(5px);
}

.currency-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.sale-page {
    max-width: 1220px;
    margin: 18px auto 40px auto;
}

.sale-top-actions {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.sale-big-action {
    min-width: 210px;
    min-height: 58px;
    border-radius: 18px;
    background: linear-gradient(180deg, #e8f7ed, #d8efde);
    border: 1px solid #a8cbb7;
    font-weight: 900;
    box-shadow: 0 6px 14px rgba(0,0,0,0.07);
}

.sale-card {
    background: rgba(255,255,255,0.78);
    border: 1px solid #a8cbb7;
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
    margin-bottom: 18px;
}

.sale-card-title {
    font-size: 22px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 14px;
}

.sale-filter-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    align-items: end;
    margin-bottom: 12px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.sale-filter-grid label {
    font-weight: 900;
    color: #4f4a5e;
}

.sale-filter-grid input,
.sale-filter-grid select {
    width: 100%;
    border-radius: 10px;
    border: 1px solid #cfe2d7;
    background: rgba(255,255,255,0.9);
}

.sale-checkbox-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sale-tabs {
    display: flex;
    gap: 8px;
    margin: 18px 0 -1px 16px;
}

.sale-tab {
    border-radius: 14px 14px 0 0;
    padding: 10px 18px;
    font-weight: 900;
    border: 1px solid #a8cbb7;
    border-bottom: none;
    background: linear-gradient(180deg, #dff3e5, #cfe8d6);
}

.sale-tab.active {
    background: linear-gradient(180deg, #f8dce8, #e8f7ff);
    color: #684b5d;
}

.sale-list {
    border: 1px solid #a8cbb7;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255,255,255,0.72);
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}

.sale-list-head,
.sale-row {
    display: grid;
    grid-template-columns: 1.55fr 1.45fr 1.65fr 0.95fr 0.85fr 1.15fr;
    gap: 10px;
    align-items: center;
}

.sale-list-head {
    padding: 12px 16px;
    font-weight: 900;
    color: #684b5d;
    background: linear-gradient(90deg, #dff3e5 0%, #e8f7ff 50%, #f8dce8 100%);
    border-bottom: 1px solid #cfe2d7;
}

.sale-list-head span {
    font-size: 12px;
    color: #8a4f6d;
}

.sale-row {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(168,203,183,0.35);
    background: rgba(255,255,255,0.45);
}

.sale-row:nth-child(even) {
    background: rgba(232,247,255,0.38);
}

.sale-row:last-child {
    border-bottom: none;
}

.sale-cat-cell {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 10px;
    align-items: center;
}

.sale-cat-cell img {
    width: 58px;
    height: 58px;
    object-fit: contain;
}

.sale-cat-name {
    font-weight: 900;
    color: #8a3d00;
}

.sale-sex {
    font-size: 13px;
    color: #7b7183;
    font-weight: 700;
}

.sale-cattery-name {
    font-size: 13px;
    color: #684b5d;
    font-weight: 800;
    margin-top: 2px;
}

.sale-cat-main-name {
    font-size: 17px;
    line-height: 1.15;
    font-weight: 900;
    color: #8a3d00;
}

.sale-cat-main-name .cat-title-prefix,
.sale-cat-main-name .cat-real-name {
    font-size: inherit;
    line-height: inherit;
}

.sale-breed-short-code {
    margin-top: 2px;
    font-size: 13px;
    font-weight: 800;
    color: #5b5a70;
}

.sale-pedigree-line {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 700;
    color: #684b5d;
    line-height: 1.25;
    word-break: break-word;
}

.sale-performance {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    color: #3f7051;
}

.sale-performance b {
    display: block;
    white-space: nowrap;
    font-size: 15px;
}

.sale-performance div {
    min-width: 0;
}

.sale-price {
    color: #4f4a5e;
}

.sale-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.sale-bid-input {
    width: 74px;
    border-radius: 10px;
    border: 1px solid #cfe2d7;
    padding: 7px;
}

.sale-empty {
    padding: 18px;
    color: #777;
}

@media (max-width: 1000px) {
    .sale-filter-grid {
        grid-template-columns: 1fr 1fr;
    }

    .sale-list-head {
        display: none;
    }

    .market-mobile-date-sort {
        display: grid;
        grid-template-columns: auto minmax(180px, 280px);
        align-items: center;
        justify-content: end;
        gap: 9px;
        margin: 0 0 12px 0;
        padding: 11px 13px;
        border: 1px solid rgba(216,184,238,0.72);
        border-radius: 15px;
        background: rgba(255,255,255,0.82);
        box-shadow: 0 6px 14px rgba(88,64,120,0.07);
    }

    .market-mobile-date-sort label {
        color: #684b5d;
        font-size: 12px;
        font-weight: 900;
    }

    .market-mobile-date-sort select {
        width: 100%;
        min-height: 39px;
        border: 1px solid rgba(194,160,225,0.78);
        border-radius: 11px;
        background: rgba(255,255,255,0.96);
        color: #4f4057;
        font-size: 13px;
        font-weight: 850;
        padding: 7px 9px;
    }

    .sale-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .market-mobile-date-sort {
        grid-template-columns: 1fr;
        justify-content: stretch;
        gap: 6px;
        padding: 10px 11px;
    }

    .market-mobile-date-sort select {
        max-width: none;
    }
}

/* ===== PurrPixels Special Object Shop ===== */

.object-shop-page {
    max-width: 1220px;
    margin: 18px auto 40px auto;
    display: grid;
    grid-template-columns: 310px 1fr;
    gap: 20px;
    align-items: start;
}

.my-objects-panel,
.object-shop-main {
    background: rgba(255,255,255,0.78);
    border: 1px solid #a8cbb7;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}

.object-panel-title,
.object-category-title {
    background: linear-gradient(90deg, #dff3e5 0%, #e8f7ff 50%, #f8dce8 100%);
    border-bottom: 1px solid #cfe2d7;
    padding: 12px 16px;
    font-size: 22px;
    font-weight: 900;
    color: #684b5d;
    text-align: center;
}

.object-category {
    margin: 16px;
    border: 1px solid #cfe2d7;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,0.70), rgba(248,255,246,0.58));
}

.object-category-intro {
    padding: 12px 16px;
    color: #5b5963;
    font-size: 15px;
    border-bottom: 1px solid rgba(168,203,183,0.35);
}

.object-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.object-card {
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: 14px;
    padding: 16px;
    min-height: 150px;
    border-right: 1px solid rgba(168,203,183,0.35);
    border-bottom: 1px solid rgba(168,203,183,0.35);
    background: rgba(255,255,255,0.42);
}

.object-card:nth-child(even) {
    border-right: none;
}

.object-icon-wrap {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(168,203,183,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
}

.object-icon-wrap img {
    width: 58px;
    height: 58px;
    object-fit: contain;
}

.object-name {
    font-size: 18px;
    font-weight: 900;
    color: #8a2f5a;
    margin-bottom: 4px;
}

.object-origin {
    font-size: 13px;
    font-weight: 900;
    color: #4f7057;
    margin-bottom: 7px;
}

.object-desc {
    font-size: 14px;
    line-height: 1.35;
    margin-bottom: 10px;
}


.object-price {
    font-weight: 900;
    color: #4f4a5e;
    margin-bottom: 8px;
}

/* ===== Food quantity purchase modal ===== */
.food-buy-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000050;
    background: rgba(57, 49, 61, 0.36);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.food-buy-modal {
    width: min(540px, calc(100vw - 28px));
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    background: linear-gradient(180deg, #ffffff 0%, #fffafd 100%);
    border: 1px solid rgba(168, 203, 183, 0.75);
    border-radius: 24px;
    box-shadow: 0 22px 70px rgba(70, 52, 67, 0.26);
    padding: 22px;
}

.food-buy-head {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 16px;
    align-items: center;
    margin-bottom: 18px;
}

.food-buy-image-wrap {
    width: 88px;
    height: 88px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(223,243,229,0.95), rgba(248,220,232,0.75));
    border: 1px solid rgba(168, 203, 183, 0.65);
}

.food-buy-image-wrap img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

.food-buy-title {
    font-size: 23px;
    font-weight: 900;
    color: #8a2f5a;
    line-height: 1.15;
    margin-bottom: 6px;
}

.food-buy-description {
    color: #5e5964;
    line-height: 1.45;
    font-size: 14px;
}

.food-buy-section-title {
    font-weight: 900;
    color: #684b5d;
    margin: 4px 0 10px;
}

.food-buy-options {
    display: grid;
    gap: 8px;
}

.food-buy-option {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 11px 14px;
    border-radius: 13px;
    border: 1px solid #d8e8df;
    background: #fff;
    color: #554e5a;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.food-buy-option:hover {
    transform: translateY(-1px);
    border-color: #b8d5c4;
    box-shadow: 0 5px 14px rgba(99, 78, 91, 0.08);
}

.food-buy-option.selected {
    border-color: #d49ab8;
    background: linear-gradient(90deg, rgba(248,220,232,0.62), rgba(223,243,229,0.62));
    box-shadow: 0 0 0 2px rgba(212,154,184,0.14);
}

.food-buy-option-amount {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 900;
}

.food-buy-option-dot {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    border-radius: 50%;
    border: 2px solid #c9b6c1;
    background: #fff;
    box-shadow: inset 0 0 0 3px #fff;
}

.food-buy-option.selected .food-buy-option-dot {
    border-color: #b45c88;
    background: #b45c88;
}

.food-buy-option-price {
    font-weight: 900;
    white-space: nowrap;
    color: #4e6956;
}

.food-buy-total {
    margin-top: 16px;
    padding: 13px 15px;
    border-radius: 14px;
    background: rgba(223,243,229,0.58);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #5a5360;
}

.food-buy-total strong {
    color: #8a2f5a;
    font-size: 19px;
}

.food-buy-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
}

.food-buy-actions button {
    width: 100%;
    min-height: 42px;
}

.food-buy-actions .food-buy-confirm {
    background: linear-gradient(180deg, #b8dec5, #9fcdb0);
    border-color: #82b795;
    color: #304a38;
    font-weight: 900;
}

@media (max-width: 560px) {
    .food-buy-modal {
        padding: 17px;
        border-radius: 19px;
    }

    .food-buy-head {
        grid-template-columns: 72px 1fr;
        gap: 12px;
    }

    .food-buy-image-wrap {
        width: 68px;
        height: 68px;
        border-radius: 16px;
    }

    .food-buy-image-wrap img {
        width: 54px;
        height: 54px;
    }

    .food-buy-title {
        font-size: 20px;
    }
}

.object-use-area select {
    width: 100%;
    border: 1px solid #cfe2d7;
    border-radius: 10px;
    background: rgba(255,255,255,0.9);
    padding: 7px;
    margin-bottom: 8px;
}

.object-use-area button {
    width: 100%;
}

.my-object-category {
    border-bottom: 1px solid rgba(168,203,183,0.45);
}

.my-object-category:last-child {
    border-bottom: none;
}

.my-object-category-title {
    padding: 9px 12px;
    background: linear-gradient(90deg, rgba(223,243,229,0.95), rgba(248,220,232,0.75));
    font-weight: 900;
    color: #684b5d;
    text-align: center;
}

.my-object-row {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(168,203,183,0.25);
    background: rgba(255,255,255,0.36);
}

.my-object-row:last-child {
    border-bottom: none;
}

.my-object-row img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.my-object-name {
    font-weight: 900;
    color: #8a2f5a;
}

.my-object-count {
    font-size: 13px;
    color: #5b5963;
}

.my-object-empty {
    padding: 14px;
    color: #777;
    font-size: 14px;
}

@media (max-width: 1000px) {
    .object-shop-page {
        grid-template-columns: 1fr;
    }

    .object-grid {
        grid-template-columns: 1fr;
    }

    .object-card {
        border-right: none;
    }
}

/* ===== Breeder Page / Züchterseite ===== */

.breeder-page {
    max-width: 1180px;
    margin: 18px auto 40px auto;
}

.breeder-hero {
    background: linear-gradient(135deg, rgba(223,243,229,0.96), rgba(232,247,255,0.94), rgba(248,220,232,0.92));
    border: 1px solid #a8cbb7;
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 20px;
    align-items: center;
}

.breeder-avatar {
    width: 110px;
    height: 110px;
    border-radius: 24px;
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(168,203,183,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 54px;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,0.45);
}

.breeder-name {
    font-size: 36px;
    font-weight: 900;
    color: #65445c;
    margin-bottom: 4px;
}

.breeder-subtitle {
    font-size: 17px;
    font-weight: 700;
    color: #5b5963;
    margin-bottom: 14px;
}

.breeder-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.breeder-action-btn {
    background: linear-gradient(180deg, #ffffff, #f3fbf6);
    border: 1px solid #a8cbb7;
    border-radius: 999px;
    padding: 9px 14px;
    font-weight: 800;
    color: #4f4a5e;
    cursor: pointer;
}

.breeder-layout {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 20px;
    margin-top: 20px;
}

.breeder-card {
    background: rgba(255,255,255,0.78);
    border: 1px solid #a8cbb7;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
    margin-bottom: 20px;
}

.breeder-card-title {
    background: linear-gradient(90deg, #dff3e5 0%, #e8f7ff 50%, #f8dce8 100%);
    border-bottom: 1px solid #cfe2d7;
    padding: 12px 16px;
    font-size: 20px;
    font-weight: 900;
    color: #684b5d;
}

.breeder-card-body {
    padding: 16px;
}

.breeder-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
}

.breeder-stat {
    background: rgba(255,255,255,0.62);
    border: 1px solid rgba(168,203,183,0.55);
    border-radius: 14px;
    padding: 12px;
}

.breeder-stat-label {
    font-size: 13px;
    font-weight: 800;
    color: #786b7c;
    margin-bottom: 5px;
}

.breeder-stat-value {
    font-size: 20px;
    font-weight: 900;
    color: #4f4a5e;
}

.breeder-presentation {
    min-height: 160px;
    font-size: 16px;
    line-height: 1.5;
    white-space: pre-line;
}

.breeder-big-number {
    font-size: 34px;
    font-weight: 900;
    color: #6a4f63;
    text-align: center;
    margin: 6px 0;
}

.friend-list {
    margin-top: 12px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(168,203,183,0.55);
}

.friend-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 9px 12px;
    background: rgba(255,255,255,0.52);
    border-bottom: 1px solid rgba(168,203,183,0.35);
    align-items: center;
}

.friend-row:nth-child(even) {
    background: rgba(232,247,255,0.45);
}

.friend-row:last-child {
    border-bottom: none;
}

.friend-name-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    text-align: left;
    font: inherit;
    font-weight: 900;
    color: #5b4b61;
    cursor: pointer;
    text-decoration: none;
}

.friend-name-link:hover {
    color: #8a4f6d;
    text-decoration: underline;
}

.friend-row span {
    color: #7b7183;
    font-weight: 700;
    font-size: 13px;
}

.friend-pages {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.friend-page-btn {
    min-width: 34px;
    padding: 7px 10px;
    border-radius: 10px;
    border: 1px solid #cfe2d7;
    background: rgba(255,255,255,0.72);
    font-weight: 900;
}

.friend-page-btn.active {
    background: linear-gradient(180deg, #f8dce8, #e8f7ff);
    border-color: #a8cbb7;
}

.trophy-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.trophy-card {
    text-align: center;
    background: rgba(255,255,255,0.64);
    border: 1px solid rgba(168,203,183,0.55);
    border-radius: 16px;
    padding: 14px 10px;
}

.trophy-icon {
    font-size: 38px;
    margin-bottom: 6px;
}

.trophy-label {
    font-weight: 900;
    color: #5f536a;
}

.trophy-count {
    display: inline-block;
    margin-top: 7px;
    background: #ffffff;
    border: 1px solid #d6e4dc;
    border-radius: 999px;
    padding: 4px 12px;
    font-weight: 900;
}

.club-prestige-bar {
    height: 12px;
    background: rgba(230,230,230,0.95);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.05);
    margin: 10px 0;
}

.club-prestige-fill {
    height: 100%;
    background: linear-gradient(90deg, #8fc6d8, #f6cfe0);
}

.greeting-list {
    margin-top: 12px;
    margin-bottom: 14px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(168,203,183,0.55);
}

.greeting-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 9px 12px;
    background: rgba(255,255,255,0.45);
    border-bottom: 1px solid rgba(168,203,183,0.35);
}

.greeting-row:nth-child(even) {
    background: rgba(248,220,232,0.35);
}

.greeting-row:last-child {
    border-bottom: none;
}

.greeting-row span:first-child {
    font-weight: 800;
    color: #5b4b61;
}

.greeting-row span:last-child {
    color: #7b7183;
    font-weight: 700;
}

.breeder-cat-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.breeder-cat-tab {
    border: 1px solid #a8cbb7;
    border-radius: 999px;
    padding: 8px 14px;
    font-weight: 900;
    background: linear-gradient(180deg, #ffffff, #f3fbf6);
}

@media (max-width: 900px) {
    .breeder-hero {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .breeder-avatar {
        margin: 0 auto;
    }

    .breeder-actions {
        justify-content: center;
    }

    .breeder-layout {
        grid-template-columns: 1fr;
    }

    .trophy-row {
        grid-template-columns: 1fr 1fr;
    }
}

/* ===== Untere Cat-Seite aufräumen ===== */

.cat-detail-lower-layout {
    max-width: 1180px;
    margin: 28px auto 18px auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-items: start;
}

.cat-detail-column {
    min-width: 0;
}

.cat-detail-full {
    max-width: 1180px;
    margin: 0 auto 18px auto;
}

.cat-detail-full .genetics-panel,
.cat-detail-full details.genetics-panel {
    max-width: none;
    margin: 18px 0;
}

.cat-detail-full .actions {
    max-width: none;
    margin: 18px 0;
}

.breeding-in-column .breeding-panel {
    max-width: none;
    margin: 0 0 22px 0;
}

.breeding-in-column .breeding-panel-title {
    font-size: 22px;
}

.breeding-in-column .breeding-row {
    font-size: 14px;
}

.breeding-in-column .breeding-action-tile {
    min-height: 100px;
    font-size: 13px;
}

.breeding-in-column .breeding-action-tile img {
    width: 100px;
    height: 100px;
}

.timeline-list .timeline-entry {
    padding: 8px 0;
    border-bottom: 1px solid rgba(79,74,94,0.09);
}

.timeline-list .timeline-entry:last-child {
    border-bottom: none;
}

@media (max-width: 1000px) {
    .cat-detail-lower-layout {
        grid-template-columns: 1fr;
    }
}

/* ===== Public Cat Page ===== */

.public-sale-bar {
    max-width: 1220px;
    margin: 12px auto 18px auto;
    display: grid;
    grid-template-columns: 220px 1fr 1fr 1fr;
    gap: 18px;
    align-items: center;
    background: linear-gradient(90deg, rgba(232,247,255,0.94), rgba(248,220,232,0.90));
    border: 1px solid #a8cbb7;
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.07);
}

.public-back-sale {
    min-height: 54px;
    font-weight: 900;
}

.public-cat-page {
    max-width: 1220px;
    margin: 18px auto 40px auto;
    display: grid;
    grid-template-columns: 330px 1fr 330px;
    gap: 20px;
    align-items: start;
}

.public-left-column,
.public-right-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.public-side-card {
    background: rgba(255,255,255,0.78);
    border: 1px solid #a8cbb7;
    border-radius: 18px;
    overflow: hidden;
    padding: 14px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}

.public-side-title {
    background: linear-gradient(90deg, #dff3e5 0%, #e8f7ff 50%, #f8dce8 100%);
    border-bottom: 1px solid #cfe2d7;
    margin: -14px -14px 14px -14px;
    padding: 12px;
    text-align: center;
    font-size: 20px;
    font-weight: 900;
    color: #684b5d;
}

.public-owner-avatar {
    width: 160px;
    height: 120px;
    margin: 8px auto 18px auto;
    border-radius: 16px;
    background: rgba(255,255,255,0.70);
    border: 1px solid rgba(168,203,183,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 54px;
}

.public-main-cat {
    text-align: center;
}

.public-cat-image {
    width: 300px;
    height: 300px;
    object-fit: contain;
    display: block;
    margin: 0 auto 14px auto;
}

.public-cat-status-card {
    max-width: 520px;
    margin: 0 auto 16px auto;
    background: rgba(255,255,255,0.80);
    border: 1px solid #a8cbb7;
    border-radius: 18px;
    padding: 14px 18px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}

.public-cat-name {
    font-size: 24px;
    font-weight: 900;
    color: #7a2f58;
}

.public-cat-cattery {
    font-weight: 800;
    color: #6a4f63;
    margin-bottom: 10px;
}

.public-bars {
    text-align: left;
}

.public-bars div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.public-info-card {
    max-width: 620px;
    margin: 0 auto;
    text-align: left;
}

.public-list-link {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(168,203,183,0.45);
    border-radius: 0;
    padding: 10px 6px;
    color: #7a2f58;
    font-weight: 900;
}

.public-list-link:last-child {
    border-bottom: none;
}

.public-list-link:hover {
    background: rgba(248,220,232,0.35);
}

@media (max-width: 1050px) {
    .public-cat-page,
    .public-sale-bar {
        grid-template-columns: 1fr;
    }

    .public-cat-image {
        width: 300px;
        height: 300px;
    }
}

/* ===== Player Ranking Boards ===== */

.player-ranking-reward-card {
    margin-top: 18px;
    margin-bottom: 18px;
    padding: 18px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255,255,255,0.84), rgba(238,247,255,0.78), rgba(255,238,249,0.78));
    border: 1px solid rgba(216,184,238,0.76);
    box-shadow: 0 7px 16px rgba(88,64,120,0.08);
}

.player-ranking-reward-title {
    font-size: 21px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 7px;
}

.player-ranking-reward-text {
    color: #5b5963;
    font-weight: 700;
    line-height: 1.45;
}

.player-ranking-reward-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.player-ranking-reward-grid > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(216,184,238,0.62);
}

.player-ranking-reward-grid b {
    color: #7a2f58;
}

.player-ranking-reward-grid span {
    font-weight: 900;
    color: #4f4a5e;
    white-space: nowrap;
}

@media (max-width: 800px) {
    .player-ranking-reward-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 520px) {
    .player-ranking-reward-grid {
        grid-template-columns: 1fr;
    }
}

.player-ranking-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-top: 18px;
}

.player-ranking-board {
    background: rgba(255,255,255,0.78);
    border: 1px solid #a8cbb7;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}

.player-ranking-board-title {
    padding: 14px 16px;
    font-size: 22px;
    font-weight: 900;
    color: #684b5d;
    background: linear-gradient(90deg, #dff3e5 0%, #e8f7ff 50%, #f8dce8 100%);
    border-bottom: 1px solid #cfe2d7;
}

.player-ranking-head,
.player-ranking-row {
    display: grid;
    grid-template-columns: 90px 1fr 150px;
    gap: 12px;
    align-items: center;
}

.player-ranking-head {
    padding: 12px 16px;
    font-weight: 900;
    color: #684b5d;
    background: rgba(232,247,255,0.50);
    border-bottom: 1px solid rgba(168,203,183,0.45);
}

.player-ranking-row {
    padding: 11px 16px;
    border-bottom: 1px solid rgba(168,203,183,0.35);
    background: rgba(255,255,255,0.46);
}

.player-ranking-row:nth-child(even) {
    background: rgba(248,220,232,0.25);
}

.player-ranking-row:last-child {
    border-bottom: none;
}

.player-ranking-place {
    font-weight: 900;
    color: #7a2f58;
}

.player-ranking-score {
    text-align: right;
    font-weight: 900;
    color: #4f4a5e;
}

.player-ranking-empty {
    padding: 18px 16px;
    color: #777;
}

.player-ranking-loadmore-wrap {
    padding: 14px 16px 16px 16px;
    text-align: center;
    border-top: 1px solid rgba(168,203,183,0.35);
    background: rgba(255,255,255,0.35);
}

.player-ranking-loadmore {
    min-width: 180px;
    font-weight: 900;
    border-radius: 12px;
}

.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 999px;
    font-weight: 900;
    border: 1px solid rgba(168,203,183,0.55);
    background: rgba(255,255,255,0.88);
    color: #5f536a;
}

.rank-badge.gold {
    background: linear-gradient(180deg, #fff4bf, #ffe27a);
    color: #7a5a00;
}

.rank-badge.silver {
    background: linear-gradient(180deg, #f5f7fb, #dfe6f2);
    color: #5f6d7c;
}

.rank-badge.bronze {
    background: linear-gradient(180deg, #f5dccb, #d9ae8b);
    color: #7a4a22;
}

.rank-badge.normal {
    background: rgba(255,255,255,0.88);
    color: #5f536a;
}

@media (max-width: 980px) {
    .player-ranking-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .player-ranking-head {
        display: none;
    }

    .player-ranking-row {
        grid-template-columns: 80px 1fr;
    }

    .player-ranking-score {
        grid-column: 2;
        text-align: left;
    }
}

/* ===== Cat Ranking Page ===== */

.cat-ranking-page {
    max-width: 1120px;
    margin: 18px auto 40px auto;
}

.cat-ranking-controls {
    background: rgba(255,255,255,0.78);
    border: 1px solid #a8cbb7;
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
    margin-bottom: 18px;
}

.cat-ranking-control-row {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
}

.cat-ranking-control-row label {
    font-weight: 900;
    color: #684b5d;
}

.cat-ranking-control-row select {
    width: 100%;
    border: 1px solid #cfe2d7;
    border-radius: 12px;
    padding: 9px;
    background: rgba(255,255,255,0.92);
    color: #4f4a5e;
    font-weight: 700;
}

.cat-ranking-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cat-ranking-tab {
    border: 1px solid #a8cbb7;
    border-radius: 999px;
    padding: 8px 13px;
    font-weight: 900;
    background: linear-gradient(180deg, #ffffff, #f3fbf6);
    color: #4f4a5e;
}

.cat-ranking-tab.active {
    background: linear-gradient(180deg, #f8dce8, #e8f7ff);
    color: #7a2f58;
}

.cat-ranking-big-card {
    background: rgba(255,255,255,0.78);
    border: 1px solid #a8cbb7;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}

.cat-ranking-big-title {
    background: linear-gradient(90deg, #dff3e5 0%, #e8f7ff 50%, #f8dce8 100%);
    border-bottom: 1px solid #cfe2d7;
    padding: 14px 16px;
    font-size: 23px;
    font-weight: 900;
    color: #684b5d;
    text-align: center;
}

.cat-ranking-table-head,
.cat-ranking-table-row {
    display: grid;
    grid-template-columns: 78px 82px 1.6fr 1.1fr 130px;
    gap: 12px;
    align-items: center;
}

.cat-ranking-table-head {
    padding: 12px 16px;
    font-weight: 900;
    color: #684b5d;
    background: rgba(232,247,255,0.55);
    border-bottom: 1px solid rgba(168,203,183,0.45);
}

.cat-ranking-table-row {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(168,203,183,0.35);
    background: rgba(255,255,255,0.46);
}

.cat-ranking-table-row:nth-child(even) {
    background: rgba(248,220,232,0.28);
}

.cat-ranking-table-row:last-child {
    border-bottom: none;
}

.cat-ranking-cat-img {
    width: 66px;
    height: 66px;
    object-fit: contain;
}

.cat-ranking-cat-name {
    font-weight: 900;
    color: #7a2f58;
    margin-bottom: 3px;
}

.cat-ranking-cattery {
    font-size: 13px;
    font-weight: 800;
    color: #4f7057;
}

.cat-ranking-owner {
    font-size: 13px;
    color: #7b7183;
    margin-top: 2px;
}

.cat-ranking-score {
    text-align: right;
    font-size: 18px;
    font-weight: 900;
    color: #4f4a5e;
}

.cat-ranking-score-label {
    font-size: 12px;
    font-weight: 800;
    color: #7b7183;
}

.cat-ranking-loadmore-wrap {
    padding: 14px 16px 16px 16px;
    text-align: center;
    border-top: 1px solid rgba(168,203,183,0.35);
    background: rgba(255,255,255,0.35);
}

.cat-ranking-loadmore {
    min-width: 180px;
    font-weight: 900;
    border-radius: 12px;
}

@media (max-width: 850px) {
    .cat-ranking-control-row {
        grid-template-columns: 1fr;
    }

    .cat-ranking-table-head {
        display: none;
    }

    .cat-ranking-table-row {
        grid-template-columns: 78px 1fr;
    }

    .cat-ranking-table-row > div:nth-child(n+4) {
        grid-column: 2;
    }

    .cat-ranking-score {
        text-align: left;
    }
}

/* ===== Trophy Page ===== */

.trophies-page {
    max-width: 1220px;
    margin: 18px auto 40px auto;
}

.trophies-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 20px;
    align-items: start;
}

.trophies-sidebar {
    background: rgba(255,255,255,0.78);
    border: 1px solid #a8cbb7;
    border-radius: 20px;
    padding: 12px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}

.trophies-sidebar-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    text-align: left;
    padding: 14px 14px;
    margin: 0 0 10px 0;
    border-radius: 16px;
    border: 1px solid rgba(168,203,183,0.40);
    background: rgba(255,255,255,0.72);
    font-weight: 900;
    color: #684b5d;
}

.trophies-sidebar-item:last-child {
    margin-bottom: 0;
}

.trophies-sidebar-item.active {
    background: linear-gradient(90deg, rgba(223,243,229,0.96), rgba(232,247,255,0.90), rgba(248,220,232,0.88));
    border-color: #a8cbb7;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.trophies-sidebar-name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
}

.trophies-sidebar-count {
    font-size: 15px;
    color: #7b7183;
    white-space: nowrap;
}

.trophies-main {
    min-width: 0;
}

.trophies-big-card {
    background: rgba(255,255,255,0.78);
    border: 1px solid #a8cbb7;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}

.trophies-big-title {
    background: linear-gradient(90deg, #dff3e5 0%, #e8f7ff 50%, #f8dce8 100%);
    border-bottom: 1px solid #cfe2d7;
    padding: 14px 16px;
    font-size: 24px;
    font-weight: 900;
    color: #684b5d;
    text-align: center;
}

.trophies-big-subtitle {
    padding: 14px 18px 0 18px;
    color: #5b5963;
    font-weight: 700;
    line-height: 1.5;
}

.trophy-list {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.trophy-entry {
    display: grid;
    grid-template-columns: 88px 1fr 320px;
    gap: 18px;
    align-items: center;
    background: rgba(255,255,255,0.70);
    border: 1px solid rgba(168,203,183,0.45);
    border-radius: 18px;
    padding: 16px;
}

.trophy-entry-icon {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    border: 1px solid rgba(168,203,183,0.45);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35);
}

.trophy-entry-icon.bronze {
    background: linear-gradient(180deg, #f2d2c1, #d8a98a);
}

.trophy-entry-icon.silver {
    background: linear-gradient(180deg, #f3f7fb, #dbe3ec);
}

.trophy-entry-icon.gold {
    background: linear-gradient(180deg, #fff2b8, #f0d56a);
}

.trophy-entry-icon.diamond {
    background: linear-gradient(180deg, #dff6ff, #8fd7ff);
}

.trophy-entry-title {
    font-size: 18px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 4px;
}

.trophy-entry-tier {
    display: inline-block;
    margin-bottom: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    border: 1px solid rgba(168,203,183,0.45);
    background: rgba(255,255,255,0.88);
    color: #5f536a;
}

.trophy-entry-desc {
    color: #5b5963;
    line-height: 1.45;
    font-weight: 700;
}

.trophy-progress-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.trophy-progress-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.trophy-progress-value {
    font-size: 28px;
    font-weight: 900;
    color: #4f4a5e;
}

.trophy-progress-target {
    font-size: 15px;
    font-weight: 800;
    color: #7b7183;
}

.trophy-progress-bar {
    height: 18px;
    border-radius: 999px;
    background: rgba(220,220,220,0.95);
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.06);
}

.trophy-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #8fc6d8, #f6cfe0);
}

.trophy-status {
    font-size: 13px;
    font-weight: 900;
    color: #4f7057;
}

.trophy-empty-box {
    padding: 30px 18px 34px 18px;
    text-align: center;
    color: #777;
    font-weight: 700;
}

@media (max-width: 980px) {
    .trophies-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .trophy-entry {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .trophy-entry-icon {
        margin: 0 auto;
    }

    .trophy-progress-top {
        justify-content: center;
    }
}

/* ===== Cat Club + Thanks To Pages ===== */

.purr-feature-page {
    max-width: 1050px;
    margin: 18px auto 40px auto;
}

.purr-feature-hero {
    background: linear-gradient(135deg, rgba(223,243,229,0.96), rgba(232,247,255,0.94), rgba(248,220,232,0.92));
    border: 1px solid #a8cbb7;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 20px;
    align-items: center;
    margin-bottom: 20px;
}

.purr-feature-kicker {
    font-weight: 900;
    color: #4f7057;
    margin-bottom: 6px;
}

.purr-feature-title {
    font-size: 36px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 8px;
}

.purr-feature-subtitle {
    color: #5b5963;
    font-weight: 700;
    line-height: 1.5;
}

.purr-feature-icon {
    width: 98px;
    height: 98px;
    border-radius: 26px;
    background: rgba(255,255,255,0.66);
    border: 1px solid rgba(168,203,183,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    margin-left: auto;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,0.35);
}

.purr-feature-card {
    background: rgba(255,255,255,0.78);
    border: 1px solid #a8cbb7;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
    margin-bottom: 18px;
}

.purr-feature-card-title {
    background: linear-gradient(90deg, #dff3e5 0%, #e8f7ff 50%, #f8dce8 100%);
    border-bottom: 1px solid #cfe2d7;
    padding: 14px 16px;
    font-size: 23px;
    font-weight: 900;
    color: #684b5d;
    text-align: center;
}

.purr-feature-card-body {
    padding: 18px;
    color: #5b5963;
    font-weight: 700;
    line-height: 1.55;
}

.office-show-results-card {
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(216,184,238,0.76);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
    margin-bottom: 18px;
}

.office-show-results-card-title {
    background: linear-gradient(
        90deg,
        rgba(232,247,255,0.92) 0%,
        rgba(255,241,250,0.94) 50%,
        rgba(238,225,255,0.92) 100%
    );
    border-bottom: 1px solid rgba(216,184,238,0.55);
    padding: 14px 16px;
    font-size: 23px;
    font-weight: 900;
    color: #684b5d;
    text-align: center;
}

.office-show-results-card-body {
    padding: 18px;
    color: #5b5963;
    font-weight: 700;
    line-height: 1.55;
}

.coming-soon-badge {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    background: linear-gradient(180deg, #f8dce8, #e8f7ff);
    border: 1px solid #a8cbb7;
    color: #7a2f58;
    font-weight: 900;
    margin-top: 12px;
}

.thanks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.thanks-card {
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(168,203,183,0.58);
    border-radius: 18px;
    padding: 16px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
}

.thanks-icon {
    font-size: 38px;
    margin-bottom: 8px;
}

.thanks-name {
    font-size: 19px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 5px;
}

.thanks-role {
    color: #4f7057;
    font-weight: 900;
    margin-bottom: 8px;
}

.thanks-note {
    color: #5b5963;
    font-size: 14px;
    line-height: 1.4;
}

.news-thanks-button-wrap {
    text-align: center;
    margin: 18px auto 6px auto;
}

.news-thanks-button {
    min-width: 190px;
    border-radius: 999px;
    padding: 11px 18px;
    font-weight: 900;
    background: linear-gradient(180deg, #ffffff, #f8dce8);
    border: 1px solid #a8cbb7;
    color: #684b5d;
}

.news-thanks-button:hover {
    background: linear-gradient(180deg, #ffffff, #e8f7ff);
}

@media (max-width: 850px) {
    .purr-feature-hero {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .purr-feature-icon {
        margin: 0 auto;
    }
}

/* ===== Rankings ===== */

.ranking-card {
    max-width: 980px;
    margin: 18px auto 40px auto;
    background: rgba(255,255,255,0.78);
    border: 1px solid #a8cbb7;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}

.ranking-title {
    background: linear-gradient(90deg, #dff3e5 0%, #e8f7ff 50%, #f8dce8 100%);
    border-bottom: 1px solid #cfe2d7;
    padding: 14px 16px;
    font-size: 24px;
    font-weight: 900;
    color: #684b5d;
    text-align: center;
}

.ranking-head,
.ranking-row {
    display: grid;
    grid-template-columns: 90px 1fr 1fr 140px;
    gap: 12px;
    align-items: center;
}

.ranking-head {
    padding: 12px 16px;
    font-weight: 900;
    color: #684b5d;
    background: rgba(232,247,255,0.55);
    border-bottom: 1px solid rgba(168,203,183,0.45);
}

.ranking-row {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(168,203,183,0.35);
    background: rgba(255,255,255,0.46);
}

.ranking-row:nth-child(even) {
    background: rgba(248,220,232,0.28);
}

.ranking-place {
    font-weight: 900;
    color: #7a2f58;
}

.ranking-empty {
    padding: 18px;
    color: #777;
}

@media (max-width: 800px) {
    .ranking-head {
        display: none;
    }

    .ranking-row {
        grid-template-columns: 1fr;
    }
}

/* ===== Achievements ===== */

.achievements-page {
    max-width: 1120px;
    margin: 18px auto 40px auto;
}

.achievements-hero {
    background: linear-gradient(135deg, rgba(223,243,229,0.96), rgba(232,247,255,0.94), rgba(248,220,232,0.92));
    border: 1px solid #a8cbb7;
    border-radius: 24px;
    padding: 22px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 18px;
    align-items: center;
    margin-bottom: 18px;
}

.achievements-kicker {
    font-weight: 900;
    color: #4f7057;
    margin-bottom: 5px;
}

.achievements-title {
    font-size: 34px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 6px;
}

.achievements-subtitle {
    color: #5b5963;
    font-weight: 700;
    line-height: 1.45;
}

.achievements-icon {
    width: 96px;
    height: 96px;
    border-radius: 24px;
    background: rgba(255,255,255,0.62);
    border: 1px solid rgba(168,203,183,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    margin-left: auto;
}

.achievements-button-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.achievement-big-button {
    min-height: 86px;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 900;
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(232,247,255,0.78));
    border: 1px solid #a8cbb7;
    box-shadow: 0 5px 12px rgba(0,0,0,0.06);
}

.achievement-big-button:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,220,232,0.78));
}

.achievement-card {
    background: rgba(255,255,255,0.78);
    border: 1px solid #a8cbb7;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
    margin-bottom: 18px;
}

.achievement-card-title {
    background: linear-gradient(90deg, #dff3e5 0%, #e8f7ff 50%, #f8dce8 100%);
    border-bottom: 1px solid #cfe2d7;
    padding: 14px 16px;
    font-size: 23px;
    font-weight: 900;
    color: #684b5d;
    text-align: center;
}

.achievement-info-box {
    padding: 16px;
    color: #5b5963;
    line-height: 1.5;
    font-weight: 700;
}

.cat-ranking-head,
.cat-ranking-row {
    display: grid;
    grid-template-columns: 70px 82px 1.3fr 1.2fr 1fr 90px 90px;
    gap: 12px;
    align-items: center;
}

.cat-ranking-head {
    padding: 12px 16px;
    font-weight: 900;
    color: #684b5d;
    background: rgba(232,247,255,0.55);
    border-bottom: 1px solid rgba(168,203,183,0.45);
}

.cat-ranking-row {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(168,203,183,0.35);
    background: rgba(255,255,255,0.46);
}

.cat-ranking-row:nth-child(even) {
    background: rgba(248,220,232,0.28);
}

.cat-ranking-row:last-child {
    border-bottom: none;
}

.cat-ranking-img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.trophy-grid-page {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding: 16px;
}

.trophy-page-card {
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(168,203,183,0.65);
    border-radius: 18px;
    padding: 16px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.trophy-page-icon {
    font-size: 44px;
    margin-bottom: 8px;
}

.trophy-page-name {
    font-size: 18px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 6px;
}

.trophy-page-count {
    font-size: 28px;
    font-weight: 900;
    color: #4f4a5e;
}

.trophy-page-points {
    font-size: 13px;
    font-weight: 800;
    color: #7b7183;
    margin-top: 5px;
}

@media (max-width: 950px) {
    .achievements-hero,
    .achievements-button-grid {
        grid-template-columns: 1fr;
    }

    .achievements-icon {
        margin: 0 auto;
    }

    .trophy-grid-page {
        grid-template-columns: 1fr 1fr;
    }

    .cat-ranking-head {
        display: none;
    }

    .cat-ranking-row {
        grid-template-columns: 70px 1fr;
    }

    .cat-ranking-row > div:nth-child(n+4) {
        grid-column: 2;
    }
}

@media (max-width: 560px) {
    .trophy-grid-page {
        grid-template-columns: 1fr;
    }
}

/* ===== PurrPixels Offers ===== */

.reserved-cats-page {
    max-width: 1220px;
    margin: 18px auto 40px auto;
}

.reserved-cats-intro {
    background: linear-gradient(135deg, rgba(223,243,229,0.95), rgba(232,247,255,0.92), rgba(248,220,232,0.88));
    border: 1px solid #a8cbb7;
    border-radius: 18px;
    padding: 16px 18px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
    margin-bottom: 18px;
    color: #5b5963;
    font-weight: 700;
}

.reserved-cats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
    gap: 18px;
}

.reserved-cat-card {
    background: rgba(255,255,255,0.78);
    border: 1px solid #a8cbb7;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 7px 16px rgba(0,0,0,0.07);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.reserved-cat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}

.reserved-cat-image-wrap {
    height: 210px;
    background: linear-gradient(180deg, rgba(232,247,255,0.82), rgba(255,241,247,0.82));
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(168,203,183,0.45);
}

.reserved-cat-image-wrap img {
    width: 190px;
    height: 190px;
    object-fit: contain;
}

.reserved-cat-body {
    padding: 14px 16px 16px 16px;
}

.reserved-cat-name {
    font-size: 21px;
    font-weight: 900;
    color: #7a2f58;
    margin-bottom: 4px;
}

.reserved-cat-cattery {
    font-size: 14px;
    font-weight: 800;
    color: #4f7057;
    margin-bottom: 12px;
}

.reserved-cat-info {
    display: grid;
    gap: 5px;
    margin-bottom: 14px;
    color: #4f4a5e;
}

.reserved-cat-info div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(79,74,94,0.08);
    padding-bottom: 4px;
}

.reserved-cat-info b {
    color: #684b5d;
}

.reserved-cat-price {
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(168,203,183,0.55);
    border-radius: 14px;
    padding: 10px 12px;
    font-weight: 900;
    color: #4f4a5e;
    margin-bottom: 12px;
    text-align: center;
}

.reserved-cat-card button {
    width: 100%;
    padding: 10px 12px;
    font-weight: 900;
}

/* ===== Inventory Object Detail / Use Page ===== */

.inventory-object-page {
    max-width: 1220px;
    margin: 18px auto 40px auto;
}

.inventory-object-hero {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
    background: rgba(255,255,255,0.82);
    border: 1px solid #a8cbb7;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    margin-bottom: 26px;
}

.inventory-object-image-area {
    background: linear-gradient(180deg, rgba(255,249,218,0.86), rgba(232,247,255,0.78));
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    border-right: 1px solid rgba(168,203,183,0.45);
}

.inventory-object-image-area img {
    width: 190px;
    height: 190px;
    object-fit: contain;
}

.inventory-object-info {
    padding: 24px 26px;
}

.inventory-object-name {
    font-size: 34px;
    font-weight: 900;
    color: #5b344d;
    margin-bottom: 10px;
}

.inventory-object-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.inventory-object-tag {
    background: rgba(255,255,255,0.82);
    border: 1px solid #d6e4dc;
    border-radius: 999px;
    padding: 6px 12px;
    font-weight: 900;
    color: #6a4f63;
    font-size: 13px;
}

.inventory-object-desc {
    font-size: 18px;
    line-height: 1.45;
    color: #4f4a5e;
    font-weight: 700;
}

.inventory-object-small {
    margin-top: 12px;
    color: #7d6b81;
    font-weight: 700;
}

.inventory-cat-select-head {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 18px;
    align-items: center;
    margin-bottom: 18px;
}

.inventory-cat-select-title {
    font-size: 32px;
    font-weight: 900;
    color: #5b4b61;
}

.inventory-cat-search-wrap {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.86);
    border: 1px solid #a8cbb7;
    border-radius: 999px;
    padding: 6px 10px 6px 16px;
    box-shadow: 0 5px 12px rgba(0,0,0,0.06);
}

.inventory-cat-search-wrap input {
    border: none;
    outline: none;
    background: transparent;
    flex: 1;
    font-size: 16px;
    padding: 8px;
    color: #4f4a5e;
}

.inventory-cat-search-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #8fc6d8;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

.inventory-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 18px;
}

.inventory-cat-choice-card {
    min-height: 250px;
    background: rgba(255,255,255,0.80);
    border: 1px solid #a8cbb7;
    border-radius: 18px;
    padding: 14px;
    text-align: center;
    box-shadow: 0 7px 14px rgba(0,0,0,0.07);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.inventory-cat-choice-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.10);
    background: rgba(255,247,251,0.92);
}

.inventory-cat-choice-card.disabled {
    opacity: 0.48;
    filter: grayscale(100%);
    cursor: not-allowed;
}

.inventory-cat-choice-card.disabled:hover {
    transform: none;
    box-shadow: 0 7px 14px rgba(0,0,0,0.07);
}

.inventory-cat-choice-card img {
    width: 145px;
    height: 145px;
    object-fit: contain;
    margin-bottom: 10px;
}

.inventory-cat-choice-name {
    font-size: 18px;
    font-weight: 900;
    color: #7a2f58;
}

.inventory-cat-choice-meta {
    font-size: 13px;
    color: #5b5963;
    font-weight: 700;
    line-height: 1.35;
    margin-top: 5px;
}

.inventory-cat-choice-reason {
    margin-top: 8px;
    font-size: 12px;
    color: #8a4f6d;
    font-weight: 800;
}

.inventory-empty-result {
    background: rgba(255,255,255,0.78);
    border: 1px solid #a8cbb7;
    border-radius: 18px;
    padding: 18px;
    color: #777;
    font-weight: 700;
}

.my-object-row {
    cursor: pointer;
    transition: background 0.12s ease, transform 0.12s ease;
}

.my-object-row:hover {
    background: rgba(255,247,251,0.88);
    transform: translateX(2px);
}

@media (max-width: 850px) {
    .inventory-object-hero,
    .inventory-cat-select-head {
        grid-template-columns: 1fr;
    }

    .inventory-object-image-area {
        border-right: none;
        border-bottom: 1px solid rgba(168,203,183,0.45);
    }
}

.static-object-row {
    cursor: default;
}

.static-object-row:hover {
    background: rgba(255,255,255,0.36);
    transform: none;
}

.my-object-note {
    font-size: 12px;
    color: #7d6b81;
    margin-top: 4px;
    line-height: 1.25;
}

/* ===== Inventory Item Detail Page ===== */

.inventory-detail-page {
    max-width: 1220px;
    margin: 18px auto 40px auto;
}

.inventory-detail-hero {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 22px;
    align-items: center;
    background: linear-gradient(135deg, rgba(255,255,255,0.86), rgba(232,247,255,0.78), rgba(248,220,232,0.72));
    border: 1px solid #a8cbb7;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    margin-bottom: 24px;
}

.inventory-detail-icon-wrap {
    min-height: 220px;
    background: rgba(239,248,240,0.72);
    display: flex;
    align-items: center;
    justify-content: center;
}

.inventory-detail-icon-wrap img {
    width: 150px;
    height: 150px;
    object-fit: contain;
}

.inventory-detail-info {
    padding: 22px 24px;
}

.inventory-detail-name {
    font-size: 34px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 8px;
}

.inventory-detail-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.inventory-detail-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.72);
    border: 1px solid #d6e4dc;
    border-radius: 999px;
    padding: 7px 12px;
    font-weight: 900;
    color: #5b5963;
}

.inventory-detail-desc {
    font-size: 17px;
    line-height: 1.45;
    color: #4f4a5e;
    max-width: 760px;
}

.inventory-cat-search-row {
    display: grid;
    grid-template-columns: 1fr 170px;
    gap: 12px;
    align-items: center;
    margin-bottom: 18px;
}

.inventory-cat-search-row input {
    width: 100%;
    border: 1px solid #cfe2d7;
    border-radius: 999px;
    background: rgba(255,255,255,0.9);
    padding: 12px 18px;
    font-size: 16px;
}

.inventory-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 18px;
}

.inventory-cat-card {
    background: rgba(255,255,255,0.78);
    border: 1px solid #a8cbb7;
    border-radius: 18px;
    padding: 14px;
    text-align: center;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.inventory-cat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 9px 18px rgba(0,0,0,0.09);
}

.inventory-cat-card.disabled {
    opacity: 0.58;
    filter: grayscale(100%);
}

.inventory-cat-card img {
    width: 140px;
    height: 140px;
    object-fit: contain;
    margin-bottom: 10px;
}

.inventory-cat-name {
    font-size: 18px;
    font-weight: 900;
    color: #7a2f58;
}

.inventory-cat-info {
    font-size: 14px;
    line-height: 1.35;
    color: #5b5963;
    margin: 8px 0 12px 0;
}

.inventory-cat-reason {
    font-size: 13px;
    font-weight: 800;
    color: #8a4f6d;
    margin-top: 8px;
}

.inventory-empty-cats {
    background: rgba(255,255,255,0.78);
    border: 1px solid #a8cbb7;
    border-radius: 18px;
    padding: 18px;
    color: #777;
}

@media (max-width: 800px) {
    .inventory-detail-hero {
        grid-template-columns: 1fr;
    }

    .inventory-cat-search-row {
        grid-template-columns: 1fr;
    }
}

.clickable-object {
    cursor: pointer;
    transition: background 0.12s ease, transform 0.12s ease;
}

.clickable-object:hover {
    background: rgba(248,220,232,0.38);
    transform: translateY(-1px);
}

.not-clickable {
    cursor: default;
}

/* ===== Sell Cat improved page ===== */

.sell-cat-page {
    max-width: 1100px;
    margin: 18px auto 40px auto;
}

.sell-cat-hero {
    background: linear-gradient(135deg, rgba(223,243,229,0.96), rgba(232,247,255,0.94), rgba(248,220,232,0.90));
    border: 1px solid #a8cbb7;
    border-radius: 22px;
    padding: 20px 22px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    margin-bottom: 18px;
}

.sell-cat-title {
    font-size: 30px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 6px;
}

.sell-cat-subtitle {
    color: #5b5963;
    font-weight: 700;
}

.sell-cat-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 18px;
    align-items: start;
}

.sell-cat-card {
    background: rgba(255,255,255,0.80);
    border: 1px solid #a8cbb7;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}

.sell-cat-card-title {
    font-size: 22px;
    font-weight: 900;
    color: #7a2f58;
    margin-bottom: 14px;
}

.sell-cat-field {
    margin-bottom: 16px;
}

.sell-cat-field label {
    display: block;
    font-weight: 900;
    color: #4f4a5e;
    margin-bottom: 6px;
}

.sell-cat-field input,
.sell-cat-field select {
    width: 100%;
    border: 1px solid #cfe2d7;
    border-radius: 12px;
    background: rgba(255,255,255,0.94);
    padding: 10px 12px;
    font-size: 15px;
}

.sell-cat-search-wrap {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.90);
    border: 1px solid #a8cbb7;
    border-radius: 999px;
    padding: 6px 12px 6px 16px;
    box-shadow: 0 5px 12px rgba(0,0,0,0.05);
    margin-bottom: 12px;
}

.sell-cat-search-wrap input {
    border: none;
    outline: none;
    background: transparent;
    flex: 1;
    padding: 8px;
    font-size: 15px;
}

.sell-cat-search-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #8fc6d8;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

.sell-cat-preview {
    text-align: center;
}

.sell-cat-preview > img {
    width: 250px;
    height: 250px;
    object-fit: contain;
    margin-bottom: 12px;
}

.sell-cat-preview-name {
    font-size: 22px;
    font-weight: 900;
    color: #7a2f58;
}

.sell-cat-preview-meta {
    color: #5b5963;
    font-weight: 700;
    line-height: 1.5;
    margin-top: 8px;
}

.sell-cat-info-box {
    background: linear-gradient(180deg, rgba(248,255,246,0.72), rgba(255,247,251,0.62));
    border: 1px solid #cfe2d7;
    border-radius: 16px;
    padding: 12px 14px;
    color: #5b5963;
    font-weight: 700;
    line-height: 1.45;
    margin-top: 10px;
}

.sell-cat-create-btn {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 900;
    margin-top: 8px;
}

@media (max-width: 900px) {
    .sell-cat-layout {
        grid-template-columns: 1fr;
    }
}

/* ===== PurrPixels Breeding Beautiful Panel ===== */

.breeding-beauty-panel {
    background: rgba(255,255,255,0.80);
    border: 1px solid #a8cbb7;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 7px 16px rgba(0,0,0,0.07);
    margin-bottom: 22px;
}

.breeding-beauty-header {
    background: linear-gradient(90deg, #dff3e5 0%, #e8f7ff 50%, #f8dce8 100%);
    border-bottom: 1px solid #cfe2d7;
    padding: 13px 16px;
    text-align: center;
    color: #684b5d;
    font-size: 22px;
    font-weight: 900;
}

.breeding-beauty-body {
    padding: 16px;
}

.breeding-status-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.72), rgba(248,255,246,0.58));
    border: 1px solid rgba(168,203,183,0.55);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 14px;
}

.breeding-status-title {
    font-size: 18px;
    font-weight: 900;
    color: #7a2f58;
    margin-bottom: 8px;
}

.breeding-status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
    font-size: 14px;
    line-height: 1.35;
}

.breeding-action-grid-beauty {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.breeding-action-card {
    min-height: 118px;
    background: rgba(255,255,255,0.74);
    border: 1px solid rgba(168,203,183,0.60);
    border-radius: 16px;
    padding: 12px 10px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.breeding-action-card:hover {
    transform: translateY(-2px);
    background: rgba(255,247,251,0.95);
    box-shadow: 0 8px 16px rgba(0,0,0,0.08);
}

.breeding-action-card.disabled {
    opacity: 0.45;
    filter: grayscale(100%);
    cursor: not-allowed;
}

.breeding-action-card.disabled:hover {
    transform: none;
    box-shadow: none;
}

.breeding-action-card img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    margin-bottom: 8px;
}

.breeding-action-title {
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 4px;
}

.breeding-action-note {
    font-size: 12px;
    color: #766b7c;
    line-height: 1.25;
}

.breeding-dynamic-box {
    margin-top: 14px;
    background: rgba(232,247,255,0.52);
    border: 1px solid rgba(168,203,183,0.55);
    border-radius: 16px;
    padding: 14px;
}

.breeding-dynamic-box input,
.breeding-dynamic-box select {
    width: 100%;
    max-width: 280px;
    border: 1px solid #cfe2d7;
    border-radius: 10px;
    padding: 8px;
    background: rgba(255,255,255,0.92);
}

.breeding-dynamic-title {
    font-size: 18px;
    font-weight: 900;
    color: #7a2f58;
    margin-bottom: 8px;
}

/* ===== Offspring Lineage Dashboard ===== */

.offspring-page {
    max-width: 1220px;
    margin: 18px auto 40px auto;
}

.offspring-hero {
    background: linear-gradient(135deg, rgba(255,241,250,0.94), rgba(232,247,255,0.92), rgba(238,225,255,0.92));
    border: 1px solid rgba(216,184,238,0.76);
    border-radius: 24px;
    padding: 20px 22px;
    box-shadow: 0 8px 18px rgba(88,64,120,0.10);
    margin-bottom: 18px;
}

.offspring-hero-kicker {
    font-size: 13px;
    font-weight: 900;
    color: #8a5a91;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 5px;
}

.offspring-hero-title {
    font-size: 34px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 7px;
}

.offspring-hero-subtitle {
    color: #5b5963;
    font-weight: 700;
    line-height: 1.5;
}

.offspring-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}

.offspring-summary-card {
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(216,184,238,0.68);
    border-radius: 18px;
    padding: 14px;
    text-align: center;
    box-shadow: 0 5px 12px rgba(88,64,120,0.07);
}

.offspring-summary-card strong {
    display: block;
    font-size: 25px;
    color: #684b5d;
    margin-bottom: 3px;
}

.offspring-summary-card span {
    display: block;
    font-size: 12px;
    font-weight: 900;
    color: #7b6c80;
}

.offspring-highlight-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.offspring-highlight-card {
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(216,184,238,0.62);
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 5px 12px rgba(88,64,120,0.07);
}

.offspring-highlight-label {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8a6d90;
    margin-bottom: 7px;
}

.offspring-highlight-name {
    font-size: 18px;
    font-weight: 900;
    color: #7a2f58;
    margin-bottom: 5px;
}

.offspring-highlight-meta {
    font-size: 13px;
    color: #5b5963;
    font-weight: 700;
    line-height: 1.4;
}

.offspring-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 14px 0;
}

.offspring-tab-button {
    border: 1px solid rgba(194,160,225,0.82);
    border-radius: 999px;
    padding: 9px 15px;
    font-weight: 900;
    background: rgba(255,255,255,0.78);
    color: #5a4664;
}

.offspring-tab-button.active {
    background: linear-gradient(180deg, rgba(255,241,250,0.96), rgba(232,247,255,0.94));
    color: #7a2f58;
    box-shadow: 0 4px 10px rgba(88,64,120,0.08);
}

.offspring-panel {
    background: rgba(255,255,255,0.70);
    border: 1px solid rgba(216,184,238,0.68);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 7px 16px rgba(88,64,120,0.08);
    margin-bottom: 18px;
}

.offspring-panel-title {
    background: linear-gradient(90deg, rgba(232,247,255,0.92), rgba(255,241,250,0.94), rgba(238,225,255,0.92));
    border-bottom: 1px solid rgba(216,184,238,0.55);
    padding: 13px 16px;
    font-size: 21px;
    font-weight: 900;
    color: #684b5d;
}

.offspring-panel-body {
    padding: 16px;
}

.offspring-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.offspring-filter-grid label {
    display: block;
    font-size: 12px;
    font-weight: 900;
    color: #6d5e72;
    margin-bottom: 4px;
}

.offspring-filter-grid select,
.offspring-filter-grid input {
    width: 100%;
    border: 1px solid rgba(194,160,225,0.68);
    border-radius: 10px;
    background: rgba(255,255,255,0.92);
    color: #5a4664;
    padding: 8px 9px;
}

.offspring-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}

.offspring-card {
    background: rgba(255,255,255,0.82);
    border: 1px solid rgba(216,184,238,0.72);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 7px 16px rgba(88,64,120,0.08);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.offspring-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(88,64,120,0.12);
}

.offspring-image-wrap {
    height: 180px;
    background: linear-gradient(180deg, rgba(232,247,255,0.84), rgba(255,241,247,0.82));
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(216,184,238,0.50);
    position: relative;
}

.offspring-image-wrap img {
    width: 160px;
    height: 160px;
    object-fit: contain;
}

.offspring-status-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 10px;
    font-weight: 900;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(216,184,238,0.58);
    color: #684b5d;
}

.offspring-body {
    padding: 13px 14px 15px 14px;
}

.offspring-name {
    font-size: 18px;
    font-weight: 900;
    color: #7a2f58;
    margin-bottom: 3px;
}

.offspring-cattery {
    font-size: 12px;
    font-weight: 900;
    color: #8a5a91;
    margin-bottom: 10px;
}

.offspring-info {
    display: grid;
    gap: 4px;
    margin-bottom: 10px;
}

.offspring-info div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid rgba(79,74,94,0.08);
    padding-bottom: 3px;
    font-size: 12px;
}

.offspring-info b {
    color: #684b5d;
}

.offspring-info span {
    text-align: right;
    color: #5b5963;
    font-weight: 700;
}

.offspring-gp-box {
    background: rgba(255,255,255,0.76);
    border: 1px solid rgba(216,184,238,0.58);
    border-radius: 12px;
    padding: 8px 10px;
    text-align: center;
    font-weight: 900;
    color: #4f4a5e;
    margin-bottom: 9px;
}

.offspring-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.offspring-card-actions button {
    width: 100%;
    margin: 0;
    font-size: 12px;
    padding: 8px 7px;
}

.offspring-litter-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.offspring-litter-card {
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(216,184,238,0.62);
    border-radius: 18px;
    overflow: hidden;
}

.offspring-litter-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
    padding: 12px 14px;
    background: linear-gradient(90deg, rgba(255,241,250,0.82), rgba(232,247,255,0.78));
    border-bottom: 1px solid rgba(216,184,238,0.50);
}

.offspring-litter-title {
    font-size: 17px;
    font-weight: 900;
    color: #684b5d;
}

.offspring-litter-meta {
    font-size: 12px;
    font-weight: 800;
    color: #75667d;
}

.offspring-litter-kittens {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
    padding: 12px;
}

.offspring-litter-mini {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 10px;
    align-items: center;
    background: rgba(255,255,255,0.74);
    border: 1px solid rgba(216,184,238,0.45);
    border-radius: 14px;
    padding: 9px;
    cursor: pointer;
}

.offspring-litter-mini:hover {
    background: rgba(255,247,251,0.92);
}

.offspring-litter-mini img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

.offspring-litter-mini b {
    display: block;
    color: #7a2f58;
    margin-bottom: 3px;
}

.offspring-litter-mini span {
    font-size: 11px;
    font-weight: 700;
    color: #6f6474;
    line-height: 1.35;
}

.offspring-distribution-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.offspring-distribution-card {
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(216,184,238,0.55);
    border-radius: 16px;
    overflow: hidden;
}

.offspring-distribution-title {
    padding: 10px 12px;
    font-weight: 900;
    color: #684b5d;
    background: linear-gradient(90deg, rgba(232,247,255,0.72), rgba(255,241,250,0.76));
    border-bottom: 1px solid rgba(216,184,238,0.45);
}

.offspring-distribution-body {
    padding: 12px;
}

.offspring-distribution-row {
    display: grid;
    grid-template-columns: minmax(100px, 1fr) 1.7fr 50px;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 8px;
}

.offspring-distribution-row:last-child {
    margin-bottom: 0;
}

.offspring-distribution-bar {
    height: 9px;
    border-radius: 999px;
    background: rgba(218,213,224,0.75);
    overflow: hidden;
}

.offspring-distribution-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(143,198,216,0.90), rgba(246,207,224,0.92));
}

.offspring-achievement-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.offspring-achievement-card {
    background: rgba(255,255,255,0.76);
    border: 1px solid rgba(216,184,238,0.58);
    border-radius: 16px;
    padding: 15px;
    text-align: center;
}

.offspring-achievement-card strong {
    display: block;
    font-size: 28px;
    color: #684b5d;
    margin-bottom: 4px;
}

.offspring-achievement-card span {
    font-size: 12px;
    font-weight: 900;
    color: #75667d;
}

.offspring-empty-state {
    padding: 24px;
    text-align: center;
    color: #75667d;
    font-weight: 800;
}

@media (max-width: 1000px) {
    .offspring-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .offspring-highlight-grid,
    .offspring-distribution-grid,
    .offspring-achievement-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== PurrPixels Find Stud Page ===== */

.find-stud-page {
    max-width: 1220px;
    margin: 18px auto 40px auto;
}

.find-stud-hero {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 22px;
    align-items: center;
    background: linear-gradient(135deg, rgba(223,243,229,0.96), rgba(232,247,255,0.94), rgba(248,220,232,0.90));
    border: 1px solid #a8cbb7;
    border-radius: 22px;
    padding: 18px 22px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    margin-bottom: 18px;
}

.find-stud-hero img {
    width: 200px;
    height: 200px;
    object-fit: contain;
}

.find-stud-title {
    font-size: 32px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 8px;
}

.find-stud-subtitle {
    font-size: 16px;
    line-height: 1.45;
    color: #5b5963;
    font-weight: 700;
    max-width: 800px;
}

.find-stud-mare-info {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.find-stud-pill {
    background: rgba(255,255,255,0.72);
    border: 1px solid #d6e4dc;
    border-radius: 999px;
    padding: 7px 12px;
    font-weight: 900;
    color: #5b5963;
}

.find-stud-filter-card {
    background: rgba(255,255,255,0.80);
    border: 1px solid #a8cbb7;
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 7px 16px rgba(0,0,0,0.06);
    margin-bottom: 18px;
}

.find-stud-filter-title {
    font-size: 22px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 12px;
}

.find-stud-filter-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    align-items: end;
}

.find-stud-filter-grid label {
    font-weight: 900;
    color: #4f4a5e;
}

.find-stud-filter-grid input,
.find-stud-filter-grid select {
    width: 100%;
    border: 1px solid #cfe2d7;
    border-radius: 10px;
    padding: 8px;
    background: rgba(255,255,255,0.94);
}

.find-stud-filter-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.find-stud-tabs {
    display: flex;
    gap: 8px;
    margin: 18px 0 -1px 16px;
    flex-wrap: wrap;
}

.find-stud-tab {
    border-radius: 14px 14px 0 0;
    padding: 10px 18px;
    font-weight: 900;
    border: 1px solid #a8cbb7;
    border-bottom: none;
    background: linear-gradient(180deg, #dff3e5, #cfe8d6);
}

.find-stud-tab.active {
    background: linear-gradient(180deg, #f8dce8, #e8f7ff);
    color: #684b5d;
}

.find-stud-list {
    border: 1px solid #a8cbb7;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255,255,255,0.74);
    box-shadow: 0 7px 16px rgba(0,0,0,0.06);
}

.find-stud-head,
.find-stud-row {
    display: grid;
    grid-template-columns: 2fr 1.15fr 1fr 1fr 1fr 150px;
    gap: 12px;
    align-items: center;
}

.find-stud-head {
    padding: 12px 16px;
    font-weight: 900;
    color: #684b5d;
    background: linear-gradient(90deg, #dff3e5 0%, #e8f7ff 50%, #f8dce8 100%);
    border-bottom: 1px solid #cfe2d7;
}

.find-stud-row {
    padding: 13px 16px;
    border-bottom: 1px solid rgba(168,203,183,0.35);
    background: rgba(255,255,255,0.48);
}

.find-stud-row:nth-child(even) {
    background: rgba(232,247,255,0.38);
}

.find-stud-row:last-child {
    border-bottom: none;
}

.find-stud-cat-cell {
    display: grid;
    grid-template-columns: 68px 1fr;
    gap: 12px;
    align-items: center;
}

.find-stud-cat-cell img {
    width: 62px;
    height: 62px;
    object-fit: contain;
}

.find-stud-name {
    font-size: 15px;
    line-height: 1.15;
    font-weight: 900;
    color: #7a2f58;
}

.find-stud-name .cat-title-prefix,
.find-stud-name .cat-real-name {
    font-size: inherit;
    line-height: inherit;
}

.find-stud-pedigree-name {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    color: #684b5d;
    overflow-wrap: anywhere;
}

.find-stud-owner {
    font-size: 13px;
    font-weight: 800;
    color: #4f7057;
}

.find-stud-value {
    font-weight: 900;
    color: #4f4a5e;
}

.find-stud-price {
    font-weight: 900;
    color: #315339;
}

.find-stud-source {
    display: inline-block;
    margin-top: 5px;
    background: rgba(255,255,255,0.74);
    border: 1px solid #d6e4dc;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 12px;
    font-weight: 900;
    color: #6a4f63;
}

.find-stud-empty {
    padding: 18px;
    color: #777;
    font-weight: 700;
}

@media (max-width: 1000px) {
    .find-stud-hero {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .find-stud-hero img {
        margin: 0 auto;
    }

    .find-stud-filter-grid {
        grid-template-columns: 1fr 1fr;
    }

    .find-stud-head {
        display: none;
    }

    .find-stud-row {
        grid-template-columns: 1fr;
    }
}

/* ===== Beautiful Landing / Login Page ===== */

.landing-page {
    min-height: calc(100vh - 120px);
    max-width: 1380px;
    margin: 22px auto 42px auto;
    padding: 28px 26px 40px 26px;
    display: grid;
    grid-template-columns: 420px 1fr 470px;
    gap: 34px;
    align-items: start;
    position: relative;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.landing-page::before,
.landing-page::after {
    content: none !important;
    display: none !important;
}

.landing-hero,
.landing-side,
.landing-auth-card,
.landing-news-card,
.landing-form-box,
.enhanced-login-box,
.enhanced-register-box {
    background-image: none !important;
}

/* ===== Left side ===== */

.landing-hero {
    width: 100%;
    max-width: 420px;
    background: linear-gradient(180deg, rgba(255,250,254,0.92), rgba(247,239,255,0.82));
    border: 1px solid rgba(217,189,235,0.88);
    border-radius: 30px;
    padding: 26px;
    box-shadow:
        0 12px 28px rgba(97,73,120,0.10),
        inset 0 0 0 1px rgba(255,255,255,0.42);
    position: relative;
    overflow: visible;
    z-index: 2;
}

/* logo fixed in the middle on desktop */
.landing-logo {
    position: fixed;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    width: 360px;
    max-width: 28vw;
    height: auto;
    z-index: 1;
    pointer-events: none;
    margin: 0;
    filter:
        drop-shadow(0 10px 22px rgba(255,255,255,0.55))
        drop-shadow(0 8px 20px rgba(110,78,140,0.12));
}

.landing-title {
    font-size: 42px;
    line-height: 1.04;
    font-weight: 900;
    color: #674d63;
    margin: 10px 0 16px 0;
    letter-spacing: -0.5px;
}

.landing-subtitle {
    font-size: 17px;
    line-height: 1.5;
    color: #5d5866;
    font-weight: 700;
    margin-bottom: 20px;
    max-width: 100%;
}

.landing-stats-row {
    display: grid;
    gap: 10px;
    margin: 18px 0 22px 0;
}

.landing-stat-pill {
    width: fit-content;
    background: rgba(255,255,255,0.86);
    border: 1px solid rgba(215,188,236,0.86);
    border-radius: 999px;
    padding: 10px 18px;
    font-weight: 900;
    color: #5f4b63;
    box-shadow: 0 5px 12px rgba(97,73,120,0.07);
}

.landing-feature-stack {
    display: grid;
    gap: 14px;
    margin-top: 6px;
}

.landing-feature-card-large {
    display: grid;
    grid-template-columns: 78px 1fr;
    gap: 14px;
    align-items: center;
    background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(250,245,255,0.74));
    border: 1px solid rgba(217,189,235,0.72);
    border-radius: 22px;
    padding: 14px;
    box-shadow: 0 7px 16px rgba(97,73,120,0.06);
}

.landing-feature-card-icon {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,238,248,0.96), rgba(240,245,255,0.92));
    border: 1px solid rgba(215,188,236,0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.landing-feature-card-icon img {
    width: 46px;
    height: 46px;
    object-fit: contain;
}

.landing-feature-card-content {
    min-width: 0;
}

.landing-feature-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 900;
    color: #8a2f5a;
    background: rgba(255,245,250,0.92);
    border: 1px solid rgba(217,189,235,0.72);
    border-radius: 999px;
    padding: 4px 10px;
    margin-bottom: 6px;
}

.landing-feature-card-title {
    font-size: 17px;
    font-weight: 900;
    color: #8a2f5a;
    margin-bottom: 5px;
    line-height: 1.15;
}

.landing-feature-card-text {
    font-size: 14px;
    line-height: 1.4;
    color: #5d5866;
    font-weight: 700;
}

/* ===== Middle spacer ===== */

.landing-page > .landing-hero {
    grid-column: 1;
}

.landing-page > .landing-side {
    grid-column: 3;
}

/* ===== Right side ===== */

.landing-side {
    display: grid;
    gap: 18px;
    width: 100%;
    max-width: 470px;
    justify-self: end;
    position: relative;
    z-index: 2;
}

.landing-auth-card,
.landing-news-card {
    background: linear-gradient(180deg, rgba(255,250,254,0.93), rgba(247,240,255,0.84));
    border: 1px solid rgba(217,189,235,0.88);
    border-radius: 30px;
    padding: 24px;
    box-shadow:
        0 12px 28px rgba(97,73,120,0.10),
        inset 0 0 0 1px rgba(255,255,255,0.42);
}

.landing-card-title {
    font-size: 34px;
    line-height: 1.05;
    font-weight: 900;
    color: #674d63;
    margin-bottom: 18px;
}

.landing-auth-grid {
    display: grid;
    gap: 18px;
}

.landing-form-box {
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(248,242,255,0.72)) !important;
    border: 1px solid rgba(217,189,235,0.78) !important;
    border-radius: 24px;
    padding: 18px;
    box-shadow:
        0 8px 18px rgba(97,73,120,0.06),
        inset 0 0 0 1px rgba(255,255,255,0.36);
}

/* login/register no longer green */
.enhanced-login-box {
    background: linear-gradient(180deg, rgba(255,252,255,0.84), rgba(246,239,255,0.76)) !important;
    border: 1px solid rgba(217,189,235,0.78) !important;
}

.enhanced-register-box {
    background: linear-gradient(180deg, rgba(255,251,254,0.84), rgba(248,241,255,0.76)) !important;
    border: 1px solid rgba(217,189,235,0.78) !important;
}

.landing-form-header {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}

.landing-form-header-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,239,248,0.96), rgba(241,245,255,0.92));
    border: 1px solid rgba(217,189,235,0.72);
    display: flex;
    align-items: center;
    justify-content: center;
}

.landing-form-header-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.landing-form-title {
    font-size: 22px;
    font-weight: 900;
    color: #8a2f5a;
    margin-bottom: 4px;
}

.landing-form-subtitle {
    font-size: 13px;
    line-height: 1.4;
    color: #5d5866;
    font-weight: 700;
}

.landing-input-group {
    margin-bottom: 10px;
}

.landing-input-label {
    display: block;
    font-size: 13px;
    font-weight: 900;
    color: #5f4b63;
    margin-bottom: 5px;
}

.landing-form-box input,
.landing-form-box select {
    width: 100%;
    border: 1px solid rgba(207,191,236,0.92);
    border-radius: 14px;
    background: rgba(241,246,255,0.92);
    padding: 12px 14px;
    font-size: 15px;
    margin: 0;
    color: #504b5e;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

.landing-form-box input:focus,
.landing-form-box select:focus {
    outline: none;
    border-color: #c7aaf1;
    box-shadow: 0 0 0 3px rgba(199,170,241,0.18);
    transform: translateY(-1px);
}

.landing-register-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.landing-main-button {
    width: 100%;
    padding: 13px 14px;
    font-size: 16px;
    font-weight: 900;
    margin-top: 10px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(249,237,255,0.92));
    border: 1px solid rgba(217,189,235,0.90);
    color: #574b63;
    box-shadow: 0 6px 14px rgba(97,73,120,0.08);
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.landing-main-button:hover {
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,232,245,0.95));
    transform: translateY(-1px);
    box-shadow: 0 9px 18px rgba(97,73,120,0.12);
}

.landing-register-button {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,232,245,0.92));
}

.landing-register-tip {
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(217,189,235,0.64);
    border-radius: 14px;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.4;
    color: #5d5866;
    font-weight: 700;
}

.landing-remember-row {
    width: 100%;
    margin: 8px 0 18px 0;
    display: flex;
    justify-content: flex-start;
}

.landing-remember-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: auto;
    max-width: max-content;
    cursor: pointer;
    color: var(--text-soft);
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    user-select: none;
}

.landing-remember-label input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--accent-strong);
    cursor: pointer;
}

.landing-remember-label span {
    white-space: nowrap;
}

.landing-message {
    min-height: 18px;
    margin: 10px 0 0 0;
    font-size: 13px;
    font-weight: 800;
    color: #8a2f5a;
}

.news-list {
    display: grid;
    gap: 12px;
}

.news-item {
    background: rgba(255,255,255,0.70);
    border: 1px solid rgba(217,189,235,0.60);
    border-radius: 18px;
    padding: 13px 14px;
    box-shadow: 0 6px 12px rgba(97,73,120,0.05);
}

.news-date {
    font-size: 12px;
    font-weight: 900;
    color: #8a2f5a;
    margin-bottom: 5px;
}

.news-title {
    font-size: 17px;
    font-weight: 900;
    color: #7a2f58;
    margin-bottom: 5px;
}

.news-text {
    font-size: 14px;
    line-height: 1.4;
    color: #5d5866;
    font-weight: 700;
}

@media (max-width: 1180px) {
    .landing-page {
        grid-template-columns: 1fr;
        gap: 22px;
        max-width: 760px;
        padding: 20px 16px 40px 16px;
    }

    .landing-page > .landing-hero,
    .landing-page > .landing-side {
        grid-column: auto;
    }

    .landing-side,
    .landing-hero {
        max-width: 100%;
        width: 100%;
    }

    .landing-logo {
        position: static;
        left: auto;
        top: auto;
        transform: none;
        display: block;
        width: 220px;
        max-width: 70%;
        margin: 0 auto 18px auto;
        pointer-events: none;
    }
}

@media (max-width: 700px) {
    .landing-title {
        font-size: 34px;
    }

    .landing-subtitle {
        font-size: 15px;
    }

    .landing-feature-card-large {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .landing-feature-card-icon {
        margin: 0 auto;
    }

    .landing-form-header {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .landing-form-header-icon {
        margin: 0 auto;
    }

    .landing-register-grid {
        grid-template-columns: 1fr;
    }

    .landing-card-title {
        font-size: 28px;
    }
}

/* ===== Final Landing/Login visual fix ===== */

/* unsichtbare/alte Extra-Flächen auf der Login-Seite komplett aus */
.landing-page::before,
.landing-page::after {
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
}

/* Layout ruhiger: links, Mitte Logo, rechts Login */
.landing-page {
    max-width: 1320px !important;
    margin: 24px auto 42px auto !important;
    padding: 28px 28px 50px 28px !important;
    display: grid !important;
    grid-template-columns: 390px 1fr 450px !important;
    gap: 42px !important;
    align-items: start !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* linker Infobereich weniger pink, heller und eleganter */
.landing-hero {
    max-width: 390px !important;
    margin-top: 0 !important;
    padding: 26px 24px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,244,253,0.58)) !important;
    border: 1px solid rgba(255,255,255,0.55) !important;
    border-radius: 30px !important;
    box-shadow:
        0 14px 32px rgba(86, 58, 112, 0.12),
        inset 0 0 0 1px rgba(255,255,255,0.42) !important;
    backdrop-filter: blur(8px) !important;
}

/* Logo mittig und beim Scrollen fest */
.landing-logo {
    position: fixed !important;
    left: 50% !important;
    top: 47% !important;
    transform: translate(-50%, -50%) !important;
    width: 330px !important;
    max-width: 25vw !important;
    margin: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    filter:
        drop-shadow(0 10px 22px rgba(255,255,255,0.60))
        drop-shadow(0 8px 18px rgba(110,78,140,0.14)) !important;
}

/* linke Überschrift etwas ruhiger */
.landing-title {
    font-size: 38px !important;
    line-height: 1.05 !important;
    color: #65475f !important;
    margin: 12px 0 16px 0 !important;
}

.landing-subtitle {
    font-size: 16px !important;
    line-height: 1.48 !important;
    color: #5b5364 !important;
}

/* kleine Pillen links hübscher */
.landing-stat-pill {
    background: rgba(255,255,255,0.78) !important;
    border: 1px solid rgba(218,188,238,0.70) !important;
    color: #5b4a63 !important;
}

/* Feature-Karten links weniger schwer */
.landing-feature-card-large {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.72), rgba(250,242,255,0.54)) !important;
    border: 1px solid rgba(218,188,238,0.55) !important;
    box-shadow: 0 7px 16px rgba(86,58,112,0.07) !important;
}

/* rechter äußerer Bereich passend rosa/lila statt blau/grün */
.landing-auth-card {
    background:
        linear-gradient(180deg, rgba(255,249,254,0.82), rgba(247,239,255,0.66)) !important;
    border: 1px solid rgba(255,255,255,0.58) !important;
    border-radius: 30px !important;
    box-shadow:
        0 14px 32px rgba(86,58,112,0.13),
        inset 0 0 0 1px rgba(255,255,255,0.40) !important;
    backdrop-filter: blur(8px) !important;
}

/* Login/Register Boxen nicht mehr grün */
.landing-form-box,
.enhanced-login-box,
.enhanced-register-box {
    background:
        linear-gradient(180deg, rgba(255,252,255,0.86), rgba(248,240,255,0.70)) !important;
    border: 1px solid rgba(218,188,238,0.68) !important;
    box-shadow:
        0 8px 18px rgba(86,58,112,0.07),
        inset 0 0 0 1px rgba(255,255,255,0.36) !important;
}

/* Icons in Login/Register nicht mehr grün */
.landing-form-header-icon {
    background:
        linear-gradient(180deg, rgba(255,238,249,0.96), rgba(240,244,255,0.88)) !important;
    border: 1px solid rgba(218,188,238,0.70) !important;
}

/* Inputs passend lila/blau */
.landing-form-box input,
.landing-form-box select {
    background: rgba(240,246,255,0.90) !important;
    border: 1px solid rgba(204,184,238,0.90) !important;
    color: #514b5f !important;
}

/* DER WICHTIGE FIX: Login Button nicht mehr grün */
.landing-form-box button,
.landing-main-button,
button.landing-main-button,
.landing-form-box button.landing-main-button {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,232,255,0.92)) !important;
    border: 1px solid rgba(218,188,238,0.88) !important;
    color: #5b4b63 !important;
    box-shadow: 0 7px 16px rgba(86,58,112,0.08) !important;
}

.landing-form-box button:hover,
.landing-main-button:hover,
button.landing-main-button:hover,
.landing-form-box button.landing-main-button:hover {
    background:
        linear-gradient(180deg, rgba(255,255,255,1), rgba(255,229,244,0.94)) !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(86,58,112,0.12) !important;
}

/* Register Button ebenfalls passend */
.landing-register-button,
button.landing-register-button {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,232,246,0.92)) !important;
    border: 1px solid rgba(218,188,238,0.88) !important;
}

/* Mobile/kleinere Fenster sauber */
@media (max-width: 1180px) {
    .landing-page {
        grid-template-columns: 1fr !important;
        max-width: 760px !important;
        gap: 22px !important;
    }

    .landing-hero {
        max-width: 100% !important;
        margin-top: 0 !important;
    }

    .landing-auth-card {
        max-width: 100% !important;
    }

    .landing-logo {
        position: static !important;
        transform: none !important;
        width: 230px !important;
        max-width: 70% !important;
        margin: 0 auto 16px auto !important;
        display: block !important;
    }
}

/* ===== PurrPixels News Page ===== */

.news-page {
    max-width: 1150px;
    margin: 18px auto 40px auto;
    padding: 18px;
    border-radius: 28px;
}

.news-hero {
    background: rgba(255,255,255,0.72);
    border: 1px solid #a8cbb7;
    border-radius: 24px;
    padding: 24px 26px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    margin-bottom: 20px;
    backdrop-filter: blur(5px);
}

.news-hero-title {
    font-size: 34px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 8px;
}

.news-hero-text {
    font-size: 16px;
    line-height: 1.45;
    color: #5b5963;
    font-weight: 700;
    max-width: 820px;
}

.news-board {
    display: grid;
    gap: 18px;
}

.news-post {
    background: rgba(255,255,255,0.82);
    border: 1px solid #a8cbb7;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 7px 16px rgba(0,0,0,0.07);
    backdrop-filter: blur(4px);
}

.news-post-head {
    background: linear-gradient(90deg, rgba(223,243,229,0.88) 0%, rgba(232,247,255,0.88) 50%, rgba(248,220,232,0.88) 100%);
    border-bottom: 1px solid #cfe2d7;
    padding: 14px 18px;
}

.news-post-date {
    font-size: 13px;
    font-weight: 900;
    color: #4f7057;
    margin-bottom: 4px;
}

.news-post-title {
    font-size: 23px;
    font-weight: 900;
    color: #7a2f58;
}

.news-post-body {
    padding: 16px 18px;
    color: #4f4a5e;
    font-weight: 700;
    line-height: 1.5;
}

.news-post-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.news-tag {
    background: rgba(255,255,255,0.78);
    border: 1px solid #d6e4dc;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 900;
    color: #6a4f63;
}

.news-pagination-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 24px auto 8px auto;
}

.news-page-numbers {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.news-page-button {
    min-width: 42px;
    border-radius: 999px;
    padding: 9px 14px;
    font-weight: 900;
    border: 1px solid rgba(168,203,183,0.72);
    background: rgba(255,255,255,0.82);
    color: #684b5d;
    box-shadow: 0 4px 10px rgba(88,64,120,0.08);
}

.news-page-button:hover:not(:disabled) {
    transform: translateY(-1px);
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,241,250,0.92));
}

.news-page-button.active {
    background: linear-gradient(180deg, #f8dce8, #e8f7ff);
    color: #7a2f58;
    border-color: rgba(216,184,238,0.86);
}

.news-page-button:disabled {
    opacity: 0.58;
    cursor: default;
}

.news-pagination-info {
    text-align: center;
    font-size: 13px;
    font-weight: 900;
    color: #7d6b81;
    margin-bottom: 12px;
}

/* ===== Account Settings ===== */

.account-settings-page {
    max-width: 1050px;
    margin: 18px auto 40px auto;
}

.account-settings-hero {
    background: linear-gradient(135deg, rgba(223,243,229,0.96), rgba(232,247,255,0.94), rgba(248,220,232,0.90));
    border: 1px solid #a8cbb7;
    border-radius: 22px;
    padding: 20px 22px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    margin-bottom: 18px;
}

.account-settings-title {
    font-size: 30px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 6px;
}

.account-settings-subtitle {
    color: #5b5963;
    font-weight: 700;
}

.account-settings-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 18px;
    align-items: start;
}

.account-settings-card {
    background: rgba(255,255,255,0.82);
    border: 1px solid #a8cbb7;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}

.account-settings-card-title {
    font-size: 22px;
    font-weight: 900;
    color: #7a2f58;
    margin-bottom: 14px;
}

.account-settings-field {
    margin-bottom: 15px;
}

.account-settings-field label {
    display: block;
    font-weight: 900;
    color: #4f4a5e;
    margin-bottom: 6px;
}

.account-settings-field input {
    width: 100%;
    border: 1px solid #cfe2d7;
    border-radius: 12px;
    background: rgba(255,255,255,0.94);
    padding: 10px 12px;
    font-size: 15px;
}

.avatar-preview-box {
    text-align: center;
}

.avatar-preview {
    width: 190px;
    height: 190px;
    border-radius: 28px;
    object-fit: cover;
    background: rgba(255,255,255,0.75);
    border: 1px solid #a8cbb7;
    box-shadow: inset 0 0 0 4px rgba(255,255,255,0.45);
    margin-bottom: 14px;
}

.avatar-placeholder {
    width: 190px;
    height: 190px;
    border-radius: 28px;
    background: linear-gradient(135deg, #dff3e5, #e8f7ff, #f8dce8);
    border: 1px solid #a8cbb7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 72px;
    margin: 0 auto 14px auto;
}

@media (max-width: 850px) {
    .account-settings-layout {
        grid-template-columns: 1fr;
    }
}

/* ===== Account Settings ===== */

.account-settings-page {
    max-width: 1180px;
    margin: 18px auto 40px auto;
}

.account-settings-hero {
    display: grid;
    grid-template-columns: 1fr 160px;
    gap: 20px;
    align-items: center;
    background: linear-gradient(135deg, rgba(223,243,229,0.96), rgba(232,247,255,0.94), rgba(248,220,232,0.90));
    border: 1px solid #a8cbb7;
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    margin-bottom: 20px;
}

.account-settings-kicker {
    font-weight: 900;
    color: #4f7057;
    margin-bottom: 6px;
}

.account-settings-title {
    font-size: 34px;
    font-weight: 900;
    color: #684b5d;
}

.account-settings-subtitle {
    margin-top: 8px;
    color: #5b5963;
    font-weight: 700;
}

.account-avatar-preview-wrap {
    display: flex;
    justify-content: center;
}

.account-avatar-preview,
.account-avatar-preview-empty {
    width: 128px;
    height: 128px;
    border-radius: 28px;
    object-fit: cover;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(168,203,183,0.75);
    box-shadow: inset 0 0 0 3px rgba(255,255,255,0.45);
}

.account-avatar-preview-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 54px;
}

.account-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.account-settings-card {
    background: rgba(255,255,255,0.80);
    border: 1px solid #a8cbb7;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}

.account-settings-card-title {
    font-size: 22px;
    font-weight: 900;
    color: #7a2f58;
    margin-bottom: 14px;
}

.account-settings-field {
    margin-bottom: 14px;
}

.account-settings-field label {
    display: block;
    font-weight: 900;
    color: #4f4a5e;
    margin-bottom: 6px;
}

.account-settings-field input,
.account-settings-field select {
    width: 100%;
    border: 1px solid #cfe2d7;
    border-radius: 12px;
    background: rgba(255,255,255,0.94);
    padding: 10px 12px;
    font-size: 15px;
}

@media (max-width: 850px) {
    .account-settings-hero,
    .account-settings-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Cleaner Breeder Page ===== */

.breeder-new-page {
    max-width: 1220px;
    margin: 18px auto 40px auto;
}

.breeder-new-hero {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 22px;
    align-items: center;
    background: linear-gradient(135deg, rgba(223,243,229,0.96), rgba(232,247,255,0.94), rgba(248,220,232,0.90));
    border: 1px solid #a8cbb7;
    border-radius: 24px;
    padding: 22px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    margin-bottom: 18px;
}

.breeder-new-avatar {
    width: 130px;
    height: 130px;
    border-radius: 30px;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(168,203,183,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,0.45);
}

.breeder-new-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.breeder-new-avatar-empty {
    font-size: 58px;
}

.breeder-new-name {
    font-size: 38px;
    font-weight: 900;
    color: #684b5d;
}

.breeder-new-cattery {
    font-size: 18px;
    font-weight: 800;
    color: #4f7057;
    margin-top: 3px;
}

.breeder-new-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}

.breeder-new-meta span,
.breeder-role-badge {
    background: rgba(255,255,255,0.72);
    border: 1px solid #d6e4dc;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 900;
    color: #5b5963;
}

.breeder-role-badge.admin {
    color: #8a4f6d;
    background: #fff1f7;
}

.breeder-role-badge.moderator {
    color: #4f7f91;
    background: #eef8ff;
}

.breeder-role-badge.player {
    color: #4f7057;
    background: #f3fbf6;
}

.breeder-new-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.breeder-new-actions button {
    border-radius: 999px;
    font-weight: 900;
}

.breeder-new-stats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}

.breeder-stat-card-new {
    background: rgba(255,255,255,0.80);
    border: 1px solid #a8cbb7;
    border-radius: 18px;
    padding: 14px 10px;
    text-align: center;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}

.breeder-stat-value-new {
    font-size: 26px;
    font-weight: 900;
    color: #7a2f58;
}

.breeder-stat-label-new {
    font-size: 13px;
    font-weight: 900;
    color: #6a5d70;
    margin-top: 4px;
}

.breeder-new-layout {
    display: grid;
    grid-template-columns: 1.35fr 0.75fr;
    gap: 18px;
    align-items: start;
}

.breeder-new-card {
    background: rgba(255,255,255,0.80);
    border: 1px solid #a8cbb7;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 7px 16px rgba(0,0,0,0.06);
    margin-bottom: 18px;
}

.breeder-new-card-title {
    background: linear-gradient(90deg, #dff3e5 0%, #e8f7ff 50%, #f8dce8 100%);
    border-bottom: 1px solid #cfe2d7;
    padding: 13px 16px;
    font-size: 21px;
    font-weight: 900;
    color: #684b5d;
}

.breeder-new-card-body {
    padding: 16px;
}

.breeder-new-presentation {
    min-height: 140px;
    line-height: 1.55;
    color: #4f4a5e;
    font-weight: 600;
}

.breeder-presentation-edit {
    width: 100%;
    min-height: 180px;
    border: 1px solid #cfe2d7;
    border-radius: 14px;
    padding: 12px;
    background: rgba(255,255,255,0.90);
    color: #4f4a5e;
    font-family: Arial, sans-serif;
}

.breeder-cat-button-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 16px;
}

.breeder-cat-button-grid button {
    min-height: 52px;
    font-weight: 900;
}

.breeder-trophy-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 16px;
}

.breeder-trophy-card-new {
    text-align: center;
    background: rgba(255,255,255,0.65);
    border: 1px solid rgba(168,203,183,0.55);
    border-radius: 16px;
    padding: 14px 10px;
}

.breeder-trophy-icon {
    font-size: 36px;
    margin-bottom: 5px;
}

.breeder-trophy-label {
    font-weight: 900;
    color: #5f536a;
}

.breeder-trophy-count {
    display: inline-block;
    margin-top: 7px;
    background: #ffffff;
    border: 1px solid #d6e4dc;
    border-radius: 999px;
    padding: 4px 12px;
    font-weight: 900;
    color: #7a2f58;
}

.breeder-debug-buttons {
    padding: 14px 16px 0 16px;
}

.breeder-detail-list {
    padding: 14px 16px;
}

.breeder-detail-list div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(79,74,94,0.08);
}

.breeder-detail-list div:last-child {
    border-bottom: none;
}

.breeder-detail-list b {
    color: #684b5d;
}

.breeder-detail-list span {
    font-weight: 800;
    color: #4f4a5e;
    text-align: right;
}

.breeder-big-greeting {
    text-align: center;
    font-size: 42px;
    font-weight: 900;
    color: #7a2f58;
    padding-top: 14px;
}

.friend-list.clean,
.greeting-list.clean {
    margin: 14px 16px;
}

@media (max-width: 1050px) {
    .breeder-new-stats {
        grid-template-columns: repeat(3, 1fr);
    }

    .breeder-new-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .breeder-new-hero {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .breeder-new-avatar {
        margin: 0 auto;
    }

    .breeder-new-actions,
    .breeder-new-meta {
        justify-content: center;
    }

    .breeder-new-stats,
    .breeder-trophy-grid,
    .breeder-cat-button-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ===== PurrPixels All Breeds Page ===== */

.breeds-page {
    max-width: 1220px;
    margin: 18px auto 40px auto;
}

.breeds-hero {
    background: linear-gradient(135deg, rgba(223,243,229,0.96), rgba(232,247,255,0.94), rgba(248,220,232,0.90));
    border: 1px solid #a8cbb7;
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 20px;
    align-items: center;
    margin-bottom: 18px;
}

.breeds-hero-title {
    font-size: 34px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 8px;
}

.breeds-hero-text {
    font-size: 16px;
    font-weight: 700;
    color: #5b5963;
    line-height: 1.45;
}

.breeds-hero-stats {
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(168,203,183,0.65);
    border-radius: 18px;
    padding: 16px;
    text-align: center;
}

.breeds-stat-number {
    font-size: 38px;
    font-weight: 900;
    color: #7a2f58;
}

.breeds-stat-label {
    font-size: 14px;
    font-weight: 900;
    color: #5b5963;
}

.breeds-tools {
    background: rgba(255,255,255,0.80);
    border: 1px solid #a8cbb7;
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
    margin-bottom: 18px;
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 14px;
    align-items: center;
}

.breeds-search-wrap {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.92);
    border: 1px solid #cfe2d7;
    border-radius: 999px;
    padding: 6px 12px 6px 16px;
}

.breeds-search-wrap input {
    border: none;
    outline: none;
    background: transparent;
    flex: 1;
    padding: 9px;
    font-size: 15px;
    color: #4f4a5e;
}

.breeds-search-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #8fc6d8;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

.breeds-sort-select {
    width: 100%;
    border: 1px solid #cfe2d7;
    border-radius: 12px;
    background: rgba(255,255,255,0.94);
    padding: 10px;
    font-weight: 700;
    color: #4f4a5e;
}

.breeds-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
    gap: 18px;
}

.breed-card-beauty {
    background: rgba(255,255,255,0.82);
    border: 1px solid #a8cbb7;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 7px 16px rgba(0,0,0,0.07);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.breed-card-beauty:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}

.breed-card-top {
    min-height: 135px;
    background: linear-gradient(180deg, rgba(232,247,255,0.86), rgba(255,241,247,0.82));
    border-bottom: 1px solid rgba(168,203,183,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.breed-card-icon {
    width: 125px;
    height: 125px;
    border-radius: 28px;
    background: rgba(255,255,255,0.62);
    border: 1px solid rgba(168,203,183,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.breed-card-cat-image {
    width: 115px;
    height: 115px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 7px 12px rgba(0,0,0,0.12));
}

.breed-card-count-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255,255,255,0.86);
    border: 1px solid #d6e4dc;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 900;
    color: #7a2f58;
}

.breed-card-body {
    padding: 15px 16px 16px 16px;
}

.breed-card-name {
    font-size: 21px;
    font-weight: 900;
    color: #7a2f58;
    margin-bottom: 8px;
}

.breed-card-info {
    display: grid;
    gap: 6px;
    margin-bottom: 14px;
}

.breed-card-info div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(79,74,94,0.08);
    padding-bottom: 5px;
    font-size: 14px;
}

.breed-card-info b {
    color: #684b5d;
}

.breed-card-button {
    width: 100%;
    padding: 10px 12px;
    font-weight: 900;
}

.breeds-empty {
    background: rgba(255,255,255,0.78);
    border: 1px solid #a8cbb7;
    border-radius: 18px;
    padding: 18px;
    color: #777;
    font-weight: 700;
}

@media (max-width: 850px) {
    .breeds-hero,
    .breeds-tools {
        grid-template-columns: 1fr;
    }

    .breeds-hero {
        text-align: center;
    }
}

/* ===== PurrPixels Breed Detail Page ===== */

.breed-detail-page {
    max-width: 1220px;
    margin: 18px auto 40px auto;
}

.breed-detail-hero {
    background: linear-gradient(135deg, rgba(223,243,229,0.96), rgba(232,247,255,0.94), rgba(248,220,232,0.90));
    border: 1px solid #a8cbb7;
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    display: grid;
    grid-template-columns: 170px 1fr 250px;
    gap: 20px;
    align-items: center;
    margin-bottom: 18px;
}

.breed-detail-icon {
    width: 145px;
    height: 145px;
    border-radius: 34px;
    background: rgba(255,255,255,0.68);
    border: 1px solid rgba(168,203,183,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 72px;
    box-shadow: inset 0 0 0 4px rgba(255,255,255,0.35);
}

.breed-detail-title {
    font-size: 36px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 8px;
}

.breed-detail-subtitle {
    color: #5b5963;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
}

.breed-detail-stats {
    background: rgba(255,255,255,0.76);
    border: 1px solid rgba(168,203,183,0.65);
    border-radius: 18px;
    padding: 14px;
    display: grid;
    gap: 10px;
}

.breed-detail-stat {
    background: rgba(255,255,255,0.62);
    border: 1px solid rgba(168,203,183,0.45);
    border-radius: 14px;
    padding: 10px 12px;
    text-align: center;
}

.breed-detail-stat-number {
    font-size: 27px;
    font-weight: 900;
    color: #7a2f58;
}

.breed-detail-stat-label {
    font-size: 13px;
    font-weight: 900;
    color: #5b5963;
}

.breed-detail-tools {
    background: rgba(255,255,255,0.80);
    border: 1px solid #a8cbb7;
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
    margin-bottom: 18px;
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 14px;
    align-items: center;
}

.breed-detail-search-wrap {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.92);
    border: 1px solid #cfe2d7;
    border-radius: 999px;
    padding: 6px 12px 6px 16px;
}

.breed-detail-search-wrap input {
    border: none;
    outline: none;
    background: transparent;
    flex: 1;
    padding: 9px;
    font-size: 15px;
    color: #4f4a5e;
}

.breed-detail-search-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #8fc6d8;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

.breed-detail-sort {
    width: 100%;
    border: 1px solid #cfe2d7;
    border-radius: 12px;
    background: rgba(255,255,255,0.94);
    padding: 10px;
    font-weight: 700;
    color: #4f4a5e;
}

.breed-colors-grid-beauty {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
    gap: 18px;
}

.breed-color-card-beauty {
    background: rgba(255,255,255,0.82);
    border: 1px solid #a8cbb7;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 7px 16px rgba(0,0,0,0.07);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.breed-color-card-beauty:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}

.breed-color-top {
    min-height: 128px;
    background: linear-gradient(180deg, rgba(232,247,255,0.86), rgba(255,241,247,0.82));
    border-bottom: 1px solid rgba(168,203,183,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.breed-color-cat-image {
    width: 118px;
    height: 118px;
    object-fit: contain;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.10));
}

.breed-color-count-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255,255,255,0.86);
    border: 1px solid #d6e4dc;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 900;
    color: #7a2f58;
}

.breed-color-body {
    padding: 15px 16px 16px 16px;
}

.breed-color-title {
    font-size: 21px;
    font-weight: 900;
    color: #7a2f58;
    margin-bottom: 8px;
    text-transform: capitalize;
}

.breed-color-info {
    display: grid;
    gap: 6px;
    margin-bottom: 14px;
}

.breed-color-info div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(79,74,94,0.08);
    padding-bottom: 5px;
    font-size: 14px;
}

.breed-color-info b {
    color: #684b5d;
}

.breed-detail-empty {
    background: rgba(255,255,255,0.78);
    border: 1px solid #a8cbb7;
    border-radius: 18px;
    padding: 18px;
    color: #777;
    font-weight: 700;
}

@media (max-width: 950px) {
    .breed-detail-hero,
    .breed-detail-tools {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .breed-detail-icon {
        margin: 0 auto;
    }
}

/* ===== PurrPixels Community / Player Search / Mailbox / Friends ===== */

.community-page {
    max-width: 1150px;
    margin: 18px auto 40px auto;
}

.community-hero {
    background: linear-gradient(135deg, rgba(223,243,229,0.96), rgba(232,247,255,0.94), rgba(248,220,232,0.90));
    border: 1px solid #a8cbb7;
    border-radius: 24px;
    padding: 22px 24px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    margin-bottom: 18px;
}

.community-kicker {
    font-weight: 900;
    color: #4f7057;
    margin-bottom: 6px;
}

.community-title {
    font-size: 34px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 8px;
}

.community-subtitle {
    color: #5b5963;
    font-weight: 700;
    line-height: 1.45;
    max-width: 780px;
}

.community-card {
    background: rgba(255,255,255,0.82);
    border: 1px solid #a8cbb7;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 7px 16px rgba(0,0,0,0.07);
    margin-bottom: 18px;
}

.community-card-title {
    background: linear-gradient(90deg, #dff3e5 0%, #e8f7ff 50%, #f8dce8 100%);
    border-bottom: 1px solid #cfe2d7;
    padding: 13px 16px;
    font-size: 22px;
    font-weight: 900;
    color: #684b5d;
}

.community-card-body {
    padding: 16px;
}

.community-search-row {
    display: grid;
    grid-template-columns: 1fr 150px;
    gap: 12px;
    align-items: center;
}

.community-search-wrap {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.94);
    border: 1px solid #cfe2d7;
    border-radius: 999px;
    padding: 6px 12px 6px 16px;
}

.community-search-wrap input {
    border: none;
    outline: none;
    background: transparent;
    flex: 1;
    padding: 9px;
    font-size: 15px;
    color: #4f4a5e;
}

.community-search-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #8fc6d8;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

.community-result-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.82), rgba(248,255,246,0.68));
    border: 1px solid #a8cbb7;
    border-radius: 20px;
    padding: 18px;
    box-shadow: 0 7px 16px rgba(0,0,0,0.06);
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 16px;
    align-items: center;
}

.community-avatar {
    width: 82px;
    height: 82px;
    border-radius: 24px;
    background: linear-gradient(135deg, #dff3e5, #e8f7ff, #f8dce8);
    border: 1px solid rgba(168,203,183,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    overflow: hidden;
}

.community-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.community-player-name {
    font-size: 24px;
    font-weight: 900;
    color: #7a2f58;
}

.community-player-cattery {
    font-weight: 800;
    color: #4f7057;
    margin-top: 3px;
}

.community-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 12px;
}

.community-actions button,
.community-search-row button,
.community-message-form button {
    font-weight: 900;
    border-radius: 999px;
}

.community-empty {
    background: rgba(255,255,255,0.78);
    border: 1px solid #a8cbb7;
    border-radius: 18px;
    padding: 18px;
    color: #777;
    font-weight: 700;
}

.mailbox-top-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.mail-message-list {
    display: grid;
    gap: 14px;
}

.mail-message-card {
    background: rgba(255,255,255,0.82);
    border: 1px solid #a8cbb7;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 7px 16px rgba(0,0,0,0.07);
}

.mail-message-head {
    background: linear-gradient(90deg, #dff3e5 0%, #e8f7ff 50%, #f8dce8 100%);
    border-bottom: 1px solid #cfe2d7;
    padding: 13px 16px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
}

.mail-subject {
    font-size: 20px;
    font-weight: 900;
    color: #7a2f58;
}

.mail-date {
    font-size: 13px;
    font-weight: 900;
    color: #4f7057;
}

.mail-from {
    font-size: 14px;
    font-weight: 900;
    color: #684b5d;
    margin-top: 3px;
}

.mail-body {
    padding: 16px;
    color: #4f4a5e;
    font-weight: 700;
    line-height: 1.5;
}

.community-message-form {
    display: grid;
    gap: 12px;
}

.community-message-form input,
.community-message-form textarea {
    width: 100%;
    border: 1px solid #cfe2d7;
    border-radius: 14px;
    background: rgba(255,255,255,0.94);
    padding: 11px 13px;
    font-size: 15px;
    color: #4f4a5e;
}

.community-message-form textarea {
    min-height: 170px;
    resize: vertical;
    font-family: Arial, sans-serif;
}

.friends-layout {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 18px;
    align-items: start;
}

.friend-request-card,
.friend-clean-card {
    background: rgba(255,255,255,0.78);
    border: 1px solid #a8cbb7;
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
    margin-bottom: 12px;
}

.friend-request-name,
.friend-clean-name {
    font-size: 19px;
    font-weight: 900;
    color: #7a2f58;
}

.friend-clean-cattery {
    font-size: 14px;
    font-weight: 800;
    color: #4f7057;
    margin-top: 3px;
}

.friend-clean-meta {
    color: #7b7183;
    font-weight: 700;
    margin-top: 6px;
}

.friend-clean-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.friend-add-box {
    background: linear-gradient(135deg, rgba(255,255,255,0.82), rgba(232,247,255,0.58));
    border: 1px solid #a8cbb7;
    border-radius: 18px;
    padding: 14px;
    margin-bottom: 18px;
}

.friend-add-box input {
    width: 100%;
    border: 1px solid #cfe2d7;
    border-radius: 999px;
    background: rgba(255,255,255,0.94);
    padding: 11px 14px;
    font-size: 15px;
    margin-bottom: 10px;
}

@media (max-width: 850px) {
    .community-search-row,
    .community-result-card,
    .friends-layout {
        grid-template-columns: 1fr;
    }

    .community-avatar {
        margin: 0 auto;
    }

    .community-result-card {
        text-align: center;
    }

    .community-actions {
        justify-content: center;
    }

    .mail-message-head {
        grid-template-columns: 1fr;
    }
}

/* ===== PurrPixels Currency Shops ===== */

.currency-shop-page {
    max-width: 1150px;
    margin: 18px auto 40px auto;
}

.currency-shop-hero {
    display: grid;
    grid-template-columns: 1fr 190px;
    gap: 20px;
    align-items: center;
    background: linear-gradient(135deg, rgba(223,243,229,0.96), rgba(232,247,255,0.94), rgba(248,220,232,0.90));
    border: 1px solid #a8cbb7;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    margin-bottom: 18px;
}

.currency-shop-kicker {
    font-weight: 900;
    color: #4f7057;
    margin-bottom: 6px;
}

.currency-shop-title {
    font-size: 36px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 8px;
}

.currency-shop-subtitle {
    color: #5b5963;
    font-weight: 700;
    line-height: 1.45;
    max-width: 780px;
}

.currency-shop-hero-icon {
    width: 150px;
    height: 150px;
    border-radius: 34px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(168,203,183,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    box-shadow: inset 0 0 0 4px rgba(255,255,255,0.38);
}

.currency-shop-hero-icon img {
    width: 92px;
    height: 92px;
    object-fit: contain;
}

.currency-shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
    gap: 18px;
}

.currency-pack-card {
    background: rgba(255,255,255,0.82);
    border: 1px solid #a8cbb7;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 7px 16px rgba(0,0,0,0.07);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.currency-pack-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}

.currency-pack-top {
    min-height: 145px;
    background: linear-gradient(180deg, rgba(232,247,255,0.86), rgba(255,241,247,0.82));
    border-bottom: 1px solid rgba(168,203,183,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.currency-pack-icon {
    width: 92px;
    height: 92px;
    object-fit: contain;
    filter: drop-shadow(0 7px 10px rgba(0,0,0,0.10));
}

.currency-pack-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255,255,255,0.88);
    border: 1px solid #d6e4dc;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 900;
    color: #7a2f58;
}

.currency-pack-body {
    padding: 16px;
}

.currency-pack-name {
    font-size: 23px;
    font-weight: 900;
    color: #7a2f58;
    margin-bottom: 8px;
}

.currency-pack-info {
    display: grid;
    gap: 7px;
    margin-bottom: 15px;
}

.currency-pack-info div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(79,74,94,0.08);
    padding-bottom: 6px;
    font-size: 14px;
}

.currency-pack-info b {
    color: #684b5d;
}

.currency-pack-info span {
    font-weight: 800;
    color: #4f4a5e;
    text-align: right;
}

.currency-pack-button {
    width: 100%;
    padding: 11px 14px;
    font-weight: 900;
    border-radius: 999px;
}

.currency-shop-section {
    margin-top: 22px;
}

.currency-shop-section-title {
    font-size: 26px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 12px;
}

.voucher-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.84), rgba(232,247,255,0.70), rgba(248,220,232,0.64));
    border: 1px solid #a8cbb7;
    border-radius: 22px;
    padding: 18px;
    box-shadow: 0 7px 16px rgba(0,0,0,0.07);
    display: grid;
    grid-template-columns: 1fr 170px;
    gap: 14px;
    align-items: end;
}

.voucher-field label {
    display: block;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 7px;
}

.voucher-field input {
    width: 100%;
    border: 1px solid #cfe2d7;
    border-radius: 999px;
    background: rgba(255,255,255,0.94);
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 800;
    color: #4f4a5e;
    text-transform: uppercase;
}

.voucher-card button {
    width: 100%;
    padding: 12px 14px;
    font-weight: 900;
    border-radius: 999px;
}

.currency-note-box {
    background: rgba(255,255,255,0.76);
    border: 1px solid rgba(168,203,183,0.65);
    border-radius: 18px;
    padding: 14px 16px;
    color: #5b5963;
    font-weight: 700;
    line-height: 1.45;
    margin-bottom: 18px;
}

.diamond-offer-price {
    font-size: 24px;
    font-weight: 900;
    color: #4f7057;
}

@media (max-width: 850px) {
    .currency-shop-hero,
    .voucher-card {
        grid-template-columns: 1fr;
    }

    .currency-shop-hero {
        text-align: center;
    }

    .currency-shop-hero-icon {
        margin: 0 auto;
    }
}

/* ===== PurrPixels Admin Panel ===== */

.admin-page {
    max-width: 1220px;
    margin: 18px auto 40px auto;
}

.admin-hero {
    display: grid;
    grid-template-columns: 1fr 160px;
    gap: 22px;
    align-items: center;
    background: linear-gradient(135deg, rgba(223,243,229,0.96), rgba(232,247,255,0.94), rgba(248,220,232,0.90));
    border: 1px solid #a8cbb7;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    margin-bottom: 18px;
}

.admin-kicker {
    font-weight: 900;
    color: #4f7057;
    margin-bottom: 6px;
}

.admin-title {
    font-size: 36px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 8px;
}

.admin-subtitle {
    color: #5b5963;
    font-weight: 700;
    line-height: 1.45;
    max-width: 820px;
}

.admin-hero-icon {
    width: 130px;
    height: 130px;
    border-radius: 30px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(168,203,183,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 58px;
    margin-left: auto;
    box-shadow: inset 0 0 0 4px rgba(255,255,255,0.38);
}

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.admin-stat-card {
    background: rgba(255,255,255,0.82);
    border: 1px solid #a8cbb7;
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
    text-align: center;
}

.admin-stat-value {
    font-size: 30px;
    font-weight: 900;
    color: #7a2f58;
}

.admin-stat-label {
    font-size: 13px;
    font-weight: 900;
    color: #6a5d70;
    margin-top: 4px;
}

.admin-tools-card {
    background: rgba(255,255,255,0.80);
    border: 1px solid #a8cbb7;
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
    margin-bottom: 18px;
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 14px;
    align-items: center;
}

.admin-search-wrap {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.92);
    border: 1px solid #cfe2d7;
    border-radius: 999px;
    padding: 6px 12px 6px 16px;
}

.admin-search-wrap input {
    border: none;
    outline: none;
    background: transparent;
    flex: 1;
    padding: 9px;
    font-size: 15px;
    color: #4f4a5e;
}

.admin-search-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #8fc6d8;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

.admin-filter-select {
    width: 100%;
    border: 1px solid #cfe2d7;
    border-radius: 12px;
    background: rgba(255,255,255,0.94);
    padding: 10px;
    font-weight: 700;
    color: #4f4a5e;
}

.admin-report-grid {
    display: grid;
    gap: 18px;
}

.admin-report-card {
    background: rgba(255,255,255,0.84);
    border: 1px solid #a8cbb7;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 7px 16px rgba(0,0,0,0.07);
}

.admin-report-head {
    background: linear-gradient(90deg, #dff3e5 0%, #e8f7ff 50%, #f8dce8 100%);
    border-bottom: 1px solid #cfe2d7;
    padding: 14px 18px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;
}

.admin-report-title {
    font-size: 22px;
    font-weight: 900;
    color: #684b5d;
}

.admin-report-date {
    font-size: 13px;
    font-weight: 900;
    color: #4f7057;
    margin-top: 3px;
}

.admin-status-badge {
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 900;
    background: rgba(255,255,255,0.86);
    border: 1px solid #d6e4dc;
    color: #7a2f58;
    white-space: nowrap;
}

.admin-status-badge.closed {
    color: #4f7057;
    background: #f3fbf6;
}

.admin-report-body {
    padding: 16px 18px 18px 18px;
}

.admin-report-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.admin-info-mini {
    background: rgba(255,255,255,0.68);
    border: 1px solid rgba(168,203,183,0.52);
    border-radius: 14px;
    padding: 10px 12px;
}

.admin-info-label {
    font-size: 12px;
    font-weight: 900;
    color: #786b7c;
    margin-bottom: 4px;
}

.admin-info-value {
    font-size: 15px;
    font-weight: 900;
    color: #4f4a5e;
    word-break: break-word;
}

.admin-report-details {
    background: linear-gradient(180deg, rgba(248,255,246,0.72), rgba(255,247,251,0.62));
    border: 1px solid #cfe2d7;
    border-radius: 16px;
    padding: 14px;
    color: #4f4a5e;
    font-weight: 700;
    line-height: 1.45;
    margin-bottom: 14px;
}

.admin-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.admin-actions-row button {
    border-radius: 999px;
    font-weight: 900;
}

.admin-danger-btn {
    background: linear-gradient(180deg, #fff1f7, #f8dce8);
    border-color: #e8b9cd;
    color: #8a2f5a;
}

.admin-empty-card {
    background: rgba(255,255,255,0.80);
    border: 1px solid #a8cbb7;
    border-radius: 18px;
    padding: 18px;
    color: #777;
    font-weight: 700;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}

@media (max-width: 1000px) {
    .admin-stats-grid,
    .admin-report-info-grid {
        grid-template-columns: 1fr 1fr;
    }

    .admin-tools-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .admin-hero {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .admin-hero-icon {
        margin: 0 auto;
    }

    .admin-stats-grid,
    .admin-report-info-grid {
        grid-template-columns: 1fr;
    }

    .admin-report-head {
        grid-template-columns: 1fr;
    }
}

/* ===== PurrPixels My Cats / Breed Groups ===== */

.my-cats-page {
    max-width: 1220px;
    margin: 18px auto 40px auto;
}

.my-cats-hero {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 20px;
    align-items: center;
    background: linear-gradient(135deg, rgba(223,243,229,0.96), rgba(232,247,255,0.94), rgba(248,220,232,0.90));
    border: 1px solid #a8cbb7;
    border-radius: 24px;
    padding: 22px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    margin-bottom: 18px;
}

.my-cats-hero-icon-img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.my-cats-kicker {
    font-weight: 900;
    color: #4f7057;
    margin-bottom: 6px;
}

.my-cats-title {
    font-size: 36px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 8px;
}

.my-cats-subtitle {
    color: #5b5963;
    font-weight: 700;
    line-height: 1.45;
    max-width: 780px;
}

.my-cats-hero-icon {
    width: 140px;
    height: 140px;
    border-radius: 34px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(168,203,183,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 62px;
    margin-left: auto;
    box-shadow: inset 0 0 0 4px rgba(255,255,255,0.38);
}

.my-cats-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.my-cats-stat-card {
    background: rgba(255,255,255,0.82);
    border: 1px solid #a8cbb7;
    border-radius: 18px;
    padding: 14px 12px;
    text-align: center;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}

.my-cats-stat-value {
    font-size: 28px;
    font-weight: 900;
    color: #7a2f58;
}

.my-cats-stat-label {
    font-size: 13px;
    font-weight: 900;
    color: #6a5d70;
    margin-top: 4px;
}

.my-cats-controls {
    background: rgba(255,255,255,0.80);
    border: 1px solid #a8cbb7;
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
    margin-bottom: 18px;
}

.my-cats-control-grid {
    display: grid;
    grid-template-columns: 1fr 220px 220px;
    gap: 14px;
    align-items: end;
}

.my-cats-search-wrap {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.92);
    border: 1px solid #cfe2d7;
    border-radius: 999px;
    padding: 6px 12px 6px 16px;
}

.my-cats-search-wrap input {
    border: none;
    outline: none;
    background: transparent;
    flex: 1;
    padding: 9px;
    font-size: 15px;
    color: #4f4a5e;
}

.my-cats-search-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #8fc6d8;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

.my-cats-control-field label {
    display: block;
    font-weight: 900;
    color: #4f4a5e;
    margin-bottom: 6px;
}

.my-cats-control-field select {
    width: 100%;
    border: 1px solid #cfe2d7;
    border-radius: 12px;
    background: rgba(255,255,255,0.94);
    padding: 10px;
    font-weight: 700;
    color: #4f4a5e;
}

.my-cats-breed-tabs {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.my-cats-breed-tab {
    background: rgba(255,255,255,0.74);
    border: 1px solid #a8cbb7;
    border-radius: 999px;
    padding: 9px 14px;
    font-weight: 900;
    color: #5b5963;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
    transition: transform 0.12s ease, background 0.12s ease;
}

.my-cats-breed-tab:hover {
    transform: translateY(-1px);
    background: rgba(255,247,251,0.92);
}

.my-cats-breed-tab.active {
    background: linear-gradient(180deg, #f8dce8, #e8f7ff);
    color: #7a2f58;
    border-color: #a8cbb7;
}

.my-cats-breed-section {
    background: rgba(255,255,255,0.78);
    border: 1px solid #a8cbb7;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 7px 16px rgba(0,0,0,0.07);
    margin-bottom: 20px;
}

.my-cats-breed-head {
    background: linear-gradient(90deg, #dff3e5 0%, #e8f7ff 50%, #f8dce8 100%);
    border-bottom: 1px solid #cfe2d7;
    padding: 14px 18px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;
}

.my-cats-breed-name {
    font-size: 24px;
    font-weight: 900;
    color: #684b5d;
}

.my-cats-breed-sub {
    font-size: 13px;
    font-weight: 900;
    color: #4f7057;
    margin-top: 3px;
}

.my-cats-breed-count {
    background: rgba(255,255,255,0.86);
    border: 1px solid #d6e4dc;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 900;
    color: #7a2f58;
    white-space: nowrap;
}

.my-cats-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
    padding: 16px;
}

.my-cat-card-new {
    background: linear-gradient(180deg, rgba(255,255,255,0.84), rgba(248,255,246,0.64));
    border: 1px solid rgba(168,203,183,0.72);
    border-radius: 20px;
    padding: 14px;
    text-align: center;
    cursor: pointer;
    position: relative;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.my-cat-card-new:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.10);
    background: linear-gradient(180deg, rgba(255,247,251,0.94), rgba(232,247,255,0.72));
}

.my-cat-card-new.listed {
    border: 2px solid #f6cfe0;
}

.my-cat-status-row {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    justify-content: space-between;
    gap: 6px;
    pointer-events: none;
}

.my-cat-badge {
    background: rgba(255,255,255,0.88);
    border: 1px solid #d6e4dc;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 900;
    color: #7a2f58;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.my-cat-badge.sleeping {
    color: #4f7f91;
}

.my-cat-badge.pregnant {
    color: #8a4f6d;
}

.my-cat-badge.sale {
    color: #8a3d00;
}

.my-cat-breeding-indicator {
    position: absolute;
    top: 48px;
    right: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(216,184,238,0.82);
    box-shadow: 0 4px 10px rgba(88,64,120,0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    pointer-events: auto;
    cursor: help;
}

.my-cat-breeding-indicator::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 0;
    bottom: calc(100% + 9px);
    min-width: max-content;
    max-width: 220px;
    padding: 7px 10px;
    border-radius: 10px;
    background: rgba(83, 61, 91, 0.96);
    color: white;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    white-space: nowrap;
    box-shadow: 0 5px 14px rgba(60, 40, 75, 0.22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition:
        opacity 0.12s ease,
        transform 0.12s ease,
        visibility 0.12s ease;
    pointer-events: none;
    z-index: 20;
}

.my-cat-breeding-indicator:hover::after,
.my-cat-breeding-indicator:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.my-cat-breeding-indicator.ready {
    color: #d76b9a;
    font-size: 24px;
    line-height: 1;
}

.my-cat-breeding-indicator.soon {
    color: #9c78bd;
    font-size: 25px;
    line-height: 1;
}

.my-cat-breeding-indicator.pregnant img {
    width: 25px;
    height: 25px;
    object-fit: contain;
    filter: none;
}

.my-cat-image-wrap {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 18px;
    margin-bottom: 8px;
}

.my-cat-image-wrap img {
    width: 145px;
    height: 145px;
    object-fit: contain;
    filter: drop-shadow(0 8px 10px rgba(0,0,0,0.10));
}

.my-cat-name-new {
    font-size: 20px;
    font-weight: 900;
    color: #7a2f58;
    margin-bottom: 4px;
}

.cat-title-prefix {
    display: inline-block;
    font-weight: 950;
    color: #3f2f46;
    margin-right: 4px;
    letter-spacing: 0.2px;
}

.cat-real-name {
    font-weight: inherit;
    color: inherit;
}

.my-cat-cattery-new {
    font-size: 13px;
    font-weight: 800;
    color: #4f7057;
    margin-bottom: 10px;
}

.my-cat-info-new {
    display: grid;
    gap: 5px;
    text-align: left;
    margin-top: 10px;
}

.my-cat-info-new div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid rgba(79,74,94,0.08);
    padding-bottom: 4px;
    font-size: 13px;
}

.my-cat-info-new b {
    color: #684b5d;
}

.my-cat-info-new span {
    color: #4f4a5e;
    font-weight: 700;
    text-align: right;
}

.my-cats-empty {
    background: rgba(255,255,255,0.80);
    border: 1px solid #a8cbb7;
    border-radius: 18px;
    padding: 18px;
    color: #777;
    font-weight: 700;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}

@media (max-width: 950px) {
    .my-cats-hero,
    .my-cats-control-grid {
        grid-template-columns: 1fr;
    }

    .my-cats-hero {
        text-align: center;
    }

    .my-cats-hero-icon {
        margin: 0 auto;
    }

    .my-cats-stats {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 620px) {
    .my-cats-stats {
        grid-template-columns: 1fr;
    }

    .my-cats-breed-head {
        grid-template-columns: 1fr;
    }
}

/* ===== Clean Cat Detail Page ===== */

.cat-detail-page-clean {
    max-width: 1460px;
    margin: 0 auto 40px auto;
}

.cat-title-clean {
    text-align: center;
    margin: 6px 0 22px 0;
}

.cat-title-clean .cat-name {
    font-size: 24px;
    font-weight: 900;
    color: #4f4a5e;
}

.cat-title-clean .cat-cattery {
    font-size: 18px;
    color: #5b5963;
}

.cat-clean-grid {
    display: grid;
    grid-template-columns: 330px minmax(520px, 1fr) 330px;
    gap: 22px;
    align-items: start;
}

.cat-left-stack,
.cat-center-stack,
.cat-right-stack {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.clean-main-cat {
    min-height: auto;
    padding-bottom: 18px;
}

.clean-main-cat .cat-image-large {
    width: 300px;
    height: 300px;
    object-fit: contain;
}

.cat-quick-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.cat-quick-actions button {
    border-radius: 999px;
    padding: 9px 16px;
    font-weight: 900;
    background: linear-gradient(180deg, #fff1f7, #e8f7ff);
    border: 1px solid #a8cbb7;
}

.night-grid-clean {
    grid-template-columns: repeat(2, 1fr);
}

.cat-tabs-clean {
    width: 100%;
}

.clean-tabs {
    justify-content: center;
    padding-left: 0;
    margin-bottom: -1px;
}

.clean-tabs .purr-tab {
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    color: white;
}

.clean-tabs .purr-tab.active {
    background: linear-gradient(180deg, #f8dce8 0%, #e8f7ff 100%);
    color: #684b5d;
}

.cat-tab-panel {
    display: none;
}

.cat-tab-panel.active {
    display: block;
}

.cat-tabs-clean .purr-card {
    margin-bottom: 0;
}

.breeding-compact .breeding-beauty-panel {
    margin-bottom: 0;
}

.breeding-compact .breeding-beauty-header {
    font-size: 21px;
    padding: 11px;
}

.breeding-compact .breeding-beauty-body {
    padding: 14px;
}

.breeding-compact .breeding-status-card {
    padding: 12px;
}

.breeding-compact .breeding-status-grid {
    grid-template-columns: 1fr;
    gap: 6px;
}

.breeding-compact .breeding-action-grid-beauty {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.breeding-compact .breeding-action-card {
    min-height: 92px;
    padding: 10px 8px;
}

.breeding-compact .breeding-action-card img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.breeding-compact .breeding-action-title {
    font-size: 15px;
}

.breeding-compact .breeding-action-note {
    font-size: 11px;
}

.timeline-compact {
    margin-bottom: 0;
}

.timeline-compact-title {
    background: linear-gradient(90deg, #dff3e5 0%, #e8f7ff 50%, #f8dce8 100%);
    border-bottom: 1px solid #cfe2d7;
    padding: 12px 16px;
    text-align: center;
    font-size: 21px;
    font-weight: 900;
    color: #684b5d;
}

.timeline-compact .purr-section {
    max-height: 260px;
    overflow-y: auto;
}

.genetics-inline-panel {
    max-width: none;
    margin: 12px 0;
    padding: 0;
    background: rgba(255,255,255,0.72);
    border: 1px solid #d9e7df;
    border-radius: 16px;
    overflow: hidden;
}

.genetics-inline-panel summary {
    cursor: pointer;
    list-style: none;
    padding: 12px 16px;
    font-size: 20px;
    font-weight: 900;
    color: #684b5d;
    background: linear-gradient(90deg, #dff3e5 0%, #e8f7ff 50%, #f8dce8 100%);
    text-align: center;
}

.genetics-inline-panel summary::-webkit-details-marker {
    display: none;
}

.genetics-inline-panel .genetics-grid-beauty {
    padding: 14px;
}

.genetics-inline-panel #unlockArea .genetics-panel {
    box-shadow: none;
    border: none;
    margin: 0;
    max-width: none;
    background: transparent;
}

.genetics-inline-panel #unlockArea .genetics-panel-title {
    display: none;
}

.genetics-inline-panel #unlockArea .unlock-grid-beauty {
    padding: 14px;
}

@media (max-width: 1180px) {
    .cat-clean-grid {
        grid-template-columns: 1fr;
    }

    .cat-left-stack,
    .cat-right-stack {
        max-width: 760px;
        width: 100%;
        margin: 0 auto;
    }

    .cat-center-stack {
        order: -1;
    }
}

/* ===== PurrPixels Office / Meadow / Heaven ===== */

.office-page {
    max-width: 1220px;
    margin: 18px auto 40px auto;
}

.office-hero {
    display: grid;
    grid-template-columns: 1fr 170px;
    gap: 20px;
    align-items: center;
    background: linear-gradient(135deg, rgba(223,243,229,0.96), rgba(232,247,255,0.94), rgba(248,220,232,0.90));
    border: 1px solid #a8cbb7;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    margin-bottom: 18px;
}

.office-kicker {
    font-weight: 900;
    color: #4f7057;
    margin-bottom: 6px;
}

.office-title {
    font-size: 36px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 8px;
}

.office-subtitle {
    color: #5b5963;
    font-weight: 700;
    line-height: 1.45;
}

.office-hero-icon {
    width: 135px;
    height: 135px;
    border-radius: 32px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(168,203,183,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
    margin-left: auto;
    box-shadow: inset 0 0 0 4px rgba(255,255,255,0.38);
}

.office-hero-icon-img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.office-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
}

.office-card {
    background: rgba(255,255,255,0.82);
    border: 1px solid #a8cbb7;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 7px 16px rgba(0,0,0,0.07);
    margin-bottom: 18px;
}

.office-card-title {
    background: linear-gradient(90deg, #dff3e5 0%, #e8f7ff 50%, #f8dce8 100%);
    border-bottom: 1px solid #cfe2d7;
    padding: 14px 18px;
    font-size: 22px;
    font-weight: 900;
    color: #684b5d;
}

.office-card-body {
    padding: 18px;
}

.office-field label {
    display: block;
    font-weight: 900;
    color: #4f4a5e;
    margin-bottom: 6px;
}

.office-field input {
    width: 100%;
    border: 1px solid #cfe2d7;
    border-radius: 12px;
    background: rgba(255,255,255,0.94);
    padding: 11px 13px;
    font-size: 15px;
}

.office-note {
    background: linear-gradient(180deg, rgba(248,255,246,0.72), rgba(255,247,251,0.62));
    border: 1px solid #cfe2d7;
    border-radius: 16px;
    padding: 12px 14px;
    color: #5b5963;
    font-weight: 700;
    line-height: 1.45;
    margin: 12px 0;
}

.office-action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.office-action-card {
    min-height: 125px;
    background: rgba(255,255,255,0.74);
    border: 1px solid rgba(168,203,183,0.60);
    border-radius: 18px;
    padding: 16px 12px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.office-action-card:hover {
    transform: translateY(-2px);
    background: rgba(255,247,251,0.95);
    box-shadow: 0 8px 16px rgba(0,0,0,0.08);
}

.office-action-icon {
    font-size: 38px;
    margin-bottom: 8px;
}

.office-action-title {
    font-size: 18px;
    font-weight: 900;
    color: #7a2f58;
    margin-bottom: 4px;
}

.office-action-note {
    font-size: 13px;
    color: #766b7c;
    font-weight: 700;
    line-height: 1.3;
}

.heaven-list {
    display: grid;
    gap: 12px;
}

.heaven-mini-card {
    display: grid;
    grid-template-columns: 85px 1fr auto;
    gap: 14px;
    align-items: center;
    background: linear-gradient(135deg, rgba(255,255,255,0.78), rgba(232,247,255,0.56), rgba(255,241,247,0.50));
    border: 1px solid rgba(168,203,183,0.58);
    border-radius: 18px;
    padding: 12px;
}

.heaven-mini-card > img {
    width: 78px;
    height: 78px;
    object-fit: contain;
    filter: drop-shadow(0 6px 8px rgba(0,0,0,0.12));
}

.heaven-mini-name {
    font-size: 19px;
    font-weight: 900;
    color: #7a2f58;
}

.heaven-mini-meta {
    color: #5b5963;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.35;
}

.special-cat-page {
    max-width: 1180px;
    margin: 18px auto 40px auto;
}

.special-cat-hero {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 26px;
    align-items: center;
    background: linear-gradient(135deg, rgba(255,255,255,0.82), rgba(232,247,255,0.74), rgba(248,220,232,0.68));
    border: 1px solid #a8cbb7;
    border-radius: 28px;
    padding: 26px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.09);
    overflow: hidden;
}

.special-cat-kicker {
    font-weight: 900;
    color: #4f7057;
    margin-bottom: 8px;
}

.special-cat-title {
    font-size: 34px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 8px;
}

.special-cat-text {
    color: #5b5963;
    font-weight: 700;
    line-height: 1.5;
    max-width: 650px;
}

.special-cat-symbol {
    width: 210px;
    height: 145px;
    margin: 22px auto 0 auto;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(223,243,229,0.80), rgba(232,247,255,0.75), rgba(248,220,232,0.70));
    border: 1px solid rgba(168,203,183,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 72px;
    box-shadow: inset 0 0 0 4px rgba(255,255,255,0.35);
}

.special-cat-image-wrap {
    text-align: center;
}

.special-cat-image-wrap img {
    width: 340px;
    height: 340px;
    object-fit: contain;
    filter: drop-shadow(0 12px 18px rgba(0,0,0,0.16));
}

.special-cat-info-card {
    margin-top: 18px;
    background: rgba(255,255,255,0.82);
    border: 1px solid #a8cbb7;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 7px 16px rgba(0,0,0,0.06);
}

.special-cat-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.special-cat-info-grid div {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(168,203,183,0.35);
    font-weight: 700;
}

.special-cat-info-grid b {
    color: #684b5d;
}

@media (max-width: 950px) {
    .office-hero,
    .office-grid,
    .special-cat-hero {
        grid-template-columns: 1fr;
    }

    .office-hero {
        text-align: center;
    }

    .office-hero-icon {
        margin: 0 auto;
    }

    .heaven-mini-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .heaven-mini-card img {
        margin: 0 auto;
    }

    .special-cat-image-wrap img {
        width: 280px;
        height: 280px;
    }
}

/* =========================================================
   Cattery Line / Alle Katzen einer Cattery
   ========================================================= */

:root {
    --pp-bg-top: #dff3ff;
    --pp-bg-bottom: #fff7ef;
    --pp-card: rgba(255, 255, 255, 0.92);
    --pp-card-border: rgba(139, 195, 180, 0.45);
    --pp-text: #4f465f;
    --pp-muted: #7c7488;
    --pp-title: #5d4c68;
    --pp-accent: #9ed9d0;
    --pp-accent-dark: #69b8ad;
    --pp-gold: #b47a18;
    --pp-shadow: 0 14px 30px rgba(92, 76, 95, 0.12);
    --pp-shadow-hover: 0 20px 40px rgba(92, 76, 95, 0.20);
}

/* Grundseite */
body {
    margin: 0;
    min-height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--pp-text);
    background:
        linear-gradient(rgba(255,255,255,0.04), rgba(255,255,255,0.04)),
        url("/images/ui/news_background.png") center top / cover fixed no-repeat;
    background-color: #eadfff;
}

/* Hauptbereich */
body > * {
    box-sizing: border-box;
}

main,
.page,
.container,
.cattery-page,
.cattery-line-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 10px 24px 46px;
}

/* Back Button */
button,
.back-button,
a.back-button {
    appearance: none;
    border: 1px solid rgba(105, 184, 173, 0.45);
    background: rgba(255, 255, 255, 0.78);
    color: var(--pp-title);
    border-radius: 10px;
    padding: 8px 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(92, 76, 95, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

button:hover,
.back-button:hover,
a.back-button:hover {
    transform: translateY(-1px);
    background: #ffffff;
    box-shadow: 0 10px 22px rgba(92, 76, 95, 0.14);
}

/* Titel */
h1 {
    margin: 22px 0 14px;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1;
    letter-spacing: 0.5px;
    color: var(--pp-title);
    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.8);
}

h1::after {
    content: "";
    display: block;
    width: 86px;
    height: 5px;
    margin-top: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--pp-accent-dark), #f3c98b);
}

/* Infobox oben */
.info-box,
.description-box,
.cattery-description,
main > p,
.page > p,
.container > p {
    margin: 18px 0 20px;
    padding: 16px 18px;
    border: 1px solid var(--pp-card-border);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.74);
    color: var(--pp-muted);
    box-shadow: 0 10px 24px rgba(92, 76, 95, 0.08);
    backdrop-filter: blur(8px);
}

/* Optional: Statistik-Leiste, falls du später Zahlen einfügst */
.cattery-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 18px 0 24px;
}

.cattery-stat {
    border: 1px solid rgba(158, 217, 208, 0.55);
    border-radius: 18px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 10px 22px rgba(92, 76, 95, 0.08);
}

.cattery-stat strong {
    display: block;
    font-size: 22px;
    color: var(--pp-title);
}

.cattery-stat span {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    color: var(--pp-muted);
}

/* Katzen-Grid */
.cat-grid,
.cats-grid,
.all-cats-grid,
.cattery-cats-grid,
#allCats,
#catsList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    gap: 20px;
    align-items: stretch;
}

/* Katzenkarte */
.cat-card,
.cattery-cat-card,
.cat-tile,
.all-cat-card,
#allCats > div,
#catsList > div {
    position: relative;
    min-height: 205px;
    padding: 14px 14px 16px;
    border: 1px solid var(--pp-card-border);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 252, 247, 0.88));
    box-shadow: var(--pp-shadow);
    overflow: hidden;
    text-align: center;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.cat-card::before,
.cattery-cat-card::before,
.cat-tile::before,
.all-cat-card::before,
#allCats > div::before,
#catsList > div::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(158, 217, 208, 0.26), transparent 42%),
        radial-gradient(circle at bottom left, rgba(243, 201, 139, 0.18), transparent 38%);
    pointer-events: none;
}

.cat-card:hover,
.cattery-cat-card:hover,
.cat-tile:hover,
.all-cat-card:hover,
#allCats > div:hover,
#catsList > div:hover {
    transform: translateY(-5px);
    border-color: rgba(105, 184, 173, 0.85);
    box-shadow: var(--pp-shadow-hover);
}

/* Katzenname */
.cat-card h3,
.cattery-cat-card h3,
.cat-tile h3,
.all-cat-card h3,
#allCats > div h3,
#catsList > div h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 4px;
    font-size: 16px;
    color: var(--pp-title);
    font-weight: 800;
}

/* Falls der Name direkt als Text im div steht */
.cat-card strong,
.cattery-cat-card strong,
.cat-tile strong,
.all-cat-card strong,
#allCats > div strong,
#catsList > div strong {
    position: relative;
    z-index: 1;
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
    color: var(--pp-title);
}

/* Status wie Cat Meadow */
.cat-status,
.status-badge,
.meadow-badge {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255, 239, 203, 0.95);
    color: var(--pp-gold);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2px;
}

/* Katzenbild */
.cat-card img,
.cattery-cat-card img,
.cat-tile img,
.all-cat-card img,
#allCats > div img,
#catsList > div img {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 145px;
    height: 135px;
    object-fit: contain;
    margin: 8px auto 0;
    display: block;
    filter: drop-shadow(0 12px 10px rgba(55, 43, 54, 0.16));
    transition: transform 0.2s ease, filter 0.2s ease;
}

.cat-card:hover img,
.cattery-cat-card:hover img,
.cat-tile:hover img,
.all-cat-card:hover img,
#allCats > div:hover img,
#catsList > div:hover img {
    transform: scale(1.04);
    filter: drop-shadow(0 16px 13px rgba(55, 43, 54, 0.22));
}

/* Kleine Meta-Infos, falls vorhanden */
.cat-meta,
.cat-info,
.cat-details {
    position: relative;
    z-index: 1;
    margin-top: 10px;
    color: var(--pp-muted);
    font-size: 12px;
    line-height: 1.4;
}

/* Empty State */
.empty-state {
    grid-column: 1 / -1;
    padding: 34px 22px;
    border: 1px dashed rgba(105, 184, 173, 0.55);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.62);
    text-align: center;
    color: var(--pp-muted);
}

/* Mobile */
@media (max-width: 700px) {
    main,
    .page,
    .container,
    .cattery-page,
    .cattery-line-page {
        padding: 10px 14px 34px;
    }

    .cat-grid,
    .cats-grid,
    .all-cats-grid,
    .cattery-cats-grid,
    #allCats,
    #catsList {
        grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
        gap: 14px;
    }

    .cat-card,
    .cattery-cat-card,
    .cat-tile,
    .all-cat-card,
    #allCats > div,
    #catsList > div {
        min-height: 190px;
        padding: 12px;
        border-radius: 18px;
    }

    .cat-card img,
    .cattery-cat-card img,
    .cat-tile img,
    .all-cat-card img,
    #allCats > div img,
    #catsList > div img {
        max-width: 125px;
        height: 120px;
    }
}

/* =====================================================
   COMPACT GENETICS PANEL
   Makes genetics smaller and removes wasted space
===================================================== */

.genetics-panel {
    max-width: 760px;
    margin: 14px auto;
    border-radius: 16px;
}

.genetics-panel-title {
    font-size: 22px;
    padding: 10px;
}

.unlock-grid-beauty {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 12px;
}

.unlock-card {
    min-height: auto;
    padding: 10px 12px;
    border-radius: 13px;
}

.unlock-card-title {
    font-size: 14px;
    margin-bottom: 4px;
}

.genetics-card-value {
    font-size: 14px;
    line-height: 1.3;
    font-weight: 800;
    color: #4f4a5e;
    margin-bottom: 0;
    white-space: pre-line;
    word-break: normal;
    overflow-wrap: anywhere;
}

.unlock-card button {
    margin-top: 6px;
    padding: 6px 10px;
    font-size: 13px;
    border-radius: 10px;
}

.unlock-status {
    display: none !important;
}

@media (max-width: 850px) {
    .unlock-grid-beauty {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .unlock-grid-beauty {
        grid-template-columns: 1fr;
    }
}

.sell-cat-hero-with-icon {
    display: grid;
    grid-template-columns: 1fr 140px;
    gap: 20px;
    align-items: center;
}

.sell-cat-hero-icon {
    width: 130px;
    height: 130px;
    border-radius: 28px;
    background: rgba(255,255,255,0.62);
    border: 1px solid rgba(168,203,183,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,0.35);
}

.sell-cat-hero-icon-img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    display: block;
}

@media (max-width: 760px) {
    .sell-cat-hero-with-icon {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .sell-cat-hero-icon {
        margin: 0 auto;
    }
}

.special-cat-symbol-img {
    width: 160px;
    height: 160px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.special-cat-emoji {
    font-size: 70px;
    display: block;
}

/* ===== Subscriptions Page ===== */

.subscription-page {
    max-width: 1120px;
    margin: 18px auto 40px auto;
}

.subscription-hero {
    background: linear-gradient(135deg, rgba(223,243,229,0.96), rgba(232,247,255,0.94), rgba(248,220,232,0.92));
    border: 1px solid #a8cbb7;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    display: grid;
    grid-template-columns: 1fr 150px;
    gap: 22px;
    align-items: center;
    margin-bottom: 20px;
}

.subscription-kicker {
    font-weight: 900;
    color: #4f7057;
    margin-bottom: 6px;
}

.subscription-title {
    font-size: 36px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 8px;
}

.subscription-subtitle {
    color: #5b5963;
    font-weight: 700;
    line-height: 1.5;
}

.subscription-hero-icon {
    width: 135px;
    height: 135px;
    border-radius: 30px;
    background: rgba(255,255,255,0.64);
    border: 1px solid rgba(168,203,183,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 62px;
    margin-left: auto;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,0.35);
}

.subscription-coming-badge {
    display: inline-block;
    margin-top: 14px;
    padding: 8px 15px;
    border-radius: 999px;
    background: linear-gradient(180deg, #f8dce8, #e8f7ff);
    border: 1px solid #a8cbb7;
    color: #7a2f58;
    font-weight: 900;
}

.subscription-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.subscription-card {
    background: rgba(255,255,255,0.78);
    border: 1px solid #a8cbb7;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}

.subscription-card-title {
    background: linear-gradient(90deg, #dff3e5 0%, #e8f7ff 50%, #f8dce8 100%);
    border-bottom: 1px solid #cfe2d7;
    padding: 14px 16px;
    font-size: 23px;
    font-weight: 900;
    color: #684b5d;
    text-align: center;
}

.subscription-card-body {
    padding: 18px;
    color: #5b5963;
    font-weight: 700;
    line-height: 1.55;
}

.subscription-plan-price {
    font-size: 34px;
    font-weight: 900;
    color: #7a2f58;
    text-align: center;
    margin: 10px 0 14px 0;
}

.subscription-plan-note {
    text-align: center;
    color: #4f7057;
    font-weight: 900;
    margin-bottom: 16px;
}

.subscription-feature-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.subscription-feature {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 10px;
    align-items: start;
    background: rgba(255,255,255,0.58);
    border: 1px solid rgba(168,203,183,0.42);
    border-radius: 14px;
    padding: 10px 12px;
}

.subscription-feature-icon {
    font-size: 22px;
    text-align: center;
}

.subscription-button {
    width: 100%;
    margin-top: 18px;
    padding: 12px 18px;
    border-radius: 999px;
    font-weight: 900;
    background: linear-gradient(180deg, #ffffff, #f8dce8);
    border: 1px solid #a8cbb7;
    color: #684b5d;
}

.subscription-button:hover {
    background: linear-gradient(180deg, #ffffff, #e8f7ff);
}

.subscription-status-box {
    margin-top: 14px;
    background: rgba(232,247,255,0.58);
    border: 1px solid rgba(168,203,183,0.5);
    border-radius: 16px;
    padding: 14px;
    text-align: center;
    font-weight: 900;
    color: #4f4a5e;
}

@media (max-width: 900px) {
    .subscription-hero,
    .subscription-grid {
        grid-template-columns: 1fr;
    }

    .subscription-hero {
        text-align: center;
    }

    .subscription-hero-icon {
        margin: 0 auto;
    }
}

/* ===== Cat Bonus Tab ===== */

.bonus-list {
    display: grid;
    gap: 12px;
}

.bonus-card {
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: 14px;
    align-items: center;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(168,203,183,0.55);
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.04);
}

.bonus-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(168,203,183,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bonus-card-icon img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
}

.bonus-card-title {
    font-size: 17px;
    font-weight: 900;
    color: #8a2f5a;
    margin-bottom: 4px;
}

.bonus-card-meta {
    font-weight: 900;
    color: #4f7057;
    margin-bottom: 4px;
}

.bonus-card-desc {
    color: #5b5963;
    font-size: 14px;
    line-height: 1.35;
}

.bonus-empty {
    color: #777;
    font-weight: 700;
    line-height: 1.4;
}

.office-area-icon-img {
    width: 140px;
    height: 140px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.office-action-icon-img {
    width: 140px;
    height: 140px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.sale-filter-actions {
    margin-top: 14px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ===== Compact Cat Market Filters ===== */

.market-mobile-filter-toggle-row {
    display: none;
}

.market-filter-card {
    background: rgba(255,255,255,0.78);
    border: 1px solid #a8cbb7;
    border-radius: 22px;
    padding: 18px;
    box-shadow: 0 7px 16px rgba(0,0,0,0.06);
    margin-bottom: 18px;
}

.market-filter-title-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
}

.market-filter-title-row.compact {
    margin-bottom: 12px;
}

.market-filter-title {
    font-size: 28px;
    font-weight: 900;
    color: #684b5d;
}

.market-filter-note {
    color: #4f7057;
    font-weight: 800;
    font-size: 14px;
}

.compact-market-tabs {
    margin: 0 0 10px 10px;
}

.market-quick-filter-grid {
    display: grid;
    grid-template-columns: minmax(150px, 0.8fr) minmax(140px, 0.7fr) minmax(310px, 1.55fr) minmax(280px, 1.35fr);
    gap: 12px;
    align-items: stretch;
}

.market-quick-filter-block,
.stud-quick-filter-block {
    background: linear-gradient(180deg, rgba(255,255,255,0.84), rgba(248,252,255,0.62));
    border: 1px solid rgba(168,203,183,0.48);
    border-radius: 16px;
    padding: 12px;
    min-width: 0;
}

.market-quick-filter-title,
.stud-quick-filter-title {
    font-size: 15px;
    font-weight: 900;
    color: #7a2f58;
    margin-bottom: 8px;
}

.market-filter-group {
    background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(248,252,255,0.62));
    border: 1px solid rgba(168,203,183,0.48);
    border-radius: 18px;
    padding: 14px;
}

.market-filter-group-title {
    font-size: 17px;
    font-weight: 900;
    color: #7a2f58;
    margin-bottom: 12px;
}

.market-filter-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.market-filter-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-weight: 900;
    color: #4f4a5e;
    min-width: 0;
}

.market-filter-field label {
    font-size: 12px;
}

.market-filter-field input,
.market-filter-field select {
    width: 100%;
    min-width: 0;
    border: 1px solid #cfe2d7;
    border-radius: 11px;
    padding: 8px 9px;
    background: rgba(255,255,255,0.95);
    color: #2f2a3d;
    font-size: 14px;
}

.market-price-compact {
    display: grid;
    gap: 6px;
}

.market-price-row {
    display: grid;
    grid-template-columns: 72px 1fr 1fr;
    gap: 7px;
    align-items: end;
}

.market-price-currency {
    font-weight: 900;
    color: #7a2f58;
    padding-bottom: 10px;
    white-space: nowrap;
    font-size: 13px;
}

.market-price-mini-field label,
.market-performance-mini-field label {
    display: block;
    font-size: 11px;
    font-weight: 900;
    color: #5b5963;
    margin-bottom: 3px;
}

.market-price-mini-field input,
.market-performance-mini-field input {
    width: 100%;
    min-width: 0;
    min-height: 35px;
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid #cfe2d7;
    background: rgba(255,255,255,0.94);
}

.market-age-quick {
    display: grid;
    grid-template-columns: 0.9fr 1.4fr;
    gap: 8px;
    align-items: end;
}

.market-age-unit-field label {
    white-space: nowrap;
}

.market-quick-action-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.market-filter-checkbox {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 900;
    color: #684b5d;
}

.market-filter-checkbox.compact {
    margin: 0;
}

.market-filter-checkbox input {
    width: 18px;
    height: 18px;
}

.market-quick-buttons,
.market-filter-actions {
    display: flex;
    gap: 9px;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

.market-filter-primary,
.market-filter-secondary {
    min-width: 125px;
    border-radius: 999px;
    font-weight: 900;
    padding: 9px 16px;
}

.market-filter-primary {
    background: linear-gradient(180deg, #ffffff, #dff3e5);
}

.market-filter-secondary {
    background: linear-gradient(180deg, #ffffff, #f8dce8);
}

.market-advanced-filter-panel,
.stud-advanced-filter-panel {
    margin-top: 12px;
    border: 1px solid rgba(194,160,225,0.62);
    border-radius: 16px;
    background: rgba(255,255,255,0.48);
    overflow: hidden;
}

.market-advanced-filter-panel > summary,
.stud-advanced-filter-panel > summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 14px;
    font-weight: 900;
    color: #684b5d;
    background: linear-gradient(90deg, rgba(232,247,255,0.72), rgba(255,241,250,0.78), rgba(238,225,255,0.72));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.market-advanced-filter-panel > summary::-webkit-details-marker,
.stud-advanced-filter-panel > summary::-webkit-details-marker {
    display: none;
}

.market-advanced-filter-panel > summary::after,
.stud-advanced-filter-panel > summary::after {
    content: "＋";
    font-size: 18px;
    line-height: 1;
}

.market-advanced-filter-panel[open] > summary::after,
.stud-advanced-filter-panel[open] > summary::after {
    content: "−";
}

.advanced-filter-count {
    margin-left: auto;
    margin-right: 8px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    background: rgba(255,255,255,0.86);
    border: 1px solid rgba(216,184,238,0.62);
    color: #7a2f58;
}

.market-advanced-grid {
    display: grid;
    grid-template-columns: minmax(190px, 0.8fr) minmax(360px, 1.7fr) minmax(280px, 1.2fr);
    gap: 12px;
    padding: 12px;
    align-items: start;
}

.market-advanced-grid .objects-wide {
    grid-column: 1 / -1;
}

.market-genetics-grid,
.stud-genetics-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.market-advanced-hint {
    margin-top: 9px;
    color: #7b7183;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.market-object-filter-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.market-object-filter {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(168,203,183,0.65);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,220,232,0.42));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0,0,0,0.05);
}

.market-object-filter:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(232,247,255,0.70));
    transform: translateY(-1px);
}

.market-object-filter img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    pointer-events: none;
}

.market-object-filter input {
    position: absolute;
    right: -4px;
    top: -4px;
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: #8fc6d8;
}

.market-object-filter:has(input:checked) {
    border-color: #7a2f58;
    background: linear-gradient(180deg, #fff, #f8dce8);
    box-shadow: 0 0 0 2px rgba(248,220,232,0.7);
}

.market-performance-compact {
    display: grid;
    gap: 8px;
}

.market-performance-row {
    display: grid;
    grid-template-columns: 48px 1fr 1fr;
    gap: 7px;
    align-items: end;
}

.market-performance-label {
    font-weight: 900;
    color: #7a2f58;
    padding-bottom: 10px;
    white-space: nowrap;
}

/* ===== Compact Stud Search Filters ===== */

.stud-filter-card {
    background: rgba(255,255,255,0.78);
    border: 1px solid #a8cbb7;
    border-radius: 22px;
    padding: 18px;
    box-shadow: 0 7px 16px rgba(0,0,0,0.06);
    margin-bottom: 18px;
}

.compact-stud-tabs {
    margin-top: 14px;
    margin-bottom: 10px;
}

.stud-filter-title-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
}

.stud-filter-title-row.compact {
    margin-bottom: 12px;
}

.stud-filter-title {
    font-size: 27px;
    font-weight: 900;
    color: #684b5d;
}

.stud-filter-note {
    color: #4f7057;
    font-weight: 800;
    font-size: 14px;
}

.stud-quick-filter-grid {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(220px, 1.35fr) minmax(170px, 1fr);
    gap: 10px;
    align-items: stretch;
}

.stud-filter-group {
    background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(248,252,255,0.62));
    border: 1px solid rgba(168,203,183,0.48);
    border-radius: 18px;
    padding: 14px;
}

.stud-filter-group-title {
    font-size: 17px;
    font-weight: 900;
    color: #7a2f58;
    margin-bottom: 12px;
}

.stud-filter-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.stud-filter-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-weight: 900;
    color: #4f4a5e;
    min-width: 0;
}

.stud-filter-field label {
    font-size: 12px;
}

.stud-filter-field input,
.stud-filter-field select {
    width: 100%;
    min-width: 0;
    border: 1px solid #cfe2d7;
    border-radius: 11px;
    padding: 8px 9px;
    background: rgba(255,255,255,0.95);
    color: #2f2a3d;
    font-size: 14px;
}

.stud-quick-action-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.stud-filter-actions {
    display: flex;
    gap: 9px;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

.stud-filter-actions.compact {
    margin: 0;
}

.stud-filter-primary,
.stud-filter-secondary {
    min-width: 125px;
    border-radius: 999px;
    font-weight: 900;
    padding: 9px 16px;
}

.stud-filter-primary {
    background: linear-gradient(180deg, #ffffff, #dff3e5);
}

.stud-filter-secondary {
    background: linear-gradient(180deg, #ffffff, #f8dce8);
}

.stud-advanced-grid {
    display: grid;
    grid-template-columns: minmax(270px, 0.8fr) minmax(460px, 1.7fr);
    gap: 12px;
    padding: 12px;
    align-items: start;
}

@media (max-width: 1150px) {
    .market-quick-filter-grid {
        grid-template-columns: 1fr 1fr;
    }

    .market-advanced-grid {
        grid-template-columns: 1fr 1fr;
    }

    .market-advanced-grid .objects-wide {
        grid-column: 1 / -1;
    }

    .stud-quick-filter-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .stud-advanced-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .market-mobile-filter-toggle-row {
        display: block;
        margin: 0 0 10px 0;
    }

    .market-mobile-filter-toggle {
        width: 100%;
        min-height: 46px;
        display: grid;
        grid-template-columns: 1fr auto auto;
        align-items: center;
        gap: 8px;
        padding: 9px 13px;
        border: 1px solid rgba(194,160,225,0.78);
        border-radius: 15px;
        background: linear-gradient(
            135deg,
            rgba(255,255,255,0.94),
            rgba(247,238,255,0.92),
            rgba(255,239,248,0.92)
        );
        color: #684b5d;
        font-size: 14px;
        font-weight: 950;
        text-align: left;
        box-shadow: 0 6px 14px rgba(88,64,120,0.07);
    }

    .market-mobile-filter-count {
        min-width: 25px;
        height: 25px;
        padding: 0 7px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(138,47,90,0.10);
        color: #8a2f5a;
        font-size: 12px;
        font-weight: 950;
    }

    .market-mobile-filter-toggle-arrow {
        font-size: 12px;
        color: #8a5a91;
    }

    .market-filter-card-compact.mobile-collapsed {
        display: none;
    }

    .market-filter-card-compact.mobile-open {
        display: block;
        padding: 12px;
        margin-bottom: 12px;
    }

    .market-filter-card-compact .market-filter-title-row {
        margin-bottom: 10px;
    }

    .market-filter-card-compact .market-filter-title {
        font-size: 22px;
    }

    .market-filter-card-compact .market-filter-note,
    .market-filter-card-compact .market-price-filter-hint,
    .market-filter-card-compact .market-visible-appearance-hint {
        font-size: 11px;
        line-height: 1.3;
    }

    .market-quick-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .market-quick-filter-block {
        padding: 9px;
        border-radius: 13px;
    }

    .market-quick-filter-block.wide {
        grid-column: 1 / -1;
    }

    .market-advanced-grid,
    .stud-quick-filter-grid,
    .stud-genetics-grid {
        grid-template-columns: 1fr;
    }

    .market-genetics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .market-advanced-grid .objects-wide {
        grid-column: auto;
    }

    .market-age-quick {
        grid-template-columns: 0.8fr 1.2fr;
    }

    .market-quick-action-row,
    .stud-quick-action-row {
        align-items: stretch;
        flex-direction: column;
    }

    .market-quick-buttons,
    .stud-filter-actions {
        width: 100%;
    }

    .market-quick-buttons button,
    .stud-filter-actions button {
        flex: 1;
    }
}

@media (max-width: 420px) {
    .market-genetics-grid {
        grid-template-columns: 1fr;
    }

    .market-age-quick {
        grid-template-columns: 1fr;
    }
}


/* ===== Market + Stud Service Filter spacing fix ===== */

/*
    A global details rule earlier in the stylesheet limits details elements
    to 760px. These filter accordions must use the full card width.
*/
.market-advanced-filter-panel,
.stud-advanced-filter-panel {
    width: 100% !important;
    max-width: none !important;
    margin: 12px 0 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/* Market: keep the compact filter spacious instead of squeezing the groups. */
.market-quick-filter-grid {
    grid-template-columns:
        minmax(180px, 1fr)
        minmax(150px, 0.78fr)
        minmax(340px, 1.7fr)
        minmax(300px, 1.45fr);
    align-items: start;
}

.market-quick-filter-block,
.stud-quick-filter-block {
    height: auto;
    align-self: start;
}

.market-advanced-grid {
    grid-template-columns:
        minmax(180px, 0.72fr)
        minmax(0, 1.72fr)
        minmax(250px, 1fr);
    width: 100%;
}

.market-advanced-grid > *,
.stud-advanced-grid > * {
    min-width: 0;
}

.market-genetics-grid,
.stud-genetics-grid {
    min-width: 0;
}

.market-filter-card-compact {
    overflow: visible;
}

/* Stud Service: same compact structure as the full Find-a-Stud page. */
.stud-service-filter-card-compact {
    padding: 16px;
}

.stud-service-quick-grid {
    grid-template-columns:
        minmax(175px, 1.1fr)
        minmax(150px, 0.9fr)
        minmax(150px, 0.9fr)
        minmax(235px, 1.25fr)
        minmax(175px, 1fr);
    align-items: start;
}

.stud-service-advanced-grid {
    grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.72fr);
    width: 100%;
}

.stud-service-lineage-row {
    margin-top: 10px;
}

.stud-service-advanced-panel .stud-filter-group {
    height: auto;
}

@media (max-width: 1180px) {
    .market-quick-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .market-advanced-grid {
        grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.5fr);
    }

    .market-advanced-grid .compact-performance-group {
        grid-column: 1 / -1;
    }

    .stud-service-quick-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .stud-service-advanced-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .market-quick-filter-grid,
    .market-advanced-grid,
    .stud-service-quick-grid,
    .stud-service-advanced-grid {
        grid-template-columns: 1fr;
    }

    .market-advanced-grid .compact-performance-group {
        grid-column: auto;
    }
}

.purr-feature-icon-img {
    width: 160px;
    height: 160px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.achievements-icon-img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* ===== Auth Landing Page Redesign ===== */

#auth {
    width: 100%;
}

.landing-page {
    min-height: calc(100vh - 70px);
    display: grid;
    grid-template-columns: minmax(280px, 390px) minmax(260px, 440px) minmax(360px, 520px);
    gap: 34px;
    align-items: start;
    max-width: 1540px;
    margin: 8px auto 40px auto;
    padding: 48px 42px;
    border-radius: 38px;
    overflow: visible;
    position: relative;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
        url("/images/ui/news_background.png") center center / cover no-repeat;
    box-shadow: 0 18px 42px rgba(90, 74, 99, 0.18);
}

.landing-page::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 38px;
    background:
        radial-gradient(circle at 50% 48%, rgba(255,248,226,0.28), transparent 26%),
        linear-gradient(90deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03), rgba(255,255,255,0.13));
    pointer-events: none;
}

.landing-left-panel,
.landing-logo-stage,
.landing-side {
    position: relative;
    z-index: 1;
}

.landing-left-panel {
    display: flex;
    justify-content: flex-start;
    padding-top: 92px;
}

.landing-hero {
    width: 100%;
    max-width: 385px;
    background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(238,250,255,0.50));
    border: 1px solid rgba(214, 188, 238, 0.72);
    border-radius: 30px;
    padding: 26px 24px;
    box-shadow:
        0 12px 28px rgba(90,74,99,0.13),
        inset 0 0 0 1px rgba(255,255,255,0.45);
    backdrop-filter: blur(12px);
}

.landing-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.76);
    border: 1px solid rgba(199,178,228,0.70);
    border-radius: 999px;
    padding: 7px 13px;
    font-size: 12px;
    font-weight: 900;
    color: #8a2f5a;
    margin-bottom: 16px;
    box-shadow: 0 4px 10px rgba(90,74,99,0.08);
}

.landing-title {
    font-size: 34px;
    line-height: 1.03;
    font-weight: 900;
    color: #62465b;
    margin-bottom: 14px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.45);
}

.landing-subtitle {
    font-size: 16px;
    line-height: 1.45;
    color: #5b5963;
    font-weight: 800;
    margin-bottom: 18px;
}

.landing-stats-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 18px 0;
}

.landing-stat-pill {
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(199,178,228,0.62);
    border-radius: 999px;
    padding: 9px 14px;
    font-weight: 900;
    font-size: 14px;
    color: #5b4b61;
    box-shadow: 0 5px 12px rgba(90,74,99,0.08);
}

.landing-feature-stack {
    display: grid;
    gap: 12px;
    margin-top: 8px;
}

.landing-feature-card-large {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 12px;
    align-items: center;
    background: rgba(255,255,255,0.68);
    border: 1px solid rgba(214,188,238,0.55);
    border-radius: 20px;
    padding: 12px;
    box-shadow: 0 7px 16px rgba(90,74,99,0.08);
}

.landing-feature-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,241,250,0.95), rgba(232,247,255,0.82));
    border: 1px solid rgba(199,178,228,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.landing-feature-card-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.landing-feature-card-content {
    min-width: 0;
}

.landing-feature-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 900;
    color: #7a2f58;
    background: rgba(255,241,250,0.88);
    border: 1px solid rgba(199,178,228,0.55);
    border-radius: 999px;
    padding: 4px 9px;
    margin-bottom: 6px;
}

.landing-feature-card-title {
    font-size: 17px;
    font-weight: 900;
    color: #7a2f58;
    margin-bottom: 5px;
    line-height: 1.12;
}

.landing-feature-card-text {
    color: #5b5963;
    font-weight: 750;
    line-height: 1.35;
    font-size: 13px;
}

.landing-logo-stage {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 620px;
    padding-top: 180px;
    position: sticky;
    top: 90px;
    align-self: start;
}

.landing-logo-center {
    width: min(100%, 390px);
    height: auto;
    display: block;
    filter:
        drop-shadow(0 10px 22px rgba(255,255,255,0.60))
        drop-shadow(0 10px 24px rgba(119,85,147,0.20));
}

.landing-side {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
}

.landing-auth-card {
    width: 100%;
    max-width: 500px;
    background: linear-gradient(180deg, rgba(255,248,253,0.84), rgba(244,238,255,0.70));
    border: 1px solid rgba(214,188,238,0.72);
    border-radius: 30px;
    padding: 24px;
    box-shadow:
        0 14px 30px rgba(90,74,99,0.15),
        inset 0 0 0 1px rgba(255,255,255,0.42);
    backdrop-filter: blur(12px);
}

.landing-card-title {
    font-size: 30px;
    font-weight: 900;
    color: #62465b;
    margin-bottom: 18px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.38);
}

.landing-auth-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.landing-form-box {
    position: relative;
    background: rgba(255,255,255,0.70);
    border: 1px solid rgba(199,178,228,0.54);
    border-radius: 24px;
    padding: 20px;
    box-shadow:
        0 8px 18px rgba(90,74,99,0.08),
        inset 0 0 0 1px rgba(255,255,255,0.35);
}

.enhanced-login-box {
    background: linear-gradient(180deg, rgba(240,255,247,0.78), rgba(246,251,255,0.68));
}

.enhanced-register-box {
    background: linear-gradient(180deg, rgba(255,249,252,0.78), rgba(246,241,255,0.66));
}

.landing-form-header {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}

.landing-form-header-icon {
    width: 54px;
    height: 54px;
    border-radius: 17px;
    background: linear-gradient(180deg, rgba(255,241,250,0.92), rgba(232,247,255,0.82));
    border: 1px solid rgba(199,178,228,0.58);
    display: flex;
    align-items: center;
    justify-content: center;
}

.landing-form-header-icon img {
    width: 39px;
    height: 39px;
    object-fit: contain;
}

.landing-form-title {
    font-size: 23px;
    font-weight: 900;
    color: #8a2f5a;
    margin-bottom: 3px;
}

.landing-form-subtitle {
    font-size: 13px;
    line-height: 1.35;
    color: #5b5963;
    font-weight: 800;
}

.landing-input-group {
    margin-bottom: 10px;
}

.landing-input-label {
    display: block;
    font-size: 13px;
    font-weight: 900;
    color: #5b4b61;
    margin-bottom: 5px;
}

.landing-form-box input,
.landing-form-box select {
    width: 100%;
    border: 1px solid rgba(199,178,228,0.65);
    border-radius: 15px;
    background: rgba(238,246,255,0.78);
    padding: 12px 14px;
    font-size: 15px;
    margin: 0;
    color: #4f4a5e;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

.landing-form-box input:focus,
.landing-form-box select:focus {
    outline: none;
    border-color: #c8a8ff;
    box-shadow: 0 0 0 3px rgba(200,168,255,0.18);
    transform: translateY(-1px);
}

.landing-register-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.landing-main-button {
    width: 100%;
    padding: 13px 14px;
    font-size: 16px;
    font-weight: 900;
    margin-top: 10px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(231,249,236,0.86));
    border: 1px solid rgba(168,203,183,0.78);
    color: #4f4a5e;
    box-shadow: 0 6px 14px rgba(90,74,99,0.08);
    cursor: pointer;
    transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.landing-main-button:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(232,247,255,0.92));
    transform: translateY(-1px);
    box-shadow: 0 9px 18px rgba(90,74,99,0.12);
}

.landing-register-button {
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,224,241,0.86));
}

.landing-register-button:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(242,229,255,0.94));
}

.landing-register-tip {
    background: rgba(255,255,255,0.68);
    border: 1px solid rgba(199,178,228,0.48);
    border-radius: 15px;
    padding: 11px 13px;
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.35;
    color: #5b5963;
    font-weight: 800;
}

.landing-message {
    min-height: 18px;
    margin: 10px 0 0 0;
    font-size: 13px;
    font-weight: 800;
    color: #8a2f5a;
}

@media (max-width: 1250px) {
    .landing-page {
        grid-template-columns: 1fr;
        max-width: 900px;
        padding: 30px 20px;
        gap: 22px;
    }

    .landing-left-panel,
    .landing-side {
        justify-content: center;
        padding-top: 0;
    }

    .landing-hero,
    .landing-auth-card {
        max-width: 100%;
    }

    .landing-logo-stage {
        order: -1;
        min-height: auto;
        padding-top: 0;
        position: relative;
        top: auto;
    }

    .landing-logo-center {
        max-width: 320px;
    }
}

@media (max-width: 700px) {
    .landing-page {
        padding: 22px 14px;
        border-radius: 24px;
    }

    .landing-hero,
    .landing-auth-card {
        padding: 18px;
        border-radius: 22px;
    }

    .landing-title {
        font-size: 28px;
    }

    .landing-subtitle {
        font-size: 15px;
    }

    .landing-feature-card-large {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .landing-feature-card-icon {
        margin: 0 auto;
    }

    .landing-feature-badge {
        margin-left: auto;
        margin-right: auto;
    }

    .landing-form-header {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .landing-form-header-icon {
        margin: 0 auto;
    }

    .landing-register-grid {
        grid-template-columns: 1fr;
    }

    .landing-logo-center {
        max-width: 240px;
    }
}

.trophy-entry-icon-img {
    width: 82px;
    height: 82px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* ===== Cleaner My Page / Breeder Page ===== */

.breeder-page-clean {
    max-width: 1180px;
    margin: 18px auto 42px auto;
}

.breeder-clean-hero {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 20px;
    align-items: center;
    background: linear-gradient(
        135deg,
        rgba(255,250,254,0.88) 0%,
        rgba(239,246,255,0.78) 48%,
        rgba(255,235,247,0.78) 100%
    );
    border: 1px solid rgba(218,188,238,0.78);
    border-radius: 24px;
    padding: 20px 22px;
    box-shadow:
        0 8px 18px rgba(86,58,112,0.10),
        inset 0 0 0 1px rgba(255,255,255,0.32);
    margin-bottom: 18px;
    backdrop-filter: blur(7px);
}

.breeder-clean-avatar {
    width: 118px;
    height: 118px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,238,255,0.78));
    border: 2px solid rgba(218,188,238,0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow:
        0 7px 16px rgba(86,58,112,0.10),
        inset 0 0 0 4px rgba(255,255,255,0.34);
}

.breeder-clean-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.breeder-clean-avatar-placeholder {
    width: 76px !important;
    height: 76px !important;
    object-fit: contain !important;
}

.breeder-clean-kicker {
    font-weight: 900;
    color: #8a2f5a;
    margin-bottom: 6px;
}

.breeder-clean-title {
    font-size: 32px;
    font-weight: 900;
    color: #65475f;
    line-height: 1.08;
    margin-bottom: 4px;
}

.breeder-clean-subtitle {
    color: #5b5364;
    font-weight: 800;
    line-height: 1.45;
    margin-bottom: 14px;
}

.breeder-clean-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.breeder-clean-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid rgba(218,188,238,0.76);
    background: rgba(255,255,255,0.76);
    padding: 7px 12px;
    font-weight: 900;
    color: #5b4b63;
    box-shadow: 0 5px 12px rgba(86,58,112,0.06);
}

.breeder-clean-badge.admin {
    color: #8a2f5a;
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,232,246,0.86));
    border-color: rgba(226,162,199,0.72);
}

.breeder-clean-badge.moderator {
    color: #5d4d67;
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(240,244,255,0.86));
}

.breeder-clean-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.breeder-clean-action {
    border-radius: 999px;
    padding: 9px 15px;
    font-weight: 900;
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,232,255,0.88));
    border: 1px solid rgba(218,188,238,0.82);
    color: #5b4b63;
    box-shadow: 0 6px 14px rgba(86,58,112,0.07);
}

.breeder-clean-action.primary {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,232,244,0.92));
    border-color: rgba(226,162,199,0.78);
    color: #8a2f5a;
}

.breeder-clean-action:hover {
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,236,247,0.96));
    color: #8a2f5a;
    transform: translateY(-1px);
}

.breeder-clean-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    gap: 16px;
    align-items: start;
}

.breeder-clean-card {
    background: linear-gradient(180deg, rgba(255,252,255,0.86), rgba(248,240,255,0.72));
    border: 1px solid rgba(218,188,238,0.74);
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 8px 18px rgba(86,58,112,0.08),
        inset 0 0 0 1px rgba(255,255,255,0.30);
    margin-bottom: 14px;
    backdrop-filter: blur(6px);
}

.breeder-clean-card-title {
    background: linear-gradient(
        90deg,
        rgba(238,247,255,0.90) 0%,
        rgba(255,241,250,0.94) 52%,
        rgba(244,232,255,0.90) 100%
    );
    border-bottom: 1px solid rgba(218,188,238,0.66);
    padding: 11px 14px;
    font-size: 19px;
    font-weight: 900;
    color: #65475f;
}

.breeder-clean-card-body {
    padding: 13px 14px;
}

.breeder-clean-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.breeder-clean-stat {
    background: linear-gradient(180deg, rgba(255,255,255,0.84), rgba(248,241,255,0.66));
    border: 1px solid rgba(218,188,238,0.64);
    border-radius: 16px;
    padding: 10px 8px;
    text-align: center;
    min-height: 74px;
    box-shadow: 0 6px 14px rgba(86,58,112,0.05);
}

.breeder-clean-stat-value {
    font-size: 22px;
    font-weight: 900;
    color: #8a2f5a;
    line-height: 1.1;
}

.breeder-clean-stat-label {
    font-size: 12px;
    font-weight: 900;
    color: #5b5364;
    margin-top: 4px;
    line-height: 1.2;
}

.breeder-clean-presentation {
    min-height: 140px;
    line-height: 1.55;
    color: #514b5f;
    font-weight: 700;
}

.breeder-clean-presentation textarea {
    width: 100%;
    min-height: 180px;
    border: 1px solid rgba(218,188,238,0.70);
    border-radius: 14px;
    padding: 12px;
    background: rgba(255,255,255,0.82);
    color: #4f4a5e;
    font-family: Arial, sans-serif;
    font-size: 15px;
}

.breeder-clean-presentation textarea:focus {
    outline: none;
    border-color: rgba(200,168,255,0.96);
    box-shadow: 0 0 0 3px rgba(200,168,255,0.16);
}

.breeder-clean-button-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 13px 14px;
}

.breeder-clean-button-grid button,
.breeder-clean-card button {
    min-height: 42px;
    font-weight: 900;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,232,255,0.88));
    border: 1px solid rgba(218,188,238,0.82);
    color: #5b4b63;
}

.breeder-clean-button-grid button:hover,
.breeder-clean-card button:hover {
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,236,247,0.96));
    color: #8a2f5a;
}

.breeder-clean-detail-list {
    padding: 14px 16px;
}

.breeder-clean-detail-list div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(218,188,238,0.54);
}

.breeder-clean-detail-list div:last-child {
    border-bottom: none;
}

.breeder-clean-detail-list b {
    color: #7a2f58;
}

.breeder-clean-detail-list span {
    font-weight: 800;
    text-align: right;
    color: #50495c;
}

.breeder-clean-trophy-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 13px 14px;
}

.breeder-clean-trophy {
    text-align: center;
    background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(248,241,255,0.68));
    border: 1px solid rgba(218,188,238,0.68);
    border-radius: 15px;
    padding: 10px 8px;
}

.breeder-clean-trophy img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    display: block;
    margin: 0 auto 6px auto;
}

.breeder-clean-trophy-label {
    font-weight: 900;
    color: #5d5367;
}

.breeder-clean-trophy-count {
    display: inline-block;
    margin-top: 7px;
    background: rgba(255,255,255,0.90);
    border: 1px solid rgba(218,188,238,0.70);
    border-radius: 999px;
    padding: 4px 12px;
    font-weight: 900;
    color: #8a2f5a;
}

.breeder-clean-empty {
    padding: 14px 16px;
    color: #5a5464;
    font-weight: 700;
}

.friend-list.clean,
.greeting-list.clean {
    border: 1px solid rgba(218,188,238,0.70);
    background: rgba(255,255,255,0.64);
    border-radius: 18px;
    overflow: hidden;
}

.friend-row,
.greeting-row {
    background: rgba(255,255,255,0.58);
    border-bottom: 1px solid rgba(218,188,238,0.42);
    color: #564f61;
}

.friend-row:nth-child(even),
.greeting-row:nth-child(even) {
    background: rgba(255,242,250,0.55);
}

.friend-name-link,
.greeting-row span:first-child {
    color: #7a2f58;
}

.greeting-row span:last-child,
.friend-row span {
    color: #6f6178;
}

/* Falls irgendwo auf My Page noch alte grüne Werte durchkommen */
.breeder-page-clean * {
    border-color: rgba(218,188,238,0.70);
}

.breeder-page-clean b,
.breeder-page-clean strong,
.breeder-page-clean label {
    color: #7a2f58;
}

@media (max-width: 950px) {
    .breeder-clean-hero,
    .breeder-clean-layout {
        grid-template-columns: 1fr;
    }

    .breeder-clean-avatar {
        margin: 0 auto;
    }

    .breeder-clean-hero {
        text-align: center;
    }

    .breeder-clean-badge-row,
    .breeder-clean-actions {
        justify-content: center;
    }

    .breeder-clean-stats {
        grid-template-columns: 1fr 1fr;
    }

    .breeder-clean-trophy-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.news-hero-with-icon {
    display: grid;
    grid-template-columns: 1fr 150px;
    gap: 22px;
    align-items: center;
}

.news-hero-icon {
    width: 140px;
    height: 140px;
    border-radius: 28px;
    background: rgba(255,255,255,0.62);
    border: 1px solid rgba(168,203,183,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,0.35);
}

.news-hero-icon-img {
    width: 125px;
    height: 125px;
    object-fit: contain;
    display: block;
}

@media (max-width: 760px) {
    .news-hero-with-icon {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .news-hero-icon {
        margin: 0 auto;
    }
}

/* ===== Genetics Education Page ===== */

.genetics-info-page {
    max-width: 1180px;
    margin: 18px auto 40px auto;
}

.genetics-info-hero {
    display: grid;
    grid-template-columns: 1fr 150px;
    gap: 22px;
    align-items: center;
    background: linear-gradient(135deg, rgba(223,243,229,0.96), rgba(232,247,255,0.94), rgba(248,220,232,0.90));
    border: 1px solid #a8cbb7;
    border-radius: 24px;
    padding: 24px 26px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    margin-bottom: 20px;
}

.genetics-info-title {
    font-size: 34px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 8px;
}

.genetics-info-text {
    font-size: 16px;
    line-height: 1.45;
    color: #5b5963;
    font-weight: 700;
    max-width: 820px;
}

.genetics-info-icon {
    width: 140px;
    height: 140px;
    border-radius: 28px;
    background: rgba(255,255,255,0.62);
    border: 1px solid rgba(168,203,183,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,0.35);
}

.genetics-info-icon img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    display: block;
}

.genetics-info-layout {
    display: grid;
    grid-template-columns: 330px 1fr;
    gap: 18px;
    align-items: start;
}

.genetics-gene-list {
    background: rgba(255,255,255,0.78);
    border: 1px solid #a8cbb7;
    border-radius: 22px;
    padding: 14px;
    box-shadow: 0 7px 16px rgba(0,0,0,0.06);
}

.genetics-gene-list-title {
    font-size: 20px;
    font-weight: 900;
    color: #684b5d;
    margin: 4px 4px 12px 4px;
}

.genetics-gene-button {
    width: 100%;
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 10px;
    align-items: center;
    text-align: left;
    margin: 0 0 10px 0;
    padding: 11px 12px;
    border-radius: 16px;
    border: 1px solid rgba(168,203,183,0.55);
    background: rgba(255,255,255,0.72);
    cursor: pointer;
}

.genetics-gene-button:hover,
.genetics-gene-button.active {
    background: linear-gradient(180deg, #ffffff, #e8f7ff);
    transform: translateY(-1px);
}

.genetics-gene-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(223,243,229,0.94), rgba(248,220,232,0.82));
    border: 1px solid rgba(168,203,183,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.genetics-gene-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.genetics-gene-name {
    font-weight: 900;
    color: #7a2f58;
    line-height: 1.2;
}

.genetics-gene-short {
    font-size: 12px;
    color: #5b5963;
    font-weight: 800;
    margin-top: 3px;
}

.genetics-info-detail {
    background: rgba(255,255,255,0.80);
    border: 1px solid #a8cbb7;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 7px 16px rgba(0,0,0,0.06);
}

.genetics-detail-head {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 16px;
    align-items: center;
    background: linear-gradient(90deg, #dff3e5 0%, #e8f7ff 50%, #f8dce8 100%);
    border-bottom: 1px solid #cfe2d7;
    padding: 18px;
}

.genetics-detail-icon {
    width: 82px;
    height: 82px;
    border-radius: 20px;
    background: rgba(255,255,255,0.68);
    border: 1px solid rgba(168,203,183,0.62);
    display: flex;
    align-items: center;
    justify-content: center;
}

.genetics-detail-icon img {
    width: 68px;
    height: 68px;
    object-fit: contain;
}

.genetics-detail-title {
    font-size: 28px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 4px;
}

.genetics-detail-subtitle {
    color: #5b5963;
    font-weight: 800;
    line-height: 1.35;
}

.genetics-detail-body {
    padding: 18px;
    color: #4f4a5e;
    font-weight: 700;
    line-height: 1.55;
}

.genetics-detail-section-title {
    font-size: 18px;
    font-weight: 900;
    color: #7a2f58;
    margin: 18px 0 8px 0;
}

.genetics-genotype-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.genetics-genotype-card {
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(168,203,183,0.52);
    border-radius: 14px;
    padding: 11px 12px;
}

.genetics-genotype-code {
    font-size: 18px;
    font-weight: 900;
    color: #7a2f58;
    margin-bottom: 4px;
}

.genetics-genotype-text {
    font-size: 13px;
    color: #5b5963;
    font-weight: 800;
    line-height: 1.35;
}

@media (max-width: 900px) {
    .genetics-info-hero,
    .genetics-info-layout {
        grid-template-columns: 1fr;
    }

    .genetics-info-hero {
        text-align: center;
    }

    .genetics-info-icon {
        margin: 0 auto;
    }
}

/* ===== Genetics Article Better Text Layout ===== */

.genetics-detail-body {
    padding: 22px;
    color: #4f4a5e;
    font-weight: 700;
    line-height: 1.65;
}

.genetics-article-text {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
}

.genetics-article-text p {
    margin: 0;
}

.genetics-article-highlight {
    background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(232,247,255,0.60));
    border: 1px solid rgba(168,203,183,0.55);
    border-radius: 16px;
    padding: 14px 16px;
    margin: 14px 0 18px 0;
}

.genetics-article-highlight-title {
    font-weight: 900;
    color: #7a2f58;
    margin-bottom: 8px;
}

.genetics-article-list {
    display: grid;
    gap: 7px;
}

.genetics-article-list div {
    background: rgba(255,255,255,0.64);
    border: 1px solid rgba(168,203,183,0.35);
    border-radius: 12px;
    padding: 8px 10px;
}

.genetics-article-list b {
    color: #7a2f58;
}

.genetics-detail-section-title {
    font-size: 20px;
    font-weight: 900;
    color: #7a2f58;
    margin: 22px 0 10px 0;
}

.genetics-genotype-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.genetics-genotype-card {
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(168,203,183,0.52);
    border-radius: 16px;
    padding: 14px 16px;
}

.genetics-genotype-code {
    font-size: 20px;
    font-weight: 900;
    color: #7a2f58;
    margin-bottom: 6px;
}

.genetics-genotype-text {
    font-size: 14px;
    color: #5b5963;
    font-weight: 800;
    line-height: 1.45;
}

.breed-detail-icon-img {
    width: 170px;
    height: 170px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.sale-big-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.sale-action-icon {
    width: 50px;
    height: 50px;
    object-fit: contain;
    display: block;
}

/* ===== Landing Legal Links ===== */

.landing-legal-links {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.62);
    border: 1px solid rgba(216,184,238,0.68);
    box-shadow: 0 8px 18px rgba(86,58,112,0.07);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px 14px;
    flex-wrap: wrap;
    text-align: center;
}

.landing-legal-links button {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 4px 6px !important;
    margin: 0 !important;
    color: #684b5d !important;
    font-weight: 900;
    text-decoration: underline;
    cursor: pointer;
}

.landing-legal-links button:hover {
    color: #7a2f58 !important;
    transform: none !important;
}

.landing-legal-separator {
    color: #9b7fa5;
    font-weight: 900;
}

/* ===== Public Legal View before Login ===== */

body.public-legal-view .nav-row,
body.public-legal-view #playerInfo {
    display: none !important;
}

body.public-legal-view #game {
    display: block !important;
}

body.public-legal-view #auth {
    display: none !important;
}

body.public-legal-view .topbar {
    display: none !important;
}

.public-legal-back-wrap {
    max-width: 1050px;
    margin: 18px auto 10px auto;
}

.public-legal-back-wrap button {
    border-radius: 999px;
    padding: 9px 16px;
    font-weight: 900;
}

/* ===== Legal / Rules Pages ===== */

.legal-page {
    max-width: 980px;
    margin: 18px auto 40px auto;
}

.legal-hero {
    background: linear-gradient(135deg, rgba(223,243,229,0.96), rgba(232,247,255,0.94), rgba(248,220,232,0.92));
    border: 1px solid #a8cbb7;
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    margin-bottom: 18px;
}

.legal-kicker {
    font-weight: 900;
    color: #4f7057;
    margin-bottom: 6px;
}

.legal-title {
    font-size: 32px;
    font-weight: 900;
    color: #7a2f58;
    margin-bottom: 8px;
}

.legal-subtitle {
    color: #5b5963;
    font-weight: 700;
    line-height: 1.5;
}

.legal-card {
    background: rgba(255,255,255,0.78);
    border: 1px solid #a8cbb7;
    border-radius: 18px;
    padding: 18px 20px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
    margin-bottom: 16px;
    line-height: 1.6;
}

.legal-card h3 {
    margin: 0 0 10px 0;
    color: #684b5d;
    font-size: 21px;
}

.legal-card p {
    margin: 0 0 10px 0;
}

.legal-card ul {
    margin: 8px 0 0 20px;
    padding: 0;
}

.legal-card li {
    margin-bottom: 7px;
}

.legal-small-note {
    font-size: 13px;
    color: #777;
    margin-top: 14px;
}

/* ===== Community Feedback / Polls ===== */

.community-feedback-layout {
    max-width: 1100px;
    margin: 18px auto 40px auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.community-poll-card,
.community-suggestion-card,
.community-admin-suggestions {
    background: rgba(255,255,255,0.78);
    border: 1px solid #a8cbb7;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}

.community-poll-title,
.community-suggestion-title {
    font-size: 22px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 8px;
}

.community-poll-note {
    color: #6a5f70;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 14px;
}

.community-poll-option {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    background: rgba(255,255,255,0.62);
    border: 1px solid rgba(168,203,183,0.55);
    border-radius: 14px;
    padding: 10px 12px;
    margin-bottom: 10px;
}

.community-poll-option-main {
    min-width: 0;
}

.community-poll-option-name {
    font-weight: 900;
    color: #4f4a5e;
    margin-bottom: 6px;
}

.community-poll-bar-wrap {
    height: 12px;
    background: rgba(230,230,230,0.9);
    border-radius: 999px;
    overflow: hidden;
}

.community-poll-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #dff3e5, #e8f7ff, #f8dce8);
}

.community-poll-votes {
    font-size: 13px;
    color: #6a5f70;
    font-weight: 800;
    margin-top: 4px;
}

.community-voted-badge {
    display: inline-block;
    margin-top: 8px;
    background: rgba(248,220,232,0.8);
    border: 1px solid rgba(168,203,183,0.55);
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 900;
    color: #7a2f58;
}

.community-suggestion-card textarea {
    width: 100%;
    min-height: 130px;
    border: 1px solid #cfe2d7;
    border-radius: 14px;
    padding: 12px;
    background: rgba(255,255,255,0.92);
    resize: vertical;
    font-family: Arial, sans-serif;
}

.community-suggestion-card button,
.community-poll-option button {
    font-weight: 900;
}

.community-admin-message {
    background: rgba(255,255,255,0.65);
    border: 1px solid rgba(168,203,183,0.45);
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 10px;
}

.community-admin-message-meta {
    font-size: 13px;
    font-weight: 900;
    color: #7a2f58;
    margin-bottom: 6px;
}

.community-admin-message-text {
    white-space: pre-line;
    color: #4f4a5e;
    line-height: 1.45;
}

/* ===== Admin Poll Manager ===== */

.admin-poll-form-grid {
    display: grid;
    gap: 12px;
}

.admin-poll-form-grid input,
.admin-poll-form-grid textarea {
    width: 100%;
    border: 1px solid #cfe2d7;
    border-radius: 12px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.92);
    font-family: Arial, sans-serif;
}

.admin-poll-options-grid {
    display: grid;
    gap: 8px;
}

.admin-poll-row {
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(168,203,183,0.55);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 12px;
}

.admin-poll-row-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
}

.admin-poll-question {
    font-size: 18px;
    font-weight: 900;
    color: #684b5d;
}

.admin-poll-status {
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 900;
    border: 1px solid rgba(168,203,183,0.65);
    background: rgba(232,247,255,0.82);
}

.admin-poll-status.inactive {
    background: rgba(230,230,230,0.82);
    color: #777;
}

.admin-poll-option-line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(168,203,183,0.35);
    padding: 6px 0;
}

.admin-poll-option-line:last-child {
    border-bottom: none;
}

.admin-poll-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-danger-button {
    background: linear-gradient(180deg, #fff1f1, #ffd6d6);
    border-color: #e5a5a5;
    color: #8a2f2f;
}

.admin-danger-button:hover {
    background: linear-gradient(180deg, #ffe6e6, #ffc2c2);
}

/* ===== Cat Detail Previous / Next Arrows ===== */

.cat-detail-image-wrap {
    position: relative;
    display: inline-block;
}

.cat-nav-arrow {
    position: absolute;
    top: 48%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: 1px solid rgba(168,203,183,0.75);
    background: rgba(255,255,255,0.78);
    color: #684b5d;
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 14px rgba(0,0,0,0.10);
    cursor: pointer;
    z-index: 5;
    transition: transform 0.12s ease, background 0.12s ease, opacity 0.12s ease;
}

.cat-nav-arrow:hover {
    transform: translateY(-50%) scale(1.06);
    background: rgba(255,241,247,0.95);
}

.cat-nav-arrow.left {
    left: -62px;
}

.cat-nav-arrow.right {
    right: -62px;
}

.cat-nav-arrow.disabled {
    opacity: 0.28;
    cursor: not-allowed;
    filter: grayscale(100%);
}

@media (max-width: 760px) {
    .cat-nav-arrow.left {
        left: 4px;
    }

    .cat-nav-arrow.right {
        right: 4px;
    }
}

.public-owner-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    display: block;
}

.public-cat-tab {
    cursor: pointer;
    color: white;
}

.public-cat-tab.active {
    background: linear-gradient(180deg, #f8dce8 0%, #e8f7ff 100%);
    color: #684b5d;
}

.public-cat-tab-content {
    min-height: 160px;
}

/* ===== Howrse-style PurrPixels Profile Top ===== */

.breeder-profile-top-card {
    max-width: 1180px;
    margin: 18px auto 22px auto;
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 22px;
    align-items: center;
    background: linear-gradient(135deg, rgba(223,243,229,0.96), rgba(232,247,255,0.94), rgba(248,220,232,0.90));
    border: 1px solid #a8cbb7;
    border-radius: 22px;
    padding: 20px 24px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}

.breeder-profile-avatar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.breeder-profile-avatar {
    width: 138px;
    height: 138px;
    border-radius: 50%;
    padding: 6px;
    background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(232,247,255,0.72));
    border: 2px solid rgba(168,203,183,0.85);
    box-shadow: inset 0 0 0 4px rgba(255,255,255,0.45), 0 6px 14px rgba(0,0,0,0.08);
    overflow: hidden;
}

.breeder-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.breeder-profile-main {
    min-width: 0;
}

.breeder-profile-kicker {
    font-size: 17px;
    font-weight: 900;
    color: #4f7057;
    margin-bottom: 3px;
}

.breeder-profile-username {
    font-size: 38px;
    line-height: 1;
    font-weight: 900;
    color: #684b5d;
    letter-spacing: 0.5px;
}

.breeder-profile-cattery {
    margin-top: 6px;
    font-size: 20px;
    font-weight: 900;
    color: #5b5963;
}

.breeder-profile-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 34px;
    margin-top: 18px;
    max-width: 860px;
}

.breeder-profile-info-row {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 10px;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid rgba(168,203,183,0.55);
}

.breeder-profile-info-row span {
    font-weight: 900;
    color: #315339;
}

.breeder-profile-info-row b {
    color: #4f4a5e;
    font-weight: 800;
}

.breeder-profile-actions {
    margin-top: 18px;
}

@media (max-width: 850px) {
    .breeder-profile-top-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .breeder-profile-info-grid {
        grid-template-columns: 1fr;
    }

    .breeder-profile-info-row {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .breeder-profile-actions {
        justify-content: center;
    }
}

/* ===== PurrPixels Notifications ===== */

.notification-wrap {
    position: relative;
}

.notification-bell {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(168,203,183,0.75);
    background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(248,220,232,0.70));
    box-shadow: 0 2px 7px rgba(90, 74, 99, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 22px;
    transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.notification-bell:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, #ffffff, #e8f7ff);
    box-shadow: 0 4px 10px rgba(90, 74, 99, 0.18);
}

.notification-count {
    display: none;
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ff7caf, #d94f86);
    color: white;
    border: 2px solid white;
    font-size: 12px;
    font-weight: 900;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(90, 74, 99, 0.22);
}

.notification-count.show {
    display: flex;
}

.notification-dropdown {
    display: none;
    position: absolute;
    top: 52px;
    right: 0;
    width: 360px;
    max-height: 520px;
    overflow: hidden;
    background: rgba(255,255,255,0.98);
    border: 1px solid #d6e4dc;
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.16);
    z-index: 40;
}

.notification-dropdown.show {
    display: block;
}

.notification-head {
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    background: linear-gradient(90deg, #dff3e5 0%, #e8f7ff 50%, #f8dce8 100%);
    border-bottom: 1px solid #cfe2d7;
}

.notification-title {
    font-size: 18px;
    font-weight: 900;
    color: #684b5d;
}

.notification-clear-btn {
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 900;
}

.notification-list {
    max-height: 430px;
    overflow-y: auto;
}

.notification-item {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(168,203,183,0.35);
    background: rgba(255,255,255,0.66);
    cursor: pointer;
}

.notification-item:hover {
    background: rgba(248,220,232,0.35);
}

.notification-item.unread {
    background: rgba(232,247,255,0.72);
}

.notification-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background: rgba(255,255,255,0.86);
    border: 1px solid rgba(168,203,183,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.notification-item-title {
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 3px;
}

.notification-message {
    color: #4f4a5e;
    font-size: 13px;
    line-height: 1.35;
}

.notification-date {
    color: #8a8090;
    font-size: 12px;
    font-weight: 800;
    margin-top: 5px;
}

.notification-empty {
    padding: 18px;
    text-align: center;
    color: #777;
    font-weight: 700;
}

@media (max-width: 700px) {
    .notification-dropdown {
        position: fixed;
        top: 84px;
        right: 12px;
        left: 12px;
        width: auto;
    }
}

.cat-title-prefix {
    display: inline-block;
    font-weight: 950;
    color: #3f2f46;
    margin-right: 4px;
    letter-spacing: 0.2px;
}

.cat-real-name {
    font-weight: inherit;
    color: inherit;
}

/* =====================================================
   FAVORITE CATS
===================================================== */

.favorite-heart-btn {
    border: 1px solid #e8b6ca;
    background: linear-gradient(180deg, #fff6fa, #ffe5f0);
    color: #8b4d63;
    border-radius: 999px;
    padding: 8px 13px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 2px 7px rgba(120, 70, 90, 0.12);
}

.favorite-heart-btn:hover {
    background: linear-gradient(180deg, #ffffff, #ffd8e8);
    transform: translateY(-1px);
}

.favorite-heart-btn.active {
    background: linear-gradient(180deg, #ffd2e4, #f7a9c8);
    color: #6b2e48;
    border-color: #d782a6;
}

.favorite-page-wrap {
    max-width: 1120px;
    margin: 0 auto;
}

.favorite-hero {
    background: linear-gradient(135deg, rgba(223,243,229,0.96), rgba(232,247,255,0.94), rgba(248,220,232,0.94));
    border: 1px solid rgba(168,203,183,0.7);
    border-radius: 22px;
    padding: 22px;
    margin-bottom: 18px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.07);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

.favorite-title {
    font-size: 28px;
    font-weight: 900;
    color: #5b4a63;
}

.favorite-subtitle {
    margin-top: 5px;
    color: #6f6475;
    font-weight: 600;
}

.favorite-hero-icon {
    font-size: 42px;
}

.favorite-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}

.favorite-cat-card {
    background: rgba(255,255,255,0.82);
    border: 1px solid #d8e7de;
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 5px 12px rgba(0,0,0,0.06);
    text-align: center;
    position: relative;
}

.favorite-cat-card img {
    width: 170px;
    height: 170px;
    object-fit: contain;
    display: block;
    margin: 0 auto 10px auto;
}

.favorite-cat-name {
    font-size: 18px;
    font-weight: 900;
    color: #4f4a5e;
    margin-bottom: 6px;
}

.favorite-cat-meta {
    font-size: 14px;
    line-height: 1.45;
    color: #6c6472;
    margin-bottom: 12px;
}

.favorite-cat-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.favorite-empty {
    background: rgba(255,255,255,0.78);
    border: 1px dashed #d8b7c8;
    border-radius: 18px;
    padding: 28px;
    text-align: center;
    color: #6b5f6f;
    font-weight: 700;
}

/* =====================================================
   FAVORITE HEART BUTTON - MARKET + STUD SERVICE ONLY
===================================================== */

.favorite-heart-btn {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e8b6ca;
    background: linear-gradient(180deg, #fff8fb, #ffe5f0);
    color: #9a4f6c;
    font-size: 18px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 2px 7px rgba(120, 70, 90, 0.12);
}

.favorite-heart-btn:hover {
    background: linear-gradient(180deg, #ffffff, #ffd8e8);
    transform: translateY(-1px);
}

.favorite-heart-btn.active {
    background: linear-gradient(180deg, #ffd2e4, #f7a9c8);
    color: #6b2e48;
    border-color: #d782a6;
}

.favorite-heart-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.training-cost-mini {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 900;
    color: #8a4f6d;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(168,203,183,0.55);
    border-radius: 999px;
    padding: 2px 7px;
}

.timeline-entry.pretty {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 10px;
    align-items: start;
    padding: 10px 0;
}

.timeline-icon {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: linear-gradient(180deg, #f8dce8, #e8f7ff);
    border: 1px solid rgba(168,203,183,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.06);
}

.timeline-body {
    min-width: 0;
}

.timeline-time {
    font-size: 12px;
    font-weight: 900;
    color: #8a4f6d;
    margin-bottom: 2px;
}

.timeline-text {
    color: #4f4a5e;
    font-weight: 700;
    line-height: 1.35;
}

/* =====================================================
   TROPHY REWARDS
===================================================== */

.trophy-reward-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin-top: 8px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(168,203,183,0.75);
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,220,232,0.55));
    color: #6b4b62;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.trophy-status.claimed {
    color: #507a60;
    font-weight: 900;
}

.trophy-status.locked-reward {
    color: #8a4f6d;
    font-weight: 900;
}

.public-cat-name {
    text-align: center;
    width: 100%;
    display: block;
    line-height: 1.15;
}

.public-cat-cattery {
    text-align: center;
    width: 100%;
    display: block;
}

.cat-title-prefix {
    font-weight: 950;
    color: #342b3f;
    margin-right: 5px;
}

/* =====================================================
   CAT TITLE PREFIX + CENTERED CAT HEADER
===================================================== */

.cat-title-clean {
    width: 100%;
    text-align: center;
    margin: 12px auto 18px auto;
}

.cat-main-name,
.cat-name.cat-main-name {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 6px;
    text-align: center;
    font-size: 26px;
    font-weight: 950;
    color: #7a2f58;
    line-height: 1.15;
}

.cat-main-cattery,
.cat-cattery.cat-main-cattery {
    width: 100%;
    display: block;
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    color: #6a4f63;
    margin-top: 4px;
}

.my-cat-name-new {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 5px;
    text-align: center;
}

.public-cat-name {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 6px;
    text-align: center;
    width: 100%;
}

.cat-title-prefix {
    font-weight: 950;
    color: #342b3f;
}

.cat-real-name {
    font-weight: 900;
}

/* =====================================================
   MY CATS - LISTED / FOR SALE VISUAL STATE
===================================================== */

.my-cat-card-new.listed {
    position: relative;
    border: 2px solid #f4a9c8;
    background: linear-gradient(
        180deg,
        rgba(255, 241, 247, 0.72),
        rgba(232, 247, 255, 0.54)
    );
    box-shadow: 0 6px 16px rgba(154, 79, 108, 0.18);
}

.my-cat-card-new.listed::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.28);
    pointer-events: none;
    z-index: 2;
}

.my-cat-card-new.listed::after {
    content: attr(data-sale-label);
    position: absolute;
    top: 118px;
    left: 50%;
    transform: translateX(-50%) rotate(-10deg);
    z-index: 4;
    padding: 7px 20px;
    border-radius: 999px;
    background: linear-gradient(180deg, #fff4fa, #f7b9d2);
    border: 2px solid #e58ab0;
    color: #7a2f58;
    font-size: 18px;
    font-weight: 950;
    letter-spacing: 1px;
    box-shadow: 0 6px 14px rgba(122, 47, 88, 0.18);
    pointer-events: none;
}

.my-cat-card-new.listed .my-cat-image-wrap img {
    opacity: 0.58;
    filter: grayscale(20%);
}

.my-cat-card-new.listed .my-cat-name-new,
.my-cat-card-new.listed .my-cat-cattery-new,
.my-cat-card-new.listed .my-cat-info-new {
    opacity: 0.78;
}

.my-cat-card-new.listed .my-cat-badge.sale {
    position: relative;
    z-index: 5;
    background: linear-gradient(180deg, #fff7e7, #ffdca7);
    border-color: #e9a84d;
    color: #8a4b00;
    box-shadow: 0 3px 9px rgba(138, 75, 0, 0.14);
}

.my-cat-card-new.listed:hover {
    transform: translateY(-2px);
    box-shadow: 0 9px 22px rgba(154, 79, 108, 0.22);
}

.my-cat-card-new.listed:hover .my-cat-image-wrap img {
    opacity: 0.72;
}

/* =====================================================
   CAT SHOW RESULTS + CAT CLUB RANKING
===================================================== */

.show-results-wrap {
    max-width: 1180px;
    margin: 0 auto;
}

.show-results-hero {
    background: linear-gradient(135deg, rgba(223,243,229,0.96), rgba(232,247,255,0.94), rgba(248,220,232,0.94));
    border: 1px solid rgba(168,203,183,0.75);
    border-radius: 22px;
    padding: 22px;
    margin-bottom: 18px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.07);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.show-results-title {
    font-size: 28px;
    font-weight: 950;
    color: #5b4a63;
}

.show-results-subtitle {
    margin-top: 5px;
    color: #6b6170;
    font-weight: 700;
}

.show-results-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.show-results-tab {
    border: 1px solid rgba(168,203,183,0.8);
    background: linear-gradient(180deg, #ffffff, #e8f7ff);
    color: #51465c;
    border-radius: 999px;
    padding: 10px 16px;
    font-weight: 900;
    cursor: pointer;
}

.show-results-tab.active {
    background: linear-gradient(180deg, #f8dce8, #e8f7ff);
    color: #7a2f58;
    border-color: #e7a8c5;
}

.show-result-card {
    background: rgba(255,255,255,0.86);
    border: 1px solid rgba(168,203,183,0.72);
    border-radius: 20px;
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: 0 5px 14px rgba(0,0,0,0.055);
    display: grid;
    grid-template-columns: 70px 1fr auto;
    gap: 14px;
    align-items: center;
}

.show-result-place {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 950;
    background: linear-gradient(180deg, #fff, #e8f7ff);
    border: 1px solid rgba(168,203,183,0.8);
}

.show-result-place.place-1 {
    background: linear-gradient(180deg, #fff8d9, #ffd978);
    color: #765000;
}

.show-result-place.place-2 {
    background: linear-gradient(180deg, #ffffff, #dfe7ef);
    color: #58616b;
}

.show-result-place.place-3 {
    background: linear-gradient(180deg, #ffe8d8, #d99a65);
    color: #704019;
}

.show-result-main-title {
    font-size: 18px;
    font-weight: 950;
    color: #4f4259;
}

.show-result-meta {
    margin-top: 4px;
    color: #6b6170;
    font-weight: 700;
    line-height: 1.45;
}

.show-result-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.show-result-pill {
    border-radius: 999px;
    padding: 6px 10px;
    border: 1px solid rgba(168,203,183,0.7);
    background: rgba(255,255,255,0.82);
    font-weight: 900;
    color: #5b4a63;
    font-size: 13px;
}

.club-ranking-card {
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(168,203,183,0.72);
    border-radius: 20px;
    padding: 14px;
    margin-bottom: 12px;
    display: grid;
    grid-template-columns: 70px 1fr auto;
    gap: 14px;
    align-items: center;
    box-shadow: 0 5px 14px rgba(0,0,0,0.055);
}

.club-rank-badge {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 950;
    font-size: 20px;
    background: linear-gradient(180deg, #ffffff, #e8f7ff);
    border: 1px solid rgba(168,203,183,0.8);
    color: #5b4a63;
}

.club-rank-badge.rank-1 {
    background: linear-gradient(180deg, #fff8d9, #ffd978);
    color: #765000;
}

.club-rank-badge.rank-2 {
    background: linear-gradient(180deg, #ffffff, #dfe7ef);
    color: #58616b;
}

.club-rank-badge.rank-3 {
    background: linear-gradient(180deg, #ffe8d8, #d99a65);
    color: #704019;
}

.club-ranking-title {
    font-size: 18px;
    font-weight: 950;
    color: #4f4259;
}

.club-ranking-owner {
    margin-top: 3px;
    color: #6b6170;
    font-weight: 750;
}

.club-ranking-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

@media (max-width: 760px) {
    .show-result-card,
    .club-ranking-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .show-result-place,
    .club-rank-badge {
        margin: 0 auto;
    }

    .show-result-stats,
    .club-ranking-stats {
        justify-content: center;
    }
}

/* =====================================================
   CAT CLUB DASHBOARD SHOW RESULTS
===================================================== */

.catclub-result-show-card {
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(168,203,183,0.70);
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 5px 14px rgba(0,0,0,0.055);
}

.catclub-result-show-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    background: linear-gradient(90deg, #dff3e5 0%, #e8f7ff 50%, #f8dce8 100%);
    border-bottom: 1px solid rgba(168,203,183,0.55);
}

.catclub-result-show-title {
    font-size: 20px;
    font-weight: 950;
    color: #684b5d;
}

.catclub-result-show-meta {
    margin-top: 4px;
    font-weight: 800;
    color: #6b6170;
    font-size: 13px;
}

.catclub-result-show-icon {
    font-size: 30px;
}

.catclub-result-list {
    display: flex;
    flex-direction: column;
}

.catclub-result-row {
    display: grid;
    grid-template-columns: 90px 1fr 330px;
    gap: 14px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(168,203,183,0.35);
    background: rgba(255,255,255,0.42);
}

.catclub-result-row:last-child {
    border-bottom: none;
}

.catclub-result-row:nth-child(even) {
    background: rgba(232,247,255,0.35);
}

.catclub-result-place {
    font-size: 18px;
    font-weight: 950;
    color: #7a2f58;
}

.catclub-result-row.place-1 .catclub-result-place {
    color: #9a7100;
}

.catclub-result-row.place-2 .catclub-result-place {
    color: #66717d;
}

.catclub-result-row.place-3 .catclub-result-place {
    color: #8a4e22;
}

.catclub-result-cat {
    font-weight: 950;
    color: #7a2f58;
    text-decoration: none;
}

.catclub-result-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.catclub-result-stats span {
    border-radius: 999px;
    padding: 5px 9px;
    border: 1px solid rgba(168,203,183,0.65);
    background: rgba(255,255,255,0.82);
    color: #5b4a63;
    font-size: 12px;
    font-weight: 900;
}

@media (max-width: 850px) {
    .catclub-result-row {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .catclub-result-stats {
        justify-content: center;
    }
}

.achievements-button-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* =====================================================
   PLAYER PROFILE - CAT CLUB + ACTION BUTTONS
===================================================== */

.breeder-clean-actions.breeder-profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.breeder-clean-action {
    border-radius: 999px;
    padding: 10px 15px;
    font-weight: 950;
    background: linear-gradient(180deg, #ffffff, #f3fbf6);
    border: 1px solid #a8cbb7;
    color: #4f4a5e;
    box-shadow: 0 4px 10px rgba(0,0,0,0.055);
}

.breeder-clean-action:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, #ffffff, #f8dce8);
    box-shadow: 0 7px 14px rgba(0,0,0,0.08);
}

.breeder-clean-action.primary {
    background: linear-gradient(180deg, #f8dce8, #e8f7ff);
    color: #7a2f58;
    border-color: #e7a8c5;
}

.breeder-catclub-box {
    background: linear-gradient(135deg, rgba(223,243,229,0.78), rgba(232,247,255,0.72), rgba(248,220,232,0.68));
    border: 1px solid rgba(168,203,183,0.72);
    border-radius: 18px;
    padding: 15px;
    display: grid;
    grid-template-columns: 78px 1fr;
    gap: 14px;
    align-items: center;
}

.breeder-catclub-icon {
    width: 68px;
    height: 68px;
    border-radius: 18px;
    background: rgba(255,255,255,0.74);
    border: 1px solid rgba(168,203,183,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
}

.breeder-catclub-icon img {
    width: 54px;
    height: 54px;
    object-fit: contain;
}

.breeder-catclub-name {
    font-size: 22px;
    font-weight: 950;
    color: #7a2f58;
    margin-bottom: 5px;
}

.breeder-catclub-meta {
    color: #5b5963;
    font-weight: 800;
    line-height: 1.45;
}

.breeder-catclub-stats {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.breeder-catclub-pill {
    border-radius: 999px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.82);
    border: 1px solid rgba(168,203,183,0.65);
    font-size: 13px;
    font-weight: 900;
    color: #5b4a63;
}

.breeder-empty-soft {
    background: rgba(255,255,255,0.62);
    border: 1px dashed rgba(168,203,183,0.85);
    border-radius: 16px;
    padding: 18px;
    text-align: center;
    color: #6b6170;
    font-weight: 800;
}

@media (max-width: 650px) {
    .breeder-catclub-box {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .breeder-catclub-icon {
        margin: 0 auto;
    }

    .breeder-catclub-stats {
        justify-content: center;
    }
}

/* =====================================================
   COMPACT PLAYER PROFILE CAT CLUB CARD
===================================================== */

.breeder-catclub-compact {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 12px;
    align-items: center;
}

.breeder-catclub-compact-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: rgba(255,255,255,0.74);
    border: 1px solid rgba(168,203,183,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
}

.breeder-catclub-compact-icon img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.breeder-catclub-compact-name {
    font-size: 19px;
    font-weight: 950;
    color: #7a2f58;
    line-height: 1.15;
}

.breeder-catclub-compact-meta {
    margin-top: 4px;
    font-size: 14px;
    color: #5b5963;
    font-weight: 800;
    line-height: 1.35;
}

.breeder-catclub-compact-stats {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.breeder-catclub-compact-stats span {
    border-radius: 999px;
    padding: 5px 9px;
    background: rgba(255,255,255,0.82);
    border: 1px solid rgba(168,203,183,0.65);
    font-size: 12px;
    font-weight: 900;
    color: #5b4a63;
}

/* =====================================================
   ADMIN PANEL BEAUTY UPGRADE
===================================================== */

.admin-page {
    max-width: 1180px;
    margin: 18px auto 40px auto;
}

.admin-hero {
    background: linear-gradient(135deg, rgba(223,243,229,0.96), rgba(232,247,255,0.94), rgba(248,220,232,0.92));
    border: 1px solid #a8cbb7;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    display: grid;
    grid-template-columns: 1fr 112px;
    gap: 18px;
    align-items: center;
    margin-bottom: 18px;
}

.admin-kicker {
    font-weight: 950;
    color: #4f7057;
    margin-bottom: 6px;
}

.admin-title {
    font-size: 36px;
    font-weight: 950;
    color: #684b5d;
    margin-bottom: 8px;
}

.admin-subtitle {
    color: #5b5963;
    font-weight: 750;
    line-height: 1.45;
}

.admin-hero-icon {
    width: 96px;
    height: 96px;
    border-radius: 24px;
    background: rgba(255,255,255,0.66);
    border: 1px solid rgba(168,203,183,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    margin-left: auto;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,0.35);
}

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.admin-stat-card {
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(168,203,183,0.72);
    border-radius: 20px;
    padding: 17px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.055);
    text-align: center;
}

.admin-stat-value {
    font-size: 30px;
    font-weight: 950;
    color: #7a2f58;
    line-height: 1.1;
}

.admin-stat-label {
    margin-top: 6px;
    font-weight: 900;
    color: #5b5963;
}

.admin-tools-card {
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(168,203,183,0.72);
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.055);
    margin-bottom: 18px;
}

.admin-toolbar-grid {
    display: grid;
    grid-template-columns: 1fr 190px auto;
    gap: 12px;
    align-items: center;
}

.admin-search-wrap {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.92);
    border: 1px solid #a8cbb7;
    border-radius: 999px;
    padding: 6px 10px 6px 16px;
}

.admin-search-wrap input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    padding: 8px;
    font-weight: 800;
    color: #4f4a5e;
}

.admin-search-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(180deg, #f8dce8, #e8f7ff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 950;
}

.admin-filter-select {
    width: 100%;
    min-height: 44px;
    border-radius: 14px;
    border: 1px solid #a8cbb7;
    background: rgba(255,255,255,0.90);
    font-weight: 900;
    color: #5b4a63;
    padding: 8px 12px;
}

.admin-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.admin-quick-button {
    border-radius: 999px;
    padding: 10px 14px;
    font-weight: 950;
    background: linear-gradient(180deg, #ffffff, #f3fbf6);
    border: 1px solid #a8cbb7;
    color: #5b4a63;
}

.admin-quick-button.primary {
    background: linear-gradient(180deg, #f8dce8, #e8f7ff);
    color: #7a2f58;
    border-color: #e5a4c1;
}

.admin-report-grid {
    display: grid;
    gap: 14px;
}

.admin-report-card {
    background: rgba(255,255,255,0.82);
    border: 1px solid rgba(168,203,183,0.72);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 7px 16px rgba(0,0,0,0.06);
}

.admin-report-card.open {
    border-left: 6px solid #e7a8c5;
}

.admin-report-card.closed {
    opacity: 0.72;
}

.admin-report-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    padding: 15px 16px;
    background: linear-gradient(90deg, #dff3e5 0%, #e8f7ff 50%, #f8dce8 100%);
    border-bottom: 1px solid rgba(168,203,183,0.45);
}

.admin-report-title {
    font-size: 19px;
    font-weight: 950;
    color: #684b5d;
}

.admin-report-date {
    margin-top: 4px;
    font-size: 13px;
    color: #6b6170;
    font-weight: 800;
}

.admin-status-badge {
    border-radius: 999px;
    padding: 7px 12px;
    font-weight: 950;
    background: linear-gradient(180deg, #fff4fa, #f7b9d2);
    border: 1px solid #e58ab0;
    color: #7a2f58;
    white-space: nowrap;
}

.admin-status-badge.closed {
    background: linear-gradient(180deg, #ffffff, #dfeee4);
    border-color: #a8cbb7;
    color: #4f7057;
}

.admin-report-body {
    padding: 16px;
}

.admin-report-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.admin-info-mini {
    background: rgba(255,255,255,0.66);
    border: 1px solid rgba(168,203,183,0.45);
    border-radius: 15px;
    padding: 10px 12px;
}

.admin-info-label {
    font-size: 12px;
    font-weight: 950;
    color: #4f7057;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

.admin-info-value {
    font-weight: 900;
    color: #4f4a5e;
}

.admin-report-details {
    background: rgba(232,247,255,0.48);
    border: 1px solid rgba(168,203,183,0.42);
    border-radius: 16px;
    padding: 13px;
    line-height: 1.45;
    color: #5b5963;
    font-weight: 750;
    margin-bottom: 13px;
}

.admin-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-actions-row button {
    border-radius: 999px;
    font-weight: 900;
}

.admin-danger-btn {
    background: linear-gradient(180deg, #fff0f0, #ffd5d5);
    border-color: #ef9a9a;
    color: #8a2f2f;
}

.admin-empty-card {
    background: rgba(255,255,255,0.78);
    border: 1px dashed rgba(168,203,183,0.9);
    border-radius: 20px;
    padding: 28px;
    text-align: center;
    color: #6b6170;
    font-weight: 900;
    box-shadow: 0 6px 14px rgba(0,0,0,0.045);
}

.admin-role-pill {
    display: inline-flex;
    border-radius: 999px;
    padding: 4px 10px;
    background: rgba(255,255,255,0.82);
    border: 1px solid rgba(168,203,183,0.65);
    font-weight: 950;
    color: #7a2f58;
}

@media (max-width: 760px) {
    .admin-hero,
    .admin-toolbar-grid {
        grid-template-columns: 1fr;
    }

    .admin-hero {
        text-align: center;
    }

    .admin-hero-icon {
        margin: 0 auto;
    }

    .admin-report-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =====================================================
   ADMIN PLAYER SEARCH + MODERATION LOGS
===================================================== */

.admin-section-title {
    font-size: 22px;
    font-weight: 950;
    color: #684b5d;
    margin-bottom: 12px;
}

.admin-player-search-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
}

.admin-player-search-grid input {
    width: 100%;
    border: 1px solid #a8cbb7;
    border-radius: 999px;
    padding: 11px 16px;
    background: rgba(255,255,255,0.92);
    font-weight: 800;
    color: #4f4a5e;
}

.admin-player-result-list {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.admin-player-result-card,
.admin-log-row {
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(168,203,183,0.70);
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 5px 12px rgba(0,0,0,0.045);
}

.admin-player-result-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 8px;
}

.admin-player-result-name {
    font-size: 20px;
    font-weight: 950;
    color: #7a2f58;
}

.admin-player-result-meta {
    color: #5b5963;
    font-weight: 800;
    line-height: 1.45;
}

.admin-player-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.admin-ban-badge {
    border-radius: 999px;
    padding: 6px 10px;
    font-weight: 950;
    border: 1px solid rgba(168,203,183,0.70);
    background: rgba(255,255,255,0.80);
    color: #4f7057;
}

.admin-ban-badge.banned {
    background: linear-gradient(180deg, #fff0f0, #ffd3d3);
    border-color: #ef9a9a;
    color: #8a2f2f;
}

.admin-log-list {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.admin-log-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-weight: 950;
    color: #684b5d;
}

.admin-log-details {
    margin-top: 6px;
    color: #5b5963;
    font-weight: 750;
    line-height: 1.4;
}

.admin-mini-divider {
    height: 1px;
    background: rgba(168,203,183,0.45);
    margin: 16px 0;
}

/* =====================================================
   PURRPIXELS TUTORIAL
===================================================== */

.tutorial-page {
    max-width: 1120px;
    margin: 18px auto 40px auto;
}

.tutorial-hero {
    background: linear-gradient(135deg, rgba(223,243,229,0.96), rgba(232,247,255,0.94), rgba(248,220,232,0.92));
    border: 1px solid #a8cbb7;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 18px;
    align-items: center;
    margin-bottom: 18px;
}

.tutorial-kicker {
    font-weight: 950;
    color: #4f7057;
    margin-bottom: 6px;
}

.tutorial-title {
    font-size: 36px;
    font-weight: 950;
    color: #684b5d;
    margin-bottom: 8px;
}

.tutorial-subtitle {
    color: #5b5963;
    font-weight: 750;
    line-height: 1.45;
}

.tutorial-icon {
    width: 96px;
    height: 96px;
    border-radius: 24px;
    background: rgba(255,255,255,0.66);
    border: 1px solid rgba(168,203,183,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    margin-left: auto;
}

.tutorial-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 18px;
    align-items: start;
}

.tutorial-progress-card,
.tutorial-main-card {
    background: rgba(255,255,255,0.80);
    border: 1px solid #a8cbb7;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}

.tutorial-card-title {
    background: linear-gradient(90deg, #dff3e5 0%, #e8f7ff 50%, #f8dce8 100%);
    border-bottom: 1px solid #cfe2d7;
    padding: 14px 16px;
    font-size: 22px;
    font-weight: 950;
    color: #684b5d;
    text-align: center;
}

.tutorial-card-body {
    padding: 18px;
}

.tutorial-progress-bar {
    height: 18px;
    border-radius: 999px;
    background: rgba(220,220,220,0.95);
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.06);
    margin: 12px 0;
}

.tutorial-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #8fc6d8, #f6cfe0);
}

.tutorial-step-list {
    display: grid;
    gap: 7px;
    margin-top: 12px;
    max-height: 550px;
    overflow-y: auto;
    padding-right: 2px;
}

.tutorial-step-mini {
    border-radius: 12px;
    padding: 9px 10px;
    border: 1px solid rgba(168,203,183,0.45);
    background: rgba(255,255,255,0.58);
    font-weight: 850;
    color: #5b5963;
}

.tutorial-step-mini.active {
    background: linear-gradient(90deg, rgba(223,243,229,0.96), rgba(248,220,232,0.78));
    color: #7a2f58;
    border-color: #e5a4c1;
}

.tutorial-step-title {
    font-size: 30px;
    font-weight: 950;
    color: #7a2f58;
    margin-bottom: 10px;
}

.tutorial-step-text {
    font-size: 17px;
    line-height: 1.55;
    font-weight: 750;
    color: #5b5963;
    margin-bottom: 14px;
}

.tutorial-task-box {
    background: rgba(232,247,255,0.56);
    border: 1px solid rgba(168,203,183,0.58);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 14px;
    color: #4f4a5e;
    font-weight: 850;
}

.tutorial-reward-box {
    background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(248,220,232,0.44));
    border: 1px solid rgba(168,203,183,0.65);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 16px;
    font-weight: 950;
    color: #684b5d;
}

.tutorial-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tutorial-actions button {
    border-radius: 999px;
    padding: 10px 16px;
    font-weight: 950;
}

.tutorial-actions .primary {
    background: linear-gradient(180deg, #f8dce8, #e8f7ff);
    border-color: #e7a8c5;
    color: #7a2f58;
}

.tutorial-mascot-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 18px;
}

.tutorial-mascot-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(247,250,255,0.88));
    border: 1px solid #cfe2d7;
    border-radius: 18px;
    padding: 14px;
    display: flex;
    gap: 12px;
    align-items: center;
    min-height: 102px;
}

.tutorial-mascot-card img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 14px;
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(168,203,183,0.45);
    padding: 4px;
}

.tutorial-mascot-name {
    font-size: 20px;
    font-weight: 950;
    color: #684b5d;
    margin-bottom: 4px;
}

.tutorial-mascot-desc {
    font-size: 14px;
    line-height: 1.4;
    color: #5b5963;
    font-weight: 700;
}

.tutorial-dialogue-wrap {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}

.tutorial-bubble {
    border-radius: 16px;
    padding: 12px 14px;
    font-weight: 800;
    line-height: 1.45;
    border: 1px solid rgba(168,203,183,0.45);
}

.tutorial-bubble.zoomi {
    background: rgba(232,247,255,0.80);
    color: #3f5471;
}

.tutorial-bubble.ivar {
    background: rgba(248,220,232,0.68);
    color: #6d4456;
}

.tutorial-bubble-name {
    display: block;
    font-size: 13px;
    font-weight: 950;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

@media (max-width: 850px) {
    .tutorial-hero,
    .tutorial-layout,
    .tutorial-mascot-row {
        grid-template-columns: 1fr;
    }

    .tutorial-hero {
        text-align: center;
    }

    .tutorial-icon {
        margin: 0 auto;
    }
}

/* =====================================================
   PURRPIXELS TUTORIAL - ZOOMI & IVAR
===================================================== */

.tutorial-page {
    max-width: 1120px;
    margin: 18px auto 40px auto;
}

.tutorial-hero {
    background: linear-gradient(135deg, rgba(223,243,229,0.96), rgba(232,247,255,0.94), rgba(248,220,232,0.92));
    border: 1px solid #a8cbb7;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 18px;
    align-items: center;
    margin-bottom: 18px;
}

.tutorial-kicker {
    font-weight: 950;
    color: #4f7057;
    margin-bottom: 6px;
}

.tutorial-title {
    font-size: 36px;
    font-weight: 950;
    color: #684b5d;
    margin-bottom: 8px;
}

.tutorial-subtitle {
    color: #5b5963;
    font-weight: 750;
    line-height: 1.45;
}

.tutorial-icon {
    width: 96px;
    height: 96px;
    border-radius: 24px;
    background: rgba(255,255,255,0.66);
    border: 1px solid rgba(168,203,183,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    margin-left: auto;
}

.tutorial-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 18px;
    align-items: start;
}

.tutorial-progress-card,
.tutorial-main-card {
    background: rgba(255,255,255,0.80);
    border: 1px solid #a8cbb7;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}

.tutorial-card-title {
    background: linear-gradient(90deg, #dff3e5 0%, #e8f7ff 50%, #f8dce8 100%);
    border-bottom: 1px solid #cfe2d7;
    padding: 14px 16px;
    font-size: 22px;
    font-weight: 950;
    color: #684b5d;
    text-align: center;
}

.tutorial-card-body {
    padding: 18px;
}

.tutorial-progress-bar {
    height: 18px;
    border-radius: 999px;
    background: rgba(220,220,220,0.95);
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.06);
    margin: 12px 0;
}

.tutorial-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #8fc6d8, #f6cfe0);
}

.tutorial-step-list {
    display: grid;
    gap: 7px;
    margin-top: 12px;
    max-height: 550px;
    overflow-y: auto;
    padding-right: 2px;
}

.tutorial-step-mini {
    border-radius: 12px;
    padding: 9px 10px;
    border: 1px solid rgba(168,203,183,0.45);
    background: rgba(255,255,255,0.58);
    font-weight: 850;
    color: #5b5963;
}

.tutorial-step-mini.active {
    background: linear-gradient(90deg, rgba(223,243,229,0.96), rgba(248,220,232,0.78));
    color: #7a2f58;
    border-color: #e5a4c1;
}

.tutorial-mascot-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 18px;
}

.tutorial-mascot-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(247,250,255,0.88));
    border: 1px solid #cfe2d7;
    border-radius: 18px;
    padding: 14px;
    display: flex;
    gap: 12px;
    align-items: center;
    min-height: 102px;
}

.tutorial-mascot-card img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 14px;
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(168,203,183,0.45);
    padding: 4px;
}

.tutorial-mascot-name {
    font-size: 20px;
    font-weight: 950;
    color: #684b5d;
    margin-bottom: 4px;
}

.tutorial-mascot-desc {
    font-size: 14px;
    line-height: 1.4;
    color: #5b5963;
    font-weight: 700;
}

.tutorial-dialogue-wrap {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}

.tutorial-bubble {
    border-radius: 18px;
    padding: 13px 15px;
    font-weight: 850;
    line-height: 1.45;
    border: 1px solid rgba(168,203,183,0.45);
    box-shadow: 0 3px 8px rgba(0,0,0,0.035);
}

.tutorial-bubble.zoomi {
    background: rgba(232,247,255,0.86);
    color: #3f5471;
}

.tutorial-bubble.ivar {
    background: rgba(248,220,232,0.74);
    color: #6d4456;
}

.tutorial-step-title {
    font-size: 30px;
    font-weight: 950;
    color: #7a2f58;
    margin-bottom: 10px;
}

.tutorial-step-text {
    font-size: 17px;
    line-height: 1.55;
    font-weight: 750;
    color: #5b5963;
    margin-bottom: 14px;
}

.tutorial-task-box {
    background: rgba(232,247,255,0.56);
    border: 1px solid rgba(168,203,183,0.58);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 14px;
    color: #4f4a5e;
    font-weight: 850;
}

.tutorial-task-box.done {
    background: rgba(223,243,229,0.82);
    border-color: #8fc6a2;
}

.tutorial-task-done {
    margin-top: 8px;
    color: #4f7057;
    font-weight: 950;
}

.tutorial-reward-box {
    background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(248,220,232,0.44));
    border: 1px solid rgba(168,203,183,0.65);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 16px;
    font-weight: 950;
    color: #684b5d;
}

.tutorial-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tutorial-actions button {
    border-radius: 999px;
    padding: 10px 16px;
    font-weight: 950;
}

.tutorial-actions .primary {
    background: linear-gradient(180deg, #f8dce8, #e8f7ff);
    border-color: #e7a8c5;
    color: #7a2f58;
}

.tutorial-actions button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(80%);
}

@media (max-width: 850px) {
    .tutorial-hero,
    .tutorial-layout,
    .tutorial-mascot-row {
        grid-template-columns: 1fr;
    }

    .tutorial-hero {
        text-align: center;
    }

    .tutorial-icon {
        margin: 0 auto;
    }
}

/* =========================
   TUTORIAL STEP 1 / 2 / 3 UI
========================= */

#tutorialStep1Blocker {
    position: fixed;
    inset: 0;
    z-index: 999990;
    background: rgba(255,255,255,0.14);
    pointer-events: none;
}

#tutorialStep1Overlay {
    position: fixed;
    top: 118px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;
    width: min(900px, calc(100vw - 32px));
    pointer-events: none;
}

.tutorial-step1-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    justify-content: center;
}

.tutorial-step1-mascot {
    width: 145px;
    min-width: 145px;
    pointer-events: none;
}

.tutorial-step1-mascot img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,0.18));
}

.tutorial-step1-bubble {
    position: relative;
    flex: 1;
    min-height: 120px;
    background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248,235,244,0.98));
    border: 2px solid #b9d8c5;
    border-radius: 24px;
    padding: 18px 88px 18px 24px;
    box-shadow: 0 14px 35px rgba(0,0,0,0.18);
    color: #564d65;
    pointer-events: auto;
}

.tutorial-step1-bubble::before {
    content: "";
    position: absolute;
    left: -18px;
    top: 42px;
    width: 0;
    height: 0;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-right: 18px solid #ffffff;
    filter: drop-shadow(-2px 0 0 #b9d8c5);
}

.tutorial-step1-text {
    font-size: 23px;
    line-height: 1.38;
    font-weight: 700;
    color: #5a4a63;
}

.tutorial-step1-text .speaker {
    color: #7a2d63;
    font-weight: 900;
}

.tutorial-step1-next {
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 58px;
    height: 58px;
    margin: 0;
    padding: 0;
    border: 1px solid #b9d8c5;
    border-radius: 50%;
    background: linear-gradient(180deg, #fff7fb, #f0fbff);
    color: #6b4a70;
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000005;
}

.tutorial-step1-next:hover {
    transform: translateY(-50%) scale(1.04);
}

body.tutorial-step1-locked {
    overflow-x: hidden;
}

body.tutorial-step1-locked .nav-row,
body.tutorial-step1-locked .topbar,
body.tutorial-step1-locked .currency-bar,
body.tutorial-step1-locked .profile-wrap {
    pointer-events: none !important;
}

body.tutorial-step1-locked .tutorial-goal-highlight,
body.tutorial-step1-locked .tutorial-goal-highlight *,
body.tutorial-step1-locked .tutorial-step1-next {
    pointer-events: auto !important;
}

.tutorial-goal-highlight {
    position: relative !important;
    z-index: 1000004 !important;
    box-shadow: 0 0 0 4px #ff5d5d, 0 0 28px rgba(255, 93, 93, 0.55) !important;
    border-radius: 14px !important;
    animation: tutorialPulse 1s ease-in-out infinite;
    pointer-events: auto !important;
}

.tutorial-goal-highlight.tutorial-dropdown-target {
    background: rgba(255,255,255,0.98) !important;
}

@keyframes tutorialPulse {
    0% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
    100% { transform: translateY(0); }
}

#tutorialStep1Arrow {
    position: fixed;
    z-index: 1000003;
    width: 70px;
    height: 70px;
    pointer-events: none;
    display: none;
    animation: tutorialArrowBounce 0.9s ease-in-out infinite;
}

#tutorialStep1Arrow::before {
    content: "➜";
    display: block;
    font-size: 64px;
    line-height: 70px;
    color: #ff2f2f;
    text-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

@keyframes tutorialArrowBounce {
    0% { transform: translateX(0); }
    50% { transform: translateX(10px); }
    100% { transform: translateX(0); }
}

@media (max-width: 760px) {
    #tutorialStep1Overlay {
        width: calc(100vw - 18px);
        top: 96px;
    }

    .tutorial-step1-row {
        gap: 10px;
    }

    .tutorial-step1-mascot {
        width: 105px;
        min-width: 105px;
    }

    .tutorial-step1-bubble {
        min-height: 110px;
        padding: 16px 68px 16px 16px;
    }

    .tutorial-step1-text {
        font-size: 17px;
    }

    .tutorial-step1-next {
        width: 46px;
        height: 46px;
        font-size: 27px;
        right: 14px;
    }
}

.profile-wrap {
    position: relative;
    z-index: 10000010;
}

#profileMenu.dropdown {
    z-index: 10000020;
}

/* ===== Landing height alignment fix ===== */

.landing-hero {
    margin-top: 0 !important;
}

.landing-side {
    margin-top: 0 !important;
}

/* ===== FIX: Login Seite links/rechts gleiche Höhe ===== */

.landing-page {
    align-items: start !important;
}

.landing-left-panel {
    padding-top: 0 !important;
    margin-top: 0 !important;
    align-self: start !important;
    display: flex !important;
    justify-content: flex-start !important;
}

.landing-hero {
    margin-top: 0 !important;
    align-self: start !important;
}

.landing-side {
    padding-top: 0 !important;
    margin-top: 0 !important;
    align-self: start !important;
    justify-content: flex-end !important;
}

.landing-auth-card {
    margin-top: 0 !important;
}

/* Logo in der Mitte bleibt fest und nutzt die echten Klassen aus deinem HTML */
.landing-logo-stage {
    padding-top: 0 !important;
    margin-top: 0 !important;
    min-height: 0 !important;
    position: sticky !important;
    top: 170px !important;
    align-self: start !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
}

.landing-logo-center {
    width: 310px !important;
    max-width: 24vw !important;
    height: auto !important;
}

/* ===== PurrPixels News Page Color Fix ===== */

.news-page {
    background: transparent !important;
}

.news-hero {
    background:
        linear-gradient(135deg, rgba(255,250,254,0.84), rgba(246,239,255,0.72), rgba(238,247,255,0.58)) !important;
    border: 1px solid rgba(218,188,238,0.78) !important;
    box-shadow:
        0 12px 28px rgba(86,58,112,0.12),
        inset 0 0 0 1px rgba(255,255,255,0.36) !important;
    backdrop-filter: blur(7px) !important;
}

.news-post {
    background:
        linear-gradient(180deg, rgba(255,252,255,0.88), rgba(248,240,255,0.76)) !important;
    border: 1px solid rgba(218,188,238,0.76) !important;
    box-shadow:
        0 10px 24px rgba(86,58,112,0.11),
        inset 0 0 0 1px rgba(255,255,255,0.34) !important;
    backdrop-filter: blur(7px) !important;
}

.news-post-head {
    background:
        linear-gradient(90deg,
            rgba(238,247,255,0.88) 0%,
            rgba(255,241,250,0.92) 48%,
            rgba(246,231,255,0.88) 100%
        ) !important;
    border-bottom: 1px solid rgba(218,188,238,0.64) !important;
}

.news-post-date {
    color: #6f5780 !important;
}

.news-post-title {
    color: #8a2f5a !important;
}

.news-post-body {
    background: rgba(255,255,255,0.34) !important;
    color: #514b5f !important;
}

.news-tag {
    background: rgba(255,255,255,0.72) !important;
    border: 1px solid rgba(218,188,238,0.70) !important;
    color: #7a2f58 !important;
}

.news-post button,
.news-thanks-button {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,232,255,0.90)) !important;
    border: 1px solid rgba(218,188,238,0.82) !important;
    color: #5b4b63 !important;
    box-shadow: 0 5px 12px rgba(86,58,112,0.08) !important;
}

.news-post button:hover,
.news-thanks-button:hover {
    background:
        linear-gradient(180deg, rgba(255,255,255,1), rgba(255,229,244,0.92)) !important;
    transform: translateY(-1px);
}

/* Falls allgemeine grüne Linien in News noch durchkommen */
.news-page * {
    border-color: rgba(218,188,238,0.70);
}

/* ===== Profile Dropdown Visual Fix ===== */

.profile-wrap {
    position: relative;
    z-index: 9999 !important;
}

.dropdown {
    display: none;
    position: absolute;
    top: 54px;
    right: 0;
    min-width: 245px;
    background: rgba(255, 252, 255, 0.98) !important;
    color: #514b5f !important;
    border: 1px solid rgba(218,188,238,0.85) !important;
    border-radius: 16px !important;
    box-shadow:
        0 14px 32px rgba(86,58,112,0.22),
        inset 0 0 0 1px rgba(255,255,255,0.45) !important;
    z-index: 99999 !important;
    overflow: hidden;
    backdrop-filter: blur(12px);
}

.dropdown.show {
    display: block !important;
}

.dropdown-item {
    padding: 13px 16px !important;
    cursor: pointer;
    border-bottom: 1px solid rgba(218,188,238,0.38) !important;
    background: rgba(255,255,255,0.74) !important;
    color: #514b5f !important;
    font-weight: 800;
    font-size: 15px;
    white-space: nowrap;
}

.dropdown-item:last-child {
    border-bottom: none !important;
}

.dropdown-item:hover {
    background: linear-gradient(90deg, rgba(255,238,249,0.95), rgba(240,244,255,0.92)) !important;
    color: #8a2f5a !important;
}

/* Damit andere transparente Boxen nicht über das Menü rutschen */
.topbar {
    z-index: 5000 !important;
}

.nav-dropdown {
    z-index: 99998 !important;
}

/* ===== PurrPixels My Page Dreamy Color Fix ===== */

.breeder-page-clean {
    max-width: 1200px !important;
    margin: 18px auto 44px auto !important;
}

/* oberer Profilbereich */
.breeder-clean-hero {
    background:
        linear-gradient(135deg,
            rgba(255,250,254,0.84) 0%,
            rgba(240,247,255,0.74) 48%,
            rgba(255,232,246,0.72) 100%
        ) !important;
    border: 1px solid rgba(218,188,238,0.76) !important;
    border-radius: 30px !important;
    box-shadow:
        0 14px 32px rgba(86,58,112,0.13),
        inset 0 0 0 1px rgba(255,255,255,0.42) !important;
    backdrop-filter: blur(8px) !important;
    padding: 28px 34px !important;
    grid-template-columns: 170px 1fr !important;
    gap: 28px !important;
}

.breeder-clean-avatar {
    width: 138px !important;
    height: 138px !important;
    border: 3px solid rgba(255,255,255,0.72) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(248,232,255,0.72)) !important;
    box-shadow:
        0 10px 22px rgba(86,58,112,0.14),
        inset 0 0 0 5px rgba(255,255,255,0.44) !important;
}

.breeder-clean-avatar img {
    object-fit: cover !important;
}

.breeder-clean-kicker {
    color: #8a2f5a !important;
    font-weight: 950 !important;
    letter-spacing: 0.2px;
}

.breeder-clean-title {
    color: #65475f !important;
    font-size: 42px !important;
    line-height: 1.02 !important;
    margin-bottom: 5px !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.38);
}

.breeder-clean-subtitle {
    color: #5b5364 !important;
    font-size: 19px !important;
    font-weight: 900 !important;
}

/* Admin / Breeder Badge */
.breeder-clean-badge {
    background: rgba(255,255,255,0.72) !important;
    border: 1px solid rgba(218,188,238,0.72) !important;
    color: #5b4b63 !important;
    box-shadow: 0 5px 12px rgba(86,58,112,0.07);
}

.breeder-clean-badge.admin {
    background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,232,246,0.84)) !important;
    border-color: rgba(218,188,238,0.86) !important;
    color: #8a2f5a !important;
}

/* Action Buttons */
.breeder-clean-action,
.breeder-clean-button-grid button,
.breeder-clean-card button {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,232,255,0.88)) !important;
    border: 1px solid rgba(218,188,238,0.82) !important;
    color: #5b4b63 !important;
    border-radius: 999px !important;
    box-shadow: 0 6px 14px rgba(86,58,112,0.08) !important;
    font-weight: 950 !important;
}

.breeder-clean-action:hover,
.breeder-clean-button-grid button:hover,
.breeder-clean-card button:hover {
    background:
        linear-gradient(180deg, rgba(255,255,255,1), rgba(255,229,244,0.92)) !important;
    color: #8a2f5a !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(86,58,112,0.13) !important;
}

.breeder-clean-action.primary {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,224,241,0.90)) !important;
    border-color: rgba(226,162,199,0.80) !important;
    color: #8a2f5a !important;
}

/* Overview Card und alle unteren Karten */
.breeder-clean-card {
    background:
        linear-gradient(180deg, rgba(255,252,255,0.86), rgba(248,240,255,0.72)) !important;
    border: 1px solid rgba(218,188,238,0.74) !important;
    border-radius: 24px !important;
    box-shadow:
        0 11px 24px rgba(86,58,112,0.10),
        inset 0 0 0 1px rgba(255,255,255,0.34) !important;
    backdrop-filter: blur(7px) !important;
    overflow: hidden !important;
}

.breeder-clean-card-title {
    background:
        linear-gradient(90deg,
            rgba(238,247,255,0.88) 0%,
            rgba(255,241,250,0.92) 48%,
            rgba(246,231,255,0.88) 100%
        ) !important;
    border-bottom: 1px solid rgba(218,188,238,0.62) !important;
    color: #65475f !important;
    font-size: 22px !important;
    padding: 15px 18px !important;
}

.breeder-clean-card-body {
    padding: 18px !important;
}

/* Overview Zahlen */
.breeder-clean-stats {
    gap: 12px !important;
}

.breeder-clean-stat {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.76), rgba(245,240,255,0.58)) !important;
    border: 1px solid rgba(218,188,238,0.62) !important;
    border-radius: 18px !important;
    box-shadow: 0 7px 16px rgba(86,58,112,0.07) !important;
}

.breeder-clean-stat-value {
    color: #8a2f5a !important;
    font-size: 27px !important;
}

.breeder-clean-stat-label {
    color: #5b5364 !important;
    font-size: 13px !important;
}

/* Detail-Liste oben in My Page */
.breeder-clean-detail-list div {
    border-bottom: 1px solid rgba(218,188,238,0.48) !important;
}

.breeder-clean-detail-list b {
    color: #7a2f58 !important;
}

.breeder-clean-detail-list span {
    color: #514b5f !important;
    font-weight: 900 !important;
}

/* Presentation */
.breeder-clean-presentation {
    color: #514b5f !important;
    font-weight: 750 !important;
}

.breeder-clean-presentation textarea,
.breeder-presentation-edit {
    background: rgba(255,255,255,0.74) !important;
    border: 1px solid rgba(218,188,238,0.70) !important;
    border-radius: 18px !important;
    color: #514b5f !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.42),
        0 7px 16px rgba(86,58,112,0.05) !important;
}

.breeder-clean-presentation textarea:focus,
.breeder-presentation-edit:focus {
    outline: none !important;
    border-color: rgba(200,168,255,0.95) !important;
    box-shadow:
        0 0 0 3px rgba(200,168,255,0.18),
        inset 0 0 0 1px rgba(255,255,255,0.42) !important;
}

/* Friends + Greetings Listen */
.friend-list.clean,
.greeting-list.clean {
    border: 1px solid rgba(218,188,238,0.62) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: rgba(255,255,255,0.54) !important;
}

.friend-row,
.greeting-row {
    background: rgba(255,255,255,0.54) !important;
    border-bottom: 1px solid rgba(218,188,238,0.42) !important;
    color: #514b5f !important;
}

.friend-row:nth-child(even),
.greeting-row:nth-child(even) {
    background: rgba(255,241,250,0.50) !important;
}

.friend-name-link,
.greeting-row span:first-child {
    color: #7a2f58 !important;
    font-weight: 950 !important;
}

.friend-name-link:hover {
    color: #8a2f5a !important;
}

.greeting-row span:last-child {
    color: #6f6178 !important;
}

/* Leere Boxen */
.breeder-clean-empty {
    background: rgba(255,255,255,0.58) !important;
    border: 1px dashed rgba(218,188,238,0.80) !important;
    border-radius: 16px !important;
    color: #6a5d70 !important;
    margin: 14px 16px 16px 16px !important;
    padding: 16px !important;
}

/* Cat Club Karte */
.breeder-catclub-compact {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.68), rgba(248,232,255,0.52)) !important;
    border: 1px solid rgba(218,188,238,0.58) !important;
    border-radius: 18px !important;
    padding: 14px !important;
    box-shadow: 0 7px 16px rgba(86,58,112,0.06);
}

.breeder-catclub-compact-icon {
    background:
        linear-gradient(180deg, rgba(255,238,249,0.96), rgba(240,244,255,0.88)) !important;
    border: 1px solid rgba(218,188,238,0.70) !important;
}

.breeder-catclub-compact-name {
    color: #8a2f5a !important;
}

.breeder-catclub-compact-meta {
    color: #5b5364 !important;
}

.breeder-catclub-compact-stats span {
    background: rgba(255,255,255,0.74) !important;
    border: 1px solid rgba(218,188,238,0.66) !important;
    color: #5b4b63 !important;
}

/* Trophy Bereich, falls sichtbar */
.breeder-clean-trophy {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.72), rgba(248,240,255,0.58)) !important;
    border: 1px solid rgba(218,188,238,0.58) !important;
    border-radius: 18px !important;
    box-shadow: 0 7px 16px rgba(86,58,112,0.06) !important;
}

.breeder-clean-trophy-label {
    color: #5b4b63 !important;
}

.breeder-clean-trophy-count {
    background: rgba(255,255,255,0.80) !important;
    border: 1px solid rgba(218,188,238,0.66) !important;
    color: #8a2f5a !important;
}

/* Kleiner Feinschliff: keine grünen Linien/Schriften auf My Page */
.breeder-page-clean * {
    border-color: rgba(218,188,238,0.70);
}

.breeder-page-clean .small-note,
.breeder-page-clean .breeder-clean-subtitle,
.breeder-page-clean .breeder-clean-stat-label {
    color: #5b5364 !important;
}

/* Responsive sauber lassen */
@media (max-width: 950px) {
    .breeder-clean-hero {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        padding: 24px 20px !important;
    }

    .breeder-clean-avatar {
        margin: 0 auto !important;
    }

    .breeder-clean-stats {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 620px) {
    .breeder-clean-stats {
        grid-template-columns: 1fr !important;
    }

    .breeder-clean-title {
        font-size: 34px !important;
    }
}

/* ===== My Page: letzte grüne Farben entfernen ===== */

.breeder-page-clean .breeder-clean-hero {
    background: linear-gradient(
        135deg,
        rgba(255, 248, 253, 0.88) 0%,
        rgba(239, 245, 255, 0.82) 50%,
        rgba(255, 234, 246, 0.84) 100%
    ) !important;
    border: 1px solid rgba(218, 188, 238, 0.78) !important;
    box-shadow:
        0 12px 28px rgba(86, 58, 112, 0.10),
        inset 0 0 0 1px rgba(255,255,255,0.28) !important;
}

.breeder-page-clean .breeder-clean-avatar {
    border: 2px solid rgba(218, 188, 238, 0.82) !important;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.95),
        rgba(248,236,255,0.78)
    ) !important;
    box-shadow:
        0 8px 18px rgba(86,58,112,0.10),
        inset 0 0 0 4px rgba(255,255,255,0.38) !important;
}

.breeder-page-clean .breeder-clean-kicker {
    color: #7f3a67 !important;
}

.breeder-page-clean .breeder-clean-title {
    color: #65475f !important;
}

.breeder-page-clean .breeder-clean-subtitle {
    color: #5f5668 !important;
}

.breeder-page-clean .breeder-clean-badge {
    border: 1px solid rgba(218, 188, 238, 0.78) !important;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.96),
        rgba(248,236,255,0.84)
    ) !important;
    color: #5d4d67 !important;
}

.breeder-page-clean .breeder-clean-badge.admin {
    color: #8a2f5a !important;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.98),
        rgba(255,232,244,0.90)
    ) !important;
}

.breeder-page-clean .breeder-clean-card {
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.80),
        rgba(250,244,255,0.72)
    ) !important;
    border: 1px solid rgba(218, 188, 238, 0.76) !important;
    box-shadow:
        0 10px 22px rgba(86,58,112,0.08),
        inset 0 0 0 1px rgba(255,255,255,0.28) !important;
}

.breeder-page-clean .breeder-clean-card-title {
    background: linear-gradient(
        90deg,
        rgba(238,247,255,0.92) 0%,
        rgba(255,241,250,0.94) 52%,
        rgba(244,232,255,0.92) 100%
    ) !important;
    border-bottom: 1px solid rgba(218, 188, 238, 0.70) !important;
    color: #65475f !important;
}

.breeder-page-clean .breeder-clean-stat {
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.88),
        rgba(248,241,255,0.70)
    ) !important;
    border: 1px solid rgba(218, 188, 238, 0.68) !important;
    box-shadow: 0 6px 14px rgba(86,58,112,0.06) !important;
}

.breeder-page-clean .breeder-clean-stat-value {
    color: #8a2f5a !important;
}

.breeder-page-clean .breeder-clean-stat-label {
    color: #5f5668 !important;
}

.breeder-page-clean .breeder-clean-detail-list div {
    border-bottom: 1px solid rgba(218, 188, 238, 0.56) !important;
}

.breeder-page-clean .breeder-clean-detail-list b {
    color: #7a2f58 !important;
}

.breeder-page-clean .breeder-clean-detail-list span {
    color: #50495c !important;
}

.breeder-page-clean .breeder-clean-presentation,
.breeder-page-clean .breeder-clean-empty {
    color: #5a5464 !important;
}

.breeder-page-clean .breeder-clean-presentation textarea,
.breeder-page-clean .breeder-presentation-edit {
    background: rgba(255,255,255,0.82) !important;
    border: 1px solid rgba(218, 188, 238, 0.74) !important;
    color: #4f4a5e !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.24),
        0 6px 14px rgba(86,58,112,0.05) !important;
}

.breeder-page-clean .breeder-clean-presentation textarea:focus,
.breeder-page-clean .breeder-presentation-edit:focus {
    border-color: rgba(200,168,255,0.96) !important;
    box-shadow:
        0 0 0 3px rgba(200,168,255,0.16),
        inset 0 0 0 1px rgba(255,255,255,0.24) !important;
    outline: none !important;
}

.breeder-page-clean .breeder-clean-trophy {
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.82),
        rgba(248,241,255,0.68)
    ) !important;
    border: 1px solid rgba(218, 188, 238, 0.70) !important;
}

.breeder-page-clean .breeder-clean-trophy-label {
    color: #5d5367 !important;
}

.breeder-page-clean .breeder-clean-trophy-count {
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid rgba(218, 188, 238, 0.72) !important;
    color: #8a2f5a !important;
}

.breeder-page-clean .friend-list.clean,
.breeder-page-clean .greeting-list.clean {
    border: 1px solid rgba(218, 188, 238, 0.70) !important;
    background: rgba(255,255,255,0.64) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
}

.breeder-page-clean .friend-row,
.breeder-page-clean .greeting-row {
    background: rgba(255,255,255,0.58) !important;
    border-bottom: 1px solid rgba(218, 188, 238, 0.42) !important;
    color: #564f61 !important;
}

.breeder-page-clean .friend-row:nth-child(even),
.breeder-page-clean .greeting-row:nth-child(even) {
    background: rgba(255,242,250,0.55) !important;
}

.breeder-page-clean .friend-name-link,
.breeder-page-clean .greeting-row span:first-child {
    color: #7a2f58 !important;
}

.breeder-page-clean .breeder-catclub-compact {
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.78),
        rgba(248,236,255,0.66)
    ) !important;
    border: 1px solid rgba(218, 188, 238, 0.72) !important;
}

.breeder-page-clean .breeder-catclub-compact-icon {
    background: linear-gradient(
        180deg,
        rgba(255,244,250,0.94),
        rgba(242,246,255,0.90)
    ) !important;
    border: 1px solid rgba(218, 188, 238, 0.72) !important;
}

.breeder-page-clean .breeder-catclub-compact-name {
    color: #8a2f5a !important;
}

.breeder-page-clean .breeder-catclub-compact-meta {
    color: #5c5567 !important;
}

.breeder-page-clean .breeder-catclub-compact-stats span {
    background: rgba(255,255,255,0.88) !important;
    border: 1px solid rgba(218, 188, 238, 0.72) !important;
    color: #5b4b63 !important;
}

/* Buttons auf My Page ebenfalls ohne Grün */
.breeder-page-clean .breeder-clean-action,
.breeder-page-clean .breeder-clean-button-grid button,
.breeder-page-clean .breeder-clean-card button {
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.96),
        rgba(250,239,255,0.90)
    ) !important;
    border: 1px solid rgba(218, 188, 238, 0.82) !important;
    color: #5d4d67 !important;
    box-shadow: 0 6px 14px rgba(86,58,112,0.07) !important;
}

.breeder-page-clean .breeder-clean-action.primary {
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.98),
        rgba(255,232,244,0.92)
    ) !important;
    border-color: rgba(226, 162, 199, 0.78) !important;
    color: #8a2f5a !important;
}

.breeder-page-clean .breeder-clean-action:hover,
.breeder-page-clean .breeder-clean-button-grid button:hover,
.breeder-page-clean .breeder-clean-card button:hover {
    background: linear-gradient(
        180deg,
        rgba(255,255,255,1),
        rgba(255,236,247,0.96)
    ) !important;
    color: #8a2f5a !important;
}

/* ===== FINAL OVERRIDE: My Page pink/lilac, no green ===== */

.breeder-page-clean {
    max-width: 1180px !important;
    margin: 18px auto 42px auto !important;
}

.breeder-page-clean .breeder-clean-hero {
    background:
        linear-gradient(
            135deg,
            rgba(255,250,254,0.88) 0%,
            rgba(239,246,255,0.78) 48%,
            rgba(255,235,247,0.80) 100%
        ) !important;
    border: 1px solid rgba(218,188,238,0.82) !important;
    box-shadow:
        0 8px 20px rgba(86,58,112,0.10),
        inset 0 0 0 1px rgba(255,255,255,0.32) !important;
    backdrop-filter: blur(7px) !important;
}

.breeder-page-clean .breeder-clean-avatar {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.92),
            rgba(248,238,255,0.78)
        ) !important;
    border: 2px solid rgba(218,188,238,0.86) !important;
    box-shadow:
        0 7px 16px rgba(86,58,112,0.10),
        inset 0 0 0 4px rgba(255,255,255,0.34) !important;
}

.breeder-page-clean .breeder-clean-kicker {
    color: #8a2f5a !important;
}

.breeder-page-clean .breeder-clean-title {
    color: #65475f !important;
}

.breeder-page-clean .breeder-clean-subtitle {
    color: #5b5364 !important;
}

.breeder-page-clean .breeder-clean-badge,
.breeder-page-clean .breeder-clean-stat,
.breeder-page-clean .breeder-clean-trophy,
.breeder-page-clean .friend-list.clean,
.breeder-page-clean .greeting-list.clean {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.84),
            rgba(248,241,255,0.66)
        ) !important;
    border: 1px solid rgba(218,188,238,0.70) !important;
    color: #5b4b63 !important;
}

.breeder-page-clean .breeder-clean-badge.admin {
    color: #8a2f5a !important;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.96),
            rgba(255,232,246,0.88)
        ) !important;
    border-color: rgba(226,162,199,0.76) !important;
}

.breeder-page-clean .breeder-clean-card {
    background:
        linear-gradient(
            180deg,
            rgba(255,252,255,0.86),
            rgba(248,240,255,0.72)
        ) !important;
    border: 1px solid rgba(218,188,238,0.78) !important;
    box-shadow:
        0 8px 18px rgba(86,58,112,0.08),
        inset 0 0 0 1px rgba(255,255,255,0.30) !important;
    backdrop-filter: blur(6px) !important;
}

.breeder-page-clean .breeder-clean-card-title {
    background:
        linear-gradient(
            90deg,
            rgba(238,247,255,0.90) 0%,
            rgba(255,241,250,0.94) 52%,
            rgba(244,232,255,0.90) 100%
        ) !important;
    border-bottom: 1px solid rgba(218,188,238,0.66) !important;
    color: #65475f !important;
}

.breeder-page-clean .breeder-clean-detail-list div {
    border-bottom: 1px solid rgba(218,188,238,0.54) !important;
}

.breeder-page-clean .breeder-clean-detail-list b,
.breeder-page-clean b,
.breeder-page-clean strong,
.breeder-page-clean label {
    color: #7a2f58 !important;
}

.breeder-page-clean .breeder-clean-detail-list span,
.breeder-page-clean .breeder-clean-presentation,
.breeder-page-clean .breeder-clean-stat-label,
.breeder-page-clean .friend-row span,
.breeder-page-clean .greeting-row span:last-child {
    color: #50495c !important;
}

.breeder-page-clean .breeder-clean-stat-value,
.breeder-page-clean .breeder-clean-trophy-count {
    color: #8a2f5a !important;
}

.breeder-page-clean .breeder-clean-action,
.breeder-page-clean button,
.breeder-page-clean .friend-page-btn {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.98),
            rgba(248,232,255,0.90)
        ) !important;
    border: 1px solid rgba(218,188,238,0.82) !important;
    color: #5b4b63 !important;
    box-shadow: 0 6px 14px rgba(86,58,112,0.07) !important;
}

.breeder-page-clean .breeder-clean-action:hover,
.breeder-page-clean button:hover,
.breeder-page-clean .friend-page-btn:hover {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,1),
            rgba(255,236,247,0.96)
        ) !important;
    color: #8a2f5a !important;
}

.breeder-page-clean .friend-row,
.breeder-page-clean .greeting-row {
    background: rgba(255,255,255,0.58) !important;
    border-bottom: 1px solid rgba(218,188,238,0.42) !important;
}

.breeder-page-clean .friend-row:nth-child(even),
.breeder-page-clean .greeting-row:nth-child(even) {
    background: rgba(255,242,250,0.55) !important;
}

.breeder-page-clean .friend-name-link,
.breeder-page-clean .greeting-row span:first-child {
    color: #7a2f58 !important;
}

/* ===== FINAL FIX: My Page profile top card no green ===== */

.breeder-page-clean .breeder-profile-top-card {
    background:
        linear-gradient(
            135deg,
            rgba(255,250,254,0.88) 0%,
            rgba(239,246,255,0.80) 48%,
            rgba(255,235,247,0.82) 100%
        ) !important;
    border: 1px solid rgba(218,188,238,0.82) !important;
    box-shadow:
        0 8px 20px rgba(86,58,112,0.10),
        inset 0 0 0 1px rgba(255,255,255,0.32) !important;
    backdrop-filter: blur(7px) !important;
}

.breeder-page-clean .breeder-profile-avatar {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.92),
            rgba(248,238,255,0.78)
        ) !important;
    border: 2px solid rgba(218,188,238,0.86) !important;
    box-shadow:
        0 7px 16px rgba(86,58,112,0.10),
        inset 0 0 0 4px rgba(255,255,255,0.34) !important;
}

.breeder-page-clean .breeder-profile-kicker {
    color: #8a2f5a !important;
}

.breeder-page-clean .breeder-profile-username {
    color: #65475f !important;
}

.breeder-page-clean .breeder-profile-cattery {
    color: #5b5364 !important;
}

.breeder-page-clean .breeder-profile-info-row {
    border-bottom: 1px solid rgba(218,188,238,0.56) !important;
}

.breeder-page-clean .breeder-profile-info-row span {
    color: #7a2f58 !important;
}

.breeder-page-clean .breeder-profile-info-row b {
    color: #50495c !important;
}

.breeder-page-clean .breeder-clean-badge {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.90),
            rgba(248,241,255,0.74)
        ) !important;
    border: 1px solid rgba(218,188,238,0.76) !important;
    color: #5b4b63 !important;
}

.breeder-page-clean .breeder-clean-badge.admin {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.96),
            rgba(255,232,246,0.88)
        ) !important;
    border: 1px solid rgba(226,162,199,0.76) !important;
    color: #8a2f5a !important;
}

/* ===== FINAL FIX: Account Settings no green ===== */

.account-settings-page .account-settings-hero {
    background:
        linear-gradient(
            135deg,
            rgba(255,250,254,0.88) 0%,
            rgba(239,246,255,0.80) 48%,
            rgba(255,235,247,0.82) 100%
        ) !important;
    border: 1px solid rgba(218,188,238,0.82) !important;
    box-shadow:
        0 8px 20px rgba(86,58,112,0.10),
        inset 0 0 0 1px rgba(255,255,255,0.32) !important;
    backdrop-filter: blur(7px) !important;
}

.account-settings-page .account-settings-kicker {
    color: #8a2f5a !important;
}

.account-settings-page .account-settings-title {
    color: #65475f !important;
}

.account-settings-page .account-settings-subtitle {
    color: #5b5364 !important;
}

.account-settings-page .account-avatar-preview,
.account-settings-page .account-avatar-preview-empty,
.account-settings-page .avatar-preview,
.account-settings-page .avatar-placeholder {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.92),
            rgba(248,238,255,0.78)
        ) !important;
    border: 1px solid rgba(218,188,238,0.82) !important;
    box-shadow:
        0 7px 16px rgba(86,58,112,0.10),
        inset 0 0 0 4px rgba(255,255,255,0.34) !important;
}

.account-settings-page .account-settings-card {
    background:
        linear-gradient(
            180deg,
            rgba(255,252,255,0.86),
            rgba(248,240,255,0.72)
        ) !important;
    border: 1px solid rgba(218,188,238,0.78) !important;
    box-shadow:
        0 8px 18px rgba(86,58,112,0.08),
        inset 0 0 0 1px rgba(255,255,255,0.30) !important;
    backdrop-filter: blur(6px) !important;
}

.account-settings-page .account-settings-card-title {
    color: #8a2f5a !important;
}

.account-settings-page .account-settings-field label {
    color: #5b4b63 !important;
}

.account-settings-page .account-settings-field input,
.account-settings-page .account-settings-field select {
    background: rgba(240,246,255,0.90) !important;
    border: 1px solid rgba(204,184,238,0.90) !important;
    color: #514b5f !important;
}

.account-settings-page .account-settings-field input:focus,
.account-settings-page .account-settings-field select:focus {
    outline: none !important;
    border-color: rgba(200,168,255,0.96) !important;
    box-shadow: 0 0 0 3px rgba(200,168,255,0.16) !important;
}

.account-settings-page button {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.98),
            rgba(248,232,255,0.90)
        ) !important;
    border: 1px solid rgba(218,188,238,0.82) !important;
    color: #5b4b63 !important;
    box-shadow: 0 6px 14px rgba(86,58,112,0.07) !important;
}

.account-settings-page button:hover {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,1),
            rgba(255,236,247,0.96)
        ) !important;
    color: #8a2f5a !important;
}

/* falls irgendwo auf Account Settings noch grüne Linien durchkommen */
.account-settings-page * {
    border-color: rgba(218,188,238,0.70);
}

/* ===== FINAL FIX: Subscriptions page no green ===== */

.subscriptions-page .subscriptions-hero,
.premium-page .subscriptions-hero,
.premium-hero,
.subscription-hero {
    background:
        linear-gradient(
            135deg,
            rgba(255,250,254,0.88) 0%,
            rgba(239,246,255,0.80) 48%,
            rgba(255,235,247,0.82) 100%
        ) !important;
    border: 1px solid rgba(218,188,238,0.82) !important;
    box-shadow:
        0 8px 20px rgba(86,58,112,0.10),
        inset 0 0 0 1px rgba(255,255,255,0.32) !important;
    backdrop-filter: blur(7px) !important;
}

.subscriptions-page .subscriptions-kicker,
.premium-page .subscriptions-kicker,
.premium-kicker,
.subscription-kicker {
    color: #8a2f5a !important;
}

.subscriptions-page .subscriptions-title,
.premium-page .subscriptions-title,
.premium-title,
.subscription-title {
    color: #65475f !important;
}

.subscriptions-page .subscriptions-subtitle,
.premium-page .subscriptions-subtitle,
.premium-subtitle,
.subscription-subtitle {
    color: #5b5364 !important;
}

.subscriptions-page .subscriptions-icon-box,
.premium-page .subscriptions-icon-box,
.premium-icon-box,
.subscription-icon-box {
    background:
        linear-gradient(
            180deg,
            rgba(255,252,255,0.88),
            rgba(248,238,255,0.74)
        ) !important;
    border: 1px solid rgba(218,188,238,0.82) !important;
    box-shadow:
        0 7px 16px rgba(86,58,112,0.10),
        inset 0 0 0 1px rgba(255,255,255,0.34) !important;
}

.subscriptions-page .subscriptions-card,
.premium-page .subscriptions-card,
.premium-card,
.subscription-card {
    background:
        linear-gradient(
            180deg,
            rgba(255,252,255,0.86),
            rgba(248,240,255,0.72)
        ) !important;
    border: 1px solid rgba(218,188,238,0.78) !important;
    box-shadow:
        0 8px 18px rgba(86,58,112,0.08),
        inset 0 0 0 1px rgba(255,255,255,0.30) !important;
    backdrop-filter: blur(6px) !important;
}

.subscriptions-page .subscriptions-card-title,
.premium-page .subscriptions-card-title,
.premium-card-title,
.subscription-card-title {
    background:
        linear-gradient(
            90deg,
            rgba(238,247,255,0.90) 0%,
            rgba(255,241,250,0.94) 52%,
            rgba(244,232,255,0.90) 100%
        ) !important;
    border-bottom: 1px solid rgba(218,188,238,0.66) !important;
    color: #65475f !important;
}

.subscriptions-page .premium-feature,
.subscriptions-page .subscription-feature,
.premium-page .premium-feature,
.premium-page .subscription-feature,
.premium-feature,
.subscription-feature {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.80),
            rgba(248,241,255,0.66)
        ) !important;
    border: 1px solid rgba(218,188,238,0.70) !important;
    color: #50495c !important;
}

.subscriptions-page .premium-feature-title,
.subscriptions-page .subscription-feature-title,
.premium-feature-title,
.subscription-feature-title {
    color: #8a2f5a !important;
}

.subscriptions-page .premium-feature-text,
.subscriptions-page .subscription-feature-text,
.premium-feature-text,
.subscription-feature-text {
    color: #5b5364 !important;
}

.subscriptions-page .premium-status-box,
.subscriptions-page .subscription-status-box,
.premium-status-box,
.subscription-status-box {
    background:
        linear-gradient(
            180deg,
            rgba(240,246,255,0.84),
            rgba(248,240,255,0.70)
        ) !important;
    border: 1px solid rgba(218,188,238,0.76) !important;
    color: #5b5364 !important;
}

.subscriptions-page .premium-status-item,
.subscriptions-page .subscription-status-item,
.premium-status-item,
.subscription-status-item {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.82),
            rgba(248,241,255,0.66)
        ) !important;
    border: 1px solid rgba(218,188,238,0.70) !important;
    color: #50495c !important;
}

.subscriptions-page .premium-badge,
.subscriptions-page .subscription-badge,
.premium-badge,
.subscription-badge {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.96),
            rgba(255,232,246,0.88)
        ) !important;
    border: 1px solid rgba(226,162,199,0.76) !important;
    color: #8a2f5a !important;
}

/* wichtige Notlösung: alles Grüne auf der Subscriptions-Seite überschreiben */
.subscriptions-page * {
    border-color: rgba(218,188,238,0.70) !important;
}

.subscriptions-page b,
.subscriptions-page strong,
.subscriptions-page label,
.subscriptions-page h2,
.subscriptions-page h3,
.subscriptions-page h4 {
    color: #65475f !important;
}

.subscriptions-page p,
.subscriptions-page div {
    color: inherit;
}

.subscriptions-page button {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.98),
            rgba(248,232,255,0.90)
        ) !important;
    border: 1px solid rgba(218,188,238,0.82) !important;
    color: #5b4b63 !important;
    box-shadow: 0 6px 14px rgba(86,58,112,0.07) !important;
}

.subscriptions-page button:hover {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,1),
            rgba(255,236,247,0.96)
        ) !important;
    color: #8a2f5a !important;
}

/* ===== FINAL FIX: Legal / Mailbox / Shop pages no green ===== */

/* Große obere Hero-Kästen auf Regeln, Privacy, Terms, Impressum, Mailbox, Diamonds, Buy Coins */
.rules-hero,
.legal-hero,
.privacy-hero,
.terms-hero,
.impressum-hero,
.mailbox-hero,
.diamonds-hero,
.coins-hero,
.shop-hero,
.page-hero,
.info-hero,
.community-hero,
.static-page-hero {
    background:
        linear-gradient(
            135deg,
            rgba(255,250,254,0.88) 0%,
            rgba(239,246,255,0.80) 48%,
            rgba(255,235,247,0.82) 100%
        ) !important;
    border: 1px solid rgba(218,188,238,0.82) !important;
    box-shadow:
        0 8px 20px rgba(86,58,112,0.10),
        inset 0 0 0 1px rgba(255,255,255,0.32) !important;
    backdrop-filter: blur(7px) !important;
}

/* Falls deine Seiten normale Box-Klassen nutzen */
.rules-page .box,
.legal-page .box,
.privacy-page .box,
.terms-page .box,
.impressum-page .box,
.mailbox-page .box,
.diamonds-page .box,
.coins-page .box,
.shop-page .box {
    background:
        linear-gradient(
            180deg,
            rgba(255,252,255,0.86),
            rgba(248,240,255,0.72)
        ) !important;
    border: 1px solid rgba(218,188,238,0.78) !important;
    box-shadow:
        0 8px 18px rgba(86,58,112,0.08),
        inset 0 0 0 1px rgba(255,255,255,0.30) !important;
    backdrop-filter: blur(6px) !important;
}

/* Überschriften/Kicker nicht mehr grün */
.rules-hero small,
.legal-hero small,
.privacy-hero small,
.terms-hero small,
.impressum-hero small,
.mailbox-hero small,
.diamonds-hero small,
.coins-hero small,
.shop-hero small,
.page-hero small,
.info-hero small,
.community-hero small,
.static-page-hero small,
.rules-kicker,
.legal-kicker,
.privacy-kicker,
.terms-kicker,
.impressum-kicker,
.mailbox-kicker,
.diamonds-kicker,
.coins-kicker,
.shop-kicker,
.page-kicker {
    color: #8a2f5a !important;
}

/* Titel */
.rules-hero h1,
.legal-hero h1,
.privacy-hero h1,
.terms-hero h1,
.impressum-hero h1,
.mailbox-hero h1,
.diamonds-hero h1,
.coins-hero h1,
.shop-hero h1,
.page-hero h1,
.info-hero h1,
.community-hero h1,
.static-page-hero h1,
.rules-title,
.legal-title,
.privacy-title,
.terms-title,
.impressum-title,
.mailbox-title,
.diamonds-title,
.coins-title,
.shop-title,
.page-title {
    color: #65475f !important;
}

/* Beschreibungstexte */
.rules-hero p,
.legal-hero p,
.privacy-hero p,
.terms-hero p,
.impressum-hero p,
.mailbox-hero p,
.diamonds-hero p,
.coins-hero p,
.shop-hero p,
.page-hero p,
.info-hero p,
.community-hero p,
.static-page-hero p {
    color: #5b5364 !important;
}

/* Icon-Kästen rechts, z.B. Diamond/Coin */
.rules-hero-icon,
.legal-hero-icon,
.privacy-hero-icon,
.terms-hero-icon,
.impressum-hero-icon,
.mailbox-hero-icon,
.diamonds-hero-icon,
.coins-hero-icon,
.shop-hero-icon,
.page-hero-icon,
.info-hero-icon,
.hero-icon-box {
    background:
        linear-gradient(
            180deg,
            rgba(255,252,255,0.88),
            rgba(248,238,255,0.74)
        ) !important;
    border: 1px solid rgba(218,188,238,0.82) !important;
    box-shadow:
        0 7px 16px rgba(86,58,112,0.10),
        inset 0 0 0 1px rgba(255,255,255,0.34) !important;
}

/* Card-Header, die aktuell grün/blau aussehen */
.rules-page .box h2,
.legal-page .box h2,
.privacy-page .box h2,
.terms-page .box h2,
.impressum-page .box h2,
.mailbox-page .box h2,
.diamonds-page .box h2,
.coins-page .box h2,
.shop-page .box h2,
.card-title,
.panel-title,
.section-title {
    color: #65475f !important;
}

/* Karten/Abschnitte darunter */
.rules-card,
.legal-card,
.privacy-card,
.terms-card,
.impressum-card,
.mailbox-card,
.diamonds-card,
.coins-card,
.shop-card,
.info-card,
.static-card,
.offer-card,
.coin-pack-card,
.diamond-pack-card {
    background:
        linear-gradient(
            180deg,
            rgba(255,252,255,0.86),
            rgba(248,240,255,0.72)
        ) !important;
    border: 1px solid rgba(218,188,238,0.78) !important;
    box-shadow:
        0 8px 18px rgba(86,58,112,0.08),
        inset 0 0 0 1px rgba(255,255,255,0.30) !important;
    backdrop-filter: blur(6px) !important;
}

/* Kleine Hinweisboxen wie bei Diamonds / Buy Coins */
.rules-note,
.legal-note,
.privacy-note,
.terms-note,
.impressum-note,
.mailbox-note,
.diamonds-note,
.coins-note,
.shop-note,
.info-note,
.notice-box,
.empty-box {
    background:
        linear-gradient(
            180deg,
            rgba(255,252,255,0.82),
            rgba(248,240,255,0.66)
        ) !important;
    border: 1px solid rgba(218,188,238,0.76) !important;
    color: #5b5364 !important;
    box-shadow: 0 6px 14px rgba(86,58,112,0.06) !important;
}

/* Buttons auf Mailbox / Shop / Legal */
.rules-page button,
.legal-page button,
.privacy-page button,
.terms-page button,
.impressum-page button,
.mailbox-page button,
.diamonds-page button,
.coins-page button,
.shop-page button,
.page-button,
.tab-button {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.98),
            rgba(248,232,255,0.90)
        ) !important;
    border: 1px solid rgba(218,188,238,0.82) !important;
    color: #5b4b63 !important;
    box-shadow: 0 6px 14px rgba(86,58,112,0.07) !important;
}

.rules-page button:hover,
.legal-page button:hover,
.privacy-page button:hover,
.terms-page button:hover,
.impressum-page button:hover,
.mailbox-page button:hover,
.diamonds-page button:hover,
.coins-page button:hover,
.shop-page button:hover,
.page-button:hover,
.tab-button:hover {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,1),
            rgba(255,236,247,0.96)
        ) !important;
    color: #8a2f5a !important;
}

/* Notfall: grüne Linien auf diesen Seiten überschreiben */
.rules-page *,
.legal-page *,
.privacy-page *,
.terms-page *,
.impressum-page *,
.mailbox-page *,
.diamonds-page *,
.coins-page *,
.shop-page * {
    border-color: rgba(218,188,238,0.70);
}

/* Notfall: grüne kleine Texte auf diesen Seiten überschreiben */
.rules-page b,
.legal-page b,
.privacy-page b,
.terms-page b,
.impressum-page b,
.mailbox-page b,
.diamonds-page b,
.coins-page b,
.shop-page b,
.rules-page strong,
.legal-page strong,
.privacy-page strong,
.terms-page strong,
.impressum-page strong,
.mailbox-page strong,
.diamonds-page strong,
.coins-page strong,
.shop-page strong,
.rules-page label,
.legal-page label,
.privacy-page label,
.terms-page label,
.impressum-page label,
.mailbox-page label,
.diamonds-page label,
.coins-page label,
.shop-page label {
    color: #7a2f58 !important;
}

/* ===== FINAL FIX: Shop / Cat Club / Achievements / Rankings no green ===== */

/* große Hero-Kästen: Diamonds, Buy Coins, Cat Club, Achievements */
.currency-shop-page .currency-shop-hero,
.purr-feature-page .purr-feature-hero,
.purr-feature-page .breeder-hero,
.achievements-page .achievements-hero,
.cat-ranking-page .achievements-hero,
.player-ranking-page .achievements-hero {
    background:
        linear-gradient(
            135deg,
            rgba(255,250,254,0.88) 0%,
            rgba(239,246,255,0.80) 48%,
            rgba(255,235,247,0.82) 100%
        ) !important;
    border: 1px solid rgba(218,188,238,0.82) !important;
    box-shadow:
        0 8px 20px rgba(86,58,112,0.10),
        inset 0 0 0 1px rgba(255,255,255,0.32) !important;
    backdrop-filter: blur(7px) !important;
}

/* kleine grüne Kicker */
.currency-shop-page .currency-shop-kicker,
.purr-feature-page .purr-feature-kicker,
.achievements-page .achievements-kicker,
.cat-ranking-page .achievements-kicker,
.player-ranking-page .achievements-kicker {
    color: #8a2f5a !important;
}

/* Titel */
.currency-shop-page .currency-shop-title,
.purr-feature-page .purr-feature-title,
.purr-feature-page .breeder-name,
.achievements-page .achievements-title,
.cat-ranking-page .achievements-title,
.player-ranking-page .achievements-title {
    color: #65475f !important;
}

/* Untertitel */
.currency-shop-page .currency-shop-subtitle,
.purr-feature-page .purr-feature-subtitle,
.purr-feature-page .breeder-subtitle,
.achievements-page .achievements-subtitle,
.cat-ranking-page .achievements-subtitle,
.player-ranking-page .achievements-subtitle {
    color: #5b5364 !important;
}

/* Hero-Icons rechts */
.currency-shop-page .currency-shop-hero-icon,
.purr-feature-page .purr-feature-icon,
.purr-feature-page .breeder-avatar,
.achievements-page .achievements-icon,
.cat-ranking-page .achievements-icon,
.player-ranking-page .achievements-icon {
    background:
        linear-gradient(
            180deg,
            rgba(255,252,255,0.90),
            rgba(248,238,255,0.76)
        ) !important;
    border: 1px solid rgba(218,188,238,0.82) !important;
    box-shadow:
        0 7px 16px rgba(86,58,112,0.10),
        inset 0 0 0 3px rgba(255,255,255,0.34) !important;
}

/* Cat Club Stat-Kästchen oben */
.purr-feature-page .breeder-stats-grid .breeder-stat,
.purr-feature-page .breeder-stat {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.76),
            rgba(248,241,255,0.62)
        ) !important;
    border: 1px solid rgba(218,188,238,0.70) !important;
    color: #50495c !important;
}

.purr-feature-page .breeder-stat-label {
    color: #7a2f58 !important;
}

.purr-feature-page .breeder-stat-value {
    color: #50495c !important;
}

/* große Button-Kacheln: Cat Club + Rankings */
.achievements-button-grid .achievement-big-button,
.achievement-big-button {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.90),
            rgba(248,241,255,0.72)
        ) !important;
    border: 1px solid rgba(218,188,238,0.76) !important;
    color: #5b4b63 !important;
    box-shadow: 0 7px 16px rgba(86,58,112,0.07) !important;
}

.achievements-button-grid .achievement-big-button:hover,
.achievement-big-button:hover {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,1),
            rgba(255,236,247,0.94)
        ) !important;
    color: #8a2f5a !important;
    transform: translateY(-1px);
}

/* Cards: Diamond Packs, Coin Packs, Create Show, Rankings */
.currency-shop-page .currency-pack-card,
.currency-shop-page .voucher-card,
.purr-feature-page .purr-feature-card,
.achievements-page .achievement-card,
.player-ranking-board,
.cat-ranking-big-card,
.trophies-big-card,
.trophies-sidebar {
    background:
        linear-gradient(
            180deg,
            rgba(255,252,255,0.86),
            rgba(248,240,255,0.72)
        ) !important;
    border: 1px solid rgba(218,188,238,0.78) !important;
    box-shadow:
        0 8px 18px rgba(86,58,112,0.08),
        inset 0 0 0 1px rgba(255,255,255,0.30) !important;
    backdrop-filter: blur(6px) !important;
}

/* Card-Header */
.purr-feature-page .purr-feature-card-title,
.achievements-page .achievement-card-title,
.player-ranking-board-title,
.cat-ranking-big-title,
.trophies-big-title,
.breeding-beauty-header {
    background:
        linear-gradient(
            90deg,
            rgba(238,247,255,0.90) 0%,
            rgba(255,241,250,0.94) 52%,
            rgba(244,232,255,0.90) 100%
        ) !important;
    border-bottom: 1px solid rgba(218,188,238,0.66) !important;
    color: #65475f !important;
}

/* Pack-Top-Bereiche bei Diamonds / Coins */
.currency-shop-page .currency-pack-top {
    background:
        linear-gradient(
            180deg,
            rgba(238,247,255,0.84),
            rgba(255,241,250,0.78)
        ) !important;
    border-bottom: 1px solid rgba(218,188,238,0.62) !important;
}

.currency-shop-page .currency-pack-badge {
    background: rgba(255,255,255,0.88) !important;
    border: 1px solid rgba(218,188,238,0.72) !important;
    color: #8a2f5a !important;
}

.currency-shop-page .currency-pack-name,
.currency-shop-page .currency-shop-section-title {
    color: #65475f !important;
}

.currency-shop-page .currency-pack-info b,
.currency-shop-page .voucher-field label {
    color: #7a2f58 !important;
}

.currency-shop-page .currency-pack-info span,
.currency-shop-page .currency-note-box {
    color: #50495c !important;
}

/* Hinweisbox unter Diamonds / Coins */
.currency-shop-page .currency-note-box {
    background:
        linear-gradient(
            180deg,
            rgba(255,252,255,0.82),
            rgba(248,240,255,0.66)
        ) !important;
    border: 1px solid rgba(218,188,238,0.76) !important;
    box-shadow: 0 6px 14px rgba(86,58,112,0.06) !important;
}

/* Cat Club Create Show Form */
.purr-feature-page input,
.purr-feature-page select,
.purr-feature-page textarea,
.currency-shop-page input,
.currency-shop-page select,
.currency-shop-page textarea,
.achievements-page input,
.achievements-page select,
.achievements-page textarea {
    background: rgba(240,246,255,0.90) !important;
    border: 1px solid rgba(204,184,238,0.90) !important;
    color: #514b5f !important;
}

.purr-feature-page input:focus,
.purr-feature-page select:focus,
.purr-feature-page textarea:focus,
.currency-shop-page input:focus,
.currency-shop-page select:focus,
.currency-shop-page textarea:focus,
.achievements-page input:focus,
.achievements-page select:focus,
.achievements-page textarea:focus {
    outline: none !important;
    border-color: rgba(200,168,255,0.96) !important;
    box-shadow: 0 0 0 3px rgba(200,168,255,0.16) !important;
}

/* Ranking Tabellen */
.player-ranking-head,
.cat-ranking-table-head,
.cat-ranking-head,
.ranking-head {
    background:
        linear-gradient(
            90deg,
            rgba(238,247,255,0.78),
            rgba(255,241,250,0.80)
        ) !important;
    border-bottom: 1px solid rgba(218,188,238,0.58) !important;
    color: #65475f !important;
}

.player-ranking-row,
.cat-ranking-table-row,
.cat-ranking-row,
.ranking-row {
    background: rgba(255,255,255,0.54) !important;
    border-bottom: 1px solid rgba(218,188,238,0.42) !important;
}

.player-ranking-row:nth-child(even),
.cat-ranking-table-row:nth-child(even),
.cat-ranking-row:nth-child(even),
.ranking-row:nth-child(even) {
    background: rgba(255,242,250,0.48) !important;
}

.player-ranking-place,
.cat-ranking-cat-name,
.ranking-place {
    color: #8a2f5a !important;
}

.player-ranking-score,
.cat-ranking-score,
.ranking-score {
    color: #50495c !important;
}

/* Buttons auf diesen Seiten */
.currency-shop-page button,
.purr-feature-page button,
.achievements-page button,
.player-ranking-board button,
.cat-ranking-big-card button,
.trophies-big-card button,
.trophies-sidebar button {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.98),
            rgba(248,232,255,0.90)
        ) !important;
    border: 1px solid rgba(218,188,238,0.82) !important;
    color: #5b4b63 !important;
    box-shadow: 0 6px 14px rgba(86,58,112,0.07) !important;
}

.currency-shop-page button:hover,
.purr-feature-page button:hover,
.achievements-page button:hover,
.player-ranking-board button:hover,
.cat-ranking-big-card button:hover,
.trophies-big-card button:hover,
.trophies-sidebar button:hover {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,1),
            rgba(255,236,247,0.96)
        ) !important;
    color: #8a2f5a !important;
}

/* Rest-Grün auf diesen Seiten überschreiben */
.currency-shop-page *,
.purr-feature-page *,
.achievements-page *,
.player-ranking-board *,
.cat-ranking-big-card *,
.trophies-big-card *,
.trophies-sidebar * {
    border-color: rgba(218,188,238,0.70);
}

.currency-shop-page b,
.currency-shop-page strong,
.currency-shop-page label,
.purr-feature-page b,
.purr-feature-page strong,
.purr-feature-page label,
.achievements-page b,
.achievements-page strong,
.achievements-page label {
    color: #7a2f58 !important;
}

/* ===== FINAL FIX: Community / Breeds / Genetics / Market / Office / Notifications no green ===== */

/* große Hero-Kästen */
.community-page .community-hero,
.breeds-page .breeds-hero,
.breed-detail-page .breed-detail-hero,
.genetics-page .genetics-info-hero,
.breed-history-page .breed-history-hero,
.sell-cat-page .sell-cat-hero,
.my-cats-page .my-cats-hero,
.office-page .office-hero,
.reserved-cats-page .reserved-cats-intro {
    background:
        linear-gradient(
            135deg,
            rgba(255,250,254,0.88) 0%,
            rgba(239,246,255,0.80) 48%,
            rgba(255,235,247,0.82) 100%
        ) !important;
    border: 1px solid rgba(218,188,238,0.82) !important;
    box-shadow:
        0 8px 20px rgba(86,58,112,0.10),
        inset 0 0 0 1px rgba(255,255,255,0.32) !important;
    backdrop-filter: blur(7px) !important;
}

/* Kicker oben: Community, Your Cattery, PurrPixels Office usw. */
.community-page .community-kicker,
.breeds-page .breeds-kicker,
.breed-detail-page .breed-detail-kicker,
.genetics-page .genetics-info-kicker,
.breed-history-page .breed-history-kicker,
.my-cats-page .my-cats-kicker,
.office-page .office-kicker,
.reserved-cats-page b,
.reserved-cats-page strong {
    color: #8a2f5a !important;
}

/* Hero-Titel */
.community-page .community-title,
.breeds-page .breeds-hero-title,
.breed-detail-page .breed-detail-title,
.genetics-page .genetics-info-title,
.breed-history-page .breed-history-title,
.sell-cat-page .sell-cat-title,
.my-cats-page .my-cats-title,
.office-page .office-title,
.reserved-cats-page h1,
.reserved-cats-page .section-title {
    color: #65475f !important;
}

/* Hero-Texte */
.community-page .community-subtitle,
.breeds-page .breeds-hero-text,
.breed-detail-page .breed-detail-subtitle,
.genetics-page .genetics-info-subtitle,
.breed-history-page .breed-history-subtitle,
.sell-cat-page .sell-cat-subtitle,
.my-cats-page .my-cats-subtitle,
.office-page .office-subtitle,
.reserved-cats-page .reserved-cats-intro {
    color: #5b5364 !important;
}

/* rechte Icon-/Stat-Kästen in Heroes */
.breeds-page .breeds-hero-stats,
.breed-detail-page .breed-detail-stats,
.breed-detail-page .breed-detail-stat,
.genetics-page .genetics-info-icon,
.breed-history-page .breed-history-icon,
.sell-cat-page .sell-cat-hero-icon,
.my-cats-page .my-cats-hero-icon,
.office-page .office-hero-icon {
    background:
        linear-gradient(
            180deg,
            rgba(255,252,255,0.90),
            rgba(248,238,255,0.76)
        ) !important;
    border: 1px solid rgba(218,188,238,0.82) !important;
    box-shadow:
        0 7px 16px rgba(86,58,112,0.10),
        inset 0 0 0 3px rgba(255,255,255,0.34) !important;
}

/* Karten allgemein */
.community-page .community-card,
.community-page .friend-request-card,
.community-page .friend-clean-card,
.community-page .friend-add-box,
.breeds-page .breeds-tools,
.breeds-page .breed-card-beauty,
.breed-detail-page .breed-detail-tools,
.breed-detail-page .breed-detail-stats,
.breed-detail-page .breed-color-card-beauty,
.genetics-page .genetics-sidebar,
.genetics-page .genetics-article-card,
.genetics-page .genetics-article-main,
.breed-history-page .breed-history-sidebar,
.breed-history-page .breed-history-article-card,
.breed-history-page .breed-history-article-main,
.sale-page .sale-card,
.sale-page .sale-list,
.sell-cat-page .sell-cat-card,
.reserved-cats-page .reserved-cat-card,
.my-cats-page .my-cats-stat-card,
.my-cats-page .my-cats-filter-card,
.my-cats-page .my-cats-breed-section,
.my-cats-page .my-cat-card,
.office-page .office-card,
.office-page .office-area-card,
.office-page .rainbow-card,
.notification-dropdown {
    background:
        linear-gradient(
            180deg,
            rgba(255,252,255,0.86),
            rgba(248,240,255,0.72)
        ) !important;
    border: 1px solid rgba(218,188,238,0.78) !important;
    box-shadow:
        0 8px 18px rgba(86,58,112,0.08),
        inset 0 0 0 1px rgba(255,255,255,0.30) !important;
    backdrop-filter: blur(6px) !important;
}

/* Card Header */
.community-page .community-card-title,
.genetics-page .genetics-article-head,
.genetics-page .genetics-sidebar-title,
.breed-history-page .breed-history-article-head,
.breed-history-page .breed-history-sidebar-title,
.sale-page .sale-list-head,
.my-cats-page .my-cats-breed-head,
.office-page .office-card-title,
.notification-head {
    background:
        linear-gradient(
            90deg,
            rgba(238,247,255,0.90) 0%,
            rgba(255,241,250,0.94) 52%,
            rgba(244,232,255,0.90) 100%
        ) !important;
    border-bottom: 1px solid rgba(218,188,238,0.66) !important;
    color: #65475f !important;
}

/* Tabs / große Buttons */
.sale-page .sale-big-action,
.sale-page .sale-tab,
.my-cats-page .my-cats-tab,
.community-page button,
.breeds-page button,
.breed-detail-page button,
.genetics-page button,
.breed-history-page button,
.sale-page button,
.sell-cat-page button,
.reserved-cats-page button,
.my-cats-page button,
.office-page button,
.notification-clear-btn {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.98),
            rgba(248,232,255,0.90)
        ) !important;
    border: 1px solid rgba(218,188,238,0.82) !important;
    color: #5b4b63 !important;
    box-shadow: 0 6px 14px rgba(86,58,112,0.07) !important;
}

.sale-page .sale-big-action:hover,
.sale-page .sale-tab:hover,
.my-cats-page .my-cats-tab:hover,
.community-page button:hover,
.breeds-page button:hover,
.breed-detail-page button:hover,
.genetics-page button:hover,
.breed-history-page button:hover,
.sale-page button:hover,
.sell-cat-page button:hover,
.reserved-cats-page button:hover,
.my-cats-page button:hover,
.office-page button:hover,
.notification-clear-btn:hover {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,1),
            rgba(255,236,247,0.96)
        ) !important;
    color: #8a2f5a !important;
}

.sale-page .sale-tab.active,
.my-cats-page .my-cats-tab.active {
    background:
        linear-gradient(
            180deg,
            rgba(255,245,252,0.98),
            rgba(238,247,255,0.92)
        ) !important;
    color: #8a2f5a !important;
}

/* Suchfelder / Inputs */
.community-page input,
.community-page textarea,
.breeds-page input,
.breeds-page select,
.breed-detail-page input,
.breed-detail-page select,
.genetics-page input,
.genetics-page select,
.breed-history-page input,
.breed-history-page select,
.sale-page input,
.sale-page select,
.sell-cat-page input,
.sell-cat-page select,
.my-cats-page input,
.my-cats-page select,
.office-page input,
.office-page select {
    background: rgba(240,246,255,0.90) !important;
    border: 1px solid rgba(204,184,238,0.90) !important;
    color: #514b5f !important;
}

.community-page input:focus,
.community-page textarea:focus,
.breeds-page input:focus,
.breeds-page select:focus,
.breed-detail-page input:focus,
.breed-detail-page select:focus,
.genetics-page input:focus,
.genetics-page select:focus,
.breed-history-page input:focus,
.breed-history-page select:focus,
.sale-page input:focus,
.sale-page select:focus,
.sell-cat-page input:focus,
.sell-cat-page select:focus,
.my-cats-page input:focus,
.my-cats-page select:focus,
.office-page input:focus,
.office-page select:focus {
    outline: none !important;
    border-color: rgba(200,168,255,0.96) !important;
    box-shadow: 0 0 0 3px rgba(200,168,255,0.16) !important;
}

/* Search Icon Buttons */
.community-search-icon,
.breeds-search-icon,
.breed-detail-search-icon,
.sell-cat-search-icon,
.admin-search-icon,
.inventory-cat-search-icon {
    background:
        linear-gradient(
            180deg,
            rgba(230,218,255,0.96),
            rgba(255,228,246,0.92)
        ) !important;
    color: #8a2f5a !important;
    border: 1px solid rgba(218,188,238,0.72) !important;
}

/* Breeds / Breed Detail Stat-Zahlen */
.breeds-stat-number,
.breed-detail-stat-number,
.my-cats-stat-value,
.office-stat-value {
    color: #8a2f5a !important;
}

.breeds-stat-label,
.breed-detail-stat-label,
.my-cats-stat-label,
.office-stat-label {
    color: #5b5364 !important;
}

/* Genetics + Breed History Sidebar Items */
.genetics-page .genetics-topic-card,
.breed-history-page .breed-history-topic-card,
.genetics-page .genetics-topic-card.active,
.breed-history-page .breed-history-topic-card.active {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.82),
            rgba(238,247,255,0.68)
        ) !important;
    border: 1px solid rgba(218,188,238,0.70) !important;
    color: #5b4b63 !important;
}

.genetics-page .genetics-topic-card.active,
.breed-history-page .breed-history-topic-card.active {
    background:
        linear-gradient(
            180deg,
            rgba(255,245,252,0.92),
            rgba(238,247,255,0.78)
        ) !important;
}

/* Genetics / Breed History Article Header */
.genetics-page .genetics-article-title,
.breed-history-page .breed-history-article-title {
    color: #65475f !important;
}

.genetics-page .genetics-article-subtitle,
.breed-history-page .breed-history-article-subtitle {
    color: #5b5364 !important;
}

/* Market rows */
.sale-page .sale-row {
    background: rgba(255,255,255,0.54) !important;
    border-bottom: 1px solid rgba(218,188,238,0.42) !important;
}

.sale-page .sale-row:nth-child(even) {
    background: rgba(255,242,250,0.48) !important;
}

.sale-page .sale-cat-name,
.sale-page .sale-cattery-name {
    color: #8a2f5a !important;
}

/* Sell Cat Info Box */
.sell-cat-page .sell-cat-info-box,
.sell-cat-page .sale-info-box {
    background:
        linear-gradient(
            180deg,
            rgba(255,252,255,0.82),
            rgba(248,240,255,0.66)
        ) !important;
    border: 1px solid rgba(218,188,238,0.76) !important;
    color: #5b5364 !important;
}

/* Reserved Cats Info */
.reserved-cats-page .reserved-cat-price,
.reserved-cats-page .reserved-cat-info div {
    border-color: rgba(218,188,238,0.58) !important;
}

.reserved-cats-page .reserved-cat-cattery,
.reserved-cats-page .reserved-cat-info b {
    color: #7a2f58 !important;
}

/* My Cats */
.my-cats-page .my-cats-breed-kicker,
.my-cats-page .my-cat-cattery,
.my-cats-page .cat-cattery {
    color: #7a2f58 !important;
}

.my-cats-page .my-cat-badge,
.my-cats-page .my-cats-breed-count {
    background: rgba(255,255,255,0.86) !important;
    border: 1px solid rgba(218,188,238,0.72) !important;
    color: #8a2f5a !important;
}

/* Office */
.office-page .office-note,
.office-page .office-info-box,
.office-page .office-memory-card {
    background:
        linear-gradient(
            180deg,
            rgba(255,252,255,0.82),
            rgba(248,240,255,0.66)
        ) !important;
    border: 1px solid rgba(218,188,238,0.76) !important;
    color: #5b5364 !important;
}

/* Notifications */
.notification-title {
    color: #65475f !important;
}

.notification-item,
.notification-empty {
    background: rgba(255,255,255,0.72) !important;
    border-bottom: 1px solid rgba(218,188,238,0.44) !important;
    color: #5b5364 !important;
}

.notification-item-title,
.notification-item strong {
    color: #8a2f5a !important;
}

.notification-item-date,
.notification-time {
    color: #6f6178 !important;
}

.notification-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 18px;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.92),
            rgba(248,238,255,0.78)
        ) !important;
    border: 1px solid rgba(218,188,238,0.72) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 18px;
    font-weight: 900;
}

.notification-icon-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    display: block;
}

/* Rest-Grün auf diesen Seiten überschreiben */
.community-page *,
.breeds-page *,
.breed-detail-page *,
.genetics-page *,
.breed-history-page *,
.sale-page *,
.sell-cat-page *,
.reserved-cats-page *,
.my-cats-page *,
.office-page *,
.notification-dropdown * {
    border-color: rgba(218,188,238,0.70);
}

.community-page b,
.community-page strong,
.community-page label,
.breeds-page b,
.breeds-page strong,
.breeds-page label,
.breed-detail-page b,
.breed-detail-page strong,
.breed-detail-page label,
.genetics-page b,
.genetics-page strong,
.genetics-page label,
.breed-history-page b,
.breed-history-page strong,
.breed-history-page label,
.sale-page b,
.sale-page strong,
.sale-page label,
.sell-cat-page b,
.sell-cat-page strong,
.sell-cat-page label,
.reserved-cats-page b,
.reserved-cats-page strong,
.reserved-cats-page label,
.my-cats-page b,
.my-cats-page strong,
.my-cats-page label,
.office-page b,
.office-page strong,
.office-page label {
    color: #7a2f58 !important;
}

/* ===== FINAL FIX: Item Shop / Genetics / Breed History remaining green ===== */

/* ITEM SHOP: Hauptboxen */
.object-shop-page .my-objects-panel,
.object-shop-page .object-shop-main,
.object-shop-page .object-category,
.object-shop-page .object-card,
.object-shop-page .my-object-row,
.object-shop-page .my-object-empty {
    background:
        linear-gradient(
            180deg,
            rgba(255,252,255,0.88),
            rgba(248,240,255,0.72)
        ) !important;
    border-color: rgba(218,188,238,0.76) !important;
    box-shadow:
        0 8px 18px rgba(86,58,112,0.07),
        inset 0 0 0 1px rgba(255,255,255,0.28) !important;
}

/* ITEM SHOP: Überschriften oben und Kategorien */
.object-shop-page .object-panel-title,
.object-shop-page .object-category-title,
.object-shop-page .my-object-category-title {
    background:
        linear-gradient(
            90deg,
            rgba(238,247,255,0.92) 0%,
            rgba(255,241,250,0.96) 52%,
            rgba(244,232,255,0.92) 100%
        ) !important;
    border-bottom: 1px solid rgba(218,188,238,0.66) !important;
    color: #65475f !important;
}

/* ITEM SHOP: Beschreibung in Kategorie */
.object-shop-page .object-category-intro {
    background: rgba(255,252,255,0.60) !important;
    border-bottom: 1px solid rgba(218,188,238,0.50) !important;
    color: #5b5364 !important;
}

/* ITEM SHOP: Icons */
.object-shop-page .object-icon-wrap {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.92),
            rgba(248,238,255,0.78)
        ) !important;
    border: 1px solid rgba(218,188,238,0.72) !important;
}

/* ITEM SHOP: Texte */
.object-shop-page .object-name,
.object-shop-page .my-object-name {
    color: #8a2f5a !important;
}

.object-shop-page .object-origin {
    color: #7a2f58 !important;
}

.object-shop-page .object-desc,
.object-shop-page .my-object-count,
.object-shop-page .my-object-note {
    color: #5b5364 !important;
}

.object-shop-page .object-price {
    color: #50495c !important;
}

/* ITEM SHOP: Buttons/Selects */
.object-shop-page button,
.object-shop-page select {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.98),
            rgba(248,232,255,0.90)
        ) !important;
    border: 1px solid rgba(218,188,238,0.82) !important;
    color: #5b4b63 !important;
}

.object-shop-page button:hover {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,1),
            rgba(255,236,247,0.96)
        ) !important;
    color: #8a2f5a !important;
}

/* GENETICS + BREED HISTORY: Hero noch weicher */
.genetics-page .genetics-info-hero,
.breed-history-page .breed-history-hero {
    background:
        linear-gradient(
            135deg,
            rgba(255,250,254,0.88) 0%,
            rgba(239,246,255,0.80) 48%,
            rgba(255,235,247,0.82) 100%
        ) !important;
    border: 1px solid rgba(218,188,238,0.82) !important;
}

/* GENETICS + BREED HISTORY: Sidebar und Artikelboxen */
.genetics-page .genetics-sidebar,
.genetics-page .genetics-article-card,
.genetics-page .genetics-article-main,
.breed-history-page .breed-history-sidebar,
.breed-history-page .breed-history-article-card,
.breed-history-page .breed-history-article-main {
    background:
        linear-gradient(
            180deg,
            rgba(255,252,255,0.88),
            rgba(248,240,255,0.72)
        ) !important;
    border: 1px solid rgba(218,188,238,0.78) !important;
    box-shadow:
        0 8px 18px rgba(86,58,112,0.08),
        inset 0 0 0 1px rgba(255,255,255,0.30) !important;
    backdrop-filter: blur(6px) !important;
}

/* GENETICS + BREED HISTORY: grüne Artikel-Header entfernen */
.genetics-page .genetics-article-head,
.breed-history-page .breed-history-article-head,
.genetics-page .genetics-sidebar-title,
.breed-history-page .breed-history-sidebar-title {
    background:
        linear-gradient(
            90deg,
            rgba(238,247,255,0.92) 0%,
            rgba(255,241,250,0.96) 52%,
            rgba(244,232,255,0.92) 100%
        ) !important;
    border-bottom: 1px solid rgba(218,188,238,0.66) !important;
    color: #65475f !important;
}

/* GENETICS + BREED HISTORY: Auswahlkarten links */
.genetics-page .genetics-topic-card,
.breed-history-page .breed-history-topic-card {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.86),
            rgba(248,241,255,0.68)
        ) !important;
    border: 1px solid rgba(218,188,238,0.72) !important;
    color: #5b4b63 !important;
}

.genetics-page .genetics-topic-card.active,
.breed-history-page .breed-history-topic-card.active {
    background:
        linear-gradient(
            180deg,
            rgba(255,245,252,0.96),
            rgba(238,247,255,0.82)
        ) !important;
    border: 1px solid rgba(218,188,238,0.86) !important;
}

/* GENETICS + BREED HISTORY: Icons in Auswahlkarten */
.genetics-page .genetics-topic-icon,
.breed-history-page .breed-history-topic-icon,
.genetics-page .genetics-article-icon,
.breed-history-page .breed-history-article-icon {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.92),
            rgba(248,238,255,0.78)
        ) !important;
    border: 1px solid rgba(218,188,238,0.72) !important;
}

/* GENETICS + BREED HISTORY: Highlight/Quick Facts/Genotype Boxen */
.genetics-page .genetics-article-highlight,
.genetics-page .genetics-genotype-card,
.genetics-page .genetics-article-list div,
.breed-history-page .breed-history-article-highlight,
.breed-history-page .breed-history-article-list div,
.breed-history-page .breed-history-quick-facts,
.breed-history-page .breed-history-fact-row {
    background:
        linear-gradient(
            180deg,
            rgba(255,252,255,0.82),
            rgba(248,240,255,0.66)
        ) !important;
    border: 1px solid rgba(218,188,238,0.70) !important;
    color: #5b5364 !important;
}

/* GENETICS + BREED HISTORY: Textfarben */
.genetics-page .genetics-info-title,
.breed-history-page .breed-history-title,
.genetics-page .genetics-article-title,
.breed-history-page .breed-history-article-title,
.genetics-page .genetics-detail-section-title,
.breed-history-page .breed-history-detail-section-title,
.genetics-page h1,
.genetics-page h2,
.genetics-page h3,
.breed-history-page h1,
.breed-history-page h2,
.breed-history-page h3 {
    color: #65475f !important;
}

.genetics-page .genetics-info-subtitle,
.breed-history-page .breed-history-subtitle,
.genetics-page .genetics-article-subtitle,
.breed-history-page .breed-history-article-subtitle,
.genetics-page .genetics-article-text,
.breed-history-page .breed-history-article-text,
.genetics-page p,
.breed-history-page p {
    color: #5b5364 !important;
}

.genetics-page b,
.genetics-page strong,
.breed-history-page b,
.breed-history-page strong {
    color: #7a2f58 !important;
}

/* Alles übrige Grün auf diesen drei Bereichen überschreiben */
.object-shop-page *,
.genetics-page *,
.breed-history-page * {
    border-color: rgba(218,188,238,0.70);
}

/* ===== HARD FIX: Genetics + Breed History absolutely no green ===== */

/* Große obere Banner */
.genetics-page .genetics-info-hero,
.breed-history-page .breed-history-hero {
    background:
        linear-gradient(
            135deg,
            rgba(255,250,254,0.90) 0%,
            rgba(247,239,255,0.84) 45%,
            rgba(255,235,247,0.84) 100%
        ) !important;
    border: 1px solid rgba(218,188,238,0.82) !important;
    box-shadow:
        0 8px 20px rgba(86,58,112,0.10),
        inset 0 0 0 1px rgba(255,255,255,0.34) !important;
}

/* Innerer Header rechts: Dominant/Recessive + British Shorthair */
.genetics-page .genetics-article-head,
.breed-history-page .breed-history-article-head {
    background:
        linear-gradient(
            90deg,
            rgba(255,247,253,0.96) 0%,
            rgba(241,246,255,0.92) 48%,
            rgba(255,235,247,0.94) 100%
        ) !important;
    border-bottom: 1px solid rgba(218,188,238,0.70) !important;
}

/* Linke Sidebar Box */
.genetics-page .genetics-sidebar,
.breed-history-page .breed-history-sidebar {
    background:
        linear-gradient(
            180deg,
            rgba(255,252,255,0.88),
            rgba(248,240,255,0.74)
        ) !important;
    border: 1px solid rgba(218,188,238,0.78) !important;
}

/* Linke Auswahlkarten */
.genetics-page .genetics-topic-card,
.breed-history-page .breed-history-topic-card {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.88),
            rgba(249,242,255,0.72)
        ) !important;
    border: 1px solid rgba(218,188,238,0.72) !important;
}

/* Aktive Auswahlkarte nicht mehr blau/grün */
.genetics-page .genetics-topic-card.active,
.breed-history-page .breed-history-topic-card.active {
    background:
        linear-gradient(
            180deg,
            rgba(255,244,252,0.96),
            rgba(244,239,255,0.88)
        ) !important;
    border: 1px solid rgba(218,188,238,0.92) !important;
    box-shadow: 0 6px 14px rgba(86,58,112,0.08) !important;
}

/* Artikelbox rechts */
.genetics-page .genetics-article-card,
.genetics-page .genetics-article-main,
.breed-history-page .breed-history-article-card,
.breed-history-page .breed-history-article-main {
    background:
        linear-gradient(
            180deg,
            rgba(255,252,255,0.88),
            rgba(248,240,255,0.74)
        ) !important;
    border: 1px solid rgba(218,188,238,0.78) !important;
}

/* Icons in den Boxen */
.genetics-page .genetics-topic-icon,
.genetics-page .genetics-article-icon,
.breed-history-page .breed-history-topic-icon,
.breed-history-page .breed-history-article-icon {
    background:
        linear-gradient(
            180deg,
            rgba(255,250,254,0.96),
            rgba(243,239,255,0.88)
        ) !important;
    border: 1px solid rgba(218,188,238,0.76) !important;
}

/* Quick Facts / Info-Kästen */
.genetics-page .genetics-article-highlight,
.genetics-page .genetics-genotype-card,
.genetics-page .genetics-article-list div,
.breed-history-page .breed-history-quick-facts,
.breed-history-page .breed-history-fact-row,
.breed-history-page .breed-history-article-highlight,
.breed-history-page .breed-history-article-list div {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.84),
            rgba(250,242,255,0.68)
        ) !important;
    border: 1px solid rgba(218,188,238,0.70) !important;
}

/* Alle grünen Textreste überschreiben */
.genetics-page .genetics-info-kicker,
.breed-history-page .breed-history-kicker,
.genetics-page .genetics-topic-title,
.breed-history-page .breed-history-topic-title,
.genetics-page b,
.genetics-page strong,
.breed-history-page b,
.breed-history-page strong {
    color: #8a2f5a !important;
}

/* Titel */
.genetics-page h1,
.genetics-page h2,
.genetics-page h3,
.genetics-page .genetics-info-title,
.genetics-page .genetics-article-title,
.breed-history-page h1,
.breed-history-page h2,
.breed-history-page h3,
.breed-history-page .breed-history-title,
.breed-history-page .breed-history-article-title {
    color: #65475f !important;
}

/* Texte */
.genetics-page p,
.genetics-page .genetics-info-subtitle,
.genetics-page .genetics-article-subtitle,
.genetics-page .genetics-topic-subtitle,
.breed-history-page p,
.breed-history-page .breed-history-subtitle,
.breed-history-page .breed-history-article-subtitle,
.breed-history-page .breed-history-topic-subtitle {
    color: #5b5364 !important;
}

/* Notfall: grüne Borders komplett ersetzen */
.genetics-page *,
.breed-history-page * {
    border-color: rgba(218,188,238,0.72) !important;
}

/* ===== REAL FIX: Genetics Info Pages / Breed History actual classes ===== */

/* Große obere Banner: Genetics + Breed History */
.genetics-info-page .genetics-info-hero {
    background:
        linear-gradient(
            135deg,
            rgba(255,250,254,0.92) 0%,
            rgba(244,240,255,0.86) 48%,
            rgba(255,236,248,0.86) 100%
        ) !important;
    border: 1px solid rgba(218,188,238,0.82) !important;
    box-shadow:
        0 8px 20px rgba(86,58,112,0.10),
        inset 0 0 0 1px rgba(255,255,255,0.34) !important;
}

/* Linke Sidebar: Genes / Breeds */
.genetics-info-page .genetics-gene-list {
    background:
        linear-gradient(
            180deg,
            rgba(255,252,255,0.90),
            rgba(248,240,255,0.76)
        ) !important;
    border: 1px solid rgba(218,188,238,0.78) !important;
    box-shadow:
        0 8px 18px rgba(86,58,112,0.08),
        inset 0 0 0 1px rgba(255,255,255,0.30) !important;
}

/* Linker Sidebar-Titel */
.genetics-info-page .genetics-gene-list-title {
    color: #65475f !important;
}

/* Linke Auswahlbuttons */
.genetics-info-page .genetics-gene-button {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.88),
            rgba(249,242,255,0.72)
        ) !important;
    border: 1px solid rgba(218,188,238,0.72) !important;
    color: #5b4b63 !important;
}

/* Aktiver Auswahlbutton */
.genetics-info-page .genetics-gene-button.active {
    background:
        linear-gradient(
            180deg,
            rgba(255,244,252,0.98),
            rgba(244,239,255,0.88)
        ) !important;
    border: 1px solid rgba(218,188,238,0.92) !important;
    box-shadow: 0 6px 14px rgba(86,58,112,0.08) !important;
}

/* Icons links */
.genetics-info-page .genetics-gene-icon,
.genetics-info-page .genetics-detail-icon,
.genetics-info-page .genetics-info-icon {
    background:
        linear-gradient(
            180deg,
            rgba(255,250,254,0.96),
            rgba(243,239,255,0.88)
        ) !important;
    border: 1px solid rgba(218,188,238,0.76) !important;
}

/* Rechte große Artikelbox */
.genetics-info-page .genetics-info-detail {
    background:
        linear-gradient(
            180deg,
            rgba(255,252,255,0.90),
            rgba(248,240,255,0.76)
        ) !important;
    border: 1px solid rgba(218,188,238,0.78) !important;
    box-shadow:
        0 8px 18px rgba(86,58,112,0.08),
        inset 0 0 0 1px rgba(255,255,255,0.30) !important;
    backdrop-filter: blur(6px) !important;
}

/* Der grüne/bläuliche Kopfbereich rechts */
.genetics-info-page .genetics-detail-head {
    background:
        linear-gradient(
            90deg,
            rgba(255,247,253,0.96) 0%,
            rgba(244,240,255,0.92) 48%,
            rgba(255,235,247,0.94) 100%
        ) !important;
    border-bottom: 1px solid rgba(218,188,238,0.70) !important;
}

/* Textfarben */
.genetics-info-page .genetics-info-title,
.genetics-info-page .genetics-detail-title,
.genetics-info-page .genetics-gene-list-title {
    color: #65475f !important;
}

.genetics-info-page .genetics-info-text,
.genetics-info-page .genetics-detail-subtitle,
.genetics-info-page .genetics-article-text,
.genetics-info-page p {
    color: #5b5364 !important;
}

.genetics-info-page .genetics-gene-name,
.genetics-info-page .genetics-article-highlight-title,
.genetics-info-page b,
.genetics-info-page strong {
    color: #8a2f5a !important;
}

.genetics-info-page .genetics-gene-short {
    color: #5b5364 !important;
}

/* Quick Facts / kleine Info-Kästen */
.genetics-info-page .genetics-article-highlight,
.genetics-info-page .genetics-article-list div,
.genetics-info-page .genetics-genotype-card {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.86),
            rgba(250,242,255,0.70)
        ) !important;
    border: 1px solid rgba(218,188,238,0.70) !important;
    color: #5b5364 !important;
}

/* Alle übrigen grünen Linien auf diesen Seiten */
.genetics-info-page *,
.genetics-info-page *::before,
.genetics-info-page *::after {
    border-color: rgba(218,188,238,0.72) !important;
}

/* ===== Mailbox redesign: compact inbox, sent messages and conversations ===== */

.mailbox-page .mailbox-hero {
    background:
        linear-gradient(
            135deg,
            rgba(255,250,254,0.92) 0%,
            rgba(239,246,255,0.84) 48%,
            rgba(255,235,247,0.86) 100%
        ) !important;
    border: 1px solid rgba(218,188,238,0.82) !important;
    box-shadow:
        0 8px 20px rgba(86,58,112,0.10),
        inset 0 0 0 1px rgba(255,255,255,0.34) !important;
}

.mailbox-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
    padding: 12px;
    border-radius: 22px;
    background:
        linear-gradient(
            180deg,
            rgba(255,252,255,0.84),
            rgba(248,240,255,0.68)
        );
    border: 1px solid rgba(218,188,238,0.72);
    box-shadow: 0 7px 16px rgba(86,58,112,0.07);
}

.mailbox-tab {
    border-radius: 999px !important;
    padding: 10px 16px !important;
    font-weight: 950 !important;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.mailbox-tab.active {
    background:
        linear-gradient(
            180deg,
            rgba(255,245,252,0.98),
            rgba(238,247,255,0.92)
        ) !important;
    color: #8a2f5a !important;
    border-color: rgba(218,188,238,0.90) !important;
}

.mailbox-tab-count {
    display: inline-flex;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255,255,255,0.82);
    border: 1px solid rgba(218,188,238,0.72);
    color: #8a2f5a;
    font-size: 12px;
    font-weight: 950;
}

.mailbox-summary-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: center;
    margin-bottom: 16px;
    padding: 18px 20px;
    border-radius: 22px;
    background:
        linear-gradient(
            180deg,
            rgba(255,252,255,0.88),
            rgba(248,240,255,0.74)
        );
    border: 1px solid rgba(218,188,238,0.76);
    box-shadow:
        0 8px 18px rgba(86,58,112,0.08),
        inset 0 0 0 1px rgba(255,255,255,0.30);
}

.mailbox-summary-title {
    font-size: 22px;
    font-weight: 950;
    color: #65475f;
    margin-bottom: 4px;
}

.mailbox-summary-text {
    color: #5b5364;
    font-weight: 800;
}

.mailbox-summary-count {
    min-width: 54px;
    height: 54px;
    padding: 0 12px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.94),
            rgba(255,232,246,0.84)
        );
    border: 1px solid rgba(218,188,238,0.78);
    color: #8a2f5a;
    font-size: 24px;
    font-weight: 950;
}

.mailbox-toolbar {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}

.mailbox-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 5px 10px 5px 15px;
    border-radius: 999px;
    background: rgba(255,255,255,0.86);
    border: 1px solid rgba(218,188,238,0.76);
    box-shadow: 0 5px 12px rgba(86,58,112,0.06);
}

.mailbox-search-wrap input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: #554b5f;
    font-size: 15px;
    font-weight: 750;
}

.mailbox-search-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(
            180deg,
            rgba(238,247,255,0.96),
            rgba(255,238,248,0.94)
        );
    border: 1px solid rgba(218,188,238,0.72);
    font-size: 16px;
}

.mailbox-filter-select {
    width: 100%;
    min-height: 48px;
    padding: 8px 12px;
    border-radius: 16px;
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(218,188,238,0.76);
    color: #5a4a63;
    font-weight: 900;
}

.mail-conversation-list {
    display: grid;
    gap: 10px;
}

.mail-conversation-row {
    width: 100%;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    margin: 0 !important;
    padding: 13px 15px !important;
    text-align: left;
    border-radius: 18px !important;
    background:
        linear-gradient(
            180deg,
            rgba(255,252,255,0.90),
            rgba(248,241,255,0.76)
        ) !important;
    border: 1px solid rgba(218,188,238,0.70) !important;
    box-shadow:
        0 6px 14px rgba(86,58,112,0.07),
        inset 0 0 0 1px rgba(255,255,255,0.28) !important;
    color: #554b5f !important;
    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease,
        border-color 0.12s ease !important;
}

.mail-conversation-row:hover {
    transform: translateY(-2px);
    box-shadow:
        0 9px 18px rgba(86,58,112,0.10),
        inset 0 0 0 1px rgba(255,255,255,0.36) !important;
}

.mail-conversation-row.unread {
    border-left: 5px solid rgba(211,102,160,0.78) !important;
    background:
        linear-gradient(
            180deg,
            rgba(255,246,252,0.96),
            rgba(244,237,255,0.82)
        ) !important;
}

.mail-list-avatar,
.mail-thread-avatar {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.96),
            rgba(244,235,255,0.84)
        );
    border: 1px solid rgba(218,188,238,0.78);
    color: #8a2f5a;
    font-weight: 950;
}

.mail-list-avatar {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    font-size: 20px;
}

.mail-thread-avatar {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    font-size: 24px;
}

.mail-list-avatar img,
.mail-thread-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mail-conversation-main {
    min-width: 0;
}

.mail-conversation-person-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 3px;
}

.mail-unread-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #d366a0;
    box-shadow: 0 0 0 4px rgba(211,102,160,0.12);
    flex: 0 0 auto;
}

.mail-conversation-person {
    font-size: 15px;
    font-weight: 950;
    color: #65475f;
}

.mail-conversation-cattery {
    color: #817186;
    font-size: 12px;
    font-weight: 800;
}

.mail-conversation-subject {
    color: #7a2f58;
    font-size: 17px;
    font-weight: 950;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
}

.mail-conversation-preview {
    color: #655a6d;
    font-size: 13px;
    font-weight: 750;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mail-conversation-preview .you-prefix {
    color: #8a2f5a;
    font-weight: 950;
}

.mail-conversation-meta {
    min-width: 122px;
    text-align: right;
    color: #6f6178;
    font-size: 12px;
    font-weight: 850;
}

.mail-conversation-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 7px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(218,188,238,0.62);
    color: #7a6678;
    font-size: 11px;
    font-weight: 900;
}

.mailbox-empty-state {
    text-align: center;
    padding: 34px 22px;
    border-radius: 24px;
    background:
        linear-gradient(
            180deg,
            rgba(255,252,255,0.90),
            rgba(248,240,255,0.74)
        );
    border: 1px dashed rgba(218,188,238,0.88);
    box-shadow:
        0 8px 18px rgba(86,58,112,0.07),
        inset 0 0 0 1px rgba(255,255,255,0.30);
}

.mailbox-empty-title {
    font-size: 25px;
    font-weight: 950;
    color: #65475f;
    margin-bottom: 8px;
}

.mailbox-empty-text {
    color: #5b5364;
    font-weight: 800;
    line-height: 1.5;
    margin-bottom: 16px;
}

/* Conversation detail */

.mail-thread-header-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 15px;
    align-items: center;
    margin-bottom: 14px;
    padding: 16px 18px;
    border-radius: 22px;
    background:
        linear-gradient(
            135deg,
            rgba(255,250,254,0.92),
            rgba(239,246,255,0.84),
            rgba(248,231,255,0.82)
        );
    border: 1px solid rgba(218,188,238,0.78);
    box-shadow: 0 8px 18px rgba(86,58,112,0.08);
}

.mail-thread-subject {
    font-size: 22px;
    font-weight: 950;
    color: #7a2f58;
    margin-bottom: 4px;
}

.mail-thread-person {
    color: #5b5364;
    font-weight: 850;
}

.mail-thread-header-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.mail-thread-header-actions button {
    border-radius: 999px !important;
    font-weight: 900 !important;
}

.mail-thread-back-row {
    margin-bottom: 12px;
}

.mail-thread-back-row button {
    border-radius: 999px !important;
    font-weight: 900 !important;
}

.mail-thread-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.mail-thread-message {
    width: min(78%, 760px);
    border-radius: 20px;
    padding: 13px 15px;
    border: 1px solid rgba(218,188,238,0.68);
    box-shadow: 0 5px 12px rgba(86,58,112,0.06);
}

.mail-thread-message.received {
    align-self: flex-start;
    background:
        linear-gradient(
            180deg,
            rgba(255,252,255,0.94),
            rgba(248,240,255,0.78)
        );
}

.mail-thread-message.sent {
    align-self: flex-end;
    background:
        linear-gradient(
            180deg,
            rgba(238,247,255,0.94),
            rgba(255,242,249,0.86)
        );
}

.mail-thread-message.unread {
    border-color: rgba(211,102,160,0.80);
}

.mail-thread-message-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.mail-thread-message-author {
    color: #684b5d;
    font-weight: 950;
}

.mail-thread-message-date {
    color: #7b6c80;
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
}

.mail-thread-message-body {
    color: #50495c;
    font-weight: 720;
    line-height: 1.58;
    overflow-wrap: anywhere;
}

.mail-thread-message-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
}

.mail-thread-message-actions button {
    margin: 0 !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.mail-inline-link {
    color: #6c54a5;
    font-weight: 900;
    text-decoration: underline;
    word-break: break-word;
}

.mail-inline-link:hover {
    color: #8a2f5a;
}

.mail-thread-reply-card {
    padding: 16px 18px;
    border-radius: 22px;
    background:
        linear-gradient(
            180deg,
            rgba(255,252,255,0.90),
            rgba(248,240,255,0.74)
        );
    border: 1px solid rgba(218,188,238,0.76);
    box-shadow: 0 7px 16px rgba(86,58,112,0.07);
}

.mail-thread-reply-title {
    font-size: 18px;
    font-weight: 950;
    color: #684b5d;
    margin-bottom: 5px;
}

.mail-thread-reply-context {
    color: #75667d;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 10px;
}

.mail-thread-reply-card textarea {
    width: 100%;
    min-height: 130px;
    resize: vertical;
    border-radius: 16px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(218,188,238,0.76);
    color: #50495c;
    font: inherit;
    line-height: 1.5;
}

.mail-thread-reply-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.mail-thread-reply-actions button {
    border-radius: 999px !important;
    font-weight: 950 !important;
    min-width: 140px;
}

.mail-compose-context {
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(238,247,255,0.62);
    border: 1px solid rgba(218,188,238,0.60);
    color: #655a6d;
    font-weight: 800;
    line-height: 1.4;
}

@media (max-width: 760px) {
    .mailbox-toolbar {
        grid-template-columns: 1fr;
    }

    .mail-conversation-row {
        grid-template-columns: 50px minmax(0, 1fr);
    }

    .mail-list-avatar {
        width: 46px;
        height: 46px;
    }

    .mail-conversation-meta {
        grid-column: 2;
        min-width: 0;
        text-align: left;
        margin-top: 4px;
    }

    .mail-thread-header-card {
        grid-template-columns: auto 1fr;
    }

    .mail-thread-header-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .mail-thread-message {
        width: 94%;
    }

    .mailbox-summary-card {
        grid-template-columns: 1fr;
    }

    .mailbox-summary-count {
        width: max-content;
    }
}

/* ===== VIP + Stud Comparison Polish ===== */
.vip-page-beauty,
.stud-compare-page,
.stud-market-page {
    max-width: 1180px;
    margin: 18px auto 40px auto;
}

.vip-hero-beauty,
.stud-compare-hero,
.stud-market-hero {
    background: linear-gradient(135deg, rgba(255,250,254,0.92), rgba(238,247,255,0.86), rgba(248,231,255,0.88));
    border: 1px solid rgba(218,188,238,0.82);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 10px 24px rgba(88,64,120,0.10);
    margin-bottom: 20px;
}

.vip-status-pill {
    display: inline-block;
    margin-top: 14px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.82);
    border: 1px solid rgba(218,188,238,0.76);
    font-weight: 900;
    color: #684b5d;
}

.vip-status-pill.active {
    background: linear-gradient(180deg, rgba(255,246,252,0.98), rgba(238,247,255,0.90));
    color: #8a2f5a;
}

.vip-hero-icon {
    font-size: 30px;
    font-weight: 900;
}

.vip-plan-layout,
.stud-compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

.vip-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 14px;
}

.vip-kitten-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(218,188,238,0.70);
}

.vip-kitten-grid > div {
    padding: 12px;
    border-right: 1px solid rgba(218,188,238,0.55);
    border-bottom: 1px solid rgba(218,188,238,0.55);
    background: rgba(255,255,255,0.62);
    font-weight: 800;
}

.stud-compare-kicker,
.stud-market-kicker {
    font-weight: 900;
    color: #8a2f5a;
    margin-bottom: 6px;
}

.stud-compare-title,
.stud-market-title {
    font-size: 34px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 8px;
}

.stud-compare-subtitle,
.stud-market-subtitle {
    color: #5b5963;
    font-weight: 700;
    line-height: 1.5;
}

.stud-compare-cat-card,
.stud-compare-card,
.stud-market-toolbar {
    background: rgba(255,255,255,0.80);
    border: 1px solid rgba(218,188,238,0.76);
    border-radius: 20px;
    padding: 18px;
    box-shadow: 0 8px 18px rgba(88,64,120,0.08);
}

.stud-compare-cat-card {
    text-align: center;
}

.stud-compare-label {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,241,250,0.96), rgba(238,247,255,0.90));
    border: 1px solid rgba(218,188,238,0.70);
    font-weight: 900;
    color: #8a2f5a;
    margin-bottom: 12px;
}

.stud-compare-cat-card img {
    width: 220px;
    height: 220px;
    object-fit: contain;
    display: block;
    margin: 0 auto 12px auto;
}

.stud-compare-name {
    font-size: 22px;
    font-weight: 900;
    color: #7a2f58;
}

.stud-compare-coi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 7px auto 1px;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid rgba(218,188,238,0.70);
    background: rgba(255,255,255,0.72);
    color: #684b5d;
    font-size: 14px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.stud-compare-meta {
    font-weight: 800;
    color: #5b5963;
    margin: 6px 0 12px 0;
}

.stud-compare-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    text-align: left;
}

.stud-compare-stat-grid div {
    background: rgba(255,255,255,0.68);
    border: 1px solid rgba(218,188,238,0.55);
    border-radius: 14px;
    padding: 9px 10px;
}

.stud-compare-stat-grid b {
    display: block;
    color: #684b5d;
    margin-bottom: 3px;
}

.stud-compare-stat-grid span {
    font-weight: 900;
    color: #4f4a5e;
}

.stud-compare-card {
    margin-bottom: 18px;
}

.stud-compare-card-title {
    font-size: 22px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 10px;
}

.stud-compare-card-body {
    color: #5b5963;
    font-weight: 700;
    line-height: 1.5;
}

.stud-pedigree-panel {
    background: linear-gradient(135deg, rgba(255,250,254,0.90), rgba(238,247,255,0.84));
    border: 1px solid rgba(218,188,238,0.76);
    border-radius: 22px;
    padding: 18px;
    box-shadow: 0 8px 18px rgba(88,64,120,0.08);
    margin: 0 0 18px 0;
    text-align: center;
}

.stud-pedigree-title {
    font-size: 25px;
    font-weight: 950;
    color: #684b5d;
    margin-bottom: 7px;
}

.stud-pedigree-subtitle {
    color: #5b5963;
    font-weight: 750;
    margin-bottom: 14px;
}

.stud-pedigree-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.stud-pedigree-actions button {
    min-width: 190px;
    padding: 11px 16px;
    font-weight: 900;
}

.freyja-recommendation-card {
    background:
        radial-gradient(circle at top left, rgba(255,214,236,0.54), transparent 34%),
        linear-gradient(135deg, rgba(255,250,254,0.92), rgba(238,247,255,0.88), rgba(248,231,255,0.90));
}

.freyja-compare-layout {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 18px;
    align-items: center;
}

.freyja-compare-icon-wrap {
    width: 118px;
    height: 118px;
    border-radius: 28px;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(218,188,238,0.76);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,0.35);
}

.freyja-compare-icon-wrap img {
    width: 92px;
    height: 92px;
    object-fit: contain;
}

.freyja-compare-headline {
    font-size: 20px;
    font-weight: 950;
    color: #8a2f5a;
    margin-bottom: 8px;
}

.freyja-compare-text {
    color: #5b5963;
    font-weight: 750;
    line-height: 1.45;
}

.freyja-current-status {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    gap: 10px;
    margin: 14px 0;
}

.freyja-current-status > div {
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(218,188,238,0.66);
    border-radius: 16px;
    padding: 11px 12px;
}

.freyja-current-status b {
    display: block;
    color: #684b5d;
    margin-bottom: 4px;
}

.freyja-current-status span {
    font-size: 20px;
    font-weight: 950;
    color: #7a2f58;
}

.freyja-range-title {
    margin: 16px 0 10px 0;
    font-size: 16px;
    font-weight: 950;
    color: #684b5d;
}

.freyja-all-ranges {
    display: grid;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    gap: 12px;
    margin: 0 0 16px 0;
}

.freyja-status-range-card {
    background: rgba(255,255,255,0.62);
    border: 1px solid rgba(218,188,238,0.56);
    border-radius: 18px;
    padding: 13px;
}

.freyja-status-range-card.active {
    background: linear-gradient(135deg, rgba(255,241,250,0.88), rgba(232,247,255,0.82));
    border: 2px solid rgba(168,120,223,0.52);
    box-shadow: 0 8px 18px rgba(88,64,120,0.09);
}

.freyja-status-range-title {
    display: inline-block;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,0.82);
    border: 1px solid rgba(218,188,238,0.58);
    color: #8a2f5a;
    font-weight: 950;
    margin-bottom: 10px;
}

.freyja-status-range-line {
    padding: 9px 0;
    border-bottom: 1px solid rgba(218,188,238,0.42);
}

.freyja-status-range-line:last-child {
    border-bottom: none;
}

.freyja-status-range-line b {
    display: block;
    color: #684b5d;
    margin-bottom: 3px;
}

.freyja-status-range-line span {
    display: block;
    font-size: 19px;
    font-weight: 950;
    color: #7a2f58;
    margin-bottom: 3px;
}

.freyja-status-range-line small {
    display: block;
    color: #75667d;
    font-weight: 800;
    line-height: 1.35;
}

.freyja-compare-button {
    padding: 12px 16px;
    border-radius: 999px;
    font-weight: 950;
}

@media (max-width: 760px) {
    .freyja-compare-layout {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .freyja-compare-icon-wrap {
        margin: 0 auto;
    }

    .freyja-current-status,
    .freyja-all-ranges {
        grid-template-columns: 1fr;
    }
}

.stud-advice-line {
    padding: 9px 0;
    border-bottom: 1px solid rgba(218,188,238,0.45);
}

.stud-advice-line:last-child {
    border-bottom: none;
}

.stud-advice-coi {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 13px;
    margin-bottom: 4px;
    border: 1px solid rgba(218,188,238,0.58);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255,241,250,0.78), rgba(238,247,255,0.76));
}

.stud-advice-coi b {
    color: #684b5d;
}

.stud-advice-coi span {
    color: #8a2f5a;
    font-size: 18px;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
}

.stud-advice-coi small {
    flex-basis: 100%;
    color: #75667d;
    font-weight: 750;
    line-height: 1.35;
}

.stud-compare-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.stud-compare-actions button {
    min-width: 190px;
    padding: 12px 16px;
    font-weight: 900;
}

.stud-market-toolbar {
    display: grid;
    grid-template-columns: 150px 1fr 220px;
    gap: 12px;
    align-items: center;
    margin-bottom: 18px;
}

.stud-market-toolbar select {
    width: 100%;
    border: 1px solid rgba(218,188,238,0.82);
    border-radius: 12px;
    padding: 10px;
    background: rgba(255,255,255,0.94);
}


/* ===== Stud Services Filter + Softer Colors ===== */
.stud-market-page .stud-filter-card {
    background: linear-gradient(135deg, rgba(255,250,254,0.88), rgba(238,247,255,0.78), rgba(248,231,255,0.76));
    border-color: rgba(218,188,238,0.78);
    box-shadow: 0 10px 24px rgba(88,64,120,0.09);
}

.stud-market-page .stud-filter-note,
.stud-market-page .find-stud-owner,
.stud-market-page .find-stud-price {
    color: #6a4f63;
}

.stud-market-page .stud-filter-group {
    background: rgba(255,255,255,0.66);
    border-color: rgba(218,188,238,0.58);
}

.stud-market-page .stud-filter-field input,
.stud-market-page .stud-filter-field select,
.stud-market-page .find-stud-source {
    border-color: rgba(218,188,238,0.62);
}

.stud-market-page .find-stud-list {
    border-color: rgba(218,188,238,0.78);
    background: rgba(255,255,255,0.72);
}

.stud-market-page .find-stud-head {
    background: linear-gradient(90deg, rgba(255,241,250,0.96), rgba(238,247,255,0.94), rgba(238,225,255,0.92));
    border-bottom-color: rgba(218,188,238,0.58);
    color: #684b5d;
}

.stud-market-page .find-stud-row:nth-child(even) {
    background: rgba(248,231,255,0.25);
}

.stud-market-page .find-stud-row:nth-child(odd) {
    background: rgba(255,255,255,0.48);
}

.stud-market-page .stud-filter-primary {
    background: linear-gradient(180deg, #ffffff, #eee1ff);
}

.stud-market-page .stud-filter-secondary {
    background: linear-gradient(180deg, #ffffff, #fff1fa);
}

@media (max-width: 900px) {
    .vip-plan-layout,
    .stud-compare-grid,
    .vip-feature-grid,
    .stud-market-toolbar {
        grid-template-columns: 1fr;
    }

    .vip-kitten-grid {
        grid-template-columns: 1fr;
    }
}


/* ===== VIP Subscriptions polished page ===== */

.vip-subscriptions-page {
    max-width: 1220px;
}

.vip-subscriptions-hero {
    display: grid;
    grid-template-columns: 1fr 150px;
    gap: 22px;
    align-items: center;
    background:
        radial-gradient(circle at top left, rgba(255,214,236,0.55), transparent 34%),
        linear-gradient(135deg, rgba(255,250,254,0.94), rgba(238,247,255,0.88), rgba(248,231,255,0.90)) !important;
}

.vip-beta-warning {
    margin-top: 14px;
    display: inline-block;
    max-width: 760px;
    padding: 10px 14px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,245,252,0.96), rgba(238,247,255,0.88));
    border: 1px solid rgba(218,188,238,0.78);
    color: #7a2f58;
    font-weight: 900;
    line-height: 1.35;
}

.vip-beta-banner {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 14px;
    align-items: center;
    margin: 0 0 18px 0;
    padding: 16px 18px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(255,250,254,0.90), rgba(238,247,255,0.84));
    border: 1px solid rgba(218,188,238,0.76);
    box-shadow: 0 8px 18px rgba(88,64,120,0.08);
    color: #5b5364;
    font-weight: 800;
    line-height: 1.45;
}

.vip-beta-banner-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(218,188,238,0.62);
    font-size: 26px;
}

.vip-price-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(170px, 1fr));
    gap: 14px;
    margin: 0 0 18px 0;
}

.vip-price-card {
    position: relative;
    min-height: 245px;
    background:
        linear-gradient(180deg, rgba(255,252,255,0.90), rgba(248,240,255,0.74));
    border: 1px solid rgba(218,188,238,0.76);
    border-radius: 22px;
    padding: 18px 16px;
    box-shadow: 0 8px 18px rgba(86,58,112,0.08);
    overflow: hidden;
}

.vip-price-card.highlight {
    background:
        radial-gradient(circle at top right, rgba(255,214,236,0.58), transparent 36%),
        linear-gradient(180deg, rgba(255,252,255,0.94), rgba(238,247,255,0.78));
    border: 2px solid rgba(168,120,223,0.44);
}

.vip-price-badge {
    display: inline-block;
    margin-bottom: 12px;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,0.82);
    border: 1px solid rgba(218,188,238,0.62);
    color: #8a2f5a;
    font-size: 12px;
    font-weight: 950;
}

.vip-price-name {
    font-size: 18px;
    font-weight: 950;
    color: #65475f;
    margin-bottom: 8px;
}

.vip-price-value {
    font-size: 32px;
    font-weight: 950;
    color: #7a2f58;
    margin-bottom: 7px;
}

.vip-price-sub {
    color: #4f7057;
    font-weight: 900;
    line-height: 1.3;
    margin-bottom: 8px;
}

.vip-price-note {
    color: #5b5364;
    font-weight: 750;
    line-height: 1.35;
    min-height: 54px;
}

.vip-disabled-buy-button {
    width: 100%;
    margin-top: 14px;
    opacity: 0.72;
    cursor: not-allowed !important;
    filter: grayscale(20%);
}

.vip-fairness-note {
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255,250,254,0.88), rgba(238,247,255,0.82));
    border: 1px solid rgba(218,188,238,0.72);
    color: #5b5364;
    font-weight: 800;
    line-height: 1.45;
}

.vip-kitten-grid small {
    display: block;
    margin-top: 5px;
    color: #75667d;
    font-weight: 800;
    line-height: 1.35;
}

@media (max-width: 1150px) {
    .vip-price-grid {
        grid-template-columns: repeat(3, minmax(180px, 1fr));
    }
}

@media (max-width: 760px) {
    .vip-subscriptions-hero,
    .vip-beta-banner,
    .vip-price-grid {
        grid-template-columns: 1fr;
    }

    .vip-subscriptions-hero {
        text-align: center;
    }

    .vip-beta-banner-icon {
        margin: 0 auto;
    }
}



/* =====================================================
   Genetics Lab - Phase 1
   ===================================================== */

.genetics-lab-page {
    max-width: 1220px;
    margin: 18px auto 42px auto;
}

.genetics-lab-hero {
    display: grid;
    grid-template-columns: 1fr 130px;
    gap: 22px;
    align-items: center;
    background: var(--dream-gradient);
    border: 1px solid rgba(216,184,238,0.76);
    border-radius: 24px;
    padding: 24px 26px;
    box-shadow: 0 10px 24px rgba(88,64,120,0.10);
    backdrop-filter: blur(7px);
    margin-bottom: 18px;
}

.genetics-lab-kicker {
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8b2f62;
    margin-bottom: 6px;
}

.genetics-lab-title {
    font-size: 38px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 8px;
}

.genetics-lab-subtitle {
    max-width: 850px;
    color: #5b5963;
    font-weight: 700;
    line-height: 1.55;
}

.genetics-lab-hero-icon {
    width: 112px;
    height: 112px;
    border-radius: 28px;
    background: rgba(255,255,255,0.68);
    border: 1px solid rgba(216,184,238,0.70);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,0.35);
}

.genetics-lab-hero-icon img {
    width: 92px;
    height: 92px;
    object-fit: contain;
}

.genetics-lab-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}

.genetics-lab-tab {
    min-height: 62px;
    border-radius: 18px;
    font-size: 16px;
    font-weight: 900;
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(239,226,255,0.82));
    border: 1px solid rgba(194,160,225,0.82);
    color: #684b5d;
    box-shadow: 0 6px 14px rgba(88,64,120,0.10);
}

.genetics-lab-tab.active {
    background: linear-gradient(135deg, rgba(232,247,255,0.95), rgba(255,241,250,0.96), rgba(238,225,255,0.95));
    border-color: rgba(169,120,223,0.70);
    color: #8a2f5a;
    transform: translateY(-1px);
}

.genetics-lab-panel {
    background: rgba(255,255,255,0.76);
    border: 1px solid rgba(216,184,238,0.72);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(88,64,120,0.10);
    backdrop-filter: blur(6px);
    margin-bottom: 18px;
}

.genetics-lab-panel-title {
    background: var(--dream-header);
    border-bottom: 1px solid rgba(216,184,238,0.55);
    padding: 14px 18px;
    font-size: 23px;
    font-weight: 900;
    color: #684b5d;
    text-align: center;
}

.genetics-lab-panel-body {
    padding: 18px;
}

.genetics-lab-selector-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: end;
}

.genetics-lab-field label {
    display: block;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 6px;
}

.genetics-lab-field select {
    width: 100%;
    border: 1px solid rgba(216,184,238,0.80);
    border-radius: 12px;
    background: rgba(255,255,255,0.94);
    padding: 11px 12px;
    color: #4f4a5e;
    font-weight: 700;
}

.genetics-lab-cat-preview {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 20px;
    align-items: center;
    margin-top: 18px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(216,184,238,0.56);
    background: linear-gradient(135deg, rgba(255,255,255,0.72), rgba(238,247,255,0.56), rgba(255,241,250,0.60));
}

.genetics-lab-cat-preview img {
    width: 170px;
    height: 170px;
    object-fit: contain;
}

.genetics-lab-cat-name {
    font-size: 26px;
    font-weight: 900;
    color: #7a2f58;
    margin-bottom: 5px;
}

.genetics-lab-cat-meta {
    color: #5b5963;
    font-weight: 700;
    line-height: 1.55;
}

.genetics-lab-test-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.genetics-lab-test-card {
    border: 1px solid rgba(216,184,238,0.62);
    border-radius: 17px;
    padding: 15px;
    background: rgba(255,255,255,0.72);
    box-shadow: 0 4px 10px rgba(88,64,120,0.06);
}

.genetics-lab-test-card.unlocked {
    background: linear-gradient(135deg, rgba(238,247,255,0.70), rgba(255,241,250,0.68));
}

.genetics-lab-test-name {
    font-size: 17px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 8px;
}

.genetics-lab-test-result {
    min-height: 42px;
    padding: 9px 11px;
    border-radius: 12px;
    background: rgba(255,255,255,0.76);
    border: 1px solid rgba(216,184,238,0.42);
    color: #4f4a5e;
    font-weight: 900;
    line-height: 1.35;
    margin-bottom: 10px;
}

.genetics-lab-test-cost {
    color: #7b7183;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 9px;
}

.genetics-lab-test-card button {
    width: 100%;
    margin: 0;
    font-weight: 900;
}

.genetics-lab-mini-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.genetics-lab-mini-tab {
    border-radius: 999px;
    padding: 8px 14px;
    font-weight: 900;
    border: 1px solid rgba(216,184,238,0.72);
    background: rgba(255,255,255,0.72);
    color: #684b5d;
}

.genetics-lab-mini-tab.active {
    background: linear-gradient(180deg, rgba(255,241,250,0.96), rgba(232,247,255,0.92));
    color: #8a2f5a;
}

.genetics-lab-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: 16px;
    margin-top: 18px;
}

.genetics-lab-section-title {
    font-size: 18px;
    font-weight: 900;
    color: #684b5d;
    margin: 18px 0 10px 0;
}

.genetics-lab-profile-grid,
.genetics-lab-value-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.genetics-lab-profile-card,
.genetics-lab-value-card,
.genetics-lab-cert,
.genetics-lab-alert-card,
.genetics-lab-history-card,
.genetics-lab-why-card,
.genetics-lab-preview-card {
    border: 1px solid rgba(216,184,238,0.56);
    border-radius: 16px;
    background: rgba(255,255,255,0.70);
    padding: 13px;
    box-shadow: 0 4px 10px rgba(88,64,120,0.06);
}

.genetics-lab-profile-value {
    font-size: 27px;
    font-weight: 900;
    color: #8a2f5a;
}

.genetics-lab-profile-label,
.genetics-lab-soft-label {
    font-size: 12px;
    font-weight: 900;
    color: #7b7183;
    margin-top: 2px;
}

.genetics-lab-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 8px;
}

.genetics-lab-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 6px 9px;
    border: 1px solid rgba(216,184,238,0.50);
    background: rgba(255,255,255,0.78);
    color: #684b5d;
    font-size: 12px;
    font-weight: 900;
}

.genetics-lab-chip.known { background: rgba(232,247,255,0.80); }
.genetics-lab-chip.missing { background: rgba(255,241,250,0.84); }
.genetics-lab-chip.inactive { background: rgba(230,230,235,0.66); color: #7a7280; }

.genetics-lab-test-group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 14px;
}

.genetics-lab-test-card.recommended {
    border-color: rgba(138,47,90,0.34);
    background: linear-gradient(135deg, rgba(255,241,250,0.80), rgba(232,247,255,0.66));
}

.genetics-lab-test-card.inactive {
    opacity: 0.72;
    filter: grayscale(60%);
}

.genetics-lab-test-badge {
    display: inline-flex;
    border-radius: 999px;
    padding: 4px 8px;
    margin-bottom: 8px;
    background: rgba(255,255,255,0.82);
    border: 1px solid rgba(216,184,238,0.50);
    color: #8a4f6d;
    font-size: 11px;
    font-weight: 900;
}

.genetics-lab-cert-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: start;
    margin-bottom: 10px;
}

.genetics-lab-cert-title {
    font-size: 18px;
    font-weight: 900;
    color: #684b5d;
}

.genetics-lab-cert-stamp {
    border-radius: 999px;
    padding: 5px 9px;
    background: linear-gradient(180deg, rgba(255,241,250,0.96), rgba(232,247,255,0.92));
    border: 1px solid rgba(216,184,238,0.55);
    color: #8a2f5a;
    font-weight: 900;
    font-size: 12px;
}

.genetics-lab-cert-row,
.genetics-lab-history-row,
.genetics-lab-why-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 10px;
    border-bottom: 1px solid rgba(79,74,94,0.08);
    padding: 7px 0;
    color: #4f4a5e;
    font-weight: 800;
}

.genetics-lab-cert-row:last-child,
.genetics-lab-history-row:last-child,
.genetics-lab-why-row:last-child {
    border-bottom: none;
}

.genetics-lab-alert-list,
.genetics-lab-history-list,
.genetics-lab-why-grid,
.genetics-lab-preview-grid {
    display: grid;
    gap: 10px;
}

.genetics-lab-alert-card strong,
.genetics-lab-preview-card strong {
    display: block;
    color: #7a2f58;
    margin-bottom: 4px;
}

.genetics-lab-history-date {
    color: #8a4f6d;
    font-size: 12px;
    font-weight: 900;
}

.genetics-lab-market-score {
    font-size: 30px;
    font-weight: 900;
    color: #8a2f5a;
}

@media (max-width: 900px) {
    .genetics-lab-dashboard-grid,
    .genetics-lab-profile-grid,
    .genetics-lab-value-grid {
        grid-template-columns: 1fr;
    }

    .genetics-lab-cert-row,
    .genetics-lab-history-row,
    .genetics-lab-why-row {
        grid-template-columns: 1fr;
    }
}

.genetics-lab-parent-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.genetics-lab-parent-card {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border-radius: 17px;
    border: 1px solid rgba(216,184,238,0.55);
    background: rgba(255,255,255,0.68);
}

.genetics-lab-parent-card img {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

.genetics-lab-parent-role {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8a4f6d;
}

.genetics-lab-parent-name {
    font-size: 20px;
    font-weight: 900;
    color: #684b5d;
    margin: 3px 0;
}

.genetics-lab-analyze-wrap {
    text-align: center;
    margin-top: 16px;
}

.genetics-lab-analyze-button {
    min-width: 240px;
    padding: 12px 18px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 900;
}

.genetics-lab-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
}

.genetics-lab-result-card {
    border: 1px solid rgba(216,184,238,0.58);
    border-radius: 17px;
    padding: 14px;
    background: rgba(255,255,255,0.70);
}

.genetics-lab-result-title {
    font-size: 18px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 10px;
}

.genetics-lab-result-subtitle {
    font-size: 13px;
    font-weight: 900;
    color: #8a4f6d;
    margin: 10px 0 6px 0;
}

.genetics-lab-probability-list {
    display: grid;
    gap: 7px;
}

.genetics-lab-probability-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 10px;
    border-radius: 11px;
    background: rgba(238,247,255,0.52);
    border: 1px solid rgba(216,184,238,0.35);
    font-weight: 800;
}

.genetics-lab-locked-note {
    padding: 11px 12px;
    border-radius: 12px;
    background: rgba(230,230,235,0.62);
    color: #77717d;
    font-weight: 800;
    line-height: 1.4;
}

.genetics-lab-phenotype-list {
    display: grid;
    gap: 8px;
}

.genetics-lab-phenotype-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(232,247,255,0.56), rgba(255,241,250,0.58));
    border: 1px solid rgba(216,184,238,0.42);
    font-weight: 900;
}

.genetics-lab-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}

.genetics-lab-summary-card {
    text-align: center;
    padding: 16px 12px;
    border-radius: 17px;
    border: 1px solid rgba(216,184,238,0.56);
    background: rgba(255,255,255,0.70);
}

.genetics-lab-summary-value {
    font-size: 30px;
    font-weight: 900;
    color: #8a2f5a;
}

.genetics-lab-summary-label {
    color: #6b5e72;
    font-weight: 800;
    margin-top: 3px;
}

.genetics-lab-collection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}

.genetics-lab-collection-card {
    border: 1px solid rgba(216,184,238,0.58);
    border-radius: 17px;
    padding: 14px;
    background: rgba(255,255,255,0.70);
}

.genetics-lab-collection-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
}

.genetics-lab-collection-title {
    font-size: 17px;
    font-weight: 900;
    color: #684b5d;
}

.genetics-lab-collection-count {
    font-size: 13px;
    font-weight: 900;
    color: #8a4f6d;
}

.genetics-lab-progress {
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(220,220,230,0.76);
    margin-bottom: 11px;
}

.genetics-lab-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #8fc6d8, #f6cfe0);
}

.genetics-lab-genotype-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.genetics-lab-genotype-chip {
    padding: 6px 9px;
    border-radius: 999px;
    border: 1px solid rgba(216,184,238,0.48);
    font-size: 13px;
    font-weight: 900;
    background: rgba(230,230,235,0.58);
    color: #8d8793;
}

.genetics-lab-genotype-chip.discovered {
    background: linear-gradient(180deg, rgba(238,247,255,0.90), rgba(255,241,250,0.90));
    color: #684b5d;
}

.genetics-lab-empty {
    padding: 26px 18px;
    text-align: center;
    color: #77717d;
    font-weight: 800;
}

@media (max-width: 850px) {
    .genetics-lab-hero,
    .genetics-lab-selector-grid,
    .genetics-lab-parent-grid,
    .genetics-lab-summary {
        grid-template-columns: 1fr;
    }

    .genetics-lab-hero {
        text-align: center;
    }

    .genetics-lab-hero-icon {
        margin: 0 auto;
    }

    .genetics-lab-tabs {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .genetics-lab-cat-preview,
    .genetics-lab-parent-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .genetics-lab-cat-preview img,
    .genetics-lab-parent-card img {
        margin: 0 auto;
    }
}


/* =====================================================
   Genetics Lab - Phase 2
   ===================================================== */

.genetics-lab-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.genetics-phase2-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.genetics-phase2-card {
    background: rgba(255,255,255,0.74);
    border: 1px solid rgba(216,184,238,0.72);
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 6px 14px rgba(88,64,120,0.08);
}

.genetics-phase2-card-title {
    font-size: 19px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 8px;
}

.genetics-phase2-card-subtitle {
    color: #6f6376;
    line-height: 1.45;
    margin-bottom: 12px;
}

.genetics-saved-pairing-card,
.genetics-project-card,
.genetics-achievement-card {
    background: rgba(255,255,255,0.74);
    border: 1px solid rgba(216,184,238,0.72);
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 6px 14px rgba(88,64,120,0.08);
}

.genetics-saved-pairing-head,
.genetics-project-head,
.genetics-achievement-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 10px;
}

.genetics-saved-pairing-name,
.genetics-project-name,
.genetics-achievement-name {
    font-size: 20px;
    font-weight: 900;
    color: #684b5d;
}

.genetics-phase2-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 900;
    background: linear-gradient(180deg, rgba(255,241,250,0.96), rgba(238,247,255,0.92));
    border: 1px solid rgba(216,184,238,0.72);
    color: #7a4d73;
    white-space: nowrap;
}

.genetics-phase2-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.genetics-phase2-meta {
    display: grid;
    gap: 5px;
    color: #5b5963;
    line-height: 1.4;
}

.genetics-phase2-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.genetics-project-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}

.genetics-project-form-grid .genetics-lab-field {
    margin-bottom: 0;
}

.genetics-project-target-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.genetics-project-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.genetics-project-stat {
    background: rgba(247,248,255,0.72);
    border: 1px solid rgba(216,184,238,0.58);
    border-radius: 14px;
    padding: 10px;
    text-align: center;
}

.genetics-project-stat-value {
    font-size: 22px;
    font-weight: 900;
    color: #5a4664;
}

.genetics-project-stat-label {
    font-size: 12px;
    font-weight: 800;
    color: #766b7c;
    margin-top: 4px;
}

.genetics-target-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
}

.genetics-target-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    padding: 6px 10px;
    background: rgba(238,247,255,0.72);
    border: 1px solid rgba(216,184,238,0.58);
    font-size: 12px;
    font-weight: 800;
    color: #5b5963;
}

.genetics-research-items {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.genetics-research-item-card {
    background: linear-gradient(135deg, rgba(255,249,242,0.88), rgba(244,240,255,0.86));
    border: 1px solid rgba(216,184,238,0.72);
    border-radius: 18px;
    padding: 16px;
}

.genetics-research-item-head {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    margin-bottom: 14px;
}

.genetics-research-item-icon-wrap {
    width: 118px;
    height: 118px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255,255,255,0.84), rgba(238,247,255,0.74), rgba(255,241,250,0.72));
    border: 1px solid rgba(216,184,238,0.58);
    box-shadow: inset 0 0 0 3px rgba(255,255,255,0.34), 0 6px 14px rgba(88,64,120,0.08);
}

.genetics-research-item-icon-wrap img {
    width: 106px;
    height: 106px;
    object-fit: contain;
    display: block;
}

.genetics-research-item-name {
    font-size: 19px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 4px;
}

.genetics-research-item-count {
    font-size: 13px;
    font-weight: 900;
    color: #7a4d73;
    margin-bottom: 8px;
}

.genetics-research-traits {
    display: grid;
    gap: 7px;
    margin: 10px 0;
}

.genetics-research-check {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.62);
    border: 1px solid rgba(216,184,238,0.45);
    border-radius: 10px;
    padding: 7px 9px;
}

.genetics-research-check input {
    margin: 0;
}

.genetics-achievement-progress {
    margin-top: 12px;
}

.genetics-achievement-progress-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    font-weight: 900;
    color: #6f6376;
    margin-bottom: 6px;
}

.genetics-achievement-bar {
    height: 12px;
    background: rgba(220,220,230,0.78);
    border-radius: 999px;
    overflow: hidden;
}

.genetics-achievement-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #8fc6d8, #f6cfe0);
}

.genetics-phase2-empty {
    text-align: center;
    color: #77717d;
    padding: 22px;
    font-weight: 700;
}

.events-page-note {
    text-align: center;
    font-size: 16px;
    line-height: 1.55;
}

@media (max-width: 900px) {
    .genetics-phase2-grid,
    .genetics-research-items,
    .genetics-project-form-grid {
        grid-template-columns: 1fr;
    }

    .genetics-project-target-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .genetics-project-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .genetics-lab-tabs,
    .genetics-project-target-grid {
        grid-template-columns: 1fr;
    }

    .genetics-research-item-head {
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 12px;
    }

    .genetics-research-item-icon-wrap {
        width: 92px;
        height: 92px;
    }

    .genetics-research-item-icon-wrap img {
        width: 82px;
        height: 82px;
    }
}


/* =====================================================
   Genetics Lab - Phase 3A / 3B / 3C
   ===================================================== */

.genetics-phase3-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.genetics-phase3-summary-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.82), rgba(238,247,255,0.66), rgba(255,241,250,0.64));
    border: 1px solid rgba(216,184,238,0.62);
    border-radius: 17px;
    padding: 15px;
    text-align: center;
}

.genetics-phase3-summary-card b {
    display: block;
    font-size: 25px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 5px;
}

.genetics-phase3-summary-card span {
    display: block;
    color: #75667d;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

.genetics-phase3-two-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.genetics-phase3-distribution-list {
    display: grid;
    gap: 8px;
}

.genetics-phase3-distribution-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 9px 11px;
    background: rgba(238,247,255,0.56);
    border: 1px solid rgba(216,184,238,0.42);
    border-radius: 12px;
    color: #5b5963;
    font-weight: 800;
}

.genetics-phase3-warning-box,
.genetics-phase3-crossbreed-note,
.genetics-phase3-info-note {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(216,184,238,0.58);
    line-height: 1.5;
    color: #5b5963;
    font-weight: 700;
}

.genetics-phase3-warning-box {
    background: rgba(255,245,238,0.82);
}

.genetics-phase3-crossbreed-note {
    margin-top: 0;
    margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(238,247,255,0.76), rgba(255,241,250,0.76));
}

.genetics-phase3-info-note {
    background: rgba(248,248,255,0.72);
}

.genetics-phase3-list {
    display: grid;
    gap: 9px;
}

.genetics-phase3-list-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 11px 12px;
    border-radius: 13px;
    border: 1px solid rgba(216,184,238,0.48);
    background: rgba(255,255,255,0.68);
}

.genetics-phase3-list-card b {
    color: #684b5d;
}

.genetics-phase3-list-card span,
.genetics-phase3-muted {
    color: #7b7183;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.genetics-phase3-gene-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.genetics-phase3-gene-card {
    background: rgba(255,255,255,0.70);
    border: 1px solid rgba(216,184,238,0.58);
    border-radius: 17px;
    padding: 14px;
}

.genetics-phase3-subsection {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(216,184,238,0.42);
}

.genetics-phase3-subtitle {
    font-size: 17px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 9px;
}

.genetics-phase3-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.genetics-phase3-chip {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(238,247,255,0.72);
    border: 1px solid rgba(216,184,238,0.52);
    color: #5b5963;
    font-size: 12px;
    font-weight: 800;
}

.genetics-phase3-timeline {
    display: grid;
    gap: 0;
}

.genetics-phase3-timeline-entry {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 10px;
    position: relative;
    padding: 0 0 16px 0;
}

.genetics-phase3-timeline-entry::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 14px;
    bottom: -2px;
    width: 2px;
    background: rgba(194,160,225,0.62);
}

.genetics-phase3-timeline-entry:last-child::before {
    display: none;
}

.genetics-phase3-timeline-dot {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    border-radius: 50%;
    background: linear-gradient(180deg, #8fc6d8, #f6cfe0);
    border: 2px solid white;
    box-shadow: 0 0 0 1px rgba(194,160,225,0.72);
    z-index: 1;
}

.genetics-phase3-timeline-title {
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 2px;
}

.genetics-phase3-trend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.genetics-phase3-plan-steps {
    display: grid;
    gap: 10px;
}

.genetics-phase3-plan-step {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    gap: 12px;
    align-items: start;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(216,184,238,0.52);
    background: rgba(255,255,255,0.66);
}

.genetics-phase3-plan-step-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: #684b5d;
    background: linear-gradient(180deg, rgba(238,247,255,0.95), rgba(255,241,250,0.95));
    border: 1px solid rgba(216,184,238,0.60);
}

.genetics-phase3-step-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(216,184,238,0.42);
}

.genetics-match-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.genetics-match-card {
    position: relative;
    background: rgba(255,255,255,0.76);
    border: 1px solid rgba(216,184,238,0.64);
    border-radius: 18px;
    padding: 15px;
    box-shadow: 0 6px 14px rgba(88,64,120,0.08);
}

.genetics-match-card img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    display: block;
    margin: 0 auto 8px auto;
}

.genetics-match-rank {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 9px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,241,250,0.96), rgba(238,247,255,0.92));
    border: 1px solid rgba(216,184,238,0.70);
    font-weight: 900;
    color: #7a4d73;
}

.genetics-match-name {
    text-align: center;
    font-size: 19px;
    font-weight: 900;
    color: #684b5d;
}

.genetics-match-score {
    margin: 10px 0;
    padding: 9px 11px;
    text-align: center;
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(232,247,255,0.68), rgba(255,241,250,0.68));
    font-weight: 900;
    color: #684b5d;
}

.genetics-match-good,
.genetics-match-risk {
    margin-top: 10px;
    padding: 10px 11px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}

.genetics-match-good {
    background: rgba(238,250,242,0.78);
    color: #4f7057;
}

.genetics-match-risk {
    background: rgba(255,245,238,0.82);
    color: #8a4f5f;
}

.genetics-phase3-empty {
    padding: 18px;
    text-align: center;
    color: #77717d;
    font-weight: 700;
}

@media (max-width: 900px) {
    .genetics-phase3-summary-grid,
    .genetics-phase3-two-column,
    .genetics-phase3-gene-grid,
    .genetics-phase3-step-form {
        grid-template-columns: 1fr;
    }

    .genetics-phase3-plan-step {
        grid-template-columns: 42px 1fr;
    }

    .genetics-phase3-plan-step > button {
        grid-column: 2;
        justify-self: start;
    }
}


/* =====================================================
   PURRPIXELS DESKTOP PEDIGREE 2.0
   Desktop-first view. A separate mobile pedigree view will be added later.
   ===================================================== */

.pedigree-desktop-page {
    max-width: 1500px;
    margin: 18px auto 42px auto;
}

.pedigree-header-card {
    background: linear-gradient(135deg, rgba(255,246,252,0.90), rgba(238,247,255,0.84), rgba(248,226,255,0.86));
    border: 1px solid rgba(216,184,238,0.76);
    border-radius: 24px;
    padding: 20px 22px;
    box-shadow: 0 10px 24px rgba(88,64,120,0.10);
    backdrop-filter: blur(6px);
    margin-bottom: 16px;
}

.pedigree-header-top {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
}

.pedigree-page-kicker {
    font-size: 13px;
    font-weight: 900;
    color: #8a5b91;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 5px;
}

.pedigree-page-title {
    font-size: 34px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 5px;
}

.pedigree-page-subtitle {
    color: #6d6273;
    font-weight: 700;
    line-height: 1.45;
}

.pedigree-rule-pill {
    flex: 0 0 auto;
    max-width: 320px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(216,184,238,0.72);
    border-radius: 16px;
    padding: 10px 13px;
    font-size: 13px;
    font-weight: 800;
    color: #68566f;
    line-height: 1.4;
}

.pedigree-summary-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(135px, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.pedigree-summary-card {
    background: rgba(255,255,255,0.68);
    border: 1px solid rgba(216,184,238,0.60);
    border-radius: 15px;
    padding: 11px 12px;
    min-height: 74px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pedigree-summary-card b {
    font-size: 19px;
    color: #5c4866;
    line-height: 1.15;
    margin-bottom: 4px;
}

.pedigree-summary-card span {
    font-size: 12px;
    font-weight: 800;
    color: #817387;
    line-height: 1.25;
}

.pedigree-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 14px 0;
}

.pedigree-tab-button {
    padding: 10px 17px;
    border-radius: 999px;
    font-weight: 900;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(216,184,238,0.70);
    color: #67546f;
    box-shadow: 0 4px 10px rgba(88,64,120,0.07);
}

.pedigree-tab-button.active {
    background: linear-gradient(180deg, rgba(255,237,247,0.98), rgba(232,247,255,0.95));
    border-color: rgba(194,160,225,0.90);
    color: #7a3f68;
}

.pedigree-tab-panel {
    background: rgba(255,255,255,0.64);
    border: 1px solid rgba(216,184,238,0.70);
    border-radius: 22px;
    box-shadow: 0 8px 20px rgba(88,64,120,0.08);
    backdrop-filter: blur(5px);
    overflow: hidden;
}

.pedigree-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    padding: 12px 14px;
    background: linear-gradient(90deg, rgba(232,247,255,0.72), rgba(255,241,250,0.76), rgba(238,225,255,0.70));
    border-bottom: 1px solid rgba(216,184,238,0.55);
}

.pedigree-toolbar-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pedigree-toolbar-label {
    font-size: 13px;
    font-weight: 900;
    color: #6a5871;
}

.pedigree-depth-select {
    border: 1px solid rgba(194,160,225,0.82);
    border-radius: 10px;
    padding: 7px 10px;
    background: rgba(255,255,255,0.92);
    color: #5a4664;
    font-weight: 800;
}

.pedigree-zoom-value {
    min-width: 56px;
    text-align: center;
    font-weight: 900;
    color: #684b5d;
}

.pedigree-tree-viewport {
    position: relative;
    height: 760px;
    overflow: auto;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,220,239,0.20), transparent 34%),
        radial-gradient(circle at 80% 20%, rgba(221,240,255,0.22), transparent 34%),
        rgba(255,255,255,0.24);
}

.pedigree-tree-canvas {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--pedigree-columns), 220px);
    gap: 72px;
    width: max-content;
    min-width: 100%;
    height: var(--pedigree-tree-height);
    padding: 34px 68px;
    transform-origin: top left;
}

.pedigree-tree-connections {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 1;
}

.pedigree-tree-column-wrap {
    position: relative;
    z-index: 2;
    min-width: 220px;
    height: calc(var(--pedigree-tree-height) - 68px);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.pedigree-tree-generation-title {
    flex: 0 0 auto;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 8px 8px 8px;
    text-align: center;
    font-size: 13px;
    font-weight: 900;
    color: #76566f;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.pedigree-tree-column {
    position: relative;
    min-width: 220px;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    gap: 12px;
}

.pedigree-tree-card {
    width: 205px;
    min-height: 104px;
    background: rgba(255,255,255,0.90);
    border: 1px solid rgba(208,196,221,0.86);
    border-radius: 16px;
    box-shadow: 0 5px 13px rgba(88,64,120,0.09);
    padding: 9px;
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 9px;
    align-items: center;
    position: relative;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.pedigree-tree-card.clickable {
    cursor: pointer;
}

.pedigree-tree-card.clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(88,64,120,0.14);
}

.pedigree-tree-card.gen-0 {
    width: 220px;
    min-height: 122px;
    grid-template-columns: 72px 1fr;
    border-width: 2px;
    background: linear-gradient(145deg, rgba(246,255,249,0.96), rgba(255,243,250,0.95));
}

.pedigree-tree-card.mother-branch {
    border-left: 5px solid rgba(225,155,189,0.82);
    background: linear-gradient(145deg, rgba(255,247,251,0.95), rgba(255,255,255,0.90));
}

.pedigree-tree-card.father-branch {
    border-left: 5px solid rgba(139,190,220,0.82);
    background: linear-gradient(145deg, rgba(244,251,255,0.95), rgba(255,255,255,0.90));
}

.pedigree-tree-card.unknown {
    grid-template-columns: 1fr;
    min-height: 70px;
    border-style: dashed;
    opacity: 0.62;
    background: rgba(255,255,255,0.48);
    box-shadow: none;
    text-align: center;
}

.pedigree-tree-card img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    border-radius: 10px;
    background: rgba(255,255,255,0.72);
}

.pedigree-tree-card.gen-0 img {
    width: 72px;
    height: 72px;
}

/* Generation 3+ is deliberately more compact so large pedigrees stay readable. */
.pedigree-tree-card.gen-3,
.pedigree-tree-card.gen-4,
.pedigree-tree-card.gen-5 {
    min-height: 88px;
    grid-template-columns: 48px 1fr;
    gap: 7px;
    padding: 7px;
}

.pedigree-tree-card.gen-3 img,
.pedigree-tree-card.gen-4 img,
.pedigree-tree-card.gen-5 img {
    width: 48px;
    height: 48px;
}

.pedigree-tree-card.gen-3 .pedigree-tree-card-name,
.pedigree-tree-card.gen-4 .pedigree-tree-card-name,
.pedigree-tree-card.gen-5 .pedigree-tree-card-name {
    font-size: 12px;
}

.pedigree-tree-card.gen-3 .pedigree-tree-card-meta,
.pedigree-tree-card.gen-4 .pedigree-tree-card-meta,
.pedigree-tree-card.gen-5 .pedigree-tree-card-meta {
    font-size: 10px;
    line-height: 1.22;
}

.pedigree-tree-card.gen-3 .pedigree-tree-card-classification,
.pedigree-tree-card.gen-4 .pedigree-tree-card-classification,
.pedigree-tree-card.gen-5 .pedigree-tree-card-classification {
    font-size: 9px;
    line-height: 1.15;
}

.pedigree-tree-card-relation {
    font-size: 10px;
    font-weight: 900;
    color: #9a879f;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
    line-height: 1.15;
}

.pedigree-tree-card-name {
    font-size: 14px;
    font-weight: 900;
    color: #6d3d64;
    line-height: 1.15;
    margin-bottom: 3px;
    overflow-wrap: anywhere;
}

.pedigree-tree-card-meta {
    font-size: 11px;
    color: #655c6d;
    font-weight: 700;
    line-height: 1.32;
}

.pedigree-tree-card-classification {
    margin-top: 4px;
    font-size: 10px;
    font-weight: 900;
    color: #4f7057;
    line-height: 1.2;
}

.pedigree-card-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 5px;
}

.pedigree-mini-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border-radius: 999px;
    padding: 3px 6px;
    font-size: 9px;
    font-weight: 900;
    background: rgba(255,255,255,0.82);
    border: 1px solid rgba(216,184,238,0.55);
    color: #6e5677;
}

.pedigree-mini-badge.repeat {
    background: rgba(255,239,247,0.92);
}

.pedigree-mini-badge.famous {
    background: rgba(255,249,218,0.92);
}

.pedigree-mini-badge.intro {
    background: rgba(235,248,255,0.94);
}

.pedigree-tree-footnote {
    padding: 10px 14px 13px 14px;
    font-size: 12px;
    font-weight: 700;
    color: #7b6c80;
    background: rgba(255,255,255,0.44);
    border-top: 1px solid rgba(216,184,238,0.40);
}

.pedigree-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 16px;
}

.pedigree-info-card {
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(216,184,238,0.62);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 5px 13px rgba(88,64,120,0.06);
}

.pedigree-info-card.full {
    grid-column: 1 / -1;
}

.pedigree-info-card-title {
    padding: 11px 14px;
    background: linear-gradient(90deg, rgba(232,247,255,0.82), rgba(255,241,250,0.86), rgba(238,225,255,0.82));
    border-bottom: 1px solid rgba(216,184,238,0.50);
    font-size: 17px;
    font-weight: 900;
    color: #684b5d;
}

.pedigree-info-card-body {
    padding: 14px;
    color: #615769;
}

.pedigree-distribution-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.pedigree-distribution-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) 2fr 58px;
    gap: 10px;
    align-items: center;
    font-size: 13px;
    font-weight: 800;
}

.pedigree-distribution-bar {
    height: 10px;
    border-radius: 999px;
    background: rgba(219,213,225,0.70);
    overflow: hidden;
}

.pedigree-distribution-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(143,198,216,0.86), rgba(246,207,224,0.90));
}

.pedigree-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pedigree-list-row {
    background: rgba(255,255,255,0.64);
    border: 1px solid rgba(216,184,238,0.45);
    border-radius: 13px;
    padding: 10px 11px;
}

.pedigree-list-row b {
    display: block;
    color: #684b5d;
    margin-bottom: 3px;
}

.pedigree-list-row span {
    font-size: 12px;
    font-weight: 700;
    color: #776b7c;
}

.pedigree-warning-box {
    background: rgba(255,247,224,0.74);
    border: 1px solid rgba(227,204,145,0.72);
    border-radius: 14px;
    padding: 11px 13px;
    line-height: 1.45;
    font-size: 13px;
    font-weight: 750;
    color: #725d3d;
    margin-bottom: 9px;
}

.pedigree-empty-state {
    color: #837889;
    font-style: italic;
    font-weight: 700;
    padding: 8px 0;
}

.pedigree-genetics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.pedigree-gene-card {
    background: rgba(255,255,255,0.70);
    border: 1px solid rgba(216,184,238,0.55);
    border-radius: 15px;
    padding: 11px;
}

.pedigree-gene-card-title {
    font-size: 14px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 4px;
}

.pedigree-gene-card-note {
    font-size: 11px;
    font-weight: 700;
    color: #84778a;
    margin-bottom: 8px;
}




/* ===== Stud Service palette fix: pink / blue / lilac only ===== */
.find-stud-hero {
    background: linear-gradient(
        135deg,
        rgba(255,241,250,0.94),
        rgba(232,247,255,0.92),
        rgba(238,225,255,0.92)
    ) !important;
    border-color: rgba(216,184,238,0.76) !important;
    box-shadow: 0 8px 18px rgba(88,64,120,0.10) !important;
}

.find-stud-pill,
.find-stud-filter-card,
.find-stud-list,
.find-stud-source {
    border-color: rgba(216,184,238,0.68) !important;
}

.find-stud-filter-card,
.find-stud-list {
    box-shadow: 0 7px 16px rgba(88,64,120,0.08) !important;
}

.find-stud-filter-grid input,
.find-stud-filter-grid select {
    border-color: rgba(194,160,225,0.68) !important;
}

.find-stud-tab {
    border-color: rgba(194,160,225,0.82) !important;
    border-bottom: none !important;
    background: linear-gradient(
        180deg,
        rgba(246,239,255,0.96),
        rgba(232,247,255,0.94)
    ) !important;
    color: #5a4664 !important;
}

.find-stud-tab.active {
    background: linear-gradient(
        180deg,
        rgba(255,241,250,0.98),
        rgba(238,225,255,0.94)
    ) !important;
    color: #7a2f58 !important;
}

.find-stud-head {
    background: linear-gradient(
        90deg,
        rgba(232,247,255,0.92) 0%,
        rgba(255,241,250,0.94) 50%,
        rgba(238,225,255,0.92) 100%
    ) !important;
    border-bottom-color: rgba(216,184,238,0.55) !important;
    color: #684b5d !important;
}

.find-stud-row {
    border-bottom-color: rgba(216,184,238,0.35) !important;
}

.find-stud-row:nth-child(even) {
    background: rgba(238,225,255,0.24) !important;
}

.find-stud-owner {
    color: #7b5d86 !important;
}

.find-stud-price {
    color: #6b4b76 !important;
}

.find-stud-page button {
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.98),
        rgba(246,239,255,0.92)
    ) !important;
    border-color: rgba(194,160,225,0.72) !important;
    color: #5a4664 !important;
}

.find-stud-page button:hover {
    background: linear-gradient(
        180deg,
        rgba(255,255,255,1),
        rgba(255,235,247,0.94)
    ) !important;
}


/* ===== Rainbow Bridge Memorial + Language Phase 1 ===== */
.landing-language-switch {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    margin-bottom: 10px;
}

.landing-language-button {
    min-width: 42px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(194,160,225,0.72);
    background: rgba(255,255,255,0.76);
    color: #684b5d;
    font-weight: 900;
}

.landing-language-button.active {
    background: linear-gradient(180deg, rgba(255,230,244,0.96), rgba(232,237,255,0.96));
    border-color: rgba(169,120,223,0.72);
    box-shadow: 0 4px 10px rgba(88,64,120,0.10);
}

.rainbow-memorial-page .special-cat-hero,
.rainbow-memorial-card,
.rainbow-tab-panel {
    border-color: rgba(216,184,238,0.76) !important;
}

.rainbow-memorial-page .special-cat-kicker {
    color: #8a5a91 !important;
}

.rainbow-quick-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 18px 0;
}

.rainbow-summary-card {
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(216,184,238,0.68);
    border-radius: 18px;
    padding: 14px;
    text-align: center;
    box-shadow: 0 5px 12px rgba(88,64,120,0.07);
}

.rainbow-summary-card strong {
    display: block;
    font-size: 24px;
    color: #684b5d;
    margin-bottom: 3px;
}

.rainbow-summary-card span {
    font-size: 12px;
    font-weight: 900;
    color: #7b6c80;
}

.rainbow-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 18px 0 14px;
}

.rainbow-tab-button {
    border: 1px solid rgba(194,160,225,0.82);
    border-radius: 999px;
    padding: 9px 15px;
    font-weight: 900;
    background: rgba(255,255,255,0.78);
    color: #5a4664;
}

.rainbow-tab-button.active {
    background: linear-gradient(180deg, rgba(255,241,250,0.96), rgba(232,247,255,0.94));
    color: #7a2f58;
    box-shadow: 0 4px 10px rgba(88,64,120,0.08);
}

.rainbow-tab-panel,
.rainbow-memorial-card {
    background: rgba(255,255,255,0.76);
    border: 1px solid rgba(216,184,238,0.68);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 7px 16px rgba(88,64,120,0.08);
    margin-bottom: 18px;
}

.rainbow-card-title {
    background: linear-gradient(90deg, rgba(232,247,255,0.92), rgba(255,241,250,0.94), rgba(238,225,255,0.92));
    border-bottom: 1px solid rgba(216,184,238,0.55);
    padding: 13px 16px;
    font-size: 21px;
    font-weight: 900;
    color: #684b5d;
}

.rainbow-card-body {
    padding: 16px;
}

.rainbow-two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.rainbow-note-text {
    line-height: 1.6;
    font-size: 16px;
    color: #5b5963;
    white-space: pre-wrap;
}

.rainbow-note-editor textarea {
    width: 100%;
    min-height: 130px;
    resize: vertical;
    border: 1px solid rgba(194,160,225,0.72);
    border-radius: 14px;
    padding: 12px;
    background: rgba(255,255,255,0.90);
    color: #5a4664;
    font: inherit;
}

.rainbow-flower-main {
    display: grid;
    grid-template-columns: 105px 1fr;
    gap: 16px;
    align-items: center;
}

.rainbow-flower-icon {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 52px;
    background: linear-gradient(135deg, rgba(255,235,247,0.96), rgba(235,241,255,0.94));
    border: 1px solid rgba(216,184,238,0.68);
}

.rainbow-flower-count {
    font-size: 30px;
    font-weight: 900;
    color: #7a2f58;
}

.rainbow-flower-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.rainbow-flower-chip {
    border: 1px solid rgba(216,184,238,0.62);
    background: rgba(255,255,255,0.76);
    border-radius: 999px;
    padding: 7px 11px;
    font-size: 13px;
    font-weight: 800;
    color: #6a4f63;
}

.rainbow-life-story {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.rainbow-life-event {
    display: grid;
    grid-template-columns: 150px 24px 1fr;
    gap: 12px;
    align-items: start;
    padding: 13px 0;
}

.rainbow-life-date {
    text-align: right;
    font-weight: 800;
    color: #7b6c80;
}

.rainbow-life-dot {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f5b8d7, #b8d9f5, #d4b8f5);
    border: 2px solid rgba(255,255,255,0.92);
    box-shadow: 0 0 0 2px rgba(194,160,225,0.55);
}

.rainbow-life-content {
    border-left: 2px solid rgba(216,184,238,0.45);
    padding-left: 16px;
    padding-bottom: 8px;
    min-height: 46px;
}

.rainbow-life-title {
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 3px;
}

.rainbow-family-actions {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.rainbow-family-grid,
.rainbow-descendant-grid,
.rainbow-remember-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.rainbow-family-card {
    background: rgba(255,255,255,0.68);
    border: 1px solid rgba(216,184,238,0.58);
    border-radius: 16px;
    padding: 12px;
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 12px;
    align-items: center;
}

.rainbow-family-card img {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.rainbow-family-name {
    font-weight: 900;
    color: #7a2f58;
    margin-bottom: 4px;
}

.rainbow-family-meta {
    font-size: 13px;
    line-height: 1.35;
    color: #5b5963;
}

.rainbow-legacy-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.rainbow-legacy-stat {
    background: rgba(255,255,255,0.68);
    border: 1px solid rgba(216,184,238,0.58);
    border-radius: 16px;
    padding: 14px;
    text-align: center;
}

.rainbow-legacy-stat strong {
    display: block;
    font-size: 24px;
    color: #684b5d;
    margin-bottom: 4px;
}

.rainbow-legacy-stat span {
    font-size: 12px;
    font-weight: 900;
    color: #7b6c80;
}

.rainbow-remember-card {
    min-height: 110px;
    background: linear-gradient(135deg, rgba(255,241,250,0.86), rgba(232,247,255,0.82), rgba(238,225,255,0.82));
    border: 1px solid rgba(216,184,238,0.62);
    border-radius: 18px;
    padding: 15px;
}

.rainbow-remember-icon {
    font-size: 30px;
    margin-bottom: 7px;
}

.rainbow-remember-title {
    font-weight: 900;
    color: #684b5d;
    line-height: 1.35;
}

.rainbow-ancestry-row {
    display: grid;
    grid-template-columns: 1fr 80px;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(216,184,238,0.35);
    font-weight: 800;
}

.rainbow-empty {
    color: #817387;
    font-style: italic;
    padding: 10px 0;
}

@media (max-width: 950px) {
    .rainbow-quick-summary,
    .rainbow-legacy-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .rainbow-two-column {
        grid-template-columns: 1fr;
    }
}



/* ===== Multi-step Registration Flow ===== */

.landing-auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
    padding: 5px;
    border-radius: 18px;
    background: rgba(255,255,255,0.50);
    border: 1px solid rgba(199,178,228,0.45);
}

.landing-auth-tab {
    margin: 0;
    min-height: 44px;
    border-radius: 14px;
    border: 1px solid transparent;
    background: transparent;
    font-weight: 900;
    color: #6b5a70;
}

.landing-auth-tab.active {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,229,255,0.92));
    border-color: rgba(199,178,228,0.70);
    color: #8a2f5a;
    box-shadow: 0 5px 12px rgba(90,74,99,0.09);
}

.landing-auth-panel {
    min-width: 0;
}

.landing-password-wrap {
    position: relative;
}

.landing-password-wrap input {
    padding-right: 50px;
}

.landing-password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border-radius: 11px;
    background: rgba(255,255,255,0.70);
    border: 1px solid rgba(199,178,228,0.52);
    display: flex;
    align-items: center;
    justify-content: center;
}

.landing-password-hint {
    margin-top: 5px;
    color: #796c7e;
    font-size: 12px;
    font-weight: 800;
}

.landing-terms-box {
    margin-top: 12px;
    padding: 12px 13px;
    border-radius: 15px;
    background: rgba(255,255,255,0.62);
    border: 1px solid rgba(199,178,228,0.48);
}

.landing-terms-row {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 9px;
    align-items: start;
    color: #5b5963;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.4;
}

.landing-terms-row input {
    width: 17px;
    height: 17px;
    margin: 2px 0 0 0;
    padding: 0;
}

.landing-inline-link {
    display: inline;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    color: #8a2f5a;
    text-decoration: underline;
    font: inherit;
    font-weight: 900;
    box-shadow: none;
}

.landing-inline-link:hover {
    background: none;
    transform: none;
}

.landing-privacy-note {
    margin-top: 9px;
    color: #746879;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.4;
}

.starter-registration-page {
    display: none;
    min-height: 100vh;
    padding: 32px 18px 50px;
}

.starter-registration-shell {
    max-width: 1180px;
    margin: 0 auto;
}

.starter-registration-topbar {
    display: grid;
    grid-template-columns: 150px 1fr 150px;
    gap: 18px;
    align-items: center;
    margin-bottom: 20px;
}

.starter-registration-logo {
    width: 150px;
    height: auto;
    filter: drop-shadow(0 8px 16px rgba(255,255,255,0.5));
}

.starter-registration-back {
    justify-self: end;
    border-radius: 999px;
    padding: 10px 15px;
    font-weight: 900;
}

.registration-progress {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 700px;
    margin: 0 auto;
}

.registration-progress-step {
    position: relative;
    text-align: center;
    padding: 10px 8px;
    border-radius: 16px;
    background: rgba(255,255,255,0.56);
    border: 1px solid rgba(199,178,228,0.48);
    color: #786b7c;
    font-size: 12px;
    font-weight: 900;
}

.registration-progress-step.active,
.registration-progress-step.done {
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,233,246,0.90));
    border-color: rgba(199,178,228,0.78);
    color: #8a2f5a;
    box-shadow: 0 5px 12px rgba(90,74,99,0.08);
}

.registration-progress-step.done::after {
    content: "✓";
    margin-left: 5px;
}

.starter-registration-card {
    background: linear-gradient(135deg, rgba(255,250,254,0.90), rgba(239,246,255,0.84), rgba(255,235,247,0.82));
    border: 1px solid rgba(216,184,238,0.76);
    border-radius: 30px;
    padding: 26px;
    box-shadow: 0 16px 36px rgba(88,64,120,0.13);
    backdrop-filter: blur(10px);
}

.starter-registration-heading {
    text-align: center;
    margin-bottom: 24px;
}

.starter-registration-kicker {
    display: inline-block;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(199,178,228,0.52);
    color: #8a2f5a;
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 9px;
}

.starter-registration-title {
    font-size: 34px;
    font-weight: 900;
    color: #62465b;
    margin-bottom: 8px;
}

.starter-registration-subtitle {
    max-width: 720px;
    margin: 0 auto;
    color: #5b5963;
    font-size: 16px;
    font-weight: 750;
    line-height: 1.5;
}

.starter-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.starter-choice-card {
    background: rgba(255,255,255,0.74);
    border: 1px solid rgba(199,178,228,0.60);
    border-radius: 24px;
    padding: 18px;
    text-align: center;
    box-shadow: 0 9px 20px rgba(90,74,99,0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.starter-choice-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 26px rgba(90,74,99,0.13);
    border-color: rgba(181,139,223,0.80);
}

.starter-choice-image-wrap {
    height: 230px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(232,247,255,0.70), rgba(255,241,250,0.70));
    margin-bottom: 14px;
    overflow: hidden;
}

.starter-choice-image {
    width: 220px;
    height: 220px;
    object-fit: contain;
}

.starter-preview-label {
    font-size: 11px;
    font-weight: 900;
    color: #88768d;
    margin-bottom: 7px;
}

.starter-choice-breed {
    font-size: 22px;
    font-weight: 900;
    color: #7a2f58;
    margin-bottom: 4px;
}

.starter-choice-color {
    font-size: 16px;
    font-weight: 900;
    color: #5b5963;
    margin-bottom: 11px;
}

.starter-choice-traits {
    display: flex;
    justify-content: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.starter-choice-trait {
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,0.82);
    border: 1px solid rgba(199,178,228,0.45);
    color: #6b5d70;
    font-size: 11px;
    font-weight: 900;
}

.starter-gene-details {
    margin: 10px 0 14px;
    padding: 0;
    max-width: none;
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(199,178,228,0.42);
    border-radius: 14px;
    text-align: left;
}

.starter-gene-details summary {
    cursor: pointer;
    padding: 10px 12px;
    color: #7a2f58;
    font-size: 12px;
    font-weight: 900;
}

.starter-gene-list {
    padding: 0 12px 11px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px 8px;
    color: #615567;
    font-size: 11px;
    font-weight: 800;
}

.starter-choice-button {
    width: 100%;
    min-height: 46px;
    border-radius: 15px;
    font-size: 15px;
    font-weight: 900;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,221,239,0.90));
    border: 1px solid rgba(199,178,228,0.72);
}

.starter-name-layout {
    display: grid;
    grid-template-columns: minmax(300px, 0.95fr) minmax(320px, 1.05fr);
    gap: 24px;
    align-items: center;
}

.starter-name-preview {
    text-align: center;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(232,247,255,0.68), rgba(255,241,250,0.68));
    border: 1px solid rgba(199,178,228,0.52);
    padding: 20px;
}

.starter-name-preview img {
    width: min(100%, 380px);
    height: 360px;
    object-fit: contain;
}

.starter-name-preview-breed {
    font-size: 24px;
    font-weight: 900;
    color: #7a2f58;
}

.starter-name-preview-meta {
    margin-top: 6px;
    color: #65586a;
    font-weight: 800;
}

.starter-name-form {
    background: rgba(255,255,255,0.70);
    border: 1px solid rgba(199,178,228,0.52);
    border-radius: 24px;
    padding: 24px;
}

.starter-name-form-title {
    font-size: 28px;
    font-weight: 900;
    color: #62465b;
    margin-bottom: 7px;
}

.starter-name-form-text {
    color: #5b5963;
    font-weight: 750;
    line-height: 1.5;
    margin-bottom: 18px;
}

.starter-name-form input {
    width: 100%;
    border: 1px solid rgba(199,178,228,0.72);
    border-radius: 15px;
    background: rgba(238,246,255,0.82);
    padding: 13px 14px;
    font-size: 16px;
}

.starter-name-actions {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 10px;
    margin-top: 14px;
}

.starter-name-actions button {
    min-height: 48px;
    border-radius: 15px;
    font-weight: 900;
}

.starter-registration-message {
    min-height: 20px;
    margin-top: 10px;
    color: #8a2f5a;
    font-size: 13px;
    font-weight: 900;
}

.starter-welcome-wrap {
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}

.starter-welcome-image {
    width: min(100%, 390px);
    height: 370px;
    object-fit: contain;
    margin: 6px auto 0;
    display: block;
}

.starter-welcome-title {
    font-size: 38px;
    font-weight: 900;
    color: #62465b;
    margin-bottom: 10px;
}

.starter-welcome-text {
    font-size: 18px;
    color: #5b5963;
    font-weight: 800;
    margin-bottom: 18px;
}

.starter-welcome-text strong {
    color: #8a2f5a;
}

.starter-welcome-button {
    min-width: 240px;
    min-height: 52px;
    border-radius: 17px;
    font-size: 16px;
    font-weight: 900;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(231,249,236,0.92));
    border: 1px solid rgba(168,203,183,0.78);
}

@media (max-width: 950px) {
    .starter-registration-topbar {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .starter-registration-logo {
        margin: 0 auto;
    }

    .starter-registration-back {
        justify-self: center;
    }

    .starter-choice-grid,
    .starter-name-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .starter-registration-page {
        padding: 18px 10px 34px;
    }

    .starter-registration-card {
        padding: 17px;
        border-radius: 22px;
    }

    .starter-registration-title {
        font-size: 28px;
    }

    .registration-progress-step {
        font-size: 10px;
        padding: 8px 5px;
    }

    .starter-choice-image-wrap {
        height: 200px;
    }

    .starter-choice-image {
        width: 190px;
        height: 190px;
    }

    .starter-name-preview img,
    .starter-welcome-image {
        height: 280px;
    }

    .starter-name-actions {
        grid-template-columns: 1fr;
    }
}




/* =====================================================
   MY PAGE REFRESH
   Cleaner personal profile layout, automatic breeding
   focus, four-item activity feed and richer friend rows.
===================================================== */

.breeder-profile-top-card {
    grid-template-columns: 200px minmax(0, 1fr);
    padding: 24px 28px;
    gap: 26px;
}

.breeder-profile-name-row {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
}

.breeder-profile-status-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.breeder-profile-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(218,188,238,0.72);
    background: rgba(255,255,255,0.78);
    color: #65475f;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: 0 5px 12px rgba(86,58,112,0.06);
}

.breeder-profile-status-pill.vip {
    background: linear-gradient(180deg, rgba(255,252,230,0.96), rgba(255,230,246,0.88));
    color: #8a2f5a;
}

.breeder-profile-status-pill.online {
    background: linear-gradient(180deg, rgba(246,255,250,0.96), rgba(230,249,238,0.90));
    color: #47785b;
}

.breeder-online-value {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #47785b;
    font-weight: 900;
}

.breeder-online-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #5ccf87;
    box-shadow: 0 0 0 4px rgba(92,207,135,0.15);
    flex: 0 0 auto;
}

.breeder-overview-card {
    margin-bottom: 18px;
}

.breeder-clean-card-title-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.breeder-card-mini-action {
    min-height: auto !important;
    margin: 0 !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    font-size: 12px;
}

.breeder-presentation-view {
    min-height: 110px;
    padding: 4px 2px;
    white-space: normal;
}

.breeder-presentation-edit-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

#presentationViewArea[hidden],
#presentationEditArea[hidden] {
    display: none !important;
}

/* Breeding Focus */

.breeder-focus-wrap {
    display: grid;
    gap: 16px;
}

.breeder-focus-group {
    display: grid;
    gap: 8px;
}

.breeder-focus-label {
    font-size: 12px;
    font-weight: 900;
    color: #7a2f58;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.breeder-focus-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.breeder-focus-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(218,188,238,0.68);
    border-radius: 999px;
    padding: 8px 11px;
    background: rgba(255,255,255,0.80);
    color: #5b5364;
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 4px 10px rgba(86,58,112,0.05);
}

.breeder-focus-chip.breed {
    background: linear-gradient(180deg, rgba(246,252,255,0.96), rgba(235,245,255,0.86));
}

.breeder-focus-chip.color {
    background: linear-gradient(180deg, rgba(255,252,255,0.96), rgba(255,239,248,0.86));
}

.breeder-focus-chip small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    border-radius: 999px;
    padding: 0 7px;
    background: rgba(255,255,255,0.90);
    color: #8a2f5a;
    font-size: 11px;
    font-weight: 900;
}

.breeder-focus-note {
    color: #7b7183;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

/* Recent Activity: server already returns max four items */

.breeder-activity-list {
    display: grid;
}

.breeder-activity-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(218,188,238,0.44);
    background: rgba(255,255,255,0.52);
}

.breeder-activity-row:nth-child(even) {
    background: rgba(255,242,250,0.46);
}

.breeder-activity-row:last-child {
    border-bottom: none;
}

.breeder-activity-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(242,235,255,0.90));
    border: 1px solid rgba(218,188,238,0.64);
    font-size: 18px;
}

.breeder-activity-main {
    min-width: 0;
}

.breeder-activity-title {
    color: #7a2f58;
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 2px;
}

.breeder-activity-text {
    color: #5b5364;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

.breeder-activity-date {
    color: #817487;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

/* Friends: names remain prominent and visible */

.breeder-friend-list {
    display: grid;
}

.breeder-friend-row {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(218,188,238,0.44);
    background: rgba(255,255,255,0.52);
}

.breeder-friend-row:nth-child(even) {
    background: rgba(255,242,250,0.46);
}

.breeder-friend-row:last-child {
    border-bottom: none;
}

.breeder-friend-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(240,244,255,0.88));
    border: 1px solid rgba(218,188,238,0.66);
    font-size: 18px;
}

.breeder-friend-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.breeder-friend-info {
    min-width: 0;
}

.breeder-friend-info .friend-name-link {
    display: block;
    min-height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    text-align: left;
    font-size: 14px;
    font-weight: 900;
    color: #7a2f58;
}

.breeder-friend-info .friend-name-link:hover {
    text-decoration: underline;
    transform: none;
}

.breeder-friend-cattery {
    margin-top: 3px;
    color: #6f6178;
    font-size: 12px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.breeder-friend-pages {
    padding: 10px 14px 14px;
}

.breeder-greetings-total {
    min-height: 72px;
}

@media (max-width: 850px) {
    .breeder-profile-top-card {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .breeder-profile-name-row {
        flex-direction: column;
        align-items: center;
    }

    .breeder-profile-status-row {
        justify-content: center;
    }

    .breeder-activity-row {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .breeder-activity-date {
        grid-column: 2;
    }
}


/* ===== VIP profile frame overlay ===== */

.breeder-profile-avatar-stage {
    position: relative;
    width: 138px;
    height: 138px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.breeder-profile-avatar-stage.vip {
    width: 176px;
    height: 176px;
}

/*
    VIP avatar and frame are centered from the exact same midpoint.
    This stays centered even when you later change the sizes.
*/
.breeder-profile-avatar-stage.vip .breeder-profile-avatar {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 124px;
    height: 124px;
    padding: 5px;
    z-index: 1;
}

.breeder-profile-vip-frame {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 180px;
    object-fit: contain;
    z-index: 3;
    pointer-events: none;
    user-select: none;
}



/* ===== My Page Featured Cats ===== */

.breeder-featured-card {
    margin-top: 20px !important;
}

.breeder-featured-intro {
    color: #6a5d70;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    margin-bottom: 14px;
}

.breeder-featured-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.breeder-featured-cat,
.breeder-featured-empty-slot {
    min-width: 0;
    min-height: 310px;
    background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(247,239,255,0.68));
    border: 1px solid rgba(218,188,238,0.68);
    border-radius: 20px;
    padding: 14px;
    text-align: center;
    box-shadow: 0 8px 18px rgba(86,58,112,0.07);
}

.breeder-featured-cat-image-wrap {
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(238,247,255,0.70), rgba(255,241,250,0.62));
    border: 1px solid rgba(218,188,238,0.48);
    border-radius: 16px;
    margin-bottom: 12px;
    overflow: hidden;
}

.breeder-featured-cat-image-wrap img {
    width: 175px;
    height: 175px;
    object-fit: contain;
    display: block;
}

.breeder-featured-cat-name {
    width: 100%;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 5px 0 !important;
    color: #8a2f5a !important;
    font-size: 18px;
    font-weight: 950;
    text-align: center;
}

.breeder-featured-cat-name:hover {
    transform: none !important;
    text-decoration: underline;
}

.breeder-featured-cat-meta {
    color: #5b5364;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.45;
}

.breeder-featured-cat-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.breeder-featured-cat-actions button {
    margin: 0 !important;
    padding: 7px 12px !important;
    font-size: 12px !important;
}

.breeder-featured-empty-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-style: dashed;
}

.breeder-featured-empty-icon {
    font-size: 44px;
    margin-bottom: 10px;
    opacity: 0.72;
}

.breeder-featured-empty-title {
    color: #7a2f58;
    font-size: 17px;
    font-weight: 950;
    margin-bottom: 5px;
}

.breeder-featured-empty-note {
    color: #6a5d70;
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 12px;
}

.profile-cat-picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(55, 39, 72, 0.42);
    backdrop-filter: blur(5px);
}

.profile-cat-picker-modal {
    width: min(1100px, 96vw);
    max-height: 88vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(255,252,255,0.98), rgba(244,239,255,0.96));
    border: 1px solid rgba(218,188,238,0.90);
    border-radius: 26px;
    box-shadow: 0 24px 60px rgba(55,39,72,0.28);
}

.profile-cat-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background: linear-gradient(90deg, rgba(238,247,255,0.96), rgba(255,241,250,0.98), rgba(244,232,255,0.96));
    border-bottom: 1px solid rgba(218,188,238,0.68);
}

.profile-cat-picker-title {
    color: #65475f;
    font-size: 24px;
    font-weight: 950;
}

.profile-cat-picker-body {
    overflow-y: auto;
    padding: 18px;
}

.profile-cat-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
}

.profile-cat-picker-choice {
    background: rgba(255,255,255,0.80);
    border: 1px solid rgba(218,188,238,0.70);
    border-radius: 18px;
    padding: 12px;
    text-align: center;
    box-shadow: 0 7px 16px rgba(86,58,112,0.07);
}

.profile-cat-picker-choice img {
    width: 145px;
    height: 145px;
    object-fit: contain;
    display: block;
    margin: 0 auto 8px auto;
}

.profile-cat-picker-choice-name {
    color: #8a2f5a;
    font-size: 16px;
    font-weight: 950;
    margin-bottom: 4px;
}

.profile-cat-picker-choice-meta {
    color: #5b5364;
    font-size: 12px;
    line-height: 1.4;
    min-height: 34px;
    margin-bottom: 8px;
}

.profile-cat-picker-selected-note {
    color: #8a5a91;
    font-size: 11px;
    font-weight: 900;
    min-height: 16px;
    margin-bottom: 5px;
}

@media (max-width: 850px) {
    .breeder-featured-grid {
        grid-template-columns: 1fr;
    }

    .breeder-featured-cat,
    .breeder-featured-empty-slot {
        min-height: auto;
    }

    .profile-cat-picker-overlay {
        padding: 10px;
    }
}


/* ===== Cat Detail Page Dream Color Refresh + Collapsible Training ===== */

.cat-detail-page-clean .side-panel,
.cat-detail-page-clean .breeding-beauty-panel,
.cat-detail-page-clean .timeline-compact,
.cat-detail-page-clean .purr-card,
.cat-detail-page-clean .genetics-inline-panel {
    background: linear-gradient(135deg, rgba(255,246,252,0.88), rgba(238,247,255,0.82), rgba(248,226,255,0.82));
    border: 1px solid rgba(216,184,238,0.76);
    box-shadow: 0 10px 24px rgba(88,64,120,0.10);
    backdrop-filter: blur(6px);
}

.cat-detail-page-clean .side-panel-title,
.cat-detail-page-clean .training-summary,
.cat-detail-page-clean .breeding-beauty-header,
.cat-detail-page-clean .timeline-compact-title,
.cat-detail-page-clean .genetics-inline-panel summary {
    background: var(--dream-header);
    border-bottom: 1px solid rgba(216,184,238,0.58);
    color: #684b5d;
}

.cat-detail-page-clean .tile-grid {
    background: rgba(255,255,255,0.24);
}

.cat-detail-page-clean .action-tile {
    background: rgba(255,255,255,0.58);
    border-right: 1px solid rgba(216,184,238,0.42);
    border-bottom: 1px solid rgba(216,184,238,0.42);
    color: #5a4664;
}

.cat-detail-page-clean .action-tile:hover {
    background: rgba(255,247,251,0.92);
    box-shadow: inset 0 0 0 1px rgba(216,184,238,0.42);
}

.cat-detail-page-clean .action-tile.disabled {
    background: rgba(214,210,220,0.42);
    color: #9a8d9f;
    filter: grayscale(100%);
    opacity: 0.62;
}

.cat-detail-page-clean .purr-section,
.cat-detail-page-clean .breeding-status-card,
.cat-detail-page-clean .breeding-action-card {
    background: rgba(255,255,255,0.48);
    border-color: rgba(216,184,238,0.45);
}

.cat-detail-page-clean .cat-quick-actions button,
.cat-detail-page-clean button {
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,226,255,0.78));
    border-color: rgba(194,160,225,0.82);
    color: #5a4664;
}

.cat-detail-page-clean .cat-quick-actions button:hover,
.cat-detail-page-clean button:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,220,239,0.82));
}

.cat-detail-page-clean .training-side-panel {
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.cat-detail-page-clean .training-side-panel > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    align-items: center;
    text-align: left;
}

.cat-detail-page-clean .training-side-panel > summary::-webkit-details-marker {
    display: none;
}

.training-summary-main {
    font-size: 20px;
    font-weight: 900;
}

.training-summary-status {
    font-size: 12px;
    font-weight: 900;
    color: #8a5a91;
    background: rgba(255,255,255,0.70);
    border: 1px solid rgba(216,184,238,0.56);
    border-radius: 999px;
    padding: 5px 9px;
    white-space: nowrap;
}

.training-summary-toggle {
    font-size: 18px;
    font-weight: 900;
    transition: transform 0.15s ease;
}

.training-side-panel[open] .training-summary-toggle {
    transform: rotate(180deg);
}

.training-side-panel:not([open]) {
    border-radius: 18px;
}

.training-side-panel:not([open]) .tile-grid {
    display: none;
}

.cat-detail-page-clean .timeline-compact .purr-section {
    border-bottom: none;
}

.cat-detail-page-clean .breeding-compact .breeding-beauty-header,
.cat-detail-page-clean .timeline-compact-title {
    border-color: rgba(216,184,238,0.58);
}


/* ===== Compact Breeding Panel V2 ===== */

.breeding-compact-panel {
    margin: 0 0 18px 0 !important;
    background: linear-gradient(135deg, rgba(255,246,252,0.88), rgba(238,247,255,0.78), rgba(248,226,255,0.78)) !important;
    border: 1px solid rgba(216,184,238,0.76) !important;
    border-radius: 22px !important;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(88,64,120,0.10) !important;
    backdrop-filter: blur(6px);
}

.breeding-compact-summary {
    width: 100%;
    min-height: 74px;
    margin: 0 !important;
    padding: 13px 15px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(216,184,238,0.56) !important;
    border-radius: 0 !important;
    background: var(--dream-header) !important;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    align-items: center;
    text-align: left;
    box-shadow: none !important;
}

.breeding-compact-summary:hover {
    background: linear-gradient(90deg, rgba(255,241,250,0.96), rgba(238,247,255,0.94), rgba(245,232,255,0.96)) !important;
    transform: none !important;
}

.breeding-compact-summary-main {
    min-width: 0;
}

.breeding-compact-title {
    display: block;
    font-size: 22px;
    font-weight: 900;
    color: #684b5d;
    line-height: 1.15;
}

.breeding-compact-subtitle {
    display: block;
    margin-top: 3px;
    color: #5b5963;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.breeding-compact-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(216,184,238,0.66);
    background: rgba(255,255,255,0.76);
    font-size: 12px;
    font-weight: 900;
    color: #6b4b76;
    white-space: nowrap;
}

.breeding-compact-badge.ready {
    color: #6d4a78;
    background: linear-gradient(180deg, rgba(255,241,250,0.94), rgba(232,247,255,0.90));
}

.breeding-compact-badge.locked {
    color: #9b8ea0;
    background: rgba(255,255,255,0.56);
}

.breeding-compact-chevron {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.66);
    border: 1px solid rgba(216,184,238,0.62);
    color: #684b5d;
    font-size: 20px;
    font-weight: 900;
}

.breeding-compact-body {
    padding: 12px 14px 14px 14px;
}

.breeding-quick-actions,
.breeding-more-actions-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 9px !important;
    background: transparent !important;
}

.breeding-quick-actions {
    margin-bottom: 10px;
}

.breeding-more-actions-grid {
    margin-top: 10px;
}

.breeding-compact-panel .breeding-action-card.breeding-action-pill {
    min-height: 58px !important;
    width: 100%;
    margin: 0 !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(216,184,238,0.62) !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,0.66) !important;
    display: grid !important;
    grid-template-columns: 38px 1fr;
    gap: 9px;
    align-items: center;
    text-align: left;
    color: #5b4b61;
    box-shadow: 0 5px 12px rgba(88,64,120,0.06) !important;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.breeding-compact-panel .breeding-action-card.breeding-action-pill:hover:not(:disabled) {
    transform: translateY(-1px);
    background: rgba(255,247,251,0.92) !important;
    box-shadow: 0 7px 15px rgba(88,64,120,0.10) !important;
}

.breeding-compact-panel .breeding-action-card.breeding-action-pill.primary {
    background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(238,247,255,0.74)) !important;
}

.breeding-compact-panel .breeding-action-card.breeding-action-pill.disabled,
.breeding-compact-panel .breeding-action-card.breeding-action-pill:disabled {
    opacity: 0.52;
    filter: grayscale(100%);
    cursor: not-allowed;
    background: rgba(230,226,234,0.56) !important;
    box-shadow: none !important;
}

.breeding-compact-panel .breeding-action-card.breeding-action-pill img {
    width: 38px !important;
    height: 38px !important;
    object-fit: contain;
    margin: 0 !important;
}

.breeding-action-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.breeding-compact-panel .breeding-action-title {
    font-size: 14px !important;
    font-weight: 900;
    color: #684b5d;
    line-height: 1.15;
}

.breeding-compact-panel .breeding-action-note {
    font-size: 11px !important;
    color: #75667d;
    font-weight: 700;
    line-height: 1.2;
}

.breeding-more-button {
    width: 100%;
    margin: 0 !important;
    padding: 9px 12px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(216,184,238,0.62) !important;
    background: rgba(255,255,255,0.56) !important;
    color: #684b5d !important;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-shadow: none !important;
}

.breeding-more-button:hover {
    background: rgba(255,247,251,0.86) !important;
}

.breeding-more-wrap {
    display: none;
    margin-top: 10px;
}

.breeding-more-wrap.open {
    display: block;
}

.breeding-status-card-compact {
    margin: 0 0 10px 0 !important;
    padding: 12px !important;
    border-color: rgba(216,184,238,0.62) !important;
    background: rgba(255,255,255,0.58) !important;
}

.breeding-status-card-compact .breeding-status-title {
    margin-bottom: 7px;
    color: #7a2f58;
}

.breeding-status-card-compact .breeding-status-grid {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    font-size: 13px !important;
}

.breeding-compact-panel .breeding-dynamic-box {
    margin-top: 10px;
    background: rgba(255,255,255,0.62);
    border-color: rgba(216,184,238,0.62);
}

@media (max-width: 520px) {
    .breeding-compact-summary {
        grid-template-columns: 1fr auto;
    }

    .breeding-compact-badge {
        display: none;
    }

    .breeding-quick-actions,
    .breeding-more-actions-grid {
        grid-template-columns: 1fr !important;
    }
}



/* ===== Final Public Cat + Pedigree Dream Polish ===== */

.public-sale-bar,
.public-cat-page .public-side-card,
.public-cat-page .public-cat-status-card,
.public-cat-page .public-info-card .purr-card {
    background: linear-gradient(
        135deg,
        rgba(255, 246, 252, 0.88),
        rgba(238, 247, 255, 0.82),
        rgba(248, 226, 255, 0.84)
    ) !important;
    border: 1px solid rgba(216, 184, 238, 0.76) !important;
    box-shadow: 0 10px 24px rgba(88, 64, 120, 0.10) !important;
    backdrop-filter: blur(6px);
}

.public-cat-page .public-side-title {
    background: linear-gradient(
        90deg,
        rgba(232, 247, 255, 0.94) 0%,
        rgba(255, 241, 250, 0.95) 52%,
        rgba(238, 225, 255, 0.94) 100%
    ) !important;
    border-bottom: 1px solid rgba(216, 184, 238, 0.56) !important;
    color: #684b5d !important;
}

.public-owner-avatar {
    background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(248,240,255,0.58)) !important;
    border: 1px solid rgba(216,184,238,0.66) !important;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,0.34);
}

.public-cat-page .public-list-link {
    border-bottom: 1px solid rgba(216,184,238,0.42) !important;
    color: #7a2f58 !important;
}

.public-cat-page .public-list-link:hover {
    background: rgba(255, 241, 250, 0.62) !important;
}

.public-cat-page button:not(.purr-tab):not(.link-button),
.public-sale-bar button,
.public-back-sale {
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,232,255,0.86)) !important;
    border: 1px solid rgba(194,160,225,0.78) !important;
    color: #5a4664 !important;
}

.public-cat-page button:not(.purr-tab):not(.link-button):hover,
.public-sale-bar button:hover,
.public-back-sale:hover {
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,232,246,0.90)) !important;
}

.public-cat-mini-stat-grid {
    display: grid;
    gap: 10px;
    margin: 0 0 12px 0;
}

.public-cat-mini-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.66);
    border: 1px solid rgba(216,184,238,0.52);
    color: #5a4664;
}

.public-cat-mini-stat span {
    font-weight: 900;
    color: #7a2f58;
}

.public-cat-mini-stat b {
    font-weight: 900;
    color: #4f4a5e;
    white-space: nowrap;
}

.public-cat-page .purr-section {
    border-bottom: 1px solid rgba(216,184,238,0.44) !important;
}

.public-cat-page .purr-line {
    border-bottom: 1px solid rgba(216,184,238,0.32) !important;
}

.pedigree-tree-card-classification:empty {
    display: none;
}

.pedigree-tree-card.gen-2 .pedigree-tree-card-classification,
.pedigree-tree-card.gen-3 .pedigree-tree-card-classification,
.pedigree-tree-card.gen-4 .pedigree-tree-card-classification,
.pedigree-tree-card.gen-5 .pedigree-tree-card-classification {
    display: none !important;
}




/* ===== Breed for Cats in Need Impact Page ===== */
.cats-need-page {
    max-width: 1220px;
    margin: 18px auto 44px auto;
}

.cats-need-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 24px;
    align-items: center;
    padding: 28px;
    border-radius: 30px;
    background:
        radial-gradient(circle at 16% 18%, rgba(255,217,238,0.72), transparent 34%),
        radial-gradient(circle at 84% 22%, rgba(219,239,255,0.78), transparent 32%),
        linear-gradient(135deg, rgba(255,250,254,0.90), rgba(238,247,255,0.82), rgba(248,226,255,0.86));
    border: 1px solid rgba(216,184,238,0.80);
    box-shadow: 0 14px 34px rgba(88,64,120,0.13);
    backdrop-filter: blur(7px);
    margin-bottom: 20px;
}

.cats-need-hero::after {
    content: "";
    position: absolute;
    inset: auto -80px -90px auto;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255,214,236,0.35);
    filter: blur(3px);
    pointer-events: none;
}

.cats-need-kicker {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(216,184,238,0.58);
    color: #8a4f6d;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}

.cats-need-title {
    font-size: 42px;
    line-height: 1.04;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
}

.cats-need-subtitle {
    color: #5b5963;
    font-size: 17px;
    line-height: 1.55;
    font-weight: 750;
    max-width: 780px;
}

.cats-need-note-pill {
    display: inline-flex;
    margin-top: 14px;
    padding: 9px 13px;
    border-radius: 999px;
    background: rgba(255,255,255,0.76);
    border: 1px solid rgba(216,184,238,0.56);
    color: #684b5d;
    font-size: 13px;
    font-weight: 900;
}

.cats-need-hero-icon {
    width: 210px;
    min-height: 210px;
    border-radius: 42px;
    background: linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,241,250,0.62));
    border: 1px solid rgba(216,184,238,0.64);
    box-shadow: inset 0 0 0 4px rgba(255,255,255,0.34), 0 10px 22px rgba(88,64,120,0.10);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #7a2f58;
    font-weight: 900;
    text-align: center;
    position: relative;
    z-index: 1;
}

.cats-need-hero-icon span:first-child {
    font-size: 66px;
    filter: drop-shadow(0 5px 10px rgba(88,64,120,0.12));
}

.cats-need-impact-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.cats-need-impact-card {
    position: relative;
    overflow: hidden;
    min-height: 142px;
    border-radius: 24px;
    padding: 17px 16px;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(216,184,238,0.70);
    box-shadow: 0 9px 20px rgba(88,64,120,0.09);
    backdrop-filter: blur(6px);
}

.cats-need-impact-card::after {
    content: "";
    position: absolute;
    right: -28px;
    bottom: -32px;
    width: 105px;
    height: 105px;
    border-radius: 50%;
    background: rgba(232,247,255,0.72);
}

.cats-need-impact-icon {
    font-size: 26px;
    margin-bottom: 8px;
}

.cats-need-impact-number {
    position: relative;
    z-index: 1;
    font-size: 29px;
    font-weight: 900;
    color: #7a2f58;
    margin-bottom: 3px;
}

.cats-need-impact-label {
    position: relative;
    z-index: 1;
    color: #6d5e72;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.32;
}

.cats-need-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 18px;
    align-items: start;
}

.cats-need-card {
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(216,184,238,0.70);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 9px 20px rgba(88,64,120,0.08);
    backdrop-filter: blur(6px);
    margin-bottom: 18px;
}

.cats-need-card-title {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 15px 18px;
    background: linear-gradient(90deg, rgba(232,247,255,0.92), rgba(255,241,250,0.94), rgba(238,225,255,0.92));
    border-bottom: 1px solid rgba(216,184,238,0.55);
    color: #684b5d;
    font-size: 22px;
    font-weight: 900;
}

.cats-need-card-body {
    padding: 18px;
    color: #5b5963;
    font-weight: 700;
    line-height: 1.52;
}

.cats-need-month-box {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 18px;
    align-items: center;
}

.cats-need-month-circle {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    background: conic-gradient(from 180deg, rgba(246,207,224,0.92), rgba(143,198,216,0.92), rgba(238,225,255,0.92), rgba(246,207,224,0.92));
    border: 8px solid rgba(255,255,255,0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #684b5d;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(88,64,120,0.10);
}

.cats-need-progress-wrap {
    margin-top: 13px;
}

.cats-need-progress-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    font-weight: 900;
    color: #75667d;
    margin-bottom: 6px;
}

.cats-need-progress-bar {
    height: 16px;
    border-radius: 999px;
    background: rgba(224,218,232,0.78);
    border: 1px solid rgba(216,184,238,0.50);
    overflow: hidden;
}

.cats-need-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(143,198,216,0.95), rgba(246,207,224,0.96), rgba(199,170,241,0.96));
}

.cats-need-breed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.cats-need-breed-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.80), rgba(255,241,250,0.54));
    border: 1px solid rgba(216,184,238,0.58);
    border-radius: 20px;
    padding: 15px;
    box-shadow: 0 6px 14px rgba(88,64,120,0.06);
}

.cats-need-breed-top {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.cats-need-breed-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(255,255,255,0.74);
    border: 1px solid rgba(216,184,238,0.58);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.cats-need-breed-name {
    font-size: 18px;
    font-weight: 900;
    color: #7a2f58;
    line-height: 1.16;
}

.cats-need-breed-status {
    display: inline-flex;
    width: fit-content;
    margin-top: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(238,247,255,0.88);
    border: 1px solid rgba(216,184,238,0.54);
    color: #6a4f63;
    font-size: 11px;
    font-weight: 900;
}

.cats-need-breed-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin: 12px 0;
}

.cats-need-mini-stat {
    background: rgba(255,255,255,0.68);
    border: 1px solid rgba(216,184,238,0.45);
    border-radius: 14px;
    padding: 9px;
    text-align: center;
}

.cats-need-mini-stat b {
    display: block;
    font-size: 18px;
    color: #684b5d;
}

.cats-need-mini-stat span {
    display: block;
    font-size: 11px;
    color: #75667d;
    font-weight: 900;
}

.cats-need-steps {
    display: grid;
    gap: 12px;
}

.cats-need-step {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 12px;
    align-items: start;
    background: rgba(255,255,255,0.62);
    border: 1px solid rgba(216,184,238,0.48);
    border-radius: 17px;
    padding: 12px;
}

.cats-need-step-number {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255,241,250,0.96), rgba(232,247,255,0.94));
    border: 1px solid rgba(216,184,238,0.62);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: #7a2f58;
}

.cats-need-side-stack {
    display: grid;
    gap: 18px;
}

.cats-need-your-impact {
    text-align: center;
}

.cats-need-your-impact strong {
    display: block;
    font-size: 36px;
    color: #7a2f58;
    margin-bottom: 4px;
}

.cats-need-transparency-button {
    width: 100%;
    margin-top: 12px;
    border-radius: 999px;
    font-weight: 900;
    padding: 11px 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,232,255,0.90));
    border: 1px solid rgba(216,184,238,0.82);
    color: #684b5d;
}

.cats-need-archive-table {
    display: grid;
    gap: 10px;
}

.cats-need-archive-row {
    display: grid;
    grid-template-columns: 120px 1fr 120px 145px;
    gap: 12px;
    align-items: center;
    background: rgba(255,255,255,0.66);
    border: 1px solid rgba(216,184,238,0.48);
    border-radius: 16px;
    padding: 12px;
}

.cats-need-archive-row.header {
    background: rgba(232,247,255,0.66);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #75667d;
}

.cats-need-status-pill {
    display: inline-flex;
    width: fit-content;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(216,184,238,0.58);
    color: #684b5d;
}

.cats-need-status-pill.completed {
    background: rgba(238,247,255,0.88);
    color: #4f7f91;
}

.cats-need-status-pill.pending {
    background: rgba(255,241,250,0.88);
    color: #8a2f5a;
}

.cats-need-proof-link {
    color: #7a2f58;
    font-weight: 900;
}

.cats-need-small-muted {
    color: #817484;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}

.cats-need-error-box {
    padding: 18px;
    border-radius: 18px;
    background: rgba(255,241,250,0.78);
    border: 1px solid rgba(216,184,238,0.70);
    color: #684b5d;
    font-weight: 800;
}

@media (max-width: 1050px) {
    .cats-need-hero,
    .cats-need-layout {
        grid-template-columns: 1fr;
    }

    .cats-need-hero-icon {
        width: 100%;
        min-height: 150px;
    }

    .cats-need-impact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .cats-need-title {
        font-size: 32px;
    }

    .cats-need-impact-grid,
    .cats-need-month-box,
    .cats-need-archive-row,
    .cats-need-archive-row.header {
        grid-template-columns: 1fr;
    }

    .cats-need-month-circle {
        margin: 0 auto;
    }
}



/* ===== PurrPixels Mobile Phase 1: Core responsive shell + Cat Page ===== */
.mobile-bottom-nav,
.mobile-menu-backdrop,
.mobile-menu-sheet {
    display: none;
}

@media (max-width: 768px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        background-attachment: scroll;
        background-position: center top;
        padding-bottom: calc(82px + env(safe-area-inset-bottom));
        -webkit-text-size-adjust: 100%;
    }

    .page-wrap {
        width: 100%;
        max-width: 460px;
        margin: 0 auto;
        padding: 10px 10px calc(92px + env(safe-area-inset-bottom)) 10px;
    }

    #game {
        width: 100%;
    }

    /* Desktop navigation is too large on phones; bottom nav replaces it. */
    #game > .nav-row {
        display: none !important;
    }

    #playerInfo.box {
        margin: 8px auto 14px auto;
        padding: 10px 10px;
        border-radius: 18px;
        background: rgba(255,255,255,0.74);
        border-color: rgba(216,184,238,0.70);
        box-shadow: 0 8px 20px rgba(88,64,120,0.10);
        backdrop-filter: blur(8px);
    }

    #playerInfo .currency-bar {
        justify-content: center;
        gap: 8px;
    }

    #playerInfo .currency {
        min-height: 34px;
        padding: 6px 10px;
        font-size: 13px;
        gap: 6px;
    }

    #playerInfo .currency-icon {
        width: 18px;
        height: 18px;
    }

    #content > button:first-child,
    .public-back-sale,
    button[onclick="loadCats()"] {
        border-radius: 12px;
        padding: 9px 13px;
        font-size: 13px;
        font-weight: 900;
    }

    .section-title,
    .cat-main-name,
    .cat-title-clean .cat-name {
        font-size: 28px !important;
        line-height: 1.1;
        text-align: center;
    }

    .cat-main-cattery,
    .cat-title-clean .cat-cattery {
        text-align: center;
        font-size: 15px;
    }

    .cat-detail-page-clean {
        width: 100%;
        max-width: 100%;
    }

    .cat-clean-grid,
    .care-panel-wrap,
    .cat-detail-lower-layout,
    .cat-detail-full,
    .public-cat-page,
    .public-sale-bar {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .cat-left-stack,
    .cat-center-stack,
    .cat-right-stack,
    .cat-detail-column,
    .public-left-column,
    .public-right-column,
    .public-main-cat {
        width: 100%;
        min-width: 0;
    }

    .cat-center-stack {
        order: 1;
    }

    .cat-left-stack {
        order: 2;
    }

    .cat-right-stack {
        order: 3;
    }

    .middle-cat-panel,
    .side-panel,
    .purr-card,
    .breeding-compact-panel,
    .breeding-beauty-panel,
    .timeline-compact,
    .public-side-card,
    .public-cat-status-card {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 18px !important;
    }

    .middle-cat-panel.clean-main-cat {
        padding: 14px 12px 16px 12px;
    }

    .cat-detail-image-wrap {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 250px;
        border-radius: 20px;
        overflow: hidden;
    }

    .cat-image-large,
    .public-cat-image {
        width: min(88vw, 320px) !important;
        height: min(88vw, 320px) !important;
        max-width: 100% !important;
        object-fit: contain !important;
        margin: 0 auto 10px auto !important;
    }

    .cat-nav-arrow {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 50% !important;
        opacity: 0.90;
        z-index: 3;
    }

    .cat-nav-arrow.left {
        left: 8px !important;
    }

    .cat-nav-arrow.right {
        right: 8px !important;
    }

    .cat-quick-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin-top: 12px !important;
    }

    .cat-quick-actions button {
        width: 100%;
        margin: 0 !important;
        min-height: 42px;
    }

    .clean-tabs,
    .purr-tabs {
        width: 100%;
        padding-left: 0 !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 5px;
        scrollbar-width: none;
    }

    .clean-tabs::-webkit-scrollbar,
    .purr-tabs::-webkit-scrollbar {
        display: none;
    }

    .clean-tabs .purr-tab,
    .purr-tab {
        flex: 1 0 auto;
        min-width: 106px;
        padding: 9px 11px;
        font-size: 14px;
        text-align: center;
        white-space: nowrap;
    }

    .purr-section {
        padding: 14px 14px;
    }

    .purr-title-row {
        align-items: flex-start;
        gap: 10px;
        font-size: 16px;
        line-height: 1.2;
    }

    .purr-info-grid,
    .purr-line-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px 18px !important;
        font-size: 14px;
        line-height: 1.45;
    }

    .purr-line {
        gap: 8px;
        align-items: center;
    }

    .competition-cups {
        grid-template-columns: 1fr repeat(3, 52px) !important;
        gap: 6px !important;
        font-size: 14px;
    }

    .cup-box img {
        width: 30px;
        height: 30px;
    }

    .cup-box div {
        font-size: 13px;
    }

    .blap-wrap {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        text-align: left;
    }

    .side-panel-title,
    .timeline-compact-title,
    .breeding-beauty-header,
    .breeding-compact-title-main {
        font-size: 20px !important;
    }

    .tile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .action-tile {
        min-height: 96px !important;
        padding: 10px 7px !important;
        font-size: 13px !important;
    }

    .action-tile img {
        width: 42px !important;
        height: 42px !important;
    }

    .night-grid-clean {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .breeding-compact-summary {
        min-height: 64px !important;
        padding: 11px 13px !important;
        grid-template-columns: 1fr auto !important;
    }

    .breeding-compact-status-pill {
        display: none !important;
    }

    .breeding-compact-title-main {
        line-height: 1.1;
    }

    .breeding-compact-subline {
        font-size: 12px !important;
        line-height: 1.25 !important;
    }

    .breeding-quick-actions,
    .breeding-more-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .breeding-compact-action {
        min-height: 56px !important;
        padding: 9px 10px !important;
    }

    .breeding-compact-action img {
        width: 38px !important;
        height: 38px !important;
    }

    .breeding-status-grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    .training-side-panel > summary {
        grid-template-columns: 1fr auto auto !important;
        padding: 12px 14px !important;
    }

    .training-summary-main {
        font-size: 20px !important;
    }

    .training-summary-status {
        font-size: 11px !important;
        padding: 5px 8px !important;
    }

    .timeline-entry.pretty {
        grid-template-columns: 42px 1fr !important;
        gap: 10px !important;
        padding: 10px 0 !important;
    }

    .timeline-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
    }

    .timeline-time {
        font-size: 12px !important;
    }

    .timeline-text {
        font-size: 14px !important;
        line-height: 1.35;
    }

    input,
    select,
    textarea,
    button {
        font-size: 16px;
    }

    button {
        min-height: 40px;
        touch-action: manipulation;
    }

    .sale-filter-grid,
    .find-stud-filter-grid,
    .offspring-filter-grid,
    .breeds-tools,
    .breed-detail-tools,
    .community-search-row,
    .inventory-cat-search-row {
        grid-template-columns: 1fr !important;
    }

    .sale-row,
    .find-stud-row,
    .ranking-row,
    .player-ranking-row,
    .cat-ranking-table-row,
    .cat-ranking-row {
        grid-template-columns: 1fr !important;
    }

    .sale-list-head,
    .find-stud-head,
    .ranking-head,
    .player-ranking-head,
    .cat-ranking-table-head,
    .cat-ranking-head {
        display: none !important;
    }

    .cat-card {
        width: calc(50% - 8px);
        min-width: 150px;
    }

    .cat-card img {
        width: 118px;
        height: 118px;
        object-fit: contain;
    }

    .cat-grid {
        gap: 12px;
        justify-content: center;
    }

    .mobile-bottom-nav {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: calc(8px + env(safe-area-inset-bottom));
        height: 64px;
        display: none;
        align-items: center;
        justify-content: space-around;
        gap: 4px;
        z-index: 9998;
        padding: 7px 8px;
        border-radius: 22px;
        background: linear-gradient(135deg, rgba(255,252,255,0.94), rgba(238,247,255,0.90), rgba(255,241,250,0.92));
        border: 1px solid rgba(216,184,238,0.82);
        box-shadow: 0 14px 30px rgba(72,50,96,0.22);
        backdrop-filter: blur(14px);
    }

    body.purr-mobile-game .mobile-bottom-nav {
        display: flex;
    }

    .mobile-nav-btn {
        flex: 1;
        min-width: 0;
        height: 50px;
        margin: 0 !important;
        border: none !important;
        border-radius: 16px !important;
        background: transparent !important;
        box-shadow: none !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        color: #5a4664 !important;
        font-weight: 900;
        font-size: 10px !important;
        line-height: 1.05;
        padding: 4px 2px !important;
    }

    .mobile-nav-btn:hover,
    .mobile-nav-btn.active {
        background: rgba(255,255,255,0.72) !important;
    }

    .mobile-nav-icon {
        font-size: 20px;
        line-height: 1;
    }

    .mobile-menu-backdrop {
        position: fixed;
        inset: 0;
        z-index: 9996;
        background: rgba(48,36,64,0.26);
        backdrop-filter: blur(2px);
    }

    .mobile-menu-backdrop.show {
        display: block;
    }

    .mobile-menu-sheet {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(82px + env(safe-area-inset-bottom));
        max-height: min(72vh, 560px);
        overflow-y: auto;
        z-index: 9997;
        border-radius: 24px;
        background: linear-gradient(135deg, rgba(255,252,255,0.96), rgba(238,247,255,0.92), rgba(255,241,250,0.94));
        border: 1px solid rgba(216,184,238,0.82);
        box-shadow: 0 18px 40px rgba(72,50,96,0.28);
        padding: 14px;
        transform: translateY(18px);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.15s ease, opacity 0.15s ease;
        backdrop-filter: blur(16px);
    }

    .mobile-menu-sheet.show {
        display: block;
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .mobile-menu-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
        padding: 0 2px;
    }

    .mobile-menu-title {
        font-size: 20px;
        font-weight: 900;
        color: #684b5d;
    }

    .mobile-menu-close {
        width: 38px;
        height: 38px;
        min-height: 38px;
        padding: 0 !important;
        border-radius: 50% !important;
        font-size: 18px !important;
    }

    .mobile-menu-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 9px;
    }

    .mobile-menu-item {
        min-height: 58px;
        margin: 0 !important;
        padding: 9px 10px !important;
        border-radius: 16px !important;
        background: rgba(255,255,255,0.72) !important;
        border: 1px solid rgba(216,184,238,0.62) !important;
        color: #5a4664 !important;
        box-shadow: 0 5px 12px rgba(88,64,120,0.07) !important;
        font-size: 13px !important;
        font-weight: 900;
        text-align: left;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mobile-menu-item span:first-child {
        font-size: 20px;
        line-height: 1;
    }
}

@media (max-width: 380px) {
    .page-wrap {
        padding-left: 8px;
        padding-right: 8px;
    }

    #playerInfo .currency {
        font-size: 12px;
        padding: 5px 8px;
    }

    .purr-info-grid,
    .purr-line-grid {
        grid-template-columns: 1fr !important;
    }

    .competition-cups {
        grid-template-columns: 1fr repeat(3, 48px) !important;
    }

    .mobile-menu-grid {
        grid-template-columns: 1fr;
    }
}



/* ===== PurrPixels Mobile Phase 2: clean mobile header + core pages ===== */
@media (max-width: 768px) {
    /* The desktop topbar overlaps the logo/pills on phones. Mobile uses bottom nav + menu instead. */
    .topbar,
    #topbar {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .topbar *,
    #topbar * {
        display: none !important;
    }

    body.purr-mobile-game .page-wrap {
        padding-top: 12px !important;
    }

    body.purr-mobile-game #playerInfo.box {
        margin-top: 0 !important;
        margin-bottom: 16px !important;
    }

    body.purr-mobile-game #content {
        padding-bottom: calc(112px + env(safe-area-inset-bottom));
    }

    /* Currency block: centered, stable two-row wrapping instead of squeezed pills. */
    #playerInfo .currency-bar {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    #playerInfo .currency {
        flex: 0 1 auto;
        max-width: 46%;
        justify-content: center;
        white-space: nowrap;
    }

    /* My Cats and general cat grids: real mobile card grid. */
    .cat-grid,
    .inventory-cat-grid,
    .reserved-cats-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        align-items: stretch !important;
    }

    .cat-card,
    .inventory-cat-card,
    .inventory-cat-choice-card,
    .reserved-cat-card {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .cat-card img {
        width: min(34vw, 132px) !important;
        height: min(34vw, 132px) !important;
        object-fit: contain !important;
    }

    /* Cat detail polish: less giant hero spacing, cleaner actions. */
    .middle-cat-panel.clean-main-cat,
    .middle-cat-panel {
        padding: 14px 12px 18px 12px !important;
    }

    .cat-detail-image-wrap {
        min-height: min(78vw, 330px) !important;
    }

    .cat-image-large,
    .public-cat-image {
        width: min(82vw, 310px) !important;
        height: min(82vw, 310px) !important;
    }

    .bars,
    .public-bars {
        max-width: 100% !important;
        padding: 0 2px;
    }

    .cat-quick-actions button,
    .side-panel button,
    .breeding-compact-action,
    .training-side-panel button {
        min-height: 44px !important;
    }

    /* Market / Stud / Rankings: make list rows feel like cards on phones. */
    .sale-list,
    .find-stud-list,
    .ranking-card,
    .player-ranking-board,
    .cat-ranking-big-card {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    .sale-row,
    .find-stud-row,
    .ranking-row,
    .player-ranking-row,
    .cat-ranking-table-row,
    .cat-ranking-row {
        border: 1px solid rgba(216,184,238,0.70) !important;
        border-radius: 18px !important;
        margin-bottom: 12px !important;
        padding: 13px 14px !important;
        background: rgba(255,255,255,0.78) !important;
        box-shadow: 0 7px 16px rgba(88,64,120,0.08) !important;
    }

    .sale-cat-cell,
    .find-stud-cat-cell {
        grid-template-columns: 68px 1fr !important;
        align-items: center !important;
    }

    .sale-actions,
    .find-stud-row button,
    .sale-row button {
        width: 100%;
    }

    .sale-actions button,
    .find-stud-row button {
        width: 100%;
        margin: 3px 0 !important;
    }

    .sale-tabs,
    .find-stud-tabs,
    .cat-ranking-tabs,
    .offspring-tabs {
        margin-left: 0 !important;
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .sale-tabs::-webkit-scrollbar,
    .find-stud-tabs::-webkit-scrollbar,
    .cat-ranking-tabs::-webkit-scrollbar,
    .offspring-tabs::-webkit-scrollbar {
        display: none;
    }

    .sale-tab,
    .find-stud-tab,
    .cat-ranking-tab,
    .offspring-tab-button {
        white-space: nowrap;
        flex: 0 0 auto;
    }

    /* Mobile menu gets the actions that used to live in the topbar. */
    .mobile-menu-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 380px) {
    #playerInfo .currency {
        max-width: 48%;
    }

    .cat-grid,
    .inventory-cat-grid,
    .reserved-cats-grid {
        gap: 10px !important;
    }

    .cat-card {
        padding: 10px 8px !important;
    }

    .mobile-bottom-nav {
        left: 6px !important;
        right: 6px !important;
    }
}


/* ===== PurrPixels Mobile Phase 3: logo header + Stud bottom nav + cat arrows ===== */
.mobile-logo-header {
    display: none;
}

@media (max-width: 768px) {
    body.purr-mobile-game .mobile-logo-header {
        display: flex !important;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 4px auto 8px auto;
        padding: 2px 0 0 0;
        cursor: pointer;
    }

    body.purr-mobile-game .mobile-logo-header img {
        width: min(48vw, 168px);
        max-width: 168px;
        height: auto;
        max-height: 88px;
        object-fit: contain;
        display: block;
        filter:
            drop-shadow(0 7px 14px rgba(255,255,255,0.70))
            drop-shadow(0 5px 12px rgba(96,64,130,0.14));
    }

    body.purr-mobile-game #playerInfo.box {
        margin-top: 0 !important;
        margin-bottom: 14px !important;
        padding: 10px 10px !important;
        border-radius: 20px !important;
    }

    body.purr-mobile-game #playerInfo .currency-bar {
        justify-content: center !important;
        gap: 8px !important;
    }

    body.purr-mobile-game #playerInfo .currency {
        min-height: 33px !important;
        padding: 6px 10px !important;
        border-radius: 999px !important;
    }

    /* Smaller, softer arrows so they no longer dominate the cat image on phones. */
    .cat-nav-arrow {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        padding: 0 !important;
        font-size: 20px !important;
        opacity: 0.76 !important;
        background: rgba(255,255,255,0.64) !important;
        border-color: rgba(216,184,238,0.62) !important;
        box-shadow: 0 4px 10px rgba(72,50,96,0.10) !important;
    }

    .cat-nav-arrow:hover {
        transform: translateY(-50%) scale(1.02) !important;
    }

    .cat-nav-arrow.left {
        left: 5px !important;
    }

    .cat-nav-arrow.right {
        right: 5px !important;
    }

    .cat-nav-arrow.disabled {
        opacity: 0.22 !important;
    }

    .mobile-nav-btn:nth-child(4) .mobile-nav-icon {
        font-size: 19px;
    }
}

@media (max-width: 380px) {
    body.purr-mobile-game .mobile-logo-header img {
        width: min(52vw, 150px);
        max-height: 78px;
    }

    .cat-nav-arrow {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        font-size: 18px !important;
    }
}



/* ===== PurrPixels Mobile Phase 4: compact Cat Actions drawer ===== */
.mobile-cat-action-row,
.mobile-cat-action-toggle {
    display: none;
}

@media (max-width: 768px) {
    body.purr-mobile-game .mobile-cat-action-row {
        display: block;
        width: 100%;
        margin: 8px auto 0 auto;
    }

    body.purr-mobile-game .mobile-cat-action-toggle {
        width: 100%;
        min-height: 38px;
        margin: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 999px !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,226,255,0.78)) !important;
        border: 1px solid rgba(194,160,225,0.82) !important;
        color: #5a4664 !important;
        box-shadow: 0 5px 12px rgba(88,64,120,0.08) !important;
    }

    body.purr-mobile-game .mobile-cat-action-toggle:hover {
        background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,220,239,0.82)) !important;
    }

    body.purr-mobile-game .mobile-cat-action-toggle-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 21px;
        height: 21px;
        border-radius: 999px;
        background: rgba(255,255,255,0.68);
        border: 1px solid rgba(216,184,238,0.58);
        font-size: 15px;
        line-height: 1;
    }

    body.purr-mobile-game .cat-quick-actions {
        display: none !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        width: 100% !important;
        margin-top: 8px !important;
        padding: 8px !important;
        border-radius: 18px !important;
        background: rgba(255,255,255,0.38) !important;
        border: 1px solid rgba(216,184,238,0.44) !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25) !important;
    }

    body.purr-mobile-game .cat-quick-actions.mobile-actions-open {
        display: grid !important;
    }

    body.purr-mobile-game .cat-quick-actions button {
        width: 100% !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 7px 8px !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        line-height: 1.15 !important;
        white-space: nowrap;
    }

    body.purr-mobile-game .cat-quick-actions button[onclick*="sendToMeadow"] {
        grid-column: span 1;
    }

    body.purr-mobile-game .cat-quick-actions button[onclick*="adminRenameCatPrompt"]:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}



/* ===== PurrPixels Mobile Phase 5: My Cats + compact lower Cat Page polish ===== */
@media (max-width: 768px) {
    /* Cat detail lower area: less vertical weight after the cat image. */
    body.purr-mobile-game .cat-tabs-clean {
        margin-top: 12px !important;
    }

    body.purr-mobile-game .purr-tabs.clean-tabs {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        overflow: visible !important;
        margin-bottom: -1px !important;
    }

    body.purr-mobile-game .purr-tabs.clean-tabs .purr-tab {
        min-width: 0 !important;
        width: 100% !important;
        padding: 8px 7px !important;
        font-size: 12px !important;
        line-height: 1.1 !important;
        border-radius: 12px 12px 0 0 !important;
    }

    body.purr-mobile-game .purr-card {
        border-radius: 18px !important;
        margin-bottom: 18px !important;
    }

    body.purr-mobile-game .purr-section {
        padding: 12px 12px !important;
    }

    body.purr-mobile-game .purr-title-row {
        margin-bottom: 9px !important;
        font-size: 15px !important;
    }

    body.purr-mobile-game .purr-info-grid {
        gap: 7px 10px !important;
        font-size: 13px !important;
    }

    body.purr-mobile-game .purr-info-grid > div,
    body.purr-mobile-game .purr-line {
        padding: 6px 8px !important;
        border-radius: 11px !important;
        background: rgba(255,255,255,0.44) !important;
        border: 1px solid rgba(216,184,238,0.28) !important;
    }

    body.purr-mobile-game .purr-info-grid > div b,
    body.purr-mobile-game .purr-line span:first-child {
        font-weight: 900 !important;
        color: #684b5d !important;
    }

    body.purr-mobile-game .competition-cups {
        grid-template-columns: 1fr repeat(3, 44px) !important;
        gap: 5px !important;
        margin-top: 2px !important;
    }

    body.purr-mobile-game .cup-box img {
        width: 24px !important;
        height: 24px !important;
    }

    body.purr-mobile-game .cup-box div {
        font-size: 12px !important;
    }

    body.purr-mobile-game .purr-line-grid {
        gap: 6px !important;
        font-size: 13px !important;
    }

    body.purr-mobile-game .purr-line-grid + br {
        display: none !important;
    }

    body.purr-mobile-game .purr-section button[onclick*="loadEnterCatShowPage"] {
        width: 100% !important;
        margin-top: 9px !important;
        min-height: 38px !important;
        font-size: 13px !important;
    }

    /* Care / Night / Training: smaller tiles, still tappable. */
    body.purr-mobile-game .side-panel .tile-grid,
    body.purr-mobile-game .training-side-panel .tile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.purr-mobile-game .side-panel .action-tile,
    body.purr-mobile-game .training-side-panel .action-tile {
        min-height: 76px !important;
        padding: 8px 6px !important;
        gap: 5px !important;
        font-size: 12px !important;
        line-height: 1.15 !important;
    }

    body.purr-mobile-game .side-panel .action-tile img,
    body.purr-mobile-game .training-side-panel .action-tile img {
        width: 34px !important;
        height: 34px !important;
        margin-bottom: 2px !important;
    }

    body.purr-mobile-game .side-panel-title,
    body.purr-mobile-game .training-summary-main,
    body.purr-mobile-game .timeline-compact-title {
        font-size: 18px !important;
    }

    body.purr-mobile-game .training-side-panel > summary {
        padding: 10px 12px !important;
    }

    body.purr-mobile-game .training-summary-status {
        font-size: 10px !important;
        padding: 4px 7px !important;
    }

    /* My Cats overview becomes a proper mobile dashboard. */
    body.purr-mobile-game .my-cats-page {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 24px auto !important;
    }

    body.purr-mobile-game .my-cats-hero {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        text-align: center !important;
        padding: 15px 14px !important;
        margin-bottom: 12px !important;
        border-radius: 22px !important;
    }

    body.purr-mobile-game .my-cats-hero-icon {
        width: 82px !important;
        height: 82px !important;
        border-radius: 22px !important;
        margin: 0 auto !important;
        font-size: 38px !important;
        order: -1;
    }

    body.purr-mobile-game .my-cats-hero-icon-img {
        width: 74px !important;
        height: 74px !important;
        object-fit: contain !important;
    }

    body.purr-mobile-game .my-cats-kicker {
        font-size: 11px !important;
        margin-bottom: 3px !important;
    }

    body.purr-mobile-game .my-cats-title {
        font-size: 27px !important;
        line-height: 1.1 !important;
        margin-bottom: 5px !important;
    }

    body.purr-mobile-game .my-cats-subtitle {
        font-size: 13px !important;
        line-height: 1.35 !important;
        max-width: 100% !important;
    }

    body.purr-mobile-game .my-cats-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    body.purr-mobile-game .my-cats-stat-card {
        padding: 9px 8px !important;
        border-radius: 16px !important;
    }

    body.purr-mobile-game .my-cats-stat-value {
        font-size: 22px !important;
    }

    body.purr-mobile-game .my-cats-stat-label {
        font-size: 11px !important;
        line-height: 1.15 !important;
    }

    body.purr-mobile-game .my-cats-controls {
        padding: 11px !important;
        margin-bottom: 12px !important;
        border-radius: 18px !important;
    }

    body.purr-mobile-game .my-cats-control-grid {
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    body.purr-mobile-game .my-cats-search-wrap {
        padding: 5px 10px 5px 13px !important;
    }

    body.purr-mobile-game .my-cats-control-field label {
        font-size: 12px !important;
        margin-bottom: 3px !important;
    }

    body.purr-mobile-game .my-cats-control-field select,
    body.purr-mobile-game .my-cats-search-wrap input {
        min-height: 38px !important;
        font-size: 14px !important;
        padding: 8px !important;
    }

    body.purr-mobile-game .my-cats-breed-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        gap: 7px !important;
        margin-bottom: 12px !important;
        padding: 0 2px 4px 2px !important;
        scrollbar-width: none;
    }

    body.purr-mobile-game .my-cats-breed-tabs::-webkit-scrollbar {
        display: none;
    }

    body.purr-mobile-game .my-cats-breed-tab {
        flex: 0 0 auto !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    body.purr-mobile-game .my-cats-breed-section {
        border-radius: 20px !important;
        margin-bottom: 14px !important;
    }

    body.purr-mobile-game .my-cats-breed-head {
        grid-template-columns: 1fr auto !important;
        gap: 8px !important;
        padding: 11px 12px !important;
    }

    body.purr-mobile-game .my-cats-breed-name {
        font-size: 18px !important;
        line-height: 1.1 !important;
    }

    body.purr-mobile-game .my-cats-breed-sub {
        font-size: 11px !important;
    }

    body.purr-mobile-game .my-cats-breed-count {
        padding: 5px 9px !important;
        font-size: 11px !important;
    }

    body.purr-mobile-game .my-cats-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
        padding: 10px !important;
    }

    body.purr-mobile-game .my-cat-card-new {
        min-width: 0 !important;
        padding: 10px 8px !important;
        border-radius: 17px !important;
    }

    body.purr-mobile-game .my-cat-status-row {
        top: 7px !important;
        left: 7px !important;
        right: 7px !important;
    }

    body.purr-mobile-game .my-cat-badge {
        padding: 3px 6px !important;
        font-size: 9px !important;
    }

    body.purr-mobile-game .my-cat-breeding-indicator {
        top: 37px !important;
        right: 8px !important;
        width: 27px !important;
        height: 27px !important;
        font-size: 18px !important;
    }

    body.purr-mobile-game .my-cat-image-wrap {
        height: 112px !important;
        margin-top: 16px !important;
        margin-bottom: 5px !important;
    }

    body.purr-mobile-game .my-cat-image-wrap img {
        width: 108px !important;
        height: 108px !important;
        object-fit: contain !important;
    }

    body.purr-mobile-game .my-cat-name-new {
        font-size: 15px !important;
        line-height: 1.12 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.purr-mobile-game .my-cat-cattery-new {
        font-size: 10px !important;
        margin-bottom: 6px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.purr-mobile-game .my-cat-info-new {
        gap: 3px !important;
        margin-top: 7px !important;
    }

    body.purr-mobile-game .my-cat-info-new div {
        font-size: 10.5px !important;
        gap: 5px !important;
        padding-bottom: 2px !important;
    }
}

@media (max-width: 380px) {
    body.purr-mobile-game .my-cats-list {
        gap: 8px !important;
        padding: 8px !important;
    }

    body.purr-mobile-game .my-cat-image-wrap {
        height: 102px !important;
    }

    body.purr-mobile-game .my-cat-image-wrap img {
        width: 98px !important;
        height: 98px !important;
    }
}


/* ===== PurrPixels Mobile Phase 6: Better My Cats mobile overview ===== */
@media (max-width: 768px) {
    body.purr-mobile-game .my-cats-page {
        padding-bottom: calc(98px + env(safe-area-inset-bottom)) !important;
    }

    /* Compact app-like intro card instead of a tall hero block. */
    body.purr-mobile-game .my-cats-hero {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        text-align: left !important;
        padding: 12px 13px !important;
        margin-bottom: 10px !important;
        border-radius: 22px !important;
    }

    body.purr-mobile-game .my-cats-hero > div:first-child {
        order: 2 !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    body.purr-mobile-game .my-cats-hero-icon {
        order: 1 !important;
        width: 62px !important;
        height: 62px !important;
        min-width: 62px !important;
        border-radius: 18px !important;
        margin: 0 !important;
        box-shadow: inset 0 0 0 2px rgba(255,255,255,0.45), 0 6px 14px rgba(88,64,120,0.09) !important;
    }

    body.purr-mobile-game .my-cats-hero-icon-img {
        width: 56px !important;
        height: 56px !important;
    }

    body.purr-mobile-game .my-cats-kicker {
        font-size: 10px !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
        margin-bottom: 2px !important;
        color: #8a5a91 !important;
    }

    body.purr-mobile-game .my-cats-title {
        font-size: 23px !important;
        line-height: 1.04 !important;
        margin: 0 0 4px 0 !important;
    }

    body.purr-mobile-game .my-cats-subtitle {
        font-size: 11px !important;
        line-height: 1.25 !important;
        display: -webkit-box !important;
        line-clamp: 2 !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        color: #6e6174 !important;
    }

    /* Stats become small top chips instead of four large cards. */
    body.purr-mobile-game .my-cats-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 6px !important;
        margin-bottom: 10px !important;
    }

    body.purr-mobile-game .my-cats-stat-card {
        padding: 7px 4px !important;
        border-radius: 15px !important;
        min-height: 52px !important;
    }

    body.purr-mobile-game .my-cats-stat-value {
        font-size: 18px !important;
        line-height: 1 !important;
    }

    body.purr-mobile-game .my-cats-stat-label {
        font-size: 9px !important;
        line-height: 1.05 !important;
        margin-top: 4px !important;
    }

    /* Search stays primary; filter + sort share one row. */
    body.purr-mobile-game .my-cats-controls {
        padding: 10px !important;
        margin-bottom: 10px !important;
        border-radius: 20px !important;
    }

    body.purr-mobile-game .my-cats-control-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        align-items: end !important;
    }

    body.purr-mobile-game .my-cats-search-wrap {
        grid-column: 1 / -1 !important;
        padding: 4px 8px 4px 12px !important;
    }

    body.purr-mobile-game .my-cats-search-icon {
        width: 30px !important;
        height: 30px !important;
        font-size: 15px !important;
    }

    body.purr-mobile-game .my-cats-control-field label {
        display: none !important;
    }

    body.purr-mobile-game .my-cats-control-field select,
    body.purr-mobile-game .my-cats-search-wrap input {
        width: 100% !important;
        min-height: 36px !important;
        font-size: 12.5px !important;
        border-radius: 13px !important;
        padding: 8px 9px !important;
    }

    body.purr-mobile-game .my-cats-breed-tabs {
        margin: 2px -2px 10px -2px !important;
        padding: 1px 2px 5px 2px !important;
    }

    body.purr-mobile-game .my-cats-breed-tab {
        padding: 8px 11px !important;
        font-size: 11px !important;
        box-shadow: 0 4px 10px rgba(88,64,120,0.07) !important;
    }

    /* Breed sections cleaner and less compressed. */
    body.purr-mobile-game .my-cats-breed-section {
        border-radius: 22px !important;
        overflow: hidden !important;
        margin-bottom: 16px !important;
    }

    body.purr-mobile-game .my-cats-breed-head {
        padding: 12px 12px 10px 12px !important;
        grid-template-columns: 1fr auto !important;
        align-items: center !important;
    }

    body.purr-mobile-game .my-cats-breed-name {
        font-size: 17px !important;
        line-height: 1.08 !important;
    }

    body.purr-mobile-game .my-cats-breed-sub {
        display: none !important;
    }

    body.purr-mobile-game .my-cats-breed-count {
        max-width: 118px !important;
        white-space: normal !important;
        text-align: center !important;
        line-height: 1.05 !important;
        padding: 6px 8px !important;
        font-size: 10.5px !important;
    }

    body.purr-mobile-game .my-cats-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        padding: 11px !important;
    }

    body.purr-mobile-game .my-cat-card-new {
        padding: 9px 7px 8px 7px !important;
        border-radius: 18px !important;
        min-height: 248px !important;
        background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,245,251,0.66), rgba(238,247,255,0.56)) !important;
        border-color: rgba(216,184,238,0.72) !important;
    }

    body.purr-mobile-game .my-cat-status-row {
        top: 7px !important;
        left: 7px !important;
        right: 7px !important;
        gap: 4px !important;
    }

    body.purr-mobile-game .my-cat-badge {
        padding: 3px 6px !important;
        font-size: 8.5px !important;
        max-width: 62px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.purr-mobile-game .my-cat-image-wrap {
        height: 116px !important;
        margin-top: 18px !important;
        margin-bottom: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.purr-mobile-game .my-cat-image-wrap img {
        width: 112px !important;
        height: 112px !important;
        object-fit: contain !important;
        filter: drop-shadow(0 6px 10px rgba(88,64,120,0.11));
    }

    body.purr-mobile-game .my-cat-name-new {
        font-size: 15px !important;
        line-height: 1.05 !important;
        margin-top: 2px !important;
    }

    body.purr-mobile-game .my-cat-cattery-new {
        font-size: 9.5px !important;
        margin: 3px 0 6px 0 !important;
    }

    /* On mobile the breed is already visible in the section header; DOB is too much for the card. */
    body.purr-mobile-game .my-cat-info-new div:nth-child(1),
    body.purr-mobile-game .my-cat-info-new div:nth-child(5) {
        display: none !important;
    }

    body.purr-mobile-game .my-cat-info-new {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 4px !important;
        margin-top: 5px !important;
    }

    body.purr-mobile-game .my-cat-info-new div {
        display: block !important;
        border: 1px solid rgba(216,184,238,0.28) !important;
        background: rgba(255,255,255,0.46) !important;
        border-radius: 9px !important;
        padding: 3px 4px !important;
        line-height: 1.05 !important;
        text-align: center !important;
    }

    body.purr-mobile-game .my-cat-info-new div b {
        display: none !important;
    }

    body.purr-mobile-game .my-cat-info-new div span {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        font-size: 9.8px !important;
        font-weight: 850 !important;
        color: #5a4664 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Listed cats: keep the state visible but much less aggressive. */
    body.purr-mobile-game .my-cat-card-new.listed::before {
        background: rgba(255,255,255,0.16) !important;
    }

    body.purr-mobile-game .my-cat-card-new.listed::after {
        content: attr(data-sale-label) !important;
        top: 86px !important;
        left: 50% !important;
        padding: 4px 10px !important;
        border-radius: 999px !important;
        font-size: 10px !important;
        letter-spacing: 0.06em !important;
        border-width: 1px !important;
        box-shadow: 0 4px 10px rgba(122,47,88,0.14) !important;
    }

    body.purr-mobile-game .my-cat-card-new.listed .my-cat-image-wrap img {
        opacity: 0.68 !important;
    }
}

@media (max-width: 380px) {
    body.purr-mobile-game .my-cats-stat-label {
        font-size: 8.5px !important;
    }

    body.purr-mobile-game .my-cats-breed-count {
        max-width: 104px !important;
        font-size: 9.5px !important;
    }

    body.purr-mobile-game .my-cat-card-new {
        min-height: 238px !important;
    }

    body.purr-mobile-game .my-cat-image-wrap {
        height: 106px !important;
    }

    body.purr-mobile-game .my-cat-image-wrap img {
        width: 102px !important;
        height: 102px !important;
    }
}



/* ===== PurrPixels Mobile Phase 7: profile access in mobile menu ===== */
@media (max-width: 768px) {
    .mobile-menu-profile {
        display: grid;
        grid-template-columns: 54px 1fr;
        gap: 11px;
        align-items: center;
        margin: 0 0 12px 0;
        padding: 12px;
        border-radius: 20px;
        background: linear-gradient(135deg, rgba(255,252,255,0.88), rgba(238,247,255,0.72), rgba(255,241,250,0.76));
        border: 1px solid rgba(216,184,238,0.68);
        box-shadow: 0 7px 16px rgba(88,64,120,0.08);
    }

    .mobile-menu-avatar {
        width: 54px;
        height: 54px;
        border-radius: 18px;
        background: rgba(255,255,255,0.78);
        border: 1px solid rgba(216,184,238,0.72);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        font-size: 28px;
        box-shadow: inset 0 0 0 3px rgba(255,255,255,0.35);
    }

    .mobile-menu-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .mobile-menu-profile-name {
        font-size: 16px;
        font-weight: 900;
        color: #684b5d;
        line-height: 1.15;
        margin-bottom: 2px;
    }

    .mobile-menu-profile-cattery {
        font-size: 12px;
        font-weight: 800;
        color: #7b6b80;
        line-height: 1.2;
        margin-bottom: 8px;
    }

    .mobile-menu-profile-actions {
        display: flex;
        gap: 7px;
        flex-wrap: wrap;
    }

    .mobile-menu-profile-actions button {
        min-height: 32px;
        margin: 0 !important;
        padding: 6px 10px !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        font-weight: 900;
        background: rgba(255,255,255,0.78) !important;
        border: 1px solid rgba(216,184,238,0.66) !important;
        color: #5a4664 !important;
        box-shadow: none !important;
    }

    .mobile-nav-avatar-icon.has-avatar {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        overflow: hidden;
        border: 1px solid rgba(216,184,238,0.70);
        background: rgba(255,255,255,0.78);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1px;
    }

    .mobile-nav-avatar-icon.has-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
}



/* ===== PurrPixels Mobile Phase 8: prettier login / register landing ===== */
@media (max-width: 700px) {
    body:not(.public-legal-view) .page-wrap {
        padding: 0 !important;
        max-width: none !important;
    }

    body:not(.public-legal-view) #auth {
        display: block;
        width: 100%;
    }

    body:not(.public-legal-view) #auth .landing-page {
        width: min(100%, 430px) !important;
        min-height: 100dvh !important;
        margin: 0 auto !important;
        padding: 18px 14px 30px 14px !important;
        border-radius: 0 !important;
        box-shadow: 0 16px 34px rgba(86,58,112,0.16) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        background:
            linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
            url("/images/ui/news_background.png") center top / cover no-repeat !important;
        overflow: hidden !important;
    }

    body:not(.public-legal-view) #auth .landing-page::before {
        border-radius: 0 !important;
        background:
            radial-gradient(circle at 50% 9%, rgba(255,255,255,0.42), transparent 22%),
            radial-gradient(circle at 48% 45%, rgba(255,239,248,0.26), transparent 34%) !important;
    }

    body:not(.public-legal-view) #auth .landing-logo-stage {
        order: 0 !important;
        min-height: auto !important;
        padding: 4px 0 0 0 !important;
        position: relative !important;
        top: auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    body:not(.public-legal-view) #auth .landing-logo-center {
        width: 126px !important;
        max-width: 42vw !important;
        filter:
            drop-shadow(0 8px 14px rgba(255,255,255,0.62))
            drop-shadow(0 8px 18px rgba(107,68,139,0.16)) !important;
    }

    body:not(.public-legal-view) #auth .landing-left-panel {
        order: 1 !important;
        padding: 0 !important;
        display: block !important;
    }

    body:not(.public-legal-view) #auth .landing-side {
        order: 2 !important;
        padding: 0 !important;
        display: block !important;
    }

    body:not(.public-legal-view) #auth .landing-hero,
    body:not(.public-legal-view) #auth .landing-auth-card {
        width: 100% !important;
        max-width: none !important;
        border-radius: 28px !important;
        background:
            linear-gradient(180deg, rgba(255,250,254,0.86), rgba(246,238,255,0.68)) !important;
        border: 1px solid rgba(255,255,255,0.58) !important;
        box-shadow:
            0 12px 28px rgba(86,58,112,0.12),
            inset 0 0 0 1px rgba(255,255,255,0.32) !important;
        backdrop-filter: blur(10px) !important;
    }

    body:not(.public-legal-view) #auth .landing-hero {
        padding: 17px 16px 16px 16px !important;
        text-align: center !important;
    }

    body:not(.public-legal-view) #auth .landing-kicker {
        display: inline-flex !important;
        justify-content: center !important;
        max-width: 100% !important;
        margin: 0 auto 11px auto !important;
        padding: 7px 12px !important;
        font-size: 11px !important;
        line-height: 1.15 !important;
        background: rgba(255,255,255,0.80) !important;
    }

    body:not(.public-legal-view) #auth .landing-title {
        font-size: 30px !important;
        line-height: 1.04 !important;
        margin: 0 0 10px 0 !important;
        letter-spacing: -0.3px !important;
        color: #68465f !important;
    }

    body:not(.public-legal-view) #auth .landing-subtitle {
        font-size: 13.5px !important;
        line-height: 1.42 !important;
        margin: 0 0 12px 0 !important;
        color: #5b5364 !important;
        font-weight: 800 !important;
    }

    body:not(.public-legal-view) #auth .landing-stats-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin: 0 0 12px 0 !important;
    }

    body:not(.public-legal-view) #auth .landing-stat-pill {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 8px 9px !important;
        font-size: 11.5px !important;
        line-height: 1.2 !important;
        background: rgba(255,255,255,0.76) !important;
    }

    body:not(.public-legal-view) #auth .landing-stats-row .landing-stat-pill:first-child {
        grid-column: 1 / -1 !important;
        font-size: 12.5px !important;
    }

    body:not(.public-legal-view) #auth .landing-feature-stack {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
        margin: 0 !important;
    }

    body:not(.public-legal-view) #auth .landing-feature-card-large {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        min-height: 96px !important;
        padding: 9px 6px !important;
        border-radius: 18px !important;
        text-align: center !important;
        gap: 5px !important;
        background: rgba(255,255,255,0.66) !important;
    }

    body:not(.public-legal-view) #auth .landing-feature-card-icon {
        width: 38px !important;
        height: 38px !important;
        border-radius: 14px !important;
        margin: 0 auto !important;
        flex: 0 0 auto !important;
    }

    body:not(.public-legal-view) #auth .landing-feature-card-icon img {
        width: 30px !important;
        height: 30px !important;
    }

    body:not(.public-legal-view) #auth .landing-feature-badge {
        display: none !important;
    }

    body:not(.public-legal-view) #auth .landing-feature-card-title {
        font-size: 11.2px !important;
        line-height: 1.14 !important;
        margin: 0 !important;
        color: #7a2f58 !important;
    }

    body:not(.public-legal-view) #auth .landing-feature-card-text {
        display: none !important;
    }

    body:not(.public-legal-view) #auth .landing-auth-card {
        padding: 16px !important;
    }

    body:not(.public-legal-view) #auth .landing-language-switch {
        justify-content: center !important;
        gap: 8px !important;
        margin: 0 0 12px 0 !important;
    }

    body:not(.public-legal-view) #auth .landing-language-button {
        min-width: 46px !important;
        min-height: 42px !important;
        padding: 8px 11px !important;
        box-shadow: 0 4px 10px rgba(86,58,112,0.08) !important;
    }

    body:not(.public-legal-view) #auth .landing-card-title {
        text-align: center !important;
        font-size: 26px !important;
        margin: 0 0 12px 0 !important;
        color: #68465f !important;
    }

    body:not(.public-legal-view) #auth .landing-auth-tabs {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 5px !important;
        margin: 0 0 14px 0 !important;
        padding: 5px !important;
        border-radius: 20px !important;
        background: rgba(255,255,255,0.60) !important;
        border: 1px solid rgba(216,184,238,0.62) !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.34) !important;
    }

    body:not(.public-legal-view) #auth .landing-auth-tab {
        min-height: 44px !important;
        border-radius: 15px !important;
        margin: 0 !important;
        font-size: 15px !important;
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }

    body:not(.public-legal-view) #auth .landing-auth-tab.active {
        background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,232,247,0.90)) !important;
        border-color: rgba(216,184,238,0.72) !important;
        box-shadow: 0 5px 12px rgba(86,58,112,0.08) !important;
        color: #8a2f5a !important;
    }

    body:not(.public-legal-view) #auth .landing-form-box {
        padding: 15px !important;
        border-radius: 24px !important;
        background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(248,239,255,0.58)) !important;
        border: 1px solid rgba(216,184,238,0.62) !important;
    }

    body:not(.public-legal-view) #auth .landing-form-header {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 8px !important;
        margin-bottom: 13px !important;
    }

    body:not(.public-legal-view) #auth .landing-form-header-icon {
        width: 50px !important;
        height: 50px !important;
        border-radius: 17px !important;
        margin: 0 auto !important;
    }

    body:not(.public-legal-view) #auth .landing-form-header-icon img {
        width: 39px !important;
        height: 39px !important;
    }

    body:not(.public-legal-view) #auth .landing-form-title {
        font-size: 22px !important;
        margin-bottom: 3px !important;
    }

    body:not(.public-legal-view) #auth .landing-form-subtitle {
        font-size: 12.5px !important;
        max-width: 230px !important;
        margin: 0 auto !important;
    }

    body:not(.public-legal-view) #auth .landing-input-group {
        margin-bottom: 10px !important;
    }

    body:not(.public-legal-view) #auth .landing-input-label {
        font-size: 12.5px !important;
        margin-bottom: 5px !important;
    }

    body:not(.public-legal-view) #auth .landing-form-box input,
    body:not(.public-legal-view) #auth .landing-form-box select {
        min-height: 44px !important;
        border-radius: 15px !important;
        padding: 10px 13px !important;
        background: rgba(238,246,255,0.86) !important;
        border-color: rgba(194,160,225,0.72) !important;
    }

    body:not(.public-legal-view) #auth .landing-password-wrap {
        display: grid !important;
        grid-template-columns: 1fr 46px !important;
        align-items: center !important;
        background: rgba(238,246,255,0.86) !important;
        border: 1px solid rgba(194,160,225,0.72) !important;
        border-radius: 15px !important;
        overflow: hidden !important;
    }

    body:not(.public-legal-view) #auth .landing-password-wrap input {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body:not(.public-legal-view) #auth .landing-password-toggle {
        width: 40px !important;
        height: 36px !important;
        min-height: 36px !important;
        margin: 0 5px 0 0 !important;
        padding: 0 !important;
        border-radius: 13px !important;
        border-color: rgba(216,184,238,0.68) !important;
        background: rgba(255,241,250,0.86) !important;
        box-shadow: none !important;
    }

    body:not(.public-legal-view) #auth .landing-remember-row {
        margin: 5px 0 10px 0 !important;
        justify-content: center !important;
    }

    body:not(.public-legal-view) #auth .landing-remember-label {
        font-size: 13px !important;
        padding: 5px 0 !important;
    }

    body:not(.public-legal-view) #auth .landing-main-button {
        min-height: 48px !important;
        margin-top: 8px !important;
        border-radius: 17px !important;
        background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,232,247,0.90)) !important;
        border-color: rgba(216,184,238,0.80) !important;
        color: #68465f !important;
    }

    body:not(.public-legal-view) #auth .landing-register-tip,
    body:not(.public-legal-view) #auth .landing-terms-box {
        border-radius: 17px !important;
        background: rgba(255,255,255,0.58) !important;
    }

    body:not(.public-legal-view) #auth .landing-legal-links {
        margin-top: 12px !important;
        padding: 10px !important;
        border-radius: 18px !important;
        gap: 7px !important;
    }

    body:not(.public-legal-view) #auth .landing-legal-separator {
        display: none !important;
    }

    body:not(.public-legal-view) #auth .landing-legal-links button {
        text-decoration: none !important;
        border-radius: 999px !important;
        padding: 6px 9px !important;
        background: rgba(255,255,255,0.62) !important;
        border: 1px solid rgba(216,184,238,0.50) !important;
        font-size: 11px !important;
        line-height: 1.1 !important;
    }
}

@media (max-width: 370px) {
    body:not(.public-legal-view) #auth .landing-title {
        font-size: 27px !important;
    }

    body:not(.public-legal-view) #auth .landing-feature-stack {
        grid-template-columns: 1fr !important;
    }

    body:not(.public-legal-view) #auth .landing-feature-card-large {
        min-height: auto !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        text-align: left !important;
        padding: 8px 10px !important;
    }
}


/* ===== PurrPixels Mobile Phase 9: bottom-nav category sheets ===== */
@media (max-width: 768px) {
    .mobile-nav-category-btn span:last-child {
        font-size: 9px !important;
        line-height: 1.0 !important;
        max-width: 58px;
    }

    .mobile-quick-sheet {
        max-height: min(45vh, 360px) !important;
    }

    .mobile-quick-head {
        align-items: flex-start !important;
    }

    .mobile-quick-subtitle {
        margin-top: 3px;
        font-size: 12px;
        font-weight: 800;
        color: #75667d;
        line-height: 1.25;
    }

    .mobile-quick-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .mobile-quick-item {
        min-height: 64px !important;
        background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,244,252,0.66)) !important;
    }
}

@media (max-width: 380px) {
    .mobile-quick-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ===== PurrPixels Mobile Phase 10: notifications in bottom nav ===== */
.mobile-notification-count {
    display: none;
}

@media (max-width: 768px) {
    .mobile-notification-nav-icon {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 22px;
    }

    .mobile-notification-count {
        position: absolute;
        top: -8px;
        right: -12px;
        min-width: 17px;
        height: 17px;
        padding: 0 5px;
        border-radius: 999px;
        background: linear-gradient(180deg, #ff7caf, #d94f86);
        color: #fff;
        border: 2px solid rgba(255,255,255,0.98);
        font-size: 9px;
        font-weight: 900;
        line-height: 13px;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 6px rgba(90,74,99,0.20);
    }

    .mobile-notification-count.show {
        display: inline-flex;
    }

    .mobile-notification-list {
        display: grid;
        gap: 8px;
        max-height: min(48vh, 390px);
        overflow-y: auto;
        padding-right: 2px;
    }

    .mobile-notification-item {
        border-radius: 16px !important;
        background: rgba(255,255,255,0.76) !important;
        border: 1px solid rgba(216,184,238,0.58) !important;
    }

    .mobile-notification-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin: 10px 0 12px 0;
    }

    .mobile-notification-actions button {
        width: 100%;
        margin: 0 !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        padding: 8px 10px !important;
        background: rgba(255,255,255,0.76) !important;
        border: 1px solid rgba(216,184,238,0.68) !important;
        color: #5a4664 !important;
    }
}



/* ===== PurrPixels Mobile Phase 11: prettier Office page ===== */
@media (max-width: 768px) {
    body.purr-mobile-game .office-page {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 0 20px 0 !important;
        display: grid;
        gap: 12px;
    }

    body.purr-mobile-game .office-hero {
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: 72px 1fr !important;
        gap: 12px !important;
        align-items: center !important;
        padding: 14px 14px !important;
        margin: 0 0 2px 0 !important;
        border-radius: 24px !important;
        background: linear-gradient(135deg, rgba(255,247,253,0.86), rgba(238,247,255,0.74), rgba(246,230,255,0.76)) !important;
        border: 1px solid rgba(216,184,238,0.70) !important;
        box-shadow: 0 8px 22px rgba(88,64,120,0.10) !important;
        overflow: hidden;
    }

    body.purr-mobile-game .office-hero > div:first-child {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }

    body.purr-mobile-game .office-hero-icon {
        grid-column: 1;
        grid-row: 1;
        width: 66px !important;
        height: 66px !important;
        border-radius: 18px !important;
        margin: 0 !important;
        background: rgba(255,255,255,0.74) !important;
        border: 1px solid rgba(216,184,238,0.62) !important;
        box-shadow: inset 0 0 0 2px rgba(255,255,255,0.42), 0 6px 14px rgba(88,64,120,0.08) !important;
    }

    body.purr-mobile-game .office-hero-icon-img {
        width: 56px !important;
        height: 56px !important;
    }

    body.purr-mobile-game .office-kicker {
        margin: 0 0 3px 0 !important;
        font-size: 11px !important;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #8a2f5a !important;
    }

    body.purr-mobile-game .office-title {
        font-size: 24px !important;
        line-height: 1.05 !important;
        margin: 0 0 4px 0 !important;
        color: #684b5d !important;
        overflow-wrap: anywhere;
    }

    body.purr-mobile-game .office-subtitle {
        font-size: 12px !important;
        line-height: 1.28 !important;
        color: #6c6171 !important;
        margin: 0 !important;
    }

    body.purr-mobile-game .office-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    body.purr-mobile-game .office-grid > div {
        min-width: 0;
        display: grid;
        gap: 12px;
    }

    body.purr-mobile-game .office-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 22px !important;
        border: 1px solid rgba(216,184,238,0.70) !important;
        background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,241,250,0.58)) !important;
        box-shadow: 0 8px 20px rgba(88,64,120,0.09) !important;
        overflow: hidden;
    }

    body.purr-mobile-game .office-card-title {
        padding: 12px 14px !important;
        font-size: 18px !important;
        line-height: 1.1 !important;
        text-align: left !important;
        color: #7a2f58 !important;
        background: linear-gradient(90deg, rgba(255,241,250,0.94), rgba(232,247,255,0.86), rgba(238,225,255,0.88)) !important;
        border-bottom: 1px solid rgba(216,184,238,0.52) !important;
    }

    body.purr-mobile-game .office-card-body {
        padding: 12px !important;
    }

    body.purr-mobile-game .office-note {
        margin: 8px 0 !important;
        padding: 10px 11px !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        border-radius: 14px !important;
        background: rgba(255,255,255,0.58) !important;
        border: 1px solid rgba(216,184,238,0.56) !important;
    }

    body.purr-mobile-game .office-field label {
        margin-bottom: 5px !important;
        font-size: 12px !important;
        color: #7a2f58 !important;
    }

    body.purr-mobile-game .office-field input {
        min-height: 44px !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
        border-color: rgba(194,160,225,0.78) !important;
        background: rgba(240,246,255,0.92) !important;
    }

    body.purr-mobile-game .office-settings-card button,
    body.purr-mobile-game .office-card-body > button {
        width: 100% !important;
        margin: 10px 0 0 0 !important;
        min-height: 44px !important;
        border-radius: 999px !important;
        font-size: 13px !important;
        font-weight: 900 !important;
    }

    body.purr-mobile-game .office-areas-card {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        padding: 0 10px 10px 10px !important;
        overflow: visible !important;
    }

    body.purr-mobile-game .office-areas-card .office-card-title {
        grid-column: 1 / -1;
        margin: 0 -10px 2px -10px !important;
    }

    body.purr-mobile-game .office-action-card {
        min-height: 88px !important;
        padding: 10px 8px !important;
        border-radius: 16px !important;
        background: rgba(255,255,255,0.70) !important;
        border: 1px solid rgba(216,184,238,0.58) !important;
        box-shadow: 0 4px 12px rgba(88,64,120,0.06) !important;
    }

    body.purr-mobile-game .office-action-card:last-child {
        grid-column: 1 / -1;
        min-height: 72px !important;
        display: grid;
        grid-template-columns: 48px 1fr;
        gap: 9px;
        align-items: center;
        text-align: left;
    }

    body.purr-mobile-game .office-action-icon {
        font-size: 28px !important;
        margin: 0 0 5px 0 !important;
        min-height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body.purr-mobile-game .office-action-card:last-child .office-action-icon {
        margin: 0 !important;
    }

    body.purr-mobile-game .office-action-icon-img,
    body.purr-mobile-game .office-area-icon-img {
        width: 40px !important;
        height: 40px !important;
        object-fit: contain !important;
    }

    body.purr-mobile-game .office-action-title {
        font-size: 13px !important;
        line-height: 1.12 !important;
        margin: 0 0 3px 0 !important;
        color: #7a2f58 !important;
    }

    body.purr-mobile-game .office-action-note {
        font-size: 10.5px !important;
        line-height: 1.18 !important;
        color: #6f6474 !important;
        margin: 0 !important;
    }

    body.purr-mobile-game .office-memory-preview-card .office-note:first-child {
        display: none !important;
    }

    body.purr-mobile-game .heaven-mini-card {
        grid-template-columns: 58px 1fr !important;
        gap: 10px !important;
        padding: 10px !important;
        border-radius: 16px !important;
        background: rgba(255,255,255,0.66) !important;
        border-color: rgba(216,184,238,0.58) !important;
    }

    body.purr-mobile-game .heaven-mini-card img {
        width: 56px !important;
        height: 56px !important;
        object-fit: contain !important;
    }

    body.purr-mobile-game .heaven-mini-card button,
    body.purr-mobile-game .heaven-mini-card .link-button {
        grid-column: 1 / -1;
        width: 100%;
        margin-top: 4px !important;
    }
}



/* ===== PurrPixels Mobile Phase 12: Genetics Lab + Login/Register polish ===== */
@media (max-width: 700px) {
    body:not(.public-legal-view) #auth .landing-page {
        padding: 12px 12px 26px 12px !important;
        gap: 10px !important;
    }

    body:not(.public-legal-view) #auth .landing-logo-stage {
        padding-top: 0 !important;
        margin-bottom: -2px !important;
    }

    body:not(.public-legal-view) #auth .landing-logo-center {
        width: 108px !important;
        max-width: 34vw !important;
    }

    body:not(.public-legal-view) #auth .landing-hero,
    body:not(.public-legal-view) #auth .landing-auth-card {
        border-radius: 24px !important;
        box-shadow:
            0 10px 22px rgba(86,58,112,0.11),
            inset 0 0 0 1px rgba(255,255,255,0.30) !important;
    }

    body:not(.public-legal-view) #auth .landing-hero {
        padding: 13px 13px 14px 13px !important;
    }

    body:not(.public-legal-view) #auth .landing-kicker {
        margin-bottom: 8px !important;
        padding: 6px 10px !important;
        font-size: 10.5px !important;
        border-radius: 999px !important;
    }

    body:not(.public-legal-view) #auth .landing-title {
        font-size: 26px !important;
        line-height: 1.02 !important;
        margin-bottom: 7px !important;
    }

    body:not(.public-legal-view) #auth .landing-subtitle {
        max-width: 310px !important;
        margin: 0 auto 9px auto !important;
        font-size: 12px !important;
        line-height: 1.30 !important;
    }

    body:not(.public-legal-view) #auth .landing-stats-row {
        gap: 6px !important;
        margin-bottom: 8px !important;
    }

    body:not(.public-legal-view) #auth .landing-stat-pill {
        min-height: 31px !important;
        padding: 6px 8px !important;
        font-size: 10.5px !important;
        border-radius: 999px !important;
    }

    body:not(.public-legal-view) #auth .landing-stats-row .landing-stat-pill:first-child {
        font-size: 11.5px !important;
    }

    body:not(.public-legal-view) #auth .landing-feature-stack {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    body:not(.public-legal-view) #auth .landing-feature-card-large {
        min-height: 74px !important;
        padding: 7px 5px !important;
        border-radius: 16px !important;
        gap: 5px !important;
        background: linear-gradient(180deg, rgba(255,255,255,0.74), rgba(255,244,252,0.58)) !important;
    }

    body:not(.public-legal-view) #auth .landing-feature-card-icon {
        width: 32px !important;
        height: 32px !important;
        border-radius: 12px !important;
    }

    body:not(.public-legal-view) #auth .landing-feature-card-icon img {
        width: 25px !important;
        height: 25px !important;
    }

    body:not(.public-legal-view) #auth .landing-feature-card-title {
        font-size: 10.5px !important;
        line-height: 1.12 !important;
    }

    body:not(.public-legal-view) #auth .landing-auth-card {
        position: relative !important;
        padding: 13px !important;
    }

    body:not(.public-legal-view) #auth .landing-language-switch {
        margin: 0 0 9px 0 !important;
    }

    body:not(.public-legal-view) #auth .landing-language-button {
        min-width: 42px !important;
        min-height: 38px !important;
        padding: 6px 9px !important;
        border-radius: 999px !important;
    }

    body:not(.public-legal-view) #auth .landing-card-title {
        font-size: 23px !important;
        margin-bottom: 9px !important;
    }

    body:not(.public-legal-view) #auth .landing-auth-tabs {
        margin-bottom: 10px !important;
        padding: 4px !important;
        border-radius: 18px !important;
    }

    body:not(.public-legal-view) #auth .landing-auth-tab {
        min-height: 40px !important;
        border-radius: 14px !important;
        font-size: 14px !important;
    }

    body:not(.public-legal-view) #auth .landing-form-box {
        padding: 12px !important;
        border-radius: 21px !important;
    }

    body:not(.public-legal-view) #auth .landing-form-header {
        grid-template-columns: 44px minmax(0, 1fr) !important;
        text-align: left !important;
        align-items: center !important;
        gap: 9px !important;
        margin-bottom: 10px !important;
    }

    body:not(.public-legal-view) #auth .landing-form-header-icon {
        width: 44px !important;
        height: 44px !important;
        border-radius: 15px !important;
        margin: 0 !important;
    }

    body:not(.public-legal-view) #auth .landing-form-header-icon img {
        width: 34px !important;
        height: 34px !important;
    }

    body:not(.public-legal-view) #auth .landing-form-title {
        font-size: 18px !important;
        margin-bottom: 2px !important;
    }

    body:not(.public-legal-view) #auth .landing-form-subtitle {
        max-width: none !important;
        margin: 0 !important;
        font-size: 11.5px !important;
        line-height: 1.18 !important;
    }

    body:not(.public-legal-view) #auth .landing-input-group {
        margin-bottom: 8px !important;
    }

    body:not(.public-legal-view) #auth .landing-input-label {
        font-size: 12px !important;
        margin-bottom: 4px !important;
    }

    body:not(.public-legal-view) #auth .landing-form-box input,
    body:not(.public-legal-view) #auth .landing-form-box select {
        min-height: 41px !important;
        border-radius: 14px !important;
        padding: 9px 12px !important;
        font-size: 14px !important;
    }

    body:not(.public-legal-view) #auth .landing-password-wrap {
        grid-template-columns: 1fr 43px !important;
        border-radius: 14px !important;
    }

    body:not(.public-legal-view) #auth .landing-password-toggle {
        width: 36px !important;
        height: 33px !important;
        min-height: 33px !important;
        border-radius: 12px !important;
    }

    body:not(.public-legal-view) #auth .landing-remember-row {
        margin: 2px 0 8px 0 !important;
    }

    body:not(.public-legal-view) #auth .landing-main-button {
        min-height: 44px !important;
        margin-top: 6px !important;
        border-radius: 15px !important;
    }

    body:not(.public-legal-view) #auth .landing-register-tip {
        padding: 8px 10px !important;
        font-size: 11.5px !important;
        line-height: 1.25 !important;
        margin-bottom: 8px !important;
    }

    body:not(.public-legal-view) #auth .landing-password-hint,
    body:not(.public-legal-view) #auth .landing-privacy-note,
    body:not(.public-legal-view) #auth .landing-terms-row {
        font-size: 11px !important;
        line-height: 1.25 !important;
    }

    body:not(.public-legal-view) #auth .landing-terms-box {
        padding: 9px !important;
        max-height: 138px !important;
        overflow: auto !important;
    }

    body:not(.public-legal-view) #auth .landing-legal-links {
        margin-top: 9px !important;
        padding: 8px !important;
    }
}

@media (max-width: 370px) {
    body:not(.public-legal-view) #auth .landing-feature-stack {
        grid-template-columns: 1fr !important;
    }

    body:not(.public-legal-view) #auth .landing-feature-card-large {
        min-height: 52px !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        text-align: left !important;
        padding: 8px 10px !important;
    }
}

@media (max-width: 768px) {
    body.purr-mobile-game .genetics-lab-page {
        width: min(100%, 430px) !important;
        margin: 0 auto !important;
        padding: 0 10px 96px 10px !important;
    }

    body.purr-mobile-game .genetics-lab-hero {
        grid-template-columns: 58px minmax(0, 1fr) !important;
        gap: 12px !important;
        padding: 13px !important;
        border-radius: 22px !important;
        text-align: left !important;
        margin-bottom: 12px !important;
    }

    body.purr-mobile-game .genetics-lab-hero > div:first-child {
        grid-column: 2 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
    }

    body.purr-mobile-game .genetics-lab-hero-icon {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 56px !important;
        height: 56px !important;
        border-radius: 18px !important;
        margin: 0 !important;
    }

    body.purr-mobile-game .genetics-lab-hero-icon img {
        width: 46px !important;
        height: 46px !important;
    }

    body.purr-mobile-game .genetics-lab-kicker {
        font-size: 10px !important;
        letter-spacing: 0.03em !important;
        margin-bottom: 3px !important;
    }

    body.purr-mobile-game .genetics-lab-title {
        font-size: 23px !important;
        line-height: 1.04 !important;
        margin-bottom: 4px !important;
    }

    body.purr-mobile-game .genetics-lab-subtitle {
        font-size: 11.5px !important;
        line-height: 1.25 !important;
        display: -webkit-box !important;
        line-clamp: 2 !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    body.purr-mobile-game .genetics-lab-tabs,
    body.purr-mobile-game .genetics-lab-mini-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        overflow-x: auto !important;
        padding: 0 2px 7px 2px !important;
        margin-bottom: 10px !important;
        scrollbar-width: none !important;
    }

    body.purr-mobile-game .genetics-lab-tabs::-webkit-scrollbar,
    body.purr-mobile-game .genetics-lab-mini-tabs::-webkit-scrollbar {
        display: none !important;
    }

    body.purr-mobile-game .genetics-lab-tab,
    body.purr-mobile-game .genetics-lab-mini-tab {
        flex: 0 0 auto !important;
        min-width: 118px !important;
        min-height: 40px !important;
        padding: 8px 12px !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    body.purr-mobile-game .genetics-lab-panel {
        border-radius: 20px !important;
        margin-bottom: 12px !important;
        box-shadow: 0 7px 16px rgba(88,64,120,0.08) !important;
    }

    body.purr-mobile-game .genetics-lab-panel-title {
        padding: 10px 12px !important;
        font-size: 17px !important;
    }

    body.purr-mobile-game .genetics-lab-panel-body {
        padding: 12px !important;
    }

    body.purr-mobile-game .genetics-lab-selector-grid,
    body.purr-mobile-game .genetics-lab-parent-grid,
    body.purr-mobile-game .genetics-project-form-grid,
    body.purr-mobile-game .genetics-project-target-grid,
    body.purr-mobile-game .genetics-research-items,
    body.purr-mobile-game .genetics-phase2-grid,
    body.purr-mobile-game .genetics-phase3-summary-grid,
    body.purr-mobile-game .genetics-phase3-two-column,
    body.purr-mobile-game .genetics-phase3-gene-grid,
    body.purr-mobile-game .genetics-phase3-step-form {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body.purr-mobile-game .genetics-lab-cat-preview {
        grid-template-columns: 82px minmax(0, 1fr) !important;
        gap: 10px !important;
        text-align: left !important;
        padding: 10px !important;
        margin-top: 10px !important;
        border-radius: 16px !important;
    }

    body.purr-mobile-game .genetics-lab-cat-preview img {
        width: 78px !important;
        height: 78px !important;
        margin: 0 !important;
    }

    body.purr-mobile-game .genetics-lab-cat-name {
        font-size: 18px !important;
        margin-bottom: 3px !important;
    }

    body.purr-mobile-game .genetics-lab-cat-meta {
        font-size: 11.5px !important;
        line-height: 1.25 !important;
    }

    body.purr-mobile-game .genetics-lab-dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 10px !important;
    }

    body.purr-mobile-game .genetics-lab-profile-grid,
    body.purr-mobile-game .genetics-lab-value-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    body.purr-mobile-game .genetics-lab-profile-card,
    body.purr-mobile-game .genetics-lab-value-card,
    body.purr-mobile-game .genetics-lab-cert,
    body.purr-mobile-game .genetics-lab-alert-card,
    body.purr-mobile-game .genetics-lab-history-card,
    body.purr-mobile-game .genetics-lab-why-card,
    body.purr-mobile-game .genetics-lab-preview-card,
    body.purr-mobile-game .genetics-lab-test-card,
    body.purr-mobile-game .genetics-phase2-card,
    body.purr-mobile-game .genetics-saved-pairing-card,
    body.purr-mobile-game .genetics-project-card,
    body.purr-mobile-game .genetics-achievement-card {
        border-radius: 15px !important;
        padding: 10px !important;
    }

    body.purr-mobile-game .genetics-lab-profile-value,
    body.purr-mobile-game .genetics-lab-market-score,
    body.purr-mobile-game .genetics-project-stat-value {
        font-size: 21px !important;
    }

    body.purr-mobile-game .genetics-lab-profile-label,
    body.purr-mobile-game .genetics-lab-soft-label,
    body.purr-mobile-game .genetics-project-stat-label {
        font-size: 10px !important;
        line-height: 1.1 !important;
    }

    body.purr-mobile-game .genetics-lab-test-grid,
    body.purr-mobile-game .genetics-lab-test-group-grid {
        grid-template-columns: 1fr !important;
        gap: 9px !important;
        margin-top: 10px !important;
    }

    body.purr-mobile-game .genetics-lab-test-name,
    body.purr-mobile-game .genetics-phase2-card-title,
    body.purr-mobile-game .genetics-lab-cert-title {
        font-size: 15px !important;
        margin-bottom: 5px !important;
    }

    body.purr-mobile-game .genetics-lab-test-result {
        min-height: auto !important;
        padding: 7px 9px !important;
        margin-bottom: 7px !important;
        font-size: 12px !important;
    }

    body.purr-mobile-game .genetics-lab-test-cost,
    body.purr-mobile-game .genetics-phase2-card-subtitle,
    body.purr-mobile-game .genetics-phase2-meta,
    body.purr-mobile-game .genetics-match-good,
    body.purr-mobile-game .genetics-match-risk {
        font-size: 11.5px !important;
        line-height: 1.28 !important;
    }

    body.purr-mobile-game .genetics-lab-section-title {
        font-size: 15px !important;
        margin: 12px 0 7px 0 !important;
    }

    body.purr-mobile-game .genetics-lab-chip-list,
    body.purr-mobile-game .genetics-lab-genotype-chips,
    body.purr-mobile-game .genetics-target-chip-list {
        gap: 5px !important;
    }

    body.purr-mobile-game .genetics-lab-chip,
    body.purr-mobile-game .genetics-lab-genotype-chip,
    body.purr-mobile-game .genetics-target-chip,
    body.purr-mobile-game .genetics-lab-test-badge,
    body.purr-mobile-game .genetics-phase2-badge {
        font-size: 10.5px !important;
        padding: 5px 7px !important;
    }

    body.purr-mobile-game .genetics-lab-cert-row,
    body.purr-mobile-game .genetics-lab-history-row,
    body.purr-mobile-game .genetics-lab-why-row {
        grid-template-columns: 1fr !important;
        gap: 2px !important;
        padding: 6px 0 !important;
        font-size: 11.5px !important;
    }

    body.purr-mobile-game .genetics-lab-parent-card {
        grid-template-columns: 78px minmax(0, 1fr) !important;
        gap: 10px !important;
        padding: 10px !important;
        text-align: left !important;
    }

    body.purr-mobile-game .genetics-lab-parent-card img {
        width: 74px !important;
        height: 74px !important;
    }

    body.purr-mobile-game .genetics-project-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    body.purr-mobile-game .genetics-project-stat {
        padding: 8px !important;
        border-radius: 12px !important;
    }

    body.purr-mobile-game .genetics-phase2-actions {
        gap: 6px !important;
    }

    body.purr-mobile-game .genetics-phase2-actions button,
    body.purr-mobile-game .genetics-lab-test-card button,
    body.purr-mobile-game .genetics-lab-panel-body > button {
        min-height: 38px !important;
        border-radius: 13px !important;
        font-size: 12px !important;
    }

    body.purr-mobile-game .genetics-research-item-head {
        grid-template-columns: 78px minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    body.purr-mobile-game .genetics-research-item-icon-wrap {
        width: 76px !important;
        height: 76px !important;
        border-radius: 15px !important;
    }

    body.purr-mobile-game .genetics-research-item-icon-wrap img {
        width: 68px !important;
        height: 68px !important;
    }

    body.purr-mobile-game .genetics-research-item-name {
        font-size: 15px !important;
    }
}

@media (max-width: 370px) {
    body.purr-mobile-game .genetics-lab-profile-grid,
    body.purr-mobile-game .genetics-lab-value-grid {
        grid-template-columns: 1fr !important;
    }

    body.purr-mobile-game .genetics-lab-cat-preview,
    body.purr-mobile-game .genetics-lab-parent-card,
    body.purr-mobile-game .genetics-research-item-head {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }

    body.purr-mobile-game .genetics-lab-cat-preview img,
    body.purr-mobile-game .genetics-lab-parent-card img,
    body.purr-mobile-game .genetics-research-item-icon-wrap {
        margin: 0 auto !important;
    }
}



/* ===== PurrPixels Mobile Phase 13: Market, Sell, Offers + Item Shop polish ===== */
@media (max-width: 768px) {
    body.purr-mobile-game .sale-page,
    body.purr-mobile-game .sell-cat-page,
    body.purr-mobile-game .reserved-cats-page,
    body.purr-mobile-game .object-shop-page {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 0 22px 0 !important;
    }

    /* Shared app-card look */
    body.purr-mobile-game .sale-card,
    body.purr-mobile-game .sale-list,
    body.purr-mobile-game .sell-cat-card,
    body.purr-mobile-game .reserved-cats-intro,
    body.purr-mobile-game .reserved-cat-card,
    body.purr-mobile-game .object-shop-main,
    body.purr-mobile-game .my-objects-panel,
    body.purr-mobile-game .object-category,
    body.purr-mobile-game .object-card {
        border-radius: 22px !important;
        border: 1px solid rgba(216,184,238,0.70) !important;
        background: linear-gradient(180deg, rgba(255,252,255,0.84), rgba(255,241,250,0.62)) !important;
        box-shadow: 0 8px 20px rgba(88,64,120,0.09) !important;
        overflow: hidden;
    }

    body.purr-mobile-game .sale-card-title,
    body.purr-mobile-game .sell-cat-card-title,
    body.purr-mobile-game .object-panel-title,
    body.purr-mobile-game .object-category-title,
    body.purr-mobile-game .my-object-category-title {
        padding: 11px 13px !important;
        font-size: 18px !important;
        line-height: 1.12 !important;
        color: #7a2f58 !important;
        background: linear-gradient(90deg, rgba(255,241,250,0.94), rgba(232,247,255,0.86), rgba(238,225,255,0.88)) !important;
        border-bottom: 1px solid rgba(216,184,238,0.52) !important;
    }

    /* Cat Market */
    body.purr-mobile-game .sale-top-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin: 0 0 10px 0 !important;
    }

    body.purr-mobile-game .sale-big-action {
        min-width: 0 !important;
        min-height: 46px !important;
        width: 100% !important;
        margin: 0 !important;
        border-radius: 16px !important;
        padding: 9px 8px !important;
        font-size: 12px !important;
        line-height: 1.1 !important;
    }

    body.purr-mobile-game .sale-tabs {
        margin: 0 0 10px 0 !important;
        padding: 0 2px 2px 2px !important;
        display: flex !important;
        gap: 7px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    body.purr-mobile-game .sale-tabs::-webkit-scrollbar {
        display: none;
    }

    body.purr-mobile-game .sale-tab {
        flex: 0 0 auto;
        border-radius: 999px !important;
        border: 1px solid rgba(216,184,238,0.74) !important;
        padding: 8px 12px !important;
        margin: 0 !important;
        font-size: 12px !important;
        line-height: 1 !important;
    }

    body.purr-mobile-game .sale-card {
        padding: 12px !important;
        margin: 0 0 10px 0 !important;
    }

    body.purr-mobile-game .sale-filter-grid,
    body.purr-mobile-game .market-compact-main-grid,
    body.purr-mobile-game .market-advanced-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    body.purr-mobile-game .sale-filter-grid label,
    body.purr-mobile-game .market-advanced-grid label {
        font-size: 11px !important;
        margin-bottom: 3px !important;
        line-height: 1.1 !important;
    }

    body.purr-mobile-game .sale-filter-grid input,
    body.purr-mobile-game .sale-filter-grid select,
    body.purr-mobile-game .market-advanced-grid input,
    body.purr-mobile-game .market-advanced-grid select {
        min-height: 38px !important;
        border-radius: 12px !important;
        padding: 8px 9px !important;
        font-size: 12px !important;
    }

    body.purr-mobile-game .sale-checkbox-line,
    body.purr-mobile-game .market-filter-actions,
    body.purr-mobile-game .market-compact-actions {
        grid-column: 1 / -1 !important;
    }

    body.purr-mobile-game .sale-list {
        margin: 0 !important;
    }

    body.purr-mobile-game .sale-list-head {
        display: none !important;
    }

    body.purr-mobile-game .sale-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 10px !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(216,184,238,0.45) !important;
        background: rgba(255,255,255,0.58) !important;
    }

    body.purr-mobile-game .sale-cat-cell {
        display: grid !important;
        grid-template-columns: 70px minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: center !important;
    }

    body.purr-mobile-game .sale-cat-cell img {
        width: 66px !important;
        height: 66px !important;
        object-fit: contain !important;
    }

    body.purr-mobile-game .sale-cat-name {
        font-size: 15px !important;
        line-height: 1.12 !important;
        margin-bottom: 2px !important;
        color: #7a2f58 !important;
        overflow-wrap: anywhere;
    }

    body.purr-mobile-game .sale-sex,
    body.purr-mobile-game .sale-cattery-name {
        font-size: 11px !important;
        line-height: 1.18 !important;
    }

    body.purr-mobile-game .sale-performance {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        color: #5b5364 !important;
    }

    body.purr-mobile-game .sale-performance div,
    body.purr-mobile-game .sale-price {
        background: rgba(255,255,255,0.68) !important;
        border: 1px solid rgba(216,184,238,0.48) !important;
        border-radius: 12px !important;
        padding: 7px 8px !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
    }

    body.purr-mobile-game .sale-performance b {
        font-size: 12px !important;
    }

    body.purr-mobile-game .sale-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 7px !important;
        align-items: stretch !important;
    }

    body.purr-mobile-game .sale-actions button,
    body.purr-mobile-game .sale-actions .sale-bid-input {
        width: 100% !important;
        min-height: 38px !important;
        margin: 0 !important;
        border-radius: 13px !important;
        font-size: 12px !important;
    }

    /* Sell a Cat */
    body.purr-mobile-game .sell-cat-hero {
        display: grid !important;
        grid-template-columns: 62px minmax(0, 1fr) !important;
        gap: 11px !important;
        align-items: center !important;
        padding: 13px 14px !important;
        margin: 0 0 10px 0 !important;
        border-radius: 24px !important;
    }

    body.purr-mobile-game .sell-cat-title {
        font-size: 23px !important;
        line-height: 1.05 !important;
        margin: 0 0 3px 0 !important;
    }

    body.purr-mobile-game .sell-cat-subtitle {
        font-size: 12px !important;
        line-height: 1.28 !important;
        margin: 0 !important;
    }

    body.purr-mobile-game .sell-cat-layout,
    body.purr-mobile-game .cat-sale-preview,
    body.purr-mobile-game .cat-manage-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body.purr-mobile-game .sell-cat-card {
        padding: 12px !important;
        margin: 0 0 10px 0 !important;
    }

    body.purr-mobile-game .sell-cat-field {
        margin-bottom: 10px !important;
    }

    body.purr-mobile-game .sell-cat-field label {
        font-size: 12px !important;
        margin-bottom: 4px !important;
    }

    body.purr-mobile-game .sell-cat-field input,
    body.purr-mobile-game .sell-cat-field select,
    body.purr-mobile-game .sale-info-box input {
        min-height: 42px !important;
        border-radius: 13px !important;
        padding: 9px 10px !important;
        font-size: 13px !important;
    }

    body.purr-mobile-game .sell-cat-search-wrap {
        margin-bottom: 9px !important;
        border-radius: 18px !important;
    }

    body.purr-mobile-game .sell-cat-preview {
        display: grid !important;
        grid-template-columns: 100px minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: center !important;
        text-align: left !important;
    }

    body.purr-mobile-game .sell-cat-preview > img {
        width: 96px !important;
        height: 96px !important;
        margin: 0 !important;
        object-fit: contain !important;
    }

    body.purr-mobile-game .sell-cat-preview-name {
        font-size: 17px !important;
        line-height: 1.12 !important;
    }

    body.purr-mobile-game .sell-cat-preview-meta,
    body.purr-mobile-game .sell-cat-info-box {
        font-size: 11.5px !important;
        line-height: 1.28 !important;
    }

    body.purr-mobile-game .sell-cat-preview .cat-sex-icon-wrap {
        width: 22px !important;
        height: 22px !important;
        flex: 0 0 22px !important;
    }

    body.purr-mobile-game .sell-cat-preview .cat-sex-icon-wrap img {
        width: 22px !important;
        height: 22px !important;
        max-width: 22px !important;
        max-height: 22px !important;
        object-fit: contain !important;
    }

    body.purr-mobile-game .sell-cat-create-btn,
    body.purr-mobile-game .sell-cat-card button {
        min-height: 42px !important;
        width: 100% !important;
        border-radius: 999px !important;
        font-size: 13px !important;
        margin: 6px 0 0 0 !important;
    }

    /* PurrPixels Offers */
    body.purr-mobile-game .reserved-cats-intro {
        padding: 13px 14px !important;
        margin: 0 0 10px 0 !important;
        font-size: 12px !important;
        line-height: 1.32 !important;
    }

    body.purr-mobile-game .reserved-cats-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    body.purr-mobile-game .reserved-cat-card {
        border-radius: 18px !important;
    }

    body.purr-mobile-game .reserved-cat-image-wrap {
        height: 112px !important;
        min-height: 112px !important;
        border-bottom-color: rgba(216,184,238,0.45) !important;
    }

    body.purr-mobile-game .reserved-cat-image-wrap img {
        width: 104px !important;
        height: 104px !important;
        object-fit: contain !important;
    }

    body.purr-mobile-game .reserved-cat-body {
        padding: 10px !important;
    }

    body.purr-mobile-game .reserved-cat-name {
        font-size: 15px !important;
        line-height: 1.12 !important;
        margin-bottom: 2px !important;
        overflow-wrap: anywhere;
    }

    body.purr-mobile-game .reserved-cat-cattery,
    body.purr-mobile-game .reserved-cat-info div,
    body.purr-mobile-game .reserved-cat-price {
        font-size: 10.5px !important;
        line-height: 1.18 !important;
    }

    body.purr-mobile-game .reserved-cat-info {
        gap: 3px !important;
        margin-bottom: 8px !important;
    }

    body.purr-mobile-game .reserved-cat-info div {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1px !important;
        padding-bottom: 4px !important;
    }

    body.purr-mobile-game .reserved-cat-info span {
        text-align: left !important;
    }

    body.purr-mobile-game .reserved-cat-price {
        padding: 7px 8px !important;
        margin-bottom: 8px !important;
        border-radius: 12px !important;
    }

    body.purr-mobile-game .reserved-cat-card button {
        min-height: 36px !important;
        border-radius: 13px !important;
        padding: 7px !important;
        font-size: 11.5px !important;
    }

    /* Item Shop */
    body.purr-mobile-game .object-shop-page {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body.purr-mobile-game .object-shop-main {
        order: 1;
        width: 100% !important;
    }

    body.purr-mobile-game .my-objects-panel {
        order: 2;
        width: 100% !important;
        max-height: 285px !important;
        overflow-y: auto !important;
    }

    body.purr-mobile-game .object-category {
        margin: 10px !important;
        border-radius: 18px !important;
    }

    body.purr-mobile-game .object-category-intro {
        padding: 9px 11px !important;
        font-size: 11.5px !important;
        line-height: 1.28 !important;
    }

    body.purr-mobile-game .object-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    body.purr-mobile-game .object-card {
        display: grid !important;
        grid-template-columns: 58px minmax(0, 1fr) !important;
        gap: 10px !important;
        min-height: auto !important;
        padding: 10px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
    }

    body.purr-mobile-game .object-icon-wrap {
        width: 54px !important;
        height: 54px !important;
        border-radius: 14px !important;
    }

    body.purr-mobile-game .object-icon-wrap img {
        width: 46px !important;
        height: 46px !important;
    }

    body.purr-mobile-game .object-name {
        font-size: 15px !important;
        line-height: 1.12 !important;
        margin-bottom: 3px !important;
    }

    body.purr-mobile-game .object-origin,
    body.purr-mobile-game .object-desc,
    body.purr-mobile-game .object-price {
        font-size: 11.5px !important;
        line-height: 1.25 !important;
        margin-bottom: 5px !important;
    }

    body.purr-mobile-game .object-use-area select,
    body.purr-mobile-game .object-use-area button {
        min-height: 36px !important;
        width: 100% !important;
        border-radius: 12px !important;
        font-size: 11.5px !important;
        margin: 4px 0 0 0 !important;
        padding: 7px 8px !important;
    }

    body.purr-mobile-game .my-object-row {
        grid-template-columns: 42px minmax(0, 1fr) !important;
        gap: 8px !important;
        padding: 8px 10px !important;
    }

    body.purr-mobile-game .my-object-row img {
        width: 36px !important;
        height: 36px !important;
    }

    body.purr-mobile-game .my-object-name {
        font-size: 12.5px !important;
        line-height: 1.15 !important;
    }

    body.purr-mobile-game .my-object-count,
    body.purr-mobile-game .my-object-note {
        font-size: 10.5px !important;
        line-height: 1.18 !important;
    }
}

@media (max-width: 380px) {
    body.purr-mobile-game .sale-filter-grid,
    body.purr-mobile-game .market-compact-main-grid,
    body.purr-mobile-game .market-advanced-grid,
    body.purr-mobile-game .sale-top-actions,
    body.purr-mobile-game .reserved-cats-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ===== PurrPixels Mobile Phase 14: Sell hero fixes, Stud Service polish + calmer login hero ===== */
@media (max-width: 768px) {
    /* Login / Register: make the mobile landing hero calmer and less blocky. */
    body:not(.purr-mobile-game) .landing-page {
        padding-top: 18px !important;
        padding-bottom: 28px !important;
    }

    body:not(.purr-mobile-game) .landing-hero {
        padding: 18px 18px 20px 18px !important;
        border-radius: 28px !important;
        text-align: center !important;
    }

    body:not(.purr-mobile-game) .landing-badge {
        margin: 0 auto 10px auto !important;
        width: fit-content !important;
        max-width: 100% !important;
        font-size: 11px !important;
        padding: 7px 12px !important;
    }

    body:not(.purr-mobile-game) .landing-title {
        font-size: 25px !important;
        line-height: 1.05 !important;
        letter-spacing: -0.2px !important;
        margin: 8px auto 9px auto !important;
        max-width: 310px !important;
    }

    body:not(.purr-mobile-game) .landing-subtitle {
        font-size: 12px !important;
        line-height: 1.32 !important;
        max-width: 295px !important;
        margin: 0 auto 12px auto !important;
    }

    body:not(.purr-mobile-game) .landing-stats-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin: 12px 0 !important;
    }

    body:not(.purr-mobile-game) .landing-stat-pill {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        font-size: 11px !important;
        padding: 8px 9px !important;
        white-space: normal !important;
        line-height: 1.1 !important;
    }

    body:not(.purr-mobile-game) .landing-stat-pill:first-child {
        grid-column: 1 / -1 !important;
    }

    body:not(.purr-mobile-game) .landing-feature-stack {
        gap: 8px !important;
        margin-top: 10px !important;
    }

    body:not(.purr-mobile-game) .landing-feature-card-large {
        grid-template-columns: 48px minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: center !important;
        text-align: left !important;
        padding: 9px 10px !important;
        min-height: 58px !important;
        border-radius: 18px !important;
    }

    body:not(.purr-mobile-game) .landing-feature-card-icon {
        width: 42px !important;
        height: 42px !important;
        border-radius: 14px !important;
    }

    body:not(.purr-mobile-game) .landing-feature-card-icon img {
        width: 30px !important;
        height: 30px !important;
    }

    body:not(.purr-mobile-game) .landing-feature-badge,
    body:not(.purr-mobile-game) .landing-feature-card-text {
        display: none !important;
    }

    body:not(.purr-mobile-game) .landing-feature-card-title {
        font-size: 13px !important;
        line-height: 1.15 !important;
        margin: 0 !important;
    }

    /* Sell a Cat: fix the narrow text column that stacked "Sell a Cat". */
    body.purr-mobile-game .sell-cat-hero.sell-cat-hero-with-icon {
        grid-template-columns: minmax(0, 1fr) 104px !important;
        gap: 12px !important;
        align-items: center !important;
        padding: 14px 16px !important;
        min-height: 154px !important;
    }

    body.purr-mobile-game .sell-cat-hero.sell-cat-hero-with-icon > div:first-child {
        min-width: 0 !important;
        text-align: left !important;
    }

    body.purr-mobile-game .sell-cat-title {
        font-size: 25px !important;
        line-height: 1.02 !important;
        max-width: 160px !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }

    body.purr-mobile-game .sell-cat-subtitle {
        font-size: 12px !important;
        line-height: 1.24 !important;
        max-width: 170px !important;
    }

    body.purr-mobile-game .sell-cat-hero-icon {
        width: 100px !important;
        height: 100px !important;
        border-radius: 26px !important;
        margin-left: auto !important;
    }

    body.purr-mobile-game .sell-cat-hero-icon-img {
        width: 88px !important;
        height: 88px !important;
        object-fit: contain !important;
    }

    /* Stud Service page */
    body.purr-mobile-game .stud-market-page,
    body.purr-mobile-game .find-stud-page {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 0 24px 0 !important;
    }

    body.purr-mobile-game .section-title + .stud-market-page {
        margin-top: 0 !important;
    }

    body.purr-mobile-game .section-title:has(+ .stud-market-page) {
        display: none !important;
    }

    body.purr-mobile-game .stud-market-hero,
    body.purr-mobile-game .find-stud-hero {
        border-radius: 24px !important;
        padding: 16px !important;
        margin: 0 0 10px 0 !important;
        background: linear-gradient(135deg, rgba(255,246,252,0.88), rgba(238,247,255,0.78), rgba(238,225,255,0.76)) !important;
        border: 1px solid rgba(216,184,238,0.70) !important;
        box-shadow: 0 8px 20px rgba(88,64,120,0.09) !important;
        position: relative !important;
        overflow: hidden !important;
    }

    body.purr-mobile-game .stud-market-hero::after,
    body.purr-mobile-game .find-stud-hero::after {
        content: "💕";
        position: absolute;
        right: 16px;
        top: 14px;
        width: 54px;
        height: 54px;
        border-radius: 18px;
        background: rgba(255,255,255,0.66);
        border: 1px solid rgba(216,184,238,0.56);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        box-shadow: inset 0 0 0 2px rgba(255,255,255,0.34);
    }

    body.purr-mobile-game .find-stud-hero img {
        width: 92px !important;
        height: 92px !important;
        margin: 0 auto 8px auto !important;
    }

    body.purr-mobile-game .stud-market-kicker {
        color: #8a2f5a !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        margin-bottom: 4px !important;
    }

    body.purr-mobile-game .stud-market-title,
    body.purr-mobile-game .find-stud-title {
        font-size: 25px !important;
        line-height: 1.05 !important;
        margin: 0 64px 6px 0 !important;
        color: #684b5d !important;
    }

    body.purr-mobile-game .stud-market-subtitle,
    body.purr-mobile-game .find-stud-subtitle {
        font-size: 12px !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        max-width: none !important;
        padding-right: 58px !important;
        display: -webkit-box !important;
        line-clamp: 3 !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    body.purr-mobile-game .stud-market-toolbar,
    body.purr-mobile-game .find-stud-filter-card,
    body.purr-mobile-game .stud-filter-card,
    body.purr-mobile-game .find-stud-list {
        border-radius: 22px !important;
        border: 1px solid rgba(216,184,238,0.70) !important;
        background: linear-gradient(180deg, rgba(255,252,255,0.86), rgba(255,241,250,0.62)) !important;
        box-shadow: 0 8px 20px rgba(88,64,120,0.08) !important;
        overflow: hidden !important;
    }

    body.purr-mobile-game .stud-market-toolbar {
        padding: 12px !important;
        margin-bottom: 10px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    body.purr-mobile-game .stud-market-toolbar label {
        font-size: 12px !important;
        color: #7a2f58 !important;
    }

    body.purr-mobile-game .stud-market-toolbar select,
    body.purr-mobile-game .stud-market-toolbar button {
        width: 100% !important;
        min-height: 42px !important;
        border-radius: 14px !important;
        margin: 0 !important;
        font-size: 13px !important;
    }

    body.purr-mobile-game .stud-filter-card {
        padding: 12px !important;
        margin-bottom: 10px !important;
    }

    body.purr-mobile-game .stud-filter-title-row,
    body.purr-mobile-game .stud-filter-title-row.compact {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        gap: 8px !important;
        align-items: center !important;
        margin-bottom: 10px !important;
    }

    body.purr-mobile-game .stud-filter-title {
        font-size: 19px !important;
        line-height: 1.1 !important;
    }

    body.purr-mobile-game .stud-filter-note {
        display: none !important;
    }

    body.purr-mobile-game .stud-quick-filter-grid,
    body.purr-mobile-game .stud-service-quick-grid,
    body.purr-mobile-game .stud-advanced-grid,
    body.purr-mobile-game .stud-service-advanced-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    body.purr-mobile-game .stud-filter-group {
        padding: 10px !important;
        border-radius: 17px !important;
        border: 1px solid rgba(216,184,238,0.54) !important;
        background: rgba(255,255,255,0.62) !important;
    }

    body.purr-mobile-game .stud-filter-group-title {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }

    body.purr-mobile-game .stud-filter-field label {
        font-size: 11px !important;
    }

    body.purr-mobile-game .stud-filter-field input,
    body.purr-mobile-game .stud-filter-field select {
        min-height: 38px !important;
        border-radius: 12px !important;
        font-size: 12px !important;
        padding: 7px 8px !important;
    }

    body.purr-mobile-game .stud-filter-actions,
    body.purr-mobile-game .find-stud-filter-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 7px !important;
        margin-top: 9px !important;
    }

    body.purr-mobile-game .stud-filter-actions button,
    body.purr-mobile-game .find-stud-filter-actions button {
        width: 100% !important;
        min-height: 38px !important;
        margin: 0 !important;
        border-radius: 13px !important;
        font-size: 12px !important;
    }

    body.purr-mobile-game .find-stud-tabs,
    body.purr-mobile-game .stud-service-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 7px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 8px 0 10px 0 !important;
        padding: 0 2px 2px 2px !important;
    }

    body.purr-mobile-game .find-stud-tab {
        flex: 0 0 auto !important;
        border-radius: 999px !important;
        border: 1px solid rgba(216,184,238,0.70) !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
        background: rgba(255,255,255,0.76) !important;
    }

    body.purr-mobile-game .find-stud-tab.active {
        background: linear-gradient(180deg, rgba(255,241,250,0.96), rgba(238,247,255,0.90)) !important;
        color: #8a2f5a !important;
    }

    body.purr-mobile-game .find-stud-list {
        margin-bottom: 80px !important;
    }

    body.purr-mobile-game .find-stud-head {
        display: none !important;
    }

    body.purr-mobile-game .find-stud-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        padding: 12px !important;
        background: rgba(255,255,255,0.62) !important;
        border-bottom: 1px solid rgba(216,184,238,0.48) !important;
    }

    body.purr-mobile-game .find-stud-cat-cell {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: 74px minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: center !important;
    }

    body.purr-mobile-game .find-stud-cat-cell img {
        width: 68px !important;
        height: 68px !important;
        border-radius: 16px !important;
        background: rgba(255,244,252,0.72) !important;
        border: 1px solid rgba(216,184,238,0.48) !important;
        object-fit: contain !important;
    }

    body.purr-mobile-game .find-stud-name {
        font-size: 14px !important;
        line-height: 1.15 !important;
    }

    body.purr-mobile-game .find-stud-pedigree-name {
        margin-top: 2px !important;
        font-size: 11px !important;
        line-height: 1.18 !important;
    }

    body.purr-mobile-game .find-stud-owner,
    body.purr-mobile-game .find-stud-source {
        font-size: 11px !important;
    }

    body.purr-mobile-game .find-stud-row > div:not(.find-stud-cat-cell):not(.sale-actions) {
        background: rgba(255,255,255,0.56) !important;
        border: 1px solid rgba(216,184,238,0.45) !important;
        border-radius: 14px !important;
        padding: 8px !important;
        font-size: 12px !important;
        line-height: 1.18 !important;
        min-width: 0 !important;
    }

    body.purr-mobile-game .find-stud-value,
    body.purr-mobile-game .find-stud-price {
        font-size: 13px !important;
        font-weight: 900 !important;
        text-align: center !important;
    }

    body.purr-mobile-game .find-stud-row .sale-actions {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    body.purr-mobile-game .find-stud-row .sale-actions button {
        width: 100% !important;
        min-height: 40px !important;
        border-radius: 14px !important;
        margin: 0 !important;
        font-size: 13px !important;
    }
}

@media (max-width: 380px) {
    body.purr-mobile-game .sell-cat-hero.sell-cat-hero-with-icon {
        grid-template-columns: minmax(0, 1fr) 82px !important;
        min-height: 132px !important;
    }

    body.purr-mobile-game .sell-cat-title {
        font-size: 23px !important;
        max-width: 150px !important;
    }

    body.purr-mobile-game .sell-cat-subtitle {
        font-size: 11px !important;
        max-width: 155px !important;
    }

    body.purr-mobile-game .sell-cat-hero-icon {
        width: 82px !important;
        height: 82px !important;
        border-radius: 22px !important;
    }

    body.purr-mobile-game .sell-cat-hero-icon-img {
        width: 72px !important;
        height: 72px !important;
    }
}


/* ===== PurrPixels Mobile Phase 15: centered landing features + My Page polish ===== */
@media (max-width: 768px) {
    /* Login/Landing feature rows: center the icon + text as one group. */
    body:not(.purr-mobile-game) .landing-feature-card-large {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        gap: 10px !important;
        padding: 10px 12px !important;
        min-height: 58px !important;
    }

    body:not(.purr-mobile-game) .landing-feature-card-icon {
        flex: 0 0 42px !important;
        margin: 0 !important;
    }

    body:not(.purr-mobile-game) .landing-feature-card-content {
        flex: 0 1 auto !important;
        min-width: 0 !important;
    }

    body:not(.purr-mobile-game) .landing-feature-card-title {
        text-align: center !important;
        white-space: normal !important;
    }

    /* My Page / Breeder profile mobile */
    body.purr-mobile-game .breeder-page-clean {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 0 86px 0 !important;
    }

    body.purr-mobile-game .breeder-clean-hero {
        display: grid !important;
        grid-template-columns: 82px minmax(0, 1fr) !important;
        gap: 12px !important;
        align-items: center !important;
        text-align: left !important;
        padding: 14px !important;
        margin: 0 0 10px 0 !important;
        border-radius: 24px !important;
        background: linear-gradient(135deg, rgba(255,246,252,0.88), rgba(238,247,255,0.78), rgba(238,225,255,0.76)) !important;
        border: 1px solid rgba(216,184,238,0.70) !important;
        box-shadow: 0 8px 20px rgba(88,64,120,0.09) !important;
    }

    body.purr-mobile-game .breeder-clean-avatar {
        width: 76px !important;
        height: 76px !important;
        margin: 0 !important;
        border-radius: 22px !important;
        border-width: 1px !important;
    }

    body.purr-mobile-game .breeder-clean-avatar-placeholder {
        width: 50px !important;
        height: 50px !important;
    }

    body.purr-mobile-game .breeder-clean-kicker {
        font-size: 11px !important;
        line-height: 1.1 !important;
        margin-bottom: 4px !important;
    }

    body.purr-mobile-game .breeder-clean-title {
        font-size: 23px !important;
        line-height: 1.03 !important;
        margin: 0 0 4px 0 !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
    }

    body.purr-mobile-game .breeder-clean-subtitle {
        font-size: 12px !important;
        line-height: 1.25 !important;
        margin: 0 0 8px 0 !important;
        color: #6e6174 !important;
    }

    body.purr-mobile-game .breeder-clean-badge-row {
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 6px !important;
        padding-bottom: 2px !important;
    }

    body.purr-mobile-game .breeder-clean-badge {
        flex: 0 0 auto !important;
        font-size: 10px !important;
        padding: 5px 8px !important;
        white-space: nowrap !important;
    }

    body.purr-mobile-game .breeder-clean-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 7px !important;
        margin-top: 10px !important;
        grid-column: 1 / -1 !important;
    }

    body.purr-mobile-game .breeder-clean-action {
        width: 100% !important;
        min-height: 36px !important;
        margin: 0 !important;
        border-radius: 13px !important;
        padding: 7px 8px !important;
        font-size: 11px !important;
        text-align: center !important;
    }

    body.purr-mobile-game .breeder-clean-layout {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 0 !important;
    }

    body.purr-mobile-game .breeder-clean-card {
        border-radius: 22px !important;
        margin: 0 0 10px 0 !important;
        border: 1px solid rgba(216,184,238,0.70) !important;
        background: linear-gradient(180deg, rgba(255,252,255,0.84), rgba(255,241,250,0.62)) !important;
        box-shadow: 0 8px 20px rgba(88,64,120,0.08) !important;
        overflow: hidden !important;
    }

    body.purr-mobile-game .breeder-clean-card-title {
        padding: 10px 12px !important;
        font-size: 17px !important;
        line-height: 1.12 !important;
        color: #7a2f58 !important;
        background: linear-gradient(90deg, rgba(255,241,250,0.94), rgba(232,247,255,0.86), rgba(238,225,255,0.88)) !important;
    }

    body.purr-mobile-game .breeder-clean-card-body {
        padding: 11px 12px !important;
    }

    body.purr-mobile-game .breeder-clean-stats {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    body.purr-mobile-game .breeder-clean-stat {
        min-height: 58px !important;
        padding: 8px 6px !important;
        border-radius: 16px !important;
        background: rgba(255,255,255,0.66) !important;
        border: 1px solid rgba(216,184,238,0.52) !important;
    }

    body.purr-mobile-game .breeder-clean-stat-value {
        font-size: 20px !important;
        line-height: 1.05 !important;
    }

    body.purr-mobile-game .breeder-clean-stat-label {
        font-size: 10px !important;
        line-height: 1.12 !important;
        margin-top: 3px !important;
    }

    body.purr-mobile-game .breeder-clean-presentation {
        min-height: 86px !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    body.purr-mobile-game .breeder-clean-presentation textarea {
        min-height: 120px !important;
        font-size: 13px !important;
        border-radius: 14px !important;
    }

    body.purr-mobile-game .breeder-clean-button-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        padding: 11px 12px !important;
    }

    body.purr-mobile-game .breeder-clean-button-grid button,
    body.purr-mobile-game .breeder-clean-card button {
        min-height: 38px !important;
        border-radius: 13px !important;
        font-size: 12px !important;
        margin: 0 !important;
    }

    body.purr-mobile-game .breeder-clean-detail-list {
        padding: 8px 12px !important;
    }

    body.purr-mobile-game .breeder-clean-detail-list div {
        padding: 7px 0 !important;
        gap: 8px !important;
        font-size: 12px !important;
    }

    body.purr-mobile-game .breeder-clean-detail-list span {
        max-width: 58% !important;
        overflow-wrap: anywhere !important;
    }

    body.purr-mobile-game .breeder-clean-trophy-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding: 11px 12px !important;
    }

    body.purr-mobile-game .breeder-clean-trophy {
        border-radius: 16px !important;
        padding: 9px 6px !important;
    }

    body.purr-mobile-game .breeder-clean-trophy img {
        width: 36px !important;
        height: 36px !important;
        margin-bottom: 4px !important;
    }

    body.purr-mobile-game .breeder-clean-trophy-label {
        font-size: 11px !important;
        line-height: 1.1 !important;
    }

    body.purr-mobile-game .breeder-clean-trophy-count {
        margin-top: 5px !important;
        padding: 3px 9px !important;
        font-size: 11px !important;
    }

    body.purr-mobile-game .friend-list.clean,
    body.purr-mobile-game .greeting-list.clean {
        margin: 0 !important;
        border-radius: 16px !important;
    }

    body.purr-mobile-game .friend-row,
    body.purr-mobile-game .greeting-row {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
        padding: 8px 10px !important;
        font-size: 12px !important;
    }

    body.purr-mobile-game .breeder-clean-empty {
        padding: 12px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 380px) {
    body.purr-mobile-game .breeder-clean-hero {
        grid-template-columns: 72px minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    body.purr-mobile-game .breeder-clean-avatar {
        width: 68px !important;
        height: 68px !important;
    }

    body.purr-mobile-game .breeder-clean-title {
        font-size: 21px !important;
    }

    body.purr-mobile-game .breeder-clean-actions,
    body.purr-mobile-game .breeder-clean-button-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ===== PurrPixels Mobile Phase 16: smaller My Page + Admin Panel access ===== */
@media (max-width: 768px) {
    /* Mobile menu admin item */
    #purrMobileAdminMenuItem {
        width: 100% !important;
    }

    #purrMobileProfileAdminButton {
        background: linear-gradient(180deg, rgba(255,246,252,0.98), rgba(238,247,255,0.90)) !important;
        color: #8a2f5a !important;
    }

    /* My Page now uses breeder-profile-* classes, so make that header compact. */
    body.purr-mobile-game .breeder-page-clean {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 0 88px 0 !important;
    }

    body.purr-mobile-game .breeder-profile-top-card {
        display: grid !important;
        grid-template-columns: 82px minmax(0, 1fr) !important;
        gap: 12px !important;
        align-items: start !important;
        text-align: left !important;
        max-width: 100% !important;
        margin: 0 0 10px 0 !important;
        padding: 12px !important;
        border-radius: 24px !important;
        background: linear-gradient(135deg, rgba(255,246,252,0.88), rgba(238,247,255,0.78), rgba(238,225,255,0.76)) !important;
        border: 1px solid rgba(216,184,238,0.70) !important;
        box-shadow: 0 8px 20px rgba(88,64,120,0.09) !important;
    }

    body.purr-mobile-game .breeder-profile-avatar-wrap {
        align-items: center !important;
        gap: 5px !important;
        min-width: 0 !important;
    }

    body.purr-mobile-game .breeder-profile-avatar-stage {
        width: 74px !important;
        height: 74px !important;
    }

    body.purr-mobile-game .breeder-profile-avatar-stage.vip {
        width: 82px !important;
        height: 82px !important;
    }

    body.purr-mobile-game .breeder-profile-avatar,
    body.purr-mobile-game .breeder-profile-avatar-stage.vip .breeder-profile-avatar {
        width: 62px !important;
        height: 62px !important;
        padding: 3px !important;
        border-width: 1px !important;
        box-shadow: inset 0 0 0 2px rgba(255,255,255,0.42), 0 4px 10px rgba(88,64,120,0.08) !important;
    }

    body.purr-mobile-game .breeder-profile-vip-frame {
        width: 86px !important;
        height: 86px !important;
    }

    body.purr-mobile-game .breeder-profile-avatar-wrap .breeder-clean-badge {
        font-size: 9px !important;
        padding: 4px 7px !important;
        line-height: 1 !important;
        max-width: 82px !important;
        justify-content: center !important;
    }

    body.purr-mobile-game .breeder-profile-main {
        min-width: 0 !important;
    }

    body.purr-mobile-game .breeder-profile-name-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 6px !important;
        align-items: start !important;
    }

    body.purr-mobile-game .breeder-profile-kicker {
        font-size: 11px !important;
        line-height: 1.1 !important;
        margin: 0 0 3px 0 !important;
        color: #8a2f5a !important;
    }

    body.purr-mobile-game .breeder-profile-username {
        font-size: 24px !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
        margin: 0 !important;
        overflow-wrap: anywhere !important;
    }

    body.purr-mobile-game .breeder-profile-cattery {
        font-size: 13px !important;
        line-height: 1.12 !important;
        margin-top: 3px !important;
        color: #5b5963 !important;
    }

    body.purr-mobile-game .breeder-profile-status-row {
        justify-content: flex-start !important;
        gap: 5px !important;
        flex-wrap: wrap !important;
    }

    body.purr-mobile-game .breeder-profile-status-pill {
        min-height: 25px !important;
        padding: 4px 7px !important;
        font-size: 10px !important;
        gap: 4px !important;
    }

    body.purr-mobile-game .breeder-online-dot {
        width: 7px !important;
        height: 7px !important;
    }

    body.purr-mobile-game .breeder-profile-info-grid {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        margin-top: 10px !important;
        max-width: none !important;
    }

    body.purr-mobile-game .breeder-profile-info-grid > div {
        display: contents !important;
    }

    body.purr-mobile-game .breeder-profile-info-row {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        min-height: 48px !important;
        gap: 2px !important;
        padding: 7px 5px !important;
        border: 1px solid rgba(216,184,238,0.46) !important;
        border-radius: 14px !important;
        background: rgba(255,255,255,0.58) !important;
        text-align: center !important;
    }

    body.purr-mobile-game .breeder-profile-info-row span {
        font-size: 9px !important;
        line-height: 1.05 !important;
        color: #8a2f5a !important;
    }

    body.purr-mobile-game .breeder-profile-info-row b {
        font-size: 12px !important;
        line-height: 1.1 !important;
        color: #4f4a5e !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
    }

    body.purr-mobile-game .breeder-profile-actions {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 7px !important;
        margin-top: 10px !important;
        justify-content: stretch !important;
    }

    body.purr-mobile-game .breeder-profile-actions .breeder-clean-action {
        width: 100% !important;
        min-height: 34px !important;
        margin: 0 !important;
        border-radius: 13px !important;
        padding: 6px 7px !important;
        font-size: 10px !important;
        text-align: center !important;
    }

    body.purr-mobile-game .breeder-overview-card {
        display: none !important;
    }

    body.purr-mobile-game .breeder-featured-card {
        margin-top: 0 !important;
    }

    body.purr-mobile-game .breeder-featured-intro {
        font-size: 11px !important;
        line-height: 1.25 !important;
        margin-bottom: 9px !important;
    }

    body.purr-mobile-game .breeder-featured-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    body.purr-mobile-game .breeder-featured-cat,
    body.purr-mobile-game .breeder-featured-empty-slot {
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: 104px minmax(0, 1fr) !important;
        gap: 9px !important;
        align-items: center !important;
        text-align: left !important;
        padding: 9px !important;
        border-radius: 18px !important;
        background: rgba(255,255,255,0.62) !important;
        box-shadow: 0 6px 14px rgba(88,64,120,0.06) !important;
    }

    body.purr-mobile-game .breeder-featured-cat-image-wrap {
        grid-row: 1 / span 3 !important;
        width: 104px !important;
        height: 96px !important;
        margin: 0 !important;
        border-radius: 15px !important;
    }

    body.purr-mobile-game .breeder-featured-cat-image-wrap img {
        width: 96px !important;
        height: 92px !important;
    }

    body.purr-mobile-game .breeder-featured-cat-name {
        text-align: left !important;
        font-size: 13px !important;
        line-height: 1.1 !important;
        margin: 0 !important;
        min-height: 0 !important;
    }

    body.purr-mobile-game .breeder-featured-cat-meta {
        font-size: 10px !important;
        line-height: 1.2 !important;
        max-height: 28px !important;
        overflow: hidden !important;
    }

    body.purr-mobile-game .breeder-featured-cat-actions {
        justify-content: flex-start !important;
        gap: 5px !important;
        margin-top: 2px !important;
    }

    body.purr-mobile-game .breeder-featured-cat-actions button {
        min-height: 30px !important;
        padding: 5px 8px !important;
        font-size: 10px !important;
        border-radius: 11px !important;
    }

    body.purr-mobile-game .breeder-featured-empty-slot {
        grid-template-columns: 44px minmax(0, 1fr) !important;
    }

    body.purr-mobile-game .breeder-featured-empty-icon {
        font-size: 28px !important;
        margin: 0 !important;
    }

    body.purr-mobile-game .breeder-featured-empty-title {
        font-size: 13px !important;
        margin: 0 0 3px 0 !important;
    }

    body.purr-mobile-game .breeder-featured-empty-note {
        font-size: 10px !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }

    body.purr-mobile-game .breeder-clean-card {
        border-radius: 20px !important;
        margin-bottom: 9px !important;
    }

    body.purr-mobile-game .breeder-clean-card-title,
    body.purr-mobile-game .breeder-clean-card-title-flex {
        padding: 9px 11px !important;
        font-size: 16px !important;
    }

    body.purr-mobile-game .breeder-clean-card-body {
        padding: 10px 11px !important;
    }

    /* Admin Panel: make it reachable and readable on mobile. */
    body.purr-mobile-game .admin-page {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 0 88px 0 !important;
    }

    body.purr-mobile-game .admin-hero {
        grid-template-columns: minmax(0, 1fr) 62px !important;
        text-align: left !important;
        gap: 10px !important;
        padding: 14px !important;
        margin: 0 0 10px 0 !important;
        border-radius: 24px !important;
        background: linear-gradient(135deg, rgba(255,246,252,0.88), rgba(238,247,255,0.78), rgba(238,225,255,0.76)) !important;
        border: 1px solid rgba(216,184,238,0.70) !important;
    }

    body.purr-mobile-game .admin-hero-icon {
        width: 58px !important;
        height: 58px !important;
        border-radius: 18px !important;
        font-size: 28px !important;
        margin: 0 !important;
    }

    body.purr-mobile-game .admin-kicker {
        font-size: 11px !important;
        margin-bottom: 4px !important;
        color: #8a2f5a !important;
    }

    body.purr-mobile-game .admin-title {
        font-size: 23px !important;
        line-height: 1.05 !important;
        margin-bottom: 5px !important;
    }

    body.purr-mobile-game .admin-subtitle {
        font-size: 11px !important;
        line-height: 1.28 !important;
        display: -webkit-box !important;
        line-clamp: 3 !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    body.purr-mobile-game .admin-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        margin-bottom: 10px !important;
    }

    body.purr-mobile-game .admin-stat-card,
    body.purr-mobile-game .admin-tools-card,
    body.purr-mobile-game .admin-report-card,
    body.purr-mobile-game .admin-empty-card {
        border-radius: 18px !important;
        border: 1px solid rgba(216,184,238,0.70) !important;
        background: rgba(255,255,255,0.72) !important;
        box-shadow: 0 6px 14px rgba(88,64,120,0.06) !important;
    }

    body.purr-mobile-game .admin-stat-card {
        padding: 9px 7px !important;
    }

    body.purr-mobile-game .admin-stat-value {
        font-size: 21px !important;
    }

    body.purr-mobile-game .admin-stat-label {
        font-size: 10px !important;
    }

    body.purr-mobile-game .admin-tools-card {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 11px !important;
        margin-bottom: 10px !important;
    }

    body.purr-mobile-game .admin-search-wrap,
    body.purr-mobile-game .admin-filter-select {
        min-height: 40px !important;
        border-radius: 14px !important;
    }

    body.purr-mobile-game .admin-report-grid {
        gap: 9px !important;
    }

    body.purr-mobile-game .admin-report-head {
        grid-template-columns: 1fr !important;
        gap: 7px !important;
        padding: 10px 12px !important;
    }

    body.purr-mobile-game .admin-report-title {
        font-size: 16px !important;
    }

    body.purr-mobile-game .admin-report-date,
    body.purr-mobile-game .admin-status-badge {
        font-size: 10px !important;
    }

    body.purr-mobile-game .admin-report-body {
        padding: 10px 12px !important;
    }

    body.purr-mobile-game .admin-report-info-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    body.purr-mobile-game .admin-info-mini {
        padding: 7px !important;
        border-radius: 12px !important;
    }

    body.purr-mobile-game .admin-info-label {
        font-size: 9px !important;
    }

    body.purr-mobile-game .admin-info-value {
        font-size: 11px !important;
    }

    body.purr-mobile-game .admin-report-details {
        padding: 9px !important;
        font-size: 11px !important;
        line-height: 1.3 !important;
    }

    body.purr-mobile-game .admin-actions-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    body.purr-mobile-game .admin-actions-row button {
        margin: 0 !important;
        min-height: 34px !important;
        border-radius: 12px !important;
        font-size: 10px !important;
        padding: 6px !important;
    }
}

@media (max-width: 380px) {
    body.purr-mobile-game .breeder-profile-info-grid,
    body.purr-mobile-game .breeder-profile-actions,
    body.purr-mobile-game .admin-stats-grid,
    body.purr-mobile-game .admin-report-info-grid,
    body.purr-mobile-game .admin-actions-row {
        grid-template-columns: 1fr !important;
    }

    body.purr-mobile-game .breeder-profile-top-card {
        grid-template-columns: 74px minmax(0, 1fr) !important;
        gap: 9px !important;
    }

    body.purr-mobile-game .breeder-profile-avatar-stage.vip {
        width: 74px !important;
        height: 74px !important;
    }

    body.purr-mobile-game .breeder-profile-vip-frame {
        width: 78px !important;
        height: 78px !important;
    }
}


/* ===== PurrPixels Mobile Phase 17: Menu cleanup + mobile pages polish ===== */
@media (max-width: 768px) {
    /* Menu now only contains pages not already present in bottom category sheets. */
    body.purr-mobile-game .mobile-menu-sheet .mobile-menu-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    body.purr-mobile-game .mobile-menu-item {
        min-height: 58px !important;
        padding: 9px 10px !important;
        border-radius: 17px !important;
        font-size: 12px !important;
    }

    /* Shared mobile page shell for the pages requested in this step. */
    body.purr-mobile-game .news-page,
    body.purr-mobile-game .subscriptions-page,
    body.purr-mobile-game .vip-subscriptions-page,
    body.purr-mobile-game .currency-shop-page,
    body.purr-mobile-game .breeds-page,
    body.purr-mobile-game .achievements-page,
    body.purr-mobile-game .player-ranking-page,
    body.purr-mobile-game .cat-ranking-page,
    body.purr-mobile-game .mailbox-page {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 0 86px 0 !important;
    }

    body.purr-mobile-game .news-hero,
    body.purr-mobile-game .subscription-hero,
    body.purr-mobile-game .vip-subscriptions-hero,
    body.purr-mobile-game .currency-shop-hero,
    body.purr-mobile-game .breeds-hero,
    body.purr-mobile-game .achievements-hero,
    body.purr-mobile-game .mailbox-hero {
        border-radius: 24px !important;
        padding: 15px !important;
        margin: 0 0 10px 0 !important;
        background: linear-gradient(135deg, rgba(255,246,252,0.88), rgba(238,247,255,0.78), rgba(238,225,255,0.76)) !important;
        border: 1px solid rgba(216,184,238,0.70) !important;
        box-shadow: 0 8px 20px rgba(88,64,120,0.08) !important;
        overflow: hidden !important;
    }

    body.purr-mobile-game .news-hero-with-icon,
    body.purr-mobile-game .subscription-hero,
    body.purr-mobile-game .currency-shop-hero,
    body.purr-mobile-game .breeds-hero,
    body.purr-mobile-game .achievements-hero {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 74px !important;
        gap: 11px !important;
        align-items: center !important;
        text-align: left !important;
    }

    body.purr-mobile-game .news-hero-title,
    body.purr-mobile-game .subscription-title,
    body.purr-mobile-game .currency-shop-title,
    body.purr-mobile-game .breeds-hero-title,
    body.purr-mobile-game .achievements-title,
    body.purr-mobile-game .community-title,
    body.purr-mobile-game .mailbox-title {
        font-size: 24px !important;
        line-height: 1.04 !important;
        margin: 0 0 5px 0 !important;
        color: #684b5d !important;
    }

    body.purr-mobile-game .news-hero-text,
    body.purr-mobile-game .subscription-subtitle,
    body.purr-mobile-game .currency-shop-subtitle,
    body.purr-mobile-game .breeds-hero-text,
    body.purr-mobile-game .achievements-subtitle,
    body.purr-mobile-game .community-subtitle {
        font-size: 12px !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        display: -webkit-box !important;
        line-clamp: 3 !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    body.purr-mobile-game .news-hero-icon,
    body.purr-mobile-game .subscription-hero-icon,
    body.purr-mobile-game .currency-shop-hero-icon,
    body.purr-mobile-game .achievements-icon,
    body.purr-mobile-game .breeds-hero-stats {
        width: 70px !important;
        min-width: 70px !important;
        height: 70px !important;
        border-radius: 20px !important;
        padding: 7px !important;
        margin: 0 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        background: rgba(255,255,255,0.66) !important;
        border: 1px solid rgba(216,184,238,0.55) !important;
        box-shadow: inset 0 0 0 2px rgba(255,255,255,0.32) !important;
        font-size: 22px !important;
    }

    body.purr-mobile-game .news-hero-icon-img,
    body.purr-mobile-game .achievements-icon-img {
        width: 52px !important;
        height: 52px !important;
        object-fit: contain !important;
    }

    /* News */
    body.purr-mobile-game .news-board,
    body.purr-mobile-game .news-list {
        display: grid !important;
        gap: 10px !important;
    }

    body.purr-mobile-game .news-post,
    body.purr-mobile-game .news-item {
        border-radius: 20px !important;
        border: 1px solid rgba(216,184,238,0.68) !important;
        background: linear-gradient(180deg, rgba(255,252,255,0.84), rgba(255,241,250,0.62)) !important;
        box-shadow: 0 8px 18px rgba(88,64,120,0.07) !important;
        overflow: hidden !important;
        margin: 0 !important;
    }

    body.purr-mobile-game .news-post-head {
        padding: 10px 12px !important;
    }

    body.purr-mobile-game .news-post-title,
    body.purr-mobile-game .news-title {
        font-size: 17px !important;
        line-height: 1.16 !important;
    }

    body.purr-mobile-game .news-post-body,
    body.purr-mobile-game .news-text {
        padding: 11px 12px !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    body.purr-mobile-game .news-pagination-wrap,
    body.purr-mobile-game .news-page-numbers {
        gap: 6px !important;
        flex-wrap: wrap !important;
    }

    body.purr-mobile-game .news-page-button {
        min-height: 34px !important;
        border-radius: 12px !important;
        padding: 6px 10px !important;
        font-size: 12px !important;
    }

    /* VIP */
    body.purr-mobile-game .subscription-grid,
    body.purr-mobile-game .vip-plan-layout,
    body.purr-mobile-game .stud-compare-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body.purr-mobile-game .subscription-card,
    body.purr-mobile-game .vip-plan-card,
    body.purr-mobile-game .vip-kitten-table {
        border-radius: 22px !important;
        border: 1px solid rgba(216,184,238,0.70) !important;
        background: linear-gradient(180deg, rgba(255,252,255,0.86), rgba(255,241,250,0.62)) !important;
        box-shadow: 0 8px 20px rgba(88,64,120,0.08) !important;
        overflow: hidden !important;
        margin: 0 0 10px 0 !important;
    }

    body.purr-mobile-game .subscription-card-title {
        padding: 10px 12px !important;
        font-size: 17px !important;
        line-height: 1.14 !important;
    }

    body.purr-mobile-game .subscription-card-body {
        padding: 11px 12px !important;
    }

    body.purr-mobile-game .subscription-feature,
    body.purr-mobile-game .premium-feature {
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) !important;
        gap: 9px !important;
        align-items: center !important;
        padding: 9px !important;
        border-radius: 16px !important;
        font-size: 12px !important;
    }

    body.purr-mobile-game .subscription-feature-icon {
        width: 36px !important;
        height: 36px !important;
        border-radius: 13px !important;
    }

    body.purr-mobile-game .vip-kitten-grid {
        grid-template-columns: 1fr !important;
    }

    /* Coin / Diamond Shop */
    body.purr-mobile-game .currency-shop-page .currency-shop-layout,
    body.purr-mobile-game .currency-shop-layout {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body.purr-mobile-game .currency-pack-grid,
    body.purr-mobile-game .voucher-grid {
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    body.purr-mobile-game .currency-pack-card,
    body.purr-mobile-game .voucher-card,
    body.purr-mobile-game .currency-note-box {
        border-radius: 20px !important;
        padding: 12px !important;
        border: 1px solid rgba(216,184,238,0.68) !important;
        background: linear-gradient(180deg, rgba(255,252,255,0.86), rgba(255,241,250,0.62)) !important;
        box-shadow: 0 8px 18px rgba(88,64,120,0.07) !important;
    }

    body.purr-mobile-game .currency-pack-name,
    body.purr-mobile-game .currency-shop-section-title {
        font-size: 17px !important;
        line-height: 1.15 !important;
    }

    body.purr-mobile-game .currency-pack-info,
    body.purr-mobile-game .currency-note-box {
        font-size: 12px !important;
        line-height: 1.32 !important;
    }

    body.purr-mobile-game .currency-shop-page button,
    body.purr-mobile-game .currency-shop-page input {
        min-height: 40px !important;
        border-radius: 13px !important;
        font-size: 12px !important;
    }

    /* All Breeds */
    body.purr-mobile-game .breeds-hero-stats {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1px !important;
        align-content: center !important;
    }

    body.purr-mobile-game .breeds-stat-number {
        font-size: 20px !important;
        line-height: 1.0 !important;
    }

    body.purr-mobile-game .breeds-stat-label {
        font-size: 9px !important;
        line-height: 1.0 !important;
    }

    body.purr-mobile-game .breeds-hero-stats br {
        display: none !important;
    }

    body.purr-mobile-game .breeds-tools {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 12px !important;
        border-radius: 22px !important;
        margin: 0 0 10px 0 !important;
    }

    body.purr-mobile-game .breeds-search-wrap input,
    body.purr-mobile-game .breeds-sort-select {
        min-height: 40px !important;
        border-radius: 13px !important;
        font-size: 12px !important;
    }

    body.purr-mobile-game .breeds-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 9px !important;
    }

    body.purr-mobile-game .breed-card-beauty {
        border-radius: 20px !important;
        overflow: hidden !important;
        margin: 0 !important;
        min-width: 0 !important;
    }

    body.purr-mobile-game .breed-card-top {
        padding: 10px !important;
        min-height: 120px !important;
    }

    body.purr-mobile-game .breed-card-icon {
        width: 108px !important;
        height: 108px !important;
        margin: 0 auto !important;
    }

    body.purr-mobile-game .breed-card-cat-image {
        width: 100px !important;
        height: 100px !important;
    }

    body.purr-mobile-game .breed-card-count-badge {
        top: 8px !important;
        right: 8px !important;
        font-size: 10px !important;
        padding: 5px 8px !important;
    }

    body.purr-mobile-game .breed-card-body {
        padding: 11px !important;
    }

    body.purr-mobile-game .breed-card-name {
        font-size: 16px !important;
        line-height: 1.1 !important;
    }

    body.purr-mobile-game .breed-card-info {
        display: none !important;
    }

    body.purr-mobile-game .breed-card-button {
        min-height: 36px !important;
        border-radius: 13px !important;
        font-size: 12px !important;
        margin-top: 8px !important;
    }

    /* Achievements */
    body.purr-mobile-game .achievements-button-grid {
        display: flex !important;
        gap: 7px !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 3px !important;
    }

    body.purr-mobile-game .achievement-big-button {
        flex: 0 0 auto !important;
        min-width: 132px !important;
        min-height: 44px !important;
        padding: 8px 10px !important;
        border-radius: 15px !important;
        font-size: 12px !important;
    }

    body.purr-mobile-game .achievements-page .achievement-card,
    body.purr-mobile-game .achievement-card {
        border-radius: 20px !important;
        margin: 0 0 10px 0 !important;
        border: 1px solid rgba(216,184,238,0.68) !important;
    }

    body.purr-mobile-game .achievement-card-title {
        padding: 10px 12px !important;
        font-size: 17px !important;
    }

    body.purr-mobile-game .achievement-info-box {
        padding: 11px 12px !important;
        font-size: 12px !important;
        line-height: 1.32 !important;
    }

    /* Rankings */
    body.purr-mobile-game .player-ranking-grid,
    body.purr-mobile-game .cat-ranking-control-row {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body.purr-mobile-game .player-ranking-reward-card,
    body.purr-mobile-game .player-ranking-board,
    body.purr-mobile-game .cat-ranking-big-card,
    body.purr-mobile-game .ranking-card,
    body.purr-mobile-game .cat-ranking-controls {
        border-radius: 22px !important;
        border: 1px solid rgba(216,184,238,0.70) !important;
        background: linear-gradient(180deg, rgba(255,252,255,0.86), rgba(255,241,250,0.62)) !important;
        box-shadow: 0 8px 20px rgba(88,64,120,0.08) !important;
        overflow: hidden !important;
        margin: 0 0 10px 0 !important;
    }

    body.purr-mobile-game .player-ranking-board-title,
    body.purr-mobile-game .cat-ranking-big-title,
    body.purr-mobile-game .ranking-title,
    body.purr-mobile-game .player-ranking-reward-title {
        padding: 10px 12px !important;
        font-size: 17px !important;
        line-height: 1.12 !important;
    }

    body.purr-mobile-game .player-ranking-head,
    body.purr-mobile-game .cat-ranking-table-head,
    body.purr-mobile-game .cat-ranking-head,
    body.purr-mobile-game .ranking-head {
        display: none !important;
    }

    body.purr-mobile-game .player-ranking-row,
    body.purr-mobile-game .cat-ranking-table-row,
    body.purr-mobile-game .cat-ranking-row,
    body.purr-mobile-game .ranking-row {
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) auto !important;
        gap: 8px !important;
        padding: 10px 12px !important;
        align-items: center !important;
        border-bottom: 1px solid rgba(216,184,238,0.48) !important;
        font-size: 12px !important;
    }

    body.purr-mobile-game .cat-ranking-table-row > div:nth-child(n+4),
    body.purr-mobile-game .cat-ranking-row > div:nth-child(n+4) {
        display: none !important;
    }

    body.purr-mobile-game .cat-ranking-cat-img {
        width: 42px !important;
        height: 42px !important;
        border-radius: 13px !important;
    }

    body.purr-mobile-game .cat-ranking-tabs {
        display: flex !important;
        overflow-x: auto !important;
        gap: 7px !important;
        padding-bottom: 4px !important;
    }

    body.purr-mobile-game .cat-ranking-tab {
        flex: 0 0 auto !important;
        min-height: 38px !important;
        border-radius: 999px !important;
        font-size: 12px !important;
    }

    body.purr-mobile-game .player-ranking-loadmore,
    body.purr-mobile-game .cat-ranking-loadmore,
    body.purr-mobile-game .ranking-loadmore {
        width: 100% !important;
        min-height: 38px !important;
        border-radius: 14px !important;
        font-size: 12px !important;
    }

    /* Mailbox */
    body.purr-mobile-game .mailbox-page .mailbox-hero {
        text-align: left !important;
    }

    body.purr-mobile-game .mailbox-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 7px !important;
        margin: 0 0 10px 0 !important;
        padding-bottom: 3px !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.purr-mobile-game .mailbox-tab {
        flex: 0 0 auto !important;
        min-height: 38px !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        padding: 8px 11px !important;
    }

    body.purr-mobile-game .mailbox-summary-card {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        gap: 10px !important;
        padding: 12px !important;
        border-radius: 20px !important;
        margin: 0 0 10px 0 !important;
    }

    body.purr-mobile-game .mailbox-summary-title {
        font-size: 15px !important;
    }

    body.purr-mobile-game .mailbox-summary-text {
        font-size: 12px !important;
        line-height: 1.25 !important;
    }

    body.purr-mobile-game .mailbox-summary-count {
        width: 44px !important;
        height: 44px !important;
        border-radius: 16px !important;
        font-size: 18px !important;
    }

    body.purr-mobile-game .mailbox-toolbar {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin: 0 0 10px 0 !important;
    }

    body.purr-mobile-game .mailbox-search-wrap input,
    body.purr-mobile-game .mailbox-filter-select {
        min-height: 40px !important;
        border-radius: 13px !important;
        font-size: 12px !important;
    }

    body.purr-mobile-game .mail-conversation-list,
    body.purr-mobile-game .mail-thread-list {
        gap: 8px !important;
    }

    body.purr-mobile-game .mail-conversation-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 72px !important;
        gap: 8px !important;
        align-items: stretch !important;
        padding: 10px !important;
        border-radius: 19px !important;
    }

    body.purr-mobile-game .mail-conversation-open {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        gap: 7px 9px !important;
        align-items: center !important;
        text-align: left !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        color: inherit !important;
        min-height: 0 !important;
    }

    body.purr-mobile-game .mail-list-avatar {
        width: 42px !important;
        height: 42px !important;
        border-radius: 14px !important;
        font-size: 16px !important;
    }

    body.purr-mobile-game .mail-conversation-main {
        min-width: 0 !important;
    }

    body.purr-mobile-game .mail-conversation-person {
        font-size: 13px !important;
    }

    body.purr-mobile-game .mail-conversation-subject {
        font-size: 14px !important;
        line-height: 1.15 !important;
        margin-bottom: 2px !important;
    }

    body.purr-mobile-game .mail-conversation-preview {
        font-size: 11px !important;
        line-height: 1.18 !important;
    }

    body.purr-mobile-game .mail-conversation-meta {
        grid-column: 2 !important;
        min-width: 0 !important;
        text-align: left !important;
        font-size: 10px !important;
    }

    body.purr-mobile-game .mail-conversation-count {
        margin-top: 3px !important;
        padding: 3px 6px !important;
        font-size: 9px !important;
    }

    body.purr-mobile-game .mail-conversation-delete,
    body.purr-mobile-game .mail-danger-button {
        border-radius: 14px !important;
        min-height: 38px !important;
        padding: 7px 8px !important;
        font-size: 11px !important;
        background: linear-gradient(180deg, rgba(255,244,248,0.98), rgba(255,224,238,0.80)) !important;
        border: 1px solid rgba(224,147,181,0.65) !important;
        color: #8a2f5a !important;
        box-shadow: 0 4px 10px rgba(138,47,90,0.08) !important;
    }

    body.purr-mobile-game .mail-thread-header-card {
        display: grid !important;
        grid-template-columns: 54px minmax(0, 1fr) !important;
        gap: 9px !important;
        padding: 12px !important;
        border-radius: 20px !important;
    }

    body.purr-mobile-game .mail-thread-avatar {
        width: 48px !important;
        height: 48px !important;
        border-radius: 15px !important;
    }

    body.purr-mobile-game .mail-thread-subject {
        font-size: 16px !important;
        line-height: 1.15 !important;
    }

    body.purr-mobile-game .mail-thread-person {
        font-size: 11px !important;
        line-height: 1.25 !important;
    }

    body.purr-mobile-game .mail-thread-header-actions {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 7px !important;
    }

    body.purr-mobile-game .mail-thread-header-actions button,
    body.purr-mobile-game .mail-thread-message-actions button,
    body.purr-mobile-game .mail-thread-reply-actions button {
        min-height: 36px !important;
        border-radius: 13px !important;
        margin: 0 !important;
        font-size: 11px !important;
    }

    body.purr-mobile-game .mail-thread-message {
        border-radius: 18px !important;
        padding: 10px !important;
        font-size: 12px !important;
    }

    body.purr-mobile-game .mail-thread-message-head {
        gap: 6px !important;
        flex-wrap: wrap !important;
    }

    body.purr-mobile-game .mail-thread-message-author {
        font-size: 13px !important;
    }

    body.purr-mobile-game .mail-thread-message-date {
        font-size: 10px !important;
    }

    body.purr-mobile-game .mail-thread-message-body {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    body.purr-mobile-game .mail-thread-message-actions,
    body.purr-mobile-game .mail-thread-reply-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 7px !important;
    }

    body.purr-mobile-game .mail-thread-reply-card,
    body.purr-mobile-game .community-card {
        border-radius: 20px !important;
        margin-bottom: 10px !important;
    }

    body.purr-mobile-game .mail-thread-reply-card textarea,
    body.purr-mobile-game .community-message-form input,
    body.purr-mobile-game .community-message-form textarea {
        min-height: 40px !important;
        border-radius: 14px !important;
        font-size: 12px !important;
    }

    body.purr-mobile-game .community-message-form textarea,
    body.purr-mobile-game .mail-thread-reply-card textarea {
        min-height: 110px !important;
    }
}

@media (max-width: 380px) {
    body.purr-mobile-game .breeds-grid {
        grid-template-columns: 1fr !important;
    }

    body.purr-mobile-game .mail-conversation-row {
        grid-template-columns: 1fr !important;
    }

    body.purr-mobile-game .mail-conversation-delete {
        width: 100% !important;
    }

    body.purr-mobile-game .mail-thread-header-actions,
    body.purr-mobile-game .mail-thread-message-actions,
    body.purr-mobile-game .mail-thread-reply-actions {
        grid-template-columns: 1fr !important;
    }
}


/* ===== PurrPixels Mobile Phase 18: remaining menu pages + missing mobile polish ===== */
@media (max-width: 768px) {
    body.purr-mobile-game .mobile-menu-sheet {
        max-height: min(78vh, 640px) !important;
    }

    body.purr-mobile-game .mobile-menu-grid {
        gap: 7px !important;
    }

    body.purr-mobile-game .mobile-menu-item {
        min-height: 52px !important;
        padding: 8px 9px !important;
        font-size: 12px !important;
        border-radius: 15px !important;
    }

    body.purr-mobile-game .mobile-menu-item span:first-child {
        font-size: 18px !important;
    }

    /* Genetics information page */
    body.purr-mobile-game .genetics-info-page,
    body.purr-mobile-game .community-page,
    body.purr-mobile-game .community-feedback-layout,
    body.purr-mobile-game .cats-need-page,
    body.purr-mobile-game .trophies-page,
    body.purr-mobile-game .legal-page {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 0 88px 0 !important;
    }

    body.purr-mobile-game .genetics-info-hero,
    body.purr-mobile-game .community-hero,
    body.purr-mobile-game .cats-need-hero,
    body.purr-mobile-game .legal-hero {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 70px !important;
        gap: 10px !important;
        align-items: center !important;
        padding: 14px !important;
        margin: 0 0 10px 0 !important;
        border-radius: 23px !important;
        background: linear-gradient(135deg, rgba(255,246,252,0.88), rgba(238,247,255,0.78), rgba(238,225,255,0.78)) !important;
        border: 1px solid rgba(216,184,238,0.70) !important;
        box-shadow: 0 8px 20px rgba(88,64,120,0.08) !important;
    }

    body.purr-mobile-game .community-hero,
    body.purr-mobile-game .legal-hero {
        grid-template-columns: 1fr !important;
    }

    body.purr-mobile-game .genetics-info-title,
    body.purr-mobile-game .community-title,
    body.purr-mobile-game .cats-need-title,
    body.purr-mobile-game .legal-title {
        font-size: 24px !important;
        line-height: 1.05 !important;
        margin: 0 0 5px 0 !important;
        color: #684b5d !important;
    }

    body.purr-mobile-game .genetics-info-text,
    body.purr-mobile-game .community-subtitle,
    body.purr-mobile-game .cats-need-subtitle,
    body.purr-mobile-game .legal-subtitle {
        font-size: 12px !important;
        line-height: 1.34 !important;
        margin: 0 !important;
        max-width: none !important;
    }

    body.purr-mobile-game .genetics-info-icon,
    body.purr-mobile-game .cats-need-hero-icon {
        width: 66px !important;
        height: 66px !important;
        min-height: 66px !important;
        border-radius: 20px !important;
        margin-left: auto !important;
    }

    body.purr-mobile-game .genetics-info-icon img {
        width: 50px !important;
        height: 50px !important;
    }

    body.purr-mobile-game .cats-need-hero-icon span:first-child {
        font-size: 30px !important;
    }

    body.purr-mobile-game .cats-need-hero-icon span:last-child,
    body.purr-mobile-game .cats-need-note-pill,
    body.purr-mobile-game .cats-need-kicker {
        display: none !important;
    }

    body.purr-mobile-game .genetics-info-layout {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body.purr-mobile-game .genetics-gene-list {
        display: flex !important;
        gap: 7px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 9px !important;
        border-radius: 20px !important;
        margin-bottom: 0 !important;
    }

    body.purr-mobile-game .genetics-gene-list-title {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 4px !important;
        font-size: 14px !important;
    }

    body.purr-mobile-game .genetics-gene-button {
        flex: 0 0 190px !important;
        min-height: 58px !important;
        margin: 0 !important;
        padding: 8px 9px !important;
        border-radius: 16px !important;
        grid-template-columns: 38px minmax(0, 1fr) !important;
    }

    body.purr-mobile-game .genetics-gene-icon {
        width: 34px !important;
        height: 34px !important;
        border-radius: 12px !important;
    }

    body.purr-mobile-game .genetics-gene-icon img {
        width: 28px !important;
        height: 28px !important;
    }

    body.purr-mobile-game .genetics-gene-name {
        font-size: 13px !important;
        line-height: 1.15 !important;
    }

    body.purr-mobile-game .genetics-gene-short {
        font-size: 10px !important;
        line-height: 1.1 !important;
        display: -webkit-box !important;
        line-clamp: 2 !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    body.purr-mobile-game .genetics-article-card,
    body.purr-mobile-game .genetics-info-card,
    body.purr-mobile-game .community-card,
    body.purr-mobile-game .community-result-card,
    body.purr-mobile-game .community-poll-card,
    body.purr-mobile-game .community-suggestion-card,
    body.purr-mobile-game .community-admin-suggestions,
    body.purr-mobile-game .cats-need-card,
    body.purr-mobile-game .trophies-big-card,
    body.purr-mobile-game .trophies-sidebar,
    body.purr-mobile-game .legal-card {
        border-radius: 20px !important;
        border: 1px solid rgba(216,184,238,0.70) !important;
        background: linear-gradient(180deg, rgba(255,252,255,0.84), rgba(255,241,250,0.62)) !important;
        box-shadow: 0 8px 20px rgba(88,64,120,0.08) !important;
        margin-bottom: 10px !important;
        overflow: hidden !important;
    }

    body.purr-mobile-game .genetics-article-card-title,
    body.purr-mobile-game .community-card-title,
    body.purr-mobile-game .cats-need-card-title,
    body.purr-mobile-game .trophies-big-title {
        padding: 10px 12px !important;
        font-size: 17px !important;
        line-height: 1.12 !important;
        background: linear-gradient(90deg, rgba(232,247,255,0.92), rgba(255,241,250,0.94), rgba(238,225,255,0.92)) !important;
    }

    body.purr-mobile-game .genetics-article-card-body,
    body.purr-mobile-game .community-card-body,
    body.purr-mobile-game .cats-need-card-body {
        padding: 11px 12px !important;
        font-size: 12px !important;
        line-height: 1.38 !important;
    }

    /* Player Search / Friends / Feedback */
    body.purr-mobile-game .community-search-row {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    body.purr-mobile-game .community-search-wrap {
        min-height: 42px !important;
        padding: 5px 8px 5px 12px !important;
        border-radius: 16px !important;
    }

    body.purr-mobile-game .community-search-wrap input {
        font-size: 13px !important;
        padding: 7px !important;
    }

    body.purr-mobile-game .community-search-row button,
    body.purr-mobile-game .community-actions button,
    body.purr-mobile-game .community-message-form button,
    body.purr-mobile-game .community-poll-card button,
    body.purr-mobile-game .community-suggestion-card button {
        width: 100% !important;
        min-height: 38px !important;
        border-radius: 13px !important;
        font-size: 12px !important;
        margin: 0 !important;
    }

    body.purr-mobile-game .community-result-card {
        grid-template-columns: 58px minmax(0, 1fr) !important;
        gap: 9px !important;
        padding: 10px !important;
        align-items: start !important;
    }

    body.purr-mobile-game .community-avatar {
        width: 52px !important;
        height: 52px !important;
        border-radius: 16px !important;
        font-size: 28px !important;
    }

    body.purr-mobile-game .community-player-name {
        font-size: 17px !important;
        line-height: 1.1 !important;
    }

    body.purr-mobile-game .community-player-cattery {
        font-size: 12px !important;
        line-height: 1.15 !important;
    }

    body.purr-mobile-game .community-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        margin-top: 8px !important;
    }

    body.purr-mobile-game .friend-list,
    body.purr-mobile-game .greeting-list {
        border-radius: 16px !important;
        margin-top: 8px !important;
    }

    body.purr-mobile-game .friend-row,
    body.purr-mobile-game .greeting-row,
    body.purr-mobile-game .community-poll-option {
        grid-template-columns: 1fr !important;
        gap: 5px !important;
        padding: 8px 10px !important;
        font-size: 12px !important;
    }

    body.purr-mobile-game .community-feedback-layout {
        gap: 10px !important;
    }

    body.purr-mobile-game .community-poll-title,
    body.purr-mobile-game .community-suggestion-title {
        font-size: 18px !important;
        line-height: 1.12 !important;
        margin-bottom: 6px !important;
    }

    body.purr-mobile-game .community-poll-note {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    body.purr-mobile-game .community-suggestion-card textarea,
    body.purr-mobile-game .community-message-form textarea {
        min-height: 96px !important;
        border-radius: 14px !important;
        font-size: 13px !important;
    }

    /* Breed for Cats in Need */
    body.purr-mobile-game .cats-need-impact-grid,
    body.purr-mobile-game .cats-need-layout,
    body.purr-mobile-game .cats-need-breed-grid,
    body.purr-mobile-game .cats-need-month-box,
    body.purr-mobile-game .cats-need-steps,
    body.purr-mobile-game .cats-need-archive-row,
    body.purr-mobile-game .cats-need-archive-row.header {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    body.purr-mobile-game .cats-need-impact-card {
        min-height: 74px !important;
        padding: 10px 12px !important;
        border-radius: 18px !important;
    }

    body.purr-mobile-game .cats-need-impact-icon {
        font-size: 20px !important;
        margin-bottom: 3px !important;
    }

    body.purr-mobile-game .cats-need-impact-number {
        font-size: 22px !important;
        line-height: 1.1 !important;
    }

    body.purr-mobile-game .cats-need-impact-label,
    body.purr-mobile-game .cats-need-breed-reason,
    body.purr-mobile-game .cats-need-step,
    body.purr-mobile-game .cats-need-archive-row {
        font-size: 12px !important;
        line-height: 1.32 !important;
    }

    body.purr-mobile-game .cats-need-month-circle {
        width: 118px !important;
        height: 118px !important;
        margin: 0 auto !important;
    }

    body.purr-mobile-game .cats-need-transparency-button {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Trophies */
    body.purr-mobile-game .trophies-layout {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body.purr-mobile-game .trophies-sidebar {
        display: flex !important;
        gap: 7px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 9px !important;
    }

    body.purr-mobile-game .trophies-sidebar-item {
        flex: 0 0 auto !important;
        min-width: 132px !important;
        min-height: 44px !important;
        padding: 8px 10px !important;
        margin: 0 !important;
        border-radius: 999px !important;
        font-size: 12px !important;
    }

    body.purr-mobile-game .trophies-sidebar-name {
        font-size: 12px !important;
        gap: 5px !important;
    }

    body.purr-mobile-game .trophy-list {
        padding: 10px !important;
        gap: 9px !important;
    }

    body.purr-mobile-game .trophy-entry {
        grid-template-columns: 52px minmax(0, 1fr) !important;
        gap: 9px !important;
        padding: 10px !important;
        border-radius: 17px !important;
        text-align: left !important;
    }

    body.purr-mobile-game .trophy-entry-icon {
        width: 46px !important;
        height: 46px !important;
        border-radius: 14px !important;
        font-size: 24px !important;
        margin: 0 !important;
    }

    body.purr-mobile-game .trophy-entry-title {
        font-size: 14px !important;
        line-height: 1.14 !important;
    }

    body.purr-mobile-game .trophy-entry-desc,
    body.purr-mobile-game .trophy-entry-tier,
    body.purr-mobile-game .trophy-status {
        font-size: 11px !important;
        line-height: 1.25 !important;
    }

    body.purr-mobile-game .trophy-progress-wrap {
        grid-column: 1 / -1 !important;
        gap: 5px !important;
    }

    body.purr-mobile-game .trophy-progress-value {
        font-size: 18px !important;
    }

    body.purr-mobile-game .trophy-progress-bar {
        height: 12px !important;
    }

    /* Legal pages from profile screenshot */
    body.purr-mobile-game .legal-card {
        padding: 12px !important;
        font-size: 12px !important;
        line-height: 1.42 !important;
    }

    body.purr-mobile-game .legal-card h3 {
        font-size: 16px !important;
        line-height: 1.15 !important;
        margin-bottom: 7px !important;
    }
}

@media (max-width: 380px) {
    body.purr-mobile-game .community-actions {
        grid-template-columns: 1fr !important;
    }

    body.purr-mobile-game .genetics-gene-button {
        flex-basis: 168px !important;
    }
}


/* ===== PurrPixels Admin Control Center Phase 1 ===== */
.admin-control-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 18px 0;
}

.admin-control-tab {
    min-height: 46px;
    border-radius: 999px;
    border: 1px solid rgba(216,184,238,0.76);
    background: linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,241,250,0.72));
    color: #5a4664;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    box-shadow: 0 5px 12px rgba(88,64,120,0.08);
}

.admin-control-tab.active {
    background: linear-gradient(180deg, rgba(255,241,250,0.98), rgba(232,247,255,0.92));
    color: #8a2f5a;
    border-color: rgba(194,160,225,0.95);
}

.admin-control-grid {
    display: grid;
    gap: 14px;
    margin-bottom: 14px;
}

.admin-control-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-control-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-tools-card.admin-control-card.stacked {
    display: block;
    grid-template-columns: none;
}

.admin-section-title.smaller {
    font-size: 16px;
    margin-top: 8px;
}

.admin-control-mini-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.admin-control-mini-stat {
    background: rgba(255,255,255,0.68);
    border: 1px solid rgba(216,184,238,0.62);
    border-radius: 16px;
    padding: 10px 8px;
    text-align: center;
}

.admin-control-mini-stat b {
    display: block;
    font-size: 20px;
    color: #7a2f58;
    line-height: 1.05;
}

.admin-control-mini-stat span {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 900;
    color: #6a5d70;
}

.admin-warning-list,
.admin-simple-list,
.admin-cat-result-list {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.admin-warning-row,
.admin-simple-row,
.admin-cat-result-card {
    background: rgba(255,255,255,0.70);
    border: 1px solid rgba(216,184,238,0.56);
    border-radius: 16px;
    padding: 10px 12px;
}

.admin-warning-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-weight: 900;
}

.admin-warning-row.ok b { color: #3f8d61; }
.admin-warning-row.warning b { color: #b47a16; }
.admin-warning-row.danger b { color: #a33b4e; }

.admin-simple-row b,
.admin-simple-row span {
    display: block;
}

.admin-simple-row b {
    color: #7a2f58;
    margin-bottom: 3px;
}

.admin-simple-row span {
    color: #5b5963;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.35;
}

.admin-control-form-grid,
.admin-control-form-grid.compact {
    display: grid;
    gap: 8px;
}

.admin-control-form-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-control-form-grid input,
.admin-control-form-grid textarea,
.admin-tools-card.admin-control-card input,
.admin-tools-card.admin-control-card textarea,
.admin-tools-card.admin-control-card select {
    width: 100%;
    border: 1px solid rgba(216,184,238,0.76);
    border-radius: 13px;
    background: rgba(255,255,255,0.92);
    color: #5a4664;
    font-weight: 700;
    padding: 9px 11px;
    margin: 0;
}

.admin-control-form-grid textarea,
.admin-tools-card.admin-control-card textarea {
    min-height: 92px;
    resize: vertical;
}

.admin-cat-result-card {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.admin-cat-result-card img {
    width: 76px;
    height: 76px;
    object-fit: contain;
    border-radius: 16px;
    background: rgba(255,246,252,0.75);
    border: 1px solid rgba(216,184,238,0.48);
}

.admin-promo-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
}

.admin-promo-row b,
.admin-promo-row span {
    grid-column: 1;
}

.admin-promo-row button {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.admin-reset-profile-box {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(177, 54, 82, 0.34);
    border-radius: 16px;
    background: rgba(255, 242, 246, 0.72);
}

.admin-reset-profile-values {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.admin-reset-profile-values span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid rgba(216, 184, 238, 0.55);
    background: rgba(255, 255, 255, 0.82);
    color: #62556b;
    font-size: 12px;
    font-weight: 900;
}

.admin-reset-profile-button {
    justify-self: start;
    background: rgba(172, 49, 78, 0.92) !important;
    color: white !important;
    border-color: rgba(139, 35, 60, 0.95) !important;
}

@media (max-width: 900px) {
    .admin-control-grid.two,
    .admin-control-grid.three {
        grid-template-columns: 1fr;
    }

    .admin-control-mini-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ===== PurrPixels Mobile Admin Control Center ===== */
@media (max-width: 768px) {
    body.purr-mobile-game .admin-control-page {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 0 90px 0 !important;
    }

    body.purr-mobile-game .admin-control-hero {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 64px !important;
        gap: 10px !important;
        align-items: center !important;
        padding: 14px !important;
        margin: 0 0 10px 0 !important;
        border-radius: 23px !important;
        background: linear-gradient(135deg, rgba(255,246,252,0.88), rgba(238,247,255,0.78), rgba(238,225,255,0.78)) !important;
        border: 1px solid rgba(216,184,238,0.70) !important;
        box-shadow: 0 8px 20px rgba(88,64,120,0.08) !important;
    }

    body.purr-mobile-game .admin-control-hero .admin-title {
        font-size: 24px !important;
        line-height: 1.05 !important;
        margin-bottom: 5px !important;
    }

    body.purr-mobile-game .admin-control-hero .admin-subtitle {
        font-size: 12px !important;
        line-height: 1.3 !important;
        max-width: none !important;
    }

    body.purr-mobile-game .admin-control-hero .admin-hero-icon {
        width: 62px !important;
        height: 62px !important;
        border-radius: 19px !important;
        font-size: 30px !important;
        margin-left: auto !important;
    }

    body.purr-mobile-game .admin-control-top-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
    }

    body.purr-mobile-game .admin-control-top-stats .admin-stat-card {
        min-height: 58px !important;
        padding: 8px 6px !important;
        border-radius: 16px !important;
    }

    body.purr-mobile-game .admin-control-top-stats .admin-stat-value {
        font-size: 20px !important;
    }

    body.purr-mobile-game .admin-control-top-stats .admin-stat-label {
        font-size: 10px !important;
    }

    body.purr-mobile-game .admin-control-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 7px !important;
        padding: 1px 2px 8px 2px !important;
        margin-bottom: 8px !important;
    }

    body.purr-mobile-game .admin-control-tab {
        flex: 0 0 auto !important;
        min-height: 38px !important;
        padding: 7px 10px !important;
        font-size: 11px !important;
        border-radius: 999px !important;
        margin: 0 !important;
    }

    body.purr-mobile-game .admin-tools-card.admin-control-card {
        border-radius: 21px !important;
        padding: 12px !important;
        margin-bottom: 10px !important;
    }

    body.purr-mobile-game .admin-section-title {
        font-size: 17px !important;
        margin-bottom: 9px !important;
    }

    body.purr-mobile-game .admin-control-mini-stats,
    body.purr-mobile-game .admin-control-form-grid.compact {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    body.purr-mobile-game .admin-control-mini-stat {
        min-height: 54px !important;
        padding: 8px 5px !important;
        border-radius: 14px !important;
    }

    body.purr-mobile-game .admin-control-mini-stat b {
        font-size: 17px !important;
    }

    body.purr-mobile-game .admin-control-mini-stat span {
        font-size: 9px !important;
    }

    body.purr-mobile-game .admin-player-search-grid {
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    body.purr-mobile-game .admin-player-result-actions,
    body.purr-mobile-game .admin-report-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 7px !important;
    }

    body.purr-mobile-game .admin-player-result-actions button,
    body.purr-mobile-game .admin-report-actions button {
        width: 100% !important;
        min-height: 36px !important;
        margin: 0 !important;
        font-size: 11px !important;
        border-radius: 12px !important;
    }

    body.purr-mobile-game .admin-cat-result-card {
        grid-template-columns: 62px minmax(0, 1fr) !important;
        gap: 9px !important;
        padding: 9px !important;
        border-radius: 15px !important;
    }

    body.purr-mobile-game .admin-cat-result-card img {
        width: 58px !important;
        height: 58px !important;
        border-radius: 13px !important;
    }

    body.purr-mobile-game .admin-promo-row {
        grid-template-columns: 1fr !important;
    }

    body.purr-mobile-game .admin-promo-row button {
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
    }
}



/* ===== PurrPixels Mailbox Layout Fix: conversation card + delete button ===== */
.mailbox-page .mail-conversation-list {
    display: grid !important;
    gap: 12px !important;
}

.mailbox-page .mail-conversation-row {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 112px !important;
    gap: 12px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    text-align: left !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, rgba(255,252,255,0.92), rgba(248,240,255,0.78)) !important;
    border: 1px solid rgba(218,188,238,0.72) !important;
    box-shadow: 0 8px 18px rgba(86,58,112,0.08), inset 0 0 0 1px rgba(255,255,255,0.30) !important;
    color: #554b5f !important;
    overflow: hidden !important;
}

.mailbox-page .mail-conversation-row:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 22px rgba(86,58,112,0.11), inset 0 0 0 1px rgba(255,255,255,0.36) !important;
}

.mailbox-page .mail-conversation-row.unread {
    border-left: 5px solid rgba(211,102,160,0.78) !important;
    background: linear-gradient(180deg, rgba(255,246,252,0.96), rgba(244,237,255,0.84)) !important;
}

.mailbox-page .mail-conversation-open {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) 124px !important;
    gap: 13px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    text-align: left !important;
    cursor: pointer !important;
}

.mailbox-page .mail-conversation-open:hover {
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.mailbox-page .mail-list-avatar {
    width: 52px !important;
    height: 52px !important;
    border-radius: 16px !important;
    align-self: center !important;
    justify-self: center !important;
}

.mailbox-page .mail-conversation-main {
    min-width: 0 !important;
    display: block !important;
}

.mailbox-page .mail-conversation-person-line,
.mailbox-page .mail-conversation-subject,
.mailbox-page .mail-conversation-preview {
    min-width: 0 !important;
}

.mailbox-page .mail-conversation-subject,
.mailbox-page .mail-conversation-preview {
    display: block !important;
}

.mailbox-page .mail-conversation-meta {
    min-width: 0 !important;
    justify-self: end !important;
    text-align: right !important;
}

.mailbox-page .mail-conversation-delete {
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    align-self: center !important;
    justify-self: end !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(255,244,249,0.98), rgba(255,224,238,0.84)) !important;
    border: 1px solid rgba(224,147,181,0.66) !important;
    color: #8a2f5a !important;
    box-shadow: 0 4px 10px rgba(138,47,90,0.08) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.mailbox-page .mail-conversation-delete:hover {
    transform: translateY(-1px) !important;
    background: linear-gradient(180deg, rgba(255,252,255,1), rgba(255,214,235,0.92)) !important;
}

@media (max-width: 768px) {
    body.purr-mobile-game .mailbox-page .mail-conversation-row {
        grid-template-columns: minmax(0, 1fr) 72px !important;
        gap: 8px !important;
        align-items: center !important;
        padding: 10px !important;
        border-radius: 19px !important;
    }

    body.purr-mobile-game .mailbox-page .mail-conversation-open {
        grid-template-columns: 44px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        gap: 7px 9px !important;
        align-items: center !important;
    }

    body.purr-mobile-game .mailbox-page .mail-list-avatar {
        width: 42px !important;
        height: 42px !important;
        border-radius: 14px !important;
    }

    body.purr-mobile-game .mailbox-page .mail-conversation-meta {
        grid-column: 2 !important;
        justify-self: start !important;
        text-align: left !important;
        font-size: 10px !important;
    }

    body.purr-mobile-game .mailbox-page .mail-conversation-delete {
        width: 72px !important;
        height: 38px !important;
        padding: 0 6px !important;
        font-size: 10px !important;
        border-radius: 14px !important;
    }
}


/* ===== PurrPixels Admin Cats in Need clarity fix ===== */
.admin-cats-need-intro-card {
    margin: 0 0 16px 0;
    padding: 16px 18px;
    border-radius: 22px;
    border: 1px solid rgba(216,184,238,0.74);
    background: linear-gradient(135deg, rgba(255,246,252,0.88), rgba(238,247,255,0.78), rgba(238,225,255,0.74));
    box-shadow: 0 8px 20px rgba(88,64,120,0.08);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
}

.admin-cats-need-kicker {
    font-size: 12px;
    font-weight: 950;
    color: #8a2f5a;
    margin-bottom: 4px;
}

.admin-cats-need-title {
    font-size: 28px;
    font-weight: 950;
    color: #684b5d;
    line-height: 1.05;
}

.admin-cats-need-text,
.admin-cats-need-help,
.admin-cats-need-form-hint {
    color: #5b5963;
    font-weight: 750;
    line-height: 1.42;
    font-size: 13px;
}

.admin-cats-need-help {
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid rgba(216,184,238,0.54);
    background: rgba(255,255,255,0.58);
    margin: 0 0 12px 0;
}

.admin-cats-need-card {
    min-width: 0;
}

.admin-cats-need-impact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.admin-cats-need-explain-box,
.admin-cats-need-current-box {
    margin-top: 12px;
    padding: 12px;
    border-radius: 17px;
    border: 1px solid rgba(216,184,238,0.58);
    background: linear-gradient(135deg, rgba(255,255,255,0.74), rgba(255,241,250,0.56));
    color: #5b5963;
    font-weight: 750;
    line-height: 1.38;
}

.admin-cats-need-current-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0 0 12px 0;
}

.admin-cats-need-current-box b,
.admin-cats-need-current-box span {
    display: block;
}

.admin-cats-need-current-box b {
    color: #7a2f58;
    font-weight: 950;
}

.admin-cats-need-current-box span {
    color: #6d6074;
    font-size: 12px;
    font-weight: 800;
    margin-top: 2px;
}

.admin-cats-need-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.admin-cats-need-form-grid label {
    display: grid;
    gap: 5px;
    margin: 0;
}

.admin-cats-need-form-grid label span {
    font-size: 12px;
    font-weight: 950;
    color: #7a2f58;
}

.admin-cats-need-full-field {
    grid-column: 1 / -1;
}

.admin-cats-need-amount-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px;
    gap: 8px;
    align-items: center;
}

.admin-cats-need-money-preview {
    min-height: 38px;
    border-radius: 13px;
    border: 1px solid rgba(216,184,238,0.74);
    background: rgba(255,255,255,0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7a2f58;
    font-weight: 950;
}

.admin-cats-need-form-hint {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 15px;
    background: rgba(238,247,255,0.62);
    border: 1px solid rgba(216,184,238,0.48);
}

.admin-cats-need-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.admin-cats-need-archive-list {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.admin-cats-need-archive-row {
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid rgba(216,184,238,0.58);
    background: rgba(255,255,255,0.70);
    display: grid;
    grid-template-columns: 1fr 1fr 1.25fr;
    gap: 10px;
    align-items: center;
    text-align: left;
}

.admin-cats-need-archive-row b,
.admin-cats-need-archive-row span {
    display: block;
}

.admin-cats-need-archive-row b {
    color: #7a2f58;
}

.admin-cats-need-archive-row span {
    color: #5b5963;
    font-size: 12px;
    font-weight: 750;
    margin-top: 2px;
}

@media (max-width: 900px) {
    .admin-cats-need-intro-card,
    .admin-control-grid.two.admin-cats-need-grid {
        grid-template-columns: 1fr !important;
    }

    .admin-cats-need-current-box,
    .admin-cats-need-form-grid,
    .admin-cats-need-impact-grid,
    .admin-cats-need-archive-row {
        grid-template-columns: 1fr !important;
    }

    .admin-cats-need-amount-row {
        grid-template-columns: 1fr;
    }

    .admin-cats-need-title {
        font-size: 23px;
    }
}


/* ===== Cat Market sortable Date / Price columns ===== */
.market-sort-head-button {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 2px 0;
    margin: 0;
    color: inherit;
    font: inherit;
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
    text-align: left;
    display: inline-grid;
    grid-template-columns: auto auto;
    column-gap: 7px;
    align-items: center;
    line-height: 1.15;
}

.market-sort-head-button:hover > span:first-child,
.market-sort-head-button.active > span:first-child {
    color: #8a2f5a;
    text-decoration: underline;
}

.market-sort-head-button.primary > span:first-child {
    color: #7a2f58;
}

.market-sort-head-arrow {
    font-size: 18px;
    font-weight: 950;
    color: #9b5e84;
    line-height: 1;
}

.market-sort-head-button small {
    grid-column: 1 / -1;
    display: block;
    margin-top: 5px;
    font-size: 12.5px;
    line-height: 1.2;
    font-weight: 850;
    color: #8a7a88;
    text-decoration: none !important;
    white-space: nowrap;
}

.market-sort-head-button.active small {
    color: #7a2f58;
}

.market-sort-head-button.primary small {
    font-weight: 950;
}

.market-mobile-date-sort {
    display: none;
}

/* ===== Colorpoint + Cat Show Sort polish ===== */
.show-sort-head-btn {
    border: none !important;
    background: transparent !important;
    color: #684b5d !important;
    font: inherit !important;
    font-weight: 900 !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    text-align: left !important;
}
.show-sort-head-btn:hover {
    color: #8a2f5a !important;
    text-decoration: underline;
}



/* ===== PurrPixels polish: Freyja comparison + public cattery cats ===== */
.freyja-item-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0 12px 0;
}

.freyja-item-status-pill {
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(218,188,238,0.68);
    border-radius: 16px;
    padding: 10px 12px;
    box-shadow: 0 4px 10px rgba(88,64,120,0.06);
}

.freyja-item-status-pill b {
    display: block;
    font-size: 12px;
    color: #75667d;
    margin-bottom: 4px;
}

.freyja-item-status-pill span {
    display: block;
    font-size: 17px;
    font-weight: 950;
    color: #7a2f58;
}

.freyja-compare-button.inventory-ready {
    background: linear-gradient(180deg, #ffffff, #eefaf2);
}

.breeder-cats-page {
    max-width: 1220px;
    margin: 18px auto 44px auto;
}

.breeder-cats-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 22px 24px;
    margin-bottom: 18px;
    border-radius: 26px;
    background: linear-gradient(135deg, rgba(255,250,254,0.92), rgba(238,247,255,0.86), rgba(248,231,255,0.88));
    border: 1px solid rgba(218,188,238,0.82);
    box-shadow: 0 10px 24px rgba(88,64,120,0.10);
    backdrop-filter: blur(6px);
}

.breeder-cats-kicker {
    font-size: 13px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8a5a91;
    margin-bottom: 5px;
}

.breeder-cats-title {
    font-size: 34px;
    line-height: 1.05;
    font-weight: 950;
    color: #684b5d;
    margin-bottom: 7px;
}

.breeder-cats-subtitle {
    color: #5b5963;
    font-weight: 750;
    line-height: 1.45;
}

.breeder-cats-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(92px, 1fr));
    gap: 10px;
}

.breeder-cats-stat {
    min-width: 96px;
    text-align: center;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255,255,255,0.74);
    border: 1px solid rgba(218,188,238,0.68);
}

.breeder-cats-stat strong {
    display: block;
    font-size: 24px;
    color: #8a2f5a;
    margin-bottom: 3px;
}

.breeder-cats-stat span {
    display: block;
    font-size: 12px;
    font-weight: 900;
    color: #75667d;
}

.breeder-cats-toolbar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    margin-bottom: 18px;
    border-radius: 22px;
    background: rgba(255,255,255,0.76);
    border: 1px solid rgba(218,188,238,0.72);
    box-shadow: 0 7px 16px rgba(88,64,120,0.08);
}

.breeder-cats-toolbar input {
    width: 100%;
    border: 1px solid rgba(218,188,238,0.76);
    border-radius: 999px;
    padding: 11px 16px;
    background: rgba(255,255,255,0.92);
    font-size: 15px;
}

.breeder-cats-count-label {
    font-weight: 950;
    color: #684b5d;
    white-space: nowrap;
}

.breeder-cats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 16px;
}

.breeder-cat-public-card {
    min-height: 236px;
    padding: 13px 12px;
    text-align: center;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(238,247,255,0.70));
    border: 1px solid rgba(218,188,238,0.72);
    box-shadow: 0 7px 16px rgba(88,64,120,0.08);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.breeder-cat-public-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(88,64,120,0.13);
    background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,241,250,0.76));
}

.breeder-cat-public-name {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 950;
    color: #5b4b61;
    line-height: 1.12;
}

.breeder-cat-public-cattery {
    font-size: 12px;
    color: #75667d;
    font-weight: 800;
    margin: 2px 0 7px 0;
}

.breeder-cat-public-card img {
    width: 126px;
    height: 126px;
    object-fit: contain;
    display: block;
    margin: 0 auto 8px auto;
}

.breeder-cat-public-meta {
    display: flex;
    justify-content: center;
    gap: 7px;
    flex-wrap: wrap;
    font-size: 11px;
    font-weight: 900;
    color: #7a2f58;
}

.breeder-cat-public-meta span {
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.76);
    border: 1px solid rgba(218,188,238,0.62);
}

@media (max-width: 768px) {
    .freyja-item-status-grid {
        grid-template-columns: 1fr;
    }

    .breeder-cats-page {
        margin: 6px auto 28px auto;
    }

    .breeder-cats-hero {
        grid-template-columns: 1fr;
        padding: 15px 14px;
        text-align: left;
        border-radius: 22px;
    }

    .breeder-cats-title {
        font-size: 26px;
    }

    .breeder-cats-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .breeder-cats-stat {
        min-width: 0;
        padding: 9px 6px;
    }

    .breeder-cats-stat strong {
        font-size: 20px;
    }

    .breeder-cats-toolbar {
        grid-template-columns: 1fr;
        padding: 11px;
        gap: 8px;
    }

    .breeder-cats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 11px;
    }

    .breeder-cat-public-card {
        min-height: 182px;
        padding: 9px 7px;
        border-radius: 18px;
    }

    .breeder-cat-public-name {
        min-height: 32px;
        font-size: 14px;
    }

    .breeder-cat-public-cattery {
        font-size: 11px;
        margin-bottom: 4px;
    }

    .breeder-cat-public-card img {
        width: min(30vw, 104px);
        height: min(30vw, 104px);
        margin-bottom: 5px;
    }

    body.purr-mobile-game .cat-detail-image-wrap {
        min-height: min(58vw, 245px) !important;
    }

    body.purr-mobile-game .cat-image-large,
    body.purr-mobile-game .public-cat-image {
        width: min(64vw, 242px) !important;
        height: min(64vw, 242px) !important;
        object-fit: contain !important;
    }

    body.purr-mobile-game .middle-cat-panel.clean-main-cat,
    body.purr-mobile-game .middle-cat-panel {
        padding: 10px 10px 14px 10px !important;
    }

    body.purr-mobile-game .cat-card {
        width: calc(50% - 7px) !important;
        min-width: 132px !important;
        min-height: 164px !important;
        padding: 8px 7px !important;
    }

    body.purr-mobile-game .cat-card img {
        width: min(28vw, 104px) !important;
        height: min(28vw, 104px) !important;
        object-fit: contain !important;
    }
}



/* ===== PurrPixels WorldShow ===== */
.worldcup-page {
    max-width: 1220px;
    margin: 18px auto 44px auto;
}

.worldcup-hero {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 18px;
    align-items: center;
    padding: 22px;
    border-radius: 28px;
    border: 1px solid rgba(216,184,238,0.78);
    background: linear-gradient(135deg, rgba(255,246,252,0.88), rgba(232,247,255,0.82), rgba(248,226,255,0.84));
    box-shadow: 0 10px 24px rgba(88,64,120,0.11);
    margin-bottom: 18px;
}

.worldcup-kicker {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8a5a91;
    margin-bottom: 6px;
}

.worldcup-title {
    font-size: 40px;
    font-weight: 950;
    color: #684b5d;
    margin-bottom: 8px;
}

.worldcup-subtitle {
    color: #5b5963;
    font-weight: 800;
    line-height: 1.5;
    max-width: 780px;
}

.worldcup-focus-card {
    padding: 18px;
    border-radius: 24px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(194,160,225,0.68);
    text-align: center;
}

.worldcup-focus-day {
    font-size: 14px;
    font-weight: 900;
    color: #7b6c80;
}

.worldcup-focus-trait {
    font-size: 34px;
    font-weight: 950;
    color: #7a2f58;
    margin: 6px 0;
}

.worldcup-layout {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 18px;
    align-items: start;
}

.worldcup-card {
    background: rgba(255,255,255,0.76);
    border: 1px solid rgba(216,184,238,0.75);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(88,64,120,0.08);
    margin-bottom: 18px;
}

.worldcup-card-title {
    padding: 14px 16px;
    font-size: 22px;
    font-weight: 950;
    color: #684b5d;
    background: var(--dream-header);
    border-bottom: 1px solid rgba(216,184,238,0.55);
    text-align: center;
}

.worldcup-card-body {
    padding: 16px;
}

.worldcup-prize-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
}

.worldcup-prize {
    background: rgba(255,255,255,0.74);
    border: 1px solid rgba(216,184,238,0.62);
    border-radius: 16px;
    padding: 12px;
    font-weight: 850;
    color: #5b5963;
}

.worldcup-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
}

.worldcup-cat-card {
    border: 1px solid rgba(216,184,238,0.72);
    border-radius: 18px;
    background: rgba(255,255,255,0.74);
    padding: 12px;
    text-align: center;
    box-shadow: 0 5px 12px rgba(88,64,120,0.06);
}

.worldcup-cat-card.entered {
    outline: 3px solid rgba(169,120,223,0.32);
}

.worldcup-cat-card img {
    width: 126px;
    height: 126px;
    object-fit: contain;
    display: block;
    margin: 0 auto 8px auto;
}

.worldcup-cat-name {
    font-size: 16px;
    font-weight: 950;
    color: #7a2f58;
}

.worldcup-cat-score {
    font-weight: 900;
    color: #4f4a5e;
    margin: 5px 0 8px;
}

.worldcup-result-row,
.worldcup-profile-row {
    display: grid;
    grid-template-columns: 54px 1fr 110px;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(216,184,238,0.40);
}

.worldcup-result-row:last-child,
.worldcup-profile-row:last-child {
    border-bottom: none;
}

.worldcup-place-badge {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(216,184,238,0.70);
    font-weight: 950;
    color: #7a2f58;
}

.worldshow-profile-overview {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 16px;
    align-items: start;
}

.worldshow-profile-stat {
    background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.62));
    border: 1px solid rgba(216,184,238,0.65);
    border-radius: 22px;
    padding: 18px 14px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 10px 24px rgba(122,47,88,0.08);
}

.worldshow-profile-stat strong {
    display: block;
    font-size: 42px;
    line-height: 1;
    color: #7a2f58;
    margin-bottom: 10px;
}

.worldshow-profile-stat span {
    font-size: 13px;
    line-height: 1.35;
    font-weight: 900;
    color: #6e6376;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.worldshow-profile-results {
    display: grid;
    gap: 12px;
}

.worldshow-profile-entry {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) 220px;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 20px;
    border: 1px solid rgba(216,184,238,0.62);
    background: linear-gradient(180deg, rgba(255,255,255,0.70), rgba(255,255,255,0.58));
    box-shadow: 0 8px 18px rgba(122,47,88,0.06);
}

.worldshow-profile-entry.place-gold {
    border-color: rgba(225, 186, 84, 0.62);
    background: linear-gradient(180deg, rgba(255,251,236,0.92), rgba(255,245,215,0.72));
}

.worldshow-profile-entry.place-silver {
    border-color: rgba(180, 188, 208, 0.68);
    background: linear-gradient(180deg, rgba(248,250,255,0.90), rgba(236,240,248,0.72));
}

.worldshow-profile-entry.place-bronze {
    border-color: rgba(194, 144, 106, 0.62);
    background: linear-gradient(180deg, rgba(255,247,241,0.92), rgba(244,224,212,0.72));
}

.worldshow-profile-place-badge {
    width: 100%;
    border-radius: 999px;
    padding: 10px 12px;
    text-align: center;
    font-size: 14px;
    font-weight: 950;
    color: #7a2f58;
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(216,184,238,0.70);
}

.worldshow-profile-entry.place-gold .worldshow-profile-place-badge {
    color: #8b5c00;
    border-color: rgba(225, 186, 84, 0.72);
    background: rgba(255,252,240,0.96);
}

.worldshow-profile-entry.place-silver .worldshow-profile-place-badge {
    color: #586377;
    border-color: rgba(180, 188, 208, 0.74);
    background: rgba(250,252,255,0.96);
}

.worldshow-profile-entry.place-bronze .worldshow-profile-place-badge {
    color: #8a5537;
    border-color: rgba(194, 144, 106, 0.74);
    background: rgba(255,250,246,0.96);
}

.worldshow-profile-catinfo {
    min-width: 0;
}

.worldshow-profile-catname {
    font-size: 24px;
    font-weight: 950;
    color: #5c4966;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.worldshow-profile-cattery {
    margin-top: 4px;
    font-size: 14px;
    font-weight: 800;
    color: #8a7b91;
}

.worldshow-profile-meta {
    display: grid;
    gap: 8px;
}

.worldshow-profile-meta-item {
    background: rgba(255,255,255,0.58);
    border-radius: 16px;
    padding: 8px 12px;
    border: 1px solid rgba(216,184,238,0.42);
}

.worldshow-profile-meta-item span {
    display: block;
    font-size: 11px;
    font-weight: 900;
    color: #8f8297;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.worldshow-profile-meta-item strong {
    display: block;
    font-size: 15px;
    font-weight: 900;
    color: #5c4966;
}

@media (max-width: 850px) {
    .worldcup-hero,
    .worldcup-layout,
    .worldshow-profile-overview {
        grid-template-columns: 1fr;
    }

    .worldshow-profile-entry {
        grid-template-columns: 1fr;
    }

    .worldshow-profile-place-badge {
        max-width: 180px;
        margin: 0 auto;
    }

    .worldshow-profile-stat {
        min-height: auto;
    }

    .worldshow-profile-catinfo,
    .worldshow-profile-meta {
        text-align: center;
    }

    .worldcup-title {
        font-size: 30px;
    }

    .worldcup-prize-grid {
        grid-template-columns: 1fr;
    }

    .worldcup-cat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .worldcup-cat-card {
        padding: 9px;
        border-radius: 16px;
    }

    .worldcup-cat-card img {
        width: 92px;
        height: 92px;
    }
}


/* ===== PurrPixels WorldShow clean overview + separate entry page ===== */
.worldcup-clean-page .worldcup-hero {
    grid-template-columns: minmax(0, 1fr) 260px;
    padding: 28px;
    border-radius: 30px;
    background:
        radial-gradient(circle at 8% 10%, rgba(255,255,255,0.92), transparent 35%),
        linear-gradient(135deg, rgba(255,246,252,0.94), rgba(232,247,255,0.88), rgba(248,226,255,0.90));
}

.worldcup-home-hero .worldcup-title,
.worldcup-entry-hero .worldcup-title {
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.02;
}

.worldcup-hero-actions {
    margin-top: 18px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.worldcup-primary-button {
    min-height: 52px;
    padding: 13px 22px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 950;
    color: #693459;
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,222,242,0.86));
    border: 1px solid rgba(194,160,225,0.95);
    box-shadow: 0 8px 18px rgba(122,47,88,0.12);
}

.worldcup-primary-button:disabled {
    opacity: 0.68;
    cursor: not-allowed;
    filter: grayscale(30%);
}

.worldcup-focus-card-large {
    min-height: 148px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.worldcup-overview-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 18px 0;
}

.worldcup-overview-stats > div {
    background: rgba(255,255,255,0.76);
    border: 1px solid rgba(216,184,238,0.68);
    border-radius: 20px;
    padding: 15px 14px;
    box-shadow: 0 7px 16px rgba(88,64,120,0.07);
    text-align: center;
}

.worldcup-overview-stats b {
    display: block;
    font-size: 24px;
    color: #7a2f58;
    line-height: 1.1;
}

.worldcup-overview-stats span {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 900;
    color: #7b7183;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.worldcup-prize-list-clean {
    display: grid;
    gap: 10px;
}

.worldcup-prize-clean {
    display: grid;
    grid-template-columns: 145px 1fr;
    gap: 12px;
    align-items: center;
    padding: 13px 14px;
    border-radius: 16px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(216,184,238,0.60);
}

.worldcup-prize-clean.podium {
    background: linear-gradient(90deg, rgba(255,248,230,0.86), rgba(255,241,250,0.70));
}

.worldcup-prize-clean span {
    font-weight: 950;
    color: #7a2f58;
}

.worldcup-prize-clean b {
    color: #4f4a5e;
}

.worldcup-result-row-clean {
    grid-template-columns: 54px 1fr minmax(120px, 170px);
}

.worldcup-entry-notice {
    margin: -4px 0 18px 0;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(216,184,238,0.70);
    box-shadow: 0 6px 14px rgba(88,64,120,0.06);
    color: #5b5963;
}

.worldcup-filter-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(4, minmax(145px, 1fr));
    gap: 12px;
    align-items: end;
    margin-bottom: 12px;
}

.worldcup-filter-grid label {
    display: block;
    font-size: 12px;
    font-weight: 950;
    color: #684b5d;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.worldcup-filter-grid input,
.worldcup-filter-grid select {
    width: 100%;
    margin-top: 5px;
    border: 1px solid rgba(194,160,225,0.68);
    border-radius: 13px;
    background: rgba(255,255,255,0.92);
    color: #5a4664;
    padding: 10px 11px;
    font-weight: 800;
}

.worldcup-filter-summary {
    margin: 6px 0 14px 0;
    color: #6a5b70;
    font-weight: 800;
}

.worldcup-cat-grid-select {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.worldcup-cat-choice {
    display: flex;
    flex-direction: column;
    min-height: 318px;
}

.worldcup-cat-choice img {
    width: 150px;
    height: 150px;
    object-fit: contain;
}

.worldcup-cat-meta {
    color: #5b5963;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.35;
    min-height: 54px;
}

.worldcup-cat-choice .worldcup-cat-score {
    font-size: 20px;
    margin-top: auto;
}

.worldcup-enter-cat-button {
    width: 100%;
    border-radius: 999px;
    font-weight: 950;
}


.worldcup-info-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: -2px 0 20px 0;
}

.worldcup-info-strip > div {
    background: rgba(255,255,255,0.74);
    border: 1px solid rgba(216,184,238,0.62);
    border-radius: 18px;
    padding: 13px 14px;
    box-shadow: 0 6px 14px rgba(88,64,120,0.06);
}

.worldcup-info-strip b {
    display: block;
    color: #7a2f58;
    font-weight: 950;
    margin-bottom: 4px;
}

.worldcup-info-strip span {
    display: block;
    color: #5b5963;
    font-weight: 750;
    line-height: 1.35;
}

.worldcup-entry-page .worldcup-card {
    border-radius: 26px;
}

.worldcup-entry-page .worldcup-card-title {
    font-size: 26px;
}

.worldcup-cat-choice {
    transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}

.worldcup-cat-choice:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(88,64,120,0.12);
    background: rgba(255,247,252,0.92);
}



.worldcup-focus-ap-note {
    margin: 2px 0 14px 0;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(216,184,238,0.62);
    color: #5b5963;
    font-weight: 800;
}

.worldcup-top3-panel {
    margin: 0 0 16px 0;
    padding: 14px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(255,248,252,0.86), rgba(232,247,255,0.78), rgba(248,226,255,0.80));
    border: 1px solid rgba(216,184,238,0.68);
    box-shadow: 0 7px 16px rgba(88,64,120,0.07);
}

.worldcup-top3-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.worldcup-top3-title {
    font-size: 20px;
    font-weight: 950;
    color: #684b5d;
}

.worldcup-top3-subtitle {
    color: #7b7183;
    font-size: 13px;
    font-weight: 850;
}

.worldcup-top3-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.worldcup-top-cat-card {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 18px;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(216,184,238,0.62);
    box-shadow: 0 5px 12px rgba(88,64,120,0.06);
}

.worldcup-top-cat-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,244,191,0.95), rgba(255,225,245,0.76));
    border: 1px solid rgba(216,184,238,0.72);
    font-weight: 950;
    color: #7a2f58;
    margin-bottom: 6px;
}

.worldcup-top-cat-image {
    text-align: center;
}

.worldcup-top-cat-image img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.worldcup-top-cat-name {
    font-weight: 950;
    color: #7a2f58;
    line-height: 1.15;
}

.worldcup-top-cat-meta {
    margin-top: 3px;
    font-size: 12px;
    font-weight: 750;
    color: #5b5963;
    line-height: 1.3;
}

.worldcup-top-cat-score {
    text-align: right;
    font-weight: 950;
    color: #4f4a5e;
    min-width: 76px;
}

.worldcup-top-cat-score b {
    display: block;
    font-size: 22px;
    color: #7a2f58;
    line-height: 1;
}

.worldcup-top-cat-score span {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #7b7183;
}

.worldcup-cat-focus-label {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 900;
    color: #7b7183;
    text-transform: uppercase;
    letter-spacing: .04em;
}

@media (max-width: 1000px) {
    .worldcup-filter-grid {
        grid-template-columns: 1fr 1fr;
    }

    .worldcup-overview-stats,
    .worldcup-info-strip {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .worldcup-clean-page .worldcup-hero,
    .worldcup-layout {
        grid-template-columns: 1fr;
    }

    .worldcup-clean-page .worldcup-hero {
        padding: 20px;
    }

    .worldcup-overview-stats,
    .worldcup-info-strip,
    .worldcup-filter-grid {
        grid-template-columns: 1fr;
    }

    .worldcup-prize-clean {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .worldcup-top3-grid {
        grid-template-columns: 1fr;
    }

    .worldcup-top-cat-card {
        grid-template-columns: 60px 1fr;
    }

    .worldcup-top-cat-score {
        grid-column: 2;
        text-align: left;
    }

    .worldcup-result-row-clean {
        grid-template-columns: 46px 1fr;
    }

    .worldcup-result-row-clean > small {
        grid-column: 2;
    }
}



/* ===== PurrPixels Birth Clinic ===== */
.birth-ready-banner {
    max-width: 1180px;
    margin: 0 auto 18px auto;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 16px 18px;
    border-radius: 22px;
    border: 1px solid rgba(216,184,238,0.78);
    background: linear-gradient(135deg, rgba(255,248,252,0.92), rgba(232,247,255,0.88), rgba(245,228,255,0.90));
    box-shadow: 0 10px 24px rgba(88,64,120,0.12);
    backdrop-filter: blur(7px);
}

.birth-ready-title {
    font-size: 22px;
    font-weight: 900;
    color: #7a2f58;
    margin-bottom: 5px;
}

.birth-ready-text {
    color: #5b5963;
    font-weight: 700;
    line-height: 1.4;
}

.birth-ready-button,
.birth-clinic-primary-button {
    border-radius: 999px;
    padding: 12px 18px;
    font-weight: 900;
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,220,232,0.86));
    border: 1px solid rgba(194,160,225,0.9);
    color: #684b5d;
    box-shadow: 0 6px 14px rgba(88,64,120,0.11);
}

/* Birth prompt overlay on the cat image */
.cat-detail-image-wrap.birth-clinic-ready-image {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    isolation: isolate;
}

.cat-detail-image-wrap.birth-clinic-ready-image::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 22px;
    background: rgba(47, 31, 60, 0.18);
    backdrop-filter: blur(2.5px);
    -webkit-backdrop-filter: blur(2.5px);
    z-index: 4;
    pointer-events: none;
}

.cat-detail-image-wrap.birth-clinic-ready-image .cat-image-large {
    filter: blur(1.5px) brightness(0.88) saturate(0.98);
    transform: scale(1.015);
    transition: filter 0.18s ease, transform 0.18s ease;
}

.cat-detail-image-wrap.birth-clinic-ready-image .cat-nav-arrow {
    opacity: 0.18;
    filter: blur(0.5px);
    pointer-events: none;
}

.cat-detail-image-wrap.birth-clinic-ready-image .birth-ready-banner {
    position: absolute;
    left: 50%;
    bottom: 26px;
    top: auto;
    transform: translateX(-50%);
    z-index: 10;
    width: min(88%, 520px);
    margin: 0;
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.72);
    background: linear-gradient(135deg, rgba(255,250,254,0.94), rgba(236,248,255,0.90), rgba(249,232,255,0.92));
    box-shadow: 0 18px 38px rgba(60, 40, 82, 0.24), inset 0 0 0 1px rgba(255,255,255,0.42);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    text-align: left;
}

.birth-ready-icon-wrap {
    width: 62px;
    height: 62px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(216,184,238,0.66);
    box-shadow: inset 0 0 0 3px rgba(255,255,255,0.38);
}

.birth-ready-icon {
    width: 44px;
    height: 44px;
    object-fit: contain;
    display: block;
}

.birth-ready-copy {
    min-width: 0;
}

.cat-detail-image-wrap.birth-clinic-ready-image .birth-ready-title {
    font-size: 19px;
    line-height: 1.15;
    margin: 0 0 4px 0;
}

.cat-detail-image-wrap.birth-clinic-ready-image .birth-ready-text {
    font-size: 13px;
    line-height: 1.32;
    margin: 0;
}

.cat-detail-image-wrap.birth-clinic-ready-image .birth-ready-button {
    width: auto;
    min-width: 188px;
    margin: 0;
    padding: 10px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

.birth-ready-button-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: inline-block;
}

.birth-clinic-icon-card img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    display: block;
}

@media (max-width: 760px) {
    .cat-detail-image-wrap.birth-clinic-ready-image::before {
        inset: 6px;
        border-radius: 18px;
    }

    .cat-detail-image-wrap.birth-clinic-ready-image .birth-ready-banner {
        bottom: 16px;
        width: 92%;
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 10px;
        padding: 12px;
    }

    .birth-ready-icon-wrap {
        width: 50px;
        height: 50px;
        border-radius: 16px;
    }

    .birth-ready-icon {
        width: 36px;
        height: 36px;
    }

    .cat-detail-image-wrap.birth-clinic-ready-image .birth-ready-title {
        font-size: 16px;
    }

    .cat-detail-image-wrap.birth-clinic-ready-image .birth-ready-text {
        font-size: 12px;
    }

    .cat-detail-image-wrap.birth-clinic-ready-image .birth-ready-button {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
        margin-top: 2px;
        white-space: normal;
    }
}

.birth-clinic-page {
    max-width: 1220px;
    margin: 18px auto 42px auto;
}

.birth-clinic-hero {
    display: grid;
    grid-template-columns: 1fr 190px;
    gap: 20px;
    align-items: center;
    padding: 24px;
    border-radius: 26px;
    border: 1px solid rgba(216,184,238,0.76);
    background: linear-gradient(135deg, rgba(255,248,252,0.92), rgba(232,247,255,0.86), rgba(245,228,255,0.88));
    box-shadow: 0 10px 24px rgba(88,64,120,0.10);
    margin-bottom: 18px;
}

.birth-clinic-kicker {
    font-size: 13px;
    font-weight: 900;
    color: #8a5a91;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

.birth-clinic-title {
    font-size: 38px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 8px;
}

.birth-clinic-subtitle {
    color: #5b5963;
    font-weight: 700;
    line-height: 1.5;
    max-width: 780px;
}

.birth-clinic-icon-card {
    min-height: 142px;
    border-radius: 24px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(216,184,238,0.68);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
}

.birth-clinic-note {
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(216,184,238,0.68);
    background: rgba(255,255,255,0.78);
    color: #5b5963;
    font-weight: 700;
}

.birth-clinic-panel {
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(216,184,238,0.76);
    background: rgba(255,255,255,0.72);
    box-shadow: 0 10px 24px rgba(88,64,120,0.10);
}

.birth-clinic-panel-title {
    text-align: center;
    padding: 16px;
    font-size: 26px;
    font-weight: 900;
    color: #684b5d;
    background: linear-gradient(90deg, rgba(232,247,255,0.92), rgba(255,241,250,0.94), rgba(238,225,255,0.92));
    border-bottom: 1px solid rgba(216,184,238,0.55);
}

.birth-kitten-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
    padding: 18px;
}

.birth-kitten-card {
    text-align: center;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(216,184,238,0.68);
    background: linear-gradient(180deg, rgba(255,255,255,0.84), rgba(255,241,250,0.66));
    box-shadow: 0 6px 14px rgba(88,64,120,0.08);
}

.birth-kitten-card img {
    width: 150px;
    height: 150px;
    object-fit: contain;
    margin-bottom: 10px;
}

.birth-kitten-name-label {
    display: block;
    font-size: 13px;
    font-weight: 900;
    color: #7b6c80;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.birth-kitten-name-input {
    width: 100%;
    border: 1px solid rgba(194,160,225,0.76);
    border-radius: 14px;
    padding: 10px 12px;
    text-align: center;
    font-size: 16px;
    font-weight: 800;
    color: #5a4664;
    background: rgba(255,255,255,0.94);
    margin-bottom: 10px;
}

.birth-kitten-meta {
    color: #5b5963;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
}

.birth-clinic-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 18px 20px 18px;
}

@media (max-width: 760px) {
    .birth-ready-banner,
    .birth-clinic-hero {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .birth-ready-button,
    .birth-clinic-primary-button {
        width: 100%;
    }

    .birth-clinic-title {
        font-size: 30px;
    }

    .birth-kitten-grid {
        grid-template-columns: 1fr;
    }
}



/* ===== Birth overlay clean card fix ===== */
.cat-detail-image-wrap.birth-clinic-ready-image {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    isolation: isolate !important;
}

.cat-detail-image-wrap.birth-clinic-ready-image::before {
    content: "" !important;
    position: absolute !important;
    inset: 12px !important;
    border-radius: 22px !important;
    background: rgba(45, 28, 58, 0.12) !important;
    backdrop-filter: blur(1.6px) !important;
    -webkit-backdrop-filter: blur(1.6px) !important;
    z-index: 4 !important;
    pointer-events: none !important;
}

.cat-detail-image-wrap.birth-clinic-ready-image .cat-image-large {
    filter: blur(0.8px) brightness(0.94) saturate(1.02) !important;
    transform: scale(1.008) !important;
}

.cat-detail-image-wrap.birth-clinic-ready-image .cat-nav-arrow {
    opacity: 0.18 !important;
    pointer-events: none !important;
}

.cat-detail-image-wrap.birth-clinic-ready-image .birth-ready-banner {
    position: absolute !important;
    left: 22px !important;
    right: 22px !important;
    bottom: 22px !important;
    top: auto !important;
    transform: none !important;
    z-index: 10 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 11px 13px !important;
    align-items: center !important;
    padding: 13px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(255,255,255,0.78) !important;
    background: linear-gradient(135deg, rgba(255,250,254,0.96), rgba(235,248,255,0.92), rgba(249,233,255,0.94)) !important;
    box-shadow: 0 14px 30px rgba(60, 40, 82, 0.23), inset 0 0 0 1px rgba(255,255,255,0.45) !important;
    backdrop-filter: blur(13px) !important;
    -webkit-backdrop-filter: blur(13px) !important;
    text-align: left !important;
}

.cat-detail-image-wrap.birth-clinic-ready-image .birth-ready-icon-wrap {
    width: 56px !important;
    height: 56px !important;
    border-radius: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,0.82) !important;
    border: 1px solid rgba(216,184,238,0.68) !important;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,0.38) !important;
}

.cat-detail-image-wrap.birth-clinic-ready-image .birth-ready-icon {
    width: 42px !important;
    height: 42px !important;
    object-fit: contain !important;
    display: block !important;
}

.cat-detail-image-wrap.birth-clinic-ready-image .birth-ready-copy {
    min-width: 0 !important;
}

.cat-detail-image-wrap.birth-clinic-ready-image .birth-ready-title {
    font-size: 19px !important;
    line-height: 1.08 !important;
    margin: 0 0 4px 0 !important;
    color: #7a2f58 !important;
}

.cat-detail-image-wrap.birth-clinic-ready-image .birth-ready-text {
    font-size: 13px !important;
    line-height: 1.28 !important;
    margin: 0 !important;
    color: #5b5963 !important;
}

.cat-detail-image-wrap.birth-clinic-ready-image .birth-ready-button {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: normal !important;
    text-align: center !important;
    border-radius: 999px !important;
}

.cat-detail-image-wrap.birth-clinic-ready-image .birth-ready-button-icon {
    width: 22px !important;
    height: 22px !important;
    object-fit: contain !important;
    flex: 0 0 auto !important;
}

@media (max-width: 760px) {
    .cat-detail-image-wrap.birth-clinic-ready-image .birth-ready-banner {
        left: 14px !important;
        right: 14px !important;
        bottom: 14px !important;
        grid-template-columns: 50px minmax(0, 1fr) !important;
        padding: 11px !important;
        gap: 9px 10px !important;
    }

    .cat-detail-image-wrap.birth-clinic-ready-image .birth-ready-icon-wrap {
        width: 48px !important;
        height: 48px !important;
        border-radius: 16px !important;
    }

    .cat-detail-image-wrap.birth-clinic-ready-image .birth-ready-icon {
        width: 36px !important;
        height: 36px !important;
    }

    .cat-detail-image-wrap.birth-clinic-ready-image .birth-ready-title {
        font-size: 16px !important;
    }

    .cat-detail-image-wrap.birth-clinic-ready-image .birth-ready-text {
        font-size: 12px !important;
    }
}



/* ===== PurrPixels Memory Event ===== */
.memory-event-page {
    max-width: 1180px;
    margin: 18px auto 42px auto;
}

.memory-event-back-button {
    margin-bottom: 12px;
}

.memory-event-hero {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    padding: 28px;
    background:
        radial-gradient(circle at 82% 20%, rgba(255,216,239,0.90), transparent 30%),
        radial-gradient(circle at 16% 12%, rgba(226,248,255,0.92), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.88), rgba(238,247,255,0.82), rgba(255,235,247,0.86));
    border: 1px solid rgba(216,184,238,0.78);
    box-shadow: 0 16px 36px rgba(88,64,120,0.14);
    display: grid;
    grid-template-columns: 1fr 210px;
    gap: 22px;
    align-items: center;
}

.memory-event-kicker {
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a5a91;
    margin-bottom: 8px;
}

.memory-event-title {
    font-size: 48px;
    line-height: 0.95;
    font-weight: 950;
    color: #71435f;
    margin-bottom: 10px;
}

.memory-event-subtitle {
    font-size: 17px;
    line-height: 1.48;
    color: #5b5963;
    font-weight: 800;
    max-width: 760px;
}

.memory-event-hero-art {
    width: 180px;
    height: 180px;
    border-radius: 42px;
    background: rgba(255,255,255,0.58);
    border: 1px solid rgba(216,184,238,0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 4px rgba(255,255,255,0.35), 0 14px 30px rgba(88,64,120,0.14);
    margin-left: auto;
}

.memory-event-hero-art img {
    width: 132px;
    height: 132px;
    object-fit: contain;
}

.memory-event-status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 18px 0;
}

.memory-status-card,
.memory-event-card {
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(216,184,238,0.70);
    border-radius: 22px;
    box-shadow: 0 10px 24px rgba(88,64,120,0.10);
    backdrop-filter: blur(6px);
}

.memory-status-card {
    padding: 15px 16px;
    text-align: center;
}

.memory-status-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 950;
    color: #8a6d90;
    margin-bottom: 6px;
}

.memory-status-value {
    font-size: 26px;
    font-weight: 950;
    color: #7a2f58;
}

.memory-status-small {
    margin-top: 3px;
    font-size: 12px;
    color: #6d6373;
    font-weight: 800;
}

.memory-life-timer {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,0.74);
    border: 1px solid rgba(216,184,238,0.64);
    color: #7a2f58;
    font-size: 11px;
    font-weight: 950;
}

.memory-event-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
    align-items: start;
}

.memory-event-card {
    overflow: hidden;
}

.memory-event-card-title {
    padding: 14px 18px;
    background: linear-gradient(90deg, rgba(232,247,255,0.92), rgba(255,241,250,0.96), rgba(238,225,255,0.92));
    border-bottom: 1px solid rgba(216,184,238,0.55);
    color: #684b5d;
    text-align: center;
    font-size: 24px;
    font-weight: 950;
}

.memory-event-card-body {
    padding: 18px;
}

.memory-event-main-action {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 18px;
    align-items: center;
}

.memory-event-main-action img {
    width: 112px;
    height: 112px;
    object-fit: contain;
    border-radius: 28px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(216,184,238,0.64);
    padding: 14px;
}

.memory-event-action-title {
    font-size: 28px;
    font-weight: 950;
    color: #7a2f58;
    margin-bottom: 8px;
}

.memory-event-action-text {
    color: #5b5963;
    line-height: 1.45;
    font-weight: 800;
    margin-bottom: 12px;
}

.memory-event-big-button,
.memory-event-small-button {
    border-radius: 999px;
    border: 1px solid rgba(194,160,225,0.86);
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250,222,246,0.88));
    color: #684b5d;
    box-shadow: 0 7px 16px rgba(88,64,120,0.10);
    font-weight: 950;
}

.memory-event-big-button {
    min-width: 220px;
    min-height: 48px;
    font-size: 17px;
}

.memory-event-small-button {
    min-height: 40px;
    padding: 9px 14px;
}

.memory-level-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.memory-level-row {
    display: grid;
    grid-template-columns: 48px 1fr 54px;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border-radius: 16px;
    background: rgba(255,255,255,0.58);
    border: 1px solid rgba(216,184,238,0.54);
}

.memory-level-row.current {
    background: linear-gradient(90deg, rgba(255,241,250,0.96), rgba(232,247,255,0.88));
    border-color: rgba(194,160,225,0.90);
}

.memory-level-row.completed {
    background: rgba(240,255,246,0.74);
}

.memory-level-icon {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: 12px;
    background: rgba(255,255,255,0.82);
    padding: 6px;
}

.memory-level-name {
    font-weight: 950;
    color: #684b5d;
}

.memory-level-reward {
    font-size: 12px;
    font-weight: 850;
    color: #6e6474;
    margin-top: 2px;
}

.memory-level-badge {
    text-align: center;
    font-weight: 950;
    color: #7a2f58;
}

.memory-board-wrap {
    padding: 18px;
}

.memory-board-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.memory-board-title {
    font-size: 26px;
    font-weight: 950;
    color: #684b5d;
}

.memory-board-subtitle {
    font-weight: 850;
    color: #6d6373;
}

.memory-board {
    display: grid;
    gap: 12px;
}

.memory-board.tiles-6 { grid-template-columns: repeat(3, minmax(90px, 1fr)); }
.memory-board.tiles-8 { grid-template-columns: repeat(4, minmax(86px, 1fr)); }
.memory-board.tiles-10 { grid-template-columns: repeat(5, minmax(80px, 1fr)); }
.memory-board.tiles-12 { grid-template-columns: repeat(4, minmax(86px, 1fr)); }
.memory-board.tiles-14 { grid-template-columns: repeat(7, minmax(70px, 1fr)); }
.memory-board.tiles-16 { grid-template-columns: repeat(4, minmax(86px, 1fr)); }
.memory-board.tiles-18 { grid-template-columns: repeat(6, minmax(76px, 1fr)); }
.memory-board.tiles-20 { grid-template-columns: repeat(5, minmax(80px, 1fr)); }
.memory-board.tiles-22 { grid-template-columns: repeat(11, minmax(54px, 1fr)); }
.memory-board.tiles-24 { grid-template-columns: repeat(6, minmax(76px, 1fr)); }

.memory-card-tile {
    position: relative;
    aspect-ratio: 1 / 1.08;
    min-height: 82px;
    border: none;
    background: transparent;
    padding: 0;
    perspective: 800px;
}

.memory-card-inner {
    position: absolute;
    inset: 0;
    transition: transform 0.45s ease;
    transform-style: preserve-3d;
}

.memory-card-tile.revealed .memory-card-inner,
.memory-card-tile.matched .memory-card-inner {
    transform: rotateY(180deg);
}

.memory-card-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 18px;
    border: 1px solid rgba(216,184,238,0.72);
    box-shadow: 0 8px 18px rgba(88,64,120,0.14);
    display: flex;
    align-items: center;
    justify-content: center;
}

.memory-card-back {
    background:
        radial-gradient(circle at 22% 18%, rgba(255,255,255,0.92), transparent 28%),
        linear-gradient(135deg, rgba(255,214,236,0.96), rgba(212,236,255,0.94), rgba(238,225,255,0.96));
}

.memory-card-back span {
    font-size: 34px;
    filter: drop-shadow(0 3px 7px rgba(88,64,120,0.16));
}

.memory-card-front {
    transform: rotateY(180deg);
    background: rgba(255,255,255,0.96);
    padding: 12px;
    flex-direction: column;
    gap: 6px;
}

.memory-card-front img {
    width: 88%;
    height: 86%;
    object-fit: contain;
}

.memory-card-front-media {
    width: 92%;
    height: 88%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.memory-card-front-media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.memory-card-front-fallback {
    font-size: 11px;
    font-weight: 950;
    color: #684b5d;
    text-align: center;
    line-height: 1.15;
}

.memory-card-front-emoji {
    display: none;
    font-size: 54px;
    line-height: 1;
    filter: drop-shadow(0 4px 8px rgba(88,64,120,0.15));
}

.memory-card-front-media.image-missing .memory-card-front-emoji {
    display: block;
}

.memory-card-tile.mismatch .memory-card-face {
    border-color: rgba(255,181,214,0.95);
    box-shadow: 0 0 0 4px rgba(255,223,239,0.72), 0 8px 18px rgba(88,64,120,0.14);
}

.memory-board-message {
    margin: 12px 0 4px 0;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255,241,250,0.86);
    border: 1px solid rgba(216,184,238,0.68);
    color: #7a2f58;
    font-weight: 900;
    text-align: center;
}

.memory-card-tile.matched .memory-card-face {
    border-color: rgba(168,203,183,0.90);
    box-shadow: 0 8px 18px rgba(94,145,110,0.16);
}

.memory-life-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}

.memory-event-locked {
    text-align: center;
    padding: 30px 18px;
    color: #5b5963;
    font-weight: 850;
    line-height: 1.5;
}

@media (max-width: 980px) {
    .memory-event-hero,
    .memory-event-layout,
    .memory-event-main-action {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .memory-event-hero-art,
    .memory-event-main-action img {
        margin: 0 auto;
    }

    .memory-event-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .memory-board,
    .memory-board.tiles-6,
    .memory-board.tiles-8,
    .memory-board.tiles-10,
    .memory-board.tiles-12,
    .memory-board.tiles-14,
    .memory-board.tiles-16,
    .memory-board.tiles-18,
    .memory-board.tiles-20,
    .memory-board.tiles-22,
    .memory-board.tiles-24 {
        grid-template-columns: repeat(4, minmax(64px, 1fr));
    }
}

@media (max-width: 540px) {
    .memory-event-page {
        margin: 8px 8px 96px 8px;
    }

    .memory-event-back-button {
        width: 100%;
        margin-bottom: 10px;
    }

    .memory-event-hero {
        padding: 16px;
        border-radius: 22px;
        gap: 12px;
    }

    .memory-event-title {
        font-size: 28px;
        margin-bottom: 6px;
    }

    .memory-event-kicker {
        font-size: 12px;
        margin-bottom: 4px;
    }

    .memory-event-subtitle {
        font-size: 14px;
        line-height: 1.42;
    }

    .memory-event-hero-art {
        width: 92px;
        height: 92px;
        border-radius: 22px;
    }

    .memory-event-hero-art img {
        width: 66px;
        height: 66px;
    }

    .memory-event-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin: 12px 0;
    }

    .memory-status-card,
    .memory-event-card {
        border-radius: 18px;
    }

    .memory-status-card {
        padding: 12px 10px;
        min-height: 96px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .memory-status-label {
        font-size: 11px;
        margin-bottom: 5px;
    }

    .memory-status-value {
        font-size: 24px;
        line-height: 1;
    }

    .memory-status-small {
        font-size: 11px;
        line-height: 1.35;
    }

    .memory-life-timer {
        margin-top: 5px;
        font-size: 10px;
        padding: 4px 7px;
    }

    .memory-event-layout {
        gap: 12px;
    }

    .memory-event-card-title {
        font-size: 18px;
        padding: 12px 14px;
    }

    .memory-event-card-body {
        padding: 14px;
    }

    .memory-event-main-action {
        grid-template-columns: 82px 1fr;
        gap: 12px;
        text-align: left;
        align-items: center;
    }

    .memory-event-main-action img {
        width: 82px;
        height: 82px;
        padding: 10px;
        border-radius: 22px;
        margin: 0;
    }

    .memory-event-action-title {
        font-size: 17px;
        margin-bottom: 6px;
    }

    .memory-event-action-text {
        font-size: 13px;
        line-height: 1.4;
        margin-bottom: 10px;
    }

    .memory-event-big-button,
    .memory-event-small-button {
        width: 100%;
        min-width: 0;
    }

    .memory-event-big-button {
        min-height: 44px;
        font-size: 15px;
    }

    .memory-event-small-button {
        min-height: 38px;
        padding: 8px 12px;
        font-size: 14px;
    }

    .memory-life-actions {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .memory-level-list {
        gap: 8px;
    }

    .memory-level-row {
        grid-template-columns: 36px 1fr 42px;
        gap: 8px;
        padding: 8px;
        border-radius: 14px;
    }

    .memory-level-icon {
        width: 34px;
        height: 34px;
        padding: 5px;
        border-radius: 10px;
    }

    .memory-level-name {
        font-size: 13px;
        line-height: 1.25;
    }

    .memory-level-reward {
        font-size: 11px;
        line-height: 1.3;
    }

    .memory-level-badge {
        font-size: 12px;
    }

    .memory-board-wrap {
        padding: 14px;
    }

    .memory-board-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 12px;
    }

    .memory-board-title {
        font-size: 22px;
    }

    .memory-board-subtitle,
    .memory-board-message {
        font-size: 13px;
        line-height: 1.4;
    }

    .memory-board,
    .memory-board.tiles-6,
    .memory-board.tiles-8,
    .memory-board.tiles-10,
    .memory-board.tiles-12,
    .memory-board.tiles-14,
    .memory-board.tiles-16,
    .memory-board.tiles-18,
    .memory-board.tiles-20,
    .memory-board.tiles-22,
    .memory-board.tiles-24 {
        grid-template-columns: repeat(3, minmax(74px, 1fr));
        gap: 9px;
    }

    .memory-card-tile {
        min-height: 78px;
    }

    .memory-card-front {
        padding: 8px;
    }

    /*
       Do NOT hide every <span> on the front of a Memory card.
       The image wrapper itself is a <span class="memory-card-front-media">,
       so the old rule accidentally hid the complete card image on mobile.
    */
    .memory-card-front-media {
        display: flex !important;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
    }

    .memory-card-front-media img {
        display: block !important;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    .memory-card-front-media.image-missing .memory-card-front-emoji {
        display: block !important;
    }

    /* Only the optional text label is hidden on small screens. */
    .memory-card-front-fallback {
        display: none !important;
    }
}



/* ===== Memory Event polish: dreamy backs, smooth flip and completion modal ===== */
.memory-card-tile {
    transition: transform 0.18s ease, filter 0.18s ease;
}

.memory-card-tile:not(:disabled):hover {
    transform: translateY(-3px) scale(1.01);
}

.memory-card-inner {
    transition: transform 0.72s cubic-bezier(.22, .86, .31, 1.08), filter 0.25s ease;
}

.memory-card-face {
    overflow: hidden;
}

.memory-card-back {
    background:
        radial-gradient(circle at 18% 16%, rgba(255,255,255,0.95), transparent 20%),
        radial-gradient(circle at 78% 76%, rgba(255,214,236,0.85), transparent 22%),
        linear-gradient(135deg, rgba(255,241,250,0.98), rgba(215,239,255,0.96), rgba(237,223,255,0.98));
    border: 1px solid rgba(202,162,234,0.78);
}

.memory-card-back::before {
    content: "";
    position: absolute;
    inset: 13px;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,0.72);
    box-shadow: inset 0 0 26px rgba(255,255,255,0.58);
}

.memory-card-back::after {
    content: "✦";
    position: absolute;
    right: 18px;
    top: 15px;
    color: rgba(139,71,128,0.34);
    font-size: 22px;
}

.memory-card-back span {
    font-size: 36px;
}

.memory-card-back-pattern {
    position: relative;
    z-index: 2;
    width: 76px;
    height: 76px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.52);
    border: 1px solid rgba(255,255,255,0.72);
    box-shadow: 0 12px 26px rgba(88,64,120,0.13), inset 0 0 0 3px rgba(255,255,255,0.28);
}

.memory-card-back-paws {
    filter: drop-shadow(0 4px 8px rgba(88,64,120,0.20));
}

.memory-card-back-sparkle {
    position: absolute;
    left: -8px;
    top: -10px;
    font-size: 22px !important;
    color: rgba(255,190,222,0.95);
}

.memory-card-front {
    background:
        radial-gradient(circle at 16% 14%, rgba(255,241,250,0.55), transparent 22%),
        rgba(255,255,255,0.98);
}

.memory-card-front-media {
    width: 94%;
    height: 90%;
}

.memory-card-front-media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 12px 16px rgba(88,64,120,0.14));
    animation: memoryImageFloatIn 0.42s ease both;
}

.memory-card-tile.revealed .memory-card-front,
.memory-card-tile.matched .memory-card-front {
    animation: memoryFrontSoftPop 0.48s ease both;
}

.memory-card-tile.matched .memory-card-face {
    border-color: rgba(135,206,172,0.95);
    box-shadow: 0 10px 22px rgba(88,64,120,0.11), 0 0 0 3px rgba(216,255,232,0.72);
}

.memory-card-tile.mismatch {
    animation: memoryMismatchShake 0.55s ease 0.38s both;
}

.memory-card-tile.mismatch .memory-card-face {
    border-color: rgba(255,143,197,0.98);
    box-shadow: 0 10px 24px rgba(150,60,110,0.18), 0 0 0 3px rgba(255,220,239,0.85);
}

@keyframes memoryFrontSoftPop {
    0% { filter: brightness(1); }
    45% { filter: brightness(1.06); }
    100% { filter: brightness(1); }
}

@keyframes memoryImageFloatIn {
    from { opacity: 0.72; transform: scale(0.94) translateY(5px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes memoryMismatchShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

.memory-level-complete-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(54,40,69,0.28);
    backdrop-filter: blur(8px);
}

.memory-level-complete-card {
    width: min(520px, 94vw);
    border-radius: 32px;
    padding: 26px 26px 24px 26px;
    text-align: center;
    background:
        radial-gradient(circle at 20% 12%, rgba(255,255,255,0.95), transparent 28%),
        linear-gradient(135deg, rgba(255,241,250,0.98), rgba(232,247,255,0.96), rgba(238,225,255,0.98));
    border: 1px solid rgba(216,184,238,0.90);
    box-shadow: 0 24px 58px rgba(88,64,120,0.26);
    animation: memoryCompletePop 0.55s cubic-bezier(.22,.86,.31,1.18) both;
}

.memory-level-complete-icon {
    width: 92px;
    height: 92px;
    margin: 0 auto 12px auto;
    border-radius: 28px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(216,184,238,0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,0.38);
}

.memory-level-complete-icon img {
    width: 68px;
    height: 68px;
    object-fit: contain;
}

.memory-level-complete-title {
    font-size: 34px;
    font-weight: 950;
    color: #7a2f58;
    margin-bottom: 8px;
}

.memory-level-complete-text {
    font-size: 17px;
    font-weight: 850;
    color: #5b5963;
    line-height: 1.45;
    margin-bottom: 18px;
}

.memory-level-complete-reward {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(216,184,238,0.72);
    font-weight: 950;
    color: #684b5d;
    margin-bottom: 18px;
}

.memory-level-complete-button {
    min-width: 190px;
    border-radius: 999px;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 950;
}

@keyframes memoryCompletePop {
    from { opacity: 0; transform: translateY(18px) scale(0.92); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}


/* ===== Heka's Veil and custom cat backgrounds ===== */
.cat-detail-image-wrap.has-cat-background,
.public-main-cat .cat-background-stage {
    width: 100%;
}

.cat-background-stage {
    position: relative;
    width: min(100%, 1120px);
    aspect-ratio: 2106 / 940;
    margin: 0 auto 16px auto;
    border-radius: 24px;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    border: 1px solid rgba(216,184,238,0.74);
    box-shadow: 0 12px 28px rgba(88,64,120,0.16);
}

.cat-background-stage::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 38%;
    background: linear-gradient(to bottom, rgba(234,223,255,0), rgba(234,223,255,0.62));
    pointer-events: none;
    z-index: 1;
}

.cat-background-stage .cat-background-cat {
    position: absolute;
    left: 50%;
    bottom: 8%;
    transform: translateX(-50%);
    width: 14.25%;
    height: 32%;
    max-width: 300px;
    max-height: 300px;
    object-fit: contain;
    z-index: 2;
    margin: 0;
    border-radius: 0;
    filter: drop-shadow(0 12px 18px rgba(40,28,46,0.26));
}

.cat-background-stage.heka-stage-preview-original {
    width: min(2106px, 100%);
}

.cat-background-stage.heka-stage-preview-original .cat-background-cat {
    width: 14.25%;
    height: 32%;
}

.cat-background-id-badge {
    position: absolute;
    left: 14px;
    bottom: 12px;
    z-index: 3;
    border-radius: 999px;
    padding: 6px 11px;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(216,184,238,0.74);
    color: #684b5d;
    font-size: 12px;
    font-weight: 900;
    backdrop-filter: blur(5px);
}

/* Heka custom background display polish */
.cat-background-id-badge {
    display: none !important;
}

.cat-background-stage {
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.cat-background-stage .cat-background-cat {
    left: 50%;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    max-width: 28%;
    max-height: 55%;
}

.cat-background-stage.heka-stage-preview-original {
    width: min(2106px, 100%);
    max-width: 2106px;
    background-size: 100% 100%;
}

.cat-background-stage.heka-stage-preview-original .cat-background-cat {
    left: 50%;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    max-width: 18%;
    max-height: 42%;
}

.cat-detail-page-clean.has-custom-background {
    width: 100%;
    max-width: none;
}

.cat-detail-page-clean.has-custom-background .cat-title-clean {
    margin-bottom: 12px;
}

.cat-detail-full-background {
    width: min(2106px, calc(100vw - 32px));
    max-width: 2106px;
    margin: 0 auto 24px auto;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.cat-detail-full-background .cat-detail-image-wrap {
    display: block;
    width: 100%;
    min-height: 0;
}

.cat-background-stage.cat-detail-fullscreen-stage {
    width: 100%;
    max-width: 2106px;
    aspect-ratio: 2106 / 940;
    margin: 0 auto;
    border-radius: 26px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.cat-background-stage.cat-detail-fullscreen-stage .cat-background-cat {
    width: 300px !important;
    height: 300px !important;
    max-width: 18vw !important;
    max-height: 18vw !important;
    min-width: 170px;
    min-height: 170px;
    left: 50%;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
}

.cat-detail-full-background .cat-nav-arrow.left {
    left: 18px;
}

.cat-detail-full-background .cat-nav-arrow.right {
    right: 18px;
}

.cat-detail-page-clean.has-custom-background .cat-clean-grid {
    max-width: 1460px;
    margin: 0 auto;
}

.cat-detail-page-clean.has-custom-background .middle-cat-panel.clean-main-cat {
    min-height: auto;
}

.cat-detail-page-clean.has-custom-background .cat-detail-image-wrap.is-hidden-background-copy {
    display: none;
}

.cat-background-bonus-note {
    margin-top: 8px;
    font-size: 12px;
    color: #7d6b81;
    font-weight: 800;
}

@media (max-width: 1100px) {
    .cat-detail-full-background {
        width: min(100%, calc(100vw - 20px));
    }

    .cat-background-stage.cat-detail-fullscreen-stage .cat-background-cat,
    .cat-background-stage.heka-stage-preview-original .cat-background-cat {
        width: min(300px, 28vw) !important;
        height: min(300px, 28vw) !important;
        min-width: 140px;
        min-height: 140px;
    }
}

@media (max-width: 620px) {
    .cat-background-stage .cat-background-cat,
    .cat-background-stage.heka-stage-preview-original .cat-background-cat,
    .cat-background-stage.cat-detail-fullscreen-stage .cat-background-cat {
        width: min(300px, 38vw) !important;
        height: min(300px, 38vw) !important;
        min-width: 112px;
        min-height: 112px;
    }

    .cat-detail-full-background {
        width: calc(100vw - 12px);
        margin-bottom: 16px;
    }

    .cat-background-stage.cat-detail-fullscreen-stage {
        border-radius: 18px;
    }
}

.heka-page {
    max-width: 1220px;
    margin: 18px auto 40px auto;
}

.heka-hero {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 22px;
    align-items: center;
    background: linear-gradient(135deg, rgba(255,252,255,0.88), rgba(232,247,255,0.76), rgba(255,241,250,0.78));
    border: 1px solid rgba(216,184,238,0.74);
    border-radius: 26px;
    padding: 22px;
    box-shadow: 0 10px 24px rgba(88,64,120,0.12);
    margin-bottom: 20px;
}

.heka-hero-icon {
    min-height: 170px;
    border-radius: 24px;
    background: rgba(255,255,255,0.62);
    border: 1px solid rgba(216,184,238,0.66);
    display: flex;
    align-items: center;
    justify-content: center;
}

.heka-hero-icon img {
    width: 145px;
    height: 145px;
    object-fit: contain;
}

.heka-kicker {
    color: #8a5a91;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.heka-title {
    color: #684b5d;
    font-size: 34px;
    font-weight: 950;
    margin-bottom: 8px;
}

.heka-subtitle {
    color: #5b5963;
    font-weight: 750;
    line-height: 1.5;
}

.heka-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 20px;
    align-items: start;
}

.heka-panel {
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(216,184,238,0.74);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(88,64,120,0.10);
}

.heka-panel-title {
    background: linear-gradient(90deg, rgba(232,247,255,0.92), rgba(255,241,250,0.94), rgba(238,225,255,0.92));
    border-bottom: 1px solid rgba(216,184,238,0.55);
    padding: 13px 16px;
    text-align: center;
    font-size: 21px;
    color: #684b5d;
    font-weight: 950;
}

.heka-panel-body {
    padding: 16px;
}

.heka-cat-search {
    width: 100%;
    border: 1px solid rgba(216,184,238,0.74);
    border-radius: 999px;
    padding: 11px 15px;
    background: rgba(255,255,255,0.92);
    margin-bottom: 12px;
}

.heka-cat-list {
    display: grid;
    gap: 10px;
    max-height: 640px;
    overflow: auto;
    padding-right: 4px;
}

.heka-cat-card {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 11px;
    align-items: center;
    border: 1px solid rgba(216,184,238,0.62);
    border-radius: 16px;
    padding: 10px;
    background: rgba(255,255,255,0.58);
    cursor: pointer;
    transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.heka-cat-card:hover,
.heka-cat-card.selected {
    background: rgba(255,241,250,0.86);
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(88,64,120,0.08);
}

.heka-cat-card.selected {
    border-color: rgba(169,120,223,0.9);
}

.heka-cat-card img {
    width: 66px;
    height: 66px;
    object-fit: contain;
}

.heka-cat-name {
    font-weight: 950;
    color: #7a2f58;
    margin-bottom: 3px;
}

.heka-cat-meta {
    font-size: 12px;
    color: #6f6477;
    font-weight: 750;
    line-height: 1.3;
}

.heka-filter-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.heka-filter-row select,
.heka-filter-row button {
    border-radius: 999px;
}

.heka-color-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 10px 0 16px 0;
}

.heka-color-chip {
    border: 1px solid rgba(216,184,238,0.74);
    border-radius: 999px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.72);
    color: #684b5d;
    font-weight: 900;
    text-transform: capitalize;
}

.heka-color-chip.active {
    background: linear-gradient(180deg, rgba(255,241,250,0.96), rgba(232,247,255,0.92));
    border-color: rgba(169,120,223,0.9);
    color: #7a2f58;
}

.heka-background-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 16px;
}

.heka-bg-card {
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(216,184,238,0.70);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 7px 16px rgba(88,64,120,0.09);
}

.heka-bg-preview {
    position: relative;
    aspect-ratio: 2106 / 940;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid rgba(216,184,238,0.46);
}

.heka-bg-preview::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40%;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(234,223,255,0.48));
}

.heka-bg-card-body {
    padding: 12px 14px 14px 14px;
}

.heka-bg-title-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
}

.heka-bg-title {
    font-size: 18px;
    font-weight: 950;
    color: #684b5d;
}

.heka-heart-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 0;
    font-size: 19px;
    color: #b34b75;
}

.heka-bg-colors {
    font-size: 12px;
    font-weight: 850;
    color: #6f6477;
    margin-bottom: 10px;
    text-transform: capitalize;
}

.heka-bg-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.heka-bg-actions button {
    flex: 1 1 120px;
}

.heka-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 18px;
}

.heka-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(55,38,62,0.54);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    backdrop-filter: blur(6px);
}

.heka-preview-card {
    width: min(1760px, 98vw);
    max-height: 94vh;
    overflow: auto;
    background: rgba(255,255,255,0.94);
    border: 1px solid rgba(216,184,238,0.86);
    border-radius: 26px;
    padding: 18px;
    box-shadow: 0 18px 42px rgba(40,28,46,0.28);
}

.heka-preview-card .cat-background-stage {
    margin-bottom: 12px;
}

.heka-apply-note {
    margin-top: 10px;
    color: #7a2f58;
    font-size: 13px;
    font-weight: 850;
    text-align: center;
    min-height: 18px;
}

.heka-preview-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-bottom: 12px;
}

.heka-preview-title {
    font-size: 24px;
    font-weight: 950;
    color: #684b5d;
}

@media (max-width: 900px) {
    .heka-hero,
    .heka-layout {
        grid-template-columns: 1fr;
    }

    .heka-hero {
        text-align: center;
    }

    .heka-hero-icon {
        min-height: 135px;
    }

    .heka-hero-icon img {
        width: 118px;
        height: 118px;
    }

    .heka-cat-list {
        max-height: none;
    }
}

@media (max-width: 620px) {
    .cat-background-stage .cat-background-cat {
        width: 24%;
        height: 42%;
    }

    .cat-background-stage.heka-stage-preview-original .cat-background-cat {
        width: min(300px, 38vw) !important;
        height: min(300px, 38vw) !important;
    }

    .heka-preview-card {
        width: 98vw;
        padding: 12px;
        border-radius: 20px;
    }

    .heka-title {
        font-size: 27px;
    }

    .heka-background-grid {
        grid-template-columns: 1fr;
    }

    .heka-bg-actions {
        flex-direction: column;
    }
}



/* ===== Heka custom background layout repair ===== */
.cat-detail-page-clean.has-custom-background {
    position: relative;
    max-width: none;
    width: 100%;
    padding-bottom: 34px;
}

.cat-detail-page-clean.has-custom-background .cat-title-clean {
    position: relative;
    z-index: 9;
    margin-bottom: 8px;
}

.cat-detail-page-clean.has-custom-background .cat-detail-full-background {
    width: 100vw;
    max-width: 2106px;
    margin: 0 auto 0 auto;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.cat-detail-page-clean.has-custom-background .cat-detail-full-background::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -230px;
    height: 360px;
    pointer-events: none;
    z-index: 3;
    background: linear-gradient(
        to bottom,
        rgba(234,223,255,0) 0%,
        rgba(234,223,255,0.34) 28%,
        rgba(234,223,255,0.78) 62%,
        rgba(234,223,255,0) 100%
    );
}

.cat-detail-page-clean.has-custom-background .cat-detail-image-wrap.has-cat-background {
    display: block;
    width: 100%;
    position: relative;
}

.cat-detail-page-clean.has-custom-background .cat-background-stage.cat-detail-fullscreen-stage {
    width: 100%;
    max-width: 2106px;
    aspect-ratio: 2106 / 940;
    margin: 0 auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

.cat-detail-page-clean.has-custom-background .cat-background-stage.cat-detail-fullscreen-stage::after {
    height: 70%;
    bottom: 0;
    z-index: 1;
    background: linear-gradient(
        to bottom,
        rgba(234,223,255,0) 0%,
        rgba(234,223,255,0.10) 28%,
        rgba(234,223,255,0.52) 72%,
        rgba(234,223,255,0.94) 100%
    );
}

.cat-detail-page-clean.has-custom-background .cat-background-stage.cat-detail-fullscreen-stage .cat-background-cat {
    top: 45%;
    width: 300px !important;
    height: 300px !important;
    max-width: 18vw !important;
    max-height: 18vw !important;
    min-width: 170px;
    min-height: 170px;
    transform: translate(calc(-50% + var(--heka-cat-x, 0px)), calc(-50% + var(--heka-cat-y, 0px))) rotate(var(--heka-cat-rotation, 0deg)) scaleX(var(--heka-cat-flip-x, 1)) scale(var(--heka-cat-scale, 1)) !important;
    transform-origin: center center;
    z-index: 2;
}

.cat-detail-page-clean.has-custom-background .cat-clean-grid {
    position: relative;
    z-index: 6;
    max-width: 1460px;
    width: min(1460px, calc(100vw - 44px));
    margin: clamp(-590px, -31vw, -350px) auto 0 auto;
    align-items: start;
}

.cat-detail-page-clean.has-custom-background .cat-left-stack,
.cat-detail-page-clean.has-custom-background .cat-right-stack {
    padding-top: clamp(18px, 4vw, 84px);
}

.cat-detail-page-clean.has-custom-background .cat-center-stack {
    padding-top: clamp(240px, 23vw, 370px);
}

.cat-detail-page-clean.has-custom-background .side-panel,
.cat-detail-page-clean.has-custom-background .training-side-panel,
.cat-detail-page-clean.has-custom-background .middle-cat-panel.clean-main-cat,
.cat-detail-page-clean.has-custom-background .breeding-panel,
.cat-detail-page-clean.has-custom-background .purr-card {
    background: rgba(255,255,255,0.66);
    border-color: rgba(216,184,238,0.72);
    box-shadow: 0 14px 30px rgba(88,64,120,0.12);
    backdrop-filter: blur(12px);
}

.cat-detail-page-clean.has-custom-background .side-panel-title,
.cat-detail-page-clean.has-custom-background .training-summary,
.cat-detail-page-clean.has-custom-background .breeding-panel-title,
.cat-detail-page-clean.has-custom-background .timeline-compact-title {
    background: linear-gradient(90deg, rgba(232,247,255,0.78), rgba(255,241,250,0.80), rgba(238,225,255,0.78));
    backdrop-filter: blur(8px);
}

.cat-detail-page-clean.has-custom-background .action-tile,
.cat-detail-page-clean.has-custom-background .breeding-action-card,
.cat-detail-page-clean.has-custom-background .purr-section {
    background: rgba(255,255,255,0.50);
}

.cat-detail-page-clean.has-custom-background .bar-wrap {
    background: rgba(255,255,255,0.58);
}

.cat-detail-page-clean.has-custom-background .cat-nav-arrow {
    top: 45%;
    z-index: 8;
}

.cat-detail-page-clean.has-custom-background .cat-nav-arrow.left {
    left: calc(50% - clamp(210px, 18vw, 310px));
}

.cat-detail-page-clean.has-custom-background .cat-nav-arrow.right {
    right: calc(50% - clamp(210px, 18vw, 310px));
}

.cat-background-stage .cat-background-cat.heka-draggable-cat {
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.cat-background-stage .cat-background-cat.heka-draggable-cat:active {
    cursor: grabbing;
}

.heka-cat-position-tools {
    position: absolute;
    right: clamp(14px, 4vw, 72px);
    top: clamp(72px, 8vw, 145px);
    z-index: 8;
    width: min(320px, calc(100vw - 28px));
    padding: 12px 14px;
    border-radius: 20px;
    background: rgba(255,255,255,0.66);
    border: 1px solid rgba(216,184,238,0.78);
    box-shadow: 0 12px 26px rgba(88,64,120,0.14);
    backdrop-filter: blur(12px);
    color: #5a4664;
    font-weight: 850;
}

.heka-cat-position-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    font-weight: 950;
    margin-bottom: 8px;
}

.heka-cat-position-status {
    color: #8a5a91;
    font-size: 12px;
    white-space: nowrap;
}

.heka-cat-position-row {
    display: grid;
    grid-template-columns: 58px 1fr 58px;
    gap: 8px;
    align-items: center;
    font-size: 12px;
}

.heka-cat-position-row input[type="range"] {
    width: 100%;
    margin: 0;
}

.heka-cat-position-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 9px;
    font-size: 11px;
    color: #75667d;
}

.heka-cat-position-actions button {
    margin: 0;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

@media (max-width: 1100px) {
    .cat-detail-page-clean.has-custom-background .cat-clean-grid {
        width: min(1180px, calc(100vw - 24px));
        margin-top: -110px;
        grid-template-columns: 1fr;
    }

    .cat-detail-page-clean.has-custom-background .cat-left-stack,
    .cat-detail-page-clean.has-custom-background .cat-center-stack,
    .cat-detail-page-clean.has-custom-background .cat-right-stack {
        padding-top: 0;
    }

    .cat-detail-page-clean.has-custom-background .cat-nav-arrow.left {
        left: 16px;
    }

    .cat-detail-page-clean.has-custom-background .cat-nav-arrow.right {
        right: 16px;
    }

    .heka-cat-position-tools {
        position: relative;
        right: auto;
        top: auto;
        margin: 12px auto 0 auto;
        z-index: 9;
    }
}

@media (max-width: 760px) {
    .cat-detail-page-clean.has-custom-background .cat-clean-grid {
        width: calc(100vw - 16px);
        margin-top: -45px;
    }

    .cat-detail-page-clean.has-custom-background .cat-background-stage.cat-detail-fullscreen-stage .cat-background-cat {
        width: min(300px, 38vw) !important;
        height: min(300px, 38vw) !important;
        min-width: 112px;
        min-height: 112px;
    }

    .cat-detail-page-clean.has-custom-background .cat-detail-full-background::after {
        bottom: -130px;
        height: 220px;
    }
}



/* ===== Heka stable overlay layout, no shifting ===== */
.cat-detail-page-clean.has-custom-background {
    max-width: 1460px !important;
    width: auto !important;
    margin: 0 auto 40px auto !important;
    padding: 18px !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 34px !important;
    isolation: isolate !important;
}

.cat-detail-page-clean.has-custom-background::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--cat-detail-custom-bg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.96;
}

.cat-detail-page-clean.has-custom-background::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(to bottom, rgba(234,223,255,0.08) 0%, rgba(234,223,255,0.28) 72%, rgba(234,223,255,0.64) 100%),
        radial-gradient(circle at 50% 16%, rgba(255,255,255,0.34), rgba(255,255,255,0) 58%);
}

.cat-detail-page-clean.has-custom-background .cat-detail-full-background,
.cat-detail-page-clean.has-custom-background .cat-detail-full-background::after {
    display: none !important;
}

.cat-detail-page-clean.has-custom-background .cat-title-clean {
    position: relative !important;
    z-index: 4 !important;
    margin: 6px 0 22px 0 !important;
}

.cat-detail-page-clean.has-custom-background .cat-clean-grid {
    position: relative !important;
    z-index: 3 !important;
    display: grid !important;
    grid-template-columns: 330px minmax(520px, 1fr) 330px !important;
    gap: 22px !important;
    align-items: start !important;
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
}

.cat-detail-page-clean.has-custom-background .cat-left-stack,
.cat-detail-page-clean.has-custom-background .cat-center-stack,
.cat-detail-page-clean.has-custom-background .cat-right-stack {
    padding-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
}

.cat-detail-page-clean.has-custom-background .side-panel,
.cat-detail-page-clean.has-custom-background .training-side-panel,
.cat-detail-page-clean.has-custom-background .middle-cat-panel.clean-main-cat,
.cat-detail-page-clean.has-custom-background .breeding-panel,
.cat-detail-page-clean.has-custom-background .purr-card {
    background: linear-gradient(135deg, rgba(var(--cat-theme-a-rgb, 255,241,250),0.56), rgba(var(--cat-theme-b-rgb, 232,247,255),0.56)) !important;
    border-color: rgba(216,184,238,0.72) !important;
    box-shadow: 0 12px 28px rgba(88,64,120,0.12) !important;
    backdrop-filter: blur(12px) !important;
}

.cat-detail-page-clean.has-custom-background .side-panel-title,
.cat-detail-page-clean.has-custom-background .training-summary,
.cat-detail-page-clean.has-custom-background .breeding-panel-title,
.cat-detail-page-clean.has-custom-background .timeline-compact-title {
    background: linear-gradient(90deg, rgba(var(--cat-theme-a-rgb, 255,241,250),0.72), rgba(var(--cat-theme-b-rgb, 232,247,255),0.72)) !important;
    backdrop-filter: blur(10px) !important;
}

.cat-detail-page-clean.has-custom-background .action-tile,
.cat-detail-page-clean.has-custom-background .breeding-action-card,
.cat-detail-page-clean.has-custom-background .purr-section {
    background: rgba(255,255,255,0.42) !important;
}

.cat-detail-page-clean.has-custom-background .bar-wrap {
    background: rgba(255,255,255,0.56) !important;
}

.cat-detail-page-clean.has-custom-background .cat-detail-image-wrap.has-cat-background {
    display: inline-block !important;
    width: auto !important;
    position: relative !important;
}

.cat-detail-page-clean.has-custom-background .cat-background-stage.cat-detail-card-stage {
    width: 400px !important;
    height: 400px !important;
    max-width: min(400px, 100%) !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 auto 14px auto !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    background-image: none !important;
    overflow: visible !important;
}

.cat-detail-page-clean.has-custom-background .cat-background-stage.cat-detail-card-stage::after {
    display: none !important;
}

.cat-detail-page-clean.has-custom-background .cat-background-stage.cat-detail-card-stage .cat-background-cat {
    width: 300px !important;
    height: 300px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    left: 50% !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translate(calc(-50% + var(--heka-cat-x, 0px)), calc(-50% + var(--heka-cat-y, 0px))) rotate(var(--heka-cat-rotation, 0deg)) scaleX(var(--heka-cat-flip-x, 1)) scale(var(--heka-cat-scale, 1)) !important;
    transform-origin: center center !important;
    object-fit: contain !important;
    z-index: 2 !important;
    pointer-events: auto !important;
    filter: drop-shadow(0 12px 18px rgba(40,28,46,0.24));
}

.cat-detail-page-clean.has-custom-background .cat-nav-arrow {
    top: 50% !important;
    z-index: 6 !important;
}

.cat-detail-page-clean.has-custom-background .cat-nav-arrow.left {
    left: -62px !important;
}

.cat-detail-page-clean.has-custom-background .cat-nav-arrow.right {
    right: -62px !important;
}

.cat-title-main-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
}

.heka-cat-settings {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.heka-cat-settings-button {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(216,184,238,0.82);
    box-shadow: 0 5px 14px rgba(88,64,120,0.12);
    backdrop-filter: blur(8px);
}

.heka-cat-settings-menu {
    display: none;
    position: absolute;
    top: 42px;
    left: 50%;
    transform: translateX(-50%);
    width: min(330px, calc(100vw - 28px));
    padding: 12px;
    border-radius: 20px;
    background: rgba(255,255,255,0.84);
    border: 1px solid rgba(216,184,238,0.82);
    box-shadow: 0 18px 38px rgba(88,64,120,0.18);
    backdrop-filter: blur(14px);
    z-index: 30;
    text-align: left;
}

.heka-cat-settings-menu.show {
    display: block;
}

.heka-cat-settings-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}

.heka-cat-settings-actions button {
    width: 100%;
    margin: 0;
    border-radius: 999px;
    font-weight: 900;
    font-size: 12px;
}

.heka-cat-settings-panel {
    display: none;
    border-top: 1px solid rgba(216,184,238,0.58);
    padding-top: 10px;
}

.heka-cat-settings-panel.show {
    display: block;
}

.heka-cat-position-tools {
    position: static !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
}

.heka-theme-picker-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}

.heka-theme-picker-field {
    display: grid;
    gap: 5px;
    font-size: 12px;
    font-weight: 900;
    color: #684b5d;
}

.heka-theme-picker-field input[type="color"] {
    width: 100%;
    min-height: 38px;
    padding: 2px;
    border-radius: 12px;
    border: 1px solid rgba(216,184,238,0.72);
    background: rgba(255,255,255,0.72);
}

.heka-theme-preset-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 8px 0 10px 0;
}

.heka-theme-preset {
    width: 34px;
    height: 28px;
    margin: 0;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(216,184,238,0.82);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.42);
}

.heka-theme-save-button {
    width: 100%;
    margin: 0;
    border-radius: 999px;
    font-weight: 900;
}

.heka-theme-small-note {
    margin-top: 8px;
    color: #75667d;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 800;
}

@media (max-width: 1100px) {
    .cat-detail-page-clean.has-custom-background .cat-clean-grid {
        grid-template-columns: 1fr !important;
        width: auto !important;
        max-width: 760px !important;
        margin: 0 auto !important;
    }

    .cat-detail-page-clean.has-custom-background .cat-nav-arrow.left {
        left: 4px !important;
    }

    .cat-detail-page-clean.has-custom-background .cat-nav-arrow.right {
        right: 4px !important;
    }
}

@media (max-width: 620px) {
    .cat-detail-page-clean.has-custom-background {
        padding: 10px !important;
        border-radius: 24px !important;
    }

    .cat-detail-page-clean.has-custom-background .cat-background-stage.cat-detail-card-stage {
        width: min(400px, calc(100vw - 52px)) !important;
        height: min(400px, calc(100vw - 52px)) !important;
    }

    .cat-detail-page-clean.has-custom-background .cat-background-stage.cat-detail-card-stage .cat-background-cat {
        width: min(300px, 70vw) !important;
        height: min(300px, 70vw) !important;
    }

    .heka-cat-settings-menu {
        left: auto;
        right: -8px;
        transform: none;
    }

    .heka-cat-settings-actions,
    .heka-theme-picker-grid {
        grid-template-columns: 1fr;
    }
}



/* ===== Heka background normal cat layout fix ===== */
/* Desktop background width: 1920px; height scaled proportionally from 2106 × 940 to 1920 × 857. */
.cat-detail-page-clean.has-custom-background {
    max-width: 1460px !important;
    width: auto !important;
    margin: 0 auto 40px auto !important;
    padding: 0 !important;
    position: relative !important;
    overflow: visible !important;
    border-radius: 0 !important;
    isolation: isolate !important;
    background: transparent !important;
    box-shadow: none !important;
}

.cat-detail-page-clean.has-custom-background::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    width: 1920px !important;
    height: 857px !important;
    transform: translateX(-50%) !important;
    z-index: -2 !important;
    pointer-events: none !important;
    background-image: var(--cat-detail-custom-bg) !important;
    background-size: 1920px 857px !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    opacity: 1 !important;
    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 8%,
        rgba(0,0,0,0.28) 18%,
        rgba(0,0,0,0.72) 28%,
        rgba(0,0,0,1) 38%,
        rgba(0,0,0,1) 62%,
        rgba(0,0,0,0.88) 76%,
        rgba(0,0,0,0.52) 90%,
        rgba(0,0,0,0) 100%
    ) !important;
    mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 8%,
        rgba(0,0,0,0.28) 18%,
        rgba(0,0,0,0.72) 28%,
        rgba(0,0,0,1) 38%,
        rgba(0,0,0,1) 62%,
        rgba(0,0,0,0.88) 76%,
        rgba(0,0,0,0.52) 90%,
        rgba(0,0,0,0) 100%
    ) !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
}

.cat-detail-page-clean.has-custom-background::after {
    display: none !important;
}

.cat-detail-page-clean.has-custom-background .cat-title-clean {
    position: relative !important;
    z-index: 4 !important;
    text-align: center !important;
    margin: 6px 0 22px 0 !important;
}

.cat-detail-page-clean.has-custom-background .cat-clean-grid {
    position: relative !important;
    z-index: 3 !important;
    display: grid !important;
    grid-template-columns: 330px minmax(520px, 1fr) 330px !important;
    gap: 22px !important;
    align-items: start !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.cat-detail-page-clean.has-custom-background .cat-left-stack,
.cat-detail-page-clean.has-custom-background .cat-center-stack,
.cat-detail-page-clean.has-custom-background .cat-right-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
    padding-top: 0 !important;
    width: auto !important;
    min-width: 0 !important;
}

.cat-detail-page-clean.has-custom-background .cat-center-stack {
    order: initial !important;
}

.cat-detail-page-clean.has-custom-background .cat-left-stack {
    order: initial !important;
}

.cat-detail-page-clean.has-custom-background .cat-right-stack {
    order: initial !important;
}

.cat-detail-page-clean.has-custom-background .cat-detail-full-background,
.cat-detail-page-clean.has-custom-background .cat-detail-full-background::after {
    display: none !important;
}

.cat-detail-page-clean.has-custom-background .side-panel,
.cat-detail-page-clean.has-custom-background .training-side-panel,
.cat-detail-page-clean.has-custom-background .middle-cat-panel.clean-main-cat,
.cat-detail-page-clean.has-custom-background .breeding-panel,
.cat-detail-page-clean.has-custom-background .breeding-beauty-panel,
.cat-detail-page-clean.has-custom-background .breeding-compact-panel,
.cat-detail-page-clean.has-custom-background .timeline-compact,
.cat-detail-page-clean.has-custom-background .purr-card {
    width: auto !important;
    max-width: 100% !important;
    background: linear-gradient(135deg, rgba(var(--cat-theme-a-rgb, 255,241,250),0.58), rgba(var(--cat-theme-b-rgb, 232,247,255),0.58)) !important;
    border-color: rgba(216,184,238,0.72) !important;
    box-shadow: 0 10px 24px rgba(88,64,120,0.10) !important;
    backdrop-filter: blur(10px) !important;
}

.cat-detail-page-clean.has-custom-background .side-panel-title,
.cat-detail-page-clean.has-custom-background .training-summary,
.cat-detail-page-clean.has-custom-background .breeding-panel-title,
.cat-detail-page-clean.has-custom-background .breeding-beauty-header,
.cat-detail-page-clean.has-custom-background .timeline-compact-title,
.cat-detail-page-clean.has-custom-background .purr-tab,
.cat-detail-page-clean.has-custom-background .purr-section .purr-title-row {
    background: linear-gradient(90deg, rgba(var(--cat-theme-a-rgb, 255,241,250),0.70), rgba(var(--cat-theme-b-rgb, 232,247,255),0.70)) !important;
    backdrop-filter: blur(8px) !important;
}

.cat-detail-page-clean.has-custom-background .action-tile,
.cat-detail-page-clean.has-custom-background .breeding-action-card,
.cat-detail-page-clean.has-custom-background .breeding-action-tile,
.cat-detail-page-clean.has-custom-background .purr-section {
    background: rgba(255,255,255,0.44) !important;
}

.cat-detail-page-clean.has-custom-background .bar-wrap {
    background: rgba(255,255,255,0.56) !important;
}

.cat-detail-page-clean.has-custom-background .cat-detail-image-wrap.has-cat-background {
    display: inline-block !important;
    width: auto !important;
    min-height: 0 !important;
    position: relative !important;
    overflow: visible !important;
}

.cat-detail-page-clean.has-custom-background .cat-background-stage.cat-detail-card-stage {
    width: 300px !important;
    height: 300px !important;
    max-width: 300px !important;
    max-height: 300px !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 auto 14px auto !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    background-image: none !important;
    overflow: visible !important;
}

.cat-detail-page-clean.has-custom-background .cat-background-stage.cat-detail-card-stage::after {
    display: none !important;
}

.cat-detail-page-clean.has-custom-background .cat-background-stage.cat-detail-card-stage .cat-background-cat {
    width: 300px !important;
    height: 300px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    left: 50% !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translate(calc(-50% + var(--heka-cat-x, 0px)), calc(-50% + var(--heka-cat-y, 0px))) rotate(var(--heka-cat-rotation, 0deg)) scaleX(var(--heka-cat-flip-x, 1)) scale(var(--heka-cat-scale, 1)) !important;
    transform-origin: center center !important;
    object-fit: contain !important;
    z-index: 2 !important;
    pointer-events: auto !important;
    filter: drop-shadow(0 12px 18px rgba(40,28,46,0.22)) !important;
}

.cat-detail-page-clean.has-custom-background .cat-nav-arrow {
    top: 48% !important;
    z-index: 6 !important;
}

.cat-detail-page-clean.has-custom-background .cat-nav-arrow.left {
    left: -62px !important;
}

.cat-detail-page-clean.has-custom-background .cat-nav-arrow.right {
    right: -62px !important;
}

.cat-detail-page-clean.has-custom-background .heka-cat-settings-menu {
    z-index: 60 !important;
}

@media (max-width: 1100px) {
    .cat-detail-page-clean.has-custom-background {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 12px !important;
    }

    .cat-detail-page-clean.has-custom-background::before,
    .cat-detail-page-clean.has-custom-background::after {
        width: 1920px !important;
        height: 857px !important;
        max-width: none !important;
    }

    .cat-detail-page-clean.has-custom-background .cat-clean-grid {
        grid-template-columns: 1fr !important;
        max-width: 760px !important;
        width: 100% !important;
        margin: 0 auto !important;
        gap: 16px !important;
    }

    .cat-detail-page-clean.has-custom-background .cat-nav-arrow.left {
        left: 4px !important;
    }

    .cat-detail-page-clean.has-custom-background .cat-nav-arrow.right {
        right: 4px !important;
    }
}

@media (max-width: 620px) {
    .cat-detail-page-clean.has-custom-background {
        padding: 0 8px !important;
    }

    .cat-detail-page-clean.has-custom-background .cat-background-stage.cat-detail-card-stage {
        width: min(300px, calc(100vw - 56px)) !important;
        height: min(300px, calc(100vw - 56px)) !important;
    }

    .cat-detail-page-clean.has-custom-background .cat-background-stage.cat-detail-card-stage .cat-background-cat {
        width: min(300px, calc(100vw - 56px)) !important;
        height: min(300px, calc(100vw - 56px)) !important;
    }
}



/* ===== Heka clear cat center and breeding theme polish ===== */
.cat-detail-page-clean.has-custom-background .middle-cat-panel.clean-main-cat {
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.cat-detail-page-clean.has-custom-background .middle-cat-panel.clean-main-cat::before,
.cat-detail-page-clean.has-custom-background .middle-cat-panel.clean-main-cat::after {
    content: none !important;
    display: none !important;
}

.cat-detail-page-clean.has-custom-background .middle-cat-panel.clean-main-cat .cat-detail-image-wrap.has-cat-background {
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.cat-detail-page-clean.has-custom-background .middle-cat-panel.clean-main-cat .bars,
.cat-detail-page-clean.has-custom-background .middle-cat-panel.clean-main-cat .cat-quick-actions {
    position: relative !important;
    z-index: 5 !important;
}

.cat-detail-page-clean.has-custom-background .breeding-compact-panel,
.cat-detail-page-clean.has-custom-background .breeding-beauty-panel,
.cat-detail-page-clean.has-custom-background .breeding-compact .breeding-beauty-panel,
.cat-detail-page-clean.has-custom-background .breeding-panel {
    background: linear-gradient(135deg, rgba(var(--cat-theme-a-rgb, 255,241,250),0.58), rgba(var(--cat-theme-b-rgb, 232,247,255),0.58)) !important;
    border-color: rgba(216,184,238,0.72) !important;
    box-shadow: 0 10px 24px rgba(88,64,120,0.10) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.cat-detail-page-clean.has-custom-background .breeding-compact-summary,
.cat-detail-page-clean.has-custom-background .breeding-beauty-header,
.cat-detail-page-clean.has-custom-background .breeding-panel-title {
    background: linear-gradient(90deg, rgba(var(--cat-theme-a-rgb, 255,241,250),0.74), rgba(var(--cat-theme-b-rgb, 232,247,255),0.74)) !important;
    border-color: rgba(216,184,238,0.58) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.cat-detail-page-clean.has-custom-background .breeding-compact-summary:hover {
    background: linear-gradient(90deg, rgba(var(--cat-theme-a-rgb, 255,241,250),0.86), rgba(var(--cat-theme-b-rgb, 232,247,255),0.86)) !important;
}

.cat-detail-page-clean.has-custom-background .breeding-compact-body {
    background: rgba(255,255,255,0.12) !important;
}

.cat-detail-page-clean.has-custom-background .breeding-compact-panel .breeding-action-card.breeding-action-pill,
.cat-detail-page-clean.has-custom-background .breeding-more-button,
.cat-detail-page-clean.has-custom-background .breeding-status-card-compact,
.cat-detail-page-clean.has-custom-background .breeding-dynamic-box {
    background: rgba(255,255,255,0.46) !important;
    border-color: rgba(216,184,238,0.62) !important;
}

.cat-detail-page-clean.has-custom-background .breeding-compact-panel .breeding-action-card.breeding-action-pill.primary {
    background: linear-gradient(135deg, rgba(var(--cat-theme-a-rgb, 255,241,250),0.34), rgba(var(--cat-theme-b-rgb, 232,247,255),0.34), rgba(255,255,255,0.38)) !important;
}

.cat-detail-page-clean.has-custom-background .breeding-compact-panel .breeding-action-card.breeding-action-pill:hover:not(:disabled),
.cat-detail-page-clean.has-custom-background .breeding-more-button:hover {
    background: linear-gradient(135deg, rgba(var(--cat-theme-a-rgb, 255,241,250),0.58), rgba(var(--cat-theme-b-rgb, 232,247,255),0.58)) !important;
}


/* ===== Heka background vertical alignment fix =====
   Only the custom background image is moved upward.
   The cat and all interface boxes keep their current positions. */
.cat-detail-page-clean.has-custom-background::before {
    top: -140px !important;
}



/* ===== Heka responsive desktop centering repair =====
   Fixes two issues:
   1) keep the background vertically centered on the cat again
   2) use a desktop max width of 1920px, but shrink with the viewport
      so the left and right sides are not cut off on narrower screens */
.cat-detail-page-clean.has-custom-background::before,
.cat-detail-page-clean.has-custom-background::after {
    width: 100vw !important;
    max-width: 1920px !important;
    height: calc(100vw * 940 / 2106) !important;
    max-height: 857px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

.cat-detail-page-clean.has-custom-background::before {
    top: -140px !important;
    background-size: 100% 100% !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
}

.cat-detail-page-clean.has-custom-background::after {
    top: -140px !important;
}


/* ===== Heka header visibility repair =====
   Keeps the normal resource bar and Back to My Cats button visible.
   The background, cat and existing boxes remain in their current positions. */
#playerInfo.box {
    position: relative !important;
    z-index: 80 !important;
}

#content > .cat-back-button {
    position: relative !important;
    z-index: 80 !important;
}


/* ===== Heka outer page background choice =====
   Lets the owner choose between the normal PurrPixels page background
   and one solid color for the large area behind the lower cat page. */
body.heka-solid-background-page {
    background: var(--heka-page-background-color, #eadfff) !important;
}

.heka-cat-settings-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.heka-background-mode-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}

.heka-background-mode-option {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 48px;
    padding: 9px 10px;
    border: 1px solid rgba(216,184,238,0.70);
    border-radius: 14px;
    background: rgba(255,255,255,0.62);
    color: #684b5d;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.heka-background-mode-option:has(input:checked) {
    background: linear-gradient(135deg, rgba(255,241,250,0.90), rgba(238,247,255,0.90));
    border-color: rgba(194,160,225,0.90);
    box-shadow: 0 4px 10px rgba(88,64,120,0.08);
}

.heka-background-mode-option input {
    margin: 0;
    accent-color: #a978df;
}

.heka-page-color-field {
    display: grid;
    gap: 5px;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 900;
    color: #684b5d;
}

.heka-page-color-field input[type="color"] {
    width: 100%;
    min-height: 42px;
    padding: 2px;
    border-radius: 12px;
    border: 1px solid rgba(216,184,238,0.72);
    background: rgba(255,255,255,0.72);
}

.heka-page-color-field input[type="color"]:disabled {
    opacity: 0.42;
    filter: grayscale(100%);
    cursor: not-allowed;
}

@media (max-width: 620px) {
    .heka-cat-settings-actions,
    .heka-background-mode-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ===== Heka public view + 20% upper fade ===== */

/* The upper blend now reaches full opacity at 20% of the Heka image.
   The lower transparent blend remains soft and unchanged. */
.cat-detail-page-clean.has-custom-background::before {
    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.22) 5%,
        rgba(0,0,0,0.58) 11%,
        rgba(0,0,0,0.86) 16%,
        rgba(0,0,0,1) 20%,
        rgba(0,0,0,1) 62%,
        rgba(0,0,0,0.88) 76%,
        rgba(0,0,0,0.52) 90%,
        rgba(0,0,0,0) 100%
    ) !important;
    mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.22) 5%,
        rgba(0,0,0,0.58) 11%,
        rgba(0,0,0,0.86) 16%,
        rgba(0,0,0,1) 20%,
        rgba(0,0,0,1) 62%,
        rgba(0,0,0,0.88) 76%,
        rgba(0,0,0,0.52) 90%,
        rgba(0,0,0,0) 100%
    ) !important;
}

/* Visitors now see the Heka scene as a large page background too,
   while the normal public information stays read-only. */
.cat-detail-page-clean.has-custom-background.public-heka-detail .public-heka-page {
    position: relative !important;
    z-index: 3 !important;
    display: grid !important;
    grid-template-columns: 330px minmax(520px, 1fr) 330px !important;
    gap: 22px !important;
    align-items: start !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.public-heka-detail .public-left-column,
.public-heka-detail .public-main-cat,
.public-heka-detail .public-right-column {
    min-width: 0 !important;
}

.public-heka-detail .public-left-column,
.public-heka-detail .public-right-column,
.public-heka-detail .public-main-cat {
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
}

.public-heka-detail .public-side-card,
.public-heka-detail .public-info-card .purr-card {
    width: auto !important;
    max-width: 100% !important;
    background: linear-gradient(
        135deg,
        rgba(var(--cat-theme-a-rgb, 255,241,250),0.58),
        rgba(var(--cat-theme-b-rgb, 232,247,255),0.58)
    ) !important;
    border-color: rgba(216,184,238,0.72) !important;
    box-shadow: 0 10px 24px rgba(88,64,120,0.10) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.public-heka-detail .public-side-title,
.public-heka-detail .purr-tab,
.public-heka-detail .purr-section .purr-title-row {
    background: linear-gradient(
        90deg,
        rgba(var(--cat-theme-a-rgb, 255,241,250),0.72),
        rgba(var(--cat-theme-b-rgb, 232,247,255),0.72)
    ) !important;
    border-color: rgba(216,184,238,0.58) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.public-heka-detail .purr-section {
    background: rgba(255,255,255,0.44) !important;
}

.public-heka-detail .public-heka-main-cat {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 18px 18px 18px !important;
}

.public-heka-detail .public-heka-bars {
    width: 100% !important;
    margin: 0 auto !important;
    position: relative !important;
    z-index: 5 !important;
}

.public-heka-detail .public-heka-bars .bar-label {
    margin: 8px 0 4px !important;
}

.public-heka-detail .public-info-card {
    width: 100% !important;
    min-width: 0 !important;
}

.public-heka-detail .public-info-card .purr-tabs {
    justify-content: center !important;
}

.public-heka-detail .public-owner-avatar {
    background: rgba(255,255,255,0.52) !important;
}

@media (max-width: 1100px) {
    .cat-detail-page-clean.has-custom-background.public-heka-detail .public-heka-page {
        grid-template-columns: 1fr !important;
        max-width: 760px !important;
        width: 100% !important;
        margin: 0 auto !important;
        gap: 16px !important;
    }
}


/* ===== Extracted: heka-training-box-transparency-tweak ===== */
.cat-detail-page-clean.has-custom-background .training-side-panel,
.cat-detail-page-clean.has-custom-background .side-panel,
.cat-detail-page-clean.has-custom-background .breeding-panel,
.cat-detail-page-clean.has-custom-background .breeding-beauty-panel,
.cat-detail-page-clean.has-custom-background .breeding-compact-panel,
.cat-detail-page-clean.has-custom-background .timeline-compact {
    background: linear-gradient(
        135deg,
        rgba(var(--cat-theme-a-rgb, 255,241,250), 0.30),
        rgba(var(--cat-theme-b-rgb, 232,247,255), 0.30)
    ) !important;
    box-shadow: 0 8px 20px rgba(88,64,120,0.06) !important;
    backdrop-filter: blur(8px) !important;
}

.cat-detail-page-clean.has-custom-background .training-side-panel > summary,
.cat-detail-page-clean.has-custom-background .training-summary,
.cat-detail-page-clean.has-custom-background .side-panel-title,
.cat-detail-page-clean.has-custom-background .breeding-panel-title,
.cat-detail-page-clean.has-custom-background .breeding-beauty-header,
.cat-detail-page-clean.has-custom-background .timeline-compact-title {
    background: linear-gradient(
        90deg,
        rgba(var(--cat-theme-a-rgb, 255,241,250), 0.42),
        rgba(var(--cat-theme-b-rgb, 232,247,255), 0.42)
    ) !important;
    backdrop-filter: blur(6px) !important;
}

.cat-detail-page-clean.has-custom-background .training-side-panel .action-tile,
.cat-detail-page-clean.has-custom-background .side-panel .action-tile,
.cat-detail-page-clean.has-custom-background .breeding-action-card,
.cat-detail-page-clean.has-custom-background .breeding-action-tile,
.cat-detail-page-clean.has-custom-background .timeline-compact .purr-section {
    background: rgba(255,255,255,0.16) !important;
    border-color: rgba(216,184,238,0.32) !important;
}

.cat-detail-page-clean.has-custom-background .training-side-panel .action-tile img,
.cat-detail-page-clean.has-custom-background .side-panel .action-tile img {
    filter: none !important;
}

.cat-detail-page-clean.has-custom-background .training-side-panel .training-cost-mini {
    background: rgba(255,255,255,0.56) !important;
}

.cat-detail-page-clean.has-custom-background .training-side-panel .tile-grid,
.cat-detail-page-clean.has-custom-background .side-panel .tile-grid {
    background: transparent !important;
}


/* ===== Extracted: heka-name-color-and-theme-buttons ===== */
/* Four settings buttons are shown as a tidy 2 × 2 grid. */
.heka-cat-settings-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* The selected name color is visible on owner and public Heka pages. */
.cat-detail-page-clean.has-custom-background .cat-main-name,
.cat-detail-page-clean.has-custom-background .cat-main-name *,
.cat-detail-page-clean.has-custom-background .cat-name.cat-main-name,
.cat-detail-page-clean.has-custom-background .cat-name.cat-main-name * {
    color: var(--cat-name-color, #7a2f58) !important;
}

/* Rename, Sell, Meadow and Moderator Rename use Color theme → First color. */
.cat-detail-page-clean.has-custom-background .cat-quick-actions button,
body.purr-mobile-game .cat-detail-page-clean.has-custom-background .cat-quick-actions button {
    background-image: none !important;
    background-color: rgba(var(--cat-theme-a-rgb, 255,241,250), 0.28) !important;
    color: var(--cat-theme-a-text, #5a4664) !important;
    border-color: rgba(123, 93, 143, 0.30) !important;
    box-shadow:
        0 4px 10px rgba(88,64,120,0.07),
        inset 0 0 0 1px rgba(255,255,255,0.16) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
}

.cat-detail-page-clean.has-custom-background .cat-quick-actions button:hover,
body.purr-mobile-game .cat-detail-page-clean.has-custom-background .cat-quick-actions button:hover {
    background-image: none !important;
    background-color: rgba(var(--cat-theme-a-rgb, 255,241,250), 0.42) !important;
    filter: brightness(1.04);
    transform: translateY(-1px);
}

.heka-name-color-field {
    display: grid;
    gap: 6px;
    font-size: 12px;
    font-weight: 900;
    color: #684b5d;
    margin-bottom: 10px;
}

.heka-name-color-field input[type="color"] {
    width: 100%;
    min-height: 42px;
    padding: 2px;
    border-radius: 12px;
    border: 1px solid rgba(216,184,238,0.72);
    background: rgba(255,255,255,0.72);
}


/* ===== Extracted: heka-mobile-scene-layout-fix ===== */
/* =========================================================
   Heka mobile scene repair
   - The cat and Heka background stay together as one scene.
   - The wide desktop artwork uses cover on mobile, so mainly
     the side edges are cropped instead of shrinking the whole
     picture into a tiny strip.
   - The cat is slightly smaller on mobile.
   ========================================================= */
@media (max-width: 700px) {
    /* The desktop full-page background caused the artwork to
       appear above the cat as a separate, tiny strip. On mobile,
       the real scene is rendered inside the cat stage instead. */
    .cat-detail-page-clean.has-custom-background::before,
    .cat-detail-page-clean.has-custom-background::after {
        display: none !important;
        content: none !important;
    }

    .cat-detail-page-clean.has-custom-background {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 26px auto !important;
        padding: 0 6px !important;
        overflow: visible !important;
    }

    .cat-detail-page-clean.has-custom-background .cat-title-clean {
        margin: 8px 0 12px 0 !important;
        padding: 0 4px !important;
    }

    .cat-detail-page-clean.has-custom-background .cat-clean-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 14px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /*
       Let the two center children participate directly in the
       mobile order. This places the cat scene before Care while
       keeping Characteristics/Genetic/Bonus below the other boxes.
    */
    .cat-detail-page-clean.has-custom-background .cat-center-stack {
        display: contents !important;
    }

    .cat-detail-page-clean.has-custom-background .middle-cat-panel.clean-main-cat {
        order: 1 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .cat-detail-page-clean.has-custom-background .cat-left-stack {
        order: 2 !important;
    }

    .cat-detail-page-clean.has-custom-background .cat-right-stack {
        order: 3 !important;
    }

    .cat-detail-page-clean.has-custom-background .cat-tabs-clean {
        order: 4 !important;
        width: 100% !important;
    }

    .cat-detail-page-clean.has-custom-background .cat-left-stack,
    .cat-detail-page-clean.has-custom-background .cat-right-stack {
        width: 100% !important;
        gap: 14px !important;
        padding: 0 !important;
    }

    .cat-detail-page-clean.has-custom-background
    .middle-cat-panel.clean-main-cat
    .cat-detail-image-wrap.has-cat-background {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        overflow: visible !important;
    }

    /*
       Mobile Heka hero:
       source image ratio is very wide, while the mobile stage is
       intentionally taller. background-size: cover crops mostly
       the left/right edges and keeps the central cat area large.
    */
    .cat-detail-page-clean.has-custom-background
    .cat-background-stage.cat-detail-card-stage {
        display: block !important;
        width: calc(100vw - 20px) !important;
        max-width: 520px !important;
        height: clamp(230px, 72vw, 340px) !important;
        max-height: 340px !important;
        aspect-ratio: auto !important;
        margin: 0 auto 10px auto !important;
        position: relative !important;
        overflow: hidden !important;
        border-radius: 18px !important;
        border: 1px solid rgba(216,184,238,0.52) !important;
        box-shadow: 0 8px 18px rgba(55,40,68,0.12) !important;
        background-image: var(--cat-detail-custom-bg) !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    /*
       Keep the owner's saved x/y position and scale, but use a
       smaller mobile base size so the cat does not dominate or
       extend below the background scene.
    */
    .cat-detail-page-clean.has-custom-background
    .cat-background-stage.cat-detail-card-stage
    .cat-background-cat {
        width: clamp(132px, 52vw, 205px) !important;
        height: clamp(132px, 52vw, 205px) !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        left: 50% !important;
        top: 53% !important;
        bottom: auto !important;
        object-fit: contain !important;
        transform:
            translate(
                calc(-50% + var(--heka-cat-x, 0px)),
                calc(-50% + var(--heka-cat-y, 0px))
            )
            scale(var(--heka-cat-scale, 1)) !important;
        transform-origin: center center !important;
        filter: drop-shadow(0 7px 10px rgba(35,25,40,0.20)) !important;
    }

    .cat-detail-page-clean.has-custom-background .cat-nav-arrow {
        top: 50% !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        z-index: 10 !important;
    }

    .cat-detail-page-clean.has-custom-background .cat-nav-arrow.left {
        left: 8px !important;
    }

    .cat-detail-page-clean.has-custom-background .cat-nav-arrow.right {
        right: 8px !important;
    }

    .cat-detail-page-clean.has-custom-background
    .middle-cat-panel.clean-main-cat
    .bars {
        width: calc(100% - 14px) !important;
        max-width: 520px !important;
        margin: 0 auto !important;
    }

    .cat-detail-page-clean.has-custom-background .cat-quick-actions {
        width: 100% !important;
        justify-content: center !important;
        gap: 7px !important;
        padding: 0 3px !important;
    }

    .cat-detail-page-clean.has-custom-background .cat-quick-actions button {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }

    /* Public Heka view gets the same combined mobile scene. */
    .cat-detail-page-clean.has-custom-background.public-heka-detail
    .public-heka-page {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 14px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .public-heka-detail .public-main-cat {
        order: 1 !important;
        width: 100% !important;
    }

    .public-heka-detail .public-left-column {
        order: 2 !important;
        width: 100% !important;
    }

    .public-heka-detail .public-right-column {
        order: 3 !important;
        width: 100% !important;
    }

    .public-heka-detail .public-info-card {
        order: 4 !important;
        width: 100% !important;
    }
}

/* Very narrow phone preview/devtools sizes. */
@media (max-width: 340px) {
    .cat-detail-page-clean.has-custom-background
    .cat-background-stage.cat-detail-card-stage {
        width: calc(100vw - 12px) !important;
        height: 225px !important;
        border-radius: 15px !important;
    }

    .cat-detail-page-clean.has-custom-background
    .cat-background-stage.cat-detail-card-stage
    .cat-background-cat {
        width: 128px !important;
        height: 128px !important;
    }
}


/* ===== Extracted: heka-quick-actions-final-transparency ===== */
.cat-detail-page-clean.has-custom-background .cat-quick-actions > button {
    background: rgba(var(--cat-theme-a-rgb, 255,241,250), 0.28) !important;
    background-image: none !important;
    opacity: 1 !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
}

.cat-detail-page-clean.has-custom-background .cat-quick-actions > button:hover {
    background: rgba(var(--cat-theme-a-rgb, 255,241,250), 0.42) !important;
    background-image: none !important;
}


/* ===== Extracted: heka-expandable-care-night-menus ===== */
/* =========================================================
   Heka Care + Night orbit controls
   Only cats using Heka's Veil receive this compact UI.
   Normal cat pages keep the existing Care/Night box.
   ========================================================= */

.cat-detail-page-clean .heka-care-orbit-controls {
    position: relative;
    width: 100%;
    min-height: 348px;
    overflow: visible;
    z-index: 18;
    isolation: isolate;
}

.cat-detail-page-clean .heka-orbit-group {
    position: absolute;
    left: 0;
    width: 100%;
    overflow: visible;
}

.cat-detail-page-clean .heka-orbit-group-care {
    top: 0;
    height: 248px;
}

.cat-detail-page-clean .heka-orbit-group-night {
    top: 252px;
    height: 92px;
}

.cat-detail-page-clean .heka-orbit-launcher,
.cat-detail-page-clean .heka-orbit-action {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(255,255,255,0.48) !important;
    background:
        linear-gradient(
            135deg,
            rgba(var(--cat-theme-a-rgb, 255,241,250),0.50),
            rgba(var(--cat-theme-b-rgb, 238,247,255),0.38)
        ) !important;
    color: var(--cat-theme-a-text, #5a4664) !important;
    box-shadow:
        0 8px 18px rgba(35,25,48,0.15),
        inset 0 0 0 1px rgba(255,255,255,0.20) !important;
    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;
}

.cat-detail-page-clean .heka-orbit-launcher {
    position: absolute;
    left: 8px;
    top: 80px;
    width: 88px;
    height: 88px;
    min-width: 88px;
    min-height: 88px;
    padding: 8px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    z-index: 4;
    transition:
        transform 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}

.cat-detail-page-clean .heka-orbit-group-night .heka-orbit-launcher {
    top: 2px;
}

.cat-detail-page-clean .heka-orbit-launcher:hover,
.cat-detail-page-clean .heka-orbit-group.open .heka-orbit-launcher {
    transform: scale(1.05);
    background:
        linear-gradient(
            135deg,
            rgba(var(--cat-theme-a-rgb, 255,241,250),0.68),
            rgba(var(--cat-theme-b-rgb, 238,247,255),0.54)
        ) !important;
    box-shadow:
        0 10px 22px rgba(35,25,48,0.19),
        0 0 0 4px rgba(255,255,255,0.13) !important;
}

.cat-detail-page-clean .heka-orbit-launcher img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

.cat-detail-page-clean .heka-orbit-group-night .heka-orbit-launcher img {
    width: 45px;
    height: 45px;
}

.cat-detail-page-clean .heka-orbit-launcher-label {
    font-size: 11px;
    line-height: 1;
    font-weight: 900;
    color: inherit;
    pointer-events: none;
}

.cat-detail-page-clean .heka-orbit-launcher-arrow {
    position: absolute;
    right: 2px;
    bottom: 1px;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(216,184,238,0.58);
    color: #684b5d;
    font-size: 14px;
    font-weight: 900;
    transition: transform 0.18s ease;
    pointer-events: none;
}

.cat-detail-page-clean
.heka-orbit-group.open
.heka-orbit-launcher-arrow {
    transform: rotate(45deg);
}

.cat-detail-page-clean .heka-orbit-actions {
    position: absolute;
    left: 52px;
    top: 124px;
    width: 0;
    height: 0;
    overflow: visible;
    z-index: 3;
}

.cat-detail-page-clean
.heka-orbit-group-night
.heka-orbit-actions {
    top: 46px;
}

.cat-detail-page-clean .heka-orbit-action {
    position: absolute;
    left: -36px;
    top: -36px;
    width: 72px;
    height: 72px;
    min-width: 72px;
    min-height: 72px;
    padding: 6px 4px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    opacity: 0;
    pointer-events: none;
    transform: translate(0,0) scale(0.24);
    transform-origin: center;
    transition:
        transform 0.24s cubic-bezier(.2,.85,.25,1.12),
        opacity 0.15s ease,
        background-color 0.15s ease;
}

.cat-detail-page-clean .heka-orbit-action:hover {
    background:
        linear-gradient(
            135deg,
            rgba(var(--cat-theme-a-rgb, 255,241,250),0.75),
            rgba(var(--cat-theme-b-rgb, 238,247,255),0.62)
        ) !important;
    z-index: 8;
}

.cat-detail-page-clean
.heka-orbit-group.open
.heka-orbit-action {
    opacity: 1;
    pointer-events: auto;
}

.cat-detail-page-clean .heka-orbit-action img {
    width: 37px;
    height: 37px;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

.cat-detail-page-clean .heka-orbit-action-label {
    max-width: 64px;
    font-size: 9px;
    line-height: 1.05;
    font-weight: 900;
    text-align: center;
    color: inherit;
    pointer-events: none;
}

/* Care actions are closer to the Care circle, shifted more to the right overall,
   and arranged with the same radius from Care.
   There is nothing directly above Care; only a gentle upper-left / upper-right pair. */
.cat-detail-page-clean
.heka-orbit-group-care.open
.heka-care-action-1 {
    transform: translate(-80px,-67px) scale(1);
}

.cat-detail-page-clean
.heka-orbit-group-care.open
.heka-care-action-2 {
    transform: translate(80px,-67px) scale(1);
}

.cat-detail-page-clean
.heka-orbit-group-care.open
.heka-care-action-3 {
    transform: translate(-104px,0) scale(1);
}

.cat-detail-page-clean
.heka-orbit-group-care.open
.heka-care-action-4 {
    transform: translate(104px,0) scale(1);
}

.cat-detail-page-clean
.heka-orbit-group-care.open
.heka-care-action-5 {
    transform: translate(-80px,67px) scale(1);
}

.cat-detail-page-clean
.heka-orbit-group-care.open
.heka-care-action-6 {
    transform: translate(80px,67px) scale(1);
}

/* Night fan positions:
   Sleep opens to the lower right of Night.
   Age opens underneath Night, matching the marked areas. */
.cat-detail-page-clean
.heka-orbit-group-night.open
.heka-night-action-1 {
    transform: translate(110px,48px) scale(1);
}

.cat-detail-page-clean
.heka-orbit-group-night.open
.heka-night-action-2 {
    transform: translate(0,118px) scale(1);
}

.cat-detail-page-clean .heka-orbit-action:disabled,
.cat-detail-page-clean .heka-orbit-action.disabled {
    cursor: not-allowed !important;
    filter: grayscale(100%);
    opacity: 0;
}

.cat-detail-page-clean
.heka-orbit-group.open
.heka-orbit-action:disabled,
.cat-detail-page-clean
.heka-orbit-group.open
.heka-orbit-action.disabled {
    opacity: 0.45;
    pointer-events: none;
}

.cat-detail-page-clean .heka-orbit-screenreader-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* On mobile the orbit becomes a compact transparent action tray.
   This avoids icons leaving the screen while preserving the same interaction. */
@media (max-width: 700px) {
    .cat-detail-page-clean .heka-care-orbit-controls {
        position: relative;
        width: 100%;
        min-height: 0;
        display: grid;
        gap: 10px;
        padding: 0 4px;
    }

    .cat-detail-page-clean .heka-orbit-group,
    .cat-detail-page-clean .heka-orbit-group-care,
    .cat-detail-page-clean .heka-orbit-group-night {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        min-height: 74px;
        display: grid;
        grid-template-columns: 74px 1fr;
        align-items: start;
        gap: 8px;
    }

    .cat-detail-page-clean .heka-orbit-launcher,
    .cat-detail-page-clean
    .heka-orbit-group-night
    .heka-orbit-launcher {
        position: relative;
        inset: auto;
        width: 68px;
        height: 68px;
        min-width: 68px;
        min-height: 68px;
        padding: 6px !important;
        align-self: start;
    }

    .cat-detail-page-clean .heka-orbit-launcher img,
    .cat-detail-page-clean
    .heka-orbit-group-night
    .heka-orbit-launcher img {
        width: 39px;
        height: 39px;
    }

    .cat-detail-page-clean .heka-orbit-actions,
    .cat-detail-page-clean
    .heka-orbit-group-night
    .heka-orbit-actions {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        min-height: 0;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        align-items: start;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition:
            max-height 0.24s ease,
            opacity 0.18s ease;
    }

    .cat-detail-page-clean
    .heka-orbit-group-night
    .heka-orbit-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cat-detail-page-clean
    .heka-orbit-group.open
    .heka-orbit-actions {
        max-height: 230px;
        opacity: 1;
        padding: 2px 0 5px;
    }

    .cat-detail-page-clean .heka-orbit-action,
    .cat-detail-page-clean
    .heka-orbit-group.open
    .heka-orbit-action,
    .cat-detail-page-clean
    .heka-orbit-group-care.open
    .heka-care-action-1,
    .cat-detail-page-clean
    .heka-orbit-group-care.open
    .heka-care-action-2,
    .cat-detail-page-clean
    .heka-orbit-group-care.open
    .heka-care-action-3,
    .cat-detail-page-clean
    .heka-orbit-group-care.open
    .heka-care-action-4,
    .cat-detail-page-clean
    .heka-orbit-group-care.open
    .heka-care-action-5,
    .cat-detail-page-clean
    .heka-orbit-group-care.open
    .heka-care-action-6,
    .cat-detail-page-clean
    .heka-orbit-group-night.open
    .heka-night-action-1,
    .cat-detail-page-clean
    .heka-orbit-group-night.open
    .heka-night-action-2 {
        position: relative;
        inset: auto;
        width: 100%;
        height: 64px;
        min-width: 0;
        min-height: 64px;
        border-radius: 18px !important;
        transform: none;
        opacity: 0;
        pointer-events: none;
    }

    .cat-detail-page-clean
    .heka-orbit-group.open
    .heka-orbit-action {
        opacity: 1;
        pointer-events: auto;
    }

    .cat-detail-page-clean .heka-orbit-action img {
        width: 34px;
        height: 34px;
    }

    .cat-detail-page-clean .heka-orbit-action-label {
        max-width: 100%;
        font-size: 9px;
    }

    .cat-detail-page-clean
    .heka-orbit-group.open
    .heka-orbit-action:disabled,
    .cat-detail-page-clean
    .heka-orbit-group.open
    .heka-orbit-action.disabled {
        opacity: 0.42;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cat-detail-page-clean .heka-orbit-launcher,
    .cat-detail-page-clean .heka-orbit-action,
    .cat-detail-page-clean .heka-orbit-actions {
        transition: none !important;
    }
}


/* ===== Extracted: heka-orbit-controls-centered-spacing ===== */
/* Move the Heka circles closer to the marked floating islands:
   Care a bit more to the right and higher, Night a bit more to the left and higher. */
.cat-detail-page-clean .heka-care-orbit-controls {
    min-height: 330px !important;
}

.cat-detail-page-clean .heka-orbit-group-care {
    top: -150px !important;
    height: 248px !important;
}

.cat-detail-page-clean .heka-orbit-group-night {
    top: 126px !important;
    height: 94px !important;
}

.cat-detail-page-clean .heka-orbit-group-care .heka-orbit-launcher {
    left: calc(50% + 118px) !important;
    transform: translateX(-50%) !important;
}

.cat-detail-page-clean .heka-orbit-group-night .heka-orbit-launcher {
    left: calc(50% - 42px) !important;
    transform: translateX(-50%) !important;
}

.cat-detail-page-clean .heka-orbit-group-care.open .heka-orbit-launcher,
.cat-detail-page-clean .heka-orbit-group-care .heka-orbit-launcher:hover,
.cat-detail-page-clean .heka-orbit-group-night.open .heka-orbit-launcher,
.cat-detail-page-clean .heka-orbit-group-night .heka-orbit-launcher:hover {
    transform: translateX(-50%) scale(1.05) !important;
}

/* Keep each action fan aligned to its own launcher position. */
.cat-detail-page-clean .heka-orbit-group-care .heka-orbit-actions {
    left: calc(50% + 118px) !important;
}

.cat-detail-page-clean .heka-orbit-group-night .heka-orbit-actions {
    left: calc(50% - 42px) !important;
}

@media (max-width: 700px) {
    /* Mobile layout already stacks nicely, so keep its own positioning. */
    .cat-detail-page-clean .heka-care-orbit-controls {
        min-height: 0 !important;
    }

    .cat-detail-page-clean .heka-orbit-group-night {
        top: auto !important;
        height: auto !important;
    }

    .cat-detail-page-clean .heka-orbit-group-care .heka-orbit-launcher,
    .cat-detail-page-clean .heka-orbit-group-care.open .heka-orbit-launcher,
    .cat-detail-page-clean .heka-orbit-group-care .heka-orbit-launcher:hover,
    .cat-detail-page-clean .heka-orbit-group-night .heka-orbit-launcher,
    .cat-detail-page-clean .heka-orbit-group-night.open .heka-orbit-launcher,
    .cat-detail-page-clean .heka-orbit-group-night .heka-orbit-launcher:hover {
        left: auto !important;
        transform: none !important;
    }

    .cat-detail-page-clean .heka-orbit-group-care .heka-orbit-actions,
    .cat-detail-page-clean .heka-orbit-group-night .heka-orbit-actions {
        left: auto !important;
    }
}


/* ===== Extracted: all-cats-orbit-fallbacks ===== */
/* Orbit Care/Night controls for all cats:
   use soft default colors when no custom-item theme variables exist. */
.cat-detail-page-clean .heka-orbit-launcher,
.cat-detail-page-clean .heka-orbit-action {
    color: var(--cat-theme-a-text, #5a4664) !important;
}


/* ===== Extracted: all-cats-training-orbit ===== */
/* Mirrored Training circle opposite of Care.
   It uses the same vertical level as Care and the same horizontal offset,
   but mirrored to the other side. */
.cat-detail-page-clean .heka-training-orbit-controls {
    min-height: 330px !important;
    z-index: 18;
}

.cat-detail-page-clean .heka-orbit-group-training {
    top: -150px !important;
    height: 248px !important;
}

.cat-detail-page-clean .heka-orbit-group-training .heka-orbit-launcher {
    left: calc(50% - 118px) !important;
    transform: translateX(-50%) !important;
}

.cat-detail-page-clean .heka-orbit-group-training.open .heka-orbit-launcher,
.cat-detail-page-clean .heka-orbit-group-training .heka-orbit-launcher:hover {
    transform: translateX(-50%) scale(1.05) !important;
}

.cat-detail-page-clean .heka-orbit-group-training .heka-orbit-actions {
    left: calc(50% - 118px) !important;
    top: 124px !important;
}

.cat-detail-page-clean .heka-orbit-group-training .heka-orbit-launcher img {
    width: 47px;
    height: 47px;
}

.cat-detail-page-clean .heka-training-status-badge {
    position: absolute;
    top: 4px;
    right: -2px;
    min-width: 36px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(216,184,238,0.58);
    color: #684b5d;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}

/* Training actions fan mainly to the left so they stay on screen.
   They use a balanced mirrored feel opposite of the Care circle. */
.cat-detail-page-clean
.heka-orbit-group-training.open
.heka-training-action-1 {
    transform: translate(-80px,-67px) scale(1);
}

.cat-detail-page-clean
.heka-orbit-group-training.open
.heka-training-action-2 {
    transform: translate(-104px,0) scale(1);
}

.cat-detail-page-clean
.heka-orbit-group-training.open
.heka-training-action-3 {
    transform: translate(-80px,67px) scale(1);
}

.cat-detail-page-clean
.heka-orbit-group-training.open
.heka-training-action-4 {
    transform: translate(0,94px) scale(1);
}

@media (max-width: 700px) {
    .cat-detail-page-clean .heka-training-orbit-controls {
        min-height: 0 !important;
    }

    .cat-detail-page-clean .heka-orbit-group-training {
        top: auto !important;
        height: auto !important;
    }

    .cat-detail-page-clean .heka-orbit-group-training .heka-orbit-launcher,
    .cat-detail-page-clean .heka-orbit-group-training.open .heka-orbit-launcher,
    .cat-detail-page-clean .heka-orbit-group-training .heka-orbit-launcher:hover {
        left: auto !important;
        transform: none !important;
    }

    .cat-detail-page-clean .heka-orbit-group-training .heka-orbit-actions {
        left: auto !important;
        top: auto !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .cat-detail-page-clean
    .heka-orbit-group.open
    .heka-training-action-1,
    .cat-detail-page-clean
    .heka-orbit-group.open
    .heka-training-action-2,
    .cat-detail-page-clean
    .heka-orbit-group.open
    .heka-training-action-3,
    .cat-detail-page-clean
    .heka-orbit-group.open
    .heka-training-action-4 {
        position: relative;
        inset: auto;
        width: 100%;
        height: 64px;
        min-width: 0;
        min-height: 64px;
        border-radius: 18px !important;
        transform: none !important;
        opacity: 0;
        pointer-events: none;
    }

    .cat-detail-page-clean .heka-training-status-badge {
        top: 2px;
        right: -2px;
        min-width: 32px;
        font-size: 10px;
        padding: 3px 6px;
    }
}


/* ===== Extracted: cat-genetics-theme-sync ===== */
/* Genetics panel follows the selected Color Theme as well. */
.cat-detail-page-clean .genetics-panel,
.cat-detail-page-clean .genetics-inline-panel #unlockArea .genetics-panel {
    background: linear-gradient(
        180deg,
        rgba(var(--cat-theme-a-rgb, 255,241,250), 0.86),
        rgba(var(--cat-theme-b-rgb, 238,247,255), 0.80)
    ) !important;
    border: 1px solid rgba(216,184,238,0.52) !important;
    box-shadow: 0 8px 18px rgba(55,40,68,0.07) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

.cat-detail-page-clean .genetics-panel-title,
.cat-detail-page-clean .genetics-inline-panel #unlockArea .genetics-panel-title {
    color: var(--cat-theme-a-text, #664d5f) !important;
    background: linear-gradient(
        90deg,
        rgba(var(--cat-theme-a-rgb, 255,241,250), 0.96) 0%,
        rgba(var(--cat-theme-b-rgb, 238,247,255), 0.78) 100%
    ) !important;
    border-bottom: 1px solid rgba(216,184,238,0.42) !important;
}

.cat-detail-page-clean .genetics-card,
.cat-detail-page-clean .unlock-card {
    background: rgba(255,255,255,0.56) !important;
    border: 1px solid rgba(216,184,238,0.38) !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.04) !important;
}

.cat-detail-page-clean .genetics-card-label,
.cat-detail-page-clean .unlock-card-title {
    color: #665872 !important;
}

.cat-detail-page-clean .genetics-card-value,
.cat-detail-page-clean .gene-unavailable-note {
    color: #52495d !important;
}

.cat-detail-page-clean .genetics-card button,
.cat-detail-page-clean .unlock-card button {
    background: rgba(var(--cat-theme-a-rgb, 255,241,250), 0.68) !important;
    color: var(--cat-theme-a-text, #5a4664) !important;
    border: 1px solid rgba(216,184,238,0.56) !important;
    box-shadow:
        0 4px 10px rgba(88,64,120,0.06),
        inset 0 0 0 1px rgba(255,255,255,0.14) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
}

.cat-detail-page-clean .genetics-card button:hover,
.cat-detail-page-clean .unlock-card button:hover {
    background: rgba(var(--cat-theme-a-rgb, 255,241,250), 0.82) !important;
    filter: brightness(1.03);
}

.cat-detail-page-clean .genetics-card.gene-unavailable {
    background: rgba(220, 220, 228, 0.46) !important;
    border-color: rgba(170, 170, 180, 0.52) !important;
}


/* ===== Extracted: compact-breeding-dashboard-and-genetics-theme-final ===== */
/* ===== Compact Breeding dashboard ===== */

.breeding-compact-panel .breeding-compact-summary {
    min-height: 68px !important;
    padding: 11px 14px !important;
}

.breeding-compact-panel .breeding-compact-body {
    padding: 11px 13px 13px !important;
}

.breeding-status-overview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.breeding-status-mini {
    min-width: 0;
    min-height: 60px;
    padding: 9px 10px;
    border-radius: 14px;
    border: 1px solid rgba(216,184,238,0.48);
    background: rgba(255,255,255,0.42);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    box-shadow: 0 3px 8px rgba(88,64,120,0.04);
}

.breeding-status-mini-label {
    color: #76657b;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.breeding-status-mini strong {
    color: #574c61;
    font-size: 12px;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

.breeding-pregnancy-line {
    margin: -1px 0 10px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,0.34);
    border: 1px solid rgba(216,184,238,0.38);
    color: #62566b;
    font-size: 12px;
    line-height: 1.25;
}

.breeding-compact-panel .breeding-quick-actions {
    margin-bottom: 9px !important;
}

.breeding-compact-panel .breeding-more-actions-grid {
    margin-top: 0 !important;
}

/* Use the selected Heka colors in the four Breeding status fields. */
.cat-detail-page-clean.has-custom-background .breeding-status-mini {
    background: linear-gradient(
        135deg,
        rgba(var(--cat-theme-a-rgb, 255,241,250), 0.34),
        rgba(var(--cat-theme-b-rgb, 238,247,255), 0.28),
        rgba(255,255,255,0.25)
    ) !important;
    border-color: rgba(255,255,255,0.32) !important;
}

.cat-detail-page-clean.has-custom-background .breeding-pregnancy-line {
    background: linear-gradient(
        135deg,
        rgba(var(--cat-theme-a-rgb, 255,241,250), 0.28),
        rgba(var(--cat-theme-b-rgb, 238,247,255), 0.24)
    ) !important;
}

/* ===== Genetics Color Theme: final targeted override =====
   The visible "Genetics" heading is the <summary> element, not
   .genetics-panel-title, so it must be themed explicitly. */

.cat-detail-page-clean.has-custom-background .genetics-inline-panel {
    background: linear-gradient(
        145deg,
        rgba(var(--cat-theme-a-rgb, 255,241,250), 0.52),
        rgba(var(--cat-theme-b-rgb, 238,247,255), 0.46)
    ) !important;
    border-color: rgba(255,255,255,0.36) !important;
    box-shadow: 0 8px 18px rgba(55,40,68,0.07) !important;
    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;
}

.cat-detail-page-clean.has-custom-background .genetics-inline-panel > summary {
    background: linear-gradient(
        90deg,
        rgba(var(--cat-theme-a-rgb, 255,241,250), 0.92) 0%,
        rgba(var(--cat-theme-b-rgb, 238,247,255), 0.88) 100%
    ) !important;
    color: var(--cat-theme-a-text, #5a4664) !important;
    border-bottom: 1px solid rgba(255,255,255,0.32) !important;
}

.cat-detail-page-clean.has-custom-background
.genetics-inline-panel
#unlockArea
.genetics-panel {
    background: transparent !important;
    border: 0 !important;
}

.cat-detail-page-clean.has-custom-background
.genetics-inline-panel
.genetics-grid-beauty {
    background: transparent !important;
}

.cat-detail-page-clean.has-custom-background
.genetics-inline-panel
.genetics-card,
.cat-detail-page-clean.has-custom-background
.genetics-inline-panel
.unlock-card {
    background: linear-gradient(
        135deg,
        rgba(var(--cat-theme-a-rgb, 255,241,250), 0.38),
        rgba(var(--cat-theme-b-rgb, 238,247,255), 0.30),
        rgba(255,255,255,0.34)
    ) !important;
    border-color: rgba(255,255,255,0.38) !important;
    box-shadow: 0 3px 8px rgba(55,40,68,0.045) !important;
}

.cat-detail-page-clean.has-custom-background
.genetics-inline-panel
.genetics-card button,
.cat-detail-page-clean.has-custom-background
.genetics-inline-panel
.unlock-card button {
    background: rgba(var(--cat-theme-a-rgb, 255,241,250), 0.72) !important;
    background-image: none !important;
    color: var(--cat-theme-a-text, #5a4664) !important;
    border-color: rgba(255,255,255,0.44) !important;
}

.cat-detail-page-clean.has-custom-background
.genetics-inline-panel
.genetics-card button:hover,
.cat-detail-page-clean.has-custom-background
.genetics-inline-panel
.unlock-card button:hover {
    background: rgba(var(--cat-theme-a-rgb, 255,241,250), 0.86) !important;
}

@media (max-width: 520px) {
    .breeding-status-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .breeding-status-mini {
        min-height: 56px;
        padding: 8px;
    }
}


/* ===== Extracted: cat-show-energy-and-notification-contrast ===== */
/* ===== Cat Show entry page: stronger text contrast ===== */
.enter-cat-show-page,
.enter-cat-show-page .purr-feature-card-body,
.enter-cat-show-page .sale-row,
.enter-cat-show-page label,
.enter-cat-show-page .small-note,
.enter-cat-show-page .purr-feature-subtitle {
    color: #4b4054 !important;
    opacity: 1 !important;
}

.enter-cat-show-page .sale-row b,
.enter-cat-show-page .sale-list-head,
.enter-cat-show-page .show-sort-head-btn {
    color: #533f52 !important;
}

.enter-show-energy-overview {
    margin: 16px 0 18px;
    padding: 16px 18px;
    border-radius: 20px;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.88),
            rgba(243,235,255,0.82),
            rgba(238,247,255,0.82)
        );
    border: 1px solid rgba(216,184,238,0.76);
    box-shadow: 0 8px 18px rgba(88,64,120,0.08);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    color: #493e51 !important;
}

.enter-show-energy-loading,
.enter-show-energy-error {
    color: #493e51 !important;
    font-weight: 800;
}

.enter-show-energy-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 13px;
}

.enter-show-energy-cat-name {
    color: #6d2f58 !important;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.15;
}

.enter-show-energy-note {
    color: #54475b !important;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.35;
    margin-top: 4px;
}

.enter-show-energy-cost {
    flex: 0 0 auto;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,0.76);
    border: 1px solid rgba(216,184,238,0.70);
    color: #65475f !important;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.enter-show-energy-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr;
    gap: 10px;
}

.enter-show-energy-stat {
    min-width: 0;
    padding: 11px 12px;
    border-radius: 15px;
    background: rgba(255,255,255,0.66);
    border: 1px solid rgba(216,184,238,0.56);
    color: #493e51 !important;
}

.enter-show-energy-label {
    color: #65586b !important;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin-bottom: 5px;
}

.enter-show-energy-value {
    color: #4a3f51 !important;
    font-size: 21px;
    font-weight: 900;
    line-height: 1.1;
}

.enter-show-energy-bar {
    height: 13px;
    margin-top: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(225,221,232,0.90);
    border: 1px solid rgba(120,100,135,0.12);
}

.enter-show-energy-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #d62626 0%, #f6ed4c 50%, #52ec3a 100%);
}

/* Notifications: prevent pale inherited text colors. */
.notification-dropdown .notification-message,
.notification-dropdown .notification-date,
.mobile-notification-item .notification-message,
.mobile-notification-item .notification-date {
    opacity: 1 !important;
}

.notification-dropdown .notification-message,
.mobile-notification-item .notification-message {
    color: #493f50 !important;
    font-weight: 650 !important;
}

.notification-dropdown .notification-date,
.mobile-notification-item .notification-date {
    color: #675b6e !important;
}

@media (max-width: 700px) {
    .enter-show-energy-head {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .enter-show-energy-cost {
        width: fit-content;
    }

    .enter-show-energy-grid {
        grid-template-columns: 1fr;
    }

    .enter-show-energy-overview {
        padding: 14px;
        border-radius: 17px;
    }
}


/* ===== Extracted: cat-detail-tabs-dark-text-final ===== */
/* Characteristics / Genetic / Bonus:
   keep every tab label dark and readable, including inactive tabs. */
.cat-detail-page-clean .cat-tabs-clean .clean-tabs .purr-tab,
.cat-detail-page-clean .cat-tabs-clean .clean-tabs .purr-tab:not(.active),
.cat-detail-page-clean .cat-tabs-clean .clean-tabs .purr-tab.active,
.cat-detail-page-clean .public-cat-tab,
.cat-detail-page-clean .public-cat-tab:not(.active),
.cat-detail-page-clean .public-cat-tab.active {
    color: #55485e !important;
    -webkit-text-fill-color: #55485e !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

.cat-detail-page-clean .cat-tabs-clean .clean-tabs .purr-tab:hover,
.cat-detail-page-clean .public-cat-tab:hover {
    color: #442f4d !important;
    -webkit-text-fill-color: #442f4d !important;
}

/* Keep disabled-looking inherited button rules from fading the labels. */
.cat-detail-page-clean .cat-tabs-clean .clean-tabs .purr-tab *,
.cat-detail-page-clean .public-cat-tab * {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
}


/* ===== Extracted: purrpixels-bank-finance-styles ===== */
/* =========================================================
   PurrPixels Bank & Finances
   ========================================================= */

.currency.currency-clickable {
    cursor: pointer;
    user-select: none;
    transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

.currency.currency-clickable:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,0.82);
    box-shadow: 0 7px 16px rgba(88,64,120,0.16);
}

.bank-page {
    max-width: 1180px;
    margin: 18px auto 42px;
}

.bank-hero {
    display: grid;
    grid-template-columns: 1fr 132px;
    gap: 22px;
    align-items: center;
    padding: 24px;
    border: 1px solid rgba(216,184,238,0.74);
    border-radius: 26px;
    background:
        linear-gradient(
            135deg,
            rgba(255,246,252,0.90),
            rgba(238,247,255,0.84),
            rgba(248,226,255,0.86)
        );
    box-shadow: 0 10px 24px rgba(88,64,120,0.10);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    margin-bottom: 18px;
}

.bank-kicker {
    color: #8a5a91;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.bank-title {
    color: #684b5d;
    font-size: 38px;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 8px;
}

.bank-subtitle {
    max-width: 760px;
    color: #5b5963;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
}

.bank-hero-icon {
    width: 108px;
    height: 108px;
    margin-left: auto;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.68);
    border: 1px solid rgba(216,184,238,0.66);
    box-shadow: inset 0 0 0 3px rgba(255,255,255,0.36);
}

.bank-hero-icon img {
    width: 76px;
    height: 76px;
    object-fit: contain;
}

.bank-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.bank-summary-card {
    min-width: 0;
    padding: 16px;
    border-radius: 20px;
    background: rgba(255,255,255,0.76);
    border: 1px solid rgba(216,184,238,0.68);
    box-shadow: 0 6px 14px rgba(88,64,120,0.07);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.bank-summary-label {
    color: #75667d;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.035em;
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 7px;
}

.bank-summary-value {
    color: #55475d;
    font-size: 25px;
    font-weight: 900;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.bank-summary-value.positive {
    color: #477256;
}

.bank-summary-value.negative {
    color: #9a4661;
}

.bank-summary-small {
    color: #75667d;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.35;
    margin-top: 5px;
}

.bank-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(310px, 0.55fr);
    gap: 18px;
    align-items: start;
}

.bank-card {
    overflow: hidden;
    margin-bottom: 18px;
    border-radius: 22px;
    background: rgba(255,255,255,0.74);
    border: 1px solid rgba(216,184,238,0.70);
    box-shadow: 0 7px 18px rgba(88,64,120,0.08);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.bank-card-title {
    padding: 13px 16px;
    color: #684b5d;
    font-size: 21px;
    font-weight: 900;
    text-align: center;
    background:
        linear-gradient(
            90deg,
            rgba(232,247,255,0.94),
            rgba(255,241,250,0.96),
            rgba(238,225,255,0.94)
        );
    border-bottom: 1px solid rgba(216,184,238,0.54);
}

.bank-card-body {
    padding: 16px;
}

.bank-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
}

.bank-field label {
    display: block;
    color: #66586c;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin-bottom: 5px;
}

.bank-field select,
.bank-field input {
    width: 100%;
    min-height: 42px;
    margin: 0;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(194,160,225,0.72);
    background: rgba(255,255,255,0.90);
    color: #514457;
    font-weight: 750;
    outline: none;
}

.bank-field select:focus,
.bank-field input:focus {
    border-color: #b990df;
    box-shadow: 0 0 0 3px rgba(185,144,223,0.13);
}

.bank-action-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.bank-primary-button,
.bank-secondary-button {
    min-height: 42px;
    margin: 0 !important;
    border-radius: 999px !important;
    padding: 9px 16px !important;
    font-weight: 900 !important;
}

.bank-primary-button {
    background: linear-gradient(180deg, #ffffff, #f4defc) !important;
    border-color: rgba(185,144,223,0.78) !important;
}

.bank-secondary-button {
    background: rgba(255,255,255,0.72) !important;
}

.bank-balance-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.bank-balance-box {
    padding: 13px;
    border-radius: 16px;
    background: rgba(255,255,255,0.61);
    border: 1px solid rgba(216,184,238,0.52);
}

.bank-balance-box.income {
    background: rgba(238,250,242,0.70);
}

.bank-balance-box.expense {
    background: rgba(255,240,247,0.70);
}

.bank-balance-heading {
    color: #65586b;
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 8px;
}

.bank-balance-line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #514757;
    font-size: 14px;
    font-weight: 800;
    padding: 4px 0;
}

.bank-balance-line strong {
    white-space: nowrap;
}

.bank-category-list {
    display: grid;
    gap: 9px;
}

.bank-category-row {
    padding: 11px 12px;
    border-radius: 15px;
    background: rgba(255,255,255,0.59);
    border: 1px solid rgba(216,184,238,0.46);
}

.bank-category-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 5px;
}

.bank-category-name {
    color: #604f65;
    font-weight: 900;
}

.bank-category-count {
    color: #85768a;
    font-size: 12px;
    font-weight: 850;
}

.bank-category-values {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    color: #5f5366;
    font-size: 12px;
    font-weight: 800;
}

.bank-category-positive {
    color: #477256;
}

.bank-category-negative {
    color: #9a4661;
}

.bank-transfer-note {
    color: #665c6b;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
    margin-bottom: 13px;
}

.bank-transfer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.bank-transfer-box {
    padding: 13px;
    border-radius: 17px;
    background: rgba(255,255,255,0.57);
    border: 1px solid rgba(216,184,238,0.52);
}

.bank-transfer-title {
    color: #684b5d;
    font-size: 16px;
    font-weight: 900;
    margin-bottom: 8px;
}

.bank-transfer-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
}

.bank-transfer-row input {
    min-width: 0;
    width: 100%;
    height: 42px;
    margin: 0;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(194,160,225,0.72);
    background: rgba(255,255,255,0.90);
    color: #514457;
    font-weight: 800;
}

.bank-transaction-list {
    display: flex;
    flex-direction: column;
}

.bank-transaction {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 13px 15px;
    border-bottom: 1px solid rgba(216,184,238,0.34);
    background: rgba(255,255,255,0.31);
}

.bank-transaction:nth-child(even) {
    background: rgba(238,247,255,0.24);
}

.bank-transaction:last-child {
    border-bottom: none;
}

.bank-transaction-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.76);
    border: 1px solid rgba(216,184,238,0.48);
    font-size: 21px;
}

.bank-transaction-title {
    color: #574a5d;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.25;
    margin-bottom: 3px;
}

.bank-transaction-description {
    color: #746979;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.bank-transaction-meta {
    color: #8a7d8f;
    font-size: 11px;
    font-weight: 750;
    margin-top: 4px;
}

.bank-transaction-amounts {
    min-width: 145px;
    text-align: right;
    display: grid;
    gap: 3px;
}

.bank-amount {
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.bank-amount.positive {
    color: #477256;
}

.bank-amount.negative {
    color: #9a4661;
}

.bank-amount.transfer {
    color: #6b5680;
}

.bank-empty,
.bank-loading,
.bank-error {
    padding: 22px;
    color: #665b6c;
    font-weight: 800;
    text-align: center;
}

.bank-history-note {
    padding: 10px 14px;
    color: #7a6d7f;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    background: rgba(255,255,255,0.40);
    border-top: 1px solid rgba(216,184,238,0.34);
}

@media (max-width: 980px) {
    .bank-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bank-layout {
        grid-template-columns: 1fr;
    }

    .bank-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .bank-page {
        margin-top: 10px;
    }

    .bank-hero {
        grid-template-columns: 1fr;
        padding: 18px;
        text-align: center;
    }

    .bank-hero-icon {
        margin: 0 auto;
    }

    .bank-title {
        font-size: 30px;
    }

    .bank-summary-grid,
    .bank-filter-grid,
    .bank-balance-columns {
        grid-template-columns: 1fr;
    }

    .bank-transaction {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .bank-transaction-amounts {
        grid-column: 2;
        min-width: 0;
        text-align: left;
    }
}


/* ===== Extracted: purrpixels-bank-phase2-savings-goals ===== */
/* ===== Bank Phase 2: Savings goal ===== */

.bank-savings-goal {
    margin-bottom: 14px;
    padding: 14px;
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.82),
            rgba(248,226,255,0.66),
            rgba(232,247,255,0.66)
        );
    border: 1px solid rgba(216,184,238,0.66);
    box-shadow: 0 5px 12px rgba(88,64,120,0.06);
}

.bank-savings-goal-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.bank-savings-goal-name {
    color: #65445c;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.2;
}

.bank-savings-goal-status {
    flex: 0 0 auto;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(216,184,238,0.58);
    color: #68566d;
    font-size: 11px;
    font-weight: 900;
}

.bank-savings-goal-status.complete {
    background: rgba(229,250,233,0.90);
    border-color: rgba(142,199,157,0.70);
    color: #3d6c49;
}

.bank-savings-goal-progress {
    height: 16px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(223,219,229,0.90);
    border: 1px solid rgba(90,74,99,0.10);
}

.bank-savings-goal-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        rgba(190,144,255,0.96),
        rgba(255,157,211,0.96),
        rgba(145,211,239,0.96)
    );
    transition: width 0.25s ease;
}

.bank-savings-goal-numbers {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    color: #574c61;
    font-size: 12px;
    font-weight: 850;
}

.bank-savings-goal-remaining {
    color: #78677d;
    text-align: right;
}

.bank-goal-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px auto;
    gap: 8px;
    align-items: end;
    margin-top: 12px;
}

.bank-goal-editor .bank-field {
    margin: 0;
}

.bank-goal-editor input {
    width: 100%;
}

.bank-goal-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.bank-quick-transfer {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.bank-quick-transfer button {
    margin: 0 !important;
    padding: 6px 9px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.66) !important;
    border: 1px solid rgba(216,184,238,0.58) !important;
    color: #5b4c63 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
}

.bank-quick-transfer button:hover {
    background: rgba(255,255,255,0.90) !important;
}

.bank-goal-empty {
    color: #5e5267;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.bank-goal-empty strong {
    color: #67445d;
}

@media (max-width: 700px) {
    .bank-goal-editor {
        grid-template-columns: 1fr;
    }

    .bank-goal-actions {
        width: 100%;
    }

    .bank-goal-actions button {
        flex: 1;
    }

    .bank-savings-goal-top,
    .bank-savings-goal-numbers {
        align-items: flex-start;
        flex-direction: column;
    }

    .bank-savings-goal-remaining {
        text-align: left;
    }
}


/* ===== Extracted: bank-savings-layout-final-fix ===== */
/* The Savings Account sits in the narrow right column.
   Keep its goal form vertically stacked at every desktop width. */
.bank-card .bank-goal-editor {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    margin-top: 15px !important;
}

.bank-card .bank-goal-editor .bank-field {
    min-width: 0 !important;
    width: 100% !important;
}

.bank-card .bank-goal-editor .bank-field label {
    display: block !important;
    margin: 0 0 6px !important;
    color: #5d5065 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.bank-card .bank-goal-editor input {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 10px 13px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
}

.bank-card .bank-goal-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 8px !important;
    align-items: stretch !important;
}

.bank-card .bank-goal-actions button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    white-space: normal !important;
}

.bank-card .bank-goal-actions button:only-child {
    grid-column: 1 / -1 !important;
}

.bank-card .bank-savings-goal {
    padding: 16px !important;
}

.bank-card .bank-goal-empty {
    padding-bottom: 13px !important;
    border-bottom: 1px solid rgba(216,184,238,0.36) !important;
}

.bank-card .bank-goal-empty strong {
    display: block !important;
    margin-bottom: 4px !important;
    font-size: 15px !important;
}

@media (max-width: 620px) {
    .bank-card .bank-savings-goal {
        padding: 14px !important;
    }

    .bank-card .bank-goal-actions {
        grid-template-columns: 1fr !important;
    }

    .bank-card .bank-goal-actions button:only-child {
        grid-column: auto !important;
    }
}


/* ===== Extracted: heka-horizontal-flip-button-style ===== */
.heka-cat-flip-button {
    width: 100% !important;
    margin: 10px 0 2px !important;
    padding: 10px 13px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(216,184,238,0.72) !important;
    background: rgba(255,255,255,0.58) !important;
    color: #5a4b62 !important;
    box-shadow: 0 3px 8px rgba(88,64,120,0.05) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.heka-cat-flip-button:hover {
    background: rgba(255,255,255,0.82) !important;
}

.heka-cat-flip-button.active {
    background: linear-gradient(
        135deg,
        rgba(var(--cat-theme-a-rgb, 255,241,250), 0.78),
        rgba(var(--cat-theme-b-rgb, 238,247,255), 0.72)
    ) !important;
    border-color: rgba(176,132,220,0.72) !important;
    color: var(--cat-theme-a-text, #57445e) !important;
    box-shadow:
        0 4px 10px rgba(88,64,120,0.08),
        inset 0 0 0 1px rgba(255,255,255,0.24) !important;
}

.heka-flip-icon {
    font-size: 18px;
    line-height: 1;
}


/* ===== Extracted: purrpixels-advertising-system-style ===== */
/* =========================================================
   PurrPixels Advertising
   This is intentionally outside all Heka cat scene selectors.
   ========================================================= */

.purr-ad-shell {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 8;
}

.purr-ad-shell.active {
    display: flex;
}

.purr-ad-shell.desktop {
    min-height: 110px;
    margin: 10px auto 4px;
}

.purr-ad-shell.mobile {
    display: none;
}

.purr-ad-frame {
    width: 728px;
    height: 90px;
    max-width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(216,184,238,0.72);
    background: rgba(255,255,255,0.72);
    box-shadow: 0 7px 18px rgba(88,64,120,0.12);
    cursor: pointer;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.28s ease, transform 0.28s ease;
    padding: 0;
    margin: 0;
}

.purr-ad-frame.visible {
    opacity: 1;
    transform: translateY(0);
}

.purr-ad-frame:hover {
    transform: translateY(-1px);
    box-shadow: 0 9px 21px rgba(88,64,120,0.16);
}

.purr-ad-creative {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 16% 30%, rgba(255,255,255,0.95), transparent 31%),
        linear-gradient(100deg, #e8f7ff 0%, #fff0f8 48%, #eadfff 100%);
}

.purr-ad-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    z-index: 2;
}

.purr-ad-placeholder {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: 14px 72px 14px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.purr-ad-placeholder-title {
    color: #70425f;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.purr-ad-placeholder-subtitle {
    color: #66566d;
    font-size: 14px;
    font-weight: 750;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.purr-ad-label {
    position: absolute;
    z-index: 4;
    top: 7px;
    right: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(120,100,135,0.22);
    color: #65576b;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    pointer-events: none;
}

.purr-ad-dots {
    position: absolute;
    z-index: 4;
    right: 10px;
    bottom: 8px;
    display: flex;
    gap: 3px;
    pointer-events: none;
}

.purr-ad-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(83,63,91,0.25);
}

.purr-ad-dot.active {
    background: rgba(104,61,91,0.78);
}

/* Advertising admin */
.admin-ad-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.admin-ad-form-grid label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    color: #5c4f64;
    font-size: 12px;
    font-weight: 900;
}

.admin-ad-form-grid label.full {
    grid-column: 1 / -1;
}

.admin-ad-form-grid input,
.admin-ad-form-grid textarea,
.admin-ad-form-grid select {
    width: 100%;
    min-width: 0;
}

.admin-ad-checkbox {
    flex-direction: row !important;
    align-items: center;
    padding: 9px 11px;
    border-radius: 12px;
    background: rgba(255,255,255,0.52);
    border: 1px solid rgba(216,184,238,0.46);
}

.admin-ad-checkbox input {
    width: auto !important;
    margin: 0;
}

.admin-ad-action-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.admin-ad-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-ad-row {
    border: 1px solid rgba(216,184,238,0.58);
    border-radius: 16px;
    background: rgba(255,255,255,0.56);
    padding: 12px;
}

.admin-ad-row-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.admin-ad-row-title {
    color: #68445e;
    font-size: 16px;
    font-weight: 900;
}

.admin-ad-row-meta {
    color: #76697b;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.35;
    margin-top: 3px;
}

.admin-ad-status {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(232,240,234,0.88);
    border: 1px solid rgba(142,199,157,0.58);
    color: #43684d;
    font-size: 10px;
    font-weight: 900;
}

.admin-ad-status.off {
    background: rgba(235,230,237,0.88);
    border-color: rgba(170,160,176,0.50);
    color: #756a79;
}

.admin-ad-preview {
    width: 100%;
    max-width: 728px;
    height: 90px;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid rgba(216,184,238,0.52);
    margin: 8px 0;
    background:
        linear-gradient(100deg, #e8f7ff 0%, #fff0f8 48%, #eadfff 100%);
    position: relative;
}

.admin-ad-preview img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.admin-ad-preview-text {
    height: 100%;
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #68445e;
}

.admin-ad-preview-text b {
    font-size: 15px;
}

.admin-ad-preview-text span {
    font-size: 10px;
    margin-top: 3px;
}

.admin-ad-stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 8px 0;
}

.admin-ad-stat {
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.70);
    border: 1px solid rgba(216,184,238,0.45);
    color: #5f5266;
    font-size: 11px;
    font-weight: 850;
}

.admin-ad-row-actions {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 9px;
}

@media (max-width: 768px) {
    .purr-ad-shell.desktop {
        display: none !important;
    }

    body.purr-mobile-game .purr-ad-shell.mobile.active {
        display: flex !important;
        min-height: 64px;
        margin: 0 auto 8px;
    }

    .purr-ad-shell.mobile .purr-ad-frame {
        width: min(320px, 100%);
        height: 50px;
        border-radius: 10px;
    }

    .purr-ad-shell.mobile .purr-ad-placeholder {
        padding: 7px 46px 7px 13px;
    }

    .purr-ad-shell.mobile .purr-ad-placeholder-title {
        font-size: 14px;
    }

    .purr-ad-shell.mobile .purr-ad-placeholder-subtitle {
        font-size: 9px;
        margin-top: 2px;
    }

    .admin-ad-form-grid {
        grid-template-columns: 1fr;
    }

    .admin-ad-form-grid label.full {
        grid-column: auto;
    }
}


/* ===== Extracted: purrpixels-worldshow-profile-compact-fix ===== */
/* ===== My Page: kompakte WorldShow-Ergebnisse ===== */

.worldshow-profile-overview {
    grid-template-columns: 120px minmax(0, 1fr) !important;
    gap: 12px !important;
}

.worldshow-profile-stat {
    min-height: 108px !important;
    padding: 12px 10px !important;
    border-radius: 18px !important;
    box-shadow: 0 6px 14px rgba(122,47,88,0.05) !important;
}

.worldshow-profile-stat strong {
    font-size: 34px !important;
    margin-bottom: 7px !important;
}

.worldshow-profile-stat span {
    font-size: 11px !important;
    line-height: 1.25 !important;
}

.worldshow-profile-results {
    gap: 9px !important;
}

.worldshow-profile-entry {
    grid-template-columns: 96px minmax(135px, 1fr) minmax(220px, 280px) !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border-radius: 17px !important;
    box-shadow: 0 5px 12px rgba(122,47,88,0.04) !important;
}

.worldshow-profile-place {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.worldshow-profile-place-badge {
    width: auto !important;
    min-width: 88px !important;
    padding: 7px 10px !important;
    font-size: 12px !important;
    white-space: nowrap;
}

.worldshow-profile-catname {
    font-size: 18px !important;
    line-height: 1.08 !important;
}

.worldshow-profile-cattery {
    margin-top: 3px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
}

.worldshow-profile-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
}

.worldshow-profile-meta-item {
    min-height: 50px !important;
    padding: 6px 9px !important;
    border-radius: 13px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.worldshow-profile-meta-item span {
    font-size: 9px !important;
    margin-bottom: 2px !important;
}

.worldshow-profile-meta-item strong {
    font-size: 13px !important;
    line-height: 1.15 !important;
}

@media (max-width: 900px) {
    .worldshow-profile-overview {
        grid-template-columns: 1fr !important;
    }

    .worldshow-profile-stat {
        min-height: auto !important;
        flex-direction: row !important;
        gap: 10px !important;
    }

    .worldshow-profile-stat strong {
        margin: 0 !important;
        font-size: 30px !important;
    }

    .worldshow-profile-entry {
        grid-template-columns: 92px minmax(130px, 1fr) minmax(210px, 250px) !important;
    }
}

@media (max-width: 720px) {
    .worldshow-profile-entry {
        grid-template-columns: 1fr !important;
        text-align: center;
    }

    .worldshow-profile-place {
        justify-content: center;
    }

    .worldshow-profile-catinfo {
        text-align: center;
    }

    .worldshow-profile-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 480px) {
    .worldshow-profile-meta {
        grid-template-columns: 1fr !important;
    }
}


/* ===== Extracted: heka-classic-design-choice-and-mobile-proportion-fix ===== */
.heka-action-design-grid {
    display: grid;
    gap: 9px;
    margin: 8px 0 12px;
}

.heka-action-design-option {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 10px;
    align-items: start;
    padding: 11px 12px;
    border-radius: 14px;
    border: 1px solid rgba(216,184,238,0.62);
    background: rgba(255,255,255,0.66);
    cursor: pointer;
}

.heka-action-design-option:hover {
    background: rgba(255,247,251,0.90);
}

.heka-action-design-option input {
    width: 17px;
    height: 17px;
    margin: 2px 0 0;
    accent-color: #a978df;
}

.heka-action-design-option strong {
    display: block;
    color: #684b5d;
    font-size: 13px;
    margin-bottom: 3px;
}

.heka-action-design-option span {
    display: block;
    color: #75667d;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.35;
}

@media (max-width: 700px) {
    .cat-detail-page-clean.has-custom-background
    .middle-cat-panel.clean-main-cat
    .cat-detail-image-wrap.has-cat-background {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    .cat-detail-page-clean.has-custom-background
    .cat-background-stage.cat-detail-card-stage {
        display: block !important;
        width: min(520px, calc(100vw - 24px)) !important;
        max-width: 520px !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: 1460 / 857 !important;
        margin: 0 auto 10px !important;
        position: relative !important;
        overflow: hidden !important;
        border-radius: 18px !important;
        border: 1px solid rgba(216,184,238,0.52) !important;
        box-shadow: 0 8px 18px rgba(55,40,68,0.12) !important;
        background-image: var(--cat-detail-custom-bg) !important;
        background-size: 131.507% 100% !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    .cat-detail-page-clean.has-custom-background
    .cat-background-stage.cat-detail-card-stage
    .cat-background-cat {
        width: 20.548% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        left: calc(50% + var(--heka-cat-x-mobile, 0%)) !important;
        top: calc(50% + var(--heka-cat-y-mobile, 0%)) !important;
        bottom: auto !important;
        object-fit: contain !important;
        transform:
            translate(-50%, -50%)
            rotate(var(--heka-cat-rotation, 0deg))
            scaleX(var(--heka-cat-flip-x, 1))
            scale(var(--heka-cat-scale, 1)) !important;
        transform-origin: center center !important;
        filter: drop-shadow(0 5px 8px rgba(35,25,40,0.20)) !important;
    }

    .cat-detail-page-clean.has-custom-background .cat-nav-arrow {
        top: 50% !important;
    }
}


/* ===== Extracted: heka-background-visibility-repair ===== */
/*
   Desktop:
   The Heka background pseudo-element previously used a negative z-index.
   With a solid outer page colour this could place it behind the page itself.
   Keep the background inside the cat-page stacking context instead.
*/
@media (min-width: 701px) {
    .cat-detail-page-clean.has-custom-background {
        position: relative !important;
        isolation: isolate !important;
        z-index: 0 !important;
    }

    .cat-detail-page-clean.has-custom-background::before {
        content: "" !important;
        display: block !important;
        z-index: 0 !important;
        pointer-events: none !important;
        background-image: var(--cat-detail-custom-bg) !important;
        background-repeat: no-repeat !important;
        opacity: 1 !important;
    }

    .cat-detail-page-clean.has-custom-background > .cat-title-clean,
    .cat-detail-page-clean.has-custom-background > .cat-clean-grid {
        position: relative !important;
        z-index: 2 !important;
    }
}

/*
   Mobile:
   The proportional Heka scene already contains the background and cat.
   Hide the large desktop background layer to prevent a duplicated image.
*/
@media (max-width: 700px) {
    .cat-detail-page-clean.has-custom-background::before,
    .cat-detail-page-clean.has-custom-background::after {
        display: none !important;
    }

    .cat-detail-page-clean.has-custom-background
    .cat-background-stage.cat-detail-card-stage {
        background-image: var(--cat-detail-custom-bg) !important;
    }
}


/* ===== Extracted: mobile-cat-primary-actions-and-heka-settings-repair ===== */
/* Desktop: das neue Howrse-inspirierte Menü bleibt unsichtbar. */
.mobile-cat-primary-actions,
.heka-settings-mobile-head {
    display: none;
}

/* Die Einstellungen müssen immer vor Katze und Hintergrund liegen. */
.cat-detail-page-clean.has-custom-background .cat-title-clean {
    position: relative !important;
    z-index: 300 !important;
}

.cat-detail-page-clean.has-custom-background .cat-clean-grid {
    position: relative !important;
    z-index: 2 !important;
}

.cat-detail-page-clean.has-custom-background .heka-cat-settings {
    position: relative !important;
    z-index: 320 !important;
}

.cat-detail-page-clean.has-custom-background .heka-cat-settings-menu {
    z-index: 5000 !important;
    pointer-events: auto !important;
}

.cat-detail-page-clean.has-custom-background.heka-settings-open
.cat-background-stage.cat-detail-card-stage
.cat-background-cat {
    pointer-events: none !important;
}

.heka-settings-close-button {
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    margin: 0;
    border-radius: 999px;
    font-size: 22px;
    line-height: 1;
}

@media (max-width: 700px) {
    /*
       Howrse-inspirierte mobile Aktionskreise:
       immer für alle eigenen Katzen, auch mit Heka-Hintergrund.
    */
    .mobile-cat-primary-actions {
        display: block !important;
        width: min(430px, 100%) !important;
        margin: 0 auto 2px !important;
        padding: 4px 2px 0 !important;
        position: relative !important;
        order: 0 !important;
        z-index: 80 !important;
    }

    .mobile-cat-primary-arc {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 2px;
        align-items: start;
        min-height: 92px;
        padding: 0 2px;
    }

    .mobile-cat-primary-circle {
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent !important;
        box-shadow: none !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 4px;
        color: #604b68;
        position: relative;
        z-index: 2;
    }

    .mobile-cat-primary-circle:nth-child(1),
    .mobile-cat-primary-circle:nth-child(5) {
        transform: translateY(26px);
    }

    .mobile-cat-primary-circle:nth-child(2),
    .mobile-cat-primary-circle:nth-child(4) {
        transform: translateY(9px);
    }

    .mobile-cat-primary-circle:nth-child(3) {
        transform: translateY(0);
    }

    .mobile-cat-primary-circle-icon {
        width: clamp(48px, 14vw, 60px);
        height: clamp(48px, 14vw, 60px);
        border-radius: 50%;
        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,0.94),
                rgba(246,223,239,0.88)
            );
        border: 1px solid rgba(216,184,238,0.86);
        box-shadow:
            0 7px 16px rgba(88,64,120,0.14),
            inset 0 0 0 2px rgba(255,255,255,0.40);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        transition:
            transform 0.14s ease,
            box-shadow 0.14s ease;
    }

    .mobile-cat-primary-circle[aria-expanded="true"]
    .mobile-cat-primary-circle-icon,
    .mobile-cat-primary-circle:active
    .mobile-cat-primary-circle-icon {
        transform: translateY(-2px) scale(1.04);
        box-shadow:
            0 10px 20px rgba(88,64,120,0.19),
            inset 0 0 0 2px rgba(255,255,255,0.55);
    }

    .mobile-cat-primary-circle-icon img {
        width: 68%;
        height: 68%;
        object-fit: contain;
        pointer-events: none;
    }

    .mobile-cat-primary-circle-emoji {
        font-size: clamp(25px, 8vw, 34px);
        line-height: 1;
    }

    .mobile-cat-primary-circle-label {
        max-width: 68px;
        font-size: clamp(9px, 2.8vw, 11px);
        line-height: 1.08;
        font-weight: 900;
        text-align: center;
        overflow-wrap: anywhere;
        color: #604b68;
    }

    .mobile-cat-primary-badge {
        position: absolute;
        top: -5px;
        right: -5px;
        min-width: 26px;
        height: 21px;
        padding: 0 6px;
        border-radius: 999px;
        background: rgba(255,255,255,0.96);
        border: 1px solid rgba(216,184,238,0.80);
        color: #684b5d;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 9px;
        font-weight: 950;
        box-shadow: 0 3px 8px rgba(88,64,120,0.10);
    }

    .mobile-cat-primary-trays {
        position: relative;
        z-index: 90;
    }

    .mobile-cat-primary-tray {
        display: none;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        width: calc(100% - 8px);
        margin: 0 auto 8px;
        padding: 10px;
        border-radius: 18px;
        background: rgba(255,255,255,0.91);
        border: 1px solid rgba(216,184,238,0.78);
        box-shadow: 0 12px 28px rgba(88,64,120,0.17);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .mobile-cat-primary-tray.show {
        display: grid;
    }

    .mobile-cat-primary-tray-sleep {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mobile-cat-mini-action {
        min-width: 0;
        min-height: 70px;
        margin: 0;
        padding: 7px 5px;
        border-radius: 14px;
        background: linear-gradient(
            180deg,
            rgba(255,255,255,0.98),
            rgba(249,237,255,0.90)
        );
        border: 1px solid rgba(216,184,238,0.70);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        color: #604b68;
        font-size: 10px;
        line-height: 1.1;
        font-weight: 900;
        text-align: center;
    }

    .mobile-cat-mini-action img {
        width: 34px;
        height: 34px;
        object-fit: contain;
    }

    .mobile-cat-mini-action:disabled,
    .mobile-cat-mini-action.disabled {
        opacity: 0.45;
        filter: grayscale(100%);
        cursor: not-allowed;
    }

    /*
       Die großen alten Care-/Training-Bereiche bleiben auf Desktop.
       Auf dem Handy werden sie durch die fünf Kreise ersetzt.
    */
    .classic-care-night-panel,
    .classic-training-panel,
    .cat-detail-page-clean .heka-care-orbit-controls {
        display: none !important;
    }

    /*
       Auch bei Heka mit display:contents muss das neue Menü vor der
       Katze stehen.
    */
    .cat-detail-page-clean.has-custom-background .mobile-cat-primary-actions {
        order: 0 !important;
    }

    .cat-detail-page-clean.has-custom-background
    .middle-cat-panel.clean-main-cat {
        order: 1 !important;
    }

    /* Heka-Einstellungen als gut bedienbares mobiles Fenster. */
    .cat-detail-page-clean.has-custom-background .cat-title-clean {
        z-index: 4000 !important;
    }

    .cat-detail-page-clean.has-custom-background .cat-clean-grid {
        z-index: 1 !important;
    }

    .heka-cat-settings-menu {
        position: fixed !important;
        top: calc(env(safe-area-inset-top, 0px) + 72px) !important;
        left: 12px !important;
        right: 12px !important;
        bottom: auto !important;
        transform: none !important;
        width: auto !important;
        max-width: 520px !important;
        max-height: calc(100vh - 128px) !important;
        margin: 0 auto !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        padding: 12px !important;
        border-radius: 22px !important;
        z-index: 99999 !important;
        pointer-events: auto !important;
        touch-action: pan-y !important;
    }

    .heka-settings-mobile-head {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin: -2px 0 10px;
        padding-bottom: 9px;
        border-bottom: 1px solid rgba(216,184,238,0.58);
        color: #684b5d;
    }

    .heka-settings-mobile-head strong {
        font-size: 17px;
    }

    .heka-cat-settings-actions {
        grid-template-columns: 1fr 1fr !important;
    }

    .heka-cat-settings-actions button {
        min-height: 39px;
        white-space: normal;
    }

    .heka-cat-settings-panel {
        position: relative !important;
        z-index: 2 !important;
    }

    .cat-detail-page-clean.has-custom-background.heka-settings-open
    .cat-background-stage.cat-detail-card-stage,
    .cat-detail-page-clean.has-custom-background.heka-settings-open
    .cat-background-stage.cat-detail-card-stage
    .cat-background-cat {
        pointer-events: none !important;
    }
}

@media (max-width: 360px) {
    .mobile-cat-primary-arc {
        gap: 0;
    }

    .mobile-cat-primary-circle-icon {
        width: 46px;
        height: 46px;
    }

    .mobile-cat-primary-circle-label {
        font-size: 8.5px;
    }

    .mobile-cat-primary-tray {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ===== Extracted: mobile-heka-ratio-like-desktop-fix ===== */
/*
   Mobile Heka scene:
   Match the desktop feeling much more closely.
   The custom background fills the page area behind the cat,
   and the visible slice is cropped at the sides instead of
   shrinking the whole scene into a small card.
*/
@media (max-width: 700px) {
    .cat-detail-page-clean.has-custom-background {
        position: relative !important;
        isolation: isolate !important;
        overflow: hidden !important;
    }

    .cat-detail-page-clean.has-custom-background::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;
        pointer-events: none !important;
        background-image: var(--cat-detail-custom-bg) !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-position: center 22% !important;
        opacity: 1 !important;
    }

    .cat-detail-page-clean.has-custom-background > .cat-title-clean,
    .cat-detail-page-clean.has-custom-background > .cat-clean-grid {
        position: relative !important;
        z-index: 2 !important;
    }

    .cat-detail-page-clean.has-custom-background
    .middle-cat-panel.clean-main-cat {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }

    .cat-detail-page-clean.has-custom-background
    .middle-cat-panel.clean-main-cat
    .cat-detail-image-wrap.has-cat-background {
        width: calc(100% + 28px) !important;
        max-width: none !important;
        margin-left: -14px !important;
        margin-right: -14px !important;
        overflow: visible !important;
        background: transparent !important;
    }

    .cat-detail-page-clean.has-custom-background
    .cat-background-stage.cat-detail-card-stage {
        width: 100% !important;
        max-width: none !important;
        height: clamp(220px, 58vw, 320px) !important;
        aspect-ratio: auto !important;
        margin: 2px 0 10px !important;
        overflow: visible !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        background-image: none !important;
    }

    .cat-detail-page-clean.has-custom-background
    .cat-background-stage.cat-detail-card-stage::after {
        display: none !important;
    }

    .cat-detail-page-clean.has-custom-background
    .cat-background-stage.cat-detail-card-stage
    .cat-background-cat {
        width: clamp(118px, 31vw, 170px) !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        left: calc(50% + var(--heka-cat-x-mobile, 0%)) !important;
        top: calc(50% + var(--heka-cat-y-mobile, 0%) + 2%) !important;
        bottom: auto !important;
        object-fit: contain !important;
        transform:
            translate(-50%, -50%)
            rotate(var(--heka-cat-rotation, 0deg))
            scaleX(var(--heka-cat-flip-x, 1))
            scale(var(--heka-cat-scale, 1)) !important;
        transform-origin: center center !important;
        filter: drop-shadow(0 8px 14px rgba(35,25,40,0.22)) !important;
        z-index: 3 !important;
    }

    .cat-detail-page-clean.has-custom-background .cat-nav-arrow {
        top: 50% !important;
        z-index: 5 !important;
    }

    /* The five mobile circles stay above the scene. */
    .cat-detail-page-clean.has-custom-background .mobile-cat-primary-actions {
        position: relative !important;
        z-index: 12 !important;
        margin-bottom: 6px !important;
    }
}


/* ===== Extracted: mobile-heka-desktop-crop-and-pastel-header-fix ===== */
/*
   Mobile Heka view:
   Keep the real desktop scene dimensions instead of shrinking the complete
   desktop background into the phone width. The phone displays a centered
   crop; the left and right edges may therefore be cut off intentionally.
*/
@media (max-width: 700px) {
    .cat-detail-page-clean.has-custom-background {
        position: relative !important;
        isolation: isolate !important;
        overflow: hidden !important;
        background: transparent !important;
    }

    .cat-detail-page-clean.has-custom-background::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        width: 1920px !important;
        max-width: none !important;
        height: 857px !important;
        max-height: none !important;
        left: 50% !important;
        right: auto !important;
        top: -140px !important;
        bottom: auto !important;
        transform: translateX(-50%) !important;
        z-index: 0 !important;
        pointer-events: none !important;
        opacity: 1 !important;
        background-image: var(--cat-detail-custom-bg) !important;
        background-size: 1920px 857px !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
        -webkit-mask-image: linear-gradient(
            to bottom,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,0.22) 5%,
            rgba(0,0,0,0.58) 11%,
            rgba(0,0,0,0.86) 16%,
            rgba(0,0,0,1) 20%,
            rgba(0,0,0,1) 66%,
            rgba(0,0,0,0.90) 80%,
            rgba(0,0,0,0.58) 92%,
            rgba(0,0,0,0) 100%
        ) !important;
        mask-image: linear-gradient(
            to bottom,
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,0.22) 5%,
            rgba(0,0,0,0.58) 11%,
            rgba(0,0,0,0.86) 16%,
            rgba(0,0,0,1) 20%,
            rgba(0,0,0,1) 66%,
            rgba(0,0,0,0.90) 80%,
            rgba(0,0,0,0.58) 92%,
            rgba(0,0,0,0) 100%
        ) !important;
    }

    .cat-detail-page-clean.has-custom-background::after {
        display: none !important;
    }

    .cat-detail-page-clean.has-custom-background > .cat-title-clean,
    .cat-detail-page-clean.has-custom-background > .cat-clean-grid {
        position: relative !important;
        z-index: 2 !important;
    }

    .cat-detail-page-clean.has-custom-background
    .middle-cat-panel.clean-main-cat,
    .cat-detail-page-clean.has-custom-background
    .cat-detail-image-wrap.has-cat-background {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .cat-detail-page-clean.has-custom-background
    .middle-cat-panel.clean-main-cat
    .cat-detail-image-wrap.has-cat-background {
        width: calc(100% + 28px) !important;
        max-width: none !important;
        margin-left: -14px !important;
        margin-right: -14px !important;
        overflow: visible !important;
    }

    /*
       The cat keeps its desktop base size of 300 px and its saved desktop
       position. This prevents it from becoming tiny on the phone.
    */
    .cat-detail-page-clean.has-custom-background
    .cat-background-stage.cat-detail-card-stage {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: 400px !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        margin: 0 0 8px !important;
        overflow: visible !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        background-image: none !important;
    }

    .cat-detail-page-clean.has-custom-background
    .cat-background-stage.cat-detail-card-stage::after {
        display: none !important;
    }

    .cat-detail-page-clean.has-custom-background
    .cat-background-stage.cat-detail-card-stage
    .cat-background-cat {
        width: 300px !important;
        height: 300px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        left: calc(50% + var(--heka-cat-x, 0px)) !important;
        top: calc(50% + var(--heka-cat-y, 0px)) !important;
        bottom: auto !important;
        object-fit: contain !important;
        transform:
            translate(-50%, -50%)
            rotate(var(--heka-cat-rotation, 0deg))
            scaleX(var(--heka-cat-flip-x, 1))
            scale(var(--heka-cat-scale, 1)) !important;
        transform-origin: center center !important;
        filter: drop-shadow(0 10px 16px rgba(35,25,40,0.23)) !important;
        z-index: 3 !important;
    }

    .cat-detail-page-clean.has-custom-background .cat-nav-arrow {
        top: 50% !important;
        z-index: 5 !important;
    }

    .cat-detail-page-clean.has-custom-background .cat-nav-arrow.left {
        left: 4px !important;
    }

    .cat-detail-page-clean.has-custom-background .cat-nav-arrow.right {
        right: 4px !important;
    }

    /*
       The logo header must not inherit the selected solid Heka page colour.
       It always keeps the normal pastel PurrPixels appearance.
    */
    body.purr-mobile-game .mobile-logo-header {
        position: relative !important;
        z-index: 120 !important;
        width: 100% !important;
        margin: 0 auto 8px !important;
        padding: 12px 0 8px !important;
        border: 1px solid rgba(216,184,238,0.48) !important;
        border-top: none !important;
        border-radius: 0 0 24px 24px !important;
        background:
            linear-gradient(
                100deg,
                rgba(255,241,250,0.98),
                rgba(244,238,255,0.98) 52%,
                rgba(238,247,255,0.98)
            ) !important;
        box-shadow: 0 7px 18px rgba(88,64,120,0.09) !important;
    }

    body.purr-mobile-game .mobile-logo-header img {
        filter:
            drop-shadow(0 7px 14px rgba(255,255,255,0.80))
            drop-shadow(0 4px 9px rgba(96,64,130,0.12)) !important;
    }

    body.purr-mobile-game #playerInfo.box {
        position: relative !important;
        z-index: 120 !important;
        background:
            linear-gradient(
                100deg,
                rgba(255,247,252,0.96),
                rgba(246,242,255,0.96),
                rgba(242,249,255,0.96)
            ) !important;
        border-color: rgba(216,184,238,0.46) !important;
    }
}


/* ===== Extracted: mobile-heka-settings-hide-action-circles-fix ===== */
@media (max-width: 700px) {
    /*
       While the Heka settings are open, the five mobile action circles
       must disappear completely so they cannot cover sliders or buttons.
    */
    .cat-detail-page-clean.heka-settings-open
    .mobile-cat-primary-actions,
    .cat-detail-page-clean.heka-settings-open
    .mobile-cat-primary-trays,
    .cat-detail-page-clean.heka-settings-open
    .mobile-cat-primary-tray {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /*
       Also move the settings above every remaining cat-page control.
    */
    .cat-detail-page-clean.heka-settings-open
    .heka-cat-settings-menu {
        z-index: 100000 !important;
    }

    .cat-detail-page-clean.heka-settings-open
    .cat-nav-arrow,
    .cat-detail-page-clean.heka-settings-open
    .cat-background-stage.cat-detail-card-stage
    .cat-background-cat {
        pointer-events: none !important;
    }
}


/* ===== Extracted: mobile-heka-settings-overlay-fix ===== */
@media (max-width: 700px) {
    /*
       No blur and no page-wide overlay.
       The normal page remains visible and scrollable behind the card.
    */
    body.heka-mobile-settings-open {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior-y: auto !important;
    }

    body.heka-mobile-settings-open::before {
        content: none !important;
        display: none !important;
        background: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /*
       The menu is portaled directly into <body>, so this z-index is no
       longer trapped by the cat page, header or resource-bar stacking context.
    */
    body > .heka-cat-settings-menu.heka-settings-portaled.show {
        display: block !important;
        position: fixed !important;
        top: max(12px, env(safe-area-inset-top, 0px)) !important;
        right: 12px !important;
        bottom: auto !important;
        left: 12px !important;

        width: auto !important;
        max-width: 520px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(
            100dvh -
            max(
                24px,
                env(safe-area-inset-top, 0px) +
                env(safe-area-inset-bottom, 0px)
            )
        ) !important;

        margin: 0 auto !important;
        padding: 13px !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;

        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        border-radius: 22px !important;
        border: 1px solid rgba(216,184,238,0.92) !important;
        background: linear-gradient(
            180deg,
            rgb(255, 250, 253),
            rgb(249, 244, 255)
        ) !important;
        box-shadow: 0 22px 52px rgba(55,39,64,0.38) !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;

        z-index: 2147483000 !important;
        isolation: isolate !important;
    }

    body > .heka-cat-settings-menu.heka-settings-portaled.show
    .heka-settings-mobile-head {
        position: sticky !important;
        top: -13px !important;
        z-index: 20 !important;

        margin: -13px -13px 10px !important;
        padding: 13px 13px 10px !important;

        background: linear-gradient(
            100deg,
            rgb(255, 244, 251),
            rgb(246, 240, 255),
            rgb(240, 248, 255)
        ) !important;
        border-radius: 21px 21px 0 0 !important;
        box-shadow: 0 5px 12px rgba(88,64,120,0.08) !important;
    }

    body > .heka-cat-settings-menu.heka-settings-portaled.show
    .heka-cat-settings-actions,
    body > .heka-cat-settings-menu.heka-settings-portaled.show
    .heka-cat-settings-panel {
        position: relative !important;
        z-index: 2 !important;
    }
}


/* ===== Extracted: mobile-action-trays-no-layout-shift-fix ===== */
@media (max-width: 700px) {
    /*
       Opening Care, Training or Sleep must not change the document height.
       The submenu floats above the cat scene instead of pushing the cat down.
    */
    .mobile-cat-primary-actions {
        position: relative !important;
        min-height: 96px !important;
        margin-bottom: 4px !important;
        overflow: visible !important;
        z-index: 120 !important;
    }

    .mobile-cat-primary-arc {
        position: relative !important;
        z-index: 3 !important;
    }

    .mobile-cat-primary-trays {
        position: absolute !important;
        top: 90px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 0 !important;
        z-index: 150 !important;
        pointer-events: none !important;
    }

    .mobile-cat-primary-tray {
        position: absolute !important;
        top: 0 !important;
        left: 4px !important;
        right: 4px !important;
        width: auto !important;
        margin: 0 !important;
        pointer-events: auto !important;
    }

    .mobile-cat-primary-tray.show {
        display: grid !important;
    }

    /*
       Keep the cat scene at the same position regardless of an opened tray.
    */
    .cat-center-stack,
    .middle-cat-panel.clean-main-cat,
    .cat-detail-image-wrap,
    .cat-background-stage.cat-detail-card-stage {
        flex-shrink: 0 !important;
    }

    /*
       The submenu should remain above the Heka scene and its arrows.
    */
    .cat-detail-page-clean.has-custom-background
    .mobile-cat-primary-actions {
        z-index: 180 !important;
    }

    .cat-detail-page-clean.has-custom-background
    .cat-background-stage.cat-detail-card-stage,
    .cat-detail-page-clean.has-custom-background
    .cat-nav-arrow {
        z-index: 5 !important;
    }
}


/* ===== Extracted: cat-show-title-class-visible-fix ===== */
.show-title-class-note {
    display: inline-flex;
    align-items: center;
    margin-top: 5px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(216,184,238,0.70);
    background: rgba(255,255,255,0.72);
    color: #7a2f58;
    font-size: 11px;
    line-height: 1.1;
    font-weight: 900;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .show-title-class-note {
        white-space: normal;
        text-align: center;
    }
}


/* ===== Extracted: desktop-heka-settings-true-overlay-fix ===== */
@media (min-width: 701px) {
    /*
       Compact floating settings card, matching the earlier dimensions.
       It remains portaled under <body>, so it still stays above everything.
    */
    body > .heka-cat-settings-menu.heka-settings-portaled.show {
        display: block !important;
        position: fixed !important;

        top: 104px !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;

        width: min(330px, calc(100vw - 32px)) !important;
        max-width: 330px !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: calc(100vh - 128px) !important;

        margin: 0 !important;
        padding: 12px !important;
        transform: translateX(-50%) !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;

        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        border-radius: 20px !important;
        border: 1px solid rgba(216,184,238,0.88) !important;
        background: linear-gradient(
            180deg,
            rgb(255,250,253),
            rgb(249,244,255)
        ) !important;
        box-shadow: 0 18px 40px rgba(55,39,64,0.28) !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;

        z-index: 2147483000 !important;
        isolation: isolate !important;
    }

    body > .heka-cat-settings-menu.heka-settings-portaled.show
    .heka-settings-mobile-head {
        display: flex !important;
        position: sticky !important;
        top: -12px !important;
        z-index: 30 !important;

        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;

        margin: -12px -12px 10px !important;
        padding: 11px 12px 9px !important;

        background: linear-gradient(
            100deg,
            rgb(255,244,251),
            rgb(246,240,255),
            rgb(240,248,255)
        ) !important;
        border-radius: 19px 19px 0 0 !important;
        border-bottom: 1px solid rgba(216,184,238,0.58) !important;
        box-shadow: 0 4px 10px rgba(88,64,120,0.07) !important;

        cursor: grab !important;
        user-select: none !important;
        touch-action: none !important;
    }

    body.heka-desktop-settings-dragging,
    body.heka-desktop-settings-dragging * {
        cursor: grabbing !important;
        user-select: none !important;
    }

    body > .heka-cat-settings-menu.heka-settings-portaled.show
    .heka-settings-mobile-head
    .heka-settings-close-button {
        cursor: pointer !important;
    }

    body > .heka-cat-settings-menu.heka-settings-portaled.show
    .heka-cat-settings-actions,
    body > .heka-cat-settings-menu.heka-settings-portaled.show
    .heka-cat-settings-panel {
        position: relative !important;
        z-index: 2 !important;
    }
}


/* ===== Extracted: heka-desktop-click-safety-fix ===== */
@media (min-width: 701px) {
    body > .heka-cat-settings-menu.heka-settings-portaled.show,
    body > .heka-cat-settings-menu.heka-settings-portaled.show * {
        pointer-events: auto !important;
    }

    body > .heka-cat-settings-menu.heka-settings-portaled.show .heka-settings-mobile-head {
        cursor: default !important;
    }

    body > .heka-cat-settings-menu.heka-settings-portaled.show .heka-settings-drag-handle {
        display: block !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        cursor: grab !important;
        user-select: none !important;
        touch-action: none !important;
    }

    body > .heka-cat-settings-menu.heka-settings-portaled.show .heka-settings-close-button,
    body > .heka-cat-settings-menu.heka-settings-portaled.show .heka-cat-settings-actions button,
    body > .heka-cat-settings-menu.heka-settings-portaled.show .heka-cat-settings-panel button,
    body > .heka-cat-settings-menu.heka-settings-portaled.show .heka-cat-settings-panel input,
    body > .heka-cat-settings-menu.heka-settings-portaled.show .heka-cat-settings-panel label {
        position: relative !important;
        z-index: 50 !important;
        pointer-events: auto !important;
    }
}


/* ===== Extracted: memory-level5-large-554-layout ===== */
/*
   Level 5 = 14 tiles.
   Desktop layout: 5 tiles / 5 tiles / 4 centered tiles.
   Only Level 5 is changed; the other Memory Event levels keep their
   existing layouts.
*/
@media (min-width: 981px) {
    .memory-board.tiles-14 {
        grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
        gap: 16px !important;
        width: 100% !important;
        max-width: 940px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        align-items: stretch !important;
    }

    .memory-board.tiles-14 > .memory-card-tile {
        grid-column: span 2;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        aspect-ratio: 1 / 1.04 !important;
    }

    /* Center the final row of four cards. */
    .memory-board.tiles-14 > .memory-card-tile:nth-child(11) {
        grid-column: 2 / span 2 !important;
    }

    .memory-board.tiles-14 > .memory-card-tile:nth-child(12) {
        grid-column: 4 / span 2 !important;
    }

    .memory-board.tiles-14 > .memory-card-tile:nth-child(13) {
        grid-column: 6 / span 2 !important;
    }

    .memory-board.tiles-14 > .memory-card-tile:nth-child(14) {
        grid-column: 8 / span 2 !important;
    }

    .memory-board.tiles-14 .memory-card-face {
        border-radius: 20px !important;
    }

    .memory-board.tiles-14 .memory-card-back span {
        font-size: 42px !important;
    }

    .memory-board.tiles-14 .memory-card-front-emoji {
        font-size: 62px !important;
    }
}


/* ===== Extracted: memory-level7-large-5553-layout ===== */
/*
   Level 7 = 18 tiles.
   Desktop layout: 5 / 5 / 5 / 3 centered.
   Level 5 keeps its existing 5 / 5 / 4 layout.
*/
@media (min-width: 981px) {
    .memory-board.tiles-18 {
        grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
        gap: 16px !important;
        width: 100% !important;
        max-width: 940px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        align-items: stretch !important;
    }

    .memory-board.tiles-18 > .memory-card-tile {
        grid-column: span 2;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        aspect-ratio: 1 / 1.04 !important;
    }

    /* Final row: 3 centered tiles */
    .memory-board.tiles-18 > .memory-card-tile:nth-child(16) {
        grid-column: 3 / span 2 !important;
    }

    .memory-board.tiles-18 > .memory-card-tile:nth-child(17) {
        grid-column: 5 / span 2 !important;
    }

    .memory-board.tiles-18 > .memory-card-tile:nth-child(18) {
        grid-column: 7 / span 2 !important;
    }

    .memory-board.tiles-18 .memory-card-face {
        border-radius: 20px !important;
    }

    .memory-board.tiles-18 .memory-card-back span {
        font-size: 42px !important;
    }

    .memory-board.tiles-18 .memory-card-front-emoji {
        font-size: 62px !important;
    }
}


/* ===== Extracted: memory-level9-large-55552-layout ===== */
/*
   Level 9 = 22 tiles.
   Desktop layout: 5 / 5 / 5 / 5 / 2 centered.
   This keeps the tiles large instead of squeezing 11 into one row.
*/
@media (min-width: 981px) {
    .memory-board.tiles-22 {
        grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
        gap: 16px !important;
        width: 100% !important;
        max-width: 940px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        align-items: stretch !important;
    }

    .memory-board.tiles-22 > .memory-card-tile {
        grid-column: span 2;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        aspect-ratio: 1 / 1.04 !important;
    }

    /* Final row: 2 centered tiles */
    .memory-board.tiles-22 > .memory-card-tile:nth-child(21) {
        grid-column: 4 / span 2 !important;
    }

    .memory-board.tiles-22 > .memory-card-tile:nth-child(22) {
        grid-column: 6 / span 2 !important;
    }

    .memory-board.tiles-22 .memory-card-face {
        border-radius: 20px !important;
    }

    .memory-board.tiles-22 .memory-card-back span {
        font-size: 42px !important;
    }

    .memory-board.tiles-22 .memory-card-front-emoji {
        font-size: 62px !important;
    }
}


/* ===== Extracted: admin-grant-custom-cat-style ===== */
.admin-grant-cat-card {
    margin-top: 18px;
}

.admin-grant-cat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.admin-grant-cat-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.admin-grant-cat-field label {
    font-weight: 900;
    color: #674f69;
}

.admin-grant-cat-field input,
.admin-grant-cat-field select {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    box-sizing: border-box;
}

.admin-grant-cat-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(216,184,238,0.62);
}

#adminGiftCatResult {
    margin-top: 12px;
}

.admin-gift-cat-success {
    padding: 12px 14px;
    border-radius: 15px;
    border: 1px solid rgba(151,205,177,0.78);
    background: rgba(238,255,246,0.88);
    color: #456a54;
    font-weight: 800;
}

.admin-gift-cat-error {
    padding: 12px 14px;
    border-radius: 15px;
    border: 1px solid rgba(225,160,180,0.78);
    background: rgba(255,241,246,0.90);
    color: #8c3f5f;
    font-weight: 800;
}

@media (max-width: 1200px) {
    .admin-grant-cat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 850px) {
    .admin-grant-cat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-grant-cat-footer {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 560px) {
    .admin-grant-cat-grid {
        grid-template-columns: 1fr;
    }
}


/* ===== Extracted: purrpixels-berlin-clock-style ===== */
.purr-berlin-clock {
    box-sizing: border-box;
    color: #604b68;
    font-variant-numeric: tabular-nums;
    user-select: none;
}

.purr-berlin-clock.desktop {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    min-width: 172px;
    padding: 8px 13px 7px;
    border: 1px solid rgba(216,184,238,0.70);
    border-radius: 17px;
    background:
        linear-gradient(
            105deg,
            rgba(255,247,252,0.92),
            rgba(244,242,255,0.92),
            rgba(240,249,255,0.92)
        );
    box-shadow: 0 4px 12px rgba(88,64,120,0.10);
    text-align: left;
    line-height: 1.05;
    pointer-events: none;
}

.purr-berlin-clock.desktop .purr-berlin-clock-label {
    margin-bottom: 3px;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8c5b87;
}

.purr-berlin-clock.desktop .purr-berlin-clock-time {
    font-size: 20px;
    font-weight: 950;
    letter-spacing: 0.02em;
    color: #713156;
}

.purr-berlin-clock.desktop .purr-berlin-clock-date {
    margin-top: 3px;
    font-size: 9px;
    font-weight: 800;
    color: #796b80;
}

.purr-berlin-clock.mobile {
    display: none;
}

@media (max-width: 1250px) and (min-width: 701px) {
    .purr-berlin-clock.desktop {
        min-width: 132px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .purr-berlin-clock.desktop .purr-berlin-clock-date {
        display: none;
    }

    .purr-berlin-clock.desktop .purr-berlin-clock-time {
        font-size: 17px;
    }
}

@media (max-width: 700px) {
    .purr-berlin-clock.desktop {
        display: none !important;
    }

    body.purr-mobile-game .mobile-logo-header {
        position: relative !important;
    }

    body.purr-mobile-game .purr-berlin-clock.mobile {
        display: block !important;
        position: absolute !important;
        left: 7px !important;
        top: 7px !important;
        z-index: 25 !important;
        min-width: 61px;
        padding: 5px 7px;
        border: 1px solid rgba(216,184,238,0.62);
        border-radius: 12px;
        background: rgba(255,250,253,0.88);
        box-shadow: 0 3px 9px rgba(88,64,120,0.08);
        text-align: center;
        line-height: 1.05;
        pointer-events: none;
    }

    body.purr-mobile-game .purr-berlin-clock.mobile .purr-berlin-clock-label {
        margin-bottom: 2px;
        font-size: 6.5px;
        font-weight: 950;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: #8c5b87;
    }

    body.purr-mobile-game .purr-berlin-clock.mobile .purr-berlin-clock-time {
        font-size: 11px;
        font-weight: 950;
        color: #713156;
        font-variant-numeric: tabular-nums;
    }
}


/* ===== Extracted: cats-in-need-month-card-redesign ===== */
.cats-need-month-list {
    display: grid;
    gap: 14px;
}

.cats-need-month-card {
    position: relative;
    overflow: hidden;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(216,184,238,0.62);
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(229,244,255,0.82),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,0.92),
            rgba(255,244,251,0.90),
            rgba(244,242,255,0.88)
        );
    box-shadow: 0 8px 20px rgba(88,64,120,0.09);
}

.cats-need-month-card::after {
    content: "♥";
    position: absolute;
    right: -5px;
    bottom: -25px;
    font-size: 78px;
    line-height: 1;
    color: rgba(217,181,225,0.12);
    pointer-events: none;
}

.cats-need-month-card-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.cats-need-month-card-label {
    display: block;
    margin-bottom: 3px;
    color: #927b95;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cats-need-month-card-month {
    color: #684b5d;
    font-size: 21px;
    font-weight: 950;
    line-height: 1.08;
}

.cats-need-month-card-key {
    margin-top: 4px;
    color: #98899b;
    font-size: 11px;
    font-weight: 800;
}

.cats-need-month-card-stats {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 9px;
    margin-top: 13px;
}

.cats-need-month-card-stat {
    padding: 10px 11px;
    border-radius: 14px;
    border: 1px solid rgba(216,184,238,0.48);
    background: rgba(255,255,255,0.68);
}

.cats-need-month-card-stat span {
    display: block;
    margin-bottom: 3px;
    color: #8a758e;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.cats-need-month-card-stat strong {
    display: block;
    color: #63566b;
    font-size: 17px;
    font-weight: 950;
}

.cats-need-month-card-stat.primary strong {
    color: #7a2f58;
    font-size: 21px;
}

.cats-need-month-card-recipient {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 10px;
    padding: 11px;
    border-radius: 14px;
    background: rgba(247,251,255,0.68);
    border: 1px solid rgba(191,218,235,0.50);
}

.cats-need-month-card-recipient strong {
    color: #62586a;
    font-size: 13px;
    line-height: 1.35;
}

.cats-need-month-card-date,
.cats-need-month-card-note {
    color: #85788a;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.35;
}

.cats-need-month-card-proof {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: fit-content;
    margin-top: 10px;
    padding: 8px 11px;
    border-radius: 999px;
    border: 1px solid rgba(216,184,238,0.68);
    background: rgba(255,255,255,0.78);
    color: #7a2f58;
    font-size: 11px;
    font-weight: 950;
    text-decoration: none;
}

.cats-need-month-card-proof:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(88,64,120,0.10);
}

@media (max-width: 560px) {
    .cats-need-month-card-stats {
        grid-template-columns: 1fr;
    }
}


/* ===== Extracted: admin-cats-in-need-visibility-style ===== */
.admin-cats-need-archive-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
    align-items: stretch;
}

.admin-cats-need-archive-entry.is-hidden {
    opacity: 0.72;
}

.admin-cats-need-archive-entry.is-hidden
.admin-cats-need-archive-row {
    border-style: dashed;
}

.admin-cats-need-visibility-button {
    min-width: 145px;
    padding: 9px 12px;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 950;
    line-height: 1.25;
}

.admin-cats-need-visibility-button.remove {
    color: #8f3657;
    border-color: rgba(220,145,170,0.72);
    background: rgba(255,240,246,0.90);
}

.admin-cats-need-visibility-button.restore {
    color: #47735c;
    border-color: rgba(143,199,169,0.72);
    background: rgba(239,255,246,0.92);
}

.admin-cats-need-hidden-badge {
    display: inline-flex;
    width: fit-content;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(236,232,240,0.95);
    border: 1px dashed rgba(137,119,145,0.70);
    color: #716477;
    font-size: 11px;
    font-weight: 950;
}

@media (max-width: 760px) {
    .admin-cats-need-archive-entry {
        grid-template-columns: 1fr;
    }

    .admin-cats-need-visibility-button {
        width: 100%;
    }
}


/* ===== Extracted: purrpixels-support-page-style ===== */
.support-page-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    gap: 18px;
    align-items: start;
}

.support-info-card,
.support-form-card {
    border: 1px solid rgba(216,184,238,0.72);
    border-radius: 24px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.91),
            rgba(255,244,251,0.90),
            rgba(241,246,255,0.90)
        );
    box-shadow: 0 10px 28px rgba(93,68,116,0.08);
}

.support-info-card {
    padding: 22px;
}

.support-form-card {
    padding: 24px;
}

.support-language-switch {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    margin-bottom: 12px;
}

.support-language-switch button {
    min-width: 48px;
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid rgba(194,165,220,0.78);
    background: rgba(255,255,255,0.80);
    color: #6b526f;
    font-weight: 900;
    cursor: pointer;
}

.support-language-switch button.active {
    background: linear-gradient(135deg, #f4d8ee, #e7e7ff);
    color: #7a2d59;
    box-shadow: 0 4px 12px rgba(103,71,128,0.10);
}

.support-card-kicker {
    margin-bottom: 7px;
    color: #9b5b8d;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.support-info-title {
    margin-bottom: 10px;
    color: #654f68;
    font-size: 24px;
    font-weight: 950;
}

.support-info-text {
    color: #6e6572;
    font-size: 14px;
    line-height: 1.55;
}

.support-category-preview {
    display: grid;
    gap: 8px;
    margin-top: 18px;
}

.support-category-preview-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(216,184,238,0.52);
    border-radius: 15px;
    background: rgba(255,255,255,0.63);
    color: #65596a;
    font-size: 13px;
    font-weight: 850;
}

.support-category-preview-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    border-radius: 10px;
    background: linear-gradient(135deg, #fff0f7, #eef5ff);
}

.support-security-note {
    margin-top: 18px;
    padding: 12px 13px;
    border-radius: 15px;
    border: 1px solid rgba(240,190,205,0.70);
    background: rgba(255,244,247,0.76);
    color: #7b5b66;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.45;
}

.support-form-title {
    color: #604c64;
    font-size: 23px;
    font-weight: 950;
    margin-bottom: 4px;
}

.support-form-subtitle {
    color: #817486;
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 18px;
}

.support-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.support-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.support-form-field.full {
    grid-column: 1 / -1;
}

.support-form-field label {
    color: #684f68;
    font-size: 13px;
    font-weight: 900;
}

.support-form-field input,
.support-form-field select,
.support-form-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(204,174,230,0.80);
    border-radius: 14px;
    background: rgba(247,250,255,0.90);
    color: #584f60;
    font: inherit;
    outline: none;
    transition: 0.15s ease;
}

.support-form-field input,
.support-form-field select {
    min-height: 44px;
    padding: 10px 12px;
}

.support-form-field textarea {
    min-height: 220px;
    padding: 12px;
    resize: vertical;
    line-height: 1.5;
}

.support-form-field input:focus,
.support-form-field select:focus,
.support-form-field textarea:focus {
    border-color: rgba(173,129,214,0.92);
    box-shadow: 0 0 0 3px rgba(219,193,241,0.24);
}

.support-form-field input[readonly] {
    opacity: 0.78;
    cursor: default;
}

.support-required-note {
    margin-top: 12px;
    color: #8a7e8d;
    font-size: 11px;
    font-style: italic;
}

.support-submit-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}

.support-submit-button {
    min-width: 180px;
    padding: 11px 22px;
    border-radius: 999px;
    border: 1px solid rgba(194,151,214,0.85);
    background: linear-gradient(135deg, #f5dce9, #e8e7ff);
    color: #713355;
    font-size: 14px;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(108,77,130,0.10);
}

.support-submit-button:disabled {
    opacity: 0.55;
    cursor: wait;
}

.support-result {
    margin-top: 14px;
}

.support-result-success,
.support-result-error {
    padding: 12px 14px;
    border-radius: 15px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
}

.support-result-success {
    border: 1px solid rgba(148,202,171,0.72);
    background: rgba(239,255,246,0.88);
    color: #456a54;
}

.support-result-error {
    border: 1px solid rgba(224,158,180,0.72);
    background: rgba(255,241,246,0.90);
    color: #8a3e5d;
}

.support-ticket-reference {
    display: inline-block;
    margin-top: 5px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.72);
    font-weight: 950;
}

@media (max-width: 850px) {
    .support-page-shell {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .support-info-card,
    .support-form-card {
        padding: 16px;
        border-radius: 19px;
    }

    .support-form-grid {
        grid-template-columns: 1fr;
    }

    .support-form-field.full {
        grid-column: auto;
    }

    .support-form-field textarea {
        min-height: 180px;
    }

    .support-submit-row {
        display: block;
    }

    .support-submit-button {
        width: 100%;
    }
}


/* ===== Extracted: purrpixels-support-staff-entry-style ===== */
.support-staff-entry {
    display: flex;
    justify-content: center;
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px solid rgba(216,184,238,0.45);
}

.support-staff-entry-button {
    border: 0;
    background: transparent;
    color: #8a718e;
    font-size: 11px;
    font-weight: 850;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    opacity: 0.82;
}

.support-staff-entry-button:hover {
    opacity: 1;
    color: #76375b;
}


/* ===== Extracted: purrpixels-admin-support-inbox-style ===== */
.admin-support-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.admin-support-stat {
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(216,184,238,0.68);
    background: linear-gradient(145deg, rgba(255,255,255,0.88), rgba(249,241,255,0.88));
}

.admin-support-stat span {
    display: block;
    margin-bottom: 4px;
    color: #88768c;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.admin-support-stat b {
    color: #6f3558;
    font-size: 24px;
    font-weight: 950;
}

.admin-support-toolbar {
    margin-bottom: 14px;
}

.admin-support-filter-grid {
    display: grid;
    grid-template-columns: minmax(150px,0.7fr) minmax(150px,0.7fr) minmax(220px,1.4fr) auto;
    gap: 10px;
}

.admin-support-layout {
    display: grid;
    grid-template-columns: minmax(330px,0.78fr) minmax(0,1.22fr);
    gap: 14px;
    align-items: start;
}

.admin-support-ticket-list {
    display: grid;
    gap: 9px;
}

.admin-support-ticket-row {
    width: 100%;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 10px;
    text-align: left;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(216,184,238,0.58);
    background: rgba(255,255,255,0.69);
    color: #625868;
    cursor: pointer;
}

.admin-support-ticket-row:hover,
.admin-support-ticket-row.active {
    border-color: rgba(184,135,216,0.86);
    background: rgba(255,245,252,0.92);
    box-shadow: 0 5px 15px rgba(89,65,113,0.08);
}

.admin-support-ticket-ref {
    color: #8b4770;
    font-size: 11px;
    font-weight: 950;
}

.admin-support-ticket-title {
    margin: 4px 0;
    color: #5f5162;
    font-size: 14px;
    font-weight: 950;
    line-height: 1.28;
    overflow-wrap: anywhere;
}

.admin-support-ticket-meta {
    color: #8a7b8d;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.4;
}

.admin-support-status {
    display: inline-flex;
    align-items: center;
    height: fit-content;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 950;
    white-space: nowrap;
}

.admin-support-status.open {
    background: rgba(255,230,238,0.95);
    color: #984967;
}

.admin-support-status.in_progress {
    background: rgba(255,244,211,0.95);
    color: #8c6b29;
}

.admin-support-status.answered {
    background: rgba(226,242,255,0.95);
    color: #4c6f88;
}

.admin-support-status.closed {
    background: rgba(234,246,238,0.95);
    color: #4f765d;
}

.admin-support-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.admin-support-detail-reference {
    color: #98577c;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.05em;
}

.admin-support-detail-title {
    margin-top: 4px;
    color: #5e4c61;
    font-size: 22px;
    font-weight: 950;
    line-height: 1.15;
}

.admin-support-info-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.admin-support-info {
    padding: 9px 10px;
    border-radius: 13px;
    background: rgba(248,247,253,0.85);
    border: 1px solid rgba(216,184,238,0.46);
}

.admin-support-info span {
    display: block;
    color: #917e94;
    font-size: 9px;
    font-weight: 950;
    text-transform: uppercase;
}

.admin-support-info b {
    display: block;
    margin-top: 3px;
    color: #635667;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.admin-support-original,
.admin-support-message {
    padding: 13px;
    border-radius: 16px;
    border: 1px solid rgba(216,184,238,0.56);
    background: rgba(255,255,255,0.72);
}

.admin-support-original {
    margin-bottom: 12px;
}

.admin-support-block-title {
    margin-bottom: 7px;
    color: #73546c;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.admin-support-message-text,
.admin-support-original-text {
    color: #615763;
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.admin-support-conversation {
    display: grid;
    gap: 9px;
    margin: 10px 0 14px;
}

.admin-support-message.admin {
    border-left: 4px solid rgba(174,130,205,0.72);
}

.admin-support-message.internal {
    border-color: rgba(230,192,105,0.76);
    background: rgba(255,249,225,0.78);
}

.admin-support-message-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    color: #8b7b8e;
    font-size: 10px;
    font-weight: 850;
}

.admin-support-actions {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 9px;
    margin-bottom: 12px;
}

.admin-support-compose {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.admin-support-compose textarea {
    width: 100%;
    min-height: 110px;
    box-sizing: border-box;
    padding: 11px;
    border: 1px solid rgba(204,174,230,0.78);
    border-radius: 14px;
    resize: vertical;
    font: inherit;
}

.admin-support-compose-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-support-note-hint {
    color: #8b7e8e;
    font-size: 10px;
    font-weight: 750;
    line-height: 1.4;
}

.admin-support-delete {
    margin-left: auto;
    border-color: rgba(219,151,173,0.78) !important;
    background: rgba(255,239,245,0.88) !important;
    color: #90415f !important;
}

@media (max-width: 1050px) {
    .admin-support-layout {
        grid-template-columns: 1fr;
    }

    .admin-support-filter-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width: 650px) {
    .admin-support-stats {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .admin-support-filter-grid,
    .admin-support-info-grid,
    .admin-support-actions {
        grid-template-columns: 1fr;
    }

    .admin-support-compose-buttons {
        display: grid;
        grid-template-columns: 1fr;
    }

    .admin-support-delete {
        margin-left: 0;
    }
}


/* ===== Extracted: breeding-compact-smaller-typography-final ===== */
/* Compact Breeding panel: smaller text for a calmer mobile layout */

.breeding-compact-panel .breeding-compact-title {
    font-size: 18px !important;
    line-height: 1.1 !important;
}

.breeding-compact-panel .breeding-compact-subtitle {
    font-size: 11px !important;
    line-height: 1.2 !important;
    margin-top: 2px !important;
}

.breeding-compact-panel .breeding-compact-badge {
    font-size: 10.5px !important;
    min-width: 58px !important;
    padding: 5px 9px !important;
}

.breeding-compact-panel .breeding-status-mini-label {
    font-size: 9px !important;
    line-height: 1.05 !important;
}

.breeding-compact-panel .breeding-status-mini strong {
    font-size: 10.5px !important;
    line-height: 1.15 !important;
}

.breeding-compact-panel .breeding-action-title {
    font-size: 12px !important;
    line-height: 1.1 !important;
}

.breeding-compact-panel .breeding-action-note {
    font-size: 9.5px !important;
    line-height: 1.15 !important;
}

.breeding-compact-panel .breeding-more-button {
    font-size: 11px !important;
    padding: 8px 11px !important;
}

.breeding-compact-panel .breeding-pregnancy-line {
    font-size: 10.5px !important;
}

@media (max-width: 560px) {
    .breeding-compact-panel .breeding-compact-summary {
        min-height: 62px !important;
        padding: 9px 12px !important;
    }

    .breeding-compact-panel .breeding-compact-body {
        padding: 10px 11px 12px !important;
    }

    .breeding-compact-panel .breeding-status-mini {
        min-height: 52px !important;
        padding: 7px 8px !important;
    }

    .breeding-compact-panel .breeding-action-card.breeding-action-pill {
        min-height: 54px !important;
        padding: 7px 8px !important;
        grid-template-columns: 34px 1fr !important;
        gap: 7px !important;
    }

    .breeding-compact-panel .breeding-action-card.breeding-action-pill img {
        width: 34px !important;
        height: 34px !important;
    }

    .breeding-compact-panel .breeding-compact-chevron {
        width: 27px !important;
        height: 27px !important;
        font-size: 17px !important;
    }
}


/* ===== Extracted: purrpixels-mycats-ranking-compact-final ===== */
/* =========================================================
   My Cats + Cat Ranking
   Desktop sections intentionally narrower and more compact.
   Mobile keeps its existing dedicated layout.
   ========================================================= */

@media (min-width: 851px) {
    .my-cats-page {
        max-width: 1080px !important;
    }

    .my-cats-page .my-cats-hero {
        grid-template-columns: minmax(0, 1fr) 110px !important;
        gap: 14px !important;
        padding: 15px 18px !important;
        border-radius: 20px !important;
        margin-bottom: 12px !important;
    }

    .my-cats-page .my-cats-kicker {
        font-size: 13px !important;
        margin-bottom: 3px !important;
    }

    .my-cats-page .my-cats-title {
        font-size: 29px !important;
        line-height: 1.08 !important;
        margin-bottom: 5px !important;
    }

    .my-cats-page .my-cats-subtitle {
        max-width: 720px !important;
        font-size: 13px !important;
        line-height: 1.38 !important;
    }

    .my-cats-page .my-cats-hero-icon {
        width: 92px !important;
        height: 92px !important;
        border-radius: 24px !important;
    }

    .my-cats-page .my-cats-hero-icon-img {
        width: 78px !important;
        height: 78px !important;
    }

    .my-cats-page .my-cats-stats {
        gap: 10px !important;
        margin-bottom: 13px !important;
    }

    .my-cats-page .my-cats-stat-card {
        padding: 9px 10px !important;
        border-radius: 15px !important;
    }

    .my-cats-page .my-cats-stat-value {
        font-size: 23px !important;
    }

    .my-cats-page .my-cats-stat-label {
        font-size: 11px !important;
        margin-top: 2px !important;
    }

    .cat-ranking-page {
        max-width: 1040px !important;
    }

    .cat-ranking-page .achievements-hero {
        grid-template-columns: minmax(0, 1fr) 86px !important;
        gap: 14px !important;
        padding: 15px 18px !important;
        border-radius: 20px !important;
        margin-bottom: 11px !important;
    }

    .cat-ranking-page .achievements-kicker {
        font-size: 12px !important;
        margin-bottom: 2px !important;
    }

    .cat-ranking-page .achievements-title {
        font-size: 28px !important;
        line-height: 1.08 !important;
        margin-bottom: 4px !important;
    }

    .cat-ranking-page .achievements-subtitle {
        font-size: 13px !important;
        line-height: 1.38 !important;
    }

    .cat-ranking-page .achievements-icon {
        width: 76px !important;
        height: 76px !important;
        border-radius: 20px !important;
    }

    .cat-ranking-page .achievements-icon-img {
        width: 68px !important;
        height: 68px !important;
        object-fit: contain !important;
    }

    .cat-ranking-page .achievements-button-grid {
        gap: 9px !important;
        margin-bottom: 11px !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .cat-ranking-page .achievement-big-button {
        min-height: 55px !important;
        padding: 8px 10px !important;
        border-radius: 15px !important;
        font-size: 13px !important;
    }

    .cat-ranking-page .cat-ranking-controls {
        padding: 11px 13px !important;
        border-radius: 17px !important;
        margin-bottom: 12px !important;
    }

    .cat-ranking-page .cat-ranking-control-row {
        grid-template-columns: 160px minmax(0, 1fr) !important;
        gap: 10px !important;
        margin-bottom: 9px !important;
    }

    .cat-ranking-page .cat-ranking-control-row label {
        font-size: 13px !important;
    }

    .cat-ranking-page .cat-ranking-control-row select {
        padding: 7px 9px !important;
        font-size: 13px !important;
    }

    .cat-ranking-page .cat-ranking-tabs {
        gap: 6px !important;
    }

    .cat-ranking-page .cat-ranking-tab {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }

    .cat-ranking-page .cat-ranking-big-title {
        padding: 10px 12px !important;
        font-size: 19px !important;
    }

    .cat-ranking-page .cat-ranking-table-head,
    .cat-ranking-page .cat-ranking-table-row {
        padding-top: 9px !important;
        padding-bottom: 9px !important;
    }
}


/* ===== Extracted: purrpixels-visible-phenotype-filter-style ===== */
.phenotype-pattern-field {
    margin-top: 12px;
}

.phenotype-pattern-help {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin: 6px 0 8px;
    color: #837486;
    font-size: 11px;
    line-height: 1.35;
}

.phenotype-pattern-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.phenotype-pattern-toggle {
    min-height: 38px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-radius: 12px;
    padding: 7px 10px;
    background: rgba(255,255,255,0.74);
    border: 1px solid rgba(216,184,238,0.72);
    color: #66586b;
    font-size: 12px;
    font-weight: 850;
}

.phenotype-pattern-toggle.neutral {
    opacity: 0.82;
}

.phenotype-pattern-toggle.include {
    background: rgba(231,250,238,0.92);
    border-color: rgba(143,199,163,0.86);
    color: #476b54;
}

.phenotype-pattern-toggle.exclude {
    background: rgba(255,238,244,0.94);
    border-color: rgba(221,154,179,0.86);
    color: #8d4560;
}

.phenotype-pattern-mark {
    width: 22px;
    min-width: 22px;
    text-align: center;
    font-size: 18px;
    line-height: 1;
}

.phenotype-filter-note {
    margin-top: 10px;
    line-height: 1.4;
}

@media (max-width: 620px) {
    .phenotype-pattern-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ===== Extracted: purrpixels-diamond-shop-refined-style ===== */
@media (min-width: 851px) {
    .diamond-shop-refined {
        max-width: 1220px !important;
        margin-top: 14px !important;
    }

    .diamond-shop-hero-refined {
        grid-template-columns: minmax(0, 1fr) 108px !important;
        padding: 18px 22px !important;
        min-height: 0 !important;
        border-radius: 22px !important;
    }

    .diamond-shop-refined .currency-shop-title {
        font-size: 31px !important;
        margin-bottom: 5px !important;
    }

    .diamond-shop-refined .currency-shop-subtitle {
        max-width: 760px !important;
        font-size: 13px !important;
        line-height: 1.42 !important;
    }

    .diamond-shop-hero-icon-refined {
        width: 94px !important;
        height: 94px !important;
        border-radius: 25px !important;
    }

    .diamond-shop-hero-icon-refined img {
        width: 67px !important;
        height: 67px !important;
    }

    .diamond-shop-grid-refined {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
}

.diamond-shop-status-pill {
    display: inline-flex;
    align-items: center;
    margin-top: 11px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(205,178,231,0.74);
    background: rgba(255,255,255,0.66);
    color: #8a4e79;
    font-size: 11px;
    font-weight: 900;
}

.diamond-shop-beta-note {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 11px;
    align-items: center;
    padding: 11px 14px !important;
}

.diamond-shop-note-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255,255,255,0.72);
    font-size: 19px;
}

.diamond-shop-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 12px;
    margin-bottom: 10px;
}

.diamond-shop-refined .currency-shop-section-title {
    font-size: 22px !important;
    margin-bottom: 2px !important;
}

.diamond-shop-section-subtitle {
    color: #786c7d;
    font-size: 12px;
    font-weight: 700;
}

.diamond-pack-card {
    position: relative;
    border-radius: 19px !important;
}

.diamond-pack-card.recommended {
    border-color: rgba(190,143,220,0.88) !important;
    box-shadow: 0 10px 24px rgba(107,74,131,0.12) !important;
}

.diamond-pack-card.ultimate {
    border-color: rgba(222,170,195,0.88) !important;
}

.diamond-pack-top-refined {
    min-height: 112px !important;
}

.diamond-pack-icon-refined {
    width: 70px !important;
    height: 70px !important;
}

.diamond-pack-card .currency-pack-badge {
    top: 9px !important;
    right: 9px !important;
    padding: 4px 8px !important;
    font-size: 10px !important;
}

.diamond-value-badge {
    position: absolute;
    left: 9px;
    top: 9px;
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(239,252,244,0.94);
    border: 1px solid rgba(144,199,163,0.76);
    color: #4d765a;
    font-size: 9px;
    font-weight: 950;
}

.diamond-pack-body-refined {
    padding: 13px !important;
}

.diamond-pack-body-refined .currency-pack-name {
    font-size: 17px !important;
    margin-bottom: 3px !important;
}

.diamond-pack-price-main {
    margin-bottom: 10px;
    color: #684b5d;
    font-size: 24px;
    font-weight: 950;
}

.diamond-pack-info-refined {
    gap: 5px !important;
    margin-bottom: 11px !important;
}

.diamond-pack-info-refined div {
    font-size: 10.5px !important;
    padding-bottom: 5px !important;
}

.diamond-buy-button {
    padding: 8px 10px !important;
    font-size: 11px !important;
}

.diamond-gift-code-section {
    margin-top: 18px !important;
}

.gift-code-card {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) minmax(300px, 0.9fr);
    gap: 15px;
    align-items: center;
    padding: 16px 18px;
    border: 1px solid rgba(218,188,238,0.78);
    border-radius: 20px;
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.88),
        rgba(248,240,255,0.78),
        rgba(255,241,248,0.76)
    );
    box-shadow: 0 7px 17px rgba(86,58,112,0.07);
}

.gift-code-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(218,188,238,0.68);
    font-size: 29px;
}

.gift-code-copy {
    display: grid;
    gap: 4px;
}

.gift-code-copy b {
    color: #684b5d;
    font-size: 14px;
}

.gift-code-copy span {
    color: #746b78;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 700;
}

.gift-code-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.gift-code-form input {
    min-width: 0;
    padding: 10px 12px !important;
    border-radius: 13px !important;
    text-transform: uppercase;
    font-weight: 850;
}

.gift-code-form button {
    white-space: nowrap;
    padding: 9px 13px;
    border-radius: 13px;
    font-weight: 900;
}

@media (max-width: 1050px) and (min-width: 851px) {
    .diamond-shop-grid-refined {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 850px) {
    .diamond-shop-refined {
        margin: 10px 8px 70px !important;
    }

    .diamond-shop-grid-refined {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    .gift-code-card {
        grid-template-columns: 50px minmax(0, 1fr);
        padding: 13px;
    }

    .gift-code-icon {
        width: 46px;
        height: 46px;
        font-size: 24px;
    }

    .gift-code-form {
        grid-column: 1 / -1;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 470px) {
    .diamond-shop-grid-refined {
        grid-template-columns: 1fr !important;
    }
}


/* ===== Extracted: purrpixels-news-discord-style ===== */
.purrpixels-news-discord-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 15px;
    border-radius: 999px;
    border: 1px solid rgba(200, 166, 229, 0.9);
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.92),
        rgba(247,235,255,0.94)
    );
    color: #7b3f68 !important;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 5px 14px rgba(103, 72, 126, 0.08);
}

.purrpixels-news-discord-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 17px rgba(103, 72, 126, 0.12);
}


/* ===== Extracted: purrpixels-pagination-market-filter-style ===== */
.market-visible-appearance-top {
    margin: 12px 0 10px;
    padding: 13px 14px;
    border: 1px solid rgba(216,184,238,0.72);
    border-radius: 17px;
    background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(249,241,255,0.72));
}

.market-visible-appearance-title {
    margin-bottom: 9px;
    color: #7a2f5c;
    font-size: 14px;
    font-weight: 950;
}

.market-visible-appearance-hint,
.market-price-filter-hint {
    margin-top: 7px;
    color: #817486;
    font-size: 10px;
    line-height: 1.4;
    font-weight: 700;
}

.market-visible-appearance-top .market-genetics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.market-price-single-filter {
    display: grid;
    grid-template-columns: minmax(130px, 0.9fr) minmax(85px, 1fr) minmax(85px, 1fr);
    gap: 8px;
    align-items: end;
}

.market-price-single-filter input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.purr-pagination-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    margin: 15px 0 5px;
    padding: 10px 8px;
}

.purr-pagination-summary {
    color: #847687;
    font-size: 10.5px;
    font-weight: 750;
}

.purr-pagination-pages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.purr-pagination-button {
    min-width: 32px;
    height: 32px;
    padding: 0 9px;
    border-radius: 10px;
    border: 1px solid rgba(207,176,230,0.78);
    background: rgba(255,255,255,0.82);
    color: #705b75;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}

.purr-pagination-button.active {
    background: linear-gradient(135deg, #f6e9ff, #ffeaf4);
    border-color: rgba(179,128,212,0.9);
    color: #7b315d;
}

.purr-pagination-gap {
    display: inline-flex;
    align-items: center;
    min-width: 24px;
    justify-content: center;
    color: #948699;
    font-size: 11px;
    font-weight: 900;
}

.player-ranking-pagination {
    margin-top: 9px;
    border-top: 1px solid rgba(222,205,231,0.54);
}

@media (max-width: 720px) {
    .market-visible-appearance-top .market-genetics-grid,
    .market-price-single-filter {
        grid-template-columns: 1fr;
    }
}


/* ===== Extracted: my-cats-breeding-program-style ===== */
.my-cats-program-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}
.my-cats-program-add {
    min-width: 56px;
    height: 48px;
    border: 1px solid rgba(209, 182, 232, 0.95);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(248,236,255,0.92));
    color: #7a4f78;
    font-size: 28px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(118, 79, 120, 0.08);
}
.my-cats-program-limit-note {
    margin: -4px 0 18px;
    color: #796675;
    font-size: 13px;
    font-weight: 800;
}

.my-cats-select-toggle {
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid rgba(209, 182, 232, 0.95);
    border-radius: 18px;
    background: rgba(255,255,255,0.88);
    color: #704f70;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 7px 16px rgba(118, 79, 120, 0.07);
}

.my-cats-select-toggle.active {
    background: linear-gradient(135deg, rgba(241,232,255,0.98), rgba(255,239,249,0.98));
    color: #8b315f;
    border-color: rgba(194, 155, 224, 0.96);
}

.my-cats-bulk-toolbar {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto;
    gap: 12px 18px;
    align-items: center;
    margin: 0 0 18px;
    padding: 13px 15px;
    border: 1px solid rgba(210, 181, 233, 0.82);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255,248,253,0.94), rgba(242,246,255,0.94));
    box-shadow: 0 9px 22px rgba(96, 65, 111, 0.08);
}

.my-cats-bulk-summary {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.my-cats-bulk-summary strong {
    color: #7f315d;
    font-size: 14px;
    font-weight: 950;
}

.my-cats-bulk-summary span {
    color: #776a79;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.35;
}

.my-cats-bulk-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.my-cats-bulk-actions button,
.my-cats-bulk-actions select {
    min-height: 38px;
    border: 1px solid rgba(210, 181, 233, 0.88);
    border-radius: 12px;
    background: rgba(255,255,255,0.93);
    color: #644f68;
    font-size: 12px;
    font-weight: 850;
    padding: 7px 11px;
}

.my-cats-bulk-actions select {
    min-width: 190px;
    max-width: 280px;
}

.my-cats-bulk-actions button {
    cursor: pointer;
}

.my-cats-bulk-actions button:disabled,
.my-cats-bulk-actions select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.my-cats-bulk-move {
    background: linear-gradient(135deg, rgba(238,229,255,0.98), rgba(255,235,247,0.98)) !important;
    color: #7f315d !important;
}

.my-cats-bulk-error {
    grid-column: 1 / -1;
    color: #a03d59;
    font-size: 11px;
    font-weight: 850;
}

.my-cats-page .my-cat-card-new.selection-mode {
    cursor: pointer !important;
}

.my-cats-page .my-cat-card-new.selection-mode:hover {
    transform: translateY(-1px);
}

.my-cats-page .my-cat-card-new.selected-for-bulk {
    border: 2px solid rgba(169, 112, 211, 0.95) !important;
    box-shadow:
        0 0 0 3px rgba(226, 207, 243, 0.62),
        0 10px 24px rgba(96, 65, 111, 0.12) !important;
    background: linear-gradient(180deg, rgba(251,246,255,0.97), rgba(255,242,250,0.92)) !important;
}

.my-cat-selection-marker {
    position: absolute;
    z-index: 8;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 2px solid rgba(176, 135, 207, 0.82);
    background: rgba(255,255,255,0.95);
    color: #81365f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 950;
    box-shadow: 0 5px 12px rgba(91, 62, 104, 0.12);
    pointer-events: none;
}

.my-cat-card-new.selected-for-bulk .my-cat-selection-marker {
    background: linear-gradient(135deg, #efe5ff, #ffe8f5);
    border-color: rgba(150, 91, 191, 0.96);
}

.my-cat-program {
    margin-top: 6px;
    color: #7c6478;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}
.profile-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(64, 39, 69, 0.42);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
.profile-modal-card {
    width: min(560px, 100%);
    background: linear-gradient(180deg, rgba(251,245,255,0.98), rgba(255,248,253,0.98));
    border: 1px solid rgba(216, 191, 235, 0.92);
    border-radius: 24px;
    box-shadow: 0 22px 54px rgba(82, 52, 88, 0.22);
    padding: 22px;
}
.profile-modal-title {
    color: #7b3f67;
    font-size: 32px;
    font-weight: 950;
    line-height: 1.1;
}
.profile-modal-subtitle {
    color: #6f6576;
    font-size: 14px;
    font-weight: 800;
    margin-top: 6px;
    margin-bottom: 18px;
}
.profile-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.profile-modal-grid.single {
    grid-template-columns: 1fr;
}
.profile-modal-grid .full-width {
    grid-column: 1 / -1;
}
.profile-modal-grid label {
    display: block;
    margin-bottom: 6px;
    color: #7b4168;
    font-weight: 900;
}
.profile-modal-grid input,
.profile-modal-grid select {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 13px;
    border-radius: 15px;
    border: 1px solid rgba(210, 184, 232, 0.95);
    background: rgba(244, 248, 255, 0.9);
    color: #5d4c61;
    font-size: 15px;
    font-weight: 700;
}
.profile-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}
.profile-modal-actions button {
    border: 1px solid rgba(210, 184, 232, 0.95);
    border-radius: 999px;
    background: rgba(255,255,255,0.95);
    color: #70486c;
    font-size: 15px;
    font-weight: 900;
    padding: 10px 18px;
    cursor: pointer;
}
.profile-modal-actions button.primary {
    background: linear-gradient(135deg, rgba(241, 232, 255, 0.98), rgba(255, 241, 251, 0.98));
}
@media (max-width: 760px) {
    .my-cats-program-tabs {
        gap: 10px;
    }
    .my-cats-program-add {
        width: 48px;
        min-width: 48px;
        height: 44px;
        font-size: 24px;
    }
    .my-cats-select-toggle {
        min-height: 44px;
        padding: 0 13px;
        font-size: 12px;
    }

    .my-cats-bulk-toolbar {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px;
    }

    .my-cats-bulk-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .my-cats-bulk-actions select,
    .my-cats-bulk-move {
        grid-column: 1 / -1;
        width: 100%;
        max-width: none;
    }
    .profile-modal-card {
        padding: 18px;
        border-radius: 20px;
    }
    .profile-modal-title {
        font-size: 26px;
    }
    .profile-modal-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .profile-modal-actions {
        flex-direction: column;
    }
    .profile-modal-actions button {
        width: 100%;
    }
}


/* ===== Extracted: my-cats-compact-five-column-final ===== */
.my-cats-page .my-cats-breed-head { padding: 10px 13px !important; }
.my-cats-page .my-cats-breed-name { font-size: 18px !important; line-height: 1.1 !important; }
.my-cats-page .my-cats-breed-sub { font-size: 10px !important; margin-top: 2px !important; }
.my-cats-page .my-cats-breed-count { font-size: 10px !important; padding: 5px 8px !important; }

.my-cats-page .my-cats-grid-new {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 9px !important;
    padding: 10px !important;
    align-items: stretch !important;
}

.my-cats-page .my-cat-card-new {
    min-width: 0 !important;
    padding: 7px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
}

.my-cats-page .my-cat-card-header {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin: 0 0 2px !important;
    min-height: 18px !important;
}

.my-cats-page .my-cat-pill {
    display: inline-flex !important;
    padding: 2px 5px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(216,184,238,0.65) !important;
    background: rgba(255,255,255,0.76) !important;
    color: #695a6d !important;
    font-size: 8.5px !important;
    line-height: 1.1 !important;
    font-weight: 850 !important;
}

.my-cats-page .my-cat-image-wrap,
body.purr-mobile-game .my-cats-page .my-cat-image-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 98px !important;
    margin: 2px 0 4px !important;
}

.my-cats-page .my-cat-image-wrap img,
.my-cats-page .my-cat-image,
body.purr-mobile-game .my-cats-page .my-cat-image-wrap img {
    display: block !important;
    width: 94px !important;
    height: 94px !important;
    max-width: 100% !important;
    object-fit: contain !important;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.07)) !important;
}

.my-cats-page .my-cat-name {
    margin: 0 0 2px !important;
    color: #7a2f58 !important;
    font-size: 12.5px !important;
    line-height: 1.12 !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.my-cats-page .my-cat-cattery {
    margin: 0 0 2px !important;
    color: #7a2f58 !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.my-cats-page .my-cat-program {
    margin: 0 0 5px !important;
    color: #746678 !important;
    font-size: 8px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.my-cats-page .my-cat-facts-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3px !important;
    margin: 0 !important;
    text-align: left !important;
}

.my-cats-page .my-cat-facts-grid > div {
    min-width: 0 !important;
    padding: 3px 4px !important;
    border-radius: 7px !important;
    border: 1px solid rgba(216,184,238,0.40) !important;
    background: rgba(255,255,255,0.45) !important;
}

.my-cats-page .my-cat-facts-grid b,
.my-cats-page .my-cat-facts-grid span {
    display: block !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.1 !important;
}

.my-cats-page .my-cat-facts-grid b {
    margin-bottom: 1px !important;
    color: #7a2f58 !important;
    font-size: 7.5px !important;
    font-weight: 900 !important;
}

.my-cats-page .my-cat-facts-grid span {
    color: #5d5362 !important;
    font-size: 8.5px !important;
    font-weight: 750 !important;
}

@media (max-width: 1050px) and (min-width: 761px) {
    .my-cats-page .my-cats-grid-new { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}



@media (max-width: 760px) {
    .my-cats-page .my-cats-grid-new,
    body.purr-mobile-game .my-cats-page .my-cats-grid-new {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        padding: 8px !important;
    }

    .my-cats-page .my-cat-card-new,
    body.purr-mobile-game .my-cats-page .my-cat-card-new { padding: 6px !important; }

    .my-cats-page .my-cat-image-wrap,
    body.purr-mobile-game .my-cats-page .my-cat-image-wrap { height: 84px !important; }

    .my-cats-page .my-cat-image-wrap img,
    .my-cats-page .my-cat-image,
    body.purr-mobile-game .my-cats-page .my-cat-image-wrap img {
        width: 80px !important;
        height: 80px !important;
    }

    .my-cats-page .my-cat-name { font-size: 11px !important; }
    .my-cats-page .my-cat-cattery { font-size: 8px !important; }
    .my-cats-page .my-cat-program { font-size: 7.5px !important; }
    .my-cats-page .my-cat-facts-grid b { font-size: 7px !important; }
    .my-cats-page .my-cat-facts-grid span { font-size: 8px !important; }
}


/* ===== Extracted: breeding-program-race-restriction-style ===== */
.profile-modal-grid .small-note {
    margin-top: 6px;
    color: #837286;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 700;
}


/* ===== Extracted: my-cats-four-column-ready-heart-final ===== */
.my-cats-page .my-cat-card-new {
    position: relative !important;
}

.my-cats-page .my-cats-ready-heart {
    top: 31px !important;
    right: 8px !important;
    width: 29px !important;
    height: 29px !important;
    font-size: 20px !important;
    background: rgba(255,255,255,0.94) !important;
    border: 1px solid rgba(224,172,207,0.88) !important;
    color: #df6d9f !important;
    box-shadow: 0 4px 10px rgba(110,70,105,0.12) !important;
}

@media (min-width: 1051px) {
    .my-cats-page .my-cats-grid-new {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .my-cats-page .my-cats-ready-heart {
        top: 29px !important;
        right: 6px !important;
        width: 27px !important;
        height: 27px !important;
        font-size: 18px !important;
    }
}


/* ===== Extracted: my-cats-four-column-larger-cards-final ===== */
@media (min-width: 1051px) {
    .my-cats-page .my-cats-grid-new {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 11px !important;
        padding: 11px !important;
    }

    .my-cats-page .my-cat-card-new {
        padding: 9px !important;
    }

    .my-cats-page .my-cat-pill {
        font-size: 9.5px !important;
        padding: 2px 6px !important;
    }

    .my-cats-page .my-cat-image-wrap,
    body.purr-mobile-game .my-cats-page .my-cat-image-wrap {
        height: 110px !important;
        margin: 3px 0 5px !important;
    }

    .my-cats-page .my-cat-image-wrap img,
    .my-cats-page .my-cat-image,
    body.purr-mobile-game .my-cats-page .my-cat-image-wrap img {
        width: 106px !important;
        height: 106px !important;
    }

    .my-cats-page .my-cat-name {
        font-size: 14px !important;
    }

    .my-cats-page .my-cat-cattery {
        font-size: 10px !important;
    }

    .my-cats-page .my-cat-program {
        font-size: 9px !important;
        margin-bottom: 6px !important;
    }

    .my-cats-page .my-cat-facts-grid > div {
        padding: 4px 5px !important;
    }

    .my-cats-page .my-cat-facts-grid b {
        font-size: 8.5px !important;
    }

    .my-cats-page .my-cat-facts-grid span {
        font-size: 9.5px !important;
    }

    .my-cats-page .my-cats-breed-name {
        font-size: 20px !important;
    }

    .my-cats-page .my-cats-breed-sub,
    .my-cats-page .my-cats-breed-count {
        font-size: 11px !important;
    }
}

@media (max-width: 760px) {
    .my-cats-page .my-cat-image-wrap,
    body.purr-mobile-game .my-cats-page .my-cat-image-wrap {
        height: 91px !important;
    }

    .my-cats-page .my-cat-image-wrap img,
    .my-cats-page .my-cat-image,
    body.purr-mobile-game .my-cats-page .my-cat-image-wrap img {
        width: 87px !important;
        height: 87px !important;
    }

    .my-cats-page .my-cat-name { font-size: 11.8px !important; }
    .my-cats-page .my-cat-cattery { font-size: 8.5px !important; }
    .my-cats-page .my-cat-program { font-size: 8px !important; }
    .my-cats-page .my-cat-facts-grid b { font-size: 7.4px !important; }
    .my-cats-page .my-cat-facts-grid span { font-size: 8.4px !important; }
}


/* ===== Extracted: inline-style-52 ===== */
/* ===== PurrPixels Message Center 2026 ===== */
.mail-center-page {
    max-width: 1220px;
    margin: 18px auto 42px;
}

.mail-center-hero {
    margin-bottom: 18px;
}

.mail-center-layout {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.mail-center-sidebar {
    position: sticky;
    top: 16px;
    padding: 14px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,252,255,.94), rgba(245,239,255,.86));
    border: 1px solid rgba(218,188,238,.76);
    box-shadow: 0 10px 24px rgba(88,64,120,.09);
}

.mail-center-sidebar-title {
    padding: 4px 7px 11px;
    font-size: 18px;
    font-weight: 950;
    color: #684b5d;
}

.mail-center-nav,
.mail-center-secondary,
.mail-center-compose {
    width: 100%;
    min-height: 44px;
    margin: 0 0 7px !important;
    border-radius: 15px !important;
    display: grid !important;
    grid-template-columns: 28px minmax(0,1fr) auto;
    gap: 7px;
    align-items: center;
    text-align: left;
    padding: 8px 10px !important;
    font-weight: 900 !important;
}

.mail-center-nav {
    background: rgba(255,255,255,.62) !important;
    border: 1px solid rgba(218,188,238,.52) !important;
    color: #5d5065 !important;
}

.mail-center-nav.active {
    background: linear-gradient(135deg, rgba(255,235,247,.98), rgba(233,246,255,.94)) !important;
    border-color: rgba(201,156,224,.9) !important;
    color: #8a2f5a !important;
    box-shadow: 0 5px 13px rgba(88,64,120,.08) !important;
}

.mail-center-nav b {
    min-width: 25px;
    height: 25px;
    border-radius: 999px;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(218,188,238,.66);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.mail-center-sidebar-divider {
    height: 1px;
    margin: 11px 2px;
    background: rgba(218,188,238,.55);
}

.mail-center-compose {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    background: linear-gradient(135deg, #f8dce9, #dff3e5) !important;
    border: 1px solid rgba(194,151,208,.76) !important;
    color: #7a2f58 !important;
}

.mail-center-secondary {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    background: rgba(255,255,255,.58) !important;
}

.mail-center-content {
    min-width: 0;
    padding: 18px;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(255,252,255,.92), rgba(247,242,255,.80));
    border: 1px solid rgba(218,188,238,.76);
    box-shadow: 0 10px 24px rgba(88,64,120,.08);
}

.mail-center-content-head {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
}

.mail-center-content-kicker {
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #9b5e84;
}

.mail-center-content-head h2,
.mail-compose-head h2 {
    margin: 2px 0 4px;
    color: #684b5d;
    font-size: 27px;
}

.mail-center-content-head p {
    margin: 0;
    color: #685d70;
    font-weight: 700;
}

.mail-center-count {
    min-width: 55px;
    height: 55px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(218,188,238,.72);
    color: #8a2f5a;
    font-size: 23px;
    font-weight: 950;
}

.mail-center-toolbar {
    margin-bottom: 14px;
}

.mail-center-list {
    display: grid;
    gap: 10px;
}

.mail-center-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) 44px;
    gap: 8px;
    align-items: center;
    border-radius: 19px;
    border: 1px solid rgba(218,188,238,.60);
    background: rgba(255,255,255,.70);
    padding: 10px 11px;
    transition: transform .12s ease, box-shadow .12s ease;
}

.mail-center-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 16px rgba(88,64,120,.09);
}

.mail-center-row.unread {
    border-left: 5px solid #d366a0;
    background: linear-gradient(180deg, rgba(255,247,252,.96), rgba(247,240,255,.86));
}

.mail-center-row.official {
    border-left-color: #8fc6d8;
    background: linear-gradient(135deg, rgba(239,249,255,.94), rgba(255,246,252,.92));
}

.mail-center-row-open {
    width: 100%;
    display: grid !important;
    grid-template-columns: 54px minmax(0,1fr) 120px;
    gap: 12px;
    align-items: center;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    color: inherit !important;
    box-shadow: none !important;
    text-align: left !important;
}

.mail-center-avatar,
.mail-thread-avatar {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,#fff,#f5eaff);
    border: 1px solid rgba(218,188,238,.72);
    color: #8a2f5a;
    font-weight: 950;
}

.mail-center-avatar img,
.mail-thread-avatar img,
.mail-recipient-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mail-center-avatar.official,
.mail-thread-avatar.official {
    background: linear-gradient(135deg, #e6f7ff, #ffeaf4);
    border-color: rgba(143,198,216,.85);
}

.mail-official-mark {
    font-size: 16px;
    letter-spacing: .04em;
    font-weight: 950;
    color: #547d91;
}

.mail-center-person-line {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.mail-center-person {
    color: #65475f;
    font-weight: 950;
}

.mail-center-cattery {
    color: #817186;
    font-size: 12px;
    font-weight: 800;
}

.mail-official-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 8px;
    border-radius: 999px;
    background: linear-gradient(90deg,#e7f7ff,#ffeaf4);
    border: 1px solid rgba(143,198,216,.7);
    color: #55778a;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .03em;
}

.mail-official-badge.compact {
    min-height: 18px;
    padding: 2px 6px;
    font-size: 9px;
    margin-left: 5px;
}

.mail-center-subject {
    display: block;
    color: #7a2f58;
    font-size: 16px;
    font-weight: 950;
    margin: 3px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mail-center-preview {
    display: block;
    color: #685d70;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mail-center-preview .you-prefix {
    color: #8a2f5a;
    font-weight: 950;
}

.mail-center-meta {
    text-align: right;
    color: #766879;
    font-size: 11px;
    font-weight: 850;
}

.mail-center-meta small {
    display: block;
    margin-top: 5px;
}

.mail-row-menu,
.mail-message-menu {
    position: relative;
}

.mail-row-menu summary,
.mail-message-menu summary {
    list-style: none;
    cursor: pointer;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(218,188,238,.68);
    background: rgba(255,255,255,.84);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6e5d72;
    font-weight: 950;
}

.mail-row-menu summary::-webkit-details-marker,
.mail-message-menu summary::-webkit-details-marker {
    display: none;
}

.mail-row-menu-popover,
.mail-message-menu > div {
    position: absolute;
    right: 0;
    top: calc(100% + 5px);
    z-index: 50;
    min-width: 180px;
    padding: 7px;
    border-radius: 14px;
    background: #fffafd;
    border: 1px solid rgba(218,188,238,.74);
    box-shadow: 0 12px 28px rgba(73,55,82,.18);
}

.mail-row-menu-popover button,
.mail-message-menu > div button {
    width: 100%;
    margin: 0 0 4px !important;
    text-align: left !important;
    border-radius: 10px !important;
    font-size: 12px !important;
}

.mail-row-menu-popover button:last-child,
.mail-message-menu > div button:last-child {
    margin-bottom: 0 !important;
}

.mail-row-menu-popover .danger,
.mail-message-menu .danger,
.mail-report-actions .danger {
    color: #9c3457 !important;
    background: #fff0f5 !important;
    border-color: #e8b3c8 !important;
}

.mail-thread-header-card.official {
    background: linear-gradient(135deg, rgba(231,247,255,.96), rgba(255,240,248,.94));
}

.mail-thread-message.official {
    background: linear-gradient(135deg, rgba(235,249,255,.96), rgba(255,246,252,.94));
    border-color: rgba(143,198,216,.72);
}

.mail-thread-message-actions {
    align-items: center;
}

.mail-message-menu {
    margin-left: auto;
}

.mail-report-button {
    color: #8a2f5a !important;
}

.mail-blocked-note,
.mail-official-footer {
    margin-bottom: 13px;
    padding: 11px 13px;
    border-radius: 15px;
    background: rgba(255,244,249,.86);
    border: 1px solid rgba(224,147,181,.54);
    color: #715765;
    font-weight: 800;
}

.mail-official-footer {
    background: rgba(232,247,255,.78);
    border-color: rgba(143,198,216,.55);
}

.mail-thread-reply-card.disabled {
    opacity: .7;
}

.mail-compose-card {
    padding: 18px;
    border-radius: 22px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(218,188,238,.64);
}

.mail-compose-grid {
    display: grid;
    gap: 12px;
}

.mail-compose-grid label {
    display: grid;
    gap: 5px;
}

.mail-compose-grid label > span {
    color: #684b5d;
    font-size: 12px;
    font-weight: 950;
}

.mail-compose-grid input,
.mail-compose-grid textarea,
.mail-report-modal input,
.mail-report-modal select,
.mail-report-modal textarea {
    width: 100%;
    border: 1px solid rgba(218,188,238,.72);
    border-radius: 14px;
    background: rgba(255,255,255,.94);
    padding: 10px 12px;
    color: #554b5f;
    font: inherit;
}

.mail-compose-grid textarea {
    min-height: 180px;
    resize: vertical;
}

.mail-compose-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 14px;
}

.mail-compose-actions .primary {
    background: linear-gradient(135deg,#dff3e5,#f8dce9);
    font-weight: 950;
}

.mail-recipient-wrap {
    position: relative;
}

.mail-recipient-suggestions {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 5px);
    z-index: 40;
    border-radius: 14px;
    overflow: hidden;
    background: #fffafd;
    border: 1px solid rgba(218,188,238,.78);
    box-shadow: 0 12px 28px rgba(73,55,82,.16);
}

.mail-recipient-suggestions:empty {
    display: none;
}

.mail-recipient-suggestions button {
    width: 100%;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(218,188,238,.42) !important;
    border-radius: 0 !important;
    background: transparent !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0,1fr);
    gap: 9px;
    align-items: center;
    text-align: left !important;
    padding: 8px 10px !important;
}

.mail-recipient-suggestions button:last-child {
    border-bottom: 0 !important;
}

.mail-recipient-avatar {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5eaff;
    color: #8a2f5a;
    font-weight: 950;
}

.mail-recipient-suggestions small {
    display: block;
    color: #847587;
    margin-top: 2px;
}

.mail-recipient-empty {
    padding: 10px 12px;
    color: #7a6c7c;
    font-size: 12px;
    font-weight: 800;
}

.mail-report-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000080;
    background: rgba(50,42,54,.42);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.mail-report-modal {
    width: min(520px, calc(100vw - 30px));
    padding: 20px;
    border-radius: 23px;
    background: linear-gradient(180deg,#fff,#fff8fc);
    border: 1px solid rgba(218,188,238,.78);
    box-shadow: 0 22px 70px rgba(70,52,67,.26);
}

.mail-report-kicker {
    color: #a33b61;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.mail-report-title {
    color: #684b5d;
    font-size: 22px;
    font-weight: 950;
    margin: 4px 0 5px;
}

.mail-report-subtitle {
    color: #706275;
    margin-bottom: 13px;
}

.mail-report-modal label {
    display: grid;
    gap: 5px;
    margin-top: 10px;
}

.mail-report-modal label > span {
    color: #684b5d;
    font-size: 12px;
    font-weight: 950;
}

.mail-report-modal textarea {
    min-height: 120px;
    resize: vertical;
}

.mail-report-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

.admin-message-reports-card {
    margin-top: 20px;
}

.admin-message-report-snapshot {
    margin-top: 12px;
    padding: 13px;
    border-radius: 15px;
    background: rgba(238,247,255,.64);
    border: 1px solid rgba(143,198,216,.48);
    color: #554b5f;
    line-height: 1.5;
}

.admin-message-report-snapshot b {
    display: block;
    color: #684b5d;
    margin-bottom: 6px;
}

@media (max-width: 820px) {
    .mail-center-layout {
        grid-template-columns: 1fr;
    }

    .mail-center-sidebar {
        position: static;
        display: flex;
        gap: 7px;
        overflow-x: auto;
        padding: 9px;
        border-radius: 20px;
    }

    .mail-center-sidebar-title,
    .mail-center-sidebar-divider {
        display: none;
    }

    .mail-center-nav,
    .mail-center-secondary,
    .mail-center-compose {
        flex: 0 0 auto;
        width: auto;
        min-width: 118px;
        margin: 0 !important;
    }

    .mail-center-nav {
        grid-template-columns: 24px auto auto;
    }

    .mail-center-content {
        padding: 12px;
        border-radius: 21px;
    }

    .mail-center-row-open {
        grid-template-columns: 46px minmax(0,1fr);
    }

    .mail-center-meta {
        grid-column: 2;
        text-align: left;
    }
}

@media (max-width: 520px) {
    .mail-center-row {
        grid-template-columns: minmax(0,1fr) 40px;
        padding: 9px;
    }

    .mail-center-avatar {
        width: 42px;
        height: 42px;
        border-radius: 13px;
    }

    .mail-center-subject {
        font-size: 14px;
    }

    .mail-center-preview {
        font-size: 11px;
    }

    .mail-center-content-head h2 {
        font-size: 22px;
    }
}

/* ===== Mailbox final alignment + color cleanup ===== */
.mail-center-page *,
.mail-center-page *::before,
.mail-center-page *::after {
    box-sizing: border-box;
}

.mail-center-content,
.mail-center-list,
.mail-center-row,
.mail-center-row-open,
.mail-center-main,
.mail-center-person-line,
.mail-center-meta,
.mailbox-toolbar,
.mailbox-search-wrap,
.mailbox-search-wrap input,
.mailbox-filter-select {
    min-width: 0;
}

.mail-center-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
    background: linear-gradient(180deg, rgba(255, 252, 255, 0.98), rgba(250, 245, 255, 0.95)) !important;
    border: 1px solid rgba(210, 187, 228, 0.82) !important;
    border-radius: 22px !important;
    padding: 10px 12px !important;
}

.mail-center-row.official {
    background: linear-gradient(180deg, rgba(251, 248, 255, 0.99), rgba(255, 247, 252, 0.97)) !important;
    border-color: rgba(202, 179, 223, 0.86) !important;
}

.mail-center-row.unread {
    background: linear-gradient(180deg, rgba(255, 247, 252, 0.99), rgba(251, 244, 255, 0.96)) !important;
    border-left: 5px solid #d17ca5 !important;
}

.mail-center-row-open {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: 62px minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    overflow: hidden !important;
}

.mail-center-avatar {
    width: 62px !important;
    height: 62px !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, rgba(252, 246, 255, 0.98), rgba(244, 239, 255, 0.96)) !important;
    border: 1px solid rgba(194, 168, 219, 0.72) !important;
    color: #7a4f6a !important;
}

.mail-center-avatar.official,
.mail-thread-avatar.official {
    background: linear-gradient(180deg, rgba(251, 247, 255, 0.99), rgba(246, 240, 255, 0.97)) !important;
    border-color: rgba(194, 168, 219, 0.72) !important;
}

.mail-official-mark {
    color: #7b5773 !important;
}

.mail-center-main {
    overflow: hidden !important;
}

.mail-center-person-line {
    gap: 8px !important;
    margin-bottom: 2px !important;
}

.mail-center-person {
    color: #6b4961 !important;
    font-size: 15px !important;
    font-weight: 950 !important;
}

.mail-official-badge {
    background: linear-gradient(180deg, rgba(248, 240, 255, 0.98), rgba(239, 244, 255, 0.96)) !important;
    border: 1px solid rgba(189, 164, 214, 0.78) !important;
    color: #62758d !important;
}

.mail-center-subject {
    color: #8a2f5a !important;
    font-size: 17px !important;
    font-weight: 950 !important;
    line-height: 1.2 !important;
}

.mail-center-preview {
    color: #6c6171 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}

.mail-center-meta {
    justify-self: end !important;
    align-self: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 4px !important;
    min-width: 88px !important;
    color: #76677b !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
}

.mail-row-menu,
.mail-message-menu {
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.mail-row-menu[open],
.mail-message-menu[open] {
    background: transparent !important;
}

.mail-row-menu summary,
.mail-message-menu summary {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(205, 182, 225, 0.84) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 242, 255, 0.95)) !important;
    color: #7d687e !important;
}

.mail-row-menu summary:hover,
.mail-row-menu[open] summary,
.mail-message-menu summary:hover,
.mail-message-menu[open] summary {
    background: linear-gradient(180deg, rgba(255, 245, 251, 0.99), rgba(243, 245, 255, 0.96)) !important;
    border-color: rgba(195, 166, 220, 0.92) !important;
    color: #8a2f5a !important;
}

.mail-row-menu-popover,
.mail-message-menu > div {
    right: 0 !important;
    top: calc(100% + 6px) !important;
    min-width: 190px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(205, 182, 225, 0.84) !important;
    background: linear-gradient(180deg, rgba(255, 253, 255, 0.99), rgba(249, 245, 255, 0.98)) !important;
}

.mail-center-content {
    background: linear-gradient(180deg, rgba(255, 252, 255, 0.98), rgba(250, 246, 255, 0.94)) !important;
}

.mailbox-toolbar,
.mail-thread-header-card,
.mail-thread-message,
.mail-thread-reply-card,
.mail-compose-card {
    border-color: rgba(210, 187, 228, 0.82) !important;
}

.mail-thread-header-card.official,
.mail-thread-message.official,
.mail-official-footer {
    background: linear-gradient(180deg, rgba(251, 248, 255, 0.99), rgba(255, 247, 252, 0.97)) !important;
    border-color: rgba(202, 179, 223, 0.86) !important;
}

.mail-thread-message.received {
    background: linear-gradient(180deg, rgba(255, 252, 255, 0.99), rgba(249, 245, 255, 0.95)) !important;
}

.mail-thread-message.sent {
    background: linear-gradient(180deg, rgba(255, 245, 251, 0.99), rgba(245, 247, 255, 0.95)) !important;
}

@media (max-width: 900px) {
    .mail-center-row-open {
        grid-template-columns: 54px minmax(0, 1fr) auto !important;
    }

    .mail-center-avatar {
        width: 54px !important;
        height: 54px !important;
    }
}

@media (max-width: 700px) {
    .mail-center-row {
        padding: 10px !important;
    }

    .mail-center-row-open {
        grid-template-columns: 48px minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    .mail-center-avatar {
        width: 48px !important;
        height: 48px !important;
        border-radius: 15px !important;
    }

    .mail-center-meta {
        grid-column: 2 !important;
        justify-self: start !important;
        align-items: flex-start !important;
        min-width: 0 !important;
        margin-top: 2px !important;
        white-space: normal !important;
    }
}


/* ===== Stud Service: mobile compact filters + favorites ===== */
.stud-mobile-filter-toggle {
    display: none;
}

.stud-mobile-filter-body {
    display: block;
}

.stud-favorites-tab {
    position: relative;
}

.stud-favorites-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    margin-left: 5px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(216,184,238,0.72);
    color: #8a2f5a;
    font-size: 11px;
    font-weight: 950;
}

@media (max-width: 760px) {
    body.purr-mobile-game .stud-filter-card {
        padding: 10px 11px !important;
    }

    body.purr-mobile-game .stud-filter-card .stud-filter-title-row,
    body.purr-mobile-game .stud-filter-card .stud-filter-title-row.compact {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 10px !important;
        margin: 0 !important;
        align-items: center !important;
    }

    body.purr-mobile-game .stud-filter-card .stud-filter-title {
        font-size: 17px !important;
        line-height: 1.1 !important;
    }

    body.purr-mobile-game .stud-mobile-filter-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        width: auto !important;
        min-width: 96px !important;
        min-height: 36px !important;
        margin: 0 !important;
        padding: 7px 11px !important;
        border-radius: 999px !important;
        border: 1px solid rgba(216,184,238,0.78) !important;
        background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,238,252,0.92)) !important;
        color: #7a2f58 !important;
        font-size: 12px !important;
        font-weight: 950 !important;
        box-shadow: none !important;
    }

    body.purr-mobile-game .stud-mobile-filter-toggle.open {
        background: linear-gradient(180deg, rgba(255,241,250,0.98), rgba(238,247,255,0.94)) !important;
    }

    body.purr-mobile-game .stud-mobile-filter-arrow {
        font-size: 13px !important;
        line-height: 1 !important;
    }

    body.purr-mobile-game .stud-mobile-filter-body {
        display: none !important;
        margin-top: 0 !important;
    }

    body.purr-mobile-game .stud-mobile-filter-body.open {
        display: block !important;
        margin-top: 11px !important;
    }

    body.purr-mobile-game .stud-service-tabs,
    body.purr-mobile-game .compact-stud-tabs {
        margin-bottom: 8px !important;
    }

    body.purr-mobile-game .stud-favorites-tab {
        color: #8a2f5a !important;
    }

    body.purr-mobile-game .stud-favorites-count {
        min-width: 20px !important;
        height: 20px !important;
        font-size: 10px !important;
    }

    body.purr-mobile-game .stud-service-list {
        margin-top: 8px !important;
    }
}


/* ===== Genetics article source reference ===== */
.genetics-source-card {
    margin-top: 20px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-radius: 18px;
    background: linear-gradient(
        135deg,
        rgba(255, 248, 252, 0.94),
        rgba(241, 244, 255, 0.92)
    );
    border: 1px solid rgba(216, 184, 238, 0.76);
}

.genetics-source-label {
    margin-bottom: 3px;
    color: #8a2f5a;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.genetics-source-name {
    color: #5b5364;
    font-weight: 850;
}

.genetics-source-card a {
    flex: 0 0 auto;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(216, 184, 238, 0.76);
    color: #7a2f58;
    font-weight: 900;
    text-decoration: none;
}

.genetics-source-card a:hover {
    background: rgba(255, 240, 248, 0.94);
}

@media (max-width: 620px) {
    .genetics-source-card {
        align-items: stretch;
        flex-direction: column;
    }

    .genetics-source-card a {
        text-align: center;
    }
}


/* ===== Landing page Discord community link ===== */
.landing-discord-card {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    padding: 12px 13px;
    border-radius: 18px;
    background: linear-gradient(
        135deg,
        rgba(255, 247, 252, 0.96),
        rgba(241, 243, 255, 0.94)
    );
    border: 1px solid rgba(213, 188, 231, 0.84);
    box-shadow:
        0 7px 16px rgba(97, 73, 120, 0.06),
        inset 0 1px 0 rgba(255,255,255,0.82);
}

.landing-discord-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        180deg,
        rgba(252, 233, 244, 0.96),
        rgba(239, 243, 255, 0.94)
    );
    border: 1px solid rgba(213, 188, 231, 0.78);
    font-size: 21px;
}

.landing-discord-copy {
    min-width: 0;
}

.landing-discord-title {
    margin-bottom: 3px;
    color: #7a2f58;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 950;
}

.landing-discord-text {
    color: #675d6d;
    font-size: 11.5px;
    line-height: 1.35;
    font-weight: 700;
}

.landing-discord-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 13px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.98),
        rgba(248, 240, 255, 0.94)
    );
    border: 1px solid rgba(205, 177, 226, 0.88);
    color: #79506e;
    font-size: 12px;
    font-weight: 950;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(97, 73, 120, 0.05);
}

.landing-discord-button:hover {
    background: linear-gradient(
        180deg,
        rgba(255, 242, 249, 0.99),
        rgba(240, 245, 255, 0.96)
    );
    border-color: rgba(194, 159, 220, 0.94);
    color: #8a2f5a;
}

@media (max-width: 540px) {
    .landing-discord-card {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .landing-discord-button {
        grid-column: 1 / -1;
        width: 100%;
    }
}


/* ===== Cat Meadow redesign + Office Meadow + private Notes ===== */
.cat-meadow-page .special-cat-hero,
.meadow-office-hero {
    background:
        radial-gradient(circle at 12% 12%, rgba(255,255,255,0.86), transparent 30%),
        linear-gradient(135deg,
            rgba(250,242,255,0.96),
            rgba(239,246,255,0.94),
            rgba(255,236,247,0.94)
        ) !important;
    border-color: rgba(211,184,232,0.86) !important;
}

.cat-meadow-page .special-cat-kicker,
.meadow-office-page .office-kicker {
    color: #8a2f5a !important;
}

.cat-meadow-page .special-cat-symbol {
    width: 190px !important;
    height: 138px !important;
    background: linear-gradient(
        135deg,
        rgba(250,241,255,0.96),
        rgba(239,246,255,0.94),
        rgba(255,239,248,0.94)
    ) !important;
    border-color: rgba(211,184,232,0.78) !important;
}

.cat-meadow-page .special-cat-image-wrap img {
    width: 300px !important;
    height: 300px !important;
    object-fit: contain !important;
}

.cat-meadow-page .special-cat-info-card {
    border-color: rgba(211,184,232,0.86) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(249,243,255,0.92)) !important;
}

.cat-meadow-page .special-cat-info-card .office-card-title {
    background: linear-gradient(
        90deg,
        rgba(241,246,255,0.96),
        rgba(255,239,248,0.96),
        rgba(246,237,255,0.96)
    ) !important;
    border-bottom-color: rgba(211,184,232,0.68) !important;
}

.cat-meadow-page .special-cat-info-grid div {
    border-bottom-color: rgba(211,184,232,0.36) !important;
}

.cat-meadow-page .special-cat-info-grid b {
    color: #7a315b !important;
}

.cat-meadow-breeder-row {
    grid-column: 1 / -1;
}

.special-cat-breeder-link {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #8a2f5a !important;
    font: inherit !important;
    font-weight: 900 !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.special-cat-breeder-link:hover {
    transform: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: #a44473 !important;
}

.office-meadow-preview-card,
.office-notes-card {
    margin-bottom: 18px;
}

.office-notes-textarea {
    width: 100%;
    min-height: 175px;
    resize: vertical;
    margin-top: 12px;
    padding: 13px 14px;
    border-radius: 16px;
    border: 1px solid rgba(211,184,232,0.84);
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(249,244,255,0.92));
    color: #554d5f;
    font: inherit;
    line-height: 1.5;
}

.office-notes-textarea:focus {
    outline: none;
    border-color: rgba(188,149,218,0.96);
    box-shadow: 0 0 0 3px rgba(222,198,241,0.34);
}

.office-notes-footer {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.office-notes-footer span {
    color: #796d7e;
    font-size: 12px;
    font-weight: 800;
}

.office-notes-message {
    min-height: 18px;
    margin-top: 8px;
    color: #8a2f5a;
    font-size: 12px;
    font-weight: 900;
}

.meadow-mini-list {
    display: grid;
    gap: 9px;
    margin-top: 12px;
}

.meadow-mini-card {
    display: grid;
    grid-template-columns: 66px minmax(0,1fr) 24px;
    gap: 11px;
    align-items: center;
    padding: 9px 10px;
    border-radius: 17px;
    border: 1px solid rgba(211,184,232,0.72);
    background: linear-gradient(135deg, rgba(255,250,253,0.94), rgba(244,242,255,0.92));
    cursor: pointer;
}

.meadow-mini-card:hover {
    border-color: rgba(193,156,221,0.92);
    transform: translateY(-1px);
}

.meadow-mini-card > img {
    width: 62px;
    height: 62px;
    object-fit: contain;
}

.meadow-mini-name {
    color: #7a315b;
    font-weight: 950;
    font-size: 16px;
}

.meadow-mini-meta {
    margin-top: 3px;
    color: #665d6d;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 700;
}

.meadow-mini-open {
    color: #9a7193;
    font-size: 25px;
    font-weight: 900;
}

.meadow-office-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}

.meadow-office-cat-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px;
    border-radius: 20px !important;
    border: 1px solid rgba(211,184,232,0.82) !important;
    background: linear-gradient(180deg, rgba(255,251,254,0.96), rgba(245,242,255,0.94)) !important;
    box-shadow: 0 8px 18px rgba(97,73,120,0.06) !important;
}

.meadow-office-cat-card img {
    width: 150px;
    height: 150px;
    object-fit: contain;
}

.meadow-office-cat-name {
    margin-top: 8px;
    color: #7a315b;
    font-size: 17px;
    font-weight: 950;
}

.meadow-office-cat-meta {
    margin-top: 5px;
    color: #655b6b;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
}

.office-meadow-action {
    background: linear-gradient(135deg, rgba(255,247,252,0.94), rgba(241,244,255,0.92)) !important;
    border-color: rgba(211,184,232,0.78) !important;
}

@media (max-width: 700px) {
    .cat-meadow-page .special-cat-image-wrap img {
        width: 300px !important;
        height: 300px !important;
        max-width: 100% !important;
    }

    .cat-meadow-page .special-cat-info-grid {
        grid-template-columns: 1fr !important;
    }

    .cat-meadow-breeder-row {
        grid-column: auto;
    }

    .office-notes-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .office-notes-footer button {
        width: 100%;
    }
}


/* ===== Office overview cleanup + compact bilingual layout ===== */
.office-clean-page {
    max-width: 1120px !important;
}

.office-clean-page .office-hero {
    background:
        linear-gradient(
            135deg,
            rgba(255, 248, 252, 0.97),
            rgba(241, 246, 255, 0.96),
            rgba(248, 239, 255, 0.96)
        ) !important;
    border: 1px solid rgba(211, 184, 232, 0.84) !important;
    box-shadow: 0 10px 24px rgba(96, 72, 118, 0.08) !important;
}

.office-hero-compact {
    grid-template-columns: minmax(0, 1fr) 110px !important;
    gap: 16px !important;
    padding: 18px 20px !important;
    border-radius: 22px !important;
    margin-bottom: 16px !important;
}

.office-hero-compact .office-kicker {
    color: #8a2f5a !important;
    font-size: 12px !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.office-hero-compact .office-title {
    font-size: 30px !important;
    line-height: 1.08 !important;
    margin-bottom: 5px !important;
}

.office-hero-compact .office-subtitle {
    max-width: 760px;
    font-size: 14px !important;
    line-height: 1.42 !important;
}

.office-hero-icon-compact {
    width: 92px !important;
    height: 92px !important;
    border-radius: 24px !important;
    border-color: rgba(211, 184, 232, 0.76) !important;
    background: rgba(255,255,255,0.74) !important;
}

.office-hero-icon-compact .office-hero-icon-img {
    width: 78px !important;
    height: 78px !important;
}

.office-top-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 16px;
    align-items: stretch;
    margin-bottom: 16px;
}

.office-clean-page .office-card {
    margin-bottom: 0 !important;
    border: 1px solid rgba(211, 184, 232, 0.80) !important;
    background: rgba(255,255,255,0.82) !important;
    box-shadow: 0 7px 18px rgba(96, 72, 118, 0.06) !important;
}

.office-card-title-compact {
    padding: 10px 14px !important;
    font-size: 17px !important;
    background:
        linear-gradient(
            90deg,
            rgba(241, 246, 255, 0.94),
            rgba(255, 240, 248, 0.94),
            rgba(247, 238, 255, 0.94)
        ) !important;
    border-bottom-color: rgba(211, 184, 232, 0.58) !important;
}

.office-card-body-compact {
    padding: 14px !important;
}

.office-current-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 12px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255,249,253,0.90), rgba(245,242,255,0.90));
    border: 1px solid rgba(211,184,232,0.60);
}

.office-current-name span {
    color: #746879;
    font-size: 12px;
    font-weight: 800;
}

.office-current-name strong {
    min-width: 0;
    color: #7a315b;
    font-size: 15px;
    text-align: right;
    overflow-wrap: anywhere;
}

.office-rename-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.office-rename-grid .office-field {
    min-width: 0;
}

.office-rename-grid .office-field label {
    font-size: 12px;
    margin-bottom: 4px;
}

.office-rename-grid .office-field input {
    min-height: 40px;
    border-color: rgba(211,184,232,0.76) !important;
}

.office-rename-button {
    min-height: 40px;
    margin: 0 0 4px 0 !important;
    white-space: nowrap;
}

.office-cost-note,
.office-soft-text {
    color: #716675;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.office-cost-note {
    margin-top: 8px;
}

.office-notes-textarea {
    min-height: 112px !important;
    max-height: 230px;
    margin-top: 9px !important;
}

.office-notes-footer {
    margin-top: 8px !important;
}

.office-notes-footer button {
    margin: 0 !important;
}

.office-quick-card {
    margin-bottom: 16px !important;
}

.office-action-grid-compact {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.office-action-card-compact {
    min-height: 106px !important;
    padding: 10px 9px !important;
    border-radius: 16px !important;
    border-color: rgba(211,184,232,0.66) !important;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.90),
            rgba(248,243,255,0.86)
        ) !important;
}

.office-action-card-compact:hover {
    background:
        linear-gradient(
            180deg,
            rgba(255,248,252,0.96),
            rgba(242,246,255,0.92)
        ) !important;
    border-color: rgba(195,158,221,0.90) !important;
}

.office-action-card-compact .office-action-icon {
    height: 40px;
    margin-bottom: 4px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.office-action-card-compact .office-action-icon-img {
    width: 42px !important;
    height: 42px !important;
}

.office-action-card-compact .office-action-title {
    font-size: 15px !important;
    margin-bottom: 2px !important;
}

.office-action-card-compact .office-action-note {
    font-size: 11px !important;
    line-height: 1.25 !important;
}

.office-preview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.office-preview-grid .office-card {
    min-width: 0;
}

.office-preview-grid .office-soft-text {
    margin-bottom: 10px;
}

.office-preview-empty {
    padding: 12px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255,249,253,0.86), rgba(245,242,255,0.86));
    border: 1px solid rgba(211,184,232,0.54);
    color: #716675;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

.office-preview-button-row {
    margin-top: 10px;
    text-align: right;
}

.office-preview-button-row button {
    margin: 0 !important;
}

.office-preview-grid .meadow-mini-list,
.office-preview-grid .heaven-list {
    gap: 7px !important;
}

.office-preview-grid .meadow-mini-card {
    grid-template-columns: 54px minmax(0,1fr) 18px !important;
    gap: 8px !important;
    padding: 7px 8px !important;
    border-radius: 14px !important;
}

.office-preview-grid .meadow-mini-card > img {
    width: 50px !important;
    height: 50px !important;
}

.office-preview-grid .meadow-mini-name {
    font-size: 14px !important;
}

.office-preview-grid .meadow-mini-meta {
    font-size: 10.5px !important;
}

.office-heaven-preview-list .heaven-mini-card {
    grid-template-columns: 58px minmax(0,1fr) auto !important;
    gap: 8px !important;
    padding: 8px !important;
    border-radius: 14px !important;
    border-color: rgba(211,184,232,0.58) !important;
}

.office-heaven-preview-list .heaven-mini-card > img {
    width: 54px !important;
    height: 54px !important;
}

.office-heaven-preview-list .heaven-mini-name {
    font-size: 14px !important;
}

.office-heaven-preview-list .heaven-mini-meta {
    font-size: 10.5px !important;
}

.office-heaven-preview-list .heaven-mini-card button {
    font-size: 10.5px !important;
    padding: 6px 8px !important;
    margin: 0 !important;
}

@media (max-width: 900px) {
    .office-top-grid,
    .office-preview-grid {
        grid-template-columns: 1fr !important;
    }

    .office-action-grid-compact {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }
}

@media (max-width: 600px) {
    .office-hero-compact {
        grid-template-columns: 1fr !important;
        text-align: center;
    }

    .office-hero-icon-compact {
        margin: 0 auto !important;
    }

    .office-rename-grid {
        grid-template-columns: 1fr !important;
    }

    .office-rename-button {
        width: 100%;
        margin: 0 !important;
    }

    .office-action-grid-compact {
        grid-template-columns: 1fr 1fr !important;
    }

    .office-action-card-compact {
        min-height: 100px !important;
    }
}


/* ===== Office preview sex icon sizing fix ===== */
.office-preview-grid .cat-sex-icon-wrap {
    width: 18px !important;
    height: 18px !important;
    vertical-align: -4px !important;
}

.office-preview-grid .cat-sex-icon-wrap img {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    object-fit: contain !important;
    filter: none !important;
    margin: 0 !important;
}

.office-heaven-preview-list .cat-sex-icon-wrap,
.office-heaven-preview-list .cat-sex-icon-wrap img {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
}


/* ===== Community Player Search / Breeder Discovery ===== */
.community-search-page {
    max-width: 1150px;
}

.community-search-hero {
    background:
        linear-gradient(
            135deg,
            rgba(255,248,252,0.97),
            rgba(241,246,255,0.95),
            rgba(249,239,255,0.95)
        ) !important;
    border-color: rgba(211,184,232,0.82) !important;
}

.community-search-hero .community-kicker {
    color: #8a2f5a !important;
}

.community-search-tabs {
    display: flex;
    gap: 8px;
    margin: 0 0 12px;
}

.community-search-tab {
    min-width: 150px;
    border-radius: 999px !important;
    border: 1px solid rgba(211,184,232,0.82) !important;
    background: rgba(255,255,255,0.72) !important;
    color: #6b586e !important;
}

.community-search-tab.active {
    background: linear-gradient(135deg, rgba(255,234,246,0.98), rgba(239,243,255,0.98)) !important;
    color: #8a2f5a !important;
    border-color: rgba(190,151,220,0.94) !important;
    box-shadow: 0 5px 12px rgba(109,78,128,0.08);
}

.community-search-page .community-card {
    border-color: rgba(211,184,232,0.78) !important;
    background: rgba(255,255,255,0.82) !important;
}

.community-search-page .community-card-title {
    background: linear-gradient(
        90deg,
        rgba(241,246,255,0.94),
        rgba(255,240,248,0.94),
        rgba(247,238,255,0.94)
    ) !important;
    border-bottom-color: rgba(211,184,232,0.58) !important;
    font-size: 19px;
}

.community-search-page .community-search-wrap {
    border-color: rgba(211,184,232,0.82) !important;
    background: rgba(255,255,255,0.94);
}

.community-search-page .community-search-icon {
    background: linear-gradient(135deg, #f3c8df, #c8daf6) !important;
}

.community-search-help {
    margin-top: 8px;
    color: #786d7e;
    font-size: 12px;
    font-weight: 700;
}

.community-breeder-controls {
    display: grid;
    grid-template-columns: minmax(190px, 0.7fr) minmax(240px, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.community-breeder-controls label {
    display: block;
    margin-bottom: 5px;
    color: #625769;
    font-size: 12px;
    font-weight: 900;
}

.community-breeder-controls select,
.community-breeder-controls input {
    width: 100%;
    min-height: 42px;
    border: 1px solid rgba(211,184,232,0.82);
    border-radius: 13px;
    background: rgba(255,255,255,0.94);
    padding: 9px 11px;
    color: #554d5f;
    font: inherit;
}

.community-breeder-controls > button {
    min-height: 42px;
    margin: 0 !important;
    white-space: nowrap;
}

.community-search-results {
    margin-bottom: 18px;
}

.community-search-result-list {
    display: grid;
    gap: 10px;
}

.community-result-card-modern {
    grid-template-columns: 76px minmax(0,1fr) !important;
    gap: 13px !important;
    padding: 13px !important;
    border-color: rgba(211,184,232,0.76) !important;
    background: linear-gradient(135deg, rgba(255,253,254,0.96), rgba(244,244,255,0.91)) !important;
}

.community-result-main {
    min-width: 0;
}

.community-result-name-row,
.community-discovery-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.community-result-card-modern .community-player-name {
    font-size: 20px;
}

.community-result-card-modern .community-player-cattery {
    color: #76617a !important;
    margin-top: 2px;
}

.community-result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 14px;
    margin-top: 6px;
    color: #756b7a;
    font-size: 11.5px;
    font-weight: 700;
}

.community-result-card-modern .community-actions {
    margin-top: 9px;
}

.community-result-card-modern .community-actions button {
    padding: 7px 11px !important;
    font-size: 11px !important;
}

.community-discovery-avatar {
    position: relative;
    width: 66px;
    height: 66px;
    flex: 0 0 66px;
    border-radius: 19px;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f9e4ef, #e6efff, #f1e6ff);
    border: 1px solid rgba(211,184,232,0.82);
    font-size: 30px;
}

.community-discovery-avatar.small {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    border-radius: 14px;
    font-size: 22px;
}

.community-discovery-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: inherit;
}

.community-discovery-avatar.fallback::before {
    content: "🐱";
    font-size: 24px;
}

.community-online-dot {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #7bcf9c;
    border: 3px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}

.community-vip-badge,
.community-online-label {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 9.5px;
    line-height: 1;
    font-weight: 950;
}

.community-vip-badge {
    background: linear-gradient(135deg, rgba(255,227,243,0.96), rgba(232,239,255,0.96));
    color: #8d3e69;
    border: 1px solid rgba(220,173,206,0.80);
}

.community-online-label {
    background: rgba(226,248,235,0.92);
    color: #42775a;
    border: 1px solid rgba(150,211,173,0.75);
}

.community-discovery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.community-discovery-card {
    min-width: 0;
}

.community-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.community-small-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 25px;
    height: 25px;
    border-radius: 999px;
    background: rgba(255,255,255,0.68);
    border: 1px solid rgba(211,184,232,0.72);
    font-size: 11px;
    color: #76586f;
}

.community-discovery-list {
    display: grid;
    gap: 7px;
}

.community-discovery-player {
    display: grid;
    grid-template-columns: 46px minmax(0,1fr) 16px;
    gap: 9px;
    align-items: center;
    padding: 8px 9px;
    border-radius: 15px;
    border: 1px solid rgba(211,184,232,0.62);
    background: linear-gradient(135deg, rgba(255,252,254,0.92), rgba(246,244,255,0.88));
    cursor: pointer;
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.community-discovery-player:hover {
    transform: translateY(-1px);
    border-color: rgba(193,157,219,0.88);
    box-shadow: 0 5px 12px rgba(97,73,120,0.06);
}

.community-discovery-copy {
    min-width: 0;
}

.community-discovery-name {
    min-width: 0;
    color: #7a315b;
    font-size: 13.5px;
    font-weight: 950;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.community-discovery-cattery {
    margin-top: 1px;
    color: #716675;
    font-size: 10.5px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.community-discovery-meta {
    margin-top: 2px;
    color: #8a808c;
    font-size: 9.5px;
    font-weight: 700;
}

.community-discovery-open {
    color: #9c748e;
    font-size: 20px;
    font-weight: 950;
}

.community-preview-empty,
.community-search-loading {
    padding: 13px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255,249,253,0.82), rgba(246,244,255,0.82));
    border: 1px solid rgba(211,184,232,0.52);
    color: #776d7b;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

.community-friends-preview-card {
    margin-top: 0;
}

.community-card-head-button {
    padding: 5px 9px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    font-size: 10.5px !important;
}

.community-friends-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 9px;
}

.community-friend-preview {
    min-width: 0;
    display: grid;
    grid-template-columns: 46px minmax(0,1fr);
    gap: 8px;
    align-items: center;
    padding: 9px;
    border: 1px solid rgba(211,184,232,0.62);
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(255,252,254,0.92), rgba(246,244,255,0.88));
}

.community-friend-preview-copy {
    min-width: 0;
}

.community-friend-preview-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 6px;
}

.community-friend-preview-actions button {
    flex: 1;
    margin: 0 !important;
    padding: 6px 7px !important;
    font-size: 10px !important;
}

.community-friend-request-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
    padding: 11px 13px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255,236,247,0.94), rgba(239,244,255,0.92));
    border: 1px solid rgba(211,184,232,0.78);
    box-shadow: 0 5px 12px rgba(97,73,120,0.05);
}

.community-friend-request-title {
    color: #7a315b;
    font-size: 13px;
    font-weight: 950;
}

.community-friend-request-names {
    margin-top: 2px;
    color: #796e7e;
    font-size: 10.5px;
    font-weight: 750;
}

.community-friend-request-notice button {
    margin: 0 !important;
    white-space: nowrap;
    font-size: 10.5px !important;
}

@media (max-width: 850px) {
    .community-search-page {
        margin-top: 10px;
    }

    .community-search-hero {
        padding: 17px 18px !important;
    }

    .community-search-hero .community-title {
        font-size: 27px !important;
    }

    .community-search-tabs {
        width: 100%;
    }

    .community-search-tab {
        flex: 1;
        min-width: 0;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .community-breeder-controls {
        grid-template-columns: 1fr;
    }

    .community-breeder-controls > button {
        width: 100%;
    }

    .community-discovery-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .community-friends-preview-grid {
        grid-template-columns: 1fr 1fr;
    }

    .community-result-card-modern {
        grid-template-columns: 58px minmax(0,1fr) !important;
        text-align: left !important;
    }

    .community-result-card-modern .community-discovery-avatar {
        width: 56px;
        height: 56px;
        flex-basis: 56px;
        margin: 0 !important;
    }

    .community-result-card-modern .community-actions {
        justify-content: flex-start !important;
    }
}

@media (max-width: 560px) {
    .community-search-row {
        grid-template-columns: 1fr !important;
    }

    .community-search-row > button {
        width: 100%;
    }

    .community-friends-preview-grid {
        grid-template-columns: 1fr;
    }

    .community-result-card-modern {
        grid-template-columns: 48px minmax(0,1fr) !important;
        gap: 9px !important;
    }

    .community-result-card-modern .community-discovery-avatar {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        border-radius: 14px;
    }

    .community-result-card-modern .community-player-name {
        font-size: 17px !important;
    }

    .community-result-meta {
        display: grid;
        gap: 2px;
    }

    .community-result-card-modern .community-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .community-result-card-modern .community-actions button:last-child:nth-child(3) {
        grid-column: 1 / -1;
    }

    .community-result-card-modern .community-actions button {
        width: 100%;
        margin: 0 !important;
    }

    .community-friend-request-notice {
        align-items: stretch;
        flex-direction: column;
    }

    .community-friend-request-notice button {
        width: 100%;
    }
}


/* ===== Modern Friends dashboard ===== */
.friends-modern-page {
    max-width: 1150px;
}

.friends-modern-hero {
    padding: 18px 22px !important;
    margin-bottom: 14px !important;
    background:
        linear-gradient(
            135deg,
            rgba(255,248,252,0.97),
            rgba(241,246,255,0.95),
            rgba(249,239,255,0.95)
        ) !important;
    border-color: rgba(211,184,232,0.82) !important;
}

.friends-modern-hero .community-kicker {
    color: #8a2f5a !important;
}

.friends-modern-hero .community-title {
    font-size: 30px !important;
    margin-bottom: 5px !important;
}

.friends-toolbar {
    display: grid;
    grid-template-columns: minmax(220px,1fr) 185px auto auto;
    gap: 9px;
    align-items: center;
    margin-bottom: 12px;
    padding: 10px;
    border: 1px solid rgba(211,184,232,0.78);
    border-radius: 18px;
    background: rgba(255,255,255,0.80);
    box-shadow: 0 6px 15px rgba(97,73,120,0.05);
}

.friends-toolbar-search {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 11px;
    border: 1px solid rgba(211,184,232,0.72);
    border-radius: 13px;
    background: rgba(255,255,255,0.94);
}

.friends-toolbar-search input {
    min-width: 0;
    width: 100%;
    border: 0 !important;
    outline: 0;
    background: transparent !important;
    box-shadow: none !important;
    padding: 7px 0 !important;
}

.friends-toolbar select {
    min-height: 40px;
    border: 1px solid rgba(211,184,232,0.72);
    border-radius: 13px;
    background: rgba(255,255,255,0.94);
    padding: 7px 10px;
    color: #5d5263;
    font-weight: 800;
}

.friends-toolbar button {
    min-height: 40px;
    margin: 0 !important;
    white-space: nowrap;
}

.friends-add-toggle-button {
    background: linear-gradient(135deg, rgba(255,234,246,0.98), rgba(239,244,255,0.98)) !important;
    border-color: rgba(196,158,222,0.86) !important;
}

.friends-add-panel {
    display: none;
    margin-bottom: 12px;
}

.friends-add-panel.open {
    display: block;
}

.friends-add-panel-inner {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(320px,0.9fr);
    gap: 16px;
    align-items: center;
    padding: 13px 15px;
    border: 1px solid rgba(211,184,232,0.72);
    border-radius: 17px;
    background: linear-gradient(135deg, rgba(255,250,253,0.92), rgba(244,244,255,0.90));
}

.friends-add-title {
    color: #7a315b;
    font-size: 14px;
    font-weight: 950;
}

.friends-add-note {
    margin-top: 3px;
    color: #776c7b;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.35;
}

.friends-add-input-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 8px;
}

.friends-add-input-row input {
    min-width: 0;
    width: 100%;
    border: 1px solid rgba(211,184,232,0.72);
    border-radius: 12px;
    background: rgba(255,255,255,0.96);
    padding: 9px 11px;
}

.friends-add-input-row button {
    margin: 0 !important;
    white-space: nowrap;
}

.friends-no-requests-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 11px;
    border-radius: 13px;
    color: #796f7c;
    background: rgba(255,255,255,0.60);
    border: 1px solid rgba(211,184,232,0.46);
    font-size: 11.5px;
    font-weight: 800;
}

.friends-no-requests-row span {
    color: #8a5e84;
    font-weight: 950;
}

.friends-request-section {
    margin-bottom: 14px;
    border: 1px solid rgba(211,184,232,0.78);
    border-radius: 18px;
    background: rgba(255,255,255,0.78);
    overflow: hidden;
}

.friends-request-heading {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    padding: 10px 13px;
    background: linear-gradient(90deg, rgba(255,238,248,0.94), rgba(241,245,255,0.94));
    border-bottom: 1px solid rgba(211,184,232,0.56);
    color: #6c5268;
    font-weight: 950;
}

.friends-request-heading > div {
    display: flex;
    align-items: center;
    gap: 7px;
}

.friends-request-count,
.friends-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 25px;
    height: 25px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(211,184,232,0.78);
    color: #7a315b;
    font-size: 11px;
    font-weight: 950;
}

.friends-request-hint {
    color: #877a89;
    font-size: 10.5px;
    font-weight: 750;
}

.friends-request-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 9px;
    padding: 10px;
}

.friends-request-card {
    min-width: 0;
    display: grid;
    grid-template-columns: 52px minmax(0,1fr);
    gap: 9px;
    padding: 9px;
    border: 1px solid rgba(211,184,232,0.58);
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(255,253,254,0.96), rgba(245,244,255,0.90));
}

.friends-request-copy {
    min-width: 0;
}

.friends-request-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 6px;
}

.friends-request-actions button {
    flex: 1;
    min-width: 0;
    margin: 0 !important;
    padding: 6px 8px !important;
    font-size: 10px !important;
}

.friends-accept-btn {
    background: linear-gradient(135deg, rgba(255,234,246,0.96), rgba(239,244,255,0.96)) !important;
}

.friends-main-section {
    border: 1px solid rgba(211,184,232,0.78);
    border-radius: 19px;
    background: rgba(255,255,255,0.78);
    overflow: hidden;
    box-shadow: 0 7px 17px rgba(97,73,120,0.05);
}

.friends-main-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    background: linear-gradient(
        90deg,
        rgba(241,246,255,0.94),
        rgba(255,240,248,0.94),
        rgba(247,238,255,0.94)
    );
    border-bottom: 1px solid rgba(211,184,232,0.56);
}

.friends-main-heading > div:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
}

.friends-main-title {
    color: #684b5d;
    font-size: 19px;
    font-weight: 950;
}

.friends-online-summary {
    color: #756a79;
    font-size: 11px;
    font-weight: 850;
}

#friendsListArea {
    padding: 12px;
}

.friends-modern-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
}

.friends-modern-card {
    min-width: 0;
    padding: 11px;
    border-radius: 17px;
    border: 1px solid rgba(211,184,232,0.62);
    background: linear-gradient(135deg, rgba(255,253,254,0.96), rgba(245,244,255,0.90));
    box-shadow: 0 4px 11px rgba(97,73,120,0.035);
}

.friends-modern-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.friends-modern-copy {
    min-width: 0;
}

.friends-modern-avatar {
    position: relative;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    overflow: visible;
    background: linear-gradient(135deg, #f9e4ef, #e6efff, #f1e6ff);
    border: 1px solid rgba(211,184,232,0.78);
    font-size: 25px;
}

.friends-modern-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.friends-modern-avatar.fallback::before {
    content: "🐱";
}

.friends-online-dot {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 12px;
    height: 12px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #7bcf9c;
}

.friends-name-row {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.friends-name-row strong {
    min-width: 0;
    max-width: 100%;
    color: #7a315b;
    font-size: 15px;
    font-weight: 950;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friends-vip-badge,
.friends-online-label {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 8.5px;
    line-height: 1;
    font-weight: 950;
}

.friends-vip-badge {
    color: #8d3e69;
    background: linear-gradient(135deg, rgba(255,227,243,0.96), rgba(232,239,255,0.96));
    border: 1px solid rgba(220,173,206,0.78);
}

.friends-online-label {
    color: #42775a;
    background: rgba(226,248,235,0.92);
    border: 1px solid rgba(150,211,173,0.72);
}

.friends-cattery {
    margin-top: 2px;
    color: #716675;
    font-size: 11.5px;
    font-weight: 850;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friends-status-text {
    margin-top: 2px;
    color: #8a808c;
    font-size: 9.5px;
    font-weight: 700;
}

.friends-modern-details {
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid rgba(211,184,232,0.38);
}

.friends-breed-line {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: 7px;
    align-items: baseline;
    font-size: 10.5px;
}

.friends-breed-line span {
    color: #8a7d8c;
    font-weight: 750;
}

.friends-breed-line b {
    min-width: 0;
    color: #625768;
    font-weight: 850;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friends-since-line {
    margin-top: 5px;
    color: #8a7d8c;
    font-size: 9.5px;
    font-weight: 700;
}

.friends-modern-actions {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 6px;
    margin-top: 9px;
}

.friends-modern-actions button {
    min-width: 0;
    margin: 0 !important;
    padding: 6px 8px !important;
    font-size: 10px !important;
}

.friends-end-button {
    color: #855b72 !important;
    background: rgba(255,250,252,0.80) !important;
}

.friends-empty-state {
    padding: 28px 18px;
    text-align: center;
}

.friends-empty-state.compact {
    padding: 18px;
}

.friends-empty-icon {
    font-size: 34px;
    margin-bottom: 6px;
}

.friends-empty-title {
    color: #704f67;
    font-size: 17px;
    font-weight: 950;
}

.friends-empty-text {
    max-width: 520px;
    margin: 5px auto 12px;
    color: #7e7381;
    font-size: 11.5px;
    line-height: 1.45;
    font-weight: 700;
}

.friends-empty-state button {
    margin: 0 !important;
}

@media (max-width: 900px) {
    .friends-toolbar {
        grid-template-columns: minmax(0,1fr) 170px;
    }

    .friends-toolbar button {
        width: 100%;
    }

    .friends-request-grid,
    .friends-modern-grid {
        grid-template-columns: 1fr;
    }

    .friends-add-panel-inner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .friends-modern-page {
        margin-top: 10px;
    }

    .friends-modern-hero {
        padding: 15px 16px !important;
    }

    .friends-modern-hero .community-title {
        font-size: 26px !important;
    }

    .friends-toolbar {
        grid-template-columns: 1fr;
        padding: 9px;
    }

    .friends-toolbar select,
    .friends-toolbar button {
        width: 100%;
    }

    .friends-add-input-row {
        grid-template-columns: 1fr;
    }

    .friends-add-input-row button {
        width: 100%;
    }

    .friends-request-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .friends-request-card {
        grid-template-columns: 46px minmax(0,1fr);
    }

    .friends-modern-avatar {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        border-radius: 14px;
        font-size: 22px;
    }

    .friends-request-actions {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }

    .friends-main-heading {
        align-items: flex-start;
    }

    .friends-main-title {
        font-size: 17px;
    }

    #friendsListArea {
        padding: 9px;
    }

    .friends-modern-actions {
        grid-template-columns: 1fr 1fr;
    }

    .friends-end-button {
        grid-column: 1 / -1;
    }
}



/* ===== Genetics Lab temporary maintenance screen ===== */
.genetics-lab-maintenance-page {
    min-height: 52vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px 14px;
}

.genetics-lab-maintenance-card {
    width: min(620px, 100%);
    padding: 34px 28px;
    text-align: center;
    border-radius: 26px;
    border: 1px solid rgba(211, 184, 232, 0.84);
    background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,0.96), transparent 44%),
        linear-gradient(
            135deg,
            rgba(255, 244, 251, 0.97),
            rgba(241, 246, 255, 0.96),
            rgba(248, 239, 255, 0.96)
        );
    box-shadow: 0 14px 32px rgba(96, 72, 118, 0.10);
}

.genetics-lab-maintenance-icon {
    width: 88px;
    height: 88px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(211,184,232,0.70);
}

.genetics-lab-maintenance-icon img {
    width: 68px;
    height: 68px;
    object-fit: contain;
}

.genetics-lab-maintenance-kicker {
    color: #9a6b91;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.genetics-lab-maintenance-title {
    margin-top: 4px;
    color: #6f3d62;
    font-size: 31px;
    line-height: 1.15;
    font-weight: 950;
}

.genetics-lab-maintenance-text {
    margin-top: 10px;
    color: #716675;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 750;
}

@media (max-width: 600px) {
    .genetics-lab-maintenance-page {
        min-height: 46vh;
        padding: 18px 10px;
    }

    .genetics-lab-maintenance-card {
        padding: 27px 18px;
        border-radius: 22px;
    }

    .genetics-lab-maintenance-icon {
        width: 72px;
        height: 72px;
        border-radius: 20px;
    }

    .genetics-lab-maintenance-icon img {
        width: 56px;
        height: 56px;
    }

    .genetics-lab-maintenance-title {
        font-size: 26px;
    }

    .genetics-lab-maintenance-text {
        font-size: 14px;
    }
}


/* ===== Thanks To redesign ===== */
.thanks-page-redesign {
    max-width: 1120px;
}

.thanks-redesign-hero {
    background:
        linear-gradient(
            135deg,
            rgba(255,247,252,0.96),
            rgba(243,239,255,0.94),
            rgba(234,244,255,0.94)
        ) !important;
    border: 1px solid rgba(210,181,234,0.78) !important;
    box-shadow: 0 8px 20px rgba(99,73,122,0.07) !important;
    grid-template-columns: 1fr 94px !important;
    padding: 21px 23px !important;
}

.thanks-redesign-hero .purr-feature-kicker {
    color: #8a2f5a !important;
}

.thanks-redesign-hero .purr-feature-title {
    margin-bottom: 5px;
}

.thanks-redesign-icon {
    width: 78px !important;
    height: 78px !important;
    border-radius: 22px !important;
    margin-left: auto;
    color: #d94f8d;
    font-size: 42px !important;
    background: linear-gradient(145deg, rgba(255,255,255,0.88), rgba(247,235,255,0.86)) !important;
    border: 1px solid rgba(210,181,234,0.74) !important;
}

.thanks-main-card {
    overflow: hidden;
    border: 1px solid rgba(210,181,234,0.76);
    border-radius: 22px;
    background: rgba(255,255,255,0.82);
    box-shadow: 0 8px 20px rgba(99,73,122,0.06);
}

.thanks-main-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 22px 17px;
    background:
        linear-gradient(
            90deg,
            rgba(237,246,255,0.90),
            rgba(255,244,250,0.92),
            rgba(247,239,255,0.92)
        );
    border-bottom: 1px solid rgba(210,181,234,0.52);
}

.thanks-main-kicker {
    margin-bottom: 3px;
    color: #9a6483;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.thanks-main-title {
    color: #684b5d;
    font-size: 25px;
    font-weight: 950;
}

.thanks-main-subtitle {
    max-width: 720px;
    margin-top: 5px;
    color: #716775;
    font-size: 12.5px;
    line-height: 1.45;
    font-weight: 700;
}

.special-thanks-add-button {
    flex: 0 0 auto;
    margin: 0 !important;
    white-space: nowrap;
    padding: 9px 13px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(255,237,247,0.97), rgba(239,244,255,0.97)) !important;
    border: 1px solid rgba(196,158,222,0.80) !important;
    color: #704f67 !important;
    font-size: 11px !important;
}

.special-thanks-admin-panel {
    display: none;
    grid-template-columns: minmax(0,1fr) minmax(300px,0.8fr);
    gap: 14px;
    align-items: center;
    margin: 14px 18px 0;
    padding: 12px 13px;
    border: 1px solid rgba(210,181,234,0.62);
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(255,250,253,0.93), rgba(244,244,255,0.90));
}

.special-thanks-admin-panel.open {
    display: grid;
}

.special-thanks-admin-copy {
    display: grid;
    gap: 2px;
}

.special-thanks-admin-copy strong {
    color: #704f67;
    font-size: 12px;
}

.special-thanks-admin-copy span {
    color: #807581;
    font-size: 10.5px;
    font-weight: 700;
}

.special-thanks-admin-form {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 7px;
}

.special-thanks-admin-form input {
    min-width: 0;
    width: 100%;
    border: 1px solid rgba(210,181,234,0.72);
    border-radius: 11px;
    background: rgba(255,255,255,0.96);
    padding: 8px 10px;
    color: #5f5564;
}

.special-thanks-admin-form button {
    margin: 0 !important;
    white-space: nowrap;
    padding: 7px 11px !important;
    font-size: 10.5px !important;
}

.special-thanks-admin-message {
    grid-column: 1 / -1;
    min-height: 15px;
    color: #8a4f70;
    font-size: 10.5px;
    font-weight: 800;
}

.special-thanks-list-wrap {
    padding: 22px 24px 18px;
}

.special-thanks-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 940px;
    margin: 0 auto;
}

.special-thanks-player {
    margin: 0 !important;
    min-width: 0 !important;
    padding: 7px 11px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(209,179,232,0.72) !important;
    background:
        linear-gradient(
            135deg,
            rgba(255,250,253,0.98),
            rgba(246,242,255,0.96)
        ) !important;
    color: #704f67 !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    font-weight: 850 !important;
    box-shadow: 0 3px 8px rgba(94,69,115,0.04);
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.special-thanks-player:hover {
    transform: translateY(-1px);
    border-color: rgba(179,136,211,0.92) !important;
    box-shadow: 0 5px 11px rgba(94,69,115,0.08);
}

.special-thanks-footer {
    padding: 0 18px 17px;
    color: #918692;
    font-size: 10.5px;
    font-weight: 700;
    text-align: center;
}

@media (max-width: 700px) {
    .thanks-redesign-hero {
        grid-template-columns: 1fr !important;
        text-align: center;
    }

    .thanks-redesign-icon {
        margin: 4px auto 0 !important;
    }

    .thanks-main-head {
        align-items: stretch;
        flex-direction: column;
        text-align: center;
    }

    .special-thanks-add-button {
        width: 100%;
    }

    .special-thanks-admin-panel,
    .special-thanks-admin-panel.open {
        grid-template-columns: 1fr;
    }

    .special-thanks-list-wrap {
        padding: 18px 13px 15px;
    }

    .special-thanks-list {
        gap: 7px;
    }

    .special-thanks-player {
        padding: 7px 10px !important;
        font-size: 11.5px !important;
    }
}

@media (max-width: 430px) {
    .special-thanks-admin-form {
        grid-template-columns: 1fr;
    }

    .special-thanks-admin-form button {
        width: 100%;
    }
}


/* ===== Public cat genetics: full active gene list + admin override ===== */
.public-genetics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 42px;
    row-gap: 0;
}

.public-genetics-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
    padding: 9px 0;
    border-bottom: 1px solid rgba(205, 181, 224, 0.45);
}

.public-genetics-label {
    min-width: 0;
    color: #62586a;
    font-weight: 700;
}

.public-genetics-value {
    flex: 0 0 auto;
    color: #5b5362;
    font-weight: 850;
    text-align: right;
    white-space: nowrap;
}

.public-genetics-row.admin-visible-gene .public-genetics-value {
    color: #3f8b59 !important;
}

.public-genetics-row.admin-visible-gene .public-genetics-label {
    color: #55725f;
}

.public-genetics-note {
    margin-top: 11px;
    line-height: 1.4;
}

@media (max-width: 700px) {
    .public-genetics-grid {
        grid-template-columns: 1fr;
    }

    .public-genetics-row {
        padding: 8px 0;
    }

    .public-genetics-label {
        font-size: 13px;
    }

    .public-genetics-value {
        font-size: 13px;
    }
}


/* ===== Registration breed-first flow ===== */
.registration-progress.registration-progress-five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    max-width: 900px;
}

.starter-breed-choice-card .starter-choice-image-wrap {
    height: 250px;
}

.starter-breed-preview-meta {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.35;
}

.starter-final-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 16px;
}

.starter-final-summary > div {
    padding: 10px 11px;
    border: 1px solid rgba(199,178,228,0.52);
    border-radius: 13px;
    background: rgba(255,255,255,0.62);
}

.starter-final-summary span,
.starter-final-summary strong {
    display: block;
}

.starter-final-summary span {
    color: #8a7b8c;
    font-size: 10px;
    font-weight: 850;
}

.starter-final-summary strong {
    margin-top: 2px;
    color: #6d4d63;
    font-size: 13px;
    font-weight: 950;
}

@media (max-width: 950px) {
    .registration-progress.registration-progress-five {
        grid-template-columns: repeat(5, minmax(105px, 1fr));
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 4px;
    }
}

@media (max-width: 620px) {
    .registration-progress.registration-progress-five {
        display: flex;
        gap: 7px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }

    .registration-progress.registration-progress-five .registration-progress-step {
        flex: 0 0 116px;
        scroll-snap-align: start;
    }

    .starter-breed-choice-card .starter-choice-image-wrap {
        height: 205px;
    }

    .starter-final-summary {
        grid-template-columns: 1fr;
    }
}


/* ===== Name blacklist ===== */
.name-blacklist-inline-error,
.starter-registration-message {
    display: none;
    margin-top: 7px;
    color: #b63b5d !important;
    font-size: 11.5px;
    line-height: 1.35;
    font-weight: 850;
}

.name-blacklist-inline-error:not(:empty),
.starter-registration-message:not(:empty) {
    display: block;
}

.birth-name-error {
    margin: 12px 0 0;
    padding: 9px 11px;
    border: 1px solid rgba(205, 95, 128, 0.35);
    border-radius: 12px;
    background: rgba(255, 239, 244, 0.78);
}

.purr-name-restriction-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 100000;
    max-width: min(440px, calc(100vw - 28px));
    padding: 11px 15px;
    border: 1px solid rgba(199, 72, 109, 0.55);
    border-radius: 14px;
    background: rgba(255, 239, 244, 0.98);
    color: #a52f52;
    box-shadow: 0 10px 28px rgba(87, 39, 65, 0.16);
    font-size: 12.5px;
    font-weight: 900;
    text-align: center;
    transform: translate(-50%, 20px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
}

.purr-name-restriction-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

.admin-blacklist-card {
    max-width: 920px;
}

.admin-blacklist-add-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
    margin-top: 13px;
}

.admin-blacklist-add-row input {
    width: 100%;
    min-width: 0;
}

.admin-blacklist-message {
    min-height: 18px;
    margin-top: 7px;
    font-size: 11px;
    font-weight: 850;
}

.admin-blacklist-message.error {
    color: #b43a5d;
}

.admin-blacklist-message.success {
    color: #477b59;
}

.admin-blacklist-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.admin-blacklist-head button {
    margin: 0 !important;
}

.admin-blacklist-list {
    display: grid;
    gap: 7px;
}

.admin-blacklist-item {
    display: grid;
    grid-template-columns: minmax(120px, 0.7fr) minmax(160px, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 9px 11px;
    border: 1px solid rgba(207, 183, 225, 0.62);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.70);
}

.admin-blacklist-word {
    color: #793253;
    font-size: 13px;
    font-weight: 950;
    overflow-wrap: anywhere;
}

.admin-blacklist-meta {
    color: #7d7180;
    font-size: 10.5px;
    font-weight: 700;
}

.admin-blacklist-delete {
    margin: 0 !important;
    color: #9d3557 !important;
    background: rgba(255, 242, 247, 0.88) !important;
}

@media (max-width: 650px) {
    .admin-blacklist-add-row {
        grid-template-columns: 1fr;
    }

    .admin-blacklist-add-row button {
        width: 100%;
    }

    .admin-blacklist-item {
        grid-template-columns: 1fr auto;
    }

    .admin-blacklist-meta {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}



/* ===== PurrPixels Mobile: compact My Page profile information ===== */
@media (max-width: 768px) {
    body.purr-mobile-game .breeder-profile-info-grid {
        grid-column: 1 / -1 !important;
        display: flex !important;
        align-items: stretch !important;
        gap: 7px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 8px 0 0 0 !important;
        padding: 1px 1px 5px 1px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-x: contain !important;
        scroll-snap-type: x proximity !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    body.purr-mobile-game .breeder-profile-info-grid::-webkit-scrollbar {
        display: none !important;
    }

    body.purr-mobile-game .breeder-profile-info-grid > div {
        display: contents !important;
    }

    body.purr-mobile-game .breeder-profile-info-row {
        flex: 0 0 108px !important;
        width: 108px !important;
        min-width: 108px !important;
        min-height: 54px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 3px !important;
        padding: 7px 6px !important;
        margin: 0 !important;
        border: 1px solid rgba(216,184,238,0.52) !important;
        border-radius: 14px !important;
        background: rgba(255,255,255,0.68) !important;
        box-shadow: 0 4px 10px rgba(88,64,120,0.05) !important;
        text-align: center !important;
        scroll-snap-align: start !important;
    }

    body.purr-mobile-game .breeder-profile-info-row span {
        width: 100% !important;
        min-height: 18px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #8a2f5a !important;
        font-size: 8.5px !important;
        line-height: 1.05 !important;
        font-weight: 900 !important;
        white-space: normal !important;
    }

    body.purr-mobile-game .breeder-profile-info-row b {
        width: 100% !important;
        color: #4f4a5e !important;
        font-size: 11px !important;
        line-height: 1.05 !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* The info strip is now only one row high, so reduce surrounding space too. */
    body.purr-mobile-game .breeder-profile-actions {
        margin-top: 7px !important;
    }
}

@media (max-width: 380px) {
    body.purr-mobile-game .breeder-profile-info-row {
        flex-basis: 100px !important;
        width: 100px !important;
        min-width: 100px !important;
        min-height: 50px !important;
        padding: 6px 5px !important;
    }

    body.purr-mobile-game .breeder-profile-info-row span {
        font-size: 8px !important;
    }

    body.purr-mobile-game .breeder-profile-info-row b {
        font-size: 10.5px !important;
    }
}



/* ===== PurrPixels Mobile: compact WorldShow ===== */
.worldcup-mobile-filter-toggle {
    display: none;
}

.worldcup-mobile-result-strip {
    display: block;
}

@media (max-width: 768px) {
    body.purr-mobile-game .worldcup-page {
        margin-top: 8px !important;
    }

    body.purr-mobile-game .worldcup-page > button:first-child {
        min-height: 36px !important;
        padding: 7px 12px !important;
        margin-bottom: 8px !important;
        border-radius: 12px !important;
        font-size: 12px !important;
    }

    body.purr-mobile-game .worldcup-clean-page .worldcup-hero {
        grid-template-columns: minmax(0, 1fr) 100px !important;
        gap: 9px !important;
        align-items: stretch !important;
        padding: 12px !important;
        margin-bottom: 10px !important;
        border-radius: 20px !important;
    }

    body.purr-mobile-game .worldcup-kicker {
        margin-bottom: 3px !important;
        font-size: 9px !important;
        line-height: 1.1 !important;
        letter-spacing: .03em !important;
    }

    body.purr-mobile-game .worldcup-title,
    body.purr-mobile-game .worldcup-home-hero .worldcup-title,
    body.purr-mobile-game .worldcup-entry-hero .worldcup-title {
        font-size: 24px !important;
        line-height: 1.02 !important;
        margin-bottom: 4px !important;
    }

    body.purr-mobile-game .worldcup-subtitle {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        font-size: 10.5px !important;
        line-height: 1.25 !important;
    }

    body.purr-mobile-game .worldcup-hero-actions {
        margin-top: 8px !important;
    }

    body.purr-mobile-game .worldcup-primary-button {
        width: 100% !important;
        min-height: 38px !important;
        padding: 8px 10px !important;
        font-size: 11px !important;
        white-space: normal !important;
    }

    body.purr-mobile-game .worldcup-focus-card,
    body.purr-mobile-game .worldcup-focus-card-large {
        min-height: 0 !important;
        padding: 9px 6px !important;
        border-radius: 16px !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    body.purr-mobile-game .worldcup-focus-day {
        font-size: 9px !important;
        line-height: 1.1 !important;
        margin-bottom: 4px !important;
    }

    body.purr-mobile-game .worldcup-focus-trait {
        font-size: 18px !important;
        line-height: 1.05 !important;
    }

    body.purr-mobile-game .worldcup-focus-card .small-note {
        margin-top: 4px !important;
        font-size: 8.5px !important;
        line-height: 1.15 !important;
    }

    /* Four overview stats now use one short horizontal strip. */
    body.purr-mobile-game .worldcup-overview-stats {
        display: flex !important;
        gap: 7px !important;
        width: 100% !important;
        margin: 0 0 9px 0 !important;
        padding: 1px 1px 4px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x proximity !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    body.purr-mobile-game .worldcup-overview-stats::-webkit-scrollbar,
    body.purr-mobile-game .worldcup-info-strip::-webkit-scrollbar,
    body.purr-mobile-game .worldcup-prize-list-clean::-webkit-scrollbar,
    body.purr-mobile-game .worldcup-mobile-result-strip::-webkit-scrollbar,
    body.purr-mobile-game .worldcup-top3-grid::-webkit-scrollbar {
        display: none !important;
    }

    body.purr-mobile-game .worldcup-overview-stats > div {
        flex: 0 0 100px !important;
        min-height: 58px !important;
        padding: 8px 7px !important;
        border-radius: 14px !important;
        scroll-snap-align: start !important;
    }

    body.purr-mobile-game .worldcup-overview-stats b {
        font-size: 17px !important;
    }

    body.purr-mobile-game .worldcup-overview-stats span {
        margin-top: 3px !important;
        font-size: 8px !important;
        line-height: 1.05 !important;
    }

    /* Rules and scoring also become one swipeable row. */
    body.purr-mobile-game .worldcup-info-strip {
        display: flex !important;
        gap: 7px !important;
        width: 100% !important;
        margin: 0 0 10px 0 !important;
        padding: 1px 1px 4px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x proximity !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    body.purr-mobile-game .worldcup-info-strip > div {
        flex: 0 0 175px !important;
        min-height: 58px !important;
        padding: 8px 9px !important;
        border-radius: 14px !important;
        scroll-snap-align: start !important;
    }

    body.purr-mobile-game .worldcup-info-strip b {
        margin-bottom: 2px !important;
        font-size: 10px !important;
    }

    body.purr-mobile-game .worldcup-info-strip span {
        font-size: 9px !important;
        line-height: 1.18 !important;
    }

    body.purr-mobile-game .worldcup-layout {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    body.purr-mobile-game .worldcup-card {
        margin-bottom: 9px !important;
        border-radius: 17px !important;
    }

    body.purr-mobile-game .worldcup-card-title,
    body.purr-mobile-game .worldcup-entry-page .worldcup-card-title {
        padding: 10px 11px !important;
        font-size: 17px !important;
    }

    body.purr-mobile-game .worldcup-card-body {
        padding: 9px !important;
    }

    /* Prizes stay readable without six tall rows. */
    body.purr-mobile-game .worldcup-prize-list-clean {
        display: flex !important;
        gap: 7px !important;
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        scroll-snap-type: x proximity !important;
    }

    body.purr-mobile-game .worldcup-prize-clean {
        flex: 0 0 205px !important;
        min-height: 54px !important;
        grid-template-columns: 72px 1fr !important;
        gap: 7px !important;
        padding: 8px 9px !important;
        border-radius: 13px !important;
        scroll-snap-align: start !important;
    }

    body.purr-mobile-game .worldcup-prize-clean span,
    body.purr-mobile-game .worldcup-prize-clean b {
        font-size: 10px !important;
        line-height: 1.15 !important;
    }

    /* Latest results and history become horizontal cards instead of long lists. */
    body.purr-mobile-game .worldcup-mobile-result-strip {
        display: flex !important;
        gap: 7px !important;
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        scroll-snap-type: x proximity !important;
        padding-bottom: 2px !important;
    }

    body.purr-mobile-game .worldcup-mobile-result-strip .worldcup-result-row-clean {
        flex: 0 0 225px !important;
        min-height: 68px !important;
        display: grid !important;
        grid-template-columns: 38px minmax(0, 1fr) !important;
        gap: 7px !important;
        align-items: center !important;
        padding: 7px 8px !important;
        margin: 0 !important;
        border: 1px solid rgba(216,184,238,0.52) !important;
        border-radius: 13px !important;
        background: rgba(255,255,255,0.62) !important;
        scroll-snap-align: start !important;
    }

    body.purr-mobile-game .worldcup-mobile-result-strip .worldcup-result-row-clean > small {
        grid-column: 2 !important;
        font-size: 8.5px !important;
        line-height: 1.1 !important;
    }

    body.purr-mobile-game .worldcup-place-badge {
        width: 34px !important;
        height: 34px !important;
        font-size: 11px !important;
    }

    body.purr-mobile-game .worldcup-mobile-result-strip b {
        font-size: 11px !important;
    }

    body.purr-mobile-game .worldcup-mobile-result-strip small {
        font-size: 9px !important;
    }

    /* Entry page notice and explanatory text. */
    body.purr-mobile-game .worldcup-entry-notice {
        margin: 0 0 9px 0 !important;
        padding: 9px 10px !important;
        border-radius: 14px !important;
        font-size: 10px !important;
        line-height: 1.25 !important;
    }

    body.purr-mobile-game .worldcup-focus-ap-note {
        margin: 0 0 9px 0 !important;
        padding: 8px 9px !important;
        border-radius: 13px !important;
        font-size: 9.5px !important;
        line-height: 1.2 !important;
    }

    /* Top 3 is now one swipeable row instead of three stacked cards. */
    body.purr-mobile-game .worldcup-top3-panel {
        margin: 0 0 9px 0 !important;
        padding: 9px !important;
        border-radius: 16px !important;
    }

    body.purr-mobile-game .worldcup-top3-head {
        margin-bottom: 7px !important;
    }

    body.purr-mobile-game .worldcup-top3-title {
        font-size: 14px !important;
    }

    body.purr-mobile-game .worldcup-top3-subtitle {
        font-size: 9px !important;
        line-height: 1.15 !important;
    }

    body.purr-mobile-game .worldcup-top3-grid {
        display: flex !important;
        gap: 7px !important;
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        scroll-snap-type: x proximity !important;
    }

    body.purr-mobile-game .worldcup-top-cat-card {
        flex: 0 0 220px !important;
        min-height: 72px !important;
        display: grid !important;
        grid-template-columns: 54px minmax(0, 1fr) 54px !important;
        gap: 7px !important;
        padding: 7px !important;
        border-radius: 13px !important;
        scroll-snap-align: start !important;
    }

    body.purr-mobile-game .worldcup-top-cat-image img {
        width: 48px !important;
        height: 48px !important;
    }

    body.purr-mobile-game .worldcup-top-cat-rank {
        width: 22px !important;
        height: 22px !important;
        margin-bottom: 2px !important;
        font-size: 9px !important;
    }

    body.purr-mobile-game .worldcup-top-cat-name {
        font-size: 11px !important;
    }

    body.purr-mobile-game .worldcup-top-cat-meta {
        font-size: 8.5px !important;
        line-height: 1.15 !important;
    }

    body.purr-mobile-game .worldcup-top-cat-score {
        grid-column: auto !important;
        min-width: 0 !important;
        text-align: right !important;
    }

    body.purr-mobile-game .worldcup-top-cat-score b {
        font-size: 15px !important;
    }

    body.purr-mobile-game .worldcup-top-cat-score span {
        font-size: 7.5px !important;
    }

    /* Filters are collapsed until the player actually needs them. */
    body.purr-mobile-game .worldcup-mobile-filter-toggle {
        width: 100% !important;
        min-height: 40px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 0 8px 0 !important;
        padding: 8px 11px !important;
        border: 1px solid rgba(194,160,225,0.72) !important;
        border-radius: 13px !important;
        background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(246,235,255,0.90)) !important;
        color: #684b5d !important;
        font-size: 11px !important;
        font-weight: 950 !important;
    }

    body.purr-mobile-game .worldcup-filter-grid.mobile-collapsed {
        display: none !important;
    }

    body.purr-mobile-game .worldcup-filter-grid.mobile-open {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        margin-bottom: 8px !important;
    }

    body.purr-mobile-game .worldcup-filter-grid label {
        font-size: 8.5px !important;
    }

    body.purr-mobile-game .worldcup-filter-grid input,
    body.purr-mobile-game .worldcup-filter-grid select {
        min-height: 35px !important;
        margin-top: 3px !important;
        padding: 6px 7px !important;
        border-radius: 10px !important;
        font-size: 10px !important;
    }

    body.purr-mobile-game .worldcup-filter-grid label:first-child {
        grid-column: 1 / -1 !important;
    }

    body.purr-mobile-game .worldcup-filter-summary {
        margin: 4px 0 8px 0 !important;
        font-size: 9px !important;
        line-height: 1.2 !important;
    }

    /* Eligible cats use two compact columns on phones. */
    body.purr-mobile-game .worldcup-cat-grid-select {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    body.purr-mobile-game .worldcup-cat-choice {
        min-height: 0 !important;
        padding: 8px 6px !important;
        border-radius: 14px !important;
    }

    body.purr-mobile-game .worldcup-cat-choice img {
        width: min(27vw, 102px) !important;
        height: min(27vw, 102px) !important;
        margin-bottom: 4px !important;
    }

    body.purr-mobile-game .worldcup-cat-name {
        font-size: 11px !important;
        line-height: 1.1 !important;
    }

    body.purr-mobile-game .worldcup-cat-meta {
        min-height: 0 !important;
        margin-top: 3px !important;
        font-size: 8.5px !important;
        line-height: 1.18 !important;
    }

    body.purr-mobile-game .worldcup-cat-choice .worldcup-cat-score {
        margin-top: 6px !important;
        font-size: 14px !important;
    }

    body.purr-mobile-game .worldcup-cat-focus-label {
        margin-top: 2px !important;
        font-size: 7.5px !important;
    }

    body.purr-mobile-game .worldcup-cat-choice button {
        min-height: 34px !important;
        margin-top: 6px !important;
        padding: 6px 7px !important;
        font-size: 9px !important;
        line-height: 1.1 !important;
    }
}

@media (max-width: 380px) {
    body.purr-mobile-game .worldcup-clean-page .worldcup-hero {
        grid-template-columns: minmax(0, 1fr) 88px !important;
        padding: 10px !important;
    }

    body.purr-mobile-game .worldcup-title,
    body.purr-mobile-game .worldcup-home-hero .worldcup-title,
    body.purr-mobile-game .worldcup-entry-hero .worldcup-title {
        font-size: 21px !important;
    }

    body.purr-mobile-game .worldcup-cat-grid-select {
        gap: 6px !important;
    }

    body.purr-mobile-game .worldcup-cat-choice {
        padding: 7px 5px !important;
    }
}



/* ===== PurrPixels Pedigree Name + Nickname identity ===== */
.pedigree-name-lock-note {
    margin-top: 6px;
    color: #b33d59;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 850;
}

.birth-kitten-field-label {
    display: block;
    margin: 8px 0 5px;
    color: #7b6c80;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.birth-kitten-pedigree-number {
    margin: 8px 0 4px;
    padding: 7px 8px;
    border-radius: 11px;
    background: rgba(255,255,255,0.68);
    border: 1px solid rgba(216,184,238,0.48);
    color: #695a70;
    font-size: 11px;
    font-weight: 800;
}

.cat-pedigree-identity {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 12px;
    margin-top: 6px;
}

.cat-pedigree-identity > div {
    min-width: 0;
    padding: 5px 9px;
    border-radius: 11px;
    background: rgba(255,255,255,0.58);
    border: 1px solid rgba(216,184,238,0.44);
}

.cat-pedigree-identity span {
    display: block;
    color: #8f8297;
    font-size: 8px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.cat-pedigree-identity b {
    display: block;
    margin-top: 1px;
    color: #5c4966;
    font-size: 11px;
    font-weight: 900;
}

.pedigree-page-identity {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px 12px;
    margin: 7px 0 5px;
    color: #6e6376;
    font-size: 12px;
    font-weight: 800;
}

.pedigree-edit-name-button {
    min-height: 32px;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid rgba(194,160,225,0.72);
    background: rgba(255,255,255,0.76);
    color: #7a2f58;
    font-size: 11px;
    font-weight: 950;
}

.office-pedigree-setting {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px 12px;
    align-items: end;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(216,184,238,0.48);
}

.office-pedigree-setting .office-cost-note {
    grid-column: 1 / -1;
    margin: 0;
}

@media (max-width: 768px) {
    .office-pedigree-setting {
        grid-template-columns: 1fr;
    }

    .office-pedigree-setting .office-rename-button {
        width: 100%;
    }

    .pedigree-page-identity {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .pedigree-edit-name-button {
        width: 100%;
    }

    .cat-pedigree-identity {
        gap: 5px;
    }

    .cat-pedigree-identity > div {
        flex: 1 1 145px;
    }
}



/* ===== Cat profile: nickname + compact pedigree subtitle ===== */
.cat-pedigree-subtitle {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 5px;
    color: #6b4d66;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 800;
    text-align: center;
}

.cat-pedigree-name-part {
    font-weight: 750;
}

.cat-pedigree-cattery,
.cat-pedigree-cattery-link {
    font-weight: 950;
}

.cat-pedigree-cattery-link {
    display: inline;
    width: auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: inherit;
    font: inherit;
    font-weight: 950;
    line-height: inherit;
    text-decoration: none;
    outline: none;
    cursor: pointer;
}

.cat-pedigree-cattery-link:hover,
.cat-pedigree-cattery-link:focus,
.cat-pedigree-cattery-link:active {
    color: #8a2f5a;
    background: none;
    border: 0;
    box-shadow: none;
    text-decoration: none;
    transform: none;
    outline: none;
}

.cat-pedigree-name-space {
    white-space: pre;
}

.public-cat-status-card .cat-pedigree-subtitle {
    margin-top: 3px;
    margin-bottom: 8px;
    font-size: 13px;
}

@media (max-width: 768px) {
    .cat-pedigree-subtitle {
        margin-top: 3px;
        font-size: 13px;
        line-height: 1.2;
    }

    .public-cat-status-card .cat-pedigree-subtitle {
        font-size: 12px;
    }
}



/* ===== PurrPixels VIP remaining-time display ===== */
#premiumPill.vip-status-pill-top {
    cursor: pointer;
    white-space: nowrap;
}

#premiumPill.vip-status-pill-top:hover,
#premiumPill.vip-status-pill-top:focus {
    transform: translateY(-1px);
    box-shadow: 0 7px 16px rgba(86,58,112,0.12);
    outline: none;
}

.vip-validity-grid,
.vip-status-detail-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.vip-validity-grid {
    margin-top: 10px;
}

.vip-validity-grid > div,
.vip-status-detail-list > div {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid rgba(218,188,238,0.70);
    border-radius: 13px;
    background: rgba(255,255,255,0.68);
}

.vip-validity-grid span,
.vip-status-detail-list span {
    display: block;
    margin-bottom: 3px;
    color: #8d7a91;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.vip-validity-grid b,
.vip-status-detail-list b {
    display: block;
    color: #65475f;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 950;
}

.vip-status-detail-list {
    margin: 10px 0 14px;
}

@media (max-width: 600px) {
    .vip-validity-grid,
    .vip-status-detail-list {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .vip-validity-grid > div,
    .vip-status-detail-list > div {
        padding: 8px 9px;
    }
}


/* ===== CSS already moved manually before this cleanup ===== */
/* ===== Cat Market: edit active sale price ===== */
.public-sale-owner-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.sale-price-editor-card {
    width: min(460px, calc(100vw - 28px));
}

.sale-price-editor-field {
    margin-top: 16px;
}

.sale-price-editor-field > label {
    display: block;
    margin-bottom: 7px;
    color: #684b5d;
    font-weight: 900;
}

.sale-price-stepper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    width: 100%;
    max-width: 310px;
    overflow: hidden;
    border: 1px solid #cfe2d7;
    border-radius: 12px;
    background: rgba(255,255,255,0.96);
}

.sale-price-stepper input {
    width: 100%;
    min-width: 0;
    margin: 0;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 11px 12px;
    background: transparent !important;
    font-size: 16px;
    font-weight: 900;
    color: #5a4664;
    outline: none;
    appearance: textfield;
    -moz-appearance: textfield;
}

.sale-price-stepper input::-webkit-outer-spin-button,
.sale-price-stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.sale-price-stepper-buttons {
    display: grid;
    grid-template-rows: 1fr 1fr;
    border-left: 1px solid #cfe2d7;
}

.sale-price-stepper-button {
    min-width: 0;
    min-height: 22px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, #f8f2ff, #edf8f1) !important;
    color: #684b5d !important;
    font-size: 10px;
    line-height: 1;
    box-shadow: none !important;
}

.sale-price-stepper-button + .sale-price-stepper-button {
    border-top: 1px solid #cfe2d7 !important;
}

.sale-price-stepper-button:hover {
    background: linear-gradient(180deg, #f1e5ff, #e0f2e6) !important;
    transform: none !important;
}

.sale-price-editor-note {
    max-width: 340px;
    margin-top: 8px;
}

.sale-price-editor-warning {
    margin-top: 14px;
    padding: 11px 12px;
    border-radius: 12px;
    border: 1px solid rgba(230, 176, 191, 0.9);
    background: rgba(255, 241, 246, 0.92);
    color: #814e62;
    font-weight: 800;
    line-height: 1.4;
}

@media (max-width: 600px) {
    .public-sale-owner-actions {
        width: 100%;
    }

    .public-sale-owner-actions button {
        flex: 1 1 140px;
    }

    .sale-price-stepper {
        max-width: none;
    }
}


/* ===== Extracted: purrpixels-worldshow-profile-small-pagination ===== */
/* ===== Breeder profile WorldShow: small 5-per-page layout ===== */

.worldshow-profile-card-compact .breeder-clean-card-body {
    padding: 12px !important;
}

.worldshow-profile-card-compact .worldshow-profile-overview {
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
}

.worldshow-profile-card-compact .worldshow-profile-stat {
    min-height: 82px !important;
    padding: 9px 7px !important;
    border-radius: 14px !important;
}

.worldshow-profile-card-compact .worldshow-profile-stat strong {
    font-size: 27px !important;
    line-height: 1 !important;
    margin-bottom: 5px !important;
}

.worldshow-profile-card-compact .worldshow-profile-stat span {
    font-size: 9.5px !important;
    line-height: 1.15 !important;
}

.worldshow-profile-results-wrap {
    min-width: 0;
}

.worldshow-profile-card-compact .worldshow-profile-results {
    gap: 6px !important;
}

.worldshow-profile-card-compact .worldshow-profile-entry {
    grid-template-columns: 60px minmax(110px, 1fr) minmax(170px, 220px) !important;
    gap: 7px !important;
    padding: 7px 9px !important;
    min-height: 58px !important;
    border-radius: 13px !important;
    box-shadow: 0 3px 8px rgba(122,47,88,0.035) !important;
}

.worldshow-profile-card-compact .worldshow-profile-place-badge {
    min-width: 52px !important;
    padding: 5px 7px !important;
    font-size: 10px !important;
    line-height: 1 !important;
}

.worldshow-profile-card-compact .worldshow-profile-catname {
    font-size: 14px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
}

.worldshow-profile-card-compact .worldshow-profile-cattery {
    margin-top: 2px !important;
    font-size: 10.5px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
}

.worldshow-profile-card-compact .worldshow-profile-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
}

.worldshow-profile-card-compact .worldshow-profile-meta-item {
    min-height: 38px !important;
    padding: 5px 7px !important;
    border-radius: 10px !important;
}

.worldshow-profile-card-compact .worldshow-profile-meta-item span {
    font-size: 7.5px !important;
    line-height: 1 !important;
    margin-bottom: 2px !important;
}

.worldshow-profile-card-compact .worldshow-profile-meta-item strong {
    font-size: 10.5px !important;
    line-height: 1.1 !important;
}

.worldshow-profile-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 9px;
}

.worldshow-profile-pagination button {
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0 !important;
    border-radius: 999px !important;
    font-size: 16px;
    line-height: 1;
}

.worldshow-profile-pagination button:disabled {
    opacity: 0.35;
    cursor: default;
}

.worldshow-profile-pagination span {
    min-width: 72px;
    text-align: center;
    font-size: 10.5px;
    font-weight: 900;
    color: #6b5673;
}

@media (max-width: 900px) {
    .worldshow-profile-card-compact .worldshow-profile-overview {
        grid-template-columns: 1fr !important;
    }

    .worldshow-profile-card-compact .worldshow-profile-stat {
        min-height: auto !important;
        width: 100% !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 7px !important;
    }

    .worldshow-profile-card-compact .worldshow-profile-stat strong {
        margin: 0 !important;
        font-size: 24px !important;
    }

    .worldshow-profile-card-compact .worldshow-profile-entry {
        grid-template-columns: 56px minmax(100px, 1fr) minmax(150px, 190px) !important;
    }
}

@media (max-width: 620px) {
    .worldshow-profile-card-compact .breeder-clean-card-body {
        padding: 9px !important;
    }

    .worldshow-profile-card-compact .worldshow-profile-entry {
        grid-template-columns: 50px minmax(0, 1fr) !important;
        gap: 6px !important;
        text-align: left !important;
    }

    .worldshow-profile-card-compact .worldshow-profile-place {
        justify-content: flex-start !important;
    }

    .worldshow-profile-card-compact .worldshow-profile-catinfo {
        text-align: left !important;
    }

    .worldshow-profile-card-compact .worldshow-profile-meta {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .worldshow-profile-card-compact .worldshow-profile-meta-item {
        min-height: 34px !important;
    }
}


/* ===== Extracted: purrpixels-market-mobile-listing-date-sort-fix ===== */
@media (max-width: 1000px) {
    body.purr-mobile-game .market-mobile-date-sort {
        display: grid !important;
        grid-template-columns: auto minmax(180px, 280px) !important;
        align-items: center !important;
        justify-content: end !important;
        gap: 9px !important;
        margin: 0 0 10px 0 !important;
        padding: 9px 11px !important;
        border: 1px solid rgba(216,184,238,0.72) !important;
        border-radius: 13px !important;
        background: rgba(255,255,255,0.82) !important;
        box-shadow: 0 5px 12px rgba(88,64,120,0.06) !important;
    }

    body.purr-mobile-game .market-mobile-date-sort label {
        font-size: 11px !important;
        line-height: 1.15 !important;
        font-weight: 900 !important;
        color: #684b5d !important;
    }

    body.purr-mobile-game .market-mobile-date-sort select {
        width: 100% !important;
        min-height: 36px !important;
        margin: 0 !important;
        padding: 6px 8px !important;
        border-radius: 10px !important;
        font-size: 12px !important;
        font-weight: 800 !important;
    }
}

@media (max-width: 600px) {
    body.purr-mobile-game .market-mobile-date-sort {
        grid-template-columns: 1fr !important;
        justify-content: stretch !important;
        gap: 5px !important;
    }
}


/* ===== Extracted: purrpixels-offers-admin-management ===== */
.purrpixels-offers-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.purrpixels-offers-admin-add {
    margin-left: auto;
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
}

.purrpixels-offers-admin-note {
    margin-top: 7px;
    font-size: 12px;
    font-weight: 800;
    color: #765d7b;
}

.reserved-cat-card.admin-offer-card {
    position: relative;
}

.purrpixels-offer-remove-button {
    position: absolute;
    z-index: 8;
    top: 8px;
    right: 8px;
    width: 29px;
    height: 29px;
    min-width: 29px;
    padding: 0 !important;
    display: grid;
    place-items: center;
    border-radius: 999px !important;
    border: 1px solid rgba(198,116,139,0.55) !important;
    background: rgba(255,244,248,0.96) !important;
    color: #a34f69 !important;
    font-size: 20px;
    line-height: 1;
    font-weight: 900;
    box-shadow: 0 4px 10px rgba(112,65,85,0.10) !important;
}

.purrpixels-offer-remove-button:hover {
    background: rgba(255,228,237,0.98) !important;
}

.purrpixels-offer-admin-overlay {
    position: fixed;
    inset: 0;
    z-index: 30000;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(64,45,78,0.34);
    backdrop-filter: blur(7px);
}

.purrpixels-offer-admin-modal {
    width: min(860px, 96vw);
    max-height: min(850px, 92vh);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    border: 1px solid rgba(216,184,238,0.85);
    border-radius: 22px;
    background:
        linear-gradient(
            145deg,
            rgba(255,250,255,0.98),
            rgba(240,248,255,0.97),
            rgba(250,236,255,0.97)
        );
    box-shadow: 0 22px 60px rgba(70,45,90,0.24);
}

.purrpixels-offer-admin-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 17px 19px 14px;
    border-bottom: 1px solid rgba(216,184,238,0.65);
}

.purrpixels-offer-admin-head h2 {
    margin: 0 0 5px;
    color: #684b5d;
    font-size: 21px;
}

.purrpixels-offer-admin-head p {
    margin: 0;
    color: #806f86;
    font-size: 12px;
    line-height: 1.4;
}

.purrpixels-offer-admin-close {
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0 !important;
    border-radius: 999px !important;
    font-size: 22px;
    line-height: 1;
}

.purrpixels-offer-admin-scroll {
    overflow-y: auto;
    padding: 16px 19px 20px;
}

.purrpixels-offer-admin-section-title {
    margin: 13px 0 9px;
    color: #684b5d;
    font-size: 13px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .045em;
}

.purrpixels-offer-admin-section-title:first-child {
    margin-top: 0;
}

.purrpixels-offer-admin-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.purrpixels-offer-admin-grid label {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.purrpixels-offer-admin-grid label > span {
    color: #6c5b72;
    font-size: 10.5px;
    font-weight: 900;
}

.purrpixels-offer-admin-grid input,
.purrpixels-offer-admin-grid select {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 8px 9px;
    border: 1px solid rgba(205,184,221,0.9);
    border-radius: 10px;
    background: rgba(255,255,255,0.88);
    color: #5b4962;
    font-size: 12px;
}

.purrpixels-offer-admin-grid.genetics {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}

.purrpixels-offer-admin-result {
    min-height: 20px;
    margin-top: 12px;
    color: #9b4c63;
    font-size: 12px;
    font-weight: 800;
}

.purrpixels-offer-admin-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding: 12px 19px 15px;
    border-top: 1px solid rgba(216,184,238,0.65);
    background: rgba(255,255,255,0.56);
}

.purrpixels-offer-admin-actions button {
    min-width: 118px;
}

.reserved-cat-buy-button:disabled {
    opacity: 0.58;
    cursor: default;
}

@media (max-width: 760px) {
    .purrpixels-offers-title-row {
        align-items: stretch;
        flex-direction: column;
    }

    .purrpixels-offers-admin-add {
        margin-left: 0;
        align-self: flex-start;
    }

    .purrpixels-offer-admin-overlay {
        align-items: end;
        padding: 8px;
    }

    .purrpixels-offer-admin-modal {
        width: 100%;
        max-height: 94vh;
        border-radius: 20px 20px 14px 14px;
    }

    .purrpixels-offer-admin-grid,
    .purrpixels-offer-admin-grid.genetics {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .purrpixels-offer-admin-head {
        padding: 14px;
    }

    .purrpixels-offer-admin-scroll {
        padding: 13px 14px 18px;
    }

    .purrpixels-offer-admin-actions {
        padding: 10px 14px 13px;
    }
}

@media (max-width: 430px) {
    .purrpixels-offer-admin-grid,
    .purrpixels-offer-admin-grid.genetics {
        grid-template-columns: 1fr;
    }

    .purrpixels-offer-admin-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .purrpixels-offer-admin-actions button {
        min-width: 0;
    }
}


/* ===== Extracted: purrpixels-mobile-bank-profile-final-fix ===== */
/* ===== Mobile breeder profile: Last Connection online marker ===== */
@media (max-width: 768px) {
    body.purr-mobile-game
    .breeder-profile-info-row
    .breeder-online-value {
        width: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        display: inline-flex !important;
        flex: 0 0 auto !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #47785b !important;
        font-size: 10.5px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }

    body.purr-mobile-game
    .breeder-profile-info-row
    .breeder-online-value
    .breeder-online-dot {
        display: inline-block !important;
        width: 7px !important;
        min-width: 7px !important;
        max-width: 7px !important;
        height: 7px !important;
        min-height: 7px !important;
        max-height: 7px !important;
        flex: 0 0 7px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: #5ccf87 !important;
        box-shadow:
            0 0 0 2px rgba(92,207,135,0.16) !important;
    }
}


/* ===== Mobile Bank & Finances ===== */
@media (max-width: 768px) {
    body.purr-mobile-game .bank-page {
        width: 100% !important;
        max-width: none !important;
        margin: 6px 0 88px !important;
    }

    body.purr-mobile-game .bank-hero {
        grid-template-columns:
            minmax(0, 1fr) 64px !important;
        gap: 10px !important;
        align-items: center !important;
        padding: 13px !important;
        margin-bottom: 10px !important;
        border-radius: 18px !important;
        text-align: left !important;
    }

    body.purr-mobile-game .bank-kicker {
        margin-bottom: 3px !important;
        font-size: 9px !important;
        line-height: 1.1 !important;
        letter-spacing: .045em !important;
    }

    body.purr-mobile-game .bank-title {
        margin-bottom: 4px !important;
        font-size: 24px !important;
        line-height: 1.05 !important;
    }

    body.purr-mobile-game .bank-subtitle {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 3 !important;
        overflow: hidden !important;
        font-size: 10.5px !important;
        line-height: 1.3 !important;
    }

    body.purr-mobile-game .bank-hero-icon {
        width: 58px !important;
        height: 58px !important;
        margin: 0 !important;
        border-radius: 16px !important;
    }

    body.purr-mobile-game .bank-hero-icon img {
        width: 39px !important;
        height: 39px !important;
    }

    /*
        Keep the four summary values short and swipeable instead of
        stacking four large cards vertically.
    */
    body.purr-mobile-game .bank-summary-grid {
        display: flex !important;
        gap: 7px !important;
        width: 100% !important;
        margin: 0 0 10px !important;
        padding: 1px 1px 4px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x proximity !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    body.purr-mobile-game
    .bank-summary-grid::-webkit-scrollbar {
        display: none !important;
    }

    body.purr-mobile-game .bank-summary-card {
        flex: 0 0 128px !important;
        width: 128px !important;
        min-width: 128px !important;
        min-height: 72px !important;
        padding: 9px !important;
        border-radius: 14px !important;
        scroll-snap-align: start !important;
    }

    body.purr-mobile-game .bank-summary-label {
        margin-bottom: 4px !important;
        font-size: 8px !important;
        line-height: 1.08 !important;
    }

    body.purr-mobile-game .bank-summary-value {
        font-size: 18px !important;
        line-height: 1.05 !important;
    }

    body.purr-mobile-game .bank-summary-small {
        margin-top: 3px !important;
        font-size: 9px !important;
        line-height: 1.15 !important;
    }

    /*
        Balance and Savings are more useful at a glance on mobile,
        so show the right desktop column before Transaction History.
    */
    body.purr-mobile-game .bank-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    body.purr-mobile-game .bank-layout > div:nth-child(2) {
        order: -1 !important;
        width: 100% !important;
    }

    body.purr-mobile-game .bank-layout > div {
        width: 100% !important;
        min-width: 0 !important;
    }

    body.purr-mobile-game .bank-card {
        margin-bottom: 10px !important;
        border-radius: 16px !important;
    }

    body.purr-mobile-game .bank-card-title {
        padding: 10px 12px !important;
        font-size: 16px !important;
        line-height: 1.1 !important;
    }

    body.purr-mobile-game .bank-card-body {
        padding: 11px !important;
    }

    body.purr-mobile-game .bank-balance-columns {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    body.purr-mobile-game .bank-balance-box {
        padding: 9px !important;
        border-radius: 12px !important;
    }

    body.purr-mobile-game .bank-balance-heading {
        margin-bottom: 5px !important;
        font-size: 10px !important;
    }

    body.purr-mobile-game .bank-balance-line {
        gap: 6px !important;
        padding: 2px 0 !important;
        font-size: 11px !important;
    }

    body.purr-mobile-game .bank-filter-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    body.purr-mobile-game .bank-field label {
        margin-bottom: 3px !important;
        font-size: 8.5px !important;
    }

    body.purr-mobile-game
    .bank-field select,
    body.purr-mobile-game
    .bank-field input {
        min-height: 36px !important;
        padding: 6px 8px !important;
        border-radius: 10px !important;
        font-size: 11px !important;
    }

    body.purr-mobile-game .bank-action-row {
        display: grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        margin-top: 8px !important;
    }

    body.purr-mobile-game
    .bank-action-row
    .bank-primary-button {
        grid-column: 1 / -1 !important;
    }

    body.purr-mobile-game
    .bank-primary-button,
    body.purr-mobile-game
    .bank-secondary-button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 36px !important;
        padding: 7px 8px !important;
        border-radius: 11px !important;
        font-size: 10.5px !important;
        white-space: normal !important;
    }

    body.purr-mobile-game .bank-transfer-note {
        margin-bottom: 9px !important;
        font-size: 10.5px !important;
        line-height: 1.3 !important;
    }

    body.purr-mobile-game .bank-transfer-grid {
        gap: 8px !important;
    }

    body.purr-mobile-game .bank-transfer-box {
        padding: 10px !important;
        border-radius: 13px !important;
    }

    body.purr-mobile-game .bank-transfer-title {
        margin-bottom: 6px !important;
        font-size: 13px !important;
    }

    body.purr-mobile-game .bank-transfer-row {
        grid-template-columns:
            minmax(0, 1fr) auto !important;
        gap: 6px !important;
    }

    body.purr-mobile-game .bank-transfer-row input {
        height: 36px !important;
        min-height: 36px !important;
        padding: 6px 8px !important;
        font-size: 11px !important;
    }

    body.purr-mobile-game .bank-quick-transfer {
        gap: 5px !important;
        margin-top: 6px !important;
    }

    body.purr-mobile-game .bank-quick-transfer button {
        min-height: 30px !important;
        padding: 5px 7px !important;
        font-size: 9.5px !important;
    }

    body.purr-mobile-game .bank-transaction {
        grid-template-columns:
            34px minmax(0, 1fr) !important;
        gap: 8px !important;
        padding: 9px 10px !important;
    }

    body.purr-mobile-game .bank-transaction-icon {
        width: 32px !important;
        height: 32px !important;
        border-radius: 10px !important;
        font-size: 16px !important;
    }

    body.purr-mobile-game .bank-transaction-title {
        margin-bottom: 2px !important;
        font-size: 11.5px !important;
        line-height: 1.15 !important;
    }

    body.purr-mobile-game
    .bank-transaction-description {
        font-size: 9.5px !important;
        line-height: 1.2 !important;
    }

    body.purr-mobile-game .bank-transaction-meta {
        margin-top: 2px !important;
        font-size: 8.5px !important;
        line-height: 1.15 !important;
    }

    body.purr-mobile-game
    .bank-transaction-amounts {
        grid-column: 2 !important;
        min-width: 0 !important;
        gap: 1px !important;
        text-align: left !important;
    }

    body.purr-mobile-game .bank-amount {
        font-size: 10.5px !important;
    }

    body.purr-mobile-game .bank-category-row {
        padding: 8px 9px !important;
        border-radius: 12px !important;
    }

    body.purr-mobile-game .bank-category-name {
        font-size: 11px !important;
    }

    body.purr-mobile-game .bank-category-count,
    body.purr-mobile-game .bank-category-values {
        font-size: 9.5px !important;
    }

    body.purr-mobile-game .bank-history-note {
        padding: 8px 10px !important;
        font-size: 9.5px !important;
        line-height: 1.3 !important;
    }

    body.purr-mobile-game
    .bank-card .bank-savings-goal {
        padding: 10px !important;
    }

    body.purr-mobile-game
    .bank-card .bank-goal-editor {
        gap: 8px !important;
        margin-top: 9px !important;
    }

    body.purr-mobile-game
    .bank-card
    .bank-goal-editor
    input {
        min-height: 38px !important;
        padding: 7px 9px !important;
        font-size: 11px !important;
    }

    body.purr-mobile-game
    .bank-card
    .bank-goal-actions {
        gap: 6px !important;
    }

    body.purr-mobile-game
    .bank-card
    .bank-goal-actions
    button {
        min-height: 36px !important;
        padding: 7px 8px !important;
        font-size: 10px !important;
    }
}

@media (max-width: 430px) {
    body.purr-mobile-game .bank-hero {
        grid-template-columns:
            minmax(0, 1fr) 52px !important;
    }

    body.purr-mobile-game .bank-title {
        font-size: 21px !important;
    }

    body.purr-mobile-game .bank-hero-icon {
        width: 48px !important;
        height: 48px !important;
        border-radius: 14px !important;
    }

    body.purr-mobile-game .bank-hero-icon img {
        width: 32px !important;
        height: 32px !important;
    }

    body.purr-mobile-game .bank-filter-grid {
        grid-template-columns: 1fr !important;
    }

    body.purr-mobile-game .bank-balance-columns {
        grid-template-columns: 1fr !important;
    }
}


/* ===== Extracted: purrpixels-breeding-teams-page-only ===== */
.breeding-teams-page-shell {
    max-width: 1160px;
    margin: 16px auto 48px;
}

.breeding-teams-page-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 18px;
    align-items: center;
    padding: 24px 26px;
    margin-bottom: 14px;
    border: 1px solid rgba(214, 185, 237, 0.78);
    border-radius: 26px;
    background:
        linear-gradient(
            135deg,
            rgba(239, 249, 255, 0.94),
            rgba(255, 242, 249, 0.95),
            rgba(245, 234, 255, 0.94)
        );
    box-shadow: 0 10px 24px rgba(85, 61, 112, 0.08);
}

.breeding-teams-page-kicker {
    margin-bottom: 5px;
    color: #8c6b91;
    font-size: 10px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: 0.08em;
}

.breeding-teams-page-hero h1 {
    margin: 0;
    color: #684b5d;
    font-size: 34px;
    line-height: 1.05;
}

.breeding-teams-page-hero p {
    max-width: 720px;
    margin: 8px 0 0;
    color: #756878;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 700;
}

.breeding-teams-page-symbol {
    width: 100px;
    height: 100px;
    display: grid;
    place-items: center;
    justify-self: end;
    border: 1px solid rgba(214, 185, 237, 0.7);
    border-radius: 24px;
    background: rgba(255,255,255,0.7);
    box-shadow: inset 0 0 24px rgba(221, 202, 244, 0.18);
}

.breeding-teams-page-symbol span {
    font-size: 46px;
}

.breeding-teams-myteams-card,
.breeding-teams-coming-card {
    margin-bottom: 14px;
    padding: 18px;
    border: 1px solid rgba(214, 185, 237, 0.7);
    border-radius: 22px;
    background: rgba(255,255,255,0.76);
    box-shadow: 0 7px 18px rgba(85, 61, 112, 0.055);
}

.breeding-teams-card-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 13px;
}

.breeding-teams-card-head h2,
.breeding-teams-coming-card h2 {
    margin: 0;
    color: #684b5d;
    font-size: 20px;
}

.breeding-teams-card-head p,
.breeding-teams-coming-card p {
    margin: 4px 0 0;
    color: #817485;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 700;
}

.breeding-teams-count-pill {
    flex: 0 0 auto;
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid rgba(205, 177, 228, 0.72);
    background: rgba(248, 241, 255, 0.82);
    color: #765979;
    font-size: 12px;
    font-weight: 950;
}

.breeding-teams-empty-state {
    display: grid;
    grid-template-columns: 54px minmax(0,1fr);
    gap: 12px;
    align-items: center;
    padding: 13px;
    border: 1px solid rgba(214,185,237,0.5);
    border-radius: 16px;
    background:
        linear-gradient(
            135deg,
            rgba(247, 252, 255, 0.82),
            rgba(255, 246, 251, 0.82)
        );
}

.breeding-teams-empty-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(246, 237, 255, 0.78);
    font-size: 24px;
}

.breeding-teams-empty-state > div:last-child {
    display: grid;
    gap: 3px;
}

.breeding-teams-empty-state b {
    color: #665268;
    font-size: 13px;
}

.breeding-teams-empty-state span {
    color: #8b7d8d;
    font-size: 10.5px;
    line-height: 1.35;
    font-weight: 700;
}

.breeding-teams-page-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.breeding-teams-page-actions button {
    min-width: 145px;
    min-height: 41px;
    display: grid;
    place-items: center;
    gap: 1px;
    border-radius: 13px;
}

.breeding-teams-page-actions button small {
    font-size: 8.5px;
    opacity: 0.72;
}

.breeding-teams-page-actions button:disabled {
    opacity: 0.62;
    cursor: default;
}

.breeding-teams-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.breeding-teams-preview-card {
    display: grid;
    grid-template-columns: 44px minmax(0,1fr);
    gap: 10px;
    align-items: start;
    padding: 14px;
    border: 1px solid rgba(214,185,237,0.62);
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.8),
            rgba(246,249,255,0.78),
            rgba(253,242,255,0.78)
        );
}

.breeding-teams-preview-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(247, 238, 255, 0.8);
    font-size: 20px;
}

.breeding-teams-preview-card h3 {
    margin: 1px 0 4px;
    color: #6b536a;
    font-size: 14px;
}

.breeding-teams-preview-card p {
    margin: 0;
    color: #827484;
    font-size: 10px;
    line-height: 1.4;
    font-weight: 700;
}

.breeding-teams-coming-card {
    display: flex;
    align-items: center;
    min-height: 105px;
    background:
        linear-gradient(
            135deg,
            rgba(244, 250, 255, 0.9),
            rgba(255, 244, 251, 0.9)
        );
}

.breeding-teams-coming-label {
    display: inline-block;
    margin-bottom: 5px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(237, 226, 250, 0.8);
    color: #806287;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: 0.06em;
}

@media (max-width: 768px) {
    body.purr-mobile-game .breeding-teams-page-shell {
        margin: 7px 0 88px;
    }

    body.purr-mobile-game .breeding-teams-page-hero {
        grid-template-columns: minmax(0,1fr) 66px;
        gap: 8px;
        padding: 13px;
        margin-bottom: 9px;
        border-radius: 19px;
    }

    body.purr-mobile-game .breeding-teams-page-hero h1 {
        font-size: 23px;
    }

    body.purr-mobile-game .breeding-teams-page-hero p {
        font-size: 10px;
        line-height: 1.28;
    }

    body.purr-mobile-game .breeding-teams-page-symbol {
        width: 60px;
        height: 60px;
        border-radius: 15px;
    }

    body.purr-mobile-game .breeding-teams-page-symbol span {
        font-size: 28px;
    }

    body.purr-mobile-game .breeding-teams-myteams-card,
    body.purr-mobile-game .breeding-teams-coming-card {
        padding: 11px;
        margin-bottom: 9px;
        border-radius: 16px;
    }

    body.purr-mobile-game .breeding-teams-card-head h2,
    body.purr-mobile-game .breeding-teams-coming-card h2 {
        font-size: 16px;
    }

    body.purr-mobile-game .breeding-teams-card-head p,
    body.purr-mobile-game .breeding-teams-coming-card p {
        font-size: 9.5px;
    }

    body.purr-mobile-game .breeding-teams-count-pill {
        padding: 5px 8px;
        font-size: 10px;
    }

    body.purr-mobile-game .breeding-teams-empty-state {
        grid-template-columns: 42px minmax(0,1fr);
        gap: 8px;
        padding: 9px;
        border-radius: 13px;
    }

    body.purr-mobile-game .breeding-teams-empty-icon {
        width: 38px;
        height: 38px;
        border-radius: 11px;
        font-size: 19px;
    }

    body.purr-mobile-game .breeding-teams-empty-state b {
        font-size: 11px;
    }

    body.purr-mobile-game .breeding-teams-empty-state span {
        font-size: 9px;
    }

    body.purr-mobile-game .breeding-teams-page-actions {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 6px;
    }

    body.purr-mobile-game .breeding-teams-page-actions button {
        min-width: 0;
        width: 100%;
        min-height: 37px;
        padding: 6px 7px;
        font-size: 10px;
    }

    body.purr-mobile-game .breeding-teams-preview-grid {
        grid-template-columns: 1fr;
        gap: 7px;
        margin-bottom: 9px;
    }

    body.purr-mobile-game .breeding-teams-preview-card {
        grid-template-columns: 38px minmax(0,1fr);
        padding: 10px;
        border-radius: 14px;
    }

    body.purr-mobile-game .breeding-teams-preview-icon {
        width: 34px;
        height: 34px;
        font-size: 17px;
    }

    body.purr-mobile-game .breeding-teams-preview-card h3 {
        font-size: 12px;
    }

    body.purr-mobile-game .breeding-teams-preview-card p {
        font-size: 9px;
    }

    body.purr-mobile-game .breeding-teams-coming-card {
        min-height: 0;
    }
}


/* ===== Extracted: purrpixels-accent-line-and-landing-title-fix ===== */
/* PurrPixels accent line: blue, lilac and pink instead of green/gold. */
.landing-title::after,
.breeding-teams-page-hero h1::after {
    background:
        linear-gradient(
            90deg,
            #8fc6d8 0%,
            #c8a8ff 52%,
            #f6cfe0 100%
        ) !important;
}

/* Make the public landing headline a little calmer and less oversized. */
body:not(.purr-mobile-game) .landing-title {
    font-size: 30px !important;
    line-height: 1.06 !important;
    letter-spacing: -0.25px !important;
}

@media (max-width: 768px) {
    body:not(.purr-mobile-game) .landing-title {
        max-width: 300px !important;
        font-size: 22px !important;
        line-height: 1.08 !important;
        letter-spacing: -0.1px !important;
    }

    body:not(.purr-mobile-game) .landing-title::after {
        width: 72px !important;
        height: 5px !important;
        margin-top: 10px !important;
    }

    body.purr-mobile-game
    .breeding-teams-page-hero
    h1::after {
        width: 72px !important;
        height: 5px !important;
        margin-top: 9px !important;
    }
}


/* ===== Extracted: purrpixels-breeding-team-create-phase ===== */
.breeding-teams-page-loading {
    padding: 24px;
    border: 1px solid rgba(214,185,237,.65);
    border-radius: 20px;
    background: rgba(255,255,255,.74);
    color: #745e76;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}

.breeding-team-created-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px;
}

.breeding-team-created-card {
    display: grid;
    grid-template-columns: 54px minmax(0,1fr);
    gap: 10px;
    align-items: center;
    padding: 11px;
    border: 1px solid rgba(214,185,237,.52);
    border-radius: 16px;
    background:
        linear-gradient(
            135deg,
            rgba(248,252,255,.85),
            rgba(255,246,251,.86),
            rgba(250,243,255,.84)
        );
}

.breeding-team-created-icon {
    width: 49px;
    height: 49px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(245,236,255,.82);
    font-size: 23px;
}

.breeding-team-created-copy {
    min-width: 0;
}

.breeding-team-created-name {
    color: #684b5d;
    font-size: 14px;
    line-height: 1.15;
    font-weight: 950;
    overflow-wrap: anywhere;
}

.breeding-team-created-cattery {
    margin-top: 2px;
    color: #7b647d;
    font-size: 11px;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.breeding-team-created-meta {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.breeding-team-created-meta span {
    padding: 3px 7px;
    border: 1px solid rgba(205,177,228,.58);
    border-radius: 999px;
    background: rgba(255,255,255,.64);
    color: #756678;
    font-size: 8.5px;
    font-weight: 900;
}

.breeding-team-create-overlay {
    position: fixed;
    inset: 0;
    z-index: 32000;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(63,45,76,.34);
    backdrop-filter: blur(7px);
}

.breeding-team-create-modal {
    width: min(520px,95vw);
    max-height: 92vh;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0,1fr) auto;
    border: 1px solid rgba(214,185,237,.84);
    border-radius: 22px;
    background:
        linear-gradient(
            145deg,
            rgba(255,252,255,.99),
            rgba(242,249,255,.98),
            rgba(251,239,255,.98)
        );
    box-shadow: 0 24px 65px rgba(71,47,91,.25);
}

.breeding-team-create-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 17px 18px 13px;
    border-bottom: 1px solid rgba(214,185,237,.52);
}

.breeding-team-create-modal-kicker {
    margin-bottom: 4px;
    color: #8b6c8e;
    font-size: 8.5px;
    font-weight: 950;
    letter-spacing: .08em;
}

.breeding-team-create-modal-head h2 {
    margin: 0;
    color: #684b5d;
    font-size: 21px;
}

.breeding-team-create-modal-head p {
    margin: 4px 0 0;
    color: #88798a;
    font-size: 10px;
    line-height: 1.3;
    font-weight: 750;
}

.breeding-team-create-modal-head > button {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0 !important;
    border-radius: 999px !important;
    font-size: 19px;
    line-height: 1;
}

.breeding-team-create-modal-body {
    overflow-y: auto;
    padding: 15px 18px 17px;
}

.breeding-team-create-field {
    display: grid;
    gap: 5px;
    margin-bottom: 12px;
}

.breeding-team-create-field > span {
    color: #65566a;
    font-size: 11px;
    font-weight: 950;
}

.breeding-team-create-field input,
.breeding-team-create-field select {
    width: 100%;
    min-height: 40px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid rgba(203,174,225,.78);
    border-radius: 11px;
    background: rgba(255,255,255,.9);
    color: #5d5163;
    font-size: 12px;
    font-weight: 800;
}

.breeding-team-create-field small {
    color: #948597;
    font-size: 8.5px;
    line-height: 1.25;
    font-weight: 750;
}

.breeding-team-create-cost {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    margin-top: 4px;
    padding: 10px 11px;
    border: 1px solid rgba(214,185,237,.54);
    border-radius: 12px;
    background: rgba(248,242,255,.7);
}

.breeding-team-create-cost span {
    color: #7a6b7d;
    font-size: 10px;
    font-weight: 850;
}

.breeding-team-create-cost b {
    color: #7a2f58;
    font-size: 12px;
}

.breeding-team-create-warning {
    margin-top: 9px;
    padding: 9px 10px;
    border: 1px solid rgba(226,175,191,.62);
    border-radius: 11px;
    background: rgba(255,242,247,.82);
    color: #92546a;
    font-size: 9.5px;
    line-height: 1.3;
    font-weight: 800;
}

.breeding-team-create-error {
    min-height: 18px;
    margin-top: 8px;
    color: #9a4963;
    font-size: 10px;
    line-height: 1.3;
    font-weight: 850;
}

.breeding-team-create-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 11px 18px 14px;
    border-top: 1px solid rgba(214,185,237,.52);
    background: rgba(255,255,255,.52);
}

.breeding-team-create-modal-actions button {
    min-height: 38px;
    border-radius: 12px;
}

@media (max-width: 768px) {
    body.purr-mobile-game .breeding-team-created-grid {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    body.purr-mobile-game .breeding-team-created-card {
        grid-template-columns: 47px minmax(0,1fr);
        padding: 8px;
        border-radius: 13px;
    }

    body.purr-mobile-game .breeding-team-created-icon {
        width: 43px;
        height: 43px;
        border-radius: 12px;
        font-size: 20px;
    }

    body.purr-mobile-game .breeding-team-created-name {
        font-size: 12px;
    }

    body.purr-mobile-game .breeding-team-created-cattery {
        font-size: 9.5px;
    }

    .breeding-team-create-overlay {
        align-items: end;
        padding: 7px;
    }

    .breeding-team-create-modal {
        width: 100%;
        max-height: 94vh;
        border-radius: 20px 20px 13px 13px;
    }

    .breeding-team-create-modal-head {
        padding: 14px 14px 11px;
    }

    .breeding-team-create-modal-head h2 {
        font-size: 18px;
    }

    .breeding-team-create-modal-body {
        padding: 13px 14px 15px;
    }

    .breeding-team-create-field {
        margin-bottom: 10px;
    }

    .breeding-team-create-field input,
    .breeding-team-create-field select {
        min-height: 38px;
        font-size: 11px;
    }

    .breeding-team-create-modal-actions {
        display: grid;
        grid-template-columns: 82px minmax(0,1fr);
        padding: 10px 14px 13px;
    }

    .breeding-team-create-modal-actions button {
        min-width: 0;
        width: 100%;
        padding: 7px 8px;
        font-size: 10px;
    }
}


/* ===== Extracted: purrpixels-market-filter-extra-compact ===== */
/* ===== Buy a Cat: more compact desktop filter layout ===== */
@media (min-width: 1001px) {
    .market-filter-card-compact {
        padding: 12px 14px !important;
        margin-bottom: 12px !important;
        border-radius: 18px !important;
    }

    .market-filter-card-compact .market-filter-title-row.compact {
        margin-bottom: 8px !important;
    }

    .market-filter-card-compact
    .market-filter-title-row.compact > div {
        display: flex !important;
        align-items: baseline !important;
        gap: 12px !important;
        flex-wrap: wrap !important;
    }

    .market-filter-card-compact .market-filter-title {
        font-size: 23px !important;
        line-height: 1.05 !important;
    }

    .market-filter-card-compact .market-filter-note {
        font-size: 10px !important;
        line-height: 1.2 !important;
        font-weight: 750 !important;
    }

    .market-filter-card-compact .market-quick-filter-grid {
        grid-template-columns:
            minmax(135px, .75fr)
            minmax(120px, .65fr)
            minmax(300px, 1.45fr)
            minmax(250px, 1.2fr) !important;
        gap: 8px !important;
    }

    .market-filter-card-compact .market-quick-filter-block {
        padding: 8px 9px !important;
        border-radius: 13px !important;
    }

    .market-filter-card-compact .market-quick-filter-title {
        margin-bottom: 5px !important;
        font-size: 12px !important;
        line-height: 1.05 !important;
    }

    .market-filter-card-compact .market-filter-field {
        gap: 3px !important;
    }

    .market-filter-card-compact .market-filter-field label,
    .market-filter-card-compact .market-price-mini-field label {
        margin-bottom: 1px !important;
        font-size: 9px !important;
        line-height: 1.05 !important;
    }

    .market-filter-card-compact .market-filter-field input,
    .market-filter-card-compact .market-filter-field select,
    .market-filter-card-compact .market-price-mini-field input {
        min-height: 32px !important;
        height: 32px !important;
        padding: 5px 8px !important;
        border-radius: 9px !important;
        font-size: 11px !important;
    }

    .market-filter-card-compact .market-price-single-filter {
        grid-template-columns:
            minmax(115px, .9fr)
            minmax(75px, 1fr)
            minmax(75px, 1fr) !important;
        gap: 6px !important;
    }

    .market-filter-card-compact .market-age-quick {
        gap: 6px !important;
    }

    .market-filter-card-compact .market-filter-two {
        gap: 6px !important;
    }

    /*
        The help texts are still useful, but they do not need to consume
        a full extra row on desktop.
    */
    .market-filter-card-compact .market-price-filter-hint {
        margin-top: 4px !important;
        font-size: 8px !important;
        line-height: 1.2 !important;
    }

    .market-filter-card-compact .market-visible-appearance-top {
        margin: 8px 0 7px !important;
        padding: 9px 10px !important;
        border-radius: 13px !important;
    }

    .market-filter-card-compact .market-visible-appearance-title {
        margin-bottom: 6px !important;
        font-size: 12px !important;
    }

    .market-filter-card-compact
    .market-visible-appearance-top
    .market-genetics-grid {
        gap: 7px !important;
    }

    .market-filter-card-compact .phenotype-pattern-field {
        margin-top: 7px !important;
    }

    .market-filter-card-compact .phenotype-pattern-help {
        margin: 3px 0 5px !important;
        gap: 4px !important;
        font-size: 8.5px !important;
        line-height: 1.15 !important;
    }

    /*
        Six pattern choices fit in one row on normal desktop widths.
        This removes the largest unnecessary height from the filter.
    */
    .market-filter-card-compact .phenotype-pattern-grid {
        grid-template-columns:
            repeat(6, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    .market-filter-card-compact .phenotype-pattern-toggle {
        min-height: 31px !important;
        padding: 5px 7px !important;
        border-radius: 9px !important;
        gap: 4px !important;
        font-size: 9.5px !important;
    }

    .market-filter-card-compact .phenotype-pattern-mark {
        width: 16px !important;
        min-width: 16px !important;
        font-size: 14px !important;
    }

    .market-filter-card-compact .market-visible-appearance-hint {
        margin-top: 5px !important;
        font-size: 8px !important;
        line-height: 1.2 !important;
    }

    .market-filter-card-compact .market-quick-action-row {
        margin-top: 7px !important;
        gap: 8px !important;
    }

    .market-filter-card-compact .market-filter-checkbox {
        gap: 6px !important;
        font-size: 11px !important;
    }

    .market-filter-card-compact .market-filter-checkbox input {
        width: 15px !important;
        height: 15px !important;
    }

    .market-filter-card-compact
    .market-filter-primary,
    .market-filter-card-compact
    .market-filter-secondary {
        min-width: 108px !important;
        padding: 7px 12px !important;
        font-size: 10.5px !important;
    }

    .market-filter-card-compact .market-advanced-filter-panel {
        margin-top: 8px !important;
        border-radius: 12px !important;
    }

    .market-filter-card-compact
    .market-advanced-filter-panel > summary {
        padding: 8px 11px !important;
        font-size: 11px !important;
    }

    .market-filter-card-compact
    .market-advanced-filter-panel > summary::after {
        font-size: 15px !important;
    }
}

/* Keep six pattern buttons readable on medium desktop/tablet widths. */
@media (min-width: 769px) and (max-width: 1180px) {
    .market-filter-card-compact .phenotype-pattern-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
    }
}


/* ===== Extracted: purrpixels-native-links-and-public-pedigree ===== */
.purr-native-nav-link,
.purr-native-link-button,
.breeder-cat-public-card,
.community-discovery-player {
    text-decoration: none !important;
    color: inherit;
}

.breeder-cat-public-card {
    display: block;
}

.breeder-cat-public-pedigree {
    min-height: 28px;
    margin: 2px 0 7px;
    color: #75667d;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.cat-pedigree-cattery-link {
    color: inherit !important;
    text-decoration: none !important;
}

.cat-pedigree-cattery-link:hover,
.cat-pedigree-cattery-link:focus,
.cat-pedigree-cattery-link:active {
    color: inherit !important;
    text-decoration: none !important;
}

.purr-native-link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    cursor: pointer;
}

/* Anchors used where the original UI used buttons. */
.community-actions .purr-native-link-button,
.friends-request-actions .purr-native-link-button,
.friends-modern-actions .purr-native-link-button {
    min-width: 0;
    margin: 0 !important;
    padding: 6px 8px !important;
    border: 1px solid rgba(218,188,238,.82);
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.96),
            rgba(248,232,255,.88)
        );
    color: #5b4b63;
    box-shadow: 0 4px 10px rgba(86,58,112,.06);
    font-size: 10px;
    line-height: 1.2;
    font-weight: 900;
}

.friends-request-actions .purr-native-link-button {
    flex: 1;
}

.breeder-clean-action.purr-native-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
}

.public-list-link.purr-native-nav-link {
    display: block;
    box-sizing: border-box;
    text-decoration: none !important;
    text-align: center;
}

.pedigree-tree-card.clickable {
    text-decoration: none !important;
    color: inherit !important;
}

@media (max-width: 768px) {
    .breeder-cat-public-pedigree {
        min-height: 24px;
        margin-bottom: 4px;
        font-size: 9.5px;
    }
}


/* ===== Extracted: purrpixels-reset-starter-selection ===== */
body.reset-starter-selection-open {
    overflow: hidden !important;
}

.reset-starter-selection-overlay {
    position: fixed;
    inset: 0;
    z-index: 60000;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(58, 43, 70, 0.48);
    backdrop-filter: blur(9px);
}

.reset-starter-selection-modal {
    width: min(1120px, 97vw);
    max-height: 94vh;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid rgba(214, 185, 237, 0.86);
    border-radius: 25px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 252, 255, 0.99),
            rgba(242, 249, 255, 0.99),
            rgba(251, 239, 255, 0.99)
        );
    box-shadow: 0 26px 75px rgba(67, 46, 87, 0.28);
}

.reset-starter-selection-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    padding: 17px 20px 14px;
    border-bottom: 1px solid rgba(214, 185, 237, 0.55);
}

.reset-starter-selection-kicker {
    margin-bottom: 4px;
    color: #8b6d91;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 0.08em;
}

.reset-starter-selection-head h2 {
    margin: 0;
    color: #684b5d;
    font-size: 24px;
    line-height: 1.08;
}

.reset-starter-selection-head p {
    max-width: 720px;
    margin: 5px 0 0;
    color: #857788;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 750;
}

.reset-starter-logout {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 7px 11px !important;
    border-radius: 11px !important;
    font-size: 10px !important;
}

.reset-starter-selection-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 5px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(214,185,237,.45);
    background: rgba(255,255,255,.48);
}

.reset-starter-selection-steps span {
    padding: 6px 5px;
    border-radius: 999px;
    background: rgba(244,238,249,.74);
    color: #948799;
    font-size: 8.5px;
    font-weight: 900;
    text-align: center;
}

.reset-starter-selection-steps span.active {
    background:
        linear-gradient(
            90deg,
            rgba(216,239,248,.95),
            rgba(232,218,255,.95),
            rgba(253,226,239,.95)
        );
    color: #684b5d;
}

.reset-starter-selection-steps span.done {
    background: rgba(235,247,242,.9);
    color: #62816f;
}

.reset-starter-selection-content {
    overflow-y: auto;
    padding: 18px 20px 22px;
}

.reset-starter-selection-content
.starter-choice-grid {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

.reset-starter-selection-content
.starter-choice-card {
    min-width: 0;
}

.reset-starter-selection-content
.starter-name-layout {
    max-width: 850px;
    margin: 0 auto;
}

.reset-starter-footer-back {
    display: flex;
    justify-content: flex-start;
    max-width: 980px;
    margin: 11px auto 0;
}

.reset-starter-final-summary {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px;
    margin: 10px 0;
}

.reset-starter-final-summary > div {
    padding: 8px 9px;
    border: 1px solid rgba(214,185,237,.52);
    border-radius: 11px;
    background: rgba(255,255,255,.68);
}

.reset-starter-final-summary span {
    display: block;
    margin-bottom: 2px;
    color: #8d7e90;
    font-size: 8px;
    font-weight: 900;
    text-transform: uppercase;
}

.reset-starter-final-summary b {
    color: #655468;
    font-size: 10.5px;
}

@media (max-width: 768px) {
    .reset-starter-selection-overlay {
        align-items: stretch;
        padding: 6px;
    }

    .reset-starter-selection-modal {
        width: 100%;
        max-height: none;
        height: calc(100dvh - 12px);
        border-radius: 18px;
    }

    .reset-starter-selection-head {
        padding: 12px 12px 10px;
        gap: 8px;
    }

    .reset-starter-selection-head h2 {
        font-size: 18px;
    }

    .reset-starter-selection-head p {
        font-size: 9px;
        line-height: 1.25;
    }

    .reset-starter-logout {
        min-height: 32px;
        padding: 5px 7px !important;
        font-size: 9px !important;
    }

    .reset-starter-selection-steps {
        gap: 3px;
        padding: 7px 8px;
    }

    .reset-starter-selection-steps span {
        padding: 5px 2px;
        font-size: 7px;
    }

    .reset-starter-selection-content {
        padding: 11px 9px 18px;
    }

    .reset-starter-selection-content
    .starter-registration-heading {
        margin-bottom: 10px;
    }

    .reset-starter-selection-content
    .starter-registration-title {
        font-size: 20px !important;
    }

    .reset-starter-selection-content
    .starter-registration-subtitle {
        font-size: 10px !important;
        line-height: 1.3 !important;
    }

    .reset-starter-selection-content
    .starter-choice-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr)) !important;
        gap: 7px !important;
    }

    .reset-starter-selection-content
    .starter-choice-card {
        padding: 8px !important;
        border-radius: 13px !important;
    }

    .reset-starter-selection-content
    .starter-choice-image-wrap {
        min-height: 115px !important;
    }

    .reset-starter-selection-content
    .starter-choice-image {
        max-width: 130px !important;
        max-height: 130px !important;
    }

    .reset-starter-selection-content
    .starter-choice-breed {
        font-size: 11px !important;
    }

    .reset-starter-selection-content
    .starter-choice-color {
        font-size: 9px !important;
    }

    .reset-starter-selection-content
    .starter-choice-traits {
        gap: 3px !important;
    }

    .reset-starter-selection-content
    .starter-choice-trait {
        padding: 2px 5px !important;
        font-size: 7.5px !important;
    }

    .reset-starter-selection-content
    .starter-choice-button {
        min-height: 33px !important;
        padding: 6px 7px !important;
        font-size: 9px !important;
    }

    .reset-starter-selection-content
    .starter-name-layout {
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    .reset-starter-selection-content
    .starter-name-preview {
        max-width: 180px;
        margin: 0 auto;
    }

    .reset-starter-selection-content
    .starter-name-preview img {
        max-height: 150px !important;
    }

    .reset-starter-selection-content
    .starter-name-form-title {
        font-size: 17px !important;
    }

    .reset-starter-selection-content
    .starter-name-form-text {
        font-size: 9.5px !important;
    }

    .reset-starter-selection-content
    .landing-input-group {
        margin-bottom: 8px !important;
    }

    .reset-starter-selection-content
    .landing-input-group input {
        min-height: 38px !important;
        font-size: 11px !important;
    }

    .reset-starter-selection-content
    .starter-name-actions {
        gap: 6px !important;
    }

    .reset-starter-selection-content
    .starter-name-actions button {
        min-width: 0 !important;
        padding: 7px 8px !important;
        font-size: 9px !important;
    }
}

@media (max-width: 430px) {
    .reset-starter-selection-content
    .starter-choice-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .reset-starter-selection-content
    .starter-choice-image-wrap {
        min-height: 100px !important;
    }

    .reset-starter-selection-content
    .starter-choice-image {
        max-width: 112px !important;
        max-height: 112px !important;
    }

    .reset-starter-selection-steps span {
        font-size: 6.5px;
    }

    .reset-starter-final-summary {
        grid-template-columns: 1fr;
    }
}


/* ===== Account email + password reset ===== */
.landing-forgot-row {
    display: flex;
    justify-content: flex-end;
    margin: -2px 0 10px;
}

.landing-forgot-password {
    border: 0;
    padding: 2px 0;
    background: transparent;
    color: #765d89;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.landing-forgot-password:hover {
    color: #9b6eaa;
}

.purr-password-reset-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(57, 43, 68, 0.48);
    backdrop-filter: blur(7px);
}

.purr-password-reset-card {
    position: relative;
    width: min(470px, calc(100vw - 28px));
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    padding: 28px;
    border: 1px solid rgba(219, 199, 232, 0.95);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 24px 60px rgba(63, 46, 77, 0.22);
}

.purr-password-reset-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #f4edf9;
    color: #6d587c;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.purr-password-reset-kicker {
    color: #9d7aac;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.purr-password-reset-title {
    margin-top: 6px;
    color: #594666;
    font-size: 26px;
    font-weight: 900;
}

.purr-password-reset-text {
    margin-top: 10px;
    color: #766a7e;
    line-height: 1.55;
}

.purr-password-reset-field {
    margin-top: 18px;
}

.purr-password-reset-field label {
    display: block;
    margin-bottom: 7px;
    color: #654f72;
    font-weight: 900;
}

.purr-password-reset-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 13px;
    border: 1px solid #ddcee7;
    border-radius: 12px;
    background: #fff;
    color: #51435c;
    font: inherit;
    outline: none;
}

.purr-password-reset-field input:focus {
    border-color: #b998ca;
    box-shadow: 0 0 0 3px rgba(185, 152, 202, 0.16);
}

.purr-password-reset-submit {
    width: 100%;
    margin-top: 20px;
    padding: 12px 16px;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(135deg, #d8bce7, #bfe0d0);
    color: #4f4059;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.purr-password-reset-message {
    margin-top: 14px;
    min-height: 22px;
    border-radius: 11px;
    font-size: 13px;
    line-height: 1.45;
}

.purr-password-reset-message.success,
.purr-password-reset-message.error {
    padding: 10px 12px;
}

.purr-password-reset-message.success {
    border: 1px solid #cce2d5;
    background: #eff9f3;
    color: #486c56;
}

.purr-password-reset-message.error {
    border: 1px solid #ebc9d3;
    background: #fff1f5;
    color: #8b5265;
}

@media (max-width: 600px) {
    .purr-password-reset-card {
        padding: 24px 18px 20px;
        border-radius: 20px;
    }

    .purr-password-reset-title {
        font-size: 23px;
        padding-right: 35px;
    }
}


/* ===== Public registration launch countdown ===== */
.landing-registration-countdown {
    margin-bottom: 18px;
    padding: 16px 16px 14px;
    border-radius: 18px;
    border: 1px solid rgba(205, 182, 231, 0.72);
    background: linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(252,246,255,0.95) 100%);
    box-shadow: 0 10px 28px rgba(108, 87, 120, 0.10);
}

.landing-registration-countdown-title {
    margin-bottom: 12px;
    text-align: center;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 900;
    color: #6a355d;
}

.landing-registration-countdown-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.landing-registration-countdown-unit {
    min-width: 0;
    padding: 11px 6px 9px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(247,236,255,0.96) 100%);
    border: 1px solid rgba(214, 193, 234, 0.85);
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}

.landing-registration-countdown-unit strong {
    display: block;
    font-size: 24px;
    line-height: 1;
    font-weight: 950;
    color: #5f496f;
    font-variant-numeric: tabular-nums;
}

.landing-registration-countdown-unit span {
    display: block;
    margin-top: 6px;
    font-size: 10px;
    line-height: 1.15;
    font-weight: 850;
    letter-spacing: 0.02em;
    color: #7a7383;
    text-transform: uppercase;
}

.landing-registration-countdown-text {
    margin-top: 12px;
    text-align: center;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 750;
    color: #665e6f;
}

@media (max-width: 520px) {
    .landing-registration-countdown {
        padding: 12px 10px 11px;
        border-radius: 16px;
    }

    .landing-registration-countdown-grid {
        gap: 6px;
    }

    .landing-registration-countdown-unit {
        padding: 9px 4px 7px;
        border-radius: 12px;
    }

    .landing-registration-countdown-unit strong {
        font-size: 20px;
    }

    .landing-registration-countdown-unit span {
        font-size: 9px;
    }

    .landing-registration-countdown-text {
        font-size: 11px;
    }
}


/* ===== News page admin publisher modal ===== */
.news-admin-launch-row {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 16px;
}

.news-admin-add-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 16px;
    border: 1px solid rgba(200, 169, 219, 0.85);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 247, 252, 0.97), rgba(238, 246, 255, 0.96));
    box-shadow: 0 7px 18px rgba(89, 66, 103, 0.10);
    color: #713a61;
    font: inherit;
    font-size: 13px;
    font-weight: 950;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.news-admin-add-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 9px 22px rgba(89, 66, 103, 0.14);
}

.news-admin-add-plus {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(222, 194, 234, 0.66);
    font-size: 18px;
    line-height: 1;
}

body.news-admin-modal-open {
    overflow: hidden;
}

.news-admin-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(57, 43, 65, 0.42);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.news-admin-modal-card {
    width: min(760px, 100%);
    max-height: min(860px, calc(100vh - 48px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(213, 188, 229, 0.94);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(255, 252, 255, 0.99), rgba(247, 243, 255, 0.99));
    box-shadow: 0 24px 70px rgba(59, 39, 73, 0.24);
}

.news-admin-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 21px 22px 17px;
    border-bottom: 1px solid rgba(215, 196, 228, 0.72);
}

.news-admin-kicker {
    margin-bottom: 3px;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.14em;
    color: #947299;
}

.news-admin-title {
    font-size: 24px;
    line-height: 1.1;
    font-weight: 950;
    color: #713a61;
}

.news-admin-subtitle {
    margin-top: 5px;
    max-width: 560px;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 700;
    color: #756c7a;
}

.news-admin-modal-close {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(205, 187, 216, 0.78);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.82);
    color: #715b75;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}

.news-admin-modal-body {
    overflow-y: auto;
    padding: 20px 22px;
}

.news-admin-field {
    display: grid;
    gap: 6px;
    margin-bottom: 15px;
}

.news-admin-field > span {
    font-size: 12px;
    font-weight: 950;
    color: #624f66;
}

.news-admin-field input,
.news-admin-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(189, 168, 204, 0.80);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.93);
    padding: 11px 12px;
    color: #4f4655;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    outline: none;
}

.news-admin-field textarea {
    min-height: 235px;
    resize: vertical;
    line-height: 1.5;
}

.news-admin-field input:focus,
.news-admin-field textarea:focus {
    border-color: rgba(165, 124, 188, 0.96);
    box-shadow: 0 0 0 3px rgba(208, 181, 230, 0.19);
}

.news-admin-field small {
    color: #8a808d;
    font-size: 10px;
    line-height: 1.4;
    font-weight: 700;
}

.news-admin-notify-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 12px;
    border: 1px solid rgba(214, 196, 224, 0.72);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.62);
    color: #635769;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 800;
}

.news-admin-notify-row input {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    accent-color: #94658d;
}

.news-admin-status {
    margin-top: 13px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(202, 188, 210, 0.72);
    color: #665c68;
    font-size: 11px;
    font-weight: 800;
}

.news-admin-status.success {
    border-color: rgba(127, 183, 146, 0.78);
    background: rgba(236, 250, 240, 0.92);
    color: #3f714c;
}

.news-admin-status.error {
    border-color: rgba(209, 142, 154, 0.78);
    background: rgba(255, 239, 242, 0.94);
    color: #8b4652;
}

.news-admin-preview {
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid rgba(190, 169, 205, 0.52);
}

.news-admin-preview-label {
    margin-bottom: 9px;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.10em;
    color: #816785;
    text-transform: uppercase;
}

.news-admin-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;
    padding: 14px 22px 18px;
    border-top: 1px solid rgba(215, 196, 228, 0.72);
    background: rgba(255, 255, 255, 0.46);
}

.news-admin-modal-actions button {
    min-height: 39px;
    padding: 8px 15px;
    border-radius: 999px;
    font: inherit;
    font-size: 12px;
    font-weight: 950;
    cursor: pointer;
}

.news-admin-cancel-button,
.news-admin-preview-button {
    border: 1px solid rgba(194, 179, 204, 0.80);
    background: rgba(255, 255, 255, 0.90);
    color: #66556c;
}

.news-admin-publish-button {
    border: 1px solid rgba(196, 164, 216, 0.90);
    background: linear-gradient(135deg, #f6dce9, #e7f5ff);
    color: #713a61;
}

.news-admin-modal-actions button:hover:not(:disabled),
.news-admin-modal-close:hover {
    transform: translateY(-1px);
}

.news-admin-modal-actions button:disabled {
    opacity: 0.58;
    cursor: wait;
}

@media (max-width: 768px) {
    body.purr-mobile-game .news-admin-launch-row {
        margin: 0 0 10px !important;
    }

    body.purr-mobile-game .news-admin-add-button {
        width: 100% !important;
    }

    body.purr-mobile-game .news-admin-modal {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    body.purr-mobile-game .news-admin-modal-card {
        width: 100% !important;
        max-height: 92vh !important;
        border-radius: 22px 22px 0 0 !important;
        border-bottom: 0 !important;
    }

    body.purr-mobile-game .news-admin-modal-head {
        padding: 17px 16px 14px !important;
    }

    body.purr-mobile-game .news-admin-title {
        font-size: 21px !important;
    }

    body.purr-mobile-game .news-admin-subtitle {
        font-size: 11px !important;
    }

    body.purr-mobile-game .news-admin-modal-body {
        padding: 15px 16px !important;
    }

    body.purr-mobile-game .news-admin-field textarea {
        min-height: 210px !important;
    }

    body.purr-mobile-game .news-admin-modal-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        padding: 12px 16px 16px !important;
    }

    body.purr-mobile-game .news-admin-cancel-button {
        grid-column: 1 / -1 !important;
        order: 3;
    }

    body.purr-mobile-game .news-admin-modal-actions button {
        width: 100% !important;
    }
}