/* Match the active FRP design tokens, not the retired connector theme. */
:root {
  color-scheme: dark;
  --color-brand: #ea580c;
  --color-brand-light: #fb923c;
  --color-bg: #0b1220;
  --color-bg-panel: #111827;
  --color-bg-card: #1a2336;
  --color-bg-input: rgba(100, 116, 139, 0.22);
  --color-text: #f8fafc;
  --color-text-sub: #cbd5e1;
  --color-text-muted: #94a3b8;
  --color-border: rgba(148, 163, 184, 0.12);
  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-display: 'Space Grotesk', 'IBM Plex Sans', sans-serif;
  --radius-sm: 8px;
  --radius-md: 12px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font: 1rem/1.55 var(--font-sans); min-height: 100dvh; -webkit-font-smoothing: antialiased; }
a { color: var(--color-brand-light); text-underline-offset: .25rem; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--color-brand-light); outline-offset: 4px; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.3; }
h1 { font-size: clamp(1.5rem, 4vw, 2rem); margin: .5rem 0 1rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.125rem; }
p, li { color: var(--color-text-sub); }
.connection-header, .connection-main, .connection-footer { max-width: 64rem; margin: auto; padding: 1.5rem; }
.connection-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; border-bottom: 1px solid var(--color-border); }
.connection-brand { display: inline-flex; align-items: center; gap: .75rem; color: var(--color-text); text-decoration: none; font-family: var(--font-display); font-weight: 700; }
.connection-brand img { width: 44px; height: 44px; border-radius: var(--radius-sm); }
.connection-brand small { display: block; color: var(--color-text-muted); font: .75rem/1.5 var(--font-sans); font-weight: 400; }
nav, .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.eyebrow { color: var(--color-brand-light); font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.connection-main > section { margin: 0 0 2rem; }
.panel, .authorization-card { padding: 1.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-card); }
.preview { border-left: .25rem solid var(--color-brand-light); }
.preview strong { color: var(--color-brand-light); }
code { overflow-wrap: anywhere; font-size: .9375rem; color: var(--color-text); }
.endpoint { display: block; padding: 1rem; margin: 1rem 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-panel); }
button, .button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .75rem 1rem; border: 1px solid transparent; border-radius: var(--radius-sm); font: 600 .875rem/1.5 var(--font-sans); cursor: pointer; background: var(--color-brand); color: white; text-decoration: none; }
button:hover, .button:hover { background: #c2410c; color: white; text-decoration: none; }
button:disabled { cursor: wait; opacity: .65; }
.button-secondary { background: var(--color-bg-panel); border-color: var(--color-border); color: var(--color-text); }
.button-secondary:hover { background: var(--color-bg-input); }
.button-text { background: transparent; color: var(--color-brand-light); padding: .5rem; }
.button-text:hover { background: var(--color-bg-input); color: var(--color-brand-light); }
ol { padding-left: 1.5rem; }
li { margin-bottom: 1rem; }
li strong { color: var(--color-text); }
.reports { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.reports h3 { margin-top: 0; }
#copy-status { min-height: 1.55em; }
.connection-footer { border-top: 1px solid var(--color-border); font-size: .875rem; }
.authorization-main { max-width: 32rem; margin: auto; padding: 2rem 1.5rem; }
.authorization-card { padding: 0; overflow: hidden; }
.authorization-heading { padding: 1.5rem; background: var(--color-bg-panel); border-bottom: 1px solid var(--color-border); }
.authorization-heading p { margin: .5rem 0 0; font-size: .875rem; }
.authorization-view { padding: 1.5rem; }
.authorization-view h1 { font-size: 1.5rem; margin-top: 0; }
.authorization-view p { font-size: .875rem; }
.hidden { display: none !important; }
.session-loading { display: flex; align-items: center; gap: .75rem; color: var(--color-text-muted); }
.spinner { display: inline-block; flex-shrink: 0; width: 1.25rem; height: 1.25rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: connection-spin .7s linear infinite; }
@keyframes connection-spin { to { transform: rotate(360deg); } }
.authorization-form { display: grid; gap: 1rem; }
.authorization-form label { display: block; color: var(--color-text-sub); font-size: .875rem; font-weight: 500; margin-bottom: .5rem; }
.authorization-form input { width: 100%; min-height: 44px; padding: .75rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-input); color: var(--color-text); font: inherit; }
.button-full { width: 100%; }
.signin-divider { display: flex; align-items: center; gap: .75rem; margin: 1rem 0; color: var(--color-text-muted); font-size: .75rem; }
.signin-divider::before, .signin-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }
.scope-panel { background: var(--color-bg-panel); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 1rem; margin: 1rem 0; }
.scope-panel p { margin-top: 0; }
#scope-list { list-style: none; padding: 0; margin: 0; }
#scope-list li { display: flex; gap: .5rem; font-size: .875rem; margin: .5rem 0; }
#scope-list li > span:first-child { color: var(--color-brand-light); }
.account-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-size: .875rem; color: var(--color-text-sub); margin-bottom: 1rem; }
.account-row span { overflow-wrap: anywhere; min-width: 0; }
.consent-actions { display: flex; gap: .75rem; }
.consent-actions button { flex: 1; }
.connection-error { color: #fca5a5; }
@media (max-width: 480px) {
  .connection-header, .connection-main, .connection-footer, .authorization-main { padding: 1rem; }
  .panel, .authorization-heading, .authorization-view { padding: 1rem; }
  .connection-header nav { font-size: .875rem; gap: .75rem; }
}
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }