:root{
  --bg:#070a0e;
  --panel:rgba(11,18,26,.88);
  --border:rgba(28,42,58,.95);
  --text:#e8eef6;
  --muted:#a9b6c6;
  --link:#7cc4ff;

  /* readability upgrades */
  --shadow:0 10px 34px rgba(0,0,0,.55);
  --glow:0 0 0 1px rgba(255,255,255,.03) inset;

  --ok:#2d7a4a;
  --bad:#7a2d2d;

  --btn:#0d1722;
  --btnBorder:#22364c;
  --btnPrimaryBorder:rgba(124,196,255,.65);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}

/* Background image + dark overlay + blur */
.bg{
  position:fixed;
  inset:0;
  z-index:-2;
  background:url("./img/bg.png") center/cover no-repeat;
  filter: blur(6px);
  transform: scale(1.03);
}
.bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55); /* slightly darker for better contrast */
  z-index:-1;
}

.wrap{
  /* wider as requested */
  max-width:1320px;
  margin:0 auto;
  padding:28px 18px 44px;
}

.header{margin-bottom:16px}
h1{
  margin:0;
  font-size:36px;
  letter-spacing:.2px;
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
}
.subtitle{
  color:var(--muted);
  font-size:14px;
  line-height:1.4;
  margin-top:6px;
  text-shadow: 0 2px 14px rgba(0,0,0,.65);
}

a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}

.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
@media(min-width:900px){
  .grid{grid-template-columns:1fr 1fr}
}

.card{
  background:var(--panel);
  border:1px solid var(--border);
  padding:18px;
  box-shadow: var(--shadow), var(--glow);
}

.cardHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
}

h2{
  margin:0 0 10px;
  font-size:18px;
  letter-spacing:.2px;
}

.muted{color:var(--muted); font-size:14px}
.note{
  display:inline-block;
  margin-top:10px;
  padding:6px 10px;
  border:1px solid var(--border);
  background:rgba(7,10,14,.65);
  color:var(--muted);
  font-size:12px;
}

.steps{margin:0; padding-left:18px}
.steps li{margin:6px 0}

.btnRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:8px 0 2px;
}

.statusWrap{margin-top:14px}
.statusHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

/* stable table */
.tableWrap{
  position:relative;
  overflow:auto;
  border:1px solid var(--border);
  background:rgba(7,10,14,.55);
  min-height:240px; /* prevents layout jump while loading */
}

.tbl{
  width:100%;
  border-collapse:collapse;
  min-width:980px;
}
.tbl thead th{
  color:var(--muted);
  font-weight:700;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  border-bottom:1px solid var(--border);
  padding:12px 10px;
  text-align:left;
  background:rgba(7,10,14,.35);
}
.tbl tbody td{
  border-bottom:1px solid rgba(28,42,58,.85);
  padding:12px 10px;
  vertical-align:top;
}

.serverCell{white-space:nowrap}
.mapCell{max-width:520px; word-break:break-word}
.joinCell{width:92px; text-align:right}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}

.emptyRow{
  text-align:center;
  color:var(--muted);
  padding:16px 10px !important;
}

.pill{
  display:inline-flex;
  align-items:center;
  padding:2px 10px;
  font-size:12px;
  border:1px solid var(--border);
  background:rgba(7,10,14,.65);
  margin-right:10px;
}
.pill.ok{border-color:var(--ok); color:#cfeedd}
.pill.bad{border-color:var(--bad); color:#ffd6d6}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding:0 12px;
  background:var(--btn);
  border:1px solid var(--btnBorder);
  color:var(--text);
  font-size:13px;
  cursor:pointer;
  user-select:none;
  text-decoration:none;
}
.btn:hover{filter:brightness(1.10)}
.btn:active{transform:translateY(1px)}

.btnPrimary{
  border-color:var(--btnPrimaryBorder);
  box-shadow: 0 0 0 1px rgba(124,196,255,.12) inset;
}

.btnJoin{
  border-color:rgba(124,196,255,.55);
  box-shadow: 0 0 0 1px rgba(124,196,255,.10) inset;
}
.btnDisabled{
  opacity:.45;
  cursor:not-allowed;
  pointer-events:none;
}

.foot{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  color:var(--muted);
  font-size:13px;
}
.hint{
  padding:6px 10px;
  border:1px dashed rgba(124,196,255,.35);
  background:rgba(7,10,14,.35);
}
.error{
  color:#ffd6d6;
  border:1px solid var(--bad);
  padding:6px 10px;
  background:rgba(122,45,45,.15);
}

/* Loader overlay – keeps table visible */
.loadingOverlay{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:rgba(7,10,14,.35);
  backdrop-filter: blur(2px);
  z-index:2;
}
.loadingOverlay.show{display:flex}

.loader{
  width:16px;
  height:16px;
  border:2px solid rgba(124,196,255,.25);
  border-top-color: rgba(124,196,255,.95);
  border-radius:50%;
  animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.loadingText{color:var(--muted); font-size:13px}

.linksGrid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.versionBox{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border:1px solid var(--border);
  background:rgba(7,10,14,.65);
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
}
.vlabel{color:rgba(232,238,246,.85)}
.vsep{opacity:.55}

.howto {
  padding-left: 1.2em;
}

.howto li {
  margin-bottom: 0.9em;
}

.hint {
  font-size: 0.9em;
  opacity: 0.8;
  margin-top: 14px;
  margin-bottom: 14px;
}

.inline-link {
  display: inline-block;
  margin-top: 0.2em;
}

.note {
  margin-top: 0.8em;
  padding: 0.6em;
  border-left: 3px solid #c44;
  font-size: 0.9em;
}

.note.hint {
  padding: 14px 16px;
  line-height: 1.45;
}

/* Falls deine Note direkt unter Buttons sitzt: extra Abstand */
.actions + .note {
  margin-top: 16px;
}

/* Optional: p.muted im Card-Body etwas luftiger */
.card .muted {
  margin-top: 10px;
  margin-bottom: 10px;
}