/* MCP Console — shared stylesheet for the cookie-auth management UI.
   Visual system: system sans (was Roobert; see note), orange #F89928 as the
   single brand accent, hairline borders, no gradients, sentence case. All
   component classes are scoped to `.mcp-page` so this stylesheet can't leak
   into other markup.
   Roobert is license-restricted (Displaay Type Foundry) and can never be
   committed, so the old @font-face rules produced a permanent console 404
   on every page load. They were removed; the font-family stacks still name
   'Roobert' first, so restoring the brand font is just: ship the .otf files
   under src/static/fonts/ and re-add the three @font-face rules. */

:root {
  --mcp-orange:    #F89928;
  --mcp-orange-d:  #D07B10;
  --mcp-orange-dd: #A5620A;
  --mcp-orange-50: #FEF3E4;
  --mcp-orange-100:#FCE1BF;
  --mcp-red:       #BE4A20;
  --mcp-green:     #1F7A4A;
  --mcp-green-50:  #E6F5EE;
  --mcp-bg:        #FFFFFF;
  --mcp-bg-subtle: #F7F7F7;
  --mcp-fg:        #111111;
  --mcp-fg-muted:  #6B6B6B;
  --mcp-fg-soft:   #9A9A9A;
  --mcp-border:    #E5E5E5;
  --mcp-border-s:  #D0D0D0;
  --mcp-ink:       #0A0A0A;
  --mcp-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  --mcp-sans: 'Roobert', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--mcp-bg);
}

body {
  font-family: var(--mcp-sans);
  color: var(--mcp-fg);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ===== component classes — scoped via `.mcp-page` ===== */
.mcp-page {
  font-family: var(--mcp-sans);
  color: var(--mcp-fg);
  background: var(--mcp-bg);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.mcp-page *, .mcp-page *::before, .mcp-page *::after { box-sizing: border-box; }
.mcp-page p { margin: 0; }
.mcp-page h1, .mcp-page h2, .mcp-page h3, .mcp-page h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
.mcp-page code, .mcp-page pre { font-family: var(--mcp-mono); }
.mcp-page a { color: inherit; text-decoration: underline; text-decoration-color: var(--mcp-border-s); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.mcp-page a:hover { text-decoration-color: var(--mcp-orange); color: var(--mcp-orange-dd); }
/* Component links (wordmark, buttons, pills) are not inline text links — never
   underline them. Scoped tighter than `.mcp-page a` (0,1,1) so they win on
   specificity; a bare `.mcp-btn { text-decoration:none }` (0,1,0) loses to it
   and the link-as-button picks up the orange hover underline. */
.mcp-page .mcp-mark, .mcp-page .mcp-mark:hover,
.mcp-page .mcp-btn, .mcp-page .mcp-btn:hover,
.mcp-page .mcp-pill-link, .mcp-page .mcp-pill-link:hover { text-decoration: none; }
.mcp-page button { font: inherit; cursor: pointer; }

/* ---- top bar ---- */
.mcp-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 40px;
  border-bottom: 1px solid var(--mcp-border);
  background: #fff;
  flex-wrap: wrap;
  gap: 16px;
}
.mcp-mark {
  display: inline-flex; align-items: baseline; gap: 0;
  font-family: var(--mcp-sans);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--mcp-ink);
  text-decoration: none;
}
.mcp-mark .dot {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--mcp-orange);
  margin-left: 4px;
  transform: translateY(-1px);
}
.mcp-mark:hover { color: var(--mcp-ink); text-decoration: none; }
.mcp-mark-sub {
  margin-left: 10px;
  padding-left: 12px;
  border-left: 1px solid var(--mcp-border);
  font-weight: 400;
  color: var(--mcp-fg-muted);
  font-size: 14px;
  letter-spacing: 0;
}
.mcp-nav-right {
  display: flex; align-items: center; gap: 18px;
  font-size: 14px;
  color: var(--mcp-fg-muted);
  flex-wrap: wrap;
}
.mcp-nav-right .who {
  display: inline-flex; align-items: center; gap: 8px;
}
.mcp-nav-right .who code {
  color: var(--mcp-fg);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.mcp-pill-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--mcp-border);
  background: #fff;
  color: var(--mcp-fg);
  font-size: 13px;
  text-decoration: none;
  font-weight: 500;
}
.mcp-pill-link:hover { background: var(--mcp-bg-subtle); text-decoration: none; color: var(--mcp-fg); }

/* ---- main column ---- */
.mcp-main {
  flex: 1;
  padding: 40px;
}
.mcp-main--wide { padding: 40px 56px; }
.mcp-container { max-width: 760px; margin: 0 auto; }
.mcp-container--wide { max-width: 1040px; margin: 0 auto; }

/* ---- page header ---- */
.mcp-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mcp-fg-muted);
}
.mcp-h1 {
  font-size: 42px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin-top: 12px;
  text-wrap: balance;
}
.mcp-h2 {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mcp-fg-muted);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--mcp-border);
  margin-top: 48px;
}
.mcp-lede {
  font-size: 17px;
  color: var(--mcp-fg-muted);
  margin-top: 14px;
  max-width: 56ch;
  line-height: 1.5;
}
.mcp-headblock { margin-bottom: 36px; }

/* ---- flash banner ---- */
.mcp-flash {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 18px;
  border-radius: 8px;
  background: var(--mcp-orange-50);
  border: 1px solid var(--mcp-orange-100);
  margin-bottom: 24px;
}
.mcp-flash .indicator {
  flex-shrink: 0;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--mcp-orange);
  margin-top: 9px;
}
.mcp-flash strong { font-weight: 600; }
.mcp-flash p { font-size: 14px; color: var(--mcp-fg); }

/* ---- connection card ---- */
.mcp-cards { display: flex; flex-direction: column; gap: 2px; }

/* group subheading inside the services list (Connected · N / Available · M) */
.mcp-group-label {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mcp-fg-muted);
  margin: 34px 0 6px;
}
.mcp-group-label:first-of-type { margin-top: 8px; }
.mcp-group-label .count {
  font-family: var(--mcp-mono); letter-spacing: 0; color: var(--mcp-fg-soft);
}

/* provider monogram tile — first letter of the provider label */
.mcp-mono-tile {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 8px;
  border: 1px solid var(--mcp-border);
  background: var(--mcp-bg-subtle);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--mcp-fg);
}
.mcp-card--on .mcp-mono-tile {
  background: var(--mcp-orange-50);
  border-color: var(--mcp-orange-100);
  color: var(--mcp-orange-dd);
}

.mcp-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
  padding: 18px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  transition: background 120ms ease, border-color 120ms ease;
}
.mcp-card:hover { background: var(--mcp-bg-subtle); border-color: var(--mcp-border); }
.mcp-card-meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mcp-card-tag {
  display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mcp-fg-muted);
}
.mcp-card-tag .sep { color: var(--mcp-border-s); }
.mcp-card-tag .mono {
  font-family: var(--mcp-mono);
  text-transform: none;
  letter-spacing: 0;
}
.mcp-card-name {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--mcp-ink);
  margin-top: 2px;
}
.mcp-card-sub {
  font-size: 14px;
  color: var(--mcp-fg-muted);
  margin-top: 6px;
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.mcp-card-sub code { color: var(--mcp-fg); font-size: 13px; overflow-wrap: anywhere; }
.mcp-card-sub .bullet { color: var(--mcp-border-s); }
.mcp-card-sub .soft { color: var(--mcp-fg-soft); }

/* per-account rows inside a connected provider card. One row per granted
   account (a provider like Gmail/Calendar can hold several): metadata on the
   left, the Reconnect / Make-default / Disconnect actions on the right. */
.mcp-accounts { display: flex; flex-direction: column; margin-top: 10px; }
.mcp-account-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px 16px; flex-wrap: wrap;
  padding: 11px 0;
  border-top: 1px solid var(--mcp-border);
}
.mcp-account-row:first-child { border-top: none; padding-top: 2px; }
.mcp-account-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 14px; color: var(--mcp-fg-muted); min-width: 0;
}
.mcp-account-meta code { color: var(--mcp-fg); font-size: 13px; overflow-wrap: anywhere; }
.mcp-account-meta .mono {
  font-family: var(--mcp-mono); font-size: 12.5px; color: var(--mcp-fg-soft);
  overflow-wrap: anywhere;
}
.mcp-account-meta .bullet { color: var(--mcp-border-s); }
.mcp-account-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.mcp-status {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px;
  font-weight: 500;
}
.mcp-status .dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
}
.mcp-status--on  { color: var(--mcp-green); }
.mcp-status--on  .dot { background: var(--mcp-green); }
.mcp-status--off { color: var(--mcp-fg-soft); }
.mcp-status--off .dot { background: var(--mcp-fg-soft); }

/* ---- buttons ---- */
.mcp-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--mcp-orange);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}
.mcp-btn:hover { background: var(--mcp-orange-d); color: #fff; text-decoration: none; }
.mcp-btn:active { background: var(--mcp-orange-dd); }
.mcp-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(248,153,40,0.25);
}

.mcp-btn--ghost {
  background: #fff;
  color: var(--mcp-fg);
  border-color: var(--mcp-border);
}
.mcp-btn--ghost:hover { background: var(--mcp-bg-subtle); color: var(--mcp-fg); }

.mcp-btn--danger-ghost {
  background: #fff;
  color: var(--mcp-fg);
  border-color: var(--mcp-border);
}
.mcp-btn--danger-ghost:hover { background: #fff; color: var(--mcp-red); border-color: var(--mcp-red); }

.mcp-btn--sm { padding: 6px 14px; font-size: 13px; }
.mcp-btn--block { width: 100%; justify-content: center; }

.mcp-arrow::after { content: '→'; margin-left: 6px; font-family: var(--mcp-mono); font-weight: 400; }

/* Inline form wrapper used in tables and account rows so the buttons line up
   without extra margins. */
.mcp-inline-form { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0; }

/* ---- table ---- */
.mcp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.mcp-table thead th {
  text-align: left;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mcp-fg-muted);
  padding: 12px 14px;
  border-bottom: 1px solid var(--mcp-border);
  background: var(--mcp-bg-subtle);
}
.mcp-table tbody td {
  padding: 14px;
  border-bottom: 1px solid var(--mcp-border);
  vertical-align: middle;
}
.mcp-table tbody tr:last-child td { border-bottom: none; }
.mcp-table tbody tr:hover td { background: var(--mcp-bg-subtle); }
.mcp-table td.mcp-num { font-variant-numeric: tabular-nums; color: var(--mcp-fg-muted); white-space: nowrap; }
.mcp-table td.mcp-actions { text-align: right; white-space: nowrap; }
.mcp-table td code { overflow-wrap: anywhere; font-size: 13px; }

.mcp-table-wrap {
  border: 1px solid var(--mcp-border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.mcp-conn-list {
  display: flex; flex-direction: column; gap: 3px;
  font-family: var(--mcp-mono);
  font-size: 12.5px;
  color: var(--mcp-fg-muted);
}
.mcp-conn-list .ok { color: var(--mcp-fg); }
.mcp-conn-list .revoked { color: var(--mcp-fg-soft); text-decoration: line-through; }
.mcp-empty-inline { color: var(--mcp-fg-soft); font-style: italic; }

/* ---- badges ---- */
.mcp-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--mcp-border);
  background: #fff;
  color: var(--mcp-fg);
  white-space: nowrap;
}
.mcp-badge--owner { background: #111; color: #fff; border-color: #111; }
.mcp-badge--member { background: #fff; }
.mcp-badge--active { color: var(--mcp-green); border-color: #BFE0CE; background: var(--mcp-green-50); }
.mcp-badge--revoked { color: var(--mcp-fg-muted); }
.mcp-badge--stale { color: var(--mcp-orange-dd); border-color: var(--mcp-orange-100); background: var(--mcp-orange-50); }
.mcp-badge .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.7; }

/* ---- forms ---- */
.mcp-form { display: flex; flex-direction: column; gap: 18px; }
.mcp-field { display: flex; flex-direction: column; gap: 7px; }
.mcp-field label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mcp-fg-muted);
}
.mcp-field label .opt {
  text-transform: none;
  letter-spacing: 0;
  color: var(--mcp-fg-soft);
  font-weight: 400;
  margin-left: 4px;
}
.mcp-field .hint { font-size: 13px; color: var(--mcp-fg-muted); margin-top: 2px; }
.mcp-input, .mcp-textarea {
  font: inherit;
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--mcp-border-s);
  border-radius: 8px;
  background: #fff;
  color: var(--mcp-fg);
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  font-family: var(--mcp-sans);
  width: 100%;
}
.mcp-input:focus, .mcp-textarea:focus {
  border-color: var(--mcp-orange);
  box-shadow: 0 0 0 4px rgba(248,153,40,0.15);
}
.mcp-input::placeholder, .mcp-textarea::placeholder { color: var(--mcp-fg-soft); }
.mcp-input--mono { font-family: var(--mcp-mono); font-size: 13.5px; }
.mcp-input--sm { padding: 7px 10px; font-size: 13px; width: auto; max-width: 180px; }
.mcp-form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 600px) {
  .mcp-form-grid { grid-template-columns: 1fr; }
}
.mcp-form-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.mcp-form-error {
  background: #FBEDE6;
  border: 1px solid #EFC9BC;
  color: var(--mcp-red);
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
}

/* ---- info / scope list ---- */
.mcp-scope-list {
  border: 1px solid var(--mcp-border);
  border-radius: 10px;
  background: #fff;
  display: flex; flex-direction: column;
}
.mcp-scope {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--mcp-border);
}
.mcp-scope:last-child { border-bottom: none; }
.mcp-scope .mark {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border: 1.5px solid var(--mcp-orange);
  border-radius: 50%;
  position: relative;
  margin-top: 2px;
}
.mcp-scope .mark::after {
  content: ''; position: absolute; inset: 3px;
  background: var(--mcp-orange); border-radius: 50%;
}
.mcp-scope .label { font-weight: 500; color: var(--mcp-ink); }
.mcp-scope .desc { color: var(--mcp-fg-muted); font-size: 14px; margin-top: 2px; }

/* ============================================================
   Auth split shell — brand rail + content pane.
   Used by sign-in / signed-out / connected (orange tone) and the generic
   error page (dark "ink" tone): a solid brand field carrying white type and
   the only brand graphic — concentric ripples radiating from the status dot —
   beside a calm content pane. Replaces the older centered-card layout.
   ============================================================ */
.mcp-shell {
  flex: 1;
  display: grid;
  grid-template-columns: 6fr 7fr;
  min-height: 0;
}
.mcp-rail {
  background: var(--mcp-orange);
  /* soft top-left sheen for depth + concentric ripples radiating from the
     brand dot bled off the bottom-right corner. */
  background-image:
    radial-gradient(135% 95% at 12% -12%, rgba(255,255,255,0.16), transparent 56%),
    repeating-radial-gradient(circle at 96% 114%, transparent 0 46px, rgba(255,255,255,0.07) 46px 47px);
  color: #fff;
  padding: 40px 48px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.mcp-rail--ink {
  background: var(--mcp-ink);
  background-image:
    radial-gradient(135% 95% at 12% -12%, rgba(255,255,255,0.05), transparent 56%),
    repeating-radial-gradient(circle at 96% 114%, transparent 0 46px, rgba(248,153,40,0.10) 46px 47px);
}
/* the filled brand dot at the ripples' origin, bled off the corner */
.mcp-rail::after {
  content: ''; position: absolute;
  width: 128px; height: 128px; right: -50px; bottom: -50px;
  border-radius: 50%;
  background: rgba(255,255,255,0.13);
  pointer-events: none;
}
.mcp-rail--ink::after { background: rgba(248,153,40,0.32); }
/* vertically centres the rail statement between the wordmark and the foot */
.mcp-rail-center {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; justify-content: center;
  position: relative; z-index: 1; padding: 28px 0;
}
.mcp-mark--rail { color: #fff; font-size: 20px; position: relative; z-index: 1; }
.mcp-mark--rail:hover { color: #fff; }
.mcp-mark--rail .dot { background: #fff; width: 9px; height: 9px; }
.mcp-rail--ink .mcp-mark--rail .dot { background: var(--mcp-orange); }
.mcp-rail-body { position: relative; z-index: 1; }
.mcp-rail-statement {
  font-size: 34px; font-weight: 600;
  letter-spacing: -0.025em; line-height: 1.08;
  text-wrap: balance; max-width: 15ch;
}
.mcp-rail-note {
  margin-top: 18px; font-size: 15px; line-height: 1.5;
  color: rgba(255,255,255,0.85); max-width: 34ch;
}
/* service list rendered on the sign-in rail */
.mcp-rail-list {
  margin-top: 30px; display: flex; flex-direction: column;
  position: relative; z-index: 1;
}
.mcp-rail-list .row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0;
  border-top: 1px solid rgba(255,255,255,0.22);
  font-size: 15px; font-weight: 500;
}
.mcp-rail-list .row:last-child { border-bottom: 1px solid rgba(255,255,255,0.22); }
.mcp-rail-list .row .tick {
  width: 16px; height: 16px; flex-shrink: 0;
  border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.6);
  display: flex; align-items: center; justify-content: center;
}
.mcp-rail-list .row .kind {
  margin-left: auto; font-size: 12px; font-weight: 400;
  color: rgba(255,255,255,0.7); letter-spacing: 0.02em;
}
.mcp-rail-foot {
  margin-top: 32px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.22);
  display: flex; align-items: center; gap: 16px;
  font-size: 13px; color: rgba(255,255,255,0.8);
  position: relative; z-index: 1;
}
.mcp-rail-foot .mcp-rail-status { display: inline-flex; align-items: center; gap: 8px; }
.mcp-rail-foot .mcp-rail-status::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.25);
}
.mcp-rail--ink .mcp-rail-foot .mcp-rail-status::before {
  background: var(--mcp-orange); box-shadow: 0 0 0 3px rgba(248,153,40,0.30);
}
.mcp-rail-foot .spacer { flex: 1; }
.mcp-rail-foot code { font-size: 12px; color: rgba(255,255,255,0.85); }

/* content pane */
.mcp-pane {
  display: flex; flex-direction: column; justify-content: center;
  padding: 56px 72px; background: var(--mcp-bg);
}
.mcp-pane-inner { width: 100%; max-width: 480px; }
.mcp-pane .mcp-eyebrow { margin-bottom: 4px; }
.mcp-pane .mcp-h1 { margin-top: 14px; }
.mcp-pane .lede { color: var(--mcp-fg-muted); margin-top: 16px; font-size: 16px; line-height: 1.55; }

/* Google sign-in — neutral chrome (not the orange primary) so the provider
   identity reads clearly. */
.mcp-btn--google {
  background: #fff; color: var(--mcp-fg);
  border: 1px solid var(--mcp-border-s);
  padding: 13px 22px; font-size: 15px;
}
.mcp-btn--google:hover { background: var(--mcp-bg-subtle); color: var(--mcp-fg); border-color: var(--mcp-border-s); }

/* stack the shell on narrow viewports — the rail becomes a compact top band */
@media (max-width: 860px) {
  .mcp-shell { grid-template-columns: 1fr; }
  .mcp-rail { padding: 32px 28px; }
  .mcp-rail-center { padding: 18px 0; }
  .mcp-rail-statement { font-size: 27px; max-width: none; }
  .mcp-rail-list { margin-top: 22px; }
  .mcp-pane { padding: 40px 28px; }
}

/* ---- code block ---- */
.mcp-codeblock {
  background: var(--mcp-ink);
  color: #f5f5f5;
  font-family: var(--mcp-mono);
  font-size: 13px;
  padding: 16px 18px;
  border-radius: 8px;
  word-break: break-all;
  line-height: 1.55;
  border: 1px solid #1f1f1f;
}

/* ---- token issued warning ---- */
.mcp-warn {
  border: 1px solid var(--mcp-orange);
  border-left-width: 3px;
  background: var(--mcp-orange-50);
  padding: 16px 18px;
  border-radius: 8px;
  margin: 18px 0 24px;
}
.mcp-warn strong { font-weight: 600; }
.mcp-warn p { font-size: 14px; color: var(--mcp-fg); }

/* ---- footer ---- */
.mcp-footer {
  border-top: 1px solid var(--mcp-border);
  padding: 18px 40px;
  display: flex; justify-content: space-between;
  color: var(--mcp-fg-muted);
  font-size: 13px;
  background: #fff;
  flex-wrap: wrap;
  gap: 12px;
}
.mcp-footer .links { display: flex; gap: 18px; flex-wrap: wrap; }
.mcp-footer code { font-size: 12px; }

/* ---- error code pill ---- */
.mcp-err-code {
  display: inline-block;
  font-family: var(--mcp-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--mcp-red);
  padding: 4px 10px;
  border: 1px solid #EFC9BC;
  border-radius: 999px;
  background: #FBEDE6;
}

/* ---- substrip — compact horizontal metadata strip ---- */
.mcp-substrip {
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--mcp-border);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 28px;
  background: #fff;
  gap: 24px;
  flex-wrap: wrap;
}
.mcp-substrip .group { display: flex; flex-direction: column; gap: 4px; }
.mcp-substrip .k {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mcp-fg-muted); font-weight: 500;
}
.mcp-substrip .v {
  font-family: var(--mcp-mono); font-size: 13px; color: var(--mcp-fg);
  overflow-wrap: anywhere;
}

/* ---- server status dot ---- */
.mcp-server-dot {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--mcp-fg-muted);
}
.mcp-server-dot::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--mcp-green);
  box-shadow: 0 0 0 3px rgba(31,122,74,0.12);
}

/* ---- technical-details disclosure (error page) ---- */
.mcp-tech-details {
  margin-top: 28px;
  font-size: 13px;
  color: var(--mcp-fg-muted);
}
.mcp-tech-details summary {
  cursor: pointer;
  padding: 4px 0;
}
.mcp-tech-details pre {
  background: var(--mcp-bg-subtle);
  padding: 12px;
  border-radius: 6px;
  margin-top: 10px;
  border: 1px solid var(--mcp-border);
  overflow-x: auto;
  font-size: 12.5px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---- info card (right-side "how it works" panel) ---- */
.mcp-info-card {
  background: var(--mcp-bg-subtle);
  border: 1px solid var(--mcp-border);
  border-radius: 10px;
  padding: 20px;
}
.mcp-info-card ol {
  margin: 12px 0 0; padding-left: 18px;
  color: var(--mcp-fg-muted); font-size: 14px; line-height: 1.6;
}
.mcp-info-card code { font-size: 13px; }

/* ---- two-column layout for add-member ---- */
.mcp-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; margin-top: 14px;
}
@media (max-width: 760px) {
  .mcp-split { grid-template-columns: 1fr; gap: 20px; }
}

/* ---- issue-token inline form ---- */
.mcp-issue-form {
  display: grid; grid-template-columns: 1.4fr 1.4fr auto; gap: 12px; align-items: end;
  margin-top: 18px;
}
@media (max-width: 760px) {
  .mcp-issue-form { grid-template-columns: 1fr; }
}