/* ===== Theme / Vars ===== */
:root {
  --bg: #0b0e12;
  --bg-soft: #0f141b;
  --panel: #121824;
  --panel-bd: #1c2533;
  --text: #e7ecf3;
  --muted: #9ba7b4;
  --accent: #7c9cff;
  --accent-2: #5b78ff;
  --ok: #35c759;
  --warn: #ffb020;
  --danger: #ff5570;

  --radius: 14px;
  --shadow: 0 8px 24px rgba(0,0,0,0.28);

  --sat: env(safe-area-inset-top);
  --sab: env(safe-area-inset-bottom);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body.dark {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  padding-bottom: var(--sab);
}

/* ===== Topbar ===== */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  background: rgba(11,14,18,0.82);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #111822;
  padding-top: max(0px, var(--sat));
  box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset;
  z-index: 50;
}
.topbar__inner {
  height: 56px;
  max-width: 1080px; margin: 0 auto;
  padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { font-weight: 700; letter-spacing: .2px; }
.accent { color: var(--accent); }
.badge { font-size: 12px; color: var(--muted); }
.topbar__nav .link { color: var(--muted); text-decoration: none; margin-left: 12px; }
.topbar__nav .link:hover { color: var(--text); }

/* Burger */
.icon-btn { min-height: 40px; padding: 8px; border-radius: 10px; background: transparent; border: 0; color: var(--text); }
.icon-btn:hover { background: rgba(255,255,255,0.06); }
.burger { display: block; width: 22px; height: 2px; background: var(--text); margin: 4px 0; border-radius: 2px; }

/* ===== Sheet (Dropdown Menü) ===== */
.sheet { position: fixed; top: 0; left: 0; right: 0; padding-top: calc(56px + max(0px, var(--sat))); background: rgba(11,14,18,0.96); border-bottom: 1px solid #111822; backdrop-filter: blur(8px); z-index: 45; max-height: 85vh; overflow: auto; transition: transform .18s ease, opacity .18s ease; }
.sheet.hidden { display: none; }
.sheet__wrap { max-width: 1080px; margin: 0 auto; padding: 18px 16px 22px; }
.sheet__title { text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: var(--muted); margin-bottom: 10px; }

/* ===== Layout ===== */
.container { max-width: 1080px; margin: 0 auto; padding: calc(56px + 18px + max(0px,var(--sat))) 16px 28px; }
.hero h1 { margin: 0 0 6px; font-size: 28px; }
.hero p { margin: 0; color: var(--muted); }
.section-title { font-weight: 600; margin: 18px 0 10px; }

/* Grid 3 pro Reihe */
.grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0,1fr));
  gap: 14px;
  place-items: center;
  text-align: center;
}
@media (min-width: 600px) { .grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* Kachel */
.card {
  display: block;
  width: 100%;
  max-width: 360px;
  background: var(--panel);
  border: 1px solid var(--panel-bd);
  border-radius: var(--radius);
  padding: 14px 16px;
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.card:hover { transform: translateY(-1px); background: #16202f; border-color: #273247; }
.card__icon { width: 40px; height: 40px; border-radius: 12px; background: rgba(124,156,255,0.14); margin-bottom: 8px; position: relative; }
.card__title { font-weight: 600; }
.card__sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.card__icon.folder::after { content: ""; position: absolute; inset: 10px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-radius: 6px; }
.card__icon.home::after { content: ""; position: absolute; inset: 10px; background: linear-gradient(135deg, #7cffc0, #32d2a4); border-radius: 6px; }

/* ===== Panels (OneDrive-like) ===== */
.panel {
  background: var(--panel);
  border: 1px solid var(--panel-bd);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}
.panel__head { display: flex; align-items: center; justify-content: space-between; }

/* Upload / Dropzone */
.dropzone {
  border: 2px dashed #2a3750;
  border-radius: 16px;
  padding: 28px;
  text-align: center;
  color: var(--muted);
  cursor: pointer;
}
.dropzone:hover { border-color: var(--accent); color: var(--text); background: rgba(124,156,255,0.06); }
.dz-center { max-width: 520px; margin: 0 auto; }
.dz-title { font-weight: 600; }
.dz-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.hidden { display: none !important; }

/* Controls */
.row { display: flex; flex-wrap: wrap; align-items: center; }
.gap { gap: 10px; margin-top: 12px; }

/* Buttons: gleich für <a> und <button> vertikal zentriert */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 10px;
  background: #1a2230;
  color: var(--text);
  border: 1px solid #2a3750;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
}
.btn:hover { background: #212c3f; }
.btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border: 0; }
.btn.primary:hover { filter: brightness(1.05); }
.input {
  min-height: 40px; padding: 8px 12px; border-radius: 10px;
  background: #0f141b; color: var(--text); border: 1px solid #2a3750; outline: none;
}
.input:focus { border-color: var(--accent); }

/* Auswahl-Chips */
.selected {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0f141b;
  border: 1px solid #2a3750;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--text);
}
.chip .meta { color: var(--muted); font-size: 12px; }
.chip .x {
  width: 22px; height: 22px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #1a2230; border: 1px solid #2a3750; cursor: pointer;
}
.chip .x:hover { background: #232f45; }

/* Progress */
.progress { margin-top: 12px; }
.progress__label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.progress__bar { width: 100%; height: 8px; background: #0f141b; border-radius: 999px; overflow: hidden; border: 1px solid #2a3750; }
#progressBar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 999px; }

/* Liste */
.list { list-style: none; padding: 0; margin: 0; }
.list li { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-bottom: 1px solid #16202f; }
.list li:hover { background: rgba(255,255,255,0.03); }
.list .name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list .size { width: 92px; text-align: right; color: var(--muted); font-size: 12px; }
.list .btn { font-size: 12px; padding: 6px 10px; }
.list .btn.danger { background: #351520; border-color: #5d2233; }
.list .btn.danger:hover { background: #4a1d2c; }

/* Empty */
.empty { text-align: center; color: var(--muted); padding: 16px; }

/* Modal */
.modal::backdrop { background: rgba(0,0,0,.65); }
.modal .modal__card {
  background: var(--panel); border: 1px solid var(--panel-bd);
  border-radius: 14px; padding: 12px; max-width: 90vw; width: 720px;
  margin: 8vh auto; color: var(--text);
}
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 10px; border-bottom: 1px solid #16202f; }
.modal__title { font-weight: 600; }
.modal__body { max-height: 70vh; overflow: auto; padding: 12px 8px 8px; }

/* Utility */
.space { margin: 10px 0 6px; }
code { background: #0f141b; padding: 0 6px; border-radius: 6px; border: 1px solid #2a3750; }

/* DZ highlight */
.dz-on { border-color: var(--accent) !important; color: var(--text) !important; background: rgba(124,156,255,0.06); }

/* Breadcrumbs */
.crumbs { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.crumbs .crumb {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background:#0f141b; border:1px solid #2a3750; color:var(--text);
  cursor:pointer; user-select:none;
}
.crumbs .crumb:hover { background:#16202f; }
.crumbs .sep { color: var(--muted); }
.folder-badge {
  display:inline-flex; align-items:center; gap:8px;
  background: rgba(124,156,255,0.14); color:#cfd8ff;
  border:1px solid #2a3750; padding:4px 10px; border-radius:999px; font-size:12px;
}

/* Statsbar */
.statsbar{
  display:flex; flex-wrap:wrap; gap:12px;
  justify-content: space-between;
  background:#0f141b; border:1px solid #2a3750;
  border-radius: 12px; padding:10px 12px; margin-bottom:12px;
}

/* Checkbox Spalte */
.chk { margin-right: 6px; }

/* Modal: dunkler Hintergrund, kein weißer Rand */
dialog.modal { background: transparent; padding: 0; border: 0; }
dialog.modal::backdrop { background: rgba(0,0,0,.6); }
.modal__card { background: #0b121a; color: #d7e0ea; }

/* Scrollbar in der Preview verstecken */
.preview pre {
  overflow: auto;

  /* Firefox */
  scrollbar-width: none;
  -ms-overflow-style: none; /* Internet Explorer & alte Edge */
}

/* Chrome, Brave, Edge, Safari */
.preview pre::-webkit-scrollbar {
  display: none;
}

/* Preview: Scrollbar unsichtbar, Scrollen bleibt möglich */
.modal__body{
  max-height: 70vh;          /* vertikales Limit für die Vorschau */
  overflow: auto;            /* scrollt der Body statt das Dialog-Fenster */
  scrollbar-width: none;     /* Firefox */
  -ms-overflow-style: none;  /* IE/alte Edge */
}
.modal__body::-webkit-scrollbar{ display: none; } /* Chrome/Brave/Edge/Safari */

/* Code-Block in der Preview */
.code-preview{
  white-space: pre;          /* keine Zeilenumbrüche erzwingen */
  overflow: auto;            /* bei langen Zeilen horizontal scrollen */
  max-width: 100%;
  background: #0f141b;
  color: #cfe2ff;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #2a3750;
  font-size: 12px;
  line-height: 1.4;

  /* Scrollbars verstecken */
  scrollbar-width: none;     /* Firefox */
  -ms-overflow-style: none;  /* IE/alte Edge */
}
.code-preview::-webkit-scrollbar{ display: none; } /* Chromium/WebKit */

/* Dialog selbst: keine Scrollbar anzeigen */
dialog.modal{
  /* bestehende Styles dürfen bleiben */
  overflow: hidden;               /* Dialog scrollt nicht */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/alte Edge */
}
dialog.modal::-webkit-scrollbar{   /* Chromium/WebKit (Chrome/Brave/Edge/Safari) */
  display: none;
}

/* Die Karte im Dialog begrenzen – Body scrollt, nicht der Dialog */
.modal__card{
  max-height: 80vh;               /* passt in Viewport */
  overflow: hidden;               /* keine extra Scrollbar */
  display: flex;
  flex-direction: column;
}
.modal__body{
  flex: 1;                         /* nimmt restliche Höhe */
  max-height: 70vh;                /* wie zuvor */
  overflow: auto;
}

/* ---------- Speedtest Layout ---------- */
.container { max-width: 1100px; margin: 0 auto; padding: 1.25rem; }

.panel {
  background: #0b1220;
  border: 1px solid #1b2540;
  border-radius: 14px;
  padding: 18px 18px 26px;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}

.panel .head{
  display:flex; align-items:center; justify-content:space-between;
  gap: 18px; margin-bottom: 12px;
}
.head .lat { text-align:center; color:#aab6cf; }
.head .lat strong{ display:block; font-size:1.05rem; color:#e8eefc; }
.go{
  width:120px; height:120px; border-radius:9999px;
  background:#38e1e1; color:#001018; font-weight:800; font-size:28px;
  border:none; box-shadow:0 0 28px rgba(56,225,225,.35); cursor:pointer;
}
.go:disabled{ opacity:.6; cursor:not-allowed; }

.unitbar{ display:flex; align-items:center; gap:.6rem; margin: 6px 0 12px; }
.unitbar select{ background:#0f1927; color:#e6f0ff; border:1px solid #22324a; border-radius:8px; padding:.45rem .6rem; }

.gauges{
  display:grid; grid-template-columns: 1fr 1fr; gap:18px;
}
.gauge-card{
  position:relative;
  background:#0f1927; border:1px solid #1b2a42;
  border-radius:16px; padding:10px;
  display:flex; align-items:center; justify-content:center;
}
.gauge-card canvas{ width:100%; height:auto; display:block; }

/* Readout INSIDE box (höher als vorher) */
.gauge-readout{
  position:absolute;
  left:0; right:0;
  bottom: 64px;     /* <- hier Höhe regeln (bei Bedarf feintunen) */
  display:flex; flex-direction:column; align-items:center;
  pointer-events:none;
}
/*
.gauge-label{
  color:#e9eefb; font-weight:700; font-size:20px;
  margin-bottom: 6px;
}
*/
.gauge-number{
  color:#e9eefb; font-weight:800; font-size:32px;
}
.gauge-number span#downUnit,
.gauge-number span#upUnit{
  font-size:16px; opacity:.7; margin-left:.35rem;
}

/* Fortschritt */
.progress{ position:relative; height:6px; background:#0d1626; border-radius:9999px; overflow:hidden; margin-top:8px; }
.progress .bar{ position:absolute; left:0; top:0; bottom:0; width:0%; background:#2c82ff; }
.progress .label{ margin-top:8px; color:#aab6cf; font-size:.95rem; }

/* Topbar & Sheet – (vereinfachte Varianten, falls noch nicht vorhanden) */
.topbar{ position:sticky; top:0; z-index:20; background:#0b1220; border-bottom:1px solid #1b2540; }
.topbar_inner{ max-width:1100px; margin:0 auto; padding:.65rem 1.25rem; display:flex; align-items:center; justify-content:space-between; }
.icon-btn{ width:38px; height:38px; display:grid; place-items:center; border:1px solid #23344b; background:#0f1927; border-radius:10px; cursor:pointer; }
.icon-btn .burger{ width:18px; height:2px; background:#cfe2ff; display:block; margin:2px 0; }
.brand{ color:#e8eefc; font-weight:800; letter-spacing:.3px; }
.brand .accent{ color:#6aa8ff; }
.topnav a{ color:#9fb3d9; text-decoration:none; padding:.35rem .55rem; border-radius:8px; }
.topnav a:hover{ background:#0f1a2e; }

.sheet{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:flex-start; justify-content:center; padding:20vh 1rem 1rem; }
.sheet.hidden{ display:none; }
.sheet_wrap{ width:min(980px,96vw); background:#0f1927; border:1px solid #1b2a42; border-radius:18px; padding:16px; }
.sheet_title{ color:#cfe2ff; margin-bottom:.75rem; }
.grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.card{ display:block; padding:16px; background:#0b1422; border:1px solid #192640; border-radius:14px; color:#cfe2ff; text-decoration:none; }
.card:hover{ background:#0d182a; border-color:#274170; }
.card_title{ font-weight:700; }
.card_sub{ opacity:.75; font-size:.9rem; margin-top:2px; }

body.dark{ color:#cfe2ff; background:#0a0f1c; }
h1{ font-size:1.6rem; margin: 12px 0; }

.gauge-label {
  position: absolute;
  bottom: 35px; /* etwas nach unten verschoben */
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}

.gauge-value {
  position: absolute;
  bottom: 10px; /* Zahl bleibt unten */
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.8rem; /* kleiner gemacht */
  font-weight: bold;
  text-align: center;
}

/* Mobile Anpassung */
@media (max-width: 768px) {
  .gauge-label {
    font-size: 0.9rem; /* kleiner auf Handy */
    bottom: 28px;
  }

  .gauge-value {
    font-size: 1.2rem; /* Zahl kleiner auf Handy */
    bottom: 8px;
  }
}