:root {
    color-scheme: dark;
    font-family: 'Inter', system-ui, sans-serif;
}

html, body {
    background: #020617;
    color: #e2e8f0;
}

button, input, textarea, select {
    font: inherit;
}

.alert {
    position: relative;
    border-radius: 1rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.alert-close {
    position: absolute;
    top: 0.8rem;
    right: 1rem;
    background: none;
    border: none;
    color: inherit;
    font-size: 1.125rem;
    cursor: pointer;
}

.alert-info {
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.2);
    color: #c7f0ff;
}

.alert-success {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #d9f99d;
}

.alert-warning {
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: #fde68a;
}

.alert-danger {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fecaca;
}

@media (max-width: 768px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}