/* ===== XINON brand ===== */
:root {
  --xinon-blue:   #005384;
  --xinon-deep:   #003b60;
  --xinon-yellow: #FBC51D;
  --xinon-ui-blue:#44bef1;
  --surface:              #f1fbff;
  --surface-container:    #ffffff;
  --surface-container-low:#e9f6fb;
  --outline-variant:      #c1c7d0;
  --on-surface:           #121d21;
  --on-surface-variant:   #41474f;
}

body {
  margin: 0px;
  padding: 0px;
  display: block;
  background: var(--surface);
  font-family: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  overflow-x: hidden;
}

.openSpeedtestApp {
  height: 100vh;
  width: 100vw;
  display: block;
  overflow: hidden;
}

/* ===== Recolor SVG gradients to XINON brand ===== */
#gradient stop {
  stop-color: var(--xinon-yellow);
}
#RadialGradient1 stop {
  stop-color: var(--xinon-yellow);
}

::-webkit-scrollbar { display: none; }
html {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ===== Header (xinon.eu style) ===== */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface-container);
  border-bottom: 1px solid var(--outline-variant);
}
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  position: relative;
  overflow: hidden;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  color: var(--on-surface);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .02em;
  text-decoration: none;
  position: relative;
  z-index: 1;
}
.nav-logo:hover { text-decoration: none; }
.nav-logo img { height: 32px; width: auto; display: block; }
.nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1;
}
.nav-deco {
  position: absolute;
  top: 0; right: 0;
  width: 256px; height: 100%;
  background: var(--xinon-yellow);
  transform: skewX(-30deg) translateX(48px);
  opacity: .2;
  z-index: 0;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border: 2px solid transparent;
  border-radius: 4px;
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  transition: background .15s ease, color .15s ease;
}
.btn-secondary { background: var(--xinon-yellow); color: #6e5400; }
.btn-secondary:hover { background: #f4bf13; color: #6e5400; text-decoration: none; }
.btn:focus-visible { outline: 3px solid var(--xinon-blue); outline-offset: 2px; }

/* ===== Footer ===== */
.footer {
  position: relative;
  z-index: 2;
  padding: 24px 16px 32px;
  text-align: center;
  background: var(--surface);
}
.footer .legal {
  font-size: 12px;
  color: var(--on-surface-variant);
}
.footer .links {
  margin-top: 8px;
  font-size: 12px;
}
.footer .links a { color: var(--xinon-blue); text-decoration: none; }
.footer .links a:hover { text-decoration: underline; }

/* ===== Gauge ===== */
.main-Gaugebg {
  fill: none;
  stroke: var(--surface-container-low);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 22px;
  stroke-dasharray: 681;
}
.main-GaugeBlue {
  fill: none;
  stroke: var(--xinon-yellow);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 22px;
  stroke-dasharray: 681;
  stroke-opacity: 0;
}
.main-GaugeWhite {
  fill: none;
  stroke: var(--surface-container);
  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: var(--on-surface-variant);
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
}
.oDoLive-Speed {
  font-size: 28px;
  fill: var(--on-surface);
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  text-anchor: middle;
  font-variant-numeric: tabular-nums;
}
.oDoLive-Status {
  font-size: 10px;
  fill: var(--on-surface-variant);
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 500;
  text-anchor: middle;
}
.uiBg { fill: var(--surface-container-low); }
.progressbg {
  stroke: var(--surface-container-low);
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 0;
}
.Cards { fill: var(--surface-container); }
.Symbol { fill: var(--xinon-yellow); }
.rtext {
  font-size: 10px;
  fill: var(--on-surface-variant);
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 600;
  letter-spacing: .02em;
}
.rtextnum {
  font-size: 23px;
  fill: var(--on-surface);
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  text-anchor: middle;
  font-variant-numeric: tabular-nums;
}
.rtextmbms {
  font-size: 12px;
  fill: var(--on-surface-variant);
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
  text-anchor: middle;
}
.jitter-Mob {
  font-size: 9px;
  fill: var(--on-surface-variant);
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
  text-anchor: middle;
}
.startButton {
  fill: var(--xinon-yellow);
  -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: "Hanken Grotesk", sans-serif;
  font-weight: 500;
  text-anchor: middle;
}
.intro-Progress {
  stroke: var(--xinon-yellow);
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 0;
}
.progressElmstart {
  stroke: var(--xinon-yellow);
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 0;
  display: block;
}
.Startsettings {
  fill: var(--on-surface-variant);
  -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; }
.deskStart {
  fill: none;
  stroke: var(--surface-container-low);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 22px;
  stroke-dasharray: 681;
  stroke: var(--xinon-yellow);
}
#UI-Desk { display: none; }
#UI-Mob { display: none; }
.oDoTop-Speed {
  font-size: 16.96px;
  fill: var(--on-surface-variant);
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
  text-anchor: end;
  font-variant-numeric: tabular-nums;
}
#upSymbolDesk, #downSymbolDesk, #upSymbolMob, #downSymbolMob {
  fill: var(--xinon-yellow);
  display: none;
}

/* ===== XINON: hide OST wifi/no-signal icons ===== */
#ConnectErrorDesk, #ConnectErrorMob {
  display: none !important;
}
use.pingIco {
  display: none;
}
#ipMob, #ipDesk {
  font-size: 15px;
  fill: var(--on-surface);
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 500;
  text-anchor: middle;
  display: none;
}

/* ===== Spinner ===== */
.spinner {
  position: absolute;
  z-index: 999;
  top: 50vh;
  left: 50vw;
  text-align: center;
}
.spinner > div {
  width: 20px;
  height: 20px;
  background-color: var(--xinon-yellow);
  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% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* ===== Dark mode toggle (kept functional) ===== */
.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; }
}
@media (max-width: 640px) {
  .footer { padding: 20px 16px 24px; }
}