:root {
  --usdb-accent: var(--usdb-blue);
  --usdb-accent-strong: var(--usdb-blue-strong);
  --usdb-accent-soft: var(--usdb-blue-soft);
  --bs-primary: var(--usdb-blue);
  --bs-primary-rgb: 25, 118, 168;
  --bs-link-color: var(--usdb-blue-strong);
  --bs-link-hover-color: var(--usdb-orange-strong);
  --bs-body-color: var(--usdb-ink);
  --bs-body-bg: var(--usdb-canvas);
  --bs-border-color: var(--usdb-line);
  --bs-font-sans-serif: var(--usdb-font);
}

html { min-height: 100%; }
body { min-height: 100vh; letter-spacing: -0.008em; }
a { text-underline-offset: 0.16em; }
@media (min-width: 1400px) { .container-xl { max-width: 1760px; width: calc(100% - 3rem); } }

.site-nav {
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--usdb-line);
  backdrop-filter: blur(14px);
}
.site-nav .container-xl { min-height: 3.5rem; }
.site-nav .navbar-brand { padding-block: .3rem; }
.brand-lockup { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; }
.brand-emblem { align-items: center; background: var(--usdb-ink); border-radius: .6rem; display: inline-flex; height: 2.2rem; justify-content: center; overflow: hidden; width: 2.2rem; }
.brand-emblem img { display: block; height: 100%; object-fit: contain; width: 100%; }
.brand-copy { display: flex; flex-direction: column; line-height: 1; }
.brand-name { color: var(--usdb-ink); font-size: 1rem; font-weight: 820; letter-spacing: -0.04em; }
.brand-tagline { color: var(--usdb-muted); font-size: .56rem; font-weight: 650; letter-spacing: .015em; margin-top: .18rem; }
.nav-link { color: #4f5d68; font-size: 0.86rem; font-weight: 650; padding-inline: .6rem !important; }
.nav-link:hover, .nav-link:focus { color: var(--usdb-accent-strong); }
.dropdown-menu { border-color: var(--usdb-line); box-shadow: var(--usdb-shadow); font-size: .86rem; padding: .35rem; }
.dropdown-item { border-radius: .35rem; padding: .4rem .55rem; }
.nav-search { align-items: center; display: flex; gap: .3rem; }
.nav-search input { font-size: .8rem !important; min-width: 10.5rem; padding: .32rem .5rem !important; width: 11.5rem !important; }
.site-nav-tools { align-items: center; display: flex; gap: .55rem; }
.nav-utility-link { align-items: center; color: #4f5d68; display: inline-flex; font-size: .8rem; font-weight: 700; gap: .25rem; padding: .35rem .25rem; text-decoration: none; white-space: nowrap; }
.nav-utility-link:hover { color: var(--usdb-accent-strong); }
.nav-zip-link-active { background: var(--usdb-orange); border: 1px solid var(--usdb-orange-strong); border-radius: .45rem; box-shadow: 0 .18rem .5rem rgba(189, 90, 10, .2); color: #fff; padding: .3rem .5rem; transition: background-color 120ms ease, box-shadow 120ms ease, transform 120ms ease; }
.nav-zip-link-active:hover, .nav-zip-link-active:focus-visible { background: var(--usdb-orange-strong); box-shadow: 0 .24rem .65rem rgba(189, 90, 10, .28); color: #fff; transform: translateY(-1px); }
.nav-zip-link-active .badge { background: #fff; color: var(--usdb-orange-strong); font-size: .68rem; min-width: 1.25rem; padding: .22rem .34rem; }
.site-user-toggle { align-items: center; background: transparent; border: 0; border-left: 1px solid var(--usdb-line); color: var(--usdb-ink); display: inline-flex; font-size: .82rem; gap: .35rem; padding: .32rem 0 .32rem .65rem; }
.site-user-toggle:hover, .site-user-toggle:focus { color: var(--usdb-accent-strong); }
.site-user-toggle svg { fill: currentColor; height: 1rem; width: 1rem; }
.site-user-toggle strong { font-weight: 780; }
.site-user-menu form { margin: 0; }

.page-shell { padding-block: clamp(1rem, 2.4vw, 2rem); }
.page-heading { margin-bottom: 1rem; }
.eyebrow {
  color: var(--usdb-orange-strong);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}
.display-title { font-size: clamp(1.65rem, 3vw, 2.5rem); font-weight: 760; letter-spacing: -0.045em; line-height: 1.08; }
.lead-muted { color: var(--usdb-muted); font-size: .94rem; max-width: 68ch; }

.surface-card {
  background: var(--usdb-surface);
  border: 1px solid var(--usdb-line);
  border-radius: .65rem;
  box-shadow: var(--usdb-shadow-sm);
}
.surface-card-hover { transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease; }
.surface-card-hover:hover { border-color: #c8d5d8; box-shadow: 0 0.55rem 1.5rem rgba(20, 34, 43, 0.07); transform: translateY(-1px); }
.card-header-clean { background: transparent; border-bottom: 1px solid var(--usdb-line); padding: .65rem .85rem; }
.card-body-roomy { padding: clamp(.9rem, 2vw, 1.3rem); }

.auth-shell { display: grid; min-height: calc(100vh - 12rem); place-items: center; }
.auth-card { width: min(100%, 31rem); }
.auth-card-wide { width: min(100%, 44rem); }
.auth-icon {
  align-items: center; background: var(--usdb-orange-soft); border-radius: 0.75rem;
  color: var(--usdb-accent-strong); display: inline-flex; height: 2.7rem;
  justify-content: center; margin-bottom: 1rem; width: 2.7rem;
}
.auth-icon svg { height: 1.5rem; width: 1.5rem; }

label { color: #34424d; font-size: 0.86rem; font-weight: 650; margin-bottom: 0.35rem; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  background: #fff; border: 1px solid #cfd8dc; border-radius: 0.5rem; color: var(--usdb-ink);
  display: block; font-size: 0.9rem; padding: 0.45rem 0.62rem; transition: border-color 150ms ease, box-shadow 150ms ease; width: 100%;
}
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus {
  border-color: var(--usdb-accent); box-shadow: 0 0 0 0.2rem rgba(22, 135, 127, 0.12); outline: 0;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--usdb-accent); height: 1rem; width: 1rem; }
.helptext { color: var(--usdb-muted); display: block; font-size: 0.78rem; line-height: 1.4; margin-top: 0.35rem; }
.errorlist { color: #a32932; font-size: 0.82rem; list-style: none; margin: 0.35rem 0 0; padding: 0; }

.btn { border-radius: 0.42rem; font-size: 0.86rem; font-weight: 650; padding: 0.43rem 0.7rem; }
.btn-primary { --bs-btn-bg: var(--usdb-orange); --bs-btn-border-color: var(--usdb-orange); --bs-btn-hover-bg: var(--usdb-orange-strong); --bs-btn-hover-border-color: var(--usdb-orange-strong); --bs-btn-active-bg: var(--usdb-orange-strong); --bs-btn-active-border-color: var(--usdb-orange-strong); }
.btn-soft { background: var(--usdb-accent-soft); border: 1px solid #cce6e2; color: var(--usdb-accent-strong); }
.btn-soft:hover { background: #d9efec; border-color: #b8dcd7; color: #094844; }

.stat-card { padding: 1.15rem; }
.stat-label { color: var(--usdb-muted); font-size: 0.77rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.stat-value { font-size: 1.4rem; font-weight: 760; letter-spacing: -0.04em; }
.dashboard-catalog-stat { color: inherit; display: block; text-decoration: none; }
.dashboard-catalog-stat .stat-label, .dashboard-catalog-stat .stat-value { display: block; }
.dashboard-catalog-stat:hover .stat-value, .dashboard-catalog-stat:focus-visible .stat-value { color: var(--usdb-accent-strong); }
.home-actions { border-top: 1px solid var(--usdb-line); max-width: 46rem; }
.home-actions a { align-items: baseline; border-bottom: 1px solid var(--usdb-line); color: var(--usdb-ink); display: flex; gap: 1rem; justify-content: space-between; padding: 1rem 0; text-decoration: none; }
.home-actions a:hover strong { color: var(--usdb-accent-strong); }
.home-actions span { color: var(--usdb-muted); font-size: .86rem; text-align: right; }

.filter-card summary { cursor: pointer; font-size: 0.9rem; font-weight: 700; list-style: none; }
.filter-card summary::-webkit-details-marker { display: none; }
.filter-card summary::after { color: var(--usdb-muted); content: "+"; float: right; font-size: 1.15rem; }
.filter-card[open] summary::after { content: "−"; }
.catalog-search-card { overflow: hidden; }
.catalog-quick-search { align-items: center; display: flex; gap: .4rem; padding: .55rem .65rem; }
.catalog-quick-search input { flex: 1 1 auto; min-width: 0; padding-block: .36rem !important; }
.catalog-quick-search .btn { flex: 0 0 auto; padding-block: .36rem; }
.catalog-advanced-filters { border-top: 1px solid var(--usdb-line); }
.catalog-advanced-filters summary { color: var(--usdb-muted); cursor: pointer; font-size: .75rem; font-weight: 700; list-style: none; padding: .42rem .7rem; }
.catalog-advanced-filters summary::-webkit-details-marker { display: none; }
.catalog-advanced-filters summary::after { content: "+"; float: right; font-size: .9rem; }
.catalog-advanced-filters[open] summary::after { content: "−"; }
.catalog-advanced-filters summary .badge { font-size: .58rem; margin-left: .35rem; vertical-align: .08rem; }
.catalog-filter-form { border-top: 1px solid var(--usdb-line); padding: .6rem .7rem; }
.catalog-filter-grid { display: grid; gap: .48rem .6rem; grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr)); }
.catalog-filter-grid label { font-size: .68rem; margin-bottom: .15rem; }
.catalog-filter-grid input, .catalog-filter-grid select { border-radius: .35rem !important; font-size: .76rem !important; padding: .3rem .42rem !important; }
.catalog-filter-actions { display: flex; gap: .4rem; justify-content: flex-end; margin-top: .6rem; }

.table-modern { margin: 0; }
.table-modern th { background: #f8fafb; border-bottom-width: 1px; color: #65727d; font-size: 0.69rem; font-weight: 750; letter-spacing: 0.05em; padding: 0.5rem 0.7rem; text-transform: uppercase; white-space: nowrap; }
.table-modern td { border-color: #edf0f2; font-size: .88rem; padding: 0.5rem 0.7rem; vertical-align: middle; }
.table-modern tbody tr { transition: background 120ms ease; }
.table-modern tbody tr:hover { background: #f9fbfb; }
.registration-review-table { min-width: 76rem; }
.registration-review-table td { line-height: 1.35; vertical-align: top; }
.registration-review-table td > small { color: var(--usdb-muted); display: block; font-size: .67rem; margin-top: .18rem; }
.registration-review-name { display: block; }
.registration-review-flags { display: flex; flex-wrap: wrap; gap: .2rem; max-width: 12rem; }
.registration-review-flags .badge { font-size: .62rem; font-weight: 650; }
.registration-review-reason { color: var(--usdb-ink) !important; max-width: 14rem; overflow-wrap: anywhere; }
.registration-review-actions { min-width: 11rem; width: 11rem; }
.registration-review-actions form { display: grid; gap: .3rem; }
.registration-review-actions input { font-size: .72rem; min-width: 10rem; }
.song-table { table-layout: fixed; }
.song-table .song-col { width: 31%; }
.song-table .genre-col { width: 18%; }
.song-table .year-col { width: 6%; }
.song-table .edition-col { width: 16%; }

.edition-card { color: inherit; min-height: 9rem; }
.edition-card:hover { border-color: var(--bs-primary); }
.edition-cover { width: 7rem; object-fit: cover; background: var(--bs-tertiary-bg); }
.edition-detail-cover { width: 8rem; max-height: 10rem; object-fit: cover; border-radius: .5rem; }
.edition-filter-bar { display: flex; flex-wrap: wrap; gap: .45rem; margin: -.25rem 0 1rem; }
.edition-filter-bar a { background: var(--usdb-surface); border: 1px solid var(--usdb-line); border-radius: 999px; color: var(--usdb-muted); font-size: .78rem; font-weight: 700; padding: .35rem .7rem; text-decoration: none; }
.edition-filter-bar a:hover, .edition-filter-bar a:focus-visible { border-color: var(--usdb-accent); color: var(--usdb-accent-strong); }
.edition-filter-bar a.active { background: var(--usdb-accent-soft); border-color: var(--usdb-accent); color: var(--usdb-accent-strong); }
.song-table .language-col { width: 10%; }
.song-table .rating-col { width: 13%; }
.song-table .views-col { width: 6%; }
.song-table td { overflow-wrap: anywhere; }
.catalog-song-cell { align-items: center; display: flex; gap: .55rem; }
.catalog-view-actions { color: var(--usdb-muted); font-size: .78rem; }
.catalog-view-actions a { text-decoration: none; }
.catalog-revision-details { color: var(--usdb-muted); font-size: .72rem; line-height: 1.45; margin-top: .3rem; }
.catalog-revision-details > span:not(:last-child)::after { content: " · "; }
.song-table-expanded .song-col { width: 40%; }
.catalog-cover { align-items: center; background: var(--usdb-surface-subtle); border: 1px solid var(--usdb-line); border-radius: .35rem; color: var(--usdb-muted); display: inline-flex; flex: 0 0 2.5rem; height: 2.5rem; justify-content: center; overflow: hidden; text-decoration: none; width: 2.5rem; }
.catalog-cover img { height: 100%; object-fit: cover; width: 100%; }
.song-title { color: var(--usdb-ink); font-weight: 700; text-decoration: none; }
.song-title:hover { color: var(--usdb-accent); }
.compact-action { background: transparent; border: 0; color: var(--usdb-accent-strong); font-size: .69rem; font-weight: 750; padding: .15rem; white-space: nowrap; }
.compact-action:hover, .compact-action:focus { color: var(--usdb-orange-strong); text-decoration: underline; }
.text-muted-ui { color: var(--usdb-muted) !important; }
.badge-soft { background: var(--usdb-accent-soft); border: 1px solid #d3eae7; color: var(--usdb-accent-strong); font-weight: 650; }
.min-w-0 { min-width: 0; }
.star-rating { --rating: 0; background: linear-gradient(90deg, var(--usdb-orange) calc(var(--rating) * 20%), #cbd4dc calc(var(--rating) * 20%)); background-clip: text; display: inline-block; font-size: .8rem; letter-spacing: -.05em; line-height: 1; -webkit-background-clip: text; -webkit-text-fill-color: transparent; white-space: nowrap; }
.star-rating-large { font-size: 1.15rem; }
.star-rating-empty { background: none; color: #aab5be; -webkit-text-fill-color: currentColor; }
.rating-count { color: var(--usdb-muted); font-size: .66rem; margin-left: .2rem; }
.infinite-scroll-status { align-items: center; color: var(--usdb-muted); display: flex; font-size: .75rem; gap: .55rem; justify-content: center; min-height: 4rem; padding: 1rem; text-align: center; }
.infinite-scroll-status.is-loading::before { animation: catalog-spin .7s linear infinite; border: 2px solid #d7e0e6; border-radius: 50%; border-top-color: var(--usdb-accent); content: ""; height: 1rem; width: 1rem; }
@keyframes catalog-spin { to { transform: rotate(360deg); } }
.rating-form { align-items: center; display: flex; }
.rating-form fieldset { align-items: center; border: 0; display: flex; gap: .4rem; margin: 0; padding: 0; }
.rating-form legend { color: #34424d; float: none; font-size: .7rem; font-weight: 650; line-height: 1; margin: 0; width: auto; }
.clickable-rating { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; }
.clickable-rating input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.clickable-rating label { color: #b8c1c9; cursor: pointer; font-size: 1.3rem; line-height: 1; margin: 0; padding: .02rem .06rem; transition: color 100ms ease, transform 100ms ease; }
.clickable-rating label:hover, .clickable-rating label:hover ~ label,
.clickable-rating input:checked ~ label { color: var(--usdb-orange); }
.clickable-rating input:focus-visible + label { outline: 2px solid var(--usdb-accent); outline-offset: 2px; }
.clickable-rating label:hover { transform: scale(1.12); }
.download-actions { display: grid; gap: .4rem; grid-template-columns: 1fr 3.2rem 3.7rem 4.2rem; }

.metadata-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.metadata-item { border-bottom: 1px solid #edf0f2; padding: 0.55rem 0; }
.metadata-item:nth-child(odd) { padding-right: 1rem; }
.metadata-item:nth-child(even) { padding-left: 1rem; }
.metadata-label { color: var(--usdb-muted); display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.metadata-value { display: block; font-size: 0.94rem; font-weight: 620; margin-top: 0.15rem; word-break: break-word; }

.detail-topline { align-items: center; color: var(--usdb-muted); display: flex; font-size: .72rem; justify-content: space-between; margin-bottom: .4rem; }
.detail-topline a { color: var(--usdb-muted); text-decoration: none; }
.song-detail-card { overflow: hidden; }
.song-detail-header { align-items: center; display: flex; gap: 1rem; justify-content: space-between; padding: .75rem .9rem .65rem; }
.song-detail-header h1 { font-size: 1.55rem; font-weight: 770; letter-spacing: -.035em; line-height: 1.1; margin: 0 0 .12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-detail-header a { color: var(--usdb-muted); font-size: .9rem; text-decoration: none; }
.detail-stats { align-items: center; display: flex; flex: 0 0 auto; gap: 1rem; }
.detail-stats > div { border-left: 1px solid var(--usdb-line); display: grid; min-width: 4.2rem; padding-left: 1rem; text-align: right; }
.detail-stats > div > span:first-child { color: var(--usdb-muted); font-size: .65rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.detail-stats strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.detail-stats small { color: var(--usdb-muted); font-size: .66rem; }
.detail-meta { border-block: 1px solid var(--usdb-line); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; }
.detail-meta > div { border-right: 1px solid var(--usdb-line); min-width: 0; padding: .5rem .7rem; }
.detail-meta > div:last-child { border-right: 0; }
.detail-meta dt { color: var(--usdb-muted); font-size: .65rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.detail-meta dd { font-size: .82rem; font-weight: 620; margin: .08rem 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-controls { align-items: end; display: flex; gap: 1rem; justify-content: space-between; padding: .55rem .7rem; }
.detail-controls .rating-form { min-width: min(24rem, 40%); }
.detail-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; }
.comments-panel { margin-top: .65rem; overflow: hidden; }
.comments-panel > header { align-items: baseline; background: var(--usdb-surface-subtle); border-bottom: 1px solid var(--usdb-line); display: flex; justify-content: space-between; padding: .5rem .7rem; }
.comments-panel > header h2 { font-size: .9rem; font-weight: 750; margin: 0; }
.comments-panel > header span { color: var(--usdb-muted); font-size: .7rem; }
.comments-panel .comment-list, .comments-panel .comment-form { padding-inline: .7rem; }
.empty-comments { margin: .65rem 0; }

.status-orb { background: var(--usdb-accent-soft); border: 1px solid #cde8e4; border-radius: 50%; height: 4.5rem; position: relative; width: 4.5rem; }
.status-orb::after { border: solid var(--usdb-accent); border-width: 0 0.18rem 0.18rem 0; content: ""; height: 1.45rem; left: 1.65rem; position: absolute; top: 1.25rem; transform: rotate(45deg); width: 0.75rem; }
.empty-state { color: var(--usdb-muted); padding: 1.75rem 1rem; text-align: center; }
.validation-note { background: var(--usdb-orange-soft); border: 1px solid #f7d9bb; border-radius: var(--usdb-radius-sm); display: grid; gap: .15rem; padding: .8rem .9rem; }
.validation-note strong { color: var(--usdb-orange-strong); font-size: .75rem; letter-spacing: .035em; text-transform: uppercase; }
.validation-note span { color: #5f4c3d; font-size: .86rem; }
.txt-editor { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: .82rem; line-height: 1.5; min-height: 34rem; tab-size: 2; white-space: pre; }
.workspace-actions { align-items: end; display: flex; flex-wrap: wrap; gap: .5rem; }
.workspace-reload-profile { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.workspace-reload-profile label { color: var(--usdb-muted); font-size: .78rem; font-weight: 700; margin: 0; }
.workspace-reload-profile select { min-width: 11rem; }
.revision-diff-table { background: #101c29; border-radius: var(--usdb-radius-sm); color: #dce8f2; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: .78rem; max-height: 40rem; overflow: auto; }
.diff-heading, .diff-row { display: grid; grid-template-columns: 3.5rem minmax(16rem, 1fr) 3.5rem minmax(16rem, 1fr); }
.diff-heading { background: #20364b; color: #fff; font-family: var(--bs-body-font-family); font-weight: 700; position: sticky; top: 0; z-index: 1; }
.diff-heading span, .diff-row > * { border-right: 1px solid #395066; padding: .28rem .5rem; }
.diff-row code { color: inherit; min-height: 1.65rem; white-space: pre-wrap; }
.diff-number { background: #182838; color: #8fa6bb; text-align: right; user-select: none; }
.diff-removed { background: #842f3a; color: #fff; text-decoration: line-through; }
.diff-added { background: #17653d; color: #fff; }
.diff-gap { background: #182838; color: #8fa6bb; padding: .2rem 1rem; text-align: center; }
@media (max-width: 767.98px) { .diff-heading, .diff-row { grid-template-columns: 2.75rem minmax(14rem, 1fr) 2.75rem minmax(14rem, 1fr); } }
.comment-item { border-bottom: 1px solid var(--usdb-line); padding: .7rem 0; }
.comment-item:last-child { border-bottom: 0; }
.moderator-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; padding: .75rem 1rem; }
.moderator-actions strong { margin-right: .5rem; }
.comment-tools { align-items: center; display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; }
.comment-tools form { display: inline; }
.comment-body { color: #34424d; overflow-wrap: anywhere; }
.comment-smiley { font-size: 1.1em; }
.comment-video { aspect-ratio: 16 / 9; display: block; margin-top: .45rem; max-width: 32rem; }
.comment-video iframe { border: 0; height: 100%; width: 100%; }
.comment-markup-toolbar { display: flex; flex-wrap: wrap; gap: .2rem; margin-bottom: .25rem; }
.comment-markup-toolbar button { background: var(--usdb-surface-subtle); border: 1px solid var(--usdb-line); border-radius: .3rem; color: var(--usdb-ink); font-size: .7rem; padding: .18rem .35rem; }
.comment-markup-toolbar button:hover { border-color: var(--usdb-accent); }
.sentiment { align-items: center; border-radius: 50%; display: inline-flex; font-size: .62rem; height: 1.25rem; justify-content: center; margin-left: .3rem; width: 1.25rem; }
.sentiment-neutral { background: #edf2f6; color: var(--usdb-muted); }
.sentiment-positive { background: #e4f3ec; color: var(--usdb-success); }
.sentiment-negative { background: #fae9eb; color: var(--usdb-danger); }
.comment-form { align-items: end; display: grid; gap: .7rem; grid-template-columns: auto minmax(14rem, 1fr) auto; }
.sentiment-picker { display: flex; gap: .3rem; }
.sentiment-picker > div { margin: 0; }
.sentiment-picker label { align-items: center; border: 1px solid var(--usdb-line); border-radius: .4rem; cursor: pointer; display: flex; font-size: .75rem; gap: .3rem; margin: 0; padding: .4rem .5rem; }
.sentiment-picker input { height: .85rem; margin: 0; width: .85rem; }
.sentiment-picker label:has(input[value="positive"]:checked) { background: #e4f3ec; border-color: #abd8c4; color: var(--usdb-success); }
.sentiment-picker label:has(input[value="neutral"]:checked) { background: #edf2f6; border-color: #cbd6df; color: var(--usdb-muted); }
.sentiment-picker label:has(input[value="negative"]:checked) { background: #fae9eb; border-color: #edbcc2; color: var(--usdb-danger); }

.site-footer { color: var(--usdb-muted); font-size: 0.76rem; padding: .8rem 0 1.2rem; }
.site-footer .container-xl { border-top: 1px solid var(--usdb-line); padding-top: .7rem; }

.quick-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); overflow: hidden; }
.quick-nav a { border-right: 1px solid var(--usdb-line); color: var(--usdb-ink); display: flex; flex-direction: column; gap: .1rem; padding: .65rem .8rem; text-decoration: none; }
.quick-nav a:last-child { border-right: 0; }
.quick-nav a:hover { background: var(--usdb-surface-subtle); color: var(--usdb-accent-strong); }
.quick-nav strong { font-size: .86rem; }
.quick-nav span { color: var(--usdb-muted); font-size: .72rem; }
.compact-section-header { align-items: center; background: var(--usdb-surface-subtle); border-bottom: 1px solid var(--usdb-line); display: flex; justify-content: space-between; padding: .55rem .75rem; }
.compact-section-header h2 { font-size: .9rem; font-weight: 750; margin: 0; }
.compact-section-header a { font-size: .75rem; }
.compact-song-list > a, .compact-song-row { align-items: center; border-bottom: 1px solid #edf0f2; color: var(--usdb-ink); display: flex; gap: .75rem; justify-content: space-between; padding: .45rem .75rem; text-decoration: none; }
.compact-song-list > a:last-child, .compact-song-row:last-child { border-bottom: 0; }
.compact-song-list > a:hover, .compact-song-row:hover { background: #f9fbfb; }
.compact-song-row a { text-decoration: none; }
.compact-song-row a:hover { text-decoration: underline; }
.compact-song-row .stretched-link, .compact-song-row .stretched-link:hover { color: inherit; text-decoration: none; }
.compact-secondary-link { position: relative; z-index: 2; }
.compact-cover { align-items: center; background: var(--usdb-surface-subtle); border: 1px solid var(--usdb-line); border-radius: .3rem; color: var(--usdb-muted); display: inline-flex !important; flex: 0 0 2.25rem; height: 2.25rem; justify-content: center; overflow: hidden; }
.compact-cover img { height: 100%; object-fit: cover; width: 100%; }
.compact-song-copy { flex: 1 1 auto; min-width: 0; }
.compact-song-list span { min-width: 0; }
.dashboard-stream-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dashboard-stream-grid-no-songs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dashboard-stream-grid > section { min-width: 0; }
.dashboard-status-line { align-items: baseline; color: var(--usdb-muted); display: flex; flex-wrap: wrap; font-size: .78rem; gap: .25rem; min-height: 1.2em; }
.dashboard-card { display: flex; flex-direction: column; min-height: 100%; }
.dashboard-card .compact-song-list { flex: 1 1 auto; }
.dashboard-ranking-card { overflow: visible; }
.dashboard-ranking-card .compact-song-list { overflow: hidden; }
.dashboard-stream-row { min-height: 3.35rem; }
.dashboard-comment-excerpt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-comment-avatar-link { flex: 0 0 auto; }
.dashboard-comment-avatar { font-size: .68rem; height: 1.85rem; width: 1.85rem; }
.dashboard-ranking-header { align-items: baseline; flex-wrap: wrap; gap: .35rem .65rem; }
.dashboard-ranking-menu { position: relative; }
.dashboard-ranking-menu > summary { list-style: none; }
.dashboard-ranking-menu > summary::-webkit-details-marker { display: none; }
.dashboard-ranking-menu-toggle { color: var(--usdb-ink); cursor: pointer; font-size: .9rem; font-weight: 750; text-decoration: none; }
.dashboard-ranking-menu-toggle::after { border-bottom: 0; border-left: .3em solid transparent; border-right: .3em solid transparent; border-top: .3em solid; content: ""; display: inline-block; margin-left: .35em; vertical-align: .16em; }
.dashboard-ranking-menu-toggle:hover, .dashboard-ranking-menu-toggle:focus-visible { color: var(--usdb-accent-strong); }
.dashboard-ranking-header-actions { align-items: baseline; display: flex; gap: .65rem; }
.dashboard-ranking-header-actions .dashboard-ranking-menu-toggle { font-size: .75rem; font-weight: 650; }
.dashboard-updates-header { gap: .5rem; }
.dashboard-card-header-actions { align-items: center; display: flex; flex: 0 1 auto; flex-wrap: nowrap; gap: .25rem .4rem; justify-content: flex-end; min-width: 0; white-space: nowrap; }
.dashboard-card-header-actions form { margin: 0; }
.dashboard-card-header-actions button { background: none; border: 0; color: var(--bs-link-color); font-size: .75rem; padding: 0; text-decoration: underline; text-underline-offset: .16em; }
.dashboard-card-header-actions button:hover, .dashboard-card-header-actions button:focus-visible { color: var(--bs-link-hover-color); }
.dashboard-ranking-menu > ul { background: #fff; border: 1px solid var(--usdb-line); border-radius: .4rem; box-shadow: 0 .4rem 1rem rgba(23, 39, 52, .14); left: 0; list-style: none; margin: .25rem 0 0; min-width: 9rem; padding: .3rem 0; position: absolute; top: 100%; z-index: 20; }
.dashboard-ranking-period-menu > ul { left: auto; right: 0; }
.dashboard-ranking-menu > ul a { color: var(--usdb-ink); display: block; font-size: .78rem; padding: .35rem .7rem; text-decoration: none; white-space: nowrap; }
.dashboard-ranking-menu > ul a:hover, .dashboard-ranking-menu > ul a:focus-visible { background: var(--usdb-surface-subtle); }
.dashboard-ranking-menu > ul a.active { background: var(--usdb-accent-soft); color: var(--usdb-accent-strong); font-weight: 700; }
.dashboard-card-link-actions, .dashboard-page-link-actions { align-items: center; display: flex; gap: .4rem; justify-content: flex-end; }
.dashboard-card-link-actions { border-top: 1px solid var(--usdb-line); padding: .45rem .65rem; }
.dashboard-page-link-actions { flex-wrap: wrap; padding-bottom: .15rem; }
.dashboard-card-link-actions form, .dashboard-page-link-actions form { margin: 0; }
.dashboard-card-link-actions a, .dashboard-card-link-actions button, .dashboard-page-link-actions button { background: none; border: 0; color: var(--bs-link-color); font-size: .75rem; padding: 0; text-decoration: underline; text-underline-offset: .16em; }
.dashboard-page-link-actions button { font-size: .86rem; }
.dashboard-card-link-actions a:hover, .dashboard-card-link-actions a:focus-visible, .dashboard-card-link-actions button:hover, .dashboard-card-link-actions button:focus-visible, .dashboard-page-link-actions button:hover, .dashboard-page-link-actions button:focus-visible { color: var(--bs-link-hover-color); }
.dashboard-stream-sentinel { color: var(--usdb-muted); font-size: .75rem; grid-column: 1 / -1; min-height: 2rem; padding: .5rem; text-align: center; }
.dashboard-stream-sentinel[hidden] { display: none; }
.dashboard-stream-sentinel:not(.is-loading):not(.has-error) span { visibility: hidden; }
.dashboard-update-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .45rem; }
.dashboard-update-actions form { margin: 0; }
.dashboard-updates-header > div:first-child { display: grid; }
.dashboard-update-list { max-height: 20rem; overflow-y: auto; }
.compact-song-list strong, .compact-song-list small { display: block; }
.compact-song-list strong { font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-song-list small { color: var(--usdb-muted); font-size: .7rem; white-space: nowrap; }
.profile-song-row { align-items: center; border-bottom: 1px solid #edf0f2; display: grid; gap: .7rem; grid-template-columns: 3rem minmax(0, 1fr) auto; padding: .5rem .75rem; }
.profile-song-row:last-child { border-bottom: 0; }
.profile-song-row:hover { background: #f9fbfb; }
.profile-song-cover { align-items: center; background: var(--usdb-surface-subtle); border: 1px solid var(--usdb-line); border-radius: .35rem; color: var(--usdb-muted); display: flex; height: 3rem; justify-content: center; overflow: hidden; text-decoration: none; width: 3rem; }
.profile-song-cover img { height: 100%; object-fit: cover; width: 100%; }
.profile-song-copy { display: grid; min-width: 0; }
.profile-song-copy strong, .profile-song-copy span, .profile-song-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-song-copy strong { font-size: .86rem; }
.profile-song-copy strong a { color: var(--usdb-ink); text-decoration: none; }
.profile-song-copy strong a:hover { color: var(--usdb-accent-strong); text-decoration: underline; }
.profile-song-copy span { font-size: .75rem; }
.profile-song-copy small, .profile-song-metrics small { color: var(--usdb-muted); font-size: .66rem; }
.profile-song-metrics { align-items: center; display: flex; gap: 1rem; text-align: right; }
.profile-song-metrics > span { display: grid; min-width: 3rem; }
.profile-song-metrics > span > strong { font-size: .86rem; font-variant-numeric: tabular-nums; }
.profile-song-rating { justify-items: end; min-width: 5rem !important; }
.empty-compact { color: var(--usdb-muted); font-size: .82rem; margin: 0; padding: 1rem; }
.directory-jump { display: flex; flex-wrap: wrap; gap: .2rem; padding: .45rem; }
.directory-jump a { border-radius: .35rem; color: var(--usdb-ink); font-size: .78rem; font-weight: 700; min-width: 1.7rem; padding: .25rem .4rem; text-align: center; text-decoration: none; }
.directory-jump a:hover { background: var(--usdb-accent-soft); color: var(--usdb-accent-strong); }
.list-group-item { font-size: .86rem; padding: .5rem .75rem; }
.facet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.facet-grid-editions { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.facet-grid a { align-items: flex-start; border-bottom: 1px solid #edf0f2; border-right: 1px solid #edf0f2; color: var(--usdb-ink); display: flex; font-size: .84rem; gap: .5rem; justify-content: space-between; min-width: 0; padding: .5rem .7rem; text-decoration: none; }
.facet-grid a:hover { background: var(--usdb-surface-subtle); color: var(--usdb-accent-strong); }
.facet-grid a > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.facet-grid a > .badge { flex: 0 0 auto; }
.submission-review-table th { color: var(--usdb-muted); font-size: .72rem; letter-spacing: .03em; text-transform: uppercase; width: 13rem; }
.submission-review-table td { min-width: 16rem; }
.media-url-preview { background: var(--usdb-surface-subtle); border: 1px solid var(--usdb-border); border-radius: .5rem; display: block; margin-top: .5rem; object-fit: cover; }
.media-url-preview-cover { height: 80px; width: 80px; }
.media-url-preview-background { aspect-ratio: 16 / 9; max-height: 100px; max-width: 180px; width: 100%; }
.pending-media-list { display: grid; gap: .75rem; }
.pending-media-item { align-items: center; display: flex; flex-wrap: wrap; gap: .75rem; min-width: 0; }
.pending-media-preview { background: var(--usdb-surface-subtle); border: 1px solid var(--usdb-border); border-radius: .5rem; flex: 0 0 auto; object-fit: cover; }
.pending-media-preview-cover { height: 80px; width: 80px; }
.pending-media-preview-background { aspect-ratio: 16 / 9; height: auto; max-width: 180px; width: min(100%, 180px); }
.pending-media-copy { display: flex; flex: 1 1 12rem; flex-direction: column; min-width: 0; }
.pending-media-copy span { overflow-wrap: anywhere; }
.pending-media-actions { display: flex; flex: 0 0 auto; gap: .5rem; }
.calendar-navigation, .calendar-legend { display: flex; flex-wrap: wrap; gap: .4rem; }
.calendar-shell { overflow: hidden; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-weekdays { background: var(--usdb-surface-subtle); border-bottom: 1px solid var(--usdb-line); color: var(--usdb-muted); font-size: .7rem; font-weight: 750; letter-spacing: .05em; text-align: center; text-transform: uppercase; }
.calendar-weekdays > div { padding: .45rem; }
.calendar-week { border-bottom: 1px solid var(--usdb-line); min-height: 7.5rem; }
.calendar-week:last-child { border-bottom: 0; }
.calendar-day { min-width: 0; padding: .45rem; }
.calendar-day + .calendar-day { border-left: 1px solid var(--usdb-line); }
.calendar-day > time { color: var(--usdb-muted); display: block; font-size: .72rem; font-variant-numeric: tabular-nums; font-weight: 700; margin-bottom: .3rem; }
.calendar-day-outside { background: #fafbfc; }
.calendar-day-outside > time { opacity: .38; }
.calendar-activity-list { display: grid; gap: .3rem; }
.calendar-day-overview { background: var(--usdb-surface-subtle); border-radius: .35rem; display: grid; gap: .15rem; padding: .5rem; }
.calendar-day-overview strong { font-size: .82rem; }
.calendar-day-overview span { color: var(--usdb-muted); font-size: .68rem; }
.calendar-day-overview a { font-size: .72rem; font-weight: 700; }
.calendar-activity { border-left: .2rem solid; border-radius: .25rem; color: var(--usdb-ink); display: block; padding: .3rem .35rem; text-decoration: none; }
.calendar-activity:hover { color: var(--usdb-accent-strong); }
.calendar-activity-new { background: #e4f3ec; border-color: var(--usdb-success); }
.calendar-activity-modified { background: var(--usdb-orange-soft); border-color: var(--usdb-orange); }
.calendar-activity strong { display: block; font-size: .72rem; line-height: 1.25; overflow-wrap: anywhere; }
.calendar-kind { font-size: .61rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.calendar-legend .calendar-kind { border-left: .2rem solid; border-radius: .25rem; padding: .2rem .4rem; }
.calendar-kind-new { background: #e4f3ec; border-color: var(--usdb-success); color: var(--usdb-success); }
.calendar-kind-modified { background: var(--usdb-orange-soft); border-color: var(--usdb-orange); color: var(--usdb-orange-strong); }

.record-title { align-items: center; display: flex; gap: .8rem; margin-bottom: .65rem; }
.record-cover { align-items: center; background: #e8edf2; border: 1px solid var(--usdb-line); border-radius: .4rem; color: #8c9aa7; display: flex; flex: 0 0 80px; font-size: 2rem; height: 80px; justify-content: center; overflow: hidden; width: 80px; }
.record-cover button { background: transparent; border: 0; cursor: zoom-in; padding: 0; }
.record-cover button:focus-visible { outline: 3px solid var(--usdb-accent); outline-offset: -3px; }
.record-cover img { display: block; height: 80px; object-fit: cover; width: 80px; }
.cover-preview .modal-body { background: var(--usdb-surface-subtle); padding: 0; text-align: center; }
.cover-preview .modal-body img { display: block; height: auto; margin: auto; max-height: 75vh; max-width: 100%; width: auto; }
.record-title h1 { font-size: 1.7rem; font-weight: 770; letter-spacing: -.035em; line-height: 1.08; margin: 0 0 .12rem; }
.record-title a { color: var(--usdb-muted); font-size: .95rem; text-decoration: none; }
.record-title-in-facts { margin: 0; padding: 0 .35rem .65rem; }
.song-detail-page-shell { max-width: 72rem; }
.detail-layout { align-items: stretch; display: grid; gap: .75rem; grid-template-areas: "facts media" "comments comments"; grid-template-columns: minmax(22rem, 32rem) minmax(0, 1fr); }
.detail-layout-no-media { grid-template-areas: "facts facts" "comments comments"; }
.detail-facts { grid-area: facts; }
.facts-card { overflow: hidden; }
.facts-card table { border-collapse: collapse; font-size: .82rem; table-layout: fixed; width: 100%; }
.facts-card tr + tr { border-top: 1px solid #edf0f2; }
.facts-card th, .facts-card td { padding: .35rem .6rem; text-align: left; vertical-align: top; }
.facts-card th { background: var(--usdb-surface-subtle); color: var(--usdb-muted); font-size: .68rem; font-weight: 720; letter-spacing: .035em; text-transform: uppercase; width: 8.6rem; }
.facts-card td { font-weight: 560; overflow-wrap: anywhere; }
.fact-link { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .14em; }
.fact-link:hover { color: var(--usdb-accent-strong); text-decoration-color: currentColor; }
.rating-breakdown-toggle { background: transparent; border: 0; padding: 0; text-decoration: underline; }
.rating-breakdown-toggle::after { color: var(--usdb-muted); margin-left: .25rem; vertical-align: .15rem; }
.rating-breakdown-menu { font-size: .78rem; min-width: 15rem; padding: .65rem .75rem; }
.rating-breakdown-menu h3 { font-size: .76rem; font-weight: 750; margin: 0 0 .35rem; }
.rating-breakdown-menu ul { list-style: none; margin: 0 0 .35rem; max-height: 12rem; overflow-y: auto; padding: 0; }
.rating-breakdown-menu li { align-items: center; display: flex; gap: 1rem; justify-content: space-between; padding: .16rem 0; }
.rating-breakdown-menu li > span { align-items: center; display: flex; gap: .3rem; }
.legacy-rating-label { color: var(--usdb-muted); font-size: .58rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.rating-ranking-link { display: inline-block; font-size: .7rem; margin-top: .45rem; }
.boolean-mark { font-size: .76rem; font-weight: 720; }
.boolean-yes { color: var(--usdb-success); }
.boolean-no { color: var(--usdb-muted); }
.chart-flags { display: grid; gap: .25rem 1rem; grid-template-columns: repeat(3, max-content); }
.chart-flags a { align-items: baseline; display: inline-flex; gap: .2rem; white-space: nowrap; }
.media-crop-input { flex: 0 1 11rem; }
.metadata-value-control { align-items: center; display: flex; gap: .35rem; }
.metadata-value-control .btn { flex: 0 0 auto; }
.metadata-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.inline-metadata-field, .timing-edit-cell { cursor: text; }
.duet-singer-fields { display: grid; gap: .25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.duet-singer-fields strong { color: var(--usdb-muted); font-size: .7rem; margin-right: .2rem; }
.video-gap-control { align-items: center; display: flex; gap: .35rem; margin-top: .35rem; }
.video-gap-control input { flex: 0 0 6rem; width: 6rem; }
.rating-row { align-items: center; display: flex; flex-wrap: wrap; gap: .4rem 1rem; justify-content: space-between; }
.rating-form-inline legend { color: var(--usdb-muted); }
.detail-actions-card { border-top: 1px solid var(--usdb-line); padding: .6rem; }
.record-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.detail-media { align-self: stretch; display: flex; flex-direction: column; grid-area: media; min-height: 0; min-width: 0; overflow: hidden; }
.detail-media #note-youtube-player { aspect-ratio: 16 / 9; border: 0; display: block; height: auto; max-width: 100%; width: 100%; }
.split-audio-strip { align-items: center; background: var(--usdb-surface-subtle); border-bottom: 1px solid var(--usdb-line); display: flex; font-size: .76rem; gap: .55rem; min-height: 2.25rem; padding: .4rem .65rem; }
.split-audio-strip span { color: var(--usdb-muted); font-size: .65rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.split-audio-strip a { color: var(--usdb-ink); font-weight: 650; }
.moderation-review-layout { align-items: start; display: grid; gap: .75rem; grid-template-columns: minmax(22rem, 32rem) minmax(0, 1fr); }
.moderation-review-sidebar, .moderation-review-media { min-width: 0; }
.moderation-review-media { width: 100%; }
.moderation-review-media .detail-media { grid-area: auto; }
.moderation-review-media .moderation-note-preview #note-youtube-player { max-height: none; max-width: none; }
.detail-note-shell { border-top: 1px solid var(--usdb-line); flex: 1 1 auto; min-height: 4.25rem; overflow: hidden; position: relative; }
.detail-note-band { align-items: center; display: flex; height: 100%; min-height: 4.25rem; overflow: auto; }
.detail-note-band { align-items: safe center; }
.detail-note-band .note-chart { flex: 0 0 auto; }
.detail-note-track { max-width: 10rem; position: absolute; right: 7.2rem; top: .35rem; z-index: 3; }
.detail-note-controls { align-items: center; display: flex; gap: .2rem; position: absolute; right: .45rem; top: .35rem; z-index: 4; }
.detail-note-toggle { align-items: center; background: var(--usdb-ink); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(15, 35, 52, .3); color: #fff; display: inline-flex; height: 2.35rem; justify-content: center; padding: 0; width: 2.35rem; }
.detail-note-toggle:hover { background: var(--usdb-accent-strong); }
.detail-note-toggle:focus-visible { outline: 3px solid var(--usdb-orange); outline-offset: 2px; }
.detail-note-toggle svg { fill: currentColor; height: 1.15rem; width: 1.15rem; }
.detail-note-toggle .note-toggle-pause { display: none; }
.detail-note-toggle[aria-pressed="true"] .note-toggle-play { display: none; }
.detail-note-toggle[aria-pressed="true"] .note-toggle-pause { display: block; }
.detail-note-skip { background: rgba(255, 255, 255, .94); border: 1px solid var(--usdb-line); border-radius: 50%; box-shadow: 0 2px 6px rgba(15, 35, 52, .18); color: var(--usdb-ink); font-size: .68rem; font-weight: 800; height: 1.85rem; padding: 0; width: 1.85rem; }
.detail-note-skip:hover { background: var(--usdb-accent-soft); color: var(--usdb-accent-strong); }
.admin-actions { align-items: baseline; border-top: 1px solid var(--usdb-line); display: flex; font-size: .76rem; gap: .7rem; margin-top: .5rem; padding-top: .45rem; }
.comments-panel { margin-top: 0; }
.detail-comments { grid-area: comments; }
.comments-panel .comment-list { overflow: visible; }
.comment-heading { align-items: baseline; display: flex; font-size: .72rem; gap: .5rem; justify-content: space-between; }
.comment-heading time { color: var(--usdb-muted); }
.comment-tools { align-items: center; display: flex; font-size: .7rem; gap: .45rem; white-space: nowrap; }
.comment-body { font-size: .84rem; line-height: 1.4; margin-top: .3rem; }
.comment-form-stacked { border-top: 1px solid var(--usdb-line); display: grid; grid-template-columns: 1fr; padding-block: .6rem; }
.comment-form-stacked h3 { font-size: .82rem; font-weight: 750; margin: 0; }
.comment-submit-row { align-items: end; display: flex; gap: .6rem; justify-content: space-between; }
.comment-form-stacked textarea { min-height: 4.5rem; resize: vertical; }

.note-viewer-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: .65rem; }
.note-viewer-heading h1 { font-size: 1.35rem; font-weight: 770; margin: 0; }
.note-viewer-heading dl { display: flex; gap: 1.25rem; margin: 0; }
.note-viewer-heading dl div { display: grid; }
.note-viewer-heading dt { color: var(--usdb-muted); font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; }
.note-viewer-heading dd { font-size: .82rem; font-weight: 700; margin: 0; }
.note-player { align-items: center; display: flex; gap: .8rem; margin-bottom: .6rem; overflow: hidden; padding-right: .8rem; }
#note-youtube-player { flex: 0 0 320px; height: 180px; }
.note-player p { color: var(--usdb-muted); font-size: .78rem; margin: .15rem 0 .5rem; }
.note-chart-card { overflow: hidden; }
.note-chart-help { border-bottom: 1px solid var(--usdb-line); color: var(--usdb-muted); font-size: .72rem; padding: .4rem .55rem; }
.note-timing-controls { align-items: center; background: #f8fafb; border-top: 1px solid var(--usdb-line); display: flex; flex-wrap: wrap; gap: .55rem 1rem; padding: .55rem .7rem; }
.note-timing-controls[hidden] { display: none; }
.note-timing-controls label { align-items: center; display: grid; font-size: .72rem; font-weight: 700; gap: .15rem .45rem; grid-template-columns: 2.4rem 6.5rem minmax(8rem, 14rem); margin: 0; }
.note-timing-controls input[type="range"] { accent-color: var(--usdb-orange); margin: 0; width: 100%; }
.timing-number-input { border: 1px solid #c7d0d8; border-radius: .3rem; font-size: .82rem; font-variant-numeric: tabular-nums; height: 1.85rem; min-width: 0; padding: .2rem .35rem; text-align: right; width: 6.25rem; }
.fact-timing-row { align-items: center; display: flex; flex-wrap: wrap; gap: .4rem .75rem; }
.fact-timing-control { align-items: center; display: flex; flex: 1 1 17rem; gap: .65rem; margin: 0; min-width: min(100%, 17rem); }
.fact-timing-control[hidden] { display: none; }
[data-note-timing-display][hidden] { display: none; }
.fact-timing-control input[type="range"] { accent-color: var(--usdb-orange); flex: 1 1 auto; margin: 0; min-width: 5rem; width: auto; }
.fact-timing-submit[hidden] { display: none; }
.fact-timing-reset[hidden] { display: none; }
.youtube-id-cell { cursor: text; }
.youtube-id-display { display: inline-block; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
.youtube-id-input { max-width: 10rem; }
.youtube-id-input[hidden] { display: none; }
.inline-media-cell { cursor: text; }
.inline-media-display { display: inline-block; max-width: min(36rem, 65vw); overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; }
.inline-media-control[hidden], [data-inline-media-submit][hidden] { display: none; }
.note-chart-scroll { background: repeating-linear-gradient(to bottom, #fff 0, #fff 8px, #edf2f5 9px); max-height: min(22rem, 55vh); overflow: auto; }
.note-chart { position: relative; }
.chart-note { background: var(--usdb-blue); border: 1px solid var(--usdb-blue-strong); border-radius: .16rem; color: #fff; cursor: pointer; height: 8px; padding: 0; position: absolute; }
.chart-note > span:first-child { color: var(--usdb-ink); font-size: .56rem; left: 0; position: absolute; top: 8px; white-space: nowrap; }
.chart-note-golden { background: #d6a817; border-color: #a87e00; }
.chart-note-freestyle { background: rgba(34, 120, 181, .32); border-color: rgba(25, 91, 139, .5); }
.chart-note-rap { background: #4f5961; border-color: #30383e; }
.chart-note-rap-golden { background: #8d8568; border-color: #6f6648; }
.chart-note.is-active { box-shadow: 0 0 0 3px rgba(242, 124, 28, .35); filter: brightness(1.2); z-index: 2; }

@media (max-width: 991.98px) {
  .navbar-collapse { padding: .75rem 0; }
  .dashboard-stream-grid { grid-template-columns: 1fr; }
  .moderation-review-layout { grid-template-columns: minmax(0, 1fr); }
  .moderation-review-sidebar, .moderation-review-media { max-width: none; width: 100%; }
  .moderation-review-media { justify-self: stretch; }
  .site-nav-tools { align-items: stretch; flex-wrap: wrap; margin-top: .5rem; width: 100%; }
  .nav-search { width: 100%; }
  .nav-search input { flex: 1; width: auto !important; }
  .site-user-toggle { border-left: 0; padding-left: .25rem; }
}

@media (max-width: 767.98px) {
  .page-shell { padding-top: .8rem; }
  .display-title { font-size: 1.7rem; }
  .metadata-grid { grid-template-columns: 1fr; }
  .metadata-item:nth-child(n) { padding-inline: 0; }
  .table-modern th, .table-modern td { padding-inline: 0.75rem; }
  .brand-tagline { display: none; }
  .home-actions a { align-items: flex-start; flex-direction: column; gap: .2rem; }
  .home-actions span { text-align: left; }
  .profile-song-row { grid-template-columns: 3rem minmax(0, 1fr); }
  .profile-song-metrics { grid-column: 2; justify-content: space-between; text-align: left; }
  .profile-song-rating { justify-items: start; }
  .quick-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-nav a { border-bottom: 1px solid var(--usdb-line); }
  .dashboard-updates-header { align-items: flex-start; flex-direction: column; }
  .dashboard-card-header-actions { justify-content: flex-start; width: 100%; }
  .comment-form { align-items: stretch; grid-template-columns: 1fr; }
  .download-actions { grid-template-columns: 1fr 1fr; }
  .song-detail-header { align-items: flex-start; }
  .song-detail-header h1 { white-space: normal; }
  .detail-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-meta > div { border-bottom: 1px solid var(--usdb-line); }
  .detail-controls { align-items: stretch; flex-direction: column; }
  .detail-controls .rating-form { min-width: 0; }
  .detail-actions { justify-content: flex-start; }
  .calendar-shell { overflow-x: auto; }
  .calendar-weekdays, .calendar-weeks { min-width: 48rem; }
  .record-title h1 { font-size: 1.4rem; }
  .detail-layout, .detail-layout-no-media { grid-template-areas: "facts" "media" "comments"; grid-template-columns: minmax(0, 1fr); }
  .detail-layout-no-media { grid-template-areas: "facts" "comments"; }
  .facts-card th { width: 7.6rem; }
  .note-viewer-heading { align-items: flex-start; flex-direction: column; gap: .5rem; }
  .note-player { align-items: stretch; flex-direction: column; padding: 0 0 .65rem; }
  #note-youtube-player { flex-basis: auto; height: auto; aspect-ratio: 16 / 9; width: 100%; }
  .note-player > div:last-child { padding-inline: .65rem; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .detail-layout, .detail-layout-no-media { grid-template-areas: "facts" "media" "comments"; grid-template-columns: minmax(0, 1fr); }
  .detail-layout-no-media { grid-template-areas: "facts" "comments"; }
}

.member-avatar { align-items: center; background: var(--usdb-accent-soft); border: 1px solid var(--usdb-line); border-radius: 50%; display: inline-flex; flex: 0 0 auto; height: 2.5rem; justify-content: center; object-fit: cover; width: 2.5rem; }
.member-avatar-large { font-size: 2rem; height: 9rem; width: 9rem; }
.member-avatar-placeholder { color: var(--usdb-accent-strong); font-weight: 800; }
.conversation-shell { margin-inline: auto; max-width: 58rem; }
.conversation-composer { align-items: flex-start; display: grid; gap: .8rem; grid-template-columns: 2.75rem minmax(0, 1fr); margin-bottom: 1rem; padding: .85rem; }
.conversation-composer form { min-width: 0; }
.conversation-composer textarea { min-height: 5.5rem; resize: vertical; }
.conversation-composer-heading { align-items: baseline; display: flex; flex-wrap: wrap; gap: .35rem .65rem; margin-bottom: .45rem; }
.conversation-composer-heading h2, .conversation-feed-heading h2 { font-size: .92rem; font-weight: 780; margin: 0; }
.conversation-composer-heading span, .conversation-feed-heading span, .conversation-composer-actions span { color: var(--usdb-muted); font-size: .74rem; }
.conversation-composer-actions { align-items: center; display: flex; gap: .75rem; justify-content: space-between; margin-top: .55rem; }
.conversation-feed { overflow: hidden; }
.conversation-feed-heading { align-items: baseline; background: var(--usdb-surface-subtle); border-bottom: 1px solid var(--usdb-line); display: flex; justify-content: space-between; padding: .65rem .85rem; }
.conversation-post { display: grid; gap: .75rem; grid-template-columns: 2.75rem minmax(0, 1fr); padding: .85rem; }
.conversation-post + .conversation-post { border-top: 1px solid var(--usdb-line); }
.conversation-avatar, .conversation-avatar-link { height: 2.75rem; width: 2.75rem; }
.conversation-avatar-link { border-radius: 50%; display: block; }
.conversation-message { min-width: 0; }
.conversation-message header { align-items: baseline; display: flex; gap: .45rem; margin-bottom: .3rem; }
.conversation-message header > a { color: var(--usdb-ink); font-size: .84rem; font-weight: 780; text-decoration: none; }
.conversation-message header > a:hover { color: var(--usdb-accent-strong); text-decoration: underline; }
.conversation-message time { color: var(--usdb-muted); font-size: .72rem; margin-left: auto; white-space: nowrap; }
.conversation-you { background: var(--usdb-accent-soft); border-radius: 999px; color: var(--usdb-accent-strong); font-size: .64rem; font-weight: 750; padding: .08rem .35rem; text-transform: uppercase; }
.conversation-bubble { background: var(--usdb-surface-subtle); border: 1px solid #e7ecef; border-radius: .15rem .65rem .65rem .65rem; font-size: .9rem; line-height: 1.55; overflow-wrap: anywhere; padding: .6rem .75rem; }
.conversation-post.is-own .conversation-bubble { background: var(--usdb-accent-soft); border-color: #cee2eb; }
.conversation-pagination { align-items: center; border-top: 1px solid var(--usdb-line); display: flex; gap: .65rem; justify-content: center; padding: .7rem .85rem; }
.conversation-pagination span { color: var(--usdb-muted); font-size: .75rem; }
.profile-facts dt { color: var(--usdb-muted); font-size: .82rem; font-weight: 700; }
.profile-facts dd { overflow-wrap: anywhere; }
.site-footer { border-top: 1px solid var(--usdb-line); margin-top: 2rem; padding-block: 1.1rem 2rem; }
.site-footer-inner { align-items: center; display: flex; gap: .55rem 1.15rem; min-width: 0; }
.site-footer nav { display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: .55rem 1.15rem; justify-content: flex-end; }
.site-footer a { color: var(--usdb-muted); font-size: .78rem; text-decoration: none; }
.site-footer a:hover { color: var(--usdb-accent-strong); text-decoration: underline; }
.dashboard-online { align-items: center; display: flex; flex: 1 1 auto; gap: .55rem; min-width: 0; overflow: hidden; white-space: nowrap; }
.dashboard-online-label { flex: 0 0 auto; font-weight: 750; }
.dashboard-online-members { display: flex; gap: .3rem; min-width: 0; overflow: hidden; }
.dashboard-online-member { background: var(--usdb-surface-subtle); border: 1px solid var(--usdb-line); border-radius: 999px; flex: 0 0 auto; max-width: 10rem; overflow: hidden; padding: .12rem .42rem; text-overflow: ellipsis; white-space: nowrap; }
.has-floating-site-footer { padding-bottom: calc(var(--floating-site-footer-height, 0px) + .75rem); }
.site-footer-floating { background: rgba(255, 255, 255, .96); border: 1px solid var(--usdb-line); border-bottom: 0; border-radius: .7rem .7rem 0 0; bottom: 0; box-shadow: 0 -.3rem 1rem rgba(23, 39, 52, .12); left: 50%; margin: 0; padding: .65rem .85rem; position: fixed; transform: translateX(-50%); width: calc(100% - 1.5rem); z-index: 1015; }
.site-footer-floating .site-footer-inner { flex-wrap: nowrap; }
.legal-copy { line-height: 1.65; margin-inline: auto; max-width: 58rem; }
.legal-copy h2 { font-size: 1.05rem; font-weight: 800; margin-top: 1.7rem; }
.legal-copy h2:first-child { margin-top: 0; }