:root {
    --bg:#0c0e14;
    --surface:#151821;
    --surface2:#1b1f2b;
    --surface3:#222736;
    --border:#292e3d;
    --text:#e8ebf2;
    --muted:#768198;
    --accent:#6366f1;
    --accent2:#8b5cf6;
    --green:#10b981;
    --yellow:#f59e0b;
}

* {
    box-sizing:border-box;
}

html,
body {
    margin:0;
    padding:0;
}

body {
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:var(--bg);
    color:var(--text);
}

a {
    color:inherit;
}

.container {
    width:min(1800px,100%);
    margin:0 auto;
    padding:24px;
}

.header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:18px;
}

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

.logo {
    width:46px;
    height:46px;
    border-radius:14px;

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

    font-size:23px;

    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--accent2)
        );

    box-shadow:
        0 8px 30px rgba(99,102,241,.18);
}

h1 {
    margin:0;
    font-size:21px;
}

.subtitle {
    color:var(--muted);
    font-size:12px;
    margin-top:3px;
}

.header-right {
    text-align:right;
}

.updated {
    color:var(--muted);
    font-size:12px;
}

.collector-ok {
    color:var(--green);
    font-size:11px;
    margin-top:5px;
}

.refresh-wrap {
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:20px;
}

.refresh-track {
    height:4px;
    flex:1;
    overflow:hidden;
    cursor:pointer;

    background:var(--border);
    border-radius:99px;
}

.refresh-progress {
    height:100%;
    width:100%;

    border-radius:99px;

    background:
        linear-gradient(
            90deg,
            var(--accent),
            var(--accent2)
        );

    animation:
        countdown 30s linear forwards;
}

.refresh-progress.paused {
    animation-play-state:paused;
}

@keyframes countdown {
    from { width:100%; }
    to { width:0%; }
}

.pause-btn,
.filter-btn {
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--muted);

    border-radius:9px;

    cursor:pointer;

    transition:.15s ease;
}

.pause-btn {
    padding:6px 11px;
    font-size:12px;
}

.pause-btn:hover,
.filter-btn:hover {
    border-color:var(--accent);
    color:var(--text);
}

.pause-btn.active,
.filter-btn.active {
    background:var(--accent);
    border-color:var(--accent);
    color:white;
}

.summary-grid {
    display:grid;

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

    gap:11px;

    margin-bottom:22px;
}

.summary-card {
    min-height:100px;

    padding:16px 17px;

    background:
        linear-gradient(
            145deg,
            var(--surface),
            #171a24
        );

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

    border-radius:14px;
}

.accent-card {
    border-color:
        rgba(99,102,241,.45);

    background:
        linear-gradient(
            145deg,
            rgba(99,102,241,.15),
            var(--surface)
        );
}

.summary-label {
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.8px;
    color:var(--muted);
    margin-bottom:9px;
}

.summary-value {
    font-size:21px;
    line-height:1.15;
    font-weight:700;
}

.summary-note {
    margin-top:7px;
    font-size:11px;
    color:var(--muted);
}

.green {
    color:var(--green);
}

.accent-text {
    color:#8b8df8;
}

.toolbar {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;

    margin-bottom:12px;
}

.search-box {
    display:flex;
    align-items:center;
    gap:8px;

    width:300px;
    max-width:100%;

    padding:0 11px;

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

    background:var(--surface);

    border-radius:10px;
}

.search-box span {
    color:var(--muted);
}

.search-box input {
    width:100%;

    padding:9px 0;

    border:none;
    outline:none;

    background:transparent;
    color:var(--text);

    font-size:13px;
}

.search-box input::placeholder {
    color:#596275;
}

.filter-btn {
    padding:8px 12px;
    font-size:12px;
}

.panel,
.top-panel,
.chart-panel {
    border:1px solid var(--border);

    background:var(--surface);

    border-radius:14px;

    overflow:hidden;
}

.table-scroll {
    overflow-x:auto;
}

table {
    width:100%;
    min-width:1450px;

    border-collapse:collapse;

    font-size:13px;
}

th {
    position:sticky;
    top:0;
    z-index:1;

    padding:11px 13px;

    background:var(--surface2);

    color:var(--muted);

    font-size:10px;
    font-weight:600;

    text-align:left;
    text-transform:uppercase;

    letter-spacing:.55px;

    white-space:nowrap;
}

td {
    padding:11px 13px;

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

    white-space:nowrap;
}

tbody tr {
    transition:background .12s;
}

tbody tr:hover {
    background:var(--surface2);
}

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

.mono {
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;
}

.nowrap {
    white-space:nowrap;
}

.client-link {
    text-decoration:none;
    font-weight:600;
}

.client-link:hover,
.top-name:hover {
    color:#898bff;
}

.client-speed {
    margin-top:3px;
    color:var(--muted);
    font-size:10px;
}

.badge {
    display:inline-flex;
    align-items:center;
    gap:6px;

    padding:3px 9px;

    border:1px solid;
    border-radius:99px;

    font-size:11px;

    white-space:nowrap;
}

.dot {
    width:6px;
    height:6px;

    border-radius:50%;
}

.today-value {
    color:#a4a6ff;
    font-weight:600;
}

.no-results {
    padding:40px;
    text-align:center;
    color:var(--muted);
}

.top-panel {
    padding:18px 20px;
    margin-top:20px;
}

.section-heading {
    margin-bottom:13px;

    font-size:11px;
    font-weight:700;

    text-transform:uppercase;
    letter-spacing:.7px;

    color:var(--muted);
}

.top-row {
    display:flex;
    align-items:center;
    gap:10px;

    min-height:34px;

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

.top-row:last-child {
    border-bottom:none;
}

.rank {
    width:27px;
    color:var(--muted);
    font-size:11px;
}

.top-name {
    width:180px;
    min-width:180px;

    overflow:hidden;
    text-overflow:ellipsis;

    font-size:13px;

    text-decoration:none;
}

.top-bar-bg {
    flex:1;

    height:5px;

    overflow:hidden;

    border-radius:99px;

    background:var(--border);
}

.top-bar {
    height:100%;

    border-radius:99px;

    background:
        linear-gradient(
            90deg,
            var(--accent),
            var(--accent2)
        );
}

.top-value {
    min-width:82px;

    text-align:right;

    font-size:12px;

    color:var(--muted);
}

.footer {
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;

    padding:18px 4px 3px;

    font-size:10px;
    color:#555e70;
}


/* CLIENT */

.client-container {
    max-width:1200px;
}

.back-link {
    display:inline-block;

    margin-bottom:20px;

    color:var(--muted);

    font-size:13px;

    text-decoration:none;
}

.back-link:hover {
    color:var(--text);
}

.client-header {
    display:flex;
    align-items:center;

    gap:15px;

    margin-bottom:22px;
}

.client-avatar {
    width:54px;
    height:54px;

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

    flex-shrink:0;

    border-radius:15px;

    font-size:24px;

    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--accent2)
        );
}

.client-ip {
    margin-top:4px;

    font-family:monospace;

    font-size:12px;
    color:var(--muted);
}

.client-status {
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:9px;

    margin-top:7px;
}

.last-seen {
    color:var(--muted);
    font-size:12px;
}

.speed-grid {
    display:grid;

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

    gap:11px;

    margin-bottom:11px;
}

.client-stats {
    margin-bottom:20px;
}

.chart-panel {
    height:340px;
    padding:19px;
}

.chart-panel canvas {
    max-height:280px;
}


@media (max-width:800px) {

    .container {
        padding:12px;
    }

    .header {
        align-items:flex-start;
    }

    .header-right {
        text-align:left;
    }

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

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

    .top-name {
        width:115px;
        min-width:115px;
    }

    .footer {
        flex-direction:column;
    }

}

@media (max-width:480px) {

    .summary-value {
        font-size:18px;
    }

    .summary-card {
        min-height:92px;
        padding:14px;
    }

}

/* Кликабельная сортировка таблицы */
th.sortable {
    cursor:pointer;
    user-select:none;
}

th.sortable:hover {
    color:var(--text);
    background:var(--surface3);
}

.sort-arrow {
    display:inline-block;
    min-width:10px;
    margin-left:3px;
    color:#8b8df8;
    font-size:11px;
}


/* ==========================================================
   AUTHENTICATION / LOGIN / LOGOUT
   ========================================================== */

.logout-form {
    margin:0 0 7px 0;
}

.logout-btn {
    padding:6px 11px;

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

    background:var(--surface);
    color:var(--muted);

    cursor:pointer;

    font-size:12px;

    transition:.15s ease;
}

.logout-btn:hover {
    border-color:#ef4444;
    color:#f87171;
}


.client-topbar {
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:15px;

    margin-bottom:20px;
}

.client-topbar .back-link {
    margin-bottom:0;
}


.login-body {
    min-height:100vh;

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

    padding:20px;
}

.login-page {
    width:100%;
    max-width:390px;
}

.login-card {
    padding:34px;

    text-align:center;

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

    background:
        linear-gradient(
            145deg,
            var(--surface),
            #171a24
        );

    box-shadow:
        0 24px 70px rgba(0,0,0,.28);
}

.login-logo {
    width:62px;
    height:62px;

    margin:0 auto 17px;

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

    border-radius:18px;

    font-size:30px;

    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--accent2)
        );

    box-shadow:
        0 10px 35px rgba(99,102,241,.22);
}

.login-card h1 {
    font-size:23px;
}

.login-subtitle {
    margin-top:7px;

    color:var(--muted);

    font-size:12px;
}

.login-form {
    margin-top:27px;

    text-align:left;
}

.login-form label {
    display:block;

    margin:13px 0 6px;

    color:var(--muted);

    font-size:11px;
    font-weight:600;
}

.login-form input {
    width:100%;

    padding:11px 12px;

    outline:none;

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

    background:var(--bg);
    color:var(--text);

    font-size:14px;

    transition:.15s ease;
}

.login-form input:focus {
    border-color:var(--accent);

    box-shadow:
        0 0 0 3px rgba(99,102,241,.12);
}

.login-form button {
    width:100%;

    margin-top:20px;
    padding:11px;

    border:none;
    border-radius:10px;

    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--accent2)
        );

    color:white;

    font-size:14px;
    font-weight:700;

    cursor:pointer;
}

.login-form button:hover {
    opacity:.92;
}

.login-error {
    margin-top:18px;
    padding:9px 11px;

    border:1px solid rgba(239,68,68,.35);
    border-radius:9px;

    background:rgba(239,68,68,.09);
    color:#f87171;

    font-size:12px;
}

.login-note {
    margin-top:23px;

    color:#555e70;

    font-size:10px;
}


@media (max-width:480px) {

    .login-card {
        padding:27px 22px;
    }

}