/* style.css — PanelAz Premium Login (realist) */

/* COLORS */
:root{
  --bg-dark: #061a17;      /* deep green/teal dark */
  --panel: #0f1413;        /* panel background */
  --muted: #9aa3a1;        /* muted text */
  --accent-blue: #007BFF;  /* main blue */
  --accent-green: #00C853; /* main green */
  --accent-red: #ff3b30;   /* small red accent */
  --glass: rgba(255,255,255,0.03);
  --glass-2: rgba(255,255,255,0.06);
  --radius: 14px;
  --shadow: 0 10px 30px rgba(2,8,8,0.6);
  --font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:var(--font-family);color:#eaf6ee;background:var(--bg-dark);-webkit-font-smoothing:antialiased}
a{color:inherit}

/* Background overlay / flag */
.bg-overlay{
  position:fixed; inset:0; z-index:0;
  background-image: url('https://media.tenor.com/rFNoOqZfOlgAAAAM/flag-azerbaijan.gif');
  background-size:cover; background-position:center;
  opacity:0.13; filter:blur(1px) saturate(1.05);
  transform-origin:center;
  animation: bgscale 28s linear infinite alternate;
}
@keyframes bgscale{ from{transform:scale(1.02)} to{transform:scale(1.06)} }

/* Layout */
.login-layout{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
  position:relative;
  z-index:2;
}

/* Card */
.login-card{
  width:100%;
  max-width:420px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.06));
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px;
  backdrop-filter: blur(8px) saturate(1.05);
  border: 1px solid rgba(255,255,255,0.03);
}

/* Brand */
.brand{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.logo{
  width:54px;height:54px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background: linear-gradient(135deg,var(--accent-blue),var(--accent-green));
  color:#04210d;font-weight:800;font-size:18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}
.brand-text .brand-name{font-weight:800;font-size:18px}
.brand-text .brand-sub{font-size:12px;color:var(--muted)}

/* Flag gif small */
.flag-wrap{display:flex;justify-content:center;margin:10px 0 6px}
.flag-gif{width:140px;border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,0.45)}

/* Title */
.title{font-size:22px;margin:6px 0 8px;text-align:center}
.subtitle{text-align:center;color:var(--muted);font-size:13px;margin-bottom:16px}

/* Form fields */
.form{display:flex;flex-direction:column;gap:12px}
.field{display:flex;flex-direction:column;gap:6px}
.lbl{font-size:13px;color:var(--muted);font-weight:600}
input[type="text"], input[type="password"]{
  padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);
  background: rgba(255,255,255,0.02); color: #eaf6ee; font-size:15px;
  outline:none; transition: box-shadow .18s, border-color .18s, transform .12s;
}
input::placeholder{color: #7e8b87}
input:focus{box-shadow:0 8px 24px rgba(0,120,255,0.06); border-color: rgba(0,123,255,0.4); transform: translateY(-1px)}

/* Password wrapper and toggle */
.pw-wrapper{position:relative;display:flex;align-items:center}
.pw-toggle{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:transparent;border:none;padding:6px;border-radius:8px;cursor:pointer;color:var(--muted);
  font-size:16px;
}
.pw-toggle:active{transform:translateY(-50%) scale(.98)}

/* Row helpers */
.row{display:flex;align-items:center}
.row.between{justify-content:space-between}

/* Checkbox style */
.checkbox{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
.checkbox input{width:16px;height:16px;accent-color: var(--accent-green); border-radius:4px}

/* Links */
.link.small{font-size:13px;color:var(--muted);text-decoration:none}
.link.small:hover{text-decoration:underline}

/* Error */
.error{background: linear-gradient(90deg, rgba(255,60,60,0.06), rgba(0,0,0,0.02)); color:#ffdede;border:1px solid rgba(255,80,80,0.12);
  padding:10px;border-radius:10px;font-size:13px;margin-top:4px}

/* Button */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 14px;border-radius:10px;border:none;cursor:pointer;font-weight:800;
}
.btn-primary{
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-green));
  color:#04210d; box-shadow: 0 10px 30px rgba(0,140,100,0.12);
  transition: transform .14s ease, box-shadow .14s;
}
.btn-primary:hover{transform: translateY(-3px); box-shadow: 0 18px 50px rgba(0,150,120,0.14)}
.btn-primary.success{background: linear-gradient(90deg,#6fe5a7,#00c853)}

/* spinner */
.spinner{
  width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,0.14);border-left-color:transparent;
  display:inline-block;opacity:0;transform:scale(.8);transition:opacity .18s, transform .18s;
}
.spinner.spin{opacity:1; transform:scale(1); animation: spin 0.9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* hint / footer */
.hint{color:var(--muted);margin-top:8px;text-align:center}
.login-footer{margin-top:14px;text-align:center;color:var(--muted)}

/* responsive */
@media (max-width:520px){
  .login-card{padding:18px; margin: 16px;}
  .flag-gif{width:110px}
  .title{font-size:20px}
}