/* Scoped setup guide: display-only controls; paper / ink editorial palette. */
.ft-connection { padding: 76px 0; color: var(--ink, #0e1220); background: var(--paper-2, #f3f3ef); }
.ft-connection *, .ft-connection *::before, .ft-connection *::after { box-sizing: border-box; }
.ft-connection .wrap { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.ft-connection__heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 28px; }
.ft-connection__eyebrow { margin: 0 0 12px; color: var(--accent-ink, #163ba6); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.ft-connection__heading h2 { margin: 0; font-size: clamp(27px, 3.2vw, 38px); line-height: 1.25; letter-spacing: -.035em; font-weight: 600; }
.ft-connection__heading > p { max-width: 320px; margin: 0; color: var(--ink-3, #6b7280); font-size: 14px; line-height: 1.7; }
.ft-connection__sheet { border: 1px solid var(--line-2, #d1d1c8); border-radius: 12px; background: var(--paper, #fbfbf9); overflow: hidden; }
.ft-connection__controls { display: grid; grid-template-columns: 1fr 1fr 1.35fr; align-items: end; gap: 22px; padding: 24px 28px; border-bottom: 1px solid var(--line, #e3e3dc); }
.ft-connection__select label { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; font-size: 13px; font-weight: 500; }
.ft-connection__select label > span:first-child { color: var(--ink-4, #9aa0ab); font-family: var(--mono, monospace); font-size: 11px; }
.ft-connection__select select { display: block; width: 100%; min-width: 0; min-height: 45px; padding: 10px 34px 10px 12px; border: 1px solid var(--line-2, #d1d1c8); border-radius: 5px; color: var(--ink, #0e1220); background-color: var(--paper, #fbfbf9); font: inherit; font-size: 14px; cursor: pointer; }
.ft-connection__scope { margin: 0 0 2px; color: var(--ink-3, #6b7280); font-size: 12px; line-height: 1.7; }
.ft-connection__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.ft-connection__details { min-width: 0; padding: 28px; }
.ft-connection__selection { margin: 0 0 26px; font-size: 12px; letter-spacing: .035em; font-weight: 600; color: var(--accent-ink, #163ba6); }
.ft-connection__fields { margin: 0; }
.ft-connection__fields > div + div { margin-top: 21px; }
.ft-connection__fields dt { margin-bottom: 5px; color: var(--ink-3, #6b7280); font-size: 12px; }
.ft-connection__fields dd { margin: 0; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.ft-connection__fields code { font-family: var(--mono, monospace); font-size: 13px; }
.ft-connection__model-help { margin: 15px 0 0; color: var(--ink-2, #3a4050); font-size: 13px; line-height: 1.7; }
.ft-connection__condition { display: flex; align-items: flex-start; gap: 9px; margin-top: 24px; padding-top: 19px; border-top: 1px solid var(--line, #e3e3dc); color: var(--ink-3, #6b7280); }
.ft-connection__condition-mark { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 3px; border: 1px solid currentColor; border-radius: 50%; font-family: Georgia, serif; font-size: 11px; line-height: 14px; font-weight: bold; text-align: center; }
.ft-connection__condition p { margin: 0; font-size: 12px; line-height: 1.75; }
.ft-connection__links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 24px; }
.ft-connection__links a { color: var(--accent-ink, #163ba6); font-size: 13px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ft-connection__links a:hover { color: var(--ink, #0e1220); }
.ft-connection__output { display: flex; flex-direction: column; min-width: 0; padding: 22px 24px 16px; border-left: 1px solid var(--line, #e3e3dc); background: #edf0f5; }
.ft-connection__output-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; color: #526176; font-family: var(--mono, monospace); font-size: 12px; }
.ft-connection__copy { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 40px; padding: 8px 13px; border: 1px solid #163ba6; border-radius: 5px; background: #163ba6; color: #fff; font-family: var(--sans, sans-serif); font-size: 12px; line-height: 1.5; white-space: nowrap; cursor: pointer; }
.ft-connection__copy:hover { background: #0f2e89; border-color: #0f2e89; }
.ft-connection__copy:disabled { cursor: default; opacity: .5; }
.ft-connection__output pre { flex: 1; min-height: 230px; max-height: 355px; max-width: 100%; margin: 0; padding: 0 0 8px; overflow: auto; color: #243757; font-family: var(--mono, monospace); font-size: 12px; line-height: 1.75; tab-size: 2; white-space: pre-wrap; overflow-wrap: anywhere; }
.ft-connection__placeholder { margin: 14px 0 0; padding-top: 13px; border-top: 1px solid #d9dfe8; color: #526176; font-size: 11px; line-height: 1.6; }
.ft-connection__feedback { min-height: 18px; margin: 5px 0 0; color: #163ba6; font-size: 11px; line-height: 1.6; }
.ft-connection :is(select, button, a, pre):focus-visible { outline: 3px solid #238df7; outline-offset: 4px; }
.ft-connection__no-script { margin: 16px 0 0; font-size: 13px; }
.ft-connection__no-script a { text-decoration: underline; }
.ft-connection__clipboard { position: fixed; left: -10000px; top: 0; width: 1px; height: 1px; }
@media (max-width: 800px) {
  .ft-connection { padding: 52px 0; }
  .ft-connection__heading { display: block; }
  .ft-connection__heading > p { max-width: 100%; margin-top: 14px; }
  .ft-connection__controls { grid-template-columns: 1fr 1fr; gap: 16px; padding: 20px; }
  .ft-connection__scope { grid-column: 1 / -1; }
  .ft-connection__body { grid-template-columns: 1fr; }
  .ft-connection__details { padding: 23px 20px; }
  .ft-connection__selection { margin-bottom: 21px; }
  .ft-connection__output { border-left: 0; border-top: 1px solid var(--line, #e3e3dc); padding: 20px; }
}
@media (max-width: 400px) {
  .ft-connection .wrap { width: calc(100% - 32px); }
  .ft-connection__controls { grid-template-columns:1fr; gap:14px; padding:18px 16px; }
  .ft-connection__details, .ft-connection__output { padding-left: 16px; padding-right: 16px; }
  .ft-connection__output-head { align-items: flex-start; }
  .ft-connection__output-head > span { padding-top: 10px; overflow-wrap: anywhere; }
}