@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Syne:wght@700;800&display=swap";:root{--bg:#09090b;--surface:#111114;--surface-2:#18181c;--border:#ffffff0f;--border-light:#ffffff1f;--text:#fafafa;--muted:#71717a;--muted-2:#52525b;--amber:#f59e0b;--amber-light:#fbbf24;--amber-dim:#f59e0b1f;--amber-glow:#f59e0b40;--green:#10b981;--green-dim:#10b9811f;--red:#ef4444;--red-dim:#ef44441f}*,:before,:after{box-sizing:border-box}body{background-color:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;min-height:100vh;margin:0;font-family:Inter,system-ui,sans-serif}body:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(80vw 60vh at 10% 20%,#f59e0b12 0%,#0000 60%),radial-gradient(60vw 50vh at 90% 80%,#10b9810f 0%,#0000 55%);position:fixed;inset:0}#root{z-index:1;position:relative}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:10px}.app{max-width:1060px;margin:0 auto;padding:3.5rem 1.5rem 5rem}.header{border-bottom:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:4rem;padding-bottom:2rem;display:flex}.brand{align-items:center;gap:1rem;display:flex}.brand-icon{background:var(--amber);width:44px;height:44px;box-shadow:0 0 30px var(--amber-glow);border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.brand-icon svg{color:#000}h1{letter-spacing:-.04em;color:var(--text);margin:0;font-family:Syne,sans-serif;font-size:2.2rem;font-weight:800}.tagline{color:var(--muted);margin:.25rem 0 0;font-size:.9rem;font-weight:400}.stats-row{align-items:center;gap:2rem;display:flex}.stat{text-align:right}.stat-num{letter-spacing:-.04em;font-size:2rem;font-weight:700;line-height:1;display:block}.stat-label{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-size:.8rem;font-weight:500}.stat-divider{background:var(--border-light);width:1px;height:40px}.add-section{margin-bottom:3rem}.add-form{background:var(--surface);border:1px solid var(--border-light);border-radius:16px;align-items:center;gap:.75rem;padding:.5rem .5rem .5rem 1.25rem;transition:border-color .25s,box-shadow .25s;display:flex}.add-form:focus-within{border-color:var(--amber);box-shadow:0 0 0 4px var(--amber-dim), 0 8px 30px #0000004d}.add-input{color:var(--text);background:0 0;border:none;outline:none;flex:1;font-family:inherit;font-size:1rem}.add-input::placeholder{color:var(--muted-2)}.add-btn{background:var(--amber);color:#000;cursor:pointer;white-space:nowrap;border:none;border-radius:10px;align-items:center;gap:.5rem;padding:.7rem 1.5rem;font-family:inherit;font-size:.95rem;font-weight:700;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex}.add-btn:hover:not(:disabled){background:var(--amber-light);box-shadow:0 6px 20px var(--amber-glow);transform:translateY(-1px)}.add-btn:disabled{color:#ffffff4d;cursor:not-allowed;background:#ffffff1a}.add-btn--loading{cursor:wait;background:#f59e0bb3}.spin{animation:.75s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.board{grid-template-columns:1fr 1fr;gap:1.5rem;display:grid}@media (width<=700px){.board{grid-template-columns:1fr}.stats-row{display:none}h1{font-size:1.75rem}}.column{background:var(--surface);border:1px solid var(--border);border-radius:24px;flex-direction:column;display:flex;overflow:hidden}.col-head{border-bottom:1px solid var(--border);align-items:center;gap:.75rem;padding:1.5rem 1.5rem 1rem;display:flex}.col-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px}.col-todo .col-dot{background:var(--amber);box-shadow:0 0 8px var(--amber-glow)}.col-done .col-dot{background:var(--green);box-shadow:0 0 8px #10b98166}.col-title{letter-spacing:-.01em;flex:1;font-size:1rem;font-weight:700}.col-badge{background:var(--surface-2);border:1px solid var(--border-light);color:var(--muted);border-radius:8px;padding:.2rem .65rem;font-size:.8rem;font-weight:600}.col-body{flex-direction:column;flex:1;gap:.6rem;min-height:360px;padding:1rem;display:flex}.task-card{background:var(--surface-2);border:1px solid var(--border);cursor:default;border-radius:14px;align-items:center;gap:.75rem;padding:1rem 1rem 1rem 1.25rem;transition:border-color .2s,transform .2s,box-shadow .2s;display:flex;position:relative}.task-card:hover{border-color:var(--border-light);z-index:1;transform:translateY(-2px);box-shadow:0 6px 24px #00000040}.task-card:before{content:"";background:var(--amber);opacity:.7;border-radius:4px;width:3px;transition:opacity .2s,height .2s;position:absolute;top:20%;bottom:20%;left:0}.task-card:hover:before{opacity:1;top:10%;bottom:10%}.col-done .task-card:before{background:var(--green)}.task-check{color:var(--muted-2);flex-shrink:0;transition:color .2s}.col-done .task-card .task-check{color:var(--green)}.task-title{color:var(--text);flex:1;font-size:.97rem;font-weight:500;line-height:1.5;transition:color .2s}.col-done .task-card .task-title{color:var(--muted);text-decoration:line-through}.task-actions{opacity:0;gap:.4rem;transition:opacity .2s;display:flex}.task-card:hover .task-actions{opacity:1}@media (width<=700px){.task-actions{opacity:1}}.icon-btn{cursor:pointer;width:32px;height:32px;color:var(--muted);background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;transition:background .15s,transform .15s,color .15s;display:flex}.icon-btn:hover{transform:scale(1.1)}.icon-btn.move:hover{background:var(--amber-dim);color:var(--amber)}.col-done .icon-btn.move:hover{background:var(--green-dim);color:var(--green)}.icon-btn.del:hover{background:var(--red-dim);color:var(--red)}.empty{color:var(--muted-2);border:1.5px dashed var(--border-light);text-align:center;border-radius:16px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:1rem;margin:.5rem;padding:2rem;display:flex}.empty svg{opacity:.4}.empty span{font-size:.9rem;font-weight:500}.loading{text-align:center;color:var(--muted);letter-spacing:.05em;padding:5rem;font-size:1rem;font-weight:500;animation:1.5s infinite blink}@keyframes blink{0%,to{opacity:.4}50%{opacity:1}}.error-banner{background:var(--red-dim);color:#fca5a5;border:1px solid #ef444433;border-radius:12px;margin-bottom:2rem;padding:.875rem 1.25rem;font-size:.9rem}
