/* Teams トーンに馴染むニュートラル + Task Relay アクセント #0FB9D7（バッジ/リンクのみ） */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Segoe UI", "Yu Gothic UI", Meiryo, sans-serif; font-size: 14px; color: #242424; background: #f5f5f5; }
@media (prefers-color-scheme: dark) {
    body { color: #eee; background: #1f1f1f; }
    .row { background: #2d2d2d; }
    .bar { background: #2d2d2d; }
}
.bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #fff; border-bottom: 1px solid rgba(128,128,128,.25); position: sticky; top: 0; }
.bar-title { font-weight: 600; font-size: 15px; }
.badge { background: #0FB9D7; color: #fff; border-radius: 10px; padding: 1px 8px; font-size: 12px; }
.toggle { margin-left: auto; font-size: 12px; display: flex; align-items: center; gap: 4px; }
.toggle.hidden { display: none; }
.refresh { margin-left: 8px; border: none; background: transparent; color: #0FB9D7; font-size: 16px; cursor: pointer; }
.list { padding: 8px 14px; display: flex; flex-direction: column; gap: 6px; }
.row { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid rgba(128,128,128,.2); border-radius: 6px; padding: 8px 12px; }
.row.completing { opacity: .5; }
.due { min-width: 58px; text-align: center; font-size: 12px; color: #666; border: 1px solid rgba(128,128,128,.3); border-radius: 4px; padding: 2px 4px; }
.due_over { color: #c4314b; border-color: #c4314b; font-weight: 600; }
.due_today { color: #b96b00; border-color: #b96b00; font-weight: 600; }
.body { flex: 1; min-width: 0; }
.title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta { font-size: 12px; color: #888; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec { color: #0FB9D7; text-decoration: none; margin-left: 6px; }
.done { border: none; background: #0FB9D7; color: #fff; border-radius: 4px; padding: 5px 12px; cursor: pointer; }
.done:disabled { opacity: .6; cursor: default; }
.waiting { font-size: 12px; color: #888; white-space: nowrap; }
.empty, .status { color: #888; text-align: center; padding: 12px; }