/* Google Fonts + FontAwesome podem ficar no ; o CSS aqui começa no :root exatamente como no HTML de referência */ :root { --violet-start: #7857ff; --violet-end: #7b5eff; --background: #f4f6fc; --surface: #ffffff; --text-primary:#2d3142; --text-muted: #6b7082; --header-gradient: radial-gradient( 120% 160% at 100% -20%, var(--violet-start) 0%, var(--violet-end) 60%, #e8dfff 100%); --btn-primary: linear-gradient(145deg, var(--violet-start), var(--violet-end)); } * { box-sizing: border-box; } body { margin: 0; font-family: "Poppins", Arial, sans-serif; background: var(--background); height: 100vh; display: flex; justify-content: flex-end; align-items: center; } /* PANEL */ .panel { width: 360px; height: 100vh; background: var(--surface); border-top-left-radius: 32px; border-bottom-left-radius: 32px; box-shadow: -4px 0 18px rgba(0,0,0,.08); display: flex; flex-direction: column; overflow-y: auto; } /* HEADER */ .header { background: var(--header-gradient); color: #fff; padding: 48px 32px 56px 64px; border-top-left-radius: 32px; display: flex; align-items: center; gap: 12px; position: relative; } .header .logo { width: 48px; height: 48px; border-radius: 14px; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 24px; } .header h1 { font-size: 20px; font-weight: 600; margin: 0; } /* LOGIN SECTION */ .login-section { flex: 1; padding: 0 32px; display: flex; flex-direction: column; justify-content: center; gap: 24px; margin-top: -40px; /* overlap header curve */ } .login-section label { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; } .input-field { width: 100%; padding: 14px 16px; border: 1px solid #dcdfe6; border-radius: 28px; font-size: 14px; font-family: inherit; } /* BOTÃO */ .btn-login { width: 100%; padding: 14px 0; border: none; border-radius: 28px; background: var(--btn-primary); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 6px 14px rgba(0,0,0,.1); transition: transform .25s, box-shadow .25s; } .btn-login:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,.12); } /* ESQUECI SENHA */ .forgot { text-align: center; font-size: 13px; } .forgot a { color: var(--violet-start); text-decoration: none; } .forgot a:hover { text-decoration: underline; } /* FOOTER */ .footer { height: 38px; background: var(--header-gradient); color: #fff; display: flex; align-items: center; justify-content: center; border-bottom-left-radius: 32px; font-size: 13px; font-weight: 500; } /* ALERTA DE ERRO (novo) */ .alert { color: #b00; font-size: 13px; text-align: center; }