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

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

.fr-panel__head > svg {
  width: 1rem;
  height: 1rem;
}

.fr-panel__title {
  font-size: .875rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--stone-900);
}

.fr-textarea {
  min-height: 7rem;
}

.fr-hint {
  line-height: 1.5;
}

.fr-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
}

.fr-kind {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  padding: .4375rem .625rem;
  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), background var(--transition-fast),
    box-shadow var(--transition-fast), transform .18s cubic-bezier(.16, 1, .3, 1);
}

.fr-kind svg {
  width: .875rem;
  height: .875rem;
  flex-shrink: 0;
  opacity: .6;
  transition: opacity var(--transition-fast), transform .22s cubic-bezier(.16, 1, .3, 1);
}

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

.fr-kind:hover svg {
  opacity: .9;
  transform: scale(1.1);
}

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

.fr-kind.is-on {
  color: var(--gold);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--gold) 9%, var(--white)) 0%,
    color-mix(in srgb, var(--gold) 18%, var(--ivory)) 100%);
  box-shadow: inset 0 1px 0 var(--has-border-inset, #fff),
    0 0 0 1px rgb(var(--gold-rgb) / .5),
    0 2px 10px rgb(var(--gold-rgb) / .15);
}

.fr-kind.is-on svg {
  opacity: 1;
}

.fr-proofs {
  display: flex;
  flex-direction: column;
  gap: .4375rem;
}

.fr-proof {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.fr-proof .fr-input {
  padding-left: 2rem;
  padding-right: 2rem;
}

.fr-proof svg.fr-proof__icon {
  position: absolute;
  left: .625rem;
  width: .875rem;
  height: .875rem;
  color: var(--stone-400);
  pointer-events: none;
}

.fr-proof__del {
  position: absolute;
  right: .25rem;
  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;
  opacity: .4;
  transition: color var(--transition-fast), background var(--transition-fast), opacity var(--transition-fast);
}

.fr-proof:hover .fr-proof__del,
.fr-proof:focus-within .fr-proof__del {
  opacity: 1;
}

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

.fr-proof__del svg {
  width: .75rem;
  height: .75rem;
}

.fr-add {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  height: 2.125rem;
  padding: 0 .625rem;
  font-family: var(--font-body);
  font-size: .75rem;
  color: var(--stone-500);
  background: none;
  border: 1px dashed color-mix(in srgb, var(--stone-400) 55%, transparent);
  border-radius: .25rem;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), transform .18s cubic-bezier(.16, 1, .3, 1);
}

.fr-add:hover {
  color: var(--gold);
  border-color: rgb(var(--gold-rgb) / .45);
}

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

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

.fr-add[disabled] {
  opacity: .4;
  pointer-events: none;
}

.fr-formfoot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .625rem;
  padding: .875rem 1.125rem;
  background: linear-gradient(180deg, transparent 0%, var(--ivory) 100%);
  border-top: 1px solid var(--stone-200);
}

.fr-formfoot__hint {
  flex: 1 1 12rem;
  min-width: 0;
  font-size: .6875rem;
  color: var(--stone-400);
}

.fr-case {
  padding: .9375rem 1.125rem;
  border-bottom: 1px solid var(--stone-100);
  transition: background var(--transition-fast);
}

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

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

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

.fr-case__id {
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 700;
  color: var(--stone-300);
}

.fr-case__title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-heading);
  font-size: .875rem;
  font-weight: 700;
  color: var(--stone-900);
}

.fr-state {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  padding: 0;
  font-family: var(--font-heading);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--stone-400);
  background: none;
  border-radius: 0;
  box-shadow: none;
}

.fr-state:before {
  content: "";
  width: .3125rem;
  height: .3125rem;
  flex-shrink: 0;
  background: var(--stone-300);
  transform: rotate(45deg);
}

.fr-state--wait {
  color: var(--gold);
}

.fr-state--wait:before {
  background: var(--gold);
  animation: frPulse 2.2s ease-in-out infinite;
}

@keyframes frPulse {
  0%, 100% {
    box-shadow: 0 0 5px rgb(var(--gold-rgb) / .5);
    opacity: 1;
  }

  50% {
    box-shadow: 0 0 11px rgb(var(--gold-rgb) / .85);
    opacity: .6;
  }
}

.fr-state--done {
  color: var(--live, #4ea172);
}

.fr-state--done:before {
  background: var(--live, #4ea172);
  box-shadow: 0 0 6px color-mix(in srgb, var(--live, #4ea172) 55%, transparent);
}

.fr-state--reject {
  color: var(--red);
}

.fr-state--reject:before {
  background: none;
  border: 1px solid var(--red);
}

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

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

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

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

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

.fr-track {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s cubic-bezier(.16, 1, .3, 1);
}

.fr-case.is-open .fr-track {
  grid-template-rows: 1fr;
}

.fr-track__inner {
  min-height: 0;
  overflow: hidden;
}

.fr-steps {
  margin: .875rem 0 0;
  padding: .875rem 0 0;
  border-top: 1px dashed var(--stone-200);
}

.fr-step {
  position: relative;
  padding: 0 0 .875rem 1.5rem;
}

.fr-step:last-child {
  padding-bottom: 0;
}

.fr-step:before {
  content: "";
  position: absolute;
  top: .3125rem;
  left: .1875rem;
  width: .4375rem;
  height: .4375rem;
  background: var(--stone-300);
  transform: rotate(45deg);
}

.fr-step:after {
  content: "";
  position: absolute;
  top: .875rem;
  bottom: 0;
  left: .375rem;
  width: 1px;
  background: var(--stone-200);
}

.fr-step:last-child:after {
  display: none;
}

.fr-step--done:before {
  background: var(--gold);
  box-shadow: 0 0 7px rgb(var(--gold-rgb) / .55);
}

.fr-step--reject:before {
  background: var(--red);
}

.fr-step__title {
  font-family: var(--font-heading);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--stone-800);
}

.fr-step__time {
  margin-left: .4375rem;
  font-family: var(--font-mono);
  font-size: .625rem;
  color: var(--stone-400);
}

.fr-step__text {
  margin-top: .25rem;
  font-size: .78125rem;
  line-height: 1.55;
  color: var(--stone-500);
}

.fr-case__toggle {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  margin-top: .5rem;
  padding: 0;
  font-family: var(--font-body);
  font-size: .75rem;
  color: var(--stone-400);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}

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

.fr-case__toggle svg {
  width: .75rem;
  height: .75rem;
  transition: transform var(--transition-base);
}

.fr-case.is-open .fr-case__toggle svg {
  transform: rotate(180deg);
}

.fr-tips {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fr-tips li {
  position: relative;
  padding: 0 0 .6875rem 1rem;
  font-size: .78125rem;
  line-height: 1.55;
  color: var(--stone-500);
}

.fr-tips li:last-child {
  padding-bottom: 0;
}

.fr-tips li:before {
  content: "";
  position: absolute;
  top: .4375rem;
  left: 0;
  width: .3125rem;
  height: .3125rem;
  background: var(--gold);
  opacity: .7;
  transform: rotate(45deg);
}

.fr-tips b {
  color: var(--stone-700);
}

.fr-btn--primary {
  color: var(--gold);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--gold) 9%, var(--white)) 0%,
    color-mix(in srgb, var(--gold) 20%, var(--ivory)) 100%);
  box-shadow: inset 0 1px 0 var(--has-border-inset, #fff),
    0 0 0 1px rgb(var(--gold-rgb) / .45),
    0 1px 2px rgb(var(--gold-rgb) / .12);
}

.fr-btn--primary:hover {
  color: var(--gold);
  box-shadow: inset 0 1px 0 var(--has-border-inset, #fff),
    0 0 0 1px rgb(var(--gold-rgb) / .7),
    0 6px 18px rgb(var(--gold-rgb) / .28);
}

.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-toast {
  box-shadow: inset 0 1px 0 #ffffff0f, 0 0 0 1px var(--stone-300), 0 12px 32px #00000059;
}

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

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

[data-theme="dark"] .fr-kind {
  box-shadow: inset 0 0 0 1px #ffffff1a;
}

[data-theme="dark"] .fr-kind:hover {
  box-shadow: inset 0 0 0 1px #ffffff33;
}

[data-theme="dark"] .fr-kind.is-on,
[data-theme="dark"] .fr-btn--primary {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--gold) 20%, var(--white)) 0%,
    color-mix(in srgb, var(--gold) 10%, var(--ivory)) 100%);
  box-shadow: inset 0 1px 0 #ffffff1f, 0 0 0 1px rgb(var(--gold-rgb) / .45);
}

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

@media (max-width: 64rem) {
  .fr-alayout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 40rem) {
  .fr-panel__body,
  .fr-formfoot,
  .fr-case {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .fr-kinds {
    grid-template-columns: minmax(0, 1fr);
  }

  .fr-btn {
    flex: 1 1 auto;
    justify-content: center;
  }

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