* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f3f6fa;
    color: #172033;
}

.top {
    background: #10243d;
    color: white;
    padding: 20px 5%;
    display: flex;
    justify-content: space-between;
}

.top a { color: white; }

.container {
    max-width: 1100px;
    margin: 35px auto;
    padding: 0 18px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin: 25px 0;
}

.card, .login {
    background: white;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 3px 15px rgba(0,0,0,.05);
}

.online { color: #13834a; font-weight: bold; }
.offline, .error { color: #d32f2f; }

pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: #f1f4f8;
    padding: 15px;
    border-radius: 8px;
}

.login {
    max-width: 400px;
    margin: 100px auto;
}

input {
    display: block;
    width: 100%;
    padding: 13px;
    margin: 20px 0;
    border: 1px solid #ccd4df;
    border-radius: 7px;
}

button, .button {
    display: inline-block;
    background: #1769d2;
    color: white;
    padding: 12px 20px;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
    text-decoration: none;
}

@media(max-width:650px) {
    .grid { grid-template-columns: 1fr; }
}