@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Sora:wght@600;700;800&display=swap');

:root {
    --gold: #f5c518;
    --gold-grad: linear-gradient(135deg, #ffd95a 0%, #f5c518 45%, #e0a008 100%);
    --card: #17171e;
    --bg-2: #0f0f14;
    --border: #2a2a35;
    --text: #f3f3f6;
    --text-dim: #9a9aa7;
    --text-mut: #6c6c7a;
}

* { font-family: 'Poppins', -apple-system, 'Segoe UI', sans-serif; box-sizing: border-box; }

body { margin: 0; }

.login {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(900px 600px at 15% 20%, rgba(245, 197, 24, 0.14), transparent 55%),
        radial-gradient(700px 500px at 85% 85%, rgba(245, 197, 24, 0.10), transparent 50%),
        #0b0b0e;
    position: relative;
    overflow: hidden;
}

.login::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(245, 197, 24, 0.07) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: radial-gradient(circle at 50% 40%, #000, transparent 75%);
    pointer-events: none;
}

.login-container { flex: 0 1 400px; position: relative; z-index: 2; }

.login-header {
    max-width: 400px;
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .login-header .brand {
        font-family: 'Sora', sans-serif;
        font-size: 34px;
        font-weight: 800;
        letter-spacing: .5px;
        text-align: center;
        background: var(--gold-grad);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        filter: drop-shadow(0 4px 20px rgba(245, 197, 24, 0.35));
    }

.login-body .login-content {
    position: relative;
    padding: 34px 30px;
    background: linear-gradient(180deg, rgba(27, 27, 35, 0.94) 0%, rgba(20, 20, 26, 0.94) 100%);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 22px;
    max-width: 400px;
    margin: 0 auto;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 6px rgba(0, 0, 0, 0.4), 0 34px 80px -20px rgba(0, 0, 0, 0.85);
}
    .login-body .login-content::before {
        content: "";
        position: absolute;
        top: 0; left: 10%; right: 10%;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(245, 197, 24, 0.45), transparent);
        pointer-events: none;
    }

    .login-body .login-content h1 {
        font-family: 'Sora', sans-serif;
        font-size: 24px;
        font-weight: 700;
        text-align: center;
        width: 100%;
        display: block;
        padding-bottom: 24px;
        color: var(--text);
        margin: 0;
    }

    .login-body .login-content div { position: relative; clear: both; margin-bottom: 14px; }

        .login-body .login-content div i {
            position: absolute;
            top: 16px;
            left: 18px;
            font-size: 14px;
            color: var(--gold);
        }

        .login-body .login-content div input {
            color: var(--text);
            background: var(--bg-2);
            border: 1px solid var(--border);
            padding: 0 16px 0 46px;
            height: 50px;
            font-size: 14px;
            display: block;
            width: 100%;
            border-radius: 12px;
            outline: none;
            box-sizing: border-box;
            transition: .2s;
        }

            .login-body .login-content div input::placeholder { color: var(--text-mut); }

            .login-body .login-content div input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.18); }

        .login-body .login-content div.row { margin-bottom: 8px; }
            .login-body .login-content div.row label { font-size: 12.5px; color: var(--text-dim); font-weight: 600; }
            .login-body .login-content div.row input { padding: 0 14px; }

        .login-body .login-content div input[type="submit"] {
            background: var(--gold-grad);
            color: #1a1a1a;
            font-weight: 700;
            font-size: 15px;
            cursor: pointer;
            padding: 0 !important;
            border: none;
            box-shadow: 0 10px 28px rgba(245, 197, 24, 0.3) !important;
            transition: .2s;
            margin-top: 6px;
        }
            .login-body .login-content div input[type="submit"]:hover { transform: translateY(-2px); }

        .login-body .login-content div span, .login-body .login-content div ul li { font-size: 12.5px; color: var(--gold-soft, #ff6b66); display: inline-block; }
        .login-body .login-content div ul { list-style: none; padding: 0; margin: 0 0 10px; }
            .login-body .login-content div.text-success ul li { color: #3ad994; }

    .login-body .login-content a {
        color: var(--text-dim);
        float: right;
        font-size: 13.5px;
        text-decoration: none;
        padding-bottom: 14px;
        transition: .2s;
    }
        .login-body .login-content a:hover { color: var(--gold); }
        .login-body .login-content a.left { float: left; }

    .login-body .login-content .login-privacidade { clear: both; text-align: center; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--border); }
        .login-body .login-content .login-privacidade a { float: none; font-size: 12.5px; color: var(--text-mut); }
        .login-body .login-content .login-privacidade a:hover { color: var(--gold); }
        .login-body .login-content .login-privacidade i { margin-right: 4px; }
    .login-body .login-content .login-app { clear: both; text-align: center; margin: 18px 0 0; }
        .login-body .login-content .login-app[hidden] { display: none; }
        .login-body .login-content .login-app a { float: none; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--gold); border: 1px solid var(--gold); border-radius: 999px; padding: 9px 18px; text-decoration: none; }
        .login-body .login-content .login-app a:hover { background: var(--gold); color: #1a1a1a; }

/* ===== Login com o Google (padrão visual do Google para fundo escuro) ===== */
.login-body .login-content a.btn-google {
    float: none; display: flex; align-items: center; justify-content: center; gap: 12px;
    width: 100%; height: 50px; padding: 0 16px; margin: 0;
    background: #131314; color: #e3e3e3; border: 1px solid #8e918f; border-radius: 12px;
    font-family: 'Roboto', 'Poppins', sans-serif; font-size: 14.5px; font-weight: 500; letter-spacing: .2px;
    text-decoration: none; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.7);
    transition: background .2s, border-color .2s, transform .2s;
}
    .login-body .login-content a.btn-google:hover { background: #1f1f21; border-color: #c4c7c5; color: #fff; transform: translateY(-1px); }
    .login-body .login-content a.btn-google svg { flex-shrink: 0; }
.login-body .login-content .google-separador { clear: both; display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--text-mut); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
    .login-body .login-content .google-separador::before, .login-body .login-content .google-separador::after { content: ""; flex: 1; height: 1px; background: var(--border); }
    .login-body .login-content .google-separador span { color: var(--text-mut); font-size: 11.5px; display: inline; }
.login-body .login-content .google-nota { text-align: center; color: var(--text-mut); font-size: 12px; margin: 8px 0 0; }
.login-body .login-content .google-aviso { clear: both; text-align: center; color: #ff8f8b; font-size: 12.5px; margin: 14px 0 0; }
.login-body .login-content .google-topo { margin-bottom: 4px; }
.login-body .login-content .google-conta { display: flex; align-items: center; justify-content: center; gap: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; }
    .login-body .login-content .google-conta p { margin: 0; color: var(--text-dim); font-size: 13px; }
    .login-body .login-content .google-conta b { color: var(--text); }
.login-body .login-content .campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 0; }
    .login-body .login-content .campos-2 > div { margin-bottom: 8px; }
.login-body .login-content form.completar-cadastro div.row input { padding: 0 14px; height: 46px; }
.login-body .login-content div.row label .obrigatorio { display: inline-block; margin-left: 7px; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; line-height: 1; color: #ff6b66; vertical-align: 1px; white-space: nowrap; }
    .login-body .login-content div.row:has(input[readonly]) label .obrigatorio { display: none; }
.login-body .login-content small.cep-aviso { display: block; font-size: 12px; color: var(--text-dim); margin-top: 5px; }
    .login-body .login-content small.cep-aviso:empty { display: none; }
    .login-body .login-content small.cep-aviso.erro { color: #ff6b66; }
.login-body .login-content a.de-link-inline { float: none; padding: 0; color: var(--gold); font-size: inherit; }
@media (max-width: 480px) { .login-body .login-content .campos-2 { grid-template-columns: 1fr; gap: 0; } }