:root { --mcp-layout-version: 20260913layout1; }
.mcp-settings-document { font-size: 16px; }
body.mcp-settings { --mcp-accent: var(--primary-hover, #7c3aed); --mcp-ink: var(--ink, #0f172a); --mcp-muted: var(--ink-secondary, #475569); --mcp-line: var(--hairline, #e2e8f0); --mcp-error: #a33128; --mcp-success: #126543; background: var(--canvas, #f8fafc); color: var(--mcp-ink); }
.mcp-settings .result-section *, .mcp-settings .result-section *::before, .mcp-settings .result-section *::after { box-sizing: border-box; }
.mcp-settings [hidden], .mcp-settings input[type='hidden'] { display: none !important; }
.mcp-settings main.page-content { width: calc(100% - 64px); max-width: 1280px; padding: 32px 0 64px; margin: 0 auto; }
.mcp-settings .breadcrumb { display: none; }
.mcp-settings .page-header { gap: 24px; margin-bottom: 32px; }
.mcp-settings .page-header-right { padding-top: 0; }
.mcp-settings .page-header-left h1 { font-size: 1.75rem; letter-spacing: -.02em; margin: 0 0 8px; }
.mcp-settings .page-header-left p { font-size: .9375rem; line-height: 1.8; color: var(--mcp-muted); max-width: 70ch; }
.mcp-settings .result-section { display: block; padding: 0; }
.mcp-settings-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.mcp-setup { background: var(--surface, #fff); border: 1px solid var(--mcp-line); border-radius: var(--radius-lg, 14px); padding: 32px; min-width: 0; }
.mcp-setup-intro { margin: 0 0 24px; font-size: .875rem; color: var(--mcp-muted); line-height: 1.8; }
.mcp-saved { min-width: 0; }
.mcp-section-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; }
.mcp-section-heading h2 { margin: 0; font-size: 1.125rem; font-weight: 650; }
.mcp-section-heading span { color: var(--mcp-muted); font-size: .8125rem; }
.mcp-mode-switch { display: flex; flex-wrap: wrap; background: #f3f4f8; border-radius: 10px; padding: 4px; gap: 8px; margin-bottom: 24px; }
.mcp-mode-switch button { flex: 1 1 auto; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--mcp-muted); font-size: .875rem; line-height: 1.6; }
.mcp-mode-switch button[aria-pressed='true'] { background: #fff; color: var(--mcp-accent); font-weight: 600; box-shadow: 0 1px 4px #141b3020; }
.mcp-mode-switch button:hover:not(:disabled):not([aria-pressed='true']) { background: #e9eaf2; }
.mcp-settings form label { display: block; color: var(--mcp-ink); font-size: .875rem; margin: 24px 0 8px; font-weight: 600; }
.mcp-settings form label span { color: var(--mcp-muted); font-size: .8125rem; font-weight: 400; }
.mcp-settings form input:not([type='checkbox']), .mcp-settings form select { display: block; width: 100%; min-width: 0; min-height: 48px; padding: 12px 16px; border: 1px solid #c5cad7; border-radius: var(--radius-md, 10px); background: var(--surface, #fff); color: var(--mcp-ink); font-family: inherit; font-size: .9375rem; line-height: 1.6; }
.mcp-settings form input::placeholder { color: var(--mcp-muted); opacity: 1; }
.mcp-settings form input[aria-invalid='true'] { border-color: var(--mcp-error); }
.mcp-settings form .mcp-clear-credentials { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 400; }
.mcp-settings form .mcp-clear-credentials input { accent-color: var(--mcp-accent); width: 18px; height: 18px; }
.mcp-field-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-top: 16px; }
.mcp-field-heading label { margin: 0 !important; }
.mcp-help, .mcp-detected, .mcp-help-details, .mcp-inline-note, .mcp-security-note, [data-mcp-status], .mcp-field-error { font-size: .8125rem; line-height: 1.8; overflow-wrap: anywhere; }
.mcp-help { color: var(--mcp-muted); margin: 8px 0 0; }
.mcp-detected { margin: 8px 0 0; color: var(--mcp-success); }
.mcp-detected:empty { display: none; }
.mcp-help-details { margin-top: 8px; color: var(--mcp-muted); }
.mcp-help-details summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; }
.mcp-help-details summary::after { content: '+'; }
.mcp-help-details[open] summary::after { content: '−'; }
.mcp-help-details ul { margin: 12px 0 0; padding-inline-start: 24px; }
.mcp-help-details li + li { margin-top: 8px; }
.mcp-help-details code { font: inherit; overflow-wrap: anywhere; }
.mcp-inline-note { background: #f5f2fb; padding: 12px; border-radius: 8px; color: #594379; }
.mcp-form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.mcp-settings .btn-primary, .mcp-settings .btn-ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; border-radius: var(--radius-full, 9999px); font-size: .875rem; padding: 12px 24px; line-height: 1.6; box-shadow: none; white-space: normal; }
.mcp-settings .btn-primary { background: var(--mcp-accent); color: white; border: 0; }
.mcp-settings .btn-primary:hover:not(:disabled) { background: #6231ba; }
.mcp-settings .btn-ghost { background: white; border: 1px solid #c5cad7; color: var(--mcp-muted); }
.mcp-security-note { display: flex; align-items: baseline; gap: 8px; margin-top: 16px; color: var(--mcp-muted); }
.mcp-security-note i { flex-shrink: 0; }
[data-mcp-status] { margin-top: 16px; color: var(--mcp-success); }
[data-mcp-status]:not(:empty) { background: #e7f4ed; padding: 12px 16px; border-radius: 8px; }
[data-mcp-status].is-error:not(:empty) { background: #fff0eb; }
[data-mcp-status]:empty, .mcp-field-error:empty { display: none; }
[data-mcp-status].is-error, .mcp-field-error { color: var(--mcp-error); }
.mcp-field-error { margin-top: 12px; }
.mcp-text-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; border: 0; border-radius: 6px; background: transparent; color: var(--mcp-accent); padding: 8px; font-size: .8125rem; line-height: 1.7; }
.mcp-text-button:hover:not(:disabled) { background: #f0eafa; }
.mcp-connection { border-bottom: 1px solid var(--mcp-line); padding: 24px 0; }
.mcp-saved > .mcp-help { margin-bottom: 8px; }
.mcp-section-heading [data-mcp-count] { display: inline-flex; justify-content: center; min-width: 24px; margin-inline-start: 8px; padding: 0 4px; background: #eeeaf8; border-radius: 6px; color: #584872; }
.mcp-connection-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mcp-connection h3 { font-size: 1rem; line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
.mcp-state { flex-shrink: 0; font-size: .75rem; line-height: 1.6; border-radius: 6px; background: #eeeef2; color: #5a5e69; padding: 4px 8px; }
.mcp-state.is-connected { background: #e7f4ed; color: var(--mcp-success); }
.mcp-state.is-error { background: #fff0eb; color: var(--mcp-error); }
.mcp-checked-at { color: var(--mcp-muted); font-size: .75rem; line-height: 1.8; font-variant-numeric: tabular-nums; }
.mcp-connection-error { color: var(--mcp-error); font-size: .8125rem; line-height: 1.8; margin-top: 8px; }
.mcp-endpoint { margin: 8px 0; color: var(--mcp-muted); font-size: .8125rem; overflow-wrap: anywhere; }
.mcp-connection-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.mcp-connection-actions .mcp-text-button { padding-inline: 12px; color: var(--mcp-muted); }
.mcp-connection-actions .mcp-text-button:first-child { border: 1px solid #c5cad7; border-radius: 8px; background: #fff; color: var(--mcp-ink); }
.mcp-connection-actions .mcp-delete { margin-inline-start: auto; color: var(--mcp-error); }
.mcp-empty { padding: 32px 0; color: var(--mcp-muted); }
.mcp-empty h3 { color: var(--mcp-ink); font-size: 1rem; margin-bottom: 8px; }
.mcp-empty p { font-size: .875rem; line-height: 1.8; }
.mcp-capabilities { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--mcp-line); }
.mcp-capabilities h2 { scroll-margin-top: 96px; }
.mcp-capabilities > .mcp-help { max-width: 75ch; margin-bottom: 16px; }
.mcp-capability-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--mcp-line); font-size: .875rem; line-height: 1.8; }
.mcp-capability-row strong { font-weight: 500; }
.mcp-capability-row span { overflow-wrap: anywhere; }
.mcp-muted { color: var(--mcp-muted); }
.mcp-settings :focus-visible { outline: 2px solid var(--mcp-accent); outline-offset: 3px; }
.mcp-settings button:disabled { opacity: .5; cursor: not-allowed; }
.mcp-settings button, .mcp-settings a, .mcp-settings summary { touch-action: manipulation; transition: background-color .15s ease-out, color .15s ease-out; }
.mcp-settings button { font-family: inherit; cursor: pointer; }
@media (max-width: 900px) { .mcp-settings-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
@media (max-width: 600px) {
  .mcp-settings main.page-content { width: calc(100% - 32px); padding-top: 24px; }
  .mcp-settings .top-nav { height: auto; min-height: 64px; flex-wrap: wrap; gap: 8px; padding: 8px 16px; }
  .mcp-settings .nav-right { max-width: 100%; flex-wrap: wrap; gap: 8px; margin-inline-start: auto; }
  .mcp-settings .page-header { flex-direction: column; align-items: start; gap: 16px; }
  .mcp-settings .page-header-left h1 { font-size: 1.5rem; }
  .mcp-setup { padding: 24px 16px; }
  .mcp-mode-switch { gap: 8px; }
  .mcp-mode-switch button { padding-inline: 8px; }
  .mcp-settings form input:not([type='checkbox']), .mcp-settings form select { font-size: 1rem; }
  .mcp-connection-heading { align-items: start; flex-wrap: wrap; }
  .mcp-capability-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .mcp-connection-actions .mcp-text-button { padding-inline: 8px; }
  .mcp-checked-at { font-size: .8125rem; }
  .mcp-help, .mcp-detected, .mcp-help-details, .mcp-inline-note, .mcp-security-note, [data-mcp-status], .mcp-field-error, .mcp-endpoint, .mcp-text-button, .mcp-section-heading span { font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) { .mcp-settings *, .mcp-settings *::before, .mcp-settings *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }