* { box-sizing: border-box; }

        :root {
            --azul-noite: #083f88;
            --azul-real: #1576c4;
            --verde-brasil: #00843d;
            --amarelo-brasil: #ffdf00;
            --ouro: #caa65a;
            --ouro-claro: #f6dda0;
            --marfim: #fffaf0;
            --texto: #081326;
        }

        body {
            margin: 0;
            min-height: 100vh;
            width: 100%;
            max-width: 100%;
            color: var(--texto);
            font-family: Inter, "Segoe UI", Arial, sans-serif;
            background: #020712 !important;
            overflow-x: hidden;
        }

        body::before,
        body::after {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 0;
        }

        body::before {
            display: block;
            background: url("assets/login-brasil-fumaca.png?v=20260621-fumaca-hd") center center / cover fixed no-repeat;
            opacity: .66;
        }

        body::after {
            display: none;
        }

        .login-page {
            min-height: 100vh;
            min-height: 100svh;
            display: grid;
            place-items: center;
            padding: clamp(18px, 4vh, 42px) clamp(18px, 5vw, 54px);
            position: relative;
            z-index: 1;
        }

        .festival-shell {
            width: 100%;
            min-height: 100%;
            display: grid;
            place-items: center;
            overflow: visible;
            border: 0;
            border-radius: 0;
            background: transparent;
            backdrop-filter: none;
            box-shadow: none;
            position: relative;
        }

        .festival-shell::before,
        .festival-shell::after {
            display: none;
        }

        .festival-shell::before { left: 0; }

        .festival-shell::after {
            right: 0;
            transform: scaleX(-1);
        }

        .festival-header { display: none; }

        .festival-header::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background:
                linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent),
                radial-gradient(circle at 50% 10%, rgba(246,221,160,.18), transparent 34%);
            mix-blend-mode: screen;
        }

        .festival-title {
            margin: 0;
            align-self: center;
            font-family: Georgia, "Times New Roman", serif;
            font-size: clamp(2rem, 3.4vw, 3rem);
            font-weight: 900;
            color: #fff2b8;
            letter-spacing: 0;
            line-height: 1;
            position: relative;
            z-index: 2;
            background: linear-gradient(180deg, #fffbe8 0%, #f8e7a8 22%, #d4af37 54%, #fff0b7 72%, #9b7424 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            -webkit-text-stroke: .45px rgba(255,255,255,.30);
            text-shadow:
                0 1px 0 rgba(120,77,13,.74),
                0 2px 0 rgba(58,37,7,.42),
                0 10px 22px rgba(0,0,0,.48),
                0 0 26px rgba(255,223,0,.34);
        }

        .festival-messages {
            min-height: 58px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: clamp(12px, 3vw, 28px);
            padding: 0 clamp(22px, 6vw, 140px) 18px;
            position: relative;
            z-index: 2;
        }

        .flag-mark {
            position: relative;
            display: block;
            flex: 0 0 auto;
            filter: drop-shadow(0 13px 18px rgba(0,0,0,.34));
        }

        .flag-diamond {
            width: clamp(70px, 9vw, 104px);
            height: clamp(44px, 5vw, 58px);
            border-radius: 8px;
            background:
                linear-gradient(135deg, rgba(255,255,255,.30), transparent 36%),
                linear-gradient(145deg, #04a84f, #006d34);
            border: 1px solid rgba(255,255,255,.26);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
        }

        .flag-diamond::before {
            content: "";
            position: absolute;
            inset: 8px 18px;
            clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
            background: linear-gradient(135deg, #fff5a8, #ffdf00 54%, #cfae12);
        }

        .flag-diamond::after {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            width: 24px;
            height: 24px;
            transform: translate(-50%, -50%);
            border-radius: 999px;
            background: radial-gradient(circle at 38% 30%, #1b79d0, #083f88 72%);
            box-shadow: inset 0 0 0 2px rgba(255,255,255,.14);
        }

        .flag-orb {
            width: clamp(44px, 5vw, 58px);
            height: clamp(44px, 5vw, 58px);
            border-radius: 999px;
            background:
                linear-gradient(165deg, transparent 0 39%, rgba(255,255,255,.88) 40% 47%, transparent 48%),
                radial-gradient(circle at 50% 55%, #083f88 0 38%, transparent 39%),
                radial-gradient(circle at 35% 28%, #fff7c2, #ffdf00 49%, #bf9d14 100%);
            border: 2px solid rgba(255,255,255,.68);
            box-shadow:
                inset 0 2px 8px rgba(255,255,255,.72),
                inset 0 -9px 18px rgba(5,40,91,.22),
                0 0 0 6px rgba(255,255,255,.08);
        }

        .flag-stripes {
            width: clamp(70px, 9vw, 104px);
            height: clamp(44px, 5vw, 58px);
            border-radius: 8px;
            background:
                linear-gradient(180deg, rgba(255,255,255,.24), transparent 42%),
                linear-gradient(120deg, #00843d 0 34%, #ffdf00 34% 66%, #083f88 66% 100%);
            border: 1px solid rgba(255,255,255,.28);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
        }

        .flag-rope {
            position: absolute;
            left: 0;
            right: 0;
            top: 14px;
            height: 42px;
            display: flex;
            justify-content: space-around;
            padding: 0 22px;
            pointer-events: none;
        }

        .flag-rope::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 5px;
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(246,221,160,.92), transparent);
        }

        .flag-rope span {
            width: 24px;
            height: 34px;
            position: relative;
            clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 62%, 0 80%);
            border-radius: 3px 3px 1px 1px;
            box-shadow: inset 0 1px rgba(255,255,255,.34), 0 12px 18px -14px rgba(0,0,0,.8);
            transform: rotate(var(--r, 0deg));
        }

        .flag-rope span:nth-child(3n+1) { background: linear-gradient(145deg, #02a84c, #006c32); }
        .flag-rope span:nth-child(3n+2) { background: linear-gradient(145deg, #ffe66b, #d9a900); }
        .flag-rope span:nth-child(3n) { background: linear-gradient(145deg, #2b77bf, #0e5f9f); }
        .flag-rope span:nth-child(odd) { --r: -7deg; }
        .flag-rope span:nth-child(even) { --r: 6deg; }
        .flag-rope span:nth-child(5),
        .flag-rope span:nth-child(6),
        .flag-rope span:nth-child(7),
        .flag-rope span:nth-child(8) { visibility: hidden; }

        .festival-content {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            place-items: center;
            min-height: auto;
            padding: 0;
            width: 100%;
            position: relative;
            z-index: 1;
        }

        .side-decor { display: none; }

        .side-decor::before,
        .side-decor::after {
            position: absolute;
            color: rgba(202,166,90,.68);
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            text-shadow: 0 10px 22px rgba(0,0,0,.18);
        }

        .side-left::before {
            content: "\f091";
            top: 10px;
            left: 28%;
            font-size: 5.5rem;
        }

        .side-left::after {
            content: "\f1e3";
            bottom: 56px;
            left: 36%;
            font-size: 4.5rem;
            opacity: .42;
        }

        .side-right::before {
            content: "\f1e3";
            bottom: 64px;
            right: 28%;
            font-size: 4.4rem;
            color: rgba(21,118,196,.66);
        }

        .side-right::after {
            content: "\f091";
            top: 76px;
            right: 32%;
            font-size: 4.8rem;
            color: rgba(0,132,61,.50);
        }

        .login-container {
            width: min(100%, 420px);
            align-self: center;
            padding: 0;
            border-radius: 0;
            background: transparent;
            border: 0;
            box-shadow: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: visible;
        }

        .login-hero {
            width: 100%;
            min-height: auto;
            display: grid;
            place-items: center;
            padding: 0 0 18px;
            background: transparent;
            border-bottom: 0;
            position: relative;
        }

        .login-hero::before {
            display: none;
        }

        .login-hero::after { display: none; }

        .logo-row {
            text-align: center;
            margin: 0 0 2px;
            position: relative;
            z-index: 2;
            padding: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
        }

        .login-logo {
            width: min(360px, 82vw);
            max-height: 190px;
            object-fit: contain;
            filter:
                drop-shadow(0 0 11px rgba(255,255,255,.58))
                drop-shadow(0 7px 12px rgba(0,0,0,.30));
        }

        .login-body {
            width: 100%;
            padding: 0;
        }

        .welcome-message {
            margin: 0 0 7px;
            font-family: Georgia, "Times New Roman", serif;
            font-size: clamp(1.35rem, 3vw, 1.85rem);
            color: #fff8d9;
            text-align: center;
            letter-spacing: 0;
            text-transform: uppercase;
            text-shadow: 0 2px 12px rgba(0,0,0,.78), 0 0 24px rgba(255,223,0,.25);
        }

        .subtitle-message {
            margin: 0 0 22px;
            color: #f8fafc;
            text-align: center;
            font-size: .9rem;
            max-width: 100%;
            font-weight: 700;
            text-shadow: 0 2px 12px rgba(0,0,0,.78), 0 0 20px rgba(0,132,61,.24);
        }

        #loginForm { width: 100%; }

        .form-group {
            margin-bottom: 12px;
            width: 100%;
            text-align: left;
        }

        .form-group label {
            display: block;
            margin-bottom: 7px;
            color: #f8fafc;
            font-weight: 700;
            font-size: .88rem;
            text-shadow: 0 2px 10px rgba(0,0,0,.76);
        }

        .form-control {
            width: 100%;
            min-height: 52px;
            padding: 13px 14px;
            border: 2px solid rgba(255,255,255,.70);
            border-radius: 999px;
            color: #0f172a;
            background: rgba(255, 255, 255, .90);
            font: inherit;
            outline: none;
            transition: border-color .2s ease, box-shadow .2s ease;
            box-shadow: inset 0 0 0 1px rgba(202,166,90,.26), 0 16px 30px -18px rgba(0,0,0,.72);
        }

        .form-control:focus {
            border-color: #00843d;
            box-shadow: inset 0 0 0 2px rgba(255,223,0,.42), 0 0 0 4px rgba(0,132,61,.12);
        }

        .password-field { position: relative; }

        .password-field .form-control { padding-right: 48px; }

        .password-toggle {
            position: absolute;
            top: 50%;
            right: 12px;
            transform: translateY(-50%);
            border: 0;
            background: transparent;
            color: rgba(15, 23, 42, .70);
            cursor: pointer;
            width: 34px;
            height: 34px;
            display: grid;
            place-items: center;
            border-radius: 10px;
        }

        .password-toggle:hover { background: #f1f5f9; color: #0f172a; }

        .form-note {
            margin-top: 7px;
            color: #e2e8f0;
            font-size: .82rem;
            text-shadow: 0 2px 9px rgba(0,0,0,.70);
        }

        .login-button {
            width: 100%;
            min-height: 52px;
            border: 0;
            border-radius: 999px;
            color: #fff9db;
            background: linear-gradient(135deg, #08a34e 0%, #007ea0 42%, #2a7fc8 100%);
            font-weight: 800;
            font-size: 1.08rem;
            cursor: pointer;
            border: 2px solid rgba(255,223,0,.70);
            box-shadow: 0 16px 28px -18px rgba(0,39,118,.86), inset 0 1px rgba(255,255,255,.34);
        }

        .login-button:hover { filter: brightness(1.04); }
        .login-button:disabled { cursor: wait; opacity: .78; }

        .error-message {
            min-height: 22px;
            margin-top: 14px;
            color: #b91c1c;
            font-size: .9rem;
            font-weight: 600;
            overflow-wrap: anywhere;
        }

        @media (max-width: 640px) {
            .festival-header { min-height: 122px; }
            .festival-messages {
                gap: 10px;
                padding: 0 18px 14px;
            }
            .flag-diamond,
            .flag-stripes {
                width: 62px;
                height: 38px;
            }
            .flag-orb {
                width: 42px;
                height: 42px;
            }
            .festival-content {
                grid-template-columns: minmax(0, 1fr);
                min-height: auto;
                padding: 16px;
            }
            .side-decor { display: none; }
            .login-hero { min-height: 164px; }
            .login-body { padding: 30px 18px 0; }
        }

        .login-page .festival-shell {
            min-height: 100%;
        }

        .login-page .festival-header {
            min-height: 128px;
            background:
                radial-gradient(circle at 50% -24%, rgba(255,223,0,.36), transparent 38%),
                linear-gradient(180deg, rgba(30,128,208,.96) 0%, rgba(8,63,136,.96) 72%, rgba(3,22,49,.94) 100%) !important;
        }

        .login-page .festival-title {
            color: #fff2b8 !important;
        }

        .login-page .festival-content {
            padding: 0;
        }

        .login-page .login-container {
            max-width: 420px;
        }

        .login-page .login-hero {
            min-height: auto;
}

        .login-page .login-body {
            padding-top: 26px;
        }

        .login-page .welcome-message {
            font-size: clamp(1.24rem, 2.1vw, 1.62rem);
            line-height: 1.16;
            overflow-wrap: anywhere;
        }

        .login-page .subtitle-message {
            line-height: 1.45;
            overflow-wrap: anywhere;
        }

        .login-page .form-group {
            margin-bottom: 14px;
        }

        .login-page .form-control,
        .login-page .login-button {
            min-height: 48px;
        }

        @media (max-width: 640px) {
            body {
                background: #020712 !important;
            }
            .login-page {
                padding: 12px;
                justify-items: center;
                overflow-x: hidden;
            }
            .login-page .festival-shell {
                width: calc(100svw - 24px);
                max-width: calc(100svw - 24px);
                min-height: calc(100svh - 24px);
            }
            .login-page .festival-shell::before,
            .login-page .festival-shell::after {
                display: none;
            }
            .login-page .festival-header {
                min-height: 104px;
            }
            .login-page .festival-title {
                font-size: 1.38rem;
            }
            .login-page .flag-rope {
                display: none;
            }
            .login-page .festival-content {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 14px 10px;
                width: 100%;
                min-width: 0;
            }
            .login-page .login-container {
                width: min(100%, 300px);
                max-width: calc(100svw - 56px);
                min-width: 0;
                margin-left: auto;
                margin-right: auto;
            }
            .login-page .login-body,
            .login-page #loginForm,
            .login-page .form-group,
            .login-page .password-field,
            .login-page .form-control,
            .login-page .login-button {
                min-width: 0;
                max-width: 100%;
            }
            .login-page .subtitle-message {
                max-width: 24ch;
                margin-left: auto;
                margin-right: auto;
            }
            .login-page .welcome-message {
                max-width: 24ch;
                margin-left: auto;
                margin-right: auto;
                font-size: 1.12rem;
            }
            .login-page .login-logo {
                width: min(300px, 80vw);
                max-height: 160px;
            }
            .login-page .error-message {
                max-width: 28ch;
                margin-left: auto;
                margin-right: auto;
            }
        }