/* Extraído sem alterações de login.php */

        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

        :root {
            --red:       #c0392b;
            --red-dark:  #922b21;
            --red-glow:  rgba(192, 57, 43, 0.15);
            --bg:        #0f0c0c;
            --surface:   #1a1212;
            --surface2:  #221818;
            --border:    rgba(255,255,255,0.07);
            --text:      #f0ece8;
            --muted:     rgba(240,236,232,0.45);
            --success:   #27ae60;
            --warning:   #e67e22;
        }

        body {
            font-family: 'DM Sans', sans-serif;
            background-color: var(--bg);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            position: relative;
            overflow: hidden;
        }

        /* ── Padrão de fundo ── */
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            background-image:
                linear-gradient(rgba(192,57,43,0.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(192,57,43,0.04) 1px, transparent 1px);
            background-size: 48px 48px;
            pointer-events: none;
        }

        body::after {
            content: '';
            position: fixed;
            top: -30%;
            left: -20%;
            width: 60%;
            height: 70%;
            background: radial-gradient(ellipse, rgba(192,57,43,0.08) 0%, transparent 70%);
            pointer-events: none;
        }

        /* ── Layout dividido ── */
        .page {
            display: flex;
            width: 100%;
            max-width: 900px;
            min-height: 540px;
            border: 1px solid var(--border);
            border-radius: 20px;
            overflow: hidden;
            position: relative;
            z-index: 1;
        }

        /* ── Painel esquerdo (marca) ── */
        .brand-panel {
            width: 340px;
            flex-shrink: 0;
            background: var(--surface);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 48px 36px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .brand-panel::before {
            content: '';
            position: absolute;
            bottom: -80px;
            right: -80px;
            width: 260px;
            height: 260px;
            border-radius: 50%;
            border: 1px solid rgba(192,57,43,0.12);
        }

        .brand-panel::after {
            content: '';
            position: absolute;
            bottom: -120px;
            right: -120px;
            width: 360px;
            height: 360px;
            border-radius: 50%;
            border: 1px solid rgba(192,57,43,0.07);
        }

        .brand-icon {
            width: 72px;
            height: 72px;
            background: var(--red);
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 28px;
            position: relative;
        }

        .brand-icon i {
            font-size: 32px;
            color: #fff;
        }

        .brand-name {
            font-family: 'DM Serif Display', serif;
            font-size: 26px;
            color: var(--text);
            line-height: 1.2;
            margin-bottom: 12px;
        }

        .brand-desc {
            font-size: 13px;
            color: var(--muted);
            line-height: 1.7;
            max-width: 220px;
        }

        .brand-divider {
            width: 36px;
            height: 2px;
            background: var(--red);
            border-radius: 2px;
            margin: 20px auto;
        }

        .brand-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 12px;
            border: 1px solid rgba(192,57,43,0.3);
            border-radius: 20px;
            font-size: 11px;
            color: var(--red);
            margin-top: 8px;
        }

        .brand-badge i { font-size: 10px; }

        /* ── Painel direito (formulário) ── */
        .form-panel {
            flex: 1;
            background: var(--surface2);
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 48px 44px;
        }

        .form-header {
            margin-bottom: 32px;
        }

        .form-header h2 {
            font-size: 22px;
            font-weight: 500;
            color: var(--text);
            margin-bottom: 6px;
        }

        .form-header p {
            font-size: 13px;
            color: var(--muted);
        }

        /* ── Alertas ── */
        .alert {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 11px 14px;
            border-radius: 10px;
            font-size: 13px;
            margin-bottom: 24px;
            border: 1px solid;
        }

        .alert i { font-size: 15px; flex-shrink: 0; }

        .alert-error {
            background: rgba(192,57,43,0.1);
            border-color: rgba(192,57,43,0.3);
            color: #e57373;
        }

        .alert-warning {
            background: rgba(230,126,34,0.1);
            border-color: rgba(230,126,34,0.3);
            color: #f0a500;
        }

        /* ── Grupos de campo ── */
        .field {
            margin-bottom: 18px;
        }

        .field label {
            display: block;
            font-size: 12px;
            font-weight: 500;
            color: var(--muted);
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 0.6px;
        }

        .field-wrap {
            position: relative;
        }

        .field-wrap i.icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 15px;
            color: rgba(255,255,255,0.2);
            pointer-events: none;
            transition: color 0.2s;
        }

        .field-wrap input:focus ~ i.icon,
        .field-wrap:focus-within i.icon {
            color: var(--red);
        }

        .field-wrap input {
            width: 100%;
            padding: 12px 14px 12px 42px;
            background: rgba(255,255,255,0.04);
            border: 1px solid var(--border);
            border-radius: 10px;
            color: var(--text);
            font-family: 'DM Sans', sans-serif;
            font-size: 14px;
            outline: none;
            transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
        }

        .field-wrap input::placeholder { color: rgba(255,255,255,0.2); }

        .field-wrap input:focus {
            border-color: var(--red);
            background: rgba(192,57,43,0.06);
            box-shadow: 0 0 0 3px rgba(192,57,43,0.12);
        }

        .toggle-pw {
            position: absolute;
            right: 13px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: rgba(255,255,255,0.25);
            font-size: 16px;
            cursor: pointer;
            padding: 2px;
            transition: color 0.2s;
            line-height: 1;
        }

        .toggle-pw:hover { color: var(--red); }

        /* ── Botão de login ── */
        .btn-login {
            width: 100%;
            padding: 13px;
            background: var(--red);
            color: #fff;
            border: none;
            border-radius: 10px;
            font-family: 'DM Sans', sans-serif;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-top: 8px;
            transition: background 0.2s, transform 0.15s;
            letter-spacing: 0.2px;
        }

        .btn-login:hover {
            background: var(--red-dark);
            transform: translateY(-1px);
        }

        .btn-login:active { transform: translateY(0); }

        .btn-login:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        /* ── Rodapé do formulário ── */
        .form-footer {
            margin-top: 28px;
            padding-top: 20px;
            border-top: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .form-footer a {
            font-size: 12px;
            color: var(--red);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 5px;
            opacity: 0.85;
            transition: opacity 0.2s;
        }

        .form-footer a:hover { opacity: 1; }

        .form-footer span {
            font-size: 11px;
            color: rgba(255,255,255,0.15);
        }

        /* ── Spinner ── */
        @keyframes spin { to { transform: rotate(360deg); } }
        .spin { animation: spin 0.7s linear infinite; }

        /* ── Responsivo ── */
        @media (max-width: 680px) {
            .page { flex-direction: column; border-radius: 16px; max-width: 420px; }
            .brand-panel { width: 100%; padding: 32px 24px; min-height: auto; }
            .brand-panel::before, .brand-panel::after { display: none; }
            .form-panel { padding: 32px 24px; }
        }