/* Rose, sea-blue and sand palette follows the supplied heritage platform. */
.graph-page { max-width: 1480px; padding: 42px 34px 72px; margin: auto; }
.graph-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.graph-heading h1 { font-family: 'Noto Serif SC', 'SimSun', serif; font-size: clamp(24px, 3vw, 36px); margin: 6px 0 12px; letter-spacing: .025em; }
.graph-heading p { margin: 0; color: #64748b; }
.graph-heading .eyebrow { color: #be3455; font-size: 12px; letter-spacing: .16em; }
.graph-back { flex-shrink: 0; color: #be3455; font-size: 14px; }
.symbol-atlas { --graph-ink: #24344b; --graph-line: #e7e9ef; --graph-rose: #be3455; color: var(--graph-ink); min-width: 0; font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif; font-size: 14px; }
.symbol-atlas * { box-sizing: border-box; }
.symbol-atlas button, .symbol-atlas input { font: inherit; }
.symbol-atlas button { cursor: pointer; }
.symbol-atlas a, .symbol-atlas button { touch-action: manipulation; }
.symbol-atlas button:focus-visible, .symbol-atlas input:focus-visible, .symbol-atlas summary:focus-visible, .symbol-atlas a:focus-visible { outline: 3px solid #be3455; outline-offset: 3px; }
.graph-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 25px; padding: 15px 20px; border: 1px solid var(--graph-line); border-radius: 14px 14px 0 0; background: #fff; font-size: 13px; }
.graph-summary strong { font-family: Georgia, serif; font-size: 25px; margin-right: 4px; color: #233e58; }
.graph-summary a { margin-left: auto; color: var(--graph-rose); text-decoration: none; }
.graph-pending { background: #fff5dd; color: #8b641a; border-radius: 20px; padding: 4px 12px; }
.graph-filters { display: flex; justify-content: space-between; gap: 14px; padding: 14px 20px; background: #fff; border: 1px solid var(--graph-line); border-top: 0; }
.graph-region-tabs, .graph-search, .graph-mode-tabs { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.graph-region-tabs button { border: 1px solid transparent; border-radius: 30px; background: #f7f8fa; color: #526175; padding: 7px 14px; }
.graph-region-tabs button[aria-pressed='true'] { background: #fff0f3; color: var(--graph-rose); border-color: #f1ced7; }
.graph-region-tabs [data-region='huian'] { border-left: 3px solid #cf9e3c; }
.graph-region-tabs [data-region='xunpu'] { border-left: 3px solid #cf637e; }
.graph-region-tabs [data-region='meizhou'] { border-left: 3px solid #5997b9; }
.graph-search input { width: 225px; max-width: 100%; padding: 8px 12px; border: 1px solid #dce2e9; border-radius: 8px; background: #fff; color: var(--graph-ink); }
.graph-search button { border: 0; background: none; padding: 9px; color: #68788a; }
.graph-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 345px; border: 1px solid var(--graph-line); border-top: 0; border-radius: 0 0 14px 14px; overflow: hidden; background: white; }
.graph-drawing { position: relative; min-width: 0; background: radial-gradient(circle at 1px 1px, #e4e9ef .7px, transparent .8px) 0 0 / 22px 22px, #fcfdfe; }
.graph-mode-tabs { padding: 15px 18px; gap: 15px; }
.graph-mode-tabs button { font-size: 13px; background: none; border: 0; color: #6a7a8b; padding: 5px 1px; border-bottom: 2px solid transparent; }
.graph-mode-tabs button[aria-pressed='true'] { color: #253e59; font-weight: 700; border-bottom-color: #be3455; }
#graph-canvas { height: 530px; width: 100%; display: block; }
.graph-canvas-tools { display: flex; position: absolute; right: 16px; top: 74px; gap: 4px; }
.graph-canvas-tools button { min-width: 34px; min-height: 34px; background: #ffffffed; border: 1px solid #e2e8ee; border-radius: 6px; padding: 5px 8px; color: #526175; font-size: 12px; }
.graph-canvas-tools button:first-child, .graph-canvas-tools button:nth-child(2) { font-size: 18px; line-height: 1; }
.graph-caption { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; padding: 8px 18px; color: #6c7b8e; border-top: 1px solid #edf0f4; font-size: 12px; }
.graph-caption small { font-size: 11px; }
.graph-legend { display: flex; gap: 7px 14px; flex-wrap: wrap; padding: 12px 18px; color: #67778a; font-size: 11px; background: #fff; }
.graph-legend span { display: inline-flex; align-items: center; gap: 5px; }
.graph-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.graph-legend .pending-legend { border: 2px dashed #ac7c23; background: #fff5dd; width: 12px; height: 12px; }
.graph-inspector { padding: 20px; border-left: 1px solid var(--graph-line); max-height: 695px; overflow-y: auto; background: #fff; }
.graph-kicker { font-size: 11px; color: #be3455; letter-spacing: .08em; margin: 0 0 12px; }
#graph-detail h2 { font-size: 20px; line-height: 1.55; margin: 0 0 7px; font-family: 'SimSun', serif; }
#graph-detail h3 { font-size: 13px; margin: 17px 0 8px; }
#graph-detail p { line-height: 1.8; margin: 8px 0; font-size: 13px; color: #526175; overflow-wrap: anywhere; }
.graph-tag { display: inline-block; font-size: 11px; background: #f4f7fa; padding: 3px 8px; border-radius: 5px; margin: 3px 5px 8px 0; color: #637388; }
.graph-tag.pending { background: #fff4d9; color: #8b641a; }
.graph-triad-card { border-left: 3px solid #f1a4b5; border-radius: 0 8px 8px 0; padding: 10px 12px; background: #fff6f8; margin: 10px 0; }
.graph-triad-card.object { border-color: #d5ad50; background: #fffbef; }
.graph-triad-card.interpretant { border-color: #80af96; background: #f2f8f4; }
.graph-triad-card strong { font-size: 12px; color: #35465b; }
.graph-triad-card p { margin-bottom: 0!important; }
.graph-focus { width: 100%; padding: 8px 12px; border: 1px solid #f0ccd5; border-radius: 8px; background: #fff2f5; color: #ac3150; margin: 10px 0 5px; }
.graph-evidence-item { border-bottom: 1px solid #eef0f3; padding: 9px 0; font-size: 12px; overflow-wrap: anywhere; }
.graph-evidence-item small, .graph-source { color: #758297; font-size: 11px; }
.graph-evidence-item strong { color: #526175; font-weight: 500; }
.graph-node-list { margin-top: 20px; border-top: 1px solid #edf0f4; padding-top: 12px; font-size: 12px; }
.graph-node-list summary, .graph-provenance summary { cursor: pointer; }
.graph-detail-group { margin-top: 12px; padding: 10px 0; border-top: 1px solid #edf0f4; font-size: 12px; }
.graph-detail-group summary { cursor: pointer; color: #526175; font-weight: 600; }
#graph-node-list { display: grid; gap: 4px; margin-top: 10px; }
#graph-node-list button { border: 0; border-radius: 5px; background: #f7f9fb; padding: 8px; text-align: left; font-size: 12px; color: #526175; }
.graph-notice { font-size: 12px; color: #7b6747; border-left: 3px solid #d8b579; background: #fffaf0; padding: 11px 15px; margin: 16px 0 12px; }
.graph-provenance { color: #748197; font-size: 12px; overflow-wrap: anywhere; }
.graph-provenance code { font-size: 10px; }
.graph-empty { position: absolute; top: 43%; left: 10%; right: 10%; text-align: center; color: #748197; }
.graph-comparison { margin-top: 36px; }
.graph-comparison h2 { font-size: 23px; font-family: 'SimSun', serif; }
.graph-table-scroll { overflow-x: auto; border: 1px solid #e2e8ee; border-radius: 12px; background: white; }
.graph-table-scroll table { width: 100%; border-collapse: collapse; font-size: 13px; }
.graph-table-scroll td, .graph-table-scroll th { padding: 15px 18px; text-align: left; min-width: 190px; border-bottom: 1px solid #e9edf1; vertical-align: top; }
.graph-table-scroll thead th { background: #f4f6f9; color: #53667d; }
.graph-table-scroll tbody th { min-width: 130px; color: #66758a; }
.graph-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.role-main .graph-workspace { grid-template-columns: minmax(0, 1fr); }
.role-main .graph-inspector { border-top: 1px solid var(--graph-line); border-left: 0; max-height: none; }
.role-main .graph-filters { flex-wrap: wrap; }
.role-main #graph-canvas { height: 460px; }
@media (max-width: 1050px) { .graph-workspace { grid-template-columns: minmax(0, 1fr) 290px; } .graph-filters { flex-wrap: wrap; } }
@media (max-width: 760px) {
  .graph-page { padding: 28px 14px 40px; } .graph-heading { align-items: start; } .graph-heading p { font-size: 13px; }
  .graph-back { display: none; } .graph-summary { padding: 12px; gap: 8px 16px; } .graph-summary strong { font-size: 22px; }
  .graph-summary a { margin: 0; flex-basis: 100%; } .graph-filters { padding: 12px; } .graph-region-tabs { gap: 4px; }
  .graph-region-tabs button { padding: 7px 9px; font-size: 12px; } .graph-search { width: 100%; }
  .graph-search input { flex: 1; min-width: 0; width: auto; } .graph-workspace { grid-template-columns: minmax(0, 1fr); }
  #graph-canvas, .role-main #graph-canvas { height: 400px; } .graph-inspector { border-left: 0; border-top: 1px solid var(--graph-line); max-height: none; padding: 18px; }
  .graph-caption { align-items: start; } .graph-caption small { width: 100%; } .graph-legend { padding: 12px; }
  .graph-canvas-tools { right: 10px; top: 65px; } .graph-mode-tabs { gap: 16px; padding: 12px; }
  .graph-table-scroll td, .graph-table-scroll th { padding: 12px; min-width: 170px; }
}
@media (prefers-reduced-motion: reduce) { .symbol-atlas * { transition: none!important; scroll-behavior: auto; } }