:root {
    --chrome-1: #2b3342;
    --chrome-2: #101623;
    --edge: #000;
    --text: #cfd6e0;
    --muted: #8fa4c9;
    --accent: #7aa6ff;
    --chip-bg1: #263045;
    --chip-bg2: #141b29;
    --chip-on1: #3e79ff;
    --chip-on2: #2355c7;
}

/* GLOBAL BLUE SCROLLBARS (WebKit + Firefox) */
html {
    scrollbar-color: #3e79ff #0a0f17;
    scrollbar-width: thin
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px
}

*::-webkit-scrollbar-track {
    background: #0a0f17;
    border: 1px solid #000
}

*::-webkit-scrollbar-thumb {
    background: linear-gradient(#3e79ff, #2355c7);
    border: 1px solid #000
}

*::-webkit-scrollbar-thumb:hover {
    filter: brightness(1.06)
}

html,
body {
    height: 100%
}

body {
    margin: 0;
    font: 12px/1.5 Verdana, Tahoma, Arial, sans-serif;
    color: var(--text);
    background: radial-gradient(1200px 800px at 10% 0%, #1b212e 0%, #0c1018 60%) fixed,
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, rgba(0, 0, 0, 0) 1px 3px);
}

* {
    box-sizing: border-box
}

a {
    color: #9bd1ff;
    text-decoration: none
}

a:hover {
    text-decoration: underline
}

.page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px
}

/* ===== Ribbon ===== */
.ribbon {
    position: sticky;
    top: 0;
    z-index: 30;
    background: linear-gradient(#3e79ff, #2355c7);
    border-bottom: 1px solid var(--edge);
    color: #eaf3ff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .6)
}

.ribbon .bar {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 6px 0
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px
}

.brand .word {
    font: 700 18px/1 'Trebuchet MS', Tahoma, sans-serif;
    letter-spacing: .6px;
    text-shadow: 0 1px 0 #000
}

/* ===== Top Navbar (hidden on small screens) ===== */
.topnav {
    background: linear-gradient(var(--chrome-1), var(--chrome-2));
    border-top: 1px solid var(--edge);
    border-bottom: 1px solid var(--edge);
    box-shadow: inset 0 1px 0 #59637c, 0 4px 20px rgba(0, 0, 0, .5)
}

.topnav .page {
    padding: 0 10px
}

.topnav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0;
    align-items: center;
    overflow: auto
}

.topnav li {
    flex: 0 0 auto
}

.topnav a {
    display: block;
    padding: 10px 14px;
    font: 700 11px/1 Verdana, Tahoma, sans-serif;
    letter-spacing: .3px;
    text-transform: uppercase;
    border-right: 1px solid #0a0f17;
    border-left: 1px solid #3b4352;
    background: linear-gradient(#2d3545, #1a2030);
    color: #cfe2ff;
    text-shadow: 0 1px 0 #000;
    white-space: nowrap
}

.topnav a.active {
    outline: 1px solid var(--accent);
    background: linear-gradient(#3a4660, #222a3a)
}

@media (max-width:800px) {
    .topnav {
        display: none
    }
}

/* ===== Layout ===== */
.wrap {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 14px;
    margin: 14px 0;
    align-items: start;
}

.rightcol {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0
}

/* ===== Panels ===== */
.panel {
    border: 1px solid var(--edge);
    background: #0f141e;
    box-shadow: inset 0 1px 0 #2d3850;
    min-width: 0
}

.panel .head {
    padding: 8px 10px;
    background: linear-gradient(#303a4e, #1e2635);
    font-weight: 700;
    color: #e6f0ff;
    text-shadow: 0 1px 0 #000
}

.panel .body {
    padding: 10px;
    min-width: 0
}

.fieldset {
    border: 1px solid var(--edge);
    background: #0b0f17;
    margin: 0 0 10px
}

.fieldset .legend {
    padding: 6px 8px;
    background: linear-gradient(#263045, #141b29);
    font-size: 11px;
    color: #cfe2ff;
    box-shadow: inset 0 1px 0 #526487;
    text-align: center
}

.fieldset .content {
    padding: 8px
}

.fieldset.minimal .legend {
    display: none
}

.notice {
    border: 1px solid var(--edge);
    background: #121826;
    box-shadow: inset 0 1px 0 #36425b;
    padding: 10px;
    margin-bottom: 12px
}

.btn {
    border: 1px solid var(--edge);
    background: linear-gradient(#47546b, #2b3445);
    color: #e1ecff;
    padding: 6px 10px;
    font-size: 11px;
    cursor: pointer;
    box-shadow: inset 0 1px 0 #7083a7
}

.btn:hover {
    filter: brightness(1.08)
}

/* ===== KPI Cards ===== */
.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px
}

.card {
    border: 1px solid var(--edge);
    background: #0f141e;
    box-shadow: inset 0 1px 0 #2a3448, 0 0 10px rgba(0, 0, 0, .4)
}

.card .meta {
    padding: 8px 10px;
    background: linear-gradient(#303a4e, #1e2635);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px
}

.badge {
    display: inline-block;
    padding: 2px 6px;
    border: 1px solid var(--edge);
    font-size: 10px;
    text-transform: uppercase;
    background: linear-gradient(#263045, #141b29);
    color: #cfe2ff;
    box-shadow: inset 0 1px 0 #526487
}

.card .desc {
    padding: 14px 10px;
    color: #a9b8d9;
    min-height: auto;
    text-align: center;
    font: 700 22px/1 'Share Tech Mono', monospace
}

/* ===== Marquee (no overlap on mobile) ===== */
.marquee {
    position: relative;
    overflow: hidden;
    height: 30px;
    line-height: 30px;
    white-space: nowrap;
    border: 1px solid var(--edge);
    background: #0b0f17;
    padding: 0 10px;
    box-shadow: inset 0 1px 0 #2a3346;
    z-index: 1;
}

.marquee span {
    display: inline-block;
    padding-left: 100%;
    will-change: transform;
    animation: marq 18s linear infinite
}

@keyframes marq {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-100%)
    }
}

@media (max-width:800px) {
    .marquee {
        height: 26px;
        line-height: 26px;
        padding: 0 8px;
        font-size: 11px
    }

    .marquee span {
        animation-duration: 22s
    }
}

/* ===== Metric Chips ===== */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0
}

.chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    background: linear-gradient(var(--chip-bg1), var(--chip-bg2));
    border: 1px solid var(--edge);
    color: #cfe2ff;
    cursor: pointer;
    box-shadow: inset 0 1px 0 #526487;
    user-select: none;
    border-radius: 2px
}

.chip:hover {
    filter: brightness(1.05)
}

input[type="radio"].chip-input:checked+label.chip {
    background: linear-gradient(var(--chip-on1), var(--chip-on2));
    color: #eaf3ff;
    outline: 1px solid var(--accent);
    box-shadow: inset 0 1px 0 #9fc0ff, 0 0 8px rgba(58, 112, 255, .3)
}

/* ===== “SEARCH |” style controls ===== */
.ctl {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 540px
}

.ctl-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    height: 24px;
    font: 700 10px/1 Verdana, Tahoma, sans-serif;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #cfe2ff;
    background: linear-gradient(#263045, #141b29);
    border: 1px solid var(--edge);
    box-shadow: inset 0 1px 0 #526487;
    white-space: nowrap;
}

.ctl-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 28px;
    padding: 0 10px;
    background: #0d1320;
    color: #d8e5ff;
    border: 1px solid var(--edge);
    box-shadow: inset 0 1px 0 #2b3a58;
    border-radius: 2px;
}

.ctl .switch {
    height: 28px;
    padding: 0 12px
}

/* ===== Working Versions compact ===== */
.wv-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 2px 0
}

.wv-row .sg {
    display: inline-flex;
    max-width: none;
    width: auto
}

.wv-row .sg-label {
    display: inline-flex;
    height: 22px;
    padding: 0 8px;
    font-size: 10px;
    align-items: center;
    justify-content: center;
    background: linear-gradient(#263045, #141b29);
    border: 1px solid var(--edge);
    color: #cfe2ff
}

.wv-row .sg-static {
    height: 22px;
    padding: 0 8px;
    font-size: 11px;
    flex: 0 0 auto;
    max-width: 32ch;
    border: 1px solid var(--edge);
    background: #0d1320;
    display: flex;
    align-items: center
}

/* ===== Filters bar (list.php) ===== */
.filters-bar {
    margin: 10px 0 16px;
    padding: 14px 16px;
    border: 1px solid var(--edge);
    background: #0b0f17;
    box-shadow: inset 0 1px 0 #2a3346;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px 18px;
    align-items: center
}

.filters-bar .row {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap
}

/* Updated switch */
.switch {
    padding: 0 12px;
    border: 1px solid var(--edge);
    border-radius: 2px;
    background: linear-gradient(#2b3445, #1a2233);
    color: #e1ecff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}

.switch.on {
    background: linear-gradient(#3e79ff, #2355c7);
    box-shadow: inset 0 1px 0 #9fc0ff
}

.switch .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #8a94a8;
    border: 1px solid #000
}

.switch.on .dot {
    background: #eaf3ff
}

/* ===== Table ===== */
.table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed
}

.table th,
.table td {
    border: 1px solid var(--edge);
    padding: 6px 6px;
    font-size: 12px;
    text-align: center;
    vertical-align: middle
}

.table th {
    position: sticky;
    top: 0;
    background: linear-gradient(#303a4e, #1e2635);
    color: #e6f0ff;
    z-index: 1
}

.table tr:nth-child(even) {
    background: #0e131c
}

.table.compact th,
.table.compact td {
    padding: 4px 6px;
    font-size: 11.5px
}

.table .ok {
    color: #9fe1b6;
    font-weight: 700
}

.table .no {
    color: #ffbc7f;
    font-weight: 700
}

.table-wrap {
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: auto
}

/* ===== Results panel ===== */
.panel.results-panel {
    height: 60vh;
    /* or: max-height: 60vh; */
    min-height: 0;
    /* important in flex containers */
    display: flex;
    flex-direction: column;
}

.results-panel .body {
    flex: 1 1 auto;
    min-height: 0;
    /* prevents overflow from forcing growth */
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.click-results {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    /* inherits your blue scrollbar */
    max-height: none;
    /* ensure it’s bound by the panel’s height */
}
@media (max-width: 800px) {
    .panel.results-panel {
        height: 55vh;
    }

    /* matches what you hinted at */
}

.cr-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--edge);
    background: #0f141e;
    box-shadow: inset 0 1px 0 #2a3448;
    margin-bottom: 6px;
    border-radius: 2px
}

.cr-name {
    color: #cfe2ff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.cr-count {
    font: 700 12px/1 'Share Tech Mono', monospace;
    color: #9fe1b6
}

/* ===== Footer ===== */
footer {
    margin-top: 16px;
    background: linear-gradient(#141c2a, #0b1019);
    border-top: 1px solid var(--edge);
    box-shadow: inset 0 1px 0 #2a3346;
    color: #9ab0d3
}

.foot-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 10px 26px
}

.foot-top {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin-bottom: 6px
}

.foot-link {
    font-size: 11px;
    padding: 2px 8px;
    border: 1px solid var(--edge);
    background: linear-gradient(#263045, #141b29);
    color: #cfe2ff;
    box-shadow: inset 0 1px 0 #526487
}

.foot-copy {
    text-align: center;
    font-size: 11px;
    color: #7f94b8
}

/* ===== Mobile layout ===== */
@media (max-width:1100px) {
    .grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .wrap {
        grid-template-columns: 1fr 280px
    }
}

@media (max-width:800px) {
    .wrap {
        grid-template-columns: 1fr
    }

    .grid {
        grid-template-columns: 1fr
    }

    .panel.results-panel {
        max-height: 55vh
    }

    .click-results {
        max-height: calc(55vh - 8px)
    }
}