/* ═══════════════════════════════════════════════════
   logIELTS — Bảng xếp hạng (Leaderboard)
   Gold/amber accent · Space Grotesk · Dark/Light via tokens
   ═══════════════════════════════════════════════════ */

*{box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:'Space Grotesk',system-ui,sans-serif;min-height:100vh;min-height:100dvh;margin:0}
main{display:block}

.wrap{max-width:860px;margin:0 auto;padding:18px 16px 60px}

/* ── Gate panel (login / coming-soon / error states) ── */
.gate-panel{background:var(--surf);border:1px solid var(--border);border-radius:var(--r);padding:34px 22px;text-align:center;margin-top:40px}
.gate-panel .gate-ic{font-size:2.4rem;margin-bottom:10px}
.gate-panel .gate-title{font-weight:700;font-size:1.15rem;margin-bottom:8px}
.gate-panel .gate-msg{color:var(--text2);font-size:.92rem;line-height:1.6;margin-bottom:16px}
.btn-gold{background:linear-gradient(135deg,#EAB308,#CA8A04);color:#1a1300;border:none;border-radius:var(--r2);padding:12px 20px;font-family:inherit;font-weight:800;cursor:pointer;text-decoration:none;display:inline-block}
.btn-gold:hover{opacity:.92}
.btn-ghost-lb{background:none;border:1px solid var(--border);color:var(--dim);border-radius:var(--r2);padding:11px 18px;font-family:inherit;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block}
.btn-ghost-lb:hover{color:var(--text);border-color:var(--accent)}

/* ── Title row ── */
.lb-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 18px}
.lb-title{font-family:'Space Grotesk',sans-serif;font-size:1.5rem;font-weight:800;margin:0;letter-spacing:-.01em;margin-right:auto}
.lb-badges-link{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:10px;border:1px solid var(--border);background:var(--surf2);color:var(--dim);font-family:inherit;font-size:.82rem;font-weight:700;text-decoration:none;transition:color .2s,border-color .2s;flex-shrink:0;white-space:nowrap}
.lb-badges-link:hover{color:var(--text);border-color:var(--accent)}
.lb-refresh-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--surf2);color:var(--dim);cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:transform .2s,color .2s,border-color .2s;flex-shrink:0}
.lb-refresh-btn:hover{color:var(--text);border-color:var(--accent)}
.lb-refresh-btn.spinning{animation:lbSpin .7s linear}
@keyframes lbSpin{to{transform:rotate(360deg)}}

/* ── Scope tabs ── */
.lb-tabs{display:flex;background:var(--surf2);border-radius:12px;padding:4px;margin-bottom:14px;gap:4px}
.lb-tab{flex:1;padding:11px 8px;border:none;background:transparent;border-radius:9px;font-size:.86rem;font-weight:700;color:var(--dim);cursor:pointer;transition:all .2s;font-family:inherit;white-space:nowrap}
.lb-tab.active{background:var(--surf3);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.15)}

/* ── Chip rows (period + app filter) ── */
.lb-chiprow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.lb-chiprow-scroll{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
.lb-chiprow-scroll::-webkit-scrollbar{display:none}
.lb-chip{border:1px solid var(--border);background:var(--surf);color:var(--dim);border-radius:999px;padding:8px 14px;font-family:inherit;font-size:.8rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .15s;flex-shrink:0}
.lb-chip:hover{border-color:var(--accent);color:var(--text)}
.lb-chip.active{background:var(--grad-accent);border-color:transparent;color:#fff}
.lb-period-note{margin:-6px 0 12px;font-size:.74rem;line-height:1.5;color:var(--dim)}

/* ── Self card (pinned) ── */
.lb-self-card{display:flex;align-items:center;gap:14px;background:var(--grad-accent);border-radius:var(--r);padding:16px 18px;margin:18px 0;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.lb-self-rank{font-family:'JetBrains Mono',monospace;font-size:1.6rem;font-weight:700;line-height:1;min-width:52px;text-align:center}
.lb-self-info{flex:1;min-width:0}
.lb-self-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.8px;opacity:.85;font-weight:700;margin-bottom:2px}
.lb-self-points{font-size:1.05rem;font-weight:800}
.lb-self-streak{font-size:.85rem;font-weight:700;white-space:nowrap;background:rgba(255,255,255,.18);border-radius:999px;padding:6px 12px}

/* ── Rows list ── */
.lb-rows{background:var(--surf);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.lb-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}
/* Each row is wrapped with its (sibling) breakdown panel in a plain div, so
   ":last-child" on .lb-row itself never matches — target the last wrapper. */
.lb-rows>div:last-child .lb-row{border-bottom:none}
.lb-rows>div:last-child .lb-breakdown{border-bottom:none}
.lb-row:hover{background:var(--surf2)}
.lb-row.is-me{border-left:3px solid var(--accent);background:var(--surf2)}
.lb-row-rank{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:.95rem;min-width:34px;text-align:center;color:var(--dim);flex-shrink:0}
.lb-row-rank.medal{font-size:1.3rem}
/* Tên = 2 dòng: tên rút gọn (+ badge "Em") / chip lớp (chỉ ở bảng global).
   Ellipsis phải đặt trên .lb-row-nm-txt — .lb-row-nm là flex container nên
   text-overflow trên nó không ăn vào text node bên trong. */
.lb-row-name{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-weight:600;font-size:.92rem;overflow:hidden}
.lb-row-nm{display:flex;align-items:center;gap:8px;max-width:100%;min-width:0}
.lb-row-nm-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.lb-row-class{font-size:.71rem;font-weight:600;color:var(--dim);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-row-me-badge{background:var(--accent);color:#fff;font-size:.66rem;font-weight:800;border-radius:999px;padding:2px 8px;flex-shrink:0}
.lb-row-meta{display:flex;align-items:center;gap:10px;flex-shrink:0;font-size:.82rem;color:var(--text2)}
.lb-row-points{font-weight:700;color:var(--text)}
.lb-row-streak{color:var(--yellow);font-weight:600;white-space:nowrap}
.lb-row-era{background:var(--surf3);color:var(--text2);border-radius:999px;padding:3px 9px;font-size:.72rem;font-weight:700;white-space:nowrap}
.lb-row-expand{background:none;border:none;color:var(--dim);cursor:pointer;font-size:.85rem;padding:4px;flex-shrink:0;transition:transform .15s}
.lb-row-expand.open{transform:rotate(180deg)}

/* ── Breakdown chips (expanded row) ── */
.lb-breakdown{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 12px 14px;background:var(--surf);border-bottom:1px solid var(--border)}
.lb-breakdown[hidden]{display:none}
.lb-bd-chip{background:var(--surf2);border:1px solid var(--border);border-radius:999px;padding:4px 10px;font-size:.74rem;color:var(--text2);font-weight:600;white-space:nowrap}
.lb-bd-chip b{color:var(--text);font-weight:800}
.lb-bd-empty{font-size:.78rem;color:var(--dim);font-style:italic;padding:2px 4px}

/* ── Empty / error states inside content ── */
.lb-empty{text-align:center;padding:40px 20px;color:var(--dim);font-size:.9rem;line-height:1.7;background:var(--surf);border:1px solid var(--border);border-radius:var(--r)}
.lb-empty .lb-empty-ic{font-size:2rem;margin-bottom:10px}

/* ── Footnote ── */
.lb-footnote{color:var(--dim);font-size:.8rem;line-height:1.6;margin-top:16px;text-align:center}
.lb-footnote b{color:var(--accent)}

/* ── Skeleton loading ── */
.lb-skel{background:var(--surf);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.lb-skel-row{display:flex;align-items:center;gap:12px;padding:14px;border-bottom:1px solid var(--border)}
.lb-skel-row:last-child{border-bottom:none}
.lb-skel-bar{height:14px;border-radius:6px;background:var(--surf2);animation:lbPulse 1.3s ease-in-out infinite}
.lb-skel-bar.w-rank{width:24px;height:20px;flex-shrink:0}
.lb-skel-bar.w-name{flex:1}
.lb-skel-bar.w-pts{width:60px;flex-shrink:0}
@keyframes lbPulse{0%,100%{opacity:.5}50%{opacity:1}}

/* ── Light mode: card lift (mirrors theme.css .card/.panel treatment,
      scoped to this page's own classes so theme.css doesn't need editing) ── */
[data-theme="light"] .gate-panel,
[data-theme="light"] .lb-rows,
[data-theme="light"] .lb-empty,
[data-theme="light"] .lb-skel,
[data-theme="light"] .lb-chip{
  box-shadow:0 1px 4px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.04);
}
[data-theme="light"] .lb-self-card{box-shadow:0 8px 24px rgba(0,0,0,.10)}

/* ── Responsive ── */
@media(max-width:600px){
  .lb-title{font-size:1.3rem}
  .lb-tab{font-size:.8rem;padding:10px 6px}
  .lb-self-card{padding:14px}
  .lb-self-rank{font-size:1.3rem;min-width:44px}
  .lb-self-points{font-size:.95rem}
  .lb-row{padding:10px 12px;gap:8px;flex-wrap:wrap}
  .lb-row-meta{gap:6px;font-size:.76rem}
}

/* ── Scoring legend (native <details>) ── */
.lb-legend{margin:0 0 16px;border:1px solid var(--border);border-radius:var(--r2);background:var(--surf2);overflow:hidden}
.lb-legend-sum{cursor:pointer;padding:12px 14px;font-weight:700;font-size:.9rem;color:var(--text);list-style:none;display:flex;align-items:center;gap:8px;user-select:none}
.lb-legend-sum::-webkit-details-marker{display:none}
.lb-legend-sum::after{content:'▾';margin-left:auto;color:var(--dim);transition:transform .2s}
.lb-legend[open] .lb-legend-sum::after{transform:rotate(180deg)}
.lb-legend-sum:hover{color:var(--accent)}
.lb-legend-body{padding:0 14px 14px}
.lb-legend-lead{margin:0 0 12px;font-size:.84rem;line-height:1.6;color:var(--text2)}
.lb-legend-lead b{color:var(--text)}
.lb-lg-note{color:var(--dim);font-size:.74rem;font-family:inherit}
.lb-legend-foot{margin:12px 0 0;font-size:.78rem;line-height:1.6;color:var(--dim)}
.lb-legend-foot b{color:var(--text2)}
[data-theme="light"] .lb-legend{box-shadow:0 1px 4px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.04)}

/* ── Tổng điểm hôm nay (đầu bảng luật) — ẩn khi chưa có số liệu server ── */
.lb-legend-total{display:flex;flex-direction:column;gap:6px;margin:0 0 14px;padding:10px 12px;background:var(--surf3);border-radius:10px}
.lb-legend-total[hidden]{display:none}
.lb-lg-total-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.83rem;color:var(--text2)}
.lb-lg-total-val{font-family:'JetBrains Mono',monospace;font-weight:800;color:var(--text)}
.lb-lg-bar{height:6px;border-radius:99px;background:var(--surf,rgba(0,0,0,.08));overflow:hidden}
.lb-lg-bar i{display:block;height:100%;border-radius:99px;background:var(--accent);transition:width .3s;font-style:normal}

/* ── Bảng luật xếp theo khu (1 khu / app trong LGPoints.APPS) ── */
.lb-legend-zones{display:flex;flex-direction:column;gap:10px}
.lb-lgz{border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:var(--surf)}
.lb-lgz-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.lb-lgz-title{font-weight:700;font-size:.87rem;color:var(--text)}
.lb-lgz-cap{font-size:.71rem;font-weight:700;color:var(--dim);background:var(--surf2);border-radius:999px;padding:3px 9px;white-space:nowrap}
.lb-lgz-today{margin-top:6px;font-size:.75rem;color:var(--text2);font-family:'JetBrains Mono',monospace}
.lb-lgz-bar{height:5px;border-radius:99px;background:var(--surf2);margin-top:4px;overflow:hidden}
.lb-lgz-bar-fill{display:block;height:100%;border-radius:99px;background:var(--green,#22c55e);transition:width .3s}
.lb-lgz-bar.full .lb-lgz-bar-fill{background:var(--yellow,#eab308)}
.lb-lgz-note{margin:8px 0 0;font-size:.73rem;line-height:1.5;color:var(--dim);background:var(--surf2);border-radius:8px;padding:6px 8px}
.lb-lgz-list{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.lb-lgz-act{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:2px;font-size:.79rem;padding:6px 0;border-top:1px solid var(--border)}
.lb-lgz-list>.lb-lgz-act:first-child{border-top:none;padding-top:0}
.lb-lgz-act-nm{font-weight:600;color:var(--text);flex:1 1 140px;min-width:0}
.lb-lgz-act-per{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--text2);white-space:nowrap}
.lb-lgz-act-max{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--dim);white-space:nowrap}
.lb-lgz-act-note{flex-basis:100%}
.lb-lgz-act-today{flex-basis:100%;font-size:.72rem;color:var(--green,#22c55e);font-weight:700}
[data-theme="light"] .lb-lgz,[data-theme="light"] .lb-legend-total{box-shadow:0 1px 3px rgba(0,0,0,.06)}