/* ================================================================
   Femco Bank — Modern Banking Interface v2
   Theme: Deep slate with gold accents (improved contrast)
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  --navy:        #0d1b2a;
  --navy-mid:    #162032;
  --navy-light:  #1e2d42;
  --navy-card:   #1a2a3e;
  --gold:        #d4a843;
  --gold-light:  #ecc96a;
  --gold-dim:    #9a7830;
  --white:       #ffffff;
  --text-main:   #d0daea;
  --text-muted:  #6e84a3;
  --text-label:  #8a9bb5;
  --green:       #27c97a;
  --green-bg:    rgba(39,201,122,0.13);
  --green-border:rgba(39,201,122,0.3);
  --red:         #f06060;
  --red-bg:      rgba(240,96,96,0.13);
  --red-border:  rgba(240,96,96,0.3);
  --blue:        #5aadff;
  --blue-bg:     rgba(90,173,255,0.13);
  --border:      rgba(212,168,67,0.15);
  --border-dim:  rgba(255,255,255,0.06);
  --shadow:      0 12px 48px rgba(0,0,0,0.5);
  --shadow-sm:   0 4px 16px rgba(0,0,0,0.3);
  --radius:      10px;
  --radius-lg:   16px;
  --radius-xl:   22px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:'DM Sans',sans-serif;
  background:var(--navy);
  color:var(--text-main);
  min-height:100vh;
  background-image:
    radial-gradient(ellipse 80% 50% at 0% 0%, rgba(90,173,255,0.06), transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(212,168,67,0.06), transparent 60%);
}
a{color:var(--gold);text-decoration:none;transition:color .2s}
a:hover{color:var(--gold-light)}

/* Wrapper */
.fb-wrap{max-width:1100px;margin:0 auto;padding:0 20px}

/* Top bar */
.fb-topbar{display:flex;align-items:center;justify-content:space-between;padding:20px 0 18px;border-bottom:1px solid var(--border)}
.fb-logo{display:flex;align-items:center;gap:14px}
.fb-logo img{height:48px;border-radius:6px}
.fb-logo-text{font-family:'Playfair Display',serif;font-size:1.35rem;color:var(--white)}
.fb-logo-sub{font-size:.68rem;color:var(--text-muted);letter-spacing:.12em;text-transform:uppercase;margin-top:1px}
.fb-topbar-right{text-align:right}
.fb-topbar-name{font-weight:600;color:var(--gold);font-size:.9rem}
.fb-topbar-acc{font-size:.75rem;color:var(--text-muted);margin-top:2px}

/* Layout */
.fb-layout{display:grid;grid-template-columns:210px 1fr;gap:22px;padding:24px 0 60px;align-items:start}

/* Sidebar */
.fb-sidebar{background:var(--navy-mid);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow);position:sticky;top:20px}
.fb-profile-card{background:linear-gradient(160deg,var(--navy-light),var(--navy-mid));padding:22px 14px 18px;text-align:center;border-bottom:1px solid var(--border)}
.fb-avatar-wrap{width:82px;height:82px;margin:0 auto 10px;border-radius:50%;border:2px solid var(--gold);overflow:hidden;box-shadow:0 0 0 4px rgba(212,168,67,0.12),var(--shadow-sm)}
.fb-avatar-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.fb-profile-name{font-family:'Playfair Display',serif;font-size:.95rem;color:var(--white);margin-bottom:2px}
.fb-profile-acc{font-size:.68rem;color:var(--gold);letter-spacing:.06em}
.fb-nav{padding:12px 0 10px}
.fb-nav-section{padding:8px 16px 4px;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.fb-nav a{display:flex;align-items:center;gap:9px;padding:9px 16px;font-size:.82rem;color:var(--text-main);transition:background .15s,color .15s;border-left:2px solid transparent}
.fb-nav a:hover{background:rgba(212,168,67,0.07);color:var(--gold-light);border-left-color:rgba(212,168,67,0.4)}
.fb-nav a.active{background:rgba(212,168,67,0.1);color:var(--gold-light);border-left-color:var(--gold)}
.fb-nav a svg{width:15px;height:15px;flex-shrink:0;opacity:.65}
.fb-nav a:hover svg,.fb-nav a.active svg{opacity:1}
.fb-nav-divider{height:1px;background:var(--border-dim);margin:8px 14px}
.fb-nav-logout{display:flex;align-items:center;gap:9px;margin:8px 12px 12px;padding:9px 14px;border-radius:8px;font-size:.82rem;font-weight:600;background:var(--red-bg);border:1px solid var(--red-border);color:var(--red);cursor:pointer;transition:background .15s;text-decoration:none}
.fb-nav-logout:hover{background:rgba(240,96,96,0.22);color:var(--red)}

/* Content */
.fb-content{background:var(--navy-mid);border:1px solid var(--border);border-radius:var(--radius-xl);padding:32px 34px;box-shadow:var(--shadow);min-height:520px}
.fb-page-header{margin-bottom:22px}
.fb-page-title{font-family:'Playfair Display',serif;font-size:1.45rem;color:var(--white);margin-bottom:4px}
.fb-page-sub{font-size:.82rem;color:var(--text-muted)}
.fb-divider{height:1px;background:var(--border-dim);margin:20px 0}

/* Summary layout */
.fb-summary-grid{display:grid;grid-template-columns:150px 1fr;gap:28px;align-items:start}
.fb-summary-photo{text-align:center}
.fb-summary-photo-img{width:138px;height:138px;border-radius:var(--radius-lg);border:2px solid var(--gold);overflow:hidden;box-shadow:0 0 0 4px rgba(212,168,67,0.1),var(--shadow-sm);margin:0 auto 8px}
.fb-summary-photo-img img{width:100%;height:100%;object-fit:cover;display:block}
.fb-summary-photo-name{font-size:.76rem;color:var(--text-muted)}

/* Info sections */
.fb-info-section{margin-bottom:20px}
.fb-info-section-title{font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.fb-info-grid{display:grid;grid-template-columns:155px 1fr}
.fb-info-label{padding:8px 0;font-size:.8rem;color:var(--text-label);border-bottom:1px solid var(--border-dim)}
.fb-info-value{padding:8px 0 8px 14px;font-size:.85rem;color:var(--text-main);border-bottom:1px solid var(--border-dim)}

/* Balance cards (summary) */
.fb-balance-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
.fb-balance-card{background:var(--navy-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 18px}
.fb-balance-card-label{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
.fb-balance-card-value{font-family:'Playfair Display',serif;font-size:1.3rem;font-variant-numeric:tabular-nums}
.fb-balance-card-sub{font-size:.7rem;color:var(--text-muted);margin-top:3px}

/* Pills */
.fb-pill{display:inline-block;padding:2px 10px;border-radius:20px;font-size:.7rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.fb-pill-green{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)}
.fb-pill-red{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border)}
.fb-pill-gold{background:rgba(212,168,67,0.13);color:var(--gold);border:1px solid rgba(212,168,67,0.3)}

/* Location */
.fb-location{display:flex;align-items:center;gap:7px}
.fb-location-flag{font-size:1.1rem;line-height:1}

/* Statement table */
.fb-stmt-table{width:100%;border-collapse:collapse;font-size:.83rem}
.fb-stmt-table thead tr{background:rgba(212,168,67,0.07)}
.fb-stmt-table th{padding:10px 12px;text-align:left;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:600;border-bottom:1px solid var(--border);white-space:nowrap}
.fb-stmt-table th.r,.fb-stmt-table td.r{text-align:right}
.fb-stmt-table th.c,.fb-stmt-table td.c{text-align:center}
.fb-stmt-table td{padding:11px 12px;border-bottom:1px solid var(--border-dim);vertical-align:middle;color:var(--text-main)}
.fb-stmt-table tbody tr:hover td{background:rgba(255,255,255,0.02)}
.fb-stmt-table tbody tr:last-child td{border-bottom:none}
.fb-tx-debit{color:#ff8080;font-weight:600;font-variant-numeric:tabular-nums}
.fb-tx-credit{color:#3de89a;font-weight:600;font-variant-numeric:tabular-nums}
.fb-tx-dash{color:var(--text-muted)}
.fb-tx-ref{font-size:.76rem;color:var(--text-muted);font-family:monospace}
.fb-stmt-totals td{background:rgba(212,168,67,0.05);border-top:1px solid var(--border);font-weight:600;font-size:.82rem;padding:10px 12px;border-bottom:none}

/* Forms */
.fb-form-group{margin-bottom:16px}
.fb-label{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
.fb-input,.fb-select,.fb-textarea{width:100%;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.09);border-radius:var(--radius);padding:11px 14px;color:var(--white);font-family:'DM Sans',sans-serif;font-size:.9rem;transition:border-color .2s,box-shadow .2s;outline:none}
.fb-input::placeholder{color:rgba(255,255,255,0.2)}
.fb-input:focus,.fb-select:focus,.fb-textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,168,67,0.1)}
.fb-select option{background:var(--navy-mid)}
.fb-textarea{resize:vertical;min-height:80px}
.fb-row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fb-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.fb-form-section{font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:22px 0 12px;padding-bottom:6px;border-bottom:1px solid var(--border)}

/* Buttons */
.fb-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 28px;border-radius:var(--radius);font-family:'DM Sans',sans-serif;font-size:.88rem;font-weight:600;cursor:pointer;border:none;transition:all .18s;letter-spacing:.02em;text-decoration:none}
.fb-btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold-dim));color:#0d1b2a}
.fb-btn-primary:hover{background:linear-gradient(135deg,var(--gold-light),var(--gold));transform:translateY(-1px);box-shadow:0 6px 24px rgba(212,168,67,0.28);color:#0d1b2a}

/* Alerts */
.fb-alert{padding:12px 16px;border-radius:var(--radius);margin-bottom:18px;font-size:.875rem}
.fb-alert-error{background:var(--red-bg);border:1px solid var(--red-border);color:#f09090}
.fb-alert-success{background:var(--green-bg);border:1px solid var(--green-border);color:var(--green)}

/* Login / Register wrappers */
.fb-login-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 16px;background:radial-gradient(ellipse 70% 50% at 15% 10%,rgba(90,173,255,0.07),transparent),radial-gradient(ellipse 60% 40% at 85% 90%,rgba(212,168,67,0.07),transparent),var(--navy)}
.fb-login-box{width:100%;max-width:430px;background:var(--navy-mid);border:1px solid var(--border);border-radius:var(--radius-xl);padding:38px 36px;box-shadow:var(--shadow);animation:fb-rise .4s ease}
.fb-register-box{width:100%;max-width:680px;background:var(--navy-mid);border:1px solid var(--border);border-radius:var(--radius-xl);padding:38px 40px;box-shadow:var(--shadow);animation:fb-rise .4s ease}
@keyframes fb-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.fb-login-logo{text-align:center;margin-bottom:24px}
.fb-login-logo img{height:52px;border-radius:6px;margin-bottom:10px}
.fb-login-logo h1{font-family:'Playfair Display',serif;font-size:1.4rem;color:var(--white)}
.fb-login-logo p{font-size:.78rem;color:var(--text-muted);margin-top:3px}
.fb-login-step{display:inline-block;background:rgba(212,168,67,0.1);border:1px solid rgba(212,168,67,0.2);color:var(--gold);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;padding:3px 12px;border-radius:20px;margin-bottom:20px}
.fb-login-footer{text-align:center;margin-top:22px;font-size:.78rem;color:var(--text-muted);line-height:1.9}

/* Footer */
.fb-footer{border-top:1px solid var(--border-dim);padding:18px 0;text-align:center;font-size:.75rem;color:var(--text-muted)}
.fb-footer a{color:var(--text-muted)}
.fb-footer a:hover{color:var(--gold)}

/* Empty state */
.fb-empty{text-align:center;padding:50px 20px;color:var(--text-muted);font-size:.9rem}

/* Responsive */
@media(max-width:760px){
  .fb-layout,.fb-summary-grid{grid-template-columns:1fr}
  .fb-sidebar{position:static}
  .fb-topbar{flex-direction:column;gap:10px;text-align:center}
  .fb-content{padding:20px 16px}
  .fb-row-2,.fb-row-3,.fb-balance-cards{grid-template-columns:1fr}
  .fb-register-box{padding:28px 18px}
  .fb-info-grid{grid-template-columns:120px 1fr}
}