.task-card { cursor:pointer; }
.task-card:focus-visible,.board-list-row:focus-visible { outline:3px solid rgba(44,118,112,.35); outline-offset:2px; }

.board-filter-panel { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin:0 0 18px; padding:14px; border:1px solid #dce7e3; border-radius:14px; background:var(--panel,#fff); box-shadow:0 10px 28px rgba(26,61,57,.07); overflow:hidden; }
.board-filter-panel[hidden] { display:none; }
.board-filter-panel label { display:grid; flex:1 1 145px; min-width:0; gap:6px; color:#637875; font-size:12px; font-weight:700; }
.board-filter-panel label:first-child { flex:1.5 1 230px; }
.board-filter-panel input,.board-filter-panel select { width:100%; min-width:0; min-height:40px; padding:8px 10px; border:1px solid #d5e2de; border-radius:9px; background:var(--panel,#fff); color:var(--ink,#0e3533); font:inherit; }
.board-filter-panel button { min-height:40px; padding:0 14px; border:1px solid #cbdcd7; border-radius:9px; background:transparent; color:var(--ink,#0e3533); font-weight:700; white-space:nowrap; }
.board-filter-panel .my-work.selected { color:#fff; border-color:#2c7670; background:#2c7670; }

.board-list-view { overflow-x:auto; }
.board-list-view .board-list-head,.board-list-view .board-list-row { min-width:840px; grid-template-columns:minmax(260px,1.7fr) minmax(90px,.6fr) minmax(100px,.7fr) minmax(230px,1.4fr) minmax(90px,.6fr); }
.board-list-row { min-height:76px; cursor:pointer; transition:background .15s ease; }
.board-list-row:hover { background:rgba(44,118,112,.055); }
.board-list-row > span { min-width:0; }
.board-list-title { display:flex; align-items:center; gap:10px; }
.board-list-title i { width:8px; height:8px; flex:0 0 auto; border-radius:50%; background:#74a49d; }
.board-list-title b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.board-list-people { display:grid; gap:4px; font-size:12px; }
.board-list-people span:first-child { color:#748783; }
.board-list-people span:last-child { color:#1e6f69; font-weight:700; }
.board-list-status { justify-self:start; padding:5px 9px; border-radius:999px; font-size:12px; font-weight:700; background:#edf2f0; }
.board-list-status.doing { color:#1f6c67; background:#e2f0ec; }
.board-list-status.review { color:#8b641d; background:#faefd7; }
.board-list-status.done { color:#397053; background:#e5f1e8; }
.board-list-due { color:#536b67; font-variant-numeric:tabular-nums; }
.board-list-empty { padding:48px 20px; text-align:center; color:#71837f; }
.board-list-empty b,.board-list-empty span { display:block; }
.board-list-empty span { margin-top:6px; font-size:13px; }

.task-detail-dialog { width:min(1080px,calc(100vw - 32px)); max-height:calc(100vh - 32px); padding:0; border:0; border-radius:18px; background:var(--panel,#fff); color:var(--ink,#0e3533); box-shadow:0 30px 90px rgba(8,39,36,.25); }
.task-detail-dialog::backdrop { background:rgba(9,32,30,.55); backdrop-filter:blur(2px); }
.task-detail-shell { min-width:0; }
.task-detail-shell > header { display:flex; justify-content:space-between; align-items:flex-start; padding:22px 24px 17px; border-bottom:1px solid #dfe9e6; }
.task-detail-shell header h2 { margin:5px 0 0; font-size:23px; }
.detail-id { color:#6e827e; font-size:12px; font-weight:800; letter-spacing:.09em; }
.task-detail-shell .close-dialog { position:static; width:38px; height:38px; border:0; border-radius:50%; background:#edf3f1; color:#345b57; font-size:24px; }
.detail-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; max-height:calc(100vh - 180px); overflow:auto; }
.detail-main { padding:22px 24px 28px; }
.detail-main > label,.detail-fields label { display:grid; gap:7px; color:#5e7470; font-size:12px; font-weight:800; }
.detail-main input,.detail-main select,.detail-main textarea { width:100%; box-sizing:border-box; padding:10px 11px; border:1px solid #d1dfdb; border-radius:9px; background:var(--panel,#fff); color:var(--ink,#0e3533); font:inherit; resize:vertical; }
.detail-main input:focus,.detail-main select:focus,.detail-main textarea:focus { outline:3px solid rgba(44,118,112,.17); border-color:#64a099; }
.detail-main .wide + .wide { margin-top:15px; }
.detail-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:18px; }
.detail-main input[readonly] { color:#627672; background:#f1f5f4; }
.detail-section { margin-top:26px; padding-top:20px; border-top:1px solid #e0e9e6; }
.detail-section h3,.activity-panel h3 { margin:0 0 13px; font-size:15px; }
.comment-list { display:grid; gap:10px; }
.comment-list article { padding:11px 13px; border-radius:10px; background:#f2f7f5; }
.comment-list article b { font-size:13px; }
.comment-list article time { margin-left:8px; color:#81918e; font-size:11px; }
.comment-list article p { margin:5px 0 0; color:#3d5652; font-size:13px; line-height:1.55; }
.empty-note { margin:0; color:#83938f; font-size:13px; }
.comment-compose { display:grid; grid-template-columns:1fr auto; gap:9px; align-items:end; margin-top:11px; }
.secondary-button { min-height:40px; padding:0 14px; border:1px solid #bad0cb; border-radius:9px; background:#e7f1ee; color:#1c6560; font-weight:800; }
.attachment-picker { display:inline-flex!important; width:auto!important; cursor:pointer; padding:9px 12px; border:1px dashed #8fb4ad; border-radius:9px; color:#1f6d67!important; background:#eff7f4; }
.attachment-picker input { position:absolute; width:1px; height:1px; opacity:0; }
.detail-section > small { margin-left:10px; color:#81918e; }
.attachment-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.attachment-list span { padding:7px 9px; border-radius:7px; color:#45605c; background:#edf2f0; font-size:12px; }
.activity-panel { padding:22px 20px; border-left:1px solid #dfe9e6; background:#f7faf9; }
.activity-list { display:grid; gap:14px; }
.activity-list article { display:grid; grid-template-columns:10px 1fr; gap:10px; }
.activity-list article i { width:8px; height:8px; margin-top:5px; border-radius:50%; background:#65a098; box-shadow:0 0 0 4px #e1efeb; }
.activity-list article b,.activity-list article time { display:block; }
.activity-list article b { font-size:12px; line-height:1.45; }
.activity-list article time { margin-top:3px; color:#879793; font-size:11px; }
.task-detail-shell > footer { display:flex; align-items:center; justify-content:flex-end; gap:9px; padding:15px 24px; border-top:1px solid #dfe9e6; background:var(--panel,#fff); }
.task-detail-shell > footer button:not(.primary-button) { min-height:40px; padding:0 15px; border:1px solid #d0ddda; border-radius:9px; background:transparent; color:inherit; }
.save-status { margin-right:auto; color:#287168; font-size:12px; font-weight:700; }
body.monochrome .board-filter-panel .my-work.selected { background:#222; border-color:#222; }

@media (max-width:1100px) { .board-filter-panel label { flex-basis:180px; } }
@media (max-width:760px) {
  .board-filter-panel label,.board-filter-panel label:first-child { flex:1 1 100%; }
  .board-filter-panel button { flex:1 1 calc(50% - 5px); }
  .detail-layout { grid-template-columns:1fr; }
  .activity-panel { border-left:0; border-top:1px solid #dfe9e6; }
  .detail-fields,.comment-compose { grid-template-columns:1fr; }
  .detail-section > small { display:block; margin:8px 0 0; }
  .task-detail-shell > footer { position:sticky; bottom:0; }
}
@media (prefers-reduced-motion:reduce) { .task-card,.board-list-row { transition:none!important; } }