:root {
      color-scheme: light;
      --background: #eef3f7;
      --surface: #ffffff;
      --surface-soft: #f7fafc;
      --surface-ink: #172b3b;
      --border: #d5e0e8;
      --border-strong: #b9c9d6;
      --text: #162536;
      --muted: #5b6d7d;
      --accent: #176ca4;
      --accent-soft: #e8f3fa;
      --success: #24745a;
      --success-soft: #eaf6f1;
      --danger: #a43b3b;
      --danger-soft: #fff0f0;
      --distance: #b9e3d2;
      --shadow: 0 18px 50px rgba(34, 61, 82, 0.09);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 15px;
    }

    * { box-sizing: border-box; }
    html { min-width: 0; }

    body {
      min-width: 0;
      min-height: 100vh;
      margin: 0;
      background: var(--background);
      color: var(--text);
      font-size: 0.95rem;
    }

    button,
    input,
    select,
    textarea { font: inherit; }

    button,
    input,
    select,
    textarea { max-width: 100%; }

    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    summary:focus-visible {
      outline: 3px solid #8ec4e5;
      outline-offset: 3px;
    }

    .page-shell {
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
      padding: clamp(28px, 5vw, 64px) 0;
    }

    .masthead {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);
      gap: 32px;
      align-items: end;
      margin-bottom: 28px;
    }

    .eyebrow {
      margin: 0 0 10px;
      color: var(--accent);
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0.16em;
    }

    h1,
    h2 {
      font-family: ui-serif, "Noto Serif CJK SC", "Songti SC", serif;
    }

    h1 {
      max-width: 780px;
      margin: 0;
      font-size: clamp(2.25rem, 6vw, 4.8rem);
      font-weight: 700;
      letter-spacing: -0.035em;
      line-height: 1.04;
    }

    .intro {
      max-width: 760px;
      margin: 18px 0 0;
      color: var(--muted);
      font-size: 1rem;
      line-height: 1.75;
    }

    .scope-note {
      margin: 0;
      padding: 15px 18px;
      border-top: 1px solid var(--border-strong);
      border-bottom: 1px solid var(--border-strong);
      color: var(--muted);
      font-size: 0.86rem;
      line-height: 1.65;
    }

    .scope-note strong { color: var(--text); }

    .panel {
      min-width: 0;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: var(--surface);
      box-shadow: var(--shadow);
    }

    .search-panel {
      margin-bottom: 22px;
      overflow: hidden;
      border-color: #214a61;
    }

    .search-header {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 22px;
      align-items: end;
      padding: clamp(22px, 4vw, 36px);
      background: var(--surface-ink);
      color: #f4f8fb;
    }

    .search-header .panel-heading { color: #ffffff; }
    .search-header .panel-kicker { max-width: 660px; color: #bcd0dc; }

    .search-controls {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(190px, 0.32fr) minmax(100px, 0.14fr) auto;
      gap: 14px;
      align-items: end;
      padding: clamp(20px, 3vw, 30px);
      border-bottom: 1px solid var(--border);
      background: var(--surface);
    }

    .control-group { min-width: 0; }

    .field-label {
      display: block;
      margin-bottom: 9px;
      font-weight: 750;
    }

    textarea,
    select {
      width: 100%;
      border: 1px solid var(--border-strong);
      border-radius: 8px;
      background: var(--surface-soft);
      color: var(--text);
    }

    textarea {
      min-height: 46px;
      max-height: 150px;
      padding: 11px 12px;
      resize: vertical;
      line-height: 1.5;
    }

    select {
      min-height: 46px;
      padding: 10px 34px 10px 11px;
    }

    .search-actions {
      display: flex;
      gap: 8px;
      min-width: max-content;
    }

    .primary-button,
    .secondary-button,
    .quiet-button {
      min-height: 44px;
      border-radius: 8px;
      font-weight: 750;
      cursor: pointer;
    }

    .primary-button {
      padding: 11px 18px;
      border: 1px solid var(--accent);
      background: var(--accent);
      color: #ffffff;
    }

    .secondary-button {
      padding: 8px 12px;
      border: 1px solid var(--accent);
      background: var(--surface);
      color: var(--accent);
    }

    .quiet-button {
      padding: 11px 13px;
      border: 1px solid var(--border-strong);
      background: var(--surface);
      color: var(--muted);
    }

    .warning-button {
      min-height: 44px;
      padding: 11px 13px;
      border: 1px solid var(--danger);
      border-radius: 8px;
      background: var(--danger-soft);
      color: var(--danger);
      font-weight: 750;
      cursor: pointer;
    }

    .warning-button:hover,
    .warning-button:focus-visible { background: #ffe2e2; }

    button[hidden] { display: none; }

    input:disabled,
    select:disabled,
    textarea:disabled,
    button:disabled {
      cursor: not-allowed;
      opacity: 0.62;
    }

    .search-feedback {
      min-height: 3.3em;
      margin: 0;
      padding: 12px clamp(20px, 3vw, 30px);
      border-bottom: 1px solid var(--border);
      background: var(--surface-soft);
      color: var(--muted);
      font-size: 0.86rem;
      line-height: 1.55;
    }

    .search-feedback[data-state="success"] {
      background: var(--success-soft);
      color: var(--success);
    }

    .search-feedback[data-state="error"] {
      background: var(--danger-soft);
      color: var(--danger);
    }

    .search-state {
      min-height: 150px;
      display: grid;
      place-items: center;
      padding: 28px;
      color: var(--muted);
      text-align: center;
      line-height: 1.65;
    }

    .search-state p { max-width: 520px; margin: 0; }

    .result-list {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .result-item {
      min-width: 0;
      padding: 22px clamp(20px, 3vw, 30px) 24px;
      border-bottom: 1px solid var(--border);
    }

    .result-item:last-child { border-bottom: 0; }

    .result-text {
      margin: 0;
      color: var(--text);
      font-family: ui-serif, "Noto Serif CJK SC", "Songti SC", serif;
      font-size: 1.02rem;
      line-height: 1.85;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .result-text-redacted {
      color: var(--muted);
      font-family: inherit;
      font-style: italic;
    }

    .result-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 15px;
    }

    .result-provenance {
      margin-top: 15px;
      color: var(--muted);
      font-size: 0.74rem;
    }

    .result-provenance summary {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      min-height: 44px;
      cursor: pointer;
      font-weight: 750;
    }

    .provenance-grid {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 6px 12px;
      margin: 11px 0 0;
    }

    .provenance-grid dt { font-weight: 750; }
    .provenance-grid dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }

    .workspace {
      display: grid;
      grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.5fr);
      gap: 22px;
      align-items: start;
    }

    .workspace.read-only,
    .upload-workspace { grid-template-columns: minmax(0, 1fr); }

    .upload-panel {
      padding: clamp(22px, 3vw, 32px);
      border-top: 4px solid var(--accent);
    }

    .panel-heading {
      margin: 0;
      font-size: 1.45rem;
      line-height: 1.25;
    }

    .panel-kicker {
      margin: 8px 0 24px;
      color: var(--muted);
      font-size: 0.9rem;
      line-height: 1.65;
    }

    .upload-choice-grid {
      display: grid;
      grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.3fr);
      gap: 18px;
      margin-bottom: 18px;
    }

    .knowledge-type-set {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px 12px;
      min-width: 0;
      margin: 0;
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
    }

    .knowledge-type-set legend { padding: 0 5px; font-weight: 750; }
    .knowledge-type-set label { display: flex; align-items: center; gap: 7px; min-height: 36px; cursor: pointer; }
    .knowledge-type-set input { width: 18px; height: 18px; accent-color: var(--accent); }

    input[type="file"] {
      width: 100%;
      padding: 10px;
      border: 1px dashed var(--border-strong);
      border-radius: 9px;
      background: var(--surface-soft);
      color: var(--muted);
      cursor: pointer;
    }

    input[type="file"]::file-selector-button {
      margin-right: 10px;
      padding: 8px 11px;
      border: 1px solid var(--border-strong);
      border-radius: 6px;
      background: var(--surface);
      color: var(--text);
      font-weight: 700;
      cursor: pointer;
    }

    .field-help,
    .selection {
      margin: 9px 0 0;
      color: var(--muted);
      font-size: 0.82rem;
      line-height: 1.55;
      overflow-wrap: anywhere;
    }

    .selection {
      min-height: 2.55em;
      color: var(--text);
    }

    .upload-actions {
      display: flex;
      gap: 8px;
      margin-top: 18px;
    }

    .upload-actions .primary-button { flex: 1; margin-top: 0; padding: 12px 16px; }
    .upload-actions .quiet-button { flex: 0 0 auto; }

    .upload-panel .primary-button {
      width: 100%;
      padding: 12px 16px;
    }

    .feedback {
      min-height: 3.3em;
      margin: 16px 0 0;
      padding: 11px 12px;
      border-left: 3px solid var(--border-strong);
      border-radius: 5px;
      background: var(--surface-soft);
      color: var(--muted);
      font-size: 0.86rem;
      line-height: 1.55;
    }

    .feedback[data-state="success"] {
      border-left-color: var(--success);
      background: var(--success-soft);
      color: var(--success);
    }

    .feedback[data-state="error"] {
      border-left-color: var(--danger);
      background: var(--danger-soft);
      color: var(--danger);
    }

    .ocr-task-panel {
      overflow: hidden;
      padding: 0;
      border-top: 4px solid var(--surface-ink);
    }

    .ocr-task-header {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 20px;
      padding: clamp(22px, 3vw, 32px);
      border-bottom: 1px solid var(--border);
      background: linear-gradient(110deg, var(--surface-soft), var(--surface));
    }

    .ocr-task-header .panel-kicker { max-width: 720px; margin-bottom: 0; }

    .ocr-task-eyebrow {
      margin: 0 0 7px;
      color: var(--accent);
      font-size: 0.72rem;
      font-weight: 850;
      letter-spacing: 0.14em;
    }

    .ocr-task-panel > .feedback { margin: 18px clamp(20px, 3vw, 30px); }
    .ocr-task-groups { border-top: 1px solid var(--border); }
    .ocr-task-state { padding: 28px; color: var(--muted); text-align: center; }
    .ocr-task-state p { margin: 0; }

    .ocr-task-group {
      --ocr-track: var(--border-strong);
      display: grid;
      grid-template-columns: minmax(145px, 0.28fr) minmax(0, 1fr);
      border-bottom: 1px solid var(--border);
      box-shadow: inset 5px 0 0 var(--ocr-track);
    }

    .ocr-task-group[data-status="pending"] { --ocr-track: #7b96aa; }
    .ocr-task-group[data-status="claimed"] { --ocr-track: var(--accent); }
    .ocr-task-group[data-status="completed"] { --ocr-track: var(--success); }
    .ocr-task-group:last-child { border-bottom: 0; }

    .ocr-task-group-heading {
      margin: 0;
      padding: 22px clamp(18px, 2.5vw, 26px) 22px clamp(23px, 3vw, 31px);
      background: var(--surface-soft);
      color: var(--muted);
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: 0.78rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .ocr-task-list { margin: 0; padding: 0; list-style: none; }
    .ocr-task-list > li { padding: 20px clamp(18px, 2.5vw, 26px); border-bottom: 1px solid var(--border); }
    .ocr-task-list > li:last-child { border-bottom: 0; }

    .ocr-task-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 14px 20px;
      align-items: center;
    }

    .ocr-task-name { margin: 0; font-weight: 800; overflow-wrap: anywhere; }
    .ocr-task-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 7px 0 0; color: var(--muted); font-size: 0.78rem; }
    .ocr-task-code-hint { margin: 9px 0 0; color: var(--muted); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 0.75rem; overflow-wrap: anywhere; }
    .ocr-task-result { margin: 9px 0 0; color: var(--success); font-size: 0.82rem; font-weight: 800; }
    .ocr-task-empty { margin: 0; color: var(--muted); }
    .ocr-task-action { min-width: 104px; }
    .ocr-task-dialog-form { border-top: 5px solid var(--accent); }
    .ocr-task-dialog-guidance { margin: 16px 0 0; color: var(--muted); line-height: 1.65; }
    .ocr-task-dialog-code {
      margin: 18px 0 0;
      padding: 16px;
      border: 1px solid var(--border-strong);
      border-radius: 8px;
      background: var(--surface-ink);
      color: #ffffff;
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: 0.9rem;
      font-weight: 800;
      letter-spacing: 0.03em;
      line-height: 1.6;
      overflow-wrap: anywhere;
      user-select: all;
    }

    .ledger-panel { overflow: hidden; }
    .asset-panel { margin-bottom: 22px; }

    .ledger-header {
      display: flex;
      gap: 18px;
      align-items: center;
      justify-content: space-between;
      padding: 24px clamp(20px, 3vw, 30px);
      border-bottom: 1px solid var(--border);
      background: var(--surface-soft);
    }

    .ledger-heading-wrap { min-width: 0; }
    .ledger-heading-wrap .panel-kicker { margin: 6px 0 0; }

    .list-state {
      min-height: 230px;
      display: grid;
      place-items: center;
      padding: 32px;
      color: var(--muted);
      text-align: center;
      line-height: 1.65;
    }

    .list-state-inner { max-width: 360px; }
    .list-state p { margin: 0 0 14px; }

    .asset-list {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    li.asset-item {
      position: relative;
      min-width: 0;
      padding: 24px clamp(20px, 3vw, 30px) 24px clamp(28px, 4vw, 42px);
      border-bottom: 1px solid var(--border);
    }

    li.asset-item:last-child { border-bottom: 0; }

    li.asset-item::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 15px;
      width: 2px;
      background: var(--border);
      box-shadow: 5px 0 0 var(--surface), 6px 0 0 var(--border);
    }

    .asset-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      gap: 12px;
      align-items: start;
      margin-bottom: 18px;
    }

    .asset-name {
      min-width: 0;
      margin: 0;
      font-size: 1.02rem;
      line-height: 1.45;
      overflow-wrap: anywhere;
    }

    .intake-mark {
      margin: 0;
      padding: 7px 9px;
      border: 1px solid #91b9aa;
      border-radius: 5px;
      background: var(--success-soft);
      color: var(--success);
      font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", monospace;
      font-size: 0.73rem;
      font-weight: 800;
      letter-spacing: 0.04em;
      white-space: nowrap;
    }

    .asset-meta {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 13px 22px;
      margin: 0;
    }

    .meta-pair { min-width: 0; }
    .meta-pair-wide,
    .ocr-progress { grid-column: 1 / -1; }
    .ocr-progress dd { color: var(--success); font-weight: 800; }

    .meta-pair dt {
      margin-bottom: 3px;
      color: var(--muted);
      font-size: 0.72rem;
      font-weight: 750;
      letter-spacing: 0.06em;
    }

    .meta-pair dd {
      min-width: 0;
      margin: 0;
      color: var(--text);
      font-size: 0.84rem;
      line-height: 1.55;
      overflow-wrap: anywhere;
    }

    .hash-value {
      font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", monospace;
      font-size: 0.76rem !important;
    }

    .tabs {
      display: flex;
      gap: 8px;
      margin: 0 0 22px;
      padding: 6px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.72);
    }

    .tab-button {
      flex: 1;
      min-height: 44px;
      border: 1px solid transparent;
      border-radius: 8px;
      background: transparent;
      color: var(--muted);
      font-weight: 800;
      cursor: pointer;
    }

    .tab-button[aria-selected="true"] {
      border-color: var(--accent);
      background: var(--accent);
      color: #ffffff;
    }

    .asset-filters {
      display: grid;
      grid-template-columns: repeat(3, minmax(160px, 1fr));
      gap: 12px;
      align-items: end;
      padding: 20px;
      border-bottom: 1px solid var(--border);
    }
    .asset-feedback { margin: 0; }
    .asset-footer { border-top: 1px solid var(--border); }

    .asset-batch-toolbar {
      display: grid;
      grid-template-columns: minmax(220px, 1fr) minmax(120px, auto) auto;
      gap: 12px 18px;
      align-items: center;
      min-width: 0;
      padding: 14px 20px;
      border-bottom: 1px solid var(--border-strong);
      background: var(--accent-soft);
    }

    .asset-select-all {
      display: inline-flex;
      gap: 10px;
      align-items: center;
      min-height: 44px;
      min-width: 0;
      font-weight: 800;
      overflow-wrap: anywhere;
      cursor: pointer;
    }

    .asset-select-all input,
    .asset-select {
      flex: 0 0 auto;
      width: 20px;
      height: 20px;
      margin: 0;
      accent-color: var(--accent);
      cursor: pointer;
    }

    .asset-row-select {
      display: inline-grid;
      place-items: center;
      width: 44px;
      min-height: 44px;
      cursor: pointer;
    }

    .asset-selected-summary { margin: 0; color: var(--accent); font-size: 0.86rem; font-weight: 800; }
    .asset-batch-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
    .asset-identity { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; min-width: 0; }
    .asset-identity .asset-name:only-child { grid-column: 1 / -1; }

    li.asset-item.is-selected {
      background: var(--accent-soft);
      box-shadow: inset 4px 0 0 var(--accent);
    }

    li.asset-item.is-selected::before { background: var(--accent); }

    .asset-table tr.asset-item.is-selected td { background: var(--accent-soft); }
    .asset-table tr.asset-item.is-selected td:first-child { box-shadow: inset 4px 0 0 var(--accent); }

    .asset-processing-form { position: relative; min-width: 0; border-top: 5px solid var(--accent); }
    .dialog-close-button {
      position: absolute;
      top: 12px;
      right: 12px;
      display: grid;
      place-items: center;
      width: 44px;
      min-height: 44px;
      padding: 0;
      border: 1px solid transparent;
      border-radius: 8px;
      background: transparent;
      color: var(--muted);
      font-size: 1.55rem;
      line-height: 1;
      cursor: pointer;
    }
    .dialog-close-button:hover,
    .dialog-close-button:focus-visible { border-color: var(--border-strong); background: var(--surface-soft); color: var(--text); }
    .asset-processing-form > h2 { padding-right: 52px; }
    .asset-processing-asset-name {
      margin: 0 0 18px;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface-soft);
      font-weight: 800;
      overflow-wrap: anywhere;
    }
    .asset-processing-section-heading { margin: 0 0 10px; font-size: 1rem; }
    .asset-processing-status {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 18px;
    }
    .asset-processing-status-row {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      min-width: 0;
      padding: 10px;
      border: 1px solid var(--border);
      border-radius: 7px;
      background: var(--surface-soft);
    }
    .asset-processing-status-label { color: var(--muted); font-size: 0.82rem; font-weight: 750; }
    .asset-processing-status-row > span:last-child { min-width: 0; text-align: right; overflow-wrap: anywhere; }
    .asset-processing-output-count { color: var(--muted); font-size: 0.76rem; }
    .asset-processing-stage-set {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px 12px;
      margin: 0;
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
    }
    .asset-processing-stage-set legend { padding: 0 5px; font-weight: 750; }
    .asset-processing-stage-set label { display: flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; }
    .asset-processing-stage-set input { width: 18px; height: 18px; accent-color: var(--accent); }
    .asset-processing-force { display: flex; align-items: center; gap: 8px; min-height: 40px; margin-top: 12px; cursor: pointer; }
    .asset-processing-force input { width: 18px; height: 18px; accent-color: var(--accent); }
    .asset-processing-progress { min-height: 2.5em; margin: 14px 0 0; color: var(--muted); line-height: 1.55; }
    .asset-processing-background-button { border-color: var(--border-strong); color: var(--muted); }
    .asset-processing-dialog-actions { flex-wrap: wrap; }
    .asset-batch-form { min-width: 0; }
    .asset-batch-action-set {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin: 18px 0;
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
    }
    .asset-batch-action-set legend { padding: 0 5px; font-weight: 750; }
    .asset-batch-action-set label { display: flex; align-items: center; gap: 8px; min-height: 44px; overflow-wrap: anywhere; cursor: pointer; }
    .asset-batch-action-set input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--accent); }
    .asset-batch-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .asset-detail-table { display: grid; grid-template-columns: minmax(116px, 0.36fr) minmax(0, 1fr); gap: 0; margin: 14px 0 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
    .asset-detail-table dt, .asset-detail-table dd { min-width: 0; margin: 0; padding: 8px 10px; border-bottom: 1px solid var(--border); line-height: 1.45; overflow-wrap: anywhere; }
    .asset-detail-table dt { background: var(--surface-soft); color: var(--muted); font-size: 0.78rem; font-weight: 800; }
    .asset-detail-table dd { color: var(--text); font-size: 0.88rem; }
    .asset-detail-table dt:nth-last-of-type(1), .asset-detail-table dd:last-child { border-bottom: 0; }
    .status-success { color: var(--success) !important; font-weight: 800; }
    .status-pending { color: var(--accent) !important; font-weight: 800; }
    .status-error { color: var(--danger) !important; font-weight: 800; }
    .asset-batch-preview {
      min-height: 3em;
      margin: 16px 0 0;
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface-soft);
      color: var(--text);
      font-weight: 750;
      line-height: 1.55;
      overflow-wrap: anywhere;
    }

    .knowledge-panel { overflow: hidden; }
    .knowledge-header { padding: clamp(22px, 4vw, 34px); background: var(--surface-ink); color: white; }
    .knowledge-header .panel-kicker { margin-bottom: 0; color: #bcd0dc; }
    .knowledge-filters {
      display: grid;
      grid-template-columns: repeat(4, minmax(120px, 0.5fr)) minmax(180px, 1fr) auto;
      gap: 12px;
      align-items: end;
      padding: 20px;
      border-bottom: 1px solid var(--border);
    }
    .knowledge-filters input,
    .dialog-form textarea {
      width: 100%;
      min-height: 46px;
      padding: 10px 12px;
      border: 1px solid var(--border-strong);
      border-radius: 8px;
      background: var(--surface-soft);
      color: var(--text);
    }
    .knowledge-feedback { margin: 0; }
    .knowledge-table-wrap { width: 100%; overflow: hidden; }
    .knowledge-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
    .knowledge-table th,
    .knowledge-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; overflow-wrap: anywhere; }
    .knowledge-table th { background: var(--surface-soft); color: var(--muted); font-size: 0.76rem; }
    .knowledge-table th:nth-child(1) { width: 6%; }
    .knowledge-table th:nth-child(2) { width: 28%; }
    .knowledge-table th:nth-child(3) { width: 11%; }
    .knowledge-table th:nth-child(4) { width: 9%; }
    .knowledge-table th:nth-child(5) { width: 8%; }
    .knowledge-table th:nth-child(6) { width: 20%; }
    .knowledge-table th:nth-child(7) { width: 18%; }
    .asset-table th:nth-child(1) { width: 5%; }
    .asset-table th:nth-child(2) { width: 22%; }
    .asset-table th:nth-child(3) { width: 10%; }
    .asset-table th:nth-child(4) { width: 9%; }
    .asset-table th:nth-child(5) { width: 12%; }
    .asset-table th:nth-child(6) { width: 14%; }
    .asset-table th:nth-child(7) { width: 13%; }
    .asset-table th:nth-child(8) { width: 8%; }
    .asset-table th:nth-child(9) { width: 7%; }
    .asset-table .asset-name { display: block; margin: 0; font-size: inherit; }
    .asset-table td:nth-child(7) { max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .asset-table td:nth-child(7) > * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .asset-processing-stage-unavailable { opacity: 0.65; }
    .asset-processing-stage-set input:disabled { cursor: not-allowed; }
    .asset-table .derived-asset-item td { background: #f7fafc; color: var(--muted); }
    .asset-table .derived-asset-item td:first-child { box-shadow: inset 4px 0 0 var(--border-strong); }
    .asset-table .derived-asset-item .asset-name::before { content: "派生 · "; color: var(--accent); font-size: 0.72rem; font-weight: 800; }
    .derived-toggle[aria-expanded="true"] { border-color: var(--success); color: var(--success); }
    .knowledge-name { font-weight: 750; line-height: 1.35; }
    .asset-processing-knowledge-link {
      min-height: 0;
      padding: 2px 0;
      border: 0;
      background: transparent;
      color: var(--accent);
      font: inherit;
      font-weight: 800;
      line-height: 1.35;
      text-align: left;
      text-decoration: underline;
      text-underline-offset: 3px;
      cursor: pointer;
    }
    .asset-processing-knowledge-link:hover,
    .asset-processing-knowledge-link:focus-visible { color: var(--accent-strong); }
    .knowledge-row-select { display: inline-grid; place-items: center; width: 44px; min-height: 44px; cursor: pointer; }
    .knowledge-row-select:has(input:disabled) { cursor: not-allowed; }
    .knowledge-select { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
    .knowledge-actions { display: flex; flex-wrap: wrap; gap: 6px; }
    .knowledge-actions button { min-height: 36px; padding: 6px 9px; }
    .status-chip { display: inline-block; padding: 3px 7px; border-radius: 5px; background: var(--accent-soft); color: var(--accent); font-size: 0.74rem; font-weight: 800; }
    .knowledge-footer { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 16px 20px; }

    .conversation-view {
      min-width: 0;
      min-height: calc(100vh - 210px);
    }

    .conversation-shell {
      --conversation-top-height: 480px;
      --conversation-output-height: max(560px, 65vh);
      display: grid;
      grid-template-columns: minmax(190px, 0.72fr) minmax(0, 1.75fr) minmax(220px, 0.8fr);
      gap: 16px;
      height: auto;
      min-height: 420px;
      min-width: 0;
      align-items: stretch;
    }

    .conversation-sidebar,
    .conversation-main,
    .conversation-inspector {
      min-width: 0;
      min-height: 0;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: var(--surface);
      box-shadow: var(--shadow);
      align-self: stretch;
    }

    .conversation-inspector {
      padding: 18px;
      overflow: visible;
    }

    .conversation-sidebar {
      display: grid;
      grid-template-rows: var(--conversation-top-height) var(--conversation-output-height);
      align-content: start;
    }

    .conversation-session-panel {
      display: grid;
      grid-template-rows: 44px 20px 44px 312px;
      gap: 8px;
      min-width: 0;
      min-height: 0;
      padding: 18px;
    }

    .conversation-session-panel .field-label { margin: 0; }

    .conversation-session-list {
      min-height: 0;
      padding-right: 2px;
      align-content: start;
      grid-auto-rows: 56px;
      overflow-y: auto;
      scrollbar-gutter: stable;
    }

    .conversation-job-section { min-height: 0; display: flex; flex-direction: column; border-top: 1px solid var(--border, #ddd); padding: 12px 18px 18px; }
    #conversation-job-list { flex: 1; overflow-y: auto; min-height: 0; scrollbar-gutter: stable; }
    .conversation-job-actions { display: flex; gap: 4px; flex-shrink: 0; }
    .conversation-job-row { display: flex; align-items: center; gap: 4px; padding: 8px 0; border-bottom: 1px solid #e4e7e5; }
    .conversation-job-row.is-active { background: #edf5ef; }
    .conversation-job-open { flex: 1; min-width: 0; text-align: left; border: 0; background: transparent; padding: 4px; cursor: pointer; color: inherit; }
    .conversation-job-open span { display: block; overflow-wrap: anywhere; font-size: 13px; }
    .conversation-job-open small { display: block; color: #626964; font-size: 11px; margin-top: 4px; }
    .conversation-job-row .conversation-icon-action { width: 28px; min-width: 28px; height: 30px; padding: 0; }
    .conversation-job-row .conversation-icon-action.is-running { background: #276749; color: #fff; border-color: #276749; cursor: wait; }
    .conversation-job-row .conversation-icon-action:disabled { opacity: 0.45; cursor: not-allowed; }
    .conversation-media-progress { margin: 8px 0; padding: 8px 10px; border-radius: 6px; background: var(--accent-soft, #edf5ef); color: var(--accent, #276749); font-weight: 700; }
    .media-stage-row { justify-content: space-between; font-size: 12px; }
    #media-job-list .conversation-job-row { align-items: flex-start; }

    .conversation-inspector {
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr);
      overflow: hidden;
    }

    [data-conversation-panel] {
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      padding-right: 2px;
    }

    .conversation-main {
      display: grid;
      grid-template-rows: var(--conversation-top-height) var(--conversation-output-height);
      align-content: start;
      overflow: visible;
    }

    .conversation-dialogue-panel {
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr) auto;
      min-width: 0;
      min-height: 0;
    }

    .conversation-section-head,
    .conversation-main-header {
      display: flex;
      gap: 12px;
      align-items: center;
      justify-content: space-between;
      min-width: 0;
    }

    .conversation-main-header {
      padding: 14px 18px;
      border-bottom: 1px solid var(--border);
      background: var(--surface-ink);
      color: #ffffff;
    }

    .conversation-main-header .secondary-button,
    .conversation-main-header .quiet-button {
      background: #ffffff;
    }

    .conversation-main-header > div { min-width: 0; }

    .conversation-heading,
    .conversation-title,
    .conversation-subheading {
      margin: 0;
      line-height: 1.25;
    }

    .conversation-heading { font-size: 1.1rem; }
    .conversation-title { font-size: 1.45rem; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
    .conversation-subheading { margin: 22px 0 10px; font-size: 0.92rem; }

    .conversation-kicker {
      margin: 0 0 5px;
      color: #bcd0dc;
      font-size: 0.72rem;
      font-weight: 850;
      letter-spacing: 0.12em;
    }

    .conversation-icon-action {
      width: 44px;
      padding: 0;
      font-size: 1.3rem;
      line-height: 1;
    }

    .conversation-input {
      width: 100%;
      min-height: 44px;
      padding: 10px 12px;
      border: 1px solid var(--border-strong);
      border-radius: 8px;
      background: var(--surface-soft);
      color: var(--text);
    }

    .conversation-session-list,
    .conversation-artifact-list,
    .conversation-memory-list,
    .conversation-skill-list,
    .conversation-source-list,
    .conversation-tool-list {
      display: grid;
      gap: 8px;
      margin-top: 14px;
    }

    .conversation-sidebar-section { margin-top: 20px; }

    .conversation-session,
    .conversation-artifact {
      width: 100%;
      min-width: 0;
      min-height: 48px;
      padding: 10px 11px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface-soft);
      color: var(--text);
      text-align: left;
      cursor: pointer;
    }

    .conversation-session {
      display: grid;
      align-self: start;
      grid-template-columns: minmax(0, 1fr) 28px;
      grid-template-rows: 20px 18px;
      height: 56px;
      padding: 8px;
      gap: 0 4px;
    }

    .conversation-session-list { margin-top: 0; }
    .conversation-session > span:first-child,
    .conversation-session small { grid-column: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .conversation-session > .conversation-inline-link { grid-column: 2; grid-row: 1 / 3; align-self: center; display: grid; place-items: center; width: 28px; height: 28px; min-height: 28px; margin: 0; padding: 0; }

    .conversation-session span,
    .conversation-session small,
    .conversation-artifact {
      overflow-wrap: anywhere;
    }

    .conversation-session small {
      color: var(--muted);
      font-size: 0.76rem;
    }

    .conversation-session.is-active,
    .conversation-artifact.is-active {
      border-color: var(--accent);
      background: var(--accent-soft);
      color: var(--accent);
      font-weight: 800;
    }

    .conversation-memory-item {
      margin: 0;
      padding: 9px 10px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface-soft);
      color: var(--muted);
      font-size: 0.8rem;
      line-height: 1.5;
      overflow-wrap: anywhere;
    }

    .conversation-toolbar,
    .conversation-composer-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
      min-width: 0;
    }

    .conversation-context-strip {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      max-height: 100px;
      overflow-y: auto;
      padding: 9px 18px;
      border-bottom: 1px solid var(--border);
      background: var(--surface-soft);
    }

    .conversation-context-strip span {
      min-width: 0;
      padding: 5px 8px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--surface);
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 800;
      overflow-wrap: anywhere;
    }

    .conversation-thread {
      display: grid;
      align-content: start;
      gap: 14px;
      min-width: 0;
      min-height: 0;
      padding: 14px 18px;
      overflow-y: auto;
      overflow-x: hidden;
      background: #fbfcfd;
    }

    .conversation-thread:focus-visible {
      outline: 3px solid #8ec4e5;
      outline-offset: -3px;
    }

    .conversation-message {
      width: min(82%, 620px);
      min-width: 0;
      padding: 12px 14px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface);
      line-height: 1.65;
      overflow-wrap: anywhere;
    }

    .conversation-message p { margin: 0; }
    .conversation-message p + p { margin-top: 5px; }

    .conversation-inline-link {
      margin-top: 10px;
      min-height: 36px;
      padding: 6px 9px;
      border: 1px solid var(--accent);
      border-radius: 8px;
      background: var(--surface);
      color: var(--accent);
      font-weight: 800;
      cursor: pointer;
    }

    .conversation-speaker {
      color: var(--muted);
      font-size: 0.74rem;
      font-weight: 850;
    }

    .user-message {
      justify-self: end;
      border-color: #8eb1c7;
      background: var(--accent-soft);
    }

    .assistant-message {
      justify-self: start;
    }

    .conversation-composer {
      min-width: 0;
      padding: 10px 18px 12px;
      border-top: 1px solid var(--border);
      background: var(--surface);
    }

    .conversation-composer textarea {
      width: 100%;
      min-height: 66px;
      height: 66px;
      padding: 11px 12px;
      border: 1px solid var(--border-strong);
      border-radius: 8px;
      background: var(--surface-soft);
      color: var(--text);
      line-height: 1.55;
      resize: none;
    }

    .conversation-status {
      min-height: 1.6em;
      margin: 10px 0 0;
      color: var(--accent);
      font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", monospace;
      font-size: 0.78rem;
      font-weight: 800;
    }

    .conversation-chip-set {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      min-width: 0;
    }

    .conversation-context-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      min-width: 0;
      margin-bottom: 14px;
    }

    .conversation-mini-tab {
      min-height: 38px;
      padding: 8px 10px;
      border: 1px solid var(--border-strong);
      border-radius: 8px;
      background: var(--surface);
      color: var(--muted);
      font-weight: 750;
      cursor: pointer;
    }

    .conversation-mini-tab {
      flex: 1 1 0;
      min-width: 0;
      font-size: 0.78rem;
      text-align: center;
    }

    .conversation-mini-tab.is-selected {
      border-color: var(--surface-ink);
      background: var(--surface-ink);
      color: #ffffff;
      font-weight: 850;
    }

    .conversation-skill,
    .conversation-tool {
      display: grid;
      gap: 4px;
      min-width: 0;
      padding: 9px 10px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface-soft);
    }

    .conversation-skill small,
    .conversation-tool small {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 0.74rem;
      overflow-wrap: anywhere;
    }

    /* MU200 owns task layout. Skill schemas never set per-skill spacing. */
    .workbench-skill-inputs { margin-top: 18px; min-width: 0; }
    .workbench-task-form {
      display: grid;
      gap: 18px;
      min-width: 0;
      padding: 16px 12px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--surface);
    }
    .workbench-task-form[hidden],
    .workbench-skill-inputs[hidden],
    .workbench-input-section[hidden] { display: none; }
    .workbench-task-context { margin: 0; line-height: 1.65; }
    .workbench-field {
      display: grid;
      gap: 8px;
      min-width: 0;
      margin: 0;
      font-size: 0.82rem;
      line-height: 1.5;
    }
    .conversation-skill-task-title {
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface-soft);
    }
    .workbench-field .conversation-input {
      width: 100%; min-width: 0; max-width: 100%; min-height: 42px;
      margin: 0; padding: 9px 10px; background: var(--surface);
      font-size: 0.82rem; line-height: 1.5;
    }
    .workbench-field .conversation-input:disabled { color: var(--muted); background: var(--surface-soft); }
    .workbench-field input[type="range"] { min-height: 24px; padding: 0; }
    .workbench-file-summary { color: var(--muted); font-weight: 400; overflow-wrap: anywhere; }
    .workbench-file-summary:empty { display: none; }
    .workbench-input-section { min-width: 0; margin: 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--border); }
    .workbench-input-section legend { padding: 0 8px 0 0; font-size: 0.8rem; font-weight: 750; color: var(--muted); }
    .workbench-field-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
    .workbench-field-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .conversation-skill-feedback {
      margin: 0;
      color: var(--muted);
      font-size: 0.8rem;
      line-height: 1.5;
      overflow-wrap: anywhere;
    }

    .conversation-skill-feedback[data-state="success"] { color: var(--success); }
    .conversation-skill-feedback[data-state="error"] { color: var(--danger); }

    .conversation-skill-result {
      display: grid;
      gap: 8px;
      min-width: 0;
    }

    .conversation-skill-result a {
      color: var(--accent);
      font-weight: 800;
      overflow-wrap: anywhere;
    }

    .conversation-fill-preview {
      position: relative;
      display: grid;
      place-items: center;
      min-width: 0;
      min-height: 150px;
      max-height: 260px;
      padding: 10px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: #ffffff;
      overflow: auto;
    }

    .conversation-fill-preview button {
      display: grid;
      place-items: center;
      width: 100%;
      min-height: 130px;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: zoom-in;
    }

    .conversation-fill-preview img {
      display: block;
      width: 100%;
      max-width: 260px;
      height: auto;
      max-height: 236px;
      object-fit: contain;
    }

    .conversation-color-palette {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
      min-width: 0;
    }

    .conversation-color-palette-title {
      margin: 10px 0 6px;
      color: var(--text);
      font-size: 0.82rem;
      font-weight: 750;
    }

    .conversation-color-swatch {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      color: var(--muted);
      font: 0.74rem/1.35 ui-monospace, "SFMono-Regular", Consolas, monospace;
      overflow-wrap: anywhere;
    }

    .conversation-color-swatch i {
      width: 13px;
      height: 13px;
      flex: 0 0 13px;
      border: 1px solid var(--border-strong);
      border-radius: 3px;
    }

    .conversation-preview-dialog-form {
      width: min(980px, calc(100vw - 28px));
      max-height: calc(100vh - 28px);
      display: grid;
      grid-template-rows: auto auto auto minmax(0, 1fr) auto;
      gap: 12px;
    }

    .conversation-preview-dialog-head,
    .conversation-preview-controls {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      align-self: start;
    }

    .conversation-preview-dialog-head h2 { margin: 0; }

    .conversation-preview-window-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      margin-left: auto;
    }

    .conversation-preview-window-actions button,
    .conversation-preview-controls button {
      flex: 0 0 auto;
      width: auto;
      min-height: 34px;
      align-self: center;
    }

    .conversation-preview-layers {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      border-bottom: 1px solid var(--border);
      padding-bottom: 8px;
      align-self: start;
    }

    .conversation-preview-caption {
      margin: 0;
      color: var(--muted);
      font-size: 0.84rem;
      font-weight: 700;
      text-align: right;
    }

    .conversation-preview-save-status {
      margin: 0 0 8px;
      min-height: 1.4em;
      color: var(--muted);
      font-size: 0.78rem;
      line-height: 1.4;
    }

    .conversation-preview-save-status[data-state="success"] { color: var(--success); }
    .conversation-preview-save-status[data-state="error"] { color: var(--danger); }

    .conversation-preview-layer-tab {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 6px 10px;
      background: var(--surface);
      color: var(--surface-ink);
      cursor: pointer;
    }

    .conversation-preview-layer-tab input {
      width: 14px;
      height: 14px;
      margin: 0;
      accent-color: var(--accent);
    }

    .conversation-preview-layer-tab.is-active,
    .conversation-preview-layer-tab:focus-visible {
      border-color: var(--accent);
      background: var(--accent);
      color: #ffffff;
    }

    .conversation-preview-canvas {
      position: relative;
      display: grid;
      grid-template: 1fr / 1fr;
      place-items: center;
      min-height: min(68vh, 680px);
      overflow: auto;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: #ffffff;
    }

    .conversation-preview-stage {
      position: relative;
      display: grid;
      grid-template: 1fr / 1fr;
      justify-self: center;
      align-self: center;
      flex: 0 0 auto;
      min-width: 0;
      min-height: 0;
    }

    .conversation-preview-canvas img {
      grid-area: 1 / 1;
      justify-self: center;
      align-self: center;
      width: 100%;
      height: 100%;
      max-width: none;
      max-height: none;
      object-fit: contain;
      object-position: center;
    }

    .conversation-preview-media {
      pointer-events: none;
      opacity: 0.88;
      mix-blend-mode: multiply;
    }

    .conversation-preview-media.is-load-failed {
      opacity: 1;
      mix-blend-mode: normal;
      outline: 2px dashed var(--danger);
      background: repeating-linear-gradient(
        45deg,
        rgba(164, 59, 59, 0.08),
        rgba(164, 59, 59, 0.08) 8px,
        rgba(255, 255, 255, 0.92) 8px,
        rgba(255, 255, 255, 0.92) 16px
      );
    }

    .conversation-preview-ruler {
      position: absolute;
      inset: 0;
      pointer-events: none;
      color: #17384c;
      font: 0.58rem/1.05 ui-monospace, "SFMono-Regular", Consolas, monospace;
      z-index: 6;
    }

    .conversation-preview-ruler span {
      position: absolute;
      padding: 1px 3px;
      border: 1px solid rgba(23, 108, 164, 0.35);
      border-radius: 3px;
      background: rgba(255, 255, 255, 0.86);
      white-space: nowrap;
    }

    .conversation-preview-ruler.is-horizontal span {
      top: 2px;
      transform: translateX(-50%);
    }

    .conversation-preview-ruler.is-horizontal span:first-child { transform: translateX(0); }

    .conversation-preview-ruler.is-horizontal span:last-child { transform: translateX(-100%); }

    .conversation-preview-ruler.is-vertical span {
      left: 2px;
      transform: translateY(-50%);
    }

    .conversation-preview-ruler.is-vertical span:first-child { transform: translateY(0); }

    .conversation-preview-ruler.is-vertical span:last-child { transform: translateY(-100%); }

    .conversation-preview-media-singleLineUrl,
    .conversation-preview-media-bridgeLayerUrl,
    .conversation-preview-media-singleLineWithBridgesUrl,
    .conversation-preview-media-finalUrl {
      mix-blend-mode: multiply;
    }

    #conversation-preview-dialog:fullscreen,
    #conversation-preview-dialog.is-expanded {
      width: 100vw;
      height: 100vh;
      max-width: none;
      max-height: none;
      margin: 0;
      border: 0;
      padding: 14px;
      background: var(--surface);
      overflow: hidden;
    }

    #conversation-preview-dialog:fullscreen .conversation-preview-dialog-form,
    #conversation-preview-dialog.is-expanded .conversation-preview-dialog-form {
      width: 100%;
      max-height: none;
      height: 100%;
      grid-template-rows: auto auto auto minmax(0, 1fr) auto;
      overflow: hidden;
    }

    #conversation-preview-dialog:fullscreen .conversation-preview-canvas,
    #conversation-preview-dialog.is-expanded .conversation-preview-canvas {
      min-height: 0;
      height: 100%;
    }

    .conversation-bridge-layer-image,
    .conversation-bridge-preview-overlay {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
    }

    .conversation-bridge-preview-overlay {
      pointer-events: none;
      z-index: 7;
    }

    .conversation-bridge-layer-image {
      opacity: 0.88;
      mix-blend-mode: multiply;
    }

    .conversation-bridge-preview-line {
      stroke: #0066ff;
      stroke-width: 0.8;
      stroke-dasharray: 2 1.4;
      stroke-linecap: round;
      vector-effect: non-scaling-stroke;
    }

    .conversation-bridge-preview-handle {
      fill: #ffffff;
      stroke: #0066ff;
      stroke-width: 0.8;
      cursor: grab;
      vector-effect: non-scaling-stroke;
    }

    .conversation-bridge-preview-handle:active,
    .conversation-bridge-preview-handle:focus-visible {
      fill: #d8ecff;
      cursor: grabbing;
      outline: none;
    }

    .conversation-bridge-preview-remove {
      fill: rgba(164, 59, 59, 0.16);
      stroke: #a43b3b;
      stroke-width: 0.6;
      stroke-dasharray: 1.5 1.5;
      vector-effect: non-scaling-stroke;
    }

    .conversation-preview-grid {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 5;
    }

    .conversation-preview-grid.is-interactive {
      pointer-events: auto;
      cursor: crosshair;
    }

    .conversation-preview-grid-line {
      position: absolute;
      background: rgba(23, 108, 164, 0.36);
    }

    .conversation-preview-grid-line.is-vertical { top: 0; bottom: 0; width: 1px; }
    .conversation-preview-grid-line.is-horizontal { left: 0; right: 0; height: 1px; }

    .conversation-preview-zone-label {
      position: absolute;
      color: #315c74;
      font-size: 0.66rem;
      font-weight: 800;
      text-shadow: 0 1px 0 #ffffff;
    }

    .conversation-preview-zone-label.is-selected {
      padding: 2px 4px;
      border: 1px solid var(--accent);
      border-radius: 4px;
      background: rgba(232, 243, 250, 0.92);
      color: var(--accent);
    }

    .conversation-preview-controls .is-active {
      border-color: var(--surface-ink);
      background: var(--surface-ink);
      color: #ffffff;
    }

    .conversation-drawing-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      border-top: 1px solid var(--border);
      padding-top: 8px;
    }

    .conversation-drawing-toolbar[hidden] { display: none; }

    .conversation-drawing-toolbar button.is-active {
      border-color: var(--accent);
      background: var(--accent);
      color: #ffffff;
    }

    .conversation-drawing-overlay {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: auto;
      cursor: crosshair;
      z-index: 8;
    }

    .conversation-drawing-overlay.is-selecting { cursor: default; }

    .conversation-drawing-object {
      fill: none;
      stroke: #d33d3d;
      stroke-width: 0.9;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
      pointer-events: stroke;
    }

    .conversation-drawing-object.is-selected {
      stroke: #0066ff;
      stroke-width: 1.2;
      stroke-dasharray: 4 2;
    }

    .conversation-drawing-handle {
      fill: #ffffff;
      stroke: #0066ff;
      stroke-width: 0.8;
      vector-effect: non-scaling-stroke;
      pointer-events: all;
    }

    .conversation-check {
      display: flex;
      gap: 9px;
      align-items: center;
      min-height: 40px;
      color: var(--text);
      overflow-wrap: anywhere;
      cursor: pointer;
    }

    .conversation-check input {
      flex: 0 0 auto;
      width: 18px;
      height: 18px;
      accent-color: var(--accent);
    }

    .conversation-inspector select,
    .conversation-artifact-editor {
      width: 100%;
      min-width: 0;
      border: 1px solid var(--border-strong);
      border-radius: 8px;
      background: var(--surface-soft);
      color: var(--text);
    }

    .conversation-inspector select {
      min-height: 44px;
      padding: 9px 32px 9px 10px;
      font-size: 0.86rem;
    }

    .conversation-artifact-editor {
      min-height: 82px;
      padding: 10px 11px;
      line-height: 1.55;
      resize: vertical;
    }

    .conversation-artifact-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }

    .conversation-artifact-actions button { flex: 1 1 120px; min-width: 0; }

    .conversation-artifact-panel {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      min-width: 0;
      min-height: 0;
      border-top: 1px solid var(--border);
      background: var(--surface);
      overflow: visible;
    }

    .conversation-artifact-header {
      display: flex;
      min-width: 0;
    }

    .conversation-artifact-toggle {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      min-width: 0;
      min-height: 42px;
      padding: 8px 18px;
      border: 0;
      background: transparent;
      color: var(--text);
      font: inherit;
      font-weight: 850;
      text-align: left;
      cursor: default;
    }

    .conversation-artifact-toggle:focus-visible {
      outline: 3px solid #8ec4e5;
      outline-offset: -3px;
    }

    .conversation-artifact-count {
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 750;
    }

    .conversation-artifact-chevron {
      margin-left: auto;
      color: var(--muted);
      font-size: 1.1rem;
      line-height: 1;
      transition: transform 120ms ease;
    }

    .conversation-artifact-panel.is-expanded .conversation-artifact-chevron { transform: rotate(180deg); }

    .conversation-artifact-content {
      display: grid;
      grid-template-columns: minmax(170px, var(--artifact-list-width, 31%)) 10px minmax(0, 1fr);
      gap: 0;
      height: 100%;
      min-height: 0;
      min-width: 0;
      padding: 0 18px 12px;
      overflow: hidden;
    }

    .conversation-artifact-resizer {
      width: 10px;
      min-height: 100%;
      border-left: 1px solid var(--border);
      border-right: 1px solid var(--border);
      background: var(--surface-soft);
      cursor: col-resize;
      touch-action: none;
    }
    .conversation-artifact-resizer:hover,
    .conversation-artifact-resizer:focus-visible,
    .conversation-artifact-resizer.is-dragging { background: var(--accent-soft); outline: 0; }
    .conversation-artifact-preview-column { min-width: 0; min-height: 0; overflow: auto; padding-left: 14px; }

    .conversation-artifact-download {
      display: flex;
      align-items: center;
      min-width: 0;
      min-height: 42px;
      padding: 9px 11px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface-soft);
      color: var(--accent);
      font-size: 0.84rem;
      font-weight: 750;
      overflow-wrap: anywhere;
      text-decoration: none;
    }

    .conversation-artifact-download:hover,
    .conversation-artifact-download:focus-visible {
      border-color: var(--accent);
      background: var(--accent-soft);
    }

    .workbench-artifact-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 6px; min-width: 0; align-items: stretch;
    }
    .workbench-artifact-row .conversation-artifact,
    .workbench-artifact-label { min-width: 0; overflow-wrap: anywhere; font-size: 0.82rem; }
    .workbench-artifact-label { align-self: center; padding: 8px 4px; }
    .workbench-artifact-row > .conversation-artifact-download { width: auto; min-width: 48px; justify-content: center; padding-inline: 8px; white-space: nowrap; }
    .workbench-artifact-row.is-active > .conversation-artifact { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

    .conversation-artifact-content[hidden],
    [data-conversation-panel][hidden] { display: none; }

    .conversation-artifact-editor-wrap { min-width: 0; }
    .conversation-artifact-preview { min-width: 0; }
    .conversation-artifact-preview[hidden],
    .conversation-artifact-editor-wrap[hidden] { display: none; }
    .conversation-output-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
    .conversation-output-toolbar select { min-width: 0; flex: 1 1 130px; }
    .conversation-output-image { display: block; width: auto; max-width: 100%; height: auto; max-height: min(360px, 44vh); margin: 0 auto; object-fit: contain; background: #fff; border: 1px solid var(--border); border-radius: 8px; }
    .conversation-output-placeholder { padding: 24px 12px; border: 1px dashed var(--border); border-radius: 8px; color: var(--muted); }
    .conversation-artifact-list { min-height: 0; max-height: 100%; overflow-y: auto; overflow-x: hidden; padding-right: 10px; }
    .conversation-artifact-bundle { display: inline-flex; margin-bottom: 8px; text-decoration: none; }
    .conversation-output-video { display: block; width: 100%; max-height: 360px; min-height: 180px; background: #111; border-radius: 8px; }
    .workbench-stage-heading { font-size: 0.85rem; margin-bottom: 4px; }
    .workbench-stage-download { grid-column: 1 / -1; color: var(--accent); overflow-wrap: anywhere; }
    .conversation-media-stage-list[hidden] { display: none; }
    .conversation-media-stage-list { display: grid; gap: 5px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
    .conversation-media-stage-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; min-width: 0; padding: 6px 8px; border-bottom: 1px solid var(--border); font-size: 0.78rem; }
    .conversation-media-stage-row > span:first-child { min-width: 0; overflow-wrap: anywhere; }
    .conversation-media-stage-row small { grid-column: 1 / -1; color: var(--muted); overflow-wrap: anywhere; }
    .conversation-media-stage-status { color: var(--muted); white-space: nowrap; }
    .conversation-media-stage-status[data-state="completed"] { color: var(--accent); font-weight: 800; }
    .conversation-media-stage-status[data-state="failed"] { color: var(--danger); font-weight: 800; }
    .conversation-media-stage-status[data-state="running"],
    .conversation-media-stage-status[data-state="queued"] { color: #986d00; font-weight: 800; }

    .conversation-note {
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 0.82rem;
      line-height: 1.6;
      overflow-wrap: anywhere;
    }

    dialog {
      width: min(620px, calc(100% - 24px));
      max-height: calc(100vh - 40px);
      padding: 0;
      border: 1px solid var(--border-strong);
      border-radius: 14px;
      color: var(--text);
      box-shadow: var(--shadow);
    }
    dialog::backdrop { background: rgba(12, 30, 42, 0.58); }
    .dialog-form { padding: 24px; }

    .auth-shell {
      width: min(500px, calc(100% - 24px));
      margin: 0 auto;
      padding: clamp(28px, 8vh, 80px) 0;
    }

    .auth-card {
      overflow: hidden;
      border-top: 5px solid var(--accent);
    }

    .auth-heading {
      padding: clamp(24px, 5vw, 38px);
      border-bottom: 1px solid var(--border);
      background: var(--surface-ink);
      color: #ffffff;
    }

    .auth-heading .eyebrow { color: #9fd5f2; }
    .auth-heading h1 { font-size: clamp(2rem, 9vw, 3.6rem); }
    .auth-heading p:last-child { margin: 14px 0 0; color: #c5d6df; line-height: 1.65; }

    .auth-body { padding: clamp(22px, 5vw, 34px); }
    .auth-body[aria-busy="true"] { color: var(--muted); }
    .auth-choice { display: flex; gap: 8px; margin-bottom: 22px; }
    .auth-choice button { flex: 1; }
    .auth-form { display: grid; gap: 16px; }
    .auth-form[hidden] { display: none; }
    .auth-form input {
      width: 100%;
      min-height: 46px;
      padding: 10px 12px;
      border: 1px solid var(--border-strong);
      border-radius: 8px;
      background: var(--surface-soft);
      color: var(--text);
    }
    .auth-form .primary-button { width: 100%; margin-top: 2px; }
    .auth-guidance { margin: 0; color: var(--muted); font-size: 0.82rem; line-height: 1.6; }

    .account-stack { display: grid; gap: 12px; min-width: 0; }
    .account-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-width: 0;
      padding: 14px 16px;
      border: 1px solid var(--border-strong);
      border-radius: 10px;
      background: var(--surface);
    }
    .account-identity { min-width: 0; }
    .account-name { margin: 0; font-weight: 800; overflow-wrap: anywhere; }
    .account-role { margin: 4px 0 0; color: var(--muted); font-size: 0.78rem; }
    .account-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
    .account-card .quiet-button,
    .account-card .secondary-button { flex: 0 0 auto; width: auto; min-height: 44px; padding: 9px 10px; }
    .account-tool-link { display: inline-flex; align-items: center; text-decoration: none; }
    .account-tool-link:focus-visible { outline: 3px solid #8ec4e5; outline-offset: 3px; }
    .admin-users { display: grid; gap: 10px; margin-top: 16px; }
    .admin-user { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, auto) auto; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: 8px; }
    .admin-user p { margin: 0; overflow-wrap: anywhere; }
    .invite-result { white-space: pre-wrap; overflow-wrap: anywhere; }
    .session-notice { margin: 0 0 18px; }
    .permission-note { margin-top: 12px; }
    [data-requires-role][hidden] { display: none; }

    .dialog-form { padding: 24px; }
    .dialog-form h2 { margin-top: 0; }
    .dialog-form textarea { min-height: 220px; resize: vertical; }
    .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

    @media (max-width: 900px) {
      .search-controls { grid-template-columns: minmax(0, 1fr) minmax(180px, 0.45fr); }
      .search-actions { grid-column: 1 / -1; }
      .conversation-view { min-height: 0; }
      .conversation-shell { grid-template-columns: minmax(0, 1fr); }
      .conversation-shell { min-height: 0; }
      .conversation-main {
        grid-row: 1;
        grid-template-rows: auto auto;
      }
      .conversation-dialogue-panel { grid-template-rows: auto auto minmax(180px, 1fr) auto; }
      .conversation-thread { max-height: 320px; }
      .conversation-sidebar,
      .conversation-main,
      .conversation-inspector { overflow: visible; }
      .conversation-sidebar,
      .conversation-main,
      .conversation-inspector { height: auto; }
      .conversation-inspector { display: block; }
      [data-conversation-panel] { overflow: visible; }
      .conversation-artifact-panel { overflow: visible; }
      .conversation-artifact-content { height: auto; max-height: none; overflow: visible; }
      .knowledge-filters,
      .asset-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .asset-filters .primary-button { grid-column: 1 / -1; }
      .asset-batch-toolbar { grid-template-columns: minmax(0, 1fr) auto; }
      .asset-batch-actions { grid-column: 1 / -1; }
    }

    @media (max-width: 780px) {
      .masthead,
      .workspace,
      .search-header { grid-template-columns: 1fr; }
      .ocr-task-group { grid-template-columns: 1fr; }
      .ocr-task-group-heading { border-bottom: 1px solid var(--border); }
      .masthead { gap: 20px; }
    }

    @media (max-width: 540px) {
      .search-controls { grid-template-columns: 1fr; }
      .search-actions { grid-column: auto; }
      .search-actions .primary-button { flex: 1; }
      .result-item { padding-left: 16px; padding-right: 16px; }
      .provenance-grid { grid-template-columns: 1fr; gap: 3px; }
      .provenance-grid dd { margin-bottom: 6px; }
      .tabs { flex-direction: column; }
      .conversation-main-header { align-items: flex-start; flex-direction: column; }
      .conversation-toolbar,
      .conversation-composer-actions { justify-content: stretch; }
      .conversation-toolbar button,
      .conversation-composer-actions button { flex: 1 1 120px; min-width: 0; }
      .conversation-message { width: 100%; }
      .conversation-inspector { padding: 16px; }
      .conversation-thread,
      .conversation-main-header,
      .conversation-composer { padding-left: 16px; padding-right: 16px; }
      .conversation-artifact-toggle { padding-left: 16px; padding-right: 16px; }
      .conversation-artifact-content { grid-template-columns: minmax(0, 1fr); padding-left: 16px; padding-right: 16px; height: auto; max-height: none; overflow: visible; }
      .conversation-artifact-resizer { display: none; }
      .conversation-artifact-preview-column { padding-left: 0; overflow: visible; }
      .workbench-field-grid--two { grid-template-columns: minmax(0, 1fr); }
      .knowledge-filters,
      .asset-filters { grid-template-columns: 1fr; }
      .asset-filters .primary-button { grid-column: auto; width: 100%; }
      .upload-choice-grid,
      .knowledge-type-set,
      .asset-processing-status,
      .asset-processing-stage-set,
      .asset-batch-toolbar,
      .asset-batch-fields,
      .asset-batch-action-set { grid-template-columns: minmax(0, 1fr); }
      .upload-actions { flex-direction: column; }
      .upload-actions .quiet-button { width: 100%; }
      .asset-detail-table { grid-template-columns: 1fr; }
      .asset-detail-table dt { border-bottom: 0; }
      .asset-detail-table dd { padding-top: 0; }
      .asset-selected-summary,
      .asset-batch-actions { grid-column: auto; width: 100%; }
      .asset-batch-actions { justify-content: stretch; }
      .asset-batch-actions button { flex: 1 1 140px; min-width: 0; }
      .knowledge-table thead { display: none; }
      .knowledge-table,
      .knowledge-table tbody,
      .knowledge-table tr,
      .knowledge-table td { display: block; width: 100%; }
      .knowledge-table tr { padding: 12px 16px; border-bottom: 1px solid var(--border); }
      .knowledge-table td { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 8px; min-width: 0; padding: 7px 0; border: 0; overflow-wrap: anywhere; }
      .knowledge-table td > * { min-width: 0; max-width: 100%; }
      .knowledge-table td::before { content: attr(data-label); color: var(--muted); font-size: 0.75rem; font-weight: 800; }
      .asset-table .derived-asset-item td { background: transparent; }
      .asset-table .derived-asset-item { background: var(--surface-soft); box-shadow: inset 4px 0 0 var(--border-strong); }
      .knowledge-footer { align-items: stretch; flex-direction: column; }
      .dialog-actions { flex-direction: column-reverse; }
      .dialog-actions button { width: 100%; }
      .account-card { align-items: flex-start; flex-direction: column; }
      .account-actions { width: 100%; }
      .account-actions button { flex: 1 1 120px; }
      .admin-user { grid-template-columns: 1fr; }
      .admin-user button,
      .admin-user select { width: 100%; }
      .ocr-task-header,
      .ocr-task-item { grid-template-columns: 1fr; }
      .ocr-task-header { flex-direction: column; }
      .ocr-task-header .secondary-button,
      .ocr-task-action { width: 100%; }
    }

    @media (max-width: 480px) {
      .page-shell { width: min(100% - 24px, 1180px); }
      .asset-batch-toolbar { padding-inline: 14px; }
      .asset-batch-actions { flex-direction: column; }
      .asset-batch-actions button { width: 100%; }
      .asset-head { grid-template-columns: 1fr; }
      .asset-head .secondary-button,
      .asset-head .quiet-button { width: 100%; }
      .intake-mark { justify-self: start; white-space: normal; }
      .asset-meta { grid-template-columns: 1fr; }
      .meta-pair-wide,
      .ocr-progress { grid-column: auto; }
      .ledger-header { align-items: flex-start; flex-direction: column; }
      .secondary-button { width: 100%; }
    }

    /* MU-210 管理员几何校样工具 */
    .tool-page-shell { width: min(1260px, calc(100% - 32px)); }

    .tool-breadcrumb {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 24px;
      color: var(--muted);
      font-size: 0.84rem;
    }

    .tool-breadcrumb a { color: var(--accent); font-weight: 750; }
    .tool-breadcrumb a:focus-visible,
    .tool-return-link:focus-visible,
    .tool-result-card a:focus-visible {
      outline: 3px solid #8ec4e5;
      outline-offset: 3px;
    }

    .tool-masthead {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(240px, 0.34fr);
      gap: 32px;
      align-items: end;
      margin-bottom: 28px;
    }

    .tool-masthead h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); }

    .tool-legend {
      padding: 18px 20px;
      border: 1px solid var(--border-strong);
      border-radius: 10px;
      background: var(--surface);
    }

    .tool-legend-title {
      margin: 0 0 12px;
      color: var(--muted);
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .tool-legend p:not(.tool-legend-title) {
      display: grid;
      grid-template-columns: 48px auto;
      gap: 12px;
      align-items: center;
      margin: 9px 0 0;
      color: var(--muted);
      font-size: 0.86rem;
    }

    .tool-legend strong { color: var(--text); }
    .tool-line { display: block; width: 48px; height: 3px; background: #000000; }
    .tool-line-bridge { background: #ff0000; }

    .tool-access-panel { max-width: 700px; padding: clamp(22px, 4vw, 34px); }
    .tool-return-link { display: inline-flex; align-items: center; margin-top: 16px; text-decoration: none; }

    .tool-workspace {
      display: grid;
      grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
      gap: 22px;
      align-items: start;
    }

    .tool-workspace[hidden],
    .tool-results[hidden],
    .tool-access-panel[hidden] { display: none; }

    .tool-input-panel,
    .tool-result-panel { min-width: 0; overflow: hidden; }
    .tool-input-panel { border-top: 4px solid var(--accent); }
    .tool-result-panel { border-top: 4px solid var(--surface-ink); }
    .tool-section-heading { padding: clamp(22px, 3vw, 30px) clamp(20px, 3vw, 30px) 0; }
    .tool-step {
      margin: 0 0 8px;
      color: var(--accent);
      font-size: 0.7rem;
      font-weight: 850;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .tool-form { padding: 0 clamp(20px, 3vw, 30px); }
    .tool-upload-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      align-items: stretch;
    }
    .tool-drop-zone {
      padding: 18px;
      border: 1px dashed var(--border-strong);
      border-radius: 10px;
      background: var(--surface-soft);
      transition: border-color 120ms ease, background-color 120ms ease;
    }
    .tool-drop-zone.is-dragging {
      border-color: var(--accent);
      background: var(--accent-soft);
    }
    .tool-drop-zone input[type="file"] { background: var(--surface); }

    .tool-parameter-set {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
      min-width: 0;
      margin: 20px 0 0;
      padding: 16px;
      border: 1px solid var(--border);
      border-radius: 10px;
    }
    .tool-parameter-set legend { padding: 0 6px; font-weight: 750; }
    .tool-parameter-help { grid-column: 1 / -1; margin-top: -4px; }
    .tool-measure-input { position: relative; }
    .tool-measure-input input {
      width: 100%;
      min-height: 46px;
      padding: 10px 46px 10px 12px;
      border: 1px solid var(--border-strong);
      border-radius: 8px;
      background: var(--surface-soft);
      color: var(--text);
    }
    .tool-measure-input span {
      position: absolute;
      top: 50%;
      right: 12px;
      color: var(--muted);
      font-size: 0.78rem;
      transform: translateY(-50%);
      pointer-events: none;
    }

    .tool-actions { display: flex; gap: 8px; margin-top: 18px; }
    .tool-actions .primary-button { flex: 1; }
    .tool-feedback { margin-right: clamp(20px, 3vw, 30px); margin-left: clamp(20px, 3vw, 30px); }

    .tool-progress {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      margin: 18px 0 0;
      padding: 0;
      border-top: 1px solid var(--border);
      list-style: none;
    }
    .tool-progress:has(#tool-stage-failed:not([hidden])) { grid-template-columns: repeat(4, 1fr); }
    .tool-progress li {
      display: flex;
      gap: 8px;
      align-items: center;
      min-width: 0;
      padding: 13px clamp(8px, 2vw, 16px);
      border-right: 1px solid var(--border);
      color: var(--muted);
      font-size: 0.76rem;
      font-weight: 750;
    }
    .tool-progress li:last-child { border-right: 0; }
    .tool-progress li span { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--border-strong); }
    .tool-progress li[data-state="current"] { background: var(--accent-soft); color: var(--accent); }
    .tool-progress li[data-state="current"] span { background: var(--accent); }
    .tool-progress li[data-state="complete"] { color: var(--success); }
    .tool-progress li[data-state="complete"] span { background: var(--success); }
    .tool-progress li[data-state="error"] { background: var(--danger-soft); color: var(--danger); }
    .tool-progress li[data-state="error"] span { background: var(--danger); }

    .tool-result-empty {
      display: grid;
      min-height: 390px;
      place-content: center;
      padding: 32px;
      text-align: center;
      color: var(--muted);
    }
    .tool-result-empty p { margin: 0 0 8px; color: var(--text); font-size: 1.1rem; font-weight: 800; }
    .tool-result-empty span { font-size: 0.86rem; }
    .tool-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0 clamp(20px, 3vw, 30px) clamp(20px, 3vw, 30px); }
    .tool-result-card { min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); }
    .tool-result-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
    .tool-result-card h3 { margin: 2px 0 0; font-size: 1rem; }
    .tool-result-card header .secondary-button { width: auto; flex: 0 0 auto; text-decoration: none; }
    .tool-output-index { margin: 0; color: var(--accent); font: 800 0.68rem/1 ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: 0.12em; }
    .tool-result-card > p { margin: 11px 0 0; color: var(--muted); font-size: 0.8rem; line-height: 1.55; }
    .tool-preview-frame { display: grid; min-height: 260px; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 7px; background: #ffffff; }
    .tool-preview-frame img { display: block; width: 100%; height: 260px; object-fit: contain; }
    .tool-log { grid-column: 1 / -1; min-width: 0; padding-top: 4px; }
    .tool-log h3 { margin: 0 0 10px; font-size: 0.95rem; }
    .tool-log pre { max-height: 190px; margin: 0; padding: 14px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-ink); color: #dbe8ef; font: 0.78rem/1.65 ui-monospace, "SFMono-Regular", Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }

    @media (max-width: 960px) {
      .tool-workspace { grid-template-columns: minmax(0, 1fr); }
    }

    @media (max-width: 780px) {
      .tool-masthead { grid-template-columns: minmax(0, 1fr); gap: 20px; }
      .tool-legend { max-width: 420px; }
    }

    @media (max-width: 600px) {
      .tool-upload-grid,
      .tool-parameter-set,
      .tool-results { grid-template-columns: minmax(0, 1fr); }
      .tool-parameter-help,
      .tool-log { grid-column: auto; }
      .tool-actions { flex-direction: column; }
      .tool-actions button { width: 100%; }
      .tool-result-card header { align-items: flex-start; flex-direction: column; }
      .tool-result-card header .secondary-button { width: 100%; text-align: center; }
      .tool-preview-frame,
      .tool-preview-frame img { height: 220px; min-height: 220px; }
      .tool-progress li { justify-content: center; padding-inline: 6px; font-size: 0.68rem; }
    }

    @media (prefers-reduced-motion: reduce) {
      .tool-drop-zone { transition: none; }
    }