/* ==========================================
   STATISTICS PAGE
========================================== */

.statistics-topbar{
    min-height:92px;
    height:auto;
    padding:18px 28px;
}

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

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

.statistics-topbar-title span{
    display:block;
    margin-bottom:3px;
    color:var(--primary-hover);
    font-size:13px;
    font-weight:700;
    letter-spacing:1.5px;
}

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

.statistics-back-button,
.statistics-dashboard-link{
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--border);
    background:var(--panel-light);
    color:var(--text-light);
    text-decoration:none;
    transition:var(--transition);
}

.statistics-back-button{
    width:42px;
    height:42px;
    flex-shrink:0;
    border-radius:12px;
}

.statistics-dashboard-link{
    gap:8px;
    min-height:42px;
    padding:0 15px;
    border-radius:12px;
    font-size:13px;
    font-weight:600;
}

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

.statistics-scroll{
    padding:28px 30px 40px;
}

.statistics-shell{
    width:100%;
    max-width:1520px;
    margin:0 auto;
}

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

.statistics-hero{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(260px,.42fr);
    align-items:center;
    gap:34px;
    overflow:hidden;
    padding:27px 29px;
    border:1px solid rgba(124,92,252,.3);
    border-radius:21px;
    background:
        radial-gradient(
            circle at 87% 25%,
            rgba(124,92,252,.2),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            rgba(124,92,252,.13),
            rgba(29,34,48,.96) 50%,
            rgba(66,211,146,.05)
        );
    box-shadow:0 20px 50px rgba(0,0,0,.18);
}

.statistics-hero::after{
    content:"";
    position:absolute;
    right:-85px;
    bottom:-125px;
    width:260px;
    height:260px;
    border-radius:50%;
    background:rgba(66,211,146,.07);
    filter:blur(18px);
    pointer-events:none;
}

.statistics-hero-copy,
.statistics-hero-controls{
    position:relative;
    z-index:1;
}

.statistics-hero h2{
    margin:7px 0 8px;
    color:var(--text);
    font-size:32px;
    line-height:1.2;
    letter-spacing:-.65px;
}

.statistics-hero p{
    max-width:700px;
    margin:0;
    color:var(--text-light);
    font-size:14px;
    line-height:1.75;
}

.statistics-hero-controls{
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:0;
    padding:16px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:16px;
    background:rgba(15,17,23,.34);
    backdrop-filter:blur(12px);
}

.statistics-hero-controls label{
    color:var(--text-light);
    font-size:13px;
    font-weight:600;
}

.statistics-hero-controls select{
    width:100%;
    min-height:44px;
    padding:0 38px 0 13px;
    border:1px solid var(--border);
    border-radius:11px;
    background:var(--panel-light);
    color:var(--text);
    font-family:inherit;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
}

.statistics-hero-controls select:focus{
    border-color:var(--primary);
    outline:none;
}

.statistics-browse-link{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:42px;
    margin-top:4px;
    border:1px solid rgba(124,92,252,.45);
    border-radius:11px;
    background:rgba(124,92,252,.12);
    color:var(--text);
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    transition:var(--transition);
}

.statistics-browse-link:hover,
.statistics-browse-link:focus-visible{
    border-color:var(--primary-hover);
    outline:none;
    background:rgba(124,92,252,.21);
    transform:translateY(-1px);
}

/* ==========================================
   KPI CARDS
========================================== */

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

.statistics-kpi{
    --kpi-accent:var(--primary-hover);
    --kpi-soft:rgba(124,92,252,.13);
    display:flex;
    align-items:center;
    gap:13px;
    min-width:0;
    padding:15px;
    border:1px solid var(--border);
    border-radius:15px;
    background:
        linear-gradient(
            145deg,
            rgba(37,44,60,.96),
            rgba(26,30,42,.96)
        );
    transition:var(--transition);
}

.statistics-kpi:hover{
    border-color:color-mix(in srgb,var(--kpi-accent) 58%,transparent);
    transform:translateY(-2px);
}

.owned-kpi{
    --kpi-accent:var(--success);
    --kpi-soft:rgba(66,211,146,.12);
}

.missing-kpi{
    --kpi-accent:var(--danger);
    --kpi-soft:rgba(255,93,115,.12);
}

.duplicate-kpi{
    --kpi-accent:var(--warning);
    --kpi-soft:rgba(244,183,64,.12);
}

.statistics-kpi-icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    flex-shrink:0;
    border-radius:12px;
    background:var(--kpi-soft);
    color:var(--kpi-accent);
}

.statistics-kpi > div:last-child{
    display:flex;
    flex-direction:column;
    min-width:0;
}

.statistics-kpi span,
.statistics-kpi small{
    overflow:hidden;
    color:var(--text-light);
    font-size:13px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.statistics-kpi strong{
    margin:2px 0;
    color:var(--text);
    font-size:23px;
    line-height:1.2;
}

/* ==========================================
   ANALYTICS PANELS
========================================== */

.statistics-primary-grid,
.statistics-secondary-grid{
    display:grid;
    gap:15px;
    margin-top:15px;
}

.statistics-primary-grid{
    grid-template-columns:minmax(0,1.55fr) minmax(300px,.75fr);
}

.statistics-secondary-grid{
    grid-template-columns:minmax(0,1.45fr) minmax(310px,.85fr);
}

.statistics-panel{
    position:relative;
    min-width:0;
    overflow:hidden;
    padding:21px;
    border:1px solid var(--border);
    border-radius:18px;
    background:var(--panel);
}

.statistics-panel-header{
    position:relative;
    z-index:1;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
}

.statistics-panel-header h3{
    margin:4px 0 0;
    color:var(--text);
    font-size:19px;
    line-height:1.3;
}

.statistics-panel-note{
    color:var(--text-light);
    font-size:13px;
    text-align:right;
}

/* ==========================================
   SET COMPLETION
========================================== */

.statistics-set-list{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    gap:9px;
    margin-top:17px;
}

.statistics-set-row{
    width:100%;
    display:grid;
    grid-template-columns:minmax(155px,.8fr) minmax(120px,1.2fr) 58px;
    align-items:center;
    gap:14px;
    padding:11px 12px;
    border:1px solid transparent;
    border-radius:12px;
    background:rgba(255,255,255,.025);
    color:inherit;
    font-family:inherit;
    text-align:left;
    cursor:pointer;
    transition:var(--transition);
}

.statistics-set-row:hover,
.statistics-set-row:focus-visible,
.statistics-set-row.active{
    border-color:rgba(124,92,252,.42);
    outline:none;
    background:rgba(124,92,252,.08);
}

.statistics-set-name{
    min-width:0;
}

.statistics-set-name strong,
.statistics-set-name span{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.statistics-set-name strong{
    color:var(--text);
    font-size:13px;
}

.statistics-set-name span{
    margin-top:3px;
    color:var(--text-light);
    font-size:13px;
}

.statistics-set-track{
    width:100%;
    height:7px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.07);
}

.statistics-set-fill{
    width:var(--set-progress,0%);
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,var(--primary),var(--primary-hover));
    box-shadow:0 0 12px rgba(124,92,252,.25);
}

.statistics-set-row > span{
    color:var(--primary-hover);
    font-size:14px;
    font-weight:700;
    text-align:right;
}

/* ==========================================
   OWNERSHIP DONUT
========================================== */

.ownership-panel::before{
    content:"";
    position:absolute;
    right:-85px;
    bottom:-110px;
    width:230px;
    height:230px;
    border-radius:50%;
    background:rgba(66,211,146,.07);
    filter:blur(20px);
}

.statistics-ownership-content{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:25px;
    margin-top:24px;
}

.statistics-donut{
    --owned-angle:0deg;
    position:relative;
    width:150px;
    height:150px;
    display:grid;
    place-items:center;
    flex-shrink:0;
    border-radius:50%;
    background:
        conic-gradient(
            var(--success) 0deg var(--owned-angle),
            rgba(255,93,115,.18) var(--owned-angle) 360deg
        );
    box-shadow:0 0 28px rgba(66,211,146,.1);
}

.statistics-donut::before{
    content:"";
    position:absolute;
    inset:14px;
    border-radius:50%;
    background:var(--panel);
    box-shadow:inset 0 0 0 1px var(--border);
}

.statistics-donut > div{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.statistics-donut strong{
    color:var(--text);
    font-size:29px;
    line-height:1;
}

.statistics-donut span{
    margin-top:6px;
    color:var(--text-light);
    font-size:13px;
}

.statistics-ownership-legend{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.statistics-ownership-legend > div{
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:10px;
    padding:10px;
    border:1px solid var(--border);
    border-radius:11px;
    background:rgba(255,255,255,.025);
}

.ownership-dot{
    width:9px;
    height:9px;
    border-radius:50%;
}

.owned-dot{background:var(--success);}
.missing-dot{background:var(--danger);}
.copies-dot{background:var(--warning);}

.statistics-ownership-legend span,
.statistics-ownership-legend strong{
    display:block;
    font-size:13px;
}

.statistics-ownership-legend span{color:var(--text-light);}
.statistics-ownership-legend strong{margin-top:2px;color:var(--text);}

/* ==========================================
   RARITY TABLE
========================================== */

.statistics-rarity-table{
    margin-top:17px;
}

.statistics-rarity-heading,
.statistics-rarity-row{
    display:grid;
    grid-template-columns:minmax(170px,1.2fr) 72px 72px minmax(150px,1fr);
    align-items:center;
    gap:11px;
}

.statistics-rarity-heading{
    padding:0 11px 9px;
    color:var(--text-light);
    font-size:13px;
    font-weight:600;
}

.statistics-rarity-heading span:not(:first-child){
    text-align:right;
}

#statisticsRarityList{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.statistics-rarity-row{
    padding:10px 11px;
    border:1px solid var(--border);
    border-radius:11px;
    background:rgba(255,255,255,.022);
}

.statistics-rarity-row > strong{
    overflow:hidden;
    color:var(--text);
    font-size:13px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.statistics-rarity-row > span{
    color:var(--text-light);
    font-size:13px;
    font-weight:600;
    text-align:right;
}

.statistics-rarity-progress{
    display:flex;
    align-items:center;
    gap:9px;
}

.statistics-rarity-track{
    flex:1;
    height:6px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.07);
}

.statistics-rarity-fill{
    width:var(--rarity-progress,0%);
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,var(--primary),var(--primary-hover));
}

.statistics-rarity-progress strong{
    width:43px;
    color:var(--primary-hover);
    font-size:13px;
    text-align:right;
}

/* ==========================================
   COLLECTION SIGNALS
========================================== */

.statistics-signals{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:17px;
}

.statistics-signal{
    --signal-color:var(--primary-hover);
    --signal-soft:rgba(124,92,252,.11);
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:11px;
    padding:12px;
    border:1px solid var(--border);
    border-radius:12px;
    background:rgba(255,255,255,.025);
}

.statistics-signal.success{
    --signal-color:var(--success);
    --signal-soft:rgba(66,211,146,.1);
}

.statistics-signal.warning{
    --signal-color:var(--warning);
    --signal-soft:rgba(244,183,64,.1);
}

.statistics-signal.danger{
    --signal-color:var(--danger);
    --signal-soft:rgba(255,93,115,.1);
}

.statistics-signal-icon{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:var(--signal-soft);
    color:var(--signal-color);
}

.statistics-signal strong,
.statistics-signal span{
    display:block;
}

.statistics-signal strong{
    color:var(--text);
    font-size:13px;
}

.statistics-signal span{
    margin-top:3px;
    color:var(--text-light);
    font-size:13px;
    line-height:1.5;
}

.statistics-empty{
    padding:24px;
    color:var(--text-light);
    font-size:13px;
    text-align:center;
}

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

@media (max-width:1260px){
    .statistics-kpi-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .statistics-primary-grid,
    .statistics-secondary-grid{
        grid-template-columns:1fr;
    }

    .ownership-panel{
        min-height:auto;
    }
}

@media (max-width:1000px){
    .statistics-page{
        overflow-x:hidden;
        overflow-y:auto;
    }

    .statistics-page .app,
    .statistics-page .main-content{
        height:auto;
        min-height:100vh;
        overflow:visible;
    }

    .statistics-scroll{
        flex:0 0 auto;
        min-height:auto;
        overflow:visible;
    }
}

@media (max-width:760px){
    .statistics-topbar,
    .statistics-scroll{
        padding-left:18px;
        padding-right:18px;
    }

    .statistics-dashboard-link{
        width:42px;
        padding:0;
        font-size:0;
    }

    .statistics-dashboard-link i{
        font-size:14px;
    }

    .statistics-hero{
        grid-template-columns:1fr;
        gap:20px;
        padding:22px;
    }

    .statistics-kpi-grid{
        grid-template-columns:1fr;
    }

    .statistics-panel{
        padding:18px;
    }

    .statistics-set-row{
        grid-template-columns:1fr 50px;
        gap:9px;
    }

    .statistics-set-track{
        grid-column:1;
        grid-row:2;
    }

    .statistics-set-row > span{
        grid-column:2;
        grid-row:1 / span 2;
        align-self:center;
    }

    .statistics-ownership-content{
        grid-template-columns:1fr;
        justify-items:center;
    }

    .statistics-ownership-legend{
        width:100%;
    }

    .statistics-rarity-heading{
        display:none;
    }

    .statistics-rarity-row{
        grid-template-columns:minmax(0,1fr) auto auto;
    }

    .statistics-rarity-progress{
        grid-column:1 / -1;
    }
}

@media (max-width:430px){
    .statistics-topbar-title span{
        display:none;
    }

    .statistics-topbar-title h1{
        font-size:22px;
    }

    .statistics-hero h2{
        font-size:26px;
    }

    .statistics-panel-header{
        flex-direction:column;
    }

    .statistics-panel-note{
        text-align:left;
    }
}

@media (prefers-reduced-motion:reduce){
    .statistics-kpi,
    .statistics-set-row,
    .statistics-browse-link{
        transition:none;
    }
}