/* Настройки (#settings): слева — связь и токен, справа — данные и ответы.
   На узком экране — одна колонка. Выпадающий список — как в ui-kit (Select / Search popup). */
.settings-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
                 gap: var(--space-5); align-items: start; }
.settings-col { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
@media (max-width: 720px) { .settings-grid { grid-template-columns: 1fr; } }

/* каналы связи: строка на канал */
.set-list { list-style: none; margin: 0; padding: 0; }
.set-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
           gap: var(--space-2) var(--space-3); padding: var(--space-2) 0;
           border-bottom: 1px solid var(--line); }
.set-row:last-child { border-bottom: 0; }
.set-name { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.set-side { display: flex; align-items: center; gap: var(--space-3); }
.set-pick { display: inline-flex; align-items: center; gap: var(--space-2); }
.set-pick input { margin: 0; }
.set-extra { width: 100%; }
.set-extra input { margin-bottom: var(--space-2); }
.set-extra .row { margin-top: 0; }
/* крестик у подключённого канала: отвязать */
.set-x { width: 32px; height: 32px; min-width: 32px; padding: 0; border-radius: 50%;
         font-size: 18px; line-height: 1; }

/* карточка с заголовком и карандашом */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.card-head h2 { margin: 0; }
/* карандаш — как круглые кнопки шапки (theme-btn), а не залитая кнопка */
.icon-btn { width: 36px; height: 36px; min-width: 36px; padding: 0;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--surface-raised); color: var(--ink-muted);
            border: 1px solid var(--line); border-radius: var(--radius-full);
            box-shadow: var(--shadow-sm); }
.icon-btn:not(:disabled):hover { background: var(--surface-raised); color: var(--ink);
                                 border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6;
                stroke-linecap: round; stroke-linejoin: round; }
.icon-btn.on { color: var(--gilt); border-color: var(--gilt); }

/* строки данных: подпись слева, значение или поле справа */
.prof-list { display: flex; flex-direction: column; }
.prof-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
            align-items: center; gap: var(--space-3); padding: var(--space-3) 0;
            border-bottom: 1px solid var(--line); }
.prof-row:last-child { border-bottom: 0; }
.prof-label { color: var(--ink-muted); font-size: 13px; }
.prof-value { overflow-wrap: anywhere; }
.prof-input { width: 100%; margin: 0; }

/* выпадающий список: закрытый — поле ui-select с шевроном справа */
.dd { position: relative; width: 100%; min-width: 0; }
.dd-btn { width: 100%; height: var(--control-md); justify-content: space-between;
          padding: 0 var(--space-4); font-family: inherit; font-size: 15px; font-weight: 400;
          color: var(--ink); background: var(--field); border: 1px solid var(--field-border);
          border-radius: var(--radius-sm); box-shadow: inset 0 1px 2px #00000014; }
.dd-btn:not(:disabled):hover { background: var(--field); border-color: var(--field-border-hover);
                               transform: none; }
.dd-btn svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--ink-subtle);
              stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dd-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* открытый — панель как ui-search__pop: поверхность, линия, тень */
.dd-menu { position: absolute; z-index: 60; top: calc(100% + 8px); left: 0; right: 0;
           display: flex; flex-direction: column; padding: var(--space-2);
           background: var(--surface-raised); border: 1px solid var(--line);
           border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.dd-menu button { justify-content: flex-start; width: 100%; height: auto; padding: 10px 12px;
                  font-family: inherit; font-size: 15px; font-weight: 400; color: var(--ink);
                  background: transparent; border: 0; border-radius: var(--radius-sm); }
.dd-menu button:not(:disabled):hover { background: var(--seg-track); color: var(--ink); }
.dd-menu button.on { background: var(--seg-track); color: var(--ink); font-weight: 500; }