:root{--bg:#f3f8f2;--card:#fff;--text:#213226;--muted:#6d7f72;--primary:#39813d;--primary-soft:rgba(57,129,61,.12);--shadow:0 20px 50px rgba(19,35,21,.10);--radius:20px}
html,body{min-height:100%}
body{margin:0;background:var(--bg)!important;color:var(--text);font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
.ff-login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px 16px}
.ff-login-card{width:100%;max-width:420px;background:var(--card);border:1px solid rgba(30,41,59,.06);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 22px 18px}
.ff-login-brand{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.ff-login-mark{width:52px;height:52px;border-radius:18px;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center}
.ff-login-mark svg{width:22px;height:22px}
.ff-login-title{font-size:18px;font-weight:900;letter-spacing:-.02em}
.ff-login-sub{font-size:13px;color:var(--muted);font-weight:700}
.ff-login-msg{background:rgba(255,188,188,.35);border:1px solid rgba(255,120,120,.35);padding:10px 12px;border-radius:14px;font-weight:800;margin:10px 0 14px;color:#7a1f1f}
.ff-login-card form{margin:0}
.ff-login-card form p{margin:12px 0}
.ff-login-card label{display:block;font-size:13px;font-weight:900;margin-bottom:6px}
.ff-login-card input[type=text],.ff-login-card input[type=password]{width:100%;box-sizing:border-box;padding:12px;border-radius:14px;border:1px solid rgba(30,41,59,.10);background:#fff;outline:none;font-size:14px;font-family:inherit}
.ff-login-card input[type=text]:focus,.ff-login-card input[type=password]:focus{border-color:rgba(57,129,61,.55);box-shadow:0 0 0 4px rgba(57,129,61,.12)}
.ff-login-card input[type=submit]{width:100%;padding:12px 14px;border-radius:14px;border:1px solid rgba(57,129,61,.35);background:rgba(57,129,61,.16);color:#2b2f44;font-weight:900;cursor:pointer;font-family:inherit}
.ff-login-card input[type=submit]:hover{background:rgba(47,107,255,.22)}
.ff-login-links{margin-top:12px;text-align:center}
.ff-login-links a{color:var(--primary);text-decoration:none;font-weight:900;font-size:13px}


/* === FamFin theme refresh v0.13.8 === */

body{
  background:
    radial-gradient(circle at top left, rgba(57,129,61,.10), transparent 26%),
    radial-gradient(circle at bottom right, rgba(57,129,61,.06), transparent 24%),
    var(--bg) !important;
}
.ff-login-card{
  background:linear-gradient(180deg,#ffffff 0%,#fcfefb 100%);
  border-color:rgba(57,129,61,.12);
}
.ff-login-title{color:#1f2d22}
.ff-login-card input[type=submit]{
  color:#173019;
  background:linear-gradient(180deg,rgba(57,129,61,.20) 0%, rgba(57,129,61,.14) 100%);
  box-shadow:0 10px 24px rgba(57,129,61,.12);
}
.ff-login-card input[type=submit]:hover{
  background:linear-gradient(180deg,rgba(57,129,61,.25) 0%, rgba(57,129,61,.18) 100%);
}
.ff-login-links a{color:var(--primary)}

/* FamFin login redesign v0.15.0 */
:root{
  --bg:#eef4fc;
  --card:#ffffff;
  --text:#1f2d45;
  --muted:#6f7f99;
  --primary:#5b82ca;
  --primary-strong:#436dbb;
  --primary-soft:rgba(91,130,202,.12);
  --shadow:0 24px 60px rgba(33,53,96,.14);
}
body{
  background:
    radial-gradient(circle at top left, rgba(91,130,202,.18), transparent 30%),
    radial-gradient(circle at bottom right, rgba(91,130,202,.10), transparent 24%),
    linear-gradient(180deg,#f8fbff 0%, #eef4fc 100%) !important;
  color:var(--text);
}
.ff-login-card{
  border-radius:30px;
  border-color:rgba(198,212,232,.95);
  background:linear-gradient(180deg,#ffffff 0%, #fcfdff 100%);
  box-shadow:var(--shadow);
  padding:30px 28px 24px;
}
.ff-login-mark{
  background:linear-gradient(180deg, rgba(91,130,202,.18) 0%, rgba(91,130,202,.10) 100%);
  color:var(--primary-strong);
}
.ff-login-title{
  font-size:26px;
  color:#1f2e48;
}
.ff-login-sub{color:#6f809a}
.ff-login-card input[type=text],
.ff-login-card input[type=password]{
  min-height:50px;
  border-radius:16px;
  border-color:rgba(198,212,232,.95);
  color:#20304c;
}
.ff-login-card input[type=text]:focus,
.ff-login-card input[type=password]:focus{
  border-color:rgba(91,130,202,.48);
  box-shadow:0 0 0 4px rgba(91,130,202,.12);
}
.ff-login-card input[type=submit]{
  min-height:50px;
  border:none;
  border-radius:16px;
  background:linear-gradient(180deg,var(--primary) 0%, var(--primary-strong) 100%);
  color:#fff;
  box-shadow:0 18px 34px rgba(91,130,202,.18);
}
.ff-login-card input[type=submit]:hover{
  background:linear-gradient(180deg,#6d91d3 0%, #4a73bd 100%);
}
.ff-login-links a{color:var(--primary-strong)}

/* ===== v0.15.1 Iconography refresh ===== */
.ff-login-mark{
  background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 16%, white), color-mix(in srgb, var(--primary) 8%, white));
  border:1px solid color-mix(in srgb, var(--primary) 22%, white);
  color:var(--primary);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 14px 28px rgba(17,22,51,.06);
}
.ff-login-mark svg{width:24px;height:24px;display:block}

/* FamFin v0.15.82 - PWA / Face ID helper */
.ff-login-pwa-hint{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin:14px 0 16px;
  padding:12px 14px;
  border:1px solid rgba(91,130,202,.18);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(91,130,202,.10),rgba(91,130,202,.04));
  color:#263d64;
  font-size:13px;
  line-height:1.35;
}
.ff-login-pwa-hint strong{font-weight:900;color:#17345f;}
.ff-login-pwa-hint span{color:#647694;font-weight:700;}
@media (max-width:560px){
  .ff-login-pwa-hint{font-size:12px;padding:10px 12px;border-radius:14px;}
}