:root {
    color-scheme: dark;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    color: #f5f7ff;
    background:
        radial-gradient(circle at 50% -15%, #1c3156, #0b1222 38%, #050912 76%);
}

.shell {
    width: min(1080px, calc(100% - 28px));
    margin: auto;
    padding-bottom: 50px;
}

header {
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.brand {
    color: white;
    font-size: 21px;
    font-weight: 800;
    text-decoration: none;
}

nav {
    display: flex;
    align-items: center;
    gap: 18px;
}

nav a {
    color: #a3aec4;
    text-decoration: none;
}

.version {
    color: #8995aa;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 11px;
}

.panel {
    padding-top: 28px;
    text-align: center;
}

.latency {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    max-width: 580px;
    margin: auto;
}

.latency > div,
.result-card,
.settings,
.summary > div,
.card {
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.035);
    border-radius: 17px;
}

.latency > div {
    padding: 15px;
}

.latency span,
.result-card > span,
.summary span,
h2 {
    color: #8996ae;
    font-size: 11px;
    letter-spacing: .12em;
}

.latency strong {
    font-size: 25px;
    margin-left: 8px;
}

.gauge-wrap {
    position: relative;
    width: min(480px, 96vw);
    margin: 14px auto -12px;
}

.gauge-wrap svg {
    width: 100%;
}

.gauge-track,
.gauge-progress {
    fill: none;
    stroke-width: 13;
    stroke-linecap: round;
}

.gauge-track {
    stroke: rgba(255,255,255,.08);
}

.gauge-progress {
    stroke: #5de3ff;
    stroke-dasharray: 470;
    stroke-dashoffset: 470;
    transition: stroke-dashoffset .1s linear;
}

.gauge-center {
    position: absolute;
    top: 95px;
    left: 0;
    right: 0;
}

.gauge-center div {
    color: #8794ab;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .17em;
}

.gauge-center strong {
    display: block;
    font-size: clamp(55px,10vw,80px);
    line-height: 1;
    margin-top: 7px;
}

.gauge-center span {
    display: block;
    color: #8794aa;
    margin-top: 7px;
}

button {
    width: 180px;
    height: 58px;
    border: 0;
    border-radius: 999px;
    font-weight: 850;
    cursor: pointer;
    background: linear-gradient(135deg,#50e6fa,#7f73ff);
    color: #06101e;
}

button:disabled {
    opacity: .45;
    cursor: default;
}

#status {
    color: #8b96aa;
    font-size: 13px;
    margin-top: 12px;
}

.results {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 25px;
}

.result-card {
    padding: 24px;
}

.result-card div {
    margin: 8px 0;
}

.result-card strong {
    font-size: 43px;
}

.result-card small {
    display: block;
    color: #8995aa;
    margin-top: 6px;
}

.settings {
    margin-top: 15px;
    padding: 17px;
}

summary {
    cursor: pointer;
    color: #a0abc0;
}

.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 16px;
}

label {
    display: grid;
    gap: 7px;
    color: #8995aa;
    font-size: 12px;
}

select {
    background: #101829;
    color: white;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 9px;
    padding: 10px;
}

.privacy {
    color: #667188;
    text-align: center;
    font-size: 11px;
    margin-top: 20px;
}

.trend-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    padding: 30px 0 20px;
}

.trend-head h1 {
    margin: 0;
}

.trend-head p {
    color: #8290a6;
}

.summary {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 12px;
}

.summary > div {
    padding: 17px;
}

.summary strong {
    display: inline-block;
    font-size: 23px;
    margin-top: 6px;
}

.card {
    margin-top: 15px;
    padding: 20px;
}

h2 {
    margin: 0 0 14px;
}

canvas {
    display: block;
    width: 100%;
}

.history-row {
    display: grid;
    grid-template-columns: 1.7fr repeat(6,1fr);
    gap: 10px;
    border-top: 1px solid rgba(255,255,255,.06);
    padding: 12px 0;
    color: #929db1;
    font-size: 12px;
}

.history-row strong {
    color: #eef2fb;
}

.storage-bar {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
}

#storageFill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg,#5de3ff,#8476ff);
}

.note {
    color: #707c92;
    font-size: 11px;
}

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

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

    .trend-head {
        flex-direction: column;
        align-items: stretch;
    }

    .history-row {
        grid-template-columns: 1fr 1fr;
    }
}
.connection-card{display:flex;align-items:center;gap:13px;max-width:580px;margin:24px auto 0;padding:14px 17px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);border-radius:17px}.connection-card div:last-child{display:grid;gap:2px}.connection-card span{color:#8996ae;font-size:10px;letter-spacing:.12em}.connection-card strong{font-size:16px}.connection-card small{color:#8995aa}.isp-mark{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:rgba(93,227,255,.12);border:1px solid rgba(93,227,255,.25);font-size:10px;font-weight:900;letter-spacing:.08em}.admin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.admin-table{width:100%;border-collapse:collapse;font-size:12px}.admin-table th,.admin-table td{text-align:left;padding:10px;border-bottom:1px solid rgba(255,255,255,.07)}.admin-table th{color:#8996ae}.login-box{max-width:420px;margin:12vh auto;padding:28px}.login-box input{width:100%;background:#101829;color:#fff;border:1px solid rgba(255,255,255,.13);border-radius:9px;padding:13px;margin:10px 0 18px}.login-box button{width:100%}.flag{font-size:20px;margin-right:6px}@media(max-width:700px){.admin-grid{grid-template-columns:1fr 1fr}.admin-table{font-size:10px}}

/* BRADNET-ADMIN-V020-STATS */
.admin-grid .card strong{
    display:block;
    margin-top:7px;
    overflow-wrap:anywhere;
}
.admin-table-wrap{
    width:100%;
    overflow-x:auto;
}
.recent-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    margin-bottom:14px;
}
.recent-toolbar h2{
    margin-bottom:4px;
}
.recent-toolbar small{
    color:#8996ae;
}
.admin-filter{
    width:min(360px,100%);
    background:#101829;
    color:#fff;
    border:1px solid rgba(255,255,255,.13);
    border-radius:9px;
    padding:11px 13px;
    outline:none;
}
.admin-filter:focus{
    border-color:rgba(93,227,255,.55);
}
.sort-btn{
    width:auto;
    height:auto;
    padding:0;
    border:0;
    border-radius:0;
    background:none;
    color:#8996ae;
    font:inherit;
    font-weight:700;
    white-space:nowrap;
}
.sort-btn:hover{
    color:#fff;
}
.mono{
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    white-space:nowrap;
}
@media(max-width:700px){
    .recent-toolbar{
        align-items:stretch;
        flex-direction:column;
    }
    .admin-filter{
        width:100%;
    }
}