/* admin/login-iron-bgsc.css */

/* BGSC palette */
:root{
  --bgsc: #b600ff;
  --bgsc2:#6d00ff;
  --ink:  #05050a;
  --panel:#0f0f16;
  --text:#eaeaf6;
  --muted:#a9a9c2;
}

body.iron-login{
  margin:0;
  min-height:100vh;
  display:grid;
  place-items:center;
  background: radial-gradient(1200px 600px at 50% 20%, rgba(182,0,255,.18), transparent 60%),
              radial-gradient(900px 500px at 30% 70%, rgba(109,0,255,.10), transparent 55%),
              #000;
  overflow:hidden;
  text-align:center;
  color:var(--text);
}

/* Logo */
body.iron-login #logo{
  width:min(520px, 92vw);
  margin:0 auto;
  position:relative;
  z-index:4;
  animation: logo-entry 1.2s ease-in;
}
body.iron-login h1{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-weight:800;
  letter-spacing:.25em;
  text-transform:uppercase;
  color: var(--bgsc);
  text-shadow: 0 0 18px rgba(182,0,255,.25);
  font-size: clamp(22px, 3.5vw, 38px);
}
body.iron-login h1 span{
  display:inline-block;
  margin-left:.6rem;
  letter-spacing:.15em;
  opacity:.85;
}

/* Form container */
body.iron-login .stark-login form{
  position:relative;
  z-index:4;
  display:inline-block;
  width:min(520px, 92vw);
  padding:18px 18px 14px;
  margin-top:18px;
  border-radius:16px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(182,0,255,.35);
  box-shadow: 0 18px 70px rgba(0,0,0,.65),
              0 0 24px rgba(182,0,255,.18);
  backdrop-filter: blur(10px);
  animation: form-entry 1.1s ease-in-out;
}

/* Inputs */
body.iron-login .stark-login input{
  width:100%;
  height:44px;
  margin:12px 0 0;
  padding:0 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  color:var(--text);
  outline:none;
}
body.iron-login .stark-login input::placeholder{
  color: rgba(234,234,246,.55);
}
body.iron-login .stark-login input:focus{
  border-color: rgba(182,0,255,.65);
  box-shadow: 0 0 0 3px rgba(182,0,255,.18);
}

/* Button */
body.iron-login .stark-login button{
  width:100%;
  height:44px;
  margin-top:14px;
  border:none;
  border-radius:12px;
  color:#fff;
  font-weight:800;
  letter-spacing:.06em;
  background: linear-gradient(135deg, var(--bgsc), var(--bgsc2));
  box-shadow: 0 12px 30px rgba(182,0,255,.20);
  cursor:pointer;
}
body.iron-login .stark-login button:hover{
  filter: brightness(1.05);
}

/* Error */
body.iron-login .iron-error{
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,77,77,.10);
  border: 1px solid rgba(255,77,77,.25);
  color: #ffd0d0;
  text-align:left;
  font-size:.95rem;
}

/* Arc circles (adapted) */
body.iron-login #circle1{
  position:absolute;
  top: 20px;
  left:50%;
  transform: translateX(-50%);
  height: 520px;
  width: 520px;
  border-radius:50%;
  border: 10px solid rgba(182,0,255,.35);
  box-shadow: 0 0 0 2px #000, 0 0 0 6px rgba(182,0,255,.18);
  opacity:.35;
  z-index:0;
  animation: circle1 10s linear infinite;
}
body.iron-login #inner-cirlce1{
  height: 480px;
  width: 480px;
  margin:10px;
  border-radius:50%;
  border: 34px solid rgba(182,0,255,.25);
  position:relative;
}
body.iron-login #inner-cirlce1:before,
body.iron-login #inner-cirlce1:after{
  content:'';
  position:absolute;
  background:#000;
}
body.iron-login #inner-cirlce1:before{
  width: 240px; height: 520px;
  top: -20px; left:-20px;
}
body.iron-login #inner-cirlce1:after{
  width: 520px; height: 240px;
  top:-20px; left:-20px;
}

/* Hex mesh (subtle) */
body.iron-login .hexagons{
  position:absolute;
  top: 58%;
  left:0;
  width:100%;
  color: transparent;
  font-size: 46px;
  letter-spacing: -0.22em;
  line-height: 0.72;
  text-shadow: 0 0 10px rgba(182,0,255,.22);
  transform: perspective(600px) rotateX(60deg) scale(1.35);
  opacity:.55;
  z-index:1;
  pointer-events:none;
}

/* Animations (reduced for “premium”, not circus) */
@keyframes logo-entry{
  from{ opacity:0; transform: translateY(-6px); }
  to{ opacity:1; transform: translateY(0); }
}
@keyframes form-entry{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}
@keyframes circle1{
  from{ transform: translateX(-50%) rotate(0deg); }
  to{ transform: translateX(-50%) rotate(360deg); }
}