:root {
  color-scheme: light;
  --ink: #172a3a;
  --muted: #526877;
  --soft: #607582;
  --line: #d3dee4;
  --canvas: #edf2f5;
  --teal: #006b70;
  --teal-dark: #00575d;
  --teal-pale: #dcefeb;
  font-family: "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { min-width: 360px; margin: 0; background: var(--canvas); color: var(--ink); font-size: 14px; line-height: 1.5; }
a { color: inherit; }
button, input { font: inherit; }

.topbar { position: sticky; top: 0; z-index: 3; display: flex; height: 66px; align-items: center; gap: 38px; padding: 0 max(28px, calc((100vw - 1440px) / 2)); border-bottom: 1px solid #e6ebef; background: rgb(255 255 255 / 94%); backdrop-filter: blur(12px); }
.brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; background: #17384d; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: -.5px; }
.brand-name { display: flex; flex-direction: column; color: #203848; font-size: 14px; font-weight: 800; letter-spacing: -.4px; line-height: 1.15; }
.brand-name span { color: var(--teal); }
.top-nav { display: flex; height: 100%; align-items: center; gap: 8px; }
.top-nav a { display: flex; height: 100%; align-items: center; padding: 0 13px; color: #748591; font-size: 12px; font-weight: 600; text-decoration: none; }
.top-nav a:hover { color: var(--teal); }
.top-nav a.active { position: relative; color: #176f73; }
.top-nav a.active::after { position: absolute; right: 12px; bottom: -1px; left: 12px; height: 2px; background: var(--teal); content: ""; }
.catalog-total { margin-left: auto; color: #82919b; font-size: 12px; }

.page { width: min(1440px, 100%); margin: 0 auto; padding: 30px 30px 22px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.eyebrow, .section-label { color: #81919c; font-size: 11px; font-weight: 700; letter-spacing: 1.05px; }
.eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 7px; color: var(--teal); }
.eyebrow > span { width: 17px; height: 2px; border-radius: 3px; background: #63b5ae; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: "Segoe UI", Arial, sans-serif; }
h1 { margin: 0 0 5px; color: #183144; font-size: clamp(26px, 3vw, 34px); font-weight: 750; letter-spacing: -1.1px; line-height: 1.2; }
.intro { margin: 0; color: #778995; font-size: 14px; }
.data-badge { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border: 1px solid #e5ebef; border-radius: 9px; background: #fff; }
.badge-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; background: #edf5f4; color: #34817d; font-size: 12px; font-weight: 700; }
.data-badge > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.data-badge strong { color: #516671; font-size: 11px; }
.data-badge small { color: #8b99a2; font-size: 10px; }

.catalog-layout { display: grid; min-height: calc(100vh - 206px); grid-template-columns: 325px minmax(0, 1fr); overflow: hidden; border: 1px solid #e3e9ed; border-radius: 13px; background: #fff; box-shadow: 0 8px 28px rgb(23 48 67 / 5%); }
.tree-panel { display: flex; min-height: 610px; flex-direction: column; border-right: 1px solid #e7ecef; background: #fbfcfd; }
.tree-panel[hidden] { display: none; }
.catalog-layout.expert-focus-view { grid-template-columns: minmax(0, 1fr); }
.catalog-layout.expert-focus-view .details-panel { padding-right: clamp(22px, 6vw, 80px); padding-left: clamp(22px, 6vw, 80px); }
.focus-back-link { width: fit-content; color: #287c7a; font-size: 11px; font-weight: 650; text-decoration: none; white-space: nowrap; }
.focus-back-link:hover, .focus-back-link:focus-visible { color: #155e62; text-decoration: underline; text-underline-offset: 3px; }
.focus-back-link[hidden] { display: none; }
.tree-heading { display: flex; align-items: center; justify-content: space-between; padding: 21px 18px 15px; }
.tree-heading h2 { margin: 3px 0 0; color: #263e4e; font-size: 16px; letter-spacing: -.3px; }
.tree-count { display: grid; min-width: 29px; height: 25px; place-items: center; padding: 0 7px; border: 1px solid #e2e9ed; border-radius: 7px; background: #fff; color: #71838e; font-size: 11px; font-weight: 600; }
.search-box { display: flex; height: 38px; align-items: center; gap: 8px; margin: 0 15px; padding: 0 9px 0 11px; border: 1px solid #dfe7eb; border-radius: 8px; background: #fff; transition: border .16s ease, box-shadow .16s ease; }
.search-box:focus-within { border-color: #77bdb8; box-shadow: 0 0 0 3px rgb(8 126 131 / 9%); }
.search-box > span { color: #82949f; font-size: 20px; line-height: 1; }
.search-box input { width: 100%; min-width: 0; border: 0; outline: 0; color: #344b5a; font-size: 12px; }
.search-box input::placeholder { color: #a0adb5; }
kbd { display: grid; min-width: 19px; height: 20px; place-items: center; border: 1px solid #e4eaee; border-radius: 4px; background: #f8fafb; color: #85949d; font-size: 10px; }
.tree-hint { margin: 10px 18px 8px; color: #8c9aa3; font-size: 11px; }
.tree-list { flex: 1; overflow: auto; padding: 0 10px 15px; scrollbar-color: #d5e0e5 transparent; scrollbar-width: thin; }
.family-group { margin: 3px 0; }
.family-toggle { display: flex; width: 100%; min-height: 39px; align-items: center; gap: 8px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: #4f6471; text-align: left; cursor: pointer; }
.family-toggle:hover { background: #f1f6f7; }
.family-group.expanded > .family-toggle { color: #236f72; }
.family-chevron { width: 13px; color: #8899a3; font-size: 14px; transition: transform .16s ease; }
.family-group.expanded .family-chevron { transform: rotate(90deg); }
.family-icon { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 7px; background: #edf2f5; color: #607887; font-size: 10px; font-weight: 700; }
.family-group.expanded .family-icon { background: #e7f3f1; color: #2b807b; }
.family-name { flex: 1; font-size: 12px; font-weight: 600; }
.family-count { color: #8e9ba4; font-size: 10px; }
.family-items { display: none; margin: 1px 0 7px 31px; padding-left: 9px; border-left: 1px solid #e1e9ed; }
.family-group.expanded .family-items { display: grid; gap: 2px; }
.alloy-tree-item { display: flex; width: 100%; min-height: 35px; align-items: center; gap: 8px; padding: 4px 7px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #657984; text-align: left; cursor: pointer; }
.alloy-tree-item:hover { background: #f3f8f7; color: #286e70; }
.alloy-tree-item.active { border-color: #d5e9e6; background: #eaf5f3; color: #1f696b; }
.alloy-tree-item > span:first-child { width: 6px; height: 6px; border-radius: 50%; background: #becbd1; }
.alloy-tree-item.active > span:first-child { background: #188783; box-shadow: 0 0 0 3px #d5ece9; }
.alloy-tree-item strong { min-width: 65px; color: #405864; font-size: 11px; font-weight: 700; }
.alloy-tree-item.active strong { color: #1d686a; }
.alloy-tree-item small { overflow: hidden; color: #87959e; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.tree-empty { padding: 18px 10px; color: #7d8d97; font-size: 12px; line-height: 1.5; }
.tree-footer { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-top: 1px solid #e7ecef; color: #84939d; font-size: 10px; }
.tree-footer-dot { width: 6px; height: 6px; border-radius: 50%; background: #7faea6; }
.tree-footer.error .tree-footer-dot { background: #c27660; }

.details-panel { min-width: 0; padding: 25px clamp(22px, 4vw, 55px) 35px; }
.detail-empty { display: flex; min-height: 0; flex-direction: column; align-items: center; justify-content: center; padding: 26px 20px 30px; text-align: center; }
.detail-empty[hidden] { display: none; }
.empty-emblem { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 10px; border: 1px solid #e2ecec; border-radius: 15px; background: linear-gradient(145deg, #f0f8f7, #f8fbfc); color: #438580; }
.empty-emblem span { font-size: 15px; font-weight: 800; letter-spacing: -1px; }
.detail-empty h2 { margin: 0 0 5px; color: #304958; font-size: 17px; letter-spacing: -.4px; }
.detail-empty > p { max-width: 390px; margin: 0; color: #82919b; font-size: 12px; line-height: 1.5; }
.empty-hint { display: flex; align-items: center; gap: 6px; margin-top: 10px; color: #568883; font-size: 11px; font-weight: 600; }
.empty-hint span { font-size: 15px; }
.alloy-detail { max-width: 900px; margin: 0 auto; }
.alloy-detail[hidden] { display: none; }
.detail-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.breadcrumbs { display: flex; min-width: 0; align-items: center; gap: 8px; color: #8a98a1; font-size: 11px; }
.breadcrumbs a { color: #66827f; text-decoration: none; }
.breadcrumbs a:hover { color: var(--teal); text-decoration: underline; }
.breadcrumbs > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-tag { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid #e2ece9; border-radius: 20px; background: #f8fbfa; color: #66837e; font-size: 10px; }
.source-tag > span { width: 6px; height: 6px; border-radius: 50%; background: #4ca396; }
.alloy-title-row { display: flex; align-items: center; justify-content: space-between; margin: 31px 0 23px; }
.alloy-title-row .section-label { margin: 0 0 4px; }
.alloy-title-row h2 { margin: 0; color: #19374a; font-size: clamp(30px, 4vw, 41px); font-weight: 750; letter-spacing: -1.4px; line-height: 1.15; }
.common-name { margin: 6px 0 0; color: #687d89; font-size: 16px; }
.alloy-monogram { display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid #deebea; border-radius: 17px; background: linear-gradient(145deg, #eff8f6, #f9fbfb); color: #367b76; font-size: 15px; font-weight: 800; }
.pitting-card { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 17px 20px; overflow: hidden; padding: 19px 20px 15px; border: 1px solid #dcebe9; border-radius: 11px; background: linear-gradient(110deg, #f5fbfa 0%, #fbfdfd 68%, #f3f9f8 100%); }
.pitting-copy { display: flex; align-items: center; gap: 11px; }
.pitting-icon { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #d5e8e5; border-radius: 10px; background: #fff; color: #3a827d; font-size: 11px; font-weight: 800; }
.pitting-copy > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.pitting-copy strong { color: #35515c; font-size: 14px; }
.pitting-copy small { color: #82939b; font-size: 11px; }
.pitting-value { display: flex; align-items: baseline; gap: 8px; }
.pitting-value strong { color: #1e6668; font-size: 30px; font-weight: 750; letter-spacing: -1px; line-height: 1; }
.pitting-value span { color: #82938f; font-size: 10px; }
.pitting-meter { grid-column: 1 / -1; overflow: hidden; height: 7px; border-radius: 8px; background: #e5efed; }
.pitting-meter span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #65b5a5, #13847d); transition: width .25s ease; }
.pitting-footnote { grid-column: 1 / -1; margin: -9px 0 0; color: #84948f; font-size: 10px; }

.composition-section, .record-section { margin-top: 28px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.section-heading h3 { margin: 3px 0 0; color: #2c4655; font-size: 17px; letter-spacing: -.35px; }
.unit-badge { padding: 5px 8px; border: 1px solid #e6ecef; border-radius: 6px; background: #fafcfc; color: #788993; font-size: 10px; }
.composition-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.element-card { display: flex; min-height: 79px; flex-direction: column; justify-content: space-between; padding: 11px 12px 10px; border: 1px solid #e6ecef; border-radius: 8px; background: #fff; }
.element-card.primary { border-color: #dcebe8; background: #f9fcfb; }
.element-top { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.element-symbol { color: #617782; font-size: 11px; font-weight: 700; letter-spacing: .35px; }
.element-name { overflow: hidden; color: #99a5ac; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.element-value { color: #2d4653; font-size: 19px; font-weight: 700; letter-spacing: -.4px; line-height: 1.1; }
.element-value small { margin-left: 2px; color: #86949b; font-size: 10px; font-weight: 500; }
.element-card.unavailable .element-value { color: #9aa6ac; font-size: 14px; font-weight: 500; }
.record-section { padding-top: 2px; }
.record-note { margin: 0; padding: 12px 13px; border: 1px solid #e8edf0; border-radius: 8px; background: #fbfcfd; color: #71828d; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.verification-notice { display: flex; align-items: flex-start; gap: 9px; margin-top: 18px; padding: 11px 12px; border: 1px solid #f0e7d8; border-radius: 8px; background: #fffaf2; }
.verification-notice > span { display: grid; width: 16px; height: 16px; flex: 0 0 auto; place-items: center; border: 1px solid #d5b778; border-radius: 50%; color: #9c7734; font-size: 10px; font-weight: 700; }
.verification-notice p { margin: 0; color: #887650; font-size: 11px; line-height: 1.5; }
.expert-chart-section { margin-top: 30px; padding-top: 24px; border-top: 1px solid #e7ecef; }
.expert-chart-section[hidden], .expert-data-chart[hidden] { display: none; }
.expert-chart-section .section-heading { margin-bottom: 10px; }
.expert-chart-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 8px; color: #71828d; font-size: 11px; }
.expert-chart-legend[hidden] { display: none; }
.expert-chart-legend > span, .expert-chart-legend > label { display: inline-flex; align-items: center; gap: 6px; }
.parallel-filter-no, .parallel-filter-yes, .parallel-filter-unknown { cursor: pointer; }
.parallel-filter-no input, .parallel-filter-yes input, .parallel-filter-unknown input { width: 14px; height: 14px; margin: 0; cursor: pointer; }
.parallel-filter-no input { accent-color: #24824a; }
.parallel-filter-yes input { accent-color: #c83333; }
.parallel-filter-unknown input { accent-color: #d5aa24; }
.expert-parallel-dimension-controls { margin-top: -3px; }
.parallel-filter-caption { color: #435a66; font-weight: 600; }
.expert-chart-legend > .parallel-dimension-filter { cursor: pointer; }
.parallel-dimension-filter input { width: 14px; height: 14px; margin: 0; accent-color: var(--teal); cursor: pointer; }
.chart-legend-no { width: 10px; height: 10px; border: 2px solid #24824a; border-radius: 50%; }
.chart-legend-yes { width: 12px; color: #c83333; font-size: 17px; font-style: normal; font-weight: 700; line-height: 12px; }
.chart-legend-yes::before { content: "×"; }
.chart-legend-unknown { width: 10px; height: 10px; border: 1px solid #d5aa24; border-radius: 1px; background: #f2cf53; }
.expert-chart-status { margin: 0 0 8px; color: #7d8d97; font-size: 11px; }
.expert-data-chart { display: block; width: 100%; height: auto; overflow: visible; }
.expert-chart-grid { stroke: #e7edef; stroke-width: 1; }
.expert-chart-axis { stroke: #84949c; stroke-width: 1.2; }
.expert-chart-tick, .expert-chart-axis-label { fill: #71828d; font-family: inherit; font-size: 11px; }
.expert-chart-axis-label { fill: #435a66; font-size: 12px; font-weight: 600; }
.expert-chart-no { fill: #24824a; stroke: #fff; stroke-width: 1.5; }
.expert-chart-yes { stroke: #c83333; stroke-linecap: round; stroke-width: 2.5; }
.expert-chart-unknown { fill: #f2cf53; stroke: #d5aa24; stroke-width: 1; }
.expert-parallel-chart { display: block; width: 100%; height: auto; overflow: visible; }
.expert-parallel-chart[hidden] { display: none; }
.expert-parallel-axis { stroke: #84949c; stroke-width: 1.2; }
.expert-parallel-tick { stroke: #aab6bc; stroke-width: 1; }
.expert-parallel-axis-name { fill: #435a66; font-family: inherit; font-size: 12px; font-weight: 600; }
.expert-parallel-tick-label { fill: #71828d; font-family: inherit; font-size: 10px; }
.expert-parallel-record { cursor: help; }
.expert-parallel-record.filtered { display: none; }
.expert-parallel-record.selected path { opacity: 1; stroke-width: 3.2; }
.expert-parallel-record.selected circle { stroke-width: 2; }
.expert-parallel-rate-record.selected .expert-parallel-rate-bar { opacity: 1; stroke: #243f4b; stroke-width: 1.5; }
.expert-parallel-record path { fill: none; opacity: .68; stroke-width: 1.6; transition: opacity .12s, stroke-width .12s; }
.expert-parallel-record circle { stroke: #fff; stroke-width: 1; }
.expert-parallel-record:hover path, .expert-parallel-record:focus path { opacity: 1; stroke-width: 3; }
.expert-parallel-no path { stroke: #24824a; }
.expert-parallel-no circle { fill: #24824a; }
.expert-parallel-yes path { stroke: #c83333; stroke-dasharray: 6 3; }
.expert-parallel-yes circle { fill: #c83333; }
.expert-parallel-unknown path { stroke: #d5aa24; stroke-dasharray: 2 3; }
.expert-parallel-unknown circle { fill: #f2cf53; }
.expert-parallel-rate-record path { stroke: #57717d; }
.expert-parallel-rate-record circle { fill: #57717d; }
.expert-parallel-rate-bar { fill: #57717d; opacity: .7; }
.expert-parallel-rate-zero { stroke: #d1dade; stroke-width: 1; }
.expert-parallel-rate-scale { stroke: #84949c; stroke-width: 1; }
.expert-parallel-selection { min-height: 20px; margin: 7px 0 0; color: #435a66; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.parallel-legend-no, .parallel-legend-yes, .parallel-legend-unknown { width: 20px; border-top: 2px solid #24824a; }
.parallel-legend-yes { border-top-color: #c83333; border-top-style: dashed; }
.parallel-legend-unknown { border-top-color: #d5aa24; border-top-style: dotted; }
.parallel-legend-input { width: 20px; border-top: 3px solid #123b70; }
.expert-parallel-user-input { pointer-events: none; }
.expert-parallel-user-input path { fill: none; stroke: #123b70; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.expert-parallel-user-input circle { fill: #123b70; stroke: #fff; stroke-width: 1.5; }
.expert-chart-user-input { fill: #123b70; stroke: #fff; stroke-width: 2; }
.expert-chart-point { cursor: pointer; }
.expert-chart-point.selected .expert-chart-rate-point { stroke: #123b70; stroke-width: 2.5; }
.expert-chart-rate-track { fill: #edf2f4; stroke: #dce5e8; stroke-width: 1; }
.expert-chart-rate-selection-bar { fill: #57717d; transition: y .12s, height .12s; }
.expert-chart-rate-selection-value { fill: #435a66; font-family: inherit; font-size: 11px; font-weight: 700; }
.expert-chart-rate-selection-value[hidden] { display: none; }
.chart-legend-input-point { width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: #123b70; box-shadow: 0 0 0 1px #123b70; }
.custom-chart-builder { margin-top: 30px; padding: 18px; border: 1px solid #e3e9ed; border-radius: 10px; background: #fbfcfd; }
.custom-chart-builder[hidden] { display: none; }
.custom-chart-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.custom-chart-fieldset { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0; padding: 12px; border: 1px solid #e4eaee; border-radius: 8px; background: #fff; }
.custom-chart-fieldset[hidden] { display: none; }
.custom-chart-fieldset legend { padding: 0 5px; color: #435a66; font-size: 11px; font-weight: 700; }
.custom-chart-fieldset label { display: inline-flex; align-items: center; gap: 6px; color: #71828d; font-size: 11px; white-space: nowrap; }
.custom-chart-fieldset input { width: 14px; height: 14px; margin: 0; cursor: pointer; }
.custom-chart-fieldset input[type="radio"] { accent-color: var(--teal); }
.custom-chart-fieldset .parallel-dimension-filter input { accent-color: var(--teal); }
.custom-chart-actions { display: flex; align-items: center; gap: 12px; margin-top: 13px; }
.custom-chart-add, .custom-chart-remove { min-height: 34px; padding: 0 12px; border: 1px solid #cfe1df; border-radius: 7px; background: #eff7f5; color: #236f72; font-size: 11px; font-weight: 650; cursor: pointer; }
.custom-chart-add:hover:not(:disabled), .custom-chart-remove:hover { background: #e4f1ef; }
.custom-chart-add:disabled { border-color: #e3e9ed; background: #f3f5f6; color: #9aa6ac; cursor: not-allowed; }
.custom-chart-remove { min-height: 30px; border-color: #e4eaee; background: #fff; color: #71828d; }
.custom-chart-status { margin: 0; color: #7d8d97; font-size: 11px; }
.expert-chart-rate-point { stroke: #fff; stroke-width: 1.5; }
.chart-legend-rate { width: 32px; height: 10px; border-radius: 4px; background: linear-gradient(90deg, #d3ece6, #0b667c); }
.parallel-legend-rate { width: 20px; height: 7px; border-radius: 4px; background: #57717d; }
.page-footer { display: flex; justify-content: space-between; padding: 15px 2px 0; color: #97a4ac; font-size: 10px; }
.page-footer > span:first-child { color: #6f818d; font-weight: 700; }
.page-footer i { padding: 0 5px; color: #c0c9ce; font-style: normal; }

@media (max-width: 900px) {
  .topbar { gap: 20px; padding-right: 18px; padding-left: 18px; }
  .catalog-layout { grid-template-columns: 275px minmax(0, 1fr); }
  .composition-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .topbar { height: 59px; gap: 10px; padding: 0 12px; }
  .brand-mark { width: 32px; height: 32px; }
  .brand-name { font-size: 12px; }
  .top-nav { gap: 0; }
  .top-nav a { padding: 0 8px; font-size: 10px; }
  .catalog-total { display: none; }
  .page { padding: 22px 12px 16px; }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 16px; }
  .intro { font-size: 13px; line-height: 1.5; }
  .data-badge { padding: 8px 10px; }
  .catalog-layout { grid-template-columns: minmax(0, 1fr); }
  .tree-panel { min-height: 320px; max-height: 48vh; border-right: 0; border-bottom: 1px solid #e7ecef; }
  .tree-heading { padding: 15px 15px 11px; }
  .tree-list { min-height: 100px; }
  .details-panel { padding: 22px 15px 25px; }
  .detail-empty { padding: 22px 15px 25px; }
  .detail-topline { align-items: flex-start; }
  .breadcrumbs { flex-wrap: wrap; row-gap: 4px; font-size: 10px; }
  .source-tag { font-size: 9px; }
  .alloy-title-row { margin: 23px 0 18px; }
  .common-name { font-size: 14px; }
  .alloy-monogram { width: 48px; height: 48px; border-radius: 14px; }
  .pitting-card { padding: 14px; }
  .pitting-value strong { font-size: 25px; }
  .composition-section, .record-section { margin-top: 23px; }
  .expert-chart-section { margin-top: 23px; padding-top: 18px; }
  .expert-chart-legend { gap: 10px; }
  .custom-chart-controls { grid-template-columns: minmax(0, 1fr); }
  .custom-chart-actions { align-items: flex-start; flex-direction: column; gap: 8px; }
  .composition-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .element-card { min-height: 72px; padding: 9px; }
  .element-value { font-size: 17px; }
  .page-footer { gap: 10px; font-size: 9px; }
}

.top-nav a,
.catalog-total,
.intro,
.section-label,
.data-badge small,
.tree-hint,
.family-chevron,
.family-count,
.alloy-tree-item small,
.tree-empty,
.tree-footer,
.detail-empty > p,
.breadcrumbs,
.source-tag,
.common-name,
.pitting-copy small,
.pitting-value span,
.pitting-footnote,
.element-name,
.element-value small,
.record-note,
.verification-notice p,
.expert-chart-legend,
.expert-chart-status,
.expert-chart-tick,
.expert-parallel-tick-label,
.page-footer {
  color: #536978;
}

.topbar,
.catalog-layout,
.tree-panel,
.search-box,
.expert-chart-section {
  border-color: #d3dee4;
}

.top-nav a.active,
.top-nav a:hover,
.focus-back-link,
.breadcrumbs a {
  color: #005b60;
}

.family-group.expanded > .family-toggle,
.alloy-tree-item.active,
.alloy-tree-item.active strong {
  color: #005b60;
}

.alloy-tree-item.active {
  border-color: #a9d5cf;
  background: #dcefeb;
}

.pitting-card {
  border-color: #badbd5;
  background: linear-gradient(110deg, #e5f3f0 0%, #f5faf9 68%, #e1f0ed 100%);
}

.expert-chart-grid {
  stroke: #d5e0e5;
}