:root{
  --f-ink:#0F231B;
  --f-ink-soft:#3C5348;
  --f-muted:#6E8378;
  --f-line:rgba(15,35,27,0.10);
  --f-line-strong:rgba(15,35,27,0.18);
  --f-cream:#F6F4EC;
  --f-paper:#FFFFFF;
  --f-emerald:#0E3B2C;
  --f-emerald-2:#155A42;
  --f-mint:#3FB784;
  --f-mint-soft:#DDF0E5;
  --f-gold:#C79A3C;
  --f-coral:#D9573F;
  --f-coral-soft:#F8DFD8;
}

.finaco-auth-screen{
  min-height:80vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 16px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  box-sizing:border-box;
}
.finaco-auth-screen *{ box-sizing:border-box; }

.finaco-auth-card{
  width:100%;
  max-width:400px;
  background:var(--f-paper);
  border-radius:22px;
  box-shadow:0 20px 48px rgba(15,35,27,0.16);
  padding:32px 30px;
}

.finaco-auth-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:26px;
}
.finaco-auth-mark{
  width:42px; height:42px; border-radius:12px;
  background:linear-gradient(155deg, var(--f-mint), var(--f-gold));
  color:var(--f-emerald);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:19px;
  font-family:Georgia,'Times New Roman',serif;
  flex-shrink:0;
}
.finaco-auth-brand-name{
  font-family:Georgia,'Times New Roman',serif;
  font-size:20px; font-weight:700; color:var(--f-ink);
  line-height:1.2;
}
.finaco-auth-brand-sub{
  font-size:11.5px; color:var(--f-muted); margin-top:1px;
}

.finaco-auth-title{
  font-family:Georgia,'Times New Roman',serif;
  font-size:19px; font-weight:700; color:var(--f-ink);
  margin-bottom:4px;
}
.finaco-auth-sub{
  font-size:13px; color:var(--f-muted); margin-bottom:22px; line-height:1.5;
}

.finaco-auth-screen button{
  -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent; outline:none;
}
.finaco-auth-screen input{
  -webkit-appearance:none; appearance:none;
}

.finaco-auth-field{ margin-bottom:16px; }
.finaco-auth-field label{
  display:block; font-size:12px; font-weight:600; color:var(--f-ink-soft); margin-bottom:6px;
}
.finaco-auth-field input{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid var(--f-line-strong); background:var(--f-cream);
  font-size:14.5px; color:var(--f-ink); transition:border-color .15s ease, background .15s ease;
}
.finaco-auth-field input:focus{
  outline:none; border-color:var(--f-emerald-2); background:var(--f-paper);
}

.finaco-auth-pass-wrap{ position:relative; }
.finaco-auth-pass-wrap input{ padding-right:44px; }
.finaco-auth-pass-toggle{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border:none; background:transparent; border-radius:8px;
  color:var(--f-muted); display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.finaco-auth-pass-toggle:hover{ background:var(--f-line); color:var(--f-ink); }
.finaco-auth-pass-toggle.active{ color:var(--f-emerald-2); }

.finaco-auth-error{
  background:var(--f-coral-soft); color:#9E3B27; font-size:12.5px;
  padding:10px 12px; border-radius:10px; margin-bottom:14px; line-height:1.4;
}

.finaco-auth-submit{
  width:100%; padding:13px; border-radius:13px; border:none;
  background:var(--f-emerald); color:#fff; font-weight:600; font-size:14.5px;
  cursor:pointer; transition:background .15s ease, transform .1s ease;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.finaco-auth-submit:hover{ background:var(--f-emerald-2); }
.finaco-auth-submit:active{ transform:scale(0.98); }
.finaco-auth-submit:disabled{ opacity:0.65; cursor:default; }
.finaco-auth-submit-ghost{
  background:var(--f-cream); color:var(--f-ink); border:1px solid var(--f-line-strong); margin-top:6px;
}
.finaco-auth-submit-ghost:hover{ background:var(--f-line); }

.finaco-auth-spinner{
  width:15px; height:15px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.4); border-top-color:#fff;
  animation:finacoSpin .7s linear infinite;
}
@keyframes finacoSpin{ to{ transform:rotate(360deg); } }

.finaco-auth-note{
  font-size:12px; color:var(--f-muted); text-align:center; margin-top:20px; line-height:1.5;
}

@media (max-width:480px){
  .finaco-auth-card{ padding:26px 22px; border-radius:18px; }
  .finaco-auth-screen{ min-height:70vh; padding:16px 12px; }
}