/* =========================================================
   TOP COLLECTION
   Shared styles for:
   merch.html
   merch-detail.html
   card-gallery.html
   merch-config.html
   ========================================================= */

:root {
    --collection-bg:
        #050914;

    --collection-panel:
        rgba(12, 17, 34, 0.82);

    --collection-panel-strong:
        rgba(11, 15, 31, 0.96);

    --collection-border:
        rgba(176, 135, 239, 0.18);

    --collection-border-strong:
        rgba(190, 143, 255, 0.38);

    --collection-text:
        rgba(255, 255, 255, 0.94);

    --collection-muted:
        rgba(212, 198, 229, 0.58);

    --collection-faint:
        rgba(203, 181, 228, 0.34);

    --collection-purple:
        #ba86ff;
}


* {
    box-sizing:
        border-box;
}


html {
    background:
        var(--collection-bg);
}


body {
    margin:0;
    min-height:100vh;
    background:radial-gradient(
            circle
            at
            12%
            9%,
            rgba(
                111,
                69,
                185,
                0.15
            ),
            transparent
            28%
        ),

        radial-gradient(
            circle
            at
            90%
            18%,
            rgba(
                72,
                85,
                164,
                0.10
            ),
            transparent
            28%
        ),

        linear-gradient(
            180deg,
            #050914,
            #040711
        );

    color:
        var(--collection-text);

    font-family:
        "Segoe UI",
        "Microsoft YaHei",
        Arial,
        sans-serif;
}


body::before {

    content:
        "";

    position:
        fixed;

    inset:
        0;

    pointer-events:
        none;

    opacity:
        0.28;

    background-image:
        radial-gradient(
            circle,
            rgba(
                255,
                255,
                255,
                0.40
            )
            0 1px,
            transparent
            1.5px
        );

    background-size:
        78px
        78px;

    mask-image:
        linear-gradient(
            180deg,
            rgba(
                0,
                0,
                0,
                0.80
            ),
            transparent
            70%
        );
}


a {
    color:
        inherit;
}


button,
input {
    font:
        inherit;
}


.collection-page {

    position:
        relative;

    z-index:
        1;

    width:
        min(
            1180px,
            calc(
                100%
                -
                40px
            )
        );

    margin:
        0
        auto;

    padding:
        132px
        0
        90px;
}


/* =========================================================
   HERO
   ========================================================= */

.collection-hero {

    max-width:
        760px;

    margin-bottom:
        52px;
}


.collection-eyebrow,
.detail-kicker,
.config-label {

    color:
        rgba(
            196,
            151,
            255,
            0.68
        );

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        0.28em;
}


.collection-hero h1,
.subpage-heading h1,
.merch-detail-copy h1 {

    margin:
        12px
        0
        14px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight:
        500;

    letter-spacing:
        0.02em;
}


.collection-hero h1 {

    font-size:
        clamp(
            42px,
            6vw,
            72px
        );
}


.collection-hero p {

    max-width:
        650px;

    margin:
        0;

    color:
        var(--collection-muted);

    font-size:
        15px;

    line-height:
        1.9;
}


/* =========================================================
   TOOLBAR
   ========================================================= */

.collection-toolbar {

    display:
        flex;

    align-items:
        end;

    justify-content:
        space-between;

    gap:
        24px;

    margin-bottom:
        28px;

    padding-bottom:
        18px;

    border-bottom:
        1px
        solid
        rgba(
            177,
            139,
            232,
            0.12
        );
}


.collection-search {

    width:
        min(
            460px,
            100%
        );

    display:
        grid;

    gap:
        8px;
}


.collection-search span {

    color:
        var(--collection-faint);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        0.18em;
}


.collection-search input {

    width:
        100%;

    height:
        46px;

    padding:
        0
        16px;

    border:
        1px
        solid
        rgba(
            175,
            135,
            229,
            0.16
        );

    border-radius:
        12px;

    outline:
        none;

    background:
        rgba(
            8,
            13,
            28,
            0.76
        );

    color:
        #ffffff;

    transition:
        border-color
        160ms
        ease,

        box-shadow
        160ms
        ease;
}


.collection-search input::placeholder {
    color:
        rgba(
            221,
            207,
            238,
            0.28
        );
}


.collection-search input:focus {

    border-color:
        rgba(
            187,
            130,
            255,
            0.52
        );

    box-shadow:
        0
        0
        0
        3px
        rgba(
            164,
            95,
            255,
            0.08
        );
}


.collection-count {

    padding-bottom:
        12px;

    color:
        var(--collection-faint);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        0.18em;

    white-space:
        nowrap;
}


/* =========================================================
   MERCH GRID
   ========================================================= */

.merch-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        28px;
}


.merch-card {

    min-width:
        0;

    border:
        1px
        solid
        var(--collection-border);

    border-radius:
        22px;

    overflow:
        hidden;

    background:
        linear-gradient(
            180deg,
            rgba(
                16,
                21,
                42,
                0.88
            ),
            rgba(
                7,
                11,
                24,
                0.92
            )
        );

    transition:
        transform
        200ms
        ease,

        border-color
        200ms
        ease,

        box-shadow
        200ms
        ease;
}


.merch-card:hover {

    transform:
        translateY(
            -5px
        );

    border-color:
        rgba(
            190,
            140,
            255,
            0.34
        );

    box-shadow:
        0
        22px
        54px
        rgba(
            0,
            0,
            0,
            0.24
        );
}


.merch-cover-link {
    display:block;
    color:inherit;
    text-decoration:none;
}


.merch-cover {
    position:relative;
    aspect-ratio:4/5;
    overflow:hidden;
    background:radial-gradient(circle at 50% 38%,
            rgba(153,93,229,0.22),
            transparent 38%
        ),

        linear-gradient(
            145deg,
            #17172d,
            #090f21
        );
}


.merch-cover img {
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    transition:transform 500ms ease;
}


.merch-card:hover
.merch-cover img {
    transform:
        scale(
            1.025
        );
}


.image-placeholder {
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:rgba(217,181,255,0.60);
    text-align:center;
}

.image-placeholder span {
    font-family:Georgia,serif;
    font-size:38px;
    font-style:italic;
}


.image-placeholder small {
    font-size:8px;
    letter-spacing:0.26em;
}


.merch-cover:not(.is-missing)
.image-placeholder,

.detail-cover-frame:not(.is-missing)
.image-placeholder,

.photocard-photo:not(.is-missing)
.image-placeholder,

.lightbox-image-frame:not(.is-missing)
.image-placeholder {display:none;}


.merch-number {
    position:absolute;
    top:16px;
    left:16px;
    z-index:3;
    padding:7px 9px;
    border:1px solid rgba(255,255,255,0.12);
    border-radius:999px;
    background:rgba(3,7,18,0.58);
    color:
        rgba(
            255,
            255,
            255,
            0.72
        );

    font-size:
        9px;

    letter-spacing:
        0.12em;

    backdrop-filter:
        blur(
            10px
        );
}


.merch-card-body {

    padding:
        22px
        22px
        24px;
}


.merch-year {

    color:
        rgba(
            190,
            143,
            249,
            0.58
        );

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        0.20em;
}


.merch-card h2 {

    margin:
        9px
        0
        5px;

    font-size:
        19px;

    font-weight:
        650;
}


.merch-english {

    color:
        var(--collection-faint);

    font-size:
        8px;

    letter-spacing:
        0.18em;
}


.merch-description {

    min-height:
        54px;

    margin:
        18px
        0
        20px;

    color:
        var(--collection-muted);

    font-size:
        13px;

    line-height:
        1.7;
}


.merch-card-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;
}


.merch-category {

    color:
        rgba(
            230,
            217,
            244,
            0.48
        );

    font-size:
        10px;
}


.merch-open {

    width:
        38px;

    height:
        38px;

    display:
        grid;

    place-items:
        center;

    border:
        1px
        solid
        rgba(
            188,
            135,
            255,
            0.25
        );

    border-radius:
        50%;

    color:
        rgba(
            231,
            211,
            255,
            0.92
        );

    text-decoration:
        none;

    transition:
        transform
        160ms
        ease,

        background
        160ms
        ease;
}


.merch-open:hover {

    transform:
        translateX(
            2px
        );

    background:
        rgba(
            156,
            91,
            255,
            0.10
        );
}


/* =========================================================
   BACK
   ========================================================= */

.collection-back {

    display:
        inline-flex;

    align-items:
        center;

    margin-bottom:
        34px;

    color:
        rgba(
            218,
            200,
            240,
            0.56
        );

    font-size:
        12px;

    text-decoration:
        none;

    transition:
        color
        160ms
        ease,

        transform
        160ms
        ease;
}


.collection-back:hover {

    color:
        #ffffff;

    transform:
        translateX(
            -3px
        );
}


/* =========================================================
   DETAIL PAGE
   ========================================================= */

.merch-detail-layout {

    display:
        grid;

    grid-template-columns:
        minmax(
            300px,
            0.86fr
        )
        minmax(
            0,
            1.14fr
        );

    gap:
        clamp(
            48px,
            7vw,
            94px
        );

    align-items:
        center;
}


.merch-detail-visual {
    min-width:0;
}


.detail-cover-frame {
    position:relative;
    aspect-ratio:4/5;
    overflow:hidden;
    border:1px solid rgba(190,143,255,0.22);
    border-radius:28px;
    background:radial-gradient(circle at 40% 30%,
            rgba(155,94,238,0.26),
            transparent 38%
        ),
        linear-gradient(145deg,#171a35,#090d1f);

    box-shadow:0 30px 80px rgba(0,0,0,0.30);
}

.detail-cover-frame img {
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
}


.detail-index {

    margin-top:
        15px;

    color:
        rgba(
            201,
            177,
            230,
            0.38
        );

    font-size:
        9px;

    letter-spacing:
        0.20em;
}


.merch-detail-copy {

    min-width:
        0;
}


.merch-detail-copy h1 {

    margin-top:
        14px;

    font-size:
        clamp(
            42px,
            5vw,
            68px
        );

    line-height:
        1.08;
}


.detail-english {

    color:
        rgba(
            207,
            179,
            238,
            0.40
        );

    font-size:
        10px;

    letter-spacing:
        0.24em;
}


.detail-meta-row {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;

    margin:
        28px
        0
        20px;
}


.detail-meta-row span {

    padding:
        8px
        11px;

    border:
        1px
        solid
        rgba(
            181,
            132,
            241,
            0.16
        );

    border-radius:
        999px;

    background:
        rgba(
            16,
            20,
            40,
            0.62
        );

    color:
        rgba(
            229,
            214,
            244,
            0.64
        );

    font-size:
        10px;
}


.detail-description {

    max-width:
        620px;

    margin:
        0;

    color:
        rgba(
            244,
            237,
            250,
            0.72
        );

    font-size:
        15px;

    line-height:
        1.9;
}


.detail-note {

    max-width:
        620px;

    margin:
        14px
        0
        0;

    color:
        var(--collection-faint);

    font-size:
        11px;

    line-height:
        1.7;
}


.detail-choice-label {

    margin:
        38px
        0
        13px;

    color:
        rgba(
            196,
            159,
            234,
            0.46
        );

    font-size:
        10px;

    letter-spacing:
        0.16em;
}


.detail-choice-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        14px;
}


.choice-card {

    min-width:
        0;

    min-height:
        142px;

    padding:
        20px;

    display:
        flex;

    gap:
        16px;

    align-items:
        flex-start;

    border:
        1px
        solid
        rgba(
            183,
            134,
            246,
            0.18
        );

    border-radius:
        18px;

    background:
        linear-gradient(
            145deg,
            rgba(
                18,
                22,
                45,
                0.88
            ),
            rgba(
                8,
                12,
                28,
                0.88
            )
        );

    text-decoration:
        none;

    transition:
        transform
        180ms
        ease,

        border-color
        180ms
        ease,

        background
        180ms
        ease;
}


.choice-card:hover {

    transform:
        translateY(
            -3px
        );

    border-color:
        rgba(
            196,
            142,
            255,
            0.42
        );

    background:
        linear-gradient(
            145deg,
            rgba(
                34,
                27,
                66,
                0.92
            ),
            rgba(
                12,
                14,
                34,
                0.92
            )
        );
}


.choice-symbol {

    width:
        38px;

    height:
        38px;

    flex:
        0
        0
        38px;

    display:
        grid;

    place-items:
        center;

    border:
        1px
        solid
        rgba(
            192,
            142,
            255,
            0.24
        );

    border-radius:
        50%;

    color:
        rgba(
            223,
            197,
            255,
            0.90
        );
}


.choice-copy {

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;
}


.choice-copy strong {

    margin-top:
        1px;

    color:
        rgba(
            255,
            255,
            255,
            0.94
        );

    font-size:
        15px;
}


.choice-copy small {

    margin-top:
        4px;

    color:
        var(--collection-faint);

    font-size:
        8px;

    letter-spacing:
        0.16em;
}


.choice-copy em {

    margin-top:
        26px;

    color:
        rgba(
            216,
            191,
            246,
            0.60
        );

    font-size:
        10px;

    font-style:
        normal;

    line-height:
        1.5;
}


/* =========================================================
   SUBPAGE HEADING
   ========================================================= */

.subpage-heading {

    margin-bottom:
        32px;
}


.subpage-heading h1 {

    font-size:
        clamp(
            36px,
            5vw,
            58px
        );
}


.subpage-heading p {

    margin:
        0;

    color:
        var(--collection-faint);

    font-size:
        10px;

    letter-spacing:
        0.20em;
}


/* =========================================================
   CARD GALLERY
   ========================================================= */

.member-filters {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;

    margin-bottom:
        28px;
}


.member-filter {

    min-height:
        38px;

    padding:
        0
        14px;

    border:
        1px
        solid
        rgba(
            179,
            135,
            235,
            0.16
        );

    border-radius:
        999px;

    background:
        rgba(
            10,
            15,
            31,
            0.72
        );

    color:
        rgba(
            229,
            216,
            243,
            0.60
        );

    cursor:
        pointer;

    transition:
        160ms
        ease;
}


.member-filter:hover,
.member-filter.active {

    border-color:
        rgba(
            194,
            142,
            255,
            0.42
        );

    background:
        rgba(
            150,
            91,
            235,
            0.10
        );

    color:
        #ffffff;
}


.photocard-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    gap:
        22px;
}


.photocard {

    padding:
        0;

    border:
        0;

    border-radius:
        18px;

    overflow:
        hidden;

    background:
        transparent;

    color:
        inherit;

    text-align:
        left;

    cursor:
        pointer;
}


.photocard-photo {

    position:
        relative;

    aspect-ratio:
        2.5
        /
        3.5;

    overflow:
        hidden;

    border:
        1px
        solid
        rgba(
            193,
            148,
            250,
            0.20
        );

    border-radius:
        18px;

    background:
        radial-gradient(
            circle
            at
            45%
            30%,
            rgba(
                160,
                95,
                234,
                0.20
            ),
            transparent
            38%
        ),

        linear-gradient(
            150deg,
            #17182d,
            #0a0f20
        );

    transition:
        transform
        180ms
        ease,

        border-color
        180ms
        ease;
}


.photocard:hover
.photocard-photo {

    transform:
        translateY(
            -4px
        );

    border-color:
        rgba(
            202,
            151,
            255,
            0.42
        );
}


.photocard-photo img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;
}


.photocard-info {

    padding:
        12px
        4px
        0;
}


.photocard-info strong {

    display:
        block;

    color:
        rgba(
            255,
            255,
            255,
            0.88
        );

    font-size:
        12px;

    font-weight:
        650;
}


.photocard-info span {

    display:
        block;

    margin-top:
        4px;

    color:
        var(--collection-faint);

    font-size:
        9px;

    letter-spacing:
        0.10em;
}


.card-lightbox {

    position:
        fixed;

    inset:
        0;

    z-index:
        3000;

    padding:
        40px
        20px;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(
            2,
            5,
            13,
            0.88
        );

    backdrop-filter:
        blur(
            18px
        );
}


.card-lightbox.open {

    display:
        flex;
}


.lightbox-close {

    position:
        absolute;

    top:
        24px;

    right:
        28px;

    width:
        46px;

    height:
        46px;

    border:
        1px
        solid
        rgba(
            255,
            255,
            255,
            0.14
        );

    border-radius:
        50%;

    background:
        rgba(
            11,
            14,
            28,
            0.76
        );

    color:
        #ffffff;

    font-size:
        30px;

    font-weight:
        200;

    cursor:
        pointer;
}


.lightbox-card {

    width:
        min(
            390px,
            100%
        );
}


.lightbox-image-frame {

    position:
        relative;

    aspect-ratio:
        2.5
        /
        3.5;

    overflow:
        hidden;

    border:
        1px
        solid
        rgba(
            196,
            148,
            255,
            0.32
        );

    border-radius:
        24px;

    background:
        linear-gradient(
            145deg,
            #18182f,
            #090e20
        );

    box-shadow:
        0
        30px
        90px
        rgba(
            0,
            0,
            0,
            0.46
        );
}


.lightbox-image-frame img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        contain;

    background:
        #070a13;
}


.lightbox-info {

    padding-top:
        16px;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        16px;
}


.lightbox-info strong {
    font-size:
        13px;
}


.lightbox-info span {

    color:
        var(--collection-faint);

    font-size:
        10px;
}


/* =========================================================
   CONFIG
   ========================================================= */

.config-layout {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1.3fr
        )
        minmax(
            280px,
            0.7fr
        );

    gap:
        24px;

    align-items:
        start;
}


.config-main-card,
.config-info-card {

    border:
        1px
        solid
        var(--collection-border);

    border-radius:
        22px;

    background:
        linear-gradient(
            180deg,
            rgba(
                15,
                20,
                39,
                0.88
            ),
            rgba(
                7,
                11,
                24,
                0.92
            )
        );
}


.config-main-card {

    padding:
        26px;
}


.config-card-head {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;

    padding-bottom:
        22px;

    border-bottom:
        1px
        solid
        rgba(
            182,
            142,
            234,
            0.12
        );
}


.config-card-head h2 {

    margin:
        8px
        0
        0;

    font-size:
        22px;

    font-weight:
        600;
}


.config-count {

    color:
        var(--collection-faint);

    font-size:
        9px;

    letter-spacing:
        0.14em;
}


.config-items {

    display:
        grid;

    gap:
        0;
}


.config-item {

    min-height:
        64px;

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    border-bottom:
        1px
        solid
        rgba(
            182,
            142,
            234,
            0.10
        );

    color:
        rgba(
            246,
            240,
            251,
            0.74
        );

    font-size:
        13px;
}


.config-item:last-child {
    border-bottom:
        0;
}


.config-check {

    width:
        28px;

    height:
        28px;

    flex:
        0
        0
        28px;

    display:
        grid;

    place-items:
        center;

    border:
        1px
        solid
        rgba(
            189,
            139,
            251,
            0.28
        );

    border-radius:
        50%;

    color:
        rgba(
            219,
            189,
            255,
            0.86
        );

    font-size:
        11px;
}


.config-info-card {

    padding:
        8px
        22px;
}


.config-info-row {

    padding:
        19px
        0;

    border-bottom:
        1px
        solid
        rgba(
            182,
            142,
            234,
            0.10
        );
}


.config-info-row:last-child {
    border-bottom:
        0;
}


.config-info-row span {

    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--collection-faint);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        0.18em;
}


.config-info-row strong {

    color:
        rgba(
            255,
            255,
            255,
            0.80
        );

    font-size:
        13px;

    font-weight:
        550;
}


.config-info-row p {

    margin:
        0;

    color:
        rgba(
            233,
            222,
            243,
            0.60
        );

    font-size:
        12px;

    line-height:
        1.7;
}


/* =========================================================
   EMPTY
   ========================================================= */

.collection-empty {

    padding:
        48px
        20px;

    border:
        1px
        dashed
        rgba(
            180,
            139,
            232,
            0.20
        );

    border-radius:
        18px;

    color:
        rgba(
            214,
            196,
            234,
            0.48
        );

    text-align:
        center;

    font-size:
        13px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (
    max-width:
    980px
) {

    .merch-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }


    .merch-detail-layout {

        gap:
            42px;

    }


    .detail-choice-grid {

        grid-template-columns:
            1fr;

    }


    .photocard-grid {

        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );

    }

}


@media (
    max-width:
    760px
) {

    .collection-page {

        width:
            min(
                100%
                -
                28px,
                680px
            );

        padding:
            108px
            0
            68px;

    }


    .collection-hero {

        margin-bottom:
            34px;

    }


    .collection-toolbar {

        align-items:
            stretch;

        flex-direction:
            column;

        gap:
            12px;

    }


    .collection-count {

        padding-bottom:
            0;

    }


    .merch-detail-layout {

        grid-template-columns:
            1fr;

    }


    .merch-detail-visual {

        width:
            min(
                100%,
                470px
            );

        margin:
            0
            auto;

    }


    .merch-detail-copy h1 {

        font-size:
            clamp(
                38px,
                11vw,
                54px
            );

    }


    .config-layout {

        grid-template-columns:
            1fr;

    }


    .photocard-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }

}


@media (max-width:520px) {
    .merch-grid {grid-template-columns:1fr;}
    .merch-card {border-radius: 18px;}
    .merch-cover {aspect-ratio:5/5.4;}
    .detail-choice-grid {gap:10px;}
    .choice-card {min-height:126px;}
    .photocard-grid {gap:14px;}
    .config-main-card {padding:20px;}

}


/* =========================================================
   LARGE CARD GALLERY
   99+ / hundreds of card photos
   ========================================================= */

.gallery-controls {
    display: grid;
    grid-template-columns: minmax(220px, 1.7fr) repeat(3, minmax(130px, .8fr)) auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 18px;
    padding: 18px;
    border: 1px solid rgba(181, 139, 237, .15);
    border-radius: 18px;
    background: rgba(8, 13, 29, .62);
}

.gallery-search-field,
.gallery-filter-field { min-width: 0; display: grid; gap: 7px; }

.gallery-search-field span,
.gallery-filter-field span {
    color: rgba(207, 185, 233, .40);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .15em;
}

.gallery-search-field input,
.gallery-filter-field select {
    width: 100%; height: 44px; padding: 0 13px;
    border: 1px solid rgba(180, 137, 235, .16);
    border-radius: 11px; outline: none;
    background: rgba(7, 11, 25, .86);
    color: rgba(255,255,255,.82); font-size: 12px;
}

.gallery-search-field input:focus,
.gallery-filter-field select:focus {
    border-color: rgba(192, 139, 255, .46);
    box-shadow: 0 0 0 3px rgba(161,95,246,.07);
}

.gallery-filter-field select { cursor: pointer; }

.gallery-reset {
    height: 44px; padding: 0 17px;
    border: 1px solid rgba(183,139,239,.19);
    border-radius: 11px;
    background: rgba(18,22,42,.76);
    color: rgba(229,215,244,.62);
    cursor: pointer; transition: 160ms ease;
}

.gallery-reset:hover {
    border-color: rgba(200,151,255,.38);
    color: #fff; background: rgba(147,91,222,.10);
}

.gallery-result-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 22px;
    color: rgba(198,173,228,.38);
    font-size: 9px; font-weight: 700; letter-spacing: .14em;
}

.photocard-info small {
    display: block; min-height: 14px; margin-top: 5px;
    color: rgba(198,177,222,.32); font-size: 8px; letter-spacing: .07em;
}

.load-more-wrap { display: flex; justify-content: center; margin-top: 42px; }

.load-more-button {
    min-width: 190px; min-height: 48px; padding: 0 22px;
    border: 1px solid rgba(193,143,255,.28);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(30,27,58,.88), rgba(12,15,32,.90));
    color: rgba(243,233,255,.82); cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.load-more-button:hover {
    transform: translateY(-2px); border-color: rgba(205,160,255,.52);
    box-shadow: 0 14px 34px rgba(82,45,154,.16);
}

.load-more-button span { margin-left: 5px; color: rgba(204,181,229,.42); font-size: 9px; }
body.lightbox-open { overflow: hidden; }
.lightbox-info > div { display: flex; flex-direction: column; gap: 5px; }
#lightboxMeta { max-width: 48%; text-align: right; line-height: 1.5; }

@media (max-width: 980px) {
    .gallery-controls { grid-template-columns: 1fr 1fr; }
    .gallery-search-field { grid-column: 1 / -1; }
    .gallery-reset { width: 100%; }
}

@media (max-width: 560px) {
    .gallery-controls { grid-template-columns: 1fr; padding: 14px; }
    .gallery-search-field { grid-column: auto; }
    .gallery-result-bar { align-items: flex-start; flex-direction: column; gap: 6px; }
    .load-more-button { width: 100%; }
}