*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #F8FAFC;--surface: #FFFFFF;--surface-raised: #F1F5F9;--card: #FFFFFF;--card-hover: #F8FAFC;--border: #E2E8F0;--accent: #6366F1;--accent-hover: #4F46E5;--text: #0F172A;--text-muted: #64748B;--danger: #DC2626;--danger-hover: #B91C1C;--people: #6366F1;--projects: #0D9488;--plans: #D97706;--shadow-modal: 0 24px 80px rgba(0, 0, 0, .18);--radius: 8px;--radius-lg: 12px}@media (prefers-color-scheme: dark){:root{--bg: #0F172A;--surface: #1E293B;--surface-raised: #273549;--card: #263045;--card-hover: #2D3A53;--border: #334155;--accent: #818CF8;--accent-hover: #A5B4FC;--text: #F1F5F9;--text-muted: #94A3B8;--danger: #F87171;--danger-hover: #FCA5A5;--people: #818CF8;--projects: #2DD4BF;--plans: #FCD34D;--shadow-modal: 0 24px 80px rgba(0, 0, 0, .6)}}[data-theme=light]{--bg: #F8FAFC;--surface: #FFFFFF;--surface-raised: #F1F5F9;--card: #FFFFFF;--card-hover: #F8FAFC;--border: #E2E8F0;--accent: #6366F1;--accent-hover: #4F46E5;--text: #0F172A;--text-muted: #64748B;--danger: #DC2626;--danger-hover: #B91C1C;--people: #6366F1;--projects: #0D9488;--plans: #D97706;--shadow-modal: 0 24px 80px rgba(0, 0, 0, .18)}[data-theme=dark]{--bg: #0F172A;--surface: #1E293B;--surface-raised: #273549;--card: #263045;--card-hover: #2D3A53;--border: #334155;--accent: #818CF8;--accent-hover: #A5B4FC;--text: #F1F5F9;--text-muted: #94A3B8;--danger: #F87171;--danger-hover: #FCA5A5;--people: #818CF8;--projects: #2DD4BF;--plans: #FCD34D;--shadow-modal: 0 24px 80px rgba(0, 0, 0, .6)}html,body{height:100%;overflow:hidden}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:14px;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}button:focus-visible,.task-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}textarea,input{font:inherit;color:inherit;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:8px 10px;width:100%;transition:border-color .15s}textarea:focus,input:focus{outline:none;border-color:var(--accent)}textarea{resize:vertical;min-height:72px}#app{height:100dvh}.layout{display:flex;flex-direction:column;height:100dvh;overflow:hidden}.board-container{display:grid;grid-template-columns:1fr 1fr 1fr;flex:1;overflow:hidden;gap:0}.board-column{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--border)}.board-column:last-child{border-right:none}.tab-bar{display:none}@media (max-width: 768px){.board-container{grid-template-columns:1fr;overflow:hidden}.board-column{display:none;border-right:none}.board-column.active{display:flex}.tab-bar{display:flex;flex-shrink:0;background:var(--surface);border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom,0)}}.column-header{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 12px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0}.column-title{font-size:15px;font-weight:700;letter-spacing:.03em;text-transform:uppercase}.board-column.people .column-title{color:var(--people)}.board-column.projects .column-title{color:var(--projects)}.board-column.plans .column-title{color:var(--plans)}.column-content{flex:1;overflow-y:auto;padding:12px 12px 0;display:flex;flex-direction:column;gap:8px}.column-content::-webkit-scrollbar{width:4px}.column-content::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.group{background:var(--surface-raised);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);flex-shrink:0}.group-pinned{border-color:var(--accent)}.group-header{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 8px 12px;border-bottom:1px solid var(--border);cursor:pointer;-webkit-user-select:none;user-select:none}.group.collapsed .group-header{border-bottom:none}.group-collapse-icon{font-size:9px;color:var(--text-muted);margin-right:6px;flex-shrink:0}.group-name{font-weight:600;font-size:13px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;flex:1}.group-header-actions{display:flex;align-items:center;gap:2px}.btn-icon-sm{font-size:14px;opacity:0;transition:opacity .12s,background .12s,color .12s}.group-header:hover .btn-icon-sm{opacity:1}.group-tasks{display:flex;flex-direction:column;gap:1px;padding:4px}.task-card{background:var(--card);border-radius:var(--radius);padding:8px 12px 8px 8px;cursor:pointer;display:flex;flex-direction:row;align-items:flex-start;gap:8px;transition:background .12s}.task-card:hover{background:var(--card-hover)}.group[draggable=true]{cursor:grab}.group[draggable=true]:active{cursor:grabbing}.group.dragging{opacity:.4}.group.drag-above{border-top:2px solid var(--accent);margin-top:-2px}.group.drag-below{border-bottom:2px solid var(--accent);margin-bottom:-2px}.task-body{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.btn-done{flex-shrink:0;width:18px;height:18px;border-radius:50%;border:2px solid var(--border);margin-top:2px;transition:border-color .15s,background .15s;position:relative}.btn-done:hover{border-color:var(--accent)}.btn-done.is-done{background:var(--accent);border-color:var(--accent)}.btn-done.is-done:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 10 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l3 3 5-6' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat}.btn-snooze,.btn-datepick{flex-shrink:0;font-size:14px;line-height:1;opacity:0;transition:opacity .12s;align-self:center}.task-card:hover .btn-snooze,.task-card:hover .btn-datepick{opacity:.6}.btn-snooze:hover,.btn-datepick:hover{opacity:1!important}.date-picker-wrap{position:relative;flex-shrink:0;align-self:center}.hidden-date-input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.task-done .task-title{text-decoration:line-through;color:var(--text-muted)}.task-done .task-notes,.task-done .task-tags{opacity:.5}.task-title{font-size:14px;line-height:1.4}.task-notes{font-size:12px;color:var(--text-muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.task-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}.task-tag{font-size:11px;padding:2px 6px;border-radius:4px;font-weight:500;display:inline-flex;align-items:center;gap:3px}.task-tag svg,.btn-icon svg,.btn-done svg,.btn-snooze svg,.btn-datepick svg,.btn-order svg,.btn-collapse-all svg,.group-collapse-icon svg,.tab-icon svg{display:block;flex-shrink:0}.tag-person{background:color-mix(in srgb,var(--people) 20%,transparent);color:var(--people)}.tag-project{background:color-mix(in srgb,var(--projects) 20%,transparent);color:var(--projects)}.tag-date{background:color-mix(in srgb,var(--text-muted) 15%,transparent);color:var(--text-muted)}.tag-date.today{background:color-mix(in srgb,var(--plans) 20%,transparent);color:var(--plans)}.tag-date.overdue{background:color-mix(in srgb,var(--danger) 20%,transparent);color:var(--danger)}.tag-recur{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}.plans-overdue{color:var(--danger)}.date-subsection{display:flex;flex-direction:column;gap:1px}.date-subsection-label{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;padding:6px 8px 2px}.empty-state{font-size:13px;color:var(--text-muted);padding:16px 4px;text-align:center}.btn-icon{width:28px;height:28px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:18px;color:var(--text-muted);transition:background .12s,color .12s;line-height:1}.column-header .btn-icon{height:auto;width:auto;padding:0 4px}.column-header-actions{display:flex;align-items:center;gap:2px}.btn-collapse-all{font-size:10px;opacity:.5}.btn-collapse-all:hover{opacity:1}.btn-icon:hover{background:var(--card);color:var(--text)}.btn-add-group{width:100%;text-align:left;padding:10px 4px;color:var(--text-muted);font-size:13px;border-radius:var(--radius);transition:color .12s;margin-bottom:8px}.btn-add-group:hover{color:var(--text)}.btn-add-header{width:auto;padding:4px 10px;margin-bottom:0;font-size:12px;border:1px solid var(--border);border-radius:var(--radius)}.tab-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 4px;gap:3px;color:var(--text-muted);transition:color .12s;-webkit-tap-highlight-color:transparent}.tab-btn.active{color:var(--accent)}.tab-icon{font-size:20px;line-height:1}.tab-label{font-size:11px;font-weight:500}dialog{border:none;border-radius:var(--radius-lg);background:var(--surface-raised);color:var(--text);padding:0;width:min(480px,94vw);max-height:90dvh;box-shadow:var(--shadow-modal);margin:auto}dialog::backdrop{background:#000000a6;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 14px;border-bottom:1px solid var(--border)}.modal-header h3{font-size:15px;font-weight:600}.modal-close{font-size:22px;line-height:1}.modal-body{padding:16px;display:flex;flex-direction:column;gap:12px;overflow-y:auto}.setting-row{display:flex;align-items:center;justify-content:flex-start;gap:8px;font-size:14px;cursor:pointer}.setting-row input[type=checkbox]{width:auto;padding:0;flex-shrink:0}.setting-order{display:flex;flex-direction:column;gap:4px;margin-top:4px}.setting-order-row{display:flex;align-items:center;justify-content:space-between;font-size:14px;padding:4px 0}.setting-order-btns{display:flex;gap:4px}.btn-order{width:28px;height:28px;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center}.btn-order:hover:not(:disabled){background:var(--hover)}.btn-order:disabled{opacity:.3;cursor:default}.field{display:flex;flex-direction:column;gap:5px}.field-label{font-size:12px;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}.field-highlight .field-label{color:var(--accent)}.field-highlight input{border-color:var(--accent)}.date-shortcuts{display:flex;gap:6px;margin-top:-4px}.btn-date-shortcut{padding:4px 10px;font-size:12px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);color:var(--text-muted);cursor:pointer;transition:border-color .12s,color .12s}.btn-date-shortcut:hover,.btn-date-shortcut.btn-shortcut-active{border-color:var(--accent);color:var(--text)}.btn-date-shortcut.btn-shortcut-active{background:color-mix(in srgb,var(--accent) 15%,transparent)}.recurrence-options,.theme-options{display:flex;flex-wrap:wrap;gap:6px}.modal-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--border);gap:8px}.btn-primary{background:var(--accent);color:#fff;padding:8px 20px;border-radius:var(--radius);font-weight:600;font-size:14px;transition:background .12s}.btn-primary:hover{background:var(--accent-hover)}.btn-danger{color:var(--danger);font-size:13px;padding:8px 4px;transition:color .12s}.btn-danger:hover{color:var(--danger-hover)}.person-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px 8px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);min-height:36px;cursor:text}.field-highlight .person-chips{border-color:var(--accent)}.person-chip{display:inline-flex;align-items:center;gap:4px;background:color-mix(in srgb,var(--people) 20%,transparent);color:var(--people);font-size:13px;padding:2px 6px 2px 8px;border-radius:4px;font-weight:500}.btn-remove-chip{font-size:15px;line-height:1;color:var(--people);opacity:.6;padding:0 1px;transition:opacity .12s}.btn-remove-chip:hover{opacity:1}.person-chip-input{border:none;background:transparent;outline:none;font-size:14px;color:var(--text);flex:1;min-width:120px;padding:0}.toast{position:fixed;bottom:80px;left:50%;transform:translate(-50%);background:var(--danger);color:#fff;padding:8px 20px;border-radius:var(--radius);font-size:13px;font-weight:500;z-index:9999;animation:toast-in .2s ease-out}@keyframes toast-in{0%{opacity:0;transform:translate(-50%) translateY(8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}