:root{
  --bg:#F1F4F3;
  --surface:#FFFFFF;
  --border:#E2E5E4;
  --text:#12121A;
  --muted:#6B6F76;
  --primary:#17A566;
  --primary-dark:#0F6B3A;
  --danger:#C41172;
  --warn:#A8760A;
  --radius:14px;
  --shadow:0 4px 18px rgba(18,18,26,0.07);
  --shadow-hover:0 10px 28px rgba(18,18,26,0.13);
}
:root[data-theme="dark"]{
  --bg:#0E1013;
  --surface:#181B1F;
  --border:#2A2E33;
  --text:#F2F3F5;
  --muted:#8B9096;
  --primary:#2ED888;
  --primary-dark:#1FA868;
  --danger:#FF4FA6;
  --warn:#F0B429;
  --shadow:0 4px 18px rgba(0,0,0,0.35);
  --shadow-hover:0 10px 30px rgba(0,0,0,0.5);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{ color-scheme:light; }
html[data-theme-root="dark"]{ color-scheme:dark; }
body{
  font-family:'Segoe UI', system-ui, sans-serif;
  background:
    radial-gradient(circle at 10% 0%, rgba(23,165,102,0.08), transparent 40%),
    radial-gradient(circle at 90% 10%, rgba(196,17,114,0.06), transparent 40%),
    var(--bg);
  color:var(--text);
  padding:32px 20px 80px;
  min-height:100vh;
  transition:background .3s, color .3s;
}
.app{ max-width:1000px; margin:0 auto; position:relative; z-index:1; }

#confetti{ position:fixed; inset:0; pointer-events:none; z-index:50; }

.app-header{ text-align:center; margin-bottom:28px; animation:fade-down .5s ease; }
.header-row{
  display:flex; align-items:center; justify-content:center; gap:12px; position:relative;
}
.app-header h1{ font-size:2.2rem; font-weight:800; letter-spacing:-0.01em; }
.app-header h1 span{
  background:linear-gradient(90deg, var(--primary), var(--primary-dark));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.theme-toggle{
  position:absolute; right:0;
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--border); background:var(--surface);
  cursor:pointer; font-size:1rem;
  transition:transform .2s, border-color .2s;
}
.theme-toggle:hover{ transform:scale(1.08) rotate(-10deg); border-color:var(--primary); }
.subtitle{ color:var(--muted); margin-top:6px; font-size:0.95rem; }

@keyframes fade-down{ from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:translateY(0);} }

/* STATS */
.stats{ display:flex; gap:14px; justify-content:center; margin-bottom:16px; flex-wrap:wrap; }
.stat-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:14px 26px; text-align:center; min-width:100px;
  transition:transform .25s ease, box-shadow .25s ease, background .3s;
}
.stat-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); }
.stat-num{ display:block; font-size:1.7rem; font-weight:800; color:var(--primary); transition:color .3s; }
.stat-label{ font-size:0.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; }

.stat-progress{ display:flex; flex-direction:column; align-items:center; gap:4px; min-width:110px; }
.progress-ring-wrap{ position:relative; width:64px; height:64px; }
.progress-ring{ width:64px; height:64px; transform:rotate(-90deg); }
.progress-ring-bg{ fill:none; stroke:var(--border); stroke-width:6; }
.progress-ring-fill{
  fill:none; stroke:var(--primary); stroke-width:6; stroke-linecap:round;
  stroke-dasharray:169.6; stroke-dashoffset:169.6;
  transition:stroke-dashoffset .6s cubic-bezier(.4,1.4,.6,1), stroke .3s;
}
.progress-ring-text{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:0.85rem; font-weight:700; color:var(--text);
}

.progress-bar-track{ height:8px; border-radius:6px; background:var(--border); overflow:hidden; margin-bottom:26px; }
.progress-bar-fill{
  height:100%; width:0%; border-radius:6px;
  background:linear-gradient(90deg, var(--primary), var(--primary-dark));
  transition:width .6s cubic-bezier(.4,1.4,.6,1);
}

/* FORM */
.task-form{ display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.task-form input[type="text"]{
  flex:1; min-width:200px; padding:12px 14px;
  border:1px solid var(--border); border-radius:var(--radius);
  font-size:0.95rem; background:var(--surface); color:var(--text);
  transition:border-color .2s, box-shadow .2s;
}
.task-form input[type="date"]{
  padding:12px 10px; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface); color:var(--text); font-size:0.85rem;
}
.task-form input:focus{
  outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(23,165,102,0.15);
}
.task-form select{
  padding:12px 14px; border:1px solid var(--border);
  border-radius:var(--radius); background:var(--surface); color:var(--text); font-size:0.9rem;
}
.task-form button{
  padding:12px 22px; border:none; border-radius:var(--radius);
  background:var(--primary); color:#06170E; font-weight:700;
  cursor:pointer; transition:background .2s, transform .15s, box-shadow .2s;
}
.task-form button:hover{ background:var(--primary-dark); color:#fff; transform:translateY(-2px); box-shadow:0 8px 20px rgba(23,165,102,0.35); }
.task-form button:active{ transform:translateY(0) scale(0.97); }

/* TOOLBAR: search + sort */
.toolbar{ display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.search-wrap{
  flex:1; min-width:200px; position:relative; display:flex; align-items:center;
}
.search-icon{ position:absolute; left:12px; font-size:0.85rem; opacity:0.6; }
#searchInput{
  width:100%; padding:10px 12px 10px 34px; border:1px solid var(--border);
  border-radius:var(--radius); background:var(--surface); color:var(--text); font-size:0.9rem;
}
#searchInput:focus{ outline:none; border-color:var(--primary); }
#sortSelect{
  padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface); color:var(--text); font-size:0.85rem;
}

/* FILTERS */
.filters{ display:flex; gap:8px; margin-bottom:24px; flex-wrap:wrap; align-items:center; }
.filter-btn{
  padding:7px 16px; border-radius:20px; border:1px solid var(--border);
  background:var(--surface); color:var(--muted); font-size:0.85rem;
  cursor:pointer; transition:all .2s;
}
.filter-btn.active{ border-color:var(--primary); color:#fff; background:var(--primary); }
.filter-btn:hover{ border-color:var(--primary); color:var(--primary); }
.filter-btn.active:hover{ color:#fff; }
.clear-btn{
  margin-left:auto; background:none; border:none; color:var(--danger);
  font-size:0.85rem; cursor:pointer; text-decoration:underline; transition:opacity .2s;
}
.clear-btn:hover{ opacity:0.7; }

/* BOARD */
.board{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.column{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:14px; min-height:220px;
  box-shadow:var(--shadow); transition:box-shadow .2s, background .3s;
}
.column.drag-over{ box-shadow:0 0 0 2px var(--primary) inset, var(--shadow); }
.column h2{
  font-size:0.82rem; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--muted); margin-bottom:12px; display:flex; align-items:center; justify-content:space-between;
}
.col-count{
  background:var(--bg); border:1px solid var(--border); color:var(--text);
  font-size:0.72rem; font-weight:700; padding:1px 8px; border-radius:10px;
}
.task-list{ display:flex; flex-direction:column; gap:10px; min-height:70px; }

/* TASK CARD */
.task-card{
  background:var(--bg); border:1px solid var(--border); border-radius:10px;
  padding:11px 13px; cursor:grab;
  display:flex; flex-direction:column; gap:8px;
  transition:box-shadow .2s, transform .2s, opacity .25s, background .3s;
  animation:card-in .3s ease;
}
.task-card.removing{ opacity:0; transform:translateX(24px) scale(0.95); }
@keyframes card-in{ from{ opacity:0; transform:translateY(8px) scale(0.97); } to{ opacity:1; transform:translateY(0) scale(1); } }
.task-card:hover{ box-shadow:var(--shadow-hover); transform:translateY(-2px); }
.task-card.dragging{ opacity:0.4; transform:scale(0.97); }
.task-card-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.task-text{
  font-size:0.92rem; word-break:break-word; transition:color .3s;
  outline:none; border-radius:4px; padding:1px 3px; margin:-1px -3px;
}
.task-text[contenteditable="true"]{ background:var(--surface); box-shadow:0 0 0 2px var(--primary); }
.task-card.completed{ background:color-mix(in srgb, var(--primary) 10%, var(--bg)); }
.task-card.completed .task-text{ text-decoration:line-through; color:var(--muted); }
.task-meta-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.task-actions{ display:flex; gap:6px; }
.task-actions button{
  background:none; border:none; cursor:pointer; font-size:0.95rem;
  color:var(--muted); padding:2px; border-radius:6px;
  transition:color .2s, transform .15s, background .2s;
}
.task-actions button:hover{ color:var(--primary); background:rgba(23,165,102,0.12); transform:scale(1.1); }
.task-actions button.del-btn:hover{ color:var(--danger); background:rgba(196,17,114,0.12); }
.priority-badge{
  align-self:flex-start; font-size:0.68rem; padding:2px 8px;
  border-radius:10px; font-weight:700; text-transform:uppercase;
}
.priority-low{ background:#E6F4EA; color:#178A4C; }
.priority-medium{ background:#FDF3DC; color:#A8760A; }
.priority-high{ background:#FCE4EC; color:#C41172; }
:root[data-theme="dark"] .priority-low{ background:rgba(46,216,136,0.15); color:#2ED888; }
:root[data-theme="dark"] .priority-medium{ background:rgba(240,180,41,0.15); color:#F0B429; }
:root[data-theme="dark"] .priority-high{ background:rgba(255,79,166,0.15); color:#FF4FA6; }

.due-badge{
  font-size:0.68rem; padding:2px 8px; border-radius:10px; font-weight:600;
  color:var(--muted); background:var(--surface); border:1px solid var(--border);
}
.due-badge.overdue{ color:var(--danger); border-color:var(--danger); background:rgba(196,17,114,0.08); }

.empty-state{ text-align:center; color:var(--muted); margin-top:30px; font-size:0.9rem; }
.column-empty{ text-align:center; color:var(--muted); font-size:0.78rem; padding:16px 6px; border:1px dashed var(--border); border-radius:8px; }

/* TOAST */
.toast{
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--surface); color:var(--text); border:1px solid var(--border);
  padding:12px 18px; border-radius:10px; box-shadow:var(--shadow-hover);
  display:flex; align-items:center; gap:14px; font-size:0.88rem;
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;
  z-index:60;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.toast-undo{
  background:none; border:none; color:var(--primary); font-weight:700; cursor:pointer;
}

@media(max-width:720px){
  .board{ grid-template-columns:1fr; }
  .stats{ gap:10px; }
  .stat-card{ padding:12px 18px; }
}