/* PencilPay Training — APP-PAGE-specific styles (login, dashboard, progress, team).
   Everything shared with the training page (tokens, top bar, theme switcher, cards,
   stats, badges) lives in shared.css — templates link shared.css BEFORE this file. */

/* app pages keep the top bar pinned (the training page pins its tabs header instead) */
.topbar{position:sticky;top:0;z-index:5}

/* --- login --- */
.center{min-height:100vh;display:flex;align-items:center;justify-content:center}
.login{max-width:420px;text-align:center}.login h1{font-size:20px;margin:0 0 8px}
.theme-corner{position:fixed;top:16px;right:16px}
.btn{display:inline-block;padding:10px 18px;border-radius:10px;border:0;cursor:pointer;font-size:15px}
.btn.primary{background:var(--acc);color:#fff;font-weight:600}
.btn.google{display:inline-flex;align-items:center;gap:10px;background:#fff;color:#202124;font-weight:600;padding:11px 18px;border-radius:10px;margin-top:10px;border:1px solid var(--line)}
.btn.google .g{font-weight:800;color:#4285f4}

/* --- layout --- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:800px){.grid{grid-template-columns:1fr}}
h2{font-size:16px;margin:0 0 12px}
h3{font-size:13px;color:var(--mut);text-transform:uppercase;letter-spacing:.04em;margin:16px 0 8px}

/* --- lists / rows --- */
.qitem{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.qitem:last-child{border-bottom:0}
.events{list-style:none;margin:0;padding:0;max-height:340px;overflow:auto}
.events li{font-size:13px;padding:6px 0;border-bottom:1px solid var(--line);color:var(--mut)}
.events li:last-child{border-bottom:0}
.events .k{display:inline-block;min-width:64px;font-weight:600}