/* ============ PXSTATS — design tokens ============ */
:root {
  --bg:           #070714;
  --bg-2:         #0c0c1f;
  --card:         #12132a;
  --card-2:       #181a3a;
  --card-hover:   #1e2048;
  --border:       #242654;
  --border-soft:  #1b1d41;
  --text:         #e4e6ff;
  --muted:        #7a7ea8;
  --muted-2:      #565a85;

  --purple:       #a855f7;
  --purple-2:     #8b5cf6;
  --purple-soft:  rgba(168,85,247,0.18);
  --green:        #22c55e;
  --green-soft:   rgba(34,197,94,0.18);
  --blue:         #3b82f6;
  --blue-soft:    rgba(59,130,246,0.2);
  --yellow:       #facc15;
  --yellow-soft:  rgba(250,204,21,0.18);
  --orange:       #f97316;
  --pink:         #ec4899;
  --red:          #ef4444;
  --cyan:         #06b6d4;

  --shadow:       0 4px 20px rgba(0,0,0,0.35);
  --shadow-lg:    0 12px 48px rgba(0,0,0,0.55);
  --radius:       14px;
  --radius-sm:    8px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: var(--bg); }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  font-size: 14px;
  min-height: 100vh;
  background:
    radial-gradient(ellipse 1000px 600px at 80% -10%, rgba(168,85,247,0.08), transparent 60%),
    radial-gradient(ellipse 1000px 600px at -10% 110%, rgba(59,130,246,0.06), transparent 60%),
    var(--bg);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img { display: block; }

/* ============ Login ============ */
.login-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-box {
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 44px 48px 40px;
  width: 380px;
  box-shadow: var(--shadow-lg);
}
.login-logo {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  font-size: 26px; font-weight: 800; letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.login-logo .mark { width: 32px; height: 32px; }
.login-sub { color: var(--muted); font-size: 13px; text-align: center; margin-bottom: 28px; }
.login-box input {
  width: 100%; padding: 13px 16px; margin-bottom: 10px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text); outline: none; font-size: 14px;
  transition: border-color 0.15s;
}
.login-box input:focus { border-color: var(--purple); }
.login-box button {
  width: 100%; padding: 13px; margin-top: 6px; border: none; border-radius: 10px;
  background: linear-gradient(135deg, var(--purple), var(--purple-2));
  color: #fff; font-weight: 600; font-size: 15px;
  transition: filter 0.15s;
}
.login-box button:hover { filter: brightness(1.12); }
.login-error { color: var(--red); font-size: 13px; text-align: center; margin-top: 12px; display: none; }

/* ============ Top nav ============ */
.nav {
  display: flex; align-items: center; gap: 20px;
  padding: 12px 28px; height: 64px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(7,7,20,0.8);
  backdrop-filter: blur(14px);
  position: sticky; top: 0; z-index: 100;
}
.nav-logo {
  display: flex; align-items: center; gap: 8px;
  font-size: 18px; font-weight: 800; letter-spacing: 0.5px;
  margin-right: 12px;
}
.nav-logo .mark { width: 28px; height: 28px; }
.nav-tabs { display: flex; gap: 4px; flex: 1; justify-content: center; }
.nav-tab {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 10px; font-size: 13px; font-weight: 600;
  color: var(--muted); cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.3px;
}
.nav-tab svg { width: 16px; height: 16px; opacity: 0.9; }
.nav-tab:hover { color: var(--text); background: var(--card); }
.nav-tab.active {
  color: #fff;
  background: linear-gradient(135deg, var(--purple), var(--purple-2));
  box-shadow: 0 4px 16px rgba(168,85,247,0.35);
}
.nav-right { display: flex; align-items: center; gap: 10px; }
.pill {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 999px; font-size: 12px; font-weight: 600;
}
.pill .avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--purple); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }
.pill .elite-badge { background: linear-gradient(135deg, var(--yellow), var(--orange)); color: #000; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.icon-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--border); color: var(--muted);
  border-radius: 10px; cursor: pointer;
  transition: all 0.15s;
  position: relative;
}
.icon-btn:hover { color: var(--text); border-color: var(--purple); }
.icon-btn .dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; background: var(--purple); border-radius: 50%; border: 2px solid var(--card); }

/* ============ Layout ============ */
.page { display: none; padding: 24px 28px; max-width: 1480px; margin: 0 auto; }
.page.active { display: block; }
.page-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; gap: 12px; }
.page-header h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.3px; }
.page-header .sub { color: var(--muted); font-size: 13px; margin-top: 2px; }

.grid { display: grid; gap: 16px; }
.grid.g-2 { grid-template-columns: 1fr 1fr; }
.grid.g-3 { grid-template-columns: repeat(3, 1fr); }
.grid.g-4 { grid-template-columns: repeat(4, 1fr); }
.grid.dash-main { grid-template-columns: 1.1fr 1.3fr 1fr; }
.grid.dash-mid { grid-template-columns: 0.7fr 1.2fr 1.1fr; }
.grid.dash-map { grid-template-columns: 1.6fr 1fr; }
.mb-16 { margin-bottom: 16px; }

/* ============ Cards ============ */
.card {
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 18px 20px;
  transition: border-color 0.15s;
}
.card.tight { padding: 14px 16px; }
.card .card-title {
  text-transform: uppercase; letter-spacing: 1.4px;
  font-size: 10.5px; font-weight: 700; color: var(--muted);
  margin-bottom: 12px;
  display: flex; align-items: center; justify-content: space-between;
}
.card .card-title .hint { color: var(--muted-2); font-weight: 500; letter-spacing: 0.4px; text-transform: none; font-size: 11px; }
.card-action { font-size: 11px; color: var(--muted); padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; }
.card-action:hover { color: var(--text); border-color: var(--purple); }

/* ============ Dashboard: trainer ============ */
.trainer {
  display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
}
.trainer .avatar {
  width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(135deg, var(--purple), var(--blue));
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; color: #fff;
  box-shadow: 0 6px 20px rgba(168,85,247,0.3);
}
.trainer h2 { font-size: 16px; font-weight: 700; }
.trainer .meta { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.chip-mini {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px;
  background: var(--card-hover); color: var(--muted);
}
.chip-mini.lvl { background: var(--yellow-soft); color: var(--yellow); }
.chip-mini.elite { background: linear-gradient(135deg, var(--purple-soft), rgba(236,72,153,0.18)); color: var(--purple); }
.chip-mini.team-valor { background: rgba(239,68,68,0.18); color: var(--red); }
.chip-mini.team-mystic { background: rgba(59,130,246,0.2); color: var(--blue); }
.chip-mini.team-instinct { background: rgba(250,204,21,0.18); color: var(--yellow); }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.stat-cell { background: rgba(12,12,31,0.6); border: 1px solid var(--border-soft); border-radius: 10px; padding: 10px 12px; }
.stat-cell .lbl { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin-bottom: 4px; }
.stat-cell .val { font-size: 17px; font-weight: 800; letter-spacing: -0.3px; }
.stat-cell .val.green { color: var(--green); }
.stat-cell .val.purple { color: var(--purple); }
.stat-cell .val.yellow { color: var(--yellow); }
.stat-cell .val.blue { color: var(--blue); }

/* ============ Daily limits row ============ */
.limit-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.limit-row:last-child { border-bottom: none; }
.limit-row .left { display: flex; align-items: center; gap: 10px; }
.limit-row .ico { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: transparent; }
.limit-row .ico img { width: 32px; height: 32px; object-fit: contain; }
.limit-row .label { font-size: 13px; color: var(--text); font-weight: 500; }
.limit-row .val { font-size: 16px; font-weight: 800; letter-spacing: -0.3px; }
.limit-row .val .cap { color: var(--muted); font-size: 11px; font-weight: 500; margin-left: 4px; }

/* ============ Latest catches ============ */
.catch-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.catch-card {
  background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: 12px;
  padding: 12px; text-align: center; cursor: pointer; transition: all 0.15s;
}
.catch-card:hover { border-color: var(--purple); transform: translateY(-1px); }
.catch-card { position: relative; }
.catch-card img.sprite { width: 56px; height: 56px; margin: 0 auto 6px; image-rendering: crisp-edges; }
.catch-card .ball { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; }
.catch-card .ball img { width: 100%; height: 100%; }
.catch-card .n { font-size: 11px; color: var(--muted); }
.catch-card .t { font-size: 11px; font-weight: 700; }
.pcard .ball { position: absolute; bottom: 6px; right: 6px; width: 18px; height: 18px; opacity: 0.85; }
.pcard .ball img { width: 100%; height: 100%; }
.act .ball { width: 18px; height: 18px; margin-right: 4px; }
.act .ball img { width: 100%; height: 100%; }

/* ============ Uptime & rates ============ */
.uptime-big {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 42px; font-weight: 800; letter-spacing: -1.5px;
}
.uptime-big .alt { color: var(--purple); }
.uptime-sub { font-size: 11px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.uptime-bar { height: 4px; background: var(--border-soft); border-radius: 2px; margin-top: 14px; overflow: hidden; }
.uptime-bar .fill { height: 100%; background: linear-gradient(90deg, var(--green), var(--purple)); border-radius: 2px; }

.rate-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.rate-item { text-align: center; }
.rate-item .v { font-size: 20px; font-weight: 800; }
.rate-item .v.green { color: var(--green); }
.rate-item .v.purple { color: var(--purple); }
.rate-item .v.yellow { color: var(--yellow); }
.rate-item .k { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }
.rate-item .s { font-size: 10px; color: var(--muted-2); margin-top: 2px; }

/* ============ Mini chart ============ */
.chart-wrap { height: 120px; position: relative; }
.chart-bars { display: flex; align-items: flex-end; gap: 2px; height: 100%; }
.chart-bar { flex: 1; min-width: 0; background: linear-gradient(180deg, var(--purple), var(--purple-2)); border-radius: 3px 3px 0 0; transition: background 0.15s; opacity: 0.9; }
.chart-bar:hover { background: var(--pink); opacity: 1; }
.chart-labels { display: flex; justify-content: space-between; font-size: 9px; color: var(--muted-2); margin-top: 6px; }

/* ============ Quest tracker (placeholder row) ============ */
.quest-empty { text-align: center; padding: 22px; color: var(--muted); font-size: 13px; }

/* ============ Map ============ */
#map { height: 420px; border-radius: 10px; border: 1px solid var(--border-soft); }

/* ============ Activity log ============ */
.activity-list { max-height: 420px; overflow-y: auto; padding-right: 4px; }
.act {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 2px; border-bottom: 1px solid var(--border-soft);
}
.act:last-child { border-bottom: none; }
.act .ico { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.act .ico.catch { background: var(--green-soft); color: var(--green); }
.act .ico.enc { background: var(--blue-soft); color: var(--blue); }
.act .ico.spin { background: var(--purple-soft); color: var(--purple); }
.act .ico.other { background: rgba(122,126,168,0.15); color: var(--muted); }
.act .m { flex: 1; }
.act .m .name { font-size: 13px; font-weight: 600; }
.act .m .lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.act .time { font-size: 11px; color: var(--muted); }

/* ============ Progression line chart ============ */
.linechart { width: 100%; display: block; }
.linechart .grid-line { stroke: var(--border-soft); stroke-width: 1; }
.linechart .axis-label { fill: var(--muted-2); font-size: 10px; font-family: 'Inter', sans-serif; }
.linechart .area { fill: url(#lcGrad); opacity: 0.35; }
.linechart .line { fill: none; stroke: var(--purple); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.linechart .dot { fill: var(--purple); }
.linechart .hover-line { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.linechart-wrap { position: relative; min-height: 200px; }
.linechart-empty { padding: 50px 20px; text-align: center; color: var(--muted); font-size: 13px; }

/* ============ Heatmap ============ */
.heatmap { display: grid; grid-template-columns: 28px repeat(24, 1fr); gap: 2px; margin-top: 6px; }
.heatmap .hm-head { font-size: 9px; color: var(--muted-2); text-align: center; }
.heatmap .hm-row-label { font-size: 10px; color: var(--muted); padding-right: 4px; display: flex; align-items: center; }
.heatmap .hm-cell { aspect-ratio: 1; border-radius: 3px; background: var(--card-hover); }

/* ============ Pokemon page ============ */
.toolbar {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap;
}
.toolbar .search {
  flex: 1; min-width: 240px;
  padding: 11px 14px 11px 38px;
  background: var(--card); border: 1px solid var(--border-soft); color: var(--text);
  border-radius: 12px; font-size: 13px; outline: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237a7ea8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 12px center;
}
.toolbar .search:focus { border-color: var(--purple); }

.seg {
  display: inline-flex; background: var(--card); border: 1px solid var(--border-soft); border-radius: 12px; padding: 3px;
}
.seg > button {
  padding: 7px 14px; font-size: 12px; font-weight: 700; color: var(--muted);
  background: transparent; border: none; border-radius: 9px;
  transition: all 0.15s;
}
.seg > button.active { background: linear-gradient(135deg, var(--purple), var(--purple-2)); color: #fff; }

.sub-tabs {
  display: inline-flex; gap: 6px; padding: 4px; background: var(--card); border: 1px solid var(--border-soft); border-radius: 12px;
}
.sub-tab {
  padding: 8px 16px; border-radius: 9px; font-size: 13px; font-weight: 700; color: var(--muted);
  background: transparent; border: none;
}
.sub-tab.active { background: var(--purple-soft); color: var(--purple); }

/* filter chips */
.filter-rail {
  display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 18px;
  background: rgba(12,12,31,0.7); border: 1px solid var(--border-soft);
  border-radius: 14px; margin-bottom: 18px;
}
.filter-rail-header { display: flex; align-items: center; gap: 18px; margin-bottom: 10px; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; user-select: none; }
.filter-rail-header .count { color: var(--blue); }
.filter-rail-header svg { transition: transform 0.15s; }
.filter-rail-header.collapsed svg { transform: rotate(-90deg); }
.fchip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  background: transparent; border: 1px solid var(--border);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--muted); cursor: pointer;
  transition: all 0.15s;
}
.fchip:hover { color: var(--text); border-color: var(--muted); }
.fchip .dot { width: 14px; height: 14px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; flex-shrink: 0; }
.fchip.shiny   .dot { background: var(--yellow); color: #000; }
.fchip.hundo   .dot { background: var(--red); color: #fff; }
.fchip.nundo   .dot { background: var(--purple-2); color: #fff; }
.fchip.hatched .dot { background: var(--green); color: #000; }
.fchip.lucky   .dot { background: var(--orange); color: #000; }
.fchip.legendary .dot { background: var(--purple); color: #fff; }
.fchip.mythical  .dot { background: var(--pink); color: #fff; }
.fchip.shadow    .dot { background: #111; color: #f97316; border: 1px solid #f97316; }
.fchip.purified  .dot { background: var(--cyan); color: #000; }
.fchip.costume   .dot { background: var(--yellow); color: #000; }
.fchip.traded    .dot { background: var(--blue); color: #fff; }
.fchip.mega      .dot { background: var(--red); color: #fff; }
.fchip.xxl       .dot { background: var(--purple-2); color: #fff; }
.fchip.xxs       .dot { background: var(--blue); color: #fff; }
.fchip.active {
  background: var(--purple-soft); border-color: var(--purple); color: var(--text);
  box-shadow: 0 0 0 2px rgba(168,85,247,0.15);
}
.fchip.disabled { opacity: 0.45; cursor: not-allowed; }

/* Pokemon grid */
.pokemon-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px;
}
.pcard {
  position: relative;
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid var(--border-soft); border-radius: 12px;
  padding: 10px 8px 12px; text-align: center; cursor: pointer;
  transition: all 0.15s;
}
.pcard:hover { transform: translateY(-2px); border-color: var(--purple); box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.pcard.hundo { border-color: var(--red); box-shadow: 0 0 0 1px rgba(239,68,68,0.35), 0 0 18px rgba(239,68,68,0.15); }
.pcard.shiny::after {
  content: ''; position: absolute; inset: 0; border-radius: 12px; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(250,204,21,0.45); background: radial-gradient(circle at top right, rgba(250,204,21,0.18), transparent 55%);
}
.pcard.lucky::before {
  content: ''; position: absolute; inset: 0; border-radius: 12px; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(249,115,22,0.45);
}
.pcard img { width: 64px; height: 64px; margin: 0 auto; image-rendering: crisp-edges; }
.pcard .pname { font-size: 11px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard .pcp { font-size: 12px; font-weight: 700; margin-top: 2px; }
.pcard .piv { font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px; display: inline-block; margin-top: 4px; }
.pcard .piv.iv100 { background: var(--red); color: #fff; }
.pcard .piv.iv90  { background: var(--green); color: #000; }
.pcard .piv.iv80  { background: var(--blue); color: #fff; }
.pcard .piv.iv0   { background: var(--purple-2); color: #fff; }
.pcard .piv.ivlow { background: var(--border); color: var(--muted); }
.pcard .badges {
  position: absolute; top: 6px; right: 6px; display: flex; gap: 3px;
}
.pcard .b {
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 10px;
  background: rgba(0,0,0,0.55);
}
.pcard .b.shiny   { color: var(--yellow); }
.pcard .b.lucky   { color: var(--orange); }
.pcard .b.shadow  { color: var(--purple-2); }
.pcard .b.purified{ color: var(--cyan); }
.pcard .b.costume { color: var(--purple); }

/* Eggs cards */
.egg-card {
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid var(--border-soft); border-radius: 12px; padding: 16px;
  text-align: center;
}
.egg-card img { width: 64px; height: 64px; margin: 0 auto 8px; }
.egg-card .km { font-size: 11px; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
.egg-card .pct { font-size: 13px; font-weight: 800; float: right; }
.egg-bar { height: 4px; background: var(--border-soft); border-radius: 999px; overflow: hidden; clear: both; margin-top: 6px; }
.egg-bar .fill { height: 100%; background: linear-gradient(90deg, var(--yellow), var(--orange)); }

/* ============ Items page ============ */
.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.cat-chip {
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border-soft);
  background: transparent; color: var(--muted); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
}
.cat-chip:hover { color: var(--text); border-color: var(--muted); }
.cat-chip.active { background: var(--purple-soft); border-color: var(--purple); color: var(--text); }

.item-section { margin-bottom: 28px; }
.item-section h3 { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 12px; }
.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.item-card {
  position: relative;
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid var(--border-soft); border-radius: 12px; padding: 14px 10px 10px;
  text-align: center; transition: all 0.15s;
}
.item-card:hover { border-color: var(--purple); transform: translateY(-1px); }
.item-card .fav { position: absolute; top: 6px; right: 8px; color: var(--muted-2); font-size: 13px; }
.item-card img { width: 56px; height: 56px; margin: 0 auto 6px; object-fit: contain; }
.item-card .nm { font-size: 11px; font-weight: 700; color: var(--text); letter-spacing: 0.4px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-card .ct { position: absolute; right: 10px; bottom: 8px; background: var(--card-hover); color: var(--muted); font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 999px; }

/* ============ Pokedex page ============ */
.dex-filters { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.dex-filters .fchip-plain {
  padding: 8px 16px; border-radius: 999px; background: var(--card); border: 1px solid var(--border-soft);
  color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
}
.dex-filters .fchip-plain:hover { color: var(--text); border-color: var(--muted); }
.dex-filters .fchip-plain.active { background: var(--purple-soft); border-color: var(--purple); color: var(--text); }

.dex-region {
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid var(--border-soft); border-radius: 14px;
  margin-bottom: 14px; overflow: hidden;
}
.dex-region-head {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px; cursor: pointer; user-select: none;
}
.dex-region-head .caret {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--card-hover); display: flex; align-items: center; justify-content: center;
  color: var(--blue); transition: transform 0.15s;
}
.dex-region.open .dex-region-head .caret { transform: rotate(90deg); }
.dex-region-head .name { font-size: 17px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; flex: 1; font-style: italic; }
.dex-region-head .progress { display: flex; align-items: center; gap: 12px; }
.dex-region-head .progress .nums { font-size: 13px; color: var(--muted); }
.dex-region-head .progress .nums .caught { color: var(--green); font-weight: 800; font-size: 16px; }
.dex-region-head .progress .nums .total { color: var(--text); font-weight: 800; font-size: 16px; }
.dex-region-head .progress .bar { width: 160px; height: 6px; background: var(--border-soft); border-radius: 999px; overflow: hidden; }
.dex-region-head .progress .bar .fill { height: 100%; background: linear-gradient(90deg, var(--green), var(--cyan)); }

.dex-region-body { display: none; padding: 0 20px 20px; }
.dex-region.open .dex-region-body { display: block; }
.dex-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 6px;
}
.dex-cell {
  background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: 10px;
  padding: 8px 4px; text-align: center; aspect-ratio: 1; display: flex; flex-direction: column; justify-content: center;
  transition: all 0.15s;
}
.dex-cell.caught { border-color: rgba(34,197,94,0.5); }
.dex-cell.seen { opacity: 0.6; }
.dex-cell.unseen { opacity: 0.22; }
.dex-cell:hover { transform: scale(1.05); }
.dex-cell img { width: 40px; height: 40px; margin: 0 auto; image-rendering: crisp-edges; }
.dex-cell .n { font-size: 9px; color: var(--muted); margin-top: 2px; }

/* ============ Rates page ============ */
.rates-head { display: flex; gap: 16px; align-items: center; margin-bottom: 22px; flex-wrap: wrap; }
.rates-head .search { flex: 1; min-width: 260px; }

.total-rolls { background: linear-gradient(180deg, var(--card), var(--card-2)); border: 1px solid var(--border-soft); border-radius: 14px; padding: 22px 26px; margin-bottom: 16px; }
.total-rolls .lbl { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 1.5px; }
.total-rolls .v { font-size: 48px; font-weight: 800; letter-spacing: -1.5px; margin: 6px 0 2px; }
.total-rolls .s { font-size: 11px; color: var(--muted-2); }

.rate-card {
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid var(--border-soft); border-radius: 14px; padding: 16px 18px;
}
.rate-card .top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.rate-card .ico { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.rate-card .ico.shundo { background: radial-gradient(circle, #d2886c, #8c5a40); color: #fff; }
.rate-card .ico.shiny  { background: radial-gradient(circle, var(--yellow), #b07b0a); color: #000; }
.rate-card .ico.hundo  { background: radial-gradient(circle, #f4a6a6, #b94949); color: #fff; }
.rate-card .ico.bg     { background: radial-gradient(circle, #a5c7ec, #486e96); color: #fff; }
.rate-card .ico.xxl    { background: radial-gradient(circle, var(--purple), #5a1f8a); color: #fff; }
.rate-card .ico.xxs    { background: radial-gradient(circle, var(--blue), #1e3a8a); color: #fff; }
.rate-card .k { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; flex: 1; }
.rate-card .v { font-size: 20px; font-weight: 800; }
.rate-card .v.shundo { color: #d2886c; }
.rate-card .v.shiny  { color: var(--yellow); }
.rate-card .v.hundo  { color: #f4a6a6; }
.rate-card .v.bg     { color: #a5c7ec; }
.rate-card .v.xxl    { color: var(--purple); }
.rate-card .v.xxs    { color: var(--blue); }
.rate-card .rbar { height: 4px; background: var(--border-soft); border-radius: 999px; margin-bottom: 8px; overflow: hidden; }
.rate-card .rbar .f { height: 100%; background: currentColor; }
.rate-card .foot { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted-2); }

.combi-card {
  position: relative;
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid var(--border-soft); border-radius: 14px;
  padding: 16px 18px;
  overflow: hidden;
}
.combi-card.shundo-bg::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 0% 0%, rgba(210,136,108,0.18), transparent 60%); pointer-events: none; }
.combi-card.shiny-bg::before  { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 0% 0%, rgba(250,204,21,0.18), transparent 60%); pointer-events: none; }
.combi-card.hundo-bg::before  { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 0% 0%, rgba(244,166,166,0.18), transparent 60%); pointer-events: none; }
.combi-card .avatars { display: flex; gap: 4px; margin-bottom: 10px; }
.combi-card .avatars .ico { width: 28px; height: 28px; }
.combi-card .k { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.combi-card .v { font-size: 28px; font-weight: 800; letter-spacing: -1px; margin-bottom: 4px; }
.combi-card .s { font-size: 11px; color: var(--muted-2); }

.top-species {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: var(--card); border: 1px solid var(--border-soft); border-radius: 12px;
}
.top-species .rank { font-size: 11px; color: var(--muted); font-weight: 800; letter-spacing: 1px; }
.top-species img { width: 40px; height: 40px; }
.top-species .m { flex: 1; }
.top-species .m .n { font-weight: 700; }
.top-species .m .s { font-size: 11px; color: var(--muted); }
.top-species .c { display: flex; align-items: center; gap: 8px; }
.top-species .c .bd { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; }

/* ============ Medals modal ============ */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center; z-index: 200; padding: 20px;
}
.modal-backdrop.open { display: flex; }
.modal {
  width: 100%; max-width: 560px; max-height: 85vh; overflow-y: auto;
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid var(--border); border-radius: 20px; padding: 22px 24px;
  box-shadow: var(--shadow-lg);
}
.modal .modal-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.modal .modal-head h2 { font-size: 22px; font-weight: 800; flex: 1; }
.modal .modal-close { width: 28px; height: 28px; background: var(--card-hover); border: none; color: var(--muted); border-radius: 8px; font-size: 16px; }

.medal-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: 12px; margin-bottom: 8px;
}
.medal-row .mi { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.medal-row .mi.gold   { background: linear-gradient(135deg, #fde68a, #b45309); color: #fff; }
.medal-row .mi.silver { background: linear-gradient(135deg, #cbd5e1, #475569); color: #fff; }
.medal-row .mi.bronze { background: linear-gradient(135deg, #fbbf24, #92400e); color: #fff; }
.medal-row .mi.none   { background: var(--card-hover); color: var(--muted-2); }
.medal-row .mm { flex: 1; }
.medal-row .mm .n { font-weight: 700; font-size: 14px; }
.medal-row .mm .v { font-weight: 800; font-size: 18px; letter-spacing: -0.3px; margin-top: 2px; }
.medal-row .mm .bar { height: 4px; background: var(--border-soft); border-radius: 999px; overflow: hidden; margin-top: 6px; width: 180px; }
.medal-row .mm .bar .f { height: 100%; background: linear-gradient(90deg, var(--yellow), var(--orange)); }
.medal-row .mt { font-size: 11px; color: var(--muted); white-space: nowrap; }

/* ============ Pokemon detail modal ============ */
.modal.detail { max-width: 920px; padding: 28px 30px; }
.detail-head { display: grid; grid-template-columns: 220px 1fr auto; gap: 20px; margin-bottom: 18px; align-items: start; }
.detail-sprite {
  background: radial-gradient(circle at 50% 40%, rgba(59,130,246,0.2), transparent 70%);
  border: 1px solid var(--border-soft); border-radius: 16px;
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 20px;
}
.detail-sprite img { width: 140px; height: 140px; image-rendering: crisp-edges; }
.detail-info h2 { font-size: 30px; font-weight: 800; letter-spacing: -0.5px; display: flex; align-items: center; gap: 12px; }
.detail-info .dex { color: var(--muted); font-size: 13px; margin-top: 2px; }
.detail-info .type-row { display: flex; gap: 8px; align-items: center; margin-top: 14px; margin-bottom: 18px; }
.type-badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 6px; border-radius: 999px; background: var(--card-hover); font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.type-badge .bb { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--muted); }
.detail-cp { text-align: right; font-weight: 800; }
.detail-cp .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.5px; }
.detail-cp .v { font-size: 44px; letter-spacing: -1.5px; }

.stat-bar { margin-bottom: 12px; }
.stat-bar .lbl { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin-bottom: 4px; }
.stat-bar .lbl .val { font-weight: 800; font-size: 14px; }
.stat-bar .bar { height: 4px; background: var(--border-soft); border-radius: 999px; overflow: hidden; position: relative; }
.stat-bar .bar .segs { position: absolute; inset: 0; display: flex; gap: 1px; }
.stat-bar .bar .seg-dot { flex: 1; }
.stat-bar .bar .f { height: 100%; border-radius: 999px; }
.stat-bar.atk .f { background: var(--pink); } .stat-bar.atk .val { color: var(--pink); }
.stat-bar.def .f { background: var(--orange); } .stat-bar.def .val { color: var(--orange); }
.stat-bar.sta .f { background: var(--pink); } .stat-bar.sta .val { color: var(--pink); }

.detail-mini-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 18px; margin-bottom: 18px; }
.detail-mini { background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: 12px; padding: 12px 14px; }
.detail-mini .k { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin-bottom: 4px; }
.detail-mini .v { font-size: 22px; font-weight: 800; letter-spacing: -0.3px; }
.detail-mini .v.iv { color: var(--blue); }
.detail-mini .bar { height: 4px; margin-top: 6px; background: var(--border-soft); border-radius: 999px; overflow: hidden; }
.detail-mini .bar .f { height: 100%; background: var(--text); }
.detail-mini.hp .v { color: var(--green); }
.detail-mini.hp .bar .f { background: var(--green); }

.detail-moves { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.detail-move { background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: 12px; padding: 12px 14px; }
.detail-move .k { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin-bottom: 4px; }
.detail-move .v { font-weight: 800; font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase; }

.detail-meta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.detail-meta { background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: 12px; padding: 10px 14px; }
.detail-meta .k { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin-bottom: 3px; }
.detail-meta .v { font-weight: 700; font-size: 13px; }
.detail-meta .sub { font-size: 10px; color: var(--muted); margin-top: 2px; }

/* ============ Pokedex species modal ============ */
.modal.dex-species { max-width: 860px; padding: 32px 36px; position: relative; }
.dex-species-head .dex-num { font-size: 14px; color: var(--muted); font-weight: 700; letter-spacing: 1px; }
.dex-species-head h2 { font-size: 48px; font-weight: 900; letter-spacing: 1px; font-style: italic; margin-top: 2px; margin-bottom: 14px; }
.dex-species-head .dex-close { position: absolute; top: 24px; right: 26px; width: 40px; height: 40px; background: rgba(59,130,246,0.12); border: none; color: var(--blue); border-radius: 50%; font-size: 18px; display: flex; align-items: center; justify-content: center; }
.dex-species-head .dex-close:hover { background: rgba(59,130,246,0.22); }

.dex-species-body { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.dex-sprite-big { background: rgba(12,12,31,0.55); border: 1px solid var(--border-soft); border-radius: 16px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 40px; }
.dex-sprite-big img { width: 100%; height: 100%; object-fit: contain; image-rendering: crisp-edges; }
.dex-sprite-big.uncaught img { filter: brightness(0) opacity(0.25); }

.dex-progress-title { font-size: 11px; color: var(--muted); letter-spacing: 1.5px; font-weight: 700; margin-bottom: 12px; }
.dex-progress-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.dex-ach {
  aspect-ratio: 1; border-radius: 12px; background: rgba(12,12,31,0.55);
  border: 1px solid var(--border-soft);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  transition: all 0.2s;
}
.dex-ach .i { width: 28px; height: 28px; color: var(--muted-2); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.dex-ach .l { font-size: 8.5px; color: var(--muted-2); letter-spacing: 1px; font-weight: 700; text-transform: uppercase; }
.dex-ach.active { border-color: var(--purple); background: var(--purple-soft); box-shadow: 0 0 0 1px rgba(168,85,247,0.2); }
.dex-ach.active .i { color: var(--purple); }
.dex-ach.active .l { color: var(--text); }
.dex-ach.shiny.active { border-color: var(--yellow); background: var(--yellow-soft); }
.dex-ach.shiny.active .i { color: var(--yellow); }
.dex-ach.hundo.active { border-color: var(--red); background: rgba(239,68,68,0.18); }
.dex-ach.hundo.active .i { color: var(--red); }
.dex-ach.lucky.active { border-color: var(--orange); background: rgba(249,115,22,0.18); }
.dex-ach.lucky.active .i { color: var(--orange); }
.dex-ach.shadow.active .i { color: var(--purple-2); }
.dex-ach.purified.active .i { color: var(--cyan); }

.dex-species .counters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.dex-species .counter { background: rgba(12,12,31,0.55); border: 1px solid var(--border-soft); border-radius: 12px; padding: 14px 16px; text-align: center; }
.dex-species .counter .k { font-size: 10px; color: var(--muted); letter-spacing: 1.5px; font-weight: 700; text-transform: uppercase; }
.dex-species .counter .v { font-size: 22px; font-weight: 800; margin-top: 4px; letter-spacing: -0.3px; font-style: italic; }

.dex-gender { background: rgba(12,12,31,0.55); border: 1px solid var(--border-soft); border-radius: 12px; padding: 14px 16px; }
.dex-gender .k { font-size: 10px; color: var(--muted); letter-spacing: 1.5px; font-weight: 700; text-transform: uppercase; margin-bottom: 4px; }
.dex-gender .v { font-size: 14px; font-weight: 700; }
.dex-gender .bar { display: flex; height: 6px; border-radius: 999px; overflow: hidden; margin-top: 8px; background: var(--border-soft); }
.dex-gender .bar .male { background: var(--blue); }
.dex-gender .bar .female { background: var(--pink); }

.dex-species-footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; }
.dex-species-footer .btn-viewall { flex: 1; padding: 14px 20px; background: rgba(12,12,31,0.6); border: 1px solid var(--border-soft); border-radius: 12px; color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.dex-species-footer .btn-viewall:hover:not(:disabled) { color: var(--text); border-color: var(--purple); }
.dex-species-footer .btn-viewall:disabled { opacity: 0.5; cursor: default; }
.dex-species-footer .btn-close { padding: 14px 36px; background: var(--blue); color: #fff; border: none; border-radius: 12px; font-size: 14px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
.dex-species-footer .btn-close:hover { filter: brightness(1.15); }

@media (max-width: 720px) {
  .dex-species-body { grid-template-columns: 1fr; }
  .dex-progress-grid { grid-template-columns: repeat(4, 1fr); }
  .modal.dex-species { padding: 22px 20px; }
}

/* ============ Misc ============ */
.empty { text-align: center; color: var(--muted); padding: 40px; }

/* ============ Responsive ============ */
@media (max-width: 1180px) {
  .grid.dash-main, .grid.dash-mid, .grid.dash-map { grid-template-columns: 1fr; }
  .grid.g-2, .grid.g-3, .grid.g-4 { grid-template-columns: 1fr 1fr; }
  .nav-tabs { display: none; }
  .detail-head { grid-template-columns: 1fr; }
  .detail-meta-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .grid.g-2, .grid.g-3, .grid.g-4 { grid-template-columns: 1fr; }
  .page { padding: 16px; }
  .pokemon-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .item-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
  .nav { padding: 10px 14px; gap: 10px; }
  .pill span { display: none; }
}

/* ============ Scrollbar ============ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--purple); }