:root {
  --ink: #16201e;
  --muted: #65706c;
  --paper: #ffffff;
  --canvas: #edf1ef;
  --line: #d5ddda;
  --line-strong: #aebdb7;
  --forest: #172823;
  --forest-2: #203b32;
  --green: #0d7254;
  --green-bright: #42c798;
  --green-soft: #e5f5ee;
  --red: #b33a46;
  --red-soft: #fff0f1;
  --amber: #9b6311;
  --amber-soft: #fff3d8;
  --blue: #2d62a0;
  --blue-soft: #eaf2fb;
  --shadow: 0 22px 54px rgba(22, 39, 33, .12);
  --shadow-soft: 0 8px 22px rgba(22, 39, 33, .08);
}

* { box-sizing: border-box; letter-spacing: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
button, a { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 3px solid rgba(40, 93, 143, .28); outline-offset: 2px; }

.page-shell { min-height: 100vh; }
.app-header { min-height: 64px; padding: 10px 28px; display: flex; align-items: center; gap: 18px; background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.brand-mark { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border-radius: 6px; background: #1d5145; color: #fff; font-weight: 900; }
.brand-copy b, .brand-copy small { display: block; }
.brand-copy b { font-size: 15px; }
.brand-copy small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.header-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.header-nav button { min-height: 34px; padding: 8px 10px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #4f5d59; font-size: 12px; font-weight: 800; }
.header-nav button:hover { border-color: var(--line); background: #f7f9f7; }
.header-nav button.active { border-color: #a9b9b3; background: var(--green-soft); color: var(--green); }
.nav-disabled { min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 9px; border: 1px dashed #d5dad7; border-radius: 6px; background: #f4f5f4; color: #8b9491; font-size: 11px; font-weight: 800; cursor: not-allowed; }
.nav-disabled small { padding: 2px 4px; border-radius: 3px; background: #e7e9e8; color: #777f7d; font-size: 8px; }
.demo-label { padding: 7px 9px; border: 1px solid #e5cf99; border-radius: 6px; background: var(--amber-soft); color: #714a08; font-size: 10px; font-weight: 800; white-space: nowrap; }

.page-main { width: min(1440px, 100%); margin: 0 auto; padding: 28px 28px 48px; }
.intro { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 36px; align-items: end; padding: 6px 2px 24px; }
.eyebrow { margin: 0 0 7px; color: var(--green); font-size: 11px; font-weight: 900; }
.intro h1 { margin: 0; font-size: 36px; line-height: 1.2; }
.intro-copy { max-width: 820px; margin: 10px 0 0; color: var(--muted); font-size: 15px; line-height: 1.72; }
.reading-guide { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); background: var(--paper); }
.reading-guide div { min-width: 0; padding: 13px 12px; border-right: 1px solid var(--line); }
.reading-guide div:last-child { border-right: 0; }
.reading-guide span { width: 22px; height: 22px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: 10px; font-weight: 900; }
.reading-guide b, .reading-guide small { display: block; }
.reading-guide b { font-size: 12px; }
.reading-guide small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.45; }
body[data-page-view="market"] .intro { grid-template-columns: 1fr; }
body[data-page-view="market"] .reading-guide { display: none; }

.toolbar { min-height: 54px; display: flex; align-items: center; gap: 16px; justify-content: space-between; padding: 8px 10px; border: 1px solid var(--line); border-bottom: 0; background: #fafbf9; }
.toolbar p { margin: 0 4px 0 0; color: var(--muted); font-size: 11px; }
.toolbar p b { color: var(--ink); }
.segment-control { display: flex; align-items: center; gap: 4px; }
.segment-control button { min-height: 34px; padding: 7px 11px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #596763; font-size: 11px; font-weight: 800; white-space: nowrap; }
.segment-control button span { margin-left: 4px; color: #87918e; font-size: 9px; }
.segment-control button:hover { background: #eef2ef; }
.segment-control button.active { border-color: #a9b9b3; background: var(--paper); color: var(--green); box-shadow: 0 2px 7px rgba(31, 54, 46, .08); }
.segment-control button.active span { color: var(--green); }

.workspace { min-height: 700px; display: grid; grid-template-columns: 310px minmax(0, 1fr); border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow); }
.scenario-nav { min-width: 0; border-right: 1px solid var(--line); background: #f7f9f7; }
.scenario-nav > header { min-height: 62px; padding: 13px 14px; border-bottom: 1px solid var(--line); }
.scenario-nav > header span, .scenario-nav > header b { display: block; }
.scenario-nav > header span { color: var(--muted); font-size: 9px; font-weight: 800; }
.scenario-nav > header b { margin-top: 4px; font-size: 13px; }
.scenario-list { display: grid; }
.scenario-item { width: 100%; min-height: 74px; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: inherit; text-align: left; }
.scenario-item:hover { background: #eef3f0; }
.scenario-item.active { background: var(--paper); box-shadow: inset 4px 0 0 var(--green); }
.scenario-item.active .scenario-number { border-color: var(--green); background: var(--green-soft); color: var(--green); }
.scenario-number { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; color: #61706b; font-size: 10px; font-weight: 900; }
.scenario-item b, .scenario-item small { display: block; min-width: 0; }
.scenario-item b { font-size: 12px; line-height: 1.35; }
.scenario-item small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.scenario-detail { min-width: 0; background: var(--paper); }
.detail-head { min-height: 126px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: start; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.detail-kicker { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.group-tag, .scene-position { display: inline-flex; align-items: center; min-height: 23px; padding: 4px 7px; border-radius: 5px; font-size: 9px; font-weight: 900; }
.group-tag.general { background: var(--blue-soft); color: var(--blue); }
.group-tag.vertical { background: var(--amber-soft); color: var(--amber); }
.scene-position { border: 1px solid var(--line); color: var(--muted); }
.detail-head h2 { max-width: 900px; margin: 0; font-size: 25px; line-height: 1.34; }
.plain-conclusion { margin: 8px 0 0; color: var(--green); font-size: 12px; font-weight: 800; line-height: 1.5; }
.detail-navigation { display: flex; gap: 6px; }
.icon-button { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: #52605c; font-size: 16px; font-weight: 900; }
.icon-button:hover { border-color: var(--line-strong); background: #f3f6f4; }
.icon-button:disabled { opacity: .35; cursor: not-allowed; }

.agent-context { display: grid; grid-template-columns: 190px 230px minmax(0, 1fr); border-bottom: 1px solid var(--line); background: #fafbf9; }
.agent-context > div { min-width: 0; padding: 13px 15px; border-right: 1px solid var(--line); }
.agent-context > div:last-child { border-right: 0; }
.agent-context span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 9px; font-weight: 800; }
.agent-context b { display: block; font-size: 11px; line-height: 1.48; }
.product-list { display: flex; flex-wrap: wrap; gap: 5px; }
.product-list i { max-width: 100%; padding: 4px 6px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: #4c5c57; font-size: 9px; font-style: normal; font-weight: 700; overflow-wrap: anywhere; }

.task-quote { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: start; margin: 0; padding: 16px 22px; border-bottom: 1px solid var(--line); background: #f7faf8; }
.task-quote span { color: var(--green); font-size: 10px; font-weight: 900; }
.task-quote p { margin: 0; font-size: 15px; line-height: 1.62; font-weight: 700; }

.problem-row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.problem-block { min-width: 0; padding: 18px 22px; }
.problem-block:first-child { border-right: 1px solid var(--line); }
.section-label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 9px; font-weight: 900; }
.problem-block h3 { margin: 0; color: var(--red); font-size: 17px; line-height: 1.45; }
.problem-block p { margin: 0; color: #4e5a57; font-size: 12px; line-height: 1.68; }

.flow-section { padding: 18px 22px; border-bottom: 1px solid var(--line); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.section-heading h3 { margin: 0; font-size: 15px; }
.section-heading p { margin: 0; color: var(--muted); font-size: 9px; }
.action-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.flow-step { min-width: 0; position: relative; padding: 12px 28px 12px 12px; border: 1px solid var(--line); border-right: 0; background: #fff; }
.flow-step:last-child { border-right: 1px solid var(--line); }
.flow-step:not(:last-child)::after { content: "→"; width: 22px; height: 22px; display: grid; place-items: center; position: absolute; right: -11px; top: 50%; transform: translateY(-50%); z-index: 2; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: #7a8682; font-size: 11px; font-weight: 900; }
.flow-step.risk { background: var(--red-soft); border-color: #e9c1c5; }
.flow-step span, .flow-step b { display: block; }
.flow-step span { margin-bottom: 5px; color: var(--muted); font-size: 8px; font-weight: 900; }
.flow-step b { font-size: 11px; line-height: 1.48; }
.flow-step.risk b { color: #86303a; }

.comparison { padding: 18px 22px 22px; }
.comparison-head { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 11px; }
.comparison-head h3 { margin: 0; font-size: 16px; }
.comparison-head p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.view-control { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 6px; background: #f3f5f3; }
.view-control button { min-height: 30px; padding: 6px 9px; border: 0; border-radius: 4px; background: transparent; color: #66736f; font-size: 9px; font-weight: 900; }
.view-control button.active { background: #fff; color: var(--ink); box-shadow: 0 1px 5px rgba(30, 46, 41, .1); }
.compare-grid { display: grid; grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr); align-items: stretch; }
.compare-panel { min-width: 0; border: 1px solid var(--line); }
.compare-panel > header { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border-bottom: 1px solid var(--line); }
.compare-panel.before > header { background: var(--red-soft); }
.compare-panel.after > header { background: var(--green-soft); }
.compare-panel > header span, .compare-panel > header b { display: block; }
.compare-panel > header span { margin-bottom: 3px; font-size: 9px; font-weight: 900; }
.compare-panel.before > header span, .compare-panel.before > header strong { color: var(--red); }
.compare-panel.after > header span, .compare-panel.after > header strong { color: var(--green); }
.compare-panel > header b { font-size: 12px; line-height: 1.4; }
.compare-panel > header strong { font-size: 20px; white-space: nowrap; }
.compare-body { padding: 12px 13px; }
.intervention { margin-bottom: 10px; padding: 9px 10px; border-left: 3px solid var(--green); background: #f5faf7; }
.intervention span, .intervention b { display: block; }
.intervention span { color: var(--muted); font-size: 8px; }
.intervention b { margin-top: 4px; font-size: 11px; line-height: 1.45; }
.metric-list { display: grid; }
.metric-list div { min-height: 37px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #e9edeb; font-size: 10px; }
.metric-list div:last-child { border-bottom: 0; }
.metric-list span { color: var(--muted); }
.metric-list b { text-align: right; }
.compare-panel.before .metric-list b { color: var(--red); }
.compare-panel.after .metric-list b { color: var(--green); }
.compare-result { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); color: #4e5b57; font-size: 10px; line-height: 1.55; }
.compare-arrow { display: grid; place-items: center; color: #687671; font-size: 22px; font-weight: 900; }
.compare-arrow span { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; background: #fff; }
.scenario-detail[data-view="before"] .compare-grid { grid-template-columns: 1fr; }
.scenario-detail[data-view="before"] .compare-panel.after, .scenario-detail[data-view="before"] .compare-arrow { display: none; }
.scenario-detail[data-view="after"] .compare-grid { grid-template-columns: 1fr; }
.scenario-detail[data-view="after"] .compare-panel.before, .scenario-detail[data-view="after"] .compare-arrow { display: none; }
.solution-line { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 11px; padding: 11px 13px; border: 1px solid #bad5ca; background: #f2f8f5; }
.solution-line span { color: var(--green); font-size: 9px; font-weight: 900; }
.solution-line b { font-size: 11px; line-height: 1.5; }

.market-view { border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow); }
.market-head { min-height: 134px; display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 28px; align-items: center; padding: 21px 22px; border-bottom: 1px solid var(--line); background: #fafbf9; }
.market-head h2 { margin: 0; font-size: 23px; line-height: 1.35; }
.market-head > div > p:last-child { max-width: 860px; margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.depth-guide { display: grid; grid-template-columns: repeat(7, auto); gap: 7px; align-items: center; justify-content: end; }
.depth-guide span, .depth-guide strong { min-height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 6px 9px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: #52605c; font-size: 10px; font-style: normal; }
.depth-guide strong { border-color: #d9b58c; background: var(--amber-soft); color: var(--amber); }
.depth-guide i { color: #87918e; font-size: 11px; font-style: normal; }
.depth-guide small { grid-column: 1 / -1; color: var(--muted); font-size: 9px; text-align: right; }
.market-toolbar { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: #f6f8f6; }
.market-toolbar p { margin: 0 4px 0 0; color: var(--muted); font-size: 11px; }
.market-toolbar p b { color: var(--ink); }
.market-table-wrap { max-width: 100%; overflow-x: auto; background: #fff; overscroll-behavior-inline: contain; }
.market-table-wrap:focus-visible { outline: 3px solid rgba(40, 93, 143, .28); outline-offset: -3px; }
.market-table { width: 100%; min-width: 1360px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.market-table caption { width: 1px; height: 1px; position: absolute; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.market-table .col-type { width: 112px; }
.market-table .col-products { width: 205px; }
.market-table .col-users { width: 135px; }
.market-table .col-tasks { width: 160px; }
.market-table .col-risks { width: 175px; }
.market-table .col-control { width: 170px; }
.market-table .col-opportunity { width: 225px; }
.market-table .col-evidence { width: 178px; }
.market-table th, .market-table td { min-width: 0; padding: 13px 12px; vertical-align: top; border-right: 1px solid #e3e7e5; border-bottom: 1px solid var(--line); text-align: left; overflow-wrap: anywhere; }
.market-table th:last-child, .market-table td:last-child { border-right: 0; }
.market-table thead th { position: sticky; top: 0; z-index: 3; background: #edf1ee; color: #43504c; font-size: 10px; line-height: 1.45; font-weight: 900; }
.market-table thead th:first-child { left: 0; z-index: 4; }
.market-table tbody th { position: sticky; left: 0; z-index: 2; background: #f8faf8; }
.market-table tbody tr:last-child th, .market-table tbody tr:last-child td { border-bottom: 0; }
.market-table tbody tr:hover td, .market-table tbody tr:hover th { background-color: #fbfdfb; }
.market-table td p { margin: 0; color: #4e5a57; font-size: 11px; line-height: 1.62; }
.mobile-label { display: none; }
.market-type { display: grid; gap: 7px; }
.market-type > span { color: #89938f; font-size: 9px; font-weight: 900; }
.market-type > b { font-size: 12px; line-height: 1.42; }
.market-type .group-tag { width: max-content; }
.market-products { align-content: start; }
.market-products i { font-size: 9px; line-height: 1.4; }
.market-risk { color: #81343d !important; }
.control-cell { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 6px 8px; align-items: start; }
.control-cell span { color: var(--muted); font-size: 8px; font-weight: 900; }
.control-cell b { color: #354440; font-size: 10px; line-height: 1.52; }
.market-opportunity { padding-left: 9px; border-left: 3px solid var(--green); color: #275749 !important; font-weight: 700; }
.market-evidence { padding: 8px 9px; border: 1px solid #cbdcd5; background: #f3f8f5; color: #2b5d4e !important; font-weight: 700; }

@media (max-width: 1080px) {
  .intro { grid-template-columns: 1fr; gap: 18px; }
  .workspace { grid-template-columns: 270px minmax(0, 1fr); }
  .agent-context { grid-template-columns: 160px 200px minmax(0, 1fr); }
  .market-head { grid-template-columns: 1fr; gap: 16px; }
  .depth-guide { justify-content: start; }
  .depth-guide small { text-align: left; }
}

@media (max-width: 900px) {
  .app-header { padding: 10px 16px; flex-wrap: wrap; }
  .brand { min-width: 0; }
  .header-nav { margin-left: auto; }
  .demo-label { display: none; }
  .page-main { padding: 22px 16px 40px; }
  .workspace { min-height: 0; grid-template-columns: 1fr; }
  .scenario-nav { border-right: 0; border-bottom: 1px solid var(--line); }
  .scenario-nav > header { min-height: 52px; }
  .scenario-list { display: flex; overflow-x: auto; overscroll-behavior-inline: contain; }
  .scenario-item { width: 230px; min-width: 230px; border-right: 1px solid var(--line); border-bottom: 0; }
  .scenario-item.active { box-shadow: inset 0 -4px 0 var(--green); }
  .agent-context { grid-template-columns: 1fr 1fr; }
  .agent-context > div:nth-child(2) { border-right: 0; }
  .agent-context > div:last-child { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .action-flow { grid-template-columns: 1fr 1fr; gap: 8px; }
  .flow-step { border: 1px solid var(--line); }
  .flow-step:not(:last-child)::after { display: none; }
  .compare-grid { grid-template-columns: 1fr; gap: 10px; }
  .compare-arrow { height: 26px; transform: rotate(90deg); }
  .compare-arrow span { width: 28px; height: 28px; }
  .market-table-wrap { overflow: visible; }
  .market-table, .market-table tbody, .market-table tr { width: 100%; min-width: 0; display: block; }
  .market-table colgroup, .market-table thead { display: none; }
  .market-table tbody tr { padding: 0 16px; border-bottom: 3px solid var(--canvas); }
  .market-table tbody tr:last-child { border-bottom: 0; }
  .market-table tbody th, .market-table tbody td { width: 100%; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; position: static; padding: 12px 0; border-right: 0; border-bottom: 1px solid #e5e9e7; background: #fff; }
  .market-table .mobile-label { display: block; color: var(--muted); font-size: 9px; font-weight: 900; line-height: 1.45; }
  .market-table tbody tr:hover td, .market-table tbody tr:hover th { background: #fff; }
  .market-type { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .market-type > span { padding-top: 1px; }
  .market-type .group-tag { align-self: center; }
}

@media (max-width: 640px) {
  .app-header { gap: 9px; }
  .brand-copy small { display: none; }
  .header-nav { width: 100%; order: 3; margin: 0; overflow-x: auto; }
  .header-nav button, .nav-disabled { flex: 0 0 auto; white-space: nowrap; }
  .page-main { padding: 18px 10px 32px; }
  .intro { padding-bottom: 18px; }
  .intro h1 { font-size: 28px; }
  .intro-copy { font-size: 13px; }
  .reading-guide { grid-template-columns: 1fr; }
  .reading-guide div { display: grid; grid-template-columns: 24px 80px minmax(0, 1fr); gap: 7px; align-items: center; border-right: 0; border-bottom: 1px solid var(--line); }
  .reading-guide div:last-child { border-bottom: 0; }
  .reading-guide span { margin: 0; }
  .reading-guide small { margin: 0; }
  .toolbar { align-items: flex-start; flex-direction: column; }
  .segment-control { width: 100%; overflow-x: auto; }
  .segment-control button { flex: 1; }
  .toolbar p { margin-left: 5px; }
  .scenario-item { width: 210px; min-width: 210px; }
  .detail-head { grid-template-columns: 1fr; padding: 17px 14px; }
  .detail-head h2 { font-size: 21px; }
  .detail-navigation { justify-content: flex-end; }
  .agent-context { grid-template-columns: 1fr; }
  .agent-context > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .agent-context > div:last-child { grid-column: auto; border-top: 0; border-bottom: 0; }
  .task-quote { grid-template-columns: 1fr; padding: 14px; }
  .task-quote p { font-size: 14px; }
  .problem-row { grid-template-columns: 1fr; }
  .problem-block { padding: 15px 14px; }
  .problem-block:first-child { border-right: 0; border-bottom: 1px solid var(--line); }
  .flow-section, .comparison { padding: 15px 14px; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .action-flow { grid-template-columns: 1fr; }
  .comparison-head { align-items: flex-start; flex-direction: column; }
  .view-control { width: 100%; }
  .view-control button { flex: 1; }
  .compare-panel > header { align-items: flex-start; }
  .compare-panel > header strong { font-size: 18px; }
  .solution-line { grid-template-columns: 1fr; }
  .market-head { padding: 17px 14px; }
  .market-head h2 { font-size: 20px; }
  .depth-guide { grid-template-columns: repeat(7, auto); gap: 4px; overflow-x: auto; }
  .depth-guide span, .depth-guide strong { min-height: 28px; padding: 5px 7px; }
  .market-toolbar { align-items: flex-start; flex-direction: column; }
  .market-toolbar p { margin-left: 5px; }
  .market-table tbody tr { padding: 0 12px; }
  .market-table tbody th, .market-table tbody td { grid-template-columns: 1fr; gap: 6px; }
  .market-type { grid-template-columns: auto minmax(0, 1fr) auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Security operations briefing visual refresh */
body {
  background: var(--canvas);
  font-feature-settings: "tnum" 1;
}

.app-header {
  min-height: 70px;
  padding: 10px 30px;
  border-top: 3px solid var(--green-bright);
  border-bottom: 1px solid #cfd8d4;
  background: #fbfcfb;
  box-shadow: 0 6px 20px rgba(20, 37, 31, .06);
}
.brand { min-width: 210px; gap: 12px; }
.brand-mark {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  position: relative;
  border-radius: 8px;
  background: var(--forest);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 6px 14px rgba(19, 44, 35, .18);
  font-size: 17px;
}
.brand-mark::after {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  right: -2px;
  bottom: -2px;
  border: 2px solid #fbfcfb;
  border-radius: 50%;
  background: var(--green-bright);
}
.brand-copy b { font-size: 16px; }
.brand-copy small { margin-top: 3px; font-size: 10px; }
.header-nav { gap: 8px; }
.header-nav button {
  min-height: 40px;
  padding: 9px 13px;
  border-radius: 6px;
  color: #4f5d58;
  font-size: 12px;
  transition: color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.header-nav button:hover { transform: translateY(-1px); }
.header-nav button.active {
  border-color: #b9d4c9;
  background: #e8f5ef;
  color: var(--green);
  box-shadow: inset 0 -3px 0 var(--green), 0 4px 10px rgba(18, 83, 62, .08);
}
.nav-disabled {
  min-height: 40px;
  padding: 9px 11px;
  border-style: solid;
  border-color: #dce1df;
  background: #f1f3f2;
}
.demo-label {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 8px 11px;
  border-color: #dfc98e;
  background: #fff4d9;
  box-shadow: inset 3px 0 0 #d6972f;
}

.page-main { width: min(1480px, 100%); padding: 34px 30px 64px; }
.intro {
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 48px;
  align-items: center;
  padding: 16px 2px 30px;
}
.intro > div:first-child {
  padding-left: 20px;
  border-left: 4px solid var(--green);
}
.eyebrow { margin-bottom: 9px; color: var(--green); font-size: 11px; }
.intro h1 { font-size: 40px; line-height: 1.16; }
.intro-copy { max-width: 850px; margin-top: 12px; color: #5e6b67; font-size: 15px; line-height: 1.75; }
.reading-guide {
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  border: 0;
  background: transparent;
}
.reading-guide div {
  min-height: 92px;
  position: relative;
  padding: 13px 10px 10px;
  border: 0;
  border-top: 2px solid #c9d4d0;
  background: transparent;
}
.reading-guide div:not(:last-child)::after {
  content: "";
  width: 18px;
  height: 2px;
  position: absolute;
  top: -2px;
  right: -18px;
  background: #c9d4d0;
}
.reading-guide span {
  width: 30px;
  height: 30px;
  margin: -29px 0 11px;
  border: 4px solid var(--canvas);
  background: var(--forest);
  color: #fff;
  box-shadow: 0 5px 12px rgba(19, 44, 35, .16);
  font-size: 11px;
}
.reading-guide b { font-size: 13px; }
.reading-guide small { margin-top: 5px; font-size: 10px; line-height: 1.5; }

.toolbar, .market-toolbar {
  min-height: 62px;
  padding: 10px 14px;
  background: #fff;
}
.toolbar {
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}
.toolbar p, .market-toolbar p { font-size: 11px; }
.segment-control { gap: 6px; }
.segment-control button {
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 6px;
  font-size: 11px;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.segment-control button:hover { transform: translateY(-1px); }
.segment-control button.active {
  border-color: #abcabf;
  background: #edf8f3;
  box-shadow: inset 0 -2px 0 var(--green), 0 4px 10px rgba(22, 72, 55, .08);
}

.workspace {
  min-height: 760px;
  grid-template-columns: 278px minmax(0, 1fr);
  overflow: hidden;
  border: 0;
  border-radius: 0 0 8px 8px;
  background: #fff;
  box-shadow: var(--shadow);
}
.scenario-nav {
  border-right: 0;
  background: var(--forest);
  color: #fff;
}
.scenario-nav > header {
  min-height: 76px;
  padding: 18px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  background: var(--forest-2);
}
.scenario-nav > header span { color: #83cdb3; font-size: 10px; }
.scenario-nav > header b { margin-top: 6px; font-size: 14px; }
.scenario-list { padding: 8px 0; }
.scenario-item {
  min-height: 78px;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  color: rgba(255, 255, 255, .9);
  transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.scenario-item:hover {
  background: rgba(255, 255, 255, .08);
  transform: translateX(2px);
}
.scenario-item.active {
  background: #f8fbf9;
  color: var(--ink);
  box-shadow: inset 5px 0 0 var(--green-bright), 0 10px 20px rgba(4, 24, 17, .16);
}
.scenario-number {
  width: 40px;
  height: 40px;
  border-color: rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .07);
  color: #a8c9bd;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 10px;
}
.scenario-item.active .scenario-number {
  border-color: #77cdb0;
  background: #dff4ec;
  color: var(--green);
}
.scenario-item b { font-size: 13px; }
.scenario-item small { margin-top: 5px; color: rgba(255, 255, 255, .55); font-size: 10px; }
.scenario-item.active small { color: #65716d; }

.scenario-detail {
  --scene-accent: var(--green);
  --scene-soft: var(--green-soft);
  overflow: hidden;
  background: #fff;
}
.scenario-detail[data-scenario="coding"] { --scene-accent: #2f6f9d; --scene-soft: #eaf3fa; }
.scenario-detail[data-scenario="rag"] { --scene-accent: #6856a3; --scene-soft: #f0eef8; }
.scenario-detail[data-scenario="browser"] { --scene-accent: #a06a1c; --scene-soft: #fff4e2; }
.scenario-detail[data-scenario="data"] { --scene-accent: #2d7082; --scene-soft: #e9f4f6; }
.scenario-detail[data-scenario="research"] { --scene-accent: #0d7254; --scene-soft: #e5f5ee; }
.scenario-detail[data-scenario="medical"] { --scene-accent: #b33a46; --scene-soft: #fff0f1; }
.scenario-detail[data-scenario="legal"] { --scene-accent: #74566d; --scene-soft: #f4eff3; }
.scenario-detail[data-scenario="finance"] { --scene-accent: #4d7b38; --scene-soft: #edf5e9; }
.scenario-detail[data-scenario="industrial"] { --scene-accent: #9a5a2b; --scene-soft: #fff1e7; }
.detail-head {
  min-height: 164px;
  position: relative;
  padding: 28px 28px 24px;
  border-bottom: 0;
  background: #fff;
}
.detail-head::before {
  content: "";
  height: 5px;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background: var(--scene-accent);
}
.detail-kicker { margin-bottom: 11px; }
.group-tag, .scene-position { min-height: 26px; padding: 5px 8px; font-size: 10px; }
.scene-position { border-color: #d7dfdc; background: #f7f9f8; }
.detail-head h2 { max-width: 950px; font-size: 29px; line-height: 1.3; }
.plain-conclusion {
  max-width: 900px;
  margin-top: 13px;
  padding: 10px 13px;
  border-left: 4px solid var(--scene-accent);
  border-radius: 4px;
  background: var(--scene-soft);
  color: #35433f;
  font-size: 13px;
}
.detail-navigation { gap: 8px; }
.icon-button {
  width: 42px;
  height: 42px;
  border-color: #cfd9d5;
  border-radius: 7px;
  background: #f8faf9;
  font-size: 18px;
  transition: transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.icon-button:hover { border-color: var(--green); background: var(--forest); color: #fff; transform: translateY(-2px); }

.agent-context {
  grid-template-columns: 190px 245px minmax(0, 1fr);
  border-top: 1px solid #e5eae8;
  border-bottom: 0;
  background: #f5f8f6;
}
.agent-context > div { padding: 18px 20px; border-right-color: #dce4e0; }
.agent-context span { margin-bottom: 7px; color: #70807a; font-size: 10px; }
.agent-context b { font-size: 13px; line-height: 1.55; }
.product-list { gap: 6px; }
.product-list i {
  padding: 5px 7px;
  border-color: transparent;
  border-radius: 5px;
  background: #fff;
  color: #42524c;
  box-shadow: inset 0 0 0 1px #dce4e0;
  font-size: 10px;
}

.task-quote {
  min-height: 94px;
  grid-template-columns: 110px minmax(0, 1fr);
  position: relative;
  overflow: hidden;
  padding: 24px 28px;
  border: 0;
  background: var(--forest-2);
  color: #fff;
}
.task-quote::after {
  content: "指令";
  position: absolute;
  right: 28px;
  top: 17px;
  color: rgba(255, 255, 255, .055);
  font-family: inherit;
  font-size: 58px;
  font-weight: 900;
  line-height: 1;
}
.task-quote span { position: relative; z-index: 1; color: #73d9b5; font-size: 11px; }
.task-quote p { position: relative; z-index: 1; font-size: 18px; line-height: 1.58; }

.problem-row {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 16px;
  padding: 24px 28px;
  border-bottom: 0;
  background: #fff;
}
.problem-block {
  min-height: 130px;
  padding: 20px 20px;
  border: 0;
  border-radius: 7px;
  background: #f5f7f6;
}
.problem-block:first-child {
  border: 0;
  border-left: 5px solid var(--red);
  background: var(--red-soft);
}
.section-label { margin-bottom: 9px; font-size: 10px; }
.problem-block h3 { font-size: 19px; line-height: 1.5; }
.problem-block p { font-size: 13px; line-height: 1.72; }

.flow-section {
  padding: 25px 28px 28px;
  border: 0;
  background: #f4f7f5;
}
.section-heading { margin-bottom: 19px; }
.section-heading h3 { font-size: 18px; }
.section-heading p { font-size: 10px; }
.action-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; position: relative; }
.action-flow::before {
  content: "";
  height: 2px;
  position: absolute;
  top: 18px;
  right: 6%;
  left: 6%;
  z-index: 0;
  background: #c8d3cf;
}
.flow-step {
  min-height: 112px;
  position: relative;
  z-index: 1;
  padding: 22px 17px 16px;
  border: 0;
  border-top: 4px solid #86a9c3;
  border-radius: 7px;
  background: #fff;
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease;
}
.flow-step:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(22, 39, 33, .12); }
.flow-step::before {
  content: "";
  width: 12px;
  height: 12px;
  position: absolute;
  top: -10px;
  left: 18px;
  border: 4px solid #f4f7f5;
  border-radius: 50%;
  background: #5f8fb2;
}
.flow-step:not(:last-child)::after { display: none; }
.flow-step.risk {
  border-color: var(--red);
  background: #fff5f6;
  box-shadow: 0 10px 24px rgba(179, 58, 70, .1);
}
.flow-step.risk::before { background: var(--red); }
.flow-step span { margin-bottom: 9px; font-size: 9px; }
.flow-step b { font-size: 13px; line-height: 1.52; }

.comparison { padding: 28px; background: #fff; }
.comparison-head { margin-bottom: 18px; }
.comparison-head h3 { font-size: 20px; }
.comparison-head p { margin-top: 6px; font-size: 11px; }
.view-control { padding: 4px; border-color: #d2dad7; background: #eef2f0; }
.view-control button { min-height: 34px; padding: 7px 11px; font-size: 10px; transition: background-color .2s ease, color .2s ease; }
.view-control button.active { color: var(--green); box-shadow: 0 4px 10px rgba(25, 57, 46, .1); }
.compare-grid { grid-template-columns: minmax(0, 1fr) 66px minmax(0, 1.06fr); }
.compare-panel {
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line), 0 8px 20px rgba(24, 42, 36, .06);
}
.compare-panel.before { background: #fffafb; }
.compare-panel.after {
  margin-top: -4px;
  margin-bottom: 4px;
  background: #fbfffd;
  box-shadow: inset 0 0 0 2px #7bc3a8, 0 14px 28px rgba(13, 114, 84, .12);
}
.compare-panel > header { min-height: 84px; padding: 15px 17px; border-bottom: 0; }
.compare-panel.before > header { background: #fde8ea; }
.compare-panel.after > header { background: #def2e9; }
.compare-panel > header span { margin-bottom: 5px; font-size: 10px; }
.compare-panel > header b { font-size: 14px; }
.compare-panel > header strong { font-size: 30px; }
.compare-body { padding: 16px 17px 18px; }
.intervention { margin-bottom: 12px; padding: 12px 13px; border-left-width: 4px; background: #edf8f3; }
.intervention span { font-size: 9px; }
.intervention b { margin-top: 5px; font-size: 12px; }
.metric-list div { min-height: 44px; font-size: 11px; }
.compare-result { margin-top: 12px; padding-top: 12px; font-size: 11px; line-height: 1.65; }
.compare-arrow { color: #fff; }
.compare-arrow span {
  width: 44px;
  height: 44px;
  border: 0;
  background: var(--forest);
  box-shadow: 0 8px 18px rgba(18, 45, 35, .2);
  font-size: 20px;
}
.solution-line {
  grid-template-columns: 130px minmax(0, 1fr);
  min-height: 68px;
  margin-top: 18px;
  padding: 16px 18px;
  border: 0;
  border-radius: 7px;
  background: var(--forest-2);
  box-shadow: inset 5px 0 0 var(--green-bright), 0 10px 24px rgba(18, 45, 35, .13);
}
.solution-line span { color: #72dab5; font-size: 10px; }
.solution-line b { color: #fff; font-size: 13px; line-height: 1.65; }

.market-view {
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.market-head {
  min-height: 160px;
  padding: 28px;
  border-bottom-color: rgba(255, 255, 255, .12);
  background: var(--forest);
  color: #fff;
}
.market-head .eyebrow { color: #77d8b6; }
.market-head h2 { font-size: 28px; }
.market-head > div > p:last-child { color: rgba(255, 255, 255, .66); font-size: 12px; }
.depth-guide span, .depth-guide strong {
  min-height: 36px;
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 11px;
}
.depth-guide strong { border-color: #e4bd73; background: #fff0c9; color: #7a4b05; }
.depth-guide i { color: #89aa9e; }
.depth-guide small { color: rgba(255, 255, 255, .58); font-size: 10px; }
.market-toolbar { border-bottom-color: #cfd8d4; }
.market-table thead th {
  top: 0;
  padding-top: 15px;
  padding-bottom: 15px;
  border-right-color: rgba(255, 255, 255, .12);
  background: #213b32;
  color: #fff;
  font-size: 10px;
}
.market-table tbody th { background: #f0f4f2; }
.market-table tbody tr:nth-child(even) td { background: #f8faf9; }
.market-table tbody tr { transition: box-shadow .2s ease; }
.market-table tbody tr:hover { box-shadow: inset 4px 0 0 var(--green); }
.market-table tbody tr:hover td, .market-table tbody tr:hover th { background-color: #f1f7f4; }
.market-table th, .market-table td { padding: 15px 13px; border-right-color: #dce3e0; border-bottom-color: #dce3e0; }
.market-table td p { font-size: 11px; line-height: 1.68; }
.market-table td:nth-child(5) { background: #fff8f8; }
.market-table td:nth-child(7) { background: #f0f9f4; }
.market-table td:nth-child(8) { background: #f3f7fb; }
.market-type > span { color: var(--green); font-size: 10px; }
.market-type > b { font-size: 13px; }
.market-products i {
  padding: 5px 7px;
  background: #edf2ef;
  box-shadow: none;
  font-size: 9px;
}
.market-risk { padding-left: 9px; border-left: 3px solid #d4656f; }
.control-cell span { color: #71817b; font-size: 9px; }
.control-cell b { font-size: 10px; line-height: 1.6; }
.market-opportunity { padding: 2px 0 2px 10px; border-left-width: 4px; }
.market-evidence {
  padding: 10px;
  border: 0;
  border-left: 4px solid #4d8fbc;
  border-radius: 4px;
  background: #fff;
  color: #28556e !important;
  box-shadow: 0 5px 12px rgba(45, 98, 160, .07);
}

#scenarioView:not([hidden]), .market-view:not([hidden]) { animation: panel-enter .28s ease both; }
.scenario-detail > * { animation: detail-enter .3s ease both; }
.scenario-detail > :nth-child(2) { animation-delay: .025s; }
.scenario-detail > :nth-child(3) { animation-delay: .05s; }
.scenario-detail > :nth-child(4) { animation-delay: .075s; }
.scenario-detail > :nth-child(5) { animation-delay: .1s; }
.scenario-detail > :nth-child(6) { animation-delay: .125s; }
.market-table tbody tr { animation: row-enter .28s ease both; }
.market-table tbody tr:nth-child(2) { animation-delay: .025s; }
.market-table tbody tr:nth-child(3) { animation-delay: .05s; }
.market-table tbody tr:nth-child(4) { animation-delay: .075s; }
.market-table tbody tr:nth-child(5) { animation-delay: .1s; }
.market-table tbody tr:nth-child(n+6) { animation-delay: .125s; }

@keyframes panel-enter {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes detail-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes row-enter {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1080px) {
  .intro { grid-template-columns: 1fr; gap: 28px; }
  .reading-guide { max-width: 720px; margin-top: 8px; }
  .workspace { grid-template-columns: 255px minmax(0, 1fr); }
  .agent-context { grid-template-columns: 170px 210px minmax(0, 1fr); }
  .market-head { grid-template-columns: 1fr; gap: 22px; }
  .depth-guide { justify-content: start; }
}

@media (max-width: 900px) {
  .app-header { padding: 10px 16px; }
  .page-main { padding: 26px 16px 48px; }
  .workspace { grid-template-columns: 1fr; border-radius: 0 0 8px 8px; }
  .scenario-nav { border-bottom: 0; }
  .scenario-nav > header { min-height: 58px; padding: 13px 16px; }
  .scenario-list { padding: 0; scroll-snap-type: x proximity; }
  .scenario-item { width: 235px; min-width: 235px; scroll-snap-align: start; border-right: 1px solid rgba(255, 255, 255, .1); }
  .scenario-item.active { box-shadow: inset 0 -5px 0 var(--green-bright); }
  .detail-head { padding: 25px 22px 22px; }
  .agent-context { grid-template-columns: 1fr 1fr; }
  .task-quote, .problem-row, .flow-section, .comparison { padding-right: 22px; padding-left: 22px; }
  .action-flow { grid-template-columns: 1fr 1fr; }
  .compare-grid { grid-template-columns: 1fr; gap: 12px; }
  .compare-panel.after { margin: 0; }
  .compare-arrow { height: 34px; }
  .compare-arrow span { width: 36px; height: 36px; }
  .market-table tbody tr { padding: 0 16px; border-bottom: 6px solid var(--canvas); }
  .market-table tbody th {
    width: calc(100% + 32px);
    margin-left: -16px;
    padding: 15px 16px;
    background: var(--forest);
    color: #fff;
  }
  .market-table tbody th .mobile-label { color: #7bd6b7; }
  .market-table tbody th .market-type > span { color: #7bd6b7; }
  .market-table tbody th .market-type > b { color: #fff; }
  .market-table tbody td { padding: 14px 0; background: #fff; }
  .market-table tbody tr:nth-child(even) td { background: #fff; }
  .market-table tbody td:nth-child(5) { background: #fff8f8; }
  .market-table tbody td:nth-child(7) { background: #f0f9f4; }
  .market-table tbody td:nth-child(8) { background: #f3f7fb; }
}

@media (max-width: 640px) {
  .app-header { min-height: 64px; }
  .brand-mark { width: 36px; height: 36px; flex-basis: 36px; }
  .header-nav { padding-bottom: 2px; }
  .header-nav button, .nav-disabled { min-height: 38px; }
  .page-main { padding: 22px 10px 38px; }
  .intro { gap: 24px; padding: 10px 2px 24px; }
  .intro > div:first-child { padding-left: 14px; }
  .intro h1 { font-size: 32px; }
  .intro-copy { font-size: 14px; }
  .reading-guide { display: flex; gap: 12px; overflow-x: auto; padding: 10px 2px 4px; scroll-snap-type: x proximity; }
  .reading-guide div { min-width: 180px; scroll-snap-align: start; }
  .toolbar, .market-toolbar { padding: 10px; }
  .detail-head { padding: 23px 16px 18px; }
  .detail-head h2 { font-size: 23px; }
  .plain-conclusion { font-size: 12px; }
  .agent-context { grid-template-columns: 1fr; }
  .agent-context > div { padding: 15px 16px; }
  .task-quote {
    min-height: 118px;
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 20px 16px;
  }
  .task-quote p { font-size: 16px; }
  .problem-row { grid-template-columns: 1fr; gap: 10px; padding: 16px; }
  .problem-block { min-height: 0; padding: 17px 16px; }
  .problem-block:first-child { border-left: 5px solid var(--red); }
  .problem-block h3 { font-size: 17px; }
  .flow-section { padding: 20px 16px; }
  .action-flow { grid-template-columns: 1fr; gap: 11px; }
  .action-flow::before { display: none; }
  .flow-step { min-height: 0; padding: 17px 15px; }
  .flow-step::before { display: none; }
  .comparison { padding: 20px 16px; }
  .comparison-head { align-items: stretch; }
  .compare-panel > header strong { font-size: 26px; }
  .solution-line { grid-template-columns: 1fr; gap: 7px; padding: 15px 16px; }
  .market-head { padding: 22px 16px; }
  .market-head h2 { font-size: 23px; }
  .depth-guide { padding-bottom: 4px; }
  .market-table tbody tr { padding: 0 14px; }
  .market-table tbody th {
    width: calc(100% + 28px);
    margin-left: -14px;
    padding: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
  }
}

/* Coding Agent high-fidelity prototype entry */
.header-nav .prototype-nav {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 11px;
  border: 1px solid #9cc9b8;
  border-radius: 6px;
  background: #eef8f4;
  color: var(--forest);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.header-nav .prototype-nav:hover { transform: translateY(-1px); border-color: var(--green); background: #e2f4ec; }
.header-nav .prototype-nav small { padding: 2px 4px; border-radius: 3px; background: var(--forest); color: #fff; font-size: 8px; }
.prototype-entry {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-top: 10px;
  padding: 14px 16px;
  border: 1px solid #94c9b6;
  border-left: 5px solid var(--green-bright);
  border-radius: 6px;
  background: #f2faf6;
  color: var(--forest);
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.prototype-entry:hover { transform: translateY(-1px); background: #e9f7f0; box-shadow: 0 8px 18px rgba(17, 75, 56, .1); }
.prototype-entry span { color: var(--green); font-size: 10px; font-weight: 900; }
.prototype-entry b { font-size: 12px; line-height: 1.5; }
.prototype-entry strong { padding: 8px 10px; border-radius: 5px; background: var(--forest); color: #fff; font-size: 10px; white-space: nowrap; }

@media (max-width: 900px) {
  .header-nav .prototype-nav { flex: 0 0 auto; }
}

@media (max-width: 640px) {
  .prototype-entry { grid-template-columns: 1fr; gap: 7px; }
  .prototype-entry strong { justify-self: start; }
}