:root{
  --terracotta:#AA6E50;
  --bluegray:#A2AFAD;
  --beige:#E5D8C7;
  --olive:#9A9D85;
  --sage:#C7C7B5;

  --bg0:#07080A;
  --bg1:#0E1014;

  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.65);

  --glass:rgba(255,255,255,.06);
  --stroke:rgba(255,255,255,.10);
  --stroke2:rgba(255,255,255,.14);

  --radius-xl:28px;
  --radius-lg:18px;
  --radius-md:14px;

  --shadow:0 40px 110px rgba(0,0,0,.60);

  --font:"Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  background:
    radial-gradient(1100px 700px at 18% 25%, rgba(154,157,133,.18), transparent 60%),
    radial-gradient(900px 620px at 84% 40%, rgba(170,110,80,.18), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  color:var(--text);
}

/* background FX */
.bg{position:fixed; inset:0; pointer-events:none; overflow:hidden}
.orb{position:absolute; width:520px; height:520px; border-radius:999px; filter:blur(55px); opacity:.55}
.o1{left:-140px; top:-160px; background:radial-gradient(circle at 35% 30%, rgba(170,110,80,.9), rgba(170,110,80,0))}
.o2{right:-190px; top:70px; background:radial-gradient(circle at 35% 30%, rgba(162,175,173,.85), rgba(162,175,173,0))}
.o3{left:18%; bottom:-240px; background:radial-gradient(circle at 45% 40%, rgba(199,199,181,.85), rgba(199,199,181,0))}
.grain{
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E");
  opacity:.12;
  mix-blend-mode:overlay;
}

/* stage */
.stage{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:42px 18px;
}

/* main card */
.card{
  width:min(1120px, 100%);
  min-height: 600px;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  border-radius:var(--radius-xl);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  backdrop-filter: blur(18px);
  box-shadow:var(--shadow);
}

/* LEFT panel like reference */
.left{
  position:relative;
  padding:34px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:
    radial-gradient(900px 620px at 30% 20%, rgba(162,175,173,.25), transparent 60%),
    radial-gradient(900px 620px at 70% 70%, rgba(154,157,133,.28), transparent 62%),
    linear-gradient(135deg, rgba(14,38,30,.92), rgba(10,22,18,.92));
  border-right:1px solid rgba(255,255,255,.08);
}

.brandbar{
  display:flex;
  align-items:center;
  gap:14px;
}
.logo{
  width:58px; height:58px;
  object-fit:contain;
  border-radius:16px;
  padding:10px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}
.brandmeta .kicker{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.70);
  font-weight:600;
}
.brandmeta .sysname{
  margin-top:6px;
  font-weight:800;
  letter-spacing:.06em;
  color:rgba(255,255,255,.88);
}

.hero{
  margin-top:10px;
  max-width: 44ch;
}
.hero h1{
  margin:0;
  font-size:44px;
  line-height:1.05;
  font-weight:800;
  letter-spacing:-.02em;
}
.hero p{
  margin:14px 0 0;
  color:rgba(255,255,255,.74);
  line-height:1.55;
  font-weight:400;
}

.leftfoot{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.chip{
  display:inline-flex;
  align-items:center;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  font-size:12px;
  color:rgba(255,255,255,.78);
  font-weight:600;
}
.chip.ghost{
  background:rgba(0,0,0,.16);
  border-color:rgba(255,255,255,.10);
  color:rgba(255,255,255,.70);
}

/* RIGHT panel */
.right{
  padding:34px;
  background:
    radial-gradient(900px 620px at 60% 15%, rgba(170,110,80,.08), transparent 55%),
    radial-gradient(900px 620px at 35% 85%, rgba(162,175,173,.08), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.26), rgba(0,0,0,.34));
}

.rhead h2{
  margin:0;
  font-size:22px;
  font-weight:800;
}
.rhead p{
  margin:8px 0 0;
  color:var(--muted);
  font-size:13.5px;
}

/* alert */
.alert{
  margin-top:18px;
  padding:12px 12px;
  border-radius:var(--radius-md);
  background:rgba(170,110,80,.14);
  border:1px solid rgba(170,110,80,.35);
  display:flex;
  gap:10px;
  align-items:flex-start;
  color:rgba(255,255,255,.88);
  font-size:13.5px;
}
.alert .dot{
  width:10px; height:10px;
  margin-top:4px;
  border-radius:999px;
  background:var(--terracotta);
  box-shadow:0 0 0 6px rgba(170,110,80,.14);
}

/* oauth buttons (style only) */
.oauth{
  margin-top:18px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.oauthbtn{
  height:44px;
  border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.78);
  font-family:var(--font);
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:not-allowed;
  opacity:.75;
}
.oauthbtn .ic{
  width:18px; height:18px;
  border-radius:6px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.12);
}
.oauthbtn .ic.git{ border-radius:999px }

/* divider "Or" */
.divider{
  margin:16px 0 10px;
  display:flex;
  align-items:center;
  gap:10px;
}
.divider span{
  height:1px; flex:1;
  background:rgba(255,255,255,.10);
}
.divider b{
  font-size:12px;
  color:rgba(255,255,255,.55);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
}

/* form */
.form{ margin-top: 8px; }
.grid{ display:flex; flex-direction:column; gap:14px; }

.field span{
  display:block;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,.70);
  font-weight:700;
  margin-bottom:8px;
}
.input{
  width:100%;
  padding:14px 14px;
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
  outline:none;
  font-family:var(--font);
  font-weight:500;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.input::placeholder{ color:rgba(255,255,255,.42) }
.input:focus{
  border-color: rgba(162,175,173,.55);
  background: rgba(255,255,255,.08);
  transform: translateY(-1px);
}
.field small{
  display:block;
  margin-top:7px;
  color:rgba(255,255,255,.56);
  font-size:12px;
}

.pass{ display:flex; gap:10px; align-items:center; }
.pass .input{ flex:1; }

/* submit */
.submit{
  margin-top: 14px;
  width:100%;
  height:48px;
  border:none;
  border-radius:16px;
  cursor:pointer;
  font-family:var(--font);
  font-weight:800;
  letter-spacing:.02em;
  color:rgba(255,255,255,.95);
  background: linear-gradient(135deg, rgba(170,110,80,.94), rgba(154,157,133,.78));
  box-shadow: 0 18px 40px rgba(0,0,0,.40);
  position:relative;
  overflow:hidden;
  transition: transform .12s ease, filter .12s ease;
}
.submit:hover{ transform:translateY(-1px); filter:brightness(1.05); }
.submit:active{ transform:translateY(0); filter:brightness(.98); }
.submit .shine{
  position:absolute;
  inset:-60% -30%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 45%);
  transform: rotate(12deg);
  opacity:.45;
  pointer-events:none;
}

.fine{
  margin-top:12px;
  font-size:12.5px;
  color:rgba(255,255,255,.62);
}

/* responsive */
@media (max-width: 980px){
  .card{ grid-template-columns: 1fr; }
  .left{ border-right:none; border-bottom:1px solid rgba(255,255,255,.08); }
  .hero h1{ font-size: 38px; }
}

/* --- Centrar contenido del panel derecho --- */
.right{
  display:flex;
  flex-direction:column;
}
.rhead{ margin-bottom: 18px; }
.form{
  margin-top: 0;
  margin-bottom: 0;
}
.right{
  justify-content:center; /* centra vertical */
}
@media (max-width: 980px){
  .right{ justify-content:flex-start; }
}

/* --- Botón Entrar más pro --- */
.submit{
  height:52px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(135deg, rgba(170,110,80,.95), rgba(154,157,133,.78));
  box-shadow:
    0 18px 44px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.06) inset;
  position:relative;
}

.submit:before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:20px;
  background: radial-gradient(400px 120px at 30% 20%, rgba(255,255,255,.22), transparent 60%);
  opacity:.35;
  pointer-events:none;
}

.submit:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
}
.submit:active{
  transform: translateY(-1px) scale(.995);
}

.submit .shine{
  opacity:.55;
}

/* --- Alerta más elegante + animable --- */
.alert{
  border-radius:18px;
  padding: 14px 14px;
  gap: 12px;
  background:
    linear-gradient(180deg, rgba(170,110,80,.16), rgba(0,0,0,.18));
  border: 1px solid rgba(170,110,80,.34);
  box-shadow:
    0 16px 40px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.05) inset;
  backdrop-filter: blur(10px);
}

.alert .dot{ display:none; } /* ya no usamos dot */

.alert-ic{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(170,110,80,.18);
  border: 1px solid rgba(170,110,80,.28);
  color: rgba(255,255,255,.9);
  flex: 0 0 auto;
}

.alert-ic svg{
  width: 20px;
  height: 20px;
}

.alert-body{ display:flex; flex-direction:column; gap:3px; }
.alert-title{
  font-weight: 800;
  letter-spacing: .01em;
  color: rgba(255,255,255,.92);
  font-size: 13.5px;
}
.alert-text{
  font-size: 13px;
  color: rgba(255,255,255,.78);
  line-height: 1.35;
}

/* --- Ojo con Heroicons --- */
.eye{
  width:48px;
  height:48px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  display:grid;
  place-items:center;
  padding:0;
}

.eye-ic{ display:grid; place-items:center; }
.eye-ic svg{ width:20px; height:20px; }

.eye .eye-off{ display:none; }
.eye.on .eye-on{ display:none; }
.eye.on .eye-off{ display:grid; }

/* --- Inputs un poquito más “soft” como mock --- */
.input{
  border-radius: 18px;
  padding: 15px 16px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
}
.input:focus{
  border-color: rgba(162,175,173,.58);
  box-shadow:
    0 0 0 4px rgba(162,175,173,.10),
    0 0 0 1px rgba(0,0,0,.25) inset;
}


.right{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 14px;           /* esto ordena todo */
}

.rhead{ margin:0; }
.form{ margin:0; }

.alert{ 
  margin:0;            /* quita el margin-top:18px viejo */
}

/* ====== RESPONSIVE FOUNDATION ====== */
:root{
  --pad: 34px;
}

@media (max-width: 980px){
  :root{ --pad: 18px; }
  .stage{ padding: 20px 14px; }
  .card{
    width: 100%;
    min-height: unset;
    grid-template-columns: 1fr;
    border-radius: 22px;
  }
  .left, .right{ padding: var(--pad); }
  .left{
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .hero h1{ font-size: 36px; }
}

@media (max-width: 520px){
  .stage{ padding: 16px 12px; }
  .card{ border-radius: 20px; }
  .hero h1{ font-size: 30px; }
  .hero p{ font-size: 13.5px; }

  /* Inputs y botón más cómodos en touch */
  .input{ padding: 14px 14px; border-radius: 16px; }
  .eye{ width: 46px; height: 46px; border-radius: 16px; }
  .submit{ height: 52px; border-radius: 18px; }

  /* Evita zoom en iOS por input pequeño */
  input, button { font-size: 16px; }
}

/* Mejor manejo en pantallas grandes */
@media (min-width: 1400px){
  .card{ width: 1200px; }
  .hero h1{ font-size: 48px; }
}

/* Seguridad: evita desbordes raros */
.card, .left, .right { min-width: 0; }
.hero, .rhead { max-width: 100%; }