:root { --ink:#17201d; --muted:#69736f; --paper:#f5f2ea; --card:#fffdfa; --green:#184f42; --mint:#d7e6dd; --amber:#e9aa4d; --red:#a53d35; --line:#d9d7cf; font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 90% -10%,#c8ddd1 0,transparent 28rem),var(--paper); }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
.shell { width:min(760px,100%); margin:auto; padding:18px 16px 100px; }
.brand { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.mark { display:flex; align-items:center; gap:9px; }
.mark:before { content:'P'; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:white; background:var(--green); font:800 16px Georgia,serif; }
.eyebrow { color:var(--green); font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
h1,h2,h3 { font-family:Georgia,'Times New Roman',serif; margin:0; line-height:1.08; }
h1 { font-size:clamp(34px,8vw,54px); max-width:650px; }
h2 { font-size:26px; }
p { line-height:1.5; }
.hero { margin-bottom:22px; }
.meta { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }
.pill { padding:7px 11px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.6); font-size:13px; font-weight:700; }
.notice { border-left:4px solid var(--amber); padding:13px 15px; background:#fff7e7; border-radius:4px 12px 12px 4px; font-size:14px; }
.notice strong { display:block; margin-bottom:3px; }
.progress-wrap { position:sticky; top:0; z-index:5; padding:10px 0; background:linear-gradient(var(--paper) 80%,transparent); }
.progress-row { display:flex; justify-content:space-between; font-size:13px; font-weight:800; margin-bottom:6px; }
.progress { height:7px; overflow:hidden; background:#deddd7; border-radius:99px; }
.progress span { display:block; height:100%; width:0; background:var(--green); transition:width .25s; }
.section-title { margin:30px 0 12px; display:flex; align-items:end; justify-content:space-between; gap:12px; }
.task { background:var(--card); border:1px solid var(--line); border-radius:16px; margin:10px 0; overflow:hidden; box-shadow:0 2px 10px #17201d08; }
.task summary { list-style:none; display:grid; grid-template-columns:30px 1fr auto; gap:10px; align-items:start; padding:16px; cursor:pointer; }
.task summary::-webkit-details-marker { display:none; }
.task-index { width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:#e9e9e3; font-size:12px; font-weight:800; }
.task.done .task-index { color:white; background:var(--green); }
.task.problem .task-index { color:white; background:var(--red); }
.task-title { font-weight:750; line-height:1.35; }
.task-help { color:var(--muted); font-size:13px; margin-top:6px; line-height:1.4; }
.status-label { color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; }
.task-body { border-top:1px solid var(--line); padding:15px; }
.choices { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.choice { padding:10px 4px; border:1px solid var(--line); border-radius:10px; background:white; font-size:13px; font-weight:800; }
.choice.active[data-status=done] { color:white; background:var(--green); border-color:var(--green); }
.choice.active[data-status=na] { background:var(--amber); border-color:var(--amber); }
.choice.active[data-status=problem] { color:white; background:var(--red); border-color:var(--red); }
label.field { display:block; margin-top:13px; font-size:12px; font-weight:800; }
input,textarea { width:100%; border:1px solid var(--line); border-radius:10px; background:white; padding:11px; margin-top:5px; color:var(--ink); }
textarea { min-height:78px; resize:vertical; }
.photo-row { display:flex; align-items:center; gap:10px; margin-top:13px; }
.photo-preview { width:64px; height:64px; border-radius:9px; object-fit:cover; border:1px solid var(--line); }
.save { width:100%; margin-top:14px; padding:12px; color:white; background:var(--green); border:0; border-radius:10px; font-weight:800; }
.save:disabled { opacity:.5; }
.finish { margin-top:30px; padding:22px; border-radius:18px; background:var(--green); color:white; }
.finish textarea { background:#ffffffed; }
.finish button { width:100%; padding:14px; border:0; border-radius:10px; background:var(--amber); color:var(--ink); font-weight:900; }
.error { color:#8f2720; font-weight:700; font-size:13px; }
.success { padding:50px 20px; text-align:center; }
.success .check { margin:0 auto 18px; width:70px; height:70px; display:grid; place-items:center; border-radius:50%; background:var(--green); color:white; font-size:32px; }
.hidden { display:none!important; }
@media (min-width:650px) { .shell { padding-top:28px; } .task summary { padding:18px; } }