thatcher 1.0.4

package/src/ui/styles.css

@@ -0,0 +1,2530 @@
+:root {
+  --primary: #2563eb;
+  --primary-hover: #1d4ed8;
+  --base-content: #1a1a1a;
+  --base-100: #ffffff;
+  --base-200: #f9fafb;
+  --base-300: #f3f4f6;
+  --success: #10b981;
+  --warning: #f59e0b;
+  --error: #ef4444;
+  --info: #3b82f6;
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
+  --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
+  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
+}
+
+* { box-sizing: border-box; }
+body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f8fafc; min-height: 100vh; color: var(--base-content); }
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --primary: #60a5fa;
+    --primary-hover: #3b82f6;
+    --base-content: #f5f5f5;
+    --base-100: #1a1a1a;
+    --base-200: #2d2d2d;
+    --base-300: #3d3d3d;
+    --success: #34d399;
+    --warning: #fbbf24;
+    --error: #f87171;
+    --info: #60a5fa;
+  }
+  body { background: #0f172a; color: #f5f5f5; }
+  input, select, textarea { background: #1a1a1a; color: #f5f5f5; border-color: #3d3d3d; }
+  .btn-ghost { color: #f5f5f5; }
+  .btn-ghost:hover { background: rgba(255,255,255,0.1); }
+}
+
+/* Z-index scale: organized stacking context */
+:root {
+  --z-dropdown: 10;
+  --z-sticky: 20;
+  --z-fixed: 30;
+  --z-modal-backdrop: 90;
+  --z-modal: 100;
+  --z-tooltip: 110;
+  --z-notification: 120;
+  --z-topmost: 1000;
+  /* Spacing scale */
+  --space-xs: 0.25rem;   /* 4px */
+  --space-sm: 0.5rem;    /* 8px */
+  --space-md: 0.75rem;   /* 12px */
+  --space-lg: 1rem;      /* 16px */
+  --space-xl: 1.5rem;    /* 24px */
+  --space-2xl: 2rem;     /* 32px */
+}
+
+/* Layout */
+.center-screen { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
+.container { max-width: 1200px; margin: 0 auto; }
+.container-lg { max-width: 1400px; margin: 0 auto; }
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  border: none;
+  border-radius: 0.5rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  text-decoration: none;
+}
+.btn-primary { background-color: var(--primary); color: white; transition: all 0.2s ease; }
+.btn-primary:hover { background-color: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
+.btn-primary:active { transform: translateY(0); }
+.btn-error { background-color: var(--error); color: white; transition: all 0.2s ease; }
+.btn-error:hover { background-color: #dc2626; transform: translateY(-1px); box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
+.btn-error:active { transform: translateY(0); }
+.btn-success { background-color: var(--success); color: white; transition: all 0.2s ease; }
+.btn-success:hover { background-color: #059669; transform: translateY(-1px); box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
+.btn-success:active { transform: translateY(0); }
+.btn-warning { background-color: var(--warning); color: white; transition: all 0.2s ease; }
+.btn-warning:hover { background-color: #d97706; transform: translateY(-1px); box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
+.btn-warning:active { transform: translateY(0); }
+.btn-info { background-color: var(--info); color: white; transition: all 0.2s ease; }
+.btn-info:hover { background-color: #1d4ed8; transform: translateY(-1px); box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
+.btn-info:active { transform: translateY(0); }
+.btn-outline { border: 1px solid currentColor; background: transparent; transition: all 0.2s ease; }
+.btn-outline:hover { background: rgba(0,0,0,0.05); }
+.btn-ghost { background: transparent; color: var(--base-content); transition: all 0.2s ease; }
+.btn-ghost:hover { background: rgba(0,0,0,0.05); }
+@media (prefers-color-scheme: dark) {
+  .btn-outline:hover { background: rgba(255,255,255,0.08); }
+}
+.btn-ghost:active { opacity: 0.8; }
+.btn-xs { padding: 0.25rem 0.5rem; font-size: 0.75rem; min-height: 24px; }
+.btn-sm { padding: 0.5rem 1rem; font-size: 1rem; min-height: 36px; }
+.btn-md { padding: 0.75rem 1.5rem; font-size: 1rem; min-height: 40px; }
+.btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; min-height: 44px; }
+.btn-block { width: 100%; }
+/* Ensure minimum touch targets on mobile */
+@media (hover: none) and (pointer: coarse) {
+  .btn { min-height: 44px; min-width: 44px; }
+}
+
+/* Forms */
+.form-group { display: flex; flex-direction: column; gap: 0.25rem; }
+.form-label { font-weight: 600; font-size: 1rem; color: var(--base-content); display: block; }
+.form-input,
+.form-textarea,
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+input[type="date"],
+input[type="search"],
+select,
+textarea {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.5rem;
+  font-size: 1rem;
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+  background: var(--base-100);
+  color: var(--base-content);
+}
+input:focus,
+input:focus-visible,
+select:focus,
+textarea:focus,
+textarea:focus-visible,
+.form-input:focus,
+.form-textarea:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+/* Accessibility: Visible focus indicator for all interactive elements */
+button:focus-visible,
+a:focus-visible,
+[role="button"]:focus-visible,
+[tabindex]:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+input:disabled,
+select:disabled,
+textarea:disabled {
+  background: #f9fafb;
+  color: #9ca3af;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+input[readonly],
+select[readonly],
+textarea[readonly] {
+  background: #f9fafb;
+  color: #6b7280;
+  cursor: default;
+}
+/* Input states */
+.input-error, .form-input.error, input.error {
+  border-color: var(--error) !important;
+  background-color: rgba(239,68,68,0.02);
+}
+.input-error:focus, .form-input.error:focus, input.error:focus {
+  box-shadow: 0 0 0 3px rgba(239,68,68,0.1) !important;
+}
+.input-success, .form-input.success, input.success {
+  border-color: var(--success) !important;
+  background-color: rgba(16,185,129,0.02);
+}
+.input-success:focus, .form-input.success:focus, input.success:focus {
+  box-shadow: 0 0 0 3px rgba(16,185,129,0.1) !important;
+}
+.input-bordered { border: 1px solid #d1d5db; }
+.input-sm { padding: 0.5rem 0.5rem; font-size: 0.75rem; }
+.select-bordered { border: 1px solid #d1d5db; }
+.select-sm { padding: 0.5rem 0.5rem; font-size: 0.75rem; }
+.textarea-bordered { border: 1px solid #d1d5db; }
+.file-input-bordered { border: 1px solid #d1d5db; }
+.checkbox-sm { width: 1rem; height: 1rem; }
+.checkbox-primary { accent-color: var(--primary); }
+
+/* Cards */
+.card {
+  background: var(--base-100);
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
+}
+.card-clean { background: var(--base-100); border-radius: 0.5rem; box-shadow: var(--shadow-md); }
+.card-clean-body { padding: 1.5rem; }
+.card-body { padding: 1.5rem; }
+.card-header { padding: 1.5rem 1.5rem 1rem; border-bottom: 1px solid #e5e7eb; }
+.card-footer { padding: 1rem 1.5rem; border-top: 1px solid #e5e7eb; }
+.card-title { font-size: 1.125rem; font-weight: 600; margin: 0; }
+.card-subtitle { font-size: 1rem; color: #6b7280; margin: 0; }
+
+/* Tables */
+.table-container { overflow-x: auto; }
+table {
+  width: 100%;
+  border-collapse: collapse;
+  background: var(--base-100);
+}
+th, td { padding: 0.75rem 1rem; text-align: left; }
+th { background: var(--base-200); font-weight: 600; font-size: 1rem; color: #6b7280; }
+tbody tr:hover { background: var(--base-300); }
+td { border-bottom: 1px solid #e5e7eb; }
+tr:last-child td { border-bottom: none; }
+.table-hover tbody tr { cursor: pointer; transition: background 0.15s; }
+.table-hover tbody tr:hover { background: #f3f4f6; }
+
+/* Grid System */
+.grid { display: grid; }
+.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.gap-1 { gap: 0.25rem; }
+.gap-2 { gap: 0.5rem; }
+.gap-3 { gap: 0.75rem; }
+.gap-4 { gap: 1rem; }
+.gap-6 { gap: 1.5rem; }
+.gap-8 { gap: 2rem; }
+
+/* Flexbox */
+.flex { display: flex; }
+.flex-col { flex-direction: column; }
+.flex-wrap { flex-wrap: wrap; }
+.flex-1 { flex: 1; }
+.items-start { align-items: flex-start; }
+.items-center { align-items: center; }
+.items-end { align-items: flex-end; }
+.justify-start { justify-content: flex-start; }
+.justify-center { justify-content: center; }
+.justify-between { justify-content: space-between; }
+.justify-end { justify-content: flex-end; }
+
+/* Spacing - Margin */
+.m-0 { margin: 0; }
+.m-1 { margin: 0.25rem; }
+.m-2 { margin: 0.5rem; }
+.m-4 { margin: 1rem; }
+.mb-1 { margin-bottom: 0.25rem; }
+.mb-2 { margin-bottom: 0.5rem; }
+.mb-3 { margin-bottom: 0.75rem; }
+.mb-4 { margin-bottom: 1rem; }
+.mb-5 { margin-bottom: 1.25rem; }
+.mb-6 { margin-bottom: 1.5rem; }
+.mb-8 { margin-bottom: 2rem; }
+.mt-1 { margin-top: 0.25rem; }
+.mt-2 { margin-top: 0.5rem; }
+.mt-3 { margin-top: 0.75rem; }
+.mt-4 { margin-top: 1rem; }
+.mt-6 { margin-top: 1.5rem; }
+.ml-1 { margin-left: 0.25rem; }
+.ml-2 { margin-left: 0.5rem; }
+.ml-4 { margin-left: 1rem; }
+.ml-6 { margin-left: 1.5rem; }
+.mr-1 { margin-right: 0.25rem; }
+.mr-2 { margin-right: 0.5rem; }
+.mr-4 { margin-right: 1rem; }
+.mx-auto { margin-left: auto; margin-right: auto; }
+
+/* Spacing - Padding */
+.p-1 { padding: 0.25rem; }
+.p-2 { padding: 0.5rem; }
+.p-3 { padding: 0.75rem; }
+.p-4 { padding: 1rem; }
+.p-6 { padding: 1.5rem; }
+.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
+.px-4 { padding-left: 1rem; padding-right: 1rem; }
+.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
+.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
+.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
+.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
+.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
+.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
+.pt-2 { padding-top: 0.5rem; }
+.pt-4 { padding-top: 1rem; }
+
+/* Width and Height */
+.w-full { width: 100%; }
+.w-auto { width: auto; }
+.w-1 { width: 0.25rem; }
+.w-2 { width: 0.5rem; }
+.w-4 { width: 1rem; }
+.w-6 { width: 1.5rem; }
+.w-8 { width: 2rem; }
+.w-10 { width: 2.5rem; }
+.w-12 { width: 3rem; }
+.w-52 { width: 13rem; }
+.w-96 { max-width: 24rem; width: 100%; }
+.h-auto { height: auto; }
+.h-8 { height: 2rem; }
+.h-10 { height: 2.5rem; }
+.h-12 { height: 3rem; }
+.max-w-sm { max-width: 24rem; }
+.max-w-md { max-width: 28rem; }
+.max-w-lg { max-width: 32rem; }
+.max-w-2xl { max-width: 42rem; }
+.max-w-4xl { max-width: 56rem; }
+.min-h-screen { min-height: 100vh; }
+.min-h-32 { min-height: 8rem; }
+.min-w-48 { min-width: 12rem; }
+
+/* Typography */
+.text-xs { font-size: 0.75rem; }
+.text-sm { font-size: 1rem; }
+.text-base { font-size: 1rem; }
+.text-lg { font-size: 1.125rem; }
+.text-xl { font-size: 1.25rem; }
+.text-2xl { font-size: 1.5rem; }
+.text-3xl { font-size: 1.875rem; }
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+.font-normal { font-weight: 400; }
+.font-medium { font-weight: 500; }
+.font-semibold { font-weight: 600; }
+.font-bold { font-weight: 700; }
+.uppercase { text-transform: uppercase; }
+.lowercase { text-transform: lowercase; }
+.capitalize { text-transform: capitalize; }
+
+/* Colors - Text */
+.text-white { color: white; }
+.text-gray-400 { color: #9ca3af; }
+.text-gray-500 { color: #6b7280; }
+.text-gray-600 { color: #4b5563; }
+.text-gray-700 { color: #374151; }
+.text-base-content { color: var(--base-content); }
+.text-base-content\/40 { color: rgba(26, 26, 26, 0.4); }
+.text-base-content\/50 { color: rgba(26, 26, 26, 0.5); }
+.text-base-content\/60 { color: rgba(26, 26, 26, 0.6); }
+.text-green-600 { color: #16a34a; }
+.text-red-500 { color: #ef4444; }
+
+/* Colors - Background */
+.bg-white { background-color: white; }
+.bg-primary { background-color: var(--primary); }
+.bg-base-100 { background-color: var(--base-100); }
+.bg-base-200 { background-color: var(--base-200); }
+.bg-gray-50 { background-color: #f9fafb; }
+.bg-gray-100 { background-color: #f3f4f6; }
+.bg-green-50 { background-color: #f0fdf4; }
+.bg-red-50 { background-color: #fef2f2; }
+.bg-blue-50 { background-color: #eff6ff; }
+.bg-primary\/10 { background-color: rgba(37, 99, 235, 0.1); }
+
+/* Colors - Border */
+.border-base-200 { border-color: #e5e7eb; }
+.border-gray-100 { border-color: #f3f4f6; }
+.border-gray-200 { border-color: #e5e7eb; }
+.border-gray-300 { border-color: #d1d5db; }
+.border-b { border-bottom: 1px solid #e5e7eb; }
+.border-t { border-top: 1px solid #e5e7eb; }
+.border-l { border-left: 1px solid #e5e7eb; }
+.border-l-4 { border-left: 4px solid; }
+
+/* Badges */
+.badge {
+  display: inline-block;
+  padding: 0.5rem 1rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+.badge-primary { background: rgba(37, 99, 235, 0.1); color: #2563eb; }
+.badge-success { background: rgba(16, 185, 129, 0.1); color: #10b981; }
+.badge-error { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
+.badge-warning { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
+.badge-secondary { background: #f3f4f6; color: #6b7280; }
+.badge-flat-primary { background: #dbeafe; color: #1e40af; }
+.badge-flat-success { background: #dcfce7; color: #166534; }
+.badge-flat-error { background: #fee2e2; color: #991b1b; }
+.badge-flat-secondary { background: #f3f4f6; color: #475569; }
+.badge-flat-warning { background: #fef3c7; color: #92400e; }
+.badge-stage { display: inline-block; padding: 0.5rem 1rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; }
+.badge-status { display: inline-block; padding: 0.5rem 1rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; }
+
+/* Pills */
+.pill {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  border-radius: 9999px;
+  font-size: 1rem;
+  font-weight: 500;
+  gap: 0.5rem;
+}
+.pill-primary { background: #dbeafe; color: #1d4ed8; }
+.pill-success { background: #dcfce7; color: #166534; }
+.pill-danger { background: #fee2e2; color: #991b1b; }
+.pill-warning { background: #fef3c7; color: #92400e; }
+.pill-neutral { background: #f1f5f9; color: #475569; }
+.pill-info { background: #dbeafe; color: #1d4ed8; }
+
+/* Shadows */
+.shadow { box-shadow: var(--shadow-sm); }
+.shadow-sm { box-shadow: var(--shadow-sm); }
+.shadow-md { box-shadow: var(--shadow-md); }
+.shadow-lg { box-shadow: var(--shadow-lg); }
+
+/* Borders and Radius */
+.rounded { border-radius: 0.25rem; }
+.rounded-sm { border-radius: 0.25rem; }
+.rounded-md { border-radius: 0.5rem; }
+.rounded-lg { border-radius: 0.5rem; }
+.rounded-full { border-radius: 9999px; }
+
+/* Display */
+.hidden { display: none; }
+.block { display: block; }
+.inline { display: inline; }
+.inline-block { display: inline-block; }
+.inline-flex { display: inline-flex; }
+
+/* Utilities */
+.cursor-pointer { cursor: pointer; }
+.cursor-default { cursor: default; }
+.cursor-not-allowed { cursor: not-allowed; }
+.pointer-events-none { pointer-events: none; }
+.opacity-50 { opacity: 0.5; }
+.opacity-75 { opacity: 0.75; }
+.transition { transition: all 0.2s; }
+.transition-shadow { transition: box-shadow 0.2s; }
+
+/* Hover and Interaction */
+.hover\:underline:hover { text-decoration: underline; }
+.hover\:bg-gray-50:hover { background-color: #f9fafb; }
+.hover\:text-primary:hover { color: var(--primary); }
+
+/* Label styles */
+.label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.label-text {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--base-content);
+}
+.label-text-alt {
+  font-size: 0.75rem;
+  color: #6b7280;
+}
+
+/* Space Y utilities */
+.space-y-1 > * + * { margin-top: 0.25rem; }
+.space-y-2 > * + * { margin-top: 0.5rem; }
+.space-y-3 > * + * { margin-top: 0.75rem; }
+.space-y-4 > * + * { margin-top: 1rem; }
+.space-y-6 > * + * { margin-top: 1.5rem; }
+
+/* Space X utilities */
+.space-x-1 > * + * { margin-left: 0.25rem; }
+.space-x-2 > * + * { margin-left: 0.5rem; }
+.space-x-3 > * + * { margin-left: 0.75rem; }
+.space-x-4 > * + * { margin-left: 1rem; }
+
+/* Text decoration */
+.underline { text-decoration: underline; }
+.no-underline { text-decoration: none; }
+.line-through { text-decoration: line-through; }
+
+/* Overflow */
+.overflow-hidden { overflow: hidden; }
+.overflow-x-auto { overflow-x: auto; }
+.overflow-y-auto { overflow-y: auto; }
+.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* Whitespace */
+.whitespace-nowrap { white-space: nowrap; }
+.whitespace-pre-wrap { white-space: pre-wrap; }
+.break-words { word-break: break-word; }
+
+/* Aspect ratio */
+.aspect-video { aspect-ratio: 16 / 9; }
+.aspect-square { aspect-ratio: 1 / 1; }
+
+/* Z-index */
+.z-0 { z-index: 0; }
+.z-10 { z-index: 10; }
+.z-20 { z-index: 20; }
+.z-30 { z-index: 30; }
+.z-40 { z-index: 40; }
+.z-50 { z-index: 50; }
+
+/* Responsive Media Queries */
+@media (max-width: 640px) {
+  .sm\:hidden { display: none; }
+  .sm\:block { display: block; }
+  .sm\:flex { display: flex; }
+  .sm\:grid { display: grid; }
+  .sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+  .sm\:gap-2 { gap: 0.5rem; }
+  .sm\:gap-4 { gap: 1rem; }
+}
+
+@media (min-width: 640px) {
+  .sm\:flex { display: flex; }
+  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .sm\:gap-3 { gap: 0.75rem; }
+}
+
+@media (min-width: 768px) {
+  .md\:flex { display: flex; }
+  .md\:hidden { display: none; }
+  .md\:grid { display: grid; }
+  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+  .md\:gap-2 { gap: 0.5rem; }
+  .md\:gap-4 { gap: 1rem; }
+  .md\:gap-6 { gap: 1.5rem; }
+  .md\:p-6 { padding: 1.5rem; }
+}
+
+@media (min-width: 1024px) {
+  .lg\:flex { display: flex; }
+  .lg\:grid { display: grid; }
+  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+  .lg\:gap-4 { gap: 1rem; }
+  .lg\:gap-6 { gap: 1.5rem; }
+}
+/* Navbar */
+.navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 1rem;
+  background: white;
+  border-bottom: 1px solid #e5e7eb;
+  box-shadow: var(--shadow-sm);
+}
+.navbar-start { display: flex; align-items: center; gap: 1rem; }
+.navbar-end { display: flex; align-items: center; gap: 1rem; }
+.navbar-brand { font-size: 1.25rem; font-weight: 700; color: var(--primary); text-decoration: none; }
+
+/* Dropdown */
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+.dropdown-end { position: relative; }
+.dropdown-toggle { display: flex; align-items: center; gap: 0.5rem; background: transparent; border: none; cursor: pointer; }
+.dropdown-menu {
+  position: absolute;
+  right: 0;
+  top: 100%;
+  z-index: 50;
+  background: white;
+  border-radius: 0.5rem;
+  box-shadow: var(--shadow-lg);
+  min-width: 10rem;
+  display: none;
+  border: 1px solid #e5e7eb;
+  overflow: hidden;
+}
+.dropdown.open .dropdown-menu { display: block; }
+.dropdown-header {
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  color: #6b7280;
+  border-bottom: 1px solid #e5e7eb;
+  font-weight: 600;
+}
+.dropdown-menu li { list-style: none; }
+.dropdown-menu li a {
+  display: block;
+  padding: 0.75rem 1rem;
+  color: #374151;
+  text-decoration: none;
+  transition: background 0.15s;
+}
+.dropdown-menu li a:hover { background: #f9fafb; color: var(--primary); }
+@media (prefers-color-scheme: dark) {
+  .dropdown-menu li a:hover { background: #2d2d2d; color: var(--primary); }
+}
+/* Required marker */
+.required-marker { color: var(--error); margin-left: 2px; }
+
+/* Button states */
+.btn-loading {
+  opacity: 0.7;
+  pointer-events: none;
+}
+.btn-loading::after { content: '...'; }
+.btn-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Modals and Dialogs */
+.modal-overlay,
+.confirm-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  animation: fade-in 0.15s ease-out;
+}
+.modal-dialog,
+.confirm-dialog,
+.modal-content {
+  background: var(--base-100);
+  border-radius: 0.5rem;
+  padding: 1.5rem;
+  max-width: 500px;
+  width: 90%;
+  box-shadow: var(--shadow-lg);
+  max-height: 90vh;
+  overflow-y: auto;
+  animation: slide-up 0.2s ease-out;
+}
+.modal-confirm-dialog {
+  max-width: 400px;
+}
+.modal-form-group {
+  margin-bottom: 1rem;
+}
+.modal-form-group:last-child {
+  margin-bottom: 0;
+}
+.modal-title,
+.confirm-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  color: var(--base-content);
+}
+.modal-subtitle {
+  font-size: 1rem;
+  color: #6b7280;
+  margin-bottom: 1.5rem;
+}
+.confirm-message {
+  color: #6b7280;
+  margin-bottom: 1.5rem;
+  line-height: 1.5;
+}
+.modal-actions,
+.confirm-actions {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: flex-end;
+  padding-top: 1.5rem;
+  border-top: 1px solid #e5e7eb;
+  margin-top: 1.5rem;
+}
+@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes slide-up { from { transform: translateY(1.5rem); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+
+/* Breadcrumb */
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 1rem;
+  color: #6b7280;
+  margin-bottom: 1rem;
+}
+.breadcrumb a {
+  color: var(--primary);
+  text-decoration: none;
+  transition: color 0.15s;
+}
+.breadcrumb a:hover { text-decoration: underline; }
+.breadcrumb-separator { color: #9ca3af; }
+
+/* Toast Notifications */
+.toast-container {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  z-index: 200;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  pointer-events: none;
+}
+.toast {
+  padding: 1rem 1.25rem;
+  border-radius: 0.5rem;
+  box-shadow: var(--shadow-lg);
+  animation: toast-in 0.3s ease-out;
+  max-width: 320px;
+  pointer-events: auto;
+  border-left: 4px solid transparent;
+}
+.toast-success {
+  background: #f0fdf4;
+  color: #166534;
+  border-left-color: var(--success);
+}
+.toast-error {
+  background: #fef2f2;
+  color: #991b1b;
+  border-left-color: var(--error);
+}
+.toast-info {
+  background: #eff6ff;
+  color: #1e40af;
+  border-left-color: var(--info);
+}
+.toast-warning {
+  background: #fffbeb;
+  color: #92400e;
+  border-left-color: var(--warning);
+}
+@keyframes toast-in { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
+
+/* Tooltip */
+.tooltip {
+  position: relative;
+  display: inline-block;
+}
+.tooltip::after {
+  content: attr(data-tip);
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 0.5rem 0.75rem;
+  background: #1f2937;
+  color: white;
+  font-size: 0.75rem;
+  border-radius: 0.5rem;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s;
+  margin-bottom: 0.5rem;
+  z-index: 10;
+}
+.tooltip:hover::after { opacity: 1; }
+
+/* Access Denied */
+.access-denied {
+  text-align: center;
+  padding: 4rem 2rem;
+  min-height: 50vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.access-denied-icon {
+  font-size: 4rem;
+  color: var(--error);
+  margin-bottom: 1rem;
+  line-height: 1;
+}
+.access-denied h1 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+.access-denied p {
+  color: #6b7280;
+  margin-bottom: 1.5rem;
+  max-width: 28rem;
+  line-height: 1.5;
+}
+/* Progress bars */
+.linear-progress {
+  width: 100%;
+  border-radius: 9999px;
+  background: #e5e7eb;
+  overflow: hidden;
+  position: relative;
+  height: 0.5rem;
+}
+.linear-progress-bar {
+  height: 100%;
+  border-radius: 9999px;
+  transition: width 0.3s ease;
+  min-width: 0;
+  background: var(--primary);
+}
+.linear-progress-bar.success { background: var(--success); }
+.linear-progress-bar.warning { background: var(--warning); }
+.linear-progress-bar.error { background: var(--error); }
+.linear-progress-wrap {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+.linear-progress-wrap .progress-label {
+  font-size: 1rem;
+  color: #374151;
+  white-space: nowrap;
+  flex: 1;
+}
+.linear-progress-wrap .progress-pct {
+  font-size: 1rem;
+  font-weight: 600;
+  white-space: nowrap;
+  min-width: 3rem;
+  text-align: right;
+}
+
+/* Circular progress */
+.circular-progress {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.circular-progress svg { transform: rotate(-90deg); }
+.circular-progress-text {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.circular-progress-pct {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--base-content);
+  line-height: 1;
+}
+.circular-progress-label {
+  font-size: 0.75rem;
+  color: #6b7280;
+  margin-top: 0.25rem;
+}
+
+/* Pipeline and stage pills */
+.engagement-pipeline {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  overflow-x: auto;
+  padding: 0.5rem 0;
+}
+.stage-pill {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  white-space: nowrap;
+  border: 1px solid #e5e7eb;
+  position: relative;
+  background: white;
+  color: #6b7280;
+}
+.stage-pill:first-child { border-radius: 9999px 0 0 9999px; }
+.stage-pill:last-child { border-radius: 0 9999px 9999px 0; }
+.stage-pill:only-child { border-radius: 9999px; }
+.stage-pill.stage-active {
+  font-weight: 700;
+  background: var(--primary);
+  color: white;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px rgba(37,99,235,0.2);
+  z-index: 1;
+}
+.stage-pill.stage-completed {
+  opacity: 0.7;
+  background: #f3f4f6;
+}
+
+/* Empty state */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem 1.5rem;
+  text-align: center;
+  min-height: 200px;
+}
+.empty-state-icon {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  line-height: 1;
+  opacity: 0.5;
+}
+.empty-state-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--base-content);
+  margin-bottom: 0.5rem;
+}
+.empty-state-msg {
+  color: #6b7280;
+  font-size: 1rem;
+  margin-bottom: 1.5rem;
+  max-width: 24rem;
+  line-height: 1.5;
+}
+
+/* Sortable lists */
+.sortable-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.sortable-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  margin-bottom: 0.25rem;
+  cursor: grab;
+  transition: box-shadow 0.15s, background 0.15s;
+}
+.sortable-item:active { cursor: grabbing; }
+.sortable-item:hover { background: #f9fafb; }
+@media (prefers-color-scheme: dark) {
+  .sortable-item:hover { background: #2d2d2d; }
+}
+.sortable-item.drag-over {
+  box-shadow: 0 0 0 2px var(--primary);
+  background: #f0f7ff;
+}
+.sortable-handle {
+  color: #9ca3af;
+  font-size: 1.25rem;
+  -webkit-user-select: none;
+  user-select: none;
+  cursor: grab;
+  flex-shrink: 0;
+}
+
+/* Choice options */
+.choice-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.choice-option {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+  background: white;
+}
+.choice-option:hover {
+  border-color: var(--primary);
+  background: #f0f7ff;
+}
+@media (prefers-color-scheme: dark) {
+  .choice-option {
+    background: #1a1a1a;
+    border-color: #3d3d3d;
+    color: #f5f5f5;
+  }
+  .choice-option:hover {
+    background: #2d2d2d;
+    border-color: var(--primary);
+  }
+  .choice-label { color: #f5f5f5; }
+}
+.choice-option input[type="radio"],
+.choice-option input[type="checkbox"] {
+  cursor: pointer;
+  accent-color: var(--primary);
+}
+.choice-option input:checked + .choice-label {
+  font-weight: 600;
+  color: var(--primary);
+}
+.choice-label {
+  font-size: 1rem;
+  color: #374151;
+  cursor: pointer;
+}
+
+/* Attachment cards */
+.attachment-card {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  background: white;
+  transition: all 0.15s;
+}
+.attachment-card:hover {
+  border-color: var(--primary);
+  background: #f0f7ff;
+}
+@media (prefers-color-scheme: dark) {
+  .attachment-card {
+    background: #1a1a1a;
+    border-color: #3d3d3d;
+  }
+  .attachment-card:hover {
+    background: #2d2d2d;
+    border-color: var(--primary);
+  }
+  .attachment-name { color: #f5f5f5; }
+}
+.attachment-icon {
+  font-size: 1.5rem;
+  flex-shrink: 0;
+  opacity: 0.7;
+}
+.attachment-info {
+  flex: 1;
+  min-width: 0;
+}
+.attachment-name {
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--base-content);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-bottom: 0.25rem;
+}
+.attachment-size {
+  font-size: 0.75rem;
+  color: #9ca3af;
+}
+.attachment-actions {
+  display: flex;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}.attachment-size { font-size: 0.75rem; color: #6b7280; }
+.attachment-preview { max-width: 100%; max-height: 200px; border-radius: 0.5rem; margin-top: 0.5rem; }
+.user-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; color: white; font-weight: 600; position: relative; flex-shrink: 0; line-height: 1; vertical-align: middle; -webkit-user-select: none; user-select: none; }
+.avatar-status { position: absolute; bottom: 0; right: 0; border-radius: 9999px; border: 2px solid white; }
+.avatar-status-online { background: #22c55e; }
+.avatar-status-offline { background: #9ca3af; }
+.avatar-group { display: inline-flex; align-items: center; }
+.avatar-group-item { margin-left: -8px; position: relative; }
+.avatar-group-item:first-child { margin-left: 0; }
+.avatar-group-item .user-avatar { border: 2px solid white; }
+.avatar-group-overflow { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 9999px; background: #e5e7eb; color: #374151; font-size: 0.75rem; font-weight: 600; margin-left: -8px; border: 2px solid white; position: relative; z-index: 0; }
+.status-label { display: inline-block; padding: 0.2rem 0.75rem; border-radius: 9999px; font-size: 0.7rem; font-weight: 500; white-space: nowrap; line-height: 1.4; }
+.info-bubble { display: inline-flex; align-items: center; justify-content: center; color: #9ca3af; cursor: help; position: relative; vertical-align: middle; }
+.info-bubble:hover { color: #6b7280; }
+.info-bubble::after { content: attr(data-tooltip); position: absolute; padding: 0.5rem 0.75rem; background: #1f2937; color: white; font-size: 0.75rem; border-radius: 0.5rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 50; max-width: 240px; white-space: normal; line-height: 1.4; }
+.info-bubble:hover::after { opacity: 1; }
+.info-bubble-top::after { bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
+.info-bubble-bottom::after { top: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
+.info-bubble-left::after { right: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
+.info-bubble-right::after { left: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
+.engagement-card { transition: box-shadow 0.15s, transform 0.15s; }
+.engagement-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); transform: translateY(-1px); }
+.engagement-card-progress { width: 100%; height: 4px; border-radius: 9999px; background: #e5e7eb; overflow: hidden; margin-top: 0.5rem; }
+.engagement-card-progress-bar { height: 100%; border-radius: 9999px; background: var(--primary); transition: width 0.3s ease; }
+.engagement-card-team { display: flex; align-items: center; }
+.mobile-card .card-body { padding: 0.75rem; }
+.mobile-card { border-radius: 0.5rem; }
+.sidebar-review-panel { position: fixed; right: 0; top: 0; bottom: 0; width: 320px; background: white; box-shadow: -2px 0 8px rgba(0,0,0,0.1); z-index: 40; display: flex; flex-direction: column; transition: transform 0.2s ease; }
+.sidebar-review-panel.sidebar-collapsed { transform: translateX(100%); }
+.sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem; border-bottom: 1px solid #e5e7eb; }
+.sidebar-toggle { font-size: 1.25rem; line-height: 1; }
+.sidebar-body { padding: 1rem; overflow-y: auto; flex: 1; }
+.sidebar-section { padding: 0.75rem 0; border-bottom: 1px solid #f3f4f6; display: flex; flex-direction: column; gap: 0.25rem; }
+.sidebar-section:last-child { border-bottom: none; }
+.sidebar-meta-row { display: flex; justify-content: space-between; align-items: center; padding: 0.25rem 0; }
+@media (max-width: 768px) {
+  .mobile-card { display: block; }
+  .desktop-table { display: none; }
+  .sidebar-review-panel { width: 100%; }
+}
+@media (min-width: 768px) {
+  .mobile-card-list { display: none; }
+  .desktop-table { display: block; }
+}
+.settings-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1rem; }
+@media (min-width: 768px) { .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+@media (min-width: 1024px) { .settings-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
+.settings-card { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem; background: white; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); text-decoration: none; color: inherit; transition: box-shadow 0.15s, transform 0.15s; cursor: pointer; border: 1px solid #e5e7eb; }
+.settings-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); transform: translateY(-1px); border-color: var(--primary); }
+.settings-card-icon { font-size: 2rem; line-height: 1; flex-shrink: 0; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; background: #eff6ff; border-radius: 0.5rem; }
+.settings-card-body { flex: 1; min-width: 0; }
+.settings-card-title { font-size: 1rem; font-weight: 600; color: #111827; margin-bottom: 0.25rem; }
+.settings-card-desc { font-size: 0.8rem; color: #6b7280; line-height: 1.4; }
+.settings-card-count { display: inline-block; padding: 0.25rem 0.5rem; border-radius: 9999px; background: #f3f4f6; color: #374151; font-size: 0.75rem; font-weight: 500; margin-top: 0.5rem; }
+.settings-back { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--primary); font-size: 1rem; text-decoration: none; margin-bottom: 1rem; }
+.settings-back:hover { text-decoration: underline; }
+.color-swatch { display: inline-block; width: 1.25rem; height: 1.25rem; border-radius: 0.25rem; border: 1px solid #d1d5db; vertical-align: middle; }
+.color-palette { display: flex; gap: 0.5rem; flex-wrap: wrap; }
+.color-palette-item { width: 2rem; height: 2rem; border-radius: 0.5rem; border: 2px solid transparent; cursor: pointer; transition: border-color 0.15s, transform 0.1s; }
+.color-palette-item:hover { transform: scale(1.1); }
+.color-palette-item.selected { border-color: #111827; box-shadow: 0 0 0 2px white, 0 0 0 4px #111827; }
+.toggle-wrap { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid #f3f4f6; }
+.toggle-wrap:last-child { border-bottom: none; }
+.toggle-label { font-size: 1rem; color: #374151; }
+.toggle-desc { font-size: 0.75rem; color: #9ca3af; margin-top: 0.25rem; }
+.toggle-switch { position: relative; display: inline-block; width: 2.75rem; height: 1.5rem; flex-shrink: 0; }
+.toggle-switch input { opacity: 0; width: 0; height: 0; }
+.toggle-slider { position: absolute; inset: 0; background: #d1d5db; border-radius: 9999px; cursor: pointer; transition: background 0.2s; }
+.toggle-slider::before { content: ''; position: absolute; width: 1.125rem; height: 1.125rem; left: 0.1875rem; bottom: 0.1875rem; background: white; border-radius: 9999px; transition: transform 0.2s; }
+.toggle-switch input:checked + .toggle-slider { background: var(--primary); }
+.toggle-switch input:checked + .toggle-slider::before { transform: translateX(1.25rem); }
+.integration-card { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; background: white; border-radius: 0.5rem; border: 1px solid #e5e7eb; }
+.integration-icon { font-size: 2rem; flex-shrink: 0; width: 3rem; text-align: center; }
+.integration-body { flex: 1; min-width: 0; }
+.integration-name { font-weight: 600; color: #111827; }
+.integration-meta { font-size: 0.75rem; color: #6b7280; margin-top: 0.25rem; }
+.integration-status { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 500; }
+.integration-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; }
+.integration-dot-on { background: #22c55e; }
+.integration-dot-off { background: #ef4444; }
+.inline-form { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 1rem; margin-top: 0.75rem; }
+.inline-form-row { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; }
+.inline-form-field { display: flex; flex-direction: column; gap: 0.25rem; }
+.inline-form-field label { font-size: 0.75rem; font-weight: 500; color: #6b7280; }
+.reorder-btn { padding: 0.25rem; background: none; border: 1px solid #d1d5db; border-radius: 0.25rem; cursor: pointer; font-size: 0.75rem; line-height: 1; }
+.reorder-btn:hover { background: #f3f4f6; }
+@media (prefers-color-scheme: dark) {
+  .reorder-btn { border-color: #3d3d3d; }
+  .reorder-btn:hover { background: #2d2d2d; }
+}
+.filter-bar { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1rem; padding: 0.75rem; background: #f9fafb; border-radius: 0.5rem; border: 1px solid #e5e7eb; }
+.filter-field { display: flex; flex-direction: column; gap: 0.25rem; }
+.filter-field label { font-size: 0.75rem; font-weight: 500; color: #6b7280; }
+.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 100; }
+.modal-dialog { background: white; border-radius: 0.75rem; padding: 1.5rem; max-width: 520px; width: 90%; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); }
+.modal-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; color: #111827; }
+.modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #e5e7eb; }
+.modal-form-group { margin-bottom: 1rem; }
+.modal-form-group label { display: block; font-size: 1rem; font-weight: 500; color: #374151; margin-bottom: 0.25rem; }
+.risk-badge { display: inline-block; padding: 0.5rem 1rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; }
+.risk-low { background: #d1fae5; color: #065f46; }
+.risk-medium { background: #fef3c7; color: #92400e; }
+.risk-high { background: #fed7aa; color: #9a3412; }
+.risk-critical { background: #fee2e2; color: #991b1b; }
+.activity-item { display: flex; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid #f3f4f6; }
+.activity-item:last-child { border-bottom: none; }
+.activity-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; margin-top: 0.5rem; flex-shrink: 0; }
+.activity-body { flex: 1; min-width: 0; }
+.activity-text { font-size: 1rem; color: #374151; }
+.activity-time { font-size: 0.75rem; color: #9ca3af; margin-top: 0.25rem; }
+.checkbox-group { display: flex; flex-direction: column; gap: 0.5rem; }
+.checkbox-group label { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; color: #374151; cursor: pointer; }
+.client-info-row { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid #f3f4f6; }
+.client-info-row:last-child { border-bottom: none; }
+.client-info-label { font-size: 1rem; color: #6b7280; }
+.client-info-value { font-size: 1rem; font-weight: 500; color: #111827; }
+.mobile-menu-toggle { display: none; }
+.mobile-nav-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 90; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
+.mobile-nav-overlay.open { opacity: 1; pointer-events: auto; }
+.mobile-nav-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: 280px; max-width: 80vw; background: white; z-index: 95; transform: translateX(-100%); transition: transform 0.25s ease; box-shadow: 2px 0 8px rgba(0,0,0,0.15); display: flex; flex-direction: column; }
+.mobile-nav-drawer.open { transform: translateX(0); }
+.mobile-nav-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem; border-bottom: 1px solid #e5e7eb; }
+.mobile-nav-items { flex: 1; overflow-y: auto; padding: 0.5rem 0; }
+.mobile-nav-item { display: block; padding: 0.75rem 1rem; color: #374151; font-size: 1rem; text-decoration: none; transition: background 0.15s; }
+.mobile-nav-item:hover { background: #f3f4f6; }
+@media (prefers-color-scheme: dark) {
+  .mobile-nav-item { color: #f5f5f5; }
+  .mobile-nav-item:hover { background: #2d2d2d; }
+}
+.mobile-nav-footer { padding: 1rem; border-top: 1px solid #e5e7eb; }
+@media (max-width: 768px) {
+  .mobile-menu-toggle { display: inline-flex; }
+}
+
+/* Dialog overlay (reusable) */
+.dialog-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 100; }
+.dialog-panel { background: white; border-radius: 0.75rem; padding: 1.5rem; max-width: 480px; width: 90%; max-height: 85vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.2); }
+.dialog-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
+.dialog-title { font-size: 1.125rem; font-weight: 600; color: #111827; }
+.dialog-close { background: none; border: none; font-size: 1.5rem; color: #9ca3af; cursor: pointer; line-height: 1; padding: 0; }
+.dialog-close:hover { color: #374151; }
+@media (prefers-color-scheme: dark) {
+  .dialog-close { color: #9ca3af; }
+  .dialog-close:hover { color: #f5f5f5; }
+}
+.dialog-body { margin-bottom: 1.25rem; }
+.dialog-footer { display: flex; gap: 0.5rem; justify-content: flex-end; }
+
+/* F-RFI-37: Color Picker Dialog */
+.color-picker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; padding: 0.5rem 0; }
+.cpd-swatch { width: 100%; aspect-ratio: 1; border-radius: 0.5rem; border: 3px solid transparent; cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
+.cpd-swatch:hover { transform: scale(1.1); }
+.cpd-swatch.cpd-selected { border-color: #111827; box-shadow: 0 0 0 2px white, 0 0 0 4px #111827; }
+.cpd-preview { display: inline-block; width: 24px; height: 24px; border-radius: 0.5rem; border: 1px solid #e5e7eb; vertical-align: middle; cursor: pointer; }
+
+/* F-UI-06: Date Choice Dialog */
+.date-presets { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
+.date-preset-btn { padding: 0.5rem 0.75rem; border-radius: 9999px; border: 1px solid #e5e7eb; background: white; cursor: pointer; font-size: 0.8rem; color: #374151; transition: background 0.15s, border-color 0.15s; }
+.date-preset-btn:hover { background: #f0f7ff; border-color: var(--primary); color: var(--primary); }
+
+/* F-LIFE-02: Stage Transition Dialog */
+.stage-trans-arrow { display: flex; align-items: center; justify-content: center; padding: 0.75rem 0; }
+.stage-trans-block { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-radius: 0.5rem; }
+.stage-trans-current { background: #f0f7ff; border: 1px solid #bfdbfe; }
+.stage-trans-next { background: #f0fdf4; border: 1px solid #bbf7d0; }
+.stage-trans-dot { width: 12px; height: 12px; border-radius: 9999px; flex-shrink: 0; }
+
+/* F-LIFE-04: Stage Pipeline */
+.stage-pipeline { display: flex; align-items: center; gap: 0; overflow-x: auto; padding: 0.5rem 0; }
+.spl-pill { display: flex; align-items: center; justify-content: center; padding: 0.5rem 1rem; font-size: 0.75rem; font-weight: 500; white-space: nowrap; border: 1px solid #e5e7eb; position: relative; cursor: default; transition: box-shadow 0.15s; }
+.spl-pill:first-child { border-radius: 9999px 0 0 9999px; }
+.spl-pill:last-child { border-radius: 0 9999px 9999px 0; }
+.spl-past { opacity: 0.85; }
+.spl-past::after { content: ''; position: absolute; inset: 0; background: rgba(34,197,94,0.08); pointer-events: none; }
+.spl-current { font-weight: 700; z-index: 1; box-shadow: 0 0 0 2px rgba(37,99,235,0.5); animation: spl-pulse 2s ease-in-out infinite; }
+.spl-future { background: #f9fafb; color: #6b7280; border-color: #e5e7eb; }
+.spl-clickable { cursor: pointer; }
+.spl-clickable:hover { box-shadow: 0 0 0 2px rgba(37,99,235,0.3); }
+@keyframes spl-pulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(37,99,235,0.5); } 50% { box-shadow: 0 0 0 4px rgba(37,99,235,0.25); } }
+
+/* F-DET-05: Activity Timeline */
+.act-timeline { position: relative; padding-left: 2rem; }
+.act-timeline::before { content: ''; position: absolute; left: 0.75rem; top: 0; bottom: 0; width: 2px; background: #e5e7eb; }
+.act-tl-item { position: relative; padding-bottom: 1.25rem; }
+.act-tl-item:last-child { padding-bottom: 0; }
+.act-tl-icon { position: absolute; left: -2rem; top: 0; width: 1.5rem; height: 1.5rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; border: 2px solid white; z-index: 1; }
+.act-tl-created { background: #dbeafe; color: #1e40af; }
+.act-tl-updated { background: #fef3c7; color: #92400e; }
+.act-tl-status_changed { background: #ede9fe; color: #5b21b6; }
+.act-tl-commented { background: #d1fae5; color: #065f46; }
+.act-tl-assigned { background: #fce7f3; color: #9d174d; }
+.act-tl-uploaded { background: #e0e7ff; color: #3730a3; }
+.act-tl-content { background: white; border: 1px solid #f3f4f6; border-radius: 0.5rem; padding: 0.75rem 1rem; }
+.act-tl-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
+.act-tl-desc { font-size: 1rem; color: #374151; }
+.act-tl-time { font-size: 0.7rem; color: #9ca3af; }
+.act-tl-more { display: flex; align-items: center; justify-content: center; padding: 0.5rem; margin-top: 0.5rem; }
+
+/* F-TEAM-01: Team Assignment Dialog */
+.tad-search { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #e5e7eb; border-radius: 0.5rem; font-size: 1rem; margin-bottom: 0.5rem; }
+.tad-search:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(37,99,235,0.15); }
+.tad-list { max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.25rem; }
+.tad-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; cursor: pointer; transition: background 0.1s; }
+.tad-row:hover { background: #f3f4f6; }
+@media (prefers-color-scheme: dark) {
+  .tad-row:hover { background: #2d2d2d; }
+  .tad-name, .tad-email { color: #f5f5f5; }
+}
+.tad-row input[type="checkbox"] { flex-shrink: 0; accent-color: var(--primary); width: 16px; height: 16px; }
+.tad-name { font-size: 1rem; color: #111827; }
+.tad-email { font-size: 0.75rem; color: #6b7280; }
+
+/* F-TEAM-02: Team Selector */
+.ts-wrap { position: relative; }
+.ts-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; min-height: 1.5rem; }
+.ts-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.2rem 0.5rem; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 9999px; font-size: 0.75rem; color: #1e40af; }
+.ts-badge-x { cursor: pointer; font-size: 1rem; line-height: 1; color: #6b7280; }
+.ts-badge-x:hover { color: #ef4444; }
+@media (prefers-color-scheme: dark) {
+  .ts-badge { background: #1e3a8a; border-color: #1e40af; color: #93c5fd; }
+}
+.ts-dropdown { border: 1px solid #e5e7eb; border-radius: 0.5rem; background: white; box-shadow: 0 4px 12px rgba(0,0,0,0.08); max-height: 0; overflow: hidden; transition: max-height 0.2s ease; }
+.ts-dropdown.ts-open { max-height: 320px; overflow-y: auto; }
+
+/* M-ARCHIVE-01: Archive Context */
+.archive-ctx { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem; background: #fef3c7; border-radius: 0.5rem; margin-bottom: 1rem; font-size: 1rem; color: #92400e; }
+.archive-type-input { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #e5e7eb; border-radius: 0.5rem; font-size: 1rem; margin-top: 0.5rem; }
+.archive-type-input:focus { outline: none; border-color: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,0.15); }
+
+/* M-STATUS-01/02: Review Toggles */
+.rvw-toggle { display: inline-flex; align-items: center; gap: 0.75rem; }
+.rvw-toggle-track { position: relative; width: 44px; height: 24px; background: #d1d5db; border-radius: 9999px; cursor: pointer; transition: background 0.2s; flex-shrink: 0; }
+.rvw-toggle-track.rvw-on { background: var(--primary); }
+.rvw-toggle-track.rvw-on.rvw-green { background: #22c55e; }
+.rvw-toggle-track.rvw-on.rvw-purple { background: #8b5cf6; }
+.rvw-toggle-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: white; border-radius: 9999px; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
+.rvw-toggle-track.rvw-on .rvw-toggle-knob { transform: translateX(20px); }
+.rvw-toggle-label { font-size: 1rem; font-weight: 500; color: #374151; display: flex; align-items: center; gap: 0.5rem; }
+
+/* M-STATUS-03: Bulk Resolve */
+.bulk-resolve-count { display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 700; color: #dc2626; padding: 1rem; background: #fef2f2; border-radius: 0.75rem; margin-bottom: 0.75rem; }
+.bulk-resolve-label { text-align: center; font-size: 1rem; color: #6b7280; margin-bottom: 1rem; }
+
+/* Review Tab Bar */
+.review-tab-bar { display: flex; gap: 0; border-bottom: 2px solid #e5e7eb; margin-bottom: 1rem; overflow-x: auto; }
+.review-tab { padding: 0.75rem 1rem; font-size: 1rem; font-weight: 500; color: #6b7280; background: none; border: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; transition: color 0.15s, border-color 0.15s; }
+.review-tab:hover { color: #374151; }
+@media (prefers-color-scheme: dark) {
+  .review-tab { color: #9ca3af; }
+  .review-tab:hover { color: #f5f5f5; }
+  .review-tab-active { color: var(--primary); }
+  .review-tab-count { background: #1e40af; color: #93c5fd; }
+  .review-tab-active .review-tab-count { background: #1e40af; color: var(--primary); }
+}
+.review-tab-active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
+.review-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.5rem; border-radius: 9999px; background: #e5e7eb; color: #374151; font-size: 0.7rem; font-weight: 600; margin-left: 0.5rem; }
+.review-tab-active .review-tab-count { background: #eff6ff; color: var(--primary); }
+.review-hidden { display: none; }
+
+/* Review Group List */
+.review-grouped-list { display: flex; flex-direction: column; gap: 0.5rem; }
+.review-group { border: 1px solid #e5e7eb; border-radius: 0.5rem; overflow: hidden; }
+.review-group-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; background: #f9fafb; cursor: pointer; -webkit-user-select: none; user-select: none; }
+.review-group-header:hover { background: #f3f4f6; }
+@media (prefers-color-scheme: dark) {
+  .review-group { border-color: #3d3d3d; }
+  .review-group-header { background: #2d2d2d; color: #f5f5f5; }
+  .review-group-header:hover { background: #3d3d3d; }
+}
+.review-group-arrow { font-size: 0.75rem; transition: transform 0.2s; }
+.review-group-collapsed .review-group-arrow { transform: rotate(-90deg); }
+.review-group-collapsed .review-group-body { display: none; }
+.review-group-body { }
+.review-group-item { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 1rem; border-top: 1px solid #f3f4f6; cursor: pointer; transition: background 0.1s; font-size: 1rem; }
+.review-group-item:hover { background: #f9fafb; }
+@media (prefers-color-scheme: dark) {
+  .review-group-item { border-color: #2d2d2d; color: #f5f5f5; }
+  .review-group-item:hover { background: #2d2d2d; }
+}
+
+/* Review Section Rows */
+.review-section-row { border: 1px solid #e5e7eb; border-radius: 0.5rem; margin-bottom: 0.5rem; overflow: hidden; }
+.review-section-header { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: #f9fafb; cursor: pointer; -webkit-user-select: none; user-select: none; }
+.review-section-header:hover { background: #f3f4f6; }
+@media (prefers-color-scheme: dark) {
+  .review-section-row { border-color: #3d3d3d; }
+  .review-section-header { background: #2d2d2d; color: #f5f5f5; }
+  .review-section-header:hover { background: #3d3d3d; }
+}
+.review-section-body { display: none; padding: 0.75rem 1rem; }
+.review-section-expanded .review-section-body { display: block; }
+.review-section-expanded .review-group-arrow { transform: rotate(0deg); }
+.review-section-stats { padding: 0.5rem 0; }
+
+/* Review Context Menu */
+.review-ctx-menu { position: absolute; z-index: 100; background: white; border-radius: 0.5rem; box-shadow: 0 10px 25px rgba(0,0,0,0.12); min-width: 160px; padding: 0.5rem 0; border: 1px solid #e5e7eb; }
+.ctx-item { padding: 0.5rem 1rem; font-size: 1rem; color: #374151; cursor: pointer; transition: background 0.1s; }
+.ctx-item:hover { background: #f3f4f6; }
+.ctx-danger { color: #ef4444; }
+.ctx-danger:hover { background: #fef2f2; }
+@media (prefers-color-scheme: dark) {
+  .review-ctx-menu { background: #1a1a1a; border-color: #3d3d3d; }
+  .ctx-item { color: #f5f5f5; }
+  .ctx-item:hover { background: #2d2d2d; }
+  .ctx-danger:hover { background: #7f1d1d; }
+}
+.ctx-sep { height: 1px; background: #e5e7eb; margin: 0.25rem 0; }
+
+/* Home Panel Tabs */
+.home-panel { min-height: 100px; }
+
+/* Splash Screen */
+.splash-screen { position: fixed; inset: 0; z-index: 9999; background: white; display: flex; align-items: center; justify-content: center; transition: opacity 0.4s ease; }
+.splash-screen.splash-hide { opacity: 0; pointer-events: none; }
+.splash-content { text-align: center; }
+.splash-logo { width: 64px; height: 64px; border-radius: 1rem; display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem; font-weight: 700; margin: 0 auto 1rem; }
+.splash-name { font-size: 1.5rem; font-weight: 600; color: #111827; margin-bottom: 1.5rem; }
+.splash-spinner { display: flex; justify-content: center; }
+.splash-spinner-ring { width: 32px; height: 32px; border: 3px solid #e5e7eb; border-top-color: var(--splash-color, var(--primary)); border-radius: 9999px; animation: splash-spin 0.8s linear infinite; }
+@keyframes splash-spin { to { transform: rotate(360deg); } }
+
+/* Service Worker Update Banner */
+.sw-banner { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 200; background: #1e293b; color: white; padding: 0.75rem 1rem; border-radius: 0.75rem; display: flex; align-items: center; gap: 0.75rem; box-shadow: 0 8px 25px rgba(0,0,0,0.15); }
+.sw-banner-text { font-size: 1rem; white-space: nowrap; }
+
+/* DataGrid */
+.dg-wrapper { overflow-x: auto; border: 1px solid #e5e7eb; border-radius: 0.5rem; }
+.dg-table { width: 100%; border-collapse: collapse; }
+.dg-table th { padding: 0.75rem 1rem; background: #f9fafb; font-size: 0.75rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.025em; border-bottom: 1px solid #e5e7eb; }
+.dg-table td { padding: 0.75rem 1rem; font-size: 1rem; border-bottom: 1px solid #f3f4f6; }
+.dg-sortable { cursor: pointer; -webkit-user-select: none; user-select: none; }
+.dg-sortable:hover { color: var(--primary); }
+.dg-sort-indicator { margin-left: 0.25rem; font-size: 0.75rem; }
+.dg-filter { margin-top: 0.5rem; }
+.dg-filter-input { width: 100%; padding: 0.25rem 0.5rem; border: 1px solid #e5e7eb; border-radius: 0.25rem; font-size: 0.75rem; }
+.dg-filter-input:focus { outline: none; border-color: var(--primary); }
+.dg-group-header { background: #f3f4f6; cursor: pointer; -webkit-user-select: none; user-select: none; }
+.dg-group-header td { font-weight: 600; font-size: 1rem; padding: 0.5rem 0.75rem; }
+.dg-group-arrow { display: inline-block; margin-right: 0.5rem; font-size: 0.7rem; transition: transform 0.15s; }
+.dg-group-count { font-weight: 400; color: #6b7280; font-size: 0.8rem; margin-left: 0.5rem; }
+.dg-data-row:hover { background: #f9fafb; }
+.dg-expand-col { width: 28px; padding: 0.5rem; }
+.dg-expand-btn { background: none; border: 1px solid #d1d5db; border-radius: 0.25rem; cursor: pointer; font-size: 0.75rem; padding: 0.25rem 0.5rem; color: #6b7280; transition: background 0.1s; }
+.dg-expand-btn:hover { background: #f3f4f6; }
+.dg-expand-open { transform: rotate(90deg); }
+.dg-detail-row { background: #fafbfc; }
+.dg-detail-panel { padding: 0.75rem; border-left: 3px solid var(--primary); }
+
+/* Collapsible Sidebar */
+
+/* ============================================
+   MOBILE-FIRST RESPONSIVE ENHANCEMENTS
+   ============================================ */
+
+/* Touch-friendly base sizes */
+@media (max-width: 768px) {
+  /* Base html adjustments for mobile */
+  html {
+    font-size: 14px;
+  }
+
+  body {
+    -webkit-text-size-adjust: 100%;
+    overscroll-behavior-y: contain;
+  }
+
+  /* Container adjustments */
+  .container, .container-lg {
+    padding-left: var(--page-gutter, 0.75rem);
+    padding-right: var(--page-gutter, 0.75rem);
+  }
+
+  /* Navbar mobile */
+  .navbar {
+    padding: 0.5rem 0.75rem;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+  .navbar-start, .navbar-end {
+    gap: 0.5rem;
+  }
+  .navbar-brand {
+    font-size: 1rem;
+  }
+
+  /* Button touch targets - minimum 44px */
+  .btn {
+    min-height: 44px;
+    min-width: 44px;
+    padding: 0.75rem 1rem;
+    font-size: 0.9375rem;
+  }
+  .btn-xs {
+    min-height: 32px;
+    min-width: 32px;
+    padding: 0.5rem 0.5rem;
+    font-size: 0.75rem;
+  }
+  .btn-sm {
+    min-height: 36px;
+    min-width: 36px;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.8125rem;
+  }
+  .btn-lg {
+    min-height: 52px;
+    padding: 1rem 1.5rem;
+    font-size: 1.0625rem;
+  }
+  .btn-block-mobile {
+    width: 100%;
+    justify-content: center;
+  }
+
+  /* Form inputs - larger touch targets */
+  .form-input,
+  .form-textarea,
+  input[type="text"],
+  input[type="email"],
+  input[type="password"],
+  input[type="number"],
+  input[type="date"],
+  input[type="search"],
+  select,
+  textarea {
+    min-height: 44px;
+    padding: 0.75rem 1rem;
+    font-size: 1rem;
+    -webkit-appearance: none;
+    appearance: none;
+  }
+  select {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 0.75rem center;
+    padding-right: 2.25rem;
+  }
+  textarea {
+    min-height: 100px;
+  }
+  .form-group {
+    margin-bottom: 1rem;
+  }
+  .form-label {
+    font-size: 0.9375rem;
+    margin-bottom: 0.5rem;
+  }
+
+  /* Card mobile optimizations */
+  .card {
+    margin-left: -0.75rem;
+    margin-right: -0.75rem;
+    border-radius: 0;
+    border-left: none;
+    border-right: none;
+  }
+  .card-body {
+    padding: 1rem;
+  }
+  .card-header, .card-footer {
+    padding: 1rem;
+  }
+
+  /* Table mobile - horizontal scroll + card transform */
+  .table-container {
+    margin-left: -0.75rem;
+    margin-right: -0.75rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  table {
+    min-width: 600px;
+  }
+  th, td {
+    padding: 0.75rem;
+    font-size: 1rem;
+  }
+  th {
+    font-size: 0.75rem;
+  }
+
+  /* Grid mobile */
+  .grid {
+    gap: 0.75rem;
+  }
+  .grid-cols-1, .grid-cols-2, .grid-cols-3, .grid-cols-4 {
+    grid-template-columns: 1fr;
+  }
+
+  /* Flex mobile */
+  .flex, .flex-col, .flex-wrap {
+    gap: 0.5rem;
+  }
+  .flex-wrap-mobile {
+    flex-wrap: wrap;
+  }
+  .flex-col-mobile {
+    flex-direction: column;
+  }
+  .flex-center-mobile {
+    justify-content: center;
+    align-items: center;
+  }
+
+  /* Spacing mobile */
+  .p-1, .p-2, .p-3, .p-4, .p-6 {
+    padding: 0.75rem;
+  }
+  .py-2, .py-3, .py-4 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .px-2, .px-4 {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+  .m-0, .m-1, .m-2, .m-4 {
+    margin: 0.5rem;
+  }
+  .mb-2, .mb-3, .mb-4, .mb-6 {
+    margin-bottom: 0.75rem;
+  }
+  .mt-2, .mt-3, .mt-4, .mt-6 {
+    margin-top: 0.75rem;
+  }
+
+  /* Modal/Dialog mobile - full screen */
+  .modal-overlay,
+  .confirm-overlay,
+  .dialog-overlay {
+    align-items: flex-end;
+    padding: 0;
+  }
+  .modal-dialog,
+  .confirm-dialog,
+  .modal-content,
+  .dialog-panel {
+    width: 100%;
+    max-width: 100%;
+    max-height: 90vh;
+    border-radius: 1rem 1rem 0 0;
+    padding: 1.25rem;
+    margin: 0;
+    animation: slide-up-mobile 0.25s ease-out;
+  }
+  .modal-content {
+    max-height: 85vh;
+  }
+  .modal-title, .confirm-title, .dialog-title {
+    font-size: 1.25rem;
+  }
+  .modal-actions, .confirm-actions, .dialog-footer {
+    flex-direction: column;
+    gap: 0.5rem;
+    padding-top: 1rem;
+  }
+  .modal-actions .btn, .confirm-actions .btn, .dialog-footer .btn {
+    width: 100%;
+    justify-content: center;
+  }
+  @keyframes slide-up-mobile {
+    from { transform: translateY(100%); }
+    to { transform: translateY(0); }
+  }
+
+  /* Toast mobile */
+  .toast-container {
+    left: 0.5rem;
+    right: 0.5rem;
+    top: 0.5rem;
+  }
+  .toast {
+    max-width: 100%;
+    width: 100%;
+  }
+
+  /* Dropdown mobile */
+  .dropdown-menu {
+    position: fixed;
+    left: 0.5rem;
+    right: 0.5rem;
+    top: auto;
+    bottom: 0;
+    width: auto;
+    max-width: 100%;
+    border-radius: 1rem 1rem 0 0;
+    transform: translateY(100%);
+    transition: transform 0.2s ease;
+  }
+  .dropdown.open .dropdown-menu {
+    transform: translateY(0);
+  }
+
+  /* Stats row mobile */
+  .stats-row {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.75rem;
+  }
+  .stat-card {
+    padding: 1rem;
+  }
+  .stat-card-value {
+    font-size: 1.5rem;
+  }
+  .stat-card-label {
+    font-size: 0.75rem;
+  }
+
+  /* Breadcrumb mobile */
+  .breadcrumb {
+    font-size: 0.8125rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Page header mobile */
+  .page-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+  }
+  .page-title {
+    font-size: 1.25rem;
+  }
+
+  /* Table toolbar mobile */
+  .table-toolbar {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.75rem;
+    padding: 1rem;
+  }
+  .table-search {
+    min-width: unset;
+    width: 100%;
+  }
+  .table-filter {
+    width: 100%;
+  }
+  .table-filter select {
+    width: 100%;
+  }
+  .table-count {
+    text-align: center;
+    margin-left: 0;
+  }
+
+  /* Tab bar mobile */
+  .tab-bar {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    flex-wrap: nowrap;
+    padding: 0.5rem;
+    gap: 0.25rem;
+    scrollbar-width: none;
+  }
+  .tab-bar::-webkit-scrollbar {
+    display: none;
+  }
+  .tab-btn {
+    flex-shrink: 0;
+    padding: 0.75rem 1rem;
+    font-size: 1rem;
+  }
+
+  /* Badge/Pill mobile */
+  .badge, .pill {
+    font-size: 0.6875rem;
+    padding: 0.25rem 0.5rem;
+  }
+
+  /* Empty state mobile */
+  .empty-state {
+    padding: 2rem 1rem;
+  }
+  .empty-state-icon {
+    font-size: 2.5rem;
+  }
+  .empty-state-title {
+    font-size: 1rem;
+  }
+  .empty-state-msg {
+    font-size: 0.8125rem;
+    max-width: 100%;
+  }
+
+  /* Filter bar mobile */
+  .filter-bar {
+    flex-direction: column;
+    padding: 0.75rem;
+    gap: 0.5rem;
+  }
+  .filter-field {
+    width: 100%;
+  }
+  .filter-field label {
+    font-size: 0.8125rem;
+  }
+  .filter-field input,
+  .filter-field select {
+    width: 100%;
+  }
+
+  /* Inline form mobile */
+  .inline-form {
+    padding: 0.75rem;
+  }
+  .inline-form-row {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .inline-form-field {
+    width: 100%;
+  }
+
+  /* Settings grid mobile */
+  .settings-grid {
+    grid-template-columns: 1fr;
+  }
+  .settings-card {
+    padding: 1rem;
+  }
+  .settings-card-icon {
+    width: 2.5rem;
+    height: 2.5rem;
+    font-size: 1.5rem;
+  }
+  .settings-card-title {
+    font-size: 0.9375rem;
+  }
+  .settings-card-desc {
+    font-size: 0.75rem;
+  }
+
+  /* Avatar mobile */
+  .user-avatar {
+    width: 36px;
+    height: 36px;
+    font-size: 1rem;
+  }
+
+  /* Engagement pipeline mobile */
+  .engagement-pipeline,
+  .stage-pipeline {
+    padding: 0.5rem;
+    gap: 0.25rem;
+  }
+  .stage-pill {
+    padding: 0.5rem 0.75rem;
+    font-size: 0.6875rem;
+  }
+
+  /* Activity item mobile */
+  .activity-item {
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0.75rem 0;
+  }
+
+  /* Review tab bar mobile */
+  .review-tab-bar {
+    padding: 0 0.5rem;
+  }
+  .review-tab {
+    padding: 0.5rem 0.75rem;
+    font-size: 0.8125rem;
+  }
+  .review-tab-count {
+    min-width: 1rem;
+    height: 1rem;
+    font-size: 0.75rem;
+  }
+
+  /* Toggle switch mobile */
+  .toggle-wrap {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+    padding: 0.75rem 0;
+  }
+  .toggle-label {
+    font-size: 0.9375rem;
+  }
+  .toggle-desc {
+    font-size: 0.75rem;
+  }
+
+  /* Form section mobile */
+  .form-section {
+    padding: 1rem;
+    margin-left: -0.75rem;
+    margin-right: -0.75rem;
+    border-radius: 0;
+    border-left: none;
+    border-right: none;
+  }
+  .form-section-title {
+    font-size: 1rem;
+    padding-bottom: 0.75rem;
+  }
+  .form-grid, .form-grid-3 {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+  .form-actions {
+    flex-direction: column;
+    padding-top: 1rem;
+  }
+  .form-actions .btn {
+    width: 100%;
+    justify-content: center;
+  }
+
+  /* DataGrid mobile */
+  .dg-wrapper {
+    margin-left: -0.75rem;
+    margin-right: -0.75rem;
+    border-radius: 0;
+    border-left: none;
+    border-right: none;
+  }
+  .dg-table {
+    min-width: 500px;
+  }
+  .dg-filter-input {
+    font-size: 1rem;
+    padding: 0.5rem;
+  }
+
+  /* Sidebar review panel mobile */
+  .sidebar-review-panel {
+    width: 100%;
+    max-width: 100%;
+  }
+
+  /* Alert strip mobile */
+  .alert-strip {
+    flex-direction: column;
+    gap: 0.5rem;
+    text-align: center;
+    padding: 1rem;
+  }
+
+  /* Cards list mobile */
+  .card-list-mobile {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  .card-list-mobile .card {
+    margin: 0;
+    border-radius: 0.5rem;
+    border: 1px solid #e5e7eb;
+  }
+
+  /* Text sizes mobile */
+  .text-xs { font-size: 0.6875rem; }
+  .text-sm { font-size: 0.8125rem; }
+  .text-base { font-size: 0.9375rem; }
+  .text-lg { font-size: 1.0625rem; }
+  .text-xl { font-size: 1.1875rem; }
+  .text-2xl { font-size: 1.375rem; }
+  .text-3xl { font-size: 1.75rem; }
+
+  /* Show/hide mobile helpers */
+  .hide-mobile { display: none !important; }
+  .show-mobile { display: block !important; }
+  .show-mobile-flex { display: flex !important; }
+  .show-mobile-inline-flex { display: inline-flex !important; }
+
+  /* Full width mobile */
+  .w-full-mobile { width: 100% !important; }
+
+  /* Margin mobile helpers */
+  .mb-0-mobile { margin-bottom: 0 !important; }
+  .mt-2-mobile { margin-top: 0.5rem !important; }
+  .mt-4-mobile { margin-top: 1rem !important; }
+  .mb-2-mobile { margin-bottom: 0.5rem !important; }
+  .mb-4-mobile { margin-bottom: 1rem !important; }
+
+  /* Padding mobile helpers */
+  .p-0-mobile { padding: 0 !important; }
+  .p-2-mobile { padding: 0.5rem !important; }
+  .p-4-mobile { padding: 1rem !important; }
+
+  /* Overflow mobile */
+  .overflow-x-auto-mobile {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* Sticky mobile header */
+  .sticky-mobile {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    background: inherit;
+  }
+
+  /* Touch scroll container */
+  .touch-scroll {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+  }
+  .touch-scroll::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Mobile bottom spacing for nav */
+  .mobile-nav-spacer {
+    height: 80px;
+  }
+
+  /* Action bar mobile (fixed bottom) */
+  .action-bar-mobile {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: white;
+    border-top: 1px solid #e5e7eb;
+    padding: 0.75rem;
+    display: flex;
+    gap: 0.5rem;
+    z-index: 50;
+    box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
+  }
+  .action-bar-mobile .btn {
+    flex: 1;
+    justify-content: center;
+  }
+
+  /* Safe area inset for notched devices */
+  @supports (padding-bottom: env(safe-area-inset-bottom)) {
+    .action-bar-mobile {
+      padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
+    }
+  }
+}
+
+/* Tablet breakpoint (768px - 1023px) */
+@media (min-width: 768px) and (max-width: 1023px) {
+  html {
+    font-size: 14px;
+  }
+
+  .container, .container-lg {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .grid-cols-2-tablet {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .grid-cols-3-tablet {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .stats-row {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .card {
+    margin-left: 0;
+    margin-right: 0;
+    border-radius: 0.5rem;
+    border: 1px solid #e5e7eb;
+  }
+
+  .modal-dialog,
+  .confirm-dialog,
+  .modal-content,
+  .dialog-panel {
+    max-width: 90%;
+  }
+
+  .hide-tablet { display: none !important; }
+  .show-tablet { display: block !important; }
+}
+
+/* Small mobile (under 480px) */
+@media (max-width: 479px) {
+  html {
+    font-size: 13px;
+  }
+
+  .btn {
+    padding: 0.5625rem 1rem;
+    font-size: 1rem;
+  }
+
+  .stats-row {
+    grid-template-columns: 1fr;
+  }
+
+  .table-toolbar {
+    padding: 0.75rem;
+  }
+
+  .form-input, select, textarea {
+    font-size: 16px; /* Prevents iOS zoom on focus */
+  }
+
+  .page-title {
+    font-size: 1.125rem;
+  }
+
+  .hide-xs { display: none !important; }
+}
+
+/* Large desktop (1024px+) */
+@media (min-width: 1024px) {
+  .hide-desktop { display: none !important; }
+}
+
+/* Print styles */
+@media print {
+  .no-print {
+    display: none !important;
+  }
+  body {
+    font-size: 12pt;
+  }
+  .card, .table-wrap {
+    box-shadow: none;
+    border: 1px solid #ccc;
+  }
+}
+.sidebar-collapsible { position: relative; width: 240px; min-height: 100vh; background: white; border-right: 1px solid #e5e7eb; display: flex; flex-direction: column; transition: width 0.2s ease; flex-shrink: 0; }
+.sidebar-collapsible.sidebar-collapsed { width: 48px; overflow: hidden; }
+.sidebar-collapsed .sidebar-inner { opacity: 0; pointer-events: none; }
+.sidebar-collapsed .sidebar-collapse-btn { opacity: 1; pointer-events: auto; }
+.sidebar-inner { padding: 0.5rem; flex: 1; opacity: 1; transition: opacity 0.15s; }
+.sidebar-collapse-btn { background: none; border: none; cursor: pointer; padding: 0.5rem; font-size: 1.25rem; color: #6b7280; width: 100%; text-align: center; }
+.sidebar-collapse-btn:hover { color: #374151; background: #f3f4f6; border-radius: 0.5rem; }
+@media (prefers-color-scheme: dark) {
+  .sidebar-collapse-btn:hover { color: #f5f5f5; background: #2d2d2d; }
+}
+.sidebar-section { margin-bottom: 0.25rem; }
+.sidebar-section-header { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; font-size: 0.75rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; -webkit-user-select: none; user-select: none; }
+.sidebar-section-header:hover { color: #374151; }
+@media (prefers-color-scheme: dark) {
+  .sidebar-section-header { color: #9ca3af; }
+  .sidebar-section-header:hover { color: #f5f5f5; }
+}
+.sidebar-section-arrow { font-size: 0.75rem; transition: transform 0.2s; }
+.sidebar-section-closed .sidebar-section-body { display: none; }
+.sidebar-section-closed .sidebar-section-arrow { transform: rotate(-90deg); }
+.sidebar-link { display: block; padding: 0.5rem 0.75rem; font-size: 1rem; color: #374151; text-decoration: none; border-radius: 0.5rem; transition: background 0.1s; }
+.sidebar-link:hover { background: #f3f4f6; }
+@media (prefers-color-scheme: dark) {
+  .sidebar-link { color: #f5f5f5; }
+  .sidebar-link:hover { background: #2d2d2d; }
+  .sidebar-link-active { background: #1e40af; color: var(--primary); }
+}
+.sidebar-link-active { background: #eff6ff; color: var(--primary); font-weight: 500; }
+.sidebar-resize-handle { position: absolute; top: 0; right: -3px; bottom: 0; width: 6px; cursor: col-resize; z-index: 10; }
+.sidebar-resize-handle:hover { background: rgba(37,99,235,0.2); }
+
+/* Accordion */
+.accordion { display: flex; flex-direction: column; gap: 0; border: 1px solid #e5e7eb; border-radius: 0.5rem; overflow: hidden; }
+.accordion-item { border-bottom: 1px solid #e5e7eb; }
+.accordion-item:last-child { border-bottom: none; }
+.accordion-summary { padding: 0.75rem 1rem; font-weight: 500; cursor: pointer; -webkit-user-select: none; user-select: none; list-style: none; display: flex; align-items: center; justify-content: space-between; }
+.accordion-summary:hover { background: #f9fafb; }
+@media (prefers-color-scheme: dark) {
+  .accordion { border-color: #3d3d3d; }
+  .accordion-item { border-color: #3d3d3d; }
+  .accordion-summary { color: #f5f5f5; }
+  .accordion-summary:hover { background: #2d2d2d; }
+  .accordion-summary::after { color: #9ca3af; }
+  .accordion-content { border-color: #2d2d2d; color: #f5f5f5; }
+}
+.accordion-summary::marker { display: none; }
+.accordion-summary::-webkit-details-marker { display: none; }
+.accordion-summary::after { content: '\\25BC'; font-size: 0.75rem; color: #9ca3af; transition: transform 0.2s; }
+details[open] .accordion-summary::after { transform: rotate(180deg); }
+.accordion-content { padding: 0.75rem 1rem; border-top: 1px solid #f3f4f6; }
+
+/* Divider */
+.divider { border: none; border-top: 1px solid #e5e7eb; margin: 1rem 0; }
+.divider-labeled { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0; }
+.divider-line { flex: 1; border: none; border-top: 1px solid #e5e7eb; }
+.divider-text { font-size: 0.75rem; color: #9ca3af; white-space: nowrap; }
+
+/* Flex column utility */
+.flex-col { flex-direction: column; }
+
+/* Accessibility: Focus indicators */
+.btn:focus-visible, .select:focus-visible, .input:focus-visible, .textarea:focus-visible,
+.file-input:focus-visible, .checkbox:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
+.dialog-close:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 4px; }
+.ctx-item:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
+.cpd-swatch:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
+.color-palette-item:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
+.rvw-toggle-track:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 9999px; }
+.toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid #2563eb; outline-offset: 2px; }
+.tad-row:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
+.review-tab:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
+.sidebar-link:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
+.accordion-summary:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
+
+/* Accessibility: High contrast mode */
+@media (forced-colors: active) {
+  .btn-primary { border: 2px solid ButtonText; }
+  .badge-stage, .badge-status, .status-label { border: 1px solid ButtonText; }
+  .linear-progress-bar { forced-color-adjust: none; }
+  .toggle-slider { border: 1px solid ButtonText; }
+  .dialog-overlay, .confirm-overlay, .modal-overlay { background: rgba(0,0,0,0.75); }
+}
+
+/* Accessibility: Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
+  .toast { animation: none; }
+  .splash-spinner-ring { animation: none; }
+}
+
+/* Accessibility: Screen-reader-only class */
+.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
+
+/* Accessibility: Error feedback for forms */
+[aria-invalid="true"], .input-error { border-color: #ef4444 !important; box-shadow: 0 0 0 1px #ef4444; }
+.error-message { color: #dc2626; font-size: 0.75rem; margin-top: 0.25rem; }
+.error-message::before { content: ''; display: inline; }
+
+
+/* ===== MOBILE RESPONSIVE ===== */
+@media (max-width: 768px) {
+  .nav-links-desktop { display: none !important; }
+  .nav-hamburger { display: flex !important; }
+  .p-6 { padding: 1rem !important; }
+  h1 { font-size: 1.2rem !important; }
+  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+  table { min-width: 480px; }
+  .card-body { padding: 0.75rem; }
+  .grid-cols-2, .grid-cols-4 { grid-template-columns: 1fr !important; }
+  .md\:grid-cols-3, .md\:grid-cols-4 { grid-template-columns: 1fr !important; }
+  .confirm-dialog { width: 95vw; max-width: 95vw; margin: 0 auto; }
+  .dialog-panel { width: 95vw !important; max-width: 95vw !important; }
+  .flex-mobile-col { flex-direction: column !important; }
+  .hide-mobile { display: none !important; }
+}
+@media (max-width: 640px) {
+  .lg\:grid-cols-2 { grid-template-columns: 1fr !important; }
+  .page-header { flex-direction: column; gap: 12px; align-items: flex-start !important; }
+  .page-header > * { width: 100%; }
+  .page-header a, .page-header button { width: auto; }
+  input[type="text"], input[type="email"], input[type="number"], select, textarea {
+    width: 100% !important; max-width: 100% !important;
+  }
+}
+@media (min-width: 769px) {
+  .nav-hamburger { display: none !important; }
+  .nav-links-desktop { display: flex !important; }
+}
+
+/* ===== GLOBAL POLISH ===== */
+:root {
+  --color-primary: #04141f;
+  --color-accent: #1976d2;
+  --color-bg: #f7f8fa;
+  --color-surface: #fff;
+  --color-border: #e0e0e0;
+  --color-text: #1a1a1a;
+  --color-muted: #888;
+  --shadow-card: 0 1px 3px rgba(0,0,0,0.1);
+  --transition-fast: 0.15s ease;
+}
+body { font-size: 15px; color: var(--color-text); background: var(--color-bg); }
+@media (max-width: 768px) { body { font-size: 14px; } }
+
+/* Button hover transitions */
+a[style*="background:#1976d2"], a[style*="background:#04141f"],
+button[style*="background:#1976d2"], button[style*="background:#04141f"] {
+  transition: opacity var(--transition-fast), box-shadow var(--transition-fast) !important;
+}
+a[style*="background:#1976d2"]:hover, a[style*="background:#04141f"]:hover,
+button[style*="background:#1976d2"]:hover, button[style*="background:#04141f"]:hover {
+  opacity: 0.9; box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+}
+
+/* Table hover and sticky header */
+#eng-table thead tr, #client-tbody ~ thead tr, table thead tr {
+  position: sticky; top: 0; z-index: 1;
+}
+tbody tr { transition: background var(--transition-fast); }
+
+/* Input focus polish */
+input:focus, select:focus, textarea:focus {
+  outline: none !important;
+  border-color: #04141f !important;
+  box-shadow: 0 0 0 2px rgba(4,20,31,0.12) !important;
+}
+
+/* Card shadow consistency */
+div[style*="box-shadow:0 1px 4px"] {
+  box-shadow: var(--shadow-card) !important;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; }
+::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: #aaa; }
+
+/* Loading skeleton */
+.skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: skeleton-wave 1.5s infinite; border-radius: 4px; }
+@keyframes skeleton-wave { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
+
+/* Spinner for button loading states */
+.btn-spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: btn-spin 0.7s linear infinite; margin-right: 6px; vertical-align: middle; }
+@keyframes btn-spin { to { transform: rotate(360deg); } }
+
+/* Empty state polish */
+.empty-state-icon { opacity: 0.4; }
+
+/* Page title consistency */
+h1[style*="font-size:1.4rem"] { font-size: 1.25rem !important; font-weight: 700 !important; color: #04141f !important; }
+
+/* Badge/pill consistency */
+span[style*="border-radius:10px"] { border-radius: 4px !important; }
+span[style*="border-radius:4px"] { padding: 2px 8px !important; font-size: 0.72rem !important; }
+
+
+/* ===== STATS COMPONENT (DaisyUI-compatible, used by dashboard & client detail) ===== */
+.stats { display: flex; flex-wrap: wrap; width: 100%; background: white; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 1.5rem; overflow: hidden; }
+.stat { display: flex; flex-direction: column; padding: 1.25rem 1.5rem; flex: 1; min-width: 140px; border-right: 1px solid #f3f4f6; cursor: pointer; text-decoration: none; color: inherit; transition: background 0.15s; }
+.stat:last-child { border-right: none; }
+.stat:hover { background: #f9fafb; }
+@media (prefers-color-scheme: dark) {
+  .stat:hover { background: #2d2d2d; }
+}
+.stat-title { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; margin-bottom: 0.25rem; white-space: nowrap; }
+.stat-value { font-size: 2rem; font-weight: 700; color: #111827; line-height: 1.2; }
+.stat-desc { font-size: 0.75rem; color: #9ca3af; margin-top: 0.25rem; }
+.stat-value.text-error { color: #ef4444; }
+.stat-value.text-primary { color: #2563eb; }
+.stat-value.text-success { color: #22c55e; }
+@media (max-width: 640px) {
+  .stats { flex-direction: column; }
+  .stat { border-right: none; border-bottom: 1px solid #f3f4f6; }
+  .stat:last-child { border-bottom: none; }
+}
+
+/* ===== RESPONSIVE GRID UTILITIES ===== */
+@media (min-width: 640px) {
+  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
+@media (min-width: 768px) {
+  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+  .md\:p-6 { padding: 1.5rem; }
+}
+@media (min-width: 1024px) {
+  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+}
+
+/* ===== BREADCRUMB FIX (bullet list style used in some renderers) ===== */
+nav.breadcrumbs ul { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; padding: 0; margin: 0 0 1rem 0; list-style: none; font-size: 1rem; color: #6b7280; }
+nav.breadcrumbs ul li { display: flex; align-items: center; gap: 0.25rem; }
+nav.breadcrumbs ul li::before { content: '/'; color: #9ca3af; margin-right: 0.25rem; }
+nav.breadcrumbs ul li:first-child::before { display: none; }
+nav.breadcrumbs ul li a { color: #2563eb; text-decoration: none; }
+nav.breadcrumbs ul li a:hover { text-decoration: underline; }
+
+/* ===== SHADOW UTILITY ===== */
+.shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); }
+.hover\:shadow-lg:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); }
+.transition-shadow { transition: box-shadow 0.15s ease; }
+
+
+/* ===== MISSING UTILITY CLASSES ===== */
+.ml-1 { margin-left: 0.25rem; }
+.ml-2 { margin-left: 0.5rem; }
+.mr-1 { margin-right: 0.25rem; }
+.mr-2 { margin-right: 0.5rem; }
+.gap-1 { gap: 0.25rem; }
+.gap-3 { gap: 0.75rem; }
+.gap-5 { gap: 1.25rem; }
+.gap-6 { gap: 1.5rem; }
+.min-w-8 { min-width: 2rem; }
+.min-w-48 { min-width: 12rem; }
+.max-w-48 { max-width: 12rem; }
+.max-w-40 { max-width: 10rem; }
+.flex-1 { flex: 1 1 0%; }
+.flex-shrink-0 { flex-shrink: 0; }
+.flex-col { flex-direction: column; }
+.min-h-48 { min-height: 12rem; }
+.max-h-96 { max-height: 24rem; }
+.max-h-screen { max-height: 100vh; }
+.overflow-y-auto { overflow-y: auto; }
+.overflow-x-auto { overflow-x: auto; }
+.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.whitespace-nowrap { white-space: nowrap; }
+.font-semibold { font-weight: 600; }
+.text-base { font-size: 1rem; }
+.tracking-wider { letter-spacing: 0.05em; }
+.uppercase { text-transform: uppercase; }
+.border { border: 1px solid #e5e7eb; }
+.border-t { border-top: 1px solid #e5e7eb; }
+.border-b { border-bottom: 1px solid #e5e7eb; }
+.rounded { border-radius: 0.25rem; }
+.rounded-sm { border-radius: 0.25rem; }
+.h-4 { height: 1rem; }
+.h-8 { height: 2rem; }
+.w-4 { width: 1rem; }
+.w-8 { width: 2rem; }
+.w-5 { width: 1.25rem; }
+.h-5 { height: 1.25rem; }
+.w-6 { width: 1.5rem; }
+.h-6 { height: 1.5rem; }
+.p-0 { padding: 0; }
+.p-3 { padding: 0.75rem; }
+.p-4 { padding: 1rem; }
+.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
+.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
+.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
+.pt-3 { padding-top: 0.75rem; }
+.pb-3 { padding-bottom: 0.75rem; }
+.mt-1 { margin-top: 0.25rem; }
+.mt-3 { margin-top: 0.75rem; }
+.mb-1 { margin-bottom: 0.25rem; }
+.mb-3 { margin-bottom: 0.75rem; }
+.col-span-full { grid-column: 1 / -1; }
+.transition-colors { transition: background-color 0.15s ease, color 0.15s ease; }
+.transition { transition: all 0.15s ease; }
+.opacity-30 { opacity: 0.3; }
+.inset-0 { inset: 0; }
+.last\:border-0:last-child { border: 0; }
+
+/* Tab count badge */
+.tab .badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.5rem; border-radius: 9999px; background: rgba(0,0,0,0.15); color: inherit; font-size: 0.7rem; font-weight: 600; margin-left: 0.25rem; }
+.tab-active .badge { background: rgba(255,255,255,0.3); }
+.badge-sm { font-size: 0.65rem; padding: 0.1rem 0.4rem; }
+
+/* Alert component */
+.alert { padding: 1rem; border-radius: 0.5rem; display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
+.alert-error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
+.alert-warning { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
+.alert-success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
+.alert-info { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }
+
+/* Progress bar */
+.progress { width: 100%; height: 0.5rem; border-radius: 9999px; background: #e5e7eb; overflow: hidden; appearance: none; -webkit-appearance: none; display: block; }
+.progress::-webkit-progress-bar { background: #e5e7eb; border-radius: 9999px; }
+.progress::-webkit-progress-value { background: #2563eb; border-radius: 9999px; }
+.progress::-moz-progress-bar { background: #2563eb; border-radius: 9999px; }
+.progress-primary::-webkit-progress-value { background: #2563eb; }
+.progress-primary::-moz-progress-bar { background: #2563eb; }
+
+/* Text color utilities */
+.text-base-content { color: #111827; }
+.text-base-content\/60 { color: rgba(17,24,39,0.6); }
+.text-base-content\/50 { color: rgba(17,24,39,0.5); }
+.text-base-content\/40 { color: rgba(17,24,39,0.4); }
+.text-base-content\/30 { color: rgba(17,24,39,0.3); }
+.text-primary { color: #2563eb; }
+.text-error { color: #ef4444; }
+.text-success { color: #22c55e; }
+.text-warning { color: #f59e0b; }
+
+/* Background utilities */
+.bg-base-100 { background-color: #ffffff; }
+.bg-base-200 { background-color: #f3f4f6; }
+.bg-base-50 { background-color: #f9fafb; }
+.bg-primary\/10 { background-color: rgba(37,99,235,0.1); }
+.hover\:bg-base-200:hover { background-color: #f3f4f6; }
+
+/* Card component */
+.card { background: white; border-radius: 0.5rem; overflow: hidden; }
+.card-body { padding: 1.25rem; }
+.card-title { font-size: 1.125rem; font-weight: 600; color: #111827; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
+
+/* Table component */
+.table { width: 100%; border-collapse: collapse; }
+.table th { padding: 0.75rem 1rem; text-align: left; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; background: #f9fafb; border-bottom: 1px solid #e5e7eb; }
+.table td { padding: 0.75rem 1rem; border-bottom: 1px solid #f3f4f6; }
+.table-hover tbody tr:hover { background: #f9fafb; }
+.table-container { overflow-x: auto; }
+
+/* Modal */
+.modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; }
+.modal-content { background: white; border-radius: 0.75rem; padding: 1.5rem; max-width: 90vw; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.2); }
+.modal-action { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }
+.modal-overlay { position: absolute; inset: 0; }
+.rounded-box { border-radius: 0.75rem; }
+
+/* Tabs */
+.tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; }
+.tabs-boxed { background: #f3f4f6; padding: 0.25rem; border-radius: 0.5rem; }
+.tab { padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.8rem; font-weight: 500; cursor: pointer; border: none; background: none; color: #6b7280; transition: background 0.15s, color 0.15s; white-space: nowrap; display: inline-flex; align-items: center; }
+.tab:hover { background: rgba(0,0,0,0.05); color: #374151; }
+@media (prefers-color-scheme: dark) {
+  .tab:hover { background: rgba(255,255,255,0.08); color: #f5f5f5; }
+}
+.tab-active { background: white; color: #111827; box-shadow: 0 1px 3px rgba(0,0,0,0.1); font-weight: 600; }
+
+/* Input/Select/Textarea */
+.input, .select, .textarea { border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 0.5rem 0.75rem; font-size: 1rem; width: 100%; background: white; color: #111827; }
+.input:focus, .select:focus, .textarea:focus { border-color: #2563eb; outline: none; box-shadow: 0 0 0 2px rgba(37,99,235,0.15); }
+.input-solid, .select-solid, .textarea-solid { background: #f9fafb; }
+.max-w-full { max-width: 100%; }
+
+/* Form */
+.form-group { margin-bottom: 1rem; }
+.label { display: flex; flex-direction: column; margin-bottom: 0.25rem; }
+.label-text { font-size: 1rem; font-weight: 500; color: #374151; }
+.checkbox { width: 1rem; height: 1rem; cursor: pointer; accent-color: #2563eb; }
+.checkbox-primary { accent-color: #2563eb; }
+
+/* Divider */
+.divider { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0; }
+.divider::before, .divider::after { content: ''; flex: 1; border-top: 1px solid #e5e7eb; }
+
+/* Hidden */
+.hidden { display: none !important; }
+
+/* Button base if not from RippleUI */
+.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 1rem; font-weight: 500; cursor: pointer; border: none; transition: background 0.15s, opacity 0.15s; text-decoration: none; }
+
+
+/* ===== BUTTON VARIANT FIXES ===== */
+.btn-outline-primary { background: transparent; color: #2563eb; border: 1px solid #2563eb; }
+.btn-outline-primary:hover { background: #2563eb; color: white; }
+.btn-ghost { background: transparent; color: #374151; border: 1px solid #d1d5db; }
+.btn-ghost:hover { background: #f3f4f6; border-color: #9ca3af; }
+.btn-xs { padding: 0.2rem 0.6rem; font-size: 0.75rem; border-radius: 0.25rem; min-height: 28px; }
+.btn-sm { padding: 0.35rem 0.75rem; font-size: 0.8rem; border-radius: 0.5rem; min-height: 32px; }
+.btn-primary { background: #2563eb; color: white; border: 1px solid #2563eb; }
+.btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
+.btn-error { background: #ef4444; color: white; border: 1px solid #ef4444; }
+.btn-error:hover { background: #dc2626; border-color: #dc2626; }
+.btn-success { background: #22c55e; color: white; border: 1px solid #22c55e; }
+.btn-warning { background: #f59e0b; color: white; border: 1px solid #f59e0b; }
+
+/* ===== DARK MODE COMPONENT OVERRIDES ===== */
+@media (prefers-color-scheme: dark) {
+  .modal-dialog, .confirm-dialog, .modal-content, .dialog-panel, .modal-confirm-dialog {
+    background: #1a1a1a; color: #f5f5f5; border: 1px solid #3d3d3d;
+  }
+  .sidebar-review-panel, .sidebar-collapsible, .mobile-nav-drawer {
+    background: #1a1a1a; border-color: #3d3d3d;
+  }
+  .settings-card, .integration-card { background: #1a1a1a; border-color: #3d3d3d; color: #f5f5f5; }
+  .review-ctx-menu, .ts-dropdown { background: #1a1a1a; border-color: #3d3d3d; }
+  .act-tl-content { background: #2d2d2d; border-color: #3d3d3d; }
+  .date-preset-btn { background: #2d2d2d; border-color: #3d3d3d; color: #f5f5f5; }
+  .date-preset-btn:hover { background: #4d4d4d; }
+  .splash-screen { background: #0f172a; }
+  .stats { background: #1a1a1a; }
+  .card { background: #1a1a1a; border-color: #3d3d3d; }
+  .tab-active { background: #2d2d2d; color: #f5f5f5; }
+  .input, .select, .textarea { background: #1a1a1a; color: #f5f5f5; border-color: #3d3d3d; }
+  .modal-form-group input, .modal-form-group select, .modal-form-group textarea {
+    background: #2d2d2d; color: #f5f5f5; border-color: #3d3d3d;
+  }
+  .card-clean { background: #1a1a1a; border-color: #3d3d3d; }
+  .card-clean-body { color: #f5f5f5; }
+  .table-hover tbody tr:hover { background: #2d2d2d; }
+  .rvw-toggle-knob { background: #f5f5f5; }
+  .badge-stage[data-stage="info_gathering"],
+  .badge-stage[data-stage="commencement"] { background: #1e3a8a !important; color: #60a5fa !important; }
+  .badge-stage[data-stage="team_execution"],
+  .badge-stage[data-stage="partner_review"] { background: #78350f !important; color: #fbbf24 !important; }
+  .badge-stage[data-stage="finalization"],
+  .badge-stage[data-stage="closeout"] { background: #064e3b !important; color: #34d399 !important; }
+  .stage-pill[data-stage="info_gathering"],
+  .stage-pill[data-stage="commencement"] { background: #1e3a8a !important; color: #60a5fa !important; }
+  .stage-pill[data-stage="team_execution"],
+  .stage-pill[data-stage="partner_review"] { background: #78350f !important; color: #fbbf24 !important; }
+  .stage-pill[data-stage="finalization"],
+  .stage-pill[data-stage="closeout"] { background: #064e3b !important; color: #34d399 !important; }
+}
+