:root {
        --bg: #f4f6f8;
        --paper: #fff;
        --ink: #182b3a;
        --muted: #667a89;
        --line: #dce4ea;
        --accent: #007d78;
        --wash: #e8f5f2;
        --warn: #946014;
        --bad: #b53943;
      }
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        background: var(--bg);
        color: var(--ink);
        font:
          14px/1.6 system-ui,
          -apple-system,
          "Segoe UI",
          "Microsoft YaHei",
          sans-serif;
      }
      button,
      input,
      select {
        font: inherit;
      }
      button {
        cursor: pointer;
        border: 1px solid var(--line);
        background: white;
        color: var(--ink);
        border-radius: 7px;
        padding: 8px 13px;
      }
      button:hover {
        border-color: var(--accent);
      }
      button.primary {
        background: var(--accent);
        color: white;
        border-color: var(--accent);
      }
      button:focus-visible,
      input:focus-visible,
      select:focus-visible {
        outline: 3px solid #68bcb5;
        outline-offset: 2px;
      }
      header {
        background: #142d3b;
        color: #fff;
        padding: 18px max(24px, calc((100vw - 1380px) / 2));
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
      }
      header small {
        color: #a6bfcb;
      }
      .brand {
        font-size: 20px;
        letter-spacing: 1px;
        font-weight: 650;
      }
      .brand span {
        color: #66d4bf;
      }
      main {
        max-width: 1428px;
        margin: auto;
        padding: 30px 24px 48px;
      }
      .intro {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 18px;
        margin-bottom: 25px;
      }
      h1 {
        font-size: 28px;
        letter-spacing: -0.6px;
        line-height: 1.3;
        margin: 0 0 8px;
      }
      h2 {
        font-size: 17px;
        margin: 0;
      }
      h3 {
        font-size: 14px;
        margin: 0 0 10px;
      }
      p {
        margin: 8px 0;
      }
      .muted,
      .hint {
        color: var(--muted);
      }
      .hint {
        font-size: 12px;
        line-height: 1.5;
      }
      .actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }
      .layout > div {
        min-width: 0;
      }
      .layout {
        display: grid;
        grid-template-columns: minmax(370px, 0.9fr) minmax(460px, 1.25fr);
        gap: 24px;
        align-items: start;
      }
      .panel {
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 22px;
        margin-bottom: 18px;
      }
      .section-title {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 18px;
      }
      .number {
        background: var(--wash);
        color: var(--accent);
        font-size: 12px;
        padding: 3px 8px;
        border-radius: 5px;
      }
      .fields {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px 18px;
      }
      .field label {
        display: block;
        font-size: 12px;
        margin-bottom: 5px;
        color: #445a6a;
      }
      .field input,
      .field select {
        width: 100%;
        border: 1px solid #cbd7df;
        border-radius: 6px;
        padding: 8px 10px;
        background: #fff;
        color: var(--ink);
        min-height: 39px;
      }
      .field input:invalid {
        border-color: var(--bad);
      }
      .field.full {
        grid-column: 1/-1;
      }
      .tag {
        font-size: 11px;
        letter-spacing: 0.6px;
        color: var(--accent);
        text-transform: uppercase;
      }
      .result-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 17px;
      }
      .pill {
        border-radius: 20px;
        padding: 4px 10px;
        font-size: 12px;
        background: var(--wash);
        color: var(--accent);
      }
      .metrics {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
        margin-bottom: 20px;
      }
      .metric {
        padding: 16px;
        background: #f5f8fa;
        border-radius: 8px;
      }
      .metric:first-child {
        background: var(--wash);
      }
      .metric .value {
        font-size: 29px;
        font-weight: 650;
        line-height: 1.3;
        font-variant-numeric: tabular-nums;
      }
      .metric .unit {
        font-size: 13px;
        color: var(--muted);
        font-weight: 400;
      }
      .metric .label {
        font-size: 12px;
        color: var(--muted);
        margin-bottom: 5px;
      }
      .bar {
        height: 20px;
        display: flex;
        overflow: hidden;
        border-radius: 4px;
        background: #e5ebef;
      }
      .legend {
        display: flex;
        gap: 9px 18px;
        flex-wrap: wrap;
        font-size: 12px;
        margin: 12px 0;
      }
      .dot {
        display: inline-block;
        width: 9px;
        height: 9px;
        margin-right: 5px;
        border-radius: 2px;
      }
      .detailrow {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #edf1f4;
        padding: 8px 0;
        gap: 12px;
      }
      .detailrow strong {
        font-variant-numeric: tabular-nums;
      }
      .notice {
        padding: 11px 13px;
        margin: 9px 0;
        border-left: 3px solid #d4ac60;
        background: #fff8eb;
        font-size: 13px;
      }
      .notice.bad {
        border-color: var(--bad);
        background: #fff0f1;
      }
      .notice.ok {
        border-color: var(--accent);
        background: var(--wash);
      }
      .error {
        color: var(--bad);
        font-weight: 600;
      }
      details {
        border-top: 1px solid var(--line);
        padding-top: 12px;
        margin-top: 15px;
      }
      summary {
        cursor: pointer;
        font-weight: 600;
      }
      code {
        font-size: 12px;
        background: #f0f4f6;
        padding: 2px 4px;
        border-radius: 3px;
        overflow-wrap: anywhere;
      }
      .compare {
        overflow: auto;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        min-width: 480px;
        font-size: 13px;
      }
      th,
      td {
        text-align: left;
        padding: 11px 10px;
        border-bottom: 1px solid var(--line);
        white-space: nowrap;
      }
      th {
        color: var(--muted);
        font-weight: 500;
      }
      td button {
        padding: 3px 8px;
      }
      .chart {
        width: 100%;
        height: auto;
        display: block;
      }
      .footer {
        color: var(--muted);
        font-size: 12px;
        margin-top: 22px;
      }
      a {
        color: var(--accent);
      }
      .toast {
        position: fixed;
        bottom: 24px;
        left: 50%;
        transform: translateX(-50%);
        background: #142d3b;
        color: #fff;
        padding: 10px 18px;
        border-radius: 7px;
        z-index: 5;
        max-width: 90vw;
      }
      .check {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 10px 0;
      }
      .check input {
        width: 16px;
        height: 16px;
      }
      .subhead {
        font-size: 11px;
        letter-spacing: 1.5px;
        color: var(--muted);
        margin-bottom: 9px;
      }
      .disabled-result {
        opacity: 0.45;
      }
      .sticky {
        position: sticky;
        top: 18px;
      }
      @media (max-width: 1000px) {
        .layout {
          grid-template-columns: 1fr;
        }
        .sticky {
          position: static;
        }
      }
      @media (max-width: 580px) {
        main {
          padding: 22px 14px;
        }
        header {
          padding: 16px;
        }
        .intro {
          display: block;
        }
        .intro .actions {
          margin-top: 15px;
        }
        h1 {
          font-size: 23px;
        }
        .panel {
          padding: 17px;
        }
        .fields {
          gap: 12px;
        }
        .metrics {
          gap: 10px;
        }
        .metric {
          padding: 12px;
        }
        .metric .value {
          font-size: 24px;
        }
        header small {
          display: none;
        }
      }
      @media print {
        header,
        .actions,
        .footer,
        button,
        #toast {
          display: none;
        }
        .layout {
          display: block;
        }
        .sticky {
          position: static;
        }
        .panel {
          break-inside: avoid;
        }
        body {
          background: white;
        }
        .fields {
          grid-template-columns: repeat(3, 1fr);
        }
        details {
          display: block;
        }
      }
      .ds-tool {
        margin-bottom: 22px;
      }
      .ds-drop {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        border: 2px dashed #a9c9c6;
        background: #f1faf8;
        border-radius: 9px;
        padding: 20px 12px;
        cursor: pointer;
        text-align: center;
      }
      .ds-drop.dragging {
        border-color: #007d78;
        background: #dcefe9;
      }
      .ds-drop span {
        font-size: 12px;
        color: #667a89;
      }
      .ds-drop input {
        max-width: 100%;
        font-size: 12px;
        margin-top: 8px;
      }
      .ds-tool textarea {
        width: 100%;
        resize: vertical;
        font: 12px/1.5 monospace;
        padding: 10px;
        border: 1px solid #cbd7df;
        border-radius: 6px;
      }
      .ds-candidate {
        padding: 12px 0;
        border-bottom: 1px solid #dce4ea;
      }
      .ds-candidate > label {
        display: block;
        font-weight: 600;
      }
      .ds-candidate select,
      .ds-candidate > input {
        width: 100%;
        margin-top: 7px;
        padding: 7px;
        border: 1px solid #cbd7df;
        border-radius: 5px;
      }
      .ds-evidence {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        background: #f5f8fa;
        padding: 9px;
        font: 11px/1.5 monospace;
        max-height: 130px;
        overflow: auto;
      }
      #dsStatus {
        font-size: 12px;
        color: #445a6a;
        margin: 8px 0;
      }
      #dsApply {
        margin-right: 8px;
      }