/* =====================================================
   LOGIN PRO - TRADING JOURNAL
===================================================== */

:root{
  --bg-main:#030712;
  --bg-card:#0f172a;
  --border:#1e293b;
  --text-main:#e5e7eb;
  --text-muted:#94a3b8;

  --primary:#f0b90b;
  --primary-dark:#7c5a00;
  --primary-glow:rgba(240,185,11,.35);

  --red:#dc2626;
}

/* RESET */
*{
  box-sizing:border-box;
}

body{
  margin:0;
  height:100vh;
  font-family:Inter, system-ui, sans-serif;
  background:
    radial-gradient(circle at 20% 10%, rgba(240,185,11,.08), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(240,185,11,.06), transparent 40%),
    #030712;
  display:flex;
  justify-content:center;
  align-items:center;
  color:var(--text-main);
}

/* CARD */
.login-card{
  width:100%;
  max-width:420px;
  background:linear-gradient(180deg,#0f172a,#0b1220);
  border:1px solid var(--border);
  border-radius:20px;
  padding:42px 36px;
  box-shadow:0 30px 80px rgba(0,0,0,.65);
  animation:fadeIn .4s ease;
  position:relative;
  overflow:hidden;
}

/* Glow decorativo */
.login-card::before{
  content:"";
  position:absolute;
  top:-100px;
  right:-100px;
  width:200px;
  height:200px;
  background:radial-gradient(circle,var(--primary-glow),transparent 70%);
  opacity:.4;
}

/* Animación */
@keyframes fadeIn{
  from{opacity:0; transform:translateY(15px);}
  to{opacity:1; transform:none;}
}

/* LOGO */
.logo{
  text-align:center;
  font-size:44px;
  margin-bottom:14px;
}

h1{
  text-align:center;
  font-size:22px;
  margin:0;
  background:linear-gradient(90deg,var(--primary),#ffd700);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.subtitle{
  text-align:center;
  font-size:13px;
  color:var(--text-muted);
  margin:8px 0 32px;
  letter-spacing:.5px;
}

/* ERROR */
.auth-error{
  background:rgba(220,38,38,.1);
  border:1px solid var(--red);
  color:var(--red);
  padding:12px;
  border-radius:10px;
  font-size:13px;
  text-align:center;
}

/* FORM */
form{
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* INPUT FIELD */
.field{
  position:relative;
}

input{
  width:100%;
  background:#0b1220;
  border:1px solid var(--border);
  border-radius:12px;
  padding:15px 45px 15px 15px;
  font-size:14px;
  color:var(--text-main);
  transition:.2s;
}

input::placeholder{
  color:#64748b;
}

input:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 2px rgba(240,185,11,.15);
}

/* Toggle password */
.toggle-pass{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  cursor:pointer;
  font-size:14px;
  color:var(--text-muted);
  transition:.2s;
}

.toggle-pass:hover{
  color:var(--primary);
}

/* OPTIONS */
.options{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  color:var(--text-muted);
}

.options a{
  text-decoration:none;
  color:var(--text-muted);
}

.options a:hover{
  color:var(--primary);
}

/* BUTTON */
button{
  margin-top:8px;
  background:linear-gradient(135deg,var(--primary-dark),var(--primary));
  border:none;
  border-radius:12px;
  padding:15px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:.2s;
  color:#000;
  position:relative;
}

button:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 25px var(--primary-glow);
}

button:disabled{
  opacity:.6;
  cursor:not-allowed;
}

/* Loader */
.loader{
  display:none;
  margin:auto;
  width:18px;
  height:18px;
  border:3px solid #000;
  border-top:3px solid transparent;
  border-radius:50%;
  animation:spin .8s linear infinite;
}

@keyframes spin{
  to{ transform:rotate(360deg); }
}

/* FOOTER */
.auth-footer{
  margin-top:26px;
  text-align:center;
  font-size:13px;
  color:var(--text-muted);
}

.auth-footer a{
  color:var(--primary);
  font-weight:600;
  text-decoration:none;
}

.auth-footer a:hover{
  text-decoration:underline;
}

/* RESPONSIVE */
@media(max-width:480px){
  .login-card{
    padding:30px 22px;
  }
}
:root{
  --bg-main:#0b0e11;
  --bg-card:#0f172a;
  --bg-card-2:#0c1422;
  --border:#1e293b;
  --text-main:#e5e7eb;
  --text-muted:#94a3b8;
  --yellow:#f0b90b;
  --red:#ef4444;
  --green:#16a34a;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  height:100vh;
  font-family:Inter,system-ui,sans-serif;
  background:radial-gradient(circle at top,#111827,#07090c 60%);
  display:flex;
  justify-content:center;
  align-items:center;
  color:var(--text-main);
}

/* =========================
   CARD
========================= */
.register-card{
  width:100%;
  max-width:440px;
  background:linear-gradient(180deg,var(--bg-card),var(--bg-card-2));
  border:1px solid var(--border);
  border-radius:18px;
  padding:40px;
  box-shadow:0 30px 70px rgba(0,0,0,.65);
  position:relative;
  animation:fadeIn .4s ease;
  overflow:hidden;
}

/* Línea dorada superior estilo index */
.register-card::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:3px;
  background:linear-gradient(90deg,var(--yellow),transparent);
  opacity:.7;
}

/* =========================
   ANIMACIÓN
========================= */
@keyframes fadeIn{
  from{ opacity:0; transform:translateY(15px); }
  to{ opacity:1; transform:none; }
}

/* =========================
   LOGO
========================= */
.logo{
  text-align:center;
  font-size:44px;
  margin-bottom:14px;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.6));
}

/* =========================
   TITULOS
========================= */
h1{
  text-align:center;
  font-size:24px;
  margin:0;
  font-weight:700;
}

.subtitle{
  text-align:center;
  font-size:13px;
  color:var(--text-muted);
  margin:8px 0 30px;
  letter-spacing:.5px;
}

/* =========================
   ERROR
========================= */
.auth-error{
  background:rgba(239,68,68,.12);
  border:1px solid var(--red);
  color:var(--red);
  padding:12px;
  border-radius:10px;
  font-size:13px;
  text-align:center;
  margin-bottom:18px;
}

/* =========================
   FORM
========================= */
form{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.field{
  position:relative;
}

/* =========================
   INPUTS
========================= */
input{
  width:100%;
  background:#0b1120;
  border:1px solid var(--border);
  border-radius:12px;
  padding:15px 45px 15px 15px;
  font-size:14px;
  color:var(--text-main);
  transition:.2s ease;
}

input:focus{
  outline:none;
  border-color:var(--yellow);
  box-shadow:0 0 0 3px rgba(240,185,11,.15);
}

/* =========================
   TOGGLE PASSWORD
========================= */
.toggle-pass{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  cursor:pointer;
  font-size:13px;
  color:var(--text-muted);
  transition:.2s;
}

.toggle-pass:hover{
  color:var(--yellow);
}

/* =========================
   PASSWORD RULES
========================= */
.password-rules{
  font-size:12px;
  color:var(--text-muted);
  margin-top:-6px;
}

/* =========================
   BUTTON
========================= */
button{
  margin-top:12px;
  background:linear-gradient(90deg,var(--yellow),#ffd84d);
  border:none;
  border-radius:12px;
  padding:15px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:.25s ease;
  color:#000;
  letter-spacing:.5px;
}

button:hover{
  transform:translateY(-2px);
  box-shadow:0 15px 35px rgba(240,185,11,.35);
}

button:active{
  transform:scale(.97);
}

button:disabled{
  opacity:.6;
  cursor:not-allowed;
}

/* =========================
   FOOTER
========================= */
.auth-footer{
  margin-top:26px;
  text-align:center;
  font-size:13px;
  color:var(--text-muted);
}

.auth-footer a{
  color:var(--yellow);
  font-weight:600;
  text-decoration:none;
}

.auth-footer a:hover{
  text-decoration:underline;
}

/* =========================
   LOADER
========================= */
.loader{
  display:none;
  margin:auto;
  width:18px;
  height:18px;
  border:3px solid #000;
  border-top:3px solid transparent;
  border-radius:50%;
  animation:spin .8s linear infinite;
}

@keyframes spin{
  to{ transform:rotate(360deg); }
}
.footer-logo{
  height:80px;
  width:auto;
  object-fit:contain;
}