:root {
  --bg:#0f1117; --surface:#1a1d27; --surface2:#21253a; --border:#2a2f45; --border2:#343a55;
  --text:#e4e8ff; --text2:#8890b0; --text3:#555f80;
  --accent:#6c63ff; --accent2:#8b83ff;
  --green:#22d3a5; --red:#ff5c7c; --amber:#ffb547; --blue:#4da6ff;
}
*{font-family:'Manrope',system-ui,sans-serif;box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:99px}
input,textarea,select{background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:10px 14px;font-size:14px;font-family:inherit;outline:none;width:100%;transition:border-color .15s}
input:focus,textarea:focus,select:focus{border-color:var(--accent)}
input::placeholder,textarea::placeholder{color:var(--text3)}
select{-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:32px}
select option{background:var(--surface2)}
label{display:block;font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}
.btn{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;border-radius:10px;padding:9px 16px;border:none;cursor:pointer;transition:all .15s;font-family:inherit;white-space:nowrap}
.btn:active{transform:scale(.96)}
.btn:disabled{opacity:.5;pointer-events:none}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent2)}
.btn-ghost{background:var(--surface2);color:var(--text2);border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--border2);color:var(--text)}
.btn-danger{background:#3d1a24;color:var(--red);border:1px solid #5a2535}
.btn-danger:hover{background:#4d2030}
.btn-sm{padding:6px 12px;font-size:12px;border-radius:8px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:18px;width:100%;max-height:90vh;display:flex;flex-direction:column;animation:mIn .2s cubic-bezier(.4,0,.2,1)}
@keyframes mIn{from{opacity:0;transform:scale(.95) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;cursor:pointer;transition:all .12s;color:var(--text2);font-size:13px;font-weight:600;border:none;background:none;width:100%}
.nav-item:hover{background:var(--surface2);color:var(--text)}
.nav-item.active{background:rgba(108,99,255,.15);color:var(--accent2)}
.task-card{transition:box-shadow .15s,transform .15s,opacity .15s;cursor:grab;user-select:none}
.task-card:active{cursor:grabbing}
.task-card.dragging{opacity:.35;transform:scale(.97)}
.task-card:hover .del-btn{opacity:1!important}
.drop-col{transition:background .12s,border-color .12s}
.drop-col.over{border-color:var(--accent)!important}
.p-low{background:#555f80}
.p-medium{background:#ffb547}
.p-high{background:#ff8c47}
.p-urgent{background:#ff5c7c;animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.type-dev{background:rgba(77,166,255,.12);color:var(--blue)}
.type-seo{background:rgba(34,211,165,.12);color:var(--green)}
.type-client{background:rgba(255,181,71,.12);color:var(--amber)}
.type-int{background:rgba(108,99,255,.12);color:var(--accent2)}
.progress-bar{height:4px;border-radius:99px;background:var(--border2);overflow:hidden}
.progress-fill{height:100%;border-radius:99px;transition:width .4s ease}
.spin{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.fade-in{animation:fadeIn .2s ease}