/* Halaman akaun kongsi (Ranking · Murid anda · Sejarah) — Games & lain-lain. Disalin daripada nota-interaktif/ni.css oleh games/_bina_akaun.py. */
.ni-penapis { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; padding: 0 var(--inset); }
.ni-penapis button { all: unset; cursor: pointer; padding: 8px 14px; border-radius: var(--radius-full); border: 1.5px solid var(--border); background: var(--card); font-weight: 600; font-size: .92em; }
.ni-penapis button[aria-pressed="true"] { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.ni-penapis + .ni-penapis { margin-top: 8px; }
/* ===== HALAMAN AKAUN: Ranking · Murid anda · Sejarah (2026-10-10) — ni-akaun.js ===== */
.ni-akaun { display: grid; gap: var(--gap); margin-top: var(--gap-t); }
.ni-akaun .ni-penapis { margin: 0; }
.ni-ak-kad { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--kad-pad); display: grid; gap: var(--gap-t); }
.ni-ak-kad h2 { margin: 0; font-size: 1.05em; }
.ni-ak-kad p { margin: 0; }
.ni-ak-hijau { background: linear-gradient(135deg, #047857, #064E3B); color: #fff; border: 0; }
.ni-ak-amber { border-left: 4px solid #D97706; }
.ni-ak-nota { color: var(--text-muted); font-size: .9em; }
.ni-ak-tindak { display: flex; flex-wrap: wrap; gap: 8px; }
.ni-ak-btn2 { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: var(--radius-sm); border: 1.5px solid var(--primary); color: var(--primary-text); font-weight: 700; text-decoration: none; }
.ni-ak-saya { display: flex; align-items: center; gap: 12px; }
.ni-ak-saya big { font-size: 1.9em; font-weight: 800; line-height: 1; }
.ni-ak-saya div { flex: 1; min-width: 0; }
.ni-ak-saya small { display: block; opacity: .85; font-size: .82em; }
.ni-ak-senarai { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ni-ak-senarai li { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; }
.ni-ak-senarai li[hidden]{display:none}
.ni-ak-lihat{display:block;margin:10px auto 0;min-height:44px;padding:0 18px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card-bg,#fff);color:var(--text);font-weight:700;font-size:14px;cursor:pointer}
.ni-ak-senarai li.saya { border-color: var(--primary); background: var(--primary-bg, #ECFDF5); }
.ni-ak-senarai li:nth-child(-n+3) em { color: #fff; background: #F59E0B; }
.ni-ak-senarai li:nth-child(2) em { background: #94A3B8; } .ni-ak-senarai li:nth-child(3) em { background: #B45309; }
.ni-ak-senarai em { font-style: normal; font-weight: 800; min-width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: .85em; }
.ni-ak-senarai div { flex: 1; min-width: 0; }
.ni-ak-senarai b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ni-ak-senarai span { display: block; font-size: .78em; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ni-ak-senarai strong { color: var(--primary-text); white-space: nowrap; }
.ni-ak-stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: var(--gap-t); }
.ni-ak-stat > div { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.ni-ak-stat b { display: block; font-size: 1.4em; font-weight: 800; color: var(--primary-text); line-height: 1.2; }
.ni-ak-stat span { font-size: .78em; color: var(--text-muted); font-weight: 600; }
.ni-ak-jadual { overflow-x: auto; }
.ni-ak-jadual table { width: 100%; border-collapse: collapse; font-size: .88em; }
.ni-ak-jadual th { text-align: left; font-size: .8em; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: 8px; border-bottom: 1.5px solid var(--border); white-space: nowrap; }
.ni-ak-jadual td { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.ni-ak-jadual td small { display: block; color: var(--text-muted); font-size: .85em; }
.ni-ak-jadual .n { text-align: center; white-space: nowrap; }
.ni-ak-jadual tr.belum td { color: var(--text-muted); }
.ni-ak-nota-senarai { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.ni-ak-nota-senarai a { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); text-decoration: none; color: var(--text); }
.ni-ak-nota-senarai a:hover { border-color: var(--primary); }
.ni-ak-nota-senarai span { font-size: .8em; color: var(--text-muted); }
.ni-ak-nota-senarai i { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.ni-ak-nota-senarai u { display: block; height: 100%; background: var(--primary); }
.ni-ak-garis { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ni-ak-garis li { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.ni-ak-garis time { font-size: .8em; font-weight: 700; color: var(--text-muted); }
.ni-ak-garis b { display: block; font-size: .92em; }
.ni-ak-garis span { font-size: .8em; color: var(--text-muted); }
.ni-ak-garis li.j-sijil b { color: #B45309; } .ni-ak-garis li.j-lencana b { color: #7C3AED; }
.ni-ak-h { margin: 6px 0 -4px; font-size: 1.22em; padding: 0 var(--inset, 4px); }