* {
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

.spicy-gradient {
    background:
        radial-gradient(circle at top left, rgba(234, 88, 12, 0.20), transparent 32%),
        radial-gradient(circle at bottom right, rgba(185, 28, 28, 0.22), transparent 30%),
        linear-gradient(135deg, #fff7ed 0%, #ffffff 55%, #ffedd5 100%);
}

.auth-panel {
    background:
        linear-gradient(135deg, rgba(127, 29, 29, 0.96), rgba(185, 28, 28, 0.92)),
        linear-gradient(135deg, #7f1d1d, #ea580c);
}

.input-control {
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 12px 14px;
    outline: none;
    background: #ffffff;
    transition: 0.2s ease;
}

.input-control:focus {
    border-color: #ea580c;
    box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.12);
}

.btn-primary {
    width: 100%;
    border: none;
    border-radius: 14px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #b91c1c, #ea580c);
    color: #ffffff;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s ease;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(185, 28, 28, 0.22);
}

.btn-outline {
    border: 1px solid rgba(185, 28, 28, 0.25);
    border-radius: 14px;
    padding: 10px 16px;
    color: #b91c1c;
    font-weight: 700;
    text-decoration: none;
    transition: 0.2s ease;
}

.btn-outline:hover {
    background: #fff1f2;
}