:root {
    --st-bg: #0f1420;
    --st-surface: #182030;
    --st-border: #26314a;
    --st-text: #e8ecf4;
    --st-muted: #8b96ad;
    --st-accent: #2ec5d3;
    --st-accent-2: #8a6cff;
    --st-danger: #ff6b6b;
    color-scheme: dark;
}

@media (prefers-color-scheme: light) {
    :root {
        --st-bg: #f4f6fa;
        --st-surface: #ffffff;
        --st-border: #dde3ee;
        --st-text: #141a26;
        --st-muted: #5d6882;
        --st-accent: #0a9aa8;
        --st-accent-2: #6a4ce0;
        color-scheme: light;
    }
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    background: var(--st-bg);
    color: var(--st-text);
    font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.st {
    max-width: 760px;
    margin: 0 auto;
    padding: 32px 16px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}

.st-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.st-chip {
    padding: 4px 12px;
    border: 1px solid var(--st-border);
    border-radius: 999px;
    background: var(--st-surface);
    color: var(--st-muted);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.st-chip-user { color: var(--st-accent); border-color: var(--st-accent); }

.st-gauge {
    position: relative;
    width: min(340px, 100%);
    text-align: center;
}

.st-gauge svg { width: 100%; height: auto; display: block; }

.st-arc-bg, .st-arc {
    fill: none;
    stroke-width: 14;
    stroke-linecap: round;
}

.st-arc-bg { stroke: var(--st-border); }
.st-arc { stroke: var(--st-accent); transition: stroke-dasharray .2s linear; }
.st-gauge.is-upload .st-arc { stroke: var(--st-accent-2); }

.st-gauge-value {
    position: absolute;
    left: 0;
    right: 0;
    top: 46%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.st-gauge-value span {
    font-size: 48px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.st-gauge-value small { color: var(--st-muted); font-size: 13px; }

.st-phase { margin-top: 8px; color: var(--st-muted); font-size: 14px; min-height: 21px; }
.st-phase.is-error { color: var(--st-danger); }

.st-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    border: 1px solid var(--st-border);
    border-radius: 16px;
    background: var(--st-surface);
    overflow: hidden;
}

.st-stat { padding: 16px; min-width: 0; }
.st-stat + .st-stat { border-left: 1px solid var(--st-border); }
.st-stat-title { color: var(--st-muted); font-size: 13px; }
.st-stat-value { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.st-stat-value small { font-size: 13px; font-weight: 400; color: var(--st-muted); }
.st-stat-desc { color: var(--st-muted); font-size: 13px; }
.st-stat.is-active .st-stat-value span { color: var(--st-accent); }

@media (max-width: 520px) {
    .st-stats { grid-template-columns: minmax(0, 1fr); }
    .st-stat + .st-stat { border-left: 0; border-top: 1px solid var(--st-border); }
}

.st-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

.st-btn {
    min-width: 200px;
    padding: 14px 28px;
    border: 0;
    border-radius: 999px;
    background: var(--st-accent);
    color: #04151a;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.st-btn:disabled { opacity: .55; cursor: default; }
.st-btn:focus-visible { outline: 3px solid var(--st-accent-2); outline-offset: 3px; }

.st-btn-ghost {
    background: transparent;
    color: var(--st-text);
    border: 1px solid var(--st-border);
}

.st-note {
    max-width: 520px;
    margin: 0;
    color: var(--st-muted);
    font-size: 13px;
    text-align: center;
}

/* ---------- ссылка со страницы скорости ---------- */

.st-link { color: var(--st-accent); font-size: 14px; text-decoration: none; }
.st-link:hover { text-decoration: underline; }

/* ---------- «Качество связи» ---------- */

:root { --st-ok: #4cd28a; --st-warn: #f5b84b; }
@media (prefers-color-scheme: light) { :root { --st-ok: #13985a; --st-warn: #b7791f; } }

.st-q { align-items: stretch; gap: 18px; }

.st-q-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.st-q-top .st-meta { justify-content: flex-start; }

.st-title { margin: 0; font-size: 26px; }

.st-q-progress { height: 4px; border-radius: 4px; background: var(--st-border); overflow: hidden; }
.st-q-progress span { display: block; height: 100%; width: 0; background: var(--st-accent); transition: width .25s linear; }

.st-q .st-phase { margin: 0; }

.st-card {
    border: 1px solid var(--st-border);
    border-radius: 16px;
    background: var(--st-surface);
    padding: 16px;
    min-width: 0;
}
.st-card-title {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--st-muted);
}

.st-q-scores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 640px) { .st-q-scores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.st-score { border: 1px solid var(--st-border); border-radius: 12px; padding: 10px 12px; background: var(--st-bg); min-width: 0; }
.st-score b { display: block; font-size: 14px; }
.st-score span { font-size: 13px; color: var(--st-muted); overflow-wrap: anywhere; }
.st-score.is-excellent span, .is-ok { color: var(--st-ok); }
.st-score.is-good span { color: var(--st-accent); }
.st-score.is-fair span, .is-warn { color: var(--st-warn); }
.st-score.is-poor span, .is-bad { color: var(--st-danger); }

#q-chart { width: 100%; height: auto; display: block; }
#q-chart .grid { stroke: var(--st-border); }
#q-chart .axis { fill: var(--st-muted); font-size: 10px; }
#q-chart .ping { fill: none; stroke: var(--st-accent); stroke-width: 1.6; }
#q-chart .kernel { fill: none; stroke: var(--st-accent-2); stroke-width: 1.2; stroke-dasharray: 4 3; }
#q-chart .spike { fill: var(--st-danger); }
#q-chart .lost { stroke: var(--st-warn); stroke-width: 2; }

.st-q-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; color: var(--st-muted); font-size: 12px; }
.st-q-legend i { display: inline-block; vertical-align: middle; margin-right: 6px; }
.st-q-line { width: 16px; border-top: 2px solid var(--st-accent); }
.st-q-line.is-kernel { border-top: 2px dashed var(--st-accent-2); }
.st-q-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--st-danger); }
.st-q-tick { width: 2px; height: 10px; background: var(--st-warn); }

.st-q-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.st-card .st-q-row { margin-top: 12px; }
@media (max-width: 640px) { .st-q-row { grid-template-columns: minmax(0, 1fr); } }

.st-q-label { color: var(--st-muted); font-size: 12px; }
.st-q-num { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.st-q-num small { font-size: 12px; font-weight: 400; color: var(--st-muted); }
.st-q-muted { color: var(--st-muted); font-size: 12px; margin-top: 6px; }

.st-q-grade {
    display: inline-grid;
    place-items: center;
    min-width: 36px;
    height: 36px;
    padding: 0 6px;
    border-radius: 8px;
    font-weight: 800;
    background: var(--st-bg);
    border: 1px solid currentColor;
}
.st-q-head { display: flex; align-items: center; gap: 10px; }

.st-q-bar { display: flex; height: 8px; margin: 8px 0 4px; border-radius: 6px; overflow: hidden; background: var(--st-border); }
.st-q-bar span:nth-child(1) { background: var(--st-danger); }
.st-q-bar span:nth-child(2) { background: var(--st-warn); }

.st-q-waterfall { display: flex; height: 16px; border-radius: 6px; overflow: hidden; background: var(--st-border); }
.st-q-waterfall span { min-width: 2px; }
.st-q-waterfall .dns, .st-q-parts .dns { background: var(--st-accent-2); }
.st-q-waterfall .tcp, .st-q-parts .tcp { background: var(--st-accent); }
.st-q-waterfall .tls, .st-q-parts .tls { background: var(--st-ok); }
.st-q-waterfall .net, .st-q-parts .net { background: var(--st-warn); }
.st-q-waterfall .app, .st-q-parts .app { background: var(--st-danger); }
.st-q-parts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 13px; }
.st-q-parts i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: baseline; }

.st-q .st-note, .st-q .st-actions { align-self: center; }