:root{
  color-scheme:light dark;

  --bg:#f8fafc;
  --surface:#ffffffcc;
  --surface-strong:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e2e8f0;

  --accent:#2563eb;
  --accent-strong:#1d4ed8;
  --danger:#dc2626;

  --radius:18px;
  --radius-sm:12px;

  --shadow-sm:0 4px 12px rgba(0,0,0,.06);
  --shadow-md:0 10px 30px rgba(0,0,0,.08);
  --shadow-lg:0 25px 80px rgba(0,0,0,.18);

  --backdrop:blur(18px) saturate(140%);
}

[data-theme="dark"]{
  --bg:#020617;
  --surface:#0f172acc;
  --surface-strong:#0f172a;
  --text:#f1f5f9;
  --muted:#94a3b8;
  --border:#1e293b;

  --accent:#3b82f6;
  --accent-strong:#60a5fa;
  --danger:#f87171;

  --shadow-sm:0 4px 12px rgba(0,0,0,.4);
  --shadow-md:0 10px 40px rgba(0,0,0,.5);
  --shadow-lg:0 30px 120px rgba(0,0,0,.7);
}

*,
*::before,
*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  height:100%;
  overflow-x:hidden;
  scroll-behavior:smooth;
}

body{
  min-height:100dvh;
  background:var(--bg);
  color:var(--text);
  font-family:"Inter","Roboto",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  display:flex;
  flex-direction:column;
  position:relative;
}

img{
  max-width:100%;
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
}

button{
  font:inherit;
}

header{
  position:relative;
  z-index:20;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:.2rem 2rem;
  background:var(--surface);
  backdrop-filter:var(--backdrop);
  -webkit-backdrop-filter:var(--backdrop);
  border-bottom:1px solid var(--border);
}

#pageTitle{
  font-size:clamp(1.1rem,2vw,1.5rem);
  font-weight:700;
  letter-spacing:.3px;
}

header div{
  display:flex;
  gap:.6rem;
}

header button{
  padding:.35rem .7rem;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--surface-strong);
  color:var(--text);
  cursor:pointer;
  transition:.25s ease;
}

header button:hover{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}

.site-bg{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
}

.bg-item{
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:0;
  transform:scale(1.08);
  transition:opacity 1.2s ease,transform 8s linear;
}

.bg-item.is-active{
  opacity:1;
  transform:scale(1);
}

.site-overlay{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  mix-blend-mode:overlay;
}

.site-overlay img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.06;
}

.orb{
  position:absolute;
  border-radius:50%;
  filter:blur(140px);
  opacity:.4;
  animation:orbFloat 18s ease-in-out infinite;
  z-index:2;
}

.orb-1{
  width:480px;
  height:480px;
  background:var(--accent);
  top:-15%;
  left:-10%;
}

.orb-2{
  width:580px;
  height:580px;
  background:var(--danger);
  bottom:-20%;
  right:-15%;
  animation-delay:-8s;
}

@keyframes orbFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(60px,80px) scale(1.08)}
}

#loading{
  margin:auto;
  z-index:10;
  text-align:center;
  padding:2rem;
}

.loadCircle{
  display:inline-block;
  width:2em;
  height:2em;
  margin-right:.6em;
  vertical-align:middle;
  border-radius:50%;
  border:3px solid var(--border);
  border-top-color:var(--accent);
  animation:spin .8s linear infinite;
}

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

#testWrapper{
  width:min(1200px,92%);
  margin:3rem auto 4rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2rem;
}

#startStopBtn{
  width:9em;
  height:3em;
  padding: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius);
  border:2px solid var(--accent);
  color:var(--accent);
  font-weight:600;
  cursor:pointer;
  transition:.3s ease;
  background:var(--bg);
}

#startStopBtn:hover{
  background:var(--accent);
  color:#fff;
  box-shadow:var(--shadow-md);
}

#startStopBtn.running{
  background:var(--danger);
  border-color:var(--danger);
  color:#fff;
}

#startStopBtn::before{content:"Start"}
#startStopBtn.running::before{content:"Abort"}

.privacy{
  font-size:.85rem;
  color:var(--muted);
  transition:.2s;
}

.privacy:hover{
  color:var(--accent);
}

#serverArea{
  color:var(--muted);
  font-size:.95rem;
}

#server{
  margin-left:.5rem;
  padding:.35rem .6rem;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--surface-strong);
  color:var(--text);
}

#test{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2.5rem;
}

.testGroup{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:2.5rem;
  flex-wrap:wrap;
}

.testArea,
.testArea2{
  position:relative;
  background:var(--surface);
  backdrop-filter:var(--backdrop);
  -webkit-backdrop-filter:var(--backdrop);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.testArea{
  width:17em;
  height:13em;
}

.testArea canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.testName{
  font-weight:600;
  letter-spacing:.3px;
}

.testArea .testName{
  position:absolute;
  top:1rem;
}

.meterText{
  font-size:2.4rem;
  font-weight:700;
}

.testArea .unit{
  position:absolute;
  bottom:1rem;
  font-size:.85rem;
  color:var(--muted);
}

.testArea2{
  width:15em;
  height:7.5em;
  gap:.4rem;
}

.testArea2 .meterText{
  font-size:2rem;
}

.testArea2 .unit{
  font-size:.85rem;
  color:var(--muted);
}

.meterText:empty::before{
  content:"0.00";
}

#ipArea{
  font-size:.9rem;
  color:var(--muted);
}

#shareArea{
  width:100%;
  max-width:40em;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  align-items:center;
}

#shareArea input{
  width:100%;
  padding:.6rem;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--surface-strong);
  color:var(--text);
  text-align:center;
}

#resultsImg{
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}

#privacyPolicy{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  overflow-y:auto;
  padding:4rem 1.5rem;
  z-index:9999;
}

#privacyPolicy > *{
  max-width:900px;
  margin:0 auto 2rem;
  background:var(--surface-strong);
  color:var(--text);
  padding:2rem;
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
}

#privacyPolicy h2{
  margin-bottom:1rem;
}

#privacyPolicy h3{
  margin:1.5rem 0 .6rem;
}

#privacyPolicy ul{
  padding-left:1.2rem;
  margin-top:.5rem;
}

.closePrivacyPolicy{
  text-align:center;
  background:none!important;
  box-shadow:none!important;
}

footer{
  margin-top:auto;
  padding:.5rem;
  text-align:center;
  background:var(--surface);
  backdrop-filter:var(--backdrop);
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:.9rem;
}

.hidden{display:none}
.visible{display:block}
html{
  height:100%;
  overflow-x:hidden;
}

body{
  min-height:100dvh;
  height:100dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:1000;
}

footer{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  z-index:1000;
}

#loading,
#testWrapper{
  position:relative;
  z-index:10;
  margin-top:calc(80px);
  margin-bottom:calc(80px);
}

#testWrapper{
  overflow-y:auto;
  height:calc(100dvh - 160px);
  padding-top:1rem;
  padding-bottom:1rem;
}

@media(max-width:768px){
  #loading,
  #testWrapper{
    margin-top:calc(110px);
    margin-bottom:calc(90px);
  }

  #testWrapper{
    height:calc(100dvh - 200px);
  }
}