:root {
  color-scheme: dark;
  --ink: #f3f6ff;
  --muted: #9ba8c8;
  --line: rgba(173, 192, 255, 0.18);
  --panel: rgba(18, 27, 54, 0.86);
  --accent: #8ef3cf;
  --accent-2: #86a5ff;
  --selected: #223b8c;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: #090d1b;
  background-image: radial-gradient(circle at 8% 0%, rgba(62, 98, 197, .28), transparent 26rem), radial-gradient(circle at 90% 12%, rgba(37, 154, 143, .14), transparent 22rem), linear-gradient(135deg, rgba(255,255,255,.025) 25%, transparent 25%) 0 0 / 32px 32px;
}
button, input { font: inherit; }
button { cursor: pointer; }
.shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 48px 0 64px; }
.hero { border-bottom: 1px solid var(--line); padding: 8px 0 38px; }
.eyebrow, .kicker { color: var(--accent); font-size: .72rem; font-weight: 800; letter-spacing: .14em; margin: 0; }
.pulse { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); }
.hero-copy { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-top: 21px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 10px; font-size: clamp(2.35rem, 6vw, 4.85rem); line-height: .96; letter-spacing: -.065em; }
h1 em { color: var(--accent); font-style: normal; }
.data-status { display: grid; grid-template-columns: repeat(2, minmax(78px, 1fr)); min-width: 208px; margin: 0; border: 1px solid var(--line); background: rgba(7, 11, 27, .35); }
.data-status div { padding: 13px 15px; border-left: 1px solid var(--line); }
.data-status div:first-child { border-left: 0; }
dt { color: var(--muted); font-size: .67rem; font-weight: 800; letter-spacing: .08em; }
dd { margin: 5px 0 0; font-size: 1.02rem; font-weight: 750; }
.workspace { display: grid; grid-template-columns: 1.35fr .65fr; gap: 16px; margin: 28px 0 42px; }
.level-panel, .filter-panel { border: 1px solid var(--line); background: var(--panel); box-shadow: 0 18px 50px rgba(0,0,0,.17); }
.level-panel { padding: 23px; }
.filter-panel { display: flex; flex-direction: column; justify-content: space-between; gap: 21px; padding: 23px; }
.section-heading, .results-header { display: flex; justify-content: space-between; align-items: end; gap: 16px; }
h2 { margin-bottom: 0; font-size: 1.32rem; letter-spacing: -.025em; }
.text-button, .reset-button { border: 0; background: transparent; color: var(--accent); font-weight: 750; padding: 7px 0; }
.level-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; margin-top: 20px; }
.level-button { min-height: 39px; border: 1px solid var(--line); color: #c7d2f6; background: rgba(7, 12, 29, .54); font-weight: 750; }
.level-button:hover { border-color: var(--accent-2); color: white; }
.level-button[aria-pressed="true"] { color: #071522; background: var(--accent); border-color: var(--accent); }
.official-level-filter { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.official-level-label { margin: 0 0 10px; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .09em; }
.official-level-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.official-level-button { min-height: 39px; border: 1px solid var(--line); color: #c7d2f6; background: rgba(7, 12, 29, .54); font-size: .78rem; font-weight: 800; }
.official-level-button:hover { border-color: var(--accent-2); color: white; }
.official-level-button[aria-pressed="true"] { color: #071522; border-color: var(--accent); background: var(--accent); }
.search-field { display: block; }
.search-field span, .version-field span, .language-field span, legend { display: block; margin-bottom: 8px; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .09em; }
.search-field input, .version-field select, .language-field select { width: 100%; padding: 11px 12px; outline: none; border: 1px solid var(--line); border-radius: 2px; color: var(--ink); background: rgba(2, 7, 21, .54); }
.search-field input:focus, .version-field select:focus, .language-field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(142, 243, 207, .1); }
.language-field { display: block; width: 142px; }
fieldset { margin: 0; padding: 0; border: 0; }
.type-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.type-filters legend { width: 100%; }
.type-filters label { position: relative; }
.type-filters input { position: absolute; opacity: 0; }
.type-filters span { display: inline-block; padding: 8px 10px; border: 1px solid var(--line); color: var(--muted); font-size: .8rem; font-weight: 800; }
.type-filters input:checked + span { color: var(--ink); border-color: var(--accent-2); background: var(--selected); }
.grouping-switch { display: grid; gap: 7px; }
.grouping-switch label { position: relative; }
.grouping-switch input { position: absolute; opacity: 0; }
.grouping-switch span { display: block; padding: 9px 10px; border: 1px solid var(--line); color: var(--muted); font-size: .76rem; font-weight: 800; }
.grouping-switch input:checked + span { color: #071522; border-color: var(--accent); background: var(--accent); }
.status-filters { display: flex; gap: 7px; flex-wrap: wrap; }
.status-filters legend { width: 100%; }
.status-filters label { position: relative; }
.status-filters input { position: absolute; opacity: 0; }
.status-filters span { display: inline-block; padding: 7px 8px; border: 1px solid var(--line); color: var(--muted); font-size: .7rem; font-weight: 800; }
.status-filters input:checked + span { color: var(--ink); border-color: rgba(255,255,255,.48); background: rgba(50, 69, 126, .74); }
.results-section { max-width: 100%; }
.results-count, .sorting-note { color: var(--muted); font-size: .88rem; }
.results-count { margin: 0; white-space: nowrap; }
.sorting-note { margin: 10px 0 15px; }
.results { border-top: 1px solid var(--line); }
.group-heading { display: flex; align-items: center; gap: 12px; padding: 19px 0 9px; color: var(--accent); font-size: .75rem; font-weight: 800; letter-spacing: .12em; }
.group-heading::after { content: ''; height: 1px; flex: 1; background: var(--line); }
.subgroup-heading { margin: 5px 0 0; padding: 8px 12px; color: #c9d5f6; border-left: 2px solid var(--accent-2); background: rgba(51, 73, 130, .22); font-size: .76rem; font-weight: 850; letter-spacing: .06em; }
.chart-row { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(165px, .8fr) minmax(146px, 202px); align-items: center; gap: 15px; padding: 11px 12px; border: 1px solid transparent; border-bottom-color: var(--line); background: rgba(13, 20, 42, .45); }
.chart-row:hover { border-color: rgba(142, 243, 207, .45); background: rgba(24, 39, 78, .6); }
.chart-row[data-type="DPH"] { color: #5e510b; background: #fcf8e3; }
.chart-row[data-type="DPA"] { color: #7d1b1b; background: #f2dede; }
.chart-row[data-type="DPL"] { color: #7e3884; background: #f2e6f3; }
.chart-row[data-type="DPH"]:hover { background: #fffbed; }
.chart-row[data-type="DPA"]:hover { background: #fae7e7; }
.chart-row[data-type="DPL"]:hover { background: #f7edf8; }
.chart-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 720; }
.chart-player-link { color: inherit; text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; cursor: pointer; }
.chart-player-link:hover { color: #005ac2; }
.official-level-image { display: block; justify-self: end; width: min(100%, 202px); height: auto; }
.official-level-unavailable { justify-self: end; font-size: .71rem; font-weight: 850; letter-spacing: .02em; white-space: nowrap; }
.status-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.status-tag { display: inline-block; padding: 4px 6px; border: 1px solid transparent; font-size: .66rem; font-weight: 850; line-height: 1.1; white-space: nowrap; }
.status-tag[data-status="cs_song"] { color: #fff5d6; background: #806000; }
.status-tag[data-status="cs_black_another"] { color: white; border-color: #666; background: #000; }
.status-tag[data-status="removed"] { color: white; background: #747474; }
.status-tag[data-status="old_chart"] { color: #ffe7d6; background: #7f340d; }
.status-tag[data-status="infinitas"] { color: #dceaff; background: #002060; }
.status-tag[data-status="unused"] { color: #fff; background: #151515; border-color: #777; }
.empty-state { padding: 34px 12px; color: var(--muted); text-align: center; border-bottom: 1px solid var(--line); }
@media (max-width: 780px) {
  .shell { width: min(100% - 24px, 1180px); padding-top: 26px; }
  .hero-copy, .workspace { display: block; }
  .language-field { width: 100%; margin-top: 20px; }
  .data-status { min-width: 0; margin-top: 26px; }
  .filter-panel { margin-top: 12px; }
  .level-grid { grid-template-columns: repeat(5, 1fr); }
  .official-level-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 680px) {
  .data-status div { padding: 10px; }
  dd { font-size: .87rem; }
  .chart-row { grid-template-columns: minmax(0,1fr) 150px; gap: 8px; }
  .official-level-image, .official-level-unavailable { grid-column: 2 / 3; grid-row: 1; align-self: center; }
  .official-level-unavailable { justify-self: end; }
  .status-tags { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 430px) {
  .chart-row { grid-template-columns: minmax(0,1fr) 126px; }
}