/* speedtest.netunicorn.org — Stylesheet (OLED Graphit + Eisblau, 2026-10-17 konsolidiert)
   Reines Schwarz (#000), Flächen #070708, Download #4f8fcc / #64b5ff,
   Upload #4cd97b / #9aa4b2, keine Hintergrund-Unschärfe (backdrop-filter). */

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

:root {
  --ink: #000000;
  --n0: #000000;
  --n1: #070708;
  --n2: #141416;
  --n3: #2a2d34;
  --s0: #c4c8ce;
  --s1: #c9cdd3;
  --s2: #d2d5da;
  --f0: #9aa4b2;
  --f1: #4f8fcc;
  --f3: #4f8fcc;
  --dl: #4f8fcc;
  --dl-bright: #64b5ff;
  --ul: #4cd97b;
  --pink: #9aa4b2;
  --blob: #4fa3f7;
  --a-red: #ff6961;
  --a-orange: #ffa94d;
  --a-yellow: #ffd866;
  --a-green: #4cd97b;
  --a-purple: #8e9bb0;
  --text: #c4c8ce;
  --text-dim: #8a9099;
  --text-faint: #686e77;
  --accent: #4f8fcc;
  --edge: rgba(255, 255, 255, .07);
  --edge-soft: rgba(255, 255, 255, .045);
  --surf: #070708;
  --glass-rim: rgba(255, 255, 255, .05);
  --pill: rgba(255, 255, 255, .04);
  --well: #000000;
  --well-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
  --primary: #15273a;
  --radius: 20px;
  --radius-s: 12px;
  --sf: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --sf-disp: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro", system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --sf-mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: var(--sf);
  --disp: var(--sf-disp);
  --mono: var(--sf);
  --focus: 0 0 0 2px var(--n0), 0 0 0 4px var(--accent);
}

html {
  background: var(--ink);
  scrollbar-color: var(--n3) transparent;
}
body {
  min-height: 100dvh;
  color: var(--text);
  background: var(--ink);
  font-family: var(--disp);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  padding: clamp(10px, 2vw, 22px);
  padding-bottom: max(clamp(10px, 2vw, 22px), env(safe-area-inset-bottom));
}
kbd, code, pre { font-family: var(--sf-mono); }

.wrap { max-width: 1000px; margin: 0 auto; display: grid; gap: 12px; }
.tile {
  background: var(--surf);
  border: 1px solid var(--glass-rim);
  border-radius: var(--radius);
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }

/* ── Kopf ──────────────────────────────────────────────────────────── */
.head { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 4px 4px 0; }
.brand {
  display: flex; flex-direction: column; justify-content: center; min-width: 0;
  h1 { font-size: 21px; font-weight: 600; letter-spacing: 0.03em; color: var(--s2); line-height: 1; }
  .sub { margin-top: 7px; font-size: 13px; color: var(--text-dim); #ip { font-family: var(--sf-mono); font-size: 12px; } }
  &::after { content: ""; display: block; width: 38px; height: 2px; margin-top: 10px; background: var(--accent); border-radius: 2px; }
}
.headbox { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

.seg {
  display: flex;
  background: var(--pill);
  border: 1px solid var(--edge);
  border-radius: 999px;
  overflow: hidden;
  button {
    appearance: none; border: none; background: none; cursor: pointer;
    font-family: var(--mono); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--text-faint); padding: 9px 13px;
    transition: color .12s ease, background .12s ease;
    & + button { border-left: 1px solid var(--edge-soft); }
    &:hover { color: var(--s1); }
    &.active { color: var(--s2); background: var(--n2); border-radius: 999px; }
    &:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); border-radius: 0; }
    &[disabled] { opacity: .5; cursor: default; }
  }
}

#startStopBtn {
  cursor: pointer; user-select: none; min-width: 150px; padding: 12px 22px; border-radius: 999px;
  border: 1px solid rgba(79, 143, 204, .42);
  background: var(--primary);
  color: var(--s2);
  font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-align: center;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
  &:hover { border-color: rgba(100, 181, 255, .65); color: #fff; }
  &.running { background: #231112; border-color: rgba(255, 105, 97, .45); color: var(--a-red); }
}

/* ── Phasen-Stepper (Ping → Download → Upload) ─────────────────────── */
.phases {
  list-style: none; display: flex; justify-content: center; gap: 6px; margin-top: -2px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint);
  li {
    display: flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid transparent;
    transition: color .15s ease, border-color .15s ease;
    &::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--n3); transition: background .15s ease; }
    &.done { color: var(--text-dim); &::before { background: var(--a-green); } }
    &.on {
      color: var(--s2); background: var(--pill); border-color: var(--edge);
      &::before { background: var(--accent); animation: blink 1s ease-in-out infinite; }
    }
  }
  &:not(.active) { opacity: .55; }
}
@keyframes blink { 50% { opacity: .3; } }

/* ── Gauges ────────────────────────────────────────────────────────── */
.gauges { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; }
.gauge { display: flex; flex-direction: column; padding: 14px 16px 16px; min-width: 0; }
.cell { padding: 14px 16px 16px; min-width: 0; }
.label {
  font-family: var(--sf); font-size: 13.5px; font-weight: 650; letter-spacing: -0.01em;
  color: var(--f0); display: flex; align-items: center; gap: 10px;
  &::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(154, 164, 178, .35), transparent); order: 1; }
  .lactions, .latmeta, .hist-tabs, .cmp-diff { order: 2; }
  .spark { order: 2; }
}
.val { font-variant-numeric: tabular-nums; font-size: clamp(24px, 4vw, 32px); font-weight: 500; line-height: 1.15; color: var(--s2); margin-top: 10px; }
.val:empty::before { content: "–"; color: var(--n3); }
.unit { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 3px; }

.ringbox {
  position: relative; width: min(230px, 64vw); margin: 8px auto 0;
  svg { display: block; width: 100%; height: auto; }
  circle { fill: none; stroke-width: 11; }
  .ring-track { stroke: #141619; }
  .ring-fill {
    stroke-linecap: round; transform: rotate(-90deg); transform-origin: center;
    stroke-dasharray: 540.35; stroke-dashoffset: 540.35; transition: stroke-dashoffset .12s linear;
    &.dl { stroke: var(--f1); }
    &.ul { stroke: var(--pink); }
  }
  .rlabel {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; pointer-events: none;
    .val { margin: 0; line-height: 1; font-size: clamp(36px, 6.5vw, 48px); font-weight: 600; letter-spacing: -0.01em; }
    .unit { margin: 0; }
  }
}
#dlText { color: var(--f1); }
#ulText { color: var(--pink); }
.pprog {
  height: 3px; background: var(--well); box-shadow: var(--well-shadow);
  border-radius: 2px; overflow: hidden; margin: 12px 6px 0;
  i { display: block; height: 100%; width: 0; background: var(--n3); border-radius: 2px; }
}
.gauge .delta { text-align: center; margin-top: 10px; min-height: 15px; }

.delta {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.03em;
  &.up { color: var(--a-green); }
  &.down { color: var(--a-orange); }
  &.same { color: var(--text-faint); }
}

.blobcell { display: flex; align-items: center; justify-content: center; padding: 0 2px; }
#blob {
  display: block; cursor: grab; border-radius: 50%; -webkit-tap-highlight-color: transparent; touch-action: none; user-select: none;
  &:active { cursor: grabbing; }
  &:focus-visible { box-shadow: var(--focus); }
}

/* ── Live-Durchsatz-Kurve (#rateWrap / #rateSvg) ──────────────────── */
.ratewrap {
  position: relative;
  height: 46px;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 10px;
  overflow: hidden;
}
#rateSvg {
  display: block;
  width: 100%;
  height: 100%;
}
.ratemeta {
  position: absolute;
  top: 5px;
  right: 10px;
  display: flex;
  gap: 12px;
  font-family: var(--sf-mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  pointer-events: none;
}
#ratePeakDl { color: var(--dl-bright); }
#ratePeakUl { color: var(--ul); }

/* ── Ping / Jitter / Bufferbloat / Dual-Stack ──────────────────────── */
.pingbar { display: flex; align-items: stretch; }
.pseg {
  flex: 1 1 0; min-width: 0; padding: 11px 16px 13px;
  & + .pseg { border-left: 1px solid var(--edge-soft); }
  .plabel { font-family: var(--mono); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--f0); cursor: help; }
  .val { font-size: 22px; margin-top: 5px; }
  .unit { margin-top: 2px; }
}
.bbdetail {
  font-family: var(--sf-mono);
  font-size: 9.5px;
  color: var(--text-dim);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}
#bbGrade {
  &:empty::before { content: "–"; color: var(--n3); }
  &.gAp, &.gA { color: var(--a-green); }
  &.gB { color: var(--f1); }
  &.gC { color: var(--a-yellow); }
  &.gD { color: var(--a-orange); }
  &.gF { color: var(--a-red); }
}

/* ── Was geht damit ────────────────────────────────────────────────── */
.fits { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-top: 12px; }
.fit {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-s);
  background: var(--well); border: 1px solid var(--edge-soft); box-shadow: var(--well-shadow); font-size: 13px;
  .mark { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--n3); }
  &.ok .mark { background: var(--a-green); }
  &.meh .mark { background: var(--a-yellow); }
  &.no .mark { background: var(--a-red); }
  .why { margin-left: auto; font-family: var(--sf-mono); font-size: 10px; color: var(--text-faint); white-space: nowrap; }
}

/* ── Latenz-Chart ──────────────────────────────────────────────────── */
.latwrap {
  margin-top: 12px; height: 120px; background: var(--well); box-shadow: var(--well-shadow);
  border-radius: var(--radius-s); overflow: hidden;
  svg { display: block; width: 100%; height: 100%; }
}
.latmeta { margin-left: auto; font-family: var(--sf-mono); font-size: 10px; font-weight: 400; color: var(--text-faint); text-transform: none; letter-spacing: 0.04em; }
.latlegend {
  display: flex; gap: 16px; margin-top: 8px; flex-wrap: wrap; font-family: var(--sf-mono); font-size: 10.5px; color: var(--text-faint);
  b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-dim); }
  .ll-dl b { color: var(--f1); }
  .ll-ul b { color: var(--pink); }
}

/* ── Verlauf + Tabs (Lokal / Server) ───────────────────────────────── */
.spark { width: 120px; height: 22px; flex: none; margin-left: auto; opacity: .9; }
.hist-tabs {
  display: inline-flex;
  background: var(--well);
  border: 1px solid var(--edge);
  border-radius: 999px;
  padding: 1px;
  gap: 2px;
  button {
    appearance: none; border: none; background: none; cursor: pointer;
    font-family: var(--sf-mono); font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-faint); padding: 2px 8px; border-radius: 999px;
    transition: color .12s ease, background .12s ease;
    &:hover { color: var(--s1); }
    &.active { color: var(--s2); background: var(--n2); }
  }
}
.lactions { margin-left: 8px; display: flex; gap: 4px; align-items: center; }
.label:has(.spark[hidden]) .lactions { margin-left: auto; }
.lactions button, #copyBtn, #shareBtn {
  background: none; border: 1px solid transparent; border-radius: 999px; cursor: pointer; color: var(--text-faint);
  font-family: var(--sf-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; padding: 3px 8px;
  &:hover { color: var(--s2); background: var(--pill); border-color: var(--edge); }
}
#histClear:hover { color: var(--a-red); }
#histRepeat[aria-pressed="true"] {
  background: var(--primary); border-color: rgba(79, 143, 204, .42); color: var(--s2);
}
.hist { margin-top: 10px; display: flex; flex-direction: column; }
.hempty {
  font-family: var(--sf-mono); font-size: 11px; color: var(--text-faint); padding: 6px 2px;
}
.hrow {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 8px 4px; border-top: 1px solid var(--edge-soft);
  &:first-child { border-top: none; }
  &.now { background: var(--well); box-shadow: var(--well-shadow); border-radius: 6px; padding-left: 8px; padding-right: 8px; }
}
.hwhen {
  font-family: var(--sf-mono); font-size: 10.5px; color: var(--text-faint); white-space: nowrap; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; gap: 2px;
  .hbadges { display: flex; gap: 5px; align-items: center; }
  .tgt { font-size: 9px; color: var(--text-dim); letter-spacing: .08em; text-transform: uppercase; &.nu { color: var(--a-purple); } }
  .dev { font-size: 9px; color: var(--text-faint); background: rgba(255, 255, 255, .04); border: 1px solid var(--edge-soft); border-radius: 4px; padding: 0 4px; letter-spacing: .03em; }
}
.hbars { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hbar {
  display: flex; align-items: center; gap: 7px;
  .cap { font-family: var(--sf-mono); font-size: 10px; color: var(--text-faint); width: 11px; flex: none; }
  .track { flex: 1; height: 5px; background: var(--well); box-shadow: var(--well-shadow); border-radius: 3px; overflow: hidden; min-width: 30px; }
  .fill { display: block; height: 100%; border-radius: 3px; width: 0; transition: width .3s ease; &.dl { background: var(--f1); } &.ul { background: var(--pink); } }
  .num { font-family: var(--sf-mono); font-size: 10.5px; color: var(--s0); font-variant-numeric: tabular-nums; width: 54px; text-align: right; flex: none; }
}
.hmeta {
  font-family: var(--sf-mono); font-size: 10.5px; color: var(--text-faint); white-space: nowrap; font-variant-numeric: tabular-nums;
  b { font-weight: 600; }
  .gAp, .gA { color: var(--a-green); }
  .gB { color: var(--f1); }
  .gC { color: var(--a-yellow); }
  .gD { color: var(--a-orange); }
  .gF { color: var(--a-red); }
}

/* ── Dual-Server-Vergleich (#compareBox) ───────────────────────────── */
#compareBox, .comparebox {
  padding: 14px 16px 16px;
}
.cmp-diff {
  margin-left: auto;
  font-family: var(--sf-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--dl-bright);
  font-variant-numeric: tabular-nums;
}
.cmp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.cmp-col {
  background: var(--well);
  border: 1px solid var(--edge-soft);
  border-radius: var(--radius-s);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cmp-host {
  font-family: var(--sf-mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--s2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  .cmp-sub { color: var(--text-faint); font-weight: 400; text-transform: none; letter-spacing: 0; }
}
.cmp-vals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  font-family: var(--sf-mono);
  font-variant-numeric: tabular-nums;
}
.cmp-metric {
  display: flex;
  flex-direction: column;
  gap: 1px;
  .k { font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
  .v { font-size: 14px; font-weight: 600; color: var(--s1); }
  .v.dl { color: var(--f1); }
  .v.ul { color: var(--ul); }
}

/* ── Details / Teilen ──────────────────────────────────────────────── */
details {
  > summary {
    cursor: pointer; list-style: none; padding: 13px 16px;
    font-family: var(--sf); font-size: 13.5px; font-weight: 650; letter-spacing: -0.01em; color: var(--f0);
    &::-webkit-details-marker { display: none; }
    &::after { content: " +"; color: var(--text-faint); }
  }
  &[open] > summary::after { content: " –"; }
}
.dbody { padding: 0 16px 14px; }
#sumTable {
  width: 100%; border-collapse: collapse; font-size: 13px;
  td { padding: 7px 2px; border-top: 1px solid var(--edge); }
  td:first-child { color: var(--text-dim); }
  td:last-child { text-align: right; color: var(--s1); font-family: var(--sf-mono); font-variant-numeric: tabular-nums; }
}
.sharerow { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
#resultsURL {
  flex: 1; min-width: 0; padding: 8px 10px;
  background: var(--well); border: 1px solid var(--edge); box-shadow: var(--well-shadow);
  border-radius: 7px; color: var(--s0); font-family: var(--sf-mono); font-size: 11.5px;
}
#shareArea p { font-size: 12px; color: var(--text-dim); margin-top: 8px; font-family: var(--sf-mono); }

/* ── Fuß + Datenschutz ────────────────────────────────────────────── */
.foot {
  font-family: var(--sf-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--text-faint); text-align: center; padding: 4px 0 2px;
  span { margin: 0 6px; color: var(--n3); }
  .hint span { margin: 0; color: var(--text-faint); }
  kbd { border: 1px solid var(--edge); border-radius: 4px; padding: 0 5px; font-family: inherit; color: var(--text-faint); }
}
.linkbtn { background: none; border: none; cursor: pointer; color: var(--text-faint); font: inherit; text-decoration: underline dotted; text-underline-offset: 3px; &:hover { color: var(--accent); } }

dialog {
  background: var(--surf); color: var(--text); border: 1px solid rgba(255, 255, 255, .08); border-radius: 22px;
  box-shadow: none;
  &::backdrop { background: rgba(0, 0, 0, .65); }
}
dialog#privacyPolicy {
  padding: 22px 24px; width: min(640px, 92vw); max-height: 86vh; overflow-y: auto;
  font-family: var(--sf); font-size: 14px; line-height: 1.55;
  h2 { font-family: var(--disp); font-size: 18px; margin-bottom: 8px; color: var(--s2); }
  h3 { font-family: var(--sf-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--f0); margin: 16px 0 4px; }
  ul { margin: 4px 0 4px 1.2em; }
  a { color: var(--accent); }
  form { margin-top: 18px; text-align: right; }
  form button {
    border: 1px solid var(--edge); background: var(--pill); color: var(--s0); cursor: pointer; padding: 7px 14px; border-radius: 999px;
    font-family: var(--sf-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
    &:hover { border-color: var(--accent); color: var(--s2); }
  }
}

/* ── Blob-Freilauf: Overlay über der ganzen Seite (blob.js) ────────── */
.nublob-stage {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  pointer-events: none; z-index: 40; touch-action: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  &.hit { pointer-events: auto; cursor: grab; }
  &.hold { cursor: grabbing; }
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .head { grid-template-columns: 1fr; justify-items: center; }
  .brand { align-items: center; text-align: center; &::after { margin-left: auto; margin-right: auto; } }
  .headbox { justify-content: center; }
  .gauges { grid-template-columns: 1fr; }
  .blobcell { order: -1; }
  .pingbar { flex-wrap: wrap; }
  .pseg { flex: 1 1 45%; padding: 9px 12px 11px; &:nth-child(3) { border-left: none; border-top: 1px solid var(--edge-soft); } .val { font-size: 19px; } }
  .cmp-grid { grid-template-columns: 1fr; }
  .hrow { grid-template-columns: auto 1fr; }
  .hmeta { grid-column: 2; text-align: right; }
  .foot .hint { display: none; }
  .spark { width: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .ringbox .ring-fill, .seg button, #startStopBtn, .hbar .fill, .phases li { transition: none; }
  .phases li.on::before { animation: none; }
}
@media (prefers-contrast: more) {
  :root { --edge: #5a5e66; --edge-soft: #3d4047; --text-faint: #a8aeb6; --surf: #1c1d21; --well: #000; }
}