@cccarv82/freya 3.4.1 → 3.5.0

package/cli/web-ui.css

@@ -6,54 +6,69 @@
 :root {
   --radius: 16px;
   --radius2: 12px;
-  --shadow: 0 20px 60px rgba(16, 24, 40, .08);
-  --shadow2: 0 8px 30px rgba(16, 24, 40, .04);
-  --shadow-hover: 0 12px 40px rgba(16, 24, 40, .08);
-  --ring: 0 0 0 4px rgba(37, 99, 235, .18);
-  --glass-bg: rgba(255, 255, 255, 0.4);
-  --glass-border: rgba(255, 255, 255, 0.3);
-
-  /* Warm cream palette (light-first) */
-  --bg: #fdfbf7;
-  --paper: rgba(255, 255, 255, 0.75);
-  --paper2: rgba(255, 255, 255, 0.5);
-  --line: rgba(30, 41, 59, .06);
-  --line2: rgba(30, 41, 59, .12);
-  --text: #1e293b;
-  --muted: rgba(30, 41, 59, .74);
-  --faint: rgba(30, 41, 59, .50);
-
-  --accent: #f97316;
-  --primary: #3b82f6;
-  --chip: rgba(59, 130, 246, .10);
-  --chip2: rgba(249, 115, 22, .12);
+  --radius3: 8px;
+  --shadow: 0 4px 24px rgba(0, 0, 0, .06);
+  --shadow2: 0 2px 12px rgba(0, 0, 0, .04);
+  --shadow-hover: 0 8px 32px rgba(0, 0, 0, .08);
+  --ring: 0 0 0 3px rgba(99, 102, 241, .16);
+  --glass-bg: rgba(255, 255, 255, 0.85);
+  --glass-border: rgba(0, 0, 0, .06);
+
+  /* Pastel light palette */
+  --bg: #f8f8fc;
+  --bg2: #f0f0f6;
+  --paper: #ffffff;
+  --paper2: #fafafc;
+  --line: rgba(0, 0, 0, .06);
+  --line2: rgba(0, 0, 0, .10);
+  --text: #1a1a2e;
+  --muted: #64648c;
+  --faint: #9898b0;
+
+  --accent: #e8856c;
+  --primary: #6366f1;
+  --chip: rgba(99, 102, 241, .08);
+  --chip2: rgba(232, 133, 108, .10);
+
+  /* Pastel semantic colors */
+  --pastel-green: #a8d8b9;
+  --pastel-blue: #a5b4fc;
+  --pastel-coral: #f0b4a8;
+  --pastel-gold: #f0d98c;
+  --pastel-lavender: #c4b5fd;
+  --pastel-mint: #86efac;
+  --pastel-rose: #fda4af;
+  --pastel-sky: #7dd3fc;
 
   --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
   --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   --display: 'Outfit', var(--sans);
 
   --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  --bounce: cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 [data-theme="dark"] {
-  --bg: #0f1115;
-  --paper: rgba(20, 22, 26, 0.65);
-  --paper2: rgba(30, 33, 39, 0.5);
+  --bg: #111118;
+  --bg2: #18182a;
+  --paper: #1e1e2e;
+  --paper2: #252538;
   --line: rgba(255, 255, 255, .06);
-  --line2: rgba(255, 255, 255, .12);
-  --text: #f1f5f9;
-  --muted: rgba(241, 245, 249, .70);
-  --faint: rgba(241, 245, 249, .45);
-  --chip: rgba(45, 212, 191, .15);
-  --chip2: rgba(56, 189, 248, .15);
-  --accent: #2dd4bf;
-  --primary: #38bdf8;
-
-  --glass-bg: rgba(20, 22, 26, 0.4);
-  --glass-border: rgba(255, 255, 255, 0.05);
-  --shadow: 0 20px 60px rgba(0, 0, 0, .4);
-  --shadow2: 0 8px 30px rgba(0, 0, 0, .3);
-  --shadow-hover: 0 12px 40px rgba(0, 0, 0, .5);
+  --line2: rgba(255, 255, 255, .10);
+  --text: #e8e8f0;
+  --muted: #a0a0bc;
+  --faint: #6e6e88;
+  --chip: rgba(129, 140, 248, .15);
+  --chip2: rgba(251, 146, 122, .12);
+  --accent: #fb9a82;
+  --primary: #818cf8;
+
+  --glass-bg: rgba(30, 30, 46, 0.85);
+  --glass-border: rgba(255, 255, 255, .06);
+  --shadow: 0 4px 24px rgba(0, 0, 0, .35);
+  --shadow2: 0 2px 12px rgba(0, 0, 0, .25);
+  --shadow-hover: 0 8px 32px rgba(0, 0, 0, .4);
+  --bounce: cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 * {
@@ -112,7 +127,7 @@ body {
 }
 
 [data-theme="dark"] body {
-  background: radial-gradient(800px 360px at 65% 10%, rgba(45, 212, 191, .10), transparent 55%), var(--bg);
+  background: radial-gradient(800px 360px at 65% 10%, rgba(99, 102, 241, .06), transparent 55%), var(--bg);
 }
 
 .app {
@@ -145,16 +160,6 @@ body {
   }
 }
 
-@media (max-width: 860px) {
-  .shell {
-    grid-template-columns: 1fr;
-  }
-
-  .rail {
-    display: none;
-  }
-}
-
 /* LEFT RAIL */
 .rail {
   background: var(--paper);
@@ -162,8 +167,18 @@ body {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 16px 10px;
-  gap: 14px;
+  padding: 18px 10px;
+  gap: 6px;
+}
+
+@media (max-width: 860px) {
+  .shell {
+    grid-template-columns: 1fr;
+  }
+
+  .rail {
+    display: none !important;
+  }
 }
 
 .railTop {
@@ -177,13 +192,14 @@ body {
   width: 38px;
   height: 38px;
   border-radius: 14px;
-  background: rgba(45, 212, 191, .18);
-  color: var(--text);
+  background: var(--primary);
+  color: #fff;
   display: grid;
   place-items: center;
   font-weight: 700;
   font-size: 14px;
-  border: 1px solid var(--line2);
+  border: none;
+  box-shadow: 0 2px 8px rgba(99, 102, 241, .25);
 }
 
 .railNav {
@@ -209,15 +225,19 @@ body {
 }
 
 .railBtn.active {
-  background: var(--glass-bg);
-  border-color: var(--glass-border);
+  background: var(--chip);
+  border-color: transparent;
   color: var(--primary);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 }
 
 .railBtn:hover:not(.active) {
-  background: rgba(0, 0, 0, 0.03);
+  background: var(--bg2);
   color: var(--text);
+  transform: scale(1.06);
+}
+
+.railBtn:active {
+  transform: scale(0.92);
 }
 
 [data-theme="dark"] .railBtn:hover:not(.active) {
@@ -344,7 +364,7 @@ body {
   border-radius: 8px;
   display: grid;
   place-items: center;
-  background: rgba(45, 212, 191, .18);
+  background: rgba(99, 102, 241, .10);
   border: 1px solid var(--line);
   color: var(--primary);
   font-weight: 800;
@@ -403,9 +423,9 @@ body {
 .spark {
   width: 10px;
   height: 10px;
-  border-radius: 4px;
-  background: linear-gradient(135deg, var(--accent), var(--primary));
-  box-shadow: 0 0 0 6px rgba(45, 212, 191, .10);
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--pastel-lavender), var(--primary));
+  box-shadow: 0 0 0 5px rgba(99, 102, 241, .10);
 }
 
 .chip {
@@ -430,8 +450,9 @@ body {
 .chip.clickable:hover {
   background: var(--primary);
   color: white;
+  border-color: var(--primary);
   transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
+  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
 }
 
 /* Documentation Styles */
@@ -524,9 +545,9 @@ body {
   font-size: 12px;
   padding: 7px 10px;
   border-radius: 999px;
-  border: 1px solid var(--line);
-  background: rgba(0, 0, 0, .22);
-  color: var(--faint);
+  border: 1px solid var(--line2);
+  background: var(--bg2);
+  color: var(--muted);
 }
 
 .pill {
@@ -613,9 +634,7 @@ body {
 .promptBar {
   width: 100%;
   background: var(--paper);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  border: 1px solid var(--glass-border);
+  border: 1px solid var(--line2);
   border-radius: var(--radius);
   padding: 16px;
   display: flex;
@@ -627,7 +646,7 @@ body {
 
 .promptBar:focus-within {
   box-shadow: var(--shadow-hover);
-  border-color: var(--line2);
+  border-color: var(--primary);
 }
 
 .promptMeta {
@@ -768,9 +787,9 @@ body {
 }
 
 .miniCard:hover {
-  background: linear-gradient(180deg, var(--paper), var(--paper2));
-  border-color: rgba(45, 212, 191, 0.4);
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(45, 212, 191, 0.1);
+  background: var(--paper);
+  border-color: rgba(99, 102, 241, 0.3);
+  box-shadow: var(--shadow-hover);
   transform: translateY(-2px);
 }
 
@@ -778,7 +797,7 @@ body {
   width: 30px;
   height: 30px;
   border-radius: 50%;
-  background: rgba(45, 212, 191, 0.15);
+  background: var(--chip);
   color: var(--primary);
   display: flex;
   align-items: center;
@@ -819,13 +838,19 @@ body {
 }
 
 .iconBtn {
-  border: 1px solid var(--line);
-  background: rgba(0, 0, 0, .25);
+  border: 1px solid var(--line2);
+  background: var(--bg2);
   color: var(--muted);
   border-radius: 10px;
   padding: 2px 8px;
   cursor: pointer;
   font-size: 12px;
+  transition: var(--transition);
+}
+
+.iconBtn:hover {
+  background: var(--paper);
+  color: var(--text);
 }
 
 .reportBody {
@@ -841,7 +866,7 @@ body {
   border: 1px solid var(--line);
   border-radius: 12px;
   padding: 12px;
-  background: rgba(0, 0, 0, .18);
+  background: var(--bg2);
   min-height: 120px;
   outline: none;
   white-space: pre-wrap;
@@ -928,7 +953,7 @@ h1 {
   justify-content: space-between;
   padding: 12px 12px;
   border-bottom: 1px solid var(--line);
-  background: linear-gradient(180deg, var(--paper2), var(--paper));
+  background: var(--bg2);
 }
 
 .panelHead b {
@@ -954,11 +979,7 @@ h1 {
   margin-top: 14px;
   border: 1px dashed var(--line2);
   border-radius: var(--radius);
-  background: rgba(255, 250, 242, .42);
-}
-
-[data-theme="dark"] .devDrawer {
-  background: rgba(0, 0, 0, .18);
+  background: var(--bg2);
 }
 
 .devDrawer>summary {
@@ -1001,9 +1022,8 @@ input {
   width: 100%;
   padding: 11px 14px;
   border-radius: var(--radius2);
-  border: 1px solid var(--line);
-  background: rgba(255, 255, 255, 0.4);
-  backdrop-filter: blur(4px);
+  border: 1px solid var(--line2);
+  background: var(--paper);
   color: var(--text);
   outline: none;
   transition: var(--transition);
@@ -1011,32 +1031,32 @@ input {
 }
 
 [data-theme="dark"] input {
-  background: rgba(0, 0, 0, .22);
+  background: var(--bg2);
 }
 
 input:focus {
   box-shadow: var(--ring);
-  border-color: rgba(45, 212, 191, .35);
+  border-color: var(--primary);
 }
 
 textarea {
   width: 100%;
   padding: 10px 12px;
   border-radius: 12px;
-  border: 1px solid var(--line);
-  background: rgba(0, 0, 0, .22);
+  border: 1px solid var(--line2);
+  background: var(--paper);
   color: var(--text);
   outline: none;
   resize: vertical;
 }
 
 [data-theme="dark"] textarea {
-  background: rgba(0, 0, 0, .22);
+  background: var(--bg2);
 }
 
 textarea:focus {
   box-shadow: var(--ring);
-  border-color: rgba(45, 212, 191, .35);
+  border-color: var(--primary);
 }
 
 .row {
@@ -1065,10 +1085,9 @@ textarea:focus {
 
 /* BUTTONS */
 .btn {
-  border: 1px solid var(--line);
+  border: 1px solid var(--line2);
   border-radius: var(--radius2);
-  background: rgba(255, 255, 255, 0.4);
-  backdrop-filter: blur(4px);
+  background: var(--paper);
   padding: 10px 14px;
   cursor: pointer;
   font-weight: 600;
@@ -1077,7 +1096,7 @@ textarea:focus {
 }
 
 [data-theme="dark"] .btn {
-  background: rgba(0, 0, 0, 0.2);
+  background: var(--paper2);
 }
 
 .btn:hover {
@@ -1087,6 +1106,16 @@ textarea:focus {
   transform: translateY(-1px);
 }
 
+.btn:active {
+  transform: translateY(0) scale(0.97);
+  box-shadow: none;
+}
+
+.btn:focus-visible {
+  box-shadow: var(--ring);
+  outline: none;
+}
+
 .btn.small {
   padding: 7px 10px;
   border-radius: 10px;
@@ -1094,9 +1123,21 @@ textarea:focus {
 }
 
 .btn.primary {
-  background: rgba(45, 212, 191, .18);
-  border-color: rgba(45, 212, 191, .45);
-  color: rgba(45, 212, 191, .95);
+  background: var(--primary);
+  border-color: var(--primary);
+  color: #fff;
+  box-shadow: 0 2px 8px rgba(99, 102, 241, .2);
+}
+
+.btn.primary:hover {
+  box-shadow: 0 4px 16px rgba(99, 102, 241, .3);
+  transform: translateY(-1px);
+}
+
+[data-theme="dark"] .btn.primary {
+  background: var(--primary);
+  border-color: var(--primary);
+  color: #fff;
 }
 
 .sideBtn {
@@ -1110,22 +1151,18 @@ textarea:focus {
   padding: 2px 6px;
   border: 1px solid var(--line);
   border-radius: 8px;
-  background: rgba(255, 250, 242, .75);
+  background: var(--bg2);
   font-family: var(--mono);
   font-size: 12px;
   color: var(--muted);
 }
 
-[data-theme="dark"] .k {
-  background: rgba(0, 0, 0, .18);
-}
-
 /* REPORT/TODAY ITEMS + PREVIEW */
 .log {
   padding: 12px;
   border: 1px solid var(--line);
   border-radius: var(--radius);
-  background: rgba(255, 250, 242, .65);
+  background: var(--bg2);
   font-family: var(--mono);
   font-size: 12px;
   color: var(--muted);
@@ -1135,10 +1172,6 @@ textarea:focus {
   overflow: auto;
 }
 
-[data-theme="dark"] .log {
-  background: rgba(0, 0, 0, .18);
-}
-
 .rep {
   width: 100%;
   text-align: left;
@@ -1195,25 +1228,17 @@ textarea:focus {
   padding: 2px 6px;
   border: 1px solid var(--line);
   border-radius: 8px;
-  background: rgba(255, 250, 242, .60);
-}
-
-[data-theme="dark"] .md-inline {
-  background: rgba(0, 0, 0, .18);
+  background: var(--bg2);
 }
 
 .md-code {
-  background: rgba(0, 0, 0, .05);
+  background: var(--bg2);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 12px;
   overflow: auto;
 }
 
-[data-theme="dark"] .md-code {
-  background: rgba(0, 0, 0, .22);
-}
-
 .md-sp {
   height: 10px;
 }
@@ -1266,17 +1291,17 @@ textarea:focus {
 
 .bubble.user {
   align-self: flex-end;
-  background: rgba(37, 99, 235, .10);
-  border-color: rgba(37, 99, 235, .22);
+  background: rgba(99, 102, 241, .08);
+  border-color: rgba(99, 102, 241, .15);
 }
 
 .bubble.assistant {
   align-self: flex-start;
-  background: rgba(255, 250, 242, .82);
+  background: var(--bg2);
 }
 
 [data-theme="dark"] .bubble.assistant {
-  background: rgba(0, 0, 0, .18);
+  background: var(--paper2);
 }
 
 .chatComposer {
@@ -1367,6 +1392,7 @@ textarea:focus {
   font-weight: 700;
   padding: 3px 10px;
   border: 1px solid;
+  border-radius: 99px;
   letter-spacing: 0.3px;
 }
 
@@ -1434,8 +1460,10 @@ textarea:focus {
   pointer-events: auto;
   padding: 10px 16px;
   border: 1px solid var(--line2);
+  border-radius: var(--radius2);
   background: var(--paper);
   backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
   color: var(--text);
   font-size: 13px;
   font-weight: 500;
@@ -1444,7 +1472,7 @@ textarea:focus {
   max-width: 360px;
   opacity: 0;
   transform: translateX(100%);
-  animation: toastIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  animation: toastIn 0.3s var(--bounce) forwards;
 }
 
 .toast.out {
@@ -1511,29 +1539,35 @@ textarea:focus {
 /* ── Companion Dashboard Styles ── */
 .companionTabs {
   display: flex;
-  gap: 8px;
+  gap: 4px;
   margin: 16px 0;
-  border-bottom: 1px solid var(--border);
+  padding: 4px;
+  background: var(--paper2);
+  border: 1px solid var(--line);
+  border-radius: var(--radius2);
 }
 
 .companionTabs .tab {
-  padding: 8px 12px;
+  padding: 8px 14px;
   background: transparent;
   border: none;
-  border-bottom: 2px solid transparent;
+  border-radius: var(--radius3);
   cursor: pointer;
   font-size: 12px;
-  color: var(--textMuted);
-  transition: color 0.2s, border-color 0.2s;
+  font-weight: 600;
+  color: var(--muted);
+  transition: var(--transition);
 }
 
 .companionTabs .tab:hover {
   color: var(--text);
+  background: var(--paper);
 }
 
 .companionTabs .tab.active {
-  color: var(--accent);
-  border-bottom-color: var(--accent);
+  color: var(--primary);
+  background: var(--paper);
+  box-shadow: var(--shadow2);
 }
 
 .consolidatedView {
@@ -1545,10 +1579,17 @@ textarea:focus {
 .kpiCard {
   background: var(--paper);
   padding: 16px;
-  border: 1px solid var(--border);
+  border: 1px solid var(--line2);
+  border-radius: var(--radius2);
   display: flex;
   flex-direction: column;
   gap: 4px;
+  transition: var(--transition);
+}
+
+.kpiCard:hover {
+  box-shadow: var(--shadow2);
+  transform: translateY(-1px);
 }
 
 .projectCardsGrid {
@@ -1570,16 +1611,18 @@ textarea:focus {
 .projectCard {
   background: var(--paper);
   padding: 16px;
+  border: 1px solid var(--line2);
   border-left: 3px solid #4ade80;
-  border: 1px solid var(--border);
-  border-left: 3px solid #4ade80;
+  border-radius: var(--radius2);
   cursor: pointer;
-  transition: background 0.2s, border-color 0.2s;
+  transition: var(--transition);
 }
 
 .projectCard:hover {
-  background: rgba(255, 255, 255, 0.02);
+  background: var(--paper2);
   border-color: var(--accent);
+  box-shadow: var(--shadow2);
+  transform: translateY(-1px);
 }
 
 .projectCard.at_risk {
@@ -1593,24 +1636,31 @@ textarea:focus {
 .streamItem {
   padding: 12px;
   margin: 4px 0;
-  border: 1px solid var(--border);
+  border: 1px solid var(--line2);
+  border-radius: var(--radius3);
   background: transparent;
-  transition: background 0.2s;
+  transition: var(--transition);
   font-size: 11px;
 }
 
 .streamItem:hover {
-  background: rgba(255, 255, 255, 0.01);
+  background: var(--paper2);
+  box-shadow: var(--shadow2);
 }
 
 .alertItem {
   padding: 12px;
   margin: 8px 0;
+  border: 1px solid var(--line2);
   border-left: 3px solid #ef4444;
+  border-radius: var(--radius3);
   background: rgba(239, 68, 68, 0.05);
-  border: 1px solid var(--border);
-  border-left: 3px solid #ef4444;
   font-size: 11px;
+  transition: var(--transition);
+}
+
+.alertItem:hover {
+  box-shadow: var(--shadow2);
 }
 
 /* ── Kanban Board ── */
@@ -1631,9 +1681,11 @@ textarea:focus {
 .kanban-col {
   display: flex;
   flex-direction: column;
-  background: var(--bg);
+  background: var(--paper);
   border: 1px solid var(--line2);
+  border-radius: var(--radius2);
   min-height: 300px;
+  overflow: hidden;
 }
 
 .kanban-col-head {
@@ -1649,10 +1701,15 @@ textarea:focus {
   flex-shrink: 0;
 }
 
-.kanban-col-head.do-now { border-bottom-color: #ef4444; color: #ef4444; }
-.kanban-col-head.schedule { border-bottom-color: #3b82f6; color: #3b82f6; }
-.kanban-col-head.delegate { border-bottom-color: #f97316; color: #f97316; }
-.kanban-col-head.done { border-bottom-color: #22c55e; color: #22c55e; }
+.kanban-col-head.do-now { border-bottom-color: var(--pastel-rose); color: #e11d48; }
+.kanban-col-head.schedule { border-bottom-color: var(--pastel-blue); color: var(--primary); }
+.kanban-col-head.delegate { border-bottom-color: var(--pastel-gold); color: #b45309; }
+.kanban-col-head.done { border-bottom-color: var(--pastel-green); color: #16a34a; }
+
+[data-theme="dark"] .kanban-col-head.do-now { color: var(--pastel-rose); }
+[data-theme="dark"] .kanban-col-head.schedule { color: var(--pastel-blue); }
+[data-theme="dark"] .kanban-col-head.delegate { color: var(--pastel-gold); }
+[data-theme="dark"] .kanban-col-head.done { color: var(--pastel-green); }
 
 .kanban-col-count {
   font-size: 12px;
@@ -1660,6 +1717,7 @@ textarea:focus {
   padding: 1px 8px;
   background: var(--paper2);
   border: 1px solid var(--line2);
+  border-radius: var(--radius3);
 }
 
 .kanban-col-body {
@@ -1686,9 +1744,10 @@ body:not([data-page="kanban"]) .kanban-col-body {
 .kanban-card {
   background: var(--paper);
   border: 1px solid var(--line2);
+  border-radius: var(--radius3);
   padding: 10px 12px;
   cursor: grab;
-  transition: box-shadow 0.15s, opacity 0.15s;
+  transition: box-shadow 0.2s ease, opacity 0.15s, transform 0.2s ease;
   display: flex;
   flex-direction: column;
   gap: 6px;
@@ -1696,6 +1755,7 @@ body:not([data-page="kanban"]) .kanban-col-body {
 
 .kanban-card:hover {
   box-shadow: var(--shadow2);
+  transform: translateY(-1px);
 }
 
 .kanban-card.dragging {
@@ -1737,6 +1797,7 @@ body:not([data-page="kanban"]) .kanban-col-body {
   background: var(--chip);
   color: var(--primary);
   border: 1px solid var(--line2);
+  border-radius: 6px;
   font-family: var(--mono);
 }
 
@@ -1746,6 +1807,7 @@ body:not([data-page="kanban"]) .kanban-col-body {
   padding: 1px 6px;
   color: var(--muted);
   border: 1px solid var(--line2);
+  border-radius: 6px;
 }
 
 .kanban-due.overdue {
@@ -1767,8 +1829,9 @@ body:not([data-page="kanban"]) .kanban-col-body {
 }
 
 .kanban-action-btn {
-  background: var(--bg);
+  background: var(--paper);
   border: 1px solid var(--line2);
+  border-radius: 6px;
   color: var(--muted);
   padding: 2px 8px;
   font-size: 12px;
@@ -1783,8 +1846,9 @@ body:not([data-page="kanban"]) .kanban-col-body {
 
 .kanban-action-btn.complete-btn:hover,
 .kanban-action-btn.resolve-btn:hover {
-  color: #22c55e;
-  border-color: #22c55e;
+  color: #16a34a;
+  border-color: var(--pastel-green);
+  background: rgba(168, 216, 185, .15);
 }
 
 .kanban-owner {
@@ -1795,8 +1859,9 @@ body:not([data-page="kanban"]) .kanban-col-body {
 
 /* Kanban filter */
 .kanban-filter {
-  background: var(--bg);
+  background: var(--paper);
   border: 1px solid var(--line2);
+  border-radius: var(--radius3);
   color: var(--text);
   padding: 5px 10px;
   font-size: 12px;
@@ -1819,9 +1884,11 @@ body:not([data-page="kanban"]) .kanban-col-body {
 .blocker-kanban-col {
   display: flex;
   flex-direction: column;
-  background: var(--bg);
+  background: var(--paper);
   border: 1px solid var(--line2);
+  border-radius: var(--radius2);
   min-height: 80px;
+  overflow: hidden;
 }
 
 .blocker-kanban-col-body {
@@ -1841,19 +1908,23 @@ body:not([data-page="kanban"]) .kanban-col-body {
 }
 
 /* Blocker column header colors */
-.kanban-col-head.blocker-open { border-bottom-color: #ef4444; }
-.kanban-col-head.blocker-open .kanban-col-title { color: #ef4444; }
-.kanban-col-head.blocker-open .kanban-col-count { background: #ef444422; color: #ef4444; }
-.kanban-col-head.blocker-mitigating { border-bottom-color: #f59e0b; }
-.kanban-col-head.blocker-mitigating .kanban-col-title { color: #f59e0b; }
-.kanban-col-head.blocker-mitigating .kanban-col-count { background: #f59e0b22; color: #f59e0b; }
-.kanban-col-head.blocker-resolved { border-bottom-color: #22c55e; }
-.kanban-col-head.blocker-resolved .kanban-col-title { color: #22c55e; }
-.kanban-col-head.blocker-resolved .kanban-col-count { background: #22c55e22; color: #22c55e; }
+.kanban-col-head.blocker-open { border-bottom-color: var(--pastel-rose); }
+.kanban-col-head.blocker-open .kanban-col-title { color: #e11d48; }
+.kanban-col-head.blocker-open .kanban-col-count { background: rgba(253, 164, 175, .2); color: #e11d48; }
+.kanban-col-head.blocker-mitigating { border-bottom-color: var(--pastel-gold); }
+.kanban-col-head.blocker-mitigating .kanban-col-title { color: #b45309; }
+.kanban-col-head.blocker-mitigating .kanban-col-count { background: rgba(240, 217, 140, .2); color: #b45309; }
+.kanban-col-head.blocker-resolved { border-bottom-color: var(--pastel-green); }
+.kanban-col-head.blocker-resolved .kanban-col-title { color: #16a34a; }
+.kanban-col-head.blocker-resolved .kanban-col-count { background: rgba(168, 216, 185, .2); color: #16a34a; }
+
+[data-theme="dark"] .kanban-col-head.blocker-open .kanban-col-title { color: var(--pastel-rose); }
+[data-theme="dark"] .kanban-col-head.blocker-mitigating .kanban-col-title { color: var(--pastel-gold); }
+[data-theme="dark"] .kanban-col-head.blocker-resolved .kanban-col-title { color: var(--pastel-green); }
 
 /* Blocker card in kanban (reuses .kanban-card) */
 .kanban-card.blocker-card {
-  border-left: 3px solid #ef4444;
+  border-left: 3px solid var(--pastel-rose);
 }
 
 /* ── Quick-Add Modal ── */
@@ -1870,13 +1941,20 @@ body:not([data-page="kanban"]) .kanban-col-body {
 .qa-modal {
   background: var(--bg);
   border: 1px solid var(--line2);
+  border-radius: var(--radius);
   box-shadow: var(--shadow);
   width: 440px;
   max-width: 95vw;
-  padding: 16px;
+  padding: 20px;
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 12px;
+  animation: modalEnter 0.25s var(--bounce) both;
+}
+
+@keyframes modalEnter {
+  from { opacity: 0; transform: scale(0.95) translateY(8px); }
+  to   { opacity: 1; transform: scale(1) translateY(0); }
 }
 
 .qa-header {
@@ -1888,26 +1966,31 @@ body:not([data-page="kanban"]) .kanban-col-body {
 .qa-input {
   background: var(--paper);
   border: 1px solid var(--line2);
+  border-radius: var(--radius3);
   color: var(--text);
-  padding: 8px 10px;
+  padding: 10px 12px;
   font-size: 13px;
   font-family: var(--sans);
   width: 100%;
   resize: none;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }
 
 .qa-input:focus {
   outline: none;
   border-color: var(--primary);
+  box-shadow: var(--ring);
 }
 
 .qa-select {
   background: var(--paper);
   border: 1px solid var(--line2);
+  border-radius: var(--radius3);
   color: var(--text);
-  padding: 6px 10px;
+  padding: 8px 10px;
   font-size: 12px;
   flex: 1;
+  transition: border-color 0.2s ease;
 }
 
 .qa-row {
@@ -1963,13 +2046,15 @@ body:not([data-page="kanban"]) .kanban-col-body {
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 8px 14px;
+  padding: 10px 14px;
   margin-bottom: 12px;
   background: var(--chip);
   border: 1px solid var(--line2);
+  border-radius: var(--radius3);
   font-size: 12px;
   color: var(--text);
   border-left: 3px solid var(--primary);
+  animation: fadeIn 0.2s ease-out;
 }
 
 /* ── Detail Panel (click-to-view on kanban cards) ── */
@@ -1985,14 +2070,17 @@ body:not([data-page="kanban"]) .kanban-col-body {
 }
 .detail-panel {
   background: var(--paper);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
   border: 1px solid var(--line2);
-  border-radius: 12px;
+  border-radius: var(--radius);
   width: 520px;
   max-width: 95vw;
   max-height: 85vh;
   overflow-y: auto;
   padding: 20px 24px;
   box-shadow: 0 12px 40px rgba(0,0,0,0.4);
+  animation: modalEnter 0.25s var(--bounce) both;
 }
 .detail-panel-header {
   display: flex;
@@ -2077,3 +2165,286 @@ body:not([data-page="kanban"]) .kanban-col-body {
   to { opacity: 1; }
 }
 
+/* ── Page Transition ── */
+.center {
+  animation: pageEnter 0.35s var(--bounce) both;
+}
+
+@keyframes pageEnter {
+  from { opacity: 0; transform: translateY(10px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+body.navigating .center {
+  animation: pageExit 0.18s ease-in forwards;
+}
+
+@keyframes pageExit {
+  from { opacity: 1; transform: translateY(0); }
+  to   { opacity: 0; transform: translateY(-6px); }
+}
+
+/* ── Mobile Hamburger Menu ── */
+.mobileMenuBtn {
+  display: none;
+  position: fixed;
+  bottom: 20px;
+  left: 20px;
+  z-index: 10001;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  border: 1px solid var(--line2);
+  background: var(--paper);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  box-shadow: var(--shadow);
+  color: var(--text);
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  transition: var(--transition);
+}
+
+.mobileMenuBtn:hover {
+  transform: scale(1.08);
+  box-shadow: var(--shadow-hover);
+}
+
+.mobileMenuBtn:active {
+  transform: scale(0.95);
+}
+
+.mobileMenuBtn svg {
+  transition: transform 0.25s var(--bounce);
+}
+
+.mobileMenuBtn.open svg {
+  transform: rotate(90deg);
+}
+
+@media (max-width: 860px) {
+  .mobileMenuBtn {
+    display: flex;
+  }
+}
+
+.mobileNav {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  opacity: 0;
+  transition: opacity 0.25s ease;
+}
+
+.mobileNav.visible {
+  opacity: 1;
+}
+
+.mobileNav-panel {
+  position: absolute;
+  bottom: 80px;
+  left: 20px;
+  background: var(--paper);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 200px;
+  transform: translateY(12px) scale(0.95);
+  transition: transform 0.25s var(--bounce), opacity 0.2s ease;
+  opacity: 0;
+}
+
+.mobileNav.visible .mobileNav-panel {
+  transform: translateY(0) scale(1);
+  opacity: 1;
+}
+
+.mobileNav-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 14px;
+  border-radius: var(--radius2);
+  border: none;
+  background: transparent;
+  color: var(--muted);
+  font-family: var(--sans);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: var(--transition);
+  text-align: left;
+  width: 100%;
+}
+
+.mobileNav-item:hover {
+  background: var(--chip);
+  color: var(--text);
+}
+
+.mobileNav-item.active {
+  background: var(--chip);
+  color: var(--primary);
+}
+
+.mobileNav-item svg {
+  flex-shrink: 0;
+}
+
+/* ── Staggered Card Animations ── */
+@keyframes cardEnter {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.kanban-card {
+  animation: cardEnter 0.3s var(--bounce) both;
+}
+
+.kanban-col-body .kanban-card:nth-child(1) { animation-delay: 0ms; }
+.kanban-col-body .kanban-card:nth-child(2) { animation-delay: 30ms; }
+.kanban-col-body .kanban-card:nth-child(3) { animation-delay: 60ms; }
+.kanban-col-body .kanban-card:nth-child(4) { animation-delay: 90ms; }
+.kanban-col-body .kanban-card:nth-child(5) { animation-delay: 120ms; }
+.kanban-col-body .kanban-card:nth-child(n+6) { animation-delay: 150ms; }
+
+/* ── Visual Hierarchy Improvements ── */
+
+/* Section headers get more breathing room */
+.reportsTitle,
+.utilityHead,
+.panelHead b {
+  font-family: var(--display);
+}
+
+/* Better section spacing */
+.centerBody > section,
+.centerBody > div {
+  animation: fadeIn 0.2s ease-out both;
+}
+
+.centerBody > *:nth-child(1) { animation-delay: 0ms; }
+.centerBody > *:nth-child(2) { animation-delay: 40ms; }
+.centerBody > *:nth-child(3) { animation-delay: 80ms; }
+.centerBody > *:nth-child(4) { animation-delay: 120ms; }
+.centerBody > *:nth-child(5) { animation-delay: 160ms; }
+
+/* Focus-visible for accessibility across all interactive elements */
+button:focus-visible,
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible,
+a:focus-visible {
+  outline: none;
+  box-shadow: var(--ring);
+}
+
+/* Kanban drag-over improved visual */
+.kanban-col-body.drag-over {
+  background: var(--chip);
+  border-radius: 0 0 calc(var(--radius2) - 1px) calc(var(--radius2) - 1px);
+  outline: 2px dashed var(--primary);
+  outline-offset: -2px;
+}
+
+/* Better report card interaction */
+.reportCard {
+  cursor: default;
+}
+
+.reportCard .reportHead {
+  transition: color 0.2s ease;
+}
+
+.reportCard .reportHead:hover .reportName {
+  color: var(--primary);
+}
+
+/* Improved prompt bar focus state */
+.promptBar:focus-within {
+  border-color: rgba(99, 102, 241, .35);
+}
+
+/* Rail tooltip on hover */
+.railBtn {
+  position: relative;
+}
+
+.railBtn[title]:hover::after {
+  content: attr(title);
+  position: absolute;
+  left: calc(100% + 8px);
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 4px 10px;
+  background: var(--text);
+  color: var(--bg);
+  font-size: 11px;
+  font-weight: 600;
+  font-family: var(--sans);
+  border-radius: 6px;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 100;
+  animation: tooltipIn 0.15s ease-out;
+}
+
+@keyframes tooltipIn {
+  from { opacity: 0; transform: translateY(-50%) translateX(-4px); }
+  to   { opacity: 1; transform: translateY(-50%) translateX(0); }
+}
+
+/* Hide tooltip on mobile (rail is hidden anyway) */
+@media (max-width: 860px) {
+  .railBtn[title]:hover::after {
+    display: none;
+  }
+}
+
+/* Smoother scrollbar transitions */
+.centerBody,
+.kanban-col-body,
+.blocker-kanban-col-body,
+.chatThread {
+  scroll-behavior: smooth;
+}
+
+/* Improved sparkle effect */
+.spark {
+  animation: sparkPulse 3s ease-in-out infinite;
+}
+
+@keyframes sparkPulse {
+  0%, 100% { box-shadow: 0 0 0 5px rgba(99, 102, 241, .10); }
+  50%      { box-shadow: 0 0 0 9px rgba(99, 102, 241, .05); }
+}
+
+/* Better chip clickable interaction */
+.chip.clickable:active {
+  transform: translateY(0) scale(0.96);
+}
+
+/* Consistent border-radius on the detail panel sections */
+.detail-panel-comment {
+  border-radius: var(--radius3);
+}
+
+.detail-panel-header {
+  border-bottom: 1px solid var(--line);
+}
+
+.detail-panel-section {
+  border-top: 1px solid var(--line);
+}
+