:root {

    --wine: #710000;

    --orange: #EE6730;

    --sky: #43B5E7;

    --bg-primary: #071226;

    --bg-secondary: #0B1730;

    --bg-card: #0E1E3D;

    --text-primary: #F8FAFC;

    --text-secondary: #CBD5E1;

    --border: rgba(67, 181, 231, 0.14);

}

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

body {

    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

    background:
        radial-gradient(
            circle at top,
            rgba(67, 181, 231, 0.08) 0%,
            transparent 40%
        ),
        linear-gradient(
            180deg,
            var(--bg-primary) 0%,
            #050B16 100%
        );

    min-height: 100vh;

    color: var(--text-primary);

}

.auth-page {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 24px;

}

.auth-card {

    width: 100%;

    max-width: 460px;

    background: linear-gradient(
        180deg,
        var(--bg-card) 0%,
        #0A1730 100%
    );

    border: 1px solid var(--border);

    border-radius: 28px;

    padding: 36px 32px;

    box-shadow:
        0 24px 48px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255,255,255,0.03);

}

.auth-brand {

    text-align: center;

    margin-bottom: 32px;

}

.auth-logo {

    width: 72px;

    height: 72px;

    margin: 0 auto 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2.2rem;

    border-radius: 20px;

    background: linear-gradient(
        135deg,
        var(--orange),
        #c74a17
    );

    box-shadow:
        0 10px 20px rgba(238, 103, 48, 0.35);

}

.auth-brand h1 {

    font-size: 1.6rem;

    font-weight: 800;

    margin-bottom: 8px;

}

.auth-brand p {

    color: var(--text-secondary);

    font-size: 0.95rem;

}

.auth-form {

    display: flex;

    flex-direction: column;

    gap: 18px;

}

.form-group {

    display: flex;

    flex-direction: column;

    gap: 8px;

}

.form-group label {

    font-size: 0.9rem;

    font-weight: 700;

    color: var(--sky);

}

.form-group input,
.form-group select {

    padding: 14px 16px;

    border-radius: 14px;

    border: 1px solid rgba(255,255,255,0.08);

    background: rgba(255,255,255,0.04);

    color: var(--text-primary);

    font-size: 0.95rem;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}

.form-group input::placeholder {

    color: #94A3B8;

}

.form-group input:focus {

    border-color: var(--sky);

    box-shadow:
        0 0 0 3px rgba(67, 181, 231, 0.15);

}

.form-group select option {

    background: var(--bg-card);

    color: var(--text-primary);

}

.auth-button {

    margin-top: 8px;

    padding: 14px 18px;

    border: none;

    border-radius: 16px;

    background: linear-gradient(
        135deg,
        var(--orange),
        #d8511d
    );

    color: white;

    font-size: 1rem;

    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}

.auth-button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 12px 24px rgba(238, 103, 48, 0.28);

}

.auth-footer {

    margin-top: 28px;

    text-align: center;

    color: var(--text-secondary);

    font-size: 0.92rem;

}

.auth-footer a {

    color: var(--sky);

    text-decoration: none;

    font-weight: 700;

}

.auth-footer a:hover {

    text-decoration: underline;

}

@media (max-width: 520px) {

    .auth-card {

        padding: 28px 22px;

    }

    .auth-brand h1 {

        font-size: 1.35rem;

    }

}

/* =====================================================
   MODAL
===================================================== */

.modal-overlay {

    position: fixed;

    inset: 0;

    background: rgba(2, 6, 23, 0.82);

    backdrop-filter: blur(8px);

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 24px;

    z-index: 1000;

    opacity: 1;

    transition: opacity 0.25s ease;

}

.modal-overlay.hidden {

    opacity: 0;

    pointer-events: none;

}

.modal-card {

    width: 100%;

    max-width: 420px;

    background: linear-gradient(
        180deg,
        var(--bg-card) 0%,
        #0A1730 100%
    );

    border: 1px solid rgba(67, 181, 231, 0.18);

    border-radius: 28px;

    padding: 36px 32px;

    text-align: center;

    box-shadow:
        0 28px 60px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255,255,255,0.03);

    animation: modalAppear 0.28s ease-out;

}

.modal-icon {

    width: 84px;

    height: 84px;

    margin: 0 auto 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2.6rem;

    border-radius: 24px;

    background: linear-gradient(
        135deg,
        var(--orange),
        #c74a17
    );

    box-shadow:
        0 14px 28px rgba(238, 103, 48, 0.32);

}

.modal-icon.success {

    background: linear-gradient(
        135deg,
        var(--orange),
        #c74a17
    );

}

.modal-icon.error {

    background: linear-gradient(
        135deg,
        #B91C1C,
        #7F1D1D
    );

}

.modal-icon.warning {

    background: linear-gradient(
        135deg,
        #D97706,
        #92400E
    );

}

.modal-card h2 {

    font-size: 1.55rem;

    font-weight: 800;

    margin-bottom: 14px;

}

.modal-card p {

    color: var(--text-secondary);

    line-height: 1.6;

    margin-bottom: 26px;

}

.modal-card strong {

    color: var(--text-primary);

}

.modal-button {

    width: 100%;

    padding: 14px 18px;

    border: none;

    border-radius: 16px;

    background: linear-gradient(
        135deg,
        var(--orange),
        #d8511d
    );

    color: white;

    font-size: 1rem;

    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}

.modal-button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 12px 24px rgba(238, 103, 48, 0.28);

}

@keyframes modalAppear {

    from {

        opacity: 0;

        transform: translateY(16px) scale(0.96);

    }

    to {

        opacity: 1;

        transform: translateY(0) scale(1);

    }

}