/* ------------[Файл «interests.css»]------------ // Содержит исходный код модуля «оформление интерфейса» и его связанные обработчики. Модуль: «карта исходного кода». Часть 1/1 */
/* ------------[Интересы и совпадение профиля]------------ // Оформляет связанный блок интерфейса. Модуль: «оформление интерфейса». Часть 1/1 */
.profile-interests-card,
.interest-match-card {
  color: var(--adaptive-text, #0f172a);
  background: var(--adaptive-card-tint, var(--adaptive-surface, #fff));
  border: 1px solid var(--adaptive-border, #e2e8f0);
  box-shadow: 0 18px 45px -32px var(--adaptive-glow, rgba(37, 99, 235, .28));
}
.profile-interests-card { margin-top: 1rem; padding: 1rem; border-radius: 1rem; }
.profile-interests-heading,
.interest-match-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.profile-interests-heading { margin-bottom: .9rem; }
.profile-interests-heading h3,
.interest-match-heading h3 { margin: .15rem 0 0; color: var(--adaptive-text-strong, #0f172a); font-weight: 900; letter-spacing: -.02em; }
.profile-interests-heading h3 { font-size: .95rem; }
.profile-interests-kicker,
.interest-match-kicker { display: block; color: var(--adaptive-muted, #64748b); font-size: .56rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.profile-interests-total { display: grid; min-width: 2rem; height: 2rem; place-items: center; border-radius: .7rem; color: var(--color-dynamic, #3b82f6); background: var(--adaptive-surface-2, #f1f5f9); font-size: .68rem; font-weight: 900; }
.profile-interests-heading-actions { display: flex; align-items: center; gap: .4rem; }
.profile-interests-edit { display: none; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--adaptive-border, #e2e8f0); border-radius: .7rem; color: var(--adaptive-muted, #64748b); background: var(--adaptive-surface-2, #f1f5f9); cursor: pointer; transition: transform .18s ease, color .18s ease, border-color .18s ease, background .18s ease; }
.cover-editor-open .profile-interests-edit { display: grid; color: var(--color-dynamic, #3b82f6); border-color: color-mix(in srgb, var(--color-dynamic, #3b82f6), transparent 35%); }
.profile-interests-edit svg { width: .92rem; height: .92rem; fill: currentColor; }
.profile-interests-edit:hover { color: var(--color-dynamic, #3b82f6); border-color: var(--color-dynamic, #3b82f6); transform: translateY(-1px); }
.profile-interests-edit.is-active { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--color-dynamic, #3b82f6), var(--color-dynamic-secondary, #6366f1)); }
.profile-interest-group + .profile-interest-group { margin-top: 1rem; padding-top: .95rem; border-top: 1px solid var(--adaptive-border, #e2e8f0); }
.profile-interest-group-title { display: flex; align-items: center; gap: .35rem; margin-bottom: .55rem; color: var(--adaptive-muted, #64748b); font-size: .61rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.profile-interest-group-title span { display: inline-grid; min-width: 1.25rem; height: 1.25rem; place-items: center; border-radius: 999px; background: var(--adaptive-surface-2, #f1f5f9); color: var(--color-dynamic, #3b82f6); font-size: .58rem; }
.profile-interest-tags { display: flex; flex-wrap: wrap; gap: .38rem; min-height: 1.7rem; }
.profile-interest-tag { display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; padding: .34rem .55rem; border: 1px solid var(--adaptive-border, #e2e8f0); border-radius: .65rem; color: var(--adaptive-text, #334155); background: var(--adaptive-surface-2, #f8fafc); font-size: .67rem; font-weight: 750; line-height: 1.2; overflow-wrap: anywhere; }
.profile-interest-tag > span:first-child { color: var(--color-dynamic, #3b82f6); font-weight: 1000; }
.profile-interest-tag--dislike > span:first-child { color: var(--color-dynamic-secondary, #6366f1); }
@supports (color: color-mix(in srgb, red, blue)) {
  .profile-interest-tag--like { border-color: color-mix(in srgb, var(--color-dynamic) 33%, var(--adaptive-border)); background: color-mix(in srgb, var(--color-dynamic) 10%, var(--adaptive-surface)); }
  .profile-interest-tag--dislike { border-color: color-mix(in srgb, var(--color-dynamic-secondary) 33%, var(--adaptive-border)); background: color-mix(in srgb, var(--color-dynamic-secondary) 9%, var(--adaptive-surface)); }
}
.profile-interest-remove { display: inline-grid; width: 1rem; height: 1rem; place-items: center; margin: -.12rem -.2rem -.12rem 0; border: 0; border-radius: 999px; color: var(--adaptive-muted, #64748b); background: transparent; cursor: pointer; font: inherit; line-height: 1; }
.profile-interest-remove:hover { color: white; background: var(--color-dynamic, #3b82f6); }
.profile-interests-empty { color: var(--adaptive-muted, #94a3b8); font-size: .68rem; font-style: italic; }
.profile-interest-add-row { display: grid; grid-template-columns: minmax(0, 1fr) 2rem; gap: .4rem; margin-top: .55rem; }
.profile-interest-input { min-width: 0; height: 2rem; padding: 0 .65rem; border: 1px solid var(--adaptive-border, #e2e8f0); border-radius: .65rem; outline: none; color: var(--adaptive-text, #0f172a); background: var(--adaptive-surface-2, #f8fafc); font-size: .65rem; }
.profile-interest-input:focus { border-color: var(--color-dynamic, #3b82f6); box-shadow: 0 0 0 3px var(--adaptive-glow, rgba(59, 130, 246, .14)); }
.profile-interest-input::placeholder { color: var(--adaptive-muted, #94a3b8); }
.profile-interest-add { display: grid; width: 2rem; height: 2rem; place-items: center; border: 0; border-radius: .65rem; color: white; background: linear-gradient(135deg, var(--color-dynamic, #3b82f6), var(--color-dynamic-secondary, #6366f1)); cursor: pointer; font-size: 1.05rem; font-weight: 800; }
.profile-interests-reminder,
.profile-interests-ready { display: flex; gap: .45rem; margin-top: 1rem; padding: .65rem .7rem; border-radius: .75rem; color: var(--adaptive-muted, #64748b); background: var(--adaptive-surface-2, #f1f5f9); font-size: .63rem; font-weight: 700; line-height: 1.45; }
.profile-interests-reminder > span:first-child,
.profile-interests-ready > span:first-child { flex: 0 0 auto; color: var(--color-dynamic, #3b82f6); }
.profile-interests-editor-actions { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: .45rem; margin-top: .65rem; }
.profile-interests-save,
.profile-interests-cancel { width: 100%; padding: .68rem .75rem; border: 1px solid var(--adaptive-border, #e2e8f0); border-radius: .75rem; color: var(--adaptive-muted, #64748b); background: var(--adaptive-surface-2, #f1f5f9); font-size: .62rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.profile-interests-cancel { cursor: pointer; }
.profile-interests-cancel:hover { color: var(--adaptive-text-strong, #0f172a); border-color: var(--adaptive-muted, #64748b); }
.profile-interests-save.is-dirty { border-color: transparent; color: #fff; background: linear-gradient(135deg, var(--color-dynamic, #3b82f6), var(--color-dynamic-secondary, #6366f1)); box-shadow: 0 10px 24px -14px var(--color-dynamic, #3b82f6); cursor: pointer; }
.profile-interests-save:disabled { cursor: default; opacity: .78; }
.profile-interests-error { padding: .75rem; color: var(--adaptive-muted, #64748b); text-align: center; font-size: .7rem; font-weight: 800; }
.interest-match-card { position: relative; overflow: hidden; padding: 1.15rem 1.25rem; border-radius: 1.15rem; }
.interest-match-card::before { position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--color-dynamic, #3b82f6), var(--color-dynamic-secondary, #6366f1)); content: ""; }
.interest-match-heading h3 { font-size: 1rem; }
.interest-match-percent,
.interest-match-badge { flex: 0 0 auto; color: var(--color-dynamic, #3b82f6); font-weight: 950; }
.interest-match-percent { font-size: 1.65rem; letter-spacing: -.05em; }
.interest-match-badge { padding: .42rem .65rem; border-radius: 999px; background: var(--adaptive-surface-2, #f1f5f9); font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; }
.interest-match-track { overflow: hidden; height: .48rem; margin-top: .9rem; border-radius: 999px; background: var(--adaptive-surface-2, #e2e8f0); }
.interest-match-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-dynamic, #3b82f6), var(--color-dynamic-secondary, #6366f1)); box-shadow: 0 0 18px var(--adaptive-glow, rgba(59, 130, 246, .3)); transition: width .65s ease; }
.interest-match-summary,
.interest-match-counts { display: flex; flex-wrap: wrap; gap: .45rem 1rem; margin-top: .75rem; color: var(--adaptive-muted, #64748b); font-size: .68rem; font-weight: 700; }
.interest-match-summary b { color: var(--adaptive-text-strong, #0f172a); }
.interest-match-card--empty p { margin: .72rem 0 0; color: var(--adaptive-muted, #64748b); font-size: .72rem; line-height: 1.5; }
.interest-match-counts span { padding: .25rem .45rem; border-radius: .45rem; background: var(--adaptive-surface-2, #f1f5f9); font-size: .6rem; }
@media (max-width: 640px) {
  .interest-match-card { padding: 1rem; }
  .interest-match-heading { align-items: center; }
  .interest-match-badge { max-width: 9rem; text-align: center; line-height: 1.3; }
  .interest-match-percent { font-size: 1.35rem; }
}