/* ═══════════════════════════════════════════════════════
   FORUM COMMON — shared components & utilities
   ═══════════════════════════════════════════════════════ */

[x-cloak] {
  display: none !important;
}

/* ── Panel ─────────────────────────────────────────── */

.fr-panel {
  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;
}

.c-page-title + .fr-panel,
.c-page-title + .fr-doc,
.c-page-title + .fr-dm,
.c-page-title + .fr-set,
.c-page-title + .fr-alayout,
.c-page-title + form,
.fr-panel + .fr-panel {
  margin-top: 1.25rem;
}

/* соседние панели внутри grid-раскладок — это колонки, а не стопка */
.fr-dm > .fr-panel + .fr-panel,
.fr-set > .fr-panel + .fr-panel,
.fr-doc > .fr-panel + .fr-panel,
.fr-alayout > .fr-panel + .fr-panel {
  margin-top: 0;
}

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

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

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

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

.fr-panel__body {
  padding: 1.125rem;
}

.fr-panel__foot {
  display: block;
  padding: .5rem 1rem;
  font-size: .6875rem;
  text-align: center;
  color: var(--stone-400);
  border-top: 1px solid var(--stone-100);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.fr-panel__foot:hover {
  color: var(--gold);
  background: var(--ivory);
}

/* ── Button ────────────────────────────────────────── */

.fr-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  height: 2.375rem;
  padding: 0 .9375rem 0 .8125rem;
  font-family: var(--font-heading);
  font-size: .8125rem;
  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-btn svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}

.fr-btn: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-btn:hover svg {
  transform: scale(1.1);
}

.fr-btn:active {
  transform: translateY(0) scale(.97);
  box-shadow: inset 0 1px 3px #00000014, 0 0 0 1px var(--stone-300);
}

.fr-btn--sm {
  height: 2rem;
  padding: 0 .75rem;
  font-size: .75rem;
}

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

.fr-btn--icon {
  width: 2.375rem;
  padding: 0;
  justify-content: center;
}

.fr-btn--primary {
  color: #e8c96a;
  background: linear-gradient(180deg, #2e2519 0%, #1a1611 100%);
  box-shadow: inset 0 1px 0 #ffffff17,
    0 0 0 1px rgb(var(--gold-rgb) / .45),
    0 2px 5px #00000038;
}

.fr-btn--primary:hover {
  color: #f6e2ab;
  box-shadow: inset 0 1px 0 #ffffff24,
    0 0 0 1px rgb(var(--gold-rgb) / .7),
    0 10px 24px rgb(var(--gold-rgb) / .2);
}

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

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

.fr-btn--ghost {
  background: none;
  box-shadow: none;
}

.fr-btn--ghost:hover {
  background: var(--ivory);
  box-shadow: 0 0 0 1px var(--stone-200);
}

.fr-btn--block {
  width: 100%;
  justify-content: center;
}

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

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

/* ── Empty State ───────────────────────────────────── */

.fr-empty {
  padding: 3rem 1.5rem;
  text-align: center;
}

.fr-empty__seal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto 1rem;
  color: var(--stone-400);
  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,
    0 0 0 4px var(--bone),
    0 0 0 5px var(--stone-200);
}

.fr-empty__seal svg {
  width: 1.25rem;
  height: 1.25rem;
}

.fr-empty h3 {
  margin: 0 0 .375rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--stone-800);
}

.fr-empty p {
  margin: 0;
  font-size: .8125rem;
  color: var(--stone-500);
}

/* ── Form Inputs ───────────────────────────────────── */

.fr-input,
.fr-textarea {
  width: 100%;
  padding: .5625rem .6875rem;
  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-textarea {
  min-height: 6rem;
  line-height: 1.6;
  resize: vertical;
}

.fr-input::placeholder,
.fr-textarea::placeholder {
  color: var(--stone-300);
}

.fr-input:focus,
.fr-textarea:focus {
  outline: none;
  background-color: 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-flabel {
  display: block;
  margin-bottom: .375rem;
  font-size: .75rem;
  color: var(--stone-500);
}

.fr-glabel {
  display: block;
  margin-bottom: .875rem;
  font-family: var(--font-heading);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stone-400);
}

.fr-hint {
  margin-top: .375rem;
  font-size: .6875rem;
  line-height: 1.45;
  color: var(--stone-400);
}

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

/* ── Dropdown ──────────────────────────────────────── */

.fr-drop {
  position: relative;
}

.fr-drop__btn {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .5625rem .6875rem;
  font-family: var(--font-body);
  font-size: .8125rem;
  text-align: left;
  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;
  cursor: pointer;
  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-drop__btn > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-heading);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fr-drop__chev {
  width: .75rem;
  height: .75rem;
  flex-shrink: 0;
  color: var(--stone-400);
  transition: transform var(--transition-base), color var(--transition-fast);
}

.fr-drop__btn:hover {
  background-color: var(--white);
  box-shadow: inset 0 1px 2px #0000000a,
    inset 0 0 0 1px color-mix(in srgb, var(--stone-400) 60%, transparent);
}

.fr-drop.is-open .fr-drop__btn {
  background-color: 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-drop.is-open .fr-drop__chev {
  color: var(--gold);
  transform: rotate(180deg);
}

.fr-drop__menu {
  position: absolute;
  top: calc(100% + .375rem);
  right: 0;
  left: 0;
  z-index: 30;
  min-width: 11rem;
  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-drop__opt {
  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-drop__opt:hover {
  color: var(--stone-900);
  background: var(--ivory);
}

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

.fr-drop__opt.is-on {
  color: var(--gold);
  background: var(--gold-bg);
}

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

/* ── Stats Strip ───────────────────────────────────── */

.fr-stats-strip {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: .625rem;
  margin-bottom: 1.25rem;
  padding: .375rem .5rem;
  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-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  padding: .5rem .75rem;
  text-align: center;
  border-radius: var(--radius-md);
  transition: background var(--transition-base);
}

.fr-stat:hover {
  background: rgb(var(--gold-rgb) / .06);
}

.fr-stat:not(:first-child):before {
  content: "";
  position: absolute;
  top: -.25rem;
  bottom: -.25rem;
  left: -.3125rem;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--stone-300) 20%,
    var(--stone-300) 80%,
    transparent 100%);
}

.fr-stat__val {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--stone-900);
}

.fr-stat__label {
  margin-top: .25rem;
  font-family: var(--font-heading);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stone-400);
}

/* ── Cover Banner ──────────────────────────────────── */

.fr-cover {
  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-cover__banner {
  position: relative;
  height: 8.5rem;
  background:
    radial-gradient(110% 150% at 18% 0%, rgb(var(--gold-rgb) / .3) 0%, transparent 60%),
    linear-gradient(135deg, #1b1712 0%, #2c2318 55%, #16130f 100%);
}

.fr-cover__banner:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, #ffffff0a 0 1px, transparent 1px 9px);
}

.fr-cover__banner:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--gold-rgb) / .6), transparent);
}

.fr-cover__body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  margin-top: -2.75rem;
  padding: 0 1.25rem 1.125rem;
}

/* ── About ─────────────────────────────────────────── */

.fr-about {
  font-size: .875rem;
  line-height: 1.7;
  color: var(--stone-600);
}

.fr-about p {
  margin: 0 0 .875rem;
}

.fr-about p:last-child {
  margin-bottom: 0;
}

.fr-about h3 {
  margin: 1.25rem 0 .5rem;
  font-family: var(--font-heading);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--stone-800);
}

/* ── Settings Row ──────────────────────────────────── */

.fr-setrow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: .875rem 1.125rem;
  border-bottom: 1px dashed var(--stone-200);
}

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

.fr-setrow__text {
  min-width: 0;
  font-size: .8125rem;
  color: var(--stone-700);
}

.fr-setrow__text small {
  display: block;
  margin-top: .1875rem;
  font-size: .6875rem;
  line-height: 1.45;
  color: var(--stone-400);
}

.fr-setrow .fr-drop {
  width: 13rem;
  flex-shrink: 0;
}

/* ── Tag ───────────────────────────────────────────── */

.fr-tag {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  padding: .1875rem .4375rem;
  font-family: var(--font-heading);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--gold);
  background: var(--gold-bg);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 1px rgb(var(--gold-rgb) / .3);
}

/* ═══════════════════════════════════════════════════════
   DARK THEME OVERRIDES
   ═══════════════════════════════════════════════════════ */

[data-theme="dark"] .fr-panel,
[data-theme="dark"] .fr-stats-strip,
[data-theme="dark"] .fr-cover {
  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-panel__head {
  background: var(--ivory);
  border-bottom-color: var(--stone-200);
}

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

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

[data-theme="dark"] .fr-btn {
  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-btn--primary {
  background: linear-gradient(180deg, #33291b 0%, #1d1913 100%);
  box-shadow: inset 0 1px 0 #ffffff1f, 0 0 0 1px rgb(var(--gold-rgb) / .45);
}

[data-theme="dark"] .fr-empty__seal {
  background: radial-gradient(circle at 35% 28%, var(--ivory), var(--white));
  border-color: var(--stone-300);
  box-shadow: inset 0 1px 2px #ffffff0f,
    0 0 0 4px var(--bone),
    0 0 0 5px var(--stone-200);
}

[data-theme="dark"] .fr-input,
[data-theme="dark"] .fr-textarea,
[data-theme="dark"] .fr-drop__btn {
  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-input:focus,
[data-theme="dark"] .fr-textarea:focus,
[data-theme="dark"] .fr-drop.is-open .fr-drop__btn {
  background-color: 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-drop__menu {
  background: linear-gradient(180deg, var(--parchment) 0%, var(--ivory) 100%);
  box-shadow: inset 0 1px 0 #ffffff0f,
    0 0 0 1px var(--stone-300),
    0 14px 32px #00000059;
}

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

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

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */

@media (max-width: 56rem) {
  .fr-stats-strip {
    flex-wrap: wrap;
    row-gap: .5rem;
  }

  .fr-stat {
    flex: 1 1 40%;
  }

  .fr-stat:not(:first-child):before {
    display: none;
  }
}

@media (max-width: 40rem) {
  .fr-cover__banner {
    height: 6.5rem;
  }

  .fr-cover__body {
    margin-top: -2rem;
    padding: 0 1rem 1rem;
  }

  .fr-setrow {
    flex-direction: column;
    align-items: stretch;
  }

  .fr-setrow .fr-drop {
    width: 100%;
  }
}

/* ── Chips (фильтры разделов и бесед) ─────────────── */

.fr-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background: var(--white);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.fr-chip {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  padding: .4375rem .75rem;
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--stone-500);
  background: none;
  border: 0;
  border-right: 1px solid var(--stone-200);
  border-radius: 0;
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.fr-chip:last-child {
  border-right: 0;
}

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

.fr-chip span {
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 700;
  color: var(--stone-400);
}

.fr-chip.is-active {
  color: var(--stone-900);
  background: var(--ivory);
  box-shadow: inset 0 -2px 0 var(--stone-600);
}

.fr-chip.is-active span {
  color: var(--stone-600);
}

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

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

[data-theme="dark"] .fr-chip:last-child {
  border-right: 0;
}

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

@media (max-width: 30rem) {
  .fr-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

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

  .fr-chip {
    flex-shrink: 0;
  }
}

/* ── Общие примитивы, перенесены со страничных стилей ── */



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



.fr-daysep span {
  font-family: var(--font-heading);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stone-400);
}



.fr-daysep:after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--stone-200), transparent);
}



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



.fr-field + .fr-field {
  margin-top: 1rem;
}



.fr-label {
  display: block;
  margin-bottom: .4375rem;
  font-family: var(--font-heading);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stone-400);
}



.fr-toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 140;
  display: flex;
  align-items: center;
  gap: .625rem;
  max-width: calc(100vw - 2rem);
  padding: .6875rem .875rem;
  font-size: .8125rem;
  color: var(--stone-700);
  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 12px 32px #00000026;
}



[data-theme="dark"] .fr-toast {
  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;
}



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



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



.fr-cal .fr-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1875rem;
  height: 2.25rem;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}



.fr-cal .fr-day:hover {
  background: var(--ivory);
}



.fr-cal .fr-day.is-sel {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--gold) 12%, var(--white)) 0%,
    color-mix(in srgb, var(--gold) 22%, var(--ivory)) 100%);
  box-shadow: inset 0 0 0 1px rgb(var(--gold-rgb) / .5);
}



.fr-cal .fr-day.is-sel .fr-day__num {
  color: var(--gold);
}



[data-theme="dark"] .fr-cal .fr-day:hover,
[data-theme="dark"] .fr-ibtn:hover,
[data-theme="dark"] .fr-bell:hover {
  background: var(--parchment);
}



.fr-tabs {
  display: flex;
  gap: .125rem;
  margin-top: .625rem;
}



.fr-tab {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .3125rem .5625rem;
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 600;
  color: var(--stone-500);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}



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



.fr-tab 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-tab.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-tab.is-active b {
  color: var(--stone-600);
  background: var(--ivory);
  box-shadow: 0 0 0 1px var(--stone-300);
}



.fr-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}



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



.fr-tab,
.fr-cbtn,
.fr-composer__tool,
.fr-rcpt button {
  transition: color var(--transition-fast), background var(--transition-fast),
    box-shadow var(--transition-fast), transform .18s cubic-bezier(.16, 1, .3, 1);
}



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



.fr-check {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0;
  font-size: .78125rem;
  line-height: 1.3;
  text-align: left;
  color: var(--stone-600);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.fr-check:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.fr-check__box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.0625rem;
  height: 1.0625rem;
  flex-shrink: 0;
  color: transparent;
  background: linear-gradient(180deg, var(--white) 0%, var(--ivory) 100%);
  border-radius: var(--radius-sm);
  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-check__box svg {
  width: .6875rem;
  height: .6875rem;
  stroke-width: 3;
}







.fr-check.is-on {
  color: var(--stone-800);
}



.fr-reason:before {
  content: "";
  width: .25rem;
  height: .25rem;
  background: var(--red);
  transform: rotate(45deg);
}



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



.fr-pchips {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background: var(--white);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}



.fr-pchip {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  padding: .4375rem .75rem;
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 600;
  color: var(--stone-500);
  background: none;
  border: 0;
  border-right: 1px solid var(--stone-200);
  border-radius: 0;
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}



.fr-pchip:last-child {
  border-right: 0;
}



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



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



.fr-pchip.is-active {
  color: var(--gold);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--gold) 8%, var(--white)) 0%,
    color-mix(in srgb, var(--gold) 14%, var(--ivory)) 100%);
  border-right-color: rgb(var(--gold-rgb) / .35);
  box-shadow: inset 1px 0 0 rgb(var(--gold-rgb) / .35),
    inset 0 1px 0 var(--has-border-inset, #fff);
}



.fr-pchip.is-active:first-child {
  box-shadow: inset 0 1px 0 var(--has-border-inset, #fff);
}



.fr-pchip.is-active:before {
  background: var(--gold);
  box-shadow: 0 0 6px rgb(var(--gold-rgb) / .6);
}



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

.fr-check:hover .fr-check__box {
  box-shadow: inset 0 1px 2px #00000012, 0 0 0 1px var(--gold);
}



.fr-check.is-on .fr-check__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);
}



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



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



[data-theme="dark"] .fr-pchip:last-child {
  border-right: 0;
}



.fr-rules {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  counter-reset: rule;
}



.fr-rules li {
  position: relative;
  padding: 0 0 .75rem 2.25rem;
  font-size: .875rem;
  line-height: 1.65;
  color: var(--stone-600);
  counter-increment: rule;
}



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



.fr-rules li:before {
  content: attr(data-num);
  position: absolute;
  top: .125rem;
  left: 0;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 700;
  color: var(--stone-300);
}



.fr-rules b {
  font-weight: 700;
  color: var(--stone-800);
}



.fr-reason b {
  display: block;
  margin-bottom: .25rem;
  font-family: var(--font-heading);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stone-400);
}



[data-theme="dark"] .fr-detail,
[data-theme="dark"] .fr-reason,
[data-theme="dark"] .fr-cd,
[data-theme="dark"] .fr-status__search input {
  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-reason {
  border-left: 2px solid var(--red);
}



[data-theme="dark"] .fr-poll,
[data-theme="dark"] .fr-modal__win,
[data-theme="dark"] .fr-toast,
[data-theme="dark"] .fr-menu__list {
  background: linear-gradient(180deg, var(--bone) 0%, var(--white) 100%);
}



[data-theme="dark"] .fr-modal__seal,
[data-theme="dark"] .fr-toast {
  box-shadow: inset 0 1px 0 #ffffff0f,
    0 0 0 1px var(--stone-300),
    0 12px 32px #00000059;
}



.fr-tab:active {
  transform: scale(.97);
}



[data-theme="dark"] .fr-tabs,
[data-theme="dark"] .fr-mode {
  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-tab.is-active,
[data-theme="dark"] .fr-mode button.is-on {
  background: linear-gradient(180deg, var(--parchment) 0%, var(--ivory) 100%);
}



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



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

/* ── Sign-in button (гостевая шапка на всех страницах) ── */

.fr-signbtn {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  height: 2.25rem;
  padding: 0 .8125rem;
  font-family: var(--font-heading);
  font-size: .8125rem;
  font-weight: 600;
  color: #e8c96a;
  background: linear-gradient(180deg, #2e2519 0%, #1a1611 100%);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: inset 0 1px 0 #ffffff17,
    0 0 0 1px rgb(var(--gold-rgb) / .45),
    0 2px 5px #00000038;
  transition: color var(--transition-fast), box-shadow var(--transition-base),
    transform .18s cubic-bezier(.16, 1, .3, 1);
}

.fr-signbtn svg {
  width: .9375rem;
  height: .9375rem;
  flex-shrink: 0;
}

.fr-signbtn:hover {
  color: #f6e2ab;
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 #ffffff24,
    0 0 0 1px rgb(var(--gold-rgb) / .7),
    0 8px 20px rgb(var(--gold-rgb) / .2);
}

.fr-signbtn:active {
  transform: translateY(0) scale(.97);
  box-shadow: inset 0 2px 6px #00000059, 0 0 0 1px rgb(var(--gold-rgb) / .5);
}

[data-theme="dark"] .fr-signbtn {
  background: linear-gradient(180deg, #33291b 0%, #1d1913 100%);
  box-shadow: inset 0 1px 0 #ffffff1f, 0 0 0 1px rgb(var(--gold-rgb) / .45);
}

/* ── Pager (разделы, модерация, отслеживаемое) ── */

.fr-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem;
}

.fr-pager__item,
.fr-pager__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 .5rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 700;
  color: var(--stone-500);
  background: linear-gradient(180deg, var(--white) 0%, var(--ivory) 100%);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.fr-pager__item:hover,
.fr-pager__nav:hover {
  color: var(--stone-900);
  border-color: var(--stone-400);
  background: var(--white);
}

.fr-pager__item.is-active {
  color: var(--gold);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--gold) 8%, var(--white)) 0%,
    color-mix(in srgb, var(--gold) 16%, var(--ivory)) 100%);
  border-color: rgb(var(--gold-rgb) / .4);
  box-shadow: inset 0 1px 0 var(--has-border-inset, #fff);
}

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

.fr-pager__nav.is-disabled {
  color: var(--stone-300);
  background: var(--ivory);
  pointer-events: none;
}

.fr-pager__gap {
  padding: 0 .125rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--stone-300);
}

/* ── Guest CTA (индекс, тема, апелляции) ── */

.fr-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.75rem;
  padding: 1.5rem 1.5rem 1.375rem;
  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-cta__body {
  flex: 1 1 20rem;
  min-width: 0;
}

.fr-cta__title {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .5rem;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--stone-900);
}

.fr-cta__title svg {
  width: 1rem;
  height: 1rem;
  color: var(--gold);
}

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

.fr-perks {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem .875rem;
  margin-top: .875rem;
}

.fr-perk {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  font-size: .75rem;
  color: var(--stone-500);
}

.fr-perk svg {
  width: .8125rem;
  height: .8125rem;
  flex-shrink: 0;
  color: var(--gold);
  opacity: .8;
}

.fr-cta__acts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .625rem;
  max-width: 50%;
  margin-top: .875rem;
}

.fr-cta__acts .g-btn {
  justify-content: center;
}

.fr-guestnote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1.25rem;
  font-size: .78125rem;
  color: var(--stone-400);
  border-top: 1px solid var(--stone-100);
}

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

.fr-guestnote a {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--gold);
}

.fr-ghost {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  height: 2.25rem;
  padding: 0 .8125rem;
  font-family: var(--font-heading);
  font-size: .8125rem;
  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-ghost svg {
  width: .9375rem;
  height: .9375rem;
  flex-shrink: 0;
}

.fr-ghost: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-ghost:active {
  transform: translateY(0) scale(.97);
}

.fr-dis {
  opacity: .45;
  pointer-events: none;
}

[data-theme="dark"] .fr-cta {
  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-ghost {
  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-guestnote {
  border-top-color: var(--stone-200);
}

/* ── File chips (композер, тема, сообщения) ── */

.fr-chipfile {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  max-width: 15rem;
  padding: .3125rem .3125rem .3125rem .4375rem;
  background: linear-gradient(180deg, var(--white) 0%, var(--ivory) 100%);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 var(--has-border-inset, #fff),
    0 0 0 1px var(--stone-200);
  overflow: hidden;
}

.fr-chipfile__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  flex-shrink: 0;
  color: var(--gold);
  background: var(--gold-bg);
  border-radius: var(--radius-sm);
}

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

.fr-chipfile__name {
  overflow: hidden;
  font-size: .75rem;
  font-weight: 600;
  color: var(--stone-800);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fr-chipfile__size {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: .625rem;
  color: var(--stone-400);
}

.fr-chipfile__del {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  padding: 0;
  color: var(--stone-400);
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast), transform .18s cubic-bezier(.16, 1, .3, 1);
}

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

.fr-chipfile__del:active {
  transform: scale(.88);
}

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

.fr-chipfile {
    max-width: 100%;
  }

[data-theme="dark"] .fr-pager__item,
[data-theme="dark"] .fr-pager__nav {
  background: linear-gradient(180deg, var(--parchment) 0%, var(--ivory) 100%);
  border-color: var(--stone-300);
}

[data-theme="dark"] .fr-cta {
  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 4px 18px #00000040;
}

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

@media (max-width: 40rem) {
  .fr-cta {
    padding: 1.25rem 1rem;
  }
  .fr-signbtn,
  .fr-ghost {
    flex: 1 1 auto;
    justify-content: center;
  }
}

.fr-msg__content .fr-image,
.fr-msg__content .fr-msg__img {
  display: block;
  width: auto;
  max-width: min(100%, 34rem);
  max-height: 18rem;
  height: auto;
  margin: .5rem 0;
  object-fit: contain;
  cursor: zoom-in;
  background: var(--ivory);
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 1px var(--stone-200), 0 2px 10px #0000000f;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.fr-msg__content .fr-image:hover,
.fr-msg__content .fr-msg__img:hover {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent), 0 6px 18px #00000024;
  transform: translateY(-1px);
}

.fr-lb-lock {
  overflow: hidden;
}

.fr-lb {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .18s ease-out;
}

.fr-lb.is-open {
  opacity: 1;
}

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

.fr-lb__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: min(92vw, 1400px);
  max-height: 88vh;
  margin: 0;
  pointer-events: none;
}

.fr-lb__img {
  max-width: min(92vw, 1400px);
  max-height: 88vh;
  opacity: 0;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 18px 60px #00000073;
  transition: opacity .2s ease-out, transform .2s ease-out;
  transform: scale(.985);
}

.fr-lb__img.is-in {
  opacity: 1;
  transform: scale(1);
}

.fr-lb__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  color: var(--white);
  cursor: pointer;
  background: #ffffff1a;
  border: 1px solid #ffffff2e;
  border-radius: 50%;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.fr-lb__btn:hover {
  background: #ffffff33;
  border-color: #ffffff5c;
}

.fr-lb__btn svg {
  width: 1.375rem;
  height: 1.375rem;
  flex-shrink: 0;
}

.fr-lb__btn--close {
  top: 1.25rem;
  right: 1.25rem;
}

.fr-lb__btn--prev {
  top: 50%;
  left: 1.25rem;
  transform: translateY(-50%);
}

.fr-lb__btn--next {
  top: 50%;
  right: 1.25rem;
  transform: translateY(-50%);
}

.fr-lb__counter {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  padding: .3125rem .75rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  color: #ffffffd9;
  background: #00000059;
  border: 1px solid #ffffff26;
  border-radius: 999px;
  transform: translateX(-50%);
}

@media (max-width: 40rem) {
  .fr-lb__btn--prev {
    left: .5rem;
  }

  .fr-lb__btn--next {
    right: .5rem;
  }

  .fr-msg__content .fr-image,
  .fr-msg__content .fr-msg__img {
    max-height: 14rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fr-lb,
  .fr-lb__img,
  .fr-msg__content .fr-image,
  .fr-msg__content .fr-msg__img {
    transition: none;
  }

  .fr-msg__content .fr-image:hover,
  .fr-msg__content .fr-msg__img:hover {
    transform: none;
  }
}

.g-btn[data-forum-watch].is-on {
  color: var(--stone-900);
  background: var(--ivory);
  border-color: var(--stone-300);
}

.g-btn[data-forum-watch].is-on svg {
  color: var(--stone-600);
}

[data-theme="dark"] .g-btn[data-forum-watch].is-on {
  background: var(--parchment);
}

@media (max-width: 48rem) {
  .fr-cta__acts {
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  .fr-guestbar .g-btn {
    display: none;
  }

  .fr-guestnote {
    flex-direction: column;
    gap: .25rem;
    text-align: center;
  }
}

.fr-icon-img {
  width: 1em;
  height: 1em;
  object-fit: contain;
  vertical-align: middle;
  flex-shrink: 0;
}

.c-page-title__icon .fr-icon-img,
.ap-page-title__icon .fr-icon-img {
  width: 1.625rem;
  height: 1.625rem;
}

.fr-prefix {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--gold);
  transition: color var(--transition-fast);
}

.fr-prefix:after {
  content: "/";
  margin: 0 .375rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--stone-300);
}

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

a.fr-prefix:hover:after {
  color: var(--stone-300);
}

.fr-modform {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1rem 1.25rem 1.25rem;
}

.fr-modform__hint {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--stone-400);
}

.fr-modform .c-select {
  margin-bottom: 0;
}

.fr-modform__acts {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: .25rem;
}