
@layer qaReference {
  :root {--ui-severity-high:#e0bb73!important;--ui-severity-medium:#b4a3ec!important;}
  :root[data-color-mode=light] {--ui-severity-high:var(--ui-warning)!important;--ui-severity-medium:#6650a8!important;}
  body :is(.focus-severity.high,.ref-severity.high,.severity-badge.high,.v-severity.v-high) {--severity-ink:var(--ui-severity-high);}
  body :is(.focus-severity.medium,.ref-severity.medium,.severity-badge.medium,.v-severity.v-medium) {--severity-ink:var(--ui-severity-medium);}
  body :is(.focus-severity,.ref-severity,.severity-badge,.v-severity):is(.high,.medium,.v-high,.v-medium) {
    display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;
    color:var(--severity-ink)!important;border:1px solid color-mix(in srgb,var(--severity-ink) 55%,var(--ui-border))!important;
    background:color-mix(in srgb,var(--severity-ink) 10%,var(--ui-ground))!important;
    border-radius:6px!important;white-space:nowrap!important;font-weight:500!important;
  }
  body :is(.focus-severity,.ref-severity,.severity-badge,.v-severity):is(.high,.medium,.v-high,.v-medium)>svg {
    width:17px!important;height:17px!important;flex:0 0 17px!important;fill:none!important;
    stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important;
  }
  body .v-severity:is(.v-high,.v-medium) {min-height:32px!important;padding:5px 10px!important;font-size:14px!important;line-height:1.4!important;}
  html[data-color-mode=light] body :is(.focus-severity,.ref-severity,.severity-badge,.v-severity):is(.high,.v-high) {
    background:var(--ui-warn-surface)!important;border-color:var(--ui-warn-border)!important;
  }
  html[data-color-mode=light] body :is(.focus-severity.critical,.ref-severity.critical,.severity-badge.critical,.badge.critical),
  html[data-color-mode=light] body[data-workspace] #main :is(.qa-issue-badge,.status.red,.ui-flaw-state,.qa-report-state.red) {
    color:var(--ui-critical)!important;background:var(--ui-bad-surface)!important;border-color:var(--ui-bad-border)!important;
  }
:root {--ui-visual:#91ccd8;}
  :root[data-color-mode=light] {--ui-visual:var(--ui-brand);}
  body[data-workspace] :is(.qa-bug-badge,.qa-bug-group-title).critical {--severity-ink:var(--ui-critical);}
  body[data-workspace] :is(.qa-bug-badge,.qa-bug-group-title).high {--severity-ink:var(--ui-severity-high);}
  body[data-workspace] :is(.qa-bug-badge,.qa-bug-group-title).medium {--severity-ink:var(--ui-severity-medium);}
  body[data-workspace] :is(.qa-bug-badge,.qa-bug-group-title).visual {--severity-ink:var(--ui-visual);}
  html body[data-workspace] #main .qa-bug-badge {
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    width:fit-content!important;min-height:38px!important;padding:6px 12px!important;gap:9px!important;
    border:1px solid color-mix(in srgb,var(--severity-ink) 65%,var(--ui-border))!important;
    border-radius:6px!important;color:var(--severity-ink)!important;
    background:color-mix(in srgb,var(--severity-ink) 10%,var(--ui-ground))!important;
    font-size:clamp(14px,1.25vw,16px)!important;font-weight:500!important;line-height:1.4!important;white-space:nowrap!important;
  }
  html[data-color-mode=light] body[data-workspace] #main .qa-bug-badge.critical {
    background:var(--ui-bad-surface)!important;border-color:var(--ui-bad-border)!important;
  }
  html[data-color-mode=light] body[data-workspace] #main .qa-bug-badge.high {
    background:var(--ui-warn-surface)!important;border-color:var(--ui-warn-border)!important;
  }
  html body[data-workspace] #main .qa-bug-badge>i {width:10px!important;height:10px!important;flex:none!important;border-radius:50%!important;background:currentColor!important;}
  html body[data-workspace] #main .qa-bug-badge>svg {width:17px!important;height:17px!important;flex:none!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important;}
  body[data-workspace] .qa-metric-value>span.visual {color:var(--ui-visual)!important;}
  @media(max-width:599px) {
    html body[data-workspace] #main .qa-bug-badge {min-height:30px!important;padding:4px 9px!important;font-size:13px!important;gap:7px!important;}
  }
}
