/* ==========================================
   COLLECTION BROWSER
========================================== */

.collection-page{
    overflow:hidden;
}

.collection-topbar{
    min-height:78px;
    height:auto;
    padding:14px 26px;
}

.collection-topbar-title{
    display:flex;
    align-items:center;
    gap:13px;
    min-width:0;
}

.collection-topbar-title > div{
    min-width:0;
}

.collection-topbar-title span{
    display:block;
    color:var(--primary-hover);
    font-size:13px;
    font-weight:700;
    letter-spacing:1.4px;
}

.collection-topbar-title h1{
    margin:3px 0 0;
    color:var(--text);
    font-size:21px;
    line-height:1.2;
}

.collection-back-button{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    flex-shrink:0;
    border:1px solid var(--border);
    border-radius:11px;
    background:var(--panel-light);
    color:var(--text-light);
    text-decoration:none;
    transition:var(--transition);
}

.collection-back-button:hover,
.collection-back-button:focus-visible{
    border-color:var(--primary);
    outline:none;
    background:rgba(124,92,252,.12);
    color:var(--text);
    transform:translateX(-2px);
}

.collection-dashboard-link{
    display:flex;
    align-items:center;
    gap:8px;
    padding:9px 12px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--panel-light);
    color:var(--text-light);
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    transition:var(--transition);
}

.collection-dashboard-link:hover,
.collection-dashboard-link:focus-visible{
    border-color:var(--primary);
    outline:none;
    background:rgba(124,92,252,.1);
    color:var(--text);
}

.collection-scroll{
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding:28px !important;
}

.collection-browser-shell{
    width:100%;
    max-width:1540px;
    margin:0 auto;
}

/* Hero */

.collection-browser-hero{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(250px,.52fr);
    align-items:center;
    gap:34px;
    overflow:hidden;
    padding:25px 27px;
    border:1px solid var(--border);
    border-radius:20px;
    background:
        linear-gradient(
            135deg,
            rgba(124,92,252,.13),
            rgba(29,34,48,.96) 48%,
            rgba(66,211,146,.055)
        );
    box-shadow:0 12px 30px rgba(0,0,0,.17);
}

.collection-browser-hero::after{
    content:"";
    position:absolute;
    top:-140px;
    right:12%;
    width:300px;
    height:300px;
    border-radius:50%;
    background:rgba(124,92,252,.12);
    filter:blur(40px);
    pointer-events:none;
}

.collection-browser-hero > div{
    position:relative;
    z-index:1;
}

.collection-browser-hero h2{
    margin:6px 0 0;
    color:var(--text);
    font-size:27px;
    line-height:1.2;
    letter-spacing:-.6px;
}

.collection-browser-hero p{
    max-width:640px;
    margin:9px 0 0;
    color:var(--text-light);
    font-size:13px;
    line-height:1.7;
}

.collection-hero-progress{
    padding:15px;
    border:1px solid rgba(124,92,252,.23);
    border-radius:14px;
    background:rgba(15,17,23,.22);
}

.collection-hero-progress > div:first-child{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

.collection-hero-progress span{
    color:var(--text-light);
    font-size:13px;
    font-weight:600;
    letter-spacing:.65px;
    text-transform:uppercase;
}

.collection-hero-progress strong{
    color:var(--primary-hover);
    font-size:19px;
}

.collection-hero-track{
    width:100%;
    height:7px;
    overflow:hidden;
    margin-top:10px;
    border-radius:999px;
    background:rgba(255,255,255,.075);
}

.collection-hero-track > div{
    width:0;
    height:100%;
    border-radius:inherit;
    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--primary-hover)
        );
    box-shadow:0 0 14px rgba(124,92,252,.25);
    transition:width .55s ease;
}

.collection-hero-progress small{
    display:block;
    margin-top:8px;
    color:var(--text-light);
    font-size:13px;
}

/* Summary */

.collection-summary-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:13px;
    margin-top:15px;
}

.collection-summary-card{
    --summary-accent:var(--primary-hover);
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
    padding:14px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--panel);
    color:inherit;
    font-family:inherit;
    text-align:left;
    cursor:pointer;
    appearance:none;
    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.collection-summary-card[data-card-filter="owned"]{
    --summary-accent:var(--success);
}

.collection-summary-card[data-card-filter="missing"]{
    --summary-accent:var(--danger);
}

.collection-summary-card[data-card-filter="duplicates"]{
    --summary-accent:var(--warning);
}

.collection-summary-card:hover,
.collection-summary-card:focus-visible{
    transform:translateY(-2px);
    border-color:var(--summary-accent);
    outline:none;
}

.collection-summary-card.active{
    border-color:var(--summary-accent);
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb,var(--summary-accent) 12%,var(--panel)),
            var(--panel)
        );
    box-shadow:
        0 10px 24px rgba(0,0,0,.16),
        inset 0 0 0 1px
            color-mix(in srgb,var(--summary-accent) 22%,transparent);
}

.collection-summary-card.active .collection-summary-icon{
    box-shadow:
        0 0 0 3px
            color-mix(in srgb,var(--summary-accent) 14%,transparent);
}

.collection-summary-card > div:last-child{
    display:flex;
    flex-direction:column;
    min-width:0;
}

.collection-summary-card span{
    color:var(--text-light);
    font-size:13px;
    font-weight:600;
    letter-spacing:.55px;
    text-transform:uppercase;
}

.collection-summary-card strong{
    margin-top:3px;
    color:var(--text);
    font-size:19px;
    line-height:1.2;
}

.collection-summary-icon{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    flex-shrink:0;
    border-radius:11px;
    font-size:13px;
}

.collection-summary-icon.total{
    background:rgba(124,92,252,.12);
    color:var(--primary-hover);
}

.collection-summary-icon.owned{
    background:rgba(66,211,146,.11);
    color:var(--success);
}

.collection-summary-icon.missing{
    background:rgba(255,93,115,.1);
    color:var(--danger);
}

.collection-summary-icon.duplicates{
    background:rgba(244,183,64,.11);
    color:var(--warning);
}

/* Controls */

.collection-browser-controls{
    display:grid;
    grid-template-columns:minmax(240px,1.5fr) minmax(190px,1fr) minmax(170px,.8fr) minmax(150px,.7fr);
    gap:11px;
    margin-top:15px;
    padding:14px;
    border:1px solid var(--border);
    border-radius:15px;
    background:var(--panel);
}

.collection-control-label{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
}

.collection-search-control,
.collection-select-control{
    position:relative;
    display:flex;
    align-items:center;
    min-width:0;
}

.collection-search-control > i,
.collection-select-control > i{
    position:absolute;
    left:12px;
    z-index:1;
    color:var(--text-light);
    font-size:13px;
    pointer-events:none;
}

.collection-search-control input,
.collection-select-control select{
    width:100%;
    min-width:0;
    height:39px;
    padding:0 12px 0 34px;
    border:1px solid var(--border);
    border-radius:10px;
    outline:none;
    background:rgba(15,17,23,.28);
    color:var(--text);
    font-family:inherit;
    font-size:13px;
    transition:var(--transition);
}

.collection-search-control input::placeholder{
    color:var(--text-light);
}

.collection-search-control input:focus,
.collection-select-control select:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(124,92,252,.09);
}

.collection-select-control select{
    padding-right:30px;
    cursor:pointer;
}

/* Filters */

.collection-filter-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-top:13px;
}

.collection-result-row{
    display:flex;
    justify-content:flex-end;
    margin-top:11px;
}

.collection-filter-tabs{
    display:inline-flex;
    align-items:center;
    flex-wrap:wrap;
    gap:5px;
    padding:4px;
    border:1px solid var(--border);
    border-radius:11px;
    background:var(--panel);
}

.collection-filter-tabs button{
    display:flex;
    align-items:center;
    gap:6px;
    padding:7px 10px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:var(--text-light);
    font-family:inherit;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:var(--transition);
}

.collection-filter-tabs button span{
    min-width:18px;
    padding:2px 5px;
    border-radius:999px;
    background:rgba(255,255,255,.055);
    color:inherit;
    font-size:13px;
    text-align:center;
}

.collection-filter-tabs button:hover,
.collection-filter-tabs button:focus-visible{
    outline:none;
    color:var(--text);
}

.collection-filter-tabs button.active{
    background:rgba(124,92,252,.16);
    color:var(--primary-hover);
}

#collectionResultCount{
    margin:0;
    color:var(--text-light);
    font-size:13px;
    white-space:nowrap;
}

/* Selected set */

.selected-set-banner{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(260px,.55fr);
    align-items:center;
    gap:30px;
    margin-top:13px;
    padding:14px 16px;
    border:1px solid rgba(244,183,64,.19);
    border-radius:14px;
    background:
        linear-gradient(
            90deg,
            rgba(244,183,64,.075),
            rgba(29,34,48,.88)
        );
}

.selected-set-heading{
    display:flex;
    align-items:center;
    gap:11px;
    min-width:0;
}

.selected-set-icon{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    flex-shrink:0;
    border-radius:11px;
    background:rgba(244,183,64,.11);
    color:var(--warning);
    font-size:13px;
}

.selected-set-heading > div:last-child{
    min-width:0;
}

.selected-set-heading span{
    display:block;
    color:var(--text-light);
    font-size:13px;
    font-weight:600;
    letter-spacing:.6px;
    text-transform:uppercase;
}

.selected-set-heading h3{
    margin:3px 0 0;
    overflow:hidden;
    color:var(--text);
    font-size:14px;
    font-weight:600;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.selected-set-progress > div:first-child{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.selected-set-progress span{
    color:var(--text-light);
    font-size:13px;
}

.selected-set-progress strong{
    color:var(--warning);
    font-size:13px;
}

.selected-set-track{
    width:100%;
    height:5px;
    overflow:hidden;
    margin-top:7px;
    border-radius:999px;
    background:rgba(255,255,255,.075);
}

.selected-set-track > div{
    width:0;
    height:100%;
    border-radius:inherit;
    background:
        linear-gradient(
            90deg,
            #d89a20,
            var(--warning)
        );
    transition:width .45s ease;
}

/* Card grid */

.collection-card-browser-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
    gap:14px;
    margin-top:15px;
    padding-bottom:12px;
}

.browser-card{
    --card-accent:var(--primary);
    position:relative;
    min-width:0;
    overflow:hidden;
    padding:11px;
    border:1px solid var(--border);
    border-radius:15px;
    outline:none;
    background:
        linear-gradient(
            145deg,
            rgba(37,44,60,.95),
            rgba(24,28,39,.98)
        );
    color:inherit;
    font-family:inherit;
    text-align:left;
    cursor:pointer;
    transition:
        transform .23s ease,
        border-color .23s ease,
        box-shadow .23s ease;
}

.browser-card:hover,
.browser-card:has(.browser-card-open:focus-visible){
    border-color:color-mix(in srgb,var(--card-accent) 65%,var(--border));
    transform:translateY(-4px);
    box-shadow:
        0 15px 28px rgba(0,0,0,.25),
        0 0 20px color-mix(in srgb,var(--card-accent) 11%,transparent);
}

.browser-card.is-owned{
    --card-accent:var(--success);
}

.browser-card.is-missing{
    --card-accent:var(--danger);
}

.browser-card.is-duplicate{
    --card-accent:var(--warning);
}

.browser-card-visual{
    position:relative;
    width:100%;
    overflow:hidden;
    aspect-ratio:2.5 / 3.5;
    border:1px solid rgba(255,255,255,.075);
    border-radius:10px;
    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(124,92,252,.13),
            rgba(15,17,23,.68) 70%
        );
}

.browser-card-visual img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:
        filter .24s ease,
        transform .24s ease;
}

.browser-card:hover .browser-card-visual img{
    transform:scale(1.025);
}

.browser-card.is-missing .browser-card-visual img{
    filter:grayscale(.8) brightness(.54);
}

.browser-card-placeholder{
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    align-content:center;
    gap:9px;
    padding:18px;
    color:var(--text-light);
    text-align:center;
}

.browser-card-placeholder i{
    font-size:26px;
    color:color-mix(in srgb,var(--card-accent) 78%,var(--text-light));
}

.browser-card-placeholder strong{
    color:var(--text);
    font-size:17px;
}

.browser-card-placeholder span{
    font-size:13px;
    line-height:1.5;
}

.browser-card-badge{
    position:absolute;
    top:7px;
    left:7px;
    z-index:2;
    display:flex;
    align-items:center;
    gap:5px;
    padding:5px 7px;
    border:1px solid color-mix(in srgb,var(--card-accent) 38%,transparent);
    border-radius:999px;
    background:rgba(15,17,23,.86);
    backdrop-filter:blur(8px);
    color:var(--card-accent);
    font-size:13px;
    font-weight:700;
    letter-spacing:.45px;
    text-transform:uppercase;
}

.browser-card-quantity{
    position:absolute;
    top:7px;
    right:7px;
    z-index:2;
    min-width:23px;
    padding:5px 6px;
    border:1px solid rgba(244,183,64,.34);
    border-radius:8px;
    background:rgba(15,17,23,.88);
    color:var(--warning);
    font-size:13px;
    font-weight:700;
    text-align:center;
}

.browser-card-content{
    margin-top:10px;
}

.browser-card-open{
    position:absolute;
    inset:0;
    z-index:2;
    border:0;
    border-radius:inherit;
    outline:none;
    background:transparent;
    cursor:pointer;
}

.browser-card-open:focus-visible{
    outline:2px solid var(--primary-hover);
    outline-offset:-3px;
}

.browser-card-content > span{
    display:block;
    overflow:hidden;
    color:var(--primary-hover);
    font-size:13px;
    font-weight:700;
    letter-spacing:.55px;
    text-overflow:ellipsis;
    text-transform:uppercase;
    white-space:nowrap;
}

.browser-card-content h3{
    margin:4px 0 0;
    overflow:hidden;
    color:var(--text);
    font-size:13px;
    font-weight:600;
    line-height:1.35;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.browser-card-metadata{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin:6px 0 0;
    color:var(--text-light);
    font-size:13px;
}

.browser-card-metadata > span:first-child{
    flex-shrink:0;
}

.browser-card-quantity-control{
    position:relative;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:4px;
    min-width:0;
    padding:2px;
    border:1px solid rgba(124,92,252,.28);
    border-radius:9px;
    background:rgba(15,17,23,.72);
}

.browser-card-quantity-button{
    width:25px;
    height:25px;
    display:grid;
    place-items:center;
    flex-shrink:0;
    padding:0;
    border:1px solid var(--border);
    border-radius:7px;
    outline:none;
    background:rgba(124,92,252,.12);
    color:var(--text);
    font-family:inherit;
    font-size:17px;
    font-weight:600;
    line-height:1;
    cursor:pointer;
    transition:var(--transition);
}

.browser-card-quantity-button:hover,
.browser-card-quantity-button:focus-visible{
    border-color:var(--primary-hover);
    background:rgba(124,92,252,.24);
    color:var(--primary-hover);
}

.browser-card-quantity-button:disabled{
    opacity:.38;
    cursor:not-allowed;
}

.browser-card-quantity-value{
    min-width:39px;
    color:var(--text);
    font-size:13px;
    font-weight:700;
    text-align:center;
    white-space:nowrap;
}

.browser-card-status{
    display:flex;
    align-items:center;
    gap:5px;
    margin-top:9px;
    padding-top:8px;
    border-top:1px solid rgba(44,52,69,.72);
    color:var(--card-accent);
    font-size:13px;
    font-weight:600;
}

.browser-card-market-label{
    color:var(--text-light);
    font-size:12px;
    font-weight:600;
}

.browser-card-market-value{
    margin-left:auto;
    color:var(--text);
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
}

.collection-empty-state{
    min-height:260px;
    margin-top:15px;
    padding:40px;
    border:1px dashed var(--border);
    border-radius:16px;
    background:var(--panel);
    color:var(--text-light);
    text-align:center;
}

.collection-empty-state:not([hidden]){
    display:grid;
    place-items:center;
    align-content:center;
    gap:8px;
}

.collection-empty-state i{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:rgba(124,92,252,.11);
    color:var(--primary-hover);
    font-size:16px;
}

.collection-empty-state strong{
    margin-top:5px;
    color:var(--text);
    font-size:13px;
}

.collection-empty-state span{
    max-width:380px;
    font-size:13px;
    line-height:1.6;
}

/* Card detail dialog */

.collection-card-dialog{
    width:min(840px,calc(100vw - 32px));
    max-height:calc(100vh - 24px);
    overflow:auto;
    padding:0;
    border:1px solid var(--border);
    border-radius:20px;
    outline:none;
    background:var(--panel);
    color:var(--text);
    box-shadow:0 26px 70px rgba(0,0,0,.58);
}

.collection-card-dialog::backdrop{
    background:rgba(5,7,12,.76);
    backdrop-filter:blur(8px);
}

.collection-card-dialog > form{
    position:absolute;
    top:14px;
    right:14px;
    z-index:4;
}

.collection-dialog-close{
    width:35px;
    height:35px;
    display:grid;
    place-items:center;
    border:1px solid var(--border);
    border-radius:10px;
    background:rgba(15,17,23,.86);
    color:var(--text-light);
    cursor:pointer;
    transition:var(--transition);
}

.collection-dialog-close:hover,
.collection-dialog-close:focus-visible{
    border-color:var(--danger);
    outline:none;
    color:var(--danger);
}

.collection-dialog-layout{
    display:grid;
    grid-template-columns:minmax(280px,.95fr) minmax(0,1.05fr);
    min-height:500px;
}

.collection-dialog-visual{
    display:grid;
    place-items:center;
    min-height:500px;
    padding:38px;
    background:
        radial-gradient(
            circle at center,
            rgba(124,92,252,.18),
            rgba(15,17,23,.78) 68%
        );
}

.collection-dialog-visual img{
    width:100%;
    max-width:285px;
    height:auto;
    display:block;
    border-radius:13px;
    box-shadow:
        0 22px 44px rgba(0,0,0,.42),
        0 0 26px rgba(124,92,252,.16);
}

.collection-dialog-visual .browser-card-placeholder{
    width:100%;
    max-width:285px;
    aspect-ratio:2.5 / 3.5;
    border:1px dashed var(--border);
    border-radius:13px;
}

.collection-dialog-content{
    padding:48px 38px 36px;
}

.collection-dialog-content > span{
    color:var(--primary-hover);
    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
}

.collection-dialog-content h2{
    margin:7px 0 0;
    color:var(--text);
    font-size:26px;
    line-height:1.2;
}

.collection-dialog-content > p{
    margin:5px 0 0;
    color:var(--text-light);
    font-size:13px;
}

.collection-dialog-status{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-top:15px;
    padding:7px 9px;
    border-radius:999px;
    background:rgba(66,211,146,.1);
    color:var(--success);
    font-size:13px;
    font-weight:700;
}

.collection-dialog-status.missing{
    background:rgba(255,93,115,.1);
    color:var(--danger);
}

.collection-dialog-details{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin:20px 0 0;
}

.collection-dialog-details > div{
    min-width:0;
    padding:11px;
    border:1px solid var(--border);
    border-radius:11px;
    background:rgba(255,255,255,.025);
}

.collection-dialog-details > .collection-dialog-editable{
    border-color:rgba(124,92,252,.28);
    background:rgba(124,92,252,.055);
    transition:var(--transition);
}

.collection-dialog-details > .collection-dialog-editable:hover,
.collection-dialog-details > .collection-dialog-editable:focus-within{
    border-color:var(--primary-hover);
    background:rgba(124,92,252,.1);
    box-shadow:0 0 0 3px rgba(124,92,252,.08);
}

.collection-dialog-details > .collection-grading-field[hidden]{
    display:none;
}

.collection-dialog-details dt{
    color:var(--text-light);
    font-size:13px;
    font-weight:600;
    letter-spacing:.55px;
    text-transform:uppercase;
}

.collection-dialog-details dd{
    margin:4px 0 0;
    overflow:hidden;
    color:var(--text);
    font-size:13px;
    font-weight:600;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.collection-dialog-details dd.value-positive{
    color:var(--success);
}

.collection-dialog-details dd.value-negative{
    color:#ff5c7a;
}

.collection-dialog-details dd.value-neutral{
    color:var(--text);
}

.collection-dialog-details > .collection-market-value dd{
    display:flex;
    flex-direction:column;
    gap:4px;
    overflow:visible;
    white-space:normal;
}

.collection-market-value strong{
    color:var(--text);
    font-size:16px;
    line-height:1.25;
}

.collection-market-value small{
    color:var(--text-light);
    font-size:12px;
    font-weight:500;
    line-height:1.4;
}

.collection-dialog-editable dd{
    overflow:visible;
}

.collection-dialog-editable select,
.collection-dialog-editable input{
    width:100%;
    min-width:0;
    height:32px;
    border:0;
    outline:none;
    background:transparent;
    color:var(--text);
    font-family:inherit;
    font-size:13px;
    font-weight:600;
}

.collection-dialog-editable select{
    cursor:pointer;
}

.collection-dialog-editable select option{
    background:var(--panel);
    color:var(--text);
}

.collection-dialog-stepper{
    display:grid;
    grid-template-columns:32px 1fr 32px;
    align-items:center;
    gap:7px;
}

.collection-dialog-stepper > span{
    text-align:center;
}

.collection-dialog-stepper button{
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border:1px solid rgba(124,92,252,.3);
    border-radius:8px;
    outline:none;
    background:rgba(124,92,252,.1);
    color:var(--text);
    font-family:inherit;
    font-size:18px;
    font-weight:600;
    cursor:pointer;
    transition:var(--transition);
}

.collection-dialog-stepper button:hover,
.collection-dialog-stepper button:focus-visible{
    border-color:var(--primary-hover);
    background:rgba(124,92,252,.2);
}

.collection-dialog-stepper button:disabled{
    opacity:.35;
    cursor:not-allowed;
}

.collection-dialog-cost-input{
    display:flex;
    align-items:center;
    gap:4px;
}

.collection-dialog-cost-input > span{
    color:var(--success);
}

.collection-dialog-action{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:17px;
    padding:11px 13px;
    border:1px solid rgba(124,92,252,.4);
    border-radius:11px;
    background:rgba(124,92,252,.11);
    color:var(--text);
    font-family:inherit;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:var(--transition);
}

.collection-dialog-action:hover,
.collection-dialog-action:focus-visible{
    border-color:var(--primary-hover);
    outline:none;
    background:rgba(124,92,252,.18);
}

.collection-wishlist-action{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:9px;
    padding:11px 13px;
    border:1px solid rgba(255,93,115,.35);
    border-radius:11px;
    outline:none;
    background:rgba(255,93,115,.075);
    color:var(--text);
    font-family:inherit;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:var(--transition);
}

.collection-wishlist-action:hover,
.collection-wishlist-action:focus-visible,
.collection-wishlist-action.is-saved{
    border-color:var(--danger);
    background:rgba(255,93,115,.15);
    color:#ff8092;
}

.collection-trade-action{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:9px;
    padding:11px 13px;
    border:1px solid rgba(82,168,255,.35);
    border-radius:11px;
    outline:none;
    background:rgba(82,168,255,.075);
    color:var(--text);
    font-family:inherit;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:var(--transition);
}

.collection-trade-action:hover,
.collection-trade-action:focus-visible,
.collection-trade-action.is-saved{
    border-color:#52a8ff;
    background:rgba(82,168,255,.15);
    color:#78bcff;
}

.collection-trade-action:disabled{
    opacity:.48;
    cursor:not-allowed;
}

.collection-dialog-action:disabled{
    opacity:.55;
    cursor:not-allowed;
    transform:none;
}

.collection-dialog-action[hidden],
.collection-wishlist-action[hidden],
.collection-trade-action[hidden],
.collection-editor-panel[hidden],
.collection-dialog-note[hidden],
.collection-editor-reset[hidden]{
    display:none;
}

.collection-dialog-note{
    margin-top:14px;
    padding:12px 13px;
    border:1px solid var(--border);
    border-radius:11px;
    background:rgba(255,255,255,.025);
}

.collection-dialog-note > span{
    display:block;
    color:var(--text-light);
    font-size:13px;
    font-weight:700;
    letter-spacing:.55px;
    text-transform:uppercase;
}

.collection-dialog-note-editor > span{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.collection-dialog-note-editor > span small{
    color:var(--success);
    font-size:11px;
    font-weight:600;
    letter-spacing:0;
    text-transform:none;
}

.collection-dialog-note-editor textarea{
    width:100%;
    min-height:76px;
    margin-top:9px;
    padding:10px 11px;
    border:1px solid transparent;
    border-radius:9px;
    outline:none;
    background:rgba(15,17,23,.36);
    color:var(--text);
    font-family:inherit;
    font-size:13px;
    line-height:1.55;
    resize:vertical;
    transition:var(--transition);
}

.collection-dialog-note-editor textarea:focus{
    border-color:var(--primary-hover);
    box-shadow:0 0 0 3px rgba(124,92,252,.08);
}

.collection-inline-save-status{
    display:flex;
    align-items:center;
    gap:8px;
    min-height:24px;
    margin-top:10px;
    color:var(--text-light);
    font-size:12px;
    font-weight:600;
}

.collection-inline-save-status.is-saving{
    color:var(--primary-hover);
}

.collection-inline-save-status.is-saving i{
    animation:collectionInlineSpin .8s linear infinite;
}

.collection-inline-save-status.is-saved{
    color:var(--success);
}

.collection-inline-save-status.is-error{
    color:var(--danger);
}

@keyframes collectionInlineSpin{
    to{
        transform:rotate(360deg);
    }
}

.collection-dialog-note > p{
    margin:6px 0 0;
    color:var(--text);
    font-size:13px;
    line-height:1.6;
    white-space:pre-wrap;
}

.collection-editor-panel{
    margin-top:15px;
    padding:15px;
    border:1px solid rgba(124,92,252,.35);
    border-radius:14px;
    background:
        linear-gradient(
            145deg,
            rgba(124,92,252,.09),
            rgba(255,255,255,.025)
        );
}

.collection-editor-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.collection-editor-heading span{
    display:block;
    color:var(--primary-hover);
    font-size:13px;
    font-weight:700;
    letter-spacing:.8px;
}

.collection-editor-heading h3{
    margin:3px 0 0;
    color:var(--text);
    font-size:17px;
}

.collection-editor-heading > i{
    color:var(--primary-hover);
    font-size:19px;
}

.collection-editor-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:14px;
}

.collection-editor-panel label{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:0;
}

.collection-editor-panel label > span{
    color:var(--text-light);
    font-size:13px;
    font-weight:600;
}

.collection-editor-panel input,
.collection-editor-panel select,
.collection-editor-panel textarea{
    width:100%;
    border:1px solid var(--border);
    border-radius:10px;
    outline:none;
    background:rgba(15,17,23,.42);
    color:var(--text);
    font-family:inherit;
    font-size:14px;
    transition:var(--transition);
}

.collection-editor-panel input,
.collection-editor-panel select{
    height:40px;
    padding:0 11px;
}

.collection-editor-panel textarea{
    min-height:82px;
    padding:10px 11px;
    line-height:1.5;
    resize:vertical;
}

.collection-editor-panel input:focus,
.collection-editor-panel select:focus,
.collection-editor-panel textarea:focus{
    border-color:var(--primary-hover);
    box-shadow:0 0 0 3px rgba(124,92,252,.1);
}

.collection-editor-notes{
    margin-top:11px;
}

.collection-editor-storage-note{
    display:flex;
    align-items:center;
    gap:7px;
    margin:10px 0 0;
    color:var(--text-light);
    font-size:13px;
}

.collection-editor-message{
    min-height:18px;
    margin-top:7px;
    color:var(--success);
    font-size:13px;
    font-weight:600;
}

.collection-editor-actions{
    display:grid;
    grid-template-columns:auto 1fr 1.35fr;
    gap:8px;
    margin-top:8px;
}

.collection-editor-actions button{
    min-height:38px;
    padding:8px 11px;
    border:1px solid var(--border);
    border-radius:10px;
    font-family:inherit;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:var(--transition);
}

.collection-editor-reset,
.collection-editor-cancel{
    background:rgba(255,255,255,.025);
    color:var(--text-light);
}

.collection-editor-reset:hover,
.collection-editor-cancel:hover{
    border-color:var(--text-light);
    color:var(--text);
}

.collection-editor-save{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    border-color:rgba(124,92,252,.5) !important;
    background:rgba(124,92,252,.18);
    color:var(--text);
}

.collection-editor-save:hover{
    border-color:var(--primary-hover) !important;
    background:rgba(124,92,252,.26);
    transform:translateY(-1px);
}

/* Responsive */

@media (max-width:1250px){

    .collection-browser-controls{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .collection-card-browser-grid{
        grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    }

}

@media (max-width:1000px){

    .collection-page{
        overflow:auto;
    }

    .collection-page .app{
        min-height:100vh;
    }

    .collection-scroll{
        flex:1;
        overflow:visible !important;
    }

}

@media (max-width:760px){

    .collection-scroll{
        padding:18px !important;
    }

    .collection-browser-hero{
        grid-template-columns:1fr;
        gap:18px;
    }

    .collection-summary-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .collection-filter-row{
        align-items:flex-start;
        flex-direction:column;
    }

    .collection-filter-tabs{
        width:100%;
    }

    .collection-filter-tabs button{
        flex:1;
        justify-content:center;
    }

    .selected-set-banner{
        grid-template-columns:1fr;
        gap:15px;
    }

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

    .collection-dialog-visual{
        min-height:330px;
    }

}

@media (max-width:560px){

    .collection-topbar{
        padding:13px 16px;
    }

    .collection-dashboard-link{
        width:38px;
        height:38px;
        justify-content:center;
        padding:0;
        font-size:0;
    }

    .collection-dashboard-link i{
        font-size:13px;
    }

    .collection-browser-hero{
        padding:21px;
    }

    .collection-browser-hero h2{
        font-size:23px;
    }

    .collection-browser-controls{
        grid-template-columns:1fr;
    }

    .collection-filter-tabs{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .collection-card-browser-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
    }

    .collection-dialog-content{
        padding:30px 22px 24px;
    }

    .collection-editor-grid,
    .collection-editor-actions{
        grid-template-columns:1fr;
    }

}

@media (max-width:390px){

    .collection-summary-grid{
        grid-template-columns:1fr;
    }

    .collection-card-browser-grid{
        grid-template-columns:1fr;
    }

    .collection-dialog-details{
        grid-template-columns:1fr;
    }

}

@media (prefers-reduced-motion:reduce){

    .browser-card,
    .browser-card-visual img,
    .collection-hero-track > div,
    .selected-set-track > div{
        transition:none;
    }

}