/* ============================================================
   Aplikacioni i Financave — MPFVLC  ·  Stili i faqes HYRJE
   Pamja: Republika e Kosovës / onestop-gov (navy + ari)
   ============================================================ */

:root{
  --bg-0:#06182f;
  --bg-1:#0a2140;
  --bg-2:#103062;
  --card:#0d2748;
  --card-2:#0a1f3b;
  --gold:#d4b24c;
  --gold-2:#ead08a;
  --gold-deep:#b4892c;
  --cream:#f4efe2;
  --muted:#93a7c4;
  --muted-2:#6e85a6;
  --danger:#ff6b6b;
  --ok:#5fd0a0;
  --ring: 0 0 0 3px rgba(212,178,76,.18);
  --font-serif: "Playfair Display", "PT Serif", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--cream);
  background:
    radial-gradient(1100px 700px at 50% -8%, rgba(31,74,140,.55), transparent 60%),
    radial-gradient(900px 600px at 50% 120%, rgba(16,48,98,.40), transparent 60%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 55%, #040f1f 100%);
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:40px max(16px, env(safe-area-inset-left,0px)) 28px;
}

.wrap{ width:100%; max-width:560px; display:flex; flex-direction:column; align-items:center; }

/* ---------- Stema + titujt ---------- */
.brand{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:2px; animation:fadeUp .7s ease both; }
.emblem{ width:auto; height:75px; object-fit:contain; filter:drop-shadow(0 8px 20px rgba(0,0,0,.55)); margin-bottom:12px; }

.brand h1{
  font-family:var(--font-serif);
  font-weight:700;
  font-size:30px;
  line-height:1.15;
  margin:6px 0 0;
  color:var(--cream);
  letter-spacing:.3px;
  text-wrap:balance;
}
.brand .gov{ font-family:var(--font-serif); font-weight:600; font-size:26px; color:var(--cream); margin-top:-2px; }
.brand .ministry{
  color:var(--gold-2);
  font-weight:600;
  font-size:15px;
  line-height:1.4;
  margin-top:12px;
  max-width:360px;
  text-wrap:balance;
}
.brand .system{
  color:var(--gold);
  font-weight:700;
  font-size:13px;
  letter-spacing:3.5px;
  text-transform:uppercase;
  margin-top:10px;
}
.divider{
  width:120px; height:2px; margin:20px 0 6px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius:2px;
}

/* ---------- Karta e hyrjes ---------- */
.card{
  width:100%;
  margin-top:26px;
  background:linear-gradient(180deg, rgba(16,40,76,.72), rgba(9,26,52,.82));
  border:1px solid rgba(212,178,76,.42);
  border-radius:18px;
  padding:30px 34px 34px;
  box-shadow:0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(2px);
  animation:fadeUp .7s .1s ease both;
}
.card__title{
  text-align:center;
  color:var(--gold-2);
  font-weight:700;
  letter-spacing:2.5px;
  font-size:14px;
  text-transform:uppercase;
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin-bottom:6px;
}
.card__hint{
  text-align:center;
  color:var(--muted);
  font-size:12.5px;
  margin:0 0 22px;
  line-height:1.5;
}

.field{ margin-bottom:18px; }
.field label{
  display:flex; align-items:center; gap:7px;
  color:var(--gold-2);
  font-weight:700; font-size:11.5px; letter-spacing:1.6px; text-transform:uppercase;
  margin-bottom:9px;
}
.field .q{
  display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; border-radius:50%;
  border:1px solid rgba(212,178,76,.5); color:var(--gold);
  font-size:9px; font-weight:700; cursor:help; letter-spacing:0;
}
.input-wrap{ position:relative; }
.field input{
  width:100%;
  background:rgba(5,16,33,.6);
  border:1px solid rgba(147,167,196,.28);
  border-radius:12px;
  color:var(--cream);
  font-size:15px;
  padding:15px 16px;
  outline:none;
  transition:border-color .18s, box-shadow .18s, background .18s;
  font-family:var(--font-sans);
}
.field input::placeholder{ color:var(--muted-2); }
.field input:focus{
  border-color:var(--gold);
  box-shadow:var(--ring);
  background:rgba(7,20,40,.85);
}
.toggle-pass{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--muted); cursor:pointer;
  font-size:12px; letter-spacing:1px; padding:6px; font-weight:600;
}
.toggle-pass:hover{ color:var(--gold-2); }

.btn-login{
  width:100%; margin-top:10px;
  border:none; cursor:pointer;
  border-radius:12px;
  padding:16px 18px;
  font-family:var(--font-sans);
  font-weight:800; font-size:15px; letter-spacing:2px; text-transform:uppercase;
  color:#2a1e05;
  background:linear-gradient(180deg, var(--gold-2), var(--gold) 45%, var(--gold-deep));
  box-shadow:0 10px 26px rgba(212,178,76,.30), inset 0 1px 0 rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center; gap:12px;
  transition:transform .12s, box-shadow .18s, filter .18s;
}
.btn-login:hover{ filter:brightness(1.05); box-shadow:0 14px 34px rgba(212,178,76,.42); }
.btn-login:active{ transform:translateY(1px); }
.btn-login[disabled]{ filter:grayscale(.4) brightness(.8); cursor:wait; }
.btn-login .arrow{ transition:transform .18s; }
.btn-login:hover .arrow{ transform:translateX(4px); }

/* ---------- Mesazhet ---------- */
.msg{
  margin-top:16px; padding:12px 14px; border-radius:10px;
  font-size:13px; line-height:1.45; display:none; align-items:flex-start; gap:9px;
}
.msg.show{ display:flex; animation:fadeUp .3s ease both; }
.msg.error{ background:rgba(255,107,107,.1); border:1px solid rgba(255,107,107,.4); color:#ffb3b3; }
.msg.ok{ background:rgba(95,208,160,.1); border:1px solid rgba(95,208,160,.4); color:#a6eccf; }

/* ---------- Fundi ---------- */
.foot{
  text-align:center; margin-top:28px; color:var(--muted-2);
  font-size:12px; line-height:1.7; animation:fadeUp .7s .2s ease both;
}
.foot .dev{ color:var(--muted); }
.foot .dev b{ color:var(--gold); font-weight:700; }

/* spinner */
.spin{ width:16px;height:16px;border:2px solid rgba(42,30,5,.35);border-top-color:#2a1e05;border-radius:50%;animation:rot .7s linear infinite; }
@keyframes rot{ to{ transform:rotate(360deg);} }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }

@media (max-width:460px){
  .card{ padding:24px 20px 28px; }
  .brand h1{ font-size:25px; }
  .brand .gov{ font-size:22px; }
  .emblem{ width:auto; height:62px; }
}