* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #0A0C13;
  color: #F3F1EA;
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
a { color: #C9A15C; text-decoration: none; }
a:hover { color: #E9CE9B; }

.dashboard { display: flex; min-height: 100vh; width: 100%; }

/* ── Sidebar ── */
.sidebar {
  width: 264px; flex-shrink: 0; background: #12151F;
  border-right: 1px solid rgba(255,255,255,0.08);
  padding: 28px 20px; display: flex; flex-direction: column; gap: 28px;
  position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 0 4px; }
.brand-name { font-family: 'Cinzel', Georgia, serif; font-size: 15px; font-weight: 700; letter-spacing: 0.06em; }
.brand-sub { font-size: 11px; color: #666C82; letter-spacing: 0.03em; margin-top: 2px; }
nav.navlinks { display: flex; flex-direction: column; gap: 4px; }
.navlink {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: #A7ADC1;
}
.navlink svg { flex-shrink: 0; }
.navlink.active { background: #1D2233; border-left: 3px solid #C9A15C; padding-left: 9px; color: #F3F1EA; font-weight: 700; }
.navlink.soon { color: #4A4F60; cursor: default; }
.navlink.soon .tag { margin-left: auto; font-size: 9.5px; font-weight: 700; background: rgba(255,255,255,0.06); padding: 2px 7px; border-radius: 20px; color: #666C82; }
.profile { margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 10px; }
.profile-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg,#E9CE9B,#C9A15C); display: flex; align-items: center; justify-content: center; font-weight: 800; color: #241a0a; font-size: 14px; }
.profile-name { font-size: 13px; font-weight: 700; }
.profile-sub { font-size: 11px; color: #666C82; }

/* ── Main ── */
main { flex: 1; padding: 40px 48px; display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.page-title { font-family: 'Cinzel', Georgia, serif; font-size: 26px; font-weight: 700; }
.page-sub { font-size: 13px; color: #666C82; margin-top: 4px; }
.card { background: #12151F; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; }

/* ── Tiles / chips / pills ── */
.tiles4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.tile { padding: 20px; }
.tile-label { display: flex; align-items: center; gap: 8px; color: #666C82; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px; }
.tile-value { font-size: 30px; font-weight: 800; }
.tile-unit { font-size: 15px; color: #666C82; font-weight: 600; }

.chipbar { display: flex; gap: 4px; background: #12151F; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 4px; }
.chip { padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; font-family: inherit; background: transparent; color: #A7ADC1; }
.chip.on { background: #C9A15C; color: #0A0C13; }

.pillbar { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { display: flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 9px; font-size: 12.5px; font-weight: 700; cursor: pointer; border: 1px solid rgba(255,255,255,0.08); font-family: inherit; white-space: nowrap; background: #12151F; color: #A7ADC1; }
.pill.on { background: #C9A15C; color: #0A0C13; border-color: transparent; }

/* ── Recent games / historique rows ── */
.gamerow { cursor: pointer; border-radius: 10px; background: #171B29; padding: 10px 14px; display: grid; align-items: center; gap: 12px; border-left: 3px solid transparent; }
.gamerow:hover { background: #1B2032; }
.gamerow.win { border-left-color: #3FB950; }
.gamerow.loss { border-left-color: #F85149; }
.g-result { font-size: 12.5px; font-weight: 700; }
.g-sub { font-size: 11px; color: #666C82; margin-top: 2px; }
.g-champ { display: flex; align-items: center; gap: 9px; min-width: 0; }
.avatar { border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; color: rgba(255,255,255,0.85); }
.g-champname { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.items-mini { display: flex; gap: 3px; }
.item-slot { width: 16px; height: 16px; border-radius: 3px; }
.item-slot.filled { background: linear-gradient(145deg,#2a3550,#171f30); border: 1px solid rgba(255,255,255,0.16); }
.item-slot.empty { background: transparent; border: 1px dashed rgba(255,255,255,0.12); }
.g-kda { font-size: 13px; font-weight: 700; }
.g-kdaratio { font-size: 11px; font-weight: 700; margin-top: 1px; }
.g-cs { font-size: 12px; color: #A7ADC1; }
.g-cs span { color: #666C82; font-size: 10px; }
.g-mode { font-size: 11.5px; font-weight: 700; text-align: right; }
.chevron { text-align: center; color: #666C82; font-size: 11px; }

.expand-panel { margin: 8px 0 4px; padding: 18px; border-radius: 12px; background: #0D101A; border: 1px solid rgba(255,255,255,0.08); display: none; }
.expand-panel.open { display: block; }
.sb-frame { display: flex; justify-content: center; }
.expand-panel img, .sb-card img, #detail-img {
  max-width: 620px; width: 100%; height: auto; border-radius: 10px; display: block; margin: 0 auto;
  background: #0A0C13;
}
.sb-caption { font-size: 12px; color: #A7ADC1; margin-bottom: 12px; text-align: center; }
.avatar-img { border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #171B29; }

/* ── Champion table (mode pages) ── */
.champ-table-head, .champ-row {
  display: grid; grid-template-columns: 56px 1fr 90px 80px 220px; align-items: center; gap: 10px;
}
.champ-table-head { font-size: 9.5px; font-weight: 700; color: #666C82; text-transform: uppercase; letter-spacing: 0.03em; padding: 0 10px 8px; }
.champ-row { padding: 8px 10px; border-radius: 8px; background: #171B29; }
.champ-row + .champ-row { margin-top: 4px; }
.champ-name { font-size: 13.5px; font-weight: 700; }
.champ-games { font-size: 12.5px; color: #A7ADC1; }
.champ-wr { font-size: 13px; font-weight: 800; }
.champ-kda { font-size: 12.5px; color: #A7ADC1; }

/* ── Heatmap ── */
.heatmap { display: grid; grid-template-columns: repeat(7,1fr); grid-template-rows: repeat(7,1fr); grid-auto-flow: column; gap: 3px; height: 118px; }
.heatmap div { border-radius: 3px; }
.legend { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 12px; font-size: 10px; color: #666C82; }
.legend-item { display: flex; align-items: center; gap: 4px; }
.legend-swatch { width: 10px; height: 10px; border-radius: 2px; }

/* ── Idea badge ── */
.idea-badge { display: flex; align-items: center; gap: 6px; background: rgba(201,161,92,0.12); border: 1px solid rgba(201,161,92,0.35); border-radius: 20px; padding: 4px 10px; }
.idea-badge span { font-size: 10.5px; font-weight: 700; color: #E9CE9B; letter-spacing: 0.03em; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .dashboard { flex-direction: column; }
  .sidebar { position: static; height: auto; width: 100%; flex-direction: row; flex-wrap: wrap; }
  nav.navlinks { flex-direction: row; flex-wrap: wrap; }
  .profile { margin-top: 0; border-top: none; }
  main { padding: 24px; }
  .tiles4, .champ-table-head, .champ-row { grid-template-columns: 1fr 1fr; }
}