/* Finsoph Pro Login – Black/Gold classic */
:root{
  --gold:#d4af37;
  --deepgold:#b8891a;
  --black:#0a0b0f;
  --charcoal:#111318;
  --ink:#0f1116;
  --muted:#a3a9b6;
  --card:#0b0e14e6;
  --radius:24px;
  --shadow:0 18px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
}

.fpl-wrap{
  min-height:60vh;
  padding:40px 18px;
  background:
    radial-gradient(1200px 600px at 95% -10%, rgba(212,175,55,.25), transparent 45%),
    radial-gradient(900px 500px at -10% 110%, rgba(184,137,26,.20), transparent 45%),
    linear-gradient(135deg, var(--black), var(--charcoal));
  display:grid;
  place-items:center;
  font-family:"Vazirmatn", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color:#e8ebf3;
}

.fpl-shell{
  width:100%; max-width:1100px;
  display:grid; gap:28px;
  grid-template-columns: 1.05fr .95fr;
  align-items:stretch;
}
@media (max-width: 900px){
  .fpl-shell{ grid-template-columns: 1fr; }
  .fpl-hero{ order:-1; min-height: 180px; }
}

.fpl-card{
  background: var(--card);
  backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
}

.fpl-brand .brand{ margin:0; font-weight:800; font-size:26px; letter-spacing:.6px; background:linear-gradient(180deg,var(--gold),#ffe59a); -webkit-background-clip:text; background-clip:text; color:transparent; }
.fpl-brand .tagline{ margin:6px 0 16px; color:var(--muted); }

.fpl-form{ display:grid; gap:14px; }
.f-field{ display:grid; gap:8px; }
.f-field > span{ font-size:13px; color:var(--muted); }
.f-field input[type="text"], .f-field input[type="password"], .f-field input[type="number"]{
  background:#0d1016; color:#e8ebf3;
  border:1px solid #1a1f28;
  border-radius:16px; padding:14px 16px; outline:none;
  transition: border-color .2s, box-shadow .2s, transform .02s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.f-field input:focus{ border-color:rgba(212,175,55,.85); box-shadow:0 0 0 4px rgba(212,175,55,.14); }

.f-pass{ position:relative; }
.f-pass .toggle{
  position:absolute; right:10px; top:34px;
  width:36px; height:36px; border:0; border-radius:12px;
  background: linear-gradient(180deg, rgba(212,175,55,.28), rgba(212,175,55,.10));
  cursor:pointer;
}
.f-pass .toggle:active{ transform:translateY(1px); }

.f-captcha .captcha-row{ display:flex; align-items:center; gap:10px; }
.f-captcha .op{ color:var(--gold); font-weight:600; }

.f-remember{ display:flex; align-items:center; gap:8px; color:#cbd2df; font-size:14px; }

.f-btn{
  appearance:none; border:0; cursor:pointer;
  padding:14px 18px; border-radius:16px; font-weight:700; color:#0a0b0f;
  background: linear-gradient(180deg, var(--gold), #f4d57a);
  box-shadow: 0 12px 30px rgba(212,175,55,.35), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .05s ease, box-shadow .2s ease;
}
.f-btn:hover{ box-shadow: 0 14px 36px rgba(212,175,55,.45), inset 0 1px 0 rgba(255,255,255,.4); }
.f-btn:active{ transform: translateY(1px); }

.f-links{ display:flex; gap:12px; margin-top:4px; }
.f-links a{ color:#ffe59a; text-decoration:none; border-bottom:1px dashed rgba(212,175,55,.5); }
.f-links a:hover{ color:#fff; border-bottom-color:transparent; }

.fpl-alert{ background:#2a1212; color:#ffb4b4; border:1px solid #4b1c1c; padding:10px 12px; border-radius:12px; margin-bottom:8px; }

/* Hero */
.fpl-hero{
  position:relative;
  background:
    radial-gradient(400px 200px at 20% 10%, rgba(212,175,55,.28), transparent 60%),
    linear-gradient(180deg, rgba(212,175,55,.10), transparent 35%),
    linear-gradient(135deg, #0e1117, #0b0d12 60%, #0b0d12);
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: var(--shadow);
  display:grid; place-items:center; text-align:center;
}
.fpl-hero::before{
  content:""; position:absolute; inset:-60px;
  background: conic-gradient(from 220deg, rgba(212,175,55,.28), transparent, rgba(244,213,122,.22), transparent 60%);
  filter: blur(42px); animation: fspin 8s linear infinite;
}
@keyframes fspin{ to{ transform: rotate(1turn);} }
.hero-inner{ position:relative; padding:40px; z-index:1; }
.hero-inner h2{ font-size: clamp(22px, 3.4vw, 40px); color: var(--gold); margin:0 0 8px; letter-spacing:.4px;}
.hero-inner p{ color: var(--muted); margin:0; }

/* Honeypot */
#fpl-hp{ position:absolute !important; left:-9999px !important; opacity:0 !important; width:0 !important; height:0 !important; }

/* Accessibility */
:where(a, button, input):focus-visible{ outline:2px solid rgba(212,175,55,.9); outline-offset:2px; }