.hd-list-header,.hd-song{grid-template-columns:56px minmax(0,1fr) repeat(4,150px);align-items:center;gap:.75rem;display:grid}.hd-list-header{top:calc(var(--header-sticky-height,0px) + var(--toolbar-height,0px));z-index:10;background:var(--bg);border-bottom:1px solid var(--border);color:var(--text-dim);padding:.4rem .5rem;font-size:.8rem;font-weight:600;position:sticky}.hd-song{border-bottom:1px solid var(--border);padding:.5rem}.hd-jacket{object-fit:cover;background:linear-gradient(135deg, var(--border), var(--surface));width:56px;height:56px;color:var(--text-dim);border-radius:6px;justify-content:center;align-items:center;font-size:1.2rem;font-weight:700;display:flex}.hd-title-main{overflow-wrap:anywhere;font-weight:600}.hd-charts{display:contents}.hd-chart{background:var(--surface);border-left:3px solid var(--diff);border-radius:6px;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"level score dot""level grade dot";align-items:center;gap:.2rem .45rem;min-width:0;min-height:46px;padding:.35rem .45rem;display:grid}.hd-chart.dim{opacity:.3}.hd-chart.has-history{cursor:pointer}.hd-chart.has-history:focus-visible,.hd-chart[aria-expanded=true]{outline:2px solid var(--diff);outline-offset:1px}@media (hover:hover){.hd-chart.has-history:hover{background:var(--border)}}.hd-history{background:var(--surface);border-left:3px solid var(--diff);border-radius:6px;grid-column:1/-1;margin:0;padding:.5rem .75rem}.hd-level{background:var(--diff);color:#fff;text-align:center;text-shadow:0 1px 2px #00000059;border-radius:6px;grid-area:level;min-width:2rem;padding:.15rem .35rem;font-weight:900}.hd-diff-name{display:none}.hd-score{white-space:nowrap;text-overflow:ellipsis;grid-area:score;font-family:JetBrains Mono,ui-monospace,monospace;font-size:.8rem;overflow:hidden}.hd-score.empty{color:var(--text-dim)}.hd-grade-slot{grid-area:grade;min-height:1.6rem}.hd-grade{white-space:nowrap;padding:0 .2rem;font-family:"M PLUS Rounded 1c",Arial Rounded MT Bold,system-ui,sans-serif;font-size:1.4rem;font-weight:900;line-height:1.15;display:inline-grid}.hd-grade>span{grid-area:1/1}.hd-grade-outline{color:#fff;-webkit-text-stroke:6px #fff;filter:drop-shadow(0 1px 1.5px #00000080)}.hd-grade-fill{z-index:1;background:var(--fill);color:#0000;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;position:relative}.hd-grade sup{vertical-align:.55em;margin-left:.05em;font-size:.6em}.hd-grade-outline sup{-webkit-text-stroke-width:4px}.hd-dot{vertical-align:middle;border:1.5px solid #5a5f6b;border-radius:50%;flex-shrink:0;grid-area:dot;width:13px;height:13px;display:inline-block}.hd-dot-CLEAR,.hd-dot-FULL_COMBO,.hd-dot-ALL_PERFECT{border:1.5px solid #fff}.hd-dot-CLEAR{background:#f9ff55;box-shadow:0 0 6px #f9ff558c}.hd-dot-FULL_COMBO{background:#ff4fd0;box-shadow:0 0 6px #ff4fd08c}.hd-dot-ALL_PERFECT{background:linear-gradient(135deg,#c08bff 0%,#8c9bff 22%,#6fd3ff 45%,#7ff5e3 65%,#c4ffa8 82%,#fff6a8 100%);box-shadow:0 0 7px #8cc8ff99}.hd-list-count{color:var(--text-dim);font-size:.8rem}.hd-and-up{color:var(--text-dim);margin-left:.15rem;font-size:.8rem;font-weight:700}.hd-level-range{align-items:center;gap:.4rem;display:flex}.hd-level-range input{width:4.5rem}#f-singer-search{width:100%;margin-bottom:.25rem}.hd-singer-list{flex-direction:column;gap:.35rem;display:flex}.hd-singer-count{color:var(--text-dim);margin-left:auto;font-size:.75rem}#stats-container .pivot-table{table-layout:fixed}#stats-container .pivot-table td,#stats-container .pivot-table thead th:not(:first-child){text-align:center;padding-left:0;padding-right:0}.hd-count{color:inherit;border-radius:4px;text-decoration:none;display:block}.hd-count:focus-visible{outline:2px solid var(--accent)}@media (hover:hover){.hd-count:hover{background:var(--border);text-decoration:underline}}@media (width<=1100px){.hd-list-header{display:none}.hd-song{grid-template-columns:48px minmax(0,1fr);gap:.5rem .65rem;padding:.6rem .25rem;container-type:inline-size}.hd-jacket{width:48px;height:48px}.hd-charts{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem;display:grid}@container (width>=640px){.hd-charts{grid-template-columns:repeat(4,minmax(0,1fr))}}.hd-diff-name{letter-spacing:.04em;text-transform:uppercase;color:var(--diff);grid-area:name;font-size:.65rem;font-weight:700;display:block}.hd-chart{grid-template-areas:"name name name""level score dot""level grade dot"}}
