:root {
  --bg: #111827;
  --panel: #0b1220;
  --text: #e6eef8;
  --muted: #9aa7b3;
  --accent: #3b82f6;
  --danger: #ef4444;
  --radius: 8px;
  --online: #22c55e;
  --offline: #ef4444;
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; font-family:Inter, Arial, sans-serif; background:var(--bg); color:var(--text);}
.root { width:520px; max-width:520px; padding:12px; }

header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
header h1 { font-size:16px; margin:0; }
header .actions button { background:transparent; border:1px solid var(--muted); color:var(--text); padding:4px 8px; border-radius:6px; cursor:pointer; }

.main { 
  display:flex; 
  gap:12px; 
  position: relative;
}

.server-list { 
  width:45%; 
  background:var(--panel); 
  padding:8px; 
  border-radius:var(--radius);
  flex-shrink: 0; 
}

.detail { 
  flex:1; 
  background:var(--panel); 
  padding:8px; 
  border-radius:var(--radius); 
  min-height:220px;
  transition: all 0.3s ease; 
}

.detail.full-width {
  width: 100%;
  flex: 1 1 100%;
}

.add-form { display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.add-form input { padding:6px 8px; border-radius:6px; border:1px solid #21303b; background:#071019; color:var(--text); }
.add-form button { padding:6px 8px; border-radius:6px; border:none; background:var(--accent); color:white; cursor:pointer; }

#serversContainer { list-style:none; margin:0; padding:0; max-height:260px; overflow:auto; }
.server-item { 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  padding:6px; 
  margin-bottom:6px; 
  border-radius:6px; 
  cursor:pointer; 
  background: rgba(255,255,255,0.02);
  transition: background 0.2s ease;
}

.server-item:hover { background: rgba(255,255,255,0.05); }

.server-item .meta { display:flex; flex-direction:column; }
.server-item .meta .name { font-weight:600; }
.server-item .meta .url { font-size:12px; color:var(--muted); }
.server-item .status-bubble { 
  font-size:12px; 
  padding:3px 6px; 
  border-radius:999px; 
  color:#fff;
  transition: background-color 0.3s ease; 
}

.placeholder { color:var(--muted); padding:12px; }
.hidden { display:none; }

/* --- Detail Header (Zeile 1) --- */
.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.server-identity h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
}

.server-url {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}

.status-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

/* --- Pulsierender Punkt Animation --- */
.pulsing-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--offline); /* Standard Offline Rot */
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    animation: pulse-red 2s infinite;
}

.pulsing-dot.online {
    background-color: var(--online); /* Online Grün */
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* --- Detail Stats (Zeile 2) --- */
.detail-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255,255,255,0.05);
    padding: 8px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-size: 13px;
}

/* ---------------------------------- */

.playerList { 
  list-style:none; 
  padding-left:16px; 
  max-height:140px; 
  overflow:auto; 
  margin:6px 0; 
  display:flex; 
  flex-wrap:wrap; 
  gap:8px; 
}

.playerList li { 
  display:flex; 
  align-items:center; 
  gap:4px; 
  font-size:13px; 
  color:var(--text); 
}

.player-avatar { 
  width:24px; 
  height:24px; 
  border-radius:4px;
  transition: transform 0.2s ease;
}

.player-avatar:hover { transform: scale(1.1); }

.detailButtons { 
  display:flex; 
  gap:8px; 
  margin-top:8px;
  transition: opacity 0.3s ease; 
}

.detailButtons button { 
  padding:6px 8px; 
  border-radius:6px; 
  border:none; 
  cursor:pointer;
  transition: opacity 0.2s ease, transform 0.1s ease;
}

.detailButtons button:hover { opacity: 0.9; transform: translateY(-1px); }
.detailButtons button:active { transform: translateY(0); }

#btnEdit { background: #f59e0b; color:#000; }
#btnDelete { background: var(--danger); color:#fff; }

#serversContainer::-webkit-scrollbar,
.playerList::-webkit-scrollbar {
  width: 6px;
}

#serversContainer::-webkit-scrollbar-track,
.playerList::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.05);
  border-radius: 3px;
}

#serversContainer::-webkit-scrollbar-thumb,
.playerList::-webkit-scrollbar-thumb {
  background: var(--muted);
  border-radius: 3px;
}

#serversContainer::-webkit-scrollbar-thumb:hover,
.playerList::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}