.cytoscape-tool-page { padding-block: 40px 80px; }
.cytoscape-tool-page .breadcrumb { color: #69766f; }
.cytoscape-tool-shell { border: 1px solid #d6e1dc; border-top: 4px solid var(--tools-accent); border-radius: 18px; background: #fff; overflow: hidden; }
.cytoscape-tool-intro { padding: 40px 44px 31px; max-width: 960px; }
.cytoscape-tool-eyebrow { margin: 0; color: var(--tools-accent); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.cytoscape-tool-intro h1 { margin: 10px 0 17px; color: #2e433c; }
.cytoscape-tool-intro > p:not(.cytoscape-tool-eyebrow) { max-width: 760px; color: #53675f; font-size: 1rem; line-height: 1.72; }
.cytoscape-tool-intro .cytoscape-tool-privacy { margin-top: 10px; color: #507b72 !important; font-size: .81rem !important; }
.cytoscape-tool-intro .cytoscape-tool-companion { margin-top: 14px; font-size: .85rem; }
.cytoscape-tool-companion a { color: var(--tools-accent); text-decoration-color: currentColor; font-weight: 600; }
.cytoscape-tool-flow { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; padding: 16px 44px; background: #fafafb; border-block: 1px solid #d6e1dc; color: #3f6256; font-size: .79rem; }
.cytoscape-tool-flow strong { border: 1px solid #c7ddd2; border-radius: 5px; padding: 5px 8px; background: #fff; color: #315d4d; }
.cytoscape-tool-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); }
.cytoscape-tool-editor, .cytoscape-tool-result { min-width: 0; padding: 30px 34px 34px; }
.cytoscape-tool-editor { border-right: 1px solid #d6e1dc; }
.cytoscape-tool-editor > label:first-child { display: block; color: #2e433c; font-size: 1.08rem; font-weight: 700; }
.cytoscape-tool-help { margin: 8px 0 18px; color: #64776f; font-size: .83rem; line-height: 1.6; }
.cytoscape-tool-help code, .cytoscape-tool-intro code { padding: 1px 4px; border-radius: 3px; background: #edf4f0; }
.cytoscape-tool-help a, .cytoscape-tool-note a { color: var(--tools-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.cytoscape-file-label { display: block; margin-bottom: 6px; color: #2e433c; font-size: .82rem; font-weight: 700; }
.cytoscape-tool-editor input[type="file"] { display: block; max-width: 100%; color: #49645a; font: inherit; font-size: .8rem; }
.cytoscape-or { display: block; margin: 15px 0 9px; color: #65786f; font-size: .77rem; }
.cytoscape-tool-editor textarea { display: block; width: 100%; min-height: 225px; padding: 14px; border: 1px solid #a9c2b6; border-radius: 8px; background: #f9fcfa; color: #213d33; font: .78rem/1.55 Consolas, "Courier New", monospace; resize: vertical; white-space: pre; overflow: auto; }
.cytoscape-tool-editor textarea:focus-visible, .cytoscape-tool-editor input:focus-visible { outline: 2px solid var(--tools-accent); outline-offset: 2px; }
.cytoscape-tool-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.cytoscape-tool-actions button { min-height: 42px; border: 1px solid var(--tools-accent); border-radius: 6px; padding: 9px 13px; background: #fff; color: var(--tools-accent); font: inherit; font-size: .79rem; font-weight: 700; cursor: pointer; }
.cytoscape-tool-actions button:first-child { background: var(--tools-accent); color: #fff; }
.cytoscape-tool-actions button:hover:not(:disabled) { filter: brightness(.92); }
.cytoscape-tool-actions button:focus-visible { outline: 2px solid #254d41; outline-offset: 3px; }
.cytoscape-tool-actions button:disabled { opacity: .48; cursor: not-allowed; }
.cytoscape-tool-status { min-height: 1.5em; margin: 12px 0 0; color: #45685c; font-size: .82rem; line-height: 1.55; }
.cytoscape-tool-status[data-error="true"] { color: #9c3e45; }
.cytoscape-tool-result { background: #fafafb; }
.cytoscape-tool-result h2 { margin: 5px 0 12px; color: #2e433c; font-size: 1.45rem; }
.cytoscape-tool-summary { margin: 0 0 12px; color: #315d4d; font-size: .81rem; font-weight: 700; }
.cytoscape-colors-heading { margin: 24px 0 10px; color: #2e433c; font-size: 1.02rem; }
.cytoscape-table-scroll { max-width: 100%; overflow: auto; border-radius: 8px; }
.cytoscape-tool-result table { width: max-content; min-width: 100%; border-collapse: collapse; background: #fff; color: #334a40; font-size: .75rem; }
.cytoscape-tool-result th, .cytoscape-tool-result td { max-width: 230px; border: 1px solid #d6e1dc; padding: 9px 11px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cytoscape-tool-result th { background: #e8f0eb; font-weight: 700; }
.cytoscape-tool-result tr:nth-child(even) td { background: #f9fbfa; }
.cytoscape-tool-placeholder { margin-top: 18px; color: #64776f; font-size: .87rem; }
.cytoscape-tool-result:has(table:not([hidden])) .cytoscape-tool-placeholder { display: none; }
.cytoscape-tool-note { padding: 22px 44px 28px; border-top: 1px solid #d6e1dc; color: #60756b; font-size: .82rem; line-height: 1.65; }
.cytoscape-tool-note h2 { margin: 0 0 8px; color: #36574b; font-size: 1rem; }
.cytoscape-tool-note p { max-width: 970px; margin: 0 0 8px; }
.cytoscape-mapping-options { margin-top: 19px; padding: 14px; border: 1px solid #c7ddd2; border-radius: 7px; background: #f8fbf9; }
.cytoscape-mapping-options summary { color: #315d4d; font-size: .85rem; font-weight: 700; cursor: pointer; }
.cytoscape-mapping-check { display: flex; align-items: flex-start; gap: 7px; margin-block: 15px; color: #45685c; font-size: .82rem; line-height: 1.6; }
.cytoscape-mapping-check input { accent-color: var(--tools-accent); margin-top: 4px; }
.cytoscape-mapping-options textarea { min-height: 100px; }
.cytoscape-mapping-options .cytoscape-file-label { margin-top: 15px; }
@media (max-width: 900px) {
  .cytoscape-tool-workspace { grid-template-columns: 1fr; }
  .cytoscape-tool-editor { border-right: 0; border-bottom: 1px solid #d6e1dc; }
}
@media (max-width: 620px) {
  .cytoscape-tool-page { padding-block: 28px 58px; }
  .cytoscape-tool-intro { padding: 27px 22px; }
  .cytoscape-tool-intro h1 { font-size: clamp(2.15rem, 10vw, 3rem); }
  .cytoscape-tool-flow { padding: 15px 22px; }
  .cytoscape-tool-editor, .cytoscape-tool-result { padding: 25px 20px; }
  .cytoscape-tool-note { padding: 20px 22px 25px; }
  .cytoscape-tool-actions button, .cytoscape-mapping-options summary, .cytoscape-mapping-check { min-height: 44px; }
}

.cytoscape-tool-shell [hidden] { display: none !important; }
.cytoscape-mode-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 44px 22px; }
.cytoscape-mode-tabs button, .match-actions button, .match-pagination button { border: 1px solid #7a9d8e; border-radius: 7px; min-height: 42px; padding: 9px 14px; background: #fff; color: #315d4d; font: inherit; font-size: .82rem; font-weight: 650; cursor: pointer; }
.cytoscape-mode-tabs button[aria-selected="true"], .match-actions button:first-child { background: var(--tools-accent); border-color: var(--tools-accent); color: white; }
.match-actions button:disabled, .match-pagination button:disabled { opacity: .45; cursor: not-allowed; }
.cytoscape-mode-tabs button:focus-visible, .match-checker button:focus-visible, .match-checker select:focus-visible, .match-checker textarea:focus-visible, .match-checker input:focus-visible { outline: 2px solid #254d41; outline-offset: 3px; }
.match-intro { padding: 27px 34px; background: #f8fbf9; border-top: 1px solid #d6e1dc; }
.match-intro h2 { margin: 8px 0 12px; color: #2e433c; font-size: clamp(1.5rem, 4vw, 2rem); }
.match-intro > p:not(.cytoscape-tool-eyebrow), .match-scope p { max-width: 940px; color: #596f64; font-size: .85rem; line-height: 1.7; }
.match-policy { padding: 12px 15px; border-left: 3px solid #91b2a3; background: #eff5f1; color: #456459; font-size: .82rem; line-height: 1.65; overflow-wrap: anywhere; }
.match-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.match-intro .match-actions { margin-top: 19px; }
.match-input-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.match-input { min-width: 0; padding: 25px 34px; border-bottom: 1px solid #d6e1dc; }
.match-input:first-child { border-right: 1px solid #d6e1dc; }
.match-input h3 { margin: 0 0 8px; color: #2e433c; font-size: 1.05rem; }
.match-input > p { color: #64776f; font-size: .8rem; line-height: 1.65; }
.match-input label, .match-result-controls label { display: block; margin: 17px 0 7px; color: #36574b; font-size: .81rem; font-weight: 650; }
.match-input input[type="file"] { display: block; max-width: 100%; font-size: .8rem; }
.match-checker select { max-width: 100%; min-height: 41px; padding: 7px 10px; border: 1px solid #a9c2b6; border-radius: 6px; background: white; color: #2e433c; font: inherit; font-size: .82rem; }
.match-input select { width: 100%; }
.match-input textarea { width: 100%; min-height: 175px; padding: 12px; border: 1px solid #a9c2b6; border-radius: 7px; background: #f9fcfa; color: #213d33; font: .76rem/1.6 Consolas, "Courier New", monospace; resize: vertical; white-space: pre; }
.match-input .match-input-meta { min-height: 3em; margin-bottom: 0; color: #4e7464; overflow-wrap: anywhere; }
.match-run, .match-results { padding: 24px 34px; }
.match-run { border-bottom: 1px solid #d6e1dc; }
.match-results { background: #fafcfb; }
.match-results > h3 { margin: 0 0 16px; font-size: 1.15rem; }
.match-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; }
.match-stats > div { padding: 15px; background: #fff; border: 1px solid #d6e1dc; border-radius: 7px; }
.match-stats dt { color: #63766c; font-size: .76rem; line-height: 1.45; }
.match-stats dd { margin: 7px 0 0; color: #2e5948; font-size: 1.45rem; font-weight: 700; }
.match-result-controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin: 20px 0 14px; }
.match-result-controls label { margin-top: 0; }
.match-result-controls p { margin: 0 0 8px; color: #64776f; font-size: .8rem; }
.match-result-controls > div { min-width: 0; max-width: 100%; }
.match-results table { width: 100%; min-width: 640px; border-collapse: collapse; background: white; color: #334a40; font-size: .77rem; }
.match-results th, .match-results td { padding: 10px 12px; border: 1px solid #d6e1dc; text-align: left; vertical-align: top; }
.match-results th { background: #e8f0eb; }
.match-results td { max-width: 330px; overflow-wrap: anywhere; }
.match-results tr:nth-child(even) td { background: #f8fbf9; }
.match-pagination { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: flex-end; margin-top: 14px; }
.match-pagination span, .match-detail-help { color: #64776f; font-size: .76rem; line-height: 1.65; }
.match-warning { padding: 12px 15px; border: 1px solid #dac59c; border-radius: 7px; color: #765d2d; background: #fff8e9; font-size: .81rem; line-height: 1.6; overflow-wrap: anywhere; }
.match-scope { padding: 22px 34px; border-top: 1px solid #d6e1dc; }
.match-scope h3 { margin: 0 0 9px; font-size: 1rem; }
.match-scope p { margin: 8px 0; font-size: .8rem; }

/* Table match checker. Site category accents remain authoritative. */
.cytoscape-mode-tabs button, .match-actions button, .match-pagination button { border-color: var(--tools-accent); color: var(--tools-accent); }
.cytoscape-mode-tabs button[aria-selected="true"], .match-actions button:first-child { color: #fff; }
.match-intro { background: #fff; }
.match-policy { border: 1px solid #d6e1dc; border-radius: 8px; background: #fafafb; }
.match-scope a { color: var(--tools-accent); text-underline-offset: 3px; }
.match-results > h3, .match-scope h3 { color: #2e433c; }
.match-input input[type="file"] { color: #49645a; }
.match-input textarea { display: block; max-width: 100%; overflow: auto; }
.match-checker .match-actions button, .match-checker select, .match-pagination button { min-height: 44px; }
@media (max-width: 900px) { .match-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .cytoscape-mode-tabs { padding: 0 22px 22px; }
  .match-input-grid { grid-template-columns: 1fr; }
  .match-input:first-child { border-right: 0; }
  .match-intro, .match-input, .match-run, .match-results, .match-scope { padding: 23px 20px; }
  .match-stats > div { padding: 12px 10px; }
  .match-pagination { justify-content: flex-start; }
}