:root {
  --bs-body-font-family: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bg:#F2F5FA; --ink:#1E2A44; --muted:#66728F; --line:#DDE3EF;
  --accent:#3D6BF2; --accent-dark:#2C55D4; --accent-soft:#E6EDFF; --stage:#EAF0FF;
  --bs-primary:#3D6BF2; --bs-primary-rgb:61,107,242; --bs-body-color:#1E2A44;
}
body { background: var(--bg); color: var(--ink); min-height: 100vh; }
.btn-primary { --bs-btn-bg:var(--accent); --bs-btn-border-color:var(--accent); --bs-btn-hover-bg:var(--accent-dark); --bs-btn-hover-border-color:var(--accent-dark); --bs-btn-active-bg:var(--accent-dark); --bs-btn-active-border-color:var(--accent-dark); font-weight:700; }
.text-muted { color: var(--muted) !important; }
.app-wrap { max-width: 1180px; }
.topbar { background:#fff; border:1px solid var(--line); border-radius:18px; padding:8px 10px 8px 18px; }
.brand { font-weight:800; font-size:1.1rem; } .brand i { color:var(--accent); font-size:1.5rem; }
.navpill { background:#F0F3FA; border-radius:999px; padding:4px; }
.navpill .nav-link { border-radius:999px; font-size:.8rem; font-weight:700; color:var(--muted); padding:7px 14px; }
.navpill .nav-link.active { background:#fff; color:var(--accent); box-shadow:0 1px 4px rgba(30,42,68,.12); }
.user-btn { display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:4px 12px 4px 4px; font-size:.8rem; font-weight:600; }
.user-btn .who { max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.avatar { width:36px; height:36px; border-radius:50%; background:var(--accent); color:#fff; font-weight:800; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.card-s { background:#fff; border:1px solid var(--line); border-radius:20px; padding:20px; margin-bottom:16px; }
.form-control, .form-select { background:#F7F9FD; border-color:var(--line); font-weight:600; border-radius:12px; }
.stat { background:#fff; border:1px solid var(--line); border-radius:14px; padding:10px 14px; }
.stat span { display:block; font-size:.72rem; color:var(--muted); font-weight:600; } .stat strong { font-size:1.25rem; }
.round { background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px 16px; }
.num { background:var(--accent-soft); color:var(--accent-dark); font-weight:700; border-radius:999px; padding:2px 12px; font-size:.95rem; cursor:help; }
.num.hit { background:var(--accent); color:#fff; }
.ball { min-width:84px; height:84px; padding:0 18px; border-radius:999px; background:#fff; border:4px solid var(--accent); font-size:2.2rem; font-weight:800; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 8px 16px -8px rgba(61,107,242,.5); animation:pop .35s ease; }
@keyframes pop { from { transform:scale(.4); opacity:0 } to { transform:scale(1); opacity:1 } }
.stage { background:var(--stage); border-radius:20px; min-height:160px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:center; padding:24px; }
.btn-link-s { border:0; background:none; padding:0; font-size:.76rem; font-weight:700; color:var(--accent); }
.btn-link-s:hover { text-decoration:underline; }
.resume { background:var(--accent); color:#fff !important; border-radius:999px; padding:4px 12px; text-decoration:none; font-size:.76rem; font-weight:700; }
@media (prefers-reduced-motion: reduce) { .ball { animation:none; } }

/* Login */
.login-body { display:flex; align-items:center; justify-content:center; padding:24px; }
.login-card { width:100%; max-width:440px; background:#fff; border:1px solid var(--line); border-radius:24px; overflow:hidden; box-shadow:0 24px 48px -28px rgba(30,42,68,.35); }
.login-hero { background:var(--stage); padding:34px 24px 28px; text-align:center; }
.login-hero .b { min-width:54px; height:54px; padding:0 12px; border-radius:999px; background:#fff; border:3px solid var(--accent); font-size:1.35rem; font-weight:800; display:inline-flex; align-items:center; justify-content:center; margin:0 5px 16px; box-shadow:0 8px 16px -8px rgba(61,107,242,.5); }
.gbtn { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; background:#fff; border:1px solid #C9D1E3; color:var(--ink); border-radius:14px; padding:14px 18px; font-weight:700; text-decoration:none; }
.gbtn:hover { background:#F7F9FD; border-color:var(--accent); color:var(--ink); }
.gbtn svg { width:22px; height:22px; }