* { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; }
    body { background-color: #000000; color: #e0e0e0; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
    .container { width: 100%; max-width: 400px; text-align: center; background-color: #000000; padding: 30px; border-radius: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.5); }
    .header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; }
    .back-button a { text-decoration: none; font-size: 1.5rem; color: #ffffff; transition: color 0.3s ease; }
    .back-button a:hover { color: #d4af37; }
    .title { flex-grow: 1; text-align: center; }
    .title h1 { font-size: 2rem; color: #ffffff; margin-bottom: 5px; }
    .form { margin-top: 30px; }
    .form .input-wrapper { position: relative; margin-bottom: 20px; }
    .form .input-wrapper input { width: 100%; padding: 15px 15px 15px 45px; border: 1px solid #333333; border-radius: 8px; font-size: 1rem; background-color: #333333; color: #ffffff; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
    .form .input-wrapper input:focus { outline: none; border-color: #d4af37; box-shadow: 0 0 8px rgba(212,175,55,0.3); }
    .form .input-wrapper .icon { position: absolute; top: 50%; left: 15px; transform: translateY(-50%); font-size: 1.2rem; color: #aaaaaa; }
    .form .input-wrapper .toggle-password { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); font-size: 1.2rem; cursor: pointer; color: #aaaaaa; transition: color 0.3s ease; }
    .form .input-wrapper .toggle-password:hover { color: #d4af37; }
    .form button { width: 100%; padding: 15px; background-color: #d4af37; color: #ffffff; border: none; border-radius: 8px; font-size: 1rem; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; }
    .form button:hover { background-color: #c19b26; transform: translateY(-1px); }
    .form button:active { transform: translateY(0); }
    .form-links { display: flex; justify-content: center; align-items: center; margin-top: 15px; margin-bottom: 10px; }
    .form-links a { text-decoration: none; font-size: 0.9rem; color: #1e90ff; transition: color 0.3s ease; }
    .form-links a:hover { color: #4da6ff; }
    .email-btn { display: block; width: 100%; padding: 13px; background-color: transparent; color: #d4af37; border: 1px solid #d4af37; border-radius: 8px; font-size: 0.95rem; font-weight: bold; cursor: pointer; margin-top: 12px; transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease; text-decoration: none; text-align: center; }
    .email-btn:hover { background-color: #d4af37; color: #000000; transform: translateY(-1px); }
    .email-btn:active { transform: translateY(0); }
    .messages { margin-top: 15px; padding: 10px; border-radius: 5px; background-color: #4a1a1a; border: 1px solid #cc4444; color: #ff6666; font-size: 0.9rem; text-align: left; }
    .additional-options { margin-top: 30px; padding-top: 20px; border-top: 1px solid #333333; }
    .security-note { background-color: #1a1a2e; border: 1px solid #16213e; border-radius: 8px; padding: 15px; margin-bottom: 20px; }
    .security-note h3 { color: #d4af37; font-size: 0.9rem; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
    .security-note p { color: #aaaaaa; font-size: 0.8rem; line-height: 1.4; }
    .terms { margin-top: 25px; font-size: 0.8rem; color: #aaaaaa; line-height: 1.4; padding-top: 20px; border-top: 1px solid #333333; }
    .terms a { color: #1e90ff; text-decoration: none; }
    .terms a:hover { color: #4da6ff; }