/* ===== MiniBank Base (Grid + UI) ===== */

/* Reset & tokens */
:root{
  --bg:#f6f7f9; --card:#fff; --ink:#111; --muted:#6b7280;
  --line:#e5e7eb; --radius:12px; --radius-sm:8px;
  --primary:#111; --primary-ink:#fff;
  --success:#16a34a; --danger:#dc2626; --warning:#f59e0b;
  --link:#2563eb;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif}

/* Container */
.container{max-width:1040px;margin:24px auto;padding:0 24px}

/* Topbar */
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.brand{font-weight:700}
.nav a{color:var(--link);text-decoration:none;margin-left:16px}
.nav a:hover{text-decoration:underline}

/* Cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.card.shadow-sm{box-shadow:0 6px 20px rgba(0,0,0,.06)}
.card-body{padding:16px}
.mb-3{margin-bottom:16px}
.mb-2{margin-bottom:8px}
.mt-2{margin-top:8px}

/* Grid (12-col) */
.row{display:flex;flex-wrap:wrap;gap:16px}
.col-12{flex:0 0 100%}
@media (min-width:768px){
  .col-md-3{flex:0 0 calc(25% - 12px)}
  .col-md-4{flex:0 0 calc(33.333% - 10.666px)}
  .col-md-6{flex:0 0 calc(50% - 8px)}
  .col-md-9{flex:0 0 calc(75% - 12px)}
}

/* Text utils */
.h4{font-size:22px;font-weight:700;margin:0}
.h5{font-size:18px;font-weight:700;margin:0}
.h6{font-size:15px;font-weight:700;margin:0}
.small{font-size:12px;color:var(--muted)}
.text-muted{color:var(--muted)}
.text-success{color:var(--success)}
.text-danger{color:var(--danger)}
.text-nowrap{white-space:nowrap}
.text-uppercase{text-transform:uppercase}

/* Badges */
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;line-height:1}
.text-bg-success{background:rgba(22,163,74,.1);color:var(--success)}
.text-bg-danger{background:rgba(220,38,38,.1);color:var(--danger)}
.text-bg-warning{background:rgba(245,158,11,.15);color:#8a5800}
.text-bg-secondary{background:#eef0f3;color:#374151}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid var(--line);padding:8px 12px;background:#fff;color:#111;cursor:pointer}
.btn:hover{background:#fafafa}
.btn-dark{background:var(--primary);color:var(--primary-ink);border-color:#000}
.btn-dark:hover{filter:brightness(.95)}
.btn-outline-secondary{background:transparent;border-color:var(--line);color:#333}
.btn-sm{padding:6px 10px;border-radius:6px}

/* Forms */
.form-label{display:block;margin-bottom:4px;font-size:12px;color:var(--muted)}
.form-control{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:#fff}
input::placeholder{color:#9aa3ae}
.stack{display:grid;gap:12px}

/* Tables */
.table{width:100%;border-collapse:collapse}
.table thead{background:#f8fafc}
.table th,.table td{padding:10px;border-bottom:1px solid var(--line);text-align:left}
.table-responsive{overflow:auto}

/* Links inline */
.link{color:var(--link);text-decoration:none;margin-right:12px}
.link:hover{text-decoration:underline}

/* Footer */
.footer{margin:24px 0 12px;color:var(--muted);font-size:12px}

/* ===== Virtual Card look (the glossy one you like) ===== */
.virtual-card-wrap{display:flex;gap:16px;flex-wrap:wrap}
.bank-card{
  --radius:16px; --ink:#fff;
  position:relative; width:min(100%, 360px); aspect-ratio:85/54;
  border-radius:var(--radius); padding:18px; color:var(--ink); overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.15);
  background: radial-gradient(120% 120% at 0% 0%, #223b8f 0%, #1d2951 55%, #0f1535 100%);
  isolation:isolate;
}
.bank-card.is-pending{background: radial-gradient(120% 120% at 0% 0%, #3b4d9e 0%, #33406f 55%, #1b2247 100%)}
.bank-card.is-inactive{background: radial-gradient(120% 120% at 0% 0%, #5b5b5b 0%, #3e3e3e 55%, #2a2a2a 100%)}
.bank-card::after{
  content:""; position:absolute; inset:-30% -30% auto auto; width:60%; height:200%;
  transform:rotate(25deg); background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  mix-blend-mode:screen; pointer-events:none; transition:transform .6s ease, opacity .6s ease; opacity:.6;
}
.bank-card:hover::after{ transform:rotate(25deg) translateX(-10%); opacity:.9; }
.bank-card .brand{display:flex;align-items:center;gap:8px;font-weight:700;letter-spacing:.2px}
.bank-card .brand .dot{width:10px;height:10px;border-radius:50%;background:#ffcc00;box-shadow:0 0 12px rgba(255,204,0,.7)}
.bank-card .brand .word{font-size:14px;opacity:.95}
.bank-card .row-top{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.bank-card .chip{width:34px;height:26px;border-radius:6px;background:linear-gradient(135deg,#ffe7a4,#e6be64 60%, #9f7b2e);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.15), 0 2px 6px rgba(0,0,0,.25)}
.bank-card .wave{width:26px;height:26px;color:rgba(255,255,255,.85)}
.bank-card .number{margin:16px 0 10px;font-variant-numeric:tabular-nums;letter-spacing:2px;font-size:20px;word-spacing:6px}
.bank-card .meta{display:flex;gap:14px;align-items:flex-end}
.bank-card .meta-box{min-width:70px}
.bank-card .meta-box.holder{margin-left:auto;text-align:right}
.bank-card .label{font-size:10px;opacity:.8;letter-spacing:.6px;text-transform:uppercase}
.bank-card .value{font-size:14px;font-weight:600}
