:root{ --border:#ddd; --muted:#666; }
body{ margin:0; font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial; background:#fafafa; }
.container{ max-width:1100px; margin:0 auto; padding:16px; }
.card{ background:white; border:1px solid var(--border); border-radius:12px; padding:12px; }
input, select{ padding:10px; border:1px solid #ccc; border-radius:10px; }
button{ padding:10px 12px; border:1px solid #999; background:#f7f7f7; border-radius:10px; cursor:pointer; }
button:hover{ background:#f0f0f0; }
label{ font-size:12px; color:var(--muted); }
.row{ display:flex; gap:10px; }
.wrap{ flex-wrap:wrap; }
.topbar{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.topbar-right{ display:flex; gap:10px; align-items:center; }
.muted{ color:var(--muted); }
.err{ color:crimson; }
.bold{ font-weight:700; }
.table{ width:100%; border-collapse:collapse; }
.table th,.table td{ text-align:left; padding:6px 4px; border-top:1px solid #f0f0f0; font-size:14px; }
.badge{ display:inline-block; padding:2px 8px; border:1px solid #ccc; border-radius:999px; font-size:12px; }
.sticky{
  position: sticky;
  bottom: 0;
  margin-top: 16px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: white;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  z-index: 999;
}
.task{ border:1px solid #eee; border-radius:12px; padding:10px; margin-bottom:10px; cursor:pointer;}
.task.active{ outline:3px solid #999; }