:root{--bg-primary: #0a0a0a;--bg-secondary: #141414;--bg-tertiary: #1a1a1a;--bg-hover: #202020;--text-primary: #e8e8e8;--text-secondary: #a0a0a0;--text-muted: #606060;--border: #282828;--accent: #00d4ff;--priority-high: #ff4757;--priority-medium: #ffa502;--priority-low: #2ed573;--shadow: rgba(0, 0, 0, .5)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:IBM Plex Mono,monospace;background:var(--bg-primary);color:var(--text-primary);overflow-x:hidden}.app{display:flex;height:100vh}.sidebar{width:280px;background:var(--bg-secondary);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:2rem 0}.sidebar-header{padding:0 1.5rem 1.5rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}.sidebar-header h1{font-family:Syne,sans-serif;font-size:1.5rem;font-weight:700;letter-spacing:-.02em}.archive-toggle{background:transparent;border:none;font-size:1.2rem;cursor:pointer;padding:.25rem;opacity:.6;transition:opacity .2s}.archive-toggle:hover{opacity:1}.projects-list{flex:1;overflow-y:auto;padding:1rem 0}.project-item{padding:.75rem 1.5rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background .2s;border-left:3px solid transparent}.project-item:hover{background:var(--bg-hover)}.project-item.active{background:var(--bg-tertiary);border-left-color:var(--accent)}.project-info{display:flex;align-items:center;gap:.75rem;flex:1}.project-color-picker{width:20px;height:20px;border:none;border-radius:4px;cursor:pointer;padding:0}.project-name{font-size:.9rem;font-weight:500}.archive-btn{background:transparent;border:none;font-size:1rem;cursor:pointer;opacity:0;transition:opacity .2s;padding:.25rem}.project-item:hover .archive-btn{opacity:.6}.archive-btn:hover{opacity:1!important}.new-project-section{padding:1rem 1.5rem;border-top:1px solid var(--border)}.new-project-btn{width:100%;padding:.75rem;background:var(--bg-tertiary);border:1px dashed var(--border);color:var(--text-secondary);cursor:pointer;border-radius:6px;font-family:IBM Plex Mono,monospace;font-size:.85rem;transition:all .2s}.new-project-btn:hover{background:var(--bg-hover);border-color:var(--accent);color:var(--text-primary)}.new-project-form{display:flex;flex-direction:column;gap:.5rem}.new-project-form input[type=text]{padding:.5rem;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-primary);border-radius:4px;font-family:IBM Plex Mono,monospace;font-size:.85rem}.new-project-form input[type=color]{height:32px;border:none;border-radius:4px;cursor:pointer}.new-project-actions{display:flex;gap:.5rem}.new-project-actions button{flex:1;padding:.5rem;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-primary);cursor:pointer;border-radius:4px;font-family:IBM Plex Mono,monospace;font-size:.8rem;transition:all .2s}.new-project-actions button:hover{background:var(--accent);border-color:var(--accent);color:var(--bg-primary)}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden}.project-header{padding:2rem 2.5rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:var(--bg-secondary)}.project-title-section{display:flex;align-items:center;gap:1rem}.project-color-indicator{width:8px;height:40px;border-radius:4px}.project-header h2{font-family:Syne,sans-serif;font-size:2rem;font-weight:700;letter-spacing:-.03em}.stats{display:flex;gap:2rem}.stat{font-size:.85rem;color:var(--text-secondary);font-weight:500}.board{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;padding:2rem 2.5rem;overflow-y:auto;height:100%}.column{display:flex;flex-direction:column;min-height:0}.column-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:2px solid var(--border)}.column-header h3{font-family:Syne,sans-serif;font-size:1.1rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary)}.add-task-btn{width:32px;height:32px;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;border-radius:6px;font-size:1.2rem;display:flex;align-items:center;justify-content:center;transition:all .2s}.add-task-btn:hover{background:var(--accent);border-color:var(--accent);color:var(--bg-primary);transform:rotate(90deg)}.task-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.75rem;padding:.25rem;min-height:100px;transition:background .2s;border-radius:8px}.task-list.dragging-over{background:var(--bg-secondary)}.task-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;padding:1rem;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}.task-card:before{content:"";position:absolute;left:0;top:0;width:4px;height:100%;background:var(--priority-medium);transition:width .2s}.task-card.priority-high:before{background:var(--priority-high)}.task-card.priority-low:before{background:var(--priority-low)}.task-card:hover{background:var(--bg-tertiary);border-color:var(--accent);transform:translate(4px)}.task-card:hover:before{width:6px}.task-card.dragging{opacity:.5;transform:rotate(2deg)}.task-card.done{padding:.6rem 1rem;opacity:.6}.task-card.done h4{font-size:.85rem;text-decoration:line-through;color:var(--text-secondary)}.task-card h4{font-family:Syne,sans-serif;font-size:.95rem;font-weight:600;color:var(--text-primary);margin-left:.5rem}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;width:90%;max-width:600px;max-height:85vh;overflow:hidden;display:flex;flex-direction:column;animation:slideUp .3s;box-shadow:0 20px 60px var(--shadow)}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-header{padding:1.5rem 2rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:var(--bg-tertiary)}.modal-header h2{font-family:Syne,sans-serif;font-size:1.5rem;font-weight:700;letter-spacing:-.02em}.modal-title-input{font-family:Syne,sans-serif;font-size:1.5rem;font-weight:700;background:transparent;border:none;color:var(--text-primary);outline:none;width:100%;padding:0}.modal-close{background:transparent;border:none;color:var(--text-secondary);font-size:2rem;cursor:pointer;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s;line-height:1}.modal-close:hover{background:var(--bg-hover);color:var(--text-primary)}.modal-content{padding:2rem;overflow-y:auto;flex:1}.modal-field{margin-bottom:1.5rem}.modal-field label{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-secondary);margin-bottom:.5rem;font-weight:500}.modal-field select{width:100%;padding:.75rem;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-primary);border-radius:6px;font-family:IBM Plex Mono,monospace;font-size:.9rem;cursor:pointer;transition:border-color .2s}.modal-field select:hover:not(:disabled){border-color:var(--accent)}.modal-field select:disabled{opacity:.6;cursor:not-allowed}.modal-field textarea{width:100%;padding:.75rem;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-primary);border-radius:6px;font-family:IBM Plex Mono,monospace;font-size:.9rem;resize:vertical;transition:border-color .2s}.modal-field textarea:focus{outline:none;border-color:var(--accent)}.description-text{color:var(--text-secondary);line-height:1.6;white-space:pre-wrap}.modal-metadata{display:flex;gap:2rem;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border)}.modal-metadata span{font-size:.75rem;color:var(--text-muted)}.modal-actions{padding:1.5rem 2rem;border-top:1px solid var(--border);display:flex;gap:1rem;background:var(--bg-tertiary)}.modal-actions button{flex:1;padding:.75rem 1.5rem;border:none;border-radius:6px;font-family:IBM Plex Mono,monospace;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s;text-transform:uppercase;letter-spacing:.05em}.btn-primary{background:var(--accent);color:var(--bg-primary)}.btn-primary:hover{background:#00b8e6;transform:translateY(-2px);box-shadow:0 4px 12px #00d4ff4d}.btn-secondary{background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-primary)}.btn-secondary:hover{background:var(--bg-hover);border-color:var(--text-secondary)}.btn-danger{background:var(--bg-secondary);border:1px solid var(--priority-high);color:var(--priority-high)}.btn-danger:hover{background:var(--priority-high);color:var(--bg-primary);transform:translateY(-2px)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}
