:root {
    --speed-bg: #f3f6fb;
    --speed-surface: rgba(255,255,255,.92);
    --speed-surface-solid: #ffffff;
    --speed-surface-muted: #f7f9fd;
    --speed-text: #111827;
    --speed-muted: #64748b;
    --speed-border: rgba(148,163,184,.24);
    --speed-shadow: 0 24px 70px rgba(15,23,42,.10);
    --speed-blue: #248cff;
    --speed-cyan: #19d3ff;
    --speed-purple: #7857ff;
    --speed-pink: #ed5ec7;
    --speed-green: #20c997;
    --speed-red: #ef476f;
    --speed-radius-xl: 30px;
    --speed-radius-lg: 22px;
    --speed-radius-md: 16px;
}

html { scroll-behavior: smooth; }
body.speedtest-page {
    margin: 0;
    overflow-x: hidden;
    color: var(--speed-text);
    background:
        radial-gradient(circle at 15% 0%, rgba(36,140,255,.12), transparent 34rem),
        radial-gradient(circle at 88% 18%, rgba(120,87,255,.10), transparent 30rem),
        var(--speed-bg);
}
body.speedtest-page * { box-sizing: border-box; }
body.speedtest-page [hidden] { display: none !important; }
body.speedtest-page button,
body.speedtest-page input,
body.speedtest-page select { font: inherit; }

.speed-app {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 170px 0 42px;
    direction: inherit;
    text-align: start;
    isolation: isolate;
}

/* Follow the active site language without changing the Persian layout. */
html[lang="fa"] .speed-app,
html[lang^="fa-"] .speed-app,
html[dir="rtl"] .speed-app,
body[dir="rtl"] .speed-app,
body.rtl .speed-app {
    direction: rtl;
    text-align: right;
}

html[lang="en"] .speed-app,
html[lang^="en-"] .speed-app,
html[dir="ltr"] .speed-app,
body[dir="ltr"] .speed-app,
body.ltr .speed-app {
    direction: ltr;
    text-align: left;
}

.speed-hero,
.speed-console,
.connection-panel,
.result-panel {
    position: relative;
    border: 1px solid var(--speed-border);
    border-radius: var(--speed-radius-xl);
    background: var(--speed-surface);
    box-shadow: var(--speed-shadow);
    overflow: hidden;
}

.speed-hero {
    min-height: 255px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 42px 46px 28px;
    color: #fff;
    background:
        linear-gradient(120deg, rgba(8,18,42,.98), rgba(23,49,94,.96) 48%, rgba(45,36,100,.94));
    border-color: rgba(255,255,255,.10);
}
.speed-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .18;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to left, #000, transparent 72%);
}
.speed-hero__glow {
    position: absolute;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    filter: blur(30px);
    opacity: .28;
    pointer-events: none;
}
.speed-hero__glow--one { top: -210px; right: -40px; background: var(--speed-cyan); }
.speed-hero__glow--two { bottom: -260px; left: 4%; background: var(--speed-purple); }
.speed-hero__content { position: relative; z-index: 1; max-width: 760px; }
.speed-eyebrow,
.section-heading__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    direction: ltr;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    color: rgba(255,255,255,.72);
}
.speed-eyebrow__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #36e3b5;
    box-shadow: 0 0 0 5px rgba(54,227,181,.12), 0 0 18px rgba(54,227,181,.8);
}
.speed-hero h1 {
    margin: 15px 0 10px;
    color: #fff;
    font-size: clamp(30px, 4vw, 52px);
    line-height: 1.25;
    font-weight: 900;
    letter-spacing: -.035em;
}
.speed-hero p {
    margin: 0;
    max-width: 680px;
    color: rgba(231,239,255,.75);
    font-size: 16px;
    line-height: 1.9;
}
.speed-statusbar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.10);
    direction: ltr;
}
.speed-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,.82);
    font-size: 13px;
    font-weight: 700;
}
.speed-status__pulse {
    width: 10px;
    height: 10px;
    border: 2px solid rgba(255,255,255,.72);
    border-radius: 50%;
}
.speed-app[data-state="running"] .speed-status__pulse {
    border-color: #35e6b5;
    box-shadow: 0 0 0 6px rgba(53,230,181,.12);
    animation: speedPulse 1.2s infinite;
}
.speed-app[data-state="complete"] .speed-status__pulse { background: #35e6b5; border-color: #35e6b5; }
@keyframes speedPulse { 50% { transform: scale(.7); opacity: .5; } }
.server-control { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.68); font-size: 12px; }
.server-control select {
    min-width: 190px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 10px;
    padding: 9px 34px 9px 12px;
    color: #fff;
    background: rgba(255,255,255,.08);
    outline: 0;
}
.server-control option { color: #111827; }

.speed-console {
    margin-top: 22px;
    padding: 34px 38px 32px;
    overflow: visible;
}
.speed-progress {
    position: relative;
    z-index: 1;
    width: min(760px, calc(100% - 20px));
    height: 7px;
    margin: 0 auto 14px;
    overflow: hidden;
    border: 1px solid rgba(148,163,184,.20);
    border-radius: 999px;
    background: rgba(148,163,184,.13);
    box-shadow: inset 0 1px 3px rgba(15,23,42,.07);
}
.speed-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--speed-cyan), var(--speed-blue), var(--speed-purple), var(--speed-pink));
    box-shadow: 0 0 16px rgba(72,111,255,.55);
    transition: width .3s ease;
}
.speed-stage {
    position: relative;
    z-index: 2;
    display: table;
    min-width: 132px;
    margin: 0 auto 24px;
    padding: 9px 22px;
    color: #235fd5;
    background:
        linear-gradient(135deg, rgba(25,211,255,.13), rgba(120,87,255,.12)),
        var(--speed-surface-solid);
    border: 1px solid rgba(71,111,255,.20);
    border-radius: 999px;
    box-shadow: 0 10px 28px rgba(36,140,255,.12), inset 0 1px 0 rgba(255,255,255,.70);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .13em;
    text-align: center;
    direction: ltr;
}
.speed-app[data-phase="upload"] .speed-stage {
    color: #8a3de0;
    background:
        linear-gradient(135deg, rgba(237,94,199,.12), rgba(120,87,255,.13)),
        var(--speed-surface-solid);
    border-color: rgba(168,85,247,.23);
}
.speed-app[data-phase="complete"] .speed-stage {
    color: #08785b;
    background:
        linear-gradient(135deg, rgba(32,201,151,.13), rgba(25,211,255,.10)),
        var(--speed-surface-solid);
    border-color: rgba(32,201,151,.22);
}
.gauge-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    direction: ltr;
}
.gauge-card {
    min-width: 0;
    padding: 22px 24px 15px;
    border: 1px solid var(--speed-border);
    border-radius: var(--speed-radius-lg);
    background:
        radial-gradient(circle at 50% 104%, rgba(36,140,255,.08), transparent 52%),
        var(--speed-surface-muted);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.gauge-card--upload { background: radial-gradient(circle at 50% 104%, rgba(168,85,247,.08), transparent 52%), var(--speed-surface-muted); }
.speed-app[data-phase="download"] .gauge-card--download,
.speed-app[data-phase="upload"] .gauge-card--upload {
    transform: translateY(-3px);
    border-color: rgba(36,140,255,.35);
    box-shadow: 0 18px 40px rgba(36,140,255,.10);
}
.speed-app[data-phase="upload"] .gauge-card--upload { border-color: rgba(168,85,247,.34); box-shadow: 0 18px 40px rgba(168,85,247,.10); }
.gauge-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    direction: rtl;
}
.gauge-card__kicker { color: var(--speed-blue); font-size: 10px; font-weight: 900; letter-spacing: 0; direction: rtl; }
.gauge-card--upload .gauge-card__kicker { color: #a855f7; }
.gauge-card__header h2 { margin: 3px 0 0; color: var(--speed-text); font-size: 18px; font-weight: 900; direction: ltr; letter-spacing: -.02em; }

/* The gauge header mirrors only when the whole page is in English/LTR. */
html[lang="en"] .gauge-card__header,
html[lang^="en-"] .gauge-card__header,
html[dir="ltr"] .gauge-card__header,
body[dir="ltr"] .gauge-card__header,
body.ltr .gauge-card__header {
    direction: ltr;
}

html[lang="en"] .gauge-card__kicker,
html[lang^="en-"] .gauge-card__kicker,
html[dir="ltr"] .gauge-card__kicker,
body[dir="ltr"] .gauge-card__kicker,
body.ltr .gauge-card__kicker {
    direction: ltr;
    text-align: left;
}

html[lang="fa"] .gauge-card__header,
html[lang^="fa-"] .gauge-card__header,
html[dir="rtl"] .gauge-card__header,
body[dir="rtl"] .gauge-card__header,
body.rtl .gauge-card__header {
    direction: rtl;
}
.gauge-card__icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    color: var(--speed-blue);
    background: rgba(36,140,255,.09);
    font-size: 24px;
    font-weight: 300;
}
.gauge-card--upload .gauge-card__icon { color: #a855f7; background: rgba(168,85,247,.09); }
.speed-gauge { position: relative; max-width: 410px; margin: -6px auto 0; }
.speed-gauge svg { display: block; width: 100%; overflow: visible; }
.gauge-track,
.gauge-value {
    fill: none;
    stroke-linecap: round;
    stroke-width: 14;
}
.gauge-track { stroke: rgba(100,116,139,.15); }
.gauge-value { stroke-dasharray: 0 100; transition: stroke-dasharray .35s cubic-bezier(.2,.75,.2,1); }
.gauge-value--download { stroke: url(#downloadGradient); filter: url(#downloadGlow); }
.gauge-value--upload { stroke: url(#uploadGradient); filter: url(#uploadGlow); }
.gauge-needle {
    transform-origin: 160px 160px;
    transform: rotate(-90deg);
    transition: transform .38s cubic-bezier(.22,.8,.2,1);
}
.gauge-needle line { stroke: var(--speed-text); stroke-width: 4; stroke-linecap: round; }
.gauge-needle circle:first-of-type { fill: var(--speed-surface-solid); stroke: var(--speed-text); stroke-width: 5; }
.gauge-needle circle:last-of-type { fill: var(--speed-blue); }
.gauge-card--upload .gauge-needle circle:last-of-type { fill: #a855f7; }
.gauge-ticks line { stroke: rgba(100,116,139,.30); stroke-width: 1.3; }
.gauge-min, .gauge-mid, .gauge-max {
    fill: var(--speed-muted);
    font-size: 11px;
    font-weight: 700;
    text-anchor: middle;
}
.gauge-reading {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    display: flex;
    align-items: baseline;
    gap: 7px;
    direction: ltr;
    white-space: nowrap;
}
.gauge-reading strong {
    color: var(--speed-text);
    font-size: clamp(38px, 5vw, 60px);
    font-weight: 850;
    letter-spacing: -.055em;
    font-variant-numeric: tabular-nums;
    line-height: .95;
}
.gauge-reading span { color: var(--speed-muted); font-size: 13px; font-weight: 800; }

.latency-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
    direction: ltr;
}
.latency-card {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 16px 18px;
    border: 1px solid var(--speed-border);
    border-radius: var(--speed-radius-md);
    background: var(--speed-surface-solid);
}
.latency-card__icon { width: 10px; height: 32px; border-radius: 999px; background: var(--speed-blue); box-shadow: 0 0 18px rgba(36,140,255,.32); }
.latency-card__icon--jitter { background: #a855f7; box-shadow: 0 0 18px rgba(168,85,247,.28); }
.latency-card__icon--server { background: #20c997; box-shadow: 0 0 18px rgba(32,201,151,.28); }
.latency-card div { min-width: 0; display: flex; flex-direction: column; }
.latency-card div span { color: var(--speed-text); font-weight: 800; font-size: 13px; }
.latency-card div small { color: var(--speed-muted); font-size: 10px; }
.latency-card strong { color: var(--speed-text); font-size: 24px; font-weight: 850; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.latency-card em { color: var(--speed-muted); font-size: 11px; font-style: normal; font-weight: 700; }
.latency-card--server { grid-template-columns: auto 1fr minmax(70px, auto); }
.latency-card--server strong { font-size: 14px; text-align: right; }

.speed-actions { display: flex; justify-content: center; margin-top: 30px; }
.speed-start {
    position: relative;
    width: 152px;
    height: 152px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #27b9ff, #4177ff 50%, #744fff);
    box-shadow: 0 18px 45px rgba(54,103,255,.35), inset 0 1px 1px rgba(255,255,255,.32);
    cursor: pointer;
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
    isolation: isolate;
}
.speed-start::before {
    content: "";
    position: absolute;
    inset: 8px;
    z-index: -1;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.28);
}
.speed-start:hover { transform: translateY(-3px) scale(1.015); box-shadow: 0 25px 55px rgba(54,103,255,.42), inset 0 1px 1px rgba(255,255,255,.32); }
.speed-start:active { transform: scale(.98); }
.speed-start:focus-visible { outline: 4px solid rgba(36,140,255,.22); outline-offset: 5px; }
.speed-start__ring {
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    border: 2px solid rgba(36,140,255,.16);
}
.speed-app[data-state="running"] .speed-start { background: linear-gradient(145deg, #ff6688, #e63d6c); box-shadow: 0 18px 45px rgba(230,61,108,.30); }
.speed-app[data-state="running"] .speed-start__ring { border-top-color: #ff6688; animation: spinRing 1s linear infinite; }
@keyframes spinRing { to { transform: rotate(360deg); } }
.speed-start__label { font-size: 14px; font-weight: 950; letter-spacing: .06em; direction: ltr; }
.speed-start small { color: rgba(255,255,255,.78); font-size: 10px; }
.speed-note { margin: 21px 0 0; text-align: center; color: var(--speed-muted); font-size: 12px; line-height: 1.8; }

.connection-panel,
.result-panel { margin-top: 22px; padding: 31px 34px 34px; }
.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}
.section-heading__eyebrow { color: var(--speed-blue); }
.section-heading h2 { margin: 5px 0 0; font-size: 27px; color: var(--speed-text); direction: ltr; text-align: left; }

html[lang="fa"] .section-heading,
html[lang^="fa-"] .section-heading,
html[dir="rtl"] .section-heading,
body[dir="rtl"] .section-heading,
body.rtl .section-heading {
    direction: rtl;
}

html[lang="en"] .section-heading,
html[lang^="en-"] .section-heading,
html[dir="ltr"] .section-heading,
body[dir="ltr"] .section-heading,
body.ltr .section-heading {
    direction: ltr;
}
.icon-button {
    width: 42px;
    height: 42px;
    border: 1px solid var(--speed-border);
    border-radius: 13px;
    color: var(--speed-text);
    background: var(--speed-surface-muted);
    cursor: pointer;
    font-size: 21px;
    transition: transform .2s ease, border-color .2s ease;
}
.icon-button:hover { transform: rotate(25deg); border-color: rgba(36,140,255,.40); }
.icon-button.is-spinning { animation: refreshSpin .8s linear infinite; }
@keyframes refreshSpin { to { transform: rotate(360deg); } }
.connection-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 13px;
    direction: ltr;
}
.connection-item {
    position: relative;
    min-width: 0;
    min-height: 104px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
    padding: 16px 17px;
    border: 1px solid var(--speed-border);
    border-radius: var(--speed-radius-md);
    overflow: hidden;
    background: var(--speed-surface-muted);
    transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.connection-item::before {
    content: "";
    position: absolute;
    top: 0;
    right: 17px;
    left: 17px;
    height: 3px;
    border-radius: 0 0 999px 999px;
    opacity: .62;
    background: linear-gradient(90deg, var(--speed-cyan), var(--speed-blue), var(--speed-purple));
}
.connection-item:hover { transform: translateY(-2px); border-color: rgba(36,140,255,.26); background: var(--speed-surface-solid); box-shadow: 0 12px 28px rgba(15,23,42,.07); }
.connection-item > span { color: var(--speed-muted); font-size: 11px; font-weight: 750; letter-spacing: .025em; }
.connection-item strong {
    min-width: 0;
    color: var(--speed-text);
    font-size: 14px;
    font-weight: 850;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.connection-item .is-loading {
    position: relative;
    width: min(100%, 150px);
    min-height: 19px;
    color: transparent;
    border-radius: 7px;
    overflow: hidden;
    background: rgba(148,163,184,.18);
}
.connection-item .is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-110%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.68), transparent);
    animation: skeleton 1.1s infinite;
}
@keyframes skeleton { to { transform: translateX(110%); } }
.country-value { display: flex; align-items: center; gap: 9px; }
.country-value img { width: 27px; height: 19px; object-fit: cover; border-radius: 4px; box-shadow: 0 3px 8px rgba(15,23,42,.17); }
.connection-copy { cursor: copy; }
.connection-caption { margin: 16px 2px 0; color: var(--speed-muted); font-size: 11px; direction: ltr; text-align: left; }

.result-panel[hidden], .share-preview[hidden] { display: none !important; }
.quality-badge {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    color: #057857;
    background: rgba(32,201,151,.12);
    border: 1px solid rgba(32,201,151,.20);
    font-size: 12px;
    font-weight: 900;
    direction: ltr;
}
.quality-badge[data-grade="fair"] { color: #9a6700; background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.22); }
.quality-badge[data-grade="poor"] { color: #b42345; background: rgba(239,71,111,.11); border-color: rgba(239,71,111,.21); }
.result-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
    direction: ltr;
}
.result-metrics article {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 21px;
    border: 1px solid var(--speed-border);
    border-radius: var(--speed-radius-md);
    background: var(--speed-surface-muted);
}
.result-metrics span { color: var(--speed-muted); font-size: 11px; font-weight: 800; }
.result-metrics strong { color: var(--speed-text); font-size: clamp(28px, 4vw, 42px); line-height: 1; font-weight: 900; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.result-metrics em { color: var(--speed-muted); font-size: 11px; font-style: normal; font-weight: 800; }
.result-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 1px;
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid var(--speed-border);
    border-radius: var(--speed-radius-md);
    background: var(--speed-border);
    direction: ltr;
}
.result-meta div { min-width: 0; display: flex; flex-direction: column; gap: 7px; padding: 15px 17px; background: var(--speed-surface-solid); }
.result-meta span { color: var(--speed-muted); font-size: 10px; font-weight: 750; }
.result-meta strong { color: var(--speed-text); font-size: 13px; overflow-wrap: anywhere; }
.result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; direction: ltr; }

/* Result sharing is intentionally disabled when persistent server storage is unavailable. */
.result-meta > div:nth-child(3),
#copySummary,
#openResult,
#shareArea { display: none !important; }
.result-meta { grid-template-columns: repeat(3, minmax(0,1fr)); }
.result-actions { justify-content: center; }
#runAgain { min-width: 180px; }

.action-button {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 17px;
    border: 1px solid var(--speed-border);
    border-radius: 12px;
    color: var(--speed-text);
    background: var(--speed-surface-solid);
    text-decoration: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 850;
}
.action-button--primary { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--speed-blue), var(--speed-purple)); }
.action-button:disabled { opacity: .52; cursor: not-allowed; filter: grayscale(.18); }
.share-preview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 500px);
    gap: 22px;
    align-items: center;
    margin-top: 22px;
    padding: 20px;
    border: 1px solid var(--speed-border);
    border-radius: var(--speed-radius-lg);
    background: var(--speed-surface-muted);
    direction: ltr;
}
.share-preview > div { min-width: 0; }
.share-preview span { display: block; margin-bottom: 8px; color: var(--speed-muted); font-size: 11px; font-weight: 800; }
.share-preview input { width: 100%; cursor: copy; height: 45px; padding: 0 13px; border: 1px solid var(--speed-border); border-radius: 11px; color: var(--speed-text); background: var(--speed-surface-solid); outline: 0; font-size: 11px; direction: ltr; }
.share-preview img { width: 100%; height: auto; display: block; border-radius: 14px; box-shadow: 0 13px 30px rgba(15,23,42,.14); background: var(--speed-surface-solid); }
.speed-footer { padding: 25px 10px 0; text-align: center; direction: ltr; color: var(--speed-muted); font-size: 11px; }
.speed-toast {
    position: fixed;
    right: 50%;
    bottom: 28px;
    z-index: 999999;
    transform: translate(50%, 18px);
    min-width: 210px;
    max-width: calc(100% - 32px);
    padding: 13px 17px;
    border-radius: 12px;
    color: #fff;
    background: rgba(15,23,42,.94);
    box-shadow: 0 18px 45px rgba(15,23,42,.25);
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.speed-toast.is-visible { opacity: 1; visibility: visible; transform: translate(50%, 0); }

/* Dark mode: compatible with the site's existing body.dark class. */
body.dark.speedtest-page,
body.speedtest-page.dark {
    --speed-bg: #080d18;
    --speed-surface: rgba(15,23,42,.88);
    --speed-surface-solid: #111a2b;
    --speed-surface-muted: #0d1626;
    --speed-text: #f3f7ff;
    --speed-muted: #91a0b9;
    --speed-border: rgba(148,163,184,.16);
    --speed-shadow: 0 28px 80px rgba(0,0,0,.34);
    background:
        radial-gradient(circle at 15% 0%, rgba(36,140,255,.13), transparent 34rem),
        radial-gradient(circle at 88% 18%, rgba(120,87,255,.11), transparent 30rem),
        var(--speed-bg) !important;
    color: var(--speed-text) !important;
}
body.dark.speedtest-page .connection-item strong.is-loading::after,
body.speedtest-page.dark .connection-item .is-loading::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); }
body.dark.speedtest-page .gauge-track,
body.speedtest-page.dark .gauge-track { stroke: rgba(148,163,184,.13); }
body.dark.speedtest-page .speed-stage,
body.speedtest-page.dark .speed-stage { box-shadow: 0 8px 24px rgba(0,0,0,.25); }
body.dark.speedtest-page .speed-toast,
body.speedtest-page.dark .speed-toast { background: rgba(243,247,255,.94); color: #111827; }

@media (max-width: 900px) {
    .speed-app { padding-top: 145px; }
    .gauge-grid { grid-template-columns: 1fr; }
    .speed-gauge { max-width: 460px; }
    .connection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .result-metrics, .result-meta { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .share-preview { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
    .speed-app { width: min(100% - 20px, 1180px); padding-top: 112px; padding-bottom: 28px; }
    .speed-hero { min-height: 230px; padding: 30px 23px 22px; border-radius: 24px; }
    .speed-hero h1 { font-size: clamp(28px, 9vw, 40px); }
    .speed-hero p { font-size: 13px; line-height: 1.9; }
    .speed-statusbar { align-items: flex-start; flex-direction: column; }
    .server-control { width: 100%; align-items: flex-start; flex-direction: column; }
    .server-control select { width: 100%; }
    .speed-console { margin-top: 13px; padding: 29px 12px 23px; border-radius: 24px; }
    .speed-progress { width: calc(100% - 8px); margin-bottom: 11px; }
    .speed-stage { min-width: 118px; margin-bottom: 18px; padding: 8px 18px; }
    .gauge-grid { gap: 13px; }
    .gauge-card { padding: 18px 10px 10px; border-radius: 18px; }
    .gauge-card__header { padding: 0 8px; }
    .gauge-card__header h2 { font-size: 13px; }
    .gauge-card__icon { width: 34px; height: 34px; }
    .gauge-reading { bottom: 15px; }
    .gauge-reading strong { font-size: clamp(38px, 14vw, 56px); }
    .latency-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; margin-top: 13px; }
    .latency-card { grid-template-columns: auto 1fr auto auto; gap: 8px; padding: 13px 12px; }
    .latency-card--server { grid-column: 1 / -1; grid-template-columns: auto 1fr minmax(80px, auto); }
    .latency-card strong { font-size: 20px; }
    .speed-start { width: 138px; height: 138px; }
    .connection-panel, .result-panel { margin-top: 13px; padding: 23px 15px; border-radius: 24px; }
    .section-heading { align-items: flex-start; }
    .section-heading h2 { font-size: 23px; }
    .connection-grid { gap: 9px; }
    .connection-item { min-height: 88px; padding: 14px 12px; }
        .result-metrics { gap: 9px; }
    .result-metrics article { padding: 16px 13px; }
    .result-meta { grid-template-columns: 1fr; }
    .result-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
    .result-actions .action-button:last-child:nth-child(3) { grid-column: 1 / -1; }
    .share-preview { padding: 13px; }
}

@media (max-width: 420px) {
    .speed-app { width: calc(100% - 14px); }
    .result-metrics { grid-template-columns: 1fr 1fr; }
    .gauge-min, .gauge-mid, .gauge-max { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .speed-app *, .speed-app *::before, .speed-app *::after, .speed-toast { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ========================================================================
   Bilingual SEO content — UI only
   The speed-test engine and measurement logic are not affected.
   ======================================================================== */
.speed-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 4px 13px;
    color: var(--speed-muted);
    font-size: 12px;
    line-height: 1.7;
}
.speed-breadcrumb a {
    color: var(--speed-blue);
    text-decoration: none;
    font-weight: 800;
}
.speed-breadcrumb a:hover { text-decoration: underline; }

.speed-content-section,
.speed-related-section,
.speed-faq-section {
    margin-top: 22px;
    padding: 34px 38px;
    border: 1px solid var(--speed-border);
    border-radius: var(--speed-radius-xl);
    color: var(--speed-text);
    background: var(--speed-surface);
    box-shadow: var(--speed-shadow);
}

.speed-content-heading {
    max-width: 850px;
    margin: 0 auto 25px;
    text-align: center;
}
.speed-content-heading > span {
    display: inline-flex;
    margin-bottom: 8px;
    color: var(--speed-blue);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.speed-content-heading h2 {
    margin: 0 0 11px;
    color: var(--speed-text);
    font-size: clamp(24px, 3.4vw, 36px);
    line-height: 1.45;
    letter-spacing: -.02em;
}
.speed-content-heading p {
    margin: 0;
    color: var(--speed-muted);
    font-size: 14px;
    line-height: 2;
}
.speed-content-heading--compact {
    margin-top: 34px;
    margin-bottom: 17px;
}
.speed-content-heading--compact h2 { font-size: clamp(22px, 3vw, 30px); }

.speed-info-grid,
.speed-use-grid,
.speed-related-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.speed-info-card,
.speed-use-grid article,
.speed-related-card {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--speed-border);
    border-radius: var(--speed-radius-lg);
    background: var(--speed-surface-muted);
}
.speed-info-card {
    position: relative;
    overflow: hidden;
}
.speed-info-card::after {
    content: "";
    position: absolute;
    inset-inline-end: -46px;
    bottom: -58px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(36,140,255,.14), transparent 68%);
    pointer-events: none;
}
.speed-info-card__label {
    display: inline-flex;
    margin-bottom: 13px;
    padding: 5px 9px;
    border: 1px solid rgba(36,140,255,.18);
    border-radius: 8px;
    color: var(--speed-blue);
    background: rgba(36,140,255,.08);
    font-size: 10px;
    font-weight: 900;
    direction: ltr;
    letter-spacing: .05em;
}
.speed-info-card h3,
.speed-use-grid h3,
.speed-related-card h3,
.speed-checklist-card h3,
.speed-brand-card h2 {
    margin: 0 0 9px;
    color: var(--speed-text);
    font-size: 17px;
    line-height: 1.65;
}
.speed-info-card p,
.speed-use-grid p,
.speed-related-card p,
.speed-brand-card p {
    margin: 0;
    color: var(--speed-muted);
    font-size: 13px;
    line-height: 2;
}

.speed-checklist-card {
    margin-top: 15px;
    padding: 24px;
    border: 1px solid rgba(32,201,151,.22);
    border-radius: var(--speed-radius-lg);
    background: linear-gradient(135deg, rgba(32,201,151,.09), rgba(25,211,255,.06)), var(--speed-surface-muted);
}
.speed-checklist-card ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 22px;
    margin: 15px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: speed-tips;
}
.speed-checklist-card li {
    position: relative;
    min-width: 0;
    padding-inline-start: 38px;
    color: var(--speed-muted);
    font-size: 13px;
    line-height: 1.9;
    counter-increment: speed-tips;
}
.speed-checklist-card li::before {
    content: counter(speed-tips);
    position: absolute;
    inset-inline-start: 0;
    top: 2px;
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 9px;
    color: #057857;
    background: rgba(32,201,151,.13);
    font-size: 11px;
    font-weight: 900;
}

.speed-use-grid article {
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.speed-use-grid article:hover {
    transform: translateY(-2px);
    border-color: rgba(36,140,255,.24);
    background: var(--speed-surface-solid);
}

.speed-brand-card {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    margin-top: 16px;
    padding: 25px;
    border: 1px solid rgba(120,87,255,.20);
    border-radius: var(--speed-radius-lg);
    background: linear-gradient(135deg, rgba(36,140,255,.08), rgba(120,87,255,.09)), var(--speed-surface-muted);
}
.speed-brand-card__mark {
    display: grid;
    place-items: center;
    min-height: 105px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, #248cff, #7857ff);
    box-shadow: 0 16px 35px rgba(68,88,220,.22);
    font-size: 20px;
    font-weight: 950;
    direction: ltr;
    letter-spacing: .12em;
}

.speed-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.speed-related-card {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.speed-related-card:hover {
    transform: translateY(-3px);
    border-color: rgba(36,140,255,.27);
    background: var(--speed-surface-solid);
    box-shadow: 0 15px 32px rgba(15,23,42,.08);
}
.speed-related-card__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 15px;
    border-radius: 13px;
    color: var(--speed-blue);
    background: rgba(36,140,255,.10);
    font-size: 22px;
}
.speed-related-card p { flex: 1 1 auto; }
.speed-related-card strong {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 15px;
    color: var(--speed-blue);
    font-size: 12px;
    font-weight: 900;
}

.speed-faq-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}
.speed-faq-item {
    min-width: 0;
    border: 1px solid var(--speed-border);
    border-radius: 15px;
    background: var(--speed-surface-muted);
    overflow: hidden;
}
.speed-faq-item summary {
    position: relative;
    padding: 17px 48px 17px 18px;
    color: var(--speed-text);
    cursor: pointer;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.75;
    list-style: none;
}
html[dir="ltr"] .speed-faq-item summary { padding: 17px 18px 17px 48px; }
.speed-faq-item summary::-webkit-details-marker { display: none; }
.speed-faq-item summary::after {
    content: "+";
    position: absolute;
    inset-inline-end: 17px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    color: var(--speed-blue);
    background: rgba(36,140,255,.10);
    font-size: 17px;
    font-weight: 800;
}
.speed-faq-item[open] summary::after { content: "−"; }
.speed-faq-item p {
    margin: 0;
    padding: 0 18px 18px;
    color: var(--speed-muted);
    font-size: 13px;
    line-height: 2;
}

html[dir="rtl"] .speed-content-section,
html[dir="rtl"] .speed-related-section,
html[dir="rtl"] .speed-faq-section { text-align: right; }
html[dir="ltr"] .speed-content-section,
html[dir="ltr"] .speed-related-section,
html[dir="ltr"] .speed-faq-section { text-align: left; }

body.dark.speedtest-page .speed-related-card:hover,
body.speedtest-page.dark .speed-related-card:hover,
body.dark.speedtest-page .speed-use-grid article:hover,
body.speedtest-page.dark .speed-use-grid article:hover { box-shadow: 0 15px 34px rgba(0,0,0,.20); }

@media (max-width: 900px) {
    .speed-related-grid { grid-template-columns: 1fr; }
    .speed-faq-list { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
    .speed-breadcrumb { margin-inline: 3px; }
    .speed-content-section,
    .speed-related-section,
    .speed-faq-section {
        margin-top: 13px;
        padding: 24px 15px;
        border-radius: 24px;
    }
    .speed-content-heading { margin-bottom: 19px; }
    .speed-content-heading h2 { font-size: 23px; }
    .speed-content-heading p { font-size: 13px; line-height: 1.95; }
    .speed-info-grid,
    .speed-use-grid { grid-template-columns: 1fr; gap: 10px; }
    .speed-info-card,
    .speed-use-grid article,
    .speed-related-card { padding: 18px; }
    .speed-checklist-card { padding: 19px 16px; }
    .speed-checklist-card ol { grid-template-columns: 1fr; gap: 10px; }
    .speed-brand-card { grid-template-columns: 1fr; padding: 19px; }
    .speed-brand-card__mark { min-height: 78px; }
    .speed-faq-item summary { font-size: 12.5px; }
}