/* Conjoin · Biblioteca de componentes
   Todos os componentes usam os tokens de tokens.css. Nada de estilo por tela. */

/* ============ Ícones ============ */
.ic { width: 24px; height: 24px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ic-sm { width: 18px; height: 18px; }
.ic-xs { width: 16px; height: 16px; }
.ic-lg { width: 28px; height: 28px; }

/* ============ Botões ============ */
.btn {
  --btn-h: 56px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--btn-h);
  padding: var(--s-2) var(--s-6);
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn:active:not([aria-disabled="true"]):not(:disabled) { transform: scale(0.98); }
.btn:focus-visible { border-radius: var(--r-pill); }
.btn .ic { width: 20px; height: 20px; }
.btn-block { width: 100%; }
.btn-md { --btn-h: 48px; padding-inline: var(--s-5); }
.btn-sm { --btn-h: 44px; padding-inline: var(--s-4); font-size: var(--fs-label); }

.btn-primary { background: var(--ouro); color: var(--noite); box-shadow: 0 6px 16px rgba(198, 147, 46, 0.28); }
.btn-primary:hover { background: var(--ouro-escuro); }

.btn-secondary { background: var(--azul); color: var(--alva); }
.btn-secondary:hover { background: var(--porto); }

.btn-outline { background: var(--alva); color: var(--azul); border-color: var(--azul); }
.btn-outline:hover { background: var(--azul-veu); }

.btn-text {
  --btn-h: 48px;
  background: transparent;
  color: var(--azul);
  padding-inline: var(--s-3);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.btn-text:hover { background: var(--azul-veu); text-decoration: none; }

.btn-danger { background: var(--erro-tinta); color: var(--alva); }
.btn-danger:hover { background: #991B1B; }
.btn-danger-outline { background: var(--alva); color: var(--erro-tinta); border-color: var(--erro-tinta); }
.btn-danger-outline:hover { background: var(--erro-veu); }

/* Em fundo azul (momento do match, destaques) */
.btn-on-dark { background: transparent; color: var(--alva); border-color: var(--alva); }
.btn-on-dark:hover { background: rgba(255, 255, 255, 0.10); }
.btn-light { background: var(--alva); color: var(--azul); }
.btn-light:hover { background: var(--azul-veu); }

.btn[aria-disabled="true"], .btn:disabled {
  background: var(--nevoa);
  color: var(--costa-tinta);
  border-color: transparent;
  cursor: not-allowed;
}
.btn-outline[aria-disabled="true"] { background: var(--alva); border-color: var(--nevoa); }

.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 22px; height: 22px;
  border: 2.5px solid currentColor;
  border-color: var(--noite) transparent var(--noite) transparent;
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}
.btn-secondary.is-loading::after { border-color: var(--alva) transparent var(--alva) transparent; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: var(--touch);
  height: var(--touch);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--noite);
  position: relative;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.icon-btn:hover { background: var(--nevoa); }
.icon-btn.is-raised { background: var(--alva); box-shadow: var(--shadow-whisper); border: 1px solid var(--line); }
.screen[data-tone="azul"] .icon-btn { color: var(--alva); }
.screen[data-tone="azul"] .icon-btn:hover { background: rgba(255, 255, 255, 0.12); }
.icon-btn .dot { position: absolute; top: 10px; right: 11px; width: 10px; height: 10px; border-radius: 50%; background: var(--erro); box-shadow: 0 0 0 2px var(--alva); }

.link-btn {
  display: inline-flex; align-items: center; gap: var(--s-1);
  min-height: var(--touch-min);
  padding: 0;
  border: 0; background: none;
  color: var(--azul); font-weight: 600;
  text-decoration: none;
}
.link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }

.btn-row { display: flex; gap: var(--s-3); }
.btn-row > .btn { flex: 1; }

/* ============ Campos ============ */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-weight: 500; color: var(--noite); }
.field-label .opt { font-weight: 400; color: var(--ink-soft); }
.field-help { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--ink-soft); }
.field-error {
  display: flex; gap: 6px; align-items: flex-start;
  font-size: var(--fs-label); line-height: var(--lh-label);
  color: var(--erro-tinta); font-weight: 500;
}
.field-error .ic { width: 18px; height: 18px; margin-top: 1px; }

.input, .select, .textarea {
  width: 100%;
  min-height: 56px;
  padding: 0 var(--s-4);
  border: 1.5px solid var(--field-line);
  border-radius: var(--r-md);
  background: var(--alva);
  color: var(--noite);
  font-size: var(--fs-body);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.textarea { padding: var(--s-3) var(--s-4); min-height: 112px; resize: vertical; line-height: var(--lh-body); }
.input::placeholder, .textarea::placeholder { color: var(--costa-tinta); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--costa); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--azul); box-shadow: var(--ring); border-radius: var(--r-md); }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--erro-tinta); }
.field.has-success .input { border-color: var(--sucesso-tinta); }
.input:disabled, .input[readonly] { background: var(--bruma); color: var(--costa-tinta); }
.select {
  appearance: none;
  padding-right: var(--s-12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101C26' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 20px;
}

.input-group { display: flex; gap: var(--s-2); }
.input-group .input-prefix {
  display: grid; place-items: center;
  min-width: 72px; min-height: 56px;
  border: 1.5px solid var(--field-line);
  border-radius: var(--r-md);
  background: var(--bruma);
  font-weight: 500;
}
.input-wrap { position: relative; }
.input-wrap .input-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--costa-tinta); pointer-events: none; }
.input-wrap .input.has-icon { padding-left: 48px; }
.input-wrap .input-status { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); }
.field.has-success .input-status { color: var(--sucesso-tinta); }

/* Código de 6 dígitos */
.otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-2); }
.otp input {
  width: 100%;
  aspect-ratio: 0.86;
  min-height: 56px;
  border: 1.5px solid var(--field-line);
  border-radius: var(--r-md);
  background: var(--alva);
  text-align: center;
  font-size: var(--fs-title-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.otp input:focus-visible { border-color: var(--azul); box-shadow: var(--ring); border-radius: var(--r-md); }
.otp.has-error input { border-color: var(--erro-tinta); background: var(--erro-veu); }

/* Opções grandes (uma pergunta por tela) */
.choices { display: flex; flex-direction: column; gap: var(--s-2); }
.choices.is-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 64px;
  padding: var(--s-3) var(--s-4);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--alva);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.choice:hover { border-color: var(--mare-funda); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice .choice-icon {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: none;
  border-radius: var(--r-md);
  background: var(--azul-veu);
  color: var(--azul);
}
.choice .choice-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.choice .choice-title { font-weight: 600; color: var(--noite); }
.choice .choice-desc { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--ink-soft); }
.choice .choice-mark {
  display: grid; place-items: center;
  width: 24px; height: 24px; flex: none;
  border: 2px solid var(--mare-funda);
  border-radius: 50%;
  color: transparent;
  transition: all var(--dur-fast) var(--ease-out);
}
.choice[data-kind="check"] .choice-mark { border-radius: 7px; }
.choice .choice-mark .ic { width: 16px; height: 16px; stroke-width: 3; }
.choice:has(input:checked), .choice[aria-checked="true"], .choice[aria-pressed="true"] {
  border-color: var(--azul);
  background: var(--azul-veu);
}
.choice:has(input:checked) .choice-mark, .choice[aria-checked="true"] .choice-mark, .choice[aria-pressed="true"] .choice-mark {
  border-color: var(--azul); background: var(--azul); color: var(--alva);
}
.choice:has(input:focus-visible) { box-shadow: var(--ring); }
.choices.is-grid .choice { flex-direction: column; align-items: flex-start; min-height: 96px; }
.choices.is-grid .choice .choice-mark { position: absolute; top: 12px; right: 12px; }

/* Checkbox em linha */
.check {
  display: flex; align-items: flex-start; gap: var(--s-3);
  min-height: var(--touch-min);
  padding: var(--s-2) 0;
  cursor: pointer;
}
.check input {
  appearance: none;
  flex: none;
  width: 24px; height: 24px;
  margin: 0;
  border: 2px solid var(--mare-funda);
  border-radius: 7px;
  background: var(--alva) center/16px no-repeat;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.check input:checked {
  background-color: var(--azul);
  border-color: var(--azul);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
}
.check input:focus-visible { box-shadow: var(--ring); }
.check .check-text { display: flex; flex-direction: column; }
.check .check-text small { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--ink-soft); }

/* Interruptor */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 56px; }
.switch-row .switch-text { display: flex; flex-direction: column; }
.switch-row .switch-text small { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--ink-soft); }
.switch {
  appearance: none;
  position: relative;
  flex: none;
  width: 52px; height: 32px;
  margin: 0;
  border-radius: var(--r-pill);
  background: var(--mare-funda);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.switch::after {
  content: "";
  position: absolute;
  top: 4px; left: 4px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--alva);
  box-shadow: 0 1px 3px rgba(16, 28, 38, 0.3);
  transition: transform var(--dur-fast) var(--ease-out);
}
.switch:checked { background: var(--azul); }
.switch:checked::after { transform: translateX(20px); }
.switch:disabled { opacity: 0.55; cursor: not-allowed; }
.switch:focus-visible { box-shadow: var(--ring); border-radius: var(--r-pill); }

/* Controle de quantidade (- valor +) */
.stepper { display: flex; align-items: center; gap: var(--s-3); }
.stepper .stepper-value { flex: 1; text-align: center; font-size: var(--fs-title); font-weight: 600; font-variant-numeric: tabular-nums; }
.stepper .icon-btn { border: 1.5px solid var(--azul); color: var(--azul); }
.stepper .icon-btn:disabled { border-color: var(--nevoa); color: var(--mare); cursor: not-allowed; }

/* Faixa (range) */
.range { width: 100%; accent-color: var(--azul); height: 32px; cursor: pointer; }
.range-scale { display: flex; justify-content: space-between; font-size: var(--fs-label); color: var(--ink-soft); }

/* ============ Chips e segmentos ============ */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chips.is-scroll { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter); scrollbar-width: none; }
.chips.is-scroll::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: var(--touch-min);
  padding: 0 var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--alva);
  color: var(--porto);
  font-size: var(--fs-label);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.chip:hover { background: var(--bruma); }
.chip .ic { width: 16px; height: 16px; stroke-width: 2.5; }
.chip[aria-pressed="true"], .chip[aria-selected="true"], .chip[aria-checked="true"] { background: var(--ouro); border-color: var(--ouro); color: var(--noite); font-weight: 600; }
.chip .chip-count { font-variant-numeric: tabular-nums; opacity: 0.85; }

/* Abas segmentadas */
.segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--nevoa);
}
.segmented .seg {
  min-height: 40px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--porto);
  font-size: var(--fs-label);
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.segmented .seg[aria-selected="true"] { background: var(--ouro); color: var(--noite); box-shadow: 0 2px 6px rgba(198, 147, 46, 0.3); }

/* ============ Tags e selos ============ */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  min-height: 28px;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: var(--bruma);
  color: var(--porto);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 600;
  white-space: nowrap;
}
.tag .ic { width: 16px; height: 16px; stroke-width: 2.2; }
.tag-agua { background: var(--agua-veu); color: var(--agua-tinta); }
.tag-ouro { background: var(--ouro-veu); color: var(--ouro-tinta); }
.tag-azul { background: var(--azul-veu); color: var(--azul); }
.tag-sucesso { background: var(--sucesso-veu); color: var(--sucesso-tinta); }
.tag-info { background: var(--info-veu); color: var(--info-tinta); }
.tag-atencao { background: var(--atencao-veu); color: var(--atencao-tinta); }
.tag-erro { background: var(--erro-veu); color: var(--erro-tinta); }
.tag-destaque { background: var(--destaque-veu); color: var(--destaque-tinta); }
.tag-neutro { background: var(--nevoa); color: var(--porto); }
.tag-outline { background: var(--alva); border: 1px solid var(--line-strong); color: var(--porto); }

/* ============ Avatar e marca da empresa ============ */
.avatar {
  --av: 48px;
  display: grid; place-items: center; flex: none;
  width: var(--av); height: var(--av);
  border-radius: 50%;
  background: var(--agua-veu);
  color: var(--azul);
  font-weight: 700;
  font-size: calc(var(--av) * 0.36);
  letter-spacing: 0.01em;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { --av: 40px; }
.avatar-lg { --av: 64px; }
.avatar-xl { --av: 96px; }

.brand {
  --br: 48px;
  display: grid; place-items: center; flex: none;
  width: var(--br); height: var(--br);
  border-radius: var(--r-md);
  background: var(--brand-bg, var(--azul));
  color: var(--brand-fg, var(--alva));
  font-weight: 800;
  font-size: calc(var(--br) * 0.3);
  line-height: 1;
  text-align: center;
  letter-spacing: -0.02em;
}
.brand-sm { --br: 40px; border-radius: var(--r-sm); }
.brand-lg { --br: 64px; border-radius: var(--r-lg); }
.brand.is-confidential { background: var(--nevoa); color: var(--porto); }

/* ============ Cartões ============ */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-whisper);
  color: var(--ink);
  text-align: left;
}
.card-tight { gap: var(--s-2); }
.card-roomy { padding: var(--s-6); gap: var(--s-4); }
.card-sunken { background: var(--bruma); box-shadow: none; }

/* Cartão tocável inteiro: link ou botão que estica sobre o cartão */
a.card, button.card { text-decoration: none; cursor: pointer; width: 100%; font: inherit; transition: border-color var(--dur-fast) var(--ease-out); }
a.card:hover, button.card:hover { border-color: var(--mare); }
.card:focus-visible { box-shadow: var(--ring); border-radius: var(--r-xl); }
.card .card-chevron { position: absolute; right: var(--s-4); top: 50%; transform: translateY(-50%); color: var(--costa); }
.card-title { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 600; color: var(--noite); }
.card-sub { color: var(--ink-soft); }
.card-divider { height: 1px; background: var(--line); margin: var(--s-1) 0; border: 0; }

/* Bloco de destaque (bento largo) */
.feature {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-5) var(--s-5);
  border-radius: var(--r-xl);
  background: var(--azul);
  color: var(--alva);
}
.feature .feature-kicker { font-size: var(--fs-label); font-weight: 600; color: var(--agua-veu); }
.feature .feature-title { font-size: var(--fs-title-lg); line-height: var(--lh-title-lg); font-weight: 700; letter-spacing: -0.01em; }
.feature .feature-sub { color: var(--nevoa); }
.feature .meta { color: var(--nevoa); }
.feature .feature-chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.12);
  font-weight: 500;
}
.feature-ouro { background: var(--ouro); color: var(--noite); }
.feature-ouro .feature-kicker, .feature-ouro .feature-sub, .feature-ouro .meta { color: var(--noite); }
.feature-ouro .feature-chip { background: rgba(16, 28, 38, 0.10); }
.feature-agua { background: var(--agua-veu); color: var(--noite); }
.feature-agua .feature-kicker { color: var(--agua-tinta); }
.feature-agua .feature-title { color: var(--azul); }
.feature-agua .feature-sub, .feature-agua .meta { color: var(--porto); }

/* Bloco pequeno de indicador (bento) */
.tile {
  display: flex; flex-direction: column; gap: var(--s-2);
  min-height: 112px;
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-whisper);
  text-decoration: none;
  color: var(--ink);
  text-align: left;
  font: inherit;
  width: 100%;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.tile:hover { border-color: var(--mare); }
.tile-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--ouro-veu); color: var(--ouro-tinta); }
.tile-icon.is-azul { background: var(--azul-veu); color: var(--azul); }
.tile .tile-value { font-size: var(--fs-headline); line-height: 1; font-weight: 700; color: var(--azul); font-variant-numeric: tabular-nums; }
.tile .tile-label { font-weight: 600; color: var(--noite); }
.tile .tile-sub { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--ink-soft); }
.tile-icon.is-agua { background: var(--agua-veu); color: var(--agua-tinta); }
.tile-icon.is-ouro { background: var(--ouro-veu); color: var(--ouro-tinta); }
.tile-icon.is-destaque { background: var(--destaque-veu); color: var(--destaque-tinta); }
.tile-icon.is-sucesso { background: var(--sucesso-veu); color: var(--sucesso-tinta); }

/* Linha de metadados (ícone + texto) */
.meta { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); }
.meta .ic { width: 18px; height: 18px; }
.metas { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }

/* Fatos da vaga (bento interno do detalhe) */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.fact {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s-3);
  border-radius: var(--r-lg);
  background: var(--bruma);
}
.fact .ic { color: var(--azul); margin-bottom: var(--s-1); }
.fact .fact-label { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--ink-soft); }
.fact .fact-value { font-weight: 600; color: var(--noite); }
.fact .fact-sub { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--ink-soft); }

/* ============ Lista ============ */
.list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-whisper); overflow: hidden; }
.list-row {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 64px;
  padding: var(--s-3) var(--s-4);
  border: 0;
  background: transparent;
  text-align: left;
  text-decoration: none;
  color: var(--ink);
  width: 100%;
  font: inherit;
}
.list-row + .list-row { border-top: 1px solid var(--line); }
button.list-row, a.list-row { cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out); }
button.list-row:hover, a.list-row:hover { background: var(--bruma); }
.list-row:focus-visible { box-shadow: inset 0 0 0 3px var(--focus); border-radius: 0; }
.list-row .lr-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--ouro-veu); color: var(--ouro-tinta); }
.list-row .lr-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.list-row .lr-title { font-weight: 600; color: var(--noite); }
.list-row .lr-sub { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--ink-soft); }
.list-row .lr-end { display: flex; align-items: center; gap: var(--s-2); color: var(--costa); }
.list-row.is-unread .lr-title::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--ouro); vertical-align: middle; }

/* ============ Avisos ============ */
.notice {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-lg);
  background: var(--info-veu);
  color: var(--noite);
}
.notice .notice-icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--info-tinta); color: var(--alva); }
.notice .notice-icon .ic { width: 18px; height: 18px; stroke-width: 2.2; }
.notice .notice-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notice .notice-title { font-weight: 600; }
.notice .notice-body { color: var(--porto); font-size: var(--fs-label); line-height: var(--lh-label); }
.notice-prazo { background: var(--ouro-veu); }
.notice-prazo .notice-icon { background: var(--ouro); color: var(--noite); }
.notice-sucesso { background: var(--sucesso-veu); }
.notice-sucesso .notice-icon { background: var(--sucesso-tinta); }
.notice-atencao { background: var(--atencao-veu); }
.notice-atencao .notice-icon { background: var(--atencao-tinta); }
.notice-erro { background: var(--erro-veu); }
.notice-erro .notice-icon { background: var(--erro-tinta); }
.notice-neutro { background: var(--nevoa); }
.notice-neutro .notice-icon { background: var(--porto); }
.notice-agua { background: var(--agua-veu); }
.notice-agua .notice-icon { background: var(--agua-tinta); }

/* Faixa de demonstração (simulações identificadas) */
.demo-note {
  display: flex; gap: var(--s-2); align-items: flex-start;
  padding: var(--s-3);
  border: 1.5px dashed var(--destaque-tinta);
  border-radius: var(--r-md);
  background: var(--destaque-veu);
  color: var(--destaque-tinta);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 500;
}
.demo-note strong { font-weight: 700; }
.demo-note .ic { width: 18px; height: 18px; margin-top: 1px; }
.demo-code { font-size: var(--fs-title); font-weight: 700; letter-spacing: 0.2em; font-variant-numeric: tabular-nums; color: var(--noite); }

/* ============ Compatibilidade (componente assinatura) ============ */
.compat {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-xl);
  background: var(--agua-veu);
  color: var(--noite);
}
.compat-head { display: flex; gap: var(--s-3); align-items: center; }
.compat-head .compat-badge { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--agua-tinta); color: var(--alva); }
.compat-head h2, .compat-head h3 { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 700; color: var(--azul); }
.reasons { display: flex; flex-direction: column; gap: var(--s-2); }
.reason { display: flex; gap: var(--s-2); align-items: flex-start; }
.reason .reason-mark { display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--agua-tinta); color: var(--alva); }
.reason .reason-mark .ic { width: 14px; height: 14px; stroke-width: 3; }
.compat .compat-foot { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--porto); }

/* Medidor de compatibilidade */
.meter { display: flex; align-items: center; gap: var(--s-3); }
.meter-track { flex: 1; height: 8px; border-radius: var(--r-pill); background: var(--nevoa); overflow: hidden; }
.meter-fill { height: 100%; border-radius: inherit; background: var(--agua-tinta); }
.meter-value { font-weight: 700; color: var(--agua-tinta); font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }

/* ============ Progresso ============ */
.progress { display: flex; flex-direction: column; gap: 6px; }
.progress-head { display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--fs-label); line-height: var(--lh-label); }
.progress-head strong { color: var(--noite); }
.progress-head span { color: var(--ink-soft); }
.progress-track { height: 8px; border-radius: var(--r-pill); background: var(--nevoa); overflow: hidden; }
.progress-fill { height: 100%; border-radius: inherit; background: var(--ouro); transition: width var(--dur-base) var(--ease-out); }
.feature .progress-track { background: rgba(255, 255, 255, 0.18); }
.feature .progress-head strong, .feature .progress-head span { color: var(--alva); }

/* Etapas numeradas (agendamento: Data · Horário · Confirmação) */
.steps { display: flex; align-items: flex-start; }
.steps .step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; text-align: center; font-size: var(--fs-label); line-height: var(--lh-label); color: var(--ink-soft); }
.steps .step::before {
  content: ""; position: absolute; top: 15px; left: calc(-50% + 20px); right: calc(50% + 20px);
  height: 2px; background: var(--nevoa);
}
.steps .step:first-child::before { display: none; }
.steps .step-dot {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--mare-funda);
  background: var(--alva);
  color: var(--porto);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.steps .step-dot .ic { width: 16px; height: 16px; stroke-width: 3; }
.steps .step.is-done .step-dot { background: var(--agua-tinta); border-color: var(--agua-tinta); color: var(--alva); }
.steps .step.is-done::before, .steps .step.is-current::before { background: var(--agua-tinta); }
.steps .step.is-current .step-dot { background: var(--ouro); border-color: var(--ouro); color: var(--noite); }
.steps .step.is-current { color: var(--noite); font-weight: 600; }

/* Linha do tempo (vertical) */
.timeline { display: flex; flex-direction: column; }
.tl-item { display: grid; grid-template-columns: 32px 1fr; gap: var(--s-3); position: relative; padding-bottom: var(--s-5); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content: ""; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--nevoa); }
.tl-item:last-child::before { display: none; }
.tl-dot { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--mare-funda); background: var(--alva); color: var(--costa-tinta); }
.tl-dot .ic { width: 16px; height: 16px; stroke-width: 2.6; }
.tl-item.is-done .tl-dot { background: var(--agua-tinta); border-color: var(--agua-tinta); color: var(--alva); }
.tl-item.is-done::before { background: var(--agua-tinta); }
.tl-item.is-current .tl-dot { background: var(--ouro); border-color: var(--ouro); color: var(--noite); }
.tl-item.is-error .tl-dot { background: var(--erro-veu); border-color: var(--erro-tinta); color: var(--erro-tinta); }
.tl-body { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.tl-title { font-weight: 600; color: var(--noite); }
.tl-item.is-todo .tl-title { color: var(--ink-soft); font-weight: 500; }
.tl-sub { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--ink-soft); }
.tl-body .btn { align-self: flex-start; margin-top: var(--s-2); }

/* ============ Calendário e horários ============ */
.date-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(64px, 1fr); gap: var(--s-2); overflow-x: auto; padding: 2px; scrollbar-width: none; }
.date-strip::-webkit-scrollbar { display: none; }
.date-cell {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: 72px;
  padding: var(--s-2) var(--s-1);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--alva);
  color: var(--noite);
}
.date-cell .dc-week { font-size: var(--fs-label); font-weight: 600; color: var(--ink-soft); text-transform: capitalize; }
.date-cell .dc-day { font-size: var(--fs-title); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.date-cell .dc-month { font-size: var(--fs-label); color: var(--ink-soft); text-transform: lowercase; }
.date-cell[aria-pressed="true"] { background: var(--ouro); border-color: var(--ouro); }
.date-cell[aria-pressed="true"] .dc-week, .date-cell[aria-pressed="true"] .dc-month { color: var(--noite); }
.date-cell:disabled { background: var(--bruma); color: var(--mare-funda); cursor: not-allowed; }
.date-cell:disabled .dc-week, .date-cell:disabled .dc-month { color: var(--mare-funda); }

.slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.slot {
  min-height: 52px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--alva);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--noite);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1.2;
}
.slot small { font-size: 0.75rem; font-weight: 500; color: var(--ink-soft); }
.slot:hover:not(:disabled) { border-color: var(--azul); }
.slot[aria-pressed="true"] { background: var(--ouro); border-color: var(--ouro); }
.slot[aria-pressed="true"] small { color: var(--noite); }
.slot:disabled { background: var(--bruma); border-style: dashed; color: var(--mare-funda); cursor: not-allowed; text-decoration: line-through; }

/* Data em destaque (cartão de entrevista) */
.date-badge {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 64px; min-height: 72px; flex: none;
  border-radius: var(--r-lg);
  background: var(--azul-veu);
  color: var(--azul);
  line-height: 1.15;
}
.date-badge .db-week { font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.date-badge .db-day { font-size: var(--fs-title-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
.date-badge .db-month { font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; }

/* ============ Mapa simulado ============ */
.map-sim {
  position: relative;
  min-height: 140px;
  border-radius: var(--r-lg);
  background-color: #E8EEF1;
  background-image:
    linear-gradient(90deg, transparent 47%, #FFFFFF 47%, #FFFFFF 53%, transparent 53%),
    linear-gradient(0deg, transparent 46%, #FFFFFF 46%, #FFFFFF 52%, transparent 52%),
    linear-gradient(35deg, transparent 62%, #FFFFFF 62%, #FFFFFF 66%, transparent 66%);
  background-size: 120px 120px, 96px 96px, 180px 180px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.map-sim::after {
  content: ""; position: absolute; right: 18%; bottom: -20%;
  width: 46%; height: 70%;
  border-radius: 40%;
  background: #D6EDDA;
}
.map-sim .map-pin { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -100%); z-index: 1; color: var(--azul); }
.map-sim .map-pin .ic { width: 36px; height: 36px; fill: var(--azul); stroke: var(--alva); stroke-width: 1.5; }
.map-sim .map-label {
  position: absolute; left: var(--s-3); bottom: var(--s-3); z-index: 1;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--alva);
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--porto);
  box-shadow: var(--shadow-whisper);
}

/* ============ QR Code simulado ============ */
.qr {
  display: grid;
  grid-template-columns: repeat(21, 1fr);
  width: 220px;
  aspect-ratio: 1;
  padding: 14px;
  border-radius: var(--r-lg);
  background: var(--alva);
  border: 1px solid var(--line);
  gap: 0;
  margin-inline: auto;
}
.qr i { display: block; background: transparent; }
.qr i.on { background: var(--noite); }

.scanner {
  position: relative;
  aspect-ratio: 1;
  max-width: 280px;
  width: 100%;
  margin-inline: auto;
  border-radius: var(--r-xl);
  background: var(--porto);
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--alva);
  text-align: center;
}
.scanner .scan-frame { width: 64%; aspect-ratio: 1; border: 3px solid var(--ouro); border-radius: var(--r-lg); }
.scanner .scan-line { position: absolute; left: 18%; right: 18%; height: 2px; background: var(--ouro); top: 30%; animation: scan 2.2s var(--ease-out) infinite alternate; }

/* ============ Estados vazios e carregamento ============ */
.empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--s-3);
  padding: var(--s-8) var(--s-4);
}
.empty-art { display: grid; flex: none; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: var(--azul-veu); color: var(--azul); }
.empty-art .ic { width: 40px; height: 40px; stroke-width: 1.6; }
.empty h2, .empty h3 { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 600; color: var(--noite); }
.empty p { color: var(--ink-soft); max-width: 30ch; }

.skeleton { position: relative; overflow: hidden; background: var(--nevoa); border-radius: var(--r-md); }
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.4s infinite;
}
.sk-line { height: 14px; }
.sk-title { height: 22px; width: 60%; }
.sk-block { height: 120px; border-radius: var(--r-xl); }

/* ============ Barra de abas: item ============ */
.tab-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 56px;
  border-radius: var(--r-lg);
  color: var(--costa-tinta);
  text-decoration: none;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 500;
  position: relative;
}
.tab-item .tab-icon { display: grid; place-items: center; width: 52px; height: 30px; border-radius: var(--r-pill); transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.tab-item .tab-icon .ic { width: 22px; height: 22px; }
.tab-item:hover .tab-icon { background: var(--bruma); }
.tab-item[aria-current="page"] { color: var(--ouro-tinta); font-weight: 700; }
.tab-item[aria-current="page"] .tab-icon { background: var(--ouro-veu); color: var(--ouro-escuro); }
.tab-item[aria-current="page"] .tab-icon .ic { stroke-width: 2.3; }
.tab-item .tab-badge {
  position: absolute; top: 2px; left: calc(50% + 8px);
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--erro-tinta);
  color: var(--alva);
  font-size: 0.75rem; font-weight: 700; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--alva);
}

/* ============ Folha inferior ============ */
.sheet-layer { position: absolute; inset: 0; z-index: var(--z-sheet-backdrop); display: flex; flex-direction: column; justify-content: flex-end; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(16, 28, 38, 0.40); animation: fade-in var(--dur-base) var(--ease-out); }
.sheet {
  position: relative;
  z-index: var(--z-sheet);
  display: flex; flex-direction: column;
  max-height: 88%;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--alva);
  box-shadow: var(--shadow-float);
  animation: sheet-in var(--dur-base) var(--ease-out-expo);
}
.sheet-grip { width: 40px; height: 4px; margin: 10px auto 2px; border-radius: var(--r-pill); background: var(--mare); }
.sheet-head { display: flex; align-items: flex-start; gap: var(--s-2); padding: var(--s-2) var(--s-2) 0 var(--s-5); }
.sheet-head h2 { flex: 1; padding-top: 10px; font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 700; color: var(--azul); }
.sheet-body { overflow-y: auto; padding: var(--s-3) var(--s-5) var(--s-4); display: flex; flex-direction: column; gap: var(--s-4); }
.sheet-foot { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3) var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.sheet-layer.is-closing .sheet { animation: sheet-out 180ms var(--ease-out) forwards; }
.sheet-layer.is-closing .sheet-backdrop { animation: fade-out 180ms var(--ease-out) forwards; }

/* ============ Toast ============ */
.toast-root {
  position: absolute;
  left: var(--s-4); right: var(--s-4);
  bottom: calc(var(--tabbar-h) + var(--s-4));
  z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--s-2);
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-lg);
  background: var(--noite);
  color: var(--alva);
  box-shadow: var(--shadow-float);
  font-weight: 500;
  pointer-events: none; /* não bloqueia o botão que estiver embaixo */
  animation: toast-in var(--dur-base) var(--ease-out-expo);
}
.toast .ic { color: var(--agua); }
.toast.is-error .ic { color: #FCA5A5; }
.toast.is-leaving { animation: fade-out 200ms var(--ease-out) forwards; }

/* ============ Seções de dados (definição) ============ */
.dl { display: flex; flex-direction: column; }
.dl-row { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.dl-row:last-child { border-bottom: 0; }
.dl-row dt { color: var(--ink-soft); }
.dl-row dd { font-weight: 600; text-align: right; color: var(--noite); }

/* ============ Momento "Deu match!" ============ */
.match {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--s-5);
  padding: var(--s-4) var(--gutter) var(--s-6);
  color: var(--alva);
}
.match-art { position: relative; width: 260px; height: 168px; margin-top: var(--s-2); }
.match-card {
  position: absolute; top: 12px;
  width: 128px; height: 140px;
  border-radius: var(--r-xl);
  border: 4px solid var(--alva);
  display: grid; place-items: center;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}
.match-card.is-person { left: 8px; background: var(--agua-veu); transform: rotate(-8deg); }
.match-card.is-company { right: 8px; background: var(--alva); transform: rotate(8deg); }
.match-card .avatar, .match-card .brand { --av: 84px; --br: 84px; }
.match-link {
  position: absolute; left: 50%; top: 58px; transform: translateX(-50%);
  display: grid; place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--ouro);
  color: var(--noite);
  box-shadow: 0 0 0 6px var(--azul);
  z-index: 2;
}
.match-link .ic { width: 30px; height: 30px; stroke-width: 2.4; }
.match-confetti { position: absolute; inset: -24px -12px auto; height: 80px; pointer-events: none; }
.match-confetti i { position: absolute; width: 6px; height: 16px; border-radius: 3px; background: var(--ouro); }
.match-confetti i:nth-child(3n) { background: var(--agua); }
.match-confetti i:nth-child(4n) { background: var(--alva); opacity: 0.7; }
.match h1 { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: 800; letter-spacing: -0.02em; }
.match .match-lede { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 500; color: var(--nevoa); max-width: 26ch; }
.match-panel {
  width: 100%;
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-xl);
  background: var(--alva);
  color: var(--noite);
  text-align: left;
}
.match-note { font-size: var(--fs-label); line-height: var(--lh-label); color: var(--nevoa); max-width: 34ch; }

/* ============ Diversos ============ */
.divider { height: 1px; background: var(--line); border: 0; margin: var(--s-2) 0; }
.kbd-code { font-variant-numeric: tabular-nums; letter-spacing: 0.25em; font-size: var(--fs-headline); font-weight: 800; color: var(--azul); text-align: center; }
.pill-count {
  display: inline-grid; place-items: center;
  min-width: 24px; height: 24px; padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--azul); color: var(--alva);
  font-size: var(--fs-label); font-weight: 700;
}
.rating { display: flex; gap: var(--s-2); }
.rating .rate {
  width: var(--touch); height: var(--touch);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--alva);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rating .rate[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: var(--alva); }
.price { font-size: var(--fs-headline); font-weight: 800; color: var(--azul); font-variant-numeric: tabular-nums; }

.meta-deadline { color: var(--ouro-tinta); font-weight: 600; }
.meta-deadline .ic { color: var(--ouro-tinta); }
.demo-note .link-btn { min-height: 36px; }
.demo-note .row-wrap { gap: 0 var(--s-4); }

/* ============ Fotografia e cartões com imagem (direção aprovada em ouro) ============ */
.cover { position: relative; border-radius: var(--r-lg); overflow: visible; background: var(--nevoa); }
.cover img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.cover-md { aspect-ratio: 16 / 7; }
.cover-lg { aspect-ratio: 16 / 9; border-radius: var(--r-xl); }
.cover-brand { position: absolute; left: var(--s-3); bottom: calc(var(--s-6) * -1); border-radius: 50%; padding: 3px; background: var(--alva); box-shadow: 0 4px 12px rgba(16, 28, 38, 0.15); }
.cover-brand .brand { border-radius: 50%; --br: 52px; }
.cover-lg .cover-brand { bottom: calc(var(--s-8) * -1); }
.cover-lg .cover-brand .brand { --br: 64px; }
.cover-tag { position: absolute; top: var(--s-3); right: var(--s-3); padding: 4px 12px; border-radius: var(--r-pill); background: var(--agua-veu); color: var(--agua-tinta); font-size: var(--fs-label); font-weight: 700; }

.pills { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pill { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--s-3); border-radius: var(--r-pill); background: var(--ouro-veu); color: var(--noite); font-size: var(--fs-label); font-weight: 600; font-variant-numeric: tabular-nums; }
.pill .ic { width: 16px; height: 16px; color: var(--ouro-tinta); }

.invite-card { display: flex; flex-direction: column; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-whisper); padding: var(--s-3); gap: var(--s-2); }
.invite-card-body { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-6) var(--s-2) var(--s-2); }
.invite-card-title { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 700; color: var(--azul); }
.invite-card .btn-row { margin-top: var(--s-2); }

.invite-row { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-whisper); color: var(--ink); text-decoration: none; transition: transform var(--dur-fast) var(--ease-out); }
.invite-row:active { transform: scale(0.99); }
.invite-row:focus-visible { box-shadow: var(--ring); border-radius: var(--r-xl); }
.invite-row-brand .brand { border-radius: 50%; }
.invite-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.invite-row-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2); }
.invite-row-title { font-weight: 700; color: var(--noite); }
.invite-row-chev { align-self: center; color: var(--costa); }

.mini-steps { display: flex; align-items: flex-start; }
.mini-steps .ms { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 0.8125rem; line-height: 1.2; color: var(--ink-soft); text-align: center; }
.mini-steps .ms::before { content: ""; position: absolute; top: 11px; left: calc(-50% + 14px); right: calc(50% + 14px); height: 2px; background: var(--nevoa); }
.mini-steps .ms:first-child::before { display: none; }
.mini-steps .ms.is-done::before, .mini-steps .ms.is-current::before { background: var(--ouro); }
.mini-steps .ms-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--mare); background: var(--alva); }
.mini-steps .ms-dot .ic { width: 14px; height: 14px; stroke-width: 3; }
.mini-steps .ms.is-done .ms-dot { background: var(--ouro); border-color: var(--ouro); color: var(--noite); }
.mini-steps .ms.is-current .ms-dot { border-color: var(--ouro); box-shadow: 0 0 0 4px var(--ouro-veu); }
.mini-steps .ms.is-current { color: var(--noite); font-weight: 600; }

.checklist { display: flex; flex-direction: column; gap: var(--s-2); }
.checklist li { display: flex; gap: var(--s-2); align-items: flex-start; }
.checklist .ic { width: 20px; height: 20px; color: var(--sucesso-tinta); stroke-width: 2.6; margin-top: 2px; }

/* Ícone de ação em cima de foto */
.photo-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.94); color: var(--noite); box-shadow: 0 2px 8px rgba(16, 28, 38, 0.18); }
.photo-btn:hover { background: var(--alva); }
.photo-btn[aria-pressed="true"] { color: var(--erro-tinta); }
.photo-btn[aria-pressed="true"] .ic { fill: currentColor; }
.invite-card .btn { padding-inline: var(--s-3); white-space: nowrap; }
.btn-row > .btn { white-space: nowrap; padding-inline: var(--s-4); }
.btn[aria-disabled="true"], .btn:disabled { box-shadow: none; }
#device:has(.sheet-layer) .toast-root { bottom: auto; top: calc(var(--s-6) + 44px); }