:root {
        --ink: #18324a;
        --muted: #66798b;
        --line: #dce5ed;
        --soft: #f0f3f6;
        --canvas: #f4f7f9;
        --blue: #22679e;
        --blue-soft: #e9f2fa;
        --green-soft: #e8f4ef;
        --red: #b33b49;
        --amber: #986b16;
        --amber-soft: #fff8e8;
      }
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        background: var(--canvas);
        color: var(--ink);
        font-size: 14px;
      }
      button,
      select {
        font: inherit;
        color: inherit;
      }
      button {
        cursor: pointer;
      }
      header {
        border-bottom: 1px solid var(--line);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
      }
      h2 {
        font-size: 18px;
        margin: 0 0 4px;
      }
      small {
        color: var(--muted);
      }
      .header-tools,
      .tools,
      .tabs {
        display: flex;
        align-items: center;
        gap: 7px;
        flex-wrap: wrap;
      }
      .title-inline {
        display: flex;
        align-items: baseline;
        gap: 12px;
        flex-wrap: wrap;
      }
      .title-inline h2 {
        margin: 0;
      }
      .title-inline small {
        font-size: 12px;
      }
      .planning-badge {
        padding: 5px 8px;
        border-radius: 4px;
        background: var(--amber-soft);
        color: var(--amber);
        font-size: 12px;
        font-weight: 700;
      }
      select,
      .plain-button,
      .tab {
        padding: 7px 10px;
        background: #fff;
        border: 1px solid #c9d5df;
        border-radius: 5px;
      }
      #year-control,
      #month-control {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
      }
      #year-control select,
      #month-control select {
        appearance: none;
        -webkit-appearance: none;
        border: 1px solid transparent;
        border-radius: 4px;
        background: transparent;
        padding: 6px 5px;
        color: var(--ink);
        cursor: pointer;
      }
      #year-control select:hover,
      #month-control select:hover {
        background: #f1f5f8;
        border-color: #e3e9ee;
      }
      #year-control select:focus-visible,
      #month-control select:focus-visible {
        outline: 2px solid #8eb4d4;
        outline-offset: 1px;
        background: #fff;
      }
      .plain-button:hover,
      .tab:hover {
        background: #f0f5f8;
      }
      .tab.active {
        background: #264f76;
        border-color: #264f76;
        color: #fff;
        font-weight: 700;
      }
      .page-nav {
        display: flex;
        gap: 5px;
        margin-left: 8px;
      }
      .page-nav button {
        padding: 7px 11px;
        border: 1px solid #c9d5df;
        background: #fff;
        border-radius: 5px;
      }
      .page-nav button.active {
        background: #264f76;
        color: #fff;
        border-color: #264f76;
      }
      main {
        display: grid;
        grid-template-columns: minmax(600px, 1fr) minmax(600px, 1fr);
      }
      section {
        min-width: 0;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 7px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
      }
      .panel-head {
        min-height: 66px;
        padding: 12px 14px;
        border-bottom: 1px solid var(--line);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
      }
      .sub-head {
        min-height: 52px;
        background: #fbfcfd;
      }
      .scroll {
        overflow: auto;
        flex: 1;
        scrollbar-gutter: stable;
      }
      table {
        border-collapse: separate;
        border-spacing: 0;
        width: 100%;
        font-variant-numeric: tabular-nums;
      }
      th,
      td {
        padding: 11px 8px;
        border-bottom: 1px solid var(--soft);
        text-align: right;
        white-space: nowrap;
      }
      th:first-child,
      td:first-child {
        text-align: left;
      }
      thead th {
        position: sticky;
        top: 0;
        z-index: 4;
        background: #edf3f7;
        font-weight: 700;
        border-bottom: 1px solid #dce5ed;
      }
      tbody th {
        position: sticky;
        left: 0;
        z-index: 2;
        background: #fff;
        font-weight: 400;
      }
      .table-main th:first-child {
        min-width: 150px;
      }
      .table-main td {
        min-width: 54px;
      }
      .sum th,
      .sum td {
        background: var(--blue-soft);
        font-weight: 700;
      }
      .sum th {
        z-index: 3;
      }
      .end th,
      .end td {
        background: var(--green-soft);
        font-weight: 700;
      }
      .end th {
        z-index: 3;
      }
      .group td {
        padding: 8px;
        background: #f5f7f9;
        text-align: left;
        color: #5f7385;
        font-size: 12px;
        font-weight: 700;
      }
      .negative {
        color: var(--red) !important;
      }
      .empty {
        color: #a0abb4;
      }
      .profit-button {
        width: 100%;
        padding: 2px 3px;
        border: 0;
        background: transparent;
        color: var(--blue);
        text-align: right;
        text-decoration: underline;
        text-underline-offset: 3px;
      }
      .chosen {
        background: #d6eafb !important;
        box-shadow: inset 0 -3px #3d82bb;
      }
      .panel-foot {
        padding: 9px 14px;
        border-top: 1px solid var(--line);
        font-size: 12px;
        color: #607589;
        background: #fcfdfe;
      }
      .detail {
        min-width: 1450px;
      }
      .detail th,
      .detail td {
        padding: 11px 8px;
      }
      .detail thead th:first-child,
      .detail tbody td:first-child {
        position: sticky;
        left: 0;
        z-index: 5;
        min-width: 74px;
        background: #fff;
        box-shadow: 1px 0 #dfe7ee;
      }
      .detail thead th:first-child {
        z-index: 8;
        background: #edf3f7;
      }
      .detail .sum td:first-child {
        background: var(--blue-soft);
        z-index: 6;
      }
      .project-profit-detail thead th:nth-child(2),
      .project-profit-detail tbody td:nth-child(2) {
        position: sticky;
        left: 74px;
        z-index: 4;
        min-width: 220px;
        background: #fff;
        box-shadow: 1px 0 #dfe7ee;
      }
      .project-profit-detail thead th:nth-child(2) {
        z-index: 7;
        background: #edf3f7;
      }
      .project-profit-detail .sum td:nth-child(2),
      .project-profit-detail .end td:nth-child(2) {
        background: var(--blue-soft);
        z-index: 6;
      }
      .project-button {
        border: 0;
        background: transparent;
        padding: 0;
        color: #205f94;
        font-weight: 700;
        text-align: left;
      }
      .type {
        display: block;
        margin-top: 4px;
        font-size: 11px;
        color: var(--muted);
        font-weight: 400;
      }
      .profit {
        font-weight: 700;
        background: #f3f7fb;
      }
      .breakdown td {
        position: static !important;
        min-width: 0 !important;
        padding: 0 !important;
        background: #f8fafc !important;
        box-shadow: none !important;
        white-space: normal;
      }
      .breakdown-box {
        padding: 12px 18px 14px 30px;
        display: grid;
        grid-template-columns: minmax(230px, 1fr) minmax(280px, 1.3fr);
        gap: 12px 24px;
      }
      .breakdown-title {
        margin-bottom: 7px;
        color: #50677b;
        font-size: 12px;
        font-weight: 700;
      }
      .cost-list {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 5px 12px;
        font-size: 12px;
      }
      .cost-list span:nth-child(even) {
        text-align: right;
        font-weight: 700;
      }
      .formula-strip {
        padding: 8px 11px;
        border: 1px solid #d7e4ed;
        background: #f2f7fb;
        color: #38566e;
        font-size: 12px;
      }
      .formula-strip strong {
        color: #173d5d;
      }
      .forecast-head {
        background: #edf7f3 !important;
        color: #245f4e;
      }
      .info {
        display: inline-flex;
        padding: 5px 8px;
        border-radius: 4px;
        background: #f2f6f9;
        color: #5d7183;
        font-size: 12px;
      }
      .expanded main {
        grid-template-columns: 1fr;
      }
      .expanded #left {
        display: none;
      }
      #catalog-screen,
      #profit-screen {
        display: none;
        grid-template-columns: 1fr;
      }
      .project-list-head {
        align-items: flex-start;
      }
      .project-filters {
        display: flex;
        gap: 7px;
        align-items: center;
        flex-wrap: wrap;
      }
      .project-filters input {
        min-width: 240px;
        padding: 8px 10px;
        border: 1px solid #c9d5df;
        border-radius: 5px;
        font: inherit;
      }
      .project-list {
        font-size: 13px;
        min-width: 1100px;
      }
      .project-list th,
      .project-list td {
        padding: 10px 9px;
      }
      .project-list thead th {
        top: 0;
      }
      .project-list th:first-child,
      .project-list td:first-child {
        min-width: 110px;
      }
      .project-list td:nth-child(2) {
        min-width: 105px;
        text-align: left;
      }
      .project-list td:nth-child(3) {
        min-width: 210px;
        text-align: left;
        color: #185d91;
        font-weight: 700;
      }
      .project-list td:nth-child(4) {
        text-align: center;
      }
      .project-list td:nth-child(5),
      .project-list td:nth-child(6) {
        min-width: 100px;
      }
      .project-list td:nth-child(7),
      .project-list td:nth-child(8),
      .project-list td:nth-child(9) {
        min-width: 145px;
      }
      .project-list td:last-child {
        min-width: 180px;
        text-align: left;
        white-space: normal;
      }
      .profit-screen-table {
        font-size: 12px;
      }
      .profit-screen-table th,
      .profit-screen-table td {
        padding: 9px 7px;
      }
      .profit-screen-table thead tr:nth-child(1) th {
        top: 0;
      }
      .profit-screen-table thead tr:nth-child(2) th {
        top: 38px;
      }
      .profit-screen-table thead tr:nth-child(3) th {
        top: 76px;
      }
      .profit-screen-table th:first-child,
      .profit-screen-table td:first-child {
        position: sticky;
        left: 0;
        z-index: 5;
        background: #fff;
        box-shadow: 1px 0 #dfe7ee;
      }
      .profit-screen-table thead th:first-child {
        z-index: 8;
        background: #edf3f7;
      }
      .profit-screen-table th:nth-child(2),
      .profit-screen-table td:nth-child(2) {
        position: sticky;
        left: 115px;
        z-index: 4;
        min-width: 230px;
        background: #fff;
        box-shadow: 1px 0 #dfe7ee;
        text-align: left;
      }
      .profit-screen-table thead th:nth-child(2) {
        z-index: 7;
        background: #edf3f7;
      }
      .profit-screen-table .subtotal td {
        background: var(--blue-soft);
        font-weight: 700;
      }
      .profit-screen-table .subtotal td:first-child,
      .profit-screen-table .grand-total td:first-child {
        background: #dceafa;
      }
      .profit-screen-table .grand-total td {
        background: var(--green-soft);
        font-weight: 700;
      }
      .profit-screen-table .data-missing {
        color: #9aa6b3;
        font-size: 11px;
      }
      .profit-screen-table .contract-value,
      .profit-screen-table .sales-value {
        font-variant-numeric: tabular-nums;
      }
      .profit-project-name {
        border: 0;
        padding: 0;
        background: none;
        text-align: left;
        color: #205f94;
        font-weight: 700;
      }
      .project-meta {
        display: block;
        margin-top: 4px;
        color: var(--muted);
        font-size: 11px;
        font-weight: 400;
      }
      .note-detail {
        white-space: normal !important;
      }
      .kind-tag,
      .status-tag,
      .note-tag {
        display: inline-block;
        padding: 4px 7px;
        border-radius: 5px;
        font-size: 11px;
        font-weight: 700;
      }
      .kind-tag {
        background: #edf3f9;
        color: #315c84;
      }
      .kind-general {
        background: #f7f1e6;
        color: #8b641a;
      }
      .kind-goods {
        background: #f1eef9;
        color: #65539b;
      }
      .status-progress {
        background: #e6f4ef;
        color: #13745d;
      }
      .status-done {
        background: #edf2f5;
        color: #667887;
      }
      .note-stack {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
      }
      .note-tag {
        background: #e9f7f2;
        color: #087966;
        border: 1px solid #9fd8c7;
      }
      .note-warn {
        background: #fff8ea;
        color: #9b5b08;
        border: 1px solid #f0c57b;
      }
      .note-alert {
        background: #fff0ef;
        color: #b13a35;
        border: 1px solid #eaa19d;
      }
      .list-total {
        color: #607589;
        font-size: 12px;
      }
      @media (max-width: 1250px) {
        main {
          height: auto;
          grid-template-columns: 1fr;
        }
        section {
          min-height: 570px;
        }
        header {
          align-items: flex-start;
        }
      }
      @media (max-width: 700px) {
        main {
          padding: 6px;
          display: block;
        }
        section {
          margin-bottom: 8px;
          min-height: 540px;
        }
        header {
          padding: 10px;
        }
        .breakdown-box {
          grid-template-columns: 1fr;
        }
      }
      @media (min-width: 2200px) {
        body {
          font-size: 16px;
        }
        .table-main {
          font-size: 15px;
        }
        th,
        td {
          padding: 14px 10px;
        }
      }

      /* Selected project: subtle dashed axis guides, no arrowheads. */
      #profit-screen svg .jh-selection-guides {
        pointer-events: none;
      }
      #profit-screen svg .jh-selection-guides .jh-guide-line {
        stroke: #244f70;
        stroke-width: 1.4;
        stroke-dasharray: 6 4;
        opacity: 1;
      }
      #profit-screen svg .jh-selection-guides .jh-guide-bg {
        fill: #fff;
        stroke: none;
      }
      #profit-screen svg .jh-selection-guides .jh-guide-value {
        font-size: 12px;
        font-weight: 700;
        dominant-baseline: middle;
        text-anchor: middle;
      }

      header {
        min-height: 56px;
        padding: 7px 16px;
        background: #24496b;
        color: #fff;
      }
      header small {
        color: #d4e0ea;
      }
      header .info {
        background: #365b7b;
        color: #edf4f9;
      }
      header .page-nav button {
        border-color: #91a8bc;
        background: #f8fbfd;
        color: #18324a;
      }
      header .page-nav button.active {
        border-color: #c7d7e5;
        background: #dce8f1;
        color: #18324a;
      }
      header #year-control select,
      header #month-control select {
        color: #fff;
      }
      header #year-control select option,
      header #month-control select option {
        color: #18324a;
        background: #fff;
      }
      h1 {
        font-size: 21px;
        margin: 0;
      }
      main {
        height: calc(100vh - 56px);
      }
      #catalog-screen,
      #profit-screen {
        height: calc(100vh - 56px);
      }
      main {
        padding: 10px 16px;
        gap: 0;
        background: #fff;
      }
      main > section {
        border: 0;
        border-radius: 0;
        box-shadow: none;
      }
      main > #right {
        border-left: 1px solid var(--line);
        padding-left: 16px;
      }
      main > section > .panel-head {
        border-bottom: 1px solid var(--line);
        padding-left: 8px;
        padding-right: 8px;
      }
      .project-viewbar {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 7px 12px;
        border-bottom: 1px solid var(--line);
        background: #f8fafc;
      }
      #profit-screen .project-viewbar,
      #catalog-screen .project-viewbar {
        display: none !important;
      }
      .brand-nav .project-viewbar {
        position: relative;
        padding: 0 0 0 13px;
        border: 0;
        background: transparent;
      }
      .brand-nav .project-viewbar::before {
        content: "";
        position: absolute;
        left: 0;
        top: 3px;
        bottom: 3px;
        width: 1px;
        background: #53718b;
      }
      .brand-nav .project-view {
        position: relative;
        border: 0;
        border-radius: 0;
        background: transparent;
      }
      .brand-nav .project-view:hover {
        background: transparent;
        color: #fff;
      }
      .brand-nav .project-view.active {
        border: 0;
        background: transparent;
      }
      #profit-screen > section > .panel-head:not(.sub-head) {
        display: none;
      }
      #profit-screen .formula-strip,
      #profit-screen .panel-foot {
        display: none;
      }
      .brand-nav {
        display: flex;
        align-items: center;
        white-space: nowrap;
      }
      .dashboard-controls {
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
      }
      .dashboard-controls .info {
        padding: 4px 7px;
        background: #365b7b;
        color: #edf4f9;
      }
      .header-page-link {
        padding: 3px 0;
        border: 0;
        background: transparent;
        font: inherit;
        cursor: pointer;
      }
      .header-page-link.active {
        font-weight: 700;
        text-underline-offset: 7px;
        text-decoration: underline;
        text-decoration-color: #a9c9e2;
      }
      .project-view {
        padding: 7px 12px;
        border: 1px solid transparent;
        border-radius: 4px;
        background: transparent;
        color: #526779;
        font: inherit;
        cursor: pointer;
      }
      .project-view:hover {
        background: #edf3f7;
      }
      .project-view.active {
        border-color: #24496b;
        background: #24496b;
        color: #fff;
        font-weight: 700;
      }
      main > #left > .panel-head h2,
      main > #right > .panel-head h2 {
        position: relative;
        padding-left: 12px;
      }
      main > #left > .panel-head h2::before,
      main > #right > .panel-head h2::before {
        content: "";
        position: absolute;
        left: 0;
        top: 3px;
        bottom: 3px;
        width: 3px;
        border-radius: 2px;
        background: #315f88;
      }
      main > #right > .panel-head h2::before {
        background: #4b9688;
      }
      .cashflow-table {
        width: 100%;
        min-width: 0;
        table-layout: fixed;
        font-size: 12px;
      }
      #income tbody th,
      #income tbody td,
      .cashflow-table tbody th,
      .cashflow-table tbody td {
        color: #4b5563;
      }
      #income tbody .sum th,
      #income tbody .sum td,
      #income tbody .end th,
      #income tbody .end td,
      .cashflow-table tbody .cash-subtotal th,
      .cashflow-table tbody .cash-subtotal td,
      .cashflow-table tbody .cash-ending th,
      .cashflow-table tbody .cash-ending td {
        color: #111;
      }
      .cashflow-table tbody .cash-opening th,
      .cashflow-table tbody .cash-opening td,
      .cashflow-table tbody .cash-change th,
      .cashflow-table tbody .cash-change td {
        color: #174f7a;
      }
      #income tbody .empty,
      .cashflow-table tbody .empty {
        color: #b8c1c9 !important;
      }
      .cashflow-table th,
      .cashflow-table td {
        padding: 9px 4px;
      }
      .cashflow-table thead th[colspan="2"] {
        text-align: center;
      }
      .cashflow-table .item-cell {
        box-shadow: 1px 0 #e1e8ee;
      }
      .cashflow-table .cash-subtotal .item-cell,
      .cashflow-table .cash-subtotal td {
        background: var(--blue-soft);
        font-weight: 700;
      }
      .cashflow-table .cash-opening .item-cell,
      .cashflow-table .cash-change .item-cell {
        color: #4b5563;
      }
      .cashflow-table tbody tr.cash-opening .item-cell,
      .cashflow-table tbody tr.cash-change .item-cell {
        color: #124d7a !important;
        font-weight: 700;
      }
      .cashflow-table .cash-ending .item-cell,
      .cashflow-table .cash-ending td {
        background: var(--green-soft);
        font-weight: 700;
      }
      @media (max-width: 1250px) {
        main,
        #catalog-screen,
        #profit-screen {
          height: auto;
        }
        main > #right {
          border-left: 0;
          border-top: 1px solid var(--line);
          padding: 14px 0 0;
        }
        header {
          align-items: center;
          flex-wrap: wrap;
        }
      }

      body {
        font-family: Pretendard, "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
      }
      .brand-nav {
        gap: 13px;
      }
      .brand-nav h1 {
        margin: 0;
        color: #c1d1df;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.01em;
      }
      .brand-nav .brand-divider {
        color: #68839b;
        margin-left: -4px;
        margin-right: -2px;
      }
      .header-page-link {
        font-size: 20px;
        font-weight: 600;
        letter-spacing: -0.02em;
        color: #829aaf;
      }
      .header-page-link:hover {
        color: #e4edf4;
      }
      .header-page-link.active {
        color: #fff;
      }
      header #year-control select:hover,
      header #month-control select:hover {
        background: #365b7b;
        border-color: #6c89a3;
      }
      header #year-control select:focus-visible,
      header #month-control select:focus-visible {
        background: #365b7b;
        border-color: transparent;
        color: #fff;
        outline: 1px solid #a9c9e2;
        outline-offset: 2px;
      }
      .dashboard-controls {
        gap: 10px;
        margin: 0 2px 0 -2px;
        padding-left: 13px;
        border-left: 1px solid #53718b;
      }
      .dashboard-controls #year-control,
      .dashboard-controls #month-control {
        font-size: 13px;
        color: #c1d1df;
      }
      .dashboard-controls #year-control select,
      .dashboard-controls #month-control select {
        font-size: 14px;
        font-weight: 600;
      }
      .brand-nav .project-viewbar {
        margin-left: 0;
        padding-left: 13px;
        gap: 4px;
      }
      .brand-nav .project-view {
        padding: 6px 8px 7px;
        color: #9fb3c4;
        font-size: 13px;
        font-weight: 500;
      }
      .brand-nav .project-view.active {
        color: #a9d0e8;
        font-weight: 600;
        box-shadow: inset 0 -1px #a9d0e8;
      }
      .brand-nav {
        position: relative;
        width: 100%;
      }
      .header-periodbar {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: none;
        align-items: center;
        gap: 2px;
        margin: 0;
        padding: 3px;
        border: 1px solid rgba(174, 198, 216, 0.17);
        border-radius: 7px;
        background: rgba(15, 39, 60, 0.24);
      }
      .header-periodbar::before {
        display: none;
      }
      .header-asof {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;
        padding: 5px 10px;
        border: 1px solid #6e8ba555;
        border-radius: 4px;
        font-size: 12px;
        line-height: 18px;
        color: #c2d4e2;
        white-space: nowrap;
      }
      .header-asof time {
        color: #fff;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
      }
      .header-period {
        padding: 6px 11px;
        border: 0;
        border-radius: 4px;
        background: transparent;
        color: #b7c8d6;
        font: inherit;
        font-size: 12px;
        white-space: nowrap;
        cursor: pointer;
      }
      .header-period:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.08);
      }
      .header-period.active {
        color: #173d5d;
        background: #e6eff6;
        font-weight: 700;
        box-shadow: 0 1px 2px rgba(7, 26, 42, 0.16);
      }
      .project-month-control {
        display: none;
        align-items: center;
        gap: 4px;
        margin-left: -1px;
        color: #b7cad9;
        font-size: 12px;
        white-space: nowrap;
      }
      .project-month-control select {
        appearance: none;
        -webkit-appearance: none;
        padding: 4px 3px;
        border: 0;
        border-bottom: 1px solid #7896ac;
        border-radius: 0;
        background: transparent;
        color: #fff;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
      }
      .project-month-control select:focus-visible {
        outline: 1px solid #a9c9e2;
        outline-offset: 2px;
        background: #365b7b;
      }
      .project-month-control option {
        background: #fff;
        color: #18324a;
      }
      #profit-screen .sub-head {
        display: none;
      }
      @media (max-width: 1450px) {
        .brand-nav {
          flex-wrap: wrap;
          white-space: normal;
        }
        .header-periodbar {
          position: static;
          left: auto;
          top: auto;
          transform: none;
          margin-left: auto;
        }
        .header-periodbar[style*="display: flex"] {
          margin-left: 0;
        }
      }
      header button:focus-visible {
        outline: 2px solid #d9e8f4;
        outline-offset: 3px;
        border-radius: 2px;
      }
      .profit-screen-table thead th {
        vertical-align: middle;
      }
      .profit-screen-table thead tr:first-child > th:nth-child(-n + 2) {
        text-align: left;
      }
      .profit-screen-table thead tr:not(:first-child) > th {
        left: auto;
        min-width: 0;
        background: #edf3f7;
        box-shadow: none;
        text-align: center;
        z-index: 4;
      }
      .profit-screen-table {
        width: 100%;
        min-width: 0 !important;
        table-layout: fixed;
      }
      .profit-screen-table col.project-kind-col {
        width: 76px;
      }
      .profit-screen-table col.project-name-col {
        width: 190px;
      }
      .profit-screen-table col.project-contract-col {
        width: 105px;
      }
      .profit-screen-table col.project-sales-col {
        width: 95px;
      }
      .profit-screen-table.life-mode col.project-sales-col {
        width: 155px;
      }
      .profit-screen-table col.project-cost-col {
        width: 74px;
      }
      .profit-screen-table col.project-profit-col {
        width: 110px;
      }
      .profit-screen-table col.project-forecast-col {
        width: 92px;
      }
      .profit-screen-table th:first-child,
      .profit-screen-table td:first-child {
        min-width: 0;
      }
      .profit-screen-table tbody td {
        min-width: 0 !important;
      }
      .profit-screen-table tbody td:nth-child(2) {
        left: 76px;
        min-width: 190px !important;
      }
      .profit-screen-table thead tr:first-child > th:nth-child(2) {
        left: 76px;
        min-width: 190px;
      }
      .profit-screen-table thead tr:first-child > th {
        top: 0;
      }
      .profit-screen-table thead tr:nth-child(2) > th {
        top: 34px;
      }
      .profit-screen-table.life-mode thead tr:nth-child(3) > th {
        top: 68px;
      }
      .profit-screen-table thead th {
        padding: 8px 6px;
        text-align: center;
        white-space: normal;
        line-height: 1.35;
        color: #24435e;
      }
      .profit-screen-table thead tr:first-child > th {
        background: #eaf1f6;
      }
      .profit-screen-table thead tr:first-child > th.forecast-head,
      .profit-screen-table thead tr:nth-child(2) > th.forecast-head {
        background: #eaf4ef !important;
        color: #315f50;
      }
      .profit-screen-table .project-kind {
        font-size: 11px;
        color: #64778a;
        white-space: normal;
      }
      .profit-screen-table .profit-project-name {
        max-width: 100%;
        font-size: 12px;
        line-height: 1.4;
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: left;
      }
      .profit-screen-table tbody td {
        padding: 10px 7px;
      }
      .profit-screen-table .breakdown td {
        white-space: normal;
      }
      .profit-screen-table .category-summary td {
        background: #e9f2fa;
        font-weight: 700;
        border-top: 1px solid #d5e2ed;
      }
      .profit-screen-table .category-summary td:first-child {
        background: #dceafa;
      }
      .profit-screen-table .group-toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #173d5d;
        font: inherit;
        font-weight: 700;
        text-align: left;
        white-space: nowrap;
      }
      .profit-screen-table .group-toggle:hover {
        color: #17649b;
      }
      .profit-screen-table .group-chevron {
        display: inline-block;
        width: 12px;
        color: #52748f;
        font-size: 12px;
      }
      .profit-screen-table .group-count {
        color: #4f6578;
        font-weight: 600;
      }
      .profit-screen-table .category-summary.is-muted td {
        background: #f4f6f8 !important;
        color: #98a4af !important;
        font-weight: 500;
      }
      .profit-screen-table .category-summary.is-muted .group-toggle,
      .profit-screen-table .category-summary.is-muted .group-chevron,
      .profit-screen-table .category-summary.is-muted .group-count {
        color: #98a4af !important;
      }
      .profit-screen-table thead th.identity-head {
        background: #e8edf2 !important;
        color: #3c5368;
      }
      .profit-screen-table thead th.cumulative-head {
        background: #dfeaf3 !important;
        color: #214767;
      }
      .profit-screen-table thead th.cumulative-subhead {
        background: #eaf1f7;
        color: #2c506d;
      }
      .profit-screen-table thead th.cumulative-detail {
        background: #f2f6f9;
        color: #425d73;
      }
      .profit-screen-table thead th.forecast-head {
        background: #e7f2ed !important;
        color: #315f50;
      }
      .profit-screen-table.life-mode tbody tr.group-project-row > td:nth-child(-n + 3) {
        background: #f8fafc;
      }
      .profit-screen-table.life-mode tbody tr.group-project-row > td:nth-child(n + 15) {
        background: #f4f9f6;
      }
      .profit-screen-table thead th.actual-profit-head {
        background: #dce9f4 !important;
        color: #174d73;
      }
      .profit-screen-table thead th.forecast-profit-head {
        background: #dcefe6 !important;
        color: #1f654e;
      }
      .profit-screen-table.life-mode tbody tr.group-project-row > td:nth-child(14) {
        background: #f0f6fb;
        color: #174d73 !important;
        font-weight: 700;
      }
      .profit-screen-table.life-mode tbody tr.group-project-row > td:nth-child(17) {
        background: #edf7f2;
        color: #1f654e !important;
        font-weight: 700;
      }
      .profit-screen-table .subtotal-cost {
        font-weight: 800;
        color: #456780;
      }
      .profit-screen-table tbody tr:not(.breakdown) > td:nth-child(n + 3) {
        text-align: right;
      }
      .profit-screen-table .amount-rate {
        display: flex;
        width: 100%;
        align-items: baseline;
        justify-content: flex-end;
        gap: 5px;
        white-space: nowrap;
      }
      .profit-screen-table .amount-rate .percent {
        color: #647b8e;
        font-size: 10px;
        font-weight: 600;
      }
      .profit-screen-table .ratio-pending {
        cursor: default;
        text-decoration: underline dotted;
        text-underline-offset: 3px;
      }
      .profit-screen-table .category-summary.is-open td {
        border-top: 2px solid #6689a6;
        border-bottom: 1px solid #b8cbd9;
      }
      .profit-screen-table .group-project-row.is-last-in-group td {
        border-bottom: 2px solid #6689a6;
      }
      .profit-screen-table .sort-heading {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 0;
        border: 0;
        background: transparent;
        color: inherit;
        font: inherit;
        font-weight: inherit;
        line-height: 1.25;
        text-align: center;
        white-space: normal;
        cursor: pointer;
      }
      .profit-screen-table .sort-heading:hover:not(:disabled) {
        color: #17649b;
        text-decoration: underline;
        text-underline-offset: 3px;
      }
      .profit-screen-table .sort-heading.is-active {
        color: #174d73;
        font-weight: 800;
      }
      .profit-screen-table .sort-heading:disabled {
        color: #8998a5;
        opacity: 0.72;
        cursor: not-allowed;
      }
      .profit-screen-table .sort-icon {
        flex: 0 0 auto;
        color: #71889a;
        font-size: 10px;
      }
      .profit-screen-table .sort-heading.is-active .sort-icon {
        color: #17649b;
      }
      .profit-screen-table .sort-pair {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        flex-wrap: wrap;
      }
      .profit-screen-table .sort-heading.rate-sort {
        font-size: 10px;
        color: #657c8f;
      }

      /* profit-accordion-style */

      /* Original dashboard and project ledger are retained; the profit table shows only cumulative values. */
      :root {
        --jh-risk: #b84853;
        --jh-warn: #c18a33;
        --jh-normal: #6f9e8b;
        --jh-unknown: #8794a2;
      }
      #profit-screen > section {
        height: 100%;
        min-height: 0;
        overflow: hidden;
      }
      #profit-screen .profit-accordion-layout {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        overflow: hidden;
        background: #fff;
      }
      #profit-screen .profit-fixed-tbl {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        max-width: 100%;
        border-bottom: 1px solid #bbcddd;
      }
      #profit-screen .profit-screen-table col.project-forecast-col {
        width: 92px;
      }
      #profit-screen .profit-screen-table thead th {
        padding: 8px 5px !important;
        font-size: 10px;
      }
      #profit-screen .profit-screen-table thead tr:first-child th {
        height: 34px;
      }
      #profit-screen .profit-screen-table thead tr:nth-child(3) th {
        height: 30px;
      }
      #profit-screen .profit-screen-table .category-summary td {
        border-bottom: 1px solid #d4e1ec;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      #profit-screen .profit-screen-table .category-summary:not(.is-open) td {
        background: #f6f9fb !important;
      }
      #profit-screen .profit-screen-table .category-summary.is-open td {
        border-top: 0;
      }
      #profit-screen .profit-screen-table .category-summary .group-toggle {
        min-width: 0;
        white-space: nowrap;
      }
      #profit-screen .profit-screen-table .category-summary .group-chevron {
        width: 12px;
      }
      #profit-screen .profit-screen-table .category-summary.is-open .group-toggle {
        color: #124e7d;
      }
      #profit-screen .profit-screen-table td {
        font-variant-numeric: tabular-nums;
      }
      #profit-screen .profit-screen-table .actual-amount {
        color: #264c69;
        font-weight: 600;
      }
      #profit-screen .profit-screen-table .money-negative {
        color: #b13f4b !important;
        font-weight: 800;
      }
      #profit-screen .profit-screen-table .data-pending {
        color: #92a0ae !important;
        font-size: 10px;
        font-weight: 400;
      }
      #profit-screen .profit-screen-table .field-muted {
        color: #899baa;
      }
      #profit-screen .profit-screen-table tbody tr.project-data-row td {
        border-bottom: 1px solid #e8edf2;
        background: #fff;
      }
      #profit-screen .profit-screen-table tbody tr.project-data-row:nth-child(2n + 1) td {
        background: #fbfcfd;
      }
      #profit-screen .profit-screen-table tbody tr.project-data-row.jh-selected > td {
        background: #e3f0fa !important;
        box-shadow: none;
      }
      #profit-screen .profit-screen-table .profit-project-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-decoration: none;
        cursor: pointer;
      }
      #profit-screen .jh-chart-fixed {
        display: flex;
        flex-direction: column;
        background: #fff;
      }
      #profit-screen .jh-chart-head {
        min-height: 37px;
        flex: 0 0 auto;
        justify-content: space-between;
      }
      #profit-screen .jh-chart-title {
        min-width: 0;
      }
      #profit-screen .jh-chart-title strong {
        font-size: 13px;
        color: #1c4465;
      }
      #profit-screen .jh-chart-title span {
        font-size: 10px;
        color: #738899;
      }
      #profit-screen .jh-chart-legend {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        color: #657b8d;
        font-size: 10px;
        justify-content: flex-end;
      }
      #profit-screen .jh-chart-legend span {
        display: inline-flex;
        align-items: center;
        gap: 4px;
      }
      #profit-screen .jh-chart-legend i {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #8295a5;
      }
      #profit-screen .jh-chart-plot {
        position: relative;
        flex: 1;
        min-height: 0;
        margin: 2px 12px 0 3px;
      }
      #profit-screen .jh-chart-plot svg {
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      #profit-screen .jh-chart-foot {
        color: #6a8091;
        font-size: 10px;
        background: #fcfdfe;
      }
      #profit-screen .jh-chart-foot .jh-missing {
        display: flex;
        align-items: center;
        gap: 5px;
        white-space: nowrap;
        min-width: 0;
        overflow: hidden;
      }
      #profit-screen .jh-missing button {
        border: 1px solid #cbd8e3;
        background: #f4f7fa;
        padding: 3px 6px;
        border-radius: 3px;
        color: #3b6281;
        cursor: pointer;
        font-size: 10px;
      }
      #profit-screen svg .jh-axis-text {
        fill: #6d859a;
        font-size: 10px;
        pointer-events: none;
      }
      #profit-screen svg .jh-axis-title {
        fill: #234a6a;
        font-size: 11px;
        font-weight: 700;
        pointer-events: none;
      }
      #profit-screen svg .jh-zone-label {
        fill: #a06f22;
        font-size: 11px;
        font-weight: 700;
        pointer-events: none;
      }
      #profit-screen svg .jh-zone-loss {
        fill: #ba505b;
      }
      #profit-screen svg .jh-threshold-marker {
        pointer-events: none;
      }
      #profit-screen svg .jh-threshold-value {
        font-size: 10px;
        font-weight: 400;
        text-anchor: middle;
        dominant-baseline: central;
      }
      #profit-screen svg .jh-label {
        fill: #3b5870;
        font-size: 13px;
        font-weight: 700;
        pointer-events: none;
      }
      #profit-screen svg .jh-label.jh-label-risk {
        fill: #a43b47;
        font-weight: 700;
      }
      #profit-screen svg .jh-label.jh-label-warn {
        fill: #a47738;
        font-weight: 600;
      }
      #profit-screen svg .jh-point {
        cursor: pointer;
        outline: none;
      }
      /* Project state remains the bubble fill. Selection uses a white gap + thin navy outer ring. */
      #profit-screen svg g.jh-point-group.jh-hover:not(.jh-selected) .jh-point {
        stroke: #315f84 !important;
        stroke-width: 2 !important;
        opacity: 1;
      }
      #profit-screen svg g.jh-point-group.jh-selected .jh-point,
      #profit-screen svg g.jh-point-group.jh-hover.jh-selected .jh-point {
        stroke: #fff !important;
        stroke-width: 2 !important;
        opacity: 1;
      }
      #profit-screen svg .jh-selection-gap,
      #profit-screen svg .jh-selection-ring {
        visibility: hidden;
        pointer-events: none;
      }
      #profit-screen svg g.jh-point-group.jh-selected .jh-selection-gap,
      #profit-screen svg g.jh-point-group.jh-selected .jh-selection-ring {
        visibility: visible;
      }
      #profit-screen .jh-scroll-under-chart {
        flex: 1;
        background: #fff;
      }
      #profit-screen .jh-scroll-under-chart .jh-inner-subtotal td {
        background: #e9f2f9 !important;
        font-weight: 800;
        color: #234e71;
        border-bottom: 2px solid #a9c1d4;
        padding: 9px 6px !important;
        height: 36px;
      }
      #profit-screen .jh-inner-note {
        background: #f4f8fa;
        color: #597083;
        font-size: 11px;
        padding: 16px 18px;
        line-height: 1.7;
        border-bottom: 1px solid #e1eaf0;
      }
      #profit-screen .jh-inline-note {
        color: #7891a5;
        font-size: 9px;
        font-weight: 500;
      }
      #profit-screen .jh-chart-empty {
        height: 100%;
        align-items: center;
        justify-content: center;
        background: #f9fbfd;
        color: #637b8e;
        font-size: 12px;
      }
      #profit-screen .jh-chart-fixed.is-unavailable .jh-chart-plot {
        display: none;
      }
      #profit-screen .jh-chart-fixed.is-unavailable .jh-chart-empty {
        display: flex;
      }
      #profit-screen .jh-chart-empty {
        display: none;
      }
      #profit-screen .jh-detail-drawer-shade {
        position: fixed;
        inset: 56px 0 0;
        z-index: 200;
      }
      #profit-screen .jh-detail-drawer-shade[hidden] {
        display: none;
      }
      #profit-screen .jh-detail-drawer {
        position: fixed;
        right: 0;
        top: 56px;
        bottom: 0;
        z-index: 201;
        border-left: 1px solid #b5c8d8;
        display: none;
        flex-direction: column;
      }
      #profit-screen .jh-detail-drawer.open {
        display: flex;
      }
      #profit-screen .jh-detail-drawer-head {
        display: flex;
        justify-content: space-between;
      }
      #profit-screen .jh-detail-drawer-head h3 {
        color: #1d496b;
      }
      #profit-screen .jh-detail-drawer-buttons {
        white-space: nowrap;
      }
      #profit-screen .jh-detail-drawer-buttons button {
        border: 1px solid #bfd0de;
        border-radius: 4px;
      }
      #profit-screen .jh-detail-drawer-body {
        flex: 1;
      }
      #profit-screen .jh-detail-metric span {
        display: block;
        margin-bottom: 6px;
      }
      #profit-screen .jh-detail-metric .jh-loss {
        color: var(--jh-risk);
      }
      #profit-screen .jh-detail-body-title {
        font-size: 13px;
        color: #284f6d;
        margin: 20px 0 9px;
        font-weight: 800;
      }
      #profit-screen .jh-detail-list {
        width: 100%;
        border-collapse: collapse;
        font-size: 12px;
      }
      #profit-screen .jh-detail-list th,
      #profit-screen .jh-detail-list td {
        padding: 9px;
        border-bottom: 1px solid #e8eef2;
        font-weight: 400;
        text-align: right;
      }
      #profit-screen .jh-detail-list th {
        text-align: left;
        color: #60768a;
      }
      #profit-screen .jh-detail-pending {
        padding: 12px;
        border: 1px dashed #cad9e3;
        border-radius: 5px;
        background: #f8fafc;
        color: #748696;
        line-height: 1.7;
      }
      @media (max-height: 830px) {
        #profit-screen .jh-chart-fixed {
          height: clamp(188px, 30vh, 248px);
          flex-basis: clamp(188px, 30vh, 248px);
        }
        #profit-screen .jh-chart-head {
          min-height: 32px;
        }
        #profit-screen .profit-screen-table .category-summary td {
          height: 29px;
          padding: 5px 6px !important;
        }
        #profit-screen .profit-screen-table thead th {
          padding: 6px 5px !important;
        }
        #profit-screen .profit-screen-table thead tr:first-child th {
          height: 29px;
        }
        #profit-screen .profit-screen-table thead tr:nth-child(2) th {
          height: 31px;
        }
        #profit-screen .profit-screen-table thead tr:nth-child(3) th {
          height: 27px;
        }
      }
      @media (max-width: 1250px) {
        #profit-screen {
          height: calc(100vh - 56px) !important;
        }
        #profit-screen > section {
          min-height: 0;
        }
        #profit-screen .jh-chart-title span {
          display: none;
        }
        #profit-screen .jh-chart-legend {
          gap: 6px;
        }
      }
      \3c style id="inline-category-accordion-style">

      /* 2026-10-13: the selected category expands immediately beneath its own summary row,
         rather than placing every category above a separate chart panel. */
      #profit-screen .profit-fixed-tbl {
        flex: 1 1 0;
        min-height: 0;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: auto;
        scrollbar-width: thin;
        border-bottom: 0;
        overscroll-behavior: contain;
      }
      #profit-screen .profit-fixed-tbl::-webkit-scrollbar {
        display: block;
        width: 8px;
        height: 8px;
      }
      #profit-screen .profit-fixed-tbl::-webkit-scrollbar-thumb {
        background: #b8cbd8;
        border-radius: 8px;
      }
      #profit-screen .profit-accordion-stage {
        z-index: 2;
        display: flex;
        flex-direction: column;
        flex: none;
        min-height: 0;
        margin: 0;
        overflow: hidden;
        background: #fff;
        box-sizing: border-box;
      }
      #profit-screen .profit-accordion-stage[hidden] {
        display: none;
      }
      #profit-screen .jh-chart-fixed {
        position: relative;
        width: 100%;
        flex-shrink: 0;
      }
      #profit-screen .jh-scroll-under-chart {
        width: 100%;
        min-height: 0;
        overflow: auto;
        scrollbar-gutter: stable;
        overscroll-behavior: contain;
      }
      #profit-screen .jh-scroll-under-chart .profit-screen-table {
        margin: 0;
      }
      #profit-screen .profit-screen-table .category-summary td {
        transition: background 0.12s;
      }
      #profit-screen .profit-screen-table .category-summary.is-open td {
        background: #dceaf5 !important;
        border-bottom: 2px solid #729bb9;
      }

      #profit-screen .profit-screen-table.life-mode col.project-sales-col {
        width: 100px;
      }
      #profit-screen .profit-screen-table col.project-cost-col {
        width: 74px;
      }
      #profit-screen .profit-screen-table thead tr:nth-child(2) th {
        height: 46px;
        white-space: normal;
        overflow-wrap: break-word;
      }
      #profit-screen .profit-screen-table .jh-sales-ratio {
        color: #264c69;
        font-weight: 700;
      }
      #profit-screen .profit-screen-table thead th.cumulative-head {
        text-align: center;
      }


      /* 2 identity + 3 contract/sales + direct total + indirect total + cost ratio + profit = 9 columns. */
      #profit-screen .profit-screen-table {
        min-width: 0 !important;
        width: 100% !important;
        table-layout: fixed !important;
      }
      #profit-screen .profit-screen-table col.project-kind-col {
        width: 6.5% !important;
      }
      #profit-screen .profit-screen-table col.project-name-col {
        width: 19.5% !important;
      }
      #profit-screen .profit-screen-table col.project-contract-col {
        width: 11% !important;
      }
      #profit-screen .profit-screen-table col.project-sales-col {
        width: 11% !important;
      }
      #profit-screen .profit-screen-table col.project-ratio-col {
        width: 10% !important;
      }
      #profit-screen .profit-screen-table col.jh-direct-col {
        width: 12% !important;
      }
      #profit-screen .profit-screen-table col.jh-indirect-col {
        width: 12% !important;
      }
      #profit-screen .profit-screen-table col.jh-costrate-col {
        width: 9% !important;
      }
      #profit-screen .profit-screen-table col.project-profit-col {
        width: 9% !important;
      }
      #profit-screen .profit-screen-table thead tr:first-child > th {
        height: 36px !important;
      }
      #profit-screen .profit-screen-table thead tr:nth-child(2) > th {
        height: 38px !important;
      }
      #profit-screen .profit-screen-table tbody tr.project-data-row:hover > td,
      #profit-screen .profit-screen-table tbody tr.project-data-row.jh-hover > td,
      #profit-screen .profit-screen-table tbody tr.project-data-row.jh-hover.jh-selected > td {
        background: var(--jh-hover-bg, rgba(57, 119, 184, 0.1)) !important;
        box-shadow:
          inset 0 1px var(--jh-hover-line, rgba(57, 119, 184, 0.36)),
          inset 0 -1px var(--jh-hover-line, rgba(57, 119, 184, 0.36)) !important;
      }
      #profit-screen .profit-screen-table tbody tr.project-data-row:hover .profit-project-name,
      #profit-screen .profit-screen-table tbody tr.project-data-row.jh-hover .profit-project-name {
        color: var(--jh-label-ink, #187357) !important;
        text-decoration: underline;
        text-underline-offset: 3px;
      }
      #profit-screen .profit-screen-table .jh-cost-rate {
        font-weight: 800;
        font-variant-numeric: tabular-nums;
      }
      #profit-screen .profit-screen-table .jh-rate-risk {
        color: #bd4e58;
      }
      #profit-screen .profit-screen-table .jh-rate-warn {
        color: #aa752d;
      }
      #profit-screen .profit-screen-table .jh-rate-normal {
        color: #187357;
      }
      #profit-screen .profit-screen-table .jh-rate-unknown {
        color: #8292a3;
      }
      #profit-screen .profit-screen-table tbody td:nth-child(8) {
        background-color: #f8fbfb;
      }
      #profit-screen .profit-screen-table th:nth-child(8) {
        white-space: normal;
      }
      @media (max-width: 1400px) {
        #profit-screen .profit-screen-table {
          font-size: 10px !important;
        }
        #profit-screen .profit-screen-table td {
          padding: 5px 4px !important;
        }
        #profit-screen .profit-screen-table .category-summary td {
          padding: 5px 4px !important;
        }
        #profit-screen .profit-screen-table .profit-project-name {
          font-size: 10px !important;
        }
      }

      /* Keep the shared column labels compact, with a single sticky row. */
      #profit-screen #profit-project-head tr > th {
        top: 0 !important;
        height: 24px !important;
        min-height: 0 !important;
        padding: 2px 5px !important;
        line-height: 16px !important;
        white-space: nowrap !important;
        overflow-wrap: normal !important;
      }
      #profit-screen #profit-project-head .sort-heading {
        min-height: 0;
        line-height: 16px;
        white-space: nowrap;
        gap: 3px;
      }

      #profit-screen .jh-chart-fixed {
        flex-basis: clamp(250px, 42vh, 460px);
      }

      #profit-screen .profit-accordion-stage {
        border-top: 0;
      }
      #profit-screen .jh-chart-fixed {
        border-bottom: 0;
      }
      #profit-screen #profit-project-head th {
        position: sticky;
        top: 0 !important;
        z-index: 8;
        border-top: 1px solid #c1d3e0;
      }
      #profit-screen #profit-project-head th:nth-child(-n + 2) {
        z-index: 10;
      }

      #profit-screen .jh-chart-foot {
        justify-content: space-between;
        height: auto;
        min-height: 32px;
        flex: 0 0 auto;
        flex-wrap: wrap;
        padding: 6px 12px;
      }
      #profit-screen .jh-chart-plot {
        margin-top: 12px;
        margin-bottom: 10px;
      }
      #profit-screen .jh-chart-head {
        flex-wrap: wrap;
      }
      #profit-screen .jh-chart-actions {
        margin-left: auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
      }
      #profit-screen .jh-chart-plot .jh-missing {
        position: absolute;
        left: 67px;
        bottom: 43px;
        z-index: 3;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 5px;
        max-width: calc(100% - 100px);
        padding: 3px 6px;
        color: #6a8091;
        font-size: 10px;
        background: #ffffffed;
        border-radius: 3px;
      }
      #profit-screen .jh-chart-plot .jh-missing:empty {
        display: none;
      }

      #profit-screen .jh-split-viewport {
        flex: 1;
        min-height: 0;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 2px;
      }
      #profit-screen .jh-workspace-split {
        display: grid;
        grid-template-columns: minmax(620px, 1fr) minmax(680px, 1fr);
        height: 100%;
      }
      #profit-screen .jh-overview-pane,
      #profit-screen .jh-detail-pane {
        display: flex;
        flex-direction: column;
        min-width: 0;
        min-height: 0;
        border: 0;
        background: transparent;
        overflow: hidden;
      }
      #profit-screen .jh-pane-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex: 0 0 35px;
        min-height: 35px;
        padding: 0 12px;
        background: transparent;
        border: 0;
        color: #244e6d;
        font-size: 13px;
      }
      #profit-screen .jh-pane-heading span {
        font-size: 11px;
        font-weight: 400;
        color: #71899c;
      }
      #profit-screen .profit-fixed-tbl {
        flex: 1;
        min-height: 0;
      }
      #profit-screen .profit-accordion-stage {
        position: relative;
        left: auto;
        width: 100%;
        border: 0;
        border-radius: 0;
      }
      #profit-screen .jh-chart-fixed {
        flex: 1 1 auto;
        height: 100%;
        min-height: 0;
      }
      #profit-screen .jh-chart-title {
        white-space: normal;
      }
      #profit-screen .jh-chart-head {
        padding: 7px 10px;
      }
      #profit-screen .jh-chart-legend {
        gap: 8px;
      }
      #profit-screen .jh-chart-actions {
        gap: 7px 10px;
      }
      #profit-screen #profit-main-table th:nth-child(2),
      #profit-screen #profit-main-table td:nth-child(2) {
        left: auto !important;
        min-width: 0 !important;
      }
      #profit-screen #jh-accordion-detail-table col.project-contract-col {
        width: 12% !important;
      }
      #profit-screen #jh-accordion-detail-table col.project-sales-col {
        width: 12% !important;
      }
      #profit-screen #jh-accordion-detail-table col.project-ratio-col {
        width: 9% !important;
      }
      #profit-screen #jh-accordion-detail-table col.jh-direct-col {
        width: 11% !important;
      }
      #profit-screen #jh-accordion-detail-table col.jh-indirect-col {
        width: 11% !important;
      }
      #profit-screen #jh-accordion-detail-table col.project-profit-col {
        width: 12% !important;
      }
      #profit-screen #jh-accordion-detail-table td {
        position: static;
        left: auto !important;
        min-width: 0 !important;
        text-align: right;
        box-shadow: none;
        white-space: nowrap;
      }
      #profit-screen #jh-accordion-detail-table td:first-child {
        position: sticky;
        left: 0 !important;
        z-index: 3;
        text-align: left;
        box-shadow: 1px 0 #dfe7ee;
      }
      #profit-screen #jh-accordion-detail-table .profit-project-name {
        display: block;
        width: 100%;
        color: var(--jh-label-ink, #187357) !important;
      }
      #profit-screen #jh-accordion-detail-head th {
        position: sticky;
        top: 0 !important;
        left: auto !important;
        z-index: 8;
        min-width: 0 !important;
        height: 24px !important;
        padding: 2px 4px !important;
        line-height: 16px;
        white-space: nowrap;
        text-align: center;
        overflow: hidden;
      }
      #profit-screen #jh-accordion-detail-head th:first-child {
        left: 0 !important;
        z-index: 10;
        text-align: left;
      }
      #profit-screen #jh-accordion-detail-head .sort-heading {
        min-height: 0;
        line-height: 16px;
        gap: 2px;
        white-space: nowrap;
      }
      #profit-screen .jh-detail-pane .jh-scroll-under-chart {
        flex: 1;
        min-height: 0;
        scrollbar-gutter: stable;
      }
      #profit-screen .jh-detail-pane #jh-accordion-detail-table {
        min-width: 660px !important;
      }
      #profit-screen
        #jh-accordion-detail-rows
        tr.project-data-row:not(:hover):not(.jh-hover):not(.jh-selected)
        td.jh-rate-risk {
        background: #fff !important;
      }
      #profit-screen
        #jh-accordion-detail-rows
        tr.project-data-row:not(:hover):not(.jh-hover):not(.jh-selected)
        td.jh-rate-warn {
        background: #fff !important;
      }
      #profit-screen
        #jh-accordion-detail-rows
        tr.project-data-row:not(:hover):not(.jh-hover):not(.jh-selected)
        td.jh-rate-unknown {
        color: #68798a !important;
      }
      @media (max-width: 1700px) {
        #profit-screen .profit-screen-table {
          font-size: 10px !important;
        }
        #profit-screen #profit-main-table th,
        #profit-screen #jh-accordion-detail-head th {
          font-size: 9px;
        }
        #profit-screen #profit-main-table .category-summary td {
          padding: 4px !important;
        }
        #profit-screen .jh-chart-title span {
          display: none;
        }
      }

      /* Project popup only; the original chart, categories, comparison toggle and ledger are unchanged. */
      #profit-screen .jh-detail-drawer-shade {
        background: rgba(23, 45, 64, 0.12);
      }
      #profit-screen .jh-detail-drawer-head {
        border-bottom: 1px solid #d8e4ed;
      }
      #profit-screen .jh-detail-drawer-head h3 {
        font-size: 20px;
        letter-spacing: -0.025em;
        margin: 0 0 4px;
      }
      #profit-screen .jh-detail-drawer-head small {
        font-size: 11px;
        color: #71879b;
      }
      #profit-screen .jh-detail-drawer-buttons button {
        font-size: 12px;
        background: #fff;
        padding: 7px 11px;
        border-color: #cedbe5;
      }
      #profit-screen .jh-detail-drawer-body {
        overflow-y: auto;
        scrollbar-gutter: stable;
        font-size: 13px;
        color: #24455e;
      }
      #profit-screen .jh-detail-infobar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 20px;
        color: #526c81;
        font-size: 12px;
      }
      #profit-screen .jh-detail-infobar b {
        color: #244d6e;
        font-size: 13px;
        margin-left: 4px;
      }
      #profit-screen .jh-detail-status {
        margin-left: auto;
        font-size: 11px;
        padding: 4px 9px;
        border-radius: 4px;
        border: 1px solid #d5e1eb;
        background: #f3f7fa;
        color: #647c90;
        font-weight: 700;
      }
      #profit-screen .jh-detail-status.loss {
        background: #fff0f1;
        border-color: #f0c9cd;
        color: #b33f50;
      }
      #profit-screen .jh-detail-status.warn {
        background: #fff7e9;
        border-color: #eddbb6;
        color: #9d711f;
      }
      #profit-screen .jh-detail-metrics {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin: 0 0 13px;
      }
      #profit-screen .jh-detail-metric {
        border: 1px solid #dbe5ed;
        background: #fff;
        border-radius: 6px;
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      #profit-screen .jh-detail-metric span {
        font-size: 12px;
        margin: 0;
        color: #71869a;
      }
      #profit-screen .jh-detail-metric strong {
        color: #244d6e;
        line-height: 1.1;
        letter-spacing: -0.025em;
        font-variant-numeric: tabular-nums;
      }
      #profit-screen .jh-detail-metric strong.jh-loss {
        color: #c24b5b;
      }
      #profit-screen .jh-detail-context {
        padding: 10px 12px;
        background: #ecf3f8;
        border-left: 3px solid #86aec6;
        margin: 0 0 14px;
        color: #4f6d83;
        font-size: 11px;
        line-height: 1.65;
      }
      #profit-screen .jh-insight-panel {
        margin: 0 0 12px;
        border: 1px solid #dbe5ed;
        border-radius: 7px;
        background: #fff;
      }
      #profit-screen .jh-insight-head {
        display: flex;
        flex-wrap: wrap;
        align-items: start;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 10px;
      }
      #profit-screen .jh-insight-head h4 {
        margin: 0;
        color: #214c6e;
        letter-spacing: -0.025em;
      }
      #profit-screen .jh-insight-head p {
        margin: 3px 0 0;
        color: #8397a8;
        font-size: 11px;
        line-height: 1.45;
      }
      #profit-screen .jh-detail-chart-svg {
        display: block;
        width: 100%;
        height: auto;
        overflow: visible;
        font-family: inherit;
      }
      #profit-screen .jh-insight-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin: 4px 0 0;
        font-size: 11px;
        color: #617a8e;
      }
      #profit-screen .jh-insight-legend span {
        display: inline-flex;
        align-items: center;
        gap: 5px;
      }
      #profit-screen .jh-insight-legend i {
        display: inline-block;
        width: 9px;
        height: 9px;
        border-radius: 2px;
      }
      #profit-screen .jh-insight-period {
        display: flex;
        gap: 4px;
        margin-left: auto;
      }
      #profit-screen .jh-insight-period button {
        border: 1px solid #d2dee7;
        background: #fff;
        border-radius: 4px;
        color: #58748b;
        font-size: 11px;
        padding: 5px 9px;
      }
      #profit-screen .jh-insight-period button.is-active {
        background: #e8f1f8;
        border-color: #8eb3cb;
        color: #185785;
        font-weight: 700;
      }
      #profit-screen .jh-insight-brief {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 17px;
        margin-top: 7px;
        padding: 9px 10px;
        background: #f4f8fa;
        border-radius: 5px;
        color: #637d90;
        font-size: 11px;
      }
      #profit-screen .jh-insight-brief b {
        color: #214b69;
      }
      #profit-screen .jh-insight-caveat {
        color: #8295a5;
        font-size: 10px;
        line-height: 1.6;
      }
      #profit-screen .jh-rank {
        display: flex;
        flex-direction: column;
        gap: 9px;
        padding: 3px 0 4px;
      }
      #profit-screen .jh-rank-row {
        display: grid;
        grid-template-columns: 115px minmax(55px, 1fr) 94px 68px;
        gap: 10px;
        align-items: center;
        font-size: 12px;
      }
      #profit-screen .jh-rank-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #3f6178;
      }
      #profit-screen .jh-rank-track {
        height: 12px;
        background: #eaf0f4;
        border-radius: 3px;
        overflow: hidden;
      }
      #profit-screen .jh-rank-fill {
        height: 100%;
        background: #588aa9;
        border-radius: 3px;
        min-width: 1px;
      }
      #profit-screen .jh-rank-amount {
        text-align: right;
        font-weight: 750;
        color: #294a62;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
      }
      #profit-screen .jh-rank-pct {
        text-align: right;
        font-size: 11px;
        color: #8395a4;
        white-space: nowrap;
      }
      #profit-screen .jh-detail-breakdown {
        background: #fff;
        border: 1px solid #dbe5ed;
        border-radius: 7px;
        margin-bottom: 12px;
        overflow: hidden;
      }
      #profit-screen .jh-detail-breakdown summary {
        padding: 14px 16px;
        background: #f1f6f9;
        cursor: pointer;
        color: #244e6b;
        font-size: 13px;
        font-weight: 800;
        list-style-position: inside;
      }
      #profit-screen .jh-detail-breakdown summary small {
        font-size: 10px;
        color: #8397a7;
        font-weight: 400;
        margin-left: 8px;
      }
      #profit-screen .jh-detail-breakdown-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        padding: 12px;
      }
      #profit-screen .jh-breakdown-card {
        border: 1px solid #e1e9ef;
        padding: 12px;
        border-radius: 5px;
        min-width: 0;
      }
      #profit-screen .jh-breakdown-title {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        padding-bottom: 8px;
        border-bottom: 1px solid #dbe5ec;
        color: #244d6a;
        font-size: 13px;
        font-weight: 800;
      }
      #profit-screen .jh-breakdown-entry {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        border-bottom: 1px solid #eef2f5;
        padding: 8px 0;
        font-size: 11px;
      }
      #profit-screen .jh-breakdown-entry:last-child {
        border: 0;
      }
      #profit-screen .jh-breakdown-entry b {
        font-weight: 700;
        color: #213d54;
        font-variant-numeric: tabular-nums;
        text-align: right;
        white-space: nowrap;
      }
      #profit-screen .jh-breakdown-entry small {
        color: #93a3b0;
        font-size: 10px;
        margin-left: 5px;
        font-weight: 400;
      }
      @media (max-width: 700px) {
        #profit-screen .jh-detail-drawer {
          width: min(100vw, 560px);
        }
        #profit-screen .jh-detail-drawer-body {
          padding: 12px;
        }
        #profit-screen .jh-detail-breakdown-grid {
          grid-template-columns: 1fr;
        }
        #profit-screen .jh-insight-panel {
          padding: 12px 10px;
        }
        #profit-screen .jh-rank-row {
          grid-template-columns: 94px minmax(30px, 1fr) 82px 68px;
          gap: 6px;
          font-size: 10px;
        }
        #profit-screen .jh-detail-metric strong {
          font-size: 19px;
        }
        #profit-screen .jh-detail-infobar {
          gap: 5px 10px;
        }
      }

      /* Keep the right detail panel open while allowing selection in the uncovered chart/table. */
      #profit-screen .jh-detail-drawer-shade {
        display: none !important;
        pointer-events: none !important;
      }

      /* Project detail: project-level exact item amounts / month selector. */
      #profit-screen .jh-detail-drawer {
        width: min(790px, 96vw);
      }
      #profit-screen .jh-detail-infobar {
        margin-bottom: 9px;
      }
      #profit-screen .jh-detail-metrics {
        margin-bottom: 10px;
      }
      #profit-screen .jh-detail-metric {
        min-height: 62px;
        padding: 9px 13px;
      }
      #profit-screen .jh-detail-metric strong {
        font-size: 22px;
      }
      #profit-screen .jh-detail-viewbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px 12px;
        margin: 0 0 12px;
        padding: 9px 11px;
        background: #edf4f9;
        border: 1px solid #d6e4ed;
        border-radius: 6px;
      }
      #profit-screen .jh-detail-viewtabs {
        display: inline-flex;
        gap: 3px;
        padding: 3px;
        background: #e0eaf2;
        border-radius: 5px;
      }
      #profit-screen .jh-detail-viewtabs button {
        padding: 6px 13px;
        border: 1px solid transparent;
        background: transparent;
        border-radius: 4px;
        color: #58768d;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
      }
      #profit-screen .jh-detail-viewtabs button[aria-pressed="true"] {
        background: #fff;
        border-color: #bbd0e0;
        color: #1b557e;
        box-shadow: 0 1px 2px #23415a12;
      }
      #profit-screen .jh-month-nav {
        display: flex;
        align-items: center;
        gap: 5px;
      }
      #profit-screen .jh-month-nav[hidden] {
        display: none;
      }
      #profit-screen .jh-month-nav select {
        border: 1px solid #bfd0db;
        background: #fff;
        border-radius: 5px;
        padding: 6px 7px;
        color: #244c69;
        font-size: 12px;
        font-weight: 700;
        min-width: 102px;
      }
      #profit-screen .jh-month-nav button {
        border: 1px solid #c9d7e1;
        background: #fff;
        border-radius: 4px;
        padding: 5px 8px;
        color: #406986;
        font-size: 15px;
        cursor: pointer;
      }
      #profit-screen .jh-month-nav button:disabled {
        opacity: 0.35;
        cursor: default;
      }
      #profit-screen .jh-detail-data-basis {
        color: #657f92;
      }
      #profit-screen .jh-cost-box {
        min-width: 0;
        overflow: hidden;
      }
      #profit-screen .jh-cost-box-head {
        border-bottom: 1px solid #dce7ef;
      }
      #profit-screen .jh-cost-box-title {
        justify-content: space-between;
      }
      #profit-screen .jh-cost-box-title b {
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
      }
      #profit-screen .jh-cost-box-meta {
        margin-top: 5px;
      }
      #profit-screen .jh-item-row {
        align-items: center;
      }
      #profit-screen .jh-item-name {
        word-break: keep-all;
      }
      #profit-screen .jh-item-row .jh-item-track {
        height: 7px;
        background: #edf2f5;
        border-radius: 8px;
        overflow: hidden;
      }
      #profit-screen .jh-item-row .jh-item-track i {
        display: block;
        height: 100%;
        background: #6c9bb8;
        border-radius: 8px;
      }
      #profit-screen .jh-cost-box.indirect .jh-item-row .jh-item-track i {
        background: #d0a368;
      }
      #profit-screen .jh-item-amount {
        text-align: right;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
      }
      #profit-screen .jh-item-share {
        text-align: right;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
      }
      #profit-screen .jh-item-row.is-zero .jh-item-name,
      #profit-screen .jh-item-row.is-zero .jh-item-amount,
      #profit-screen .jh-item-row.is-zero .jh-item-share {
        color: #a1adba;
        font-weight: 400;
      }
      #profit-screen .jh-item-row.is-negative .jh-item-amount {
        color: #bd4d5b;
      }
      #profit-screen .jh-detail-amount-legend {
        font-size: 10px;
        color: #8396a5;
        margin: 0 0 9px;
      }
      #profit-screen .jh-insight-panel {
        padding: 12px 13px 11px;
        margin-bottom: 10px;
      }
      #profit-screen .jh-insight-head h4 {
        font-size: 14px;
      }
      #profit-screen .jh-detail-chart-svg {
        max-height: 200px;
      }
      #profit-screen .jh-insight-caveat {
        margin: 7px 0 0;
      }
      #profit-screen .jh-month-bar:focus-visible rect.jh-month-hit {
        stroke: #225d8b;
        stroke-width: 2;
      }
      #profit-screen .jh-month-bar.is-selected text {
        fill: #205a82;
        font-weight: 800;
      }
      #profit-screen .jh-month-quick {
        margin: 5px 0 0;
        font-size: 11px;
        color: #658196;
      }
      #profit-screen .jh-month-summary {
        display: flex;
        gap: 8px 14px;
        flex-wrap: wrap;
        margin: 8px 0 0;
        padding: 9px 10px;
        background: #f7fafc;
        border-radius: 5px;
        font-size: 11px;
        color: #698093;
      }
      #profit-screen .jh-month-summary strong {
        font-size: 12px;
        color: #264e69;
        font-variant-numeric: tabular-nums;
      }
      #profit-screen .jh-detail-optional {
        border: 1px solid #dde7ee;
        border-radius: 6px;
        overflow: hidden;
        background: #fff;
        margin-bottom: 8px;
      }
      #profit-screen .jh-detail-optional summary {
        padding: 10px 13px;
        background: #f6f9fb;
        color: #385e7b;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
      }
      #profit-screen .jh-detail-optional .jh-rank {
        padding: 12px;
      }
      #profit-screen .jh-detail-footnote {
        margin-top: 5px;
      }
      @media (max-width: 700px) {
        #profit-screen .jh-detail-drawer {
          width: 98vw;
        }
        #profit-screen .jh-direct-indirect {
          grid-template-columns: 1fr;
        }
        #profit-screen .jh-item-row {
          grid-template-columns: minmax(95px, 1fr) minmax(48px, 80px) 95px 68px;
        }
        #profit-screen .jh-detail-viewbar {
          padding: 8px;
        }
      }

      /* 2026-10-13: selected project uses the SAME project-status colors as hover,
         never a universal blue selection fill. */
      #profit-screen #jh-accordion-detail-rows tr.project-data-row.jh-selected > td,
      #profit-screen #jh-accordion-detail-rows tr.project-data-row.jh-hover.jh-selected > td {
        background: var(--jh-hover-bg, rgba(57, 119, 184, 0.1)) !important;
        box-shadow: none !important;
      }
      #profit-screen #jh-accordion-detail-rows tr.project-data-row.jh-selected .profit-project-name {
        color: var(--jh-label-ink, #187357) !important;
      }
      /* Monthly columns are for comparison only: hover reveals values but never changes period. */
      #profit-screen .jh-month-bar {
        cursor: default;
        outline: none;
      }
      #profit-screen .jh-month-bar:hover rect.jh-month-hit {
        fill: #e7f1f8;
        fill-opacity: 0.32;
      }
      #profit-screen .jh-month-bar.is-selected rect.jh-month-hit {
        fill: #e1edf5;
        fill-opacity: 0.65;
        stroke: #3778a7;
        stroke-width: 1;
      }
      #profit-screen #jh-monthly-cost-mount {
        position: relative;
      }
      #profit-screen .jh-month-tooltip {
        position: absolute;
        z-index: 30;
        min-width: 162px;
        padding: 9px 11px;
        border: 1px solid #b6cddd;
        border-radius: 6px;
        background: #fff;
        box-shadow: 0 3px 16px #25496026;
        color: #335a75;
        pointer-events: none;
        font-size: 11px;
        line-height: 1.6;
        white-space: nowrap;
      }
      #profit-screen .jh-month-tooltip[hidden] {
        display: none !important;
      }
      #profit-screen .jh-month-tooltip strong {
        display: block;
        margin-bottom: 3px;
        font-size: 12px;
        color: #234f70;
      }
      #profit-screen .jh-month-tooltip .jh-tip-row {
        display: flex;
        justify-content: space-between;
        gap: 16px;
      }
      #profit-screen .jh-month-tooltip .jh-tip-row b {
        font-variant-numeric: tabular-nums;
      }
      #profit-screen .jh-month-tooltip .jh-tip-total {
        margin-top: 4px;
        padding-top: 4px;
        border-top: 1px solid #e4edf3;
      }

      /* Consolidated snapshot KPI strip, and header-level status tag. All business data unchanged. */
      #profit-screen .jh-detail-name-row h3 {
        margin: 0;
        overflow-wrap: anywhere;
      }
      #profit-screen .jh-detail-name-row .jh-detail-status {
        display: inline-flex;
        align-items: center;
        flex: none;
        margin: 0;
        padding: 4px 8px;
        font-size: 11px;
        line-height: 1.15;
      }
      #profit-screen .jh-detail-drawer-head small {
        display: block;
        line-height: 1.45;
      }
      #profit-screen .jh-detail-summary-4 {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
      #profit-screen .jh-detail-summary-4 .jh-detail-metric {
        display: flex;
        min-width: 0;
        box-shadow: none;
      }
      #profit-screen .jh-detail-summary-4 .jh-detail-metric span {
        display: block;
        margin: 0;
      }
      #profit-screen .jh-detail-summary-4 .jh-detail-metric strong {
        display: block;
        margin: 0;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
      }
      #profit-screen .jh-detail-cost-caption {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 6px 10px;
        margin: 10px 0 7px;
        color: #214c6e;
        font-size: 14px;
      }
      #profit-screen .jh-detail-cost-caption strong {
        font-weight: 800;
      }
      #profit-screen .jh-detail-cost-caption small {
        font-size: 10px;
        color: #8196a6;
      }
      @media (max-width: 650px) {
        #profit-screen .jh-detail-summary-4 {
          padding: 8px 3px;
        }
        #profit-screen .jh-detail-summary-4 .jh-detail-metric {
          padding: 4px 6px;
          gap: 6px;
        }
        #profit-screen .jh-detail-summary-4 .jh-detail-metric strong {
          font-size: 15px;
        }
        #profit-screen .jh-detail-summary-4 .jh-detail-metric span {
          font-size: 10px;
          letter-spacing: -0.03em;
        }
        #profit-screen .jh-detail-name-row h3 {
          font-size: 17px;
        }
      }
      @media (max-width: 430px) {
        #profit-screen .jh-detail-summary-4 {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          row-gap: 8px;
        }
        #profit-screen .jh-detail-summary-4 .jh-detail-metric:nth-child(3) {
          border-left: 0;
        }
      }

      /* Selected project stays clear while nearby projects remain available for inspection. */
      #profit-screen svg .jh-point {
        transition:
          opacity 0.16s ease,
          stroke-width 0.08s;
      }
      #profit-screen.jh-focus-mode svg g.jh-point-group:not(.jh-selected):not(.jh-hover) .jh-point {
        opacity: 0.42 !important;
      }
      /* Do not conceal other loss-making projects. */
      #profit-screen.jh-focus-mode
        svg
        g.jh-point-group[data-status="risk"]:not(.jh-selected):not(.jh-hover)
        .jh-point {
        opacity: 0.58 !important;
      }
      #profit-screen.jh-focus-mode svg g.jh-point-group.jh-selected .jh-point,
      #profit-screen.jh-focus-mode svg g.jh-point-group.jh-hover .jh-point {
        opacity: 1 !important;
      }
      /* Table information is still legible and instantly comes back into focus on hover. */
      #profit-screen #jh-accordion-detail-rows tr.project-data-row {
        transition: opacity 0.14s ease;
      }
      #profit-screen.jh-focus-mode
        #jh-accordion-detail-rows
        tr.project-data-row:not(.jh-selected):not(.jh-hover):not(:hover):not(:focus-within) {
        opacity: 0.74;
      }
      #profit-screen.jh-focus-mode #jh-accordion-detail-rows tr.project-data-row.jh-selected,
      #profit-screen.jh-focus-mode #jh-accordion-detail-rows tr.project-data-row.jh-hover,
      #profit-screen.jh-focus-mode #jh-accordion-detail-rows tr.project-data-row:hover,
      #profit-screen.jh-focus-mode #jh-accordion-detail-rows tr.project-data-row:focus-within {
        opacity: 1;
      }
      @media (prefers-reduced-motion: reduce) {
        #profit-screen svg .jh-point,
        #profit-screen #jh-accordion-detail-rows tr.project-data-row {
          transition: none;
        }
      }

      /* Keep all four categories readable and clickable; give the expanded category stronger priority. */
      #profit-screen #profit-project-rows tr.category-summary.jh-muted-category {
        opacity: 0.66;
        transition: opacity 0.16s ease;
      }
      #profit-screen #profit-project-rows tr.category-summary.jh-muted-category:hover,
      #profit-screen #profit-project-rows tr.category-summary.jh-muted-category:focus-within {
        opacity: 1;
      }
      @media (prefers-reduced-motion: reduce) {
        #profit-screen #profit-project-rows tr.category-summary.jh-muted-category {
          transition: none;
        }
      }

      #profit-screen .jh-trajectory-label {
        font-size: 12px;
        font-weight: 700;
        stroke: #fff;
        stroke-width: 4px;
        paint-order: stroke;
        stroke-linejoin: round;
      }
      #profit-screen .jh-trajectory-caption {
        font-size: 11px;
        line-height: 1.55;
        color: #49667b;
      }
      #profit-screen .jh-trajectory-point {
        cursor: default;
      }
      @keyframes jh-trajectory-draw {
        to {
          stroke-dashoffset: 0;
        }
      }
      @keyframes jh-trajectory-reveal {
        to {
          opacity: 1;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        #profit-screen .jh-trajectory-lines line,
        #profit-screen .jh-trajectory-lines polygon,
        #profit-screen .jh-trajectory-markers circle,
        #profit-screen .jh-trajectory-markers text {
          animation: none !important;
          stroke-dashoffset: 0 !important;
          opacity: 1 !important;
        }
      }

      #profit-screen svg .jh-hover-name {
        font-size: 13px;
        font-weight: 700;
        stroke: #fff;
        stroke-width: 3px;
        paint-order: stroke;
        stroke-linejoin: round;
      }

      #profit-screen .jh-assumption-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 5px 10px;
        padding: 7px 10px;
        background: #fafcfe;
        border-bottom: 1px solid #e1eaf1;
        flex: 0 0 auto;
      }
      #profit-screen .jh-assumption-controls {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 4px 8px;
        font-size: 11px;
        white-space: nowrap;
        color: #527089;
      }
      #profit-screen .jh-assumption-controls strong {
        font-size: 12px;
        color: #2b5371;
      }
      #profit-screen .jh-assumption-controls label {
        display: flex;
        align-items: center;
        gap: 4px;
      }
      #profit-screen .jh-assumption-controls input {
        width: 52px;
        height: 25px;
        border: 1px solid #bbd0df;
        border-radius: 4px;
        padding: 3px 4px;
        text-align: center;
        color: #204b6b;
        font: inherit;
        font-size: 12px;
        font-weight: 700;
        background: #fff;
      }
      #profit-screen .jh-assumption-controls input:focus {
        outline: 2px solid #8bb9d9;
        outline-offset: 1px;
      }
      #profit-screen .jh-assumption-threshold {
        padding-left: 8px;
        border-left: 1px solid #dce6ee;
        color: #6c7f8f;
      }
      #profit-screen .jh-assumption-threshold b {
        color: #2c5877;
        margin-left: 3px;
      }
      #profit-screen .jh-assumption-bar > small {
        font-size: 10px;
        color: #7c91a1;
        line-height: 1.5;
      }
      #profit-screen .jh-assumption-bar[hidden] {
        display: none;
      }
      #profit-screen svg .jh-profit-zone {
        font-size: 12px;
        font-weight: 600;
        stroke-width: 3px;
        stroke-linejoin: round;
        pointer-events: none;
      }
      @media (max-width: 1400px) {
        #profit-screen .jh-assumption-bar {
          padding: 6px 9px;
          gap: 4px;
        }
        #profit-screen .jh-assumption-controls {
          gap: 7px;
          padding: 3px 6px;
        }
        #profit-screen .jh-assumption-controls input {
          width: 46px;
        }
        #profit-screen .jh-assumption-bar > small {
          font-size: 9px;
        }
      }

      #profit-screen .jh-detail-drawer-body {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: auto;
      }
      #profit-screen .jh-detail-drawer-head {
        flex: none;
      }
      #profit-screen .jh-detail-summary-4 {
        flex: none;
        margin: 0 !important;
      }
      #profit-screen .jh-detail-data-basis {
        flex: none;
        margin: 0;
        font-size: 10px;
        line-height: 14px;
      }
      #profit-screen .jh-direct-indirect {
        flex: none;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 0;
      }
      #profit-screen .jh-cost-box-head,
      #profit-screen .jh-cost-box.indirect .jh-cost-box-head {
        flex-wrap: wrap;
        background: none;
        border: 0;
      }
      #profit-screen .jh-cost-box-title {
        white-space: nowrap;
        font-weight: 700;
      }
      #profit-screen .jh-cost-box-title strong,
      #profit-screen .jh-cost-box-title b,
      #profit-screen .jh-cost-box.indirect .jh-cost-box-title b {
        font-size: inherit;
        color: inherit;
      }
      #profit-screen .jh-cost-box-rows {
        padding: 0;
      }
      #profit-screen .jh-item-row {
        display: grid;
      }
      #profit-screen .jh-item-name {
        white-space: nowrap;
      }
      #profit-screen .jh-detail-chart-panel {
        display: flex;
        flex-direction: column;
      }
      #profit-screen .jh-detail-chart-head {
        align-items: center;
        flex: none;
        font-size: 12px;
      }
      #profit-screen .jh-detail-chart-head strong {
        font-weight: 700;
      }
      #profit-screen .jh-detail-chart-head small {
        font-size: 10px;
        color: #8397a7;
      }
      #profit-screen .jh-money-chart {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        gap: 3px;
      }
      #profit-screen .jh-money-chart-rows {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        flex: 1;
        min-height: 0;
        gap: 2px;
      }
      #profit-screen .jh-money-chart-row {
        display: grid;
        grid-template-columns: 80px minmax(0, 1fr) 93px;
        align-items: center;
        gap: 10px;
        flex: 1;
        min-height: 19px;
        max-height: 46px;
      }
      #profit-screen .jh-money-chart-label {
        font-size: 11px;
        color: #537087;
        white-space: nowrap;
      }
      #profit-screen .jh-money-chart-track {
        height: 64%;
        max-height: 20px;
        min-height: 8px;
        position: relative;
        background: #f3f6f9;
        border-radius: 2px;
      }
      #profit-screen .jh-money-chart-bar {
        position: absolute;
        top: 0;
        bottom: 0;
        background: var(--bar-color);
        border-radius: 2px;
      }
      #profit-screen .jh-money-chart-zero {
        position: absolute;
        top: -3px;
        bottom: -3px;
        width: 1px;
        background: #c6d6e1;
        z-index: 1;
      }
      #profit-screen .jh-money-chart-value {
        font-size: 12px;
        font-weight: 700;
        text-align: right;
        color: #315670;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
      }
      #profit-screen .jh-money-chart-row.is-zero .jh-money-chart-value {
        color: #97a7b5;
        font-weight: 400;
      }
      #profit-screen .jh-money-chart-row.is-negative .jh-money-chart-value {
        color: #bd4d5b;
      }
      #profit-screen .jh-money-chart-axis {
        flex: none;
        position: relative;
        height: 13px;
        margin: 0 103px 0 90px;
        border-top: 1px solid #e2eaf0;
        font-size: 9px;
        color: #91a2b0;
      }
      #profit-screen .jh-money-chart-axis span {
        position: absolute;
        top: 2px;
        transform: translateX(-50%);
        white-space: nowrap;
      }
      #profit-screen .jh-money-chart-axis span:first-child {
        transform: none;
      }
      #profit-screen .jh-money-chart-axis span:last-child {
        transform: translateX(-100%);
      }
      #profit-screen .jh-detail-footnote {
        flex: none;
      }
      @media (min-height: 900px) and (min-width: 1000px) {
        #profit-screen .jh-detail-drawer-body {
          padding: 16px 18px;
          gap: 10px;
        }
        #profit-screen .jh-detail-summary-4 {
          min-height: 70px;
        }
        #profit-screen .jh-detail-summary-4 .jh-detail-metric strong {
          font-size: 22px;
        }
        #profit-screen .jh-cost-box {
          padding: 14px 12px 10px;
        }
        #profit-screen .jh-cost-box-meta {
          font-size: 11px;
        }
        #profit-screen .jh-item-row {
          padding: 8px 0;
          grid-template-columns: minmax(0, 1fr) auto 60px;
        }
        #profit-screen .jh-item-name {
          font-size: 13px;
        }
        #profit-screen .jh-item-amount {
          font-size: 14px;
        }
        #profit-screen .jh-item-share {
          font-size: 12px;
        }
        #profit-screen .jh-detail-chart-panel {
          padding: 12px;
        }
        #profit-screen .jh-detail-chart-head {
          font-size: 14px;
        }
        #profit-screen .jh-money-chart-label {
          font-size: 12px;
        }
        #profit-screen .jh-money-chart-value {
          font-size: 14px;
        }
        #profit-screen .jh-money-chart-track {
          max-height: 24px;
        }
        #profit-screen .jh-money-chart-axis {
          font-size: 10px;
          height: 15px;
        }
      }
      @media (max-height: 740px) {
        #profit-screen .jh-detail-drawer-body {
          padding: 9px 14px;
          gap: 6px;
        }
        #profit-screen .jh-detail-summary-4 {
          min-height: 51px;
          padding: 4px 5px;
        }
        #profit-screen .jh-detail-summary-4 .jh-detail-metric {
          gap: 4px;
        }
        #profit-screen .jh-detail-summary-4 .jh-detail-metric strong {
          font-size: 17px;
        }
        #profit-screen .jh-cost-box {
          padding: 8px 10px 4px;
        }
        #profit-screen .jh-item-row {
          min-height: 23px;
        }
        #profit-screen .jh-detail-chart-panel {
          padding: 7px 10px 5px;
          min-height: 89px;
          gap: 3px;
        }
        #profit-screen .jh-detail-chart-panel.indirect {
          min-height: 122px;
        }
      }
      @media (max-width: 700px) {
        #profit-screen .jh-detail-drawer {
          width: 100vw;
        }
        #profit-screen .jh-detail-drawer-body {
          padding: 8px;
          gap: 6px;
        }
        #profit-screen .jh-direct-indirect {
          gap: 8px;
        }
        #profit-screen .jh-cost-box {
          padding: 8px;
        }
        #profit-screen .jh-cost-box-head {
          gap: 1px;
        }
        #profit-screen .jh-cost-box-title {
          font-size: 12px;
        }
        #profit-screen .jh-item-row {
          gap: 5px;
          grid-template-columns: minmax(0, 1fr) auto 40px;
        }
        #profit-screen .jh-item-name,
        #profit-screen .jh-item-amount,
        #profit-screen .jh-item-share {
          font-size: 10px;
        }
      }

      #profit-screen .jh-detail-chart-head strong {
        flex: none;
      }
      #profit-screen .jh-month-readout {
        color: #718a9d;
        min-width: 0;
      }
      #profit-screen .jh-month-sales-line {
        fill: none;
        stroke: #2c7eaa;
        stroke-width: 2;
        stroke-dasharray: 6 4;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      #profit-screen .jh-month-sales-point {
        fill: #2c7eaa;
        stroke: #fff;
        stroke-width: 1;
      }
      @media (min-height: 900px) and (min-width: 1000px) {
        #profit-screen .jh-detail-chart-panel,
        #profit-screen .jh-detail-chart-panel.indirect {
          padding: 10px 12px 6px;
        }
        #profit-screen .jh-detail-chart-head strong {
          font-size: 14px;
        }
        #profit-screen .jh-month-readout {
          font-size: 11px;
        }
        #profit-screen .jh-month-axis {
          font-size: 10px;
        }
        #profit-screen .jh-month-axis-title {
          font-size: 11px;
        }
      }
      @media (max-height: 740px) {
        #profit-screen .jh-detail-chart-panel,
        #profit-screen .jh-detail-chart-panel.indirect {
          min-height: 121px;
          padding: 6px 10px 4px;
        }
      }

      #profit-screen button.jh-item-row {
        width: 100%;
        margin: 0;
        border: 0;
        border-bottom: 1px solid #edf2f5;
        background: none;
        border-radius: 0;
        text-align: left;
        font-family: inherit;
        cursor: pointer;
      }
      #profit-screen button.jh-item-row:last-child {
        border-bottom: 0;
      }
      #profit-screen button.jh-item-row .jh-item-name {
        color: #356380;
        text-decoration: none;
      }
      #profit-screen button.jh-item-row.is-zero .jh-item-name {
        color: #92a3b2;
      }
      #profit-screen button.jh-item-row:hover {
        background: #eef5fa;
      }
      #profit-screen button.jh-item-row:focus-visible {
        outline: 2px solid #5d92b8;
        outline-offset: 1px;
      }
      #jh-cost-modal {
        width: min(780px, calc(100vw - 40px));
        max-width: none;
        max-height: calc(100dvh - 64px);
        padding: 0;
        border: 1px solid #b8cddb;
        border-radius: 10px;
        background: #fff;
        color: #274a64;
        box-shadow: 0 18px 70px #183d5438;
        overflow: hidden;
        font-family: inherit;
      }
      #jh-cost-modal[open] {
        display: flex;
        flex-direction: column;
      }
      #jh-cost-modal.is-group {
        width: min(1120px, calc(100vw - 40px));
      }
      #jh-cost-modal .jh-cost-modal-head {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #dfe9f0;
        flex: none;
      }
      #jh-cost-modal .jh-cost-modal-project {
        font-size: 12px;
        color: #7890a2;
        line-height: 1.4;
        margin-bottom: 6px;
        overflow-wrap: anywhere;
      }
      #jh-cost-modal h2 {
        margin: 0;
        color: #234f6f;
        font-weight: 700;
      }
      #jh-cost-modal .jh-cost-modal-close {
        font: inherit;
        cursor: pointer;
      }
      #jh-cost-modal .jh-cost-modal-summary {
        display: grid;
        grid-template-columns: 1.3fr 1fr 1fr;
        flex: none;
        border-bottom: 1px solid #e3ebf1;
      }
      #jh-cost-modal .jh-cost-modal-summary span {
        display: block;
        color: #7a91a2;
      }
      #jh-cost-modal .jh-cost-modal-summary strong {
        display: block;
        color: #244f70;
        font-variant-numeric: tabular-nums;
      }
      #jh-cost-modal .jh-cost-modal-summary strong.loss {
        color: #bd4d5b;
      }
      #jh-cost-modal .jh-cost-modal-table-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: none;
      }
      #jh-cost-modal .jh-cost-modal-table-head small {
        color: #8197a8;
      }
      #jh-cost-modal .jh-cost-modal-scroll {
        overflow: auto;
      }
      #jh-cost-modal table {
        border-collapse: separate;
        border-spacing: 0;
        margin: 0;
      }
      #jh-cost-modal table th,
      #jh-cost-modal table td {
        position: static;
        left: auto;
        border: 0;
        border-bottom: 1px solid #e7eef3;
        text-align: right;
        white-space: nowrap;
        height: auto;
        font-variant-numeric: tabular-nums;
        background: #fff;
        font-weight: 400;
      }
      #jh-cost-modal table thead th {
        color: #42657e;
        font-weight: 700;
        box-shadow: 0 1px #ccdee9;
      }
      #jh-cost-modal table tr > *:first-child {
        text-align: left;
      }
      #jh-cost-modal table tbody tr:nth-child(even) > * {
        background: #fafcfd;
      }
      #jh-cost-modal table tbody tr:hover > * {
        background: #f0f6fa;
      }
      #jh-cost-modal table tbody tr > td:last-child {
        font-weight: 700;
        color: #315a77;
      }
      #jh-cost-modal table tfoot th,
      #jh-cost-modal table tfoot td {
        position: sticky;
        bottom: 0;
        z-index: 2;
        background: #eaf2f8;
        color: #234e70;
        font-weight: 700;
        border: 0;
        box-shadow: 0 -1px #c9dce8;
      }
      #jh-cost-modal table td.is-zero {
        color: #a5b3be;
        font-weight: 400;
      }
      #jh-cost-modal table td.is-negative {
        color: #bd4d5b !important;
      }
      #jh-cost-modal table .jh-cost-empty {
        text-align: center !important;
        color: #8196a6;
        font-weight: 400 !important;
      }
      #jh-cost-modal .jh-cost-modal-foot {
        flex: none;
        color: #879dad;
      }
      @media (max-height: 740px) {
        #jh-cost-modal .jh-cost-modal-head {
          padding: 14px 20px 12px;
        }
        #jh-cost-modal .jh-cost-modal-summary {
          padding: 12px 20px;
        }
        #jh-cost-modal table th,
        #jh-cost-modal table td {
          padding: 7px 9px;
        }
      }
      @media (max-width: 700px) {
        #jh-cost-modal,
        #jh-cost-modal.is-group {
          width: calc(100vw - 20px);
          max-height: calc(100dvh - 30px);
        }
        #jh-cost-modal .jh-cost-modal-summary {
          gap: 12px;
          padding: 12px;
        }
        #jh-cost-modal .jh-cost-modal-summary strong {
          font-size: 17px;
        }
        #jh-cost-modal .jh-cost-modal-scroll {
          margin: 0 12px;
        }
        #jh-cost-modal .jh-cost-modal-head {
          padding: 16px 12px;
        }
        #jh-cost-modal h2 {
          font-size: 18px;
        }
      }

      #profit-screen .jh-month-future {
        fill: #eff3f7;
        fill-opacity: 0.8;
      }
      #profit-screen .jh-contract-marker text {
        font-weight: 700;
        stroke-linejoin: round;
      }
      #profit-screen .jh-detail-name-row .jh-latest-note {
        flex-shrink: 0;
        max-width: 170px;
      }
      #profit-screen .jh-detail-drawer-buttons button {
        cursor: pointer;
      }
      #profit-screen .jh-detail-drawer-buttons .jh-notes-button.has-notes {
        background: #fff3d7;
        border-color: #dfb86b;
        color: #85591c;
      }
      #profit-screen .jh-notes-count {
        display: inline-grid;
        place-items: center;
        min-width: 16px;
        height: 16px;
        margin-left: 4px;
        border-radius: 8px;
        font-size: 10px;
      }
      #profit-screen .jh-latest-note {
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 4px 8px;
        border: 1px solid #e6c886;
        border-radius: 4px;
        background: #fff4d9;
        color: #865a1d;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.3;
      }
      #profit-screen .jh-latest-note[hidden] {
        display: none;
      }
      #profit-screen .jh-notes-dialog {
        position: absolute;
        inset: var(--jh-notes-top, 70px) 18px auto auto;
        width: min(480px, calc(100% - 36px));
        max-width: none;
        max-height: calc(100% - var(--jh-notes-top, 70px) - 14px);
        margin: 0;
        padding: 0;
        border: 1px solid #bfccd7;
        color: #294f6b;
        z-index: 8;
        font-family: inherit;
      }
      #profit-screen .jh-notes-dialog[open] {
        display: flex;
        flex-direction: column;
      }
      #profit-screen .jh-notes-dialog::backdrop {
        background: transparent;
      }
      #profit-screen .jh-notes-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 13px 16px;
        border-bottom: 1px solid #dce6ed;
        background: #f5f8fa;
        flex: none;
      }
      #profit-screen .jh-notes-head h2 {
        margin: 0;
        font-size: 15px;
        line-height: 20px;
      }
      #profit-screen .jh-notes-project {
        font-size: 11px;
        color: #7890a2;
        margin-top: 3px;
        overflow-wrap: anywhere;
      }
      #profit-screen .jh-notes-close {
        padding: 5px 8px;
        border: 1px solid #cbdbe6;
        border-radius: 4px;
        background: #fff;
        color: #456982;
        font: inherit;
        font-size: 11px;
        cursor: pointer;
        flex: none;
      }
      #profit-screen .jh-notes-form {
        flex: none;
      }
      #profit-screen .jh-notes-form label {
        display: block;
        font-weight: 700;
      }
      #profit-screen .jh-notes-form textarea {
        display: block;
        width: 100%;
        border: 1px solid #bacddd;
        font: inherit;
        color: #294f6b;
        background: #fff;
      }
      #profit-screen .jh-notes-form textarea:focus {
        outline: 2px solid #a6c5dc;
        outline-offset: 1px;
      }
      #profit-screen .jh-notes-form-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 9px;
      }
      #profit-screen .jh-notes-hint {
        font-size: 10px;
        color: #8396a4;
        line-height: 1.5;
      }
      #profit-screen .jh-notes-save {
        border: 1px solid #315e80;
        border-radius: 4px;
        background: #315e80;
        color: #fff;
        font: inherit;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        white-space: nowrap;
      }
      #profit-screen .jh-notes-message {
        font-size: 11px;
        color: #397e67;
        line-height: 1.4;
        min-height: 0;
      }
      #profit-screen .jh-notes-message:empty {
        display: none;
      }
      #profit-screen .jh-notes-message.is-error {
        color: #bc4756;
      }
      #profit-screen .jh-notes-history-head {
        display: flex;
        justify-content: space-between;
        padding: 10px 16px;
        border-top: 1px solid #e2eaf0;
        border-bottom: 1px solid #e2eaf0;
        background: #fafcfd;
        font-size: 11px;
        flex: none;
      }
      #profit-screen .jh-notes-history-head span {
        color: #8197a7;
      }
      #profit-screen .jh-notes-history {
        list-style: none;
        margin: 0;
        padding: 0 16px;
        overflow: auto;
        min-height: 40px;
      }
      #profit-screen .jh-notes-history li {
        padding: 12px 0;
        border-bottom: 1px solid #e8eef3;
      }
      #profit-screen .jh-notes-history li:last-child {
        border-bottom: 0;
      }
      #profit-screen .jh-note-meta {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 10px;
        color: #8a9ba9;
        margin-bottom: 6px;
      }
      #profit-screen .jh-note-meta b {
        font-weight: 700;
        color: #926223;
        background: #fff1d3;
        padding: 2px 5px;
        border-radius: 3px;
      }
      #profit-screen .jh-notes-history p {
        font-size: 12px;
        line-height: 1.6;
        margin: 0;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
      }
      #profit-screen .jh-notes-empty {
        color: #8a9eac;
        font-size: 11px;
        text-align: center;
        padding: 22px 0 !important;
      }
      @media (max-width: 700px) {
        #profit-screen .jh-detail-drawer-head {
          gap: 8px;
          flex-wrap: wrap;
        }
        #profit-screen .jh-detail-heading {
          flex-basis: 100%;
        }
        #profit-screen .jh-detail-drawer-buttons {
          margin-left: auto;
        }
        #profit-screen .jh-latest-note {
          max-width: 165px;
        }
      }

      #profit-screen .jh-detail-drawer #jh-cost-modal,
      #profit-screen .jh-detail-drawer #jh-cost-modal.is-group {
        position: absolute;
        inset: var(--jh-cost-popup-top, 320px) 18px auto;
        width: auto;
        height: calc(100% - var(--jh-cost-popup-top, 320px) - 12px);
        max-width: none;
        margin: 0;
        z-index: 6;
      }
      #jh-cost-modal::backdrop {
        background: transparent;
      }
      #jh-cost-modal .jh-cost-modal-head {
        align-items: center;
        background: #f2f7fb;
      }
      #jh-cost-modal .jh-cost-modal-project {
        display: none;
      }
      #jh-cost-modal .jh-cost-modal-summary {
        padding: 8px 12px;
        gap: 12px;
        background: #fff;
      }
      #jh-cost-modal .jh-cost-modal-summary span {
        font-size: 10px;
        margin-bottom: 4px;
      }
      #jh-cost-modal .jh-cost-modal-summary strong {
        font-size: 16px;
        line-height: 20px;
      }
      #jh-cost-modal .jh-cost-modal-table-head {
        padding: 7px 12px;
        font-size: 11px;
        line-height: 16px;
      }
      #jh-cost-modal .jh-cost-modal-table-head small {
        font-size: 10px;
      }
      #jh-cost-modal .jh-cost-modal-foot {
        padding: 7px 12px;
        font-size: 9px;
        line-height: 12px;
      }
      #jh-cost-modal.is-group table tr > *:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        box-shadow: 1px 0 #dce7ef;
      }
      #jh-cost-modal.is-group table thead th:first-child,
      #jh-cost-modal.is-group table tfoot th:first-child {
        z-index: 3;
      }
      @media (max-height: 740px) {
        #profit-screen .jh-detail-drawer #jh-cost-modal,
        #profit-screen .jh-detail-drawer #jh-cost-modal.is-group {
          left: 14px;
          right: 14px;
          bottom: 9px;
        }
      }
      @media (max-width: 700px) {
        #profit-screen .jh-detail-drawer #jh-cost-modal,
        #profit-screen .jh-detail-drawer #jh-cost-modal.is-group {
          left: 8px;
          right: 8px;
          bottom: 8px;
        }
      }

      #profit-screen .jh-item-name {
        justify-self: start;
      }
      #profit-screen .jh-detail-drawer #jh-cost-modal,
      #profit-screen .jh-detail-drawer #jh-cost-modal.is-group {
        bottom: auto;
        max-height: none;
        border-radius: 5px;
        box-shadow: 0 3px 12px #274e6b24;
      }
      #jh-cost-modal .jh-cost-modal-head {
        gap: 5px;
        box-sizing: border-box;
      }
      #jh-cost-modal h2 {
        font-size: 11px;
        line-height: 16px;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      #jh-cost-modal h2 small {
        font-size: 9px;
        font-weight: 400;
        color: #7790a4;
        margin-left: 3px;
      }
      #jh-cost-modal .jh-cost-modal-close {
        flex: none;
      }
      #jh-cost-modal .jh-cost-modal-scroll {
        margin: 0;
        border: 0;
      }
      #jh-cost-modal table {
        font-size: 10px;
      }
      #jh-cost-modal table th,
      #jh-cost-modal table td {
        font-size: 10px;
        padding: 4px 4px;
        line-height: 15px;
      }
      #jh-cost-modal table thead th {
        font-size: 9px;
      }
      #jh-cost-modal table .jh-cost-empty {
        padding: 12px 4px;
      }
      @media (min-height: 900px) {
        #jh-cost-modal .jh-cost-modal-head {
          min-height: 32px;
        }
        #jh-cost-modal h2 {
          font-size: 12px;
        }
        #jh-cost-modal table th,
        #jh-cost-modal table td {
          font-size: 11px;
          line-height: 17px;
          padding-top: 5px;
          padding-bottom: 5px;
        }
      }

      /* Information stays at 14px at every desktop breakpoint; explanatory labels retain their scale. */
      table tbody td,
      table tbody th,
      table tfoot td,
      table tfoot th {
        font-size: 14px !important;
      }
      table tbody button,
      table tfoot button {
        font-size: 14px !important;
      }
      #profit-screen .profit-screen-table,
      #profit-screen .profit-screen-table .profit-project-name,
      #profit-screen #jh-accordion-detail-table .profit-project-name,
      #profit-screen .profit-screen-table .group-toggle,
      #profit-screen .profit-screen-table .group-count,
      #profit-screen .profit-screen-table .jh-rate-unknown {
        font-size: 14px !important;
      }
      #profit-screen .profit-screen-table tbody tr.project-data-row td,
      #profit-screen .profit-screen-table .category-summary td {
        height: 34px !important;
        padding: 6px 5px !important;
        line-height: 20px;
      }
      #profit-screen .profit-screen-table .profit-project-name {
        line-height: 20px;
      }
      #profit-screen #profit-main-table col.project-kind-col {
        width: 17% !important;
      }
      #profit-screen #profit-main-table col.project-name-col {
        width: 7% !important;
      }
      #profit-screen #profit-main-table col.project-contract-col {
        width: 10.5% !important;
      }
      #profit-screen #profit-main-table col.project-sales-col {
        width: 12% !important;
      }
      #profit-screen #profit-main-table col.project-ratio-col {
        width: 10% !important;
      }
      #profit-screen #profit-main-table col.jh-direct-col {
        width: 12% !important;
      }
      #profit-screen #profit-main-table col.jh-indirect-col {
        width: 10.5% !important;
      }
      #profit-screen #profit-main-table col.jh-costrate-col {
        width: 9% !important;
      }
      #profit-screen #profit-main-table col.project-profit-col {
        width: 12% !important;
      }
      #profit-screen #jh-accordion-detail-table col.project-name-col {
        width: 22% !important;
      }
      #profit-screen #jh-accordion-detail-table col.jh-costrate-col {
        width: 11% !important;
      }
      #profit-screen .jh-item-name,
      #profit-screen .jh-item-amount,
      #profit-screen .jh-item-share {
        font-size: 14px !important;
        line-height: 18px;
      }
      #profit-screen .jh-item-row {
        grid-template-columns: minmax(0, 1fr) auto 60px;
      }
      #jh-cost-modal table tbody th,
      #jh-cost-modal table tbody td,
      #jh-cost-modal table tfoot th,
      #jh-cost-modal table tfoot td {
        font-size: 14px !important;
      }
      @media (min-height: 900px) and (min-width: 1000px) {
        #profit-screen .jh-item-row {
          min-height: 34px;
          padding: 7px 0;
        }
        #profit-screen .jh-cost-box-title {
          font-size: 16px;
        }
      }
      @media (max-height: 740px) {
        #profit-screen .jh-item-row {
          min-height: 25px;
          padding: 3px 0;
        }
      }

      #jh-cost-modal .jh-cost-modal-head {
        padding: 2px 5px;
        min-height: 26px;
      }

      #jh-cost-modal table tr > *:first-child,
      #jh-cost-modal:not(.is-group) table tr > *:first-child,
      #jh-cost-modal.is-group table tr > *:first-child {
        width: 56px;
        min-width: 56px;
      }
      #jh-cost-modal
        .jh-cost-month-toggle:not(.is-unavailable)[aria-expanded="true"]
        .jh-cost-expand-icon {
        color: #245a7e;
      }
      #jh-cost-modal .jh-cost-month-toggle.is-unavailable .jh-cost-expand-icon {
        color: #8a9eac;
        font-size: 11px;
      }
      #jh-cost-modal .jh-cost-missing {
        color: #6d8497;
        font-size: 12px;
        line-height: 18px;
        text-align: center;
      }
      #jh-cost-modal .jh-cost-missing span {
        display: block;
        color: #8a9eac;
        font-size: 10px;
        line-height: 15px;
      }
      #jh-cost-modal table tr.jh-cost-month-breakdown > td {
        position: static;
        left: auto;
        width: auto;
        min-width: 0;
        background: #f2f7fb !important;
        box-shadow: none;
        text-align: left;
        border-bottom: 1px solid #d9e5ee;
      }

      #profit-screen .jh-detail-summary-4 .jh-detail-metric {
        flex-direction: row;
        align-items: center;
        min-height: 20px;
      }
      #profit-screen .jh-detail-summary-4 .jh-detail-metric span {
        line-height: 18px;
      }
      #profit-screen .jh-detail-summary-4 .jh-detail-metric strong {
        font-weight: 600;
        letter-spacing: -0.02em;
      }
      #jh-cost-modal .jh-cost-modal-close:hover {
        color: #234f6f;
      }
      #jh-cost-modal .jh-cost-modal-scroll {
        border-radius: 5px;
      }
      #jh-cost-modal.is-group .jh-cost-modal-scroll {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
      }
      #jh-cost-modal .jh-cost-expand-hint {
        border-radius: 5px 5px 0 0;
      }
      @media (max-width: 700px) {
        #profit-screen .jh-detail-summary-4 .jh-detail-metric {
          gap: 5px;
          padding: 0 5px;
        }
      }

      #jh-cost-modal .jh-cost-item-summary {
        display: grid;
        grid-template-columns: 1fr 1.25fr;
        gap: 8px;
        padding: 0 9px;
        border-bottom: 1px solid #dce7ef;
        flex: none;
      }
      #jh-cost-modal .jh-cost-item-summary > div {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        text-align: center;
      }
      #jh-cost-modal .jh-cost-item-summary > div + div {
        border-left: 1px solid #d4e3ed;
        padding-left: 0;
      }
      #jh-cost-modal .jh-cost-item-summary span {
        font-size: 9px;
        line-height: 12px;
        color: #7890a2;
        white-space: nowrap;
      }
      #jh-cost-modal .jh-cost-item-summary strong {
        font-size: 14px;
        line-height: 19px;
        color: #285673;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
      }
      #jh-cost-modal:not(.is-group) .jh-cost-modal-scroll {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
      }

      #profit-screen svg .jh-profit-zone,
      #profit-screen.jh-focus-mode svg .jh-profit-zone {
        stroke: none;
        fill-opacity: 1;
        paint-order: normal;
      }
      #profit-screen svg .jh-profit-zone-label {
        font-weight: 700;
        stroke: none;
        letter-spacing: -0.2px;
      }

      #profit-screen .jh-note-assignee-field {
        margin-bottom: 12px;
      }
      #profit-screen .jh-notes-form input[type="text"] {
        display: block;
        width: 100%;
        border: 1px solid #bacddd;
        background: #fff;
        color: #294f6b;
        font: inherit;
      }
      #profit-screen .jh-notes-form input[type="text"]::placeholder {
        font-size: 12px;
        color: #8a9ba9;
      }
      #profit-screen .jh-notes-form input[type="text"]:focus {
        outline: 2px solid #a6c5dc;
        outline-offset: 1px;
      }
      #profit-screen .jh-note-meta {
        flex-wrap: wrap;
        row-gap: 4px;
      }
      #profit-screen .jh-note-assignee {
        max-width: 100%;
        color: #54738a;
        font-size: 12px;
        white-space: normal;
        overflow-wrap: anywhere;
      }

      #jh-cost-modal table tbody th,
      #jh-cost-modal table tbody td,
      #jh-cost-modal table tfoot th,
      #jh-cost-modal table tfoot td {
        padding: 6px 4px;
        line-height: 20px;
      }
      #jh-cost-modal table thead th {
        padding: 6px 4px;
        line-height: 14px;
      }
      #jh-cost-modal table tr > *:first-child {
        padding-left: 10px;
      }
      #jh-cost-modal table tr > *:last-child {
        padding-right: 10px;
      }
      #jh-cost-modal table tr.jh-cost-month-breakdown > td {
        padding: 10px 7px;
      }
      #jh-cost-modal .jh-cost-month-item span {
        overflow-wrap: anywhere;
      }
      #jh-cost-modal .jh-cost-month-item.is-negative strong {
        color: #b64e59;
      }
      #jh-cost-modal .jh-cost-breakdown-note {
        margin-top: 5px;
        color: #8296a6;
        font-size: 10px;
        line-height: 14px;
      }
      #jh-cost-modal table tbody tr[data-month] {
        cursor: pointer;
      }
      #jh-cost-modal table tbody tr[data-month] > td:nth-child(2) {
        color: #315a77;
      }
      #jh-cost-modal .jh-cost-ledger-summary {
        padding: 2px 4px 5px;
        border-bottom: 1px solid #d9e5ee;
        color: #57768c;
        white-space: normal;
        overflow-wrap: anywhere;
      }
      #jh-cost-modal .jh-cost-ledger-summary.is-single {
        font-size: 10px;
      }
      #jh-cost-modal .jh-cost-ledger-summary-line {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        padding: 2px 0;
        font-size: 10px;
        line-height: 14px;
      }
      #jh-cost-modal .jh-cost-ledger-summary-line strong {
        flex: none;
        color: #315a77;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
      }
      #jh-cost-modal .jh-cost-ledger-columns,
      #jh-cost-modal .jh-cost-ledger-row-toggle {
        display: grid;
        align-items: start;
      }
      #jh-cost-modal .jh-cost-ledger-columns span:last-child {
        text-align: right;
      }
      #jh-cost-modal .jh-cost-ledger-row-toggle {
        width: 100%;
        padding: 7px 4px;
        border: 0;
        border-bottom: 1px solid #e3ebf1;
        background: #fff;
        color: #527087;
        font: inherit;
        font-size: 11px;
        line-height: 15px;
        text-align: left;
        white-space: normal;
        cursor: pointer;
      }
      #jh-cost-modal .jh-cost-ledger-row-toggle:hover,
      #jh-cost-modal .jh-cost-ledger-row-toggle[aria-expanded="true"] {
        background: #f6fafc;
      }
      #jh-cost-modal .jh-cost-ledger-row-toggle:focus-visible {
        outline: 2px solid #79a7c7;
        outline-offset: -2px;
      }
      #jh-cost-modal .jh-cost-ledger-row-toggle time {
        color: #7890a2;
        font-size: 10px;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
      }
      #jh-cost-modal .jh-cost-ledger-main {
        display: block;
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: normal;
      }
      #jh-cost-modal .jh-cost-ledger-vendor-line {
        display: flex;
        min-width: 0;
        align-items: flex-start;
        gap: 3px;
      }
      #jh-cost-modal .jh-cost-ledger-entry-chevron {
        flex: none;
        color: #7393a9;
        font-size: 10px;
        line-height: 15px;
      }
      #jh-cost-modal .jh-cost-ledger-vendor {
        min-width: 0;
        overflow-wrap: anywhere;
        font-weight: 600;
      }
      #jh-cost-modal .jh-cost-ledger-description {
        display: block;
        margin-left: 11px;
        color: #58748a;
        font-weight: 400;
      }
      #jh-cost-modal .jh-cost-ledger-category {
        display: block;
        margin-left: 11px;
        margin-top: 2px;
        color: #8198a8;
        font-size: 9px;
        font-weight: 400;
      }
      #jh-cost-modal .jh-cost-ledger-amount {
        color: #315a77;
        font-weight: 500;
        text-align: right;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
      }
      #jh-cost-modal .jh-cost-ledger-amount.is-negative {
        color: #b64e59;
      }
      #jh-cost-modal .jh-cost-ledger-extra {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2px;
        margin: 0;
        padding: 6px 6px 8px 50px;
        border-bottom: 1px solid #dce7ef;
        background: #f7fafc;
        color: #647f91;
        font-size: 10px;
        line-height: 14px;
        white-space: normal;
      }
      #jh-cost-modal .jh-cost-ledger-extra[hidden] {
        display: none !important;
      }
      #jh-cost-modal .jh-cost-ledger-extra > div {
        display: grid;
        gap: 4px;
      }
      #jh-cost-modal .jh-cost-ledger-extra dt {
        color: #8299a9;
        font-weight: 400;
      }
      #jh-cost-modal .jh-cost-ledger-extra dd {
        min-width: 0;
        margin: 0;
        overflow-wrap: anywhere;
        font-weight: 400;
      }

      #profit-screen .jh-chart-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 6px 10px;
      }
      #profit-screen .jh-chart-title {
        flex-wrap: nowrap;
        padding-top: 3px;
      }
      #profit-screen .jh-chart-title strong {
        line-height: 20px;
        white-space: nowrap;
      }
      #profit-screen .jh-chart-title #jh-chart-sub {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 14px;
        white-space: nowrap;
      }
      #profit-screen .jh-chart-head .jh-assumption-bar {
        flex-wrap: nowrap;
        padding: 0;
        background: transparent;
        border: 0;
      }
      #profit-screen .jh-chart-head .jh-assumption-bar > small {
        font-size: 9px;
        line-height: 14px;
      }
      #profit-screen .jh-chart-head .jh-chart-actions {
        grid-column: 1/-1;
        margin-left: 0;
        justify-content: flex-end;
      }

      #profit-screen.jh-has-selection
        #jh-chart-svg
        g.jh-point-group:not(.jh-selected):not(.jh-hover)
        .jh-point {
        opacity: 0.18 !important;
      }
      #profit-screen.jh-has-selection #jh-chart-svg [data-label-code] {
        display: none;
      }

      #profit-screen #jh-chart-svg .jh-selected-project-name {
        font-size: 14px;
        font-weight: 800;
        stroke: #fff;
        stroke-width: 2.5px;
        paint-order: stroke;
        stroke-linejoin: round;
        pointer-events: none;
      }

      #profit-screen .jh-summary-heading {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      #profit-screen .jh-summary-heading::before {
        content: "";
        display: block;
        flex: 0 0 3px;
        width: 3px;
        height: 11.2px;
        background: #244e6d;
      }

      #profit-screen #jh-accordion-detail-table #jh-accordion-detail-rows .profit-project-name {
        display: flex;
        align-items: center;
        gap: 7px;
        color: #29465d !important;
      }
      #profit-screen #jh-accordion-detail-rows .jh-project-status-dot {
        display: block;
        width: 9px;
        height: 9px;
        flex: 0 0 9px;
        border-radius: 50%;
        background: var(--jh-label-ink, #8997a4);
      }
      #profit-screen #jh-accordion-detail-rows .jh-project-name-text {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      #profit-screen .jh-chart-head {
        background: transparent;
      }
      #profit-screen #profit-fixed-tbl,
      #profit-screen #jh-accordion-scroll {
        border-radius: 8px 8px 0 0;
      }
      #profit-screen #profit-project-head tr:first-child > th:first-child,
      #profit-screen #jh-accordion-detail-head tr:first-child > th:first-child {
        border-top-left-radius: 8px;
      }
      #profit-screen #profit-project-head tr:first-child > th:last-child,
      #profit-screen #jh-accordion-detail-head tr:first-child > th:last-child {
        border-top-right-radius: 8px;
      }

      #profit-screen .jh-pane-heading {
        padding-left: 0;
      }
      #profit-screen .jh-detail-drawer {
        overflow: hidden;
      }
      #profit-screen .jh-assumption-controls {
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
      }

      #profit-screen .jh-chart-head .jh-assumption-controls {
        padding-right: 0;
      }
      #profit-screen .jh-chart-head {
        border-bottom: 0;
      }
      #profit-screen .jh-chart-foot {
        border-top: 0;
      }
      #profit-screen #jh-trajectory-caption::before {
        content: "※ ";
      }

      #profit-screen .jh-workspace-split {
        gap: 28px;
        min-width: 1328px;
      }
      #profit-screen #jh-accordion-detail-table #jh-accordion-detail-rows .profit-project-name {
        text-decoration: none !important;
      }
      #profit-screen #profit-fixed-tbl,
      #profit-screen #jh-accordion-scroll {
        scrollbar-width: thin;
        scrollbar-color: #91afc5 #f0f5f8;
      }
      @supports selector(::-webkit-scrollbar) {
        #profit-screen #profit-fixed-tbl,
        #profit-screen #jh-accordion-scroll {
          scrollbar-width: auto;
          scrollbar-color: auto;
        }
        #profit-screen #profit-fixed-tbl::-webkit-scrollbar,
        #profit-screen #jh-accordion-scroll::-webkit-scrollbar {
          width: 8px;
          height: 8px;
        }
        #profit-screen #profit-fixed-tbl::-webkit-scrollbar-track,
        #profit-screen #jh-accordion-scroll::-webkit-scrollbar-track {
          background: #f0f5f8;
        }
        #profit-screen #profit-fixed-tbl::-webkit-scrollbar-thumb,
        #profit-screen #jh-accordion-scroll::-webkit-scrollbar-thumb {
          background: #91afc5;
          border: 2px solid #f0f5f8;
          border-radius: 8px;
        }
        #profit-screen #profit-fixed-tbl::-webkit-scrollbar-thumb:hover,
        #profit-screen #jh-accordion-scroll::-webkit-scrollbar-thumb:hover {
          background: #6e97b5;
        }
        #profit-screen #profit-fixed-tbl::-webkit-scrollbar-button,
        #profit-screen #jh-accordion-scroll::-webkit-scrollbar-button {
          display: none;
          width: 0;
          height: 0;
        }
        #profit-screen #profit-fixed-tbl::-webkit-scrollbar-corner,
        #profit-screen #jh-accordion-scroll::-webkit-scrollbar-corner {
          background: #f0f5f8;
        }
      }

      #jh-cost-modal .jh-cost-modal-scroll {
        scrollbar-width: thin;
        scrollbar-color: #91afc5 #fff;
      }
      @supports selector(::-webkit-scrollbar) {
        #jh-cost-modal .jh-cost-modal-scroll {
          scrollbar-width: auto;
          scrollbar-color: auto;
        }
        #jh-cost-modal .jh-cost-modal-scroll::-webkit-scrollbar {
          width: 8px;
          height: 8px;
        }
        #jh-cost-modal .jh-cost-modal-scroll::-webkit-scrollbar-track {
          background: #fff;
        }
        #jh-cost-modal .jh-cost-modal-scroll::-webkit-scrollbar-thumb {
          background: #91afc5;
          border: 2px solid #fff;
          border-radius: 8px;
        }
        #jh-cost-modal .jh-cost-modal-scroll::-webkit-scrollbar-thumb:hover {
          background: #6e97b5;
        }
        #jh-cost-modal .jh-cost-modal-scroll::-webkit-scrollbar-button {
          display: none;
          width: 0;
          height: 0;
        }
        #jh-cost-modal .jh-cost-modal-scroll::-webkit-scrollbar-corner {
          background: #fff;
        }
      }

      #profit-screen .jh-chart-title {
        flex-direction: row;
        gap: 9px;
      }
      #profit-screen .jh-chart-foot {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 5px 12px;
      }
      #profit-screen .jh-trajectory-caption {
        min-width: 0;
        overflow-wrap: anywhere;
      }
      #profit-screen .jh-chart-foot #jh-chart-missing {
        position: static;
        justify-self: end;
        white-space: nowrap;
        font-size: 9px;
        color: #71899c;
      }
      #profit-screen .jh-chart-foot #jh-chart-missing strong {
        font-weight: 400;
      }
      #profit-screen .jh-chart-foot #jh-chart-missing button {
        border: 0;
        background: transparent;
        padding: 2px 0 2px 3px;
        border-radius: 0;
        color: #315f82;
        font-size: 10px;
      }

      .jh-header-categories {
        display: flex;
        align-items: center;
        margin-left: 3px;
        white-space: nowrap;
      }
      .jh-header-categories[hidden] {
        display: none;
      }
      .jh-header-categories button {
        padding: 4px 0;
        border: 0;
        background: transparent;
        color: #8da5b9;
        font: inherit;
        font-size: 14px;
      }
      .jh-header-categories button.active {
        color: #b9dbef;
        font-weight: 700;
        cursor: pointer;
      }
      .jh-header-categories button:disabled {
        cursor: default;
        opacity: 1;
      }
      .jh-header-categories > span {
        color: #68839b;
        font-size: 14px;
      }
      #profit-screen .jh-detail-drawer {
        max-width: none;
      }

      #profit-screen svg .jh-zone-inline-content .jh-profit-zone-label {
        stroke: #fff;
        stroke-width: 2px;
        paint-order: stroke;
        stroke-linejoin: round;
      }

      #profit-screen #jh-accordion-detail-rows tr.project-data-row td {
        height: 30px !important;
      }
      #profit-screen #jh-accordion-detail-rows tr[data-status="normal"] td,
      #profit-screen #jh-accordion-detail-rows tr[data-status="normal"] .profit-project-name,
      #profit-screen #jh-accordion-detail-rows tr[data-status="normal"] .jh-project-name-text {
        font-weight: 400 !important;
      }
      #profit-screen
        #jh-accordion-detail-rows
        tr.project-data-row:not(:hover):not(.jh-hover):not(.jh-selected)
        td.jh-rate-normal {
        background: #fff !important;
      }
      #profit-screen #jh-accordion-detail-rows tr.jh-detail-total td {
        height: 30px;
        background: #e9f2f9 !important;
        font-weight: 600 !important;
        border-bottom: 1px solid #bfd3e2;
      }
      .jh-header-categories {
        gap: 0;
      }
      .jh-header-categories > span {
        margin: 0 2px;
      }
      .jh-header-categories > span:first-of-type {
        margin: 0 8px;
      }

      #profit-screen #jh-accordion-detail-rows tr[data-status="unknown"] td,
      #profit-screen #jh-accordion-detail-rows tr[data-status="check"] td,
      #profit-screen #jh-accordion-detail-rows tr[data-status="unknown"] .profit-project-name,
      #profit-screen #jh-accordion-detail-rows tr[data-status="check"] .profit-project-name,
      #profit-screen #jh-accordion-detail-rows tr[data-status="unknown"] .jh-project-name-text,
      #profit-screen #jh-accordion-detail-rows tr[data-status="check"] .jh-project-name-text {
        font-weight: 400 !important;
      }
      #profit-screen
        #jh-accordion-detail-rows
        tr.project-data-row:not(:hover):not(.jh-hover):not(.jh-selected)
        td.jh-rate-unknown {
        background: #fff !important;
      }
      #profit-screen #jh-chart-missing button {
        font-weight: 400;
      }

      #profit-screen #jh-accordion-detail-rows tr[data-status="risk"] td,
      #profit-screen #jh-accordion-detail-rows tr[data-status="warn"] td {
        height: 33px !important;
      }
      #profit-screen .jh-detail-list-heading {
        display: flex;
        align-items: center;
        gap: 7px;
      }
      #profit-screen .jh-detail-list-heading #jh-detail-project-count {
        font-size: 13px;
        font-weight: 400;
        color: #71899c;
      }

      #profit-screen
        #jh-accordion-detail-rows
        tr:is([data-status="risk"], [data-status="warn"])
        .actual-amount {
        font-weight: 500 !important;
      }
      #profit-screen
        #jh-accordion-detail-rows
        tr:is([data-status="risk"], [data-status="warn"])
        .profit-project-name,
      #profit-screen
        #jh-accordion-detail-rows
        tr:is([data-status="risk"], [data-status="warn"])
        .jh-project-name-text,
      #profit-screen
        #jh-accordion-detail-rows
        tr:is([data-status="risk"], [data-status="warn"])
        .jh-sales-ratio {
        font-weight: 600 !important;
      }
      #profit-screen
        #jh-accordion-detail-rows
        tr:is([data-status="risk"], [data-status="warn"])
        .jh-cost-rate,
      #profit-screen
        #jh-accordion-detail-rows
        tr:is([data-status="risk"], [data-status="warn"])
        .money-negative {
        font-weight: 700 !important;
      }

      #profit-screen #jh-accordion-detail-rows tr.project-data-row td,
      #profit-screen #jh-accordion-detail-rows tr.jh-detail-total td {
        padding: 0 5px !important;
        line-height: 20px;
      }

      .jh-header-categories button:not(:disabled) {
        cursor: pointer;
      }
      #profit-screen.jh-other-view #profit-accordion-layout {
        display: none !important;
      }
      #profit-screen.jh-other-view > section,
      #profit-screen .jh-other-summary {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
      }
      #profit-screen .jh-other-summary {
        display: block;
        overflow: auto;
      }
      #profit-screen .jh-other-summary[hidden] {
        display: none !important;
      }
      #profit-screen .jh-other-summary-unit {
        box-sizing: border-box;
      }
      #profit-screen .jh-other-summary table.jh-other-table thead th {
        top: 24px;
      }
      #profit-screen .jh-other-summary thead th:first-child {
        border-top-left-radius: 8px;
        text-align: left !important;
      }
      #profit-screen .jh-other-summary table.jh-other-table thead th:nth-child(2) {
        text-align: center;
      }
      #profit-screen .jh-other-summary thead th:last-child {
        border-top-right-radius: 8px;
        background: #dce9f4 !important;
        color: #174d73 !important;
      }
      #profit-screen .jh-other-summary tbody th,
      #profit-screen .jh-other-summary tbody td {
        padding: 11px 8px;
        border-bottom: 1px solid #e8edf2;
        background: #fff;
        color: #29465d;
        font-weight: 400;
        font-size: 13px;
        line-height: 19px;
      }
      #profit-screen .jh-other-summary tbody th {
        position: static;
        text-align: left;
        overflow-wrap: anywhere;
      }
      #profit-screen .jh-other-summary tbody tr:not(.jh-other-total) > th {
        padding-left: 16px;
      }
      #profit-screen .jh-other-summary tbody td {
        text-align: right;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
        color: #264c69;
        font-weight: 600;
      }
      #profit-screen .jh-other-summary tbody tr:nth-child(even) > th,
      #profit-screen .jh-other-summary tbody tr:nth-child(even) > td {
        background: #fbfcfd;
      }
      #profit-screen .jh-other-summary tbody.jh-other-group + tbody.jh-other-group tr.jh-other-total > * {
        border-top: 16px solid #fff;
      }
      #profit-screen .jh-other-summary tbody tr.jh-other-total > th,
      #profit-screen .jh-other-summary tbody tr.jh-other-total > td {
        background: #eaf3f8;
        color: #174d73;
        font-weight: 700;
      }
      #profit-screen .jh-other-summary tbody tr.jh-other-total > th {
        font-size: 15px;
      }
      #profit-screen .jh-other-summary td.is-negative,
      #profit-screen .jh-other-summary tbody tr.jh-other-total > td.is-negative {
        color: #bd4e58;
      }
      .project-delete-inline{border:0;background:none;padding:0;margin:0 0 0 4px;font:inherit;color:#bd4e58;text-decoration:underline;cursor:pointer;flex:none;white-space:nowrap}
      #admin-content table.admin-forecast-table .forecast-col-1 span.forecast-name-del{display:flex;align-items:center;justify-content:center;white-space:nowrap;min-width:0}
      #admin-content table.admin-forecast-table .forecast-col-1 span.forecast-name-del>span{min-width:0}