/* ── Per-client Today KPI bar (T-5 multi-functional) ── */
    .cd-today-kpi {
      background: var(--bg-secondary);
      border: 1px solid var(--border-default);
      border-radius: var(--radius-md);
      padding: var(--space-md) var(--space-lg);
      margin-bottom: var(--space-lg);
    }
    .cd-today-kpi[hidden] { display: none; }
    .cd-today-kpi-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: var(--space-sm);
    }
    .cd-today-kpi-title {
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--text-primary);
    }
    .cd-today-kpi-date {
      font-size: 0.75rem;
      color: var(--text-tertiary);
    }
    .cd-today-kpi-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: var(--space-sm);
    }
    .cd-today-kpi-cell {
      text-align: center;
      padding: var(--space-xs) var(--space-sm);
      background: var(--bg-primary);
      border: 1px solid var(--border-default);
      border-radius: var(--radius-sm);
    }
    .cd-today-kpi-label {
      font-size: 0.625rem;
      color: var(--text-tertiary);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin-bottom: 2px;
    }
    .cd-today-kpi-value {
      font-size: 1.125rem;
      font-weight: 600;
      color: var(--text-primary);
    }
    @media (max-width: 1080px) {
      .cd-today-kpi-grid {
        grid-template-columns: repeat(4, 1fr);
      }
    }
    @media (max-width: 720px) {
      .cd-today-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* ── DM flow note (D-52 reply-triggered hybrid) ── */
    .dm-flow-note {
      background: var(--alert-info-bg, rgba(74, 127, 196, 0.06));
      border: 1px solid var(--alert-info, rgba(74, 127, 196, 0.3));
      border-radius: var(--radius-sm);
      padding: var(--space-sm) var(--space-md);
      margin-bottom: var(--space-md);
      font-size: 0.8125rem;
      color: var(--text-secondary);
    }
    .dm-thread-panel {
      background:
        linear-gradient(135deg, rgba(74, 127, 196, 0.08), rgba(54, 179, 126, 0.04)),
        var(--bg-secondary);
      border: 1px solid var(--border-default);
      border-radius: var(--radius-md);
      padding: var(--space-md);
      margin-bottom: var(--space-lg);
    }
    .dm-thread-intro {
      margin: 0 0 var(--space-md) 0;
    }
    .dm-thread-summary {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
      gap: var(--space-sm);
      margin-bottom: var(--space-md);
    }
    .dm-thread-summary-item {
      border: 1px solid var(--border-default);
      border-radius: var(--radius-sm);
      background: var(--bg-primary);
      padding: var(--space-sm);
    }
    .dm-thread-summary-attention {
      border-color: var(--warning, #f5a623);
      background: var(--alert-warning-bg, rgba(245, 166, 35, 0.1));
    }
    .dm-thread-summary-waiting {
      border-color: var(--accent-primary, #4a7fc4);
      background: var(--alert-info-bg, rgba(74, 127, 196, 0.08));
    }
    .dm-thread-summary-value {
      color: var(--text-primary);
      font-size: 1.25rem;
      font-weight: 800;
      line-height: 1;
    }
    .dm-thread-summary-label {
      margin-top: 4px;
      color: var(--text-primary);
      font-size: 0.75rem;
      font-weight: 700;
    }
    .dm-thread-summary-note {
      margin-top: 2px;
      color: var(--text-tertiary);
      font-size: 0.6875rem;
    }
    .dm-thread-filter-bar {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-xs);
      margin: 0 0 var(--space-md);
    }
    .dm-thread-filter {
      min-height: 36px;
      padding: 0 var(--space-sm);
      border: 1px solid var(--border-default);
      border-radius: var(--radius-sm);
      background: var(--bg-primary);
      color: var(--text-secondary);
      font-weight: 700;
      cursor: pointer;
    }
    .dm-thread-filter.active,
    .dm-thread-filter[aria-pressed="true"] {
      border-color: var(--accent-primary, #4a7fc4);
      background: var(--alert-info-bg, rgba(74, 127, 196, 0.08));
      color: var(--accent-primary, #4a7fc4);
    }
    .dm-thread-index {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-xs);
      margin: 0 0 var(--space-md);
    }
    .dm-thread-index-link {
      display: inline-flex;
      align-items: center;
      max-width: 18rem;
      min-height: 32px;
      padding: 0 var(--space-sm);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-sm);
      background: var(--bg-primary);
      color: var(--text-secondary);
      font-size: 0.75rem;
      text-decoration: none;
    }
    .dm-thread-index-link:hover {
      border-color: var(--accent-primary, #4a7fc4);
      color: var(--accent-primary, #4a7fc4);
    }
    .dm-thread-list {
      display: grid;
      gap: var(--space-md);
    }
    .dm-thread-state {
      padding: var(--space-md);
      text-align: center;
      color: var(--text-tertiary);
    }
    .dm-thread-card {
      background: var(--bg-primary);
      border: 1px solid var(--border-default);
      border-radius: var(--radius-md);
      overflow: hidden;
    }
    .dm-thread-card-header {
      padding: var(--space-md);
      border-bottom: 1px solid var(--border-default);
    }
    .dm-thread-target {
      font-weight: 700;
      color: var(--text-primary);
    }
    .dm-thread-meta {
      margin-top: var(--space-xs);
      font-size: 0.75rem;
      color: var(--text-tertiary);
    }
    .dm-thread-messages {
      display: grid;
      gap: var(--space-sm);
      margin: 0;
      padding: var(--space-md);
      list-style: none;
    }
    .dm-message {
      width: min(100%, 56rem);
      border-left: 3px solid var(--border-default);
      padding: var(--space-sm) var(--space-md);
      background: var(--bg-secondary);
      border-radius: var(--radius-sm);
    }
    .dm-message-outbound {
      margin-left: auto;
    }
    .dm-message-inbound {
      margin-right: auto;
      background: var(--bg-tertiary, var(--bg-secondary));
    }
    .dm-message-role-dm1 { border-left-color: var(--accent-primary, #4a7fc4); }
    .dm-message-role-target_reply { border-left-color: var(--success, #36b37e); }
    .dm-message-role-dm2_candidate {
      border-left-color: var(--warning, #f5a623);
      background: var(--alert-warning-bg, rgba(245, 166, 35, 0.1));
    }
    .dm-message-role-dm2_sent { border-left-color: var(--accent-secondary, #6c5ce7); }
    .dm-message-head {
      margin-bottom: var(--space-xs);
    }
    .dm-message-role {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-xs);
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--text-primary);
    }
    .dm-status-chip {
      display: inline-flex;
      padding: 2px 6px;
      border-radius: 999px;
      font-size: 0.6875rem;
      font-weight: 700;
    }
    .dm-status-pending_approval {
      background: var(--alert-warning-bg, rgba(245, 166, 35, 0.14));
      color: var(--text-primary);
    }
    .dm-status-approved {
      background: var(--alert-info-bg, rgba(74, 127, 196, 0.12));
      color: var(--accent-primary, #4a7fc4);
    }
    .dm-status-sending {
      background: rgba(2, 132, 199, 0.14);
      color: #0369a1;
    }
    .dm-status-sent {
      background: var(--status-active-bg, rgba(54, 179, 126, 0.12));
      color: var(--status-active, #36b37e);
    }
    .dm-status-dm2_send_failed_terminal,
    .dm-status-cancelled {
      background: var(--alert-danger-bg, rgba(220, 38, 38, 0.1));
      color: var(--alert-danger, #dc2626);
    }
    .dm-message-time {
      display: inline-block;
      margin-top: 4px;
      font-size: 0.6875rem;
      color: var(--text-tertiary);
      white-space: nowrap;
    }
    .dm-message-text {
      white-space: pre-wrap;
      word-break: break-word;
      overflow-wrap: anywhere;
      font-size: 0.875rem;
      line-height: 1.55;
      color: var(--text-secondary);
    }
    .dm-message-text-collapsible summary {
      cursor: pointer;
      white-space: pre-wrap;
    }
    .dm-message-text-collapsible summary::-webkit-details-marker {
      display: none;
    }
    .dm-message-expand {
      display: inline-flex;
      margin-top: var(--space-xs);
      color: var(--accent-primary, #4a7fc4);
      font-size: 0.75rem;
      font-weight: 700;
    }
    .dm-message-full {
      margin-top: var(--space-sm);
      padding-top: var(--space-sm);
      border-top: 1px solid var(--border-default);
    }
    .dm-message-note {
      margin-top: var(--space-xs);
      color: var(--text-tertiary);
      font-size: 0.75rem;
      line-height: 1.45;
    }
    .dm-approval-link {
      display: inline-flex;
      align-items: center;
      min-height: 36px;
      margin-top: var(--space-sm);
      padding: 0 var(--space-sm);
      border: 1px solid var(--accent-primary, #4a7fc4);
      border-radius: var(--radius-sm);
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--accent-primary, #4a7fc4);
      text-decoration: none;
    }
    .dm-approval-link:hover {
      background: var(--alert-info-bg, rgba(74, 127, 196, 0.08));
    }
    .dm-approval-link:focus-visible,
    .dm-thread-retry:focus-visible {
      outline: 2px solid var(--accent-primary, #4a7fc4);
      outline-offset: 2px;
    }
    .dm-thread-retry {
      margin-top: var(--space-sm);
    }
    @media (min-width: 721px) {
      .dm-thread-panel {
        padding: var(--space-lg);
      }
      .dm-thread-card-header,
      .dm-message-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-md);
      }
      .dm-thread-meta {
        margin-top: 0;
        text-align: right;
      }
      .dm-message {
        max-width: 78%;
      }
      .dm-message-time {
        margin-top: 0;
      }
    }
    .pending-intro {
      margin: 0 0 var(--space-md) 0;
      padding: var(--space-sm) var(--space-md);
      background: var(--bg-tertiary);
      border-radius: var(--radius-sm);
    }

    .tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border-default);
      margin-bottom: var(--space-xl); flex-wrap: wrap; }
    .tab-btn { padding: var(--space-sm) var(--space-lg); background: none; border: none;
      border-bottom: 2px solid transparent; color: var(--text-secondary);
      font-family: var(--font-body); font-size: 0.875rem; cursor: pointer; transition: color 150ms; }
    .tab-btn:hover { color: var(--text-primary); }
    .tab-btn.active { color: var(--text-primary); border-bottom-color: var(--accent, var(--accent-blue)); }
    .tab-panel { display: none; }
    .tab-panel.active { display: block; }

    .section-title {
      font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.07em;
      text-transform: uppercase; color: var(--text-tertiary);
      margin: var(--space-lg) 0 var(--space-sm);
      padding-bottom: var(--space-xs); border-bottom: 1px solid var(--border-default);
    }

    .form-section {
      background: var(--bg-secondary); border: 1px solid var(--border-default);
      border-radius: var(--radius-md); padding: var(--space-lg);
      margin-bottom: var(--space-lg);
    }

    .form-grid-2 {
      display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md);
    }

    .info-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md);
      margin-bottom: var(--space-lg);
    }
    .info-item {
      background: var(--bg-secondary); border: 1px solid var(--border-default);
      border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md);
    }
    .info-label {
      font-size: 0.75rem; color: var(--text-tertiary);
      letter-spacing: 0.02em; margin-bottom: 4px;
    }
    .info-value {
      font-family: var(--font-heading); font-size: 1rem; color: var(--text-primary);
    }

    .status-badge {
      display: inline-block; padding: 2px 10px; border-radius: var(--radius-sm);
      font-size: 0.75rem; font-weight: 600;
    }
    .status-badge.active { background: rgba(22,163,74,0.12); color: #166534; }
    .status-badge.ready { background: rgba(22,163,74,0.12); color: #166534; }
    .status-badge.login_wait,
    .status-badge.mlx_wait { background: rgba(124,63,0,0.14); color: #7c3f00; }
    .status-badge.banned { background: rgba(220,38,38,0.15); color: #b91c1c; font-weight: 700; }
    .status-badge.restricted { background: rgba(124,63,0,0.14); color: #7c3f00; }

    .ban-alert {
      background: rgba(220,38,38,0.08); border: 1px solid rgba(220,38,38,0.3);
      border-radius: var(--radius-md); padding: var(--space-md);
      margin-bottom: var(--space-lg); color: #dc2626;
    }
    .ban-alert-title { font-weight: 700; margin-bottom: 4px; }

    .client-header {
      display: flex; align-items: center; gap: var(--space-lg);
      margin-bottom: var(--space-xl); flex-wrap: wrap;
    }
    .client-header h1 { margin-bottom: 0; }

    .back-link {
      color: var(--text-secondary); font-size: 0.875rem;
      display: inline-flex; align-items: center; gap: 4px;
      margin-bottom: var(--space-lg);
    }
    .back-link:hover { color: var(--text-primary); text-decoration: none; }

    .tag-list {
      display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px;
    }
    .tag-chip {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 2px 8px; border-radius: 12px;
      background: rgba(37,99,235,0.1); color: #2563eb;
      font-size: 0.75rem;
    }
    .tag-chip button {
      background: none; border: none; color: inherit; cursor: pointer;
      padding: 0; font-size: 0.875rem; line-height: 1;
    }

    .tag-input-wrap {
      display: flex; gap: var(--space-xs); margin-top: 4px;
    }
    .tag-input-wrap input {
      flex: 1;
    }

    .slider-group {
      display: flex; align-items: center; gap: var(--space-md);
    }
    .slider-group input[type="range"] { flex: 1; }
    .slider-value {
      min-width: 48px; text-align: right; font-variant-numeric: tabular-nums;
      font-weight: 600;
    }

    .pending-card {
      background: var(--bg-secondary); border: 1px solid var(--border-default);
      border-radius: var(--radius-md); padding: var(--space-md);
      margin-bottom: var(--space-sm);
    }
    .pending-card-header {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: var(--space-sm); gap: var(--space-sm);
    }
    .pending-card-actions {
      display: flex; gap: var(--space-xs); flex-wrap: wrap;
    }

    .form-actions {
      display: flex; gap: var(--space-sm); align-items: center;
      margin-top: var(--space-lg);
    }

    /* L4-E O5 (2026-05-05): un-hid the 3 sibling info-items
       (mlx_profile / time / last_error). They were populated by JS but
       hidden via display:none, so operators couldn't see error context.
       2-col grid keeps it readable on desktop; the @media rules below
       collapse it to 1 col on narrow viewports. */
    .onboarding-start-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-md);
      margin-bottom: var(--space-sm);
    }

    .onboarding-profile-id {
      font-family: var(--font-mono);
      font-size: 0.875rem;
      overflow-wrap: anywhere;
    }

    .onboarding-error {
      color: var(--text-secondary);
      font-size: 0.875rem;
      overflow-wrap: anywhere;
      white-space: pre-wrap;
    }

    .onboarding-actions {
      flex-wrap: wrap;
    }

    .onboarding-status-badge {
      display: inline-block;
      padding: 2px 10px;
      border-radius: var(--radius-sm);
      font-size: 0.75rem;
      font-weight: 700;
      white-space: nowrap;
    }
    .onboarding-status-badge.pending { background: rgba(124,63,0,0.14); color: #7c3f00; }
    .onboarding-status-badge.in_progress { background: rgba(37,99,235,0.10); color: #1d4ed8; }
    .onboarding-status-badge.logged_in { background: rgba(3,105,161,0.10); color: #0369a1; }
    .onboarding-status-badge.totp_ready { background: rgba(22,101,52,0.10); color: #166534; }
    .onboarding-status-badge.failed { background: rgba(185,28,28,0.12); color: #b91c1c; }

    .save-status { font-size: 0.875rem; }
    .save-status.success { color: var(--status-active, #16a34a); }
    .save-status.error { color: var(--status-error, #dc2626); }

    .timed-pause-controls,
    .safety-settings-controls {
      display: grid;
      gap: 6px;
      max-width: 420px;
      margin-top: var(--space-md);
    }
    .timed-pause-controls label,
    .safety-settings-controls label {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--text-secondary);
    }
    .timed-pause-row,
    .safety-settings-row {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-sm);
      align-items: center;
    }
    .timed-pause-row input[type="date"],
    .safety-settings-row input[type="number"] {
      max-width: 180px;
    }

    .helper-text {
      font-size: 0.75rem; color: var(--text-tertiary);
      margin-top: 4px;
    }

    .danger-zone {
      border: 1px solid rgba(220,38,38,0.3); background: rgba(220,38,38,0.03);
      border-radius: var(--radius-md); padding: var(--space-lg);
      margin-top: var(--space-xl);
    }
    .danger-zone-title {
      color: #dc2626; font-weight: 600; margin-bottom: var(--space-sm);
    }

    .char-counter {
      font-size: 0.75rem; color: var(--text-tertiary);
      text-align: right; margin-top: 2px;
    }
    .char-counter.invalid { color: var(--status-error, #dc2626); }

    /* ── extracted inline style attributes (B-1, CSP compliance) ── */
    .cd-1  { display: none; }
    .cd-2  { color: var(--status-error, #dc2626); }
    .cd-3  { color: var(--status-error, #dc2626); }
    .cd-4  { display: flex; align-items: center; gap: var(--space-sm); }
    .cd-5  { width: auto; }
    .cd-6  { margin: 0; }
    .cd-7  { display: none; }
    .cd-8  { color: var(--status-error, #dc2626); }
    .cd-9  { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
    .cd-10 { margin-bottom: var(--space-sm); }
    .cd-11 { color: var(--status-error, #dc2626); }
    .cd-12 { color: var(--status-error, #dc2626); }
    .cd-13 { color: var(--status-error, #dc2626); }
    .cd-14 { display: flex; gap: var(--space-md); }
    .cd-15 { display: inline-flex; align-items: center; gap: 6px; }
    .cd-16 { width: auto; }
    .cd-17 { display: inline-flex; align-items: center; gap: 6px; }
    .cd-18 { width: auto; }
    .cd-19 { display: inline-flex; align-items: center; gap: 6px; }
    .cd-20 { width: auto; }
    .cd-21 { color: var(--status-error, #dc2626); }
    .cd-22 { padding: var(--space-md); text-align: center; color: var(--text-tertiary); }
    .cd-23 { flex-wrap: wrap; gap: var(--space-sm); }
    .cd-24 { padding: 4px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border-default); }
    .cd-25 { display: none; justify-content: center; gap: var(--space-sm); padding: var(--space-md); }
    .cd-26 { padding: 6px 12px; font-size: 0.875rem; color: var(--text-secondary); }
    .cd-27 { flex-wrap: wrap; gap: var(--space-sm); }
    .cd-28 { padding: 4px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border-default); }
    .cd-29 { padding: 4px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border-default); }
    .cd-30 { display: none; justify-content: center; gap: var(--space-sm); padding: var(--space-md); }
    .cd-31 { padding: 6px 12px; font-size: 0.875rem; color: var(--text-secondary); }

    /* L4-E O1 (2026-05-05): #f-recovery-codes rule removed alongside
       textarea — was orphan UI (no worker decrypts the ciphertext). */

    /* ── U-1 / U-5: runtime-state action buttons ───────────── */
    .btn-start-operation {
      font-weight: 600;
    }
    .btn-start-operation:disabled {
      opacity: 0.55;
      cursor: not-allowed;
    }
    .btn-pause-permanent,
    .btn-resume-now {
      font-size: 0.875rem;
      padding: 6px 14px;
    }
    .btn-pause-permanent {
      border-color: rgba(220, 38, 38, 0.35);
      color: #b91c1c;
    }
    .btn-pause-permanent:hover {
      background: rgba(220, 38, 38, 0.06);
    }
    .btn-resume-now {
      border-color: rgba(22, 163, 74, 0.35);
      color: #15803d;
    }
    .btn-resume-now:hover {
      background: rgba(22, 163, 74, 0.06);
    }

    /* L4-E O5: default is 2-col (above). Collapse to 1-col on narrow viewport. */
    @media (max-width: 640px) {
      .onboarding-start-grid {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    /* ── Iter3-Z: tab grouping (visual gap between hearing-side and history-side) ── */
    /* Tab order (HTML L76-83): basic | criteria | dm | dm-history | pending | targets | logs | reports
       Group A (設定系): tabs 1-3.  Group B (履歴・候補系): tabs 4-8.
       Add a CSS-only divider after tab 3 so operator can mentally chunk them. */
    .tabs .tab-btn:nth-of-type(3) {
      margin-right: var(--space-md);
      position: relative;
    }
    .tabs .tab-btn:nth-of-type(3)::after {
      content: '';
      position: absolute;
      right: calc(-1 * var(--space-md) / 2 - 1px);
      top: 25%;
      height: 50%;
      width: 1px;
      background: var(--border-default);
    }

    /* ── Iter3-Z: login_error_count threshold widget (D-B6) ── */
    .login-error-threshold {
      display: inline-block;
      margin-top: 4px;
      padding: 2px 8px;
      border-radius: var(--radius-sm);
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: 0.02em;
    }
    .login-error-threshold[hidden] { display: none; }
    .login-error-threshold.ok {
      color: var(--status-active);
      background: var(--status-active-bg);
      border: 1px solid var(--status-active-bg);
    }
    .login-error-threshold.warning {
      color: #7c3f00;
      background: rgba(124,63,0,0.12);
      border: 1px solid rgba(124,63,0,0.35);
    }
    .login-error-threshold.critical {
      color: var(--alert-critical);
      background: var(--alert-critical-bg);
      border: 1px solid var(--alert-critical);
    }

    /* ── Iter3-Z: enriched info section (warmup / created / proxy / pool) ── */
    .cd-enriched {
      margin-top: var(--space-xl);
      padding-top: var(--space-lg);
      border-top: 1px dashed var(--border-default);
    }
    .cd-enriched[hidden] { display: none; }
    .cd-enriched-title {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--text-primary);
      margin: 0 0 var(--space-md) 0;
    }
    .cd-enriched-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-md);
    }
    .cd-enriched-card {
      background: var(--bg-secondary);
      border: 1px solid var(--border-default);
      border-radius: var(--radius-md);
      padding: var(--space-md) var(--space-lg);
    }
    .cd-enriched-card[hidden] { display: none; }
    .cd-enriched-card-title {
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--text-tertiary);
      margin-bottom: var(--space-sm);
    }
    .cd-info-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: var(--space-md);
      padding: 4px 0;
      font-size: 0.8125rem;
    }
    .cd-info-label { color: var(--text-tertiary); }
    .cd-info-value {
      color: var(--text-primary);
      font-weight: 500;
      font-family: var(--font-number, var(--font-body));
      text-align: right;
      word-break: break-all;
    }

    /* ── Iter3-Z: warmup progress component (P1-1, V3 §7-5) ── */
    .cd-warmup-summary {
      display: flex;
      align-items: baseline;
      gap: var(--space-sm);
      margin-bottom: var(--space-sm);
      flex-wrap: wrap;
    }
    .cd-warmup-summary > span:first-child {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--text-primary);
    }
    .cd-warmup-cap {
      font-size: 0.75rem;
      color: var(--text-secondary);
    }
    .cd-warmup-bar {
      height: 6px;
      background: var(--bg-tertiary);
      border-radius: 3px;
      overflow: hidden;
      margin-bottom: var(--space-sm);
    }
    .cd-warmup-bar-fill {
      height: 100%;
      width: 0%;
      background: var(--accent);
      transition: width 0.3s ease;
    }
    .cd-warmup-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }
    .cd-warmup-chip {
      display: inline-block;
      padding: 2px 6px;
      font-size: 0.6875rem;
      border-radius: 2px;
      background: var(--bg-tertiary);
      color: var(--text-secondary);
      border: 1px solid var(--border-default);
    }
    .cd-warmup-chip.done {
      color: #166534;
      background: rgba(22,101,52,0.10);
      border-color: rgba(22,101,52,0.30);
    }
    .cd-warmup-chip.active {
      color: #fff;
      background: var(--accent);
      border-color: var(--accent);
      font-weight: 600;
    }

    /* ── Iter3-Z: per-client KPI mini-chart (P1-2) ── */
    .cd-kpi-chart {
      margin-top: var(--space-lg);
      padding: var(--space-md) var(--space-lg);
      background: var(--bg-secondary);
      border: 1px solid var(--border-default);
      border-radius: var(--radius-md);
    }
    .cd-kpi-chart[hidden] { display: none; }
    .cd-kpi-chart-title {
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--text-secondary);
      margin-bottom: var(--space-sm);
    }
    .cd-kpi-chart canvas {
      width: 100%;
      max-width: 100%;
      height: 200px;
      display: block;
    }
    .cd-kpi-chart-legend {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-md);
      margin-top: var(--space-sm);
      font-size: 0.75rem;
      color: var(--text-secondary);
    }
    .cd-kpi-chart-legend-item {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .cd-kpi-chart-dot {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }

    /* ── Iter3-Z: score_reason hover marker (P1-5) ── */
    .cd-score-with-reason {
      cursor: help;
      position: relative;
    }
    .cd-score-with-reason::after {
      content: ' ⓘ';
      color: var(--text-tertiary);
      font-size: 0.75rem;
    }

    /* Iter5-F3 T6 (2026-05-05): `.cd-screenshot-link` rule removed alongside
       the JS injection that produced the 📷 span. Backend does not serve
       /screenshots/* so the icon was decorative-only. Re-add this rule
       (and the JS in client-detail-enrichment.js) when a screenshot-serving
       route + auth lands. */

    @media (max-width: 720px) {
      .cd-enriched-grid {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    /* ── Iter3-supplement S1 (RED-6): danger zone — delete client ──
       Visually distinct from regular sections: dashed amber/red border,
       smaller-than-default heading, separated from main content by hr.
       Subtle styling (not screaming red) per "danger-zone" UX convention. */
    .danger-zone-divider {
      margin: var(--space-2xl) 0 var(--space-lg) 0;
      border: none;
      border-top: 1px dashed var(--border-default);
    }
    .danger-zone {
      margin-top: var(--space-lg);
      padding: var(--space-md) var(--space-lg);
      background: rgba(220, 38, 38, 0.03);
      border: 1px solid rgba(220, 38, 38, 0.25);
      border-radius: var(--radius-md);
    }
    .danger-zone-title {
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #b91c1c;
      margin: 0 0 var(--space-sm) 0;
    }
    .danger-zone-note {
      font-size: 0.8125rem;
      color: var(--text-secondary);
      line-height: 1.6;
      margin: 0 0 var(--space-md) 0;
    }
    .danger-zone-note strong {
      color: #b91c1c;
    }
    .danger-zone-actions {
      display: flex;
      gap: var(--space-sm);
      flex-wrap: wrap;
    }
    .btn-danger {
      background: transparent;
      color: #b91c1c;
      border: 1px solid rgba(220, 38, 38, 0.45);
      border-radius: var(--radius-md);
      padding: 6px 14px;
      font-family: var(--font-body);
      font-size: 0.8125rem;
      font-weight: 500;
      cursor: pointer;
      transition: background 150ms, border-color 150ms;
    }
    .btn-danger:hover {
      background: rgba(220, 38, 38, 0.08);
      border-color: rgba(220, 38, 38, 0.7);
    }
    .btn-danger:focus-visible {
      outline: 2px solid #dc2626;
      outline-offset: 2px;
    }

    /* ── Iter5-F3 T2: edit-mode toolbar ─────────────────────────
       Sits above each form (basic / criteria / dm). VIEW state shows the
       「編集」 button; EDIT state hides it (JS controls visibility via the
       hidden attribute). The hint text mirrors the form's data-readonly
       state for a11y. */
    .form-edit-toolbar {
      display: flex;
      align-items: center;
      gap: var(--space-md);
      margin-bottom: var(--space-md);
      padding: var(--space-sm) var(--space-md);
      background: var(--bg-tertiary);
      border: 1px solid var(--border-default);
      border-radius: var(--radius-sm);
    }
    .form-edit-toolbar .btn-edit-mode {
      font-size: 0.8125rem;
      padding: 4px 14px;
    }
    .form-edit-hint {
      font-size: 0.75rem;
      color: var(--text-secondary);
    }

    /* ── Iter5-F3 T2: visual cues for readonly forms ────────────
       When the form is in VIEW state (data-readonly=true), give inputs
       a slightly muted background so operators understand the difference
       between "looking" and "editing". */
    form[data-readonly="true"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    form[data-readonly="true"] textarea,
    form[data-readonly="true"] select {
      background: var(--bg-tertiary);
      color: var(--text-secondary);
      cursor: default;
    }
    form[data-readonly="true"] input[readonly],
    form[data-readonly="true"] textarea[readonly] {
      /* Suppress Chrome's "I'm an input you can click on" affordance. */
      caret-color: transparent;
    }
    form[data-readonly="true"] input:focus,
    form[data-readonly="true"] textarea:focus,
    form[data-readonly="true"] select:focus {
      outline: none;
      box-shadow: none;
    }
    form[data-readonly="true"] [data-tag-add] {
      opacity: 0.5;
    }

    /* ── Iter5-F3 T3: FB credential indicator badge (Option A) ──
       Three states (data-state attribute):
         set    — backend has a ciphertext, ✓ 設定済み (green)
         unset  — no ciphertext, 未設定 (grey)
         change — operator typed into input, (変更) (amber, will overwrite)
       Sits inside the <label> next to the field name. */
    .cd-fb-cred-indicator {
      display: inline-block;
      margin-left: 6px;
      padding: 1px 8px;
      border-radius: 10px;
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      vertical-align: middle;
    }
    .cd-fb-cred-indicator[data-state="set"] {
      color: #166534;
      background: rgba(22, 163, 74, 0.10);
      border: 1px solid rgba(22, 163, 74, 0.3);
    }
    .cd-fb-cred-indicator[data-state="unset"] {
      color: var(--text-secondary);
      background: var(--bg-tertiary);
      border: 1px solid var(--border-default);
    }
    .cd-fb-cred-indicator[data-state="change"] {
      color: #7c3f00;
      background: rgba(217, 119, 6, 0.08);
      border: 1px solid rgba(217, 119, 6, 0.35);
    }

    /* ── Iter5-F3 T4: pending-card AI judgment summary block ────
       Renders below the card header, above the recent_logs preview.
       Uses non-sensitive judgment fields (confidence / pattern /
       reason_truncated / confirmed_datetime) emitted by the targets
       pending-confirmations endpoint. */
    .pending-judgment {
      background: var(--bg-tertiary);
      border-left: 3px solid var(--accent, var(--accent-blue, #4a7fc4));
      padding: var(--space-sm) var(--space-md);
      margin-top: var(--space-sm);
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
      font-size: 0.8125rem;
    }
    .pending-judgment-row {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 6px;
      margin-bottom: 4px;
    }
    .pending-judgment-label {
      color: var(--text-tertiary);
      font-size: 0.75rem;
      letter-spacing: 0.02em;
    }
    .pending-judgment-sep {
      color: var(--text-tertiary);
      margin: 0 4px;
    }
    .pending-judgment-confidence {
      font-weight: 700;
      padding: 1px 8px;
      border-radius: 10px;
      font-size: 0.75rem;
    }
    .pending-judgment-confidence-high {
      color: #15803d;
      background: rgba(22, 163, 74, 0.12);
    }
    .pending-judgment-confidence-medium {
      color: #b45309;
      background: rgba(217, 119, 6, 0.10);
    }
    .pending-judgment-confidence-low {
      color: #b91c1c;
      background: rgba(220, 38, 38, 0.10);
    }
    .pending-judgment-confidence-unknown {
      color: var(--text-tertiary);
      background: var(--bg-secondary);
    }
    .pending-judgment-reason {
      margin-top: 6px;
      color: var(--text-primary);
      line-height: 1.5;
    }

    /* ── Iter7 Fix 1: hide the 赤* "required" indicator outside isNew mode.
       The 3 fields (fb_email / fb_password / dm1) are required only on
       creation; in edit mode blank means "don't change". Body class
       `cd-is-new` is toggled by client-detail.js. */
    .cd-required-isnew { display: none; }
    body.cd-is-new .cd-required-isnew { display: inline; }

    /* ── Iter7 Fix 2 (rev. 2026-05-06): viewport-fixed bottom bar for the
       create flow only. Hidden by default; shown when body.cd-is-new is set.

       Originally used position: sticky inside #basic-form, which trapped the
       bar at the bottom of basic-form rather than the viewport — in isNew
       mode all 3 tab-panels (basic / criteria / dm) stack vertically, so a
       sticky-in-basic-form bar visually appears BETWEEN basic and criteria.
       Operators scrolling to fill ヒアリング項目 / DM never see the bar.
       Switched to position: fixed so the bar follows the viewport. */
    .cd-form-sticky-bar {
      position: fixed;
      bottom: 0;
      left: var(--sidebar-w, 220px);
      right: 0;
      background: var(--bg-primary, white);
      border-top: 1px solid var(--border-default, #e5e7eb);
      padding: var(--space-sm) var(--space-md);
      display: none;
      justify-content: flex-end;
      align-items: center;
      gap: var(--space-sm);
      z-index: 50;
    }
    body.cd-is-new .cd-form-sticky-bar:not([hidden]) { display: flex; }

    /* Reserve viewport bottom space so the last form fields (DM2 etc.) are
       not hidden behind the fixed bar in isNew mode. */
    body.cd-is-new .main { padding-bottom: calc(var(--space-xl) + 80px); }

    /* Narrow viewport: sidebar collapses, so let the bar span full width. */
    @media (max-width: 768px) {
      .cd-form-sticky-bar { left: 0; }
    }

    /* ── D-66: scoring-state card (cd-scoring-card) ─────────────
       5th cd-enriched-card showing Phase 1 (filter) and Phase 2 (AI
       threshold) state per the two-phase adaptive scoring spec. */
    .cd-scoring-card {
      grid-column: span 2;
    }
    @media (max-width: 720px) {
      .cd-scoring-card { grid-column: auto; }
    }
    .cd-scoring-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-sm);
      margin-bottom: var(--space-xs);
    }
    .cd-scoring-mode {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      background: rgba(37, 99, 235, 0.10);
      color: #1d4ed8;
      border: 1px solid rgba(37, 99, 235, 0.3);
    }
    .cd-scoring-mode[data-mode="steady"] {
      background: rgba(22, 101, 52, 0.10);
      color: #166534;
      border-color: rgba(22, 101, 52, 0.3);
    }
    .cd-scoring-mode[hidden] { display: none; }

    .cd-scoring-warning {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: var(--radius-sm);
      font-size: 0.75rem;
      line-height: 1.4;
      margin-bottom: var(--space-sm);
      border: 1px solid transparent;
    }
    .cd-scoring-warning[data-severity="error"] {
      color: #b91c1c;
      background: rgba(220, 38, 38, 0.07);
      border-color: rgba(220, 38, 38, 0.3);
    }
    .cd-scoring-warning[data-severity="warn"] {
      color: #b45309;
      background: rgba(217, 119, 6, 0.08);
      border-color: rgba(217, 119, 6, 0.35);
    }
    .cd-scoring-warning[data-severity="info"] {
      color: #2563eb;
      background: rgba(74, 127, 196, 0.07);
      border-color: rgba(74, 127, 196, 0.3);
    }
    .cd-scoring-warning[hidden] { display: none; }
    .cd-scoring-warning-icon {
      font-size: 0.875rem;
      line-height: 1;
    }

    .cd-scoring-section {
      padding: var(--space-sm) 0;
      border-top: 1px dashed var(--border-default);
    }
    .cd-scoring-section:first-of-type {
      border-top: none;
      padding-top: 0;
    }
    .cd-scoring-section-title {
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--text-secondary);
      margin-bottom: 4px;
    }

    .cd-relax-meter {
      display: flex;
      gap: 4px;
      margin: 6px 0 8px;
      align-items: center;
    }
    .cd-relax-meter-cell {
      flex: 1;
      height: 6px;
      border-radius: 3px;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-default);
      transition: background 150ms;
    }
    .cd-relax-meter-cell[data-active="true"] {
      background: #d97706;
      border-color: #d97706;
    }
    .cd-relax-meter-cell[data-active="true"][data-cap="true"] {
      background: #b91c1c;
      border-color: #b91c1c;
    }

    .cd-scoring-meta {
      display: flex;
      justify-content: space-between;
      gap: var(--space-md);
      padding-top: var(--space-sm);
      margin-top: var(--space-sm);
      border-top: 1px dashed var(--border-default);
      font-size: 0.75rem;
    }

    .cd-scoring-actions {
      display: flex;
      gap: var(--space-sm);
      margin-top: var(--space-sm);
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .cd-scoring-actions .btn-secondary {
      font-size: 0.8125rem;
      padding: 4px 12px;
    }
    .cd-scoring-reset-btn {
      border-color: rgba(220, 38, 38, 0.35);
      color: #b91c1c;
    }
    .cd-scoring-reset-btn:hover {
      background: rgba(220, 38, 38, 0.06);
    }

    .cd-scoring-history-box {
      max-width: 640px;
      max-height: 80vh;
      display: flex;
      flex-direction: column;
    }
    .cd-scoring-history-body {
      max-height: 60vh;
      overflow-y: auto;
      margin-bottom: var(--space-md);
    }
    .cd-scoring-history-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.75rem;
    }
    .cd-scoring-history-table th,
    .cd-scoring-history-table td {
      padding: 4px 8px;
      text-align: left;
      border-bottom: 1px solid var(--border-default);
      white-space: nowrap;
    }
    .cd-scoring-history-table th {
      font-weight: 600;
      color: var(--text-secondary);
      letter-spacing: 0.02em;
      background: var(--bg-tertiary);
      position: sticky;
      top: 0;
    }
    .cd-scoring-history-empty {
      color: var(--text-tertiary);
      font-size: 0.8125rem;
      padding: var(--space-md);
      text-align: center;
    }

    /* ── D-66: status badge scoring icon overlay (clients.html) ── */
    .status-badge-scoring-icon {
      display: inline-block;
      margin-left: 6px;
      font-size: 0.875rem;
      vertical-align: middle;
      line-height: 1;
    }
    .status-badge-scoring-icon[data-severity="error"] { color: #b91c1c; }
    .status-badge-scoring-icon[data-severity="warn"]  { color: #b45309; }
    .status-badge-scoring-icon[data-severity="info"]  { color: #2563eb; }

    /* ── Iter7 Fix 4: date input with left-aligned trigger.
       Hides the native calendar-picker indicator (right side) so the
       custom 📅 button on the left is the single visual entry point. */
    .cd-date-input-wrap {
      display: flex;
      align-items: stretch;
      gap: 0;
      max-width: 280px;
    }
    .cd-date-trigger {
      flex: 0 0 auto;
      border: 1px solid var(--border-default, #d1d5db);
      border-right: none;
      background: var(--bg-tertiary, #f9fafb);
      padding: 0 12px;
      cursor: pointer;
      border-radius: var(--radius-sm) 0 0 var(--radius-sm);
      font-size: 1rem;
      line-height: 1;
      color: var(--text-primary);
    }
    .cd-date-trigger:hover {
      background: var(--bg-secondary, #f3f4f6);
    }
    .cd-date-trigger:focus-visible {
      outline: 2px solid var(--accent, #4a7fc4);
      outline-offset: -2px;
      z-index: 1;
    }
    .cd-date-input {
      flex: 1;
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
      min-width: 0;
    }
    .cd-date-input::-webkit-calendar-picker-indicator {
      display: none;
    }
    /* When the parent form is readonly, dim the trigger consistently. */
    form[data-readonly="true"] .cd-date-trigger {
      opacity: 0.6;
      cursor: default;
    }

    /* ── W4-C (2026-05-08): scoring status dashboard tab ──────
       5 indicator surfaces rendered inside #tab-scoring + a
       header pill (#cd-scoring-warning-badge) that mirrors
       the warning state. */

    .cd-scoring-warning-badge {
      display: inline-block;
      margin-left: var(--space-sm);
      padding: 2px 10px;
      border-radius: 12px;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      vertical-align: middle;
      cursor: help;
    }
    .cd-scoring-warning-badge[hidden] { display: none; }
    .cd-scoring-warning-badge[data-severity="green"] {
      color: #166534;
      background: rgba(22, 163, 74, 0.12);
      border: 1px solid rgba(22, 163, 74, 0.3);
    }
    .cd-scoring-warning-badge[data-severity="yellow"] {
      color: #7c3f00;
      background: rgba(217, 119, 6, 0.12);
      border: 1px solid rgba(217, 119, 6, 0.4);
    }
    .cd-scoring-warning-badge[data-severity="red"] {
      color: #b91c1c;
      background: rgba(220, 38, 38, 0.12);
      border: 1px solid rgba(220, 38, 38, 0.4);
    }

    .cd-scoring-status {
      display: block;
      padding: var(--space-md, 12px) 0;
    }
    .cd-scoring-status-loading {
      color: var(--text-tertiary);
      font-size: 0.875rem;
      padding: var(--space-md);
      text-align: center;
    }
    .cd-scoring-status-error {
      color: #b91c1c;
      background: rgba(220, 38, 38, 0.07);
      border: 1px solid rgba(220, 38, 38, 0.3);
      border-radius: var(--radius-sm);
      padding: var(--space-sm) var(--space-md);
      margin-bottom: var(--space-md);
    }

    .cd-scoring-banner {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: var(--radius-sm);
      font-size: 0.875rem;
      line-height: 1.4;
      margin-bottom: var(--space-md);
      border: 1px solid transparent;
    }
    .cd-scoring-banner[data-severity="green"] {
      color: #15803d;
      background: rgba(22, 163, 74, 0.08);
      border-color: rgba(22, 163, 74, 0.3);
    }
    .cd-scoring-banner[data-severity="yellow"] {
      color: #b45309;
      background: rgba(217, 119, 6, 0.08);
      border-color: rgba(217, 119, 6, 0.4);
    }
    .cd-scoring-banner[data-severity="red"] {
      color: #b91c1c;
      background: rgba(220, 38, 38, 0.08);
      border-color: rgba(220, 38, 38, 0.4);
    }
    .cd-scoring-banner-icon {
      font-size: 1rem;
      line-height: 1;
    }

    .cd-scoring-status-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-md);
    }
    @media (max-width: 720px) {
      .cd-scoring-status-grid {
        grid-template-columns: 1fr;
      }
    }

    .cd-scoring-card-w4 {
      background: var(--bg-secondary, #f9fafb);
      border: 1px solid var(--border-default, #e5e7eb);
      border-radius: var(--radius-sm);
      padding: var(--space-md);
    }
    .cd-scoring-card-title {
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--text-secondary);
      margin: 0 0 var(--space-sm);
    }

    /* ── Indicator 2: sparkline ───────────────────── */
    .cd-scoring-card-trend { display: flex; flex-direction: column; }
    .cd-scoring-trend-summary {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin-bottom: 8px;
    }
    .cd-scoring-trend-value {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--text-primary);
      letter-spacing: 0.01em;
    }
    .cd-scoring-trend-label {
      font-size: 0.75rem;
      color: var(--text-tertiary);
    }
    .cd-scoring-trend-target {
      margin-left: auto;
      font-size: 0.75rem;
      color: #15803d;
    }
    .cd-scoring-sparkline {
      width: 100%;
      height: 60px;
      display: block;
      background: var(--bg-primary, #fff);
      border: 1px solid var(--border-default);
      border-radius: 4px;
    }
    .cd-scoring-sparkline-line {
      fill: none;
      stroke: #4a7fc4;
      stroke-width: 1.5;
      stroke-linejoin: round;
      stroke-linecap: round;
      vector-effect: non-scaling-stroke;
    }
    .cd-scoring-sparkline-target {
      stroke: #15803d;
      stroke-width: 0.6;
      stroke-dasharray: 1.5,1.5;
      vector-effect: non-scaling-stroke;
      opacity: 0.7;
    }
    .cd-scoring-sparkline-dot {
      fill: #4a7fc4;
    }
    .cd-scoring-sparkline-dot-today {
      fill: #c0392b;
      stroke: #fff;
      stroke-width: 0.6;
      vector-effect: non-scaling-stroke;
    }
    .cd-scoring-sparkline-empty {
      font-size: 4px;
      fill: var(--text-tertiary);
    }
    .cd-scoring-trend-legend {
      display: flex;
      justify-content: space-between;
      font-size: 0.6875rem;
      color: var(--text-tertiary);
      margin-top: 4px;
    }

    /* ── Indicator 3: ladder ─────────────────────── */
    .cd-scoring-card-ladder { display: flex; flex-direction: column; }
    .cd-scoring-ladder {
      display: flex;
      gap: 4px;
      margin: var(--space-sm) 0;
      align-items: stretch;
    }
    .cd-scoring-ladder-step {
      flex: 1 1 0;
      min-width: 0;
      padding: 8px 6px;
      border-radius: var(--radius-sm);
      background: var(--bg-tertiary, #f3f4f6);
      border: 1px solid var(--border-default, #e5e7eb);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      font-size: 0.75rem;
      color: var(--text-secondary);
      transition: background 150ms;
    }
    .cd-scoring-ladder-step.is-past {
      background: rgba(74, 127, 196, 0.10);
      border-color: rgba(74, 127, 196, 0.3);
      color: #2563eb;
    }
    .cd-scoring-ladder-step.is-current {
      background: rgba(217, 119, 6, 0.15);
      border-color: rgba(217, 119, 6, 0.5);
      color: #b45309;
      font-weight: 700;
    }
    .cd-scoring-ladder-step.is-floor {
      border-color: rgba(220, 38, 38, 0.45);
      border-style: solid;
      border-width: 2px;
      color: #b91c1c;
    }
    .cd-scoring-ladder-step.is-floor.is-current {
      background: rgba(220, 38, 38, 0.10);
    }
    .cd-scoring-ladder-value {
      font-size: 1rem;
      font-weight: 700;
    }
    .cd-scoring-ladder-label {
      font-size: 0.6875rem;
    }
    .cd-scoring-ladder-note {
      font-size: 0.75rem;
      color: var(--text-secondary);
      margin: 0;
    }

    /* ── Indicator 4: cost & mode ─────────────────── */
    .cd-scoring-card-cost { display: flex; flex-direction: column; }
    .cd-scoring-cost-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-md);
    }
    .cd-scoring-cost-cell {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .cd-scoring-cost-label {
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--text-tertiary);
    }
    .cd-scoring-cost-row {
      display: flex;
      align-items: baseline;
      gap: 6px;
    }
    .cd-scoring-cost-value {
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--text-primary);
    }
    .cd-scoring-cost-detail {
      font-size: 0.875rem;
      color: var(--text-primary);
      font-weight: 600;
    }
    .cd-scoring-cost-time {
      font-size: 0.75rem;
      color: var(--text-tertiary);
    }
    .cd-scoring-cost-sub {
      font-size: 0.75rem;
      color: var(--text-tertiary);
    }
    .cd-scoring-mode-pill {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-default);
      color: var(--text-secondary);
    }
    .cd-scoring-mode-pill[data-mode="batch"] {
      background: rgba(22, 163, 74, 0.12);
      color: #15803d;
      border-color: rgba(22, 163, 74, 0.4);
    }
    .cd-scoring-mode-pill[data-mode="realtime"] {
      background: rgba(217, 119, 6, 0.12);
      color: #b45309;
      border-color: rgba(217, 119, 6, 0.4);
    }
    .cd-scoring-cost-note {
      font-size: 0.75rem;
      color: var(--text-tertiary);
      margin: var(--space-sm) 0 0;
      line-height: 1.5;
    }

    /* ── Indicator 5: pool match bars ─────────────── */
    .cd-scoring-card-pool { display: flex; flex-direction: column; }
    .cd-scoring-pool-bars {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: var(--space-sm);
    }
    .cd-scoring-pool-row {
      display: grid;
      grid-template-columns: 140px 1fr auto;
      gap: 8px;
      align-items: center;
      font-size: 0.75rem;
    }
    @media (max-width: 480px) {
      .cd-scoring-pool-row {
        grid-template-columns: 100px 1fr auto;
      }
    }
    .cd-scoring-pool-label {
      color: var(--text-secondary);
    }
    .cd-scoring-pool-bar {
      height: 8px;
      border-radius: 4px;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-default);
      overflow: hidden;
    }
    .cd-scoring-pool-bar-fill {
      height: 100%;
      transition: width 250ms;
    }
    .cd-scoring-pool-row[data-severity="good"] .cd-scoring-pool-bar-fill {
      background: #2e7d5b;
    }
    .cd-scoring-pool-row[data-severity="mid"] .cd-scoring-pool-bar-fill {
      background: #d97706;
    }
    .cd-scoring-pool-row[data-severity="low"] .cd-scoring-pool-bar-fill {
      background: #94a3b8;
    }
    .cd-scoring-pool-value {
      color: var(--text-primary);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
    .cd-scoring-pool-note {
      font-size: 0.75rem;
      color: var(--text-tertiary);
      margin: 0;
      line-height: 1.5;
    }
    .cd-scoring-pool-empty {
      font-size: 0.875rem;
      color: var(--text-tertiary);
      text-align: center;
      padding: var(--space-md);
      margin: 0;
    }

    .log-detail-cell {
      max-width: 420px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .dm-history-detail-cell {
      max-width: 300px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .target-action-btn {
      padding: 4px 10px;
      font-size: 0.75rem;
      line-height: 1.4;
    }
    .log-trace-cell {
      max-width: 260px;
      color: var(--text-secondary);
      font-size: 0.75rem;
    }
    .log-trace-cell summary {
      cursor: pointer;
      white-space: nowrap;
    }
    .log-trace-cell pre {
      max-width: 420px;
      margin: 6px 0 0;
      padding: 8px;
      overflow: auto;
      border: 1px solid var(--border-default);
      border-radius: var(--radius-sm);
      background: var(--bg-secondary);
      color: var(--text-primary);
      white-space: pre-wrap;
    }
    .log-evidence-cell {
      max-width: 160px;
      color: var(--text-secondary);
      font-size: 0.75rem;
      white-space: nowrap;
    }