.task-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 19px 21px; border: 1px solid #d7e6dd; border-radius: 12px; background: #f8fcf9; }
.task-intro h3 { margin: 0 0 5px; font-size: 18px; }
.task-intro p { max-width: 710px; margin: 0; color: var(--muted); line-height: 1.55; }
.task-grid { display: grid; gap: 12px; margin-top: 16px; }
.task-item { padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 3px 12px rgba(19, 45, 32, .035); }
.task-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.task-item h3 { margin: 0; font-size: 17px; letter-spacing: -.02em; }
.task-item .task-meta { display: flex; flex-wrap: wrap; gap: 7px; margin: 9px 0 0; color: var(--muted); font-size: 11px; }
.task-item .task-meta span { padding: 4px 7px; border: 1px solid #e3ebe6; border-radius: 100px; background: #fbfdfb; }
.task-state { background: #eef3f0; color: #456056; }
.task-state.awaiting_approval { background: #fff4d8; color: #84621a; }
.task-state.queued { background: #eef2f9; color: #365a7c; }
.task-state.completed { background: var(--green-soft); color: var(--green-strong); }
.task-state.recovery_needed, .task-state.failed { background: #fbe9e8; color: var(--danger); }
.task-item p { margin: 13px 0 0; color: var(--muted); line-height: 1.5; }
.task-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.task-actions button { padding: 8px 10px; font-size: 11px; }
.task-actions .task-secondary { border: 1px solid var(--line); background: #fff; color: var(--ink); box-shadow: none; }
.task-actions .task-secondary:hover { background: #f3f7f4; }
.task-actions .task-commit { background: #203b55; }
.task-actions .task-commit:hover { background: #172e43; }
.task-events { display: grid; gap: 8px; margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line); }
.task-event { display: grid; grid-template-columns: 126px 1fr auto; gap: 12px; padding: 9px 10px; border-radius: 8px; background: #f7faf8; font-size: 12px; }
.task-event b { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.task-event span { color: var(--muted); }
.task-event time { color: var(--muted); font-size: 11px; white-space: nowrap; }
.task-empty { padding: 32px; border: 1px dashed #c9d9ce; border-radius: 12px; color: var(--muted); text-align: center; }
.task-error { margin-top: 14px; color: var(--danger); font-weight: 700; }
.browser-task-guidance { margin: 14px 0; padding: 14px 16px; border: 1px solid #cfe8dd; border-left: 4px solid #169b74; border-radius: 12px; background: #f6fcf9; color: #28413a; font-size: 13px; }
.browser-task-guidance > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.browser-task-guidance p { margin: 8px 0; }
.browser-task-guidance ol { margin: 8px 0 0 18px; padding: 0; }
.browser-task-guidance li { margin: 4px 0; }
.browser-ready { background: #dff6e9; color: #12704f; }
.browser-waiting { background: #fff2d8; color: #8b5a0a; }
body.theme-dark .task-intro { border-color: #315541; background: #183025; }
body.theme-dark .task-item { background: #14241b; }
body.theme-dark .task-item .task-meta span, body.theme-dark .task-actions .task-secondary, body.theme-dark .task-event { border-color: var(--line); background: #112017; color: var(--ink); }
body.theme-dark .browser-task-guidance { border-color: #3c7962; background: #173228; color: #d7ecdf; }
@media (max-width: 900px) { .task-intro, .task-item-head { flex-direction: column; } .task-event { grid-template-columns: 1fr; gap: 5px; } }