.ff-login{display:flex;min-height:100vh;font-family:'Segoe UI',system-ui,-apple-system,sans-serif}
.ff-brand{position:relative;flex:1 1 55%;overflow:hidden;color:#fff;display:flex;align-items:center}
.ff-slides{position:absolute;inset:0}
.ff-slides .ff-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease;animation:ffZoom 8s ease-out forwards}
.ff-slides .ff-slide.on{opacity:1;z-index:1}
@keyframes ffZoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.ff-overlay{position:absolute;inset:0;z-index:2;background:linear-gradient(120deg,rgba(13,30,80,.88) 0%,rgba(16,48,111,.72) 45%,rgba(12,143,127,.55) 100%)}
.ff-brand-content{position:relative;z-index:3;padding:64px 56px;max-width:560px}
.ff-title{font-size:48px;line-height:1.05;font-weight:800;margin:0 0 20px;text-shadow:0 2px 12px rgba(0,0,0,.25)}
.ff-sub{font-size:17px;line-height:1.5;opacity:.95;margin:0 0 28px}
.ff-perks{list-style:none;padding:0;margin:0 0 40px}
.ff-perks li{position:relative;padding:8px 0 8px 34px;font-size:15px}
.ff-perks li::before{content:"\2713";position:absolute;left:0;top:6px;width:22px;height:22px;border-radius:6px;background:#14c9a8;color:#fff;font-size:13px;font-weight:700;display:grid;place-items:center}
.ff-foot{font-size:13px;opacity:.8}
.ff-panel{flex:1 1 45%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#fdf3ee,#fbe7dd)}
.ff-card{width:100%;max-width:400px;background:#fff;border-radius:20px;padding:40px 38px;box-shadow:0 24px 60px rgba(13,30,80,.18)}
.ff-logo{display:block;height:64px;margin:0 auto 18px}
.ff-card-title{text-align:center;color:#15306f;font-size:30px;font-weight:800;margin:0 0 6px}
.ff-card-sub{text-align:center;color:#6b7280;font-size:14px;margin:0 0 26px;padding-bottom:18px;border-bottom:1px solid #eef0f4}
.ff-card label{display:block;font-size:13px;font-weight:600;color:#374151;margin:14px 0 6px}
.ff-card input{width:100%;padding:13px 15px;border:1px solid #d8dce3;border-radius:10px;font-size:15px;outline:none;transition:.2s;box-sizing:border-box}
.ff-card input:focus{border-color:#14c9a8;box-shadow:0 0 0 3px rgba(20,201,168,.18)}
.ff-card button{width:100%;margin-top:24px;padding:14px;border:0;border-radius:10px;color:#fff;font-size:16px;font-weight:700;cursor:pointer;background:linear-gradient(135deg,#14c9a8,#0aa78e);box-shadow:0 8px 20px rgba(20,201,168,.35);transition:.2s}
.ff-card button:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(20,201,168,.45)}
.ff-erro{background:#fde8e8;color:#b42318;border:1px solid #f5c2c0;border-radius:10px;padding:11px 14px;font-size:14px;margin-bottom:8px;text-align:center}
.ff-links{text-align:center;margin-top:20px;font-size:14px}
.ff-links a{color:#15306f;font-weight:600;text-decoration:none}
.ff-links a:hover{text-decoration:underline}
@media(max-width:880px){.ff-login{flex-direction:column}.ff-brand{min-height:240px}.ff-brand-content{padding:32px 28px}.ff-title{font-size:32px}.ff-perks,.ff-sub{display:none}}

.ff-title{color:#fff !important}

/* recuperar senha */
.ff-rec{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(135deg,#0d1e50,#10306f 45%,#0c8f7f)}
.ff-rec .ff-card{max-width:420px}
.ff-rec h1{text-align:center;color:#15306f;font-size:26px;font-weight:800;margin:0 0 6px}
.ff-rec .sub{text-align:center;color:#6b7280;font-size:14px;margin:0 0 22px}
.ff-rec .campo{margin-bottom:2px}
.ff-rec .ok{background:#e3f9f1;color:#0a7f66;border:1px solid #b0e4d7;border-radius:10px;padding:11px 14px;font-size:14px;margin-bottom:14px;text-align:center}
.ff-rec .erro{background:#fde8e8;color:#b42318;border:1px solid #f5c2c0;border-radius:10px;padding:11px 14px;font-size:14px;margin-bottom:14px;text-align:center}