/* ============================================================
   ACE ELITE BANK — Design System
   Green + white + black, serif display / sans body
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  /* Core palette */
  --navy-950:#050806;
  --navy-900:#0A1410;
  --navy-800:#10261D;
  --navy-700:#173E2D;
  --royal-600:#0E7A53;
  --royal-700:#075D3F;
  --royal-500:#16A36F;
  --gold-500:#18A866;
  --gold-400:#56D990;
  --gold-100:#DDF8E9;
  --white:#FFFFFF;
  --gray-50:#F5F8F6;
  --gray-100:#EAF0EC;
  --gray-200:#D9E3DD;
  --gray-300:#C3D0C8;
  --gray-500:#68766E;
  --gray-600:#48564E;
  --charcoal:#111513;
  --success:#118A57;
  --success-bg:#E7F6EF;
  --danger:#D64545;
  --danger-bg:#FBEAEA;
  --warn:#B87A1E;
  --warn-bg:#FBF1E1;

  /* Type */
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Radii / shadow */
  --r-sm:8px;
  --r-md:12px;
  --r-lg:20px;
  --shadow-sm:0 1px 2px rgba(11,30,61,.06), 0 1px 1px rgba(11,30,61,.04);
  --shadow-md:0 8px 24px -8px rgba(11,30,61,.18);
  --shadow-lg:0 24px 48px -16px rgba(11,30,61,.28);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--charcoal);
  background:var(--gray-50);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.12;
  margin:0 0 .5em;
  color:var(--navy-900);
  letter-spacing:-0.01em;
}
p{margin:0 0 1em; color:var(--gray-600);}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--royal-500); outline-offset:2px; border-radius:4px;}

.wrap{max-width:1240px; margin:0 auto; padding:0 28px;}
@media (max-width:640px){ .wrap{padding:0 18px;} }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:15px;
  padding:13px 24px; border-radius:10px; border:1px solid transparent;
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-gold{background:linear-gradient(180deg,var(--gold-400),var(--gold-500)); color:var(--navy-950); box-shadow:var(--shadow-sm);}
.btn-gold:hover{box-shadow:var(--shadow-md);}
.btn-navy{background:var(--navy-900); color:var(--white);}
.btn-navy:hover{background:var(--navy-800);}
.btn-outline{background:transparent; border-color:rgba(255,255,255,.35); color:var(--white);}
.btn-outline:hover{background:rgba(255,255,255,.08);}
.btn-outline-dark{background:transparent; border-color:var(--gray-300); color:var(--navy-900);}
.btn-outline-dark:hover{background:var(--gray-100);}
.btn-royal{background:var(--royal-600); color:var(--white);}
.btn-royal:hover{background:var(--royal-700);}
.btn-danger{background:var(--danger); color:var(--white);}
.btn-danger-outline{background:transparent;border:1px solid var(--danger);color:var(--danger);}
.btn-ghost{background:transparent;border:1px solid var(--gray-200); color:var(--navy-900);}
.btn-ghost:hover{background:var(--gray-100);}
.btn-sm{padding:8px 14px; font-size:13px; border-radius:8px;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.55; cursor:not-allowed;}

/* ---------- Badges / pills / status ---------- */
.pill{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:12.5px; font-weight:600;}
.pill-success{background:var(--success-bg); color:var(--success);}
.pill-warn{background:var(--warn-bg); color:var(--warn);}
.pill-danger{background:var(--danger-bg); color:var(--danger);}
.pill-royal{background:#E8F8EF; color:var(--royal-700);}
.pill-gray{background:var(--gray-100); color:var(--gray-600);}
.pill-gold{background:var(--gold-100); color:#08613E;}
.dot{width:7px; height:7px; border-radius:50%; background:currentColor; display:inline-block;}

/* ---------- Cards ---------- */
.card{background:var(--white); border:1px solid var(--gray-200); border-radius:var(--r-lg);}
.card-pad{padding:24px;}

/* ---------- Forms ---------- */
label{display:block; font-size:13px; font-weight:600; color:var(--navy-900); margin-bottom:6px;}
.field{margin-bottom:18px;}
.input, select.input, textarea.input{
  width:100%; padding:12px 14px; border:1.5px solid var(--gray-200); border-radius:10px;
  font-family:var(--font-body); font-size:15px; color:var(--charcoal); background:var(--white);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.input:focus{border-color:var(--royal-500); box-shadow:0 0 0 4px rgba(22,163,111,.14); outline:none;}
.input-group{position:relative;}
.input-group .input{padding-right:44px;}
.input-icon-btn{position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--gray-500); padding:6px;}
.hint{font-size:12.5px; color:var(--gray-500); margin-top:6px;}
.error-text{font-size:12.5px; color:var(--danger); margin-top:6px; display:none;}
.field.has-error .input{border-color:var(--danger);}
.field.has-error .error-text{display:block;}
fieldset{border:none; padding:0; margin:0;}

/* Password strength */
.pw-strength{display:flex; gap:5px; margin-top:8px;}
.pw-strength i{height:4px; flex:1; border-radius:3px; background:var(--gray-200); display:block;}
.pw-strength[data-level="1"] i:nth-child(1){background:var(--danger);}
.pw-strength[data-level="2"] i:nth-child(-n+2){background:var(--warn);}
.pw-strength[data-level="3"] i:nth-child(-n+3){background:#3D8FE0;}
.pw-strength[data-level="4"] i:nth-child(-n+4){background:var(--success);}

/* ---------- Utility ---------- */
.flex{display:flex;} .items-center{align-items:center;} .justify-between{justify-content:space-between;}
.gap-8{gap:8px;} .gap-12{gap:12px;} .gap-16{gap:16px;} .gap-24{gap:24px;}
.muted{color:var(--gray-500);}
.gold-text{color:var(--gold-500);}
.hidden{display:none !important;}
.sr-only{position:absolute; width:1px;height:1px; overflow:hidden; clip:rect(0,0,0,0);}

/* ---------- Toasts ---------- */
#toast-region{position:fixed; top:20px; right:20px; z-index:900; display:flex; flex-direction:column; gap:10px; max-width:340px;}
.toast{background:var(--navy-900); color:var(--white); padding:14px 16px; border-radius:10px; box-shadow:var(--shadow-lg);
  font-size:13.5px; display:flex; align-items:flex-start; gap:10px; animation:toast-in .25s ease;}
.toast.success{background:var(--success);}
.toast.error{background:var(--danger);}
@keyframes toast-in{from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);}}

/* ---------- Modal ---------- */
.modal-overlay{position:fixed; inset:0; background:rgba(8,21,39,.55); backdrop-filter:blur(2px); z-index:800;
  display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .18s ease;}
.modal-overlay.open{opacity:1; pointer-events:auto;}
.modal{background:var(--white); border-radius:var(--r-lg); width:100%; max-width:440px; max-height:92vh; overflow-y:auto;
  box-shadow:var(--shadow-lg); transform:translateY(10px) scale(.98); transition:transform .2s ease; padding:32px;}
.modal-overlay.open .modal{transform:translateY(0) scale(1);}
.modal-wide{max-width:560px;}
.modal-close{position:absolute; top:18px; right:18px;}
.modal-head{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:6px;}

/* ---------- Skeleton / loading ---------- */
.skel{background:linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 37%, var(--gray-100) 63%);
  background-size:400% 100%; animation:skel-shine 1.4s ease infinite; border-radius:8px;}
@keyframes skel-shine{0%{background-position:100% 0;} 100%{background-position:-100% 0;}}
.spinner{width:18px; height:18px; border-radius:50%; border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff; animation:spin .7s linear infinite;}
.spinner-dark{border:2.5px solid var(--gray-200); border-top-color:var(--royal-600);}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- Scrollbar (subtle) ---------- */
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-thumb{background:var(--gray-300); border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}
/* Persistent access to the support workspace on every page. */
.support-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 80;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 50%;
  background: #0e7a53;
  color: #fff;
  box-shadow: 0 10px 24px rgba(7, 93, 63, .28);
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}

.support-fab:hover,
.support-fab:focus-visible {
  transform: translateY(-2px);
  background: #075d3f;
  box-shadow: 0 14px 28px rgba(7, 93, 63, .34);
  outline: none;
}

@media (max-width: 600px) {
  .support-fab {
    right: 16px;
    bottom: 16px;
  }
}