/* Layout aligned with the approved dashboard section references (15.07.2026). */
body { background: #f5f7f4; color: #171b20; }
.topbar { grid-template-columns: auto 1fr; min-height: 66px; padding: 8px 34px; background: rgba(250,252,249,.97); }
.topbar nav { justify-content: flex-end; align-items: center; gap: 14px; }
.topbar nav a { font-size: 13px; }
.topbar nav a.current { border: 1px solid rgba(65,170,55,.25); background: var(--green-soft); color: var(--green-dark); }
.app-shell { display: block; max-width: 1760px; padding: 22px 30px 18px; }
.page-head { grid-template-columns: minmax(0,1fr) 310px; align-items: center; gap: 34px; padding: 0 2px 14px; }
.page-head .eyebrow { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.page-head .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.page-head h1 { margin: 8px 0 0; font-size: clamp(28px,2.5vw,40px); line-height: 1.02; letter-spacing: -.045em; }
.page-head p:not(.eyebrow) { max-width: 1050px; font-size: 16px; line-height: 1.35; }
.data-slice { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 11px 14px; color: inherit; text-align: left; cursor: pointer; }
.data-slice:hover { border-color: var(--green); }
.data-slice>span { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.data-slice>span:last-child { border-bottom: 0; }
.data-slice small { color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.data-slice strong { text-align: right; font-size: 13px; }

.kpi-grid { grid-template-columns: repeat(9,minmax(0,1fr)); gap: 8px; margin-bottom: 8px; }
.kpi-card { appearance: none; min-width: 0; min-height: 116px; align-content: stretch; border: 1px solid var(--line); border-top: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: 9px; padding: 11px 12px; color: inherit; text-align: left; cursor: pointer; transition: transform .15s ease,border-color .15s ease,box-shadow .15s ease; }
.kpi-card:hover { transform: translateY(-2px); border-color: rgba(65,170,55,.55); box-shadow: 0 7px 18px rgba(30,70,25,.09); }
.kpi-card:focus-visible { outline: 3px solid rgba(36,105,189,.4); outline-offset: 2px; }
.kpi-card.is-current { border-color: rgba(65,170,55,.62); background: var(--green-soft); box-shadow: inset 0 0 0 1px rgba(65,170,55,.14); }
.kpi-card.finance { border-left-color: var(--green); }
.kpi-card.sales { border-left-color: var(--yellow); }
.kpi-label { min-height: 38px; font-size: 9px; line-height: 1.25; }
.kpi-value { align-self: end; overflow-wrap: anywhere; font-size: 24px; }
.kpi-note { overflow: hidden; font-size: 9px; line-height: 1.25; text-overflow: ellipsis; }
.tabs { position: static; padding: 8px 0 12px; background: transparent; }
.tab { min-height: 40px; padding: 8px 13px; font-size: 11px; }
.utility-tabs { justify-content: flex-end; padding: 4px 0 10px; border-bottom: 0; }
.utility-tabs .tab { min-height: 34px; border-style: dashed; background: transparent; color: var(--muted); padding: 6px 11px; }
.utility-tabs .tab[aria-selected="true"] { border-style: solid; color: #fff; }
.content-panel { margin-top: 0; }

.reference-panel { margin-bottom: 12px; border: 1px solid var(--line)!important; border-radius: 10px!important; background: #fff!important; box-shadow: none!important; overflow: hidden!important; }
.reference-panel-head { display: grid; grid-template-columns: minmax(300px,1fr) minmax(620px,auto); align-items: start; gap: 20px; padding: 13px 14px; border-bottom: 1px solid var(--line); background: #fff; }
.reference-panel-head h2 { margin: 0; font-size: 22px; letter-spacing: -.025em; }
.reference-panel-head .eyebrow+h2 { margin-top: 4px; }
.reference-panel-head p { max-width: 760px; margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.panel-filters { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 7px; }
.filtered-panel-head { grid-template-columns: 1fr; }
.filtered-panel-head .panel-filters { justify-content: flex-start; }
.panel-filters select,.filter-pill,.filter-reset { min-height: 36px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); padding: 7px 11px; font-size: 11px; font-weight: 800; cursor: pointer; }
.panel-filters select { min-width: 190px; }
.filter-pill[aria-pressed="true"] { border-color: var(--green); background: var(--green-soft); color: var(--green-dark); }
.filter-pill.filter-red[aria-pressed="true"] { border-color: var(--red); background: var(--red-soft); color: var(--red); }
.filter-pill.filter-yellow[aria-pressed="true"] { border-color: var(--yellow); background: var(--yellow-soft); color: #8f5b02; }
.filter-reset { justify-self: end; }
.filter-pill:focus-visible,.filter-reset:focus-visible,.panel-filters select:focus-visible { outline: 3px solid rgba(36,105,189,.35); outline-offset: 1px; }
.stage-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.stage-stats article { min-height: 70px; border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; }
.stage-stats span { display: block; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.stage-stats strong { display: block; margin-top: 7px; font-size: 24px; line-height: 1; }

.desktop-projects.table-scroll,.summary-table.table-scroll { overflow-x: auto; }
.desktop-projects table { min-width: 1420px; table-layout: auto; }
.desktop-projects th,.summary-table th { position: static; padding: 10px 9px; background: #f5f8f5; color: #657269; font-size: 9px; }
.desktop-projects th { white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
.desktop-projects td,.summary-table td { padding: 9px; background: #fff; }
.desktop-projects .project-row>td { font-size: 11px; line-height: 1.32; }
.desktop-projects .project-title { font-size: 13px; line-height: 1.22; }
.desktop-projects .project-sub { font-size: 9px; line-height: 1.3; }
.desktop-projects .project-row>td>strong { font-size: 12px; }
.desktop-projects .status { font-size: 11px; }
.desktop-projects .milestone>span:not(.milestone-delta) { font-size: 11px; }
.milestone-actual { font-weight: 900!important; }
.milestone-actual.actual-fact { color: #2d8b2c; }
.milestone-actual.actual-forecast { color: #cf332b; }
.reference-row>td:first-child { box-shadow: inset 4px 0 #a4ada6; }
.reference-row.tone-red>td:first-child { box-shadow: inset 4px 0 var(--red); }
.reference-row.tone-yellow>td:first-child { box-shadow: inset 4px 0 var(--yellow); }
.reference-row.tone-green>td:first-child { box-shadow: inset 4px 0 var(--green); }
.reference-row.tone-blue>td:first-child { box-shadow: inset 4px 0 var(--blue); }
.project-row:hover td,.reference-row:hover td { background: #fbfcfb; }
.branch-group-bar { display: grid!important; grid-template-columns: minmax(280px,1fr); align-items: center; gap: 14px; }
.branch-toggle { appearance: none; display: flex; align-items: center; gap: 9px; min-width: 0; border: 0; background: transparent; color: inherit; padding: 0; text-align: left; cursor: pointer; }
.branch-toggle>span:not(.branch-chevron) { display: grid; gap: 2px; min-width: 0; }
.branch-toggle strong { color: var(--green-dark); font-size: 13px; }
.branch-toggle small { color: var(--muted); font-size: 10px; font-weight: 700; }
.branch-chevron { width: 24px; height: 24px; display: grid; flex: 0 0 24px; place-items: center; border: 1px solid rgba(65,170,55,.25); border-radius: 50%; background: #fff; color: var(--green-dark); font-size: 16px; transition: transform .15s ease; }
.branch-toggle[aria-expanded="false"] .branch-chevron { transform: rotate(-90deg); }
.branch-toggle:focus-visible,.table-detail-toggle:focus-visible { outline: 3px solid rgba(36,105,189,.35); outline-offset: 2px; }
.table-detail-toggle { appearance: none; border: 0; background: transparent; color: var(--green-dark); padding: 3px 0; font-size: 11px; font-weight: 900; cursor: pointer; }
.table-detail-toggle::before { content: "▸"; display: inline-block; margin-right: 5px; transition: transform .15s ease; }
.table-detail-toggle[aria-expanded="true"]::before { transform: rotate(90deg); }
.stage-table-pre .project-detail-row td { padding: 0!important; background: #f7faf7!important; }
.table-project-detail { width: 100%; padding: 14px 18px 15px; border-left: 4px solid var(--green); box-sizing: border-box; }
.table-project-detail .detail-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.table-project-detail .typed-dates { margin-top: 12px; }
.final-stage-date { display: grid; gap: 3px; min-width: 0; }
.final-stage-source { color: var(--green-dark); font-size: 8px; font-weight: 900; letter-spacing: .02em; line-height: 1.15; text-transform: uppercase; }
.final-stage-date .milestone { grid-template-columns: repeat(2,minmax(0,max-content)); align-items: baseline; gap: 2px 8px; white-space: normal; }
.final-stage-date .milestone>span:not(.milestone-delta) { font-size: 10px; line-height: 1.2; white-space: nowrap; }
.final-stage-date .milestone-delta { margin-top: 0; font-size: 11px; }
.milestone-delta { display: inline-flex; align-items: baseline; gap: 4px; width: max-content; grid-template: none; margin-top: 4px; border: 0; border-radius: 0; background: transparent; padding: 0; box-shadow: none; font-size: 12px; font-weight: 900; line-height: 1.15; }
.milestone-delta .delta-symbol { display: inline; width: auto; height: auto; border-radius: 0; background: transparent!important; color: inherit!important; font-size: inherit; line-height: inherit; }
.milestone-delta .delta-value { font-size: inherit; line-height: inherit; }
.milestone-delta.red { border: 0; background: transparent; color: #cf332b; }
.milestone-delta.yellow { border: 0; background: transparent; color: #d98200; }
.milestone-delta.green { border: 0; background: transparent; color: #2d8b2c; }
.committee-statuses { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.committee-statuses>div { display: grid; align-content: start; gap: 2px; min-width: 0; }
.committee-statuses>div+div { border-left: 1px solid var(--line); padding-left: 8px; }
.committee-statuses .badge { width: max-content; max-width: 100%; font-size: 9px; }
.committee-stage-label { color: var(--muted); font-size: 9px; font-weight: 900; line-height: 1.25; text-transform: uppercase; }
.ik-plan-status { display: grid; justify-items: start; gap: 2px; }
.stage-table-pre table { min-width: 1540px; table-layout: fixed; }
.stage-table-pre th:nth-child(1) { width: 100px; }
.stage-table-pre th:nth-child(2) { width: 270px; }
.stage-table-pre th:nth-child(3),.stage-table-pre th:nth-child(4),.stage-table-pre th:nth-child(5) { width: 180px; }
.stage-table-pre th:nth-child(6) { width: 260px; }
.stage-table-pre th:nth-child(7) { width: 160px; }
.stage-table-pre th:nth-child(8) { width: 210px; }
.stage-table-pre .branch-row td { padding: 10px 14px; }
.stage-table-pre .project-row td:nth-child(2) { padding-left: 14px; }
.stage-table-pre .project-title { overflow-wrap: anywhere; }
.stage-table-design table { min-width: 1160px; table-layout: fixed; }
.stage-table-design th:nth-child(1) { width: 100px; }
.stage-table-design th:nth-child(2) { width: 260px; }
.stage-table-design th:nth-child(3),.stage-table-design th:nth-child(4) { width: 160px; }
.stage-table-design th:nth-child(5) { width: 220px; }
.stage-table-design th:nth-child(6) { width: 260px; }
.stage-table-realization table { min-width: 1270px; table-layout: fixed; }
.stage-table-realization th:nth-child(1) { width: 100px; }
.stage-table-realization th:nth-child(2) { width: 260px; }
.stage-table-realization th:nth-child(3) { width: 230px; }
.stage-table-realization th:nth-child(4) { width: 210px; }
.stage-table-realization th:nth-child(5) { width: 220px; white-space: normal; }
.stage-table-realization th:nth-child(6) { width: 250px; }
.project-receipts-triple { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.project-receipts-triple > span { display: grid; gap: 2px; min-width: 0; }
.project-receipts-triple small { color: var(--muted); font-size: 9px; font-weight: 800; line-height: 1; }
.project-receipts-triple strong { font-size: 12px; white-space: nowrap; }
.stage-table-operation table { min-width: 1200px; table-layout: fixed; }
.stage-table-operation th:nth-child(1) { width: 100px; }
.stage-table-operation th:nth-child(2) { width: 260px; }
.stage-table-operation th:nth-child(n+3):nth-child(-n+5) { width: 210px; }
.stage-table-operation th:nth-child(6) { width: 210px; }
.stage-table-suspended table { min-width: 1050px; table-layout: fixed; }
.stage-table-suspended th:nth-child(1) { width: 100px; }
.stage-table-suspended th:nth-child(2) { width: 250px; }
.stage-table-suspended th:nth-child(3),.stage-table-suspended th:nth-child(4) { width: 150px; }
.stage-table-suspended th:nth-child(5) { width: 170px; }
.stage-table-suspended th:nth-child(6) { width: 230px; }
.desktop-projects .project-code { white-space: nowrap; font-size: 12px; }
.stage-table-pre td,.stage-table-design td,.stage-table-realization td,.stage-table-operation td,.stage-table-suspended td { padding-block: 8px; }
.stage-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 11px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; font-weight: 800; }
.stage-legend span { display: inline-flex; align-items: center; gap: 6px; }
.stage-legend i { width: 9px; height: 9px; border-radius: 50%; background: #a4ada6; }
.stage-legend .red i { background: var(--red); }
.stage-legend .yellow i { background: var(--yellow); }
.stage-legend .green i { background: var(--green); }
.portfolio-detail { scroll-margin-top: 12px; }
.portfolio-detail table { min-width: 1350px; }

@media (max-width: 1380px) {
  .app-shell { padding-inline: 20px; }
  .kpi-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .reference-panel-head { grid-template-columns: 1fr; }
  .panel-filters { justify-content: flex-start; }
}

@media (max-width: 940px) {
  .topbar { grid-template-columns: 1fr auto; padding-inline: 14px; }
  .topbar nav a { display: none; }
  .topbar nav a.current { display: inline-flex; }
  .page-head { grid-template-columns: 1fr; gap: 14px; }
  .data-slice { max-width: none; }
  .kpi-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (min-width: 621px) and (max-width: 1100px) {
  html,body { max-width: 100%; overflow-x: hidden; }
  .app-shell { max-width: 100%; padding: 16px 14px 18px; }
  .page-head { gap: 18px; }
  .page-head h1 { font-size: clamp(28px,3.6vw,34px); }
  .utility-tabs { justify-content: flex-start; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
  .reference-panel { min-width: 0; }
  .reference-panel-head { padding: 12px; }
  .panel-filters { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); width: 100%; }
  .panel-filters select,.panel-filters .filter-pill,.panel-filters .filter-reset { min-width: 0; width: 100%; }
  .stage-stats { grid-template-columns: repeat(4,minmax(0,1fr)); padding: 9px 12px; }

  .desktop-projects.table-scroll,
  .summary-table.table-scroll,
  .responsive-detail-table.table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #9ab596 #edf2ed;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }
  .desktop-projects.table-scroll::-webkit-scrollbar,
  .summary-table.table-scroll::-webkit-scrollbar,
  .responsive-detail-table.table-scroll::-webkit-scrollbar { height: 10px; }
  .desktop-projects.table-scroll::-webkit-scrollbar-track,
  .summary-table.table-scroll::-webkit-scrollbar-track,
  .responsive-detail-table.table-scroll::-webkit-scrollbar-track { background: #edf2ed; }
  .desktop-projects.table-scroll::-webkit-scrollbar-thumb,
  .summary-table.table-scroll::-webkit-scrollbar-thumb,
  .responsive-detail-table.table-scroll::-webkit-scrollbar-thumb { border: 2px solid #edf2ed; border-radius: 999px; background: #9ab596; }
  .desktop-projects.table-scroll::before,
  .summary-table.table-scroll::before,
  .responsive-detail-table.table-scroll::before {
    content: "← Проведите по таблице, чтобы увидеть все столбцы →";
    position: sticky;
    left: 0;
    z-index: 7;
    display: block;
    width: max-content;
    max-width: calc(100vw - 52px);
    padding: 6px 10px;
    color: var(--green-dark);
    background: #eef6ed;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.25;
  }

  .desktop-projects th,.desktop-projects td { padding-inline: 7px; }
  .desktop-projects .project-row>td { font-size: 10px; }
  .desktop-projects .project-title { font-size: 12px; }
  .desktop-projects .project-row>th:nth-child(1),
  .desktop-projects thead th:nth-child(1),
  .desktop-projects .project-row>td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 5;
    background: #fff;
  }
  .desktop-projects thead th:nth-child(1) { z-index: 6; background: #f5f8f5; }
  .desktop-projects thead th:nth-child(2),
  .desktop-projects .project-row>td:nth-child(2) {
    position: sticky;
    left: 88px;
    z-index: 4;
    background: #fff;
    box-shadow: 10px 0 12px -13px rgba(32,45,35,.8);
  }
  .desktop-projects thead th:nth-child(2) { z-index: 6; background: #f5f8f5; }
  .desktop-projects .project-row:hover>td:nth-child(1),
  .desktop-projects .project-row:hover>td:nth-child(2) { background: #fbfcfb; }

  .stage-table-pre table { min-width: 1308px; }
  .stage-table-pre th:nth-child(1) { width: 88px; }
  .stage-table-pre th:nth-child(2) { width: 230px; }
  .stage-table-pre th:nth-child(3),.stage-table-pre th:nth-child(4),.stage-table-pre th:nth-child(5) { width: 150px; }
  .stage-table-pre th:nth-child(6) { width: 220px; }
  .stage-table-pre th:nth-child(7) { width: 135px; }
  .stage-table-pre th:nth-child(8) { width: 185px; }
  .stage-table-design table { min-width: 1038px; }
  .stage-table-design th:nth-child(1) { width: 88px; }
  .stage-table-design th:nth-child(2) { width: 230px; }
  .stage-table-design th:nth-child(3),.stage-table-design th:nth-child(4) { width: 150px; }
  .stage-table-design th:nth-child(5) { width: 190px; }
  .stage-table-design th:nth-child(6) { width: 230px; }
  .stage-table-realization table { min-width: 1113px; }
  .stage-table-realization th:nth-child(1) { width: 88px; }
  .stage-table-realization th:nth-child(2) { width: 230px; }
  .stage-table-realization th:nth-child(3) { width: 195px; }
  .stage-table-realization th:nth-child(4) { width: 185px; }
  .stage-table-realization th:nth-child(5) { width: 195px; }
  .stage-table-realization th:nth-child(6) { width: 220px; }
  .stage-table-operation table { min-width: 1063px; }
  .stage-table-operation th:nth-child(1) { width: 88px; }
  .stage-table-operation th:nth-child(2) { width: 230px; }
  .stage-table-operation th:nth-child(n+3):nth-child(-n+5) { width: 185px; }
  .stage-table-operation th:nth-child(6) { width: 190px; }
  .stage-table-suspended table { min-width: 968px; }
  .stage-table-suspended th:nth-child(1) { width: 88px; }
  .stage-table-suspended th:nth-child(2) { width: 230px; }
  .stage-table-suspended th:nth-child(3),.stage-table-suspended th:nth-child(4) { width: 140px; }
  .stage-table-suspended th:nth-child(5) { width: 160px; }
  .stage-table-suspended th:nth-child(6) { width: 210px; }

  .first-version-summary table { min-width: 1300px; }
  .first-version-summary th:nth-child(1) { width: 160px; }
  .first-version-summary th:nth-child(n+2):nth-child(-n+5) { width: 130px; }
  .first-version-summary th:nth-child(6) { width: 210px; }
  .first-version-summary th:nth-child(7) { width: 175px; }
  .first-version-summary th:nth-child(8),.first-version-summary th:nth-child(9) { width: 120px; }
  .first-version-summary thead th:first-child,
  .first-version-summary tbody tr>td:first-child {
    position: sticky;
    left: 0;
    z-index: 4;
    background: #fff;
    box-shadow: 10px 0 12px -13px rgba(32,45,35,.8);
  }
  .first-version-summary thead th:first-child { z-index: 6; background: #f5f8f5; }
  .portfolio-detail table { min-width: 1160px; }
}

@media (min-width: 621px) and (max-width: 820px) {
  .app-shell { padding-inline: 10px; }
  .panel-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .stage-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 620px) {
  .topbar { min-height: 56px; }
  .topbar nav a.current { display: none; }
  .app-shell { padding: 14px 10px; }
  .page-head { padding-bottom: 12px; }
  .page-head h1 { margin-top: 6px; font-size: 26px; line-height: 1.05; }
  .page-head p:not(.eyebrow) { font-size: 12px; }
  .data-slice>span { grid-template-columns: 82px 1fr; }
  .kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .kpi-card { display: grid!important; min-height: 88px; }
  .kpi-card[data-kpi="all"] { order: 1; }
  .kpi-card[data-kpi="active"] { order: 2; }
  .kpi-card[data-kpi="budget"] { order: 3; }
  .kpi-card[data-kpi="sales"] { order: 4; }
  .kpi-card[data-kpi="pre"] { order: 5; }
  .kpi-card[data-kpi="design"] { order: 6; }
  .kpi-card[data-kpi="realization"] { order: 7; }
  .kpi-card[data-kpi="operation"] { order: 8; }
  .kpi-card[data-kpi="suspended"] { order: 9; }
  .kpi-label { min-height: auto; }
  .kpi-value { font-size: 20px; }
  .tabs { padding-bottom: 9px; }
  .reference-panel-head { display: block; padding: 11px; }
  .panel-filters { display: grid; grid-template-columns: 1fr 1fr; margin-top: 10px; }
  .panel-filters select { min-width: 0; width: 100%; }
  .filter-pill,.filter-reset { padding-inline: 8px; }
  .stage-stats { grid-template-columns: repeat(2,1fr); padding: 9px; }
  .stage-stats article { min-height: 62px; }
  .desktop-projects { display: none!important; }
  .mobile-projects { display: grid!important; gap: 9px; padding: 9px; }
  .mobile-projects .mobile-branch-head { position: static; margin: 3px -9px -1px; padding: 10px 12px; border-block: 1px solid #dce8dc; background: #eef6ed; }
  .mobile-branch-toggle { width: 100%; }
  .mobile-branch-toggle strong { flex: 1; }
  .mobile-branch-toggle>span:last-child { color: var(--muted); font-size: 10px; font-weight: 800; }
  .pre-mobile-sequence { display: grid; gap: 7px; margin-bottom: 10px; }
  .pre-sequence-step { position: relative; display: grid; gap: 4px; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 9px 9px 9px 35px; background: #fbfcfb; }
  .pre-sequence-step::before { content: attr(data-sequence-step); position: absolute; left: 8px; top: 8px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--green-soft); color: var(--green-dark); font-size: 10px; font-weight: 900; }
  .pre-sequence-step>span:first-child { color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; }
  .pre-supporting-info { grid-template-columns: 1fr; margin-bottom: 10px; }
  .project-card { border-left: 4px solid #a4ada6; }
  .project-card h3 { font-size: 16px; }
  .project-card.tone-red { border-left-color: var(--red); }
  .project-card.tone-yellow { border-left-color: var(--yellow); }
  .project-card.tone-green { border-left-color: var(--green); }
  .project-card.tone-blue { border-left-color: var(--blue); }
  .responsive-detail-table { overflow: visible; padding: 9px; }
  .responsive-detail-table table,.responsive-detail-table tbody { display: block; min-width: 0; }
  .responsive-detail-table thead { display: none; }
  .responsive-detail-table tr { display: grid; gap: 5px; margin-bottom: 9px; border: 1px solid var(--line); border-left: 4px solid #a4ada6; border-radius: 9px; padding: 9px; }
  .responsive-detail-table tr.tone-red { border-left-color: var(--red); }
  .responsive-detail-table tr.tone-yellow { border-left-color: var(--yellow); }
  .responsive-detail-table tr.tone-green { border-left-color: var(--green); }
  .responsive-detail-table td { display: grid; grid-template-columns: 105px 1fr; gap: 8px; border: 0; padding: 2px; }
  .responsive-detail-table td::before { content: attr(data-label); color: var(--muted); font-size: 9px; font-weight: 900; text-transform: uppercase; }
  .summary-table { max-height: none; }
}
.data-mode-banner {
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid #d6b65c;
  border-radius: 10px;
  background: #fff7d9;
  color: #6b5310;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .03em;
  text-align: center;
}

.data-mode-banner[hidden] { display: none; }