:root{
    --bg:#111827;
    --card:#1b2433;
    --card-light:#222f43;
    --accent:#72a4f2;
    --text:#e5e7eb;
    --muted:#9ca3af;
    --border:#2d3748;

    --success:#66d19e;
    --danger:#f87171;
}


/* ==========================
   Global
   ========================== */

*{
    box-sizing:border-box;
}


body{
    margin:0;

    background:var(--bg);

    color:var(--text);

    font-family:"Inter",sans-serif;
}


/* ==========================
   Hero
   ========================== */

.hero{
    padding:82px 20px;

    text-align:center;

    background:
        linear-gradient(
            180deg,
            #18243b 0%,
            #111827 100%
        );

    border-bottom:1px solid var(--border);
}


.hero-inner{
    max-width:820px;

    margin:auto;
}


.hero h1{
    margin:0;

    font-family:"Orbitron",sans-serif;

    font-size:3.2rem;
}


.hero p{
    margin:18px auto 0;

    color:var(--muted);

    font-size:1.08rem;

    line-height:1.7;
}


.hero .privacy-note{
    color:var(--success);

    font-size:.95rem;
}


/* ==========================
   Container
   ========================== */

.container{
    max-width:1400px;

    margin:auto;

    padding:40px 20px;
}


/* ==========================
   Sections
   ========================== */

.section{
    background:var(--card);

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

    border-radius:14px;

    padding:32px;

    margin-bottom:30px;

    box-shadow:
        0 8px 25px rgba(0,0,0,.25);
}


.section h2{
    margin-top:0;

    font-family:"Orbitron",sans-serif;
}


.section-copy{
    color:var(--muted);

    line-height:1.6;
}


.hidden{
    display:none !important;
}


/* ==========================
   Badge
   ========================== */

.badge{
    display:inline-block;

    padding:6px 14px;

    background:
        rgba(114,164,242,.15);

    color:var(--accent);

    border-radius:999px;

    font-size:.85rem;

    margin-bottom:20px;
}


/* ==========================
   Upload
   ========================== */

.drop-zone{
    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    min-height:190px;

    padding:30px;

    border:
        2px dashed var(--border);

    border-radius:14px;

    background:var(--card-light);

    cursor:pointer;

    transition:.2s;

    text-align:center;
}


.drop-zone:hover,
.drop-zone.dragover{
    border-color:var(--accent);

    transform:
        translateY(-2px);
}


.drop-zone input{
    display:none;
}


.drop-title{
    font-size:1.1rem;

    font-weight:700;

    color:var(--accent);
}


.drop-subtitle{
    margin-top:10px;

    color:var(--muted);
}


/* ==========================
   Status messages
   ========================== */

.status{
    margin-top:15px;

    padding:12px 14px;

    border-radius:10px;

    background:var(--card-light);
}


.status.success{
    color:var(--success);
}


.status.error{
    color:var(--danger);
}


.status.muted{
    color:var(--muted);
}


/* ==========================
   Summary cards
   ========================== */

.summary-grid{
    display:grid;

    grid-template-columns:
        repeat(auto-fit,1fr);

    gap:16px;

    margin-top:24px;
}


.summary-card{
    padding:24px;

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

    border-radius:12px;

    text-align:center;

    background:var(--card-light);
}


.summary-card span{
    display:block;

    margin-bottom:10px;

    color:var(--muted);

    font-size:.9rem;
}


.summary-card strong{
    font-family:"Orbitron",sans-serif;

    font-size:1.7rem;
}


/* ==========================
   Filters
   ========================== */

.filters{
    display:grid;

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

    gap:16px;

    margin-top:24px;
}


.filters label{
    display:flex;

    flex-direction:column;

    gap:8px;

    color:var(--muted);

    font-size:.9rem;
}


select,
input[type="search"]{
    width:100%;

    padding:12px 14px;

    background:var(--card-light);

    color:var(--text);

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

    border-radius:10px;

    font:inherit;
}


select:focus,
input[type="search"]:focus{
    outline:none;

    border-color:var(--accent);
}


.filtered-summary{
    margin-top:18px;

    color:var(--muted);
}


/* ==========================
   Tables
   ========================== */

.table-wrap{
    margin-top:24px;

    overflow-x:auto;

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

    border-radius:12px;
}


.large-table{
    max-height:680px;

    overflow:auto;
}


table{
    width:100%;

    border-collapse:collapse;

    min-width:620px;
}


th,
td{
    padding:13px 16px;

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

    text-align:left;

    vertical-align:top;
}


th{
    background:var(--card-light);

    color:var(--accent);

    font-size:.88rem;

    position:sticky;

    top:0;

    z-index:1;
}


tbody tr:last-child td{
    border-bottom:0;
}


tbody tr:hover{
    background:
        rgba(255,255,255,.025);
}


td.numeric,
th.numeric{
    text-align:right;
}


.percent{
    font-variant-numeric:
        tabular-nums;

    white-space:nowrap;
}


.reward-name{
    max-width:580px;

    word-break:break-word;
}


.matrix-zero{
    color:#667085;
}


/* ==========================
   Sortable table headers
   ========================== */

th.sortable{
    cursor:pointer;

    user-select:none;

    transition:
        background .15s ease,
        color .15s ease;
}


th.sortable:hover{
    background:#293850;

    color:white;
}


.sort-indicator{
    display:inline-block;

    min-width:14px;

    margin-left:5px;

    opacity:.85;
}


th.sortable:not(.active-sort) .sort-indicator::after{
    content:"↕";

    opacity:.28;
}


th.sortable.active-sort{
    color:white;
}


th.sortable.active-sort.asc .sort-indicator::after{
    content:"▲";
}


th.sortable.active-sort.desc .sort-indicator::after{
    content:"▼";
}

/* ==========================
   Rarest Find
   ========================== */

.rarest-section{
    border-color:
        rgba(114,164,242,.45);

    background:
        radial-gradient(
            circle at top right,
            rgba(114,164,242,.12),
            transparent 34%
        ),
        var(--card);
}


.rarest-card{
    display:grid;

    grid-template-columns:
        190px 1fr;

    gap:24px;

    align-items:stretch;

    margin-top:24px;
}


.rarest-tier,
.rarest-details{
    background:var(--card-light);

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

    border-radius:12px;

    padding:24px;
}


.rarest-tier{
    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;
}


.rarest-tier span{
    color:var(--muted);

    font-size:.85rem;

    margin-bottom:8px;
}


.rarest-tier strong{
    font-family:"Orbitron",sans-serif;

    color:var(--accent);

    font-size:2.4rem;
}


.rarest-rewards{
    display:flex;

    flex-wrap:wrap;

    gap:10px;
}


.rarest-item{
    display:inline-flex;

    align-items:center;

    padding:10px 13px;

    border:
        1px solid rgba(114,164,242,.3);

    border-radius:10px;

    background:
        rgba(114,164,242,.08);

    font-weight:700;
}


.rarest-meta{
    margin:18px 0 0;

    color:var(--muted);

    line-height:1.55;
}


/* ==========================
   Collapsible breadcrumb nav
   ========================== */

.nav-toggle{
    position:fixed;

    top:18px;
    left:18px;

    width:46px;
    height:46px;

    display:flex;

    align-items:center;
    justify-content:center;

    background:
        rgba(17,24,39,.94);

    color:var(--text);

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

    border-radius:10px;

    font-size:1.35rem;

    cursor:pointer;

    z-index:9001;

    box-shadow:
        0 6px 20px rgba(0,0,0,.35);

    transition:
        opacity .15s ease,
        transform .15s ease,
        background .2s ease;
}


.nav-toggle:hover{
    background:var(--card-light);

    border-color:var(--accent);
}


/* Hide hamburger when menu is open */

.nav-toggle.hidden{
    opacity:0;

    visibility:hidden;

    transform:
        scale(.9);

    pointer-events:none;
}


/* Breadcrumb takes hamburger position */

.breadcrumb{
    position:fixed;

    top:18px;
    left:18px;

    margin:0;

    padding:
        0 8px
        0 16px;

    min-height:46px;

    display:flex;

    align-items:center;

    gap:8px;

    background:
        rgba(17,24,39,.96);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

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

    border-radius:10px;

    color:var(--muted);

    font-size:.95rem;

    box-shadow:
        0 8px 25px rgba(0,0,0,.35);

    z-index:9000;

    opacity:0;

    visibility:hidden;

    transform:
        scale(.95);

    transform-origin:
        top left;

    pointer-events:none;

    transition:
        opacity .15s ease,
        transform .15s ease,
        visibility .15s;
}


.breadcrumb.open{
    opacity:1;

    visibility:visible;

    transform:
        scale(1);

    pointer-events:auto;
}


.breadcrumb a{
    color:var(--accent);

    text-decoration:none;
}


.breadcrumb a:hover{
    text-decoration:underline;
}


.breadcrumb span{
    margin:
        0 3px;

    color:var(--muted);
}


/* X button inside opened breadcrumb */

.breadcrumb-close{
    width:32px;
    height:32px;

    margin-left:6px;

    display:flex;

    align-items:center;
    justify-content:center;

    padding:0;

    background:transparent;

    color:var(--muted);

    border:0;

    border-radius:7px;

    font-size:1rem;

    cursor:pointer;

    transition:.2s;
}


.breadcrumb-close:hover{
    background:
        rgba(255,255,255,.08);

    color:var(--text);
}

/* ==========================
   Footer
   ========================== */

footer{
    text-align:center;

    padding:
        40px 20px 55px;

    color:var(--muted);
}


/* ==========================
   Responsive
   ========================== */

@media(max-width:900px){

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


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

}


@media(max-width:650px){

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


    .rarest-tier{
        min-height:130px;
    }

}


@media(max-width:600px){

    .hero{
        padding:62px 18px;
    }


    .hero h1{
        font-size:2.35rem;
    }


    .container{
        padding:25px 14px;
    }


    .section{
        padding:22px 16px;
    }


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

}

.upload-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.library-data-button {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 10px 16px;

  background: rgba(255, 255, 255, 0.06);
  color: inherit;

  font: inherit;
  font-weight: 600;

  cursor: pointer;

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

.library-data-button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
}

.library-data-button:active {
  transform: translateY(1px);
}

.library-data-button:disabled {
  opacity: 0.55;
  cursor: wait;
}

.upload-actions-copy {
  font-size: 0.9rem;
  opacity: 0.65;
}