.shared-collection{max-width:1100px;margin:auto}

.share-hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) 180px;
    gap:36px;
    align-items:center;
    padding:34px
}

.share-hero h2{
    font-size:clamp(2rem,4vw,3rem);
    margin-bottom:12px
}

.share-intro{
    max-width:700px;
    color:#d9cfdd;
    font-size:1.02rem
}

.share-seal{
    width:150px;
    aspect-ratio:1;
    margin:auto;
    border:1px solid #765d8b;
    border-radius:50%;
    display:grid;
    place-items:center;
    align-content:center;
    background:
        radial-gradient(circle at center,#352442 0 42%,#1c1723 43% 58%,#2b2034 59% 100%);
    box-shadow:inset 0 0 0 7px #17131d,inset 0 0 0 8px #6f587f
}

.share-seal span{
    font:2.5rem Georgia,serif;
    color:var(--gold);
    line-height:1
}

.share-seal small{
    margin-top:7px;
    color:#d7c7df;
    letter-spacing:.18em;
    font-size:.58rem
}

.share-stats{margin-top:0}

.share-toolbar{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:18px
}

.share-toolbar h2{margin-bottom:0}

.share-filters{
    margin:0;
    flex:1;
    justify-content:flex-end
}

.share-filters label:first-child{
    max-width:260px;
    min-width:170px
}

.share-card-grid{margin-top:20px}

.share-card{
    position:relative
}

.share-card .card-art{
    border:1px solid #46384f;
    box-shadow:0 10px 25px #0005;
    transition:transform .15s ease,border-color .15s ease
}

.share-card .art-button:hover .card-art{
    transform:translateY(-3px);
    border-color:#806a92
}

.share-card-meta{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:8px;
    margin-top:9px
}

.share-card-meta h3{
    margin:0;
    overflow-wrap:anywhere
}

.share-card-sub{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    margin-top:4px
}

.share-card-sub .badge{
    font-size:.67rem
}

.qty-badge{
    position:absolute;
    top:8px;
    right:8px;
    z-index:3;
    min-width:34px;
    height:34px;
    padding:0 8px;
    border-radius:17px;
    display:grid;
    place-items:center;
    background:#17131ee8;
    border:1px solid #b68a49;
    color:var(--gold);
    font-weight:750;
    box-shadow:0 5px 14px #0008
}

.holo-mark{
    color:#dbc8ff;
    font-size:.72rem;
    white-space:nowrap
}

.share-footer-panel{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px
}

.share-footer-panel h2{margin-bottom:8px}
.share-footer-panel p{margin-bottom:0}

#share-card-modal-content{
    display:grid;
    grid-template-columns:minmax(180px,260px) minmax(0,1fr);
    gap:24px;
    align-items:start
}

#share-card-modal-content .card-art{
    width:100%;
    margin:0
}

.share-modal-details{
    display:grid;
    gap:8px
}

.share-modal-details h2{
    margin:0 0 5px
}

.share-modal-facts{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin-top:8px
}

.share-modal-facts div{
    border:1px solid var(--line);
    border-radius:7px;
    padding:10px 12px;
    background:#17131d
}

.share-modal-facts strong{
    display:block;
    color:var(--gold)
}

.share-error{
    padding:24px;
    border:1px solid #89515b;
    border-radius:10px;
    background:#38202a;
    color:#ffccc8
}

@media(max-width:850px){
    .share-toolbar{
        align-items:stretch;
        flex-direction:column
    }

    .share-filters{
        width:100%;
        justify-content:flex-start
    }
}

@media(max-width:700px){
    .share-hero{
        grid-template-columns:1fr;
        padding:24px
    }

    .share-seal{display:none}

    .share-footer-panel{
        align-items:stretch;
        flex-direction:column
    }

    .share-footer-panel .button{
        width:100%
    }

    #share-card-modal-content{
        grid-template-columns:1fr
    }

    #share-card-modal-content .card-art{
        max-width:230px;
        margin:auto
    }
}

@media(max-width:520px){
    .share-filters{
        display:grid;
        grid-template-columns:1fr 1fr;
        align-items:end
    }

    .share-filters label:first-child{
        max-width:none;
        min-width:0;
        grid-column:1/-1
    }

    .share-modal-facts{
        grid-template-columns:1fr
    }
}


/* --- Optional collection sharing controls --- */
.share-settings{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(290px,.85fr);
    gap:28px;
    align-items:center
}
.share-settings[hidden],
.share-footer-panel[hidden]{display:none!important}
.share-settings h2{margin-bottom:8px}
.share-settings-copy p:last-child{margin-bottom:0}
.share-toggle{
    display:flex;
    grid-template-columns:none;
    gap:12px;
    align-items:flex-start;
    padding:16px;
    border:1px solid var(--line);
    border-radius:9px;
    background:#17131d;
    color:var(--text);
    cursor:pointer
}
.share-toggle input{
    width:20px;
    height:20px;
    min-height:0;
    margin:2px 0 0;
    accent-color:var(--gold);
    flex:0 0 auto
}
.share-toggle span{display:grid;gap:3px}
.share-toggle strong{color:var(--gold)}
.share-toggle small{color:var(--muted);line-height:1.45}
.share-setting-status{
    grid-column:1/-1;
    margin:0
}
.share-setting-status.enabled{color:#d6efc9}
.share-setting-status.disabled{color:var(--muted)}

@media(max-width:700px){
    .share-settings{grid-template-columns:1fr}
}