#sync-status { align-self: center; padding: 5px 9px; border-radius: 14px; background: rgba(255,255,255,.86); color: #249143; font-weight: 700; }
#sync-status.offline { color: #936500; background: #fff3c9; }
.task.completed { opacity: .7; }
.task.completed > strong { color: #2fab50; }
.task.completed > strong::before { content: "✓"; font-size: 18px; }
.task.completed > strong { font-size: 0; }
.record-dialog { width: min(430px, calc(100vw - 30px)); border: 0; border-radius: 16px; padding: 0; color: #111b25; box-shadow: 0 25px 70px #173a2b44; }
.record-dialog::backdrop { background: #102d235c; }
.record-dialog form { padding: 24px; }
.record-dialog header { display: flex; justify-content: space-between; align-items: flex-start; }
.record-dialog header small { color: #219b47; font-weight: 800; }
.record-dialog h2 { margin: 3px 0 18px; }
.record-dialog header button { border: 0; background: transparent; font-size: 30px; }
.record-dialog label { display: grid; gap: 7px; margin: 14px 0; font-size: 12px; font-weight: 700; }
.record-dialog input, .record-dialog select { width: 100%; border: 1px solid #e0e8e3; border-radius: 8px; padding: 12px; font: inherit; }
.record-segment { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 8px; background: #edf4ef; }
.record-segment button { border: 0; border-radius: 6px; padding: 9px; background: transparent; font-weight: 700; color: #67766e; }
.record-segment button.active { background: white; color: #188a43; box-shadow: 0 2px 8px #315b4017; }
.record-submit { width: 100%; border: 0; border-radius: 9px; padding: 13px; background: #29ad55; color: white; font-weight: 800; }
.record-error { color: #a12c2c; font-size: 12px; }
@media (max-width: 520px) { .record-dialog { width: 100vw; max-width: none; margin: auto 0 0; border-radius: 16px 16px 0 0; } }