.connect-page { max-width: 52rem; margin: 0 auto; padding: 4.5rem var(--gutter) 2rem; }
.connect-page h1 { font-family: var(--font-display); font-size: clamp(2.6rem, 6vw, 4.5rem); font-weight: 500; line-height: 1.06; letter-spacing: -.025em; margin: 0 0 1.5rem; }
.connect-intro { max-width: 39rem; color: var(--fg-muted); font-size: 1.2rem; margin-bottom: 3rem; }
.connect-page h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 500; margin: 0 0 1.25rem; }
.connect-start { padding: 2rem; background: var(--bg-card); border: 1px solid var(--line-strong); border-radius: 14px; }
.connect-start fieldset { border: 0; padding: 0; margin: 0 0 1.8rem; }
.connect-start legend { font-weight: 600; margin-bottom: .7rem; }
.connect-start fieldset label { display: flex; gap: .7rem; align-items: center; min-height: 44px; cursor: pointer; }
.connect-start input { accent-color: var(--accent); width: 1.1rem; height: 1.1rem; }
.prompt-label { display: block; font-size: .95rem; color: var(--fg-muted); margin-bottom: .65rem; }
#agent-prompt { display: block; width: 100%; min-height: 10rem; padding: 1rem; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--bg); color: var(--fg); font: inherit; font-size: 1rem; line-height: 1.6; resize: vertical; caret-color: var(--accent); }
.copy-row { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; }
.copy-row button { min-height: 48px; cursor: pointer; background: var(--accent); color: white; border: 0; padding: .8rem 1.3rem; font: inherit; border-radius: 6px; }
.copy-row button:hover { background: var(--accent-hover); }
.copy-row button:disabled { opacity: .7; cursor: wait; }
#copy-status { font-size: .95rem; color: var(--fg-muted); }
.connect-note { font-size: .92rem; color: var(--fg-muted); margin: 1.2rem 0 0; }
.connect-note code { overflow-wrap: anywhere; font-size: .85rem; }
.connect-next, .connect-control { margin-top: 3.5rem; }
.connect-steps { list-style: decimal; padding-left: 1.6rem; margin: 0; }
.connect-steps li { padding-left: .7rem; margin-top: 1.8rem; }
.connect-steps li::marker { font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 600; }
.connect-steps h3 { font-size: 1.08rem; margin: 0 0 .4rem; }
.connect-steps p { color: var(--fg-muted); margin: 0; }
.connect-control { border-top: 1px solid var(--line-strong); padding-top: 2rem; }
.connect-control details { border-top: 1px solid var(--line); margin-top: 1.8rem; padding-top: 1rem; }
.connect-control summary { cursor: pointer; min-height: 44px; color: var(--accent); font-weight: 600; }
.connect-footer { display: flex; flex-wrap: wrap; gap: 1.2rem; padding-top: 3rem; color: var(--fg-muted); font-size: .9rem; }
.connect-footer a { text-decoration: underline; text-underline-offset: 3px; }
.connect-page ::selection { background: var(--accent); color: white; }
@media (max-width: 540px) { .connect-page { padding-top: 2.5rem; } .connect-start { padding: 1.25rem; } #agent-prompt { min-height: 16rem; } }