.fr-sbar {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  margin-bottom: 1.25rem;
  padding: .75rem;
  background: linear-gradient(180deg, var(--white) 0%, var(--bone) 100%);
  border-radius: var(--radius-xl);
  box-shadow: inset 0 1px 0 var(--has-border-inset, #fffc),
    0 0 0 1px var(--stone-200),
    0 0 0 4px var(--ivory),
    0 0 0 5px var(--stone-200),
    0 8px 30px #0000000f;
}

.fr-sbar__field {
  position: relative;
  flex: 1 1 20rem;
  min-width: 0;
}

.fr-sbar__icon {
  position: absolute;
  top: 50%;
  left: .875rem;
  width: 1.0625rem;
  height: 1.0625rem;
  color: var(--stone-400);
  pointer-events: none;
  transform: translateY(-50%);
}

.fr-sbar__input {
  width: 100%;
  padding: .75rem 2.75rem .75rem 2.625rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--stone-900);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--stone-100) 45%, var(--white)) 0%,
    var(--white) 100%);
  border: none;
  border-radius: .25rem;
  box-shadow: inset 0 1px 2px #0000000f,
    inset 0 0 0 1px color-mix(in srgb, var(--stone-300) 42%, transparent);
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.fr-sbar__input::placeholder {
  font-weight: 400;
  color: var(--stone-300);
}

.fr-sbar__input:focus {
  outline: none;
  background: var(--white);
  box-shadow: inset 0 1px 2px #0000000a,
    inset 0 0 0 1px rgb(var(--gold-rgb) / .5),
    0 0 0 3px rgb(var(--gold-rgb) / .1);
}

.fr-sbar__clear {
  position: absolute;
  top: 50%;
  right: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  color: var(--stone-400);
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transform: translateY(-50%);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.fr-sbar__clear:hover {
  color: var(--stone-900);
  background: var(--ivory);
}

.fr-sbar__clear svg {
  width: .875rem;
  height: .875rem;
}

.fr-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .875rem;
  margin-bottom: 1rem;
  font-size: .75rem;
  color: var(--stone-400);
}

.fr-stats b {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--stone-700);
}

.fr-stabs {
  display: flex;
  gap: .125rem;
  margin-bottom: 1rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.fr-stabs::-webkit-scrollbar {
  display: none;
}

.fr-stab {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  flex-shrink: 0;
  padding: .4375rem .6875rem;
  font-family: var(--font-heading);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--stone-500);
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast), transform .18s cubic-bezier(.16, 1, .3, 1);
}

.fr-stab:hover {
  color: var(--stone-900);
  background: var(--ivory);
}

.fr-stab:active {
  transform: scale(.96);
}

.fr-stab b {
  padding: .0625rem .3125rem;
  font-family: var(--font-mono);
  font-size: .5625rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--stone-400);
  background: var(--ivory);
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 1px var(--stone-200);
}

.fr-stab.is-active {
  color: var(--stone-900);
  background: var(--white);
  box-shadow: inset 0 1px 0 var(--has-border-inset, #fff), 0 0 0 1px var(--stone-300);
}

.fr-stab.is-active b {
  color: var(--stone-600);
  background: var(--ivory);
  box-shadow: 0 0 0 1px var(--stone-300);
}

.fr-slayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17rem;
  gap: 1.25rem;
  align-items: start;
}

.fr-panel__reset {
  padding: 0;
  font-family: var(--font-body);
  font-size: .6875rem;
  color: var(--stone-400);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.fr-panel__reset:hover {
  color: var(--gold);
}

.fr-res {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: .875rem;
  padding: .9375rem 1.125rem;
  border-bottom: 1px solid var(--stone-100);
  transition: background var(--transition-fast);
}

.fr-res:last-child {
  border-bottom: none;
}

.fr-res:hover {
  background: rgb(var(--gold-rgb) / .04);
}

.fr-res__seal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--stone-500);
  background: radial-gradient(circle at 35% 28%, var(--white), var(--ivory));
  border: 1px solid var(--stone-300);
  border-radius: 50%;
  box-shadow: inset 0 1px 2px #ffffffe6;
}

.fr-res__seal svg {
  width: .9375rem;
  height: .9375rem;
}

.fr-res__seal--gold {
  color: var(--gold);
  border-color: rgb(var(--gold-rgb) / .4);
  box-shadow: inset 0 1px 2px #ffffffe6, 0 0 10px rgb(var(--gold-rgb) / .18);
}

.fr-res__body {
  min-width: 0;
}

.fr-res__titlerow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem .3125rem;
}

.fr-res__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--stone-900);
}

.fr-res__title a {
  transition: color var(--transition-fast);
}

.fr-res__title a:hover {
  color: var(--gold);
}

.fr-res__snippet {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: .375rem;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--stone-500);
}

.fr-res mark {
  padding: 0 .125rem;
  color: var(--stone-900);
  background: color-mix(in srgb, var(--gold) 24%, transparent);
  border-radius: .125rem;
  box-shadow: inset 0 -1px 0 rgb(var(--gold-rgb) / .5);
}

.fr-res__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .1875rem .5rem;
  margin-top: .5rem;
  font-size: .6875rem;
  color: var(--stone-400);
}

.fr-res__meta a {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--stone-500);
  transition: color var(--transition-fast);
}

.fr-res__meta a:hover {
  color: var(--gold);
}

.fr-res__meta time,
.fr-res__num {
  font-family: var(--font-mono);
  font-size: .625rem;
}

.fr-res__meta > * + *:before {
  content: "";
  display: inline-block;
  width: 1px;
  height: .6875rem;
  margin-right: .4375rem;
  background: var(--stone-200);
  vertical-align: -.125rem;
}

.fr-res--member {
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  align-items: center;
}

.fr-res__name {
  display: block;
  font-family: var(--font-heading);
  font-size: .9375rem;
  font-weight: 700;
  color: var(--stone-900);
  transition: color var(--transition-fast);
}

.fr-res__name:hover {
  color: var(--gold);
}

.fr-res__rank {
  display: block;
  margin-top: .1875rem;
  font-size: .75rem;
  color: var(--stone-400);
}

.fr-fgroup {
  padding: .875rem 1.125rem;
  border-bottom: 1px solid var(--stone-100);
}

.fr-fgroup:last-child {
  border-bottom: none;
}

.fr-fchips {
  display: flex;
  flex-wrap: wrap;
  gap: .3125rem;
}

.fr-fchip {
  padding: .25rem .5rem;
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 600;
  color: var(--stone-500);
  background: none;
  border: none;
  border-radius: .25rem;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--stone-300) 42%, transparent);
  transition: color var(--transition-fast), box-shadow var(--transition-fast), transform .18s cubic-bezier(.16, 1, .3, 1);
}

.fr-fchip:hover {
  color: var(--stone-900);
  box-shadow: inset 0 0 0 1px var(--stone-400);
}

.fr-fchip:active {
  transform: scale(.95);
}

.fr-fchip.is-active {
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  box-shadow: inset 0 0 0 1px rgb(var(--gold-rgb) / .45);
}

.fr-finput {
  width: 100%;
  padding: .4375rem .5625rem;
  font-family: var(--font-body);
  font-size: .8125rem;
  color: var(--stone-800);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--stone-100) 45%, var(--white)) 0%,
    var(--white) 100%);
  border: none;
  border-radius: .25rem;
  box-shadow: inset 0 1px 2px #0000000f,
    inset 0 0 0 1px color-mix(in srgb, var(--stone-300) 42%, transparent);
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.fr-finput::placeholder {
  color: var(--stone-300);
}

.fr-finput:focus {
  outline: none;
  background: var(--white);
  box-shadow: inset 0 1px 2px #0000000a,
    inset 0 0 0 1px rgb(var(--gold-rgb) / .5),
    0 0 0 3px rgb(var(--gold-rgb) / .1);
}

.fr-fselect {
  width: 100%;
  margin: 0;
}

.fr-fcheck {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .25rem 0;
  font-size: .78125rem;
  text-align: left;
  color: var(--stone-600);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.fr-fcheck:hover {
  color: var(--stone-900);
}

.fr-fcheck__box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: transparent;
  background: linear-gradient(180deg, var(--white) 0%, var(--ivory) 100%);
  border-radius: .1875rem;
  box-shadow: inset 0 1px 2px #00000012, 0 0 0 1px var(--stone-300);
  transition: color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.fr-fcheck__box svg {
  width: .625rem;
  height: .625rem;
}

.fr-fcheck.is-on .fr-fcheck__box {
  color: #241c0c;
  background: linear-gradient(180deg, #f2d894 0%, #cba750 55%, #a8842f 100%);
  box-shadow: inset 0 1px 0 #ffffffa6, 0 0 0 1px rgb(var(--gold-rgb) / .45);
}

.fr-fradio {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .25rem 0;
  font-size: .78125rem;
  text-align: left;
  color: var(--stone-600);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.fr-fradio:hover {
  color: var(--stone-900);
}

.fr-fradio__dot {
  width: .3125rem;
  height: .3125rem;
  flex-shrink: 0;
  margin: 0 .3125rem;
  background: var(--stone-300);
  transform: rotate(45deg);
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.fr-fradio.is-on {
  color: var(--gold);
}

.fr-fradio.is-on .fr-fradio__dot {
  background: var(--gold);
  box-shadow: 0 0 6px rgb(var(--gold-rgb) / .6);
}

.fr-fbtn {
  display: none;
}

[data-theme="dark"] .fr-sbar {
  background: linear-gradient(180deg, var(--bone) 0%, var(--white) 100%);
  box-shadow: inset 0 1px 0 #ffffff08,
    0 0 0 1px var(--stone-200),
    0 0 0 4px var(--ivory),
    0 0 0 5px var(--stone-200),
    0 8px 30px #0003;
}

[data-theme="dark"] .fr-res,
[data-theme="dark"] .fr-fgroup {
  border-color: var(--stone-200);
}

[data-theme="dark"] .fr-sbar__input,
[data-theme="dark"] .fr-finput {
  background: linear-gradient(180deg, var(--ivory) 0%, var(--parchment) 100%);
  box-shadow: inset 0 1px 2px #00000040, inset 0 0 0 1px #ffffff1a;
}

[data-theme="dark"] .fr-sbar__input:focus,
[data-theme="dark"] .fr-finput:focus {
  background: var(--parchment);
  box-shadow: inset 0 1px 2px #00000040,
    inset 0 0 0 1px rgb(var(--gold-rgb) / .5),
    0 0 0 3px rgb(var(--gold-rgb) / .12);
}

[data-theme="dark"] .fr-res__seal {
  background: radial-gradient(circle at 35% 28%, var(--ivory), var(--white));
  border-color: var(--stone-300);
}

[data-theme="dark"] .fr-stab:hover,
[data-theme="dark"] .fr-sbar__clear:hover {
  background: var(--parchment);
}

[data-theme="dark"] .fr-fcheck__box {
  background: linear-gradient(180deg, var(--parchment) 0%, var(--ivory) 100%);
  box-shadow: inset 0 1px 0 #ffffff0f, 0 0 0 1px var(--stone-300);
}

[data-theme="dark"] .fr-res__meta > * + *:before {
  background: var(--stone-300);
}

@media (max-width: 64rem) {
  .fr-slayout {
    grid-template-columns: minmax(0, 1fr);
  }
  .fr-fbtn {
    display: inline-flex;
    margin-bottom: 1rem;
  }
  .fr-filters-panel {
    display: none;
  }
  .fr-filters-panel.is-open {
    display: block;
  }
}

@media (max-width: 40rem) {
  .fr-res {
    grid-template-columns: minmax(0, 1fr);
    padding: .875rem 1rem;
  }
  .fr-res__seal {
    display: none;
  }
  .fr-res--member {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }
  .fr-res--member .fr-btn {
    grid-column: 1 / -1;
    justify-content: center;
  }
  .fr-sbar__input {
    font-size: .9375rem;
  }
}

.fr-filters-panel {
  overflow: visible;
}

.fr-filters-panel .fr-panel__head {
  padding: .875rem 1.125rem;
}

.fr-fgroup--acts {
  display: flex;
  justify-content: flex-end;
}

.fr-fgroup .g-switch-row {
  gap: .75rem;
  padding: .625rem .75rem;
}

.fr-fgroup .g-switch-name {
  /*font-size: .78125rem;*/
}

.fr-fselect {
  position: relative;
  z-index: 2;
}