/* Résumé import prototype · tokens taken from the Figma file */
:root {
  --c-text-primary: #282a32;
  --c-text-secondary: #646e8a;
  --c-featured: #282a32;
  --c-container-featured: #3e3f47;
  --c-bg-primary: #ffffff;
  --c-bg-secondary: #f2f3f5;
  --c-bg-suggestion: #ddf3fe;
  --c-bg-disabled: #e5e7eb;
  --c-border: #e5e7eb;
  --c-action: #75d1fc;
  --c-link: #4a5aa1;
  --c-grey40: #bfc5d2;
  --shadow-high: 0 8px 16px rgba(0, 0, 0, 0.16);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--c-featured); }
body {
  font-family: var(--font);
  color: var(--c-text-primary);
  background: var(--c-featured);
  -webkit-font-smoothing: antialiased;
  min-width: 1440px;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
[data-tip] { cursor: not-allowed; }

/* icon helpers */
svg.ic14 { width: 14px; height: 14px; flex: none; }
svg.ic16 { width: 16px; height: 16px; flex: none; }
svg.ic24 { width: 24px; height: 24px; flex: none; }
svg.ic28 { width: 28px; height: 28px; flex: none; }
svg.ic40 { width: 40px; height: 40px; flex: none; }
svg.ic48 { width: 48px; height: 48px; flex: none; }
.c-primary { fill: var(--c-text-primary); }
.c-secondary { fill: var(--c-text-secondary); }
.c-white { fill: #fff; }
.c-link { fill: var(--c-link); }
.c-grey40 { fill: var(--c-grey40); }

/* type */
.t-large { font-size: 20px; line-height: 28px; font-weight: 400; }
.t-default { font-size: 16px; line-height: 24px; font-weight: 400; }
.t-meta { font-size: 16px; line-height: 24px; color: var(--c-text-secondary); white-space: pre; }

/* ---------- Portfolio frame bar ---------- */
.proto-bar { background: #111216; color: #fff; }
.proto-bar__inner {
  width: 1440px; margin: 0 auto; height: 40px; padding: 0 32px;
  display: flex; align-items: center; gap: 16px; font-size: 14px; line-height: 20px;
}
.proto-bar__badge {
  background: var(--c-action); color: var(--c-text-primary); font-weight: 500;
  border-radius: 100px; padding: 2px 10px; font-size: 12px; line-height: 16px; letter-spacing: .02em;
}
.proto-bar__text { flex: 1; color: #cfd3dc; }
.proto-bar__text strong { color: #fff; font-weight: 500; }
.proto-bar__back { color: #fff; font-weight: 500; }
.proto-bar__back:hover { text-decoration: underline; }

/* ---------- Page ---------- */
.page { width: 1440px; margin: 0 auto; background: var(--c-bg-primary); overflow: hidden; }

/* Header (Header SHORT, 260px) */
.hdr { position: relative; height: 260px; display: flex; flex-direction: column; }
.hdr__canvas { position: absolute; left: 0; top: 0; width: 1440px; height: 359px; overflow: hidden; background: var(--c-bg-primary); }
.hdr__shape { position: absolute; left: 775px; top: -138.02px; }
.hdr__title {
  position: absolute; left: 86px; top: 171px; white-space: nowrap;
  font-size: 74px; line-height: 76px; font-weight: 700;
}
.topbar {
  position: relative; background: var(--c-bg-primary);
  display: flex; align-items: center; justify-content: space-between; padding: 8px 32px;
}
.lang { display: flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 82px; background: #fff; }
.lang__label {
  padding: 8px 4px 4px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px; line-height: 15px; letter-spacing: .14px;
}
.lang .ic16 { margin-right: 0; }
.topbar__right { display: flex; align-items: center; gap: 24px; }
.topbar__links { display: flex; gap: 16px; padding-top: 4px; font-size: 14px; line-height: 20px; }
.mode { display: flex; align-items: center; gap: 2.933px; padding: 2.933px; border-radius: 70px; background: #f4f4f5; }
.navbar {
  position: relative; background: var(--c-bg-secondary);
  display: flex; align-items: center; gap: 80px; padding: 12px 32px;
}
.navbar__menu { flex: 1; display: flex; gap: 28px; padding-top: 4px; font-size: 16px; line-height: 24px; }
.account { width: 40px; height: 40px; border-radius: 71.429px; display: grid; place-items: center; }

/* Fictional wordmark (replaces the original product logo) */
.logo {
  width: 60px; font-size: 18px; line-height: 21px; font-weight: 800; letter-spacing: -0.6px;
  color: var(--c-text-primary); white-space: nowrap;
}
.logo span {
  background: linear-gradient(90deg, #78e052, #1ab2fc);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.logo--inverse { color: #fff; }

/* Body wrapper */
.body {
  position: relative; background: var(--c-bg-secondary);
  border-radius: 30px 30px 0 0; padding: 64px 80px;
}
.sections { display: flex; flex-direction: column; gap: 40px; }

/* Profile header */
.profile-card { background: #fff; border-radius: 16px; padding: 24px; display: flex; align-items: center; }
.profile-card__icon { width: 100px; height: 100px; flex: none; }
.profile-card__name { width: 956px; font-size: 48px; line-height: 52px; font-weight: 700; }
.profile-card .btn { align-self: center; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; align-self: flex-start;
  padding: 8px 16px; border-radius: 100px; border: 1px solid transparent;
  font-size: 16px; line-height: 24px; font-weight: 500; white-space: nowrap; flex: none;
}
.btn--secondary { background: #fff; border-color: var(--c-border); color: var(--c-link); }
.btn--primary { background: var(--c-action); border-color: var(--c-action); color: var(--c-text-primary); }
.btn--ai { cursor: pointer; }
.btn--ai:hover, .btn--ai:focus-visible { background: #fff; border-color: var(--c-action); outline: none; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px; border-radius: 100px; flex: none; }

/* Inline messages */
.inline-msg {
  display: flex; align-items: center; gap: 10px; padding: 16px;
  background: var(--c-bg-suggestion); border: 1px solid var(--c-action); border-radius: 4px;
  font-size: 20px; line-height: 28px;
}
.inline-msg--neutral { background: var(--c-bg-secondary); border-color: var(--c-container-featured); }
.inline-alert {
  display: flex; align-items: center; gap: 10px; padding: 16px; width: 1280px;
  background: var(--c-bg-suggestion); border: 1px solid var(--c-action); border-radius: 4px;
  font-size: 20px; line-height: 28px;
}

/* Sections */
.sec__head {
  background: var(--c-featured); color: #fff; cursor: pointer;
  display: flex; align-items: center; gap: 16px; padding: 16px 32px; border-radius: 16px;
}
.sec__head:focus-visible { outline: 2px solid var(--c-action); outline-offset: 2px; }
.sec__title { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.sec__h { font-size: 32px; line-height: 40px; font-weight: 500; }
.sec__d { font-size: 20px; line-height: 28px; font-weight: 400; }
.sec__body {
  background: #fff; border-radius: 0 0 16px 16px;
  height: 0; overflow: hidden; visibility: hidden;
  transition: height var(--sec-dur) var(--sec-ease);
}
.sec__inner { padding-bottom: 40px; opacity: 0; transform: translateY(-8px); transition: opacity var(--sec-dur) ease, transform var(--sec-dur) var(--sec-ease); }
.sec.is-open .sec__inner { opacity: 1; transform: none; }
.sec.is-visible .sec__body { visibility: visible; }
.sec.is-visible .sec__head { border-radius: 16px 16px 0 0; }
.sec.is-open .sec__body.is-settled { height: auto; overflow: visible; }
.sec__chev { transition: transform var(--sec-dur) var(--sec-ease); }
.sec.is-open .sec__chev { transform: rotate(180deg); }
:root { --sec-dur: 320ms; --sec-ease: cubic-bezier(0.2, 0, 0, 1); }
@media (prefers-reduced-motion: reduce) { :root { --sec-dur: 1ms; } }
.sec__content { display: flex; flex-direction: column; align-items: stretch; padding: 32px 32px 0; }
.gap-8 { gap: 8px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .gap-32 { gap: 32px; } .gap-40 { gap: 40px; }

/* Tags */
.tag {
  display: inline-flex; align-items: center; gap: 10px; padding: 4px 10px; border-radius: 4px;
  border: 1px solid var(--c-action); font-size: 16px; line-height: 24px; color: var(--c-text-primary); white-space: nowrap;
}
.tag--plain { background: #fff; }
.tag--suggestion { background: var(--c-bg-suggestion); }

/* Goals */
.goal {
  background: var(--c-bg-secondary); border: 1px solid var(--c-border); border-radius: 16px;
  padding: 16px; display: flex; flex-direction: column; gap: 16px;
}
.goal__head { display: flex; align-items: center; justify-content: space-between; }
.goal__label { display: flex; align-items: center; gap: 8px; }
.goal__label p { font-size: 20px; line-height: 28px; font-weight: 700; }

/* Occupations */
.occ-list { display: flex; flex-direction: column; gap: 24px; }
.occ-grid { display: flex; flex-wrap: wrap; gap: 24px; width: 1216px; }
.occ-grid:empty { display: none; }
.occ-actions { display: flex; gap: 24px; }
.occ {
  width: 596px; display: flex; align-items: flex-start; padding: 16px; border-radius: 16px;
  border: 1px solid var(--c-border); background: var(--c-action);
}
.occ__label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.occ__name { flex: 1; min-width: 0; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--c-text-primary); }
.occ__actions { display: flex; align-items: center; gap: 10px; flex: none; }
.occ__act { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 4px; }
.occ__act:focus-visible { outline: 2px solid var(--c-link); outline-offset: 1px; }
/* Accept animation, step 1: the suggestion pill morphs into the accepted pill in place */
.occ { transition: background-color var(--morph-dur) ease; }
.occ__morph-heart {
  width: 0; margin-right: -8px; opacity: 0; overflow: hidden; flex: none;
  transition: width var(--morph-dur) var(--sec-ease), margin var(--morph-dur) var(--sec-ease), opacity var(--morph-dur) ease;
}
.occ .occ__label { transition: gap var(--morph-dur) var(--sec-ease); }
.occ [data-action="accept"] { overflow: hidden; transition: width var(--morph-dur) var(--sec-ease), margin var(--morph-dur) var(--sec-ease), opacity calc(var(--morph-dur) * .6) ease; }
.occ.is-accepting { background: #fff; pointer-events: none; }
.occ.is-accepting .occ__label { gap: 16px; }
.occ.is-accepting .occ__morph-heart { width: 24px; margin-right: 0; opacity: 1; }
.occ.is-accepting [data-action="accept"] { width: 0; margin-right: -10px; opacity: 0; }
/* Discard animation, step 1: pending or accepted pill morphs into the discarded pill */
.occ { transition: background-color var(--morph-dur) ease, width var(--morph-dur) var(--sec-ease); }
.occ__morph-in {
  width: 0; margin-left: -10px; opacity: 0; overflow: hidden; flex: none;
  transition: width var(--morph-dur) var(--sec-ease), margin var(--morph-dur) var(--sec-ease), opacity var(--morph-dur) ease;
}
.occ__heart { overflow: hidden; transition: width var(--morph-dur) var(--sec-ease), margin var(--morph-dur) var(--sec-ease), opacity calc(var(--morph-dur) * .6) ease; }
.occ [data-action="discard"] { overflow: hidden; transition: width var(--morph-dur) var(--sec-ease), margin var(--morph-dur) var(--sec-ease), opacity calc(var(--morph-dur) * .6) ease; }
.occ.is-discarding { background: var(--c-bg-disabled); pointer-events: none; }
.discarded__grid .occ { width: 580px; } /* width changes only once the pill lands in the discarded list */
.occ.is-discarding .occ__label { gap: 16px; }
.occ.is-discarding .occ__morph-heart { width: 0; margin-right: -16px; opacity: 0; }
.occ.is-discarding .occ__heart { width: 0; margin-right: -16px; opacity: 0; }
.occ.is-discarding [data-action="accept"],
.occ.is-discarding [data-action="discard"] { width: 0; margin-right: -10px; opacity: 0; }
.occ.is-discarding .occ__morph-in { width: 24px; margin-left: 0; opacity: 1; }
.discarded.is-appearing { animation: fade-in var(--morph-dur) ease; }
@keyframes fade-in { from { opacity: 0; } }

/* step 2: the pill travels to its new position (FLIP, driven from script.js) */
.occ.is-moving { position: relative; z-index: 2; box-shadow: var(--shadow-high); }
:root { --morph-dur: 300ms; }
@media (prefers-reduced-motion: reduce) { :root { --morph-dur: 1ms; } }

.occ--accepted { background: #fff; }
.occ--accepted .occ__label { gap: 16px; }
.occ--discarded { width: 580px; background: var(--c-bg-disabled); }
.occ--discarded .occ__label { gap: 16px; }

.discarded {
  width: 1216px; border: 1px solid var(--c-border); border-radius: 16px; padding: 16px;
  display: flex; flex-direction: column; gap: 16px; overflow: hidden;
}
.discarded__head { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.discarded__title { flex: 1; display: flex; align-items: center; gap: 8px; }
.discarded__title p { font-size: 20px; line-height: 28px; font-weight: 700; white-space: nowrap; }
.discarded__grid { display: flex; flex-wrap: wrap; gap: 24px; }
.discarded.is-collapsed .discarded__grid { display: none; }
.discarded.is-collapsed .discarded__chev { transform: rotate(180deg); }

/* Preferences */
.pref-groups { display: flex; flex-direction: column; gap: 16px; }
.pref-group {
  border: 1px solid var(--c-border); border-radius: 16px; padding: 16px;
  display: flex; flex-direction: column; gap: 16px;
}
.pref-group__head { display: flex; align-items: center; justify-content: space-between; }
.pref-group__head p { font-size: 20px; line-height: 28px; font-weight: 700; }
.pills { display: flex; flex-wrap: wrap; gap: 16px; }
.pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 100px;
  background: #fff; border: 1px solid var(--c-border); font-size: 16px; line-height: 24px; white-space: nowrap;
}
.pill__actions { display: flex; gap: 10px; }

/* Work / education entries */
.entry { display: flex; flex-direction: column; gap: 16px; width: 1216px; }
.entry__org { font-size: 20px; line-height: 28px; font-weight: 700; }
.entry__row { display: flex; align-items: center; justify-content: space-between; }
.entry__row--org { gap: 16px; }
.entry__row--org .entry__org { flex: 1; }
.entry__body { display: flex; flex-direction: column; border-left: 2px solid var(--c-border); padding-left: 16px; }

/* Footer */
.ftr { background: var(--c-featured); padding: 16px 16px 40px; display: flex; flex-direction: column; align-items: center; gap: 40px; color: #fff; }
.ftr__menu-wrap {
  position: relative; width: 100%; background: var(--c-container-featured); border-radius: 16px;
  padding: 32px 0; overflow: hidden; display: flex; justify-content: center;
}
.ftr__shape { position: absolute; left: 837px; top: 116px; }
.ftr__menu { position: relative; width: 1280px; display: flex; gap: 32px; align-items: flex-start; }
.ftr__col { flex: 1; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; font-size: 16px; line-height: 24px; white-space: nowrap; }
.ftr__h { font-weight: 700; }
.ftr__loc { display: flex; align-items: center; gap: 8px; color: var(--c-grey40); }
.ftr__lang { display: flex; align-items: center; gap: 4px; font-size: 14px; line-height: 20px; }
.ftr__lang span { margin-right: 0; }
.ftr__info { width: 1280px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.ftr__copy { font-size: 12px; line-height: 16px; text-align: center; }
.ftr__links { display: flex; gap: 24px; font-size: 14px; line-height: 20px; }

/* Toast */
.toast {
  position: fixed; top: calc(var(--toast-offset, 0px) + 40px); left: 50%; transform: translateX(-50%); width: 580px; z-index: 60;
  display: flex; align-items: center; gap: 8px; padding: 16px 16px 16px 32px;
  background: var(--c-action); border-radius: 32px; box-shadow: var(--shadow-high);
  animation: toast-in .25s ease-out;
}
.toast__content { flex: 1; display: flex; align-items: center; gap: 10px; font-size: 20px; line-height: 28px; }
.toast__close { width: 24px; height: 24px; display: grid; place-items: center; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Modal */
.backdrop {
  position: fixed; inset: 0; z-index: 50; background: rgba(40, 42, 50, 0.8);
  display: flex; align-items: center; justify-content: center;
}
.modal {
  width: 632px; background: #fff; border-radius: 32px; box-shadow: var(--shadow-high);
  padding: 56px 64px 32px; display: flex; flex-direction: column; align-items: center; gap: 32px;
}
.modal__content { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.modal__content p { font-size: 20px; line-height: 28px; text-align: center; white-space: nowrap; }
.modal .btn { align-self: center; }
.spinner { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Tooltip */
.tooltip {
  position: fixed; z-index: 70; display: flex; flex-direction: column; align-items: center;
  pointer-events: none;
}
.tooltip__body {
  background: var(--c-featured); color: #fff; border-radius: 8px; padding: 8px;
  font-size: 14px; line-height: 20px; white-space: nowrap;
}

/* ==========================================================
   Résumé import (happy path) · additions
   ========================================================== */
.proto-bar__restart { color: #fff; font-weight: 500; margin-right: 8px; }
.proto-bar__restart:hover { text-decoration: underline; }

/* Import button: active, with a soft pulse until first click */
.btn--import { cursor: pointer; }
.btn--import:hover, .btn--import:focus-visible { border-color: var(--c-action); outline: none; }
.btn--import.is-hint { animation: hint 1.8s ease-out infinite; }
@keyframes hint { 0% { box-shadow: 0 0 0 0 rgba(117, 209, 252, .7); } 70% { box-shadow: 0 0 0 12px rgba(117, 209, 252, 0); } 100% { box-shadow: 0 0 0 0 rgba(117, 209, 252, 0); } }
@media (prefers-reduced-motion: reduce) { .btn--import.is-hint { animation: none; outline: 2px solid var(--c-action); } }

/* Empty vs imported content inside each section */
.page:not(.is-imported) .v-imported { display: none; }
.page.is-imported .v-empty { display: none; }

/* "Review pending" tag in section headers */
.review-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 4px;
  background: var(--c-bg-suggestion); color: var(--c-text-primary);
  font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase;
}
.review-tag svg { width: 14px; height: 14px; fill: var(--c-text-primary); }

/* Preferences instructions (empty state) */
.instr h4 { font-size: 16px; line-height: 24px; font-weight: 700; }

/* Suggested skills */
.pill--sugg { background: var(--c-bg-suggestion); border-color: var(--c-action); }

/* Suggested entries */
.sugg {
  width: 1216px; background: var(--c-bg-suggestion); border: 1px solid var(--c-action); border-radius: 16px;
  padding: 16px; display: flex; flex-direction: column; gap: 16px;
}
.sugg__top { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.sugg__row { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.sugg__actions { display: flex; align-items: center; gap: 8px; }
.tag--new { background: #fff; gap: 8px; padding: 2px 10px; }
.sugg .entry__body { border-left-color: var(--c-text-primary); }
.btn--sm { padding: 6px 16px; }
.lead { font-size: 20px; line-height: 28px; }

/* Import modal */
.imodal { width: 632px; background: var(--c-featured); border-radius: 32px; box-shadow: var(--shadow-high); }
.imodal__bar { height: 60px; padding: 0 20px 0 32px; display: flex; align-items: center; justify-content: space-between; color: #fff; font-size: 20px; line-height: 28px; }
.imodal__close { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 100px; }
.imodal__close:hover, .imodal__close:focus-visible { background: rgba(255, 255, 255, .12); outline: none; }
.imodal__panel { background: #fff; border-radius: 32px; padding: 56px 64px 32px; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.drop {
  width: 504px; height: 354px; border: 1px dashed var(--c-text-primary); border-radius: 4px; background: #f4f4f4;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center;
}
.drop__lead { font-size: 20px; line-height: 28px; }
.drop__note { font-size: 16px; line-height: 24px; }
.drop .btn { align-self: center; }
.progress { width: 450px; height: 16px; border-radius: 100px; background: #eceef1; border: 1px solid #d9dce3; overflow: hidden; }
.progress__fill { height: 100%; width: 0; background: var(--c-action); border-radius: 100px; transition: width .3s linear; }
.drop__status { font-size: 20px; line-height: 28px; margin-top: 8px; }
.drop__file { font-size: 16px; line-height: 24px; }
.modal--steps { padding: 56px 64px 32px; }
.btn--active { cursor: pointer; }
.btn--secondary.btn--active:hover, .btn--secondary.btn--active:focus-visible { border-color: var(--c-link); outline: none; }
.btn--primary.btn--active:hover, .btn--primary.btn--active:focus-visible { background: #fff; outline: none; }
.backdrop { animation: fade-in .2s ease; }
.step-text { animation: fade-in .25s ease; }
.imodal__panel .btn, .modal--steps .btn { align-self: center; }
.profile-card { gap: 24px; }
.profile-card__name { width: auto; flex: 1; }
.pill__act { display: inline-flex; cursor: pointer; border-radius: 4px; }
.pill__act:hover svg { fill: var(--c-link); }
.tooltip__body.is-wrap { white-space: normal; width: 210px; }
.icon-btn--act:hover, .icon-btn--act:focus-visible { background: rgba(74, 90, 161, .1); outline: none; }

/* ===== Review a suggested update (prototype 2) ===== */
.tag--update { background: #fff3d1; border-color: #f2c94c; gap: 8px; padding: 2px 10px; }
.btn--review { padding: 6px 16px; border-color: var(--c-action); color: var(--c-text-primary); font-weight: 400; cursor: pointer; }
.btn--review:hover, .btn--review:focus-visible { background: var(--c-bg-suggestion); outline: none; }
.btn--review.is-hint { animation: hint-pulse 1.6s ease-in-out infinite; }
@keyframes hint-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(117,209,252,.0); } 50% { box-shadow: 0 0 0 6px rgba(117,209,252,.45); } }
.entry--updated { width: 1216px; display: flex; flex-direction: column; gap: 16px; animation: fade-in .3s ease; }

.backdrop.backdrop--scroll { align-items: flex-start; overflow-y: auto; padding: 40px 0 64px; }
.rmodal { width: 848px; background: var(--c-featured); border-radius: 32px; box-shadow: var(--shadow-high); flex: none; }
.rmodal__bar { display: flex; align-items: center; gap: 8px; padding: 16px 16px 16px 32px; color: #fff; font-size: 20px; line-height: 28px; }
.rmodal__bar span { flex: 1; }
.rmodal__close { width: 24px; height: 24px; display: grid; place-items: center; cursor: pointer; }
.rmodal__body { background: #fff; border-radius: 32px; padding: 56px 64px 32px; display: flex; flex-direction: column; gap: 32px; }
.rform { display: flex; flex-direction: column; }
.rfield { display: flex; flex-direction: column; gap: 16px; padding: 24px 0; }
.rfield:first-child { padding-top: 0; }
.rfield__h { display: flex; flex-direction: column; gap: 16px; }
.rfield__h p:first-child { font-size: 20px; line-height: 28px; font-weight: 700; color: #000; }
.rfield__h .req { color: #e02020; font-weight: 400; margin-left: 8px; }
.rfield__h p:last-child { font-size: 16px; line-height: 24px; }
.ropts { display: flex; flex-direction: column; gap: 8px; }
.ropt {
  display: flex; align-items: center; gap: 24px; padding: 8px 16px; border-radius: 8px;
  background: var(--c-bg-secondary); border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.ropt:hover { border-color: var(--c-grey40); }
.ropt.is-selected { background: var(--c-bg-suggestion); border-color: var(--c-action); }
.ropt input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.radio { width: 21px; height: 21px; flex: none; border-radius: 50%; border: 2px solid var(--c-text-primary); display: grid; place-items: center; background: #fff; }
.ropt.is-selected .radio { border-color: var(--c-link); }
.ropt.is-selected .radio::after { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--c-link); }
.ropt input[type="radio"]:focus-visible + .radio { outline: 2px solid var(--c-link); outline-offset: 2px; }
.ropt__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ropt__label { display: flex; align-items: center; justify-content: space-between; min-height: 20px; font-size: 14px; line-height: 20px; }
.ropt__val { font-size: 16px; line-height: 24px; }
.ropt__val.is-empty { font-style: italic; }
.copy-btn { width: 32px; height: 32px; margin: -6px 0; display: grid; place-items: center; border-radius: 100px; }
.copy-btn svg { width: 16px; height: 16px; fill: var(--c-link); }
.rinput, .rselect, .rtext {
  width: 100%; font: inherit; font-size: 16px; line-height: 24px; color: var(--c-text-primary);
  background: #fff; border: 1px solid var(--c-border); border-radius: 2px; padding: 16px;
}
.rinput:focus, .rselect:focus, .rtext:focus { outline: none; border-color: var(--c-link); }
.rselect { appearance: none; padding-right: 48px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23282a32' d='M12 15.4 6 9.4 7.4 8l4.6 4.6L16.6 8 18 9.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 24px; }
.rtext { min-height: 152px; resize: vertical; }
.rrow { display: flex; gap: 16px; }
.rrow > label { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 20px; }
.rgroup { display: flex; flex-direction: column; gap: 12px; }
.rcheck { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; line-height: 24px; cursor: pointer; }
.rcheck input { width: 21px; height: 21px; margin: 0; accent-color: var(--c-link); }
.rhelp { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; color: var(--c-text-secondary); }
.rhelp svg { width: 24px; height: 24px; fill: var(--c-text-secondary); }
.rmodal__foot { display: flex; justify-content: center; gap: 32px; }
.rmodal__foot .btn { cursor: pointer; }
.btn--update:disabled { background: var(--c-bg-disabled); border-color: var(--c-bg-disabled); color: var(--c-grey40); cursor: not-allowed; }
.btn--update:disabled svg { fill: var(--c-grey40); }