:root{
  --bg: #0b0c14;
  --panel:#0f1020;
  --muted:#a3adc2;
  --text:#e6e9f2;
  --primary:#7c3aed;
  --primary-2:#06b6d4;
  --accent:#22c55e;
  --danger:#ef4444;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
  --glass: rgba(255,255,255,.04);
  --glass-2: rgba(255,255,255,.08);
  --nav-h: 64px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background: radial-gradient(1200px 800px at 10% -10%, rgba(124,58,237,.25), transparent 50%),
              radial-gradient(800px 600px at 110% 10%, rgba(6,182,212,.18), transparent 40%),
              var(--bg);
  color:var(--text); overflow:hidden;
}
.app{display:grid; grid-template-columns: 300px 1fr; height:100vh}
@supports (height: 100dvh){
  .app{ height: 100dvh }
}
.sidebar{background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.0)); padding:20px; border-right:1px solid rgba(255,255,255,.06); backdrop-filter: blur(10px)}
.main{display:flex; flex-direction:column}
.brand{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.brand .logo{width:38px; height:38px; filter: drop-shadow(0 6px 12px rgba(124,58,237,.35))}
.brand h1{font-size:20px; margin:0}
.subtitle{margin:0; color:var(--muted); font-size:12px}
.quick-actions{display:flex; gap:8px; margin:12px 0}
button{appearance:none; border:0; padding:10px 12px; border-radius:12px; background:var(--glass); color:var(--text); cursor:pointer; box-shadow: var(--shadow); transition: .18s ease transform, .18s ease background}
button:hover{transform: translateY(-1px); background:var(--glass-2)}
button.primary{background: linear-gradient(135deg, var(--primary), var(--primary-2)); color:white}
button.ghost{background:transparent; border:1px solid rgba(255,255,255,.12); box-shadow:none}
button.small{padding:8px 10px; border-radius:10px; font-size:12px}
button.danger{background: linear-gradient(135deg, #f43f5e, #ef4444); color:white}
.filters{display:flex; flex-direction:column; gap:6px; margin:18px 0}
.filter{justify-content:space-between; display:flex; align-items:center}
.filter.active{outline:2px solid rgba(124,58,237,.6)}
.count{opacity:.7; background:rgba(255,255,255,.08); padding:2px 8px; border-radius:999px; font-size:12px}
.tags{margin-top:18px}
.section-title{font-weight:600; letter-spacing:.2px; opacity:.8; margin-bottom:8px}
.tag-list{display:flex; flex-wrap:wrap; gap:8px}
.tag-chip{padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); font-size:12px; cursor:pointer}
.topbar{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.06); background:rgba(0,0,0,.15); backdrop-filter: blur(6px)}
.search{width:420px; max-width:50vw; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:var(--text); padding:12px 14px; border-radius:12px}
.board{flex:1; overflow:auto; padding:18px; -webkit-overflow-scrolling: touch}
.kanban[hidden]{display:none}
.kanban{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
.kanban .col{display:flex; flex-direction:column; gap:10px; background:var(--panel); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:10px; min-height:300px}
.kanban .col.drag-target{outline:2px dashed rgba(6,182,212,.65)}
.kanban .col-title{display:flex; align-items:center; justify-content:space-between; font-weight:700}
.kanban .k-list{display:flex; flex-direction:column; gap:10px; min-height:120px}
.k-card{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:10px; box-shadow: var(--shadow)}
.k-card .title{font-weight:600; margin-bottom:6px}
.k-card .meta{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px}
.k-card .actions{display:flex; gap:6px; flex-wrap:wrap}
.k-card .actions button{box-shadow:none; background:transparent; border:1px solid rgba(255,255,255,.12)}
.dashboard[hidden]{display:none}
.dashboard{display:flex; flex-direction:column; gap:12px}
.dash-row{background:var(--panel); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:10px; box-shadow: var(--shadow)}
#dashCanvas{width:100%; height:520px; display:block}
#statusCanvas{width:100%; height:260px; display:block}
.task-list{display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:14px; list-style:none; margin:0; padding:0}
.task{background:var(--panel); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:14px; box-shadow: var(--shadow); position:relative; overflow:hidden}
.task.dragging{opacity:.6; transform:scale(.98)}
.task .row{display:flex; align-items:center; gap:10px}
.task .title{font-weight:600}
.task .meta{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap}
.pill{font-size:11px; padding:4px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.12); opacity:.9}
.pill.low{background:rgba(34,197,94,.15); border-color:rgba(34,197,94,.35)}
.pill.medium{background:rgba(234,179,8,.15); border-color:rgba(234,179,8,.35)}
.pill.high{background:rgba(244,63,94,.15); border-color:rgba(244,63,94,.45)}
.pill.date{background:rgba(99,102,241,.12); border-color:rgba(99,102,241,.35)}
.checkbox{display:flex; align-items:center; gap:8px}
input[type="checkbox"]{width:18px; height:18px}
.task .actions{position:absolute; top:10px; right:10px; display:flex; gap:6px}
.task .actions button{box-shadow:none; background:transparent; border:1px solid rgba(255,255,255,.12)}
.task.completed{opacity:.7}
.task.completed .title{text-decoration:line-through}

.drawer{position: fixed; right: 0; top: 0; height:100%; width:min(560px, 100%); transform: translateX(100%); transition: .28s ease transform; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border-left:1px solid rgba(255,255,255,.08); backdrop-filter: blur(18px); box-shadow: -20px 0 60px rgba(0,0,0,.45); z-index: 20}
.drawer.open{transform: translateX(0)}
.task-form{display:flex; flex-direction:column; height:100%}
.form-header{display:flex; gap:10px; padding:16px; border-bottom:1px solid rgba(255,255,255,.06)}
.title-input{flex:1; font-size:18px; padding:12px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:var(--text)}
.header-actions{display:flex; gap:8px}
select, input, textarea{font:inherit}
select, input:not([type="checkbox"]){background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:var(--text); padding:10px 12px; border-radius:12px}
textarea{flex:1; margin:16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:12px; resize:none; min-height:140px; padding:12px}
.subtasks{margin:0 16px 16px}
.subtask-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
.subtask-item{display:flex; align-items:center; gap:8px; padding:8px; border:1px solid rgba(255,255,255,.08); border-radius:10px; background:rgba(255,255,255,.04)}
.subtask-item input[type="text"]{flex:1; background:transparent; border:0; color:var(--text); outline:none}
.subtask-new{display:flex; gap:8px; margin-top:10px}
.form-footer{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px; border-top:1px solid rgba(255,255,255,.06)}

.toasts{position:fixed; bottom:12px; right:12px; display:flex; flex-direction:column; gap:8px; z-index:40}
.toast{background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.12); color:white; padding:10px 12px; border-radius:10px; box-shadow: var(--shadow); backdrop-filter: blur(6px)}

/* Bottom Nav (mobile) */
.bottom-nav{position:fixed; left:0; right:0; bottom:0; height:var(--nav-h); z-index:30; display:none; align-items:center; justify-content:space-around; gap:8px; padding:8px max(12px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-right)); background:rgba(10,12,20,.72); border-top:1px solid rgba(255,255,255,.08); backdrop-filter: blur(12px)}
.bottom-nav .tab{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; height:48px; border-radius:12px; background:transparent; border:1px solid rgba(255,255,255,.08); box-shadow:none; font-size:18px}
.bottom-nav .tab span{font-size:11px; opacity:.85}
.bottom-nav .tab.active, .bottom-nav .tab[aria-current="page"]{background:linear-gradient(135deg, rgba(124,58,237,.2), rgba(6,182,212,.2)); border-color:rgba(124,58,237,.45)}
.bottom-nav .fab{width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-top:-28px; background: linear-gradient(135deg, var(--primary), var(--primary-2)); color:white; font-size:22px; box-shadow: 0 10px 30px rgba(0,0,0,.45)}

@media (max-width: 980px){
  .app{grid-template-columns: 1fr}
  .sidebar{display:none}
  .kanban{grid-template-columns: 1fr}
}

/* Fancy micro-interactions */
.task::after{content:""; position:absolute; inset:0; background: radial-gradient(600px 80px at var(--mx, 50%) var(--my, -10%), rgba(124,58,237,.15), transparent 60%); pointer-events:none; transition:.2s}
.task:hover{transform: translateY(-3px)}

/* Light theme */
.light{--bg:#f4f7fb; --panel:#ffffff; --text:#0f1020; --muted:#4b5563}
.light .sidebar{background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.0));}
.light .task{border-color: rgba(0,0,0,.06)}

/* Calendar */
.calendar[hidden]{display:none}
.calendar{display:flex; flex-direction:column; gap:10px}
.cal-header{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 2px}
.cal-header .left,.cal-header .right{display:flex; gap:6px; align-items:center}
.cal-title{font-weight:700; letter-spacing:.4px}
.cal-weekdays{display:grid; grid-template-columns: repeat(7, 1fr); gap:6px; opacity:.75; font-size:12px; padding:0 2px}
.cal-weekdays > div{ text-align:center }
.cal-grid{display:grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 120px; gap:8px}
.cal-day{background:var(--panel); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:10px; display:flex; flex-direction:column; gap:6px; position:relative}
.cal-day.other{opacity:.55}
.cal-day.today{outline:2px solid rgba(124,58,237,.6)}
.cal-day.drag-target{outline:2px dashed rgba(6,182,212,.65)}
.cal-day .date{font-size:12px; opacity:.8}
.cal-day .tasks{display:flex; flex-direction:column; gap:6px; overflow:auto}
.cal-task{display:flex; align-items:center; gap:6px; font-size:12px; padding:6px 8px; border-radius:8px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); cursor:pointer}
.cal-task input[type="checkbox"]{width:14px; height:14px}
.cal-task.completed{opacity:.6; text-decoration:line-through}
.cal-task.high{border-color: rgba(244,63,94,.45); background: rgba(244,63,94,.12)}
.cal-task.medium{border-color: rgba(234,179,8,.45); background: rgba(234,179,8,.12)}
.cal-task.low{border-color: rgba(34,197,94,.45); background: rgba(34,197,94,.12)}
.cal-new{position:absolute; inset:auto 10px 10px auto;}

@media (max-width: 720px){
  .topbar{flex-direction: column; align-items: stretch; gap:10px}
  .search{width:100%; max-width:100%}
  .top-actions{display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling: touch; padding-bottom:2px}
  .top-actions button{flex:0 0 auto}
  .board{padding:12px; padding-bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom))}
  .task-list{grid-template-columns: 1fr}
  /* Kanban becomes horizontal scroll columns */
  .kanban{display:grid; grid-auto-flow: column; grid-auto-columns: 85vw; overflow-x:auto; gap:12px}
  .kanban .col{min-height: calc(100vh - 220px)}
  /* Calendar gets horizontal scroll min width */
  .calendar{overflow-x:auto}
  .cal-weekdays{min-width:720px}
  .cal-grid{grid-auto-rows: 90px; min-width:720px}
  .k-card .actions button{padding:8px 10px}
  .bottom-nav{display:flex}
}