/* ============================================
   SPEEDTEST v2.0 - Impactusnet Telecom
   Streaming Local + Packet Loss + Precisao
   ============================================ */
.st-page{padding:120px 0 60px;background:var(--gradient-hero);min-height:100vh}
.st-container{max-width:800px;margin:0 auto;padding:0 24px;text-align:center}
.st-topbar{display:flex;justify-content:center;gap:32px;margin-bottom:32px;flex-wrap:wrap}
.st-info{display:flex;flex-direction:column;align-items:center;gap:2px}
.st-label{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);font-weight:600}
.st-value{font-size:14px;font-weight:600;color:var(--text-primary)}
.st-mode-switcher{position:relative;margin-bottom:32px;min-height:520px}
.st-mode-panel{width:100%;transition:opacity .4s ease,transform .4s ease,height .4s ease;overflow:hidden}
.st-mode-panel.st-mode-exit{opacity:0;transform:scale(.95) translateY(-20px);max-height:0;margin:0;pointer-events:none}
.st-mode-panel.st-mode-enter{animation:stModeEnter .4s ease forwards}
@keyframes stModeEnter{from{opacity:0;transform:scale(.95) translateY(20px);max-height:0}to{opacity:1;transform:scale(1) translateY(0);max-height:2000px}}

/* ============ GAUGE ============ */
.st-gauge-section{position:relative;padding:10px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:520px}
.st-gauge-container{position:relative;width:360px;height:360px;margin:0 auto}
.st-gauge-container canvas{width:100%;height:100%}
.st-gauge-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}
.st-gauge-status{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-bottom:4px;transition:color .3s}
.st-gauge-status.preparing{color:var(--text-muted)}
.st-gauge-status.testing{color:var(--secondary)}
.st-gauge-status.downloading{color:var(--secondary)}
.st-gauge-status.uploading{color:var(--accent)}
.st-gauge-status.completed{color:var(--success)}
.st-gauge-status.bad{color:var(--danger)}
.st-gauge-value{font-size:48px;font-weight:700;color:var(--text-primary);line-height:1;font-variant-numeric:tabular-nums}
.st-gauge-unit{font-size:14px;color:var(--text-muted);font-weight:500;margin-top:2px}
.st-go-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:16px 48px;background:var(--gradient-cta);color:#fff;border:none;border-radius:50px;font-size:16px;font-weight:700;letter-spacing:2px;cursor:pointer;transition:var(--transition);margin-top:16px}
.st-go-btn:hover{transform:scale(1.05);box-shadow:0 8px 25px rgba(8,145,178,.3)}
.st-go-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}

/* ============ PROGRESS BAR ============ */
.st-progress{max-width:400px;margin:0 auto 24px}
.st-progress-text{font-size:12px;font-weight:600;color:var(--secondary);display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px;letter-spacing:1px}
.st-progress-dot{width:8px;height:8px;border-radius:50%;background:var(--secondary);animation:stProgPulse 1s ease infinite}
@keyframes stProgPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}
.st-progress-track{height:3px;background:var(--card-border);border-radius:2px;overflow:hidden}
.st-progress-fill{height:100%;background:linear-gradient(90deg,var(--secondary),var(--success));border-radius:2px;transition:width .3s ease;width:0%}

/* ============ NAVEGACAO ============ */
.st-browser-chrome{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius) var(--radius) 0 0;overflow:hidden}
.st-browser-tabs{display:flex;align-items:center;padding:10px 16px;background:#f8fafc;gap:8px;border-bottom:1px solid var(--card-border)}
.st-browser-tab{display:flex;align-items:center;gap:6px;padding:6px 14px;background:var(--card-bg);border:1px solid var(--card-border);border-bottom:none;border-radius:6px 6px 0 0;font-size:12px;font-weight:600;color:var(--text-muted);cursor:default}
.st-browser-tab.active{background:var(--card-bg);color:var(--text-primary)}
.st-browser-tab i{font-size:13px;color:var(--secondary)}
.st-browser-urlbar{display:flex;align-items:center;gap:10px;padding:8px 16px;background:#f1f5f9;margin:0 12px 10px;border-radius:var(--radius-sm);border:1px solid var(--card-border)}
.st-url-lock{color:var(--success);font-size:12px}
.st-url-text{flex:1;text-align:left;font-size:13px;color:var(--text-secondary);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-url-loader{color:var(--secondary);font-size:14px}
.st-browser-content{background:var(--card-bg);display:flex;flex-direction:column;height:520px;overflow:hidden}
.st-browser-preview{position:relative;flex:1;display:flex;align-items:flex-start;justify-content:center;background:#f8fafc;overflow:hidden;min-height:0;max-height:none}
.st-browser-loading{text-align:center;color:var(--text-muted);padding:40px}
.st-browser-loading p{margin-top:12px;font-size:13px}
.st-browser-spinner{width:32px;height:32px;border:3px solid var(--card-border);border-top-color:var(--secondary);border-radius:50%;animation:stSpin .8s linear infinite;margin:0 auto}
@keyframes stSpin{to{transform:rotate(360deg)}}
.st-browser-iframe{width:100%;height:100%;border:none;display:none;background:var(--card-bg);overflow:hidden;pointer-events:none;flex:1}
.st-browser-iframe.loading{opacity:.7}
.st-browser-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;cursor:default}
.st-browser-sitelist{padding:8px 16px 12px;display:flex;flex-direction:column;gap:5px}
.st-browser-site-item{display:flex;align-items:center;gap:8px;padding:6px 10px;background:#f8fafc;border:1px solid var(--card-border);border-radius:6px;font-size:12px;transition:all .3s ease}
.st-browser-site-item.testing{border-color:var(--secondary);background:#ecfeff}
.st-browser-site-item.done{border-color:var(--success);background:#f0fdf4}
.st-browser-site-item.fail{border-color:var(--danger);background:#fef2f2}
.st-browser-site-icon-el{width:18px;text-align:center;font-size:14px}
.st-browser-site-name{min-width:65px;font-weight:600;color:var(--text-primary);font-size:12px}
.st-browser-site-bar{flex:1;height:5px;background:var(--card-border);border-radius:3px;overflow:hidden}
.st-browser-site-fill{height:100%;border-radius:3px;transition:width .5s ease;background:linear-gradient(90deg,var(--danger),var(--warning),var(--success))}
/*.st-browser-status{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:#f8fafc;border:1px solid var(--card-border);border-top:none;border-radius:0 0 var(--radius) var(--radius);font-size:12px;color:var(--text-muted);font-weight:500}*/
/*.st-browser-msg{font-size:12px}*/
/*.st-browser-progress{background:var(--card-border);padding:2px 10px;border-radius:10px;font-size:11px;font-weight:600}*/
.st-nav-status{font-size:12px;color:var(--text-muted);margin-bottom:8px;min-height:18px}

/* ============ STREAMING ============ */
.st-video-container{background:var(--card-bg);border-radius:var(--radius);overflow:hidden;border:1px solid var(--card-border)}
.st-video-wrapper{position:relative;background:#000;width:100%;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}
#st-youtube-player{width:100%;height:100%;position:absolute;top:0;left:0}
#st-youtube-player video{width:100%;height:100%;object-fit:contain}
.st-video-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);transition:opacity .3s ease;z-index:10}
.st-video-overlay.hidden{opacity:0;pointer-events:none}
.st-video-overlay-content{text-align:center;color:#fff}
/*.st-video-overlay-content i{font-size:48px;color:var(--secondary);display:block;margin-bottom:12px;animation:stPulse 1.5s ease infinite}*/
@keyframes stPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.7}}
.st-video-overlay-content span{font-size:14px;font-weight:500}
.st-video-stall-warning{position:absolute;top:16px;left:50%;transform:translateX(-50%);background:rgba(239,68,68,.9);color:#fff;padding:6px 16px;border-radius:20px;font-size:12px;font-weight:600;animation:stShake .5s ease;z-index:20}
@keyframes stShake{0%,100%{transform:translateX(-50%)}25%{transform:translateX(calc(-50% - 5px))}75%{transform:translateX(calc(-50% + 5px))}}
.st-video-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:#f8fafc;padding:10px 16px;border-top:1px solid var(--card-border)}
.st-video-stat{text-align:center}
.st-vstat-label{display:block;font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);font-weight:600;margin-bottom:2px}
.st-vstat-value{font-size:13px;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums}
.st-vstat-value.good{color:var(--success)}
.st-vstat-value.warn{color:var(--warning)}
.st-vstat-value.bad{color:var(--danger)}
.st-vstat-value.info{color:var(--secondary)}
.st-video-progress-bar{height:3px;background:var(--card-border)}
.st-video-progress-fill{height:100%;background:linear-gradient(90deg,var(--secondary),var(--success));transition:width .3s ease;width:0%}

/* ============ RESULTADOS ============ */
.st-results{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px}
.st-result-card{background:#fff;border:1px solid var(--card-border);border-radius:var(--radius);padding:14px 10px;box-shadow:var(--card-shadow);text-align:center}
.st-result-icon{font-size:18px;margin-bottom:4px}
.st-result-icon.download{color:var(--secondary)}
.st-result-icon.upload{color:var(--accent)}
.st-result-icon.ping{color:var(--success)}
.st-result-icon.jitter{color:#8b5cf6}
.st-result-icon.loss{color:var(--warning)}
.st-result-label{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);font-weight:600;margin-bottom:6px}
.st-result-value{font-size:22px;font-weight:700;color:var(--text-primary);line-height:1.1;font-variant-numeric:tabular-nums}
.st-result-unit{font-size:12px;color:var(--text-muted);margin-bottom:8px}
.st-result-bar{height:4px;background:var(--card-border);border-radius:2px;overflow:hidden}
.st-bar-fill{height:100%;background:var(--gradient-cta);border-radius:2px;transition:width .5s ease}
.st-result-quality{font-size:11px;font-weight:600;margin-top:4px}
.st-result-quality.excelente{color:var(--success)}
.st-result-quality.boa{color:var(--secondary)}
.st-result-quality.regular{color:var(--warning)}
.st-result-quality.ruim{color:var(--danger)}
.st-extras{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin-bottom:24px}
.st-extra-item{display:flex;flex-direction:column;align-items:center;gap:2px}
.st-extra-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}
.st-extra-value{font-size:14px;font-weight:600;color:var(--text-primary)}
.st-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.st-actions .st-go-btn{margin-top:0;min-width:200px;text-align:center;text-decoration:none}

@media(max-width:768px){
.st-gauge-container{width:280px;height:280px}
.st-gauge-value{font-size:36px}
.st-topbar{gap:16px}
.st-video-controls{grid-template-columns:repeat(2,1fr);gap:8px}
.st-browser-iframe{width:100%;aspect-ratio:16/9;background:#f8fafc;max-height:100%}
.st-browser-preview{width:100%}
}
@media(max-width:480px){
.st-results{grid-template-columns:repeat(2,1fr)}
.st-gauge-container{width:240px;height:240px}
.st-gauge-value{font-size:28px}
.st-go-btn{padding:14px 32px;font-size:14px}
.st-browser-site-item{flex-wrap:wrap;gap:4px}
.st-browser-iframe{height:100%;max-height:100%}
.st-browser-preview{min-height:160px}
}
.st-result-icon.game{color:#FF6B35}

/* ============ GAME TOOLTIP ============ */
.st-game-card{position:relative;cursor:help}
.st-game-tooltip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:8px;z-index:100;background:#1e293b;border:1px solid #334155;border-radius:8px;padding:10px 14px;min-width:180px;box-shadow:0 8px 25px rgba(0,0,0,.3);white-space:nowrap}
.st-game-tooltip-header{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#94a3b8;font-weight:600;margin-bottom:6px;text-align:center;border-bottom:1px solid #334155;padding-bottom:4px}
.st-game-tooltip-list{display:flex;flex-direction:column;gap:4px}
.st-game-tooltip-item{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:11px;color:#e2e8f0;font-weight:500}
.st-game-tooltip-item .tt-name{color:#94a3b8;font-weight:400}
.st-game-tooltip-item .tt-latency{font-weight:600;font-variant-numeric:tabular-nums}
.st-game-tooltip-item .tt-latency.good{color:#22c55e}
.st-game-tooltip-item .tt-latency.ok{color:#eab308}
.st-game-tooltip-item .tt-latency.bad{color:#ef4444}
/* Arrow */
.st-game-tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:#1e293b}
@media(max-width:480px){.st-game-tooltip{left:auto;right:0;transform:none;min-width:160px}.st-game-tooltip::after{left:auto;right:20px;transform:none}}