@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Roboto+Mono:wght@400;500;700&display=swap');

:root {
    --fst-bg: #f0f2f5;
    --fst-card-bg: #ffffff;
    --fst-text-primary: #1a1d29;
    --fst-text-secondary: #5a5e6e;
    --fst-text-muted: #8e92a4;
    --fst-accent: #00babc;
    --fst-accent-dark: #009a9c;
    --fst-accent-glow: rgba(0,186,188,0.25);
    --fst-border: #e4e7ed;
    --fst-shadow-lg: 0 10px 40px rgba(0,0,0,0.08);
    --fst-radius-sm: 10px;
    --fst-download-color: #00babc;
    --fst-upload-color: #8b5cf6;
}

#fst-app *, #fst-app *::before, #fst-app *::after { margin:0; padding:0; box-sizing:border-box; }

.fst-container {
    font-family: 'Inter', sans-serif;
    background: var(--fst-bg);
    color: var(--fst-text-primary);
    max-width: 720px;
    margin: 40px auto;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--fst-shadow-lg);
}

.fst-top-bar {
    display: flex; align-items: center; justify-content: center;
    gap: 16px; padding: 24px 28px 20px;
    background: var(--fst-card-bg);
    border-bottom: 1px solid var(--fst-border);
    flex-wrap: wrap;
}

.fst-result-box {
    display: flex; flex-direction: column; align-items: center;
    padding: 10px 18px; border-radius: var(--fst-radius-sm);
    background: #f7f8fa; border: 1px solid var(--fst-border);
    min-width: 80px; transition: all 0.3s ease;
}
.fst-result-box:hover { border-color: var(--fst-accent); box-shadow: 0 0 0 3px var(--fst-accent-glow); }

.fst-result-label {
    font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--fst-text-muted); margin-bottom: 4px;
}
.fst-result-value {
    font-family: 'Roboto Mono', monospace; font-size: 22px;
    font-weight: 700; color: var(--fst-text-primary); line-height: 1;
}
.fst-result-unit {
    font-size: 10px; font-weight: 600; color: var(--fst-text-muted);
    margin-top: 2px; text-transform: uppercase;
}

.fst-top-speeds { display: flex; gap: 16px; margin-left: auto; }

.fst-speed-result {
    display: flex; flex-direction: column; align-items: center;
    padding: 10px 20px; border-radius: var(--fst-radius-sm);
    background: #f7f8fa; border: 1px solid var(--fst-border);
    min-width: 110px; transition: all 0.3s ease;
}
.fst-speed-result:hover { border-color: var(--fst-accent); box-shadow: 0 0 0 3px var(--fst-accent-glow); }

.fst-speed-direction {
    display: flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--fst-text-muted); margin-bottom: 4px;
}
.fst-download-result .fst-speed-direction { color: var(--fst-download-color); }
.fst-upload-result .fst-speed-direction { color: var(--fst-upload-color); }

.fst-speed-number {
    font-family: 'Roboto Mono', monospace; font-size: 24px;
    font-weight: 700; color: var(--fst-text-primary); line-height: 1;
}
.fst-speed-unit-small {
    font-size: 10px; font-weight: 600; color: var(--fst-text-muted); margin-top: 2px; text-transform: uppercase;
}

.fst-gauge-section {
    display: flex; flex-direction: column; align-items: center;
    padding: 36px 20px 28px; background: var(--fst-card-bg);
}

.fst-gauge-wrapper {
    position: relative; width: 340px; height: 340px;
    display: flex; align-items: center; justify-content: center;
}
#fst-gauge-canvas { width: 340px; height: 340px; display: block; }

.fst-gauge-center {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); text-align: center; pointer-events: none; z-index: 2;
}
.fst-live-speed {
    font-family: 'Roboto Mono', monospace; font-size: 64px;
    font-weight: 700; color: var(--fst-text-primary); line-height: 1;
    letter-spacing: -2px; transition: color 0.3s ease;
}
.fst-live-unit {
    font-size: 16px; font-weight: 600; color: var(--fst-text-muted);
    text-transform: uppercase; letter-spacing: 3px; margin-top: 4px;
}
.fst-test-phase {
    font-size: 12px; font-weight: 600; color: var(--fst-accent);
    text-transform: uppercase; letter-spacing: 2px; margin-top: 8px; min-height: 18px;
}

.fst-go-button {
    position: relative; width: 110px; height: 110px; border-radius: 50%; border: none;
    background: linear-gradient(145deg, #ffffff, #eef0f4);
    color: var(--fst-accent); font-family: 'Inter', sans-serif;
    font-size: 28px; font-weight: 800; cursor: pointer; margin-top: 24px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 6px 6px 16px rgba(0,0,0,0.08), -6px -6px 16px rgba(255,255,255,0.9), inset 0 0 0 3px rgba(0,186,188,0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2; overflow: visible;
}
.fst-go-button:hover {
    transform: scale(1.06);
    box-shadow: 6px 6px 20px rgba(0,0,0,0.1), -6px -6px 20px rgba(255,255,255,0.95), inset 0 0 0 3px rgba(0,186,188,0.3), 0 0 30px var(--fst-accent-glow);
}
.fst-go-button:active { transform: scale(0.97); }
.fst-go-button.fst-running {
    pointer-events: none;
    background: linear-gradient(145deg, var(--fst-accent), var(--fst-accent-dark));
    color: #fff;
    animation: fst-glow-ring 1.5s ease-in-out infinite;
}
.fst-go-text { z-index: 2; position: relative; }
.fst-go-ring {
    position: absolute; top: -8px; left: -8px;
    width: calc(100% + 16px); height: calc(100% + 16px);
    transform: rotate(-90deg); z-index: 1;
}
.fst-go-progress { transition: stroke-dashoffset 0.1s linear; stroke-linecap: round; }

.fst-info-bar {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1px; background: var(--fst-border); border-top: 1px solid var(--fst-border);
}
.fst-info-item {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 14px; background: var(--fst-card-bg); transition: background 0.2s ease;
}
.fst-info-item:hover { background: #f7f8fa; }
.fst-info-item svg { color: var(--fst-accent); flex-shrink: 0; }
.fst-info-text { display: flex; flex-direction: column; min-width: 0; }
.fst-info-label {
    font-size: 9px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: var(--fst-text-muted); margin-bottom: 2px;
}
.fst-info-value {
    font-size: 12px; font-weight: 600; color: var(--fst-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.fst-footer-brand {
    text-align: center; padding: 14px 20px; font-size: 11px;
    font-weight: 500; color: var(--fst-text-muted);
    background: var(--fst-card-bg); border-top: 1px solid var(--fst-border);
}

@keyframes fst-pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
.fst-testing .fst-test-phase { animation: fst-pulse 1.2s ease-in-out infinite; }
@keyframes fst-glow-ring {
    0%,100% { box-shadow: 0 0 20px var(--fst-accent-glow), inset 0 0 0 3px rgba(0,186,188,0.2); }
    50% { box-shadow: 0 0 40px rgba(0,186,188,0.5), inset 0 0 0 3px rgba(0,186,188,0.4); }
}
@keyframes fst-result-pop { 0%{transform:scale(1)} 50%{transform:scale(1.08)} 100%{transform:scale(1)} }
.fst-result-done { animation: fst-result-pop 0.4s ease; }
.fst-live-speed.fst-speed-downloading { color: var(--fst-download-color); }
.fst-live-speed.fst-speed-uploading { color: var(--fst-upload-color); }

@media (max-width: 700px) {
    .fst-container { margin: 16px; border-radius: 20px; }
    .fst-top-bar { flex-direction: column; gap: 12px; padding: 20px 16px 16px; }
    .fst-top-speeds { margin-left: 0; width: 100%; justify-content: center; }
    .fst-info-bar { grid-template-columns: repeat(2, 1fr); }
    .fst-gauge-wrapper, #fst-gauge-canvas { width: 290px; height: 290px; }
    .fst-live-speed { font-size: 52px; }
}
@media (max-width: 480px) {
    .fst-container { margin: 8px; border-radius: 16px; }
    .fst-top-speeds { flex-direction: column; gap: 8px; }
    .fst-speed-result { flex-direction: row; justify-content: center; gap: 12px; min-width: 100%; }
    .fst-gauge-wrapper, #fst-gauge-canvas { width: 250px; height: 250px; }
    .fst-live-speed { font-size: 44px; }
    .fst-info-bar { grid-template-columns: 1fr; }
    .fst-go-button { width: 90px; height: 90px; font-size: 24px; }
}