:root { --readiness-accent: #adff2f; --readiness-panel: rgba(20, 24, 30, .86); }
body { background: #090b0f; color: #f7f8fb; }
.connections-page { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 34px 0 70px; }
.back-link { color: #c9d1dc; text-decoration: none; }
.connections-hero { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; margin: 24px 0; padding: 28px; border: 1px solid #29313b; border-radius: 24px; background: radial-gradient(circle at top right, rgba(173,255,47,.14), transparent 42%), var(--readiness-panel); }
.connections-hero h1 { margin: 4px 0 10px; font-size: clamp(2rem, 5vw, 4rem); }
.connections-hero p { max-width: 720px; margin: 0; color: #b9c2ce; line-height: 1.6; }
.eyebrow { color: var(--readiness-accent) !important; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; font-size: .78rem; }
.status-pill, .provider-state { border: 1px solid #485361; border-radius: 999px; padding: 7px 11px; white-space: nowrap; color: #dfe5ed; font-size: .8rem; }
.notice { margin: 18px 0; padding: 14px 16px; border-radius: 12px; background: #161c24; color: #c7d0db; }
.notice.success { border-left: 3px solid var(--readiness-accent); }
.notice.error { border-left: 3px solid #ff7070; }
.provider-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.provider-card, .setup-panel { min-width: 0; border: 1px solid #29313b; border-radius: 18px; background: var(--readiness-panel); padding: 22px; }
.provider-heading { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.provider-heading h2, .setup-panel h2 { margin: 0; }
.muted, .safe-note, .empty-state { color: #aeb8c5; }
.provider-values, .setup-panel dl { margin: 18px 0; }
.value-row { display: grid; grid-template-columns: minmax(120px, .55fr) minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid #29313b; }
.value-row dt { color: #99a5b4; }
.value-row dd { margin: 0; overflow-wrap: anywhere; }
.disabled-action { width: 100%; padding: 11px; border: 1px solid #3b4652; border-radius: 10px; background: #222933; color: #818c99; }
.setup-panel { margin-top: 18px; }
.connection-row { padding: 10px 0; border-top: 1px solid #29313b; }
@media (max-width: 760px) { .provider-grid { grid-template-columns: 1fr; } .connections-hero { flex-direction: column; } .value-row { grid-template-columns: 1fr; gap: 4px; } }

.connection-action, #connection-artist { padding: 11px 14px; margin: 8px 8px 8px 0; border: 1px solid #697a88; border-radius: 8px; background: #222933; color: #f7f8fb; }
.connection-action:disabled { opacity: .55; cursor: not-allowed; }
.connection-action:focus-visible, #connection-artist:focus-visible { outline: 2px solid var(--readiness-accent); outline-offset: 3px; }
#connection-artist { display: block; width: 100%; }