* { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, sans-serif; } body { background-color: #121212; color: #fff; display: flex; flex-direction: column; min-height: 100vh; } .top-header { padding: 40px 0; display: flex; justify-content: center; border-bottom: 1px solid #262626; } .container { padding: 30px 20px; max-width: 400px; margin: 0 auto; width: 100%; flex-grow: 1; } .title { font-size: 16px; font-weight: 600; margin-bottom: 20px; } form { display: flex; flex-direction: column; gap: 12px; } .input-group { position: relative; display: flex; align-items: center; } .input-icon { position: absolute; left: 15px; color: #a8a8a8; } input { width: 100%; background: #1c1c1e; border: 1px solid #363636; border-radius: 12px; padding: 16px 14px 16px 45px; color: #fff; outline: none; } input:focus { border-color: #0064e0; } button { background: #0064e0; color: #fff; border: none; border-radius: 20px; padding: 12px; font-weight: bold; cursor: pointer; } button:disabled { opacity: 0.5; cursor: not-allowed; } .forgot-password { color: #fff; text-decoration: none; font-size: 13px; text-align: center; margin-top: 25px; display: block; font-weight: 600; } .bottom-actions { margin-top: 50px; display: flex; flex-direction: column; gap: 12px; } .action-btn { text-decoration: none; border: 1px solid #363636; border-radius: 20px; padding: 12px; text-align: center; color: #fff; font-size: 14px; font-weight: 600; } .create-btn { color: #5ea8f4; } .main-footer { padding: 30px 20px; display: flex; flex-direction: column; align-items: center; margin-top: auto; } .meta-logo-footer { color: #a8a8a8; margin-bottom: 15px; display: flex; align-items: center; gap: 6px; } .footer-divider { width: 100%; height: 1px; background: #262626; margin-bottom: 25px; } .footer-links { display: flex; gap: 15px; margin-bottom: 15px; } .footer-links a { color: #a8a8a8; text-decoration: none; font-size: 12px; } .footer-bottom { color: #a8a8a8; font-size: 12px; }