Bring Nexus-style taskboard interactions to Maxi MC

public/styles.css

@@ -1,17 +1,18 @@
 :root {
   color-scheme: light;
-  --bg: #f5f7f8;
+  --bg: #f3f5f8;
   --panel: #ffffff;
-  --panel-soft: #eef3f1;
-  --text: #17201c;
-  --muted: #66736d;
-  --line: #d9e1de;
-  --accent: #256f5b;
-  --accent-strong: #174c3e;
-  --warn: #a45b14;
-  --danger: #9d2f2f;
-  --ok: #1c7a4c;
-  --shadow: 0 10px 28px rgba(23, 32, 28, 0.08);
+  --panel-soft: #eef2f7;
+  --text: #18212f;
+  --muted: #667085;
+  --line: #d9e0ea;
+  --accent: #3268d8;
+  --accent-strong: #224fa8;
+  --accent-soft: #e8efff;
+  --warn: #b7791f;
+  --danger: #b42335;
+  --ok: #14845f;
+  --shadow: 0 12px 30px rgba(24, 33, 47, 0.09);
 }
 
 * {
@@ -236,7 +237,7 @@ input:focus, textarea:focus, select:focus {
 
 .column {
   min-width: 0;
-  background: #ecf1ef;
+  background: #edf1f6;
   border: 1px solid var(--line);
   border-radius: 8px;
   padding: 10px;
@@ -263,6 +264,25 @@ input:focus, textarea:focus, select:focus {
   color: var(--text);
 }
 
+.dropzone {
+  min-height: 456px;
+  border-radius: 8px;
+  transition: background 0.16s ease, box-shadow 0.16s ease;
+}
+
+.dropzone.drag-over {
+  background: rgba(50, 104, 216, 0.08);
+  box-shadow: inset 0 0 0 2px rgba(50, 104, 216, 0.28);
+}
+
+.empty-state {
+  margin: 0;
+  padding: 32px 6px;
+  text-align: center;
+  color: var(--muted);
+  font-size: 13px;
+}
+
 .task {
   display: grid;
   gap: 10px;
@@ -272,6 +292,28 @@ input:focus, textarea:focus, select:focus {
   padding: 12px;
   margin-bottom: 10px;
   box-shadow: 0 4px 14px rgba(23, 32, 28, 0.04);
+  cursor: grab;
+  transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
+}
+
+.task:hover,
+.task:focus-visible {
+  border-color: rgba(50, 104, 216, 0.45);
+  box-shadow: 0 12px 24px rgba(24, 33, 47, 0.1);
+  outline: none;
+  transform: translateY(-1px);
+}
+
+.task.dragging {
+  opacity: 0.55;
+  cursor: grabbing;
+}
+
+.task-card-head {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .task h3 {
@@ -299,12 +341,23 @@ input:focus, textarea:focus, select:focus {
   min-height: 24px;
   padding: 3px 8px;
   border-radius: 999px;
-  background: var(--panel-soft);
+  background: var(--accent-soft);
   color: var(--accent-strong);
   font-size: 12px;
   font-weight: 750;
 }
 
+.priority-urgent .badge,
+.priority-high .badge {
+  background: #fff3d8;
+  color: #8a4f00;
+}
+
+.priority-low .badge {
+  background: #e9f8f0;
+  color: #0d6b4d;
+}
+
 .task-controls {
   display: flex;
   gap: 4px;
@@ -348,6 +401,7 @@ dialog {
   border: 1px solid var(--line);
   border-radius: 8px;
   box-shadow: var(--shadow);
+  padding: 22px;
 }
 
 dialog::backdrop {
@@ -361,6 +415,12 @@ dialog::backdrop {
   margin-top: 16px;
 }
 
+.dialog-meta {
+  min-height: 20px;
+  color: var(--muted);
+  font-size: 12px;
+}
+
 @media (max-width: 980px) {
   .app-shell {
     grid-template-columns: 1fr;