/* ---------- DETAIL MODAL ---------- */
  .detail-modal-overlay{
    position:fixed; inset:0; background:rgba(20,21,26,0.55); z-index:200;
    display:flex; align-items:flex-start; justify-content:center; padding:40px 20px; overflow-y:auto;
    backdrop-filter:blur(4px);
  }
  .detail-modal{
    position:relative; background:var(--surface); border-radius:var(--radius-lg); max-width:720px; width:100%;
    padding:32px; box-shadow:var(--shadow-soft); margin-bottom:40px;
  }
  .detail-modal-close{
    position:absolute; top:18px; right:18px; width:34px; height:34px; border-radius:50%; border:1.5px solid var(--border);
    background:var(--surface); font-size:14px; color:var(--ink-soft);
  }
  .detail-modal-close:hover{ border-color:var(--coral); color:var(--coral); }
  .dm-owner{ display:flex; align-items:center; gap:10px; margin-bottom:16px; cursor:pointer; }
  .dm-owner .mini-avatar{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:12px; overflow:hidden; }
  .dm-owner .mini-avatar img{ width:100%; height:100%; object-fit:cover; }
  .dm-owner-name{ font-weight:700; font-size:14px; }
  .dm-title{ font-family:'Unbounded',sans-serif; font-size:20px; margin-bottom:6px; padding-right:28px; }
  .dm-year{ font-size:12px; color:var(--ink-faint); font-family:'JetBrains Mono',monospace; margin-bottom:14px; }
  /* "Поделиться ссылкой" — единый вид что в модалках (проект/кейс/выставка/
     вакансия/стартап, сразу под dm-title), что в шапке профиля рядом с
     контактами (#p-share-wrap в index.html). См. shareLinkBtnHtml в
     js/likes-and-detail-modal.js. */
  .share-link-row{ margin: 16px 0 22px; }
  .share-link-btn{ padding:9px 18px; font-size:13px; }
  .share-link-btn.copied{ border-color:var(--ink); background:var(--ink); color:#fff; }
  .dm-desc{ font-size:14px; color:var(--ink-soft); line-height:1.6; margin-bottom:18px; }
  .dm-desc p, .dm-field p, .dm-field-html p{ margin:0 0 12px; }
  .dm-desc p:last-child, .dm-field p:last-child, .dm-field-html p:last-child{ margin-bottom:0; }
  /* Заголовки/цитата/списки внутри форматированных полей (см.
     js/rich-editor.js) — те же места показа, что и раньше принимали только
     жирный/курсив/подчёркнутый текст (.dm-desc в карточках, .dm-field в
     попапах, .dm-field-html у "О себе" в профиле, #p-about). */
  .dm-desc h2, .dm-field h2, .dm-field-html h2{ font-size:19px; font-weight:800; margin:18px 0 10px; color:var(--ink); }
  .dm-desc h3, .dm-field h3, .dm-field-html h3{ font-size:16px; font-weight:700; margin:16px 0 8px; color:var(--ink); }
  .dm-desc h2:first-child, .dm-field h2:first-child, .dm-field-html h2:first-child,
  .dm-desc h3:first-child, .dm-field h3:first-child, .dm-field-html h3:first-child{ margin-top:0; }
  .dm-desc blockquote, .dm-field blockquote, .dm-field-html blockquote{
    margin:0 0 12px; padding:4px 0 4px 14px; border-left:3px solid var(--border); color:var(--ink-soft); font-style:italic;
  }
  .dm-desc ul, .dm-field ul, .dm-field-html ul, .dm-desc ol, .dm-field ol, .dm-field-html ol{ margin:0 0 12px; padding-left:22px; }
  .dm-desc li, .dm-field li, .dm-field-html li{ margin-bottom:4px; }
  .dm-field-html{ font-size:14px; color:var(--ink-soft); line-height:1.6; }
  .ai-badge{
    display:inline-block; margin-left:8px; padding:2px 8px; border-radius:20px;
    background:var(--coral-tint); color:var(--coral); font-size:10.5px; font-weight:700;
    text-transform:uppercase; letter-spacing:.03em; vertical-align:middle;
  }
  /* Устаревшее правило — .dm-media-grid больше не рендерится (см.
     mediaGridHtml() в js/likes-and-detail-modal.js), заменено блоком
     .dm-media-block ниже: одна крупная картинка сверху + мелкая плитка
     превью снизу, вместо раскладки в 2 колонки. Оставлено как есть на
     случай, если что-то ещё ссылается на класс — вреда не несёт. */
  .dm-media-grid{ columns:2 220px; column-gap:12px; margin-bottom:18px; }
  .dm-media-grid img, .dm-media-grid video{ width:100%; height:auto; border-radius:12px; display:block; margin-bottom:12px; break-inside:avoid; }

  /* Объект-2 (ТЗ): поп-ап проекта/выставки — одна крупная картинка (по
     ширине контейнера поп-апа) + мелкая плитка превью под ней, клик по
     превью подменяет крупную картинку. Раньше все изображения шли в 2
     колонки одинакового мелкого размера — тут исправлено. */
  .dm-media-block{ margin-bottom:22px; }
  .dm-media-main{
    width:100%; border-radius:14px; overflow:hidden; background:var(--bg);
    display:flex; align-items:center; justify-content:center; margin-bottom:10px;
  }
  .dm-media-main-item{ width:100%; height:auto; display:block; }
  .dm-media-main-item.is-vertical{ width:auto; height:auto; max-height:60vh; max-width:100%; margin:0 auto; }
  .dm-media-main video.dm-media-main-item{ border-radius:14px; }
  .dm-media-link{
    display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
    background:var(--ink); color:#fff; border-radius:14px; padding:26px; text-align:center; font-size:13px;
  }
  .dm-media-thumbs{ display:flex; flex-wrap:wrap; gap:8px; }
  .dm-media-thumb{
    position:relative; width:64px; height:64px; border-radius:10px; overflow:hidden; cursor:pointer;
    background:var(--bg); border:2px solid transparent; flex-shrink:0; transition:border-color .15s ease, opacity .15s ease;
    opacity:.7;
  }
  .dm-media-thumb:hover{ opacity:1; }
  .dm-media-thumb.active{ border-color:var(--coral); opacity:1; }
  .dm-media-thumb img, .dm-media-thumb video{ width:100%; height:100%; object-fit:cover; display:block; }
  .dm-media-thumb .gl-icon{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:18px; color:#fff; background:var(--ink); }
  .dm-media-thumb-play{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:14px; background:rgba(20,21,26,0.25); pointer-events:none;
  }

  /* Побольше "воздуха" вокруг блока и заголовка поля (в т.ч. "Команда") —
     раньше поля попапа шли плотно друг за другом (ТЗ Объект-2: "иначе
     будет казаться перегруженным"). */
  .dm-field{ margin-bottom:28px; }
  .dm-field b{ display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); margin-bottom:12px; }
  /* Блок "Команда" в попапе: раньше все участники шли в ряд как теги, а
     внутри каждого имя и роль слипались в одну строку одним шрифтом —
     нечитаемо (жалоба "Улучшение проекты"). Теперь это столбец карточек,
     в каждой — имя жирным на своей строке и роль отдельной строкой мельче
     и светлее, с явным отступом между участниками. Отступ между карточками
     дополнительно увеличен для меньшей плотности (ТЗ Объект-2). */
  .dm-team{ display:flex; flex-direction:column; gap:14px; }
  .team-member{
    background:var(--bg); border:1px solid var(--border); border-radius:12px;
    padding:10px 14px; display:flex; flex-direction:column; gap:3px;
  }
  .team-member.tag-clickable{ cursor:pointer; transition:all .15s ease; }
  .team-member.tag-clickable:hover{ border-color:var(--coral); background:var(--coral-tint); }
  .team-member-name{ font-size:14px; font-weight:700; color:var(--ink); display:flex; align-items:center; gap:8px; }
  .team-member-role{ font-size:12.5px; font-weight:500; color:var(--ink-soft); line-height:1.4; }
  .team-member-badge{
    font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
    color:var(--coral); background:var(--coral-tint); border-radius:999px; padding:2px 8px;
  }
  /* Отступ сверху, чтобы теги проекта не липли к карточкам команды над ними. */
  .dm-field + .tiny-tags-row{ margin-top:10px; margin-bottom:26px; }
  .dm-album-field .gallery-album-row{ margin-top:2px; }
  .dm-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:22px; padding-top:18px; border-top:1px solid var(--border); }
  .like-btn{
    display:inline-flex; align-items:center; gap:6px; border:1.5px solid var(--border); background:var(--surface);
    border-radius:999px; padding:8px 16px; font-size:13px; font-weight:700; color:var(--ink-soft); transition:all .15s ease;
  }
  .like-btn svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; }
  .like-btn.liked{ background:var(--coral-tint); border-color:var(--coral); color:var(--coral); }
  .like-btn.liked svg{ fill:var(--coral); stroke:var(--coral); }
  .project-card{ cursor:pointer; transition:transform .15s ease; }
  .project-card:hover{ transform:translateY(-3px); }
  .card-like-row{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:10px; }
  /* Карточка стартапа (поиск кофаундера): статус ("Ищет кофаундера" /
     "Кофаундер найден") и кнопка/отметка отклика на одной строке в узкой
     карточке слипаются и переносятся на две строки — разносим их по
     отдельным строкам друг под другом и запрещаем перенос текста внутри
     самого бейджа/кнопки. Оба грида — статические id из index.html. */
  #startups-catalog-grid .card-like-row,
  #startups-found-grid .card-like-row{
    flex-direction:column; align-items:flex-start; gap:8px;
  }
  #startups-catalog-grid .card-like-row .skill-chip,
  #startups-catalog-grid .card-like-row .btn,
  #startups-found-grid .card-like-row .skill-chip,
  #startups-found-grid .card-like-row .btn{
    white-space:nowrap;
  }
  .case-card .tiny-tags-row{ margin-bottom:0; }

  /* Список уведомлений (колокольчик рядом с "Избранное", ТЗ 2) — рендерится
     внутри общего #detail-modal-content, см. js/notifications.js. */
  .notif-list-item{
    display:flex; flex-direction:column; gap:4px; padding:14px 4px; border-bottom:1px solid var(--border);
  }
  .notif-list-item:last-child{ border-bottom:none; }
  .notif-list-item.unread{
    background:var(--coral-tint); border-radius:12px; padding:14px 12px;
    /* Пункт "непрочитанные сливаются визуально": раньше здесь стояло
       margin:0 -12px (компенсация паддинга родителя, чтобы подложка была
       на всю ширину) и не было отступа между соседними пунктами —
       из-за border-bottom:none снизу (не задавался явно, но подложка
       вплотную примыкала к следующей) несколько непрочитанных подряд
       визуально сливались в один блок без какой-либо границы между ними.
       margin:6px 0 вместо этого просто отделяет каждую непрочитанную
       карточку от соседей сверху и снизу — сама скруглённая цветная
       подложка теперь и есть визуальная граница. */
    margin:6px 0;
  }
  .notif-list-item-msg{ font-size:14px; color:var(--ink); line-height:1.4; }
  .notif-list-item-time{ font-size:11.5px; color:var(--ink-faint); }
  .notif-list-empty{ color:var(--ink-faint); font-size:14px; padding:20px 4px; text-align:center; }

  /* Запрос на добавление соавтором (ТЗ 7) — блок под текстом уведомления. */
  .notif-coauthor-request{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
  .notif-coauthor-role-input, .notif-coauthor-responsibility-input{
    width:100%; padding:8px 12px; border:1px solid var(--border); border-radius:10px; font-size:13px; font-family:inherit;
  }
  .notif-coauthor-request-btns{ display:flex; gap:8px; }
  /* Приглашение в эксперты/жюри опен-колла (ТЗ 31.08, Часть-2) — та же
     разметка кнопок, что и у запроса соавторства выше. */
  .notif-jury-request{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
  .btn-mini{
    flex:1; padding:8px 0; border-radius:10px; border:1px solid var(--border); background:transparent;
    font-size:13px; font-weight:600; cursor:pointer; font-family:inherit;
  }
  .btn-mini:disabled{ opacity:.5; cursor:default; }
  .btn-mini-accept{ background:var(--ink); color:#fff; border-color:var(--ink); }
  .btn-mini-decline{ color:var(--ink-faint); }
  .notif-list-item-status{ font-size:12.5px; color:var(--ink-faint); margin-top:6px; }
  /* ---------- MEDIA LIGHTBOX (полноэкранный просмотр медиагалереи профиля) ----------
     Отдельный оверлей, не .detail-modal-overlay: тому контенту нужна белая
     карточка с паддингами под текст, а тут — тёмный полноэкранный фон и
     медиа по центру, без белой рамки вокруг фото/видео. См.
     openGalleryLightbox()/closeMediaLightbox() в js/likes-and-detail-modal.js. */
  .media-lightbox-overlay{
    position:fixed; inset:0; background:rgba(10,10,14,0.94); z-index:300;
    display:flex; align-items:center; justify-content:center; padding:48px 20px;
  }
  .media-lightbox-inner{
    max-width:92vw; max-height:88vh; display:flex; flex-direction:column; align-items:center; gap:14px;
  }
  .media-lightbox-inner img, .media-lightbox-inner video{
    max-width:92vw; max-height:82vh; width:auto; height:auto; display:block; border-radius:10px; object-fit:contain;
  }
  .media-lightbox-embed{ width:min(92vw, 960px); }
  .media-lightbox-embed .video-embed{ border-radius:10px; }
  .media-lightbox-model{ width:min(92vw, 960px); height:70vh; }
  .media-lightbox-model model-viewer{ width:100%; height:100%; border-radius:10px; }
  .media-lightbox-audio{ width:min(92vw, 480px); background:var(--surface); border-radius:14px; padding:22px; }
  .media-lightbox-audio audio{ width:100%; }
  .media-lightbox-caption{
    max-width:min(92vw, 700px); color:#fff; opacity:0.85; font-size:13.5px; text-align:center; line-height:1.5;
  }
  .media-lightbox-author, .media-lightbox-coauthors{
    max-width:min(92vw, 700px); color:#fff; opacity:0.7; font-size:12.5px; text-align:center; line-height:1.5;
  }
  /* Кнопка "Поделиться ссылкой" (см. shareLinkBtnHtml/openGalleryLightbox в
     js/likes-and-detail-modal.js) — та же самая кнопка/вёрстка, что и везде
     (.share-link-btn, css/modals.css выше), но с override'ом цвета: на
     тёмном фоне лайтбокса (.media-lightbox-overlay) исходные тёмные
     текст/рамка были бы практически не видны — тот же самый случай, что уже
     решён выше для .media-lightbox-author/.media-lightbox-coauthors. Сама
     кнопка нигде больше не меняется. */
  .media-lightbox-inner .share-link-row{ margin:0; }
  .media-lightbox-inner .share-link-btn{ border-color:rgba(255,255,255,0.35); color:#fff; }
  .media-lightbox-inner .share-link-btn:hover{ border-color:#fff; }
  .media-lightbox-inner .share-link-btn.copied{ border-color:#fff; background:#fff; color:var(--ink); }
  .media-lightbox-close{
    position:fixed; top:20px; right:24px; width:40px; height:40px; border-radius:50%; border:1.5px solid rgba(255,255,255,0.35);
    background:rgba(255,255,255,0.08); color:#fff; font-size:16px; cursor:pointer; z-index:301; transition:all .15s ease;
  }
  .media-lightbox-close:hover{ background:rgba(255,255,255,0.2); border-color:#fff; }
  /* ---------- ЧАТ / МЕССЕНДЖЕР (значок рядом с "Избранное", см. js/chat.js) ----------
     Отдельный оверлей от #detail-modal — переписке нужна своя внутренняя
     структура (список диалогов ИЛИ открытый тред, фиксированная высота со
     скроллом внутри), а не произвольный HTML-контент как у остальных
     поп-апов. */
  /* z-index выше обычных .detail-modal-overlay (200): чат должен открываться
     ПОВЕРХ модалки редактирования объявления/стартапа (там же лежит значок
     чата у каждого отклика, см. responseCardHtml() в
     js/card-render-helpers.js) — без этого чат и модалка формы конкурируют
     за один и тот же слой, и, так как форма объявления идёт в разметке
     позже чата, она перекрывает чат независимо от того, что открыто позже
     по времени, и чат становится недоступен для ввода. */
  .chat-modal-overlay{ z-index:400; }
  .chat-with-btn{ padding:8px 12px; }
  .chat-modal-box{
    max-width:480px; width:100%; height:min(640px, 85vh); display:flex; flex-direction:column;
    padding:24px 0 0; overflow:hidden;
  }
  .chat-pane-title{
    font-family:'Unbounded',sans-serif; font-size:18px; margin:0 24px 14px;
  }
  .chat-list-pane{ display:flex; flex-direction:column; height:100%; overflow:hidden; }
  #chat-conversations-list{ overflow-y:auto; padding:0 12px 12px; flex:1; }
  .chat-list-loading{ text-align:center; color:var(--ink-faint); padding:30px 0; }

  .chat-conv-item{
    display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:14px; cursor:pointer;
    transition:background .15s ease;
  }
  .chat-conv-item:hover{ background:var(--bg); }
  .chat-conv-item.unread{ background:var(--coral-tint); }
  .chat-conv-item.unread:hover{ background:var(--coral-tint); }
  .chat-avatar{
    width:44px; height:44px; border-radius:50%; overflow:hidden; flex-shrink:0; background:var(--ink);
    display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:16px;
  }
  .chat-avatar img{ width:100%; height:100%; object-fit:cover; }
  .chat-avatar-fallback{ display:block; }
  .chat-conv-info{ flex:1; min-width:0; }
  .chat-conv-name{ font-weight:700; font-size:14px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .chat-conv-preview{ font-size:13px; color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
  .chat-conv-item.unread .chat-conv-preview{ color:var(--ink-soft); font-weight:600; }
  .chat-conv-meta{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex-shrink:0; }
  .chat-conv-time{ font-size:11px; color:var(--ink-faint); font-family:'JetBrains Mono',monospace; }
  .chat-conv-unread-badge{
    background:var(--coral); color:#fff; font-size:10.5px; font-weight:700; min-width:18px; height:18px;
    border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 5px;
  }
  .chat-preview-unreadable{ font-style:italic; }

  .chat-thread-pane{ display:flex; flex-direction:column; height:100%; overflow:hidden; }
  .chat-thread-header{
    display:flex; align-items:center; gap:10px; padding:0 24px 14px; border-bottom:1px solid var(--border);
    flex-shrink:0;
  }
  .chat-thread-back{
    width:30px; height:30px; border-radius:50%; border:1.5px solid var(--border); background:var(--surface);
    color:var(--ink-soft); font-size:15px; flex-shrink:0;
  }
  .chat-thread-back:hover{ border-color:var(--coral); color:var(--coral); }
  .chat-thread-avatar{
    width:34px; height:34px; border-radius:50%; overflow:hidden; flex-shrink:0; background:var(--ink);
    display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:13px;
  }
  .chat-thread-avatar img{ width:100%; height:100%; object-fit:cover; }
  .chat-thread-name{ font-weight:700; font-size:14.5px; color:var(--ink); }
  .chat-thread-messages{ flex:1; overflow-y:auto; padding:16px 24px; display:flex; flex-direction:column; gap:8px; }
  .chat-thread-empty{ text-align:center; color:var(--ink-faint); font-size:14px; margin:auto 0; }
  .chat-bubble-row{ display:flex; }
  .chat-bubble-row.mine{ justify-content:flex-end; }
  .chat-bubble-row.theirs{ justify-content:flex-start; }
  .chat-bubble{
    max-width:75%; border-radius:16px; padding:9px 13px; font-size:14px; line-height:1.4;
  }
  .chat-bubble-row.mine .chat-bubble{ background:var(--ink); color:#fff; border-bottom-right-radius:4px; }
  .chat-bubble-row.theirs .chat-bubble{ background:var(--bg); color:var(--ink); border-bottom-left-radius:4px; }
  .chat-bubble-text{ white-space:pre-wrap; word-break:break-word; }
  .chat-bubble-time{ font-size:10px; opacity:.6; margin-top:3px; font-family:'JetBrains Mono',monospace; }
  .chat-thread-input-row{
    display:flex; gap:8px; padding:14px 24px; border-top:1px solid var(--border); flex-shrink:0;
  }
  .chat-thread-input-row input{
    flex:1; padding:10px 14px; border:1.5px solid var(--border); border-radius:999px; font-size:14px; font-family:inherit;
  }
  .chat-thread-input-row input:focus{ outline:none; border-color:var(--coral); }
  .chat-thread-send-btn{ border-radius:999px; padding:10px 18px; font-size:13px; }

  /* ---------- ОТКЛИКИ: вкладки "Объявление/Стартап" · "Все отклики" ·
     "Отклонённые" · "Сохранённые" в модалке "Мои объявления"/"Мои
     стартапы" (ТЗ 31.08). Общий рендер — js/card-render-helpers.js
     (responseTabsBarHtml/responseListHtml/responseCardHtml), используется
     и в opportunities-forms.js, и в cofounder-forms.js. ---------- */
  .resp-tabs{
    /* БАГ: у заголовка модалки (<h2>) margin:0 (общий сброс отступов у
       h1/h2/h3, см. css/base.css), а здесь был только margin-bottom, без
       отступа сверху — переключатель вкладок буквально прилипал к
       заголовку "Edit startup"/"Edit opportunity". */
    display:flex; gap:4px; flex-wrap:wrap; background:var(--bg); border:1px solid var(--border);
    border-radius:12px; padding:4px; margin:18px 0 20px;
  }
  .resp-tab{
    flex:1; min-width:max-content; text-align:center; background:transparent; border:none; border-radius:9px;
    padding:9px 12px; font-size:12.5px; font-weight:700; color:var(--ink-soft); transition:all .15s ease; white-space:nowrap;
  }
  .resp-tab:hover{ color:var(--ink); }
  .resp-tab.active{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow-soft); }
  .resp-card{ margin-bottom:12px; }
  .resp-card:last-child{ margin-bottom:0; }
  .resp-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:4px; }
  .resp-card-name{ font-weight:700; font-size:13.5px; }
  .resp-card-message{ font-size:13px; color:var(--ink-soft); margin-bottom:12px; line-height:1.5; }
  .resp-status-badge{
    flex-shrink:0; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
    border-radius:999px; padding:3px 9px; white-space:nowrap;
  }
  .resp-status-badge.declined{ background:var(--coral-tint); color:var(--coral); }
  .resp-status-badge.saved{ background:var(--violet-tint); color:var(--violet); }
  .resp-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
  .resp-action-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1.5px solid var(--border);
    background:var(--surface); border-radius:999px; padding:7px 14px; font-size:12.5px; font-weight:700;
    color:var(--ink-soft); transition:all .15s ease;
  }
  .resp-action-btn:hover{ border-color:var(--ink); color:var(--ink); }
  .resp-action-btn.resp-action-chat{ padding:7px; width:32px; height:32px; }
  .resp-action-btn.resp-action-chat svg{ width:15px; height:15px; }
  .resp-action-btn.resp-action-save.active{ background:var(--violet-tint); border-color:var(--violet); color:var(--violet); }
  .resp-action-btn.resp-action-decline.active{ background:var(--coral-tint); border-color:var(--coral); color:var(--coral); }

  /* ---------- "Избранные проекты/кейсы/альбомы" в отклике (ТЗ 31.08,
     Часть-1, п.2-3) — компактные ссылки под сообщением отклика, чтобы не
     отягощать модалку: у проектов/альбомов маленькая обложка, у кейсов —
     только текст. Открываются в новой вкладке (target=_blank), см.
     respFavItemHtml()/respFavoritesHtml() в js/card-render-helpers.js. ---------- */
  .resp-favorites{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
  .resp-fav-group-title{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-faint); margin-bottom:5px; }
  .resp-fav-group-items{ display:flex; flex-wrap:wrap; gap:6px; }
  .resp-fav-item{
    display:inline-flex; align-items:center; gap:6px; border:1.5px solid var(--border); border-radius:999px;
    padding:3px 12px 3px 3px; font-size:12px; font-weight:600; color:var(--ink); background:var(--surface);
    transition:border-color .15s ease; max-width:220px;
  }
  .resp-fav-item:hover{ border-color:var(--coral); color:var(--coral); }
  .resp-fav-item img{ width:22px; height:22px; border-radius:50%; object-fit:cover; flex-shrink:0; }
  .resp-fav-item span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* ---------- Голоса эксперта/жюри "+"/"-" (ТЗ 31.08, Часть-2, п.4) ---------- */
  .resp-votes{ display:flex; align-items:center; gap:6px; margin-left:auto; }
  .resp-vote-btn{ font-family:'JetBrains Mono',monospace; min-width:44px; }
  .resp-vote-btn.resp-vote-up.active{ background:var(--violet-tint); border-color:var(--violet); color:var(--violet); }
  .resp-vote-btn.resp-vote-down.active{ background:var(--coral-tint); border-color:var(--coral); color:var(--coral); }
  .resp-votes-counter{
    font-family:'JetBrains Mono',monospace; font-size:12.5px; font-weight:700; color:var(--ink-soft);
    display:inline-flex; gap:8px;
  }
  .resp-votes-counter .resp-votes-up{ color:var(--violet); }
  .resp-votes-counter .resp-votes-down{ color:var(--coral); }

  @media (max-width:480px){
    .resp-tabs{ overflow-x:auto; flex-wrap:nowrap; }
  }

  @media (max-width:480px){
    .chat-modal-box{ height:100vh; max-width:100%; border-radius:0; padding-top:20px; }
    .chat-thread-messages, #chat-conversations-list{ padding-left:16px; padding-right:16px; }
    .chat-thread-header, .chat-thread-input-row{ padding-left:16px; padding-right:16px; }
    .chat-pane-title{ margin-left:16px; margin-right:16px; }
  }
/* ============ ОНБОРДИНГ-МОДАЛКА (ТЗ 17 сентября) ============
   Показывается: 1) сразу после регистрации, когда пользователь впервые
   попадает в личный кабинет; 2) любому "неактивному" пользователю без
   аватарки и промо-медиа при заходе в личный кабинет (см. условие показа
   и разовое сохранение отметки "уже видел" — js/onboarding-modal.js,
   maybeOpenOnboarding()). 3 слайда: аватарка → промо-медиа → медиагалерея.
   Разметка полей аватарки/промо ниже намеренно переиспользует те же классы
   (.cab-avatar-upload/.cab-avatar-circle/.cab-promo-upload и т.д.), что и
   одноимённые поля в самом личном кабинете (см. index.html, вкладка
   "Основное") — "поле полностью идентично" по ТЗ достигается именно так, а
   не копированием стилей. */
.onb-modal-overlay{
  position:fixed; inset:0; background:rgba(20,21,26,0.55); z-index:260;
  display:flex; align-items:center; justify-content:center; padding:24px; overflow-y:auto;
  backdrop-filter:blur(4px);
}
/* Карточка — flex-колонка из двух частей: скроллящаяся середина
   (.onb-modal-scroll) и ПРИКОЛОЧЕННЫЙ снизу футер с кнопками
   (.onb-actions-footer). Так сделано специально: на слайдах 2 и 3
   (промо 9:16 высотой 320px + сетка предпросмотра галереи) контент может
   не влезть по высоте — особенно на мобильном с его укороченной высотой
   экрана (модалка занимает весь экран за вычетом шапки). Если бы кнопки
   "Сохранить"/"Пропустить" скроллились вместе с контентом, их было бы не
   видно, пока пользователь не долистает — модалка выглядела бы "обрезанной"
   без явных действий. При текущей раскладке скроллится ТОЛЬКО контент
   (текст + поле загрузки), а кнопки всегда на виду внизу карточки. */
.onb-modal{
  position:relative; background:var(--surface); border-radius:var(--radius-lg);
  width:560px; max-width:70vw; max-height:70vh;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.onb-modal-scroll{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  /* padding-top:58px — не 44px "по ощущению": крестик закрытия занимает
     по вертикали 16..50px (top:16px + height:34px), так что с меньшим
     отступом первая строка "Шаг N из 3"/заголовка визуально наезжала бы
     на кружок крестика, особенно на узких экранах, где заголовок
     тянется на всю ширину карточки под сам крестик. 58px гарантированно
     ниже него с запасом. */
  padding:58px 30px 20px 36px;
}
/* Замечание по прокрутке: классический скроллбар со стрелками "вверх/вниз"
   на краях трека (то, что реально показал браузер на скриншотах) визуально
   упирается в закруглённый угол карточки и выглядит обрезанным — родного
   способа "отодвинуть" стрелку от угла нет, поэтому вместо подгонки под
   классический скроллбar рисуем тонкий, без кнопок-стрелок вообще (как в
   большинстве современных интерфейсов) — сам вопрос обрезанной стрелки
   снимается, а не маскируется. track/thumb с отступом сверху и снизу, чтобы
   бегунок тоже не подходил вплотную к скруглённым углам карточки. */
.onb-modal-scroll{ scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.onb-modal-scroll::-webkit-scrollbar{ width:6px; }
.onb-modal-scroll::-webkit-scrollbar-button{ display:none; width:0; height:0; }
.onb-modal-scroll::-webkit-scrollbar-track{ background:transparent; margin:10px 0; }
.onb-modal-scroll::-webkit-scrollbar-thumb{ background:var(--border); border-radius:6px; }
.onb-modal-scroll::-webkit-scrollbar-thumb:hover{ background:var(--ink-faint); }
.onb-actions-footer{
  flex:0 0 auto; padding:14px 36px 28px; border-top:1px solid var(--border);
  position:relative; z-index:1; background:var(--surface);
}
.onb-modal-close{
  position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%;
  border:1.5px solid var(--border); background:var(--surface); font-size:14px; color:var(--ink-soft);
  z-index:2; cursor:pointer;
}
.onb-modal-close:hover{ border-color:var(--coral); color:var(--coral); }

/* Декоративные фигуры — тот же приём супрематической композиции, что и у
   мобильного hero (.hero-supr-mobile/.hs-rect в css/responsive.css), но
   вынесен в собственные, НЕ завязанные на @media(max-width:880px) классы:
   тут фигуры должны быть видны и на десктопе (ТЗ: "стиль этой модалки
   должен повторять стиль hero-блока мобильной версии"), а не только на
   узких экранах, как в оригинальном hero. Лежат ВНУТРИ .onb-modal (а не
   .onb-modal-scroll), поэтому не уезжают при скролле контента. */
.onb-supr{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; border-radius:inherit; }
.onb-rect{ position:absolute; mix-blend-mode:multiply; }
.onb-rect--a{ width:60%; height:16%; top:4%; left:-14%; background:#FF4D6D; opacity:0.14; transform:rotate(-14deg); }
.onb-rect--b{ width:34%; height:34%; top:-10%; right:-10%; background:#2148C2; opacity:0.10; transform:rotate(12deg); }
.onb-rect--c{ width:70%; height:10%; bottom:10%; right:-18%; background:#17181C; opacity:0.07; transform:rotate(9deg); }
.onb-rect--d{ width:24%; height:24%; bottom:-8%; left:-8%; background:#F2C230; opacity:0.14; transform:rotate(-20deg); }

.onb-modal-inner{ position:relative; z-index:1; }
.onb-step-label{
  font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:14px;
}
.onb-title{
  font-family:'Unbounded',sans-serif; font-weight:800; font-size:22px; line-height:1.32;
  color:var(--ink); margin:0 0 24px; max-width:420px;
}
/* Слайды 1 и 2 (по замечаниям 18 сентября): вместо одного крупного жирного
   заголовка — небольшая шапка "Интро"/"Intro" (.onb-heading) + текст
   обычным начертанием (.onb-body, наследует Inter, а не Unbounded) — это
   и стилистическое пожелание, и способ уменьшить высоту контента, чтобы
   слайды 1/2 обычно помещались без скролла вообще. Слайд-3 оставлен как
   был — использует .onb-title без изменений. */
.onb-heading{
  font-family:'Unbounded',sans-serif; font-weight:700; font-size:16px; line-height:1.3;
  color:var(--ink); margin:0 0 12px;
}
.onb-body{
  font-family:'Inter',sans-serif; font-weight:400; font-size:15px; line-height:1.55;
  color:var(--ink-soft); margin:0 0 22px; max-width:440px;
}
/* Поле промо-медиа (та же .cab-promo-upload, что в самом кабинете) на белой
   карточке модалки визуально сливалось с фоном — в кабинете это менее
   заметно за счёт окружающего контента, а тут выглядело как пустое место.
   Переопределяем контур ТОЛЬКО внутри онбординга (через #onboarding-modal),
   в самом кабинете класс остаётся как был. */
#onboarding-modal .cab-promo-upload{
  border:1.5px solid var(--ink); background:var(--surface);
}
#onboarding-modal .cab-promo-upload:hover{ border-color:var(--coral); }
.onb-avatar-row{ display:flex; justify-content:center; margin-bottom:8px; }
.onb-hint{ font-size:13px; color:var(--ink-soft); margin:10px 0 4px; line-height:1.5; }
.onb-gallery-input-row{ margin-top:16px; }
.onb-gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:18px 0 6px; }
.onb-gallery-thumb{
  aspect-ratio:1/1; border-radius:12px; overflow:hidden; background:var(--bg); border:1.5px solid var(--border);
}
.onb-gallery-thumb img, .onb-gallery-thumb video{ width:100%; height:100%; object-fit:cover; display:block; }
/* Каждому слайду соответствует свой блок кнопок (.onb-actions-1/2/3) в
   футере — переключаются синхронно со слайдом в onbRenderStep()
   (js/onboarding-modal.js), а не лежат ВНУТРИ .onb-slide-*, иначе бы они
   опять скроллились вместе с контентом. */
.onb-actions{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.onb-save-btn{ width:100%; max-width:320px; font-size:15px; padding:15px; }
.onb-save-btn:disabled{ opacity:.45; cursor:default; }
.onb-save-btn:disabled:hover{ background:var(--ink); transform:none; }
.onb-skip-btn{
  background:none; border:none; color:var(--ink-soft); font-size:13px; font-weight:600; cursor:pointer; padding:4px;
}
.onb-skip-btn:hover{ color:var(--coral); }

/* Мобилка: во весь экран, но НЕ поверх шапки — тот же --hero-nav-h, что
   использует полноэкранный мобильный hero (css/responsive.css). Футер с
   кнопками остаётся приколоченным снизу и на мобильном тем же flex-приёмом
   выше — правки нужны только под отступы/безопасную зону. */
@media (max-width:880px){
  :root{ --hero-nav-h: 81px; }
  .onb-modal-overlay{ padding:0; align-items:flex-start; }
  .onb-modal{
    width:100%; max-width:100%;
    height:calc(100dvh - var(--hero-nav-h));
    max-height:none; margin-top:var(--hero-nav-h);
    border-radius:0;
  }
  .onb-modal-scroll{ padding:58px 18px 16px 22px; }
  .onb-actions-footer{
    padding:14px 22px calc(20px + env(safe-area-inset-bottom, 0px));
  }
}
@media (max-width:640px){
  :root{ --hero-nav-h: 65px; }
}

/* ---- Модалка «Открой возможности!» (ТЗ 22 сентября) ----
   Переиспользует .onb-modal/.onb-modal-scroll/.onb-supr целиком (см.
   index.html), кроме отступа сверху: у онбординга он рассчитан под
   плавающий крестик закрытия (.onb-modal-close, top:16px+height:34px),
   а у этой модалки крестика нет вовсе (закрывается только кнопкой
   «Понятно», см. комментарий в разметке) — со штатным 58px сверху
   получалась бы лишняя пустая полоса над заголовком. */
#opp-intro-modal .onb-modal-scroll{ padding-top:36px; }
@media (max-width:880px){
  #opp-intro-modal .onb-modal-scroll{ padding-top:36px; }
}