* { 
  margin:0; 
  padding:0; 
  box-sizing:border-box; 
  font-family:'Segoe UI', system-ui, sans-serif; 
}

body {
  min-height:100vh;
  background: radial-gradient(ellipse at top, #1a1a3e 0%, #0a0a1f 50%, #000 100%);
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:15px;
  overflow-x:hidden;
}

.container {
  width:100%;
  max-width:900px;
  position:relative;
  z-index:1;
}

/* Header */
header {
  text-align:center;
  margin-bottom:15px;
  padding:10px 0;
  position:relative;
}

header h1 {
  font-size:clamp(1.3rem, 3vw, 1.8rem);
  background:linear-gradient(90deg, #00d9ff, #7b2cff, #ff00e6);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  letter-spacing:2px;
  font-weight:800;
}

header p {
  color:#8b8ba7;
  margin-top:4px;
  font-size:.85rem;
}

/* Botão de Info */
.btn-info {
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  color:#00d9ff;
  width:40px;
  height:40px;
  border-radius:50%;
  cursor:pointer;
  font-size:1.2rem;
  font-weight:700;
  transition:all .3s;
  display:flex;
  align-items:center;
  justify-content:center;
}

.btn-info:hover {
  background:rgba(0,217,255,.2);
  border-color:#00d9ff;
  box-shadow:0 0 20px rgba(0,217,255,.3);
}

/* Modal */
.modal-overlay {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.8);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  visibility:hidden;
  transition:all .3s ease;
}

.modal-overlay.active {
  opacity:1;
  visibility:visible;
}

.modal {
  background:linear-gradient(135deg, #1a1a3e 0%, #0a0a1f 100%);
  border:1px solid rgba(255,255,255,.1);
  border-radius:24px;
  padding:30px;
  max-width:600px;
  width:100%;
  max-height:85vh;
  overflow-y:auto;
  box-shadow:0 30px 80px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.05);
  position:relative;
  transform:translateY(20px);
  transition:transform .3s ease;
}

.modal-overlay.active .modal {
  transform:translateY(0);
}

.modal-close {
  position:absolute;
  top:15px;
  right:15px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  color:#fff;
  width:36px;
  height:36px;
  border-radius:50%;
  cursor:pointer;
  font-size:1.2rem;
  transition:all .3s;
  display:flex;
  align-items:center;
  justify-content:center;
}

.modal-close:hover {
  background:rgba(255,107,107,.3);
  border-color:#ff6b6b;
  color:#ff6b6b;
}

.modal h2 {
  font-size:1.5rem;
  background:linear-gradient(90deg, #00d9ff, #7b2cff);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:20px;
  padding-right:40px;
}

.modal h3 {
  color:#00d9ff;
  margin:20px 0 10px;
  font-size:1.1rem;
  display:flex;
  align-items:center;
  gap:8px;
}

.modal p, .modal li {
  color:#b8b8cc;
  line-height:1.6;
  font-size:.9rem;
  margin-bottom:8px;
}

.modal ul {
  list-style:none;
  padding-left:0;
}

.modal ul li {
  padding:6px 0;
  padding-left:20px;
  position:relative;
}

.modal ul li::before {
  content:'▸';
  position:absolute;
  left:0;
  color:#00d9ff;
}

.modal .highlight-box {
  background:rgba(0,217,255,.08);
  border:1px solid rgba(0,217,255,.2);
  border-radius:12px;
  padding:15px;
  margin:15px 0;
}

.modal .highlight-box p {
  color:#c8d8ff;
  margin:0;
}

.modal .tech-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:10px;
  margin:15px 0;
}

.modal .tech-item {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  padding:12px;
  text-align:center;
  font-size:.8rem;
  color:#8b8ba7;
}

.modal .tech-item strong {
  display:block;
  color:#00d9ff;
  margin-bottom:4px;
}

.modal .seo-tips {
  background:rgba(123,44,255,.08);
  border:1px solid rgba(123,44,255,.2);
  border-radius:12px;
  padding:15px;
  margin:15px 0;
}

.modal .seo-tips h4 {
  color:#7b2cff;
  margin-bottom:8px;
}

.modal .faq-item {
  margin-bottom:12px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.modal .faq-item:last-child {
  border-bottom:none;
}

.modal .faq-q {
  color:#fff;
  font-weight:600;
  margin-bottom:5px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
}

.modal .faq-q::before {
  content:'❓';
  font-size:.8rem;
}

.modal .faq-a {
  color:#8b8ba7;
  font-size:.85rem;
  padding-left:24px;
}

/* Cartão principal */
.card {
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:24px;
  padding:25px 25px;
  box-shadow:0 20px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
  margin-bottom:20px;
}

/* Gauge SVG */
.gauge-wrap {
  display:flex;
  justify-content:center;
  margin:10px 0 20px;
  position:relative;
}

.gauge {
  width:min(260px, 70vw);
  height:min(260px, 70vw);
  position:relative;
  filter: drop-shadow(0 0 12px rgba(0, 217, 255, 0.4));
}

.gauge svg { 
  transform:rotate(-135deg); 
  width:100%; 
  height:100%; 
}

.gauge-bg {
  fill:none;
  stroke:rgba(255,255,255,.06);
  stroke-width:14;
}

.gauge-progress {
  fill:none;
  stroke:url(#grad);
  stroke-width:14;
  stroke-linecap:round;
  stroke-dasharray:565;
  stroke-dashoffset:565;
  transition:stroke-dashoffset .3s ease;
}

.gauge-center {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.speed-value {
  font-size:clamp(2.2rem, 7vw, 3.5rem);
  font-weight:800;
  background:linear-gradient(180deg, #fff, #7fdfff);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  line-height:1;
}

.speed-unit {
  font-size:.9rem;
  color:#8b8ba7;
  margin-top:4px;
  letter-spacing:2px;
}

.speed-label {
  margin-top:8px;
  color:#00d9ff;
  font-size:.85rem;
  letter-spacing:1px;
  min-height:18px;
}

/* Botão */
.btn-wrap { 
  text-align:center; 
  margin:15px 0; 
}

.btn-start {
  background:linear-gradient(135deg, #00d9ff 0%, #7b2cff 100%);
  color:#fff;
  border:none;
  padding:16px 50px;
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:2px;
  border-radius:50px;
  cursor:pointer;
  text-transform:uppercase;
  box-shadow:0 10px 40px rgba(0,217,255,.4), 0 0 0 1px rgba(255,255,255,.1);
  transition:all .3s ease;
  position:relative;
  overflow:hidden;
}

.btn-start::before {
  content:'';
  position:absolute;
  inset:-2px;
  background:linear-gradient(135deg, #00d9ff, #7b2cff, #ff00e6, #00d9ff);
  background-size:300% 300%;
  border-radius:50px;
  z-index:-1;
  animation:glow 3s linear infinite;
  opacity:.6;
  filter:blur(8px);
}

@keyframes glow {
  0% { background-position:0% 50%; }
  50% { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}

.btn-start:hover:not(:disabled) {
  transform:translateY(-2px);
  box-shadow:0 15px 50px rgba(0,217,255,.6);
}

.btn-start:active:not(:disabled) { 
  transform:translateY(0); 
}

.btn-start:disabled { 
  opacity:.6; 
  cursor:not-allowed; 
}

.btn-start .spinner {
  display:inline-block;
  width:16px;
  height:16px;
  border:3px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin 1s linear infinite;
  vertical-align:middle;
  margin-right:10px;
}

@keyframes spin { 
  to { transform:rotate(360deg); } 
}

/* Resultados */
.results {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
  margin-top:20px;
  opacity:0;
  transform:translateY(20px);
  transition:all .6s ease;
}

.results.visible {
  opacity:1;
  transform:translateY(0);
}

.result-item {
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:14px 8px;
  text-align:center;
  transition:all .3s ease;
  position:relative;
  overflow:hidden;
}

.result-item::before {
  content:'';
  position:absolute;
  top:0; 
  left:0; 
  right:0;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--c, #00d9ff), transparent);
  opacity:.6;
}

.result-item:hover {
  transform:translateY(-2px);
  border-color:rgba(0,217,255,.3);
  box-shadow:0 8px 25px rgba(0,217,255,.15);
}

.result-icon {
  font-size:1.3rem;
  margin-bottom:5px;
}

.result-label {
  color:#8b8ba7;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:4px;
}

.result-value {
  font-size:1.1rem;
  font-weight:700;
  color:#fff;
  word-break:break-word;
}

.result-unit {
  font-size:.75rem;
  color:#8b8ba7;
  font-weight:400;
}

/* Info da conexão */
.info-bar {
  margin-top:15px;
  padding:15px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:10px;
  font-size:.85rem;
}

.info-item { 
  display:flex; 
  align-items:center; 
  gap:8px; 
}

.info-item strong { 
  color:#00d9ff; 
  font-weight:600; 
  min-width:70px; 
}

.info-item span { 
  color:#c8c8d8; 
  word-break:break-word; 
}

/* Progresso etapas */
.stages {
  display:flex;
  justify-content:center;
  gap:20px;
  margin-bottom:12px;
  flex-wrap:wrap;
}

.stage {
  color:#555;
  font-size:.8rem;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:20px;
  transition:all .3s;
}

.stage.active {
  color:#00d9ff;
  background:rgba(0,217,255,.1);
  box-shadow:0 0 15px rgba(0,217,255,.2);
}

.stage.done {
  color:#00ff88;
}

/* Histórico */
.history-card {
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:24px;
  padding:25px;
  box-shadow:0 20px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
}

.history-title {
  font-size:1.1rem;
  font-weight:700;
  color:#fff;
  margin-bottom:15px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.history-title span {
  background:linear-gradient(90deg, #00d9ff, #7b2cff);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.btn-clear {
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  color:#ff6b6b;
  padding:6px 16px;
  border-radius:20px;
  cursor:pointer;
  font-size:.75rem;
  transition:all .3s;
}

.btn-clear:hover {
  background:rgba(255,107,107,.2);
  border-color:#ff6b6b;
}

.history-table {
  width:100%;
  border-collapse:collapse;
  font-size:.85rem;
}

.history-table th {
  text-align:left;
  color:#8b8ba7;
  font-weight:600;
  padding:10px 8px;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:1px;
}

.history-table td {
  padding:10px 8px;
  border-bottom:1px solid rgba(255,255,255,.04);
  color:#c8c8d8;
}

.history-table tr:hover td {
  background:rgba(255,255,255,.02);
}

.history-table .speed-down { 
  color:#00d9ff; 
  font-weight:600; 
}

.history-table .speed-up { 
  color:#7b2cff; 
  font-weight:600; 
}

.history-table .speed-ping { 
  color:#00ff88; 
  font-weight:600; 
}

.no-history {
  text-align:center;
  color:#555;
  padding:20px;
  font-size:.85rem;
}

/* Footer */
footer {
  margin-top:15px;
  text-align:center;
  color:#555;
  font-size:.75rem;
}

.footer-card {
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);
  border-radius:10px;
  padding:10px;
}

.footer-card a {
  color:#00d9ff;
  text-decoration:none;
  transition:color .3s;
}

.footer-card a:hover {
  color:#7b2cff;
}

/* Modo PWA */
body.pwa-mode {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* Indicador offline */
body.offline::before {
  content: '⚠️ Modo Offline - Alguns recursos podem não funcionar';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #ff6b6b;
  color: white;
  text-align: center;
  padding: 8px;
  font-size: 0.85rem;
  z-index: 9999;
}

/* Toast notification */
.toast-notification {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 12px 24px;
  border-radius: 25px;
  font-size: 0.9rem;
  z-index: 10000;
  transition: transform 0.3s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.toast-notification.show {
  transform: translateX(-50%) translateY(0);
}

/* Responsivo */
@media (max-width: 480px) {
  .card { 
    padding:20px 15px; 
  }
  
  .btn-start { 
    padding:14px 35px; 
    font-size:.9rem; 
  }
  
  .stages { 
    gap:8px; 
  }
  
  .stage { 
    font-size:.7rem; 
    padding:3px 8px; 
  }
  
  .results { 
    grid-template-columns:repeat(2, 1fr); 
  }
  
  .history-table { 
    font-size:.75rem; 
  }
  
  .history-table th, 
  .history-table td { 
    padding:8px 5px; 
  }
  
  .modal { 
    padding:20px; 
  }
  
  .btn-info { 
    width:36px; 
    height:36px; 
    font-size:1rem; 
  }
}

/* Ajuste para iOS */
@supports (-webkit-touch-callout: none) {
  body {
    padding-bottom: 60px;
  }
}

/* ===== BOTÃO DE INSTALAÇÃO DO PWA ===== */
.install-app-btn.floating {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: linear-gradient(135deg, #00d9ff 0%, #7b2cff 100%);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 50px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 1px;
  box-shadow: 0 10px 30px rgba(0,217,255,.4);
  z-index: 999;
  transition: all .3s ease;
  animation: pulse 2s infinite;
}

.install-app-btn.floating:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(0,217,255,.6);
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 10px 30px rgba(0,217,255,.4);
  }
  50% {
    box-shadow: 0 10px 50px rgba(0,217,255,.8);
  }
}

@media (max-width: 480px) {
  .install-app-btn.floating {
    bottom: 15px;
    right: 15px;
    padding: 10px 20px;
    font-size: 0.8rem;
  }
}