:root{
  --bg1:#667eea;
  --bg2:#764ba2;

  --card: rgba(255,255,255,.14);     /* ✅ shaffof */
  --card2: rgba(255,255,255,.08);    /* ✅ yanada shaffof */
  --text:#f9fafb;                    /* ✅ oqroq text */
  --muted: rgba(255,255,255,.75);
  --border: rgba(255,255,255,.22);
  --primary:#5b6ee1;
  --primary2:#764ba2;
  --error:#ff6b6b;
  --success:#22c55e;
}


*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family: Arial, sans-serif;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;

  background: url("/res/image.png") center/cover no-repeat fixed; /* ✅ rasm */
  position: relative;
  overflow-x: hidden;
}

/* ✅ qoraytirib “glass”ni chiroyli qiladi */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 0;
  pointer-events: none; /* ✅ MUHIM: click'ni yemasligi uchun */
}



.auth-shell{
  width:100%;
  max-width:460px;
  position: relative;
  z-index: 1; /* ✅ overlay ustida */
}

.auth-card{
  position: relative;
  z-index: 1; /* ✅ tugmalar bosilishi uchun */
  background: var(--card);
  border-radius:14px;
  box-shadow: 0 14px 35px rgba(0,0,0,.25);
  padding:26px;
  overflow:hidden;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}


.auth-top{
  text-align:center;
  padding:10px 6px 18px;
}
.auth-top h1{
  font-size:28px;
  color:var(--text);
  letter-spacing:.2px;
}
.auth-top p{
  margin-top:8px;
  color:var(--muted);
  font-size:14px;
}

.alert{
  display:none;
  border-radius:10px;
  padding:10px 12px;
  font-size:14px;
  margin:10px 0 12px;
}
.alert.success{
  display:none;
  background:#dcfce7;
  color:#166534;
  border:1px solid #bbf7d0;
}
.alert.error{
  display:none;
  background:#fee2e2;
  color:#991b1b;
  border:1px solid #fecaca;
}

.loading{
  display:none;
  text-align:center;
  padding:12px 0;
  color:var(--primary);
}
.spinner{
  width:28px;
  height:28px;
  border-radius:50%;
  border:4px solid var(--border);
  border-top:4px solid var(--primary);
  margin:0 auto 10px;
  animation: spin .8s linear infinite;
}
@keyframes spin{ to { transform: rotate(360deg); } }

.form{ display:none; }
.form.active{ display:block; }

.field{ margin-bottom:14px; }
label{
  display:block;
  font-size:13px;
  color:var(--text);
  margin-bottom:7px;
  font-weight:700;
}
input{
  width:100%;
  border:2px solid var(--border);
  border-radius:10px;
  padding:12px 12px;
  font-size:14px;
  outline:none;
  transition:.2s;
}
input:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(91,110,225,.12);
}

.pass-wrap{
  position:relative;
  display:flex;
  align-items:center;
}
.pass-wrap input{ padding-right:86px; }
.show-btn{
  position:absolute;
  right:10px;
  height:32px;
  padding:0 10px;
  border-radius:9px;
  border:1px solid var(--border);
  background:#f9fafb;
  cursor:pointer;
  font-weight:700;
  font-size:12px;
  color:#374151;
}
.show-btn:hover{ background:#f3f4f6; }

.field-error{
  display:block;
  min-height:18px;
  margin-top:6px;
  font-size:12px;
  color:var(--error);
}

.btn{
  width:100%;
  border:none;
  border-radius:12px;
  padding:12px 14px;
  font-size:15px;
  font-weight:800;
  color:white;
  cursor:pointer;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  transition: transform .15s, box-shadow .15s;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(91,110,225,.28);
}
.btn:active{ transform: translateY(0); }

.switch{
  margin-top:14px;
  text-align:center;
  font-size:14px;
  color:var(--muted);
}
.switch a{
  color:var(--primary);
  text-decoration:none;
  font-weight:800;
}
.switch a:hover{ text-decoration:underline; }