/* Future Race — Login / Register */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --fr-blue:#2563eb;--fr-purple:#7c3aed;--fr-green:#22c55e;
  --fr-dark:#0f172a;--fr-muted:#64748b;--fr-line:#e2e8f0;
}
body.fr-auth{
  min-height:100vh;font-family:Inter,system-ui,sans-serif;color:var(--fr-dark);
  background:
    radial-gradient(circle at 20% 8%,rgba(37,99,235,.16),transparent 28%),
    radial-gradient(circle at 86% 90%,rgba(34,197,94,.14),transparent 30%),
    linear-gradient(145deg,#fff 0%,#f7fbff 52%,#f2fff8 100%);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
a{text-decoration:none}
.fr-page{
  min-height:100vh;width:100%;max-width:1120px;margin:auto;padding:22px;
  display:grid;grid-template-columns:1fr 430px;gap:34px;align-items:center;
}
.fr-left{min-height:620px;display:flex;flex-direction:column;justify-content:center;position:relative}
.fr-brand-row{
  position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.fr-brand{display:flex;align-items:center;gap:12px;min-width:0}
.fr-logo{
  width:56px;height:56px;border-radius:22px;background:#fff;padding:8px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(226,232,240,.9);box-shadow:0 16px 34px rgba(15,23,42,.10);flex:0 0 auto;overflow:hidden;
}
.fr-logo img{width:100%;height:100%;object-fit:contain}
.fr-logo-fallback{
  width:100%;height:100%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--fr-blue),var(--fr-purple));color:#fff;font-weight:900;font-size:18px;
}
.fr-brand strong{display:block;max-width:300px;font-size:18px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-brand span{display:block;margin-top:5px;color:var(--fr-muted);font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.fr-home{
  width:48px;height:48px;border-radius:18px;background:#fff;color:var(--fr-dark);
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(226,232,240,.9);box-shadow:0 14px 28px rgba(15,23,42,.08);
}
.fr-hero h1{max-width:620px;font-size:clamp(42px,8vw,68px);line-height:.93;letter-spacing:-.08em;font-weight:900}
.fr-hero h1 span{background:linear-gradient(90deg,var(--fr-blue),var(--fr-purple),var(--fr-green));-webkit-background-clip:text;color:transparent}
.fr-hero p{margin-top:20px;max-width:520px;color:var(--fr-muted);font-size:15px;line-height:1.75;font-weight:650}
.fr-portal-pill{
  display:inline-flex;align-items:center;gap:10px;width:max-content;padding:11px 15px;margin-bottom:22px;
  border-radius:999px;background:#fff;border:1px solid rgba(226,232,240,.9);
  box-shadow:0 16px 34px rgba(15,23,42,.07);color:#334155;font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
}
.fr-portal-pill b{width:9px;height:9px;border-radius:50%;background:var(--fr-green);box-shadow:0 0 0 6px rgba(34,197,94,.15)}
.fr-feature-strip{margin-top:34px;display:flex;flex-wrap:wrap;gap:10px}
.fr-feature-chip{
  display:flex;align-items:center;gap:9px;padding:12px 14px;border-radius:999px;background:#fff;
  border:1px solid rgba(226,232,240,.9);box-shadow:0 14px 28px rgba(15,23,42,.06);
  color:#334155;font-size:12px;font-weight:800;
}
.fr-feature-chip i{color:var(--fr-blue)}
.fr-card{
  position:relative;padding:26px;border-radius:34px;background:rgba(255,255,255,.92);
  border:1px solid rgba(226,232,240,.95);box-shadow:0 30px 80px rgba(15,23,42,.13);backdrop-filter:blur(18px);
}
.fr-card::before{
  content:"";position:absolute;inset:-1px;border-radius:35px;padding:1px;
  background:linear-gradient(135deg,rgba(37,99,235,.34),rgba(124,58,237,.22),rgba(34,197,94,.32));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.fr-mobile-brand{display:none}
.fr-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:20px}
.fr-card-icon{
  width:58px;height:58px;border-radius:22px;display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,var(--fr-blue),var(--fr-purple));box-shadow:0 16px 34px rgba(37,99,235,.24);margin-bottom:14px;
}
.fr-card-top h2{font-size:32px;line-height:1;letter-spacing:-.06em;font-weight:900}
.fr-card-top p{margin-top:8px;color:var(--fr-muted);font-size:12px;font-weight:700;line-height:1.45}
.fr-alt-btn{
  min-width:98px;height:42px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  color:#fff;background:linear-gradient(135deg,var(--fr-blue),var(--fr-purple));
  box-shadow:0 14px 28px rgba(37,99,235,.20);font-size:12px;font-weight:900;
}
.fr-alert{display:flex;gap:9px;padding:11px;border-radius:17px;margin-bottom:10px;font-size:11px;line-height:1.45;font-weight:700}
.fr-alert.error{background:#fff1f2;border:1px solid #fecdd3;color:#be123c}
.fr-alert.warn{background:#fffbeb;border:1px solid #fde68a;color:#92400e}
.fr-alert.success{background:#ecfdf5;border:1px solid #bbf7d0;color:#166534}
.fr-alert.hidden{display:none!important}
.hidden{display:none!important}
.fr-form-stack>*+*{margin-top:11px}
.fr-field{padding:1.4px;border-radius:22px;background:#e2e8f0;transition:.22s ease}
.fr-field:focus-within{
  background:linear-gradient(135deg,var(--fr-blue),var(--fr-purple),var(--fr-green));
  box-shadow:0 14px 30px rgba(37,99,235,.13);transform:translateY(-1px);
}
.fr-field-inner{
  min-height:58px;border-radius:20.5px;background:#fff;display:flex;align-items:center;gap:10px;padding:0 12px;
}
.fr-field-icon{
  width:38px;height:38px;border-radius:15px;display:flex;align-items:center;justify-content:center;
  background:#eff6ff;color:var(--fr-blue);flex:0 0 auto;transition:.22s;
}
.fr-field:focus-within .fr-field-icon{color:#fff;background:linear-gradient(135deg,var(--fr-blue),var(--fr-purple));transform:rotate(-4deg) scale(1.04)}
.fr-field-icon.purple{background:#f5f3ff;color:var(--fr-purple)}
.fr-field-icon.green{background:#ecfdf5;color:var(--fr-green)}
.fr-input-area{flex:1;min-width:0}
.fr-input-area label{display:block;margin-bottom:4px;color:#94a3b8;font-size:8px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.fr-field:focus-within label{color:var(--fr-blue)}
.fr-input-area input,.fr-input-area select{
  width:100%;border:0;outline:0;background:transparent;font-family:inherit;color:var(--fr-dark);font-size:14px;font-weight:800;
}
.fr-input-area input::placeholder{color:#a8b1c0}
.fr-eye{width:38px;height:38px;border:0;border-radius:15px;background:#f8fafc;color:#64748b;cursor:pointer}
.fr-form-links{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 2px 0}
.fr-form-links a{font-size:11px;font-weight:900}
.fr-form-links .forgot{color:var(--fr-purple)}
.fr-form-links .home-link{color:var(--fr-muted)}
.fr-submit{
  position:relative;width:100%;min-height:56px;border:0;border-radius:22px;overflow:hidden;cursor:pointer;color:#fff;
  background:linear-gradient(135deg,var(--fr-blue),var(--fr-purple) 55%,var(--fr-green));
  font-family:inherit;font-size:12px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;
  box-shadow:0 18px 34px rgba(37,99,235,.24);
}
.fr-submit::before{
  content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);
  transform:translateX(-120%);transition:.6s ease;
}
.fr-submit:hover::before{transform:translateX(120%)}
.fr-submit-content{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:9px}
.fr-circle{width:23px;height:23px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-size:10px}
.fr-whatsapp{
  min-height:56px;border-radius:22px;padding:10px 12px;display:flex;align-items:center;gap:11px;
  background:linear-gradient(135deg,#ecfdf5,#f0fdf4);border:1px solid #bbf7d0;transition:.2s ease;color:inherit;
}
.fr-whatsapp:hover{transform:translateY(-1px)}
.fr-wa-icon{
  width:40px;height:40px;border-radius:16px;color:#fff;background:linear-gradient(135deg,#25D366,#16a34a);
  display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 12px 22px rgba(34,197,94,.22);
}
.fr-wa-text small{display:block;color:#16a34a;font-size:8px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.fr-wa-text strong{display:block;margin-top:3px;color:#166534;font-size:13px;font-weight:900}
.fr-secure{
  display:flex;gap:8px;padding:10px;border-radius:17px;background:#f8fafc;border:1px solid var(--fr-line);
  color:var(--fr-muted);font-size:10px;line-height:1.4;font-weight:700;
}
.fr-secure i{color:var(--fr-green)}
.fr-hint{margin-top:5px;padding-left:11px;font-size:10px;color:var(--fr-muted);font-weight:700}
@media(max-width:900px){
  .fr-page{max-width:460px;grid-template-columns:1fr;padding:12px;align-items:start}
  .fr-left{display:none}
  .fr-mobile-brand{
    display:block;margin-bottom:12px;padding:15px;border-radius:26px;color:#fff;
    background:linear-gradient(135deg,#0f172a,var(--fr-blue),var(--fr-purple));box-shadow:0 18px 42px rgba(37,99,235,.20);
  }
  .fr-mobile-brand-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .fr-mobile-brand .fr-logo{width:44px;height:44px;border-radius:16px;padding:6px}
  .fr-mobile-brand strong{display:block;max-width:240px;font-size:15px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fr-mobile-brand span{display:block;margin-top:3px;font-size:8px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.75)}
  .fr-mobile-brand p{margin-top:12px;color:rgba(255,255,255,.78);font-size:12px;line-height:1.55;font-weight:650}
  .fr-mobile-brand .fr-home{width:38px;height:38px;border-radius:14px;background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.18);box-shadow:none}
  .fr-card{padding:20px;border-radius:30px}
  .fr-card::before{border-radius:31px}
}
@media(max-width:380px){
  .fr-page{padding:8px}
  .fr-mobile-brand{padding:12px;border-radius:22px;margin-bottom:8px}
  .fr-card{padding:15px;border-radius:25px}
  .fr-card-top h2{font-size:25px}
  .fr-field-inner{min-height:52px;padding:0 10px}
  .fr-field-icon,.fr-eye{width:34px;height:34px;border-radius:13px}
  .fr-submit{min-height:52px}
}
