/* ===== RESET ===== */
*,
*::before,
*::after{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* ===== ROOT ===== */
html, body{
  width:100%;
  height:100%;
}

/* ===== WIX STYLE APP ENGINE ===== */
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background:#0b1220;
}

/* FULL DEVICE */
.app{
  min-height:100dvh;   /* mobile safe */
  width:100%;
  display:flex;
}

/* PAGE */
.page{
  width:100%;
  min-height:100dvh;

  /* center system (Wix style) */
  max-width:1400px;
  margin-inline:auto;

  padding:clamp(12px, 3vw, 32px);
}
/* =========================================================
   STEP 3 — LOGIN AUTO-CENTER SYSTEM (WIX STYLE)
   ========================================================= */

/* Login page main section */
.page-login{
  display:flex;
  flex-direction:column;
}

/* Full-height center zone */
.login-section{
  flex:1; /* page ka bacha hua pura space le */
  display:flex;
  align-items:center;      /* vertical center */
  justify-content:center;  /* horizontal center */
  width:100%;
}

/* Login card base (NO DESIGN YET) */
.login-card{
  width:100%;
  max-width:420px;     /* desktop control */
  padding:24px;
  
  /* safety */
  display:flex;
  flex-direction:column;
  gap:20px;
}

/* Header structure */
.login-header{
  text-align:center;
}

/* Form structure */
.login-form{
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* Field block */
.field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* Inputs base reset */
.field input{
  width:100%;
  padding:12px;
  font-size:16px;
}

/* Button area */
.actions{
  margin-top:10px;
}

.actions button{
  width:100%;
  padding:14px;
  font-size:16px;
  cursor:pointer;
}
/* =========================================================
   STEP 4 — LOGIN VISUAL DESIGN (NO LAYOUT CHANGE)
   ========================================================= */

/* Page background */
.page-login{
  background:
    radial-gradient(1200px 600px at top, #1a2a3a, #05080d);
}

/* Card look */
.login-card{
  background:#ffffff;
  color:#0b1220;
  border-radius:20px;
  box-shadow:
    0 10px 30px rgba(0,0,0,.25),
    0 40px 80px rgba(0,0,0,.35);
}

/* Header text */
.login-header h1{
  font-size:clamp(20px, 4vw, 26px);
  font-weight:600;
}

.login-header p{
  font-size:13px;
  opacity:.65;
}

/* Input style */
.field label{
  font-size:13px;
  color:#555;
}

.field input{
  border:none;
  border-radius:10px;
  background:#f2f5f8;
  color:#111;
  outline:none;
  transition:box-shadow .2s, background .2s;
}

.field input:focus{
  background:#fff;
  box-shadow:0 0 0 2px rgba(0,114,255,.35);
}

/* Button design */
.actions button{
  border:none;
  border-radius:14px;
  background:linear-gradient(135deg,#00c6ff,#0072ff);
  color:#fff;
  font-weight:600;
  transition:transform .15s, box-shadow .15s;
}

.actions button:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,114,255,.45);
}

.actions button:active{
  transform:translateY(0);
  box-shadow:0 4px 10px rgba(0,114,255,.35);
}
/* =================================================
   STEP 5 — FLOATING LABELS
   ================================================= */

.field{
  position:relative;
}

/* Input */
.field input{
  padding:16px 12px 14px;
}

/* Label inside input */
.field label{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  font-size:14px;
  color:#777;
  pointer-events:none;
  background:#fff;
  padding:0 6px;
  transition:
    top .2s ease,
    font-size .2s ease,
    color .2s ease;
}

/* Float up on focus or value */
.field input:focus + label,
.field input:not(:placeholder-shown) + label{
  top:-8px;
  font-size:12px;
  color:#0072ff;
}
/* =================================================
   STEP 6 — BUTTON LOADING STATE
   ================================================= */

.actions button{
  position:relative;
  overflow:hidden;
}

/* Loader (hidden by default) */
.btn-loader{
  width:18px;
  height:18px;
  border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;
  border-radius:50%;
  display:none;
  animation:spin .8s linear infinite;
  margin:auto;
}

/* Loading mode */
.actions button.loading{
  pointer-events:none;
  opacity:.85;
}

.actions button.loading .btn-text{
  display:none;
}

.actions button.loading .btn-loader{
  display:block;
}

/* Spinner animation */
@keyframes spin{
  to{ transform:rotate(360deg); }
}
/* =================================================
   STEP 7 — FORM ERROR MESSAGE
   ================================================= */

.form-error{
  display:none;
  background:#ffecec;
  color:#b00020;
  border-radius:10px;
  padding:10px 12px;
  font-size:14px;
  line-height:1.4;
}

/* Show state */
.form-error.show{
  display:block;
}