*{box-sizing:border-box}
:root{--bg:#0f1223;--panel:#161a33;--muted:#8b90b6;--text:#f2f3fb;--accent:#7c5cff;--accent2:#00d4ff;--ok:#2ecc71;--warn:#f1c40f;--bad:#e74c3c}
html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 800px at 10% -10%,#1c2150 0%,#0f1223 40%),radial-gradient(1000px 600px at 120% 10%,#0d2b4a 0%,#0f1223 40%),var(--bg);color:var(--text);font:15px/1.4 system-ui,Segoe UI,Roboto,Helvetica,Arial}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #1f2445;background:rgba(0,0,0,.25);backdrop-filter:blur(6px);position:sticky;top:0;z-index:10}
.brand{font-weight:800;letter-spacing:.3px}
.search-wrap{display:flex;gap:8px;align-items:center}
.search-wrap input{background:#0e1330;border:1px solid #212756;color:var(--text);padding:8px 10px;border-radius:8px;min-width:240px;outline:none}
.search-wrap button{background:#1a1f43;border:1px solid #2a3066;color:var(--text);padding:8px 12px;border-radius:8px;cursor:pointer}
.search-wrap button[aria-pressed="true"]{outline:2px solid var(--accent)}
.stats{display:flex;gap:12px;align-items:center}
.progress{width:160px;height:10px;background:#121739;border-radius:20px;overflow:hidden;border:1px solid #202553}
.progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.stat-items{display:flex;gap:10px;color:var(--muted)}
.layout{display:grid;grid-template-columns:280px 1fr;gap:12px;padding:12px}
.sidebar{background:rgba(0,0,0,.25);border:1px solid #1f2445;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:12px}
#lists{display:flex;flex-direction:column;gap:6px}
.list-item{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid #232959;border-radius:8px;background:#0e1330;cursor:pointer}
.list-item.active{outline:2px solid var(--accent)}
.list-item .dot{width:10px;height:10px;border-radius:50%}
.add-list{display:flex;gap:6px}
.calendar{margin-top:8px;border-top:1px dashed #223}
.cal-header{display:flex;align-items:center;justify-content:space-between;margin:8px 0}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-cell{padding:8px;border:1px solid #222a55;border-radius:8px;text-align:center;background:#0e1330;position:relative}
.cal-cell .dot{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:var(--accent2)}
.cal-cell.active{outline:2px solid var(--accent)}
.ghost{background:transparent;border:1px dashed #2b2f5e;color:var(--muted);padding:6px 8px;border-radius:8px;margin-top:6px}
.board{display:flex;flex-direction:column;gap:12px}
.task-form{display:grid;grid-template-columns:1.2fr repeat(2,auto) repeat(2,auto) 1fr 1fr 2fr auto;gap:8px;background:rgba(0,0,0,.25);border:1px solid #1f2445;border-radius:12px;padding:10px}
.columns{display:flex;gap:12px;overflow:auto;padding-bottom:8px}
.column{min-width:280px;background:rgba(0,0,0,.25);border:1px solid #1f2445;border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:10px}
.col-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.task{background:#0e1330;border:1px solid #212756;border-radius:12px;padding:10px;display:grid;grid-template-columns:auto 1fr auto;gap:8px}
.task.dragging{opacity:.5}
.task .left{display:flex;align-items:flex-start;gap:8px}
.task .meta{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted)}
.priority.low{background:#15321f;color:#9be7a4;border:1px solid #1f6f3a;padding:2px 6px;border-radius:999px}
.priority.medium{background:#33301a;color:#f6e7a2;border:1px solid #756a1f;padding:2px 6px;border-radius:999px}
.priority.high{background:#3a1b1b;color:#f5b5b5;border:1px solid #7a2a2a;padding:2px 6px;border-radius:999px}
.badge.overdue{background:#3a1b1b;color:#f5b5b5;border:1px solid #7a2a2a;padding:2px 6px;border-radius:999px}
.badge.soon{background:#2c2a12;color:#f3eaa6;border:1px solid #6d5f18;padding:2px 6px;border-radius:999px}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{border:1px solid #2a3066;padding:2px 6px;border-radius:999px;color:#baccff;cursor:pointer}
.title{font-weight:700}
.title[contenteditable], .desc[contenteditable]{outline:2px solid var(--accent)}
.desc{color:#cfd2ff;font-size:13px}
.task .actions{display:flex;gap:6px}
button.icon{background:#1a1f43;border:1px solid #2a3066;color:var(--text);padding:6px 8px;border-radius:8px;cursor:pointer}
.checkbox{width:18px;height:18px;border:2px solid #3a3f7a;border-radius:4px;display:grid;place-items:center}
.completed .title{text-decoration:line-through;color:#8a8fb9}
.completed{opacity:.7}
#toast{position:fixed;bottom:18px;right:18px;background:#10163a;border:1px solid #223066;color:#cfe1ff;padding:10px 14px;border-radius:10px;opacity:0;transform:translateY(8px);transition:.2s;z-index:1000}
#toast.show{opacity:1;transform:none}
@media(max-width:1000px){.layout{grid-template-columns:1fr}.task-form{grid-template-columns:1fr 1fr 1fr 1fr 1fr;grid-auto-rows:auto}.columns{flex-direction:column}}