/* bank.css — Global Bank screen (see js/bank.js) */
.bank-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.bank-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px; padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; }
.bank-card-main { border-color: var(--neon-green); box-shadow: 0 0 16px rgba(16, 185, 129, 0.22); }
.bank-card-label { font-size: 1.3rem; color: var(--text-muted); }
.bank-card-value { font-size: 3rem; font-weight: bold; }
.bank-card-main .bank-card-value { color: var(--neon-green); }
.bank-collect { align-self: flex-start; margin-top: 4px; background: var(--neon-orange); color: #2b1a00; border: 0; border-radius: 10px; padding: 4px 14px; font-size: 1.4rem; cursor: pointer; }
.bank-collect:disabled { opacity: 0.35; cursor: default; }
.bank-box { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px; padding: 16px 18px; margin-bottom: 18px; }
.bank-quick { display: flex; gap: 8px; margin: 10px 0; }
.bank-quick button { background: var(--bg-color); color: var(--text-main); border: 1px solid var(--border-color); border-radius: 8px; padding: 3px 14px; font-size: 1.3rem; cursor: pointer; }
.bank-quick button:hover { border-color: var(--neon-green); }
.bank-actions { display: flex; gap: 10px; }
.bank-btn { flex: 1; border: 0; border-radius: 12px; padding: 10px; font-size: 1.7rem; cursor: pointer; color: #04150f; }
.bank-deposit { background: var(--neon-green); }
.bank-withdraw { background: var(--neon-blue); color: #fff; }
.bank-btn:hover { filter: brightness(1.1); }
.bank-rules { margin-top: 12px; font-size: 1.25rem; color: var(--text-muted); }
.bank-global { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px; padding: 14px 18px; }
.bank-global-head { font-size: 1.9rem; margin-bottom: 6px; }
.bank-global-head i { color: var(--neon-blue); margin-right: 6px; }
.bank-global-stats { display: flex; gap: 22px; flex-wrap: wrap; font-size: 1.4rem; color: var(--text-muted); margin-bottom: 10px; }
.bank-global-stats strong { color: var(--text-main); }
.bank-top-row { display: flex; align-items: center; gap: 12px; padding: 7px 4px; border-top: 1px solid var(--border-color); font-size: 1.5rem; }
.bank-top-row.me { color: var(--neon-green); }
.bank-top-place { width: 36px; color: var(--text-muted); }
.bank-top-name { flex: 1; }
.bank-top-amt { font-weight: bold; }
.bank-empty { color: var(--text-muted); font-size: 1.4rem; }
@media (max-width: 640px) { .bank-cards { grid-template-columns: 1fr; } }

.bank-vault { background: linear-gradient(120deg, rgba(16,185,129,0.18), rgba(0,136,255,0.14)); border: 1px solid var(--neon-green); border-radius: 14px; padding: 10px 18px; font-size: 1.8rem; margin-bottom: 14px; }
.bank-vault i { color: var(--neon-green); margin-right: 8px; }
.bank-box-title, .bank-sub { font-size: 1.6rem; margin-bottom: 8px; }
.bank-sub { margin-top: 14px; color: var(--text-muted); font-size: 1.4rem; }
.loan-card { border: 1px solid var(--neon-blue); border-radius: 12px; padding: 12px 14px; }
.loan-card.overdue { border-color: var(--neon-red); box-shadow: 0 0 14px rgba(255, 59, 92, 0.3); }
.loan-row { display: flex; justify-content: space-between; font-size: 1.5rem; padding: 2px 0; }
.loan-reason { font-size: 1.35rem; color: var(--text-muted); margin: 6px 0; font-style: italic; }
.loan-chip { font-size: 1.15rem; padding: 1px 10px; border-radius: 999px; background: var(--border-color); }
.loan-chip.active { background: var(--neon-blue); color: #fff; }
.loan-chip.repaid { background: var(--neon-green); color: #04150f; }
.loan-chip.overdue { background: var(--neon-red); color: #fff; }
.bank-top-name small { color: var(--text-muted); }
#bankLoanForm textarea, #bankLoanForm select { width: 100%; }

/* vault profit/loss + loan review */
.bank-pl { display:flex; flex-wrap:wrap; gap:6px 16px; justify-content:center; font-size:1.2rem; color:var(--text-muted); margin:-6px 0 14px; }
.bank-pl .neg strong, .bank-pl .neg { color:#e5484d; }
.bank-pl .pos strong, .bank-pl .pos { color:#30a46c; }
.loan-card.pending { border-color:#f5a524; }
#bankStaffBox { margin-bottom:12px; padding-bottom:8px; border-bottom:1px dashed var(--border, #8884); }