*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial;margin:0;color:#111}
header{padding:24px 20px;border-bottom:1px solid #eee}
h1{margin:0 0 8px 0;font-weight:800}
.controls{display:flex;gap:12px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid #f0f0f0}
.controls input,.controls select{padding:10px 12px;border:1px solid #ddd;border-radius:8px;min-width:180px}
.toolbar{display:flex;justify-content:space-between;align-items:center;padding:8px 20px;border-bottom:1px solid #eee;gap:12px;flex-wrap:wrap}
.view-switch button{border:1px solid #ddd;background:#fff;border-radius:8px;padding:8px 12px;cursor:pointer}
.view-switch button.active{border-color:#111;font-weight:600}
.summary{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.hidden{display:none}
#list{padding:16px 20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.card{border:1px solid #e9e9e9;border-radius:12px;padding:14px;background:#fff;display:flex;flex-direction:column;gap:8px}
.card h3{margin:0;font-size:18px}
.meta{font-size:12px;color:#666;display:flex;gap:8px;flex-wrap:wrap}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.tag{font-size:12px;padding:2px 6px;border-radius:999px;border:1px solid #ddd}
.preview{font-size:13px;color:#333;margin-top:8px;line-height:1.5}
.badge{padding:2px 8px;border-radius:999px;border:1px solid #ddd;font-size:12px}
.badge.status-inbox{background:#fafafa}
.badge.status-ongoing{background:#fff7e6;border-color:#ffd591}
.badge.status-done{background:#f6ffed;border-color:#b7eb8f}
.badge.risk-low{background:#f0fff4;border-color:#b7eb8f}
.badge.risk-medium{background:#fffbe6;border-color:#ffe58f}
.badge.risk-high{background:#fff1f0;border-color:#ffa39e}
.progress{height:8px;background:#f2f2f2;border-radius:999px;overflow:hidden;margin-top:6px}
.progress > i{display:block;height:100%;width:0%;background:#111}
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px 20px}
.board .col{background:#fff;border:1px solid #eee;border-radius:12px;padding:10px}
.board .col h4{margin:0 0 8px 0}
.board .col-body{display:flex;flex-direction:column;gap:8px;min-height:80px}
.card .row{display:flex;gap:8px;align-items:center}
.card .row .spacer{flex:1}
footer{padding:16px 20px;border-top:1px solid #eee;text-align:center;margin-top:20px}
/* 同時顯示兩區時並排 */
.split #list, .split #board { display:block; }
.split { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }