.hqps {
  --hqps-bg: #101010;
  --hqps-panel: #171717;
  --hqps-panel-2: #1d1d1d;
  --hqps-border: #343434;
  --hqps-border-soft: #292929;
  --hqps-text: #f2f2f2;
  --hqps-muted: #b7b7b7;
  --hqps-accent: #d39c48;
  --hqps-accent-hover: #e0aa58;
  --hqps-track: #55555d;
  --hqps-thumb: #dedede;

  max-width: 1100px;
  margin: 2rem auto;
  color: var(--hqps-text);
  font-size: 16px;
  line-height: 1.5;
}

.hqps *,
.hqps *::before,
.hqps *::after {
  box-sizing: border-box;
}

.hqps__header {
  margin-bottom: 2rem;
}

.hqps__header h2 {
  margin: 0 0 .45rem;
  color: var(--hqps-text);
}

.hqps__header p {
  margin: 0;
  color: var(--hqps-text);
}

.hqps__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.hqps__panel {
  padding: 2rem;
  border: 1px solid var(--hqps-border);
  border-radius: 10px;
  background: var(--hqps-panel);
  color: var(--hqps-text);
  box-shadow: none;
}

.hqps__panel h3 {
  margin: 0 0 1.5rem;
  color: var(--hqps-text);
}

.hqps__panel label {
  display: block;
  margin: 0 0 .55rem;
  color: var(--hqps-text);
  font-weight: 600;
}

.hqps__panel output {
  float: right;
  min-width: 1.2em;
  color: var(--hqps-accent);
  font-weight: 700;
  text-align: right;
}

.hqps__panel select {
  display: block;
  width: 100%;
  min-height: 46px;
  margin: 0 0 1.65rem;
  padding: .55rem .75rem;
  border: 1px solid #444;
  border-radius: 4px;
  background-color: var(--hqps-panel-2);
  color: var(--hqps-text);
  font: inherit;
  appearance: auto;
}

.hqps__panel select:focus {
  outline: 2px solid var(--hqps-accent);
  outline-offset: 1px;
  border-color: var(--hqps-accent);
}

.hqps__panel input[type="range"] {
  display: block;
  width: 100%;
  height: 24px;
  margin: 0 0 1.55rem;
  padding: 0;
  background: transparent;
  accent-color: var(--hqps-accent);
  cursor: pointer;
}

.hqps__panel input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border: 1px solid #777783;
  border-radius: 999px;
  background: var(--hqps-track);
}

.hqps__panel input[type="range"]::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -9px;
  border: 2px solid #f0f0f0;
  border-radius: 50%;
  background: var(--hqps-accent);
  box-shadow: 0 0 0 2px #222;
  appearance: none;
}

.hqps__panel input[type="range"]::-moz-range-track {
  height: 6px;
  border: 1px solid #777783;
  border-radius: 999px;
  background: var(--hqps-track);
}

.hqps__panel input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid #f0f0f0;
  border-radius: 50%;
  background: var(--hqps-accent);
  box-shadow: 0 0 0 2px #222;
}

.hqps__check {
  display: flex !important;
  align-items: center;
  gap: .65rem;
  margin: .3rem 0 1.7rem !important;
  color: var(--hqps-text) !important;
  font-weight: 400 !important;
}

.hqps__check input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--hqps-accent);
}

.hqps__button {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--hqps-accent);
  border-radius: 5px;
  padding: .75rem 1rem;
  background: var(--hqps-accent);
  color: #111;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}

.hqps__button:hover {
  border-color: var(--hqps-accent-hover);
  background: var(--hqps-accent-hover);
}

.hqps__button:active {
  transform: translateY(1px);
}

.hqps__status {
  min-height: 1.5rem;
  margin: 1.1rem 0;
  color: var(--hqps-muted);
}

.hqps__result {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 1rem;
  margin-bottom: .8rem;
  padding: 1.1rem;
  border: 1px solid var(--hqps-border);
  border-radius: 8px;
  background: var(--hqps-panel);
  color: var(--hqps-text);
}

.hqps__result--top {
  border-color: var(--hqps-accent);
  border-width: 2px;
}

.hqps__rank {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--hqps-border);
  border-radius: 50%;
  background: var(--hqps-panel-2);
  color: var(--hqps-text);
  font-weight: 800;
}

.hqps__result--top .hqps__rank {
  border-color: var(--hqps-accent);
  color: var(--hqps-accent);
}

.hqps__result-title {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}

.hqps__result-title code {
  padding: .15rem .35rem;
  border-radius: 3px;
  background: #242424;
  color: var(--hqps-text);
  font-size: 1.05rem;
  font-weight: 700;
}

.hqps__score {
  white-space: nowrap;
  color: var(--hqps-accent);
  font-weight: 800;
}

.hqps__result p {
  margin: .55rem 0 .85rem;
  color: var(--hqps-muted);
}

.hqps__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.hqps__meta span {
  padding: .2rem .5rem;
  border: 1px solid var(--hqps-border-soft);
  border-radius: 4px;
  background: var(--hqps-panel-2);
  color: var(--hqps-muted);
  font-size: .9rem;
}

.hqps__empty,
.hqps__error {
  padding: 1rem;
  border: 1px solid var(--hqps-border);
  border-radius: 8px;
  background: var(--hqps-panel);
  color: var(--hqps-text);
}

@media (max-width: 760px) {
  .hqps__grid {
    grid-template-columns: 1fr;
  }

  .hqps__panel {
    padding: 1.25rem;
  }

  .hqps__result-title {
    align-items: flex-start;
    flex-direction: column;
    gap: .3rem;
  }
}

/* Priority scale for the four recommendation sliders. */
.hqps__range-group {
  margin-bottom: 1.65rem;
}

.hqps__range-group label {
  margin-bottom: .45rem;
}

.hqps__range-group input[type="range"] {
  margin-bottom: .05rem;
}

.hqps__scale {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  width: 100%;
  margin-top: .05rem;
  color: #8f8f8f;
  font-size: .78rem;
  line-height: 1;
  text-align: center;
}

.hqps__scale span:first-child {
  text-align: left;
}

.hqps__scale span:last-child {
  text-align: right;
}

.hqps__scale-label {
  min-height: 1.35rem;
  margin-top: .45rem;
  color: var(--hqps-accent);
  font-size: .86rem;
  font-weight: 600;
  text-align: center;
}

.hqps__meta-info {
  margin-top: .25rem !important;
  color: var(--hqps-muted) !important;
  font-size: .92rem;
}


.hqps__rating {
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  flex:0 0 auto;
}
.hqps__rating-logo {
  position:relative;
  display:inline-block;
  width:25px;
  height:25px;
  overflow:hidden;
}
.hqps__rating-logo>img {
  position:absolute;
  inset:1px;
  width:23px;
  height:23px;
  object-fit:contain;
  opacity:.18;
}
.hqps__rating-logo>span {
  position:absolute;
  left:0;
  top:0;
  height:100%;
  overflow:hidden;
}
.hqps__rating-logo>span img {
  position:absolute;
  left:1px;
  top:1px;
  width:23px;
  height:23px;
  max-width:none;
  object-fit:contain;
  display:block;
}

.hqps__footer-meta {
  margin-top: .8rem;
  color: var(--hqps-muted);
  font-size: .82rem;
  line-height: 1.35;
}

.hqps__footer-meta p {
  margin: .1rem 0;
  color: var(--hqps-muted);
}


/* Grigg Audio Solutions logo in the musical settings panel */
.hqps .hqps__panel--musical {
    position: relative;
}

.hqps .hqps__panel--musical > .hqps__brand-logo-box {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    left: auto !important;
    bottom: auto !important;
    display: block !important;
    width: 64px !important;
    height: 64px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 64px !important;
    max-height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none;
    transform: none !important;
}
.hqps .hqps__brand-logo-box > img.hqps__brand-logo {
    position: static !important;
    display: block !important;
    width: 64px !important;
    height: 64px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 64px !important;
    max-height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    opacity: .92;
    transform: none !important;
}

.hqps .hqps__panel--musical > h3 {
    padding-right: 80px;
}

.hqps .hqps__footer-meta a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.hqps .hqps__footer-meta a:hover,
.hqps .hqps__footer-meta a:focus {
    opacity: 0.82;
}

@media (max-width: 640px) {
    .hqps .hqps__panel--musical > .hqps__brand-logo-box {
        width: 50px !important;
        height: 50px !important;
        max-width: 50px !important;
        max-height: 50px !important;
        top: 14px !important;
        right: 14px !important;
    }
    .hqps .hqps__brand-logo-box > img.hqps__brand-logo {
        width: 50px !important;
        height: 50px !important;
        max-width: 50px !important;
        max-height: 50px !important;
    }

    .hqps .hqps__panel--musical > h3 {
        padding-right: 64px;
    }
}

.hqps__score-explain{
  margin-top:.55rem;
  font-size:.78rem;
  line-height:1.35;
  color:#8f8f8f;
}

/* DSD -2s is a usage prefix, not a ranking category. */
.hqps__dsd2s-badge{display:inline-flex;align-items:center;margin-right:.55rem;padding:.12rem .42rem;border:1px solid #d39c48;border-radius:4px;color:#d39c48;font-size:.72rem;font-weight:700;line-height:1.2;vertical-align:middle}

/* Database 3.0: explanatory -2s alternative below ranking. */
.hqps__dsd2s-note{margin-top:.35rem;color:var(--hqps-muted,#9a9a9a);font-size:.82em;line-height:1.45}.hqps__dsd2s-note strong{color:inherit;font-weight:600}

/* Ratio gatekeeper help */
.hqps__label-help{display:flex;align-items:center;gap:.45rem;margin-top:0}
.hqps__label-help label{margin:0}
.hqps__help-button{display:inline-flex;align-items:center;justify-content:center;width:1.35rem;height:1.35rem;padding:0;border:1px solid currentColor;border-radius:50%;background:transparent;color:inherit;font:600 .82rem/1 sans-serif;cursor:pointer;opacity:.85}
.hqps__help-button:hover,.hqps__help-button:focus-visible{opacity:1}
.hqps__help-dialog{max-width:620px;width:calc(100% - 32px);padding:0;border:1px solid #454545;border-radius:12px;background:#171717;color:#f2f2f2;box-shadow:0 18px 60px rgba(0,0,0,.55)}
.hqps__help-dialog::backdrop{background:rgba(0,0,0,.68)}
.hqps__help-dialog-inner{position:relative;padding:24px 28px}
.hqps__help-dialog h4{margin:0 2.5rem 14px 0;font-size:1.2rem}
.hqps__help-dialog p{margin:0 0 14px;line-height:1.55}
.hqps__help-dialog dl{display:grid;grid-template-columns:max-content 1fr;gap:8px 18px;margin:16px 0}
.hqps__help-dialog dt{font-weight:700}
.hqps__help-dialog dd{margin:0;color:#c7c7c7}
.hqps__help-dialog .hqps__help-note{margin-bottom:0;color:#aaa;font-size:.9em}
.hqps__help-close{position:absolute;top:12px;right:14px;border:0;background:transparent;color:inherit;font-size:1.8rem;line-height:1;cursor:pointer}
@media (max-width:560px){.hqps__help-dialog dl{grid-template-columns:1fr;gap:3px}.hqps__help-dialog dd{margin-bottom:8px}}

/* Help icons 1.4.6 */
.hqps__label-help>label{flex:1;min-width:0}
.hqps__label-help>label output{float:none;margin-left:.35rem}

/* Compact help-dialog close button 1.4.7 */
.hqps .hqps__help-dialog .hqps__help-close{
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  min-height:36px!important;
  max-width:36px!important;
  max-height:36px!important;
  padding:0!important;
  line-height:32px!important;
  font-size:24px!important;
  border-radius:50%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

/* 1.5.0: Auto rate family control */
.hqps__check-row{display:flex;align-items:center;gap:.65rem;margin:.75rem 0 1rem;font-weight:600;cursor:pointer}
.hqps__check-row input[type="checkbox"]{width:20px;height:20px;margin:0;accent-color:currentColor;cursor:pointer}
.hqps__help-dialog h5{margin:1.15rem 0 .45rem;font-size:1rem}


/* 1.6.0: clickable version history */
.hqps .hqps__version-link{
  display:inline;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  line-height:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}
.hqps .hqps__version-link:hover,
.hqps .hqps__version-link:focus-visible{
  opacity:.82;
}
.hqps .hqps__version-history{
  grid-template-columns:minmax(150px,max-content) 1fr;
}
.hqps .hqps__version-history dd{
  line-height:1.5;
}

/* 1.6.1: Ausgabemodus as direct radio options */
.hqps__field-label{font-weight:600}
.hqps__option-group{display:flex;gap:.65rem;margin:.25rem 0 1rem}
.hqps__option{display:flex;flex:1;align-items:center;justify-content:center;gap:.5rem;min-height:44px;margin:0;padding:.55rem .8rem;border:1px solid var(--hqps-border);border-radius:6px;background:var(--hqps-panel-2);color:var(--hqps-text);font-weight:600;cursor:pointer}
.hqps__option:has(input:checked){border-color:var(--hqps-accent);box-shadow:0 0 0 1px var(--hqps-accent)}
.hqps__option input[type="radio"]{width:18px;height:18px;margin:0;accent-color:var(--hqps-accent);cursor:pointer}

/* 1.6.3: compact filter graphics, glass cards and explanatory help */
.hqps__filter-graphics{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.75rem;margin-top:1.15rem}
.hqps__filter-card{min-width:0;padding:.55rem;border:1px solid color-mix(in srgb,var(--hqps-accent) 48%,#333);border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 10px 30px rgba(0,0,0,.16);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.hqps__filter-card-head{display:flex;align-items:center;justify-content:space-between;gap:.45rem;min-height:34px;margin:0 0 .45rem;color:var(--hqps-text);font-size:.86rem;font-weight:600}
.hqps__filter-card-actions{display:inline-flex;align-items:center;gap:.32rem;flex:0 0 auto}
.hqps__icon-button{display:inline-flex;align-items:center;justify-content:center;width:29px;height:29px;margin:0;padding:0;border:1px solid #777;border-radius:50%;background:rgba(255,255,255,.035);color:var(--hqps-text);font-size:1.15rem;line-height:1;cursor:zoom-in}
.hqps__icon-button:hover,.hqps__icon-button:focus-visible{border-color:var(--hqps-accent);color:var(--hqps-accent);outline:none;box-shadow:0 0 0 1px color-mix(in srgb,var(--hqps-accent) 35%,transparent)}
.hqps__filter-thumbnail{display:block;width:100%;margin:0;padding:0;border:0;border-radius:10px;overflow:hidden;background:#0a0a0a;cursor:zoom-in;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.hqps__filter-thumbnail:hover,.hqps__filter-thumbnail:focus-visible{outline:1px solid var(--hqps-accent);outline-offset:1px}
.hqps__filter-thumbnail img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;margin:0}
.hqps__help-dialog--wide{max-width:780px}
.hqps__image-dialog{width:auto;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);padding:0;border:1px solid #555;border-radius:14px;background:#0b0b0b;color:#fff;box-shadow:0 20px 70px rgba(0,0,0,.72);overflow:auto}
.hqps__image-dialog::backdrop{background:rgba(0,0,0,.82)}
.hqps__image-dialog-inner{position:relative;display:block;width:max-content;max-width:100%}
.hqps__image-dialog img{display:block;width:auto;height:auto;max-width:none;margin:0}
.hqps__image-dialog .hqps__help-close{position:fixed;z-index:2;margin:12px 0 0 -48px;background:rgba(10,10,10,.82)!important;border:1px solid rgba(255,255,255,.45)!important}
@media(max-width:700px){.hqps__filter-graphics{grid-template-columns:1fr}.hqps__filter-thumbnail img{aspect-ratio:auto;object-fit:contain}}
@media(max-width:900px){.hqps__image-dialog img{max-width:calc(100vw - 34px);height:auto}.hqps__image-dialog-inner{width:auto}.hqps__image-dialog .hqps__help-close{position:absolute;right:12px;margin:0;top:12px}}


/* 1.6.3.1: two compact graphic frames inside the existing musical panel */
@media (min-width: 701px) {
  .hqps .hqps__panel--musical .hqps__filter-graphics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    margin-top: .65rem;
    height: 136px;
    max-height: 136px;
  }
  .hqps .hqps__panel--musical .hqps__filter-card {
    display: grid;
    grid-template-rows: 28px minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    height: 136px;
    padding: .38rem;
    overflow: hidden;
    border-radius: 10px;
  }
  .hqps .hqps__panel--musical .hqps__filter-card-head {
    min-height: 28px;
    height: 28px;
    margin: 0 0 .28rem;
    font-size: .72rem;
    line-height: 1.1;
  }
  .hqps .hqps__panel--musical .hqps__filter-card-actions {
    gap: .24rem;
  }
  .hqps .hqps__panel--musical .hqps__icon-button,
  .hqps .hqps__panel--musical .hqps__filter-card-head .hqps__help-button {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    font-size: .92rem;
  }
  .hqps .hqps__panel--musical .hqps__filter-thumbnail {
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 7px;
    overflow: hidden;
  }
  .hqps .hqps__panel--musical .hqps__filter-thumbnail img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center;
    background: #0a0a0a;
  }
}

/* 2.6.4.0: Bridge-only manual Q1 refresh in Technical Requirements. */
.hqps__bridge-refresh-row{margin:-.25rem 0 1.15rem}
.hqps__bridge-refresh-button{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:38px;padding:.5rem .85rem;
  border:1px solid var(--hqps-accent);border-radius:5px;
  background:transparent;color:var(--hqps-accent);
  font:inherit;font-weight:700;cursor:pointer;
}
.hqps__bridge-refresh-button:hover,.hqps__bridge-refresh-button:focus-visible{
  border-color:var(--hqps-accent-hover);color:var(--hqps-accent-hover);outline:none;
}
.hqps__bridge-refresh-button:disabled{opacity:.55;cursor:wait}