:root { --ink:#14161a; --dim:#6b7280; --line:#e5e7eb; --acc:#e11d48; --ok:#059669; }
* { box-sizing:border-box; }
body { margin:0; font:15px/1.5 -apple-system,Segoe UI,Roboto,sans-serif; color:var(--ink); background:#f6f7f9; }
header { display:flex; justify-content:space-between; align-items:center; padding:14px 22px; background:#fff; border-bottom:1px solid var(--line); }
.brand { font-weight:700; letter-spacing:-.02em; }
.who { color:var(--dim); font-size:13px; }
main { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:18px; padding:22px; align-items:start; max-width:1100px; margin:0 auto; }
/* the Ditto panel takes 340px off the right, so stack well before it hurts */
@media (max-width:1180px) {
  main { grid-template-columns:minmax(0,1fr); max-width:640px; }
  .log { position:static; }
  .log ol { max-height:200px; }
}
.card { background:#fff; border:1px solid var(--line); border-radius:10px; padding:20px; }
h2 { margin:0 0 6px; font-size:20px; letter-spacing:-.01em; }
p.sub { margin:0 0 18px; color:var(--dim); }
button { font:inherit; padding:9px 14px; border-radius:8px; border:1px solid var(--line); background:#fff; cursor:pointer; }
button.primary { background:var(--ink); color:#fff; border-color:var(--ink); }
button.danger { background:var(--acc); color:#fff; border-color:var(--acc); }
button.ghost { color:var(--dim); }
button:disabled { opacity:.5; cursor:not-allowed; }
.row { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
label.opt { display:block; border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin-bottom:8px; cursor:pointer; }
label.opt:hover { border-color:#c7cbd1; }
input[type=date] { font:inherit; padding:8px; border:1px solid var(--line); border-radius:8px; }
.offer { border:2px dashed var(--acc); border-radius:10px; padding:16px; margin:14px 0; background:#fff1f2; }
.log { position:sticky; top:22px; }
.log h3 { margin:0 0 10px; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--dim); }
.log ol { margin:0; padding-left:18px; font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; max-height:50vh; overflow:auto; }
.log li b { font-weight:600; }
.hint { color:var(--dim); font-size:12px; }
.done { color:var(--ok); font-weight:600; }
dl { display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:0; }
dt { color:var(--dim); }