*{box-sizing:border-box;margin:0;padding:0}:root{--bg-base: #09090b;--bg-card: #18181b;--bg-elevated: #27272a;--border: #3f3f46;--border-subtle: #27272a;--text: #fafafa;--text-secondary: #a1a1aa;--text-muted: #71717a;--accent: #22c55e;--accent-dim: rgba(34, 197, 94, .15);--danger: #ef4444;--warning: #eab308;--radius: 8px;--radius-lg: 12px}html,body,#root{height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;background:var(--bg-base);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased;font-size:14px}.login-container{height:100%;display:grid;place-items:center;padding:20px}.login-box{width:100%;max-width:320px}.login-box h1{font-size:20px;font-weight:600;margin-bottom:4px}.login-box p{color:var(--text-muted);font-size:13px;margin-bottom:24px}.login-box input{width:100%;padding:10px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:14px;margin-bottom:12px;outline:none;transition:border-color .15s}.login-box input:focus{border-color:var(--accent)}.login-box button{width:100%;padding:10px;background:var(--accent);border:none;border-radius:var(--radius);color:#000;font-weight:600;font-size:14px;cursor:pointer;transition:opacity .15s}.login-box button:hover{opacity:.9}.app{height:100%;display:flex;flex-direction:column;overflow:hidden}header{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border-subtle);background:var(--bg-base)}header h1{font-size:15px;font-weight:600;display:flex;align-items:center;gap:6px}.header-actions{display:flex;align-items:center;gap:8px}.status-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}.status-dot.offline{background:var(--text-muted);box-shadow:none}.icon-btn{width:32px;height:32px;display:grid;place-items:center;background:transparent;border:1px solid var(--border);border-radius:var(--radius);color:var(--text-secondary);font-size:16px;cursor:pointer;transition:all .15s}.icon-btn:hover{background:var(--bg-elevated);color:var(--text);border-color:var(--text-muted)}.icon-btn.spin{animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.add-btn{height:32px;padding:0 12px;display:flex;align-items:center;gap:4px;background:var(--accent);border:none;border-radius:var(--radius);color:#000;font-size:13px;font-weight:600;cursor:pointer;transition:opacity .15s}.add-btn:hover{opacity:.9}.board{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border-subtle);overflow:hidden}.column{background:var(--bg-base);display:flex;flex-direction:column;overflow:hidden;transition:background .2s}.column.drag-over{background:#22c55e0d}.column.drag-over .column-head h2{color:var(--accent)}.column-head{flex-shrink:0;padding:12px 12px 8px;display:flex;align-items:center;justify-content:space-between}.column-head h2{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted)}.column-head .count{font-size:11px;color:var(--text-muted);background:var(--bg-elevated);padding:2px 6px;border-radius:4px}.column-body{flex:1;overflow-y:auto;padding:0 8px 8px}.column-body::-webkit-scrollbar{width:4px}.column-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.task{background:var(--bg-card);border:1px solid transparent;border-radius:var(--radius);padding:10px 12px;margin-bottom:6px;cursor:pointer;transition:all .15s;position:relative}.task:hover{border-color:var(--border);background:var(--bg-elevated)}.task.active{border-color:var(--accent);background:var(--accent-dim)}.task.dragging{opacity:.4;transform:scale(.98);border-style:dashed}.task[draggable=true]{cursor:grab}.task[draggable=true]:active{cursor:grabbing}.task:before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 2px 2px 0;background:var(--task-priority)}.task h3{font-size:13px;font-weight:500;margin-left:8px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.task-meta{margin-top:6px;margin-left:8px;font-size:11px;color:var(--text-muted);display:flex;align-items:center;gap:6px}.task-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--text-muted)}.empty-state{padding:24px 12px;text-align:center;color:var(--text-muted);font-size:12px}.drop-zone{padding:24px 12px;text-align:center;color:var(--accent);font-size:12px;font-weight:500;border:2px dashed var(--accent);border-radius:var(--radius);background:var(--accent-dim);margin-bottom:6px;animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.7}50%{opacity:1}}.panel-overlay{position:fixed;inset:0;background:#0009;z-index:100;animation:fadeIn .15s}@keyframes fadeIn{0%{opacity:0}}.panel{position:fixed;right:0;top:0;bottom:0;width:400px;max-width:100%;background:var(--bg-card);border-left:1px solid var(--border);z-index:101;display:flex;flex-direction:column;animation:slideIn .2s ease-out}@keyframes slideIn{0%{transform:translate(100%)}}.panel-header{flex-shrink:0;padding:16px;border-bottom:1px solid var(--border-subtle);display:flex;align-items:flex-start;gap:12px}.panel-header .close{width:28px;height:28px;display:grid;place-items:center;background:transparent;border:none;color:var(--text-muted);font-size:20px;cursor:pointer;border-radius:var(--radius);transition:all .15s;flex-shrink:0}.panel-header .close:hover{background:var(--bg-elevated);color:var(--text)}.panel-title{flex:1;min-width:0}.panel-title h2{font-size:16px;font-weight:600;line-height:1.4;margin-bottom:4px}.panel-title p{font-size:13px;color:var(--text-secondary);line-height:1.5}.panel-title p:empty:before{content:"No description";color:var(--text-muted);font-style:italic}.panel-controls{flex-shrink:0;padding:12px 16px;display:flex;gap:8px;border-bottom:1px solid var(--border-subtle)}.panel-controls select{flex:1;padding:8px 10px;background:var(--bg-base);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:13px;cursor:pointer;outline:none}.panel-controls select:focus{border-color:var(--accent)}.panel-body{flex:1;overflow-y:auto;padding:16px}.panel-body::-webkit-scrollbar{width:4px}.panel-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.comments-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:12px}.comment{background:var(--bg-base);border-radius:var(--radius);padding:10px 12px;margin-bottom:8px}.comment-head{display:flex;justify-content:space-between;margin-bottom:4px;font-size:11px}.comment-head .author{font-weight:600;color:var(--accent)}.comment-head .time{color:var(--text-muted)}.comment p{font-size:13px;color:var(--text-secondary);line-height:1.5}.comment-form{margin-top:12px}.comment-form textarea{width:100%;padding:10px 12px;background:var(--bg-base);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:13px;font-family:inherit;resize:none;outline:none;min-height:60px;transition:border-color .15s}.comment-form textarea:focus{border-color:var(--accent)}.comment-form button{margin-top:8px;padding:8px 16px;background:var(--accent);border:none;border-radius:var(--radius);color:#000;font-size:13px;font-weight:600;cursor:pointer;transition:opacity .15s}.comment-form button:hover{opacity:.9}.panel-footer{flex-shrink:0;padding:12px 16px;border-top:1px solid var(--border-subtle);display:flex;gap:8px}.panel-footer button{flex:1;padding:10px;border-radius:var(--radius);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s}.btn-edit{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text)}.btn-edit:hover{border-color:var(--text-muted)}.btn-delete{background:transparent;border:1px solid var(--danger);color:var(--danger)}.btn-delete:hover{background:var(--danger);color:#fff}.modal-overlay{position:fixed;inset:0;background:#000000b3;display:grid;place-items:center;padding:20px;z-index:200;animation:fadeIn .15s}.modal{width:100%;max-width:380px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;animation:scaleIn .2s ease-out}@keyframes scaleIn{0%{opacity:0;transform:scale(.96)}}.modal h2{font-size:16px;font-weight:600;margin-bottom:16px}.modal input,.modal textarea,.modal select{width:100%;padding:10px 12px;background:var(--bg-base);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:14px;font-family:inherit;outline:none;margin-bottom:10px;transition:border-color .15s}.modal input:focus,.modal textarea:focus,.modal select:focus{border-color:var(--accent)}.modal textarea{min-height:80px;resize:vertical}.modal-actions{display:flex;gap:8px;margin-top:6px}.modal-actions button{flex:1;padding:10px;border-radius:var(--radius);font-size:14px;font-weight:500;cursor:pointer;transition:all .15s}.modal-actions .cancel{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text)}.modal-actions .cancel:hover{border-color:var(--text-muted)}.modal-actions .submit{background:var(--accent);border:none;color:#000}.modal-actions .submit:hover{opacity:.9}@media(max-width:900px){.board{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.board{grid-template-columns:1fr}header h1 span:last-child{display:none}.panel{width:100%}}