.fr-poll {
  margin-bottom: 1.25rem;
  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;
  overflow: hidden;
}

.fr-poll__head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.25rem;
  background: linear-gradient(180deg, var(--ivory) 0%, transparent 100%);
  border-bottom: 1px solid var(--stone-200);
}

.fr-poll__head svg {
  width: .875rem;
  height: .875rem;
  flex-shrink: 0;
  color: var(--gold);
  opacity: .85;
}

.fr-poll__label {
  flex: 1;
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stone-600);
}

.fr-poll__deadline {
  font-family: var(--font-mono);
  font-size: .625rem;
  color: var(--stone-400);
}

.fr-poll__body {
  padding: 1.125rem 1.25rem 1rem;
}

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

.fr-opt {
  position: relative;
  display: block;
  width: 100%;
  margin-bottom: .375rem;
  padding: .5625rem .75rem .6875rem;
  font-family: var(--font-body);
  font-size: .8125rem;
  text-align: left;
  color: var(--stone-700);
  background: var(--ivory);
  border: 0;
  border-radius: .375rem;
  cursor: pointer;
  overflow: hidden;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.fr-opt:last-of-type {
  margin-bottom: 0;
}

.fr-opt:hover {
  color: var(--stone-900);
  background: color-mix(in srgb, var(--stone-200) 35%, var(--ivory));
}

.fr-opt.is-picked {
  color: var(--stone-900);
}

.fr-opt.is-picked {
  color: var(--stone-700);
}

.fr-opt__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: color-mix(in srgb, var(--stone-300) 30%, transparent);
  transition: width .5s cubic-bezier(.16, 1, .3, 1);
}

.fr-opt.is-picked .fr-opt__fill {
  background: color-mix(in srgb, var(--stone-400) 30%, transparent);
}

.fr-opt__row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .625rem;
  min-width: 0;
}

.fr-opt__mark {
  position: relative;
  width: .875rem;
  height: .875rem;
  flex-shrink: 0;
  background: var(--white);
  border: 1px solid var(--stone-400);
  border-radius: 50%;
  transition: border-color var(--transition-fast);
}

.fr-opt__mark:after {
  content: "";
  position: absolute;
  inset: .1875rem;
  border-radius: 50%;
  background: transparent;
  transition: background var(--transition-fast);
}

.fr-opt:has(input[type="checkbox"]) .fr-opt__mark {
  border-radius: .25rem;
}

.fr-opt:has(input[type="checkbox"]) .fr-opt__mark:after {
  border-radius: .0625rem;
}

.fr-opt:hover .fr-opt__mark {
  border-color: var(--stone-500);
}

.fr-opt.is-picked .fr-opt__mark,
.fr-opt input:checked ~ .fr-opt__mark {
  border-color: var(--stone-700);
}

.fr-opt.is-picked .fr-opt__mark:after,
.fr-opt input:checked ~ .fr-opt__mark:after {
  background: var(--stone-700);
}

.fr-opt input:focus-visible ~ .fr-opt__mark {
  outline: 2px solid var(--stone-400);
  outline-offset: 2px;
}

.fr-opt__text {
  flex: 1;
  min-width: 0;
}

.fr-opt.is-picked .fr-opt__text,
.fr-opt input:checked ~ .fr-opt__text {
  font-weight: 600;
  color: var(--stone-700);
}

.fr-opt__votes {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: .6875rem;
  color: var(--stone-400);
}

.fr-opt__pct {
  flex-shrink: 0;
  min-width: 2.5rem;
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: .75rem;
  font-weight: 700;
  color: var(--stone-600);
}

.fr-opt.is-picked .fr-opt__pct {
  color: var(--stone-700);
}

.fr-poll__closed {
  font-size: .75rem;
  color: var(--stone-400);
}

.fr-poll__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .625rem;
  margin-top: 1rem;
  padding-top: .875rem;
  border-top: 1px solid var(--stone-100);
}

.fr-poll__total {
  flex: 1 1 8rem;
  font-size: .6875rem;
  color: var(--stone-400);
}

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

.fr-pbtn {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  height: 2.125rem;
  padding: 0 .75rem;
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 600;
  color: var(--stone-600);
  background: linear-gradient(180deg, var(--white) 0%, var(--ivory) 100%);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--has-border-inset, #fff),
    0 0 0 1px var(--stone-200),
    0 1px 2px #0000000f;
  transition: color var(--transition-fast), box-shadow var(--transition-base), transform .18s cubic-bezier(.16, 1, .3, 1);
}

.fr-pbtn svg {
  width: .875rem;
  height: .875rem;
  flex-shrink: 0;
}

.fr-pbtn:hover {
  color: var(--stone-900);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 var(--has-border-inset, #fff),
    0 0 0 1px var(--stone-300),
    0 6px 16px #0000000f;
}

.fr-pbtn:active {
  transform: translateY(0) scale(.96);
}

.fr-pbtn--primary {
  color: var(--stone-900);
  background: linear-gradient(180deg, var(--white) 0%, var(--ivory) 100%);
  box-shadow: inset 0 1px 0 var(--has-border-inset, #fff),
    0 0 0 1px var(--stone-300),
    0 1px 2px #00000012;
}

.fr-pbtn--primary:hover {
  color: var(--stone-900);
  box-shadow: inset 0 1px 0 var(--has-border-inset, #fff),
    0 0 0 1px var(--stone-400),
    0 6px 16px #0000001a;
}

.fr-pbtn[disabled] {
  opacity: .45;
  pointer-events: none;
}

.fr-menu {
  position: relative;
  margin-left: .25rem;
}

.fr-menu__list {
  position: absolute;
  top: calc(100% + .375rem);
  right: 0;
  z-index: 40;
  min-width: 13rem;
  padding: .25rem;
  background: linear-gradient(180deg, var(--white) 0%, var(--bone) 100%);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 var(--has-border-inset, #fff),
    0 0 0 1px var(--stone-200),
    0 14px 32px #0000001f;
}

.fr-menu__item {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .4375rem .5rem;
  font-family: var(--font-body);
  font-size: .8125rem;
  text-align: left;
  color: var(--stone-600);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.fr-menu__item svg {
  width: .875rem;
  height: .875rem;
  flex-shrink: 0;
  opacity: .8;
}

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

.fr-menu__item--danger {
  color: var(--red);
}

.fr-menu__item--danger:hover {
  color: var(--red);
  background: var(--red-bg);
}

.fr-menu__sep {
  height: 1px;
  margin: .25rem .25rem;
  background: var(--stone-200);
}

.fr-modal__back {
  position: absolute;
  inset: 0;
  background: #00000073;
  backdrop-filter: blur(3px);
}

.fr-modal__win {
  position: relative;
  width: 100%;
  max-width: 26rem;
  padding: 1.5rem;
  text-align: center;
  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 20px 60px #00000059;
}

.fr-modal__seal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  color: var(--red);
  background: radial-gradient(circle at 35% 28%, var(--white), var(--ivory));
  border: 1px solid rgb(var(--red-rgb) / .35);
  border-radius: 50%;
  box-shadow: inset 0 1px 2px #ffffffe6,
    0 0 0 4px var(--bone),
    0 0 0 5px rgb(var(--red-rgb) / .2);
}

.fr-modal__seal svg {
  width: 1.125rem;
  height: 1.125rem;
}

.fr-modal__title {
  margin: 0 0 .5rem;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--stone-900);
}

.fr-modal__text {
  margin: 0 0 1.25rem;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--stone-500);
}

.fr-modal__acts {
  display: flex;
  justify-content: center;
  gap: .5rem;
}

.fr-pbtn--danger {
  color: var(--red);
  box-shadow: inset 0 1px 0 var(--has-border-inset, #fff), 0 0 0 1px rgb(var(--red-rgb) / .4);
}

.fr-pbtn--danger:hover {
  color: var(--red);
  box-shadow: inset 0 1px 0 var(--has-border-inset, #fff),
    0 0 0 1px rgb(var(--red-rgb) / .65),
    0 6px 16px rgb(var(--red-rgb) / .18);
}

.fr-toast__seal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  color: #241c0c;
  background: linear-gradient(180deg, #f2d894 0%, #cba750 55%, #a8842f 100%);
  border-radius: 50%;
  box-shadow: inset 0 1px 0 #ffffffa6, 0 0 0 1px rgb(var(--gold-rgb) / .45);
}

.fr-toast__seal svg {
  width: .8125rem;
  height: .8125rem;
}

[data-theme="dark"] .fr-poll__head {
  background: var(--ivory);
  border-bottom-color: var(--stone-200);
}

[data-theme="dark"] .fr-opt {
  background: var(--parchment);
}

[data-theme="dark"] .fr-opt:hover {
  background: color-mix(in srgb, var(--stone-300) 18%, var(--parchment));
}

[data-theme="dark"] .fr-opt__mark {
  background: var(--ivory);
  border-color: var(--stone-400);
}

[data-theme="dark"] .fr-opt__fill {
  background: color-mix(in srgb, var(--stone-300) 22%, transparent);
}

[data-theme="dark"] .fr-opt.is-picked .fr-opt__fill {
  background: color-mix(in srgb, var(--stone-300) 32%, transparent);
}

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

[data-theme="dark"] .fr-menu__sep {
  background: var(--stone-300);
  border-color: var(--stone-300);
}

[data-theme="dark"] .fr-poll__foot {
  border-color: var(--stone-300);
}

@media (max-width: 40rem) {
  .fr-poll__body {
    padding: 1rem;
  }

  .fr-toast {
    right: .625rem;
    bottom: .625rem;
    left: .625rem;
  }
}