body {
    background-color: #0a0a12;
    color: #fff;
    font-family: 'Courier New', monospace;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

.container {
    width: 400px;
    padding: 2rem;
    border: 2px solid #00f3ff;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.3);
    background: rgba(10, 10, 18, 0.9);
}

.logo {
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: #00f3ff;
    margin-bottom: 2rem;
    text-shadow: 0 0 10px #00f3ff;
}

input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    background: #1a1a2e;
    border: 1px solid #00f3ff;
    color: #fff;
    border-radius: 5px;
    box-sizing: border-box;
}

.buttons {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

button {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s;
}

.btn-primary { background: #00f3ff; color: #000; }
.btn-secondary { background: transparent; border: 1px solid #00f3ff; color: #00f3ff; }
.btn-danger { background: #ff0055; color: #fff; width: 100%; margin-top: 20px; }

button:hover { transform: scale(1.05); box-shadow: 0 0 15px currentColor; }

.hidden { display: none; }
#message { text-align: center; margin-top: 10px; min-height: 20px; }

.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0; }
.stat-card { background: #1a1a2e; padding: 15px; border-radius: 5px; border: 1px solid #333; }
.stat-card h3 { margin: 0 0 10px 0; color: #00f3ff; font-size: 0.9rem; }
.stat-card p { margin: 5px 0; font-size: 0.8rem; color: #aaa; }