:root {
  --bg: #f6f7f9; --card: #fff; --text: #1d2330; --muted: #5d6677; --line: #dde1e8; --accent: #4338ca; --accent-soft: #eef0ff;
  --ok: #15803d; --ok-soft: #e7f5ec; --warn: #92400e; --warn-soft: #fdf1e3; --bad: #b91c1c; --bad-soft: #fdecec;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); }
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 20px; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2; }
.brand { font-weight: 700; color: var(--text); text-decoration: none; }
.brand span { color: var(--accent); font-weight: 600; font-size: 12px; border: 1px solid var(--accent); border-radius: 6px; padding: 1px 6px; margin-left: 4px; }
main { max-width: 980px; margin: 0 auto; padding: 20px 16px 80px; }
h1 { font-size: 22px; margin: 4px 0 12px; } h2 { font-size: 17px; margin: 24px 0 8px; } h3 { font-size: 15px; margin: 0 0 6px; }
.muted { color: var(--muted); } .small { font-size: 13px; }
button, .btn { font: inherit; border: 1px solid var(--line); background: var(--card); color: var(--text); border-radius: 8px; padding: 7px 12px; cursor: pointer; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.ok { border-color: var(--ok); color: var(--ok); } button.bad { border-color: var(--bad); color: var(--bad); }
button:disabled { opacity: .5; cursor: default; }
input, select, textarea { font: inherit; width: 100%; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text); }
textarea { min-height: 70px; resize: vertical; }
label { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 3px; }
.checks { display: flex; flex-wrap: wrap; gap: 6px 14px; } .checks label { display: flex; gap: 6px; align-items: center; margin: 0; color: var(--text); font-size: 14px; }
.checks input { width: auto; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 10px 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.account-card { cursor: pointer; } .account-card:hover { border-color: var(--accent); }
.bar { height: 8px; background: var(--line); border-radius: 99px; overflow: hidden; margin: 8px 0 4px; } .bar > i { display: block; height: 100%; background: var(--accent); }
.badge { display: inline-block; font-size: 12px; border-radius: 99px; padding: 1px 8px; margin-right: 6px; background: var(--line); color: var(--text); }
.src-asana { background: #e0f2fe; color: #075985; } .src-ia { background: var(--warn-soft); color: var(--warn); } .src-cp { background: var(--accent-soft); color: var(--accent); }
.st-a_confirmer { background: var(--warn-soft); color: var(--warn); } .st-confirme, .st-corrige { background: var(--ok-soft); color: var(--ok); }
.st-invalide { background: var(--bad-soft); color: var(--bad); } .st-inconnu { background: #eceff3; color: var(--muted); }
.fields { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 8px 0; font-size: 14px; } .fields dt { color: var(--muted); } .fields dd { margin: 0; white-space: pre-wrap; }
.quote { border-left: 3px solid var(--line); padding: 4px 10px; margin: 8px 0; color: var(--muted); font-size: 13px; white-space: pre-wrap; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 16px; padding: 0; list-style: none; }
.steps button { font-size: 13px; padding: 5px 10px; } .steps button.current { background: var(--accent); color: #fff; border-color: var(--accent); }
.steps button.done::before { content: "✓ "; }
.pick { max-height: 420px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.pick label { display: flex; gap: 10px; align-items: center; margin: 0; padding: 8px 12px; border-bottom: 1px solid var(--line); color: var(--text); font-size: 14px; }
.pick input { width: auto; } .pick .meta { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.sticky-nav { position: fixed; left: 0; right: 0; bottom: 0; background: var(--card); border-top: 1px solid var(--line); padding: 10px 16px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.notice { background: var(--accent-soft); border: 1px solid #c7ccff; border-radius: 10px; padding: 10px 14px; margin: 10px 0; }
.error { background: var(--bad-soft); color: var(--bad); border-radius: 10px; padding: 10px 14px; margin: 10px 0; }
@media (max-width: 600px) { .fields { grid-template-columns: 1fr; } .fields dt { margin-top: 6px; } }

/* Proofs attached by the CP. */
.proofs { margin-top: 10px; }
.proof-list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.proof { display: flex; flex-direction: column; gap: 2px; text-decoration: none; width: 140px; }
.proof img { width: 140px; height: 100px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.small-btn { display: inline-block; font-size: 13px; padding: 5px 10px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.visually-hidden:focus + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.readonly { padding: 8px 10px; background: #f1f3f7; border-radius: 8px; white-space: pre-wrap; }
label.busy { cursor: progress; outline: 2px solid var(--accent); }

.classify { margin-top: 10px; padding: 10px 12px; background: var(--accent-soft); border-radius: 10px; }
.classify .actions { margin-top: 6px; }

.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.card-head h3 { margin: 0 0 6px; }
button.remove { font-size: 12px; padding: 3px 8px; color: var(--muted); }
button.remove:hover, button.remove:focus-visible { color: var(--bad); border-color: var(--bad); }

/* Selected action and card status: the CP sees at once what was decided on each item. */
button.active { color: #fff; font-weight: 600; }
button.ok.active { background: var(--ok); border-color: var(--ok); }
button.bad.active { background: var(--bad); border-color: var(--bad); }
button.neutral.active { background: var(--accent); border-color: var(--accent); }
button.unknown.active { background: #6b7280; border-color: #6b7280; }
button.busy { cursor: progress; opacity: 1; outline: 2px solid var(--accent); outline-offset: 1px; }
.card.is-a_confirmer { border-left: 4px solid #d97706; }
.card.is-confirme, .card.is-corrige { border-left: 4px solid var(--ok); }
.card.is-invalide { border-left: 4px solid var(--bad); opacity: .8; }
.card.is-inconnu { border-left: 4px solid #9aa3b2; }