/* Minimal professional gym-style UI (public assets) */
:root{--bg:#0f1724;--card:#0b1220;--muted:#9aa7b2;--accent:#ff6b35;--text:#e6eef6}
*{box-sizing:border-box;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif}
body.gym-bg{background:linear-gradient(180deg,#071022 0%, #071b2b 100%);color:var(--text);min-height:100vh;margin:0}
.center{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.card{background:rgba(255,255,255,0.03);padding:22px;border-radius:12px;max-width:420px;width:100%;box-shadow:0 8px 30px rgba(2,6,23,0.6)}
.card.small{max-width:360px}
.logo{padding:18px;border-radius:8px;color:#fff;text-align:center;margin-bottom:12px}
.logo h1{margin:0;font-size:20px}
.qr-area{text-align:center}
.muted{color:var(--muted);font-size:13px}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:10px 16px;border-radius:8px;text-decoration:none;border:none;cursor:pointer}
.btn.alt{background:transparent;border:1px solid rgba(255,255,255,0.08)}
.note{margin-top:12px;color:var(--muted);font-size:13px}
/* toast notifications */
.gh-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;padding:10px 14px;border-radius:8px;background:rgba(0,0,0,0.7);color:#fff;z-index:2000;opacity:0;transition:opacity .25s,transform .25s}
.gh-toast.visible{opacity:1;transform:translateX(-50%) translateY(-6px)}
.gh-toast-success{background:linear-gradient(90deg,var(--accent),#ff9a66)}
.gh-toast-info{background:rgba(30,38,50,0.9)}
form label{display:block;margin-bottom:10px}
form input{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--text)}
.small .muted{font-size:12px}
#qrcode canvas{border-radius:8px;background:#fff;padding:8px}

/* Scrollable table container to avoid overflowing long lists */
.table-scroll { max-height: 360px; overflow: auto; margin-top: 12px; }
.table-scroll table { width: 100%; border-collapse: collapse; }
.table-scroll th, .table-scroll td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.03); text-align: left; white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.table-scroll thead th { background: rgba(255,255,255,0.03); position: sticky; top: 0; z-index: 2; }

@media (max-width: 720px) {
    .table-scroll th, .table-scroll td { white-space: normal; }
}

/* floating points badge (visible on all sizes) */
#points-badge { display: flex; }

/* leaderboard styles */
.leaderboard { max-width:900px;margin:18px auto;padding:20px;border-radius:12px;background:rgba(255,255,255,0.02); }
.leaderboard table { width:100%;border-collapse:collapse }
.leaderboard th, .leaderboard td { padding:12px 14px;border-bottom:1px solid rgba(255,255,255,0.05);text-align:left;font-weight:500 }
.leaderboard thead th { background:rgba(255,255,255,0.02);font-weight:700;color:var(--muted);font-size:0.9em }
.leaderboard tbody tr { transition:all .2s ease }
.leaderboard tbody tr:hover { background:rgba(255,255,255,0.02) }
.leader-rank { font-weight:900;padding:8px 12px;border-radius:8px;display:inline-block }
.leader-gold { background:linear-gradient(90deg,#ffd54a,#ffb300);color:#000 }
.leader-silver { background:linear-gradient(90deg,#cfd8dc,#90a4ae);color:#000 }
.leader-bronze { background:linear-gradient(90deg,#d7a17a,#b87333);color:#000 }
.xp-bar-small { height:8px;background:rgba(255,255,255,0.06);border-radius:999px;overflow:hidden }
.xp-fill-small { height:8px;background:linear-gradient(90deg,var(--accent),#ff9a66) }