:root {
  --bg:#FBF7EF; --card:#FFFFFF; --ink:#33382E; --muted:#6B6F63; --line:#E8E1D3;
  --green:#5C7234; --green-soft:#E7EEDC; --rose:#F6DDE2; --rose-ink:#8A3A4B;
  --sky:#DDEBF5; --sky-ink:#2F5A78; --sand:#F3E7CC; --sand-ink:#7A5A1C; --grey:#EEECE6;
  --lilac:#ECE4F5; --lilac-ink:#5B4580; --error:#A33A2C;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Inter,sans-serif; }
.wrap { max-width:880px; margin:0 auto; padding:24px 16px 150px; }
h1 { font-size:clamp(1.5rem,4vw,2.1rem); line-height:1.2; margin:0 0 10px; }
.star { color:#E6B800; }
.lead { margin:0 0 6px; }
.small { font-size:.9rem; color:var(--muted); }
.legend { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 0; padding:0; list-style:none; font-size:.85rem; }
.load { color:var(--muted); }
.load.error, .error-text { color:var(--error); }
.recovery { background:var(--rose); color:var(--rose-ink); border-radius:14px; padding:10px 14px; margin:12px 0; }
.grp { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:16px 16px 6px; margin:18px 0; }
.grp.later { background:#FDFBF6; border-style:dashed; }
.grp.general { border-color:#CFE0B5; }
.grp h2 { font-size:1.15rem; margin:0 0 6px; color:var(--green); display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.cnt { font-size:.8rem; color:var(--muted); font-weight:500; white-space:nowrap; }
.grp > ul { list-style:none; margin:0; padding:0; }
.row { display:flex; gap:12px; padding:14px 0; border-top:1px solid var(--line); }
.row:first-child { border-top:0; }
.chk { position:relative; flex:0 0 28px; padding-top:2px; cursor:pointer; }
.chk input { position:absolute; opacity:0; width:28px; height:28px; margin:0; cursor:pointer; }
.box { display:block; width:26px; height:26px; border:2px solid var(--green); border-radius:8px; background:#fff; }
.chk input:checked + .box { background:var(--green); }
.chk input:checked + .box::after { content:""; display:block; width:7px; height:13px; border:solid #fff; border-width:0 3px 3px 0; transform:translate(7px,2px) rotate(45deg); }
.chk input:focus-visible + .box { outline:3px solid #B9CC93; outline-offset:2px; }
.body { flex:1; min-width:0; }
.nom { font-weight:650; }
.line2 { display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; margin-top:3px; font-size:.88rem; }
code { font:.85rem/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; background:var(--grey); padding:2px 6px; border-radius:6px; overflow-wrap:anywhere; }
a { color:var(--green); }
.contenu { margin:5px 0 0; color:var(--muted); font-size:.92rem; white-space:pre-line; }
.badge { display:inline-block; font-size:.75rem; font-weight:600; padding:2px 8px; border-radius:999px; white-space:nowrap; }
.st-live { background:var(--green-soft); color:var(--green); }
.st-draft { background:var(--sky); color:var(--sky-ink); }
.st-new { background:var(--sand); color:var(--sand-ink); }
.conf { background:var(--rose); color:var(--rose-ink); }
.added { background:var(--lilac); color:var(--lilac-ink); }
.feedback { margin-top:10px; }
.feedback textarea { width:100%; min-height:64px; resize:vertical; font:inherit; font-size:.95rem; color:var(--ink); background:#FFFDF8; border:1px solid var(--line); border-radius:12px; padding:9px 11px; }
.feedback textarea:focus { outline:2px solid #B9CC93; border-color:#B9CC93; }
.feedback textarea[readonly] { background:#F6F9F0; }
.actions { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; margin-top:6px; }
.entry-status { font-size:.82rem; color:var(--muted); }
.entry-status.ok { color:var(--green); }
.entry-status.error { color:var(--error); font-weight:600; }
button { font:inherit; font-weight:600; border-radius:999px; padding:9px 16px; cursor:pointer; border:2px solid var(--green); }
button:disabled { opacity:.5; cursor:default; }
.primary { background:var(--green); color:#fff; }
.ghost { background:transparent; color:var(--green); }
button.small { padding:5px 12px; font-size:.85rem; }
button.link { border:0; background:none; padding:2px 0; color:var(--green); text-decoration:underline; font-weight:500; font-size:.85rem; }
.record.active { background:var(--rose); border-color:var(--rose-ink); color:var(--rose-ink); }
.history { margin-top:8px; border-left:3px solid var(--line); padding:4px 0 4px 12px; font-size:.88rem; }
.history ol { margin:0; padding:0; list-style:none; }
.history li { padding:6px 0; border-top:1px dashed var(--line); }
.history li:first-child { border-top:0; }
.history .when { color:var(--muted); font-size:.8rem; }
.history .txt { white-space:pre-wrap; margin:2px 0; }
.history .empty { color:var(--muted); font-style:italic; }
.dictations { margin-top:6px; font-size:.82rem; color:var(--muted); }
.dictations audio { height:32px; vertical-align:middle; max-width:100%; }
.add form { display:grid; gap:10px; padding-bottom:12px; }
.add label { display:grid; gap:4px; font-size:.9rem; font-weight:600; }
.add input, .add select, .add textarea { font:inherit; font-weight:400; border:1px solid var(--line); border-radius:10px; padding:8px 10px; background:#FFFDF8; color:var(--ink); }
.field-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
.add label, .add input, .add select, .add textarea { min-width:0; max-width:100%; }
.form-status { font-size:.85rem; color:var(--green); }
footer { font-size:.85rem; color:var(--muted); margin-top:24px; }
.bar { position:fixed; left:0; right:0; bottom:0; background:rgba(251,247,239,.97); border-top:1px solid var(--line); backdrop-filter:blur(6px); }
.bar .in { max-width:880px; margin:0 auto; padding:10px 16px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.total { flex:1 1 160px; font-weight:600; }
.rec { flex:1 1 100%; display:flex; gap:8px; align-items:center; color:var(--rose-ink); font-weight:600; font-size:.9rem; }
.msg { width:100%; font-size:.85rem; color:var(--green); }
#recap { width:100%; min-height:160px; font:.85rem/1.4 ui-monospace,Menlo,monospace; border:1px solid var(--line); border-radius:12px; padding:10px; display:none; }
#recap.show { display:block; }
@media (max-width:520px) {
  .grp { padding:14px 12px 4px; border-radius:14px; }
  .field-row { grid-template-columns:1fr; }
  button { padding:8px 13px; }
}