:root{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color-scheme:dark;
  --bg:#07111b;
  --surface:rgba(8,20,31,.88);
  --surface-strong:rgba(5,15,24,.95);
  --border:rgba(123,180,222,.23);
  --text:#e8f1f7;
  --muted:#9fb0bd;
  --accent:#4aa8ff;
  --accent2:#5ddb79;
  --shadow:0 8px 30px rgba(0,0,0,.32);
  --overlay:rgba(2,9,15,.80);
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#eaf0f4;
  --surface:rgba(255,255,255,.92);
  --surface-strong:rgba(255,255,255,.97);
  --border:rgba(45,80,105,.18);
  --text:#17232d;
  --muted:#5f707c;
  --accent:#176fb6;
  --accent2:#287f42;
  --shadow:0 8px 24px rgba(20,40,55,.12);
  --overlay:rgba(235,243,248,.76);
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  background:
    linear-gradient(var(--overlay),var(--overlay)),
    url('assets/meshday-bg.png') center top / cover fixed no-repeat,
    var(--bg);
}
.wrap{max-width:1200px;margin:auto;padding:24px}
header{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:20px}
.header-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
h1{margin:0;font-size:2rem;letter-spacing:.02em;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.sub{margin:.35rem 0;color:var(--muted)}
.clock{font-weight:700;white-space:nowrap}
.theme-toggle{
  appearance:none;border:1px solid var(--border);border-radius:999px;padding:8px 12px;
  color:var(--text);background:var(--surface);font:inherit;font-weight:700;cursor:pointer;
  box-shadow:var(--shadow);backdrop-filter:blur(8px)
}
.theme-toggle:hover{border-color:var(--accent)}
.countdown,.panel,.cards article,.alert{
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--shadow);backdrop-filter:blur(9px)
}
.countdown{padding:18px 22px;margin-bottom:18px;display:flex;justify-content:space-between;gap:20px;align-items:center}
.countdown span{color:var(--muted)}
.countdown strong{font-size:1.5rem;color:var(--accent)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.cards article{padding:18px;position:relative;overflow:hidden}
.cards article::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.cards article:nth-child(2)::before{background:var(--accent2)}
.cards span{display:block;color:var(--muted);font-size:.9rem}
.cards strong{display:block;font-size:2rem;margin-top:6px}
.panel{padding:18px}.panel h2{margin-top:0}.tablewrap{overflow:auto;border-radius:10px}
table{width:100%;border-collapse:collapse;background:rgba(0,0,0,.08)}
th,td{padding:10px 8px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
th{font-size:.85rem;color:var(--muted);background:var(--surface-strong);position:sticky;top:0}
tbody tr:hover{background:rgba(74,168,255,.08)}
.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.empty{text-align:center;color:var(--muted);padding:28px}
.alert{padding:14px 18px;margin-bottom:18px;border-color:#d66;color:#ffdede}
.refresh-note{margin-top:12px;text-align:right;color:var(--muted);font-size:.8rem}
@media(max-width:800px){
  .cards{grid-template-columns:repeat(2,1fr)}
  header{display:block}.header-right{justify-content:flex-start;margin-top:10px}
  .countdown{display:block}.countdown strong{display:block;margin-top:6px}
}
@media(max-width:480px){.cards{grid-template-columns:1fr}.wrap{padding:12px}}

.viewtabs{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.viewtabs a{display:inline-block;padding:10px 14px;border-radius:10px;text-decoration:none;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08);color:inherit}
.viewtabs a.active{font-weight:700;background:rgba(255,255,255,.18)}
.callsign-list{display:flex;flex-wrap:wrap;gap:10px}
.callsign-chip{display:inline-flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.callsign-chip small{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;opacity:.7}
.map{height:520px;border-radius:12px;overflow:hidden}
.map-note{opacity:.75;font-size:.9rem}

.test-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.test-actions form{margin:0}
.test-actions button{padding:10px 14px;border:1px solid rgba(255,255,255,.18);border-radius:10px;background:rgba(255,255,255,.1);color:inherit;cursor:pointer}
.test-actions button:hover{background:rgba(255,255,255,.18)}


.top-action-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
  color:inherit;
  text-decoration:none;
  font-size:.9rem;
  line-height:1;
}
.top-action-link:hover{background:rgba(255,255,255,.16)}

.node-link{color:inherit;text-decoration:underline;text-underline-offset:2px}
.node-link:hover{text-decoration-thickness:2px}

.meshday-ended{border-style:dashed}
.meshday-ended span{font-weight:700}

/* MeshdayV4 4.7.23 - Informationen */
.information-modal {
  display:none;
  position:fixed;
  inset:0;
  z-index:99999;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.information-modal:target { display:flex; }

.information-backdrop {
  position:absolute;
  inset:0;
  z-index:0;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(3px);
}

.information-dialog {
  position:relative;
  z-index:1;
  width:min(700px,calc(100vw - 40px));
  max-height:min(80vh,700px);
  overflow:auto;
  color:var(--text);
  background:var(--surface-strong);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 20px 70px rgba(0,0,0,.55);
  backdrop-filter:blur(10px);
}

.information-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:18px 22px;
  border-bottom:1px solid var(--border);
}
.information-header h2 { margin:0; }

.information-close {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  flex:0 0 36px;
  border-radius:50%;
  color:var(--text);
  text-decoration:none;
  font-size:30px;
  line-height:1;
}
.information-close:hover { background:rgba(255,255,255,.10); }

.information-content {
  padding:22px;
  line-height:1.65;
  overflow-wrap:anywhere;
}

@media(max-width:480px) {
  .information-modal { padding:12px; }
  .information-dialog { width:calc(100vw - 24px); max-height:85vh; }
  .information-header,.information-content { padding:16px; }
}