:root[data-theme="dark"]{
  --bg-color:#0a0e1a;
  --bg-secondary:#111827;
  --text-color:#f0f4f8;
  --text-color-light:#94a3b8;
  --ping-color:#a78bfa;
  --download-color:#3b82f6;
  --upload-color:#ec4899;
  --gauge-active-color:#10b981;
  --gauge-inactive-color:#1e293b;
  --gauge-tick-active-start:#00e5ff;
  --gauge-tick-active-end:#7b2fff;
  --gauge-tick-glow-1:rgba(0, 229, 255, 0.75);
  --gauge-tick-glow-2:rgba(123, 47, 255, 0.55);
  --card-bg:rgba(30, 41, 59, 0.4);
  --glass-bg:rgba(15, 23, 42, 0.6);
  --accent-glow:#3b82f6;
  --rpx:250px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{
  height:100%;
  background:var(--bg-color);
  color:var(--text-color);
  font-family:'Manrope',sans-serif;
  overflow-x:hidden;
  position:relative;
  user-select:none;
  -webkit-user-select:none;
  -ms-user-select:none;
  caret-color:transparent;
}

input,textarea,[contenteditable="true"]{
  user-select:text;
  -webkit-user-select:text;
  -ms-user-select:text;
  caret-color:auto;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 20% 30%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
              radial-gradient(ellipse at 80% 70%, rgba(236, 72, 153, 0.15) 0%, transparent 50%),
              radial-gradient(ellipse at 50% 50%, rgba(16, 185, 129, 0.1) 0%, transparent 50%);
  animation: gradientShift 15s ease infinite;
  z-index: 0;
  pointer-events: none;
}

.maintenance-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:40;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
}

.maintenance-overlay.active{
  display:flex;
}

.maintenance-card{
  width:min(100%, 900px);
  text-align:center;
  padding:2rem 1.5rem;
  border-radius:24px;
  background:rgba(15, 23, 42, 0.72);
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 20px 60px rgba(0,0,0,0.32);
  backdrop-filter:blur(16px);
}

.maintenance-title{
  margin:0;
  font-size:clamp(1.3rem, 4vw, 1.9rem);
  font-weight:900;
}

.maintenance-desc{
  margin:0.85rem 0 0;
  color:var(--text-color-light);
  font-size:0.98rem;
  white-space:pre-line;
}

body.pending-maintenance-check .speedtest-layout,
body.pending-maintenance-check .info-fab,
body.pending-maintenance-check .info-fab-label,
body.pending-maintenance-check .info-modal{
  display:none !important;
}

@keyframes gradientShift {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
  50% { opacity: 0.8; transform: scale(1.1) rotate(5deg); }
}

.particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--accent-glow);
  border-radius: 50%;
  opacity: 0.3;
  animation: float 20s infinite ease-in-out;
}

@keyframes float {
  0%, 100% { transform: translateY(0) translateX(0); }
  25% { transform: translateY(-100px) translateX(50px); }
  50% { transform: translateY(-200px) translateX(-50px); }
  75% { transform: translateY(-100px) translateX(100px); }
}

.speedtest-layout{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:row;
  position: relative;
  z-index: 2;
}

.speedtest-layout.sidebar-hidden .sidebar{
  display:none;
}

.main-area{
  flex:1;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: 2rem;
  gap: 1.5rem;
}

.top-controls{
  position:absolute;
  top:2rem;
  right:2rem;
  z-index:12;
  display:flex;
  align-items:center;
  gap:0.75rem;
}

.lang-switch{
  display:flex;
  align-items:center;
  gap:0.35rem;
  padding:0.35rem;
  border-radius:999px;
  background:var(--glass-bg);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 8px 32px rgba(0, 0, 0, 0.12);
}

.lang-btn{
  border:none;
  min-width:52px;
  height:36px;
  padding:0 0.9rem;
  border-radius:999px;
  background:transparent;
  color:var(--text-color-light);
  font-size:0.84rem;
  font-weight:800;
  letter-spacing:0.06em;
  cursor:pointer;
  transition:all 0.25s ease;
}

.lang-btn.active{
  background:linear-gradient(135deg, var(--gauge-active-color), var(--accent-glow));
  color:#fff;
  box-shadow:0 8px 24px rgba(16, 185, 129, 0.28);
}

#infoTopBtn{
  display:none;
  align-items:center;
  justify-content:center;
  line-height:1;
}

.speedtest-header{
  position:absolute;
  top:2rem;
  left:50%;
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  width:min(100%, 720px);
  gap: 1rem;
  z-index: 10;
}

.stat-item{
  flex:1;
  text-align:center;
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 1.5rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stat-item-icon{
  width:28px;
  height:28px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 6px 18px rgba(2, 6, 23, 0.16);
}

.stat-item-icon svg{
  width:15px;
  height:15px;
}

.stat-item-icon.download{
  color:var(--download-color);
}

.stat-item-icon.upload{
  color:var(--upload-color);
}

.stat-item-icon.ping{
  color:var(--ping-color);
}

.stat-item-heading{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.45rem;
  margin-bottom:0.5rem;
}

.stat-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s ease;
}

.stat-item:hover::before {
  left: 100%;
}

.stat-item:hover{
  transform: translateY(-5px);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.2);
}

.stat-item .label{
  font-size:0.85rem;
  color:var(--text-color-light);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
}

.stat-item .value{
  font-size:2.8rem;
  font-weight:900;
  line-height: 1;
  background: linear-gradient(135deg, currentColor, currentColor);
  -webkit-background-clip: text;
  display: inline-block;
  filter: drop-shadow(0 0 20px currentColor);
}

.stat-item .unit {
  font-size: 1rem;
  color: var(--text-color-light);
  font-weight: 600;
  margin-left: 0.3rem;
}

#ping-value{color:var(--ping-color)}
#ping-value.ping-blinking{
  animation: metricValueBlink 0.9s ease-in-out infinite;
}
#download-value.download-blinking{
  animation: metricValueBlink 0.9s ease-in-out infinite;
}
#upload-value.upload-blinking{
  animation: metricValueBlink 0.9s ease-in-out infinite;
}
@keyframes metricValueBlink{
  0%,100%{opacity:1}
  50%{opacity:0.28}
}
#download-value{color:var(--download-color)}
#upload-value{color:var(--upload-color)}

.gauge-container{
  width:min(80vw,550px);
  height:min(80vw,550px);
  max-width:550px;
  max-height:550px;
  position:relative;
  cursor:pointer;
  margin-top:3rem;
  filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.3));
  transition: transform 0.3s ease;
}

.gauge-container:hover {
  transform: scale(1.02);
}

.gauge-container::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 90%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  animation: pulseGlow 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.05); }
}

.tick{
  position:absolute;
  top:0;
  left:50%;
  width:0.35rem;
  height:1.6rem;
  transform-origin:50% var(--rpx);
  background:var(--gauge-inactive-color);
  border-radius:0.3rem;
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tick.active{
  background:linear-gradient(180deg, var(--gauge-tick-active-start), var(--gauge-tick-active-end));
  box-shadow: 0 0 16px var(--gauge-tick-glow-1),
              0 0 34px var(--gauge-tick-glow-2);
  transform: scale(1.1);
}

.gauge-label{
  position:absolute;
  font-size:0.9rem;
  font-weight: 700;
  color:var(--text-color);
  transform:translate(-50%,-50%);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  padding: 0.3rem 0.5rem;
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.gauge-center-content{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  z-index: 10;
  width:min(100%, 280px);
}

.gauge-speed{
  font-size:clamp(3.5rem,12vw,6rem);
  font-weight:900;
  line-height: 1;
  background: linear-gradient(180deg, #00e5ff, #7b2fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 16px rgba(0, 229, 255, 0.6));
  animation: numberPulse 2s ease-in-out infinite;
}

@keyframes numberPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.gauge-unit{
  display:none;
  font-size:1.4rem;
  color:var(--text-color-light);
  font-weight: 600;
  margin-top: 0.5rem;
  letter-spacing: 2px;
}

.gauge-phase{
  margin-top:0.9rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:170px;
  padding:0.55rem 0.85rem;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  color:var(--text-color-light);
  font-size:0.82rem;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.phase-inline{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
}

.phase-progress{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.35rem;
}

.phase-progress-label{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  line-height:1;
}

.phase-progress-label .phase-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:15px;
  height:15px;
}

.phase-progress-label .phase-icon svg{
  width:15px;
  height:15px;
}

.phase-progress.download .phase-icon{
  color:var(--download-color);
}

.phase-progress.upload .phase-icon{
  color:var(--upload-color);
}

.phase-progress-bar{
  position:relative;
  width:128px;
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,0.18);
  overflow:hidden;
}

.phase-progress-fill{
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:0%;
  border-radius:inherit;
  background:linear-gradient(90deg, #00e5ff, #7b2fff);
  transition:width 0.25s ease;
}

.phase-progress.download .phase-progress-fill{
  background:linear-gradient(90deg, #4bd39a, #2b87ff);
}

.phase-progress.upload .phase-progress-fill{
  background:linear-gradient(90deg, #ec4899, #ff7aa2);
}

.phase-inline .phase-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
}

.phase-inline .phase-icon svg{
  width:14px;
  height:14px;
}

.phase-inline.download .phase-icon{
  color:var(--download-color);
}

.phase-inline.upload .phase-icon{
  color:var(--upload-color);
}

.phase-ping{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.35rem;
}

.phase-ping-label{
  line-height:1;
  animation:phasePingBlink 0.9s ease-in-out infinite;
}

.phase-ping-bar{
  position:relative;
  width:128px;
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,0.18);
  overflow:hidden;
}

.phase-ping-bar::after{
  content:'';
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:0%;
  border-radius:inherit;
  background:linear-gradient(90deg, #00e5ff, #7b2fff);
  animation:phasePingFill 1.8s linear forwards;
}

@keyframes phasePingFill{
  from{width:0%;}
  to{width:100%;}
}

@keyframes phasePingBlink{
  0%,100%{opacity:1;}
  50%{opacity:0.35;}
}

.result-screen{
  display:none;
  position:absolute;
  inset:0;
  z-index:16;
  align-items:center;
  justify-content:center;
  padding:1rem;
}

.result-card{
  width:min(100%, 560px);
  padding:2rem 1.6rem 1.4rem;
  border-radius:30px;
  background:linear-gradient(180deg, rgba(15,23,42,0.94), rgba(30,41,59,0.84));
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter:blur(24px);
  box-shadow:0 30px 80px rgba(2, 6, 23, 0.45);
  text-align:center;
  position:relative;
}

.result-close{
  position:absolute;
  top:0.9rem;
  right:0.9rem;
  width:42px;
  height:42px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  color:var(--text-color);
  font-size:1.2rem;
  cursor:pointer;
  transition:all 0.25s ease;
}

.result-close:hover{
  background:rgba(255,255,255,0.16);
  transform:scale(1.06);
}

.result-kicker{
  font-size:0.82rem;
  font-weight:800;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--text-color-light);
}

.result-title{
  margin-top:0.75rem;
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(1.8rem, 4vw, 2.5rem);
  font-weight:700;
  line-height:1.05;
}

.result-summary{
  margin-top:1.25rem;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0.9rem;
}

.result-stat{
  padding:1rem 0.75rem;
  border-radius:20px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
}

.result-stat-label{
  font-size:0.76rem;
  font-weight:800;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text-color-light);
}

.result-stat-value{
  margin-top:0.45rem;
  font-size:2.4rem;
  font-weight:900;
  line-height:1;
}

.result-stat-unit{
  margin-top:0.35rem;
  font-size:0.8rem;
  color:var(--text-color-light);
  letter-spacing:0.08em;
}

.rating-box{
  margin-top:1rem;
  padding:0.85rem 0.9rem;
  border-radius:16px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
}

.rating-title{
  font-size:0.78rem;
  color:var(--text-color-light);
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.rating-isp{
  margin-top:0.3rem;
  font-size:0.86rem;
  color:var(--text-color);
  font-weight:700;
}

.rating-stars{
  margin-top:0.5rem;
  display:flex;
  justify-content:center;
  gap:0.35rem;
}

.rating-star{
  border:none;
  background:transparent;
  color:rgba(255,255,255,0.28);
  font-size:1.5rem;
  line-height:1;
  cursor:pointer;
  padding:0;
  transition:transform 0.2s ease,color 0.2s ease;
}

.rating-star:hover{
  transform:scale(1.08);
}

.rating-star.active{
  color:#f7c94c;
}

.rating-star:disabled{
  cursor:default;
}

.rating-note{
  min-height:1.2em;
  margin-top:0.45rem;
  font-size:0.76rem;
  color:var(--text-color-light);
}

.start-text{
  font-size:2.5rem;
  font-weight:800;
  font-family:'Space Grotesk',sans-serif;
  background: linear-gradient(135deg, var(--gauge-active-color), var(--accent-glow));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-transform: uppercase;
  letter-spacing: 3px;
  animation: breathe 2s ease-in-out infinite;
  position: relative;
}

.start-text::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gauge-active-color), transparent);
  border-radius: 10px;
  animation: lineGrow 2s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

@keyframes lineGrow {
  0%, 100% { width: 40%; opacity: 0.5; }
  50% { width: 70%; opacity: 1; }
}

#testAgainBtn,
#testAgainBtnResult{
  display:none;
  background: linear-gradient(135deg, var(--gauge-active-color), var(--accent-glow));
  color:#fff;
  font-size:1.2rem;
  font-weight:800;
  border:none;
  border-radius:50px;
  padding:1rem 2.5rem;
  cursor:pointer;
  transition:all 0.3s ease;
  box-shadow: 0 10px 40px rgba(16, 185, 129, 0.3);
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
}

#testAgainBtnResult{
  margin-top:1.4rem;
}

#testAgainBtn::before,
#testAgainBtnResult::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

#testAgainBtn:hover::before,
#testAgainBtnResult:hover::before {
  width: 300px;
  height: 300px;
}

#testAgainBtn:hover,
#testAgainBtnResult:hover{
  transform: translateY(-3px);
  box-shadow: 0 15px 50px rgba(16, 185, 129, 0.5);
}

#testAgainBtn:active,
#testAgainBtnResult:active {
  transform: translateY(-1px);
}

.isp-info-container{
  margin-top:2rem;
  width:90%;
  max-width:600px;
  display:flex;
  gap:1.5rem;
  justify-content:space-between;
  z-index:10;
}

.info-box{
  flex:1;
  display:flex;
  align-items:center;
  gap:1rem;
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  border-radius:16px;
  padding:1.2rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.info-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.6s ease;
}

.info-box:hover::before {
  left: 100%;
}

.info-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.2);
}
.brand-logo-box{
  width:100%;
  min-height:2.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
}
.brand-logo-box img{
  display:block;
  max-width:100%;
  max-height:42px;
  width:auto;
  object-fit:contain;
}
.brand-logo-box a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.info-box span {
  font-size: 2rem;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
}

.info-box div {
  font-size: 0.9rem;
  line-height: 1.4;
  font-weight: 500;
}

.sidebar{
  width:320px;
  padding:2rem 1.5rem;
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1);
}

.sidebar-card{
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  border-radius:20px;
  padding:1.8rem 1.5rem;
  text-align:center;
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.sidebar-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  transform: scale(0);
  transition: transform 0.6s ease;
}

.sidebar-card:hover::before {
  transform: scale(1);
}

.sidebar-card:hover{
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.2);
}

.sidebar-card .icon{
  margin-bottom:1rem;
  transition: transform 0.4s ease;
}

.sidebar-card:hover .icon {
  transform: scale(1.1);
}

.sidebar-card .title{
  font-weight:800;
  margin-bottom:0.7rem;
  font-size: 1.05rem;
  line-height: 1.3;
}

.sidebar-card .desc{
  font-size:0.9rem;
  color:var(--text-color-light);
  line-height: 1.5;
}

.sidebar-card svg{
  animation: iconFloat 4s ease-in-out infinite;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

@keyframes iconFloat{
  0%, 100%{transform:translateY(0) rotate(0deg)}
  25%{transform:translateY(-5px) rotate(2deg)}
  75%{transform:translateY(5px) rotate(-2deg)}
}

.speedtest-footer{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  height:35vh;
  z-index:0;
  pointer-events:none;
  opacity: 0.6;
}

.speedtest-footer svg{
  width:100%;
  height:100%;
  display:block;
}

.info-fab{
  display:none;
  position:fixed;
  right:1.5rem;
  bottom:1.5rem;
  width:65px;
  height:65px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--gauge-active-color), var(--accent-glow));
  color:#fff;
  font-weight:800;
  font-size:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 40px rgba(16, 185, 129, 0.4);
  z-index:25;
  cursor:pointer;
  transition: all 0.3s ease;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.info-fab:hover {
  transform: scale(1.1) rotate(90deg);
  box-shadow: 0 15px 50px rgba(16, 185, 129, 0.6);
}

.info-fab-label{
  display:none;
  position:fixed;
  right:1.5rem;
  bottom:5.5rem;
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  color: var(--text-color);
  padding:0.5rem 1rem;
  border-radius:12px;
  font-size:0.85rem;
  font-weight: 600;
  z-index:25;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  animation: fadeInUp 0.3s ease;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.info-modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  z-index:30;
  justify-content:center;
  align-items:flex-end;
  padding:1rem;
}

.info-modal-content{
  background: var(--bg-secondary);
  width:100%;
  max-width:600px;
  border-radius:24px 24px 0 0;
  padding:1.5rem;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.4);
  animation:slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

@keyframes slideUp{
  from{transform:translateY(100%);opacity:0}
  to{transform:translateY(0);opacity:1}
}

.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-title{
  font-weight:900;
  font-size: 1.5rem;
  background: linear-gradient(135deg, var(--gauge-active-color), var(--accent-glow));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.modal-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.2rem;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.modal-grid::-webkit-scrollbar {
  width: 6px;
}

.modal-grid::-webkit-scrollbar-track {
  background: var(--gauge-inactive-color);
  border-radius: 10px;
}

.modal-grid::-webkit-scrollbar-thumb {
  background: var(--gauge-active-color);
  border-radius: 10px;
}

@media (max-width:900px){
  .speedtest-layout{flex-direction:column}
  .sidebar{display:none}
  .top-controls{display:none}
  .speedtest-header {
    position:relative;
    top:auto;
    left:auto;
    transform:none;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0;
    width:100%;
    max-width:100%;
  }

  .top-controls{
    position:relative;
    top:auto;
    right:auto;
    align-self:flex-end;
  }

  .stat-item {
    padding: 1rem 0.5rem;
  }
  
  .stat-item .value {
    font-size: 2rem;
  }
  
  .stat-item .label {
    font-size: 0.75rem;
  }
  
  .gauge-container{
    width:min(75vw,340px);
    height:min(75vw,340px);
    margin-top:0;
  }
  
  .isp-info-container{
    flex-direction:column;
    gap:0.8rem;
    margin-top:1.5rem;
  }
  
  .gauge-speed{
    font-size:clamp(2.8rem,10vw,4.5rem);
  }

  .gauge-label{
    font-size:0.78rem;
    padding:0.2rem 0.38rem;
  }

  .result-card{
    width:min(100%, 520px);
    padding:1.25rem 1rem 1rem;
    border-radius:22px;
  }

  .result-close{
    width:34px;
    height:34px;
    top:0.7rem;
    right:0.7rem;
    font-size:1rem;
  }

  .result-kicker{
    font-size:0.7rem;
    letter-spacing:0.12em;
  }

  .result-title{
    margin-top:0.45rem;
    font-size:clamp(1.25rem, 4.6vw, 1.75rem);
  }

  .result-summary{
    margin-top:0.8rem;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:0.55rem;
  }

  .result-stat{
    padding:0.65rem 0.35rem;
    border-radius:14px;
  }

  .result-stat-label{
    font-size:0.66rem;
    letter-spacing:0.06em;
  }

  .result-stat-value{
    margin-top:0.3rem;
    font-size:1.5rem;
  }

  .result-stat-unit{
    margin-top:0.2rem;
    font-size:0.66rem;
    letter-spacing:0.05em;
  }

  .rating-star{
    font-size:1.35rem;
  }
  
  .start-text {
    font-size: 2rem;
  }

  #infoTopBtn{
    display:inline-flex;
    min-width:52px;
    height:36px;
    font-size:0.84rem;
    letter-spacing:0.06em;
    padding:0 0.9rem;
    transform:none;
    vertical-align:middle;
  }

  .info-fab,.info-fab-label{display:none !important}
  .info-fab{
    width:46px;
    height:46px;
    font-size:18px;
    right:max(0.65rem, env(safe-area-inset-right));
    bottom:max(0.65rem, env(safe-area-inset-bottom));
    border-width:1px;
  }
  .info-fab-label{
    right:max(0.65rem, env(safe-area-inset-right));
    bottom:calc(max(0.65rem, env(safe-area-inset-bottom)) + 52px);
    font-size:0.76rem;
    padding:0.38rem 0.72rem;
  }
}

@media (max-width: 480px) {
  .main-area{
    padding:1rem;
  }

  .top-controls{
    width:100%;
    justify-content:flex-end;
  }

  .speedtest-header {
    max-width: 100%;
  }

  .stat-item .value {
    font-size: 1.8rem;
  }

  .result-screen{
    padding:0.5rem;
  }

  .result-card{
    padding:1rem 0.75rem 0.8rem;
    border-radius:18px;
  }

  .result-title{
    font-size:1.15rem;
  }

  .result-summary{
    gap:0.4rem;
  }

  .result-stat{
    padding:0.5rem 0.25rem;
  }

  .result-stat-value{
    font-size:1.22rem;
  }
  
}

.loading {
  background: linear-gradient(90deg, var(--gauge-inactive-color) 25%, rgba(255,255,255,0.1) 50%, var(--gauge-inactive-color) 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}