* { box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif; margin: 0; background: #f6f7f9; color: #111; }
.wrap { max-width: 880px; margin: 0 auto; padding: 16px; }
header h1 { margin: 0; font-size: 28px; }
.tag { color: #666; }
.card { background: #fff; border-radius: 16px; padding: 16px; margin: 16px 0; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
button { padding: 10px 14px; border: none; border-radius: 12px; cursor: pointer; font-weight: 600; }
button.primary { background: #111; color: #fff; }
button.ghost { background: #efefef; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
small, .small { color: #666; font-size: 12px; }
.list { display: grid; gap: 8px; }
.track { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 8px; border: 1px solid #eee; border-radius: 12px; }
.progress { width: 100%; height: 8px; background: #eee; border-radius: 8px; overflow: hidden; margin: 8px 0; }
.progress > i { display: block; height: 100%; width: 0%; background: #111; }
.badge { display: inline-block; background: #111; color: #fff; padding: 2px 8px; border-radius: 999px; font-size: 12px; }