.mcp-page { max-width: 1600px; margin: 0 auto; padding: 26px; color: var(--text); font-size: 14px; }
.mcp-heading, .mcp-card-heading, .mcp-endpoint, .mcp-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.mcp-heading { margin-bottom: 26px; }
.mcp-page h1 { margin: 5px 0 8px; font-size: 25px; font-weight: 650; letter-spacing: -.5px; }
.mcp-page h2, .mcp-modal h2 { margin: 0; font-size: 17px; font-weight: 650; }
.mcp-page h3, .mcp-modal h3 { margin: 12px 0 8px; font-size: 15px; }
.mcp-heading p, .mcp-card-heading p, .mcp-endpoint p { color: #6b7688; margin: 7px 0 0; line-height: 1.65; }
.mcp-eyebrow { color: #517493; font-size: 11px; font-weight: 600; letter-spacing: 1px; }
.mcp-button { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 8px 15px; border: 1px solid #dbe2ea; border-radius: 7px; background: #fff; color: #33445a; cursor: pointer; font: inherit; white-space: nowrap; }
.mcp-button:hover:not(:disabled) { background: #f3f7fb; border-color: #bccbdd; }
.mcp-button.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.mcp-button.primary:hover:not(:disabled) { background: var(--primary-dark); }
.mcp-button.destructive { background: #c33434; border-color: #c33434; color: #fff; }
.mcp-button:disabled, .mcp-close:disabled { opacity: .5; cursor: not-allowed; }
.mcp-page button:focus-visible, .mcp-modal button:focus-visible, .mcp-modal input:focus-visible, .mcp-modal select:focus-visible, .mcp-modal textarea:focus-visible, .mcp-page input:focus-visible, .mcp-page select:focus-visible, .mcp-page summary:focus-visible, .mcp-modal summary:focus-visible { outline: 2px solid #3598ee; outline-offset: 3px; }
.mcp-card { background: #fff; border: 1px solid #e3e8ef; border-radius: 10px; padding: 22px; margin-bottom: 20px; min-width: 0; }
.mcp-card-heading { margin-bottom: 18px; }
.mcp-endpoint { padding: 23px; margin-bottom: 22px; background: #f4f9ff; border: 1px solid #dae8f5; border-radius: 10px; }
.mcp-endpoint h2 { margin: 12px 0 10px; }
.mcp-endpoint code { display: block; font-size: 14px; overflow-wrap: anywhere; }
.mcp-badge { display: inline-block; white-space: nowrap; font-size: 11px; line-height: 1.5; padding: 3px 8px; border-radius: 5px; background: #eff2f6; color: #68768a; }
.mcp-badge.success { color: #0b7b53; background: #e6f5ee; }
.mcp-badge.warning { color: #906300; background: #fff4d8; }
.mcp-badge.danger { color: #b33232; background: #fff0ee; }
.mcp-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mcp-table-scroll { max-width: 100%; overflow-x: auto; }
.mcp-table { border-collapse: collapse; width: 100%; text-align: left; font-size: 13px; }
.mcp-table th { background: #f7f9fc; color: #657489; font-weight: 500; white-space: nowrap; padding: 12px; border-bottom: 1px solid #e5eaf1; }
.mcp-table td { padding: 16px 12px; border-bottom: 1px solid #edf0f5; vertical-align: top; line-height: 1.7; }
.mcp-table tr:last-child td { border-bottom: 0; }
.mcp-table strong { display: block; color: #23364d; font-weight: 600; }
.mcp-table small, .mcp-check-option small { display: block; color: #7b8798; font-size: 12px; }
.mcp-table td:first-child { min-width: 170px; }
.mcp-table summary, .mcp-page details summary, .mcp-modal details summary { cursor: pointer; color: #42607e; line-height: 1.8; }
.mcp-table details { min-width: 175px; max-width: 320px; }
.mcp-table details p { color: #6b7688; overflow-wrap: anywhere; }
.mcp-table small.mcp-expiry-warning { color: #956000; margin-top: 6px; }
.mcp-verification { margin-top: 8px; }
.mcp-verification ul { padding-left: 18px; }
.mcp-verification li { margin: 8px 0; }
.mcp-wrap { min-width: 180px; max-width: 340px; overflow-wrap: anywhere; }
.mcp-id { display: flex; align-items: center; gap: 8px; }
.mcp-id code { display: block; max-width: 250px; overflow-wrap: anywhere; font-size: 11px; color: #7a8798; }
.mcp-link, .mcp-alert button { border: 0; background: transparent; color: var(--primary); cursor: pointer; padding: 0; font: inherit; white-space: nowrap; }
.mcp-link.danger { color: #b93b3b; }
.mcp-empty { padding: 40px 20px; text-align: center; color: #7a8798; line-height: 1.8; }
.mcp-empty strong { display: block; color: #586c81; font-weight: 500; }
.mcp-empty p { margin: 4px 0 0; font-size: 13px; }
.mcp-alert { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 15px; border-radius: 7px; line-height: 1.65; border: 1px solid #dbe7f4; background: #f0f7ff; color: #3b658b; margin: 0 0 18px; }
.mcp-alert.danger { background: #fff2f0; border-color: #f1d5d1; color: #a73333; }
.mcp-alert.success { background: #edf8f2; border-color: #d5ecdf; color: #227a53; }
.mcp-alert.warning { background: #fff9e9; border-color: #f2e4b5; color: #82632b; }
.mcp-alert button { margin-left: auto; }
.mcp-alert ul { margin: 0; width: 100%; padding-left: 20px; }
.mcp-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; margin-bottom: 20px; }
.mcp-filters label, .mcp-form label, .mcp-expiry { display: flex; flex-direction: column; gap: 8px; color: #586b81; font-size: 13px; }
.mcp-filters input { width: 260px; }
.mcp-filters select { min-width: 150px; }
.mcp-filters > .listing-date-field { flex: 0 1 346px; max-width: 100%; gap: 8px; }
.mcp-filters .listing-date-field > .product-country-label { color: #586b81; font-size: 13px; }
.mcp-filters .listing-date-control { height: 36px; }
.mcp-filters > span { align-self: center; color: #8290a1; margin-left: auto; }
.mcp-page input, .mcp-page select, .mcp-modal input:not([type=checkbox]), .mcp-modal select, .mcp-modal textarea { border: 1px solid #dce3ec; border-radius: 6px; padding: 9px 11px; min-height: 36px; background: #fff; color: #293c52; font: inherit; max-width: 100%; }
.mcp-tool-grid, .mcp-guide-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.mcp-tool-grid .mcp-card, .mcp-guide-grid .mcp-card { margin-bottom: 0; }
.mcp-tool .mcp-card-heading { margin-bottom: 8px; }
.mcp-tool > code { color: #8591a0; font-size: 12px; }
.mcp-tool > p { color: #617084; line-height: 1.85; min-height: 50px; }
.mcp-page pre, .mcp-modal pre { font: 12px/1.8 ui-monospace, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; background: #f5f7fa; border: 1px solid #e7ecf2; border-radius: 6px; padding: 14px; max-height: 300px; overflow: auto; }
.mcp-page code, .mcp-modal code { font-family: ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.mcp-help { color: #788597; font-size: 12px; line-height: 1.9; }
.mcp-guide-grid { margin-bottom: 20px; }
.mcp-steps { padding-left: 22px; line-height: 1.9; color: #53667e; }
.mcp-steps li { padding: 7px 0 7px 5px; }
.mcp-detail-list { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 13px 18px; font-size: 13px; margin: 18px 0 24px; }
.mcp-detail-list dt { color: #7b8798; }
.mcp-detail-list dd { margin: 0; overflow-wrap: anywhere; }
.mcp-checks { list-style: none; padding: 0; margin: 0; }
.mcp-checks li { display: flex; align-items: baseline; gap: 12px; margin: 12px 0; flex-wrap: wrap; }
.mcp-checks strong { font-weight: 500; }
.mcp-checks li > span:last-child { color: #718197; font-size: 12px; }
.mcp-pagination { display: flex; justify-content: end; align-items: center; gap: 10px; color: #7b8899; font-size: 12px; margin-top: 15px; }
.mcp-pagination > span { margin-right: 8px; }
.mcp-modal-open { overflow: hidden; }
.mcp-backdrop { position: fixed; inset: 0; background: rgba(19,32,50,.34); z-index: 1600; display: flex; align-items: center; justify-content: center; padding: 24px; }
.mcp-modal { width: 690px; max-width: 100%; max-height: calc(100dvh - 48px); background: #fff; border-radius: 13px; box-shadow: 0 20px 80px #13233730; padding: 26px; overflow-y: auto; font-size: 14px; line-height: 1.7; }
.mcp-modal-header { margin-bottom: 20px; align-items: start; }
.mcp-close { border: 0; background: #f2f5f8; width: 30px; height: 30px; border-radius: 6px; cursor: pointer; font-size: 22px; line-height: 1; color: #65768b; }
.mcp-form { display: grid; gap: 18px; }
.mcp-form textarea { resize: vertical; }
.mcp-form .mcp-help { margin: 0; }
.mcp-modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding-top: 22px; margin-top: 20px; border-top: 1px solid #e8edf3; }
.mcp-consent-intro { background: #f6f9fd; border-radius: 8px; padding: 18px; margin-bottom: 22px; }
.mcp-consent-intro h3 { margin-top: 6px; font-size: 18px; }
.mcp-consent-intro p { margin: 6px 0; color: #62768f; }
.mcp-consent-intro small { color: #7c8b9e; }
.mcp-scope { border: 0; padding: 0; margin: 22px 0; }
.mcp-scope legend { font-weight: 600; margin-bottom: 10px; }
.mcp-check-option { display: flex; align-items: start; gap: 10px; border: 1px solid #e4eaf1; border-radius: 7px; padding: 12px; margin-bottom: 8px; cursor: pointer; }
.mcp-check-option:has(input:checked) { background: #f2f8ff; border-color: #bed8f3; }
.mcp-check-option input { margin: 5px 0 0; accent-color: var(--primary); flex-shrink: 0; width: 15px; height: 15px; }
.mcp-check-option strong { font-size: 13px; font-weight: 550; margin-right: 7px; }
.mcp-check-option small { margin-top: 4px; line-height: 1.75; }
.mcp-check-option.disabled { opacity: .55; cursor: default; }
.mcp-shop-options { max-height: 240px; overflow-y: auto; }
.mcp-shop-select-all { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: #70829b; font-size: 13px; }
.mcp-shop-select-all label { display: inline-flex; align-items: center; gap: 8px; color: #293c52; cursor: pointer; }
.mcp-shop-select-all input { accent-color: #1677df; }
.mcp-shop-select-all label:has(input:disabled) { cursor: default; opacity: .55; }
.mcp-expiry select { width: 160px; }
.mcp-callback { font-size: 12px; color: #7c8da2; }
.mcp-callback code { display: block; margin-top: 8px; }
.mcp-advanced > summary { font-weight: 550; }
.mcp-advanced[open] > summary { margin-bottom: 22px; }
.mcp-key-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.mcp-config-preview { margin: 16px 0; }
.mcp-config-preview summary { margin-bottom: 10px; cursor: pointer; color: #1677df; }
.mcp-key-value { width: 100%; resize: none; font-family: ui-monospace, Consolas, monospace !important; overflow-wrap: anywhere; }
.mcp-expiry-shortcuts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: #788597; font-size: 12px; }
.mcp-expiry-shortcuts .mcp-button { min-height: 32px; padding: 5px 10px; }
.mcp-key-edit-form input[type=datetime-local] { width: 290px; }
.mcp-modal:has(.mcp-consent-intro) .mcp-modal-footer { position: sticky; bottom: -26px; background: #fff; padding-bottom: 20px; margin-bottom: -20px; }
.mcp-diff .changed td:last-child { color: #0b7a53; background: #f0f9f4; }
.mcp-diff td { min-width: 140px; max-width: 230px; overflow-wrap: anywhere; }
@media (max-width: 950px) { .mcp-tool-grid, .mcp-guide-grid { grid-template-columns: minmax(0,1fr); } .mcp-page { padding: 20px; } .mcp-endpoint { align-items: start; flex-wrap: wrap; } }
@media (max-width: 600px) { .mcp-page { padding: 16px 12px; } .mcp-heading { align-items: start; gap: 10px; } .mcp-page h1 { font-size: 21px; } .mcp-heading p { font-size: 12px; } .mcp-card { padding: 16px; } .mcp-card-heading { flex-wrap: wrap; gap: 12px; } .mcp-endpoint { padding: 17px; } .mcp-filters label { flex: 1; min-width: 120px; } .mcp-filters input { width: 100%; } .mcp-filters > span { margin-left: 0; } .mcp-backdrop { padding: 10px; } .mcp-modal { padding: 20px 16px; max-height: calc(100dvh - 20px); } .mcp-detail-list { grid-template-columns: 80px minmax(0,1fr); gap: 12px; } .mcp-modal-footer { flex-wrap: wrap; } .mcp-pagination { flex-wrap: wrap; } }