.todo-workbench{min-height:calc(100vh - 64px);background:#f6f8fb;padding:22px;color:#111827}
.todo-shell{max-width:1540px;margin:0 auto;display:grid;grid-template-columns:200px minmax(0,1fr);gap:18px}
.todo-nav-card,.todo-overview-cards article,.todo-quick-add,.todo-list-board,.todo-side-panel section{background:#fff;border:1px solid #e6ebf2;border-radius:10px;box-shadow:0 8px 24px rgba(15,23,42,.045)}
.todo-nav-card{padding:14px;align-self:start;position:sticky;top:84px;min-height:760px}
.todo-nav-brand{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:10px;margin-bottom:18px}
.todo-nav-brand>i{width:34px;height:34px;border-radius:8px;background:#1677ff;position:relative;box-shadow:0 8px 18px rgba(22,119,255,.22)}
.todo-nav-brand>i:before{content:"";position:absolute;left:9px;top:9px;width:14px;height:14px;border:2px solid #fff;border-radius:4px}
.todo-nav-brand>i:after{content:"";position:absolute;left:12px;top:13px;width:8px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.todo-nav-title{padding:8px 8px 10px}.todo-nav-title b{display:block;font-size:17px;font-weight:750}.todo-nav-title span{font-size:12px;color:#7a8494}.todo-nav-title.subtle{padding:22px 8px 8px}
.todo-nav-card button{outline:none;width:100%;height:38px;border:0;background:transparent;border-radius:8px;display:grid;grid-template-columns:14px minmax(0,1fr) auto;align-items:center;gap:10px;padding:0 10px;cursor:pointer;color:#334155;text-align:left;font-weight:650}
.todo-nav-card button.active,.todo-nav-card button:hover{background:#eef5ff;color:#1677ff}.todo-nav-card i{width:8px;height:8px;border-radius:50%;background:#94a3b8}.todo-nav-card i.blue{background:#1677ff}.todo-nav-card i.orange{background:#f59e0b}.todo-nav-card i.green{background:#10b981}.todo-nav-card i.red{background:#ef4444}.todo-nav-card i.gray{background:#94a3b8}.todo-nav-card em{font-style:normal;color:#64748b;font-size:12px}
.todo-main-area{display:grid;gap:16px}.todo-page-head{height:52px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.todo-page-head h1{margin:0 0 5px;font-size:26px;line-height:1;font-weight:760}.todo-page-head p{margin:0;color:#667085;font-weight:650}
.todo-page-actions{display:flex;align-items:center;gap:10px}.todo-page-actions .el-input{width:300px}.todo-page-actions .el-input__wrapper{border-radius:8px}.todo-page-actions .el-button{height:36px;border-radius:8px}
.todo-overview-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.todo-overview-cards article{min-height:126px;padding:22px;display:grid;grid-template-columns:42px 1fr;gap:16px;align-items:start}.todo-overview-cards span,.todo-overview-cards small{color:#667085;font-weight:650}.todo-overview-cards b{display:block;margin:8px 0 10px;font-size:30px;line-height:1;color:#111827}.todo-overview-cards article.danger{background:#fffafa;border-color:#fecaca}.todo-overview-cards article.danger b,.todo-overview-cards article.danger small{color:#dc2626}
.todo-kpi-icon{width:42px;height:42px;border-radius:12px;background-size:100% 100%;background-position:center;background-repeat:no-repeat;display:block;box-shadow:none}
.todo-kpi-icon:before,.todo-kpi-icon:after{display:none!important}
.todo-kpi-icon.check{background-image:url('/assets/icons/todo-check.png?v=20260810140000')}
.todo-kpi-icon.clock{background-image:url('/assets/icons/todo-clock.png?v=20260810140000')}
.todo-kpi-icon.calendar{background-image:url('/assets/icons/todo-calendar.png?v=20260810140000')}
.todo-kpi-icon.chart{background-image:url('/assets/icons/todo-chart.png?v=20260810140000')}
.todo-quick-add{padding:12px}.todo-quick-add>button{width:100%;height:38px;border:1px dashed #bfd3f0;border-radius:8px;background:#f8fbff;color:#1677ff;font-weight:750;cursor:pointer}.todo-quick-form{display:grid;grid-template-columns:minmax(220px,1fr) 145px 130px 118px 126px auto auto;gap:8px}.todo-quick-form .el-input__wrapper,.todo-quick-form .el-select__wrapper{border-radius:8px}
.todo-content-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}.todo-list-board{padding:16px;min-height:590px}.todo-tabs{height:36px;display:flex;align-items:center;gap:8px;margin-bottom:14px}.todo-tabs button{height:32px;border:1px solid #dfe6ef;border-radius:8px;background:#fff;padding:0 14px;color:#475467;cursor:pointer;font-weight:650}.todo-tabs button.active{background:#eef5ff;border-color:#b8d4ff;color:#1677ff}.todo-sort{margin-left:auto;display:flex;gap:8px}.todo-sort .el-select{width:128px}
.todo-groups{display:grid;gap:14px}.todo-group header{height:36px;display:flex;align-items:center;justify-content:space-between;border-radius:8px;padding:0 14px;background:#f8fafc;color:#475467}.todo-group.overdue header{background:#fff2f2;color:#dc2626}.todo-group b{font-size:14px}.todo-group span{font-size:12px}
.todo-task-row{min-height:66px;display:grid;grid-template-columns:24px minmax(0,1fr) 90px 32px;align-items:center;gap:12px;padding:11px 12px;border:1px solid transparent;border-bottom-color:#edf1f6;background:#fff;transition:opacity .35s ease,transform .35s ease,background .2s}.todo-task-row:last-child{border-bottom-color:transparent}.todo-task-row:hover{background:#fbfdff;border-color:#e6eef8;border-radius:8px}.todo-task-row.is-overdue{background:#fffafa}.todo-task-row.is-finishing{opacity:.35;transform:translateX(8px)}
.todo-check{width:18px;height:18px;border:1.5px solid #cbd5e1;border-radius:50%;background:#fff;cursor:pointer}.todo-check:hover{border-color:#1677ff;box-shadow:0 0 0 4px #eff6ff}.todo-row-body{min-width:0;cursor:pointer}.todo-row-body b{display:block;font-size:15px;font-weight:720;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.todo-row-body p{margin:5px 0 0;color:#64748b;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.todo-row-body small{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;color:#667085}.todo-row-body a{color:#1677ff;text-decoration:none}
.todo-cat,.todo-priority{display:inline-flex;align-items:center;height:22px;border-radius:999px;padding:0 8px;font-size:12px;font-style:normal;font-weight:750}.todo-cat{background:#f1f5f9;color:#475569}.todo-priority{justify-content:center}.todo-priority.p1{background:#fff1f2;color:#dc2626;border:1px solid #fecaca}.todo-priority.p2{background:#fff7ed;color:#c2410c;border:1px solid #fed7aa}.todo-priority.p3{background:#eff6ff;color:#1677ff;border:1px solid #bfdbfe}.todo-priority.p4{background:#f3f4f6;color:#64748b;border:1px solid #e5e7eb}.todo-more{border:0;background:transparent;color:#94a3b8;cursor:pointer;font-weight:900}
.todo-side-panel{display:grid;gap:16px}.todo-side-panel section{padding:16px}.todo-side-panel header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.todo-side-panel header b{font-size:15px}.todo-side-panel header span{color:#1677ff;font-weight:800}.todo-calendar-card header button{width:26px;height:26px;border:1px solid #e5e7eb;border-radius:7px;background:#fff;color:#64748b;cursor:pointer}.todo-calendar-week,.todo-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.todo-calendar-week span{height:24px;text-align:center;font-size:12px;color:#94a3b8}.todo-calendar-grid button{outline:none;height:30px;border:0;border-radius:7px;background:transparent;color:#334155;cursor:pointer;position:relative}.todo-calendar-grid button.muted{color:#cbd5e1}.todo-calendar-grid button.today{background:#1677ff;color:#fff}.todo-calendar-grid button.selected:not(.today){background:#e8f1ff;color:#1677ff;font-weight:800}.todo-calendar-grid button.has:after{content:"";position:absolute;right:5px;top:5px;width:6px;height:6px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 2px #fff}.todo-calendar-grid button.today.has:after{background:#ef4444;box-shadow:0 0 0 2px #fff}.todo-calendar-grid button.has:not(.today){font-weight:750}
.todo-mini-list{display:grid;gap:8px}.todo-mini-list p{margin:0;display:grid;grid-template-columns:4px minmax(0,1fr) auto;gap:8px;align-items:center;min-height:34px;border-bottom:1px solid #f1f5f9;cursor:pointer}.todo-mini-list i{width:3px;height:14px;border-radius:999px;background:#f59e0b}.todo-mini-list span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#374151;font-size:13px}.todo-mini-list em{font-style:normal;color:#64748b;font-size:12px}.todo-empty-mini{height:54px;display:grid;place-items:center;color:#94a3b8;font-size:13px}
.todo-ring-line{display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:center}.todo-ring-line strong{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#1677ff calc(var(--p,37)*1%),#edf2f7 0);box-shadow:inset 0 0 0 12px #fff;color:#111827}.todo-ring-line p{margin:0 0 8px;color:#475467}.todo-progress{height:9px;background:#edf2f7;border-radius:999px;overflow:hidden}.todo-progress i{display:block;height:100%;border-radius:999px;background:#1677ff}.todo-progress-text{margin:12px 0 0;color:#64748b;font-size:13px}
.todo-undo{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:3000;background:#111827;color:#fff;border-radius:999px;padding:10px 16px;box-shadow:0 16px 40px rgba(17,24,39,.25)}.todo-undo button{border:0;background:transparent;color:#93c5fd;font-weight:800;margin-left:10px;cursor:pointer}
.todo-drawer .el-drawer__header,.todo-filter-drawer .el-drawer__header{margin-bottom:0;padding:20px 22px;border-bottom:1px solid #eef2f7}.todo-drawer .el-drawer__body,.todo-filter-drawer .el-drawer__body{padding:18px 22px}.todo-drawer .el-drawer__footer,.todo-filter-drawer .el-drawer__footer{border-top:1px solid #eef2f7;padding:14px 22px}.todo-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.todo-form-inline{display:grid;grid-template-columns:130px minmax(0,1fr);gap:10px;width:100%}.priority-radio{width:100%;display:grid;grid-template-columns:repeat(4,1fr)}.priority-radio .el-radio-button__inner{width:100%}
@media(max-width:1200px){.todo-shell{grid-template-columns:1fr}.todo-nav-card{position:static;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.todo-nav-title{display:none}.todo-content-grid{grid-template-columns:1fr}.todo-overview-cards{grid-template-columns:repeat(2,1fr)}.todo-quick-form{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.todo-workbench{padding:16px}.todo-page-head,.todo-page-actions{height:auto;align-items:flex-start;flex-direction:column}.todo-page-actions .el-input{width:100%}.todo-overview-cards,.todo-nav-card,.todo-quick-form,.todo-form-grid{grid-template-columns:1fr}.todo-task-row{grid-template-columns:24px minmax(0,1fr);align-items:start}.todo-priority,.todo-more{grid-column:2}}

.todo-nav-card button:focus,.todo-nav-card button:focus-visible,.todo-calendar-grid button:focus,.todo-calendar-grid button:focus-visible{outline:none;box-shadow:none}