/* Fiji Bank Suite — Mobile UI Enhancer v1.0.1 */
:root{
  --fbs-primary:#004080; --fbs-accent:#0077B6; --fbs-gold:#D4AF37; --fbs-ink:#0E2235; --fbs-bg:#F4F6FA; --fbs-muted:#6B7A90; --fbs-success:#16a34a; --fbs-danger:#dc2626;
}
/* Portal card (homepage login area) */
.fbs-portal .fbs-card{
  background: linear-gradient(180deg, rgba(0,64,128,.92), rgba(0,64,128,.78));
  border-radius: 20px; padding: 20px; color:#fff;
  box-shadow: 0 18px 50px rgba(0,0,0,.15); backdrop-filter: blur(6px);
}
.fbs-portal .fbs-card__title, .fbs-portal .fbs-card__copy{ color:#fff; text-shadow: 0 1px 0 rgba(0,0,0,.08); }
.fbs-portal .fbs-btn{ border-radius: 12px; font-weight: 800; }
.fbs-portal .fbs-btn--primary{ background:#fff; color:var(--fbs-primary); }
.fbs-portal .fbs-badges svg{ height:18px; opacity:.9 }

/* Top app bar */
.fbs-app__bar{ position:sticky; top:0; z-index:100; background:linear-gradient(180deg, #022B54, #012242); color:#fff; display:flex; align-items:center; justify-content:space-between; padding:12px 16px; box-shadow:0 6px 16px rgba(0,0,0,.18); }
.fbs-app__brand{ font-weight:900; letter-spacing:.06em; }
.fbs-app__nav a{ color:#E6F0FF; text-decoration:none; margin:0 8px; font-weight:700; padding:8px 10px; border-radius:10px; }
.fbs-app__nav a:hover, .fbs-app__nav a.is-active{ background:rgba(255,255,255,.12); color:#fff; }
.fbs-app__nav .fbs-logout{ margin-left:10px; border:1px solid rgba(255,255,255,.25); }

/* App content */
.fbs-app__main{ background:var(--fbs-bg); padding: clamp(12px, 3vw, 28px); }
.fbs-hero{ display:grid; grid-template-columns: 1.2fr .8fr; gap: clamp(12px, 2.5vw, 28px); align-items:stretch; margin-bottom: clamp(14px, 3vw, 32px); }
.fbs-hero h2{ color:#fff; background:linear-gradient(180deg, rgba(0,64,128,.98), rgba(0,64,128,.82)); display:inline-block; padding:8px 14px; border-radius:12px; box-shadow:0 10px 24px rgba(0,64,128,.35); }
.fbs-hero p{ color:#234; }
.fbs-cta .fbs-btn{ margin-right:8px; margin-top:8px; }

/* Tiles */
.fbs-tiles{ display:grid; grid-template-columns: repeat( auto-fill, minmax(180px, 1fr) ); gap:12px; }
.fbs-tile{ display:flex; align-items:center; gap:10px; background:#fff; padding:14px 16px; border-radius:16px; border:1px solid #e6ebf2; text-decoration:none; color:#0E2235; font-weight:800; box-shadow:0 10px 24px rgba(2,43,84,.06); transition: transform .18s ease, box-shadow .18s ease; }
.fbs-tile:hover{ transform: translateY(-2px); box-shadow:0 16px 30px rgba(2,43,84,.12); }
.fbs-tile .dot{ width:12px; height:12px; border-radius:50%; background:conic-gradient(from 90deg, var(--fbs-gold), #F2D885, var(--fbs-gold)); box-shadow: 0 0 0 3px rgba(212,175,55,.18); }

/* Premium ATM card */
.fbs-cardcard{ position:relative; border-radius:20px; background: radial-gradient(120% 80% at 0% 0%, #0A3C76, #021C38); color:#fff; padding:18px; min-height:190px; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.25); isolation:isolate; }
.fbs-cardcard::before{ content:""; position:absolute; inset:-40%; background: conic-gradient(from 120deg, rgba(255,255,255,.05), rgba(255,255,255,.18), rgba(255,255,255,0) 40%); transform: rotate(8deg); }
.fbs-cardcard::after{ content:""; position:absolute; inset:0; z-index:-1; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 6px 6px; mix-blend-mode: overlay; }
.fbs-cardcard .fbs-chip{ width:38px; height:28px; border-radius:6px; background: linear-gradient(180deg, #d6b35f, #91732e); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.fbs-cardcard .fbs-digits{ letter-spacing:.24em; font-weight:800; margin: 14px 0 8px; }
.fbs-cardcard .fbs-name{ opacity:.85; font-weight:700; }
.fbs-cardcard .brand{ position:absolute; right:16px; bottom:16px; display:flex; align-items:center; gap:10px; }
.fbs-cardcard .mc{ position:relative; width:44px; height:28px; }
.fbs-cardcard .mc::before, .fbs-cardcard .mc::after{ content:""; position:absolute; top:0; width:28px; height:28px; border-radius:50%; background: radial-gradient(circle at 30% 30%, #ffcc66, #c79a2e); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.fbs-cardcard .mc::before{ left:0; }
.fbs-cardcard .mc::after{ right:0; background: radial-gradient(circle at 30% 30%, #ff9966, #c76a2e); mix-blend-mode: screen; }
.fbs-cardcard .brand span{ font-size:10px; letter-spacing:.18em; opacity:.8 }

/* Balance Ticker */
.fbs-balance{ display:flex; align-items:baseline; gap:8px; font-weight:900; color:#0b1f35; }
.fbs-balance .major{ font-size: clamp(28px, 6.2vw, 48px); }
.fbs-balance .minor{ font-size: clamp(14px, 2.8vw, 18px); color:#345; opacity:.85; }

/* Forms */
.fbs-form label{ font-weight:700; color:#123; }
.fbs-form input, .fbs-form select, .fbs-form textarea{ width:100%; padding:12px 13px; border-radius:12px; border:1px solid #dde4ee; background:#fff; }

/* Buttons */
.fbs-btn{ display:inline-flex; align-items:center; justify-content:center; background:var(--fbs-primary); color:#fff; border:0; border-radius:12px; padding:12px 16px; font-weight:900; text-decoration:none; cursor:pointer; box-shadow:0 12px 24px rgba(2,43,84,.18); }
.fbs-btn:hover{ filter:brightness(1.08); transform: translateY(-1px); }
.fbs-btn--primary{ background: linear-gradient(180deg, #0A4F97, #05396E); }

/* Tables */
.fbs-table{ width:100%; border-collapse:separate; border-spacing:0 8px; }
.fbs-table thead th{ text-align:left; color:#335; font-size:14px; }
.fbs-table tbody tr{ background:#fff; box-shadow:0 8px 20px rgba(2,43,84,.06); }
.fbs-table td, .fbs-table th{ padding:12px 14px; }
.fbs-table .credit{ color:#16a34a; font-weight:900; }
.fbs-table .debit{ color:#dc2626; font-weight:900; }

/* Badges */
.fbs-badges{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.fbs-badges span{ background:#fff; border:1px solid #e6ebf2; color:#123; padding:8px 10px; border-radius:10px; font-weight:800; box-shadow: 0 8px 18px rgba(2,43,84,.06); }

/* Responsiveness */
@media (max-width: 980px){
  .fbs-hero{ grid-template-columns: 1fr; }
  .fbs-app__nav{ overflow-x:auto; white-space:nowrap; }
  .fbs-app__nav a{ display:inline-block; margin: 0 6px; }
  .fbs-cardcard{ min-height: 180px; }
}
@media (max-width: 680px){
  .fbs-portal .fbs-card{ padding:16px; border-radius:16px; }
  .fbs-tiles{ grid-template-columns: repeat(2, 1fr); gap:10px; }
  .fbs-btn{ width:100%; }
  .fbs-cta .fbs-btn{ width:auto; }
}
@media (max-width: 420px){
  .fbs-tiles{ grid-template-columns: 1fr; }
}