/* ── Login page standalone CSS ─────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: linear-gradient(135deg, #022C22 0%, #064E3B 35%, #065F46 70%, #047857 100%);
  position: relative;
  overflow: hidden;
}

/* ── Animated background orbs ─────────────────────────────────────────── */
.fingerprint-bg {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; overflow: hidden;
}

.fingerprint-bg::before, .fingerprint-bg::after {
  content: ''; position: absolute;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(74,222,128,0.15) 0%, transparent 70%);
  animation: float 20s infinite ease-in-out;
}
.fingerprint-bg::before { top: -200px; left: -200px; }
.fingerprint-bg::after  { bottom: -200px; right: -200px; animation-delay: -10s; }

@keyframes float {
  0%, 100% { transform: translate(0,0) scale(1); }
  33%       { transform: translate(50px,-50px) scale(1.1); }
  66%       { transform: translate(-30px,30px) scale(0.95); }
}

/* ── Fingerprint SVG decorations ──────────────────────────────────────── */
.fingerprint-pattern {
  position: absolute; width: 200px; height: 200px;
  opacity: 0.04; animation: rotate 30s linear infinite;
}
.fingerprint-pattern.p1 { top: 10%; left: 5%;   animation-duration: 25s; }
.fingerprint-pattern.p2 { top: 60%; right: 8%;  animation-duration: 35s; animation-direction: reverse; }
.fingerprint-pattern.p3 { bottom: 15%; left: 15%; animation-duration: 40s; opacity: 0.03; }
.fingerprint-pattern.p4 { top: 30%; right: 25%; animation-duration: 28s; animation-direction: reverse; opacity: 0.05; }

@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ── Card wrapper ─────────────────────────────────────────────────────── */
.login-wrapper {
  position: relative; z-index: 10; min-height: 100vh;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}

.login-card {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 20px;
  padding: 40px 35px;
  width: 100%; max-width: 420px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
  animation: slideUp 0.6s ease-out;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Logo ─────────────────────────────────────────────────────────────── */
.login-logo { text-align: center; margin-bottom: 30px; }

.logo-icon {
  font-size: 56px; color: #4ADE80;
  filter: drop-shadow(0 0 20px rgba(74,222,128,0.4));
  margin-bottom: 12px; display: block;
  animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 20px rgba(74,222,128,0.4)); }
  50%       { transform: scale(1.05); filter: drop-shadow(0 0 30px rgba(74,222,128,0.6)); }
}

.logo-text { font-size: 32px; font-weight: 700; letter-spacing: -1px; }
.logo-text .gat { color: #fff; }
.logo-text .ro  { color: #4ADE80; }

.login-subtitle {
  text-align: center; color: rgba(255,255,255,0.55);
  font-size: 13px; margin-bottom: 28px; letter-spacing: 0.2px;
}

/* ── Form ─────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 20px; }

label {
  display: block; color: rgba(255,255,255,0.8);
  font-size: 13px; font-weight: 500; margin-bottom: 8px; letter-spacing: 0.3px;
}

.input-wrapper { position: relative; }

.form-input {
  width: 100%; padding: 13px 15px 13px 45px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; color: #fff; font-size: 14px;
  transition: all 0.2s ease;
}

.form-input::placeholder { color: rgba(255,255,255,0.35); }

.form-input:focus {
  outline: none; border-color: #4ADE80;
  background: rgba(0,0,0,0.35);
  box-shadow: 0 0 0 3px rgba(74,222,128,0.15);
}

.input-icon {
  position: absolute; left: 15px; top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.4); font-size: 15px;
  pointer-events: none; transition: color 0.2s;
}

/* icon color follows focus (icon is a sibling AFTER input in DOM) */
.form-input:focus ~ .input-icon { color: #4ADE80; }

/* ── Submit button ────────────────────────────────────────────────────── */
.login-btn {
  width: 100%; padding: 14px;
  background: linear-gradient(135deg, #1D9E75 0%, #4ADE80 100%);
  border: none; border-radius: 12px;
  color: #fff; font-size: 15px; font-weight: 600;
  cursor: pointer; transition: all 0.2s ease;
  box-shadow: 0 5px 20px rgba(74,222,128,0.3);
  letter-spacing: 0.3px; margin-top: 4px;
}
.login-btn:hover  { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(74,222,128,0.4); }
.login-btn:active { transform: translateY(0); }

/* ── Footer link ──────────────────────────────────────────────────────── */
.login-footer { margin-top: 22px; text-align: center; }

.forgot-link {
  color: rgba(255,255,255,0.55); font-size: 13px;
  text-decoration: none; transition: color 0.2s;
}
.forgot-link:hover { color: #4ADE80; }

/* ── Language bar (top-right) ─────────────────────────────────────────── */
.login-lang-bar {
  position: fixed; top: 22px; right: 22px;
  display: flex; gap: 4px; z-index: 100;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 6px 8px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
}
.login-lang-bar a {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 9px; border-radius: 7px;
  text-decoration: none; color: rgba(255,255,255,0.65);
  font-size: 12px; font-weight: 500; transition: all 0.15s;
}
.login-lang-bar a:hover  { background: rgba(255,255,255,0.08); color: #fff; }
.login-lang-bar a.active { background: rgba(74,222,128,0.2); color: #4ADE80; }
.login-lang-bar .fi { font-size: 14px; }

/* ── Flash messages ───────────────────────────────────────────────────── */
.flash-message {
  padding: 11px 14px; border-radius: 10px;
  margin-bottom: 16px; font-size: 13px;
  display: flex; align-items: center; gap: 10px;
}
.flash-error {
  background: rgba(239,68,68,0.15);
  border: 1px solid rgba(239,68,68,0.3);
  color: #FCA5A5;
}
.flash-success {
  background: rgba(74,222,128,0.15);
  border: 1px solid rgba(74,222,128,0.3);
  color: #86EFAC;
}

/* ── Forgot-password success block ───────────────────────────────────── */
.success-block {
  text-align: center; padding: 20px 0 10px;
}
.success-block .success-icon {
  font-size: 48px; color: #4ADE80;
  margin-bottom: 14px; display: block;
}
.success-block p {
  color: rgba(255,255,255,0.75); font-size: 14px; line-height: 1.6; margin: 0 0 20px;
}

.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(255,255,255,0.6); font-size: 13px;
  text-decoration: none; transition: color 0.2s; margin-top: 10px;
}
.back-link:hover { color: #4ADE80; }

/* ── Version watermark ────────────────────────────────────────────────── */
.login-version {
  position: fixed; bottom: 15px; right: 20px;
  color: rgba(255,255,255,0.25); font-size: 11px; z-index: 10;
  user-select: none;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .login-card { padding: 30px 20px; border-radius: 16px; }
  .logo-icon   { font-size: 44px; }
  .logo-text   { font-size: 26px; }
  .login-lang-bar { top: 14px; right: 14px; padding: 4px 6px; }
  .login-lang-bar a { padding: 4px 7px; font-size: 11px; }
}