/* ── Підключення ───────────────────────────────────────────────────────── */

.conn {
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
  margin-bottom: 10px;
}
.conn--soon { opacity: .55; }

.conn__row { display: flex; align-items: center; gap: 13px; }
.conn__icon {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--lilac-soft);
  display: grid; place-items: center; font-size: 20px;
}
.conn__body { flex: 1; min-width: 0; }
.conn__name { font-size: var(--size-sm); font-weight: 500; margin: 0; }
.conn__state { font-size: var(--size-xs); color: var(--ink-muted); margin: 2px 0 0; }
.conn__state.is-ok { color: #4E7A46; }
.conn__state.is-stale { color: #B5722F; }

.conn__btn {
  flex-shrink: 0;
  padding: 9px 15px;
  border: none; border-radius: var(--radius-pill);
  background: var(--accent); color: #fff;
  font-family: inherit; font-size: var(--size-xs); cursor: pointer;
}
.conn__btn.is-secondary { background: var(--bg); color: var(--ink-muted); }

.conn__why {
  font-size: 11px; line-height: 1.5; color: var(--ink-muted);
  margin: 12px 0 0; padding-top: 12px;
  border-top: 1px solid var(--hairline);
}

/* ── Налаштування ──────────────────────────────────────────────────────── */

.opt-s {
  padding: 12px 10px;
  border: 1.5px solid transparent;
  background: var(--surface);
  border-radius: var(--radius-inner);
  box-shadow: var(--shadow-card);
  font-family: inherit; font-size: var(--size-xs);
  color: var(--ink); cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.opt-s.is-on { border-color: var(--accent); background: var(--pink-soft); }
.opt-s:disabled { opacity: .35; cursor: default; }

.hint {
  font-size: 11px; line-height: 1.5; color: var(--ink-muted);
  margin: 8px 0 0; padding: 10px 13px;
  background: var(--butter-soft); border-radius: var(--radius-inner);
}

.danger {
  width: 100%; margin-top: 30px; padding: 15px;
  border: 1.5px solid var(--hairline); border-radius: var(--radius-card);
  background: transparent; font-family: inherit;
  font-size: var(--size-sm); color: var(--ink-muted); cursor: pointer;
}

/* ── Майстер ───────────────────────────────────────────────────────────── */

.wiz__intro { font-size: var(--size-sm); line-height: 1.5; margin: 0 0 16px; }
.wiz__steps { margin: 0; padding-left: 20px; }
.wiz__steps li { font-size: var(--size-sm); line-height: 1.5; margin-bottom: 9px; }
.wiz__steps li::marker { color: var(--accent); font-weight: 500; }

.copyable {
  display: flex; align-items: stretch; gap: 8px;
  background: var(--surface); border-radius: var(--radius-inner);
  padding: 10px 12px; box-shadow: var(--shadow-card);
}
.copyable code {
  flex: 1; min-width: 0;
  font-size: 11px; line-height: 1.45; word-break: break-all;
  color: var(--ink-muted); font-family: ui-monospace, monospace;
  max-height: 76px; overflow-y: auto;
}
.copyable__btn {
  flex-shrink: 0; align-self: center;
  padding: 8px 12px; border: none; border-radius: var(--radius-pill);
  background: var(--lilac-soft); font-family: inherit;
  font-size: 11px; color: var(--ink); cursor: pointer;
}

.wiz__warn {
  margin: 14px 0 0; padding: 11px 14px;
  background: var(--pink-soft); border-radius: var(--radius-inner);
  font-size: 11px; line-height: 1.5;
}

.wiz__result {
  margin: 12px 0 0; padding: 12px 14px;
  border-radius: var(--radius-inner);
  font-size: var(--size-xs); line-height: 1.5; text-align: center;
}
.wiz__result.is-ok { background: var(--sage-soft); }
.wiz__result.is-bad { background: var(--pink-soft); }