:root {
    --bg: #09090b;
    --card-bg: rgba(24, 24, 27, 0.8);
    --primary: #3b82f6;
    --text: #fafafa;
    --text-light: #a1a1aa;
    --online: #22c55e;
    --offline: #ef4444;
    --border: rgba(39, 39, 42, 0.5);
}

body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background-color: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    justify-content: center;
}

.container { width: 100%; max-width: 1000px; padding: 40px 20px; }

header { text-align: center; margin-bottom: 40px; }
.main-logo { width: 100%; max-width: 600px; height: auto; border-radius: 12px; margin-bottom: 20px; }

h1 { font-weight: 600; margin: 0; letter-spacing: -0.02em; }
p { color: var(--text-light); margin-top: 5px; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }

.card {
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    transition: 0.2s;
}

.card:hover { border-color: var(--primary); transform: translateY(-2px); }

.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.status-badge { padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.status-badge.online { background: rgba(34, 197, 94, 0.1); color: var(--online); }
.status-badge.offline { background: rgba(239, 68, 68, 0.1); color: var(--offline); }

.stats-row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 14px; border-bottom: 1px solid var(--border); padding-bottom: 5px; }
.stats-label { color: var(--text-light); }
.stats-value { font-weight: 500; }

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
button { border: none; padding: 12px; border-radius: 10px; cursor: pointer; font-weight: 600; font-family: inherit; transition: 0.2s; }

.btn-start { background: var(--primary); color: white; }
.btn-stop { background: #27272a; color: var(--offline); }
.btn-restart { grid-column: span 2; background: #27272a; color: white; }
.btn-secondary { background: #27272a; color: white; margin-top: 40px; border: 1px solid var(--border); }
button:hover { filter: brightness(1.2); }

.info-text { font-size: 12px; color: var(--text-light); text-align: center; margin-top: 20px; font-style: italic; }

/* Modal / Login Fenster */
.modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8); display: none; justify-content: center; align-items: center; z-index: 1000;
}
.modal-content {
    background: #18181b; padding: 30px; border-radius: 20px; border: 1px solid var(--primary);
    width: 100%; max-width: 350px; text-align: center;
}
.modal-content input {
    width: 100%; padding: 12px; margin-bottom: 15px; border-radius: 8px;
    border: 1px solid var(--border); background: #09090b; color: white; box-sizing: border-box;
}
.bottom-controls { display: flex; align-items: center; gap: 20px; justify-content: flex-start; }
.btn-link { color: var(--text-light); text-decoration: none; font-size: 14px; margin-top: 40px; }

/* Loader */
.loader-overlay { position: fixed; top:0; left:0; width:100%; height:100%; background: var(--bg); z-index: 2000; display: flex; justify-content: center; align-items: center; }
.spinner { width: 40px; height: 40px; border: 3px solid var(--border); border-top: 3px solid var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Neu hinzufügen für die IP Box */
.ip-box {
    background: rgba(0, 0, 0, 0.2);
    border: 1px dashed var(--border);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 15px;
    cursor: pointer;
    text-align: center;
    transition: 0.2s;
}

.ip-box:hover {
    background: rgba(59, 130, 246, 0.1);
    border-color: var(--primary);
}

.ip-value {
    font-family: 'Courier New', monospace;
    color: var(--primary);
    font-weight: bold;
    font-size: 1.1em;
    margin-top: 4px;
}

.btn-amp {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white !important;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: bold;
    display: inline-block;
}

/* Platzhalter für Karten ohne IP-Box (Motorenstadt) */
.ip-spacer {
    height: 62px; /* Entspricht der Höhe der ip-box inklusive Margins */
    margin-bottom: 15px;
}

/* Ausrichtung der unteren Button-Leiste */
.bottom-controls {
    display: flex;
    justify-content: center;
    align-items: center; /* Bringt alles auf eine horizontale Linie */
    gap: 15px;
    margin-top: 50px;
    width: 100%;
}

/* Falls der Admin-Button ein <button> ist und der Dashboard-Button ein <a>, 
   stellen wir sicher, dass sie optisch gleich hoch wirken */
.btn-amp, .btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px; /* Einheitliche Höhe */
    padding: 0 25px;
    margin: 0; /* Entfernt ungewollte Abstände */
    box-sizing: border-box;
}