@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {

  --bg:          #0b0d16;
  --card:        #181a24;
  --tile:        #1c1e2c;
  --border:      #252840;
  --accent:      #4b6bfb;
  --text:        #e2e8f0;
  --muted:       #64748b;

  --sidebar-w:         13.75rem;
  --sidebar-collapsed: 3.5rem;

  --r5: #C8A26A;
  --r4: #8A5FCC;
  --r3: #4071B9;
  --r2: #34D399;
  --r1: #94A3B8;
  --bg-r5: linear-gradient(180deg, #895750 0%, #a8724a 40%, #C8A26A 100%);
  --bg-r4: linear-gradient(180deg, #35365A 0%, #5c4a99 50%, #8A5FCC 100%);
  --bg-r3: linear-gradient(180deg, #2C2F4D 0%, #364080 50%, #4071B9 100%);
  --bg-r2: linear-gradient(180deg, #1F3A30 0%, #256B4D 50%, #34D399 100%);
  --bg-r1: linear-gradient(180deg, #2A2E3D 0%, #4B5468 50%, #94A3B8 100%);

  --normal-clr: #4ade80;
  --hard-clr:   #fb923c;
  --hell-clr:   #f87171;

  --glass-bg:          rgba(255,255,255,0.05);
  --glass-bg-hover:    rgba(255,255,255,0.08);
  --glass-bg-active:   rgba(255,255,255,0.12);
  --glass-border:      rgba(255,255,255,0.14);
  --glass-border-active: rgba(255,255,255,0.34);
  --glass-text:        #94a3b8;
  --glass-text-active: #f1f5f9;

  --hero-bg: none;
  --hero-bg-pos: center 50%;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
html { scrollbar-gutter: stable; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  min-height: 100vh;
  display: flex;
}

::-webkit-scrollbar { width: 0.3125rem; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 0.1875rem; }

#main {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-width: 0;
  min-height: 100vh;
  transition: margin-left 0.22s cubic-bezier(.4,0,.2,1);
}
#sidebar.collapsed ~ #main { margin-left: var(--sidebar-collapsed); }

#sidebar {
  width: var(--sidebar-w); min-height: 100vh;
  background: #10121d; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; flex-shrink: 0;
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 100;
  transition: width 0.22s cubic-bezier(.4,0,.2,1); overflow: hidden;
}
#sidebar.collapsed { width: var(--sidebar-collapsed); }

.sidebar-logo {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 1rem 0.875rem 0.875rem; border-bottom: 1px solid var(--border);
  flex-shrink: 0; overflow: hidden; min-height: 3.5rem; text-decoration: none;
}
.sidebar-logo-mark {
  width: 1.875rem; height: 1.875rem; border-radius: 0.5rem; flex-shrink: 0;
  background: linear-gradient(135deg, #4b6bfb, #7c9dff);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0.75rem rgba(75,107,251,0.45);
}
.sidebar-logo-text {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.25rem; font-weight: 700; letter-spacing: 0.16em; color: #dde6f5;
  white-space: nowrap; overflow: hidden; opacity: 1; transition: opacity 0.15s; width: 100%;
}
.sidebar-logo-text span.accent { color: #7c9dff; }
.sidebar-logo-text span.io { color: #64748b; font-size: 0.8125rem; letter-spacing: 0.06em; }
#sidebar.collapsed .sidebar-logo-text { opacity: 0; pointer-events: none; }
#sidebar.collapsed .sidebar-game-logo { display: none; }

.sidebar-toggle { padding: 0.625rem 0.875rem; display: flex; align-items: center; justify-content: flex-end; flex-shrink: 0; }
#sidebar.collapsed .sidebar-toggle { justify-content: center; }
.toggle-btn {
  width: 1.75rem; height: 1.75rem; border-radius: 0.4375rem;
  background: #1c1e2c; border: 1px solid var(--border);
  color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 0.75rem;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.22s; flex-shrink: 0;
}
.toggle-btn:hover { background: #21243a; border-color: #4b6bfb; color: #7c9dff; }
#sidebar.collapsed .toggle-btn { transform: rotate(180deg); }

.sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0.5rem 0; }
.sidebar-section-label {
  font-family: 'Rajdhani', sans-serif; font-size: 0.5625rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
  padding: 0.75rem 1rem 0.25rem; white-space: nowrap; overflow: hidden; opacity: 1; transition: opacity 0.15s;
}
#sidebar.collapsed .sidebar-section-label { opacity: 0; height: 0; padding: 0; }

.sidebar-item {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.5rem 0.875rem; color: var(--muted); font-size: 0.8125rem; font-weight: 500;
  text-decoration: none; cursor: pointer;
  transition: color 0.15s, background 0.15s; white-space: nowrap; overflow: hidden; position: relative;
}
.sidebar-item:hover { color: var(--text); background: rgba(75,107,251,0.08); }
.sidebar-item.active { color: #7c9dff; background: rgba(75,107,251,0.12); }
.sidebar-item.active::before {
  content: ''; position: absolute; left: 0; top: 0.25rem; bottom: 0.25rem;
  width: 0.1875rem; border-radius: 0 0.125rem 0.125rem 0; background: #4b6bfb;
}
.sidebar-item-icon { width: 1.125rem; text-align: center; flex-shrink: 0; font-size: 0.8125rem; }
.sidebar-item-label { opacity: 1; transition: opacity 0.15s; overflow: hidden; text-overflow: ellipsis; }
#sidebar.collapsed .sidebar-item-label { opacity: 0; width: 0; }
#sidebar.collapsed .sidebar-item { justify-content: center; padding: 0.625rem 0; }
#sidebar.collapsed .sidebar-item-icon { width: auto; }

.sidebar-item.cta {
  color: #c4b5fd; margin: 0.375rem 0.625rem; padding: 0.5625rem 0.75rem;
  border-radius: 0.5625rem; background: rgba(124,58,237,0.12);
  border: 1px solid rgba(167,139,250,0.2); gap: 0.5625rem; overflow: visible;
}
.sidebar-item.cta:hover { background: rgba(124,58,237,0.22); color: #e9d5ff; border-color: rgba(167,139,250,0.4); }
#sidebar.collapsed .sidebar-item.cta { margin: 0.375rem auto; width: 2.25rem; height: 2.25rem; padding: 0; border-radius: 0.5625rem; justify-content: center; }

#sidebar.collapsed .sidebar-item[data-tip]:hover::after {
  content: attr(data-tip); position: absolute; left: calc(var(--sidebar-collapsed) + 0.375rem); top: 50%;
  transform: translateY(-50%); background: #1c1e2c; border: 1px solid var(--border);
  color: var(--text); font-size: 0.6875rem; font-weight: 600; padding: 0.25rem 0.625rem;
  border-radius: 0.375rem; white-space: nowrap; z-index: 200; pointer-events: none;
}

.sidebar-footer {
  padding: 0.75rem 0.875rem; border-top: 1px solid var(--border);
  font-size: 0.625rem; color: var(--muted); white-space: nowrap; overflow: hidden;
  opacity: 1; transition: opacity 0.15s; flex-shrink: 0;
}
#sidebar.collapsed .sidebar-footer { opacity: 0; height: 0; padding: 0; border: none; }

.page-hero {
  padding: 0;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, #0e1020 0%, #111320 60%, #0b0d16 100%);
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--hero-bg) var(--hero-bg-pos) / cover no-repeat;
  opacity: 0.18; z-index: 0; pointer-events: none;
}
.page-hero-breadcrumb {
  position: relative; z-index: 1;
  padding: 0.75rem 2rem 0;
  font-size: 0.6875rem; color: var(--muted);
  display: flex; align-items: center; gap: 0.375rem;
}
.page-hero-breadcrumb .sep { color: #334155; }
.page-hero .page-hero-breadcrumb { font-size: 0.8125rem; color: var(--text); }
.page-hero .page-hero-breadcrumb a { color: var(--text); text-decoration: none; }
.page-hero .page-hero-breadcrumb .sep { color: var(--muted); }
.page-hero-body {
  display: flex; align-items: center;
  padding: 1rem 2rem 1.25rem;
  position: relative; z-index: 1;
}
.page-hero-portrait {
  width: 8.75rem; height: 10.625rem; flex-shrink: 0;
  border-radius: 2.625rem 0.75rem 2.625rem 0.75rem; overflow: hidden;
  margin-right: 1.25rem;
  position: relative;
  background: linear-gradient(135deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.06) 45%, rgba(255,255,255,0.14) 100%);
  backdrop-filter: blur(1.25rem) saturate(180%);
  -webkit-backdrop-filter: blur(1.25rem) saturate(180%);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.24),
    inset 0 -1px 1px rgba(0,0,0,0.3),
    inset 0 0 1.625rem rgba(255,255,255,0.04),
    0 0.5rem 2rem rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.05);
}
.page-hero-portrait::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg,
    rgba(255,255,255,0.22) 0%,
    rgba(255,255,255,0.05) 18%,
    rgba(255,255,255,0) 38%,
    rgba(255,255,255,0) 68%,
    rgba(255,255,255,0.12) 100%);
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 2;
}
.page-hero-portrait img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block;
  position: relative; z-index: 1;
  transform: scale(1.12);
}
.page-hero-text { flex: 1; }
.page-hero-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.625rem; font-weight: 700; color: #f8fafc;
  letter-spacing: 0.02em; line-height: 1.1; margin-bottom: 0.3125rem;
}
.page-hero-sub     { font-size: 0.75rem; color: #e2e8f0; margin-bottom: 0.375rem; line-height: 1.5; }
.page-hero-updated { font-size: 0.6875rem; color: #e2e8f0; margin-bottom: 0.625rem; }
.page-hero-updated strong { color: #7c9dff; font-weight: 700; }

@media (max-width: 880px) {
  #main { margin-left: 0; }
  .page-hero-breadcrumb { padding: 0.625rem 1rem 0; }
  .page-hero-body { padding: 1rem 1rem 1.25rem; }
  .page-hero-portrait { width: 6.875rem; height: 8.4375rem; margin-right: 0.875rem; }
  .page-hero-title { font-size: 1.3125rem; }
}

@media (max-width: 560px) {
  .page-hero-body { flex-direction: column; align-items: center; text-align: center; }
  .page-hero-portrait { width: 6.875rem; height: 8.4375rem; margin: 0 auto 0.875rem; }
  .page-hero-text { width: 100%; }
  .page-hero-sub { font-size: 0.6875rem; }
}

.gear-entry,
.pet-entry,
.card-entry {
  background: #111320;
  border: 1px solid var(--border);
  border-radius: 2.625rem 0.75rem 2.625rem 0.75rem;
  overflow: hidden;
  position: relative;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s, background 0.18s;
}
.gear-entry { display: flex; }
.pet-entry,
.card-entry { display: flex; flex-direction: column; }

.gear-entry::after,
.pet-entry::after,
.card-entry::after {
  content: '';
  position: absolute; top: -2.5rem; right: -2.5rem;
  width: 8.125rem; height: 8.125rem; border-radius: 50%;
  pointer-events: none;
  transition: opacity .2s;

}

.gear-entry.hidden,
.pet-entry.hidden,
.card-entry.hidden { display: none; }

@media (max-width: 400px) {
  .gear-entry { flex-direction: column; }
  .pet-entry-body,
  .card-entry-body { flex-direction: column; }
}

.pet-entry-header,
.card-entry-header {
  padding: 0.625rem 1rem 0.5625rem 1.25rem;
  border-bottom: 1px solid rgba(37,40,64,0.7);
  display: flex; align-items: center; justify-content: space-between; gap: 0.625rem;
}
.pet-entry-title,
.card-entry-title {
  font-family: 'Rajdhani', sans-serif; font-size: 1rem; font-weight: 700;
  color: #f1f5f9; letter-spacing: 0.02em; line-height: 1.2;
  padding-left: 0.625rem;
}

.pet-rarity-badge,
.card-rarity-badge {
  font-size: 0.625rem; font-weight: 800; padding: 0.125rem 0.5rem; border-radius: 6.25rem;
  flex-shrink: 0; letter-spacing: 0.04em;
}
.pet-rarity-badge.r5, .card-rarity-badge.r5 { background: rgba(200,162,106,0.12); color: var(--r5); border: 1px solid rgba(200,162,106,0.3); }
.pet-rarity-badge.r4, .card-rarity-badge.r4 { background: rgba(138,95,204,0.12); color: var(--r4); border: 1px solid rgba(138,95,204,0.3); }
.pet-rarity-badge.r3, .card-rarity-badge.r3 { background: rgba(64,113,185,0.12); color: var(--r3); border: 1px solid rgba(64,113,185,0.3); }
.pet-rarity-badge.r2, .card-rarity-badge.r2 { background: rgba(52,211,153,0.12); color: var(--r2); border: 1px solid rgba(52,211,153,0.3); }
.pet-rarity-badge.r1, .card-rarity-badge.r1 { background: rgba(148,163,184,0.12); color: var(--r1); border: 1px solid rgba(148,163,184,0.3); }

.gg-rarity.r5 { color: var(--r5); }
.gg-rarity.r4 { color: var(--r4); }
.gg-rarity.r3 { color: var(--r3); }
.gg-rarity.r2 { color: var(--r2); }
.gg-rarity.r1 { color: var(--r1); }

.gg-el.Holy     { color: #f1f5f9; }
.gg-el.Shock    { color: #67e8f9; }
.gg-el.Frost    { color: #3b82f6; }
.gg-el.Radiance { color: #f5c454; }
.gg-el.Chaos    { color: #9333ea; }
.gg-el.Fire     { color: #fb923c; }
.gg-el.Nature   { color: #4ade80; }

.pet-new-badge, .card-new-badge {
  background: rgba(220,38,38,0.15); color: #f87171; border: 1px solid rgba(220,38,38,0.3);
  font-size: 0.5625rem; font-weight: 900; padding: 0.125rem 0.4375rem; border-radius: 0.6875rem 0.125rem 0.6875rem 0.125rem; letter-spacing: 0.08em;
}
.pet-soon-badge, .card-soon-badge {
  background: rgba(37,99,235,0.15); color: #60a5fa; border: 1px solid rgba(37,99,235,0.3);
  font-size: 0.5625rem; font-weight: 900; padding: 0.125rem 0.4375rem; border-radius: 0.6875rem 0.125rem 0.6875rem 0.125rem; letter-spacing: 0.08em;
}

.pet-entry-body,
.card-entry-body { display: flex; gap: 0; flex: 1; align-items: stretch; }

.pet-img-col,
.card-img-col {
  width: 6.875rem; flex-shrink: 0;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 0.875rem 0.25rem;
  align-self: stretch;

}
.pet-img-col::after,
.card-img-col::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, transparent 55%, rgba(0,0,0,0.20) 100%);
  pointer-events: none;
  border-radius: inherit;
}
.pet-img-wrap,
.card-img-wrap {
  width: 6.25rem; border-radius: 0.5rem; overflow: hidden;
  box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.12);
  flex-shrink: 0;
  position: relative; z-index: 1;
  transition: transform 0.25s;
}
.pet-entry:hover .pet-img-wrap,
.card-entry:hover .card-img-wrap { transform: scale(1.06); }
.pet-img-wrap img,
.card-img-wrap img { width: 100%; display: block; object-fit: cover; }

.pet-info-col,
.card-info-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pet-info-panel,
.card-info-panel { padding: 0.875rem 1rem; }

.stat-toggle {
  display: flex; align-items: center; gap: 0.125rem;
  background: #0e1020; border: 1px solid #2d3142; border-radius: 0.4375rem;
  padding: 0.125rem; flex-shrink: 0;
}
.stat-toggle-btn {
  height: 1.375rem; padding: 0 0.5rem; border-radius: 0.3125rem; border: none; cursor: pointer;
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.05em; font-family: 'Inter', sans-serif;
  background: transparent; color: var(--muted); transition: all 0.15s;
}
.stat-toggle-btn.active { background: #1e2240; color: #e2e8f0; }
.stat-toggle-swap {
  width: 1.375rem; height: 1.375rem; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--muted); font-size: 0.625rem; border: none; background: none;
  transition: color 0.15s, transform 0.3s; padding: 0; border-radius: 0.25rem;
}
@media (hover: hover) and (pointer: fine) {
  .stat-toggle-btn:hover:not(.active) { color: var(--text); }
  .stat-toggle-swap:hover { color: #7c9dff; transform: rotate(180deg); }
}

.info-section-title {
  font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 0.5rem;
}
.skill-effect-box {
  background: #111218; border: 1px solid #1e2035; border-radius: 0.4375rem;
  padding: 0.625rem 0.75rem; margin-bottom: 0.75rem; font-size: 0.6875rem; line-height: 1.65;
  color: #94a3b8;
}
.skill-effect-type {
  font-size: 0.625rem; font-weight: 800; color: #4b6bfb;
  background: rgba(75,107,251,0.1); border: 1px solid rgba(75,107,251,0.2);
  padding: 1px 0.4375rem; border-radius: 0.25rem; display: inline-block; margin-bottom: 0.375rem;
}
.skill-effect-box strong,
.skill-effect-box .highlight { color: #c8a26a; font-weight: 700; }
.skill-none { color: #475569; font-style: italic; font-size: 0.6875rem; }

.stats-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.stats-list li {
  font-size: 0.6875rem; color: #94a3b8; line-height: 1.5;
  padding-left: 0.875rem; position: relative;
}
.stats-list li::before { content: '•'; position: absolute; left: 0; color: var(--muted); }
.stats-list li strong { color: #c8a26a; font-weight: 700; }

#no-results {
  display: none; grid-column: 1/-1;
  text-align: center; padding: 3.75rem 1.25rem;
  color: var(--muted); font-size: 0.875rem;
}

.filter-bar {
  padding: 1rem 2rem;
  border-bottom: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  background: rgba(16,18,29,0.6); backdrop-filter: blur(0.5rem);
}
.filter-row { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.filter-row > .filter-group { flex: 0 1 auto; min-width: 0; }
.filter-row > .reset-btn { flex: 0 0 auto; align-self: flex-end; }

.search-box, .filter-group, .reset-btn {
  background: rgba(255,255,255,0.09);
  backdrop-filter: blur(1rem) saturate(180%);
  -webkit-backdrop-filter: blur(1rem) saturate(180%);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 0.25rem 1.125rem rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.07);
}

.filter-group {
  display: flex; align-items: center; gap: 1px; flex-wrap: nowrap;
  border-radius: 0.625rem; padding: 0.125rem;
}
.filter-group-label { display: none; }

.f-btn {
  height: 2rem; padding: 0 0.5rem;
  background: transparent; border: none;
  border-radius: 0.4375rem; cursor: pointer;
  color: #e2e8f0; font-size: 0.6875rem; font-weight: 600;
  display: flex; align-items: center; gap: 0.3125rem;
  transition: all 0.15s; white-space: nowrap; font-family: 'Inter', sans-serif;
  position: relative; flex-shrink: 0;
}
.f-btn.active { background: #1e2240; color: #e2e8f0; }
.f-btn img { width: 1.125rem; height: 1.125rem; object-fit: contain; filter: brightness(0.75); transition: filter 0.15s; }
.f-btn.active img { filter: brightness(1.1); }

.filter-group .f-btn:not(:last-child)::after {
  content: ''; position: absolute; top: 22%; bottom: 22%; right: -1px;
  width: 1px; background: rgba(255,255,255,0.1);
}
.filter-group .f-btn.active::after { display: none; }
.filter-group .f-btn:has(+ .f-btn.active)::after { display: none; }

@media (hover: hover) and (pointer: fine) {
  .f-btn:hover { color: #f8fafc; background: rgba(255,255,255,0.17); }
  .f-btn:hover img { filter: brightness(1.1); }
  .f-btn.active:hover { background: #2a3060; }
}

.f-btn.r5 { color: var(--r5); }
.f-btn.r4 { color: var(--r4); }
.f-btn.r3 { color: var(--r3); }
.f-btn.r2 { color: var(--r2); }
.f-btn.r1 { color: var(--r1); }
.f-btn.r5.active { background: rgba(200,162,106,0.16); }
.f-btn.r4.active { background: rgba(138,95,204,0.16); }
.f-btn.r3.active { background: rgba(64,113,185,0.16); }
.f-btn.r2.active { background: rgba(52,211,153,0.16); }
.f-btn.r1.active { background: rgba(148,163,184,0.16); }
@media (hover: hover) and (pointer: fine) {
  .f-btn.r5.active:hover { background: rgba(200,162,106,0.24); }
  .f-btn.r4.active:hover { background: rgba(138,95,204,0.24); }
  .f-btn.r3.active:hover { background: rgba(64,113,185,0.24); }
  .f-btn.r2.active:hover { background: rgba(52,211,153,0.24); }
  .f-btn.r1.active:hover { background: rgba(148,163,184,0.24); }
}

.search-box {
  height: 2.375rem; padding: 0 0.75rem;
  border-radius: 0.625rem;
  color: var(--text); font-size: 0.75rem; font-family: 'Inter', sans-serif;
  outline: none; min-width: 11.25rem; transition: border-color 0.15s;
}
.search-box:focus { border-color: var(--accent); }
.search-box::placeholder { color: #cbd5e1; }

.reset-btn {
  height: 2.375rem; padding: 0 0.75rem;
  border-radius: 0.625rem; color: #e2e8f0; font-size: 0.6875rem; font-weight: 600; cursor: pointer;
  transition: all 0.15s; white-space: nowrap;
  display: flex; align-items: center; gap: 0.3125rem;
}
@media (hover: hover) and (pointer: fine) {
  .reset-btn:hover { border-color: #f87171; color: #f87171; background: rgba(248,113,113,0.08); }
}

.showing-label { font-size: 0.6875rem; color: #e2e8f0; margin-left: auto; white-space: nowrap; }

@media (max-width: 880px) {
  .filter-bar { padding: 0.75rem 1rem; }
}
@media (max-width: 560px) {
  .filter-bar { gap: 0.5rem; padding: 0.625rem 0.875rem; }
  .search-box {
    height: 2.25rem;
    font-size: 0.75rem;
  }
  .reset-btn { height: 2.25rem; }
  .f-btn { height: 1.875rem; padding: 0 0.5rem; font-size: 0.65625rem; }
}

.page-hero-count {
  display: inline-flex; align-items: center; margin-top: 0.375rem;
  padding: 0.375rem 0.75rem; font-size: 0.6875rem; font-weight: 600;
  color: var(--glass-text-active); background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 0.875rem 0.25rem 0.875rem 0.25rem;
  font-family: inherit; white-space: nowrap;
  vertical-align: middle;
}

.sidebar-game-logo {
  background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../Assets/lostsword/Artwork/GameIcon.webp') center 25% / cover no-repeat;
  border-bottom: 1px solid var(--border);
  padding: 0.625rem 0.75rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
  transition: opacity 0.15s;
  min-height: 4rem;
}
.sidebar-game-logo img {
  max-width: 100%; max-height: 3.25rem;
  object-fit: contain;
  opacity: 0.92;
  transition: opacity 0.15s;
}
#sidebar.collapsed .sidebar-game-logo { display: none; }

.mode-tabs {
  position: absolute; bottom: 1rem; right: 2rem; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem;
  padding: 0.5rem;
  background: #020306;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 2.625rem 0.75rem 2.625rem 0.75rem;
  box-shadow: 0 0.25rem 1.5rem rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
}
.mode-tab {
  height: 2.125rem; padding: 0 0.875rem;
  border-radius: 2.25rem 0.625rem 2.25rem 0.625rem;
  border: 1px solid #2a2d3f;
  background: #0d0f18;
  color: #f1f5f9;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em;
  cursor: pointer; text-decoration: none;
  display: flex; align-items: center; justify-content: center; gap: 0.4375rem;
  transition: all 0.18s; white-space: nowrap;
}
.mode-tab:hover {
  border-color: #4b6bfb; color: #f1f5f9;
  background: rgba(75,107,251,0.22);
  transform: translateY(-1px);
}
.mode-tab.active {
  border-color: #4b6bfb;
  background: rgba(75,107,251,0.22);
  color: #f1f5f9;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.section-intro {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 0.75rem; padding: 1rem 1.25rem;
  display: flex; align-items: flex-start; gap: 0.875rem;
}
.section-intro-icon {
  width: 2.5rem; height: 2.5rem; border-radius: 0.625rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.125rem;
}
.section-intro-text { flex: 1; }
.section-intro-title { font-family: 'Rajdhani', sans-serif; font-size: 1.0625rem; font-weight: 700; color: #f1f5f9; letter-spacing: 0.04em; margin-bottom: 0.25rem; }
.section-intro-desc { font-size: 0.6875rem; color: #64748b; line-height: 1.65; }

.tier-row {
  display: grid;
  border-bottom: 1px solid rgba(255,255,255,0.04);

}
.tier-row:last-child { border-bottom: none; }

.tier-label-cell {
  display: flex; align-items: center; justify-content: center;
  font-family: 'Rajdhani', sans-serif; font-size: 1.375rem; font-weight: 700;
  border-right: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.tier-label-cell.t-splus { background: #d9797c; color: #3a1113; }
.tier-label-cell.t-s     { background: #dba374; color: #3a230f; }
.tier-label-cell.t-a     { background: #ddc182; color: #3a2f10; }
.tier-label-cell.t-b     { background: #d6d47f; color: #35340f; }
.tier-label-cell.t-c     { background: #aed67e; color: #25390f; }
.tier-label-cell.t-d     { background: #7fcf90; color: #0f3a1c; }