/* roboto-regular - latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("..fonts/roboto-v30-latin-regular.eot"); /* IE9 Compat Modes */
  src: local(""),
    url("../fonts/roboto-v30-latin-regular.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/roboto-v30-latin-regular.woff2")
      format("woff2"),
    /* Super Modern Browsers */
      url("../fonts/roboto-v30-latin-regular.woff") format("woff"),
    /* Modern Browsers */ url("../fonts/roboto-v30-latin-regular.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("../fonts/roboto-v30-latin-regular.svg#Roboto") format("svg"); /* Legacy iOS */
}
/* roboto-500 - latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/roboto-v30-latin-500.eot"); /* IE9 Compat Modes */
  src: local(""),
    url("assets/fonts/roboto-v30-latin-500.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/roboto-v30-latin-500.woff2")
      format("woff2"),
    /* Super Modern Browsers */ url("../fonts/roboto-v30-latin-500.woff")
      format("woff"),
    /* Modern Browsers */ url("../fonts/roboto-v30-latin-500.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("../fonts/roboto-v30-latin-500.svg#Roboto") format("svg"); /* Legacy iOS */
}

/* 中文字体支持 */
body, * {
  font-family: "Roboto", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body {
  margin: 0px;
  padding: 0px;
  display: block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::-webkit-scrollbar {
  display: none;
}
html {
  -ms-overflow-style: none; 
  scrollbar-width: none;
}
 
.Credits {
color: rgb(125 119 119);
text-align: center;
font-size:14px;
font-family: "Roboto", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif;
font-weight: 500;
} 
.Credits a {
  text-decoration: none;
  color: rgb(113, 113, 113);
}
.Credits a:hover {
color: #ff6b35;
}

.ConnectError {
  display: none;

}

.openSpeedtestApp {
 
  height: 100vh;
  width: 100vw;
  display: none;
  overflow: hidden;
}
.main-Gaugebg {
  fill: none;
  stroke: rgb(231, 231, 232);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 22px;
  stroke-dasharray: 681;
}
.main-GaugeBlue {
  fill: none;
  stroke: url(#gradient);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 22px;
  stroke-dasharray: 681;
  stroke-opacity: 0;
}
.main-GaugeWhite {
  fill: none;
  stroke: rgb(255, 255, 255);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 15px;
  stroke-dasharray: 0, 681;
  stroke-dashoffset: 1;
  stroke-opacity: 0;
}
.oDo-Meter {
  font-size: 16.633283615112305px;
  fill: gray;
  font-family: "Roboto", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif;
  font-weight: 500;
}
.oDoLive-Speed {
  font-size: 28px;
  fill: #201e1e;
  font-family: "Roboto", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif;
  font-weight: 500;
  text-anchor: middle;
}

.oDoLive-Status {
  font-size: 10px;
  fill: #d2d1d2;
  font-family: "Roboto", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif;
  font-weight: 500;
  text-anchor: middle;
}
.uiBg {
  fill: #d2d1d2;
}
.progressbg {
  stroke: rgb(231, 231, 232);
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 0;
}
.Cards {
  fill: #f2f2f2;
}
.Symbol {
  fill: url(#gradient);
}
.rtext {
  font-size: 12px;
  fill: #333;
  font-family: "Roboto", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif;
  font-weight: 500;
}
.rtextnum {
  font-size: 23px;
  fill: #201e1e;
  font-family: "Roboto", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif;
  font-weight: 500;
  text-anchor: middle;
}
.rtextmbms {
  font-size: 12px;
  fill: #5f5f5f;
  font-family: "Roboto", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif;
  font-weight: 500;
  text-anchor: middle;
}
.jitter-Mob {
  font-size: 9px;
  fill: #5f5f5f;
  font-family: "Roboto", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif;
  font-weight: 500;
  text-anchor: middle;
}

/* 已移除网络质量与丢包率样式 */
.startButton {
  fill: url(#RadialGradient1);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  pointer-events: visible;
}
.buttonTxt {
  font-size: 40px;
  fill: #ffffff;
  font-family: "Roboto", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif;
  font-weight: 500;
  text-anchor: middle;
}

.intro-Progress {
  stroke: #ff6b35;
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 0;
}
.progressElmstart {
  stroke: #ff6b35;
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 0;
  display: block;
}
.Startsettings {
  fill: url(#RadialGradient1);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  pointer-events: visible;
  opacity: 0.1;
  transition: opacity 1s ease-in-out;
}
.Startsettings:hover {
  opacity: 1;
}

.progressbg {
  stroke: rgb(231, 231, 232);
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 0;
}
.deskStart {
  fill: none;
  stroke: rgb(231, 231, 232);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 22px;
  stroke-dasharray: 681;
  stroke: url(#gradient);
}
#UI-Desk {
  display: none;
}
#UI-Mob {
  display: none;
}
.oDoTop-Speed {
  font-size: 16.96px;
  fill: gray;
  font-family: "Roboto", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif;
  font-weight: 500;
  text-anchor: end;
}
#upSymbolDesk {
  fill: #ff6b35;
  display: none;
}
#downSymbolDesk {
  fill: #ff6b35;
  display: none;
}
#upSymbolMob {
  fill: #ff6b35;
  display: none;
}
#downSymbolMob {
  fill: #ff6b35;
  display: none;
}

#ipMob {
  font-size: 15px;
  fill: #201e1e;
  font-family: "Roboto", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif;
  font-weight: 500;
  text-anchor: middle;
  display: none;
}
#ipDesk {
  font-size: 15px;
  fill: #201e1e;
  font-family: "Roboto", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif;
  font-weight: 500;
  text-anchor: middle;
  display: none;
}

.spinner {
  position: absolute;
  z-index: 999;
  top: 50vh;
  left: 50vw;
  text-align: center;
}

.spinner > div {
  width: 20px;
  height: 20px;
  background-color: #2196f3;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
  }
}

@keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.darkmode {
  margin-bottom: -15px;
  fill: #75757a99;
  padding-top: 16px;
  display: none;
  cursor: pointer;
  margin-right: 30px;
}
#daymode {
  margin-right: 40px;
}
.darkmode:hover {
  fill: #000000;
}

.Mobile,
.Desktop {
  visibility: hidden;
  width: 100vw;
  height: 100vh;
}

@media only screen and (orientation: landscape) {
  .Mobile {
    visibility: hidden;
  }
  .Desktop {
    visibility: visible;
  }
}

@media only screen and (orientation: portrait) {
  .spinner {
    top: 42vh;
    left: 42vw;
  }
  .Mobile {
    visibility: visible;
  }
  .Desktop {
    visibility: hidden;
  }
  /* 移动竖屏尺寸修正：不再强制占满 100vh，而是按视口宽度等比缩放 */
  .openSpeedtestApp {
    width: 100vw;
    height: auto;
    display: block;
  }
  .Mobile,
  .Desktop {
    width: 100%;
    height: auto;
    max-height: calc(100vh - 60px);
  }
}
@media only screen and (max-width: 300px) {
  .Credits{
    display: none;
  }
}

/* 导航栏集成样式 */
.page-with-nav {
  padding-top: 0;
}

.navbar + .openSpeedtestApp {
  height: calc(100vh - 70px);
}

/* 确保导航栏在测速应用上方 */
.navbar {
  position: relative;
  z-index: 1001;
}

/* 移动端导航优化 */
@media (max-width: 768px) {
  .navbar + .openSpeedtestApp {
    height: calc(100vh - 60px);
  }
}

/* 响应式设计增强 */
@media (max-width: 480px) {
  .Credits {
    font-size: 12px;
    padding: 1rem;
  }
  
  .spinner {
    top: 40vh;
    left: 40vw;
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  .startButton {
    -webkit-tap-highlight-color: rgba(255, 107, 53, 0.3);
    tap-highlight-color: rgba(255, 107, 53, 0.3);
  }
  
  .Startsettings {
    opacity: 1;
  }
  
  /* 增大触摸目标 */
  .startButton {
    min-width: 44px;
    min-height: 44px;
  }
}

/* CSS动画和过渡效果 */
.openSpeedtestApp {
  transition: opacity 0.5s ease-in-out;
}

.main-GaugeBlue {
  transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease;
}

.main-GaugeWhite {
  transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease;
}

.progressElmstart {
  transition: stroke-dashoffset 0.5s ease-in-out;
}

.intro-Progress {
  transition: stroke-dashoffset 0.5s ease-in-out;
}

/* 测试进度视觉指示器 */
.progress-indicator {
  position: relative;
  overflow: hidden;
}

.progress-indicator::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* 脉冲动画 */
.pulse {
  animation: pulse 2s infinite;
}

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

/* 淡入动画 */
.fade-in {
  animation: fadeIn 0.5s ease-in;
}

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

/* 旋转动画 */
.rotate {
  animation: rotate 1s linear infinite;
}

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

/* 错误状态样式 */
.error-state {
  color: #e74c3c;
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* 成功状态样式 */
.success-state {
  color: #27ae60;
  animation: bounce 0.6s ease-in-out;
}

@keyframes bounce {
  0%, 20%, 60%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  80% { transform: translateY(-5px); }
}

/* 加载状态优化 */
.loading-state {
  position: relative;
}

.loading-state::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #ff6b35;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
  .main-Gaugebg {
    stroke: #000;
  }
  
  .main-GaugeBlue {
    stroke: #0066cc;
  }
  
  .oDoLive-Speed, .rtextnum {
    fill: #000;
  }
}

/* 减少动画模式支持 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .spinner > div {
    animation: none;
  }
}

/* 深色模式优化 */
@media (prefers-color-scheme: dark) {
  .Credits {
    color: #ccc;
  }
  
  .Credits a {
    color: #aaa;
  }
}

/* 性能优化 */
.openSpeedtestApp {
  will-change: opacity;
  transform: translateZ(0);
}

.main-GaugeBlue, .main-GaugeWhite {
  will-change: stroke-dashoffset;
}

/* 焦点可见性 */
.startButton:focus-visible {
  outline: 3px solid #ff6b35;
  outline-offset: 2px;
}

.Startsettings:focus-visible {
  outline: 3px solid #ff6b35;
  outline-offset: 2px;
}