/**
 * Bank page — specific styles
 * Requires: app.css
 */

/* Balance cards grid */
.bal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}

.bal-card {
    text-align: center;
    padding: 14px 6px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--panel-border);
    background: var(--panel-bg);
}
.bal-card .icon { font-size: 22px; margin-bottom: 4px; }
.bal-card .val { font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 18px; }
.bal-card .lbl { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }
.bal-stars .val { color: var(--gold); }
.bal-mini .val  { color: #a78bfa; }
.bal-dia .val   { color: var(--cyan); }

/* Buy grid (star packs) */
.buy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}

.buy-btn {
    padding: 12px 6px;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer;
    text-align: center;
    transition: all .15s;
    color: var(--text);
}
.buy-btn:active {
    transform: scale(0.95);
    border-color: var(--gold);
    background: rgba(255, 215, 0, 0.05);
}
.buy-btn .amt { font-weight: 900; font-size: 15px; color: var(--gold); }
.buy-btn .tag { font-size: 9px; color: var(--muted); margin-top: 2px; }

/* Exchange rate pill */
.card-rate {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    margin-bottom: 10px;
}