/* v1.3 · 工作强度与动态 KPI 机制 */

@media screen {
  #view-shadow {
    --shadow-ink: #17365f;
    --shadow-blue: #245ea8;
    --shadow-blue-soft: #eaf2fd;
    --shadow-cyan: #0b7f8f;
    --shadow-amber: #a55b08;
    --shadow-paper: #fbfcfe;
    --shadow-line: #d6e0ed;
    --shadow-muted: #637187;
  }

  .shadow-formula-panel,
  .shadow-type-panel,
  .shadow-overview-panel,
  .shadow-employee-panel,
  .shadow-boundary-note {
    border: 1px solid var(--shadow-line);
    background: var(--shadow-paper);
    box-shadow: 0 18px 48px rgba(28, 57, 95, 0.08);
  }

  .shadow-formula-panel,
  .shadow-type-panel,
  .shadow-overview-panel,
  .shadow-employee-panel {
    margin-bottom: 18px;
    padding: 26px;
  }

  .shadow-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
  }

  .shadow-section-heading h2 {
    margin: 5px 0 7px;
    color: var(--shadow-ink);
    font-size: 24px;
  }

  .shadow-section-heading p {
    margin: 0;
    color: var(--shadow-muted);
  }

  .shadow-formula-badge {
    flex: 0 0 auto;
    padding: 8px 10px;
    color: var(--shadow-blue);
    border: 1px solid #bfd1ea;
    background: #f1f6fd;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
  }

  .shadow-formula-actions {
    display: grid;
    width: 152px;
    flex: 0 0 152px;
    gap: 9px;
  }

  .shadow-formula-toolbar {
    display: flex;
    flex: 0 0 auto;
    align-items: stretch;
    gap: 10px;
  }

  .shadow-formula-actions .shadow-formula-badge {
    display: grid;
    min-height: 36px;
    place-items: center;
    text-align: center;
  }

  .shadow-rule-explain-button {
    display: flex;
    width: 100%;
    min-height: 38px;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    color: #fff;
    border: 1px solid #1f5fc8;
    background: #286bd9;
    box-shadow: 0 7px 16px rgba(28, 88, 182, 0.18);
    font-size: 12px;
    font-weight: 760;
  }

  .work-import-dialog {
    width: min(820px, calc(100vw - 30px));
  }

  .work-import-dialog-card {
    display: grid;
    width: 100%;
    min-width: 0;
    max-height: calc(100vh - 30px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    box-sizing: border-box;
    background: #f8fbff;
  }

  .work-import-dialog-card > * {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .work-import-heading,
  .work-import-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    background: #fff;
  }

  .work-import-heading {
    align-items: flex-start;
    border-bottom: 1px solid #d9e4f1;
  }

  .work-import-heading > div {
    min-width: 0;
    flex: 1;
  }

  .work-import-heading h2 {
    margin: 4px 0 0;
    color: #17365f;
    font-size: 23px;
  }

  .work-import-heading p {
    margin: 5px 0 0;
    color: #637187;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .work-import-scroll {
    padding: 20px 22px;
    overflow: auto;
  }

  .work-import-alert {
    padding: 14px 16px;
    color: #21466f;
    border: 1px solid #bcd2ee;
    border-left: 4px solid #286bd9;
    border-radius: 5px;
    background: #edf5ff;
  }

  .work-import-alert.is-error {
    color: #812f2f;
    border-color: #edb9b9;
    border-left-color: #c14343;
    background: #fff4f4;
  }

  .work-import-alert strong,
  .work-import-alert p {
    display: block;
    margin: 0;
  }

  .work-import-alert p {
    margin-top: 4px;
    font-size: 12px;
  }

  .work-import-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin-top: 14px;
  }

  .work-import-stat-grid > div {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #d9e4f1;
    border-radius: 5px;
    background: #fff;
  }

  .work-import-stat-grid span,
  .work-import-stat-grid strong {
    display: block;
  }

  .work-import-stat-grid span {
    color: #708096;
    font-size: 11px;
  }

  .work-import-stat-grid strong {
    margin-top: 4px;
    color: #1f5fc8;
    font-size: 20px;
  }

  .work-import-message-panel,
  .work-import-scope-panel {
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid #d9e4f1;
    border-radius: 5px;
    background: #fff;
  }

  .work-import-message-panel[hidden] {
    display: none;
  }

  .work-import-message-panel h3 {
    margin: 0 0 7px;
    font-size: 14px;
  }

  .work-import-message-panel ul {
    max-height: 130px;
    margin: 0;
    padding-left: 20px;
    overflow: auto;
  }

  .work-import-message-panel li {
    margin: 4px 0;
    font-size: 12px;
    line-height: 1.55;
  }

  .work-import-message-panel.is-error {
    color: #812f2f;
    border-color: #edb9b9;
    background: #fff7f7;
  }

  .work-import-message-panel.is-warning {
    color: #765116;
    border-color: #efd39b;
    background: #fffaf0;
  }

  .work-import-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
  }

  .work-import-section-heading span,
  .work-import-section-heading small {
    color: #637187;
    font-size: 11px;
  }

  .work-import-section-heading h3 {
    margin: 3px 0 0;
    color: #17365f;
    font-size: 15px;
  }

  .work-import-table-wrap {
    width: 100%;
    min-width: 0;
    max-height: 220px;
    overflow: auto;
  }

  .work-import-table th,
  .work-import-table td {
    padding: 9px 10px;
    font-size: 12px;
  }

  .work-import-confirm {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 13px 15px;
    color: #34485f;
    border: 1px solid #d2ddea;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
  }

  .work-import-confirm input {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    margin-top: 1px;
  }

  .work-import-actions {
    justify-content: flex-end;
    border-top: 1px solid #d9e4f1;
  }

  .shadow-rule-explain-button:hover {
    border-color: #164b9f;
    background: #1c56b8;
  }

  .shadow-rule-explain-button:focus-visible {
    outline: 3px solid rgba(47, 111, 228, 0.24);
    outline-offset: 2px;
  }

  .shadow-rule-explain-button b {
    font-size: 15px;
    line-height: 1;
  }

  .shadow-formula-track {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr);
    align-items: center;
    padding: 18px;
    border: 1px solid #cbd8e8;
    background:
      linear-gradient(rgba(44, 94, 157, 0.04) 1px, transparent 1px) 0 0 / 100% 26px,
      #f7faff;
  }

  .shadow-formula-track > div {
    display: grid;
    grid-template-rows: auto auto auto;
    min-height: 90px;
    align-content: center;
    padding: 14px 16px;
    border-left: 3px solid #8caed8;
    background: white;
  }

  .shadow-formula-track > div.is-result {
    border-left-color: #0b8c80;
    background: #e9f7f4;
  }

  .shadow-formula-track > div span,
  .shadow-formula-track > div small {
    color: var(--shadow-muted);
    font-size: 12px;
  }

  .shadow-formula-track > div strong {
    margin: 3px 0;
    color: var(--shadow-ink);
    font-size: 17px;
    font-variant-numeric: tabular-nums;
  }

  .shadow-formula-track > b {
    color: #7390b3;
    text-align: center;
    font-size: 20px;
  }

  .shadow-type-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .shadow-type-card {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 70px;
    align-items: center;
    gap: 11px;
    min-height: 86px;
    padding: 14px 16px;
    overflow: hidden;
    border: 1px solid #d5dfeb;
    background: white;
  }

  .shadow-type-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--type-color, var(--shadow-blue));
  }

  .shadow-type-code {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    color: var(--type-color, var(--shadow-blue));
    background: color-mix(in srgb, var(--type-color, var(--shadow-blue)) 10%, white);
    font-size: 11px;
    font-weight: 800;
  }

  .shadow-type-copy {
    display: grid;
    grid-template-rows: auto minmax(34px, auto);
    align-content: center;
    min-width: 0;
  }

  .shadow-type-copy strong,
  .shadow-type-copy small {
    display: block;
  }

  .shadow-type-copy strong {
    color: #263d5b;
    font-size: 14px;
    line-height: 1.35;
  }

  .shadow-type-copy small {
    margin-top: 2px;
    color: var(--shadow-muted);
    font-size: 12px;
    line-height: 1.45;
  }

  .shadow-type-base {
    display: grid;
    min-height: 52px;
    align-content: center;
    padding-left: 14px;
    color: var(--shadow-ink);
    border-left: 1px solid #e0e7f0;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .shadow-type-base b,
  .shadow-type-base small {
    display: block;
  }

  .shadow-type-base b {
    font-size: 21px;
  }

  .shadow-type-base small {
    color: var(--shadow-muted);
    font-size: 11px;
  }

  .shadow-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
  }

  .shadow-overview-grid > div {
    display: grid;
    grid-template-rows: auto minmax(44px, 1fr);
    min-height: 100px;
    padding: 17px;
    border: 1px solid #d5dfeb;
    background: #f8fafd;
  }

  .shadow-overview-grid > div.is-average {
    border-color: #add8d6;
    background: #eef9f7;
  }

  .shadow-overview-grid dt {
    color: var(--shadow-muted);
    font-size: 12px;
    font-weight: 650;
  }

  .shadow-overview-grid dd {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 7px 0 0;
  }

  .shadow-overview-grid dd strong {
    color: var(--shadow-ink);
    font-size: 27px;
    font-variant-numeric: tabular-nums;
  }

  .shadow-overview-grid dd span {
    color: var(--shadow-muted);
    font-size: 11px;
    text-align: right;
  }

  .shadow-category-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
  }

  .shadow-category-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
    min-height: 58px;
    padding: 11px 12px;
    border: 1px solid #dbe3ed;
    background: white;
  }

  .shadow-category-row strong {
    color: #294463;
  }

  .shadow-category-row span {
    color: var(--shadow-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .shadow-category-row i {
    grid-column: 1 / -1;
    display: block;
    height: 3px;
    overflow: hidden;
    background: #edf1f6;
  }

  .shadow-category-row i::after {
    content: "";
    display: block;
    width: var(--bar, 0%);
    height: 100%;
    background: var(--bar-color, var(--shadow-blue));
  }

  .shadow-employee-grid {
    display: grid;
    gap: 12px;
  }

  .shadow-employee-card {
    border: 1px solid #d5dfeb;
    background: white;
  }

  .shadow-employee-summary {
    display: grid;
    grid-template-columns: minmax(220px, 1.1fr) repeat(3, minmax(110px, 0.55fr)) minmax(170px, 0.8fr);
    align-items: center;
    gap: 12px;
    padding: 16px;
  }

  .shadow-person {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
  }

  .shadow-person-index {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: white;
    background: var(--shadow-ink);
    font-weight: 750;
  }

  .shadow-person strong,
  .shadow-person small {
    display: block;
  }

  .shadow-person strong {
    color: #213a58;
  }

  .shadow-person small {
    margin-top: 2px;
    color: var(--shadow-muted);
  }

  .shadow-ledger-link {
    margin-top: 5px;
    padding: 0;
    color: #245ea8;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: transparent;
    font: inherit;
    font-size: 11px;
    line-height: 1.4;
    cursor: pointer;
  }

  .shadow-ledger-link:hover,
  .shadow-ledger-link:focus-visible {
    color: #173f78;
    outline: none;
  }

  .shadow-employee-card.is-linked-target {
    border-color: #286bd9;
    outline: 3px solid rgba(40, 107, 217, 0.18);
    outline-offset: 2px;
  }

  .shadow-stat {
    display: grid;
    grid-template-rows: auto auto auto;
    align-content: center;
    min-height: 70px;
    padding-left: 12px;
    border-left: 1px solid #e1e7ef;
  }

  .shadow-stat span,
  .shadow-stat small,
  .shadow-stat strong {
    display: block;
  }

  .shadow-stat span,
  .shadow-stat small {
    color: var(--shadow-muted);
    font-size: 11px;
  }

  .shadow-stat strong {
    margin: 2px 0;
    color: var(--shadow-ink);
    font-size: 20px;
    font-variant-numeric: tabular-nums;
  }

  .shadow-index-meter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px 10px;
    align-items: center;
    align-content: center;
    min-height: 70px;
  }

  .shadow-index-meter span {
    grid-column: 1 / -1;
    color: var(--shadow-muted);
    font-size: 11px;
  }

  .shadow-index-meter i {
    display: block;
    height: 7px;
    overflow: hidden;
    background: #e8eef5;
  }

  .shadow-index-meter i::after {
    content: "";
    display: block;
    width: var(--index-width, 0%);
    height: 100%;
    background: linear-gradient(90deg, #2a64ad, #0b8c80);
  }

  .shadow-index-meter strong {
    color: var(--shadow-ink);
    font-size: 19px;
    font-variant-numeric: tabular-nums;
  }

  .shadow-detail-toggle {
    border-top: 1px solid #e2e8f0;
  }

  .shadow-detail-toggle > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    color: #2b5e9e;
    background: #f7faff;
    cursor: pointer;
    list-style: none;
    font-weight: 650;
  }

  .shadow-detail-toggle > summary::-webkit-details-marker {
    display: none;
  }

  .shadow-detail-toggle > summary::after {
    content: "+";
    font-size: 20px;
  }

  .shadow-detail-toggle[open] > summary::after {
    content: "−";
  }

  .shadow-work-list {
    padding: 0 16px 16px;
  }

  .shadow-work-header,
  .shadow-work-row {
    display: grid;
    grid-template-columns: minmax(210px, 1.35fr) minmax(125px, 0.76fr) minmax(118px, 0.68fr) minmax(118px, 0.68fr) 92px;
    gap: 10px;
    align-items: center;
  }

  .shadow-work-header {
    padding: 10px 8px;
    color: var(--shadow-muted);
    font-size: 11px;
    font-weight: 700;
  }

  .shadow-work-header > :last-child {
    text-align: right;
  }

  .shadow-work-row {
    min-height: 68px;
    padding: 10px 8px;
    border-top: 1px solid #e5eaf1;
  }

  .shadow-work-name strong,
  .shadow-work-name small {
    display: block;
  }

  .shadow-work-name strong {
    color: #263e5b;
  }

  .shadow-work-name small {
    margin-top: 2px;
    color: var(--shadow-muted);
  }

  .shadow-work-row select {
    width: 100%;
    min-width: 0;
    padding: 8px 28px 8px 9px;
    color: #243c59;
    border: 1px solid #cbd7e5;
    background: white;
  }

  .shadow-work-points {
    color: var(--shadow-ink);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .shadow-work-points strong,
  .shadow-work-points small {
    display: block;
  }

  .shadow-work-points strong {
    font-size: 18px;
  }

  .shadow-work-points small {
    color: var(--shadow-muted);
  }

  .shadow-work-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 8px 0;
    color: var(--shadow-muted);
    border-top: 1px solid #e5eaf1;
    font-size: 12px;
  }

  .shadow-work-footer .text-button {
    flex: 0 0 auto;
  }

  .shadow-empty {
    padding: 28px;
    color: var(--shadow-muted);
    border: 1px dashed #bdcbdc;
    text-align: center;
  }

  .shadow-empty strong {
    color: var(--shadow-ink);
  }

  .shadow-empty p {
    margin: 5px 0 0;
  }

  .shadow-boundary-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px 18px;
    align-items: center;
    padding: 17px 20px;
    color: #70430f;
    border-color: #e7c693;
    background: #fff8eb;
  }

  .shadow-boundary-note strong {
    padding-right: 18px;
    border-right: 1px solid #e5c48f;
  }

  .shadow-boundary-note p {
    margin: 0;
    line-height: 1.65;
  }

  @media (max-width: 1180px) {
    .shadow-type-grid,
    .shadow-category-summary {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shadow-employee-summary {
      grid-template-columns: minmax(210px, 1fr) repeat(3, minmax(100px, 0.55fr));
    }

    .shadow-index-meter {
      grid-column: 1 / -1;
      padding-top: 10px;
      border-top: 1px solid #e4e9f0;
    }
  }

  @media (max-width: 820px) {
    .side-nav {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .shadow-formula-panel,
    .shadow-type-panel,
    .shadow-overview-panel,
    .shadow-employee-panel {
      padding: 18px;
    }

    .shadow-section-heading {
      align-items: stretch;
      flex-direction: column;
    }

    .shadow-type-card {
      grid-template-columns: 40px minmax(0, 1fr) 62px;
    }

    .shadow-formula-toolbar {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .shadow-formula-actions {
      width: 100%;
      flex-basis: auto;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .shadow-formula-track {
      grid-template-columns: minmax(0, 1fr);
      gap: 7px;
    }

    .shadow-formula-track > b {
      transform: rotate(90deg);
    }

    .shadow-overview-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shadow-employee-summary {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shadow-person,
    .shadow-index-meter {
      grid-column: 1 / -1;
    }

    .shadow-work-header {
      display: none;
    }

    .shadow-work-row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      padding: 13px 0;
    }

    .shadow-work-name {
      grid-column: 1 / -1;
    }

    .shadow-work-points {
      grid-column: 1 / -1;
      text-align: left;
    }

    .shadow-work-footer {
      align-items: flex-start;
      flex-direction: column;
    }
  }

  @media (max-width: 560px) {
    .side-nav {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .shadow-formula-panel,
    .shadow-type-panel,
    .shadow-overview-panel,
    .shadow-employee-panel {
      padding: 16px;
    }

    .shadow-section-heading,
    .shadow-boundary-note {
      grid-template-columns: minmax(0, 1fr);
    }

    .shadow-section-heading {
      display: grid;
    }

    .shadow-formula-toolbar {
      grid-template-columns: minmax(0, 1fr);
    }

    .work-import-heading,
    .work-import-scroll,
    .work-import-actions {
      padding-right: 16px;
      padding-left: 16px;
    }

    .work-import-stat-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .work-import-actions .button {
      min-width: 0;
      flex: 1;
      padding-right: 8px;
      padding-left: 8px;
      font-size: 12px;
      white-space: nowrap;
    }

    .shadow-type-grid,
    .shadow-category-summary,
    .shadow-overview-grid,
    .shadow-employee-summary,
    .shadow-work-row {
      grid-template-columns: minmax(0, 1fr);
    }

    .shadow-person,
    .shadow-index-meter,
    .shadow-work-name {
      grid-column: auto;
    }

    .shadow-stat {
      padding: 10px 0 0;
      border-top: 1px solid #e1e7ef;
      border-left: 0;
    }

    .shadow-boundary-note strong {
      padding: 0 0 8px;
      border-right: 0;
      border-bottom: 1px solid #e5c48f;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #view-shadow *,
    #view-shadow *::before,
    #view-shadow *::after {
      scroll-behavior: auto !important;
      transition: none !important;
      animation: none !important;
    }
  }
}