@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 {
    padding: 34px 30px;
    background: rgba(23, 23, 30, 0.9);
    backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    border-radius: 20px;
    max-width: 400px;
    margin: 0 auto;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

    .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; }