:root {
    color-scheme: light;
    --bg: #f0f2f5;
    --text: #1f2933;
    --container-bg: #ffffff;
    --shadow-1: rgba(0, 0, 0, 0.1);
    --shadow-2: rgba(0, 0, 0, 0.15);
    --pattern: url('data:image/svg+xml,%3Csvg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm13-56c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm43 6c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-1-48c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-45 80c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4z" fill="%23e0e0e0" fill-opacity="0.4" fill-rule="evenodd"/%3E%3C/svg%3E');
    --btn-bg: #50e3c2;
    --btn-shadow: rgba(80, 227, 194, 0.5);
    --toggle-bg: #ffffff;
    --toggle-border: #d1d9e0;
    --toggle-text: #1f2933;
}

body[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0e141b;
    --text: #eef2f6;
    --container-bg: #18222d;
    --shadow-1: rgba(0, 0, 0, 0.35);
    --shadow-2: rgba(0, 0, 0, 0.5);
    --pattern: url('data:image/svg+xml,%3Csvg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm13-56c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm43 6c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-1-48c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-45 80c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4z" fill="%231c2a38" fill-opacity="0.6" fill-rule="evenodd"/%3E%3C/svg%3E');
    --btn-bg: #2dd4bf;
    --btn-shadow: rgba(45, 212, 191, 0.45);
    --toggle-bg: #101823;
    --toggle-border: #2b3948;
    --toggle-text: #eef2f6;
}

body {
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: var(--bg);
    background-image: var(--pattern);
    color: var(--text);
}

.container {
    background-color: var(--container-bg);
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 10px 20px var(--shadow-1), 0 6px 6px var(--shadow-2);
    text-align: center;
}

h1 {
    margin-bottom: 2rem;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

.header h1 {
    margin: 0;
}

.theme-toggle {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    color: var(--toggle-text);
    background-color: var(--toggle-bg);
    border: 1px solid var(--toggle-border);
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 10px var(--shadow-1);
}

.theme-toggle:hover {
    transform: translateY(-1px);
}

.numbers-container {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.number {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    background-color: #4a90e2;
}

#generate-btn {
    padding: 0.8rem 2rem;
    font-size: 1rem;
    color: white;
    background-color: var(--btn-bg);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

#generate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px var(--btn-shadow);
}

@media (max-width: 600px) {
    .container {
        width: 90%;
    }
    .header {
        flex-direction: column;
    }
    .numbers-container {
        flex-wrap: wrap;
    }
    .number {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }
}