/* ============================================================
   CSS extraído de recuperar.php (bloco <style> inline)
   Gerado automaticamente na revisão de separação de CSS.
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        .container { width: 100%; max-width: 480px; }
        .card {
            background: white;
            border-radius: 28px;
            box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
            overflow: hidden;
        }
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 40px 32px;
            text-align: center;
            color: white;
        }
        .header i { font-size: 48px; margin-bottom: 16px; }
        .header h1 { font-size: 24px; font-weight: 800; margin-bottom: 8px; }
        .header p { font-size: 14px; opacity: 0.85; }
        .body { padding: 32px; }
        .form-group { margin-bottom: 24px; }
        .form-label {
            display: block;
            font-size: 13px;
            font-weight: 600;
            color: #6b7280;
            margin-bottom: 8px;
        }
        .input-wrapper { position: relative; }
        .input-wrapper i {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: #9ca3af;
            font-size: 18px;
        }
        .form-control {
            width: 100%;
            padding: 14px 16px 14px 48px;
            border: 1.5px solid #e5e7eb;
            border-radius: 16px;
            font-size: 15px;
            transition: all 0.2s;
        }
        .form-control:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102,126,234,0.1);
        }
        .btn {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 16px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            text-decoration: none;
        }
        .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 25px -5px rgba(102,126,234,0.4); }
        .btn-secondary { background: #e5e7eb; color: #374151; margin-top: 12px; }
        .alert {
            padding: 14px 18px;
            border-radius: 16px;
            margin-bottom: 24px;
            font-size: 14px;
        }
        .alert-error { background: #fee2e2; color: #dc2626; border-left: 4px solid #dc2626; }
        .alert-success { background: #d1fae5; color: #059669; border-left: 4px solid #059669; }
        .alert-info { background: #dbeafe; color: #2563eb; border-left: 4px solid #2563eb; }
        .footer { text-align: center; margin-top: 24px; padding-top: 24px; border-top: 1px solid #e5e7eb; }
        .footer a { color: #667eea; text-decoration: none; font-size: 14px; font-weight: 600; }
        .footer a:hover { text-decoration: underline; }
        .info-text { font-size: 12px; color: #6b7280; margin-top: 8px; text-align: center; }
        .password-strength { margin-top: 8px; height: 4px; background: #e5e7eb; border-radius: 2px; overflow: hidden; }
        .strength-bar { height: 100%; width: 0; transition: width 0.3s; }
        .strength-weak { background: #dc2626; width: 33%; }
        .strength-medium { background: #f59e0b; width: 66%; }
        .strength-strong { background: #10b981; width: 100%; }