.cabinet { max-width: none; }
.connections-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-top: 36px; }
.connections-heading h2 { font-size: 27px; letter-spacing: -.035em; margin: 0 0 8px; }
.connections-heading p, .connections-note { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0; }
.connections-note { margin: 12px 0 22px; }
.connection-message { font-size: 14px; line-height: 1.6; margin: 16px 0; overflow-wrap: anywhere; }
.connection-message:empty { display: none; }
.connection-message[data-kind="error"] { padding: 10px 14px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; background: var(--surface); }
.platform-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 22px 0; }
.platform-choice { display: grid; gap: 6px; text-align: left; font: inherit; padding: 19px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 13px; cursor: pointer; }
.platform-choice strong { font-size: 17px; }
.platform-choice span { font-size: 12px; line-height: 1.4; color: var(--muted); }
.platform-choice[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.connection-setup { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; padding: 26px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.connection-setup h3 { font-size: 20px; margin: 0 0 18px; }
.connection-guide ol { padding-left: 21px; margin: 0; font-size: 14px; line-height: 1.65; }
.connection-guide li + li { margin-top: 11px; }
.connection-guide a { color: var(--accent); text-underline-offset: 3px; }
.connection-create label, .target-add label { display: block; font-size: 13px; font-weight: 650; margin: 15px 0 7px; }
.connection-create label span { font-weight: 400; color: var(--muted); }
.connection-create input, .target-add input { display: block; width: 100%; min-width: 0; background: var(--background); color: var(--text); border: 1px solid var(--border); border-radius: 9px; padding: 11px 12px; font: inherit; font-size: 16px; }
.connection-create input::placeholder, .target-add input::placeholder { color: var(--muted); opacity: 1; }
.connection-create input:disabled, .target-add input:disabled { opacity: .6; }
.connection-help { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 12px 0 16px; overflow-wrap: anywhere; }
.connection-primary, .connection-secondary { min-height: 43px; font: inherit; font-size: 13px; font-weight: 650; border-radius: 9px; padding: 10px 14px; cursor: pointer; }
.connection-primary { background: var(--text); border: 1px solid var(--text); color: var(--surface); }
.connection-secondary { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.connection-primary:disabled, .connection-secondary:disabled, .platform-choice:disabled { color: var(--disabled-text); background: var(--disabled); border-color: var(--disabled); cursor: not-allowed; box-shadow: none; }
.connection-list { display: grid; gap: 20px; margin-top: 30px; }
.connection-card { border: 1px solid var(--border); background: var(--surface); border-radius: 16px; padding: 24px; }
.connection-card h3 { margin: 0 0 8px; font-size: 21px; overflow-wrap: anywhere; }
.connection-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.connection-meta, .target-meta { color: var(--muted); line-height: 1.6; font-size: 12px; margin: 7px 0; overflow-wrap: anywhere; }
.connection-actions, .target-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.connection-state { display: inline-block; border: 1px solid var(--border); background: var(--badge); border-radius: 20px; padding: 5px 10px; font-size: 12px; line-height: 1.4; white-space: nowrap; }
.connection-state.state-error { border-color: var(--accent); }
.connection-state.state-disconnected { color: var(--muted); }
.connection-empty { border: 1px dashed var(--border); padding: 24px; border-radius: 13px; color: var(--muted); line-height: 1.6; margin: 0; }
.target-list { list-style: none; padding: 0; margin: 23px 0 0; }
.target-list > li { border-top: 1px solid var(--border); padding: 17px 0; }
.target-name { font-size: 15px; font-weight: 650; overflow-wrap: anywhere; }
.target-add { border-top: 1px solid var(--border); padding-top: 5px; margin-top: 10px; }
.target-add-fields { display: flex; align-items: stretch; gap: 10px; }
.target-add-fields input { flex: 1; }
.target-add-fields button { flex-shrink: 0; }
.target-wizard { list-style: none; counter-reset: target-step; display: grid; gap: 22px; padding: 12px 0 0; margin: 0; }
.target-wizard > li { counter-increment: target-step; position: relative; padding-left: 43px; }
.target-wizard > li::before { content: counter(target-step); position: absolute; left: 0; top: -3px; display: grid; place-items: center; width: 29px; height: 29px; background: var(--badge); border: 1px solid var(--border); border-radius: 50%; font-size: 13px; font-weight: 750; color: var(--text); }
.target-step-heading { font-size: 15px; line-height: 1.5; }
.target-wizard .connection-help { margin: 8px 0; font-size: 13px; }
.target-wizard .target-add-fields input { border-color: var(--accent); }
.target-feedback { margin: 10px 0 0; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.target-feedback:empty { display: none; }
.target-feedback[data-kind="error"] { padding: 9px 12px; border-left: 3px solid var(--accent); background: var(--background); }
.target-feedback[data-kind="success"] { padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--badge); }
.target-add input[aria-invalid="true"] { outline: 2px solid var(--accent); outline-offset: 2px; }
.target-advanced { margin-top: 17px; border-top: 1px solid var(--border); padding-top: 13px; }
.target-advanced summary { color: var(--muted); cursor: pointer; font-size: 13px; line-height: 1.6; }
.target-advanced summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.connection-primary:focus-visible, .connection-secondary:focus-visible, .platform-choice:focus-visible, .connection-create input:focus-visible, .target-add input:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (max-width: 700px) {
  .connections-heading, .connection-card-header { flex-direction: column; gap: 13px; }
  .platform-choices { grid-template-columns: 1fr; gap: 10px; }
  .platform-choice { padding: 15px; }
  .connection-setup { grid-template-columns: 1fr; gap: 22px; padding: 20px; }
  .connection-card { padding: 19px; }
  .target-add-fields { flex-direction: column; }
  .target-wizard > li { padding-left: 38px; }
  .target-wizard .target-add-fields input { width: 100%; }
}
