diff --git "a/src/app/infopage/infopage.component.css" "b/src/app/infopage/infopage.component.css"
--- "a/src/app/infopage/infopage.component.css"
+++ "b/src/app/infopage/infopage.component.css"
@@ -1,2147 +1,2498 @@
-/* ===== BALANCED AI DESIGN WITH READABLE CONTENT ===== */
-
-/* ===== IMPROVED BODY BACKGROUND ===== */
-body {
-  background: 
-    radial-gradient(ellipse at top left, rgba(0, 212, 255, 0.08), transparent 40%),
-    radial-gradient(ellipse at bottom right, rgba(255, 0, 110, 0.06), transparent 40%),
-    linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%) !important;
-  background-attachment: fixed !important;
-  color: #e0e6ed !important;
-  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
-  overflow-x: hidden !important;
-}
-
-/* ===== SUBTLE PARTICLE BACKGROUND ===== */
-body::before {
-  content: '' !important;
-  position: fixed !important;
-  top: 0 !important;
-  left: 0 !important;
-  width: 100vw !important;
-  height: 100vh !important;
-  background-image: 
-    radial-gradient(circle at 20% 30%, rgba(0, 212, 255, 0.15) 1px, transparent 1px),
-    radial-gradient(circle at 80% 70%, rgba(255, 0, 110, 0.12) 1px, transparent 1px) !important;
-  background-size: 150px 150px, 200px 200px !important;
-  animation: subtleParticles 20s linear infinite !important;
-  pointer-events: none !important;
-  z-index: -1 !important;
-  opacity: 0.4 !important;
-}
-
-@keyframes subtleParticles {
-  0% { background-position: 0 0, 0 0; }
-  100% { background-position: 150px 150px, -200px -200px; }
-}
-
-/* ===== ENHANCED HEADER WITH READABILITY ===== */
-.site-header {
-  background: #011329;
-  box-shadow: 0 2px 12px #38bdf844;
-  margin-bottom: 18px;
-  position: relative;
-  z-index: 10;
-  padding-bottom: 0;
+/* infopage.component.css - Updated for Professional Case Details Theme */
+/* ===== CSS Reset ===== */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
-.header-inner {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 18px 32px 0 32px;
-  position: relative;
-  gap:0px;
-}
+html, body {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  font-size: 12px; /* Updated from 14px */
+  scroll-behavior: smooth;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: #f8fafc;
+  color: #111827;
+}
+
+/* ===== Animations ===== */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
 
-.logo-cluster {
-  display: flex;
-  align-items: center;
-  gap: 18px;
-  flex: 1 1 auto;
-  justify-content: center;
+  to {
+    opacity: 1;
+  }
 }
 
-.logo-img-header {
-  width: 54px;
-  height: 54px;
-  border-radius: 50%;
-  background: #fff;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
-  padding: 4px;
-  margin-top: -6px; /* Move logo slightly upwards */
-  margin-bottom: 0;
-}
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
 
-.py-detect-title-header {
-  font-size: 2.1rem;
-  font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
-  font-weight: 900;
-  letter-spacing: 6px;
-  color: #38bdf8;
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  margin-bottom: 1.5vh;
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
-.py-detect-title-header .py-letter.p { color: #e3f6ff; text-shadow: 0 0 6px #38bdf8; }
-.py-detect-title-header .py-letter.y { color: #38bdf8; text-shadow: 0 0 6px #38bdf8; }
-.py-detect-title-header .py-shape { color: #e3f6ff; background: #e3f6ff; text-shadow: 0 0 6px #38bdf8; box-shadow: 0 0 6px #38bdf8, 0 0 2px #fff; border: 2px solid #23272b; width: 18px; height: 4px; display: inline-block; margin: 0 8px; border-radius: 2px; }
-.py-detect-title-header .py-letter.d { color: #e3f6ff; text-shadow: 0 0 6px #38bdf8; }
-.py-detect-title-header .py-letter.e { color: #38bdf8; text-shadow: 0 0 6px #38bdf8; }
-.py-detect-title-header .py-letter.t { color: #e3f6ff; text-shadow: 0 0 6px #38bdf8; }
-.py-detect-title-header .py-letter.e2 { color: #38bdf8; text-shadow: 0 0 6px #38bdf8; }
-.py-detect-title-header .py-letter.c { color: #e3f6ff; text-shadow: 0 0 6px #38bdf8; }
-.py-detect-title-header .py-letter.t2 { color: #38bdf8; text-shadow: 0 0 6px #38bdf8; }
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
 
-.header-progress {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  margin-right: 32px;
-  margin-left: 92vh;
-  margin-bottom: 15px;
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
-.pykara-analysis-label {
-  color: #38bdf8;
-  font-size: 1.1em;
-  font-weight: 700;
-  letter-spacing: 1px;
-}
+@keyframes fadeInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
 
-@keyframes progressBarGradientMove {
-  0% { background-position: 0% 50%; }
-  100% { background-position: 100% 50%; }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
 
-.pykara-progress-percentage {
-  color: #38bdf8;
-  font-size: 1.05em;
-  font-weight: 700;
-  margin-left: 4px;
-}
+@keyframes fadeInRight {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
 
-/* ===== READABLE PROGRESS BAR ===== */
-.progress-container {
-  background: rgba(26, 26, 46, 0.9) !important;
-  backdrop-filter: blur(10px) !important;
-  padding: 8px 24px !important;
-  position: relative !important;
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
 
-.progress-bar {
-  background: linear-gradient(90deg, #00d4ff 0%, #06ffa5 50%, #ff006e 100%) !important;
-  height: 6px !important;
-  border-radius: 3px !important;
-  position: relative !important;
-  box-shadow: 0 0 10px rgba(0, 212, 255, 0.4) !important;
-}
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 1;
+  }
 
-.progress-text {
-  display: flex !important;
-  justify-content: space-between !important;
-  align-items: center !important;
-  font-size: 0.8rem !important;
-  color: #e0e6ed !important;
-  margin-bottom: 4px !important;
+  50% {
+    transform: scale(1.05);
+    opacity: 0.8;
+  }
 }
 
-.progress-ai {
-  color: #06ffa5 !important;
-  font-weight: 600 !important;
-}
+@keyframes pulse-ring {
+  0% {
+    transform: scale(0.8);
+    opacity: 0.5;
+  }
 
-/* ===== READABLE SECTION NAVIGATION ===== */
-.section-navigation {
-  background: linear-gradient(135deg, rgba(26, 26, 46, 0.9), rgba(22, 33, 62, 0.95)) !important;
-  backdrop-filter: blur(15px) !important;
-  border-bottom: 1px solid rgba(0, 212, 255, 0.2) !important;
-  padding: 16px 0 !important;
-  position: relative !important;
+  80%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
 }
 
-.section-pills {
-  display: flex !important;
-  justify-content: center !important;
-  gap: 16px !important;
-  max-width: 1200px !important;
-  margin: 0 auto !important;
-  padding: 0 24px !important;
-}
+@keyframes shimmer {
+  0% {
+    background-position: -1000px 0;
+  }
 
-.section-pill {
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)) !important;
-  border: 1px solid rgba(0, 212, 255, 0.3) !important;
-  backdrop-filter: blur(10px) !important;
-  padding: 12px 20px !important;
-  border-radius: 12px !important;
-  color: #e0e6ed !important;
-  font-weight: 500 !important;
-  font-size: 0.9rem !important;
-  cursor: pointer !important;
-  transition: all 0.3s ease !important;
-  position: relative !important;
-  display: flex !important;
-  align-items: center !important;
-  gap: 8px !important;
-  min-width: 150px !important;
-  justify-content: center !important;
+  100% {
+    background-position: 1000px 0;
+  }
 }
 
-.section-pill:hover {
-  border-color: rgba(0, 212, 255, 0.6) !important;
-  box-shadow: 0 0 20px rgba(0, 212, 255, 0.3) !important;
-  transform: translateY(-2px) !important;
-}
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0);
+  }
 
-.section-pill.active {
-  background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(255, 0, 110, 0.1)) !important;
-  border-color: #00d4ff !important;
-  color: white !important;
-  box-shadow: 0 0 25px rgba(0, 212, 255, 0.4) !important;
-  transform: translateY(-3px) !important;
+  50% {
+    transform: translateY(-8px);
+  }
 }
 
-.section-pill::after {
-  content: attr(data-step) !important;
-  position: absolute !important;
-  top: -8px !important;
-  left: 12px !important;
-  width: 20px !important;
-  height: 20px !important;
-  background: linear-gradient(135deg, #7209b7, #4cc9f0) !important;
-  color: white !important;
-  border-radius: 50% !important;
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  font-size: 0.7rem !important;
-  font-weight: 700 !important;
-  border: 2px solid rgba(26, 26, 46, 0.9) !important;
+@keyframes gradientShift {
+  0% {
+    background-position: 0% 50%;
+  }
+
+  50% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0% 50%;
+  }
 }
 
-.section-pill.active::after {
-  background: linear-gradient(135deg, #ff006e, #8338ec) !important;
-  animation: activeStep 2s ease-in-out infinite !important;
+@keyframes ripple {
+  0% {
+    transform: scale(0);
+    opacity: 0.5;
+  }
+
+  100% {
+    transform: scale(4);
+    opacity: 0;
+  }
 }
 
-@keyframes activeStep {
-  0%, 100% { transform: scale(1); }
-  50% { transform: scale(1.1); }
+@keyframes slideIn {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
 }
 
-/* ===== READABLE SUBGROUP PILLS ===== */
-.subgroup-pills {
-  background: linear-gradient(135deg, rgba(22, 33, 62, 0.9), rgba(26, 26, 46, 0.95)) !important;
-  backdrop-filter: blur(15px) !important;
-  border-bottom: 1px solid rgba(0, 212, 255, 0.2) !important;
-  padding: 16px 24px !important;
-  display: flex !important;
-  justify-content: center !important;
-  flex-wrap: wrap !important;
-  gap: 12px !important;
-  max-width: 1200px !important;
-  margin: 0 auto !important;
+@keyframes scaleIn {
+  from {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
 }
 
-.subgroup-pills .pill {
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04)) !important;
-  border: 1px solid rgba(0, 212, 255, 0.25) !important;
-  backdrop-filter: blur(8px) !important;
-  padding: 8px 16px !important;
-  border-radius: 20px !important;
-  color: #e0e6ed !important;
-  font-weight: 500 !important;
-  font-size: 0.85rem !important;
-  cursor: pointer !important;
-  transition: all 0.3s ease !important;
-  display: flex !important;
-  align-items: center !important;
-  gap: 6px !important;
-  min-width: 120px !important;
-  justify-content: center !important;
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
 }
 
-.subgroup-pills .pill:hover {
-  border-color: rgba(6, 255, 165, 0.6) !important;
-  box-shadow: 0 0 15px rgba(6, 255, 165, 0.3) !important;
-  transform: translateY(-1px) !important;
+@keyframes iconPulse {
+  0%, 100% {
+    transform: scale(1) rotate(0deg);
+  }
+
+  50% {
+    transform: scale(1.08) rotate(3deg);
+  }
 }
 
-.subgroup-pills .pill.active {
-  background: linear-gradient(135deg, rgba(255, 0, 110, 0.2), rgba(131, 56, 236, 0.15)) !important;
-  border-color: #ff006e !important;
-  color: white !important;
-  box-shadow: 0 0 20px rgba(255, 0, 110, 0.4) !important;
-  transform: translateY(-2px) !important;
+@keyframes iconGlow {
+  0%, 100% {
+    box-shadow: 0 3px 10px 0 rgba(30, 58, 138, 0.3);
+  }
+
+  50% {
+    box-shadow: 0 6px 20px 0 rgba(30, 58, 138, 0.5);
+  }
 }
 
-/* ===== READABLE CONTENT AREA ===== */
-.investigation-container {
-  background: transparent !important;
-  padding: 24px 0 !important;
-  max-width: 100vw !important;
-  width: 96vw !important;
-  margin: 0 !important;
-  min-height: calc(100vh - 400px) !important;
-  position: relative !important;
-  left: 50% !important;
-  right: 50% !important;
-  margin-left: -48vw !important;
-  margin-right: -50vw !important;
-  box-sizing: border-box !important;
-}
-
-/* ===== FULL-WIDTH FORM CARD ===== */
-.form-card {
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.92)) !important;
-  backdrop-filter: blur(20px) !important;
-  border: 1px solid rgba(0, 212, 255, 0.2) !important;
-  border-radius: 0 !important;
-  box-shadow: 
-    0 8px 32px rgba(0, 0, 0, 0.1),
-    0 0 0 1px rgba(255, 255, 255, 0.2) !important;
-  color: #2C3E50 !important;
-  position: relative !important;
-  overflow: visible !important;
-  margin: 0 !important;
-  width: 100% !important;
-  max-width: 100% !important;
-  padding: 0 24px !important;
-  box-sizing: border-box !important;
-}
-
-.form-card::before {
-  content: '' !important;
-  position: absolute !important;
-  top: 0 !important;
-  left: -100% !important;
-  width: 100% !important;
-  height: 2px !important;
-  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.6), transparent) !important;
-  animation: cardScan 4s linear infinite !important;
+/* ===== Updated Header ===== */
+.site-header {
+  background: linear-gradient(135deg, #011329 0%, #0a2540 100%);
+  box-shadow: 0 15px 20px -5px rgba(0, 0, 0, 0.1), 0 6px 8px -4px rgba(0, 0, 0, 0.1);
+  height: 60px;
+  flex-shrink: 0;
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(8px);
+  background: rgba(1, 19, 41, 0.95);
+}
+
+  .site-header::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(30, 58, 138, 0.9) 0%, rgba(1, 19, 41, 0.95) 100%);
+    z-index: -1;
+  }
+
+.header-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 100%;
+  padding: 0 20px;
+  max-width: 1440px;
+  margin: 0 auto;
+  width: 100%;
 }
 
-@keyframes cardScan {
-  0% { left: -100%; }
-  100% { left: 100%; }
+.logo-cluster {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-left: -215px;
 }
 
-.card-header {
-  background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(255, 0, 110, 0.05)) !important;
-  border-bottom: 1px solid rgba(0, 212, 255, 0.2) !important;
-  padding: 16px 20px !important;
-  border-radius: 0 !important;
-  margin: 0 -24px !important;
-  margin-bottom: 0 !important;
-}
-
-.card-header h2 {
-  background: linear-gradient(45deg, #00d4ff, #ff006e) !important;
-  -webkit-background-clip: text !important;
-  -webkit-text-fill-color: transparent !important;
-  background-clip: text !important;
-  font-size: 1.1rem !important;
-  font-weight: 700 !important;
-  margin: 0 !important;
-  display: flex !important;
-  align-items: center !important;
-  gap: 8px !important;
+.logo-img-header {
+  width: 48px; /* Increased from 40px to match record page */
+  height: 48px; /* Increased from 40px to match record page */
+  border-radius: 50%; /* Changed from 10px to match record page */
+  background: white; /* Changed from gradient to match record page */
+  padding: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* Simplified shadow to match record page */
+  cursor: pointer;
+  transition: transform 0.2s; /* Simplified transition to match record page */
 }
 
-.card-content {
-  padding: 20px 0 !important;
-  background: rgba(255, 255, 255, 0.98) !important;
-  color: #2C3E50 !important;
-  width: 100% !important;
-  max-width: 100% !important;
-  box-sizing: border-box !important;
+  .logo-img-header:hover {
+    transform: scale(1.05); /* Simplified hover to match record page */
+  }
+
+.py-detect-title-header {
+  font-size: 28px; /* Increased from 22px to match record page */
+  font-weight: 900;
+  letter-spacing: 3px; /* Increased from 2px to match record page */
+  color: #38bdf8; /* Changed from gradient to solid color to match record page */
+  display: flex;
+  align-items: center;
+  gap: 2px;
 }
 
-.section-description {
-  background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(6, 255, 165, 0.08)) !important;
-  border: 1px solid rgba(0, 212, 255, 0.2) !important;
-  border-radius: 8px !important;
-  padding: 12px 16px !important;
-  margin-bottom: 20px !important;
-  font-size: 0.85rem !important;
-  color: #2C3E50 !important;
-  border-left: 4px solid #00d4ff !important;
-  width: 100% !important;
-  max-width: 100% !important;
-  box-sizing: border-box !important;
-}
-
-/* ===== FULL-WIDTH FORM FIELDS ===== */
-.fields-grid {
-  display: grid !important;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
-  gap: 16px !important;
-  margin-top: 16px !important;
-  width: 100% !important;
-  max-width: 100% !important;
-  box-sizing: border-box !important;
-  padding: 0 !important;
-  overflow: visible !important;
-  position: relative;
+  /* Add specific styling for each letter to match record page */
+  .py-detect-title-header .py-letter.p,
+  .py-detect-title-header .py-letter.d,
+  .py-detect-title-header .py-letter.t,
+  .py-detect-title-header .py-letter.c {
+    color: #e3f6ff;
+    text-shadow: 0 0 6px #38bdf8;
+  }
+
+  .py-detect-title-header .py-letter.y,
+  .py-detect-title-header .py-letter.e,
+  .py-detect-title-header .py-letter.e2,
+  .py-detect-title-header .py-letter.t2 {
+    color: #38bdf8;
+    text-shadow: 0 0 6px #38bdf8;
+  }
+
+.py-shape {
+  display: inline-block;
+  width: 16px; /* Increased from 12px to match record page */
+  height: 4px; /* Increased from 3px to match record page */
+  background: #e3f6ff; /* Changed from gradient to solid color to match record page */
+  margin: 0 6px; /* Increased from 4px to match record page */
+  border-radius: 2px;
+  box-shadow: 0 0 6px #38bdf8;
 }
 
-.field-container {
-  background: rgba(255, 255, 255, 0.9) !important;
-  border: 1px solid rgba(0, 212, 255, 0.2) !important;
-  border-radius: 8px !important;
-  padding: 12px !important;
-  transition: all 0.3s ease !important;
-  position: relative !important;
-  overflow: visible !important;
-  z-index: 1;
-  width: 100% !important;
-  max-width: 100% !important;
-  box-sizing: border-box !important;
+/* ===== Progress Bar ===== */
+.header-progress {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-right: -642px;
 }
 
-.field-container:hover {
-  border-color: rgba(0, 212, 255, 0.4) !important;
-  box-shadow: 0 0 15px rgba(0, 212, 255, 0.1) !important;
-  transform: translateY(-1px) !important;
+.pykara-analysis-label {
+  color: #38bdf8;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.2px;
+  text-transform: uppercase;
 }
 
-.field-label {
-  color: #2C3E50 !important;
-  font-weight: 600 !important;
-  font-size: 0.85rem !important;
-  margin-bottom: 6px !important;
-  display: flex !important;
-  align-items: center !important;
-  gap: 6px !important;
-  width: 100% !important;
+.pykara-progress-bar {
+  width: 186px;
+  height: 6px;
+  background: #f3f4f6;
+  border-radius: 3px;
+  overflow: hidden;
+  border: 1px solid #e5e7eb;
+  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.05);
 }
 
-.field-input {
-  width: 100% !important;
-  padding: 10px 12px !important;
-  border: 1px solid #E1E8ED !important;
-  border-radius: 6px !important;
-  background: white !important;
-  color: #2C3E50 !important;
-  font-size: 0.85rem !important;
-  transition: all 0.3s ease !important;
-  box-sizing: border-box !important;
-}
-
-.field-input:focus {
-  border-color: #00d4ff !important;
-  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1) !important;
-  outline: none !important;
-}
-
-.field-input::placeholder {
-  color: #7F8C8D !important;
-}
-
-/* ===== CARD ACTIONS FULL WIDTH ===== */
-.card-actions {
-  display: flex !important;
-  align-items: center !important;
-  gap: 12px !important;
-  justify-content: flex-start !important;
-  width: 100% !important;
-  flex-wrap: wrap !important;
+.pykara-progress-bar-inner {
+  height: 100%;
+  background: linear-gradient(90deg, #38bdf8, #1E3A8A);
+  border-radius: 3px;
+  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
+  overflow: hidden;
 }
 
-.card-actions-spacer {
-  flex: 1 1 auto;
+  .pykara-progress-bar-inner::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+    animation: shimmer 2s infinite;
+  }
+
+.pykara-progress-percentage {
+  color: #38bdf8;
+  font-size: 11px;
+  font-weight: 700;
+  min-width: 40px;
+  text-align: right;
 }
 
-.field-selector-container {
-  display: flex !important;
-  align-items: center !important;
-  justify-content: flex-end !important;
-  gap: 12px !important;
-  width: 100% !important;
+/* ===== Header Actions ===== */
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-right: -223px;
 }
 
-.modern-field-selector-btn {
+.autosave-indicator {
   display: flex;
   align-items: center;
-  justify-content: flex-end;
-  margin-left: auto;
-  position: relative;
+  gap: 6px;
+  padding: 6px 12px;
+  background: linear-gradient(135deg, #1E3A8A, #2563eb);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 6px;
+  color: #ffffff;
+  font-size: 11px;
+  font-weight: 600;
+  backdrop-filter: blur(8px);
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.field-selector-btn.modern-selector-animated {
-  border-radius: 24px;
-  background: linear-gradient(135deg, #00d4ff 0%, #06ffa5 60%, #ff006e 100%);
-  color: #fff;
-  font-weight: 700;
-  font-size: 1rem;
-  padding: 10px 22px;
-  border: none;
-  box-shadow: 0 2px 12px rgba(0, 212, 255, 0.10);
+  .autosave-indicator.saving {
+    background: rgba(56, 189, 248, 0.2);
+    border-color: rgba(56, 189, 248, 0.4);
+    animation: pulse 1.5s ease-in-out infinite;
+  }
+
+.profile-display {
   display: flex;
   align-items: center;
-  gap: 10px;
   cursor: pointer;
-  transition: background 0.18s, box-shadow 0.18s, transform 0.18s;
-  outline: none;
+  color: #fff;
   position: relative;
-  z-index: 2;
-  animation: selectorPulse 2s infinite alternate;
 }
 
-.field-selector-btn.modern-selector-animated:hover,
-.field-selector-btn.modern-selector-animated.active {
-  background: linear-gradient(135deg, #06ffa5 0%, #00d4ff 60%, #ff006e 100%);
-  box-shadow: 0 4px 24px rgba(0, 212, 255, 0.18);
-  transform: scale(1.04);
+.profile-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #38bdf8, #1E3A8A);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 14px;
+  overflow: hidden;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  border: 2px solid rgba(255, 255, 255, 0.3);
 }
 
-@keyframes selectorPulse {
-  0% { box-shadow: 0 2px 12px rgba(0, 212, 255, 0.10); }
-  100% { box-shadow: 0 6px 24px rgba(0, 212, 255, 0.18); }
-}
+.profile-menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  background: #ffffff;
+  border-radius: 10px;
+  padding: 16px;
+  min-width: 260px;
+  box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.2);
+  border: 1px solid #e5e7eb;
+  z-index: 1001;
+  animation: fadeIn 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+  .profile-menu > div:first-child {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #e5e7eb;
+    margin-bottom: 12px;
+  }
 
-.field-selector-btn.modern-selector-animated i {
-  font-size: 1.2em;
-}
+    .profile-menu > div:first-child > div:first-child {
+      width: 42px;
+      height: 42px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #1E3A8A, #2563eb);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 700;
+      color: #fff;
+      overflow: hidden;
+      border: 2px solid #e5e7eb;
+    }
+
+    .profile-menu > div:first-child > div:last-child {
+      flex: 1;
+    }
+
+      .profile-menu > div:first-child > div:last-child > div:first-child {
+        font-weight: 700;
+        color: #ffffff;
+        font-size: 18px;
+      }
+
+      .profile-menu > div:first-child > div:last-child > div:last-child {
+        color: #ffffff;
+        font-size: 12px;
+        font-weight: 500;
+      }
+
+  .profile-menu button {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 12px;
+    border: none;
+    border-radius: 8px;
+    background: #f9fafb;
+    color: #111827;
+    font-weight: 600;
+    font-size: 13px;
+    cursor: pointer;
+    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+    .profile-menu button:hover {
+      background: #f3f4f6;
+      color: #1E3A8A;
+    }
 
-/* Highlight filled field-container with green border */
-.field-container.filled {
-  border-color: #06ffa5 !important;
-  box-shadow: 0 0 0 2px rgba(6,255,165,0.12);
-  transition: border-color 0.25s, box-shadow 0.25s;
+.view-records-btn {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  font-size: 18px;
+  position: relative;
 }
 
-/* ===== REMOVE BODY OVERFLOW ===== */
-body {
-  overflow-x: hidden !important;
-  width: 100vw !important;
-  box-sizing: border-box !important;
+  .view-records-btn:hover {
+    background: rgba(255, 255, 255, 0.2);
+    border-color: rgba(56, 189, 248, 0.4);
+    transform: translateY(-1px);
+  }
+
+  .view-records-btn span {
+    position: absolute;
+    bottom: -30px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: #1f2937;
+    color: white;
+    padding: 6px 12px;
+    border-radius: 6px;
+    font-size: 11px;
+    font-weight: 600;
+    white-space: nowrap;
+    z-index: 100;
+    border: 1px solid #374151;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+
+/* ===== Enhanced Section Navigation ===== */
+.section-navigation {
+  background: #ffffff;
+  box-shadow: 0 6px 12px -3px rgba(0, 0, 0, 0.1), 0 3px 5px -3px rgba(0, 0, 0, 0.1);
+  padding: 12px 0; /* Reduced padding */
+  border-bottom: 1px solid #e5e7eb;
+  margin-bottom: 16px;
+  position: relative;
+  overflow: hidden;
 }
 
-html {
-  overflow-x: hidden !important;
-  width: 100vw !important;
-  box-sizing: border-box !important;
+  .section-navigation::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(to bottom, #ffffff 0%, #f9fafb 100%);
+    z-index: -1;
+  }
+
+.section-pills {
+  display: flex;
+  justify-content: center;
+  gap: 8px; /* Reduced gap */
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
 }
 
-/* ===== ENSURE ALL CONTAINERS ARE FULL WIDTH ===== */
-.site-header,
-.section-navigation,
-.subgroup-pills,
-.page-indicator-container {
-  width: 100vw !important;
-  max-width: 100vw !important;
-  margin: 0 !important;
-  box-sizing: border-box !important;
+.section-pill {
+  padding: 10px 20px;
+  background: #ffffff;
+  border: 2px solid #e5e7eb;
+  border-radius: 10px;
+  color: #374151;
+  font-weight: 600;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  gap: 12px; /* Increased gap for better spacing */
+  min-width: 160px;
+  justify-content: flex-start; /* Align content to left like sidebar */
+  position: relative;
+  overflow: hidden;
+  text-align: left;
 }
 
-/* ===== RESPONSIVE FULL WIDTH ===== */
-@media (max-width: 768px) {
-  .investigation-container {
-    padding: 16px 0 !important;
-    margin-left: -50vw !important;
-    margin-right: -50vw !important;
-    left: 50% !important;
-    right: 50% !important;
-  }
-  
-  .form-card {
-    padding: 0 16px !important;
-    border-radius: 0 !important;
-  }
-  
-  .card-header {
-    margin: 0 -16px !important;
-    padding: 12px 16px !important;
+  .section-pill:hover {
+    background: linear-gradient(90deg, rgba(30, 58, 138, 0.05), transparent);
+    border-color: #1E3A8A;
+    color: #1E3A8A;
+    transform: translateX(2px);
+    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.1), 0 2px 3px -2px rgba(0, 0, 0, 0.1);
   }
-  
-  .fields-grid {
-    grid-template-columns: 1fr !important;
-    gap: 12px !important;
+
+  .section-pill.active {
+    background: rgba(30, 58, 138, 0.08);
+    border-left: 3px solid #1E3A8A;
+    color: #1E3A8A;
+    font-weight: 600;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 1px -1px rgba(0, 0, 0, 0.1);
   }
-  
-  .card-actions {
-    flex-direction: column !important;
-    align-items: stretch !important;
-    gap: 8px !important;
+
+  .section-pill.completed {
+    background: #f0fdf4;
+    border-color: #86efac;
+    color: #166534;
   }
-  
-  .field-selector-container {
-    width: 100% !important;
+
+    .section-pill.completed:hover {
+      background: #dcfce7;
+      border-color: #4ade80;
+    }
+
+  /* Enhanced Section Icons */
+  .section-pill i {
+    font-size: 14px;
+    color: #1E3A8A;
+    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+    width: 32px;
+    height: 32px;
+    border-radius: 6px;
+    background: #f9fafb;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #e5e7eb;
+    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
   }
-  
-  .field-selector-btn {
-    width: 100% !important;
-    justify-content: center !important;
+
+  .section-pill:hover i {
+    transform: scale(1.08);
+    background: linear-gradient(135deg, #1E3A8A, #2563eb);
+    color: white;
+    box-shadow: 0 3px 10px 0 rgba(30, 58, 138, 0.3);
   }
-}
 
-@media (max-width: 480px) {
-  .investigation-container {
-    padding: 12px 0 !important;
+  .section-pill.active i {
+    background: linear-gradient(135deg, #1E3A8A, #2563eb);
+    color: white;
+    box-shadow: 0 3px 10px 0 rgba(30, 58, 138, 0.3);
   }
-  
-  .form-card {
-    padding: 0 12px !important;
+
+  .section-pill.completed i {
+    color: #166534;
+    background: #f0fdf4;
   }
-  
-  .card-header {
-    margin: 0 -12px !important;
-    padding: 10px 12px !important;
+
+  .section-pill span {
+    font-weight: 700;
+    flex: 1;
   }
-  
-  .card-content {
-    padding: 16px 0 !important;
+
+  /* Add chevron for consistency with Summary Page */
+  .section-pill .nav-chevron {
+    margin-left: auto;
+    font-size: 10px;
+    color: #9CA3AF;
+    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
   }
-}
 
-/* Crime Details style for autosave button */
-.autosave-indicator.crime-section-btn {
-  background: linear-gradient(135deg, #E8F4FD 0%, #F0F8FF 100%) !important;
-  border: 2px solid #4A90E2 !important;
-  color: #357ABD !important;
-  font-weight: 600 !important;
-  border-radius: 20px !important;
-  box-shadow: 0 2px 6px rgba(74, 144, 226, 0.08) !important;
-  padding: 10px 20px !important;
-  transition: all 0.3s;
-  display: flex !important;
-  align-items: center !important;
-  gap: 8px !important;
-}
+  .section-pill.active .nav-chevron {
+    transform: rotate(90deg);
+    color: #1E3A8A;
+  }
 
-.autosave-indicator.crime-section-btn:hover {
-  border-color: #357ABD !important;
-  color: #fff !important;
-  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%) !important;
-  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.25) !important;
-}
 
-.autosave-right {
-  margin-left: auto !important;
-  margin-right: 0 !important;
+/* Enhanced Pill Inner Elements */
+.pill-neural-core {
+  position: absolute;
+  top: 50%;
+  left: 8px;
+  width: 8px;
+  height: 8px;
+  background: linear-gradient(135deg, #38bdf8, #1E3A8A);
+  border-radius: 50%;
+  transform: translateY(-50%);
+  opacity: 0;
+  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.autosave-left {
-  margin-right: auto !important;
-  margin-left: 0 !important;
+.section-pill.active
+.section-pill:hover {
+  opacity: 1;
+  animation: pulse 1.5s infinite;
 }
 
-.header-actions {
-  display: flex !important;
-  align-items: center !important;
-  gap: 16px !important;
-}
 
-.header-actions.autosave-right {
-  display: flex !important;
-  justify-content: flex-end !important;
-  width: 100%;
+/* HIDE THE STEP NUMBERS (1, 2, 3) */
+.section-pill::after {
+  content: none !important; /* Hide the step numbers */
 }
 
-.autosave-indicator {
-  display: flex !important;
-  align-items: center !important;
-  gap: 8px !important;
-  padding: 8px 16px !important;
-  background: rgba(255, 255, 255, 0.15) !important;
-  border: 1px solid rgba(255, 255, 255, 0.2) !important;
-  border-radius: 8px !important;
-  font-size: 0.875rem !important;
-  color: white !important;
-  font-weight: 500 !important;
-  backdrop-filter: blur(10px) !important;
-  margin-bottom: 15px;
+.ai-completion-orb {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  width: 18px;
+  height: 18px;
+  background: #22c55e;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid white;
+  box-shadow: 0 0 8px #22c55e;
+  z-index: 2;
 }
 
-  .autosave-indicator.saving {
-    background: rgba(255, 255, 255, 0.25) !important;
-    animation: pulse 1.5s ease-in-out infinite !important;
+  .ai-completion-orb i {
+    font-size: 9px;
+    color: white;
   }
 
-.main-section-pill {
-  font-size: 1.25rem !important;
-  padding: 20px 36px !important;
-  min-width: 200px !important;
-  min-height: 64px !important;
-  border-width: 2.5px !important;
-  box-shadow: 0 4px 24px rgba(0, 212, 255, 0.18) !important;
+.orb-pulse {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 50%;
+  background: #22c55e;
+  animation: pulse 2s infinite;
 }
 
-.main-section-pill i {
-  font-size: 2rem !important;
-}
+/* ===== Enhanced Subgroup Navigation ===== */
+.subgroup-pills {
+  background: #f9fafb;
+  border-bottom: 1px solid #e5e7eb;
+  padding: 10px 20px; /* Reduced padding */
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 6px; /* Reduced gap */
+  margin: 0 auto -1px;
+  position: relative;
+}
+
+  .subgroup-pills::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(to bottom, #f9fafb 0%, #f3f4f6 100%);
+    z-index: -1;
+  }
+
+  .subgroup-pills .pill {
+    padding: 10px 16px;
+    background: #ffffff;
+    border: 2px solid #e5e7eb;
+    border-radius: 10px;
+    color: #374151;
+    font-weight: 600;
+    font-size: 11px;
+    cursor: pointer;
+    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 130px;
+    justify-content: flex-start;
+    position: relative;
+    overflow: hidden;
+    text-align: left;
+  }
 
-.main-section-pill span {
-  font-size: 1.25em !important;
-  font-weight: 700 !important;
+    .subgroup-pills .pill:hover {
+      background: rgba(30, 58, 138, 0.05);
+      border-color: #1E3A8A;
+      color: #1E3A8A;
+      transform: translateX(2px);
+    }
+
+    .subgroup-pills .pill.active {
+      background: rgba(30, 58, 138, 0.08);
+      border-left: 3px solid #1E3A8A;
+      color: #1E3A8A;
+      font-weight: 600;
+      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 1px -1px rgba(0, 0, 0, 0.1);
+    }
+
+    .subgroup-pills .pill.completed {
+      background: #f0fdf4;
+      border-color: #86efac;
+      color: #166534;
+    }
+
+      .subgroup-pills .pill.completed:hover {
+        background: #dcfce7;
+        border-color: #4ade80;
+      }
+
+    /* Enhanced Subgroup Icons */
+    .subgroup-pills .pill i {
+      font-size: 12px;
+      color: #1E3A8A;
+      transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+      width: 28px;
+      height: 28px;
+      border-radius: 5px;
+      background: #f3f4f6;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid #e5e7eb;
+    }
+
+    .subgroup-pills .pill:hover i {
+      transform: scale(1.08);
+      background: #1E3A8A;
+      color: white;
+      box-shadow: 0 3px 10px 0 rgba(30, 58, 138, 0.3);
+    }
+
+    .subgroup-pills .pill.active i {
+      background: #1E3A8A;
+      color: white;
+      box-shadow: 0 3px 10px 0 rgba(30, 58, 138, 0.3);
+    }
+
+    .subgroup-pills .pill.completed i {
+      color: #166534;
+      background: #f0fdf4;
+    }
+
+    .subgroup-pills .pill span {
+      flex: 1;
+    }
+
+/* Enhanced Subgroup Pill Elements */
+.pill-ai-core {
+  position: absolute;
+  top: 50%;
+  left: 10px;
+  width: 6px;
+  height: 6px;
+  background: linear-gradient(135deg, #38bdf8, #1E3A8A);
+  border-radius: 50%;
+  transform: translateY(-50%);
+  opacity: 0;
+  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-/* ===== MODERN NAVIGATION BUTTONS ===== */
-.modern-nav-btns {
-  display: flex;
-  justify-content: flex-end;
-  gap: 18px;
-  margin-top: 32px;
-  margin-bottom: 8px;
+.subgroup-pills .pill.active
+.subgroup-pills .pill:hover {
+  opacity: 1;
+  animation: pulse 1.5s infinite;
 }
 
-.modern-round-btn {
-  width: 56px;
-  height: 56px;
+.ai-completion-badge {
+  margin-left: auto;
+  width: 14px;
+  height: 14px;
+  background: #22c55e;
   border-radius: 50%;
-  border: none;
-  background: linear-gradient(135deg, #00d4ff 0%, #06ffa5 60%, #ff006e 100%);
-  color: #fff;
-  font-size: 2rem;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 4px 24px rgba(0, 212, 255, 0.18), 0 1.5px 6px rgba(0,0,0,0.08);
-  cursor: pointer;
-  transition: transform 0.18s cubic-bezier(.4,2,.6,1), box-shadow 0.18s;
-  outline: none;
   position: relative;
-  z-index: 2;
 }
 
-.modern-round-btn:active {
-  transform: scale(0.93);
-  box-shadow: 0 2px 8px rgba(0, 212, 255, 0.12);
-}
+  .ai-completion-badge i {
+    font-size: 9px;
+    color: white;
+  }
 
-.modern-round-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+.badge-glow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 50%;
+  background: #22c55e;
+  animation: pulse 2s infinite;
 }
 
-.next-btn-animated {
-  animation: bounceRight 1.2s infinite alternate;
+/* Section-specific styling */
+.subgroup-pills.crime-section .pill.active {
+  background: rgba(30, 58, 138, 0.08);
+  border-left-color: #1E3A8A;
 }
 
-@keyframes bounceRight {
-  0% { transform: translateX(0); }
-  60% { transform: translateX(6px) scale(1.08); }
-  100% { transform: translateX(0); }
-}
+  .subgroup-pills.crime-section .pill.active i {
+    background: #1E3A8A;
+  }
 
-.submit-btn-animated {
-  animation: pulseSend 1.5s infinite alternate;
+.subgroup-pills.suspect-section .pill.active {
+  background: rgba(124, 58, 237, 0.08);
+  border-left-color: #7c3aed;
 }
 
-@keyframes pulseSend {
-  0% { box-shadow: 0 4px 24px rgba(0, 212, 255, 0.18); }
-  60% { box-shadow: 0 8px 32px rgba(255, 0, 110, 0.22); }
-  100% { box-shadow: 0 4px 24px rgba(0, 212, 255, 0.18); }
+.subgroup-pills.notes-section .pill.active {
+  background: rgba(5, 150, 105, 0.08);
+  border-left-color: #059669;
 }
 
-.modern-round-btn i {
-  font-size: 2rem;
-  pointer-events: none;
+  .subgroup-pills.notes-section .pill.active i {
+    background: #059669;
+  }
+
+.subgroup-pills.notes-section .pill:hover i {
+  background: #059669;
 }
 
-/* ===== FLOATING NAVIGATION BUTTON ===== */
-.modern-floating-nav-btn {
-  position: fixed;
-  bottom: 95px;
-  right: 32px;
-  z-index: 2000;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  pointer-events: none;
+.subgroup-pills.suspect-section .pill.active i {
+  background: #7c3aed;
 }
 
-.modern-floating-nav-btn .modern-round-btn {
-  pointer-events: auto;
+.subgroup-pills.suspect-section .pill:hover i {
+  background: #7c3aed;
+}
+/* ===== Main Container ===== */
+.investigation-container {
+  max-width: 1867px;
+  margin: 0 auto;
+  padding: 0 20px;
+  min-height: calc(100vh - 220px);
+  position: relative;
+  padding-bottom: 80px; /* Added padding at bottom to accommodate footer and navigation buttons */
 }
 
-@media (max-width: 600px) {
-  .modern-floating-nav-btn {
-    bottom: 16px;
-    right: 16px;
+/* ===== Enhanced Form Card ===== */
+.form-card {
+  background: #ffffff;
+  border-radius: 12px;
+  border: 1px solid #e5e7eb;
+  box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.2);
+  margin-bottom: 24px;
+  overflow: visible; /* changed from hidden so popups can overlay without being clipped */
+  animation: scaleIn 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative; /* Added for proper positioning of navigation buttons */
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  height: 32vw;
+}
+
+  .form-card:hover {
+    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.25);
+    transform: translateY(-2px);
   }
-}
 
-/* Compact Card Header */
-.compact-card-header {
+.card-header {
+  padding: 16px 24px; /* Reduced padding */
+  background: linear-gradient(135deg, #f9fafb, #ffffff);
+  border-bottom: 2px solid #e5e7eb;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 8px 16px !important;
-  min-height: 0;
-  background: linear-gradient(135deg, rgba(0, 212, 255, 0.06), rgba(255, 0, 110, 0.04)) !important;
-  border-bottom: 1px solid rgba(0, 212, 255, 0.12) !important;
-  margin: 0 -24px !important;
+  position: relative;
 }
 
+  .card-header::after {
+    content: '';
+    position: absolute;
+    bottom: -2px;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(90deg, #1E3A8A, #38bdf8);
+    opacity: 0.5;
+  }
+
 .card-header-main {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 16px;
 }
 
+/* Enhanced Compact Title with Icon */
 .compact-title {
-  font-size: 1.1rem !important;
-  font-weight: 700 !important;
-  margin: 0 !important;
+  font-size: 18px; /* Reduced from 20px */
+  font-weight: 800;
+  color: #111827;
+  margin: 0;
   display: flex;
   align-items: center;
-  gap: 8px;
-  color: #00d4ff !important;
-  background: none !important;
-}
+  gap: 10px; /* Reduced gap */
+}
+
+  .compact-title i {
+    font-size: 18px; /* Reduced from 20px */
+    width: 36px;
+    height: 36px;
+    border-radius: 8px;
+    background: linear-gradient(135deg, #1E3A8A, #2563eb);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 3px 10px 0 rgba(30, 58, 138, 0.3);
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .compact-title:hover i {
+    transform: scale(1.08) rotate(5deg);
+    box-shadow: 0 6px 15px 0 rgba(30, 58, 138, 0.4);
+  }
 
-.compact-title i {
-  font-size: 1.1em;
-  color: #00d4ff;
+.field-counter {
+  font-size: 11px; /* Reduced from 12px */
+  color: #6b7280;
+  background: #f3f4f6;
+  padding: 4px 8px; /* Reduced padding */
+  border-radius: 12px;
+  font-weight: 600;
+  margin-left: 10px; /* Reduced margin */
+  border: 1px solid #e5e7eb;
 }
 
-.field-counter.compact-field-counter {
-  font-size: 0.95em !important;
-  font-weight: 600 !important;
-  color: #222 !important;
-  background: none !important;
-  padding: 0 0 0 8px !important;
-  box-shadow: none !important;
-  border-radius: 0 !important;
-  text-shadow: none !important;
+.modern-field-selector-btn {
+  position: relative;
 }
 
-.modern-field-selector-btn.compact-selector-btn {
-  margin-left: 16px;
+.field-selector-btn {
+  padding: 6px 14px; /* Reduced padding */
+  background: #ffffff;
+  border: 2px solid #e5e7eb;
+  border-radius: 10px;
+  color: #374151;
+  font-weight: 600;
+  font-size: 11px; /* Reduced from 12px */
+  cursor: pointer;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
   align-items: center;
-  height: 32px;
+  gap: 6px; /* Reduced gap */
 }
 
-.field-selector-btn.modern-selector-animated.compact-selector-btn-inner {
-  font-size: 0.95rem;
-  padding: 4px 14px;
-  min-width: 0;
-  height: 32px;
-  border-radius: 16px;
-  gap: 6px;
-}
+  .field-selector-btn:hover {
+    background: #f3f4f6;
+    border-color: #d1d5db;
+    transform: translateY(-1px);
+  }
 
-.field-selector-btn.modern-selector-animated.compact-selector-btn-inner i {
-  font-size: 1em;
-}
+  .field-selector-btn.active {
+    background: linear-gradient(135deg, #1E3A8A, #2563eb);
+    border-color: #1E3A8A;
+    color: white;
+  }
 
 .field-selector-counter {
-  font-size: 0.95em;
-  font-weight: 600;
-  margin-left: 2px;
+  font-weight: 700;
+  margin-left: 4px;
 }
 
-/* ===== MODERN FIELD SELECTOR POPUP ===== */
 .modern-field-selector-popup {
   position: absolute;
-  top: 110%;
+  top: calc(100% + 8px);
   right: 0;
-  min-width: 260px;
-  background: #fff;
-  border-radius: 16px;
-  box-shadow: 0 8px 32px rgba(0,212,255,0.12);
-  z-index: 3000 !important;
-  padding: 18px 20px 16px 20px;
-  animation: popupFadeIn 0.25s cubic-bezier(.4,2,.6,1);
-}
-
-.modern-field-selector-btn {
-  position: relative;
+  background: #ffffff;
+  border-radius: 12px;
+  box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.2);
+  border: 1px solid #e5e7eb;
+  padding: 16px; /* Reduced padding */
+  min-width: 300px; /* Reduced width */
+  z-index: 10050; /* ensure it sits above the card and other UI */
+  animation: popupFadeIn 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  max-height: calc(80vh); /* prevent the popup from becoming taller than the viewport */
+  overflow-y: auto; /* allow scrolling within the popup if content is tall */
 }
 
 @keyframes popupFadeIn {
-  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
-  to { opacity: 1; transform: translateY(0) scale(1); }
+  from {
+    opacity: 0;
+    transform: translateY(-10px) scale(0.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
 }
 
 .popup-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 12px;
-}
-
-.popup-header span {
-  font-weight: 700;
-  font-size: 1.1em;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: #00d4ff;
-}
+  margin-bottom: 12px; /* Reduced margin */
+  padding-bottom: 10px; /* Reduced padding */
+  border-bottom: 2px solid #e5e7eb;
+}
+
+  .popup-header span {
+    font-weight: 800;
+    font-size: 13px; /* Reduced from 14px */
+    color: #111827;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
 
-.popup-header i {
-  color: #00d4ff;
-}
+  .popup-header i {
+    color: #1E3A8A;
+  }
 
 .popup-close-btn {
   background: none;
   border: none;
-  font-size: 1.2em;
-  color: #ff006e;
+  color: #9CA3AF;
   cursor: pointer;
-  transition: color 0.18s;
-}
-.popup-close-btn:hover {
-  color: #00d4ff;
+  font-size: 14px; /* Reduced from 16px */
+  transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  width: 26px; /* Reduced size */
+  height: 26px; /* Reduced size */
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
+  .popup-close-btn:hover {
+    background: #f3f4f6;
+    color: #ef4444;
+  }
+
 .popup-fields-list {
-  max-height: 220px;
-  overflow: auto;
-  margin-bottom: 16px;
-  padding-right: 2px;
+  max-height: 280px; /* Reduced height */
+  overflow-y: auto;
+  margin-bottom: 16px; /* Reduced margin */
+  padding-right: 8px;
 }
 
+  .popup-fields-list::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .popup-fields-list::-webkit-scrollbar-track {
+    background: #f9fafb;
+    border-radius: 3px;
+  }
+
+  .popup-fields-list::-webkit-scrollbar-thumb {
+    background: #d1d5db;
+    border-radius: 3px;
+  }
+
+    .popup-fields-list::-webkit-scrollbar-thumb:hover {
+      background: #9ca3af;
+    }
+
 .popup-field-row {
-  margin-bottom: 8px;
+  margin-bottom: 6px; /* Reduced margin */
 }
 
 .popup-field-label {
   display: flex;
   align-items: center;
-  gap: 8px;
-  font-size: 1em;
+  gap: 8px; /* Reduced gap */
+  padding: 8px 10px; /* Reduced padding */
+  border-radius: 8px;
   cursor: pointer;
-  user-select: none;
+  transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  font-size: 12px; /* Reduced from 13px */
   font-weight: 500;
-  color: #222;
-  border-radius: 6px;
-  padding: 2px 4px;
-  transition: background 0.15s;
-}
-.popup-field-label:hover {
-  background: #f0faff;
+  color: #374151;
 }
 
-.popup-field-label input[type="checkbox"] {
-  accent-color: #00d4ff;
-  width: 18px;
-  height: 18px;
-  border-radius: 4px;
-  border: 1.5px solid #00d4ff;
-  margin: 0;
-  transition: box-shadow 0.15s;
-}
+  .popup-field-label:hover {
+    background: #f9fafb;
+  }
 
-.popup-field-label input[type="checkbox"]:checked {
-  box-shadow: 0 0 0 2px #06ffa5;
-}
+  .popup-field-label input[type="checkbox"] {
+    width: 16px; /* Reduced size */
+    height: 16px; /* Reduced size */
+    border: 2px solid #d1d5db;
+    border-radius: 4px;
+    cursor: pointer;
+    accent-color: #1E3A8A;
+    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+    .popup-field-label input[type="checkbox"]:checked {
+      background-color: #1E3A8A;
+      border-color: #1E3A8A;
+    }
 
 .popup-field-text {
+  flex: 1;
   font-weight: 500;
-  color: #222;
 }
 
 .popup-actions {
   display: flex;
-  justify-content: space-between;
-  gap: 8px;
+  gap: 10px; /* Reduced gap */
+  justify-content: flex-end;
 }
 
 .popup-action-btn {
-  flex: 1;
-  border: none;
-  border-radius: 8px;
-  padding: 8px 0;
-  font-weight: 600;
-  font-size: 1em;
+  padding: 8px 16px; /* Reduced padding */
+  border-radius: 10px;
+  border: 2px solid;
+  font-weight: 700;
+  font-size: 12px; /* Reduced from 13px */
   cursor: pointer;
-  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 6px;
+  gap: 6px; /* Reduced gap */
+}
+
+  .popup-action-btn.clear-btn {
+    background: #ffffff;
+    border-color: #ef4444;
+    color: #ef4444;
+  }
+
+    .popup-action-btn.clear-btn:hover {
+      background: #fee2e2;
+      border-color: #dc2626;
+      color: #dc2626;
+    }
+
+  .popup-action-btn.selectall-btn {
+    background: #ffffff;
+    border-color: #10b981;
+    color: #10b981;
+  }
+
+    .popup-action-btn.selectall-btn:hover {
+      background: #d1fae5;
+      border-color: #059669;
+      color: #059669;
+    }
+
+  .popup-action-btn.save-btn {
+    background: linear-gradient(135deg, #1E3A8A, #2563eb);
+    border: none;
+    color: white;
+    box-shadow: 0 3px 10px 0 rgba(30, 58, 138, 0.3);
+  }
+
+    .popup-action-btn.save-btn:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 6px 12px -3px rgba(0, 0, 0, 0.1), 0 3px 5px -3px rgba(0, 0, 0, 0.1);
+    }
+
+/* ===== Enhanced Card Content ===== */
+.card-content {
+  padding: 20px 24px; /* Reduced padding */
 }
 
-.popup-action-btn.clear-btn {
-  background: #f8f8f8;
-  color: #ff006e;
+.section-description {
+  background: #f9fafb;
+  border: 2px solid #e5e7eb;
+  border-radius: 10px;
+  padding: 14px 18px; /* Reduced padding */
+  margin-bottom: 20px; /* Reduced margin */
+  font-size: 12px; /* Reduced from 13px */
+  color: #374151;
+  line-height: 1.6;
+  border-left: 4px solid #1E3A8A;
+  position: relative;
+  overflow: hidden;
 }
-.popup-action-btn.clear-btn:hover {
-  background: #ffe6f0;
-  color: #d1005b;
+
+  .section-description::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(30, 58, 138, 0.05), transparent);
+    z-index: -1;
+  }
+
+  .section-description strong {
+    color: #111827;
+    font-weight: 700;
+  }
+
+/* ===== Enhanced Fields Grid ===== */
+.fields-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 16px; /* Reduced gap */
 }
 
-.popup-action-btn.selectall-btn {
-  background: #f8f8f8;
-  color: #06ffa5;
+.field-container {
+  background: #ffffff;
+  border: 2px solid #e5e7eb;
+  border-radius: 10px;
+  padding: 16px; /* Reduced padding */
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  animation: fadeIn 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  min-height: 120px; /* Set minimum height */
+  display: flex;
+  flex-direction: column;
+  z-index:0;
 }
-.popup-action-btn.selectall-btn:hover {
-  background: #e6fff7;
-  color: #00d4ff;
+
+  .field-container:hover {
+    border-color: #1E3A8A;
+    box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.1), 0 6px 8px -4px rgba(0, 0, 0, 0.1);
+    transform: translateY(-3px);
+  }
+
+  .field-container.filled {
+    border-color: #22c55e;
+    background: linear-gradient(135deg, #f0fdf4, #ffffff);
+    position: relative;
+    overflow: hidden;
+  }
+
+    .field-container.filled::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: linear-gradient(135deg, rgba(34, 197, 94, 0.05), transparent);
+      z-index: -1;
+    }
+
+.field-label {
+  display: flex;
+  align-items: center;
+  gap: 6px; /* Reduced gap */
+  margin-bottom: 10px; /* Reduced margin */
+  color: #111827;
+  font-weight: 700;
+  font-size: 12px; /* Reduced from 13px */
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+  flex-shrink: 0;
 }
 
-.popup-action-btn.save-btn {
-  background: linear-gradient(135deg,#00d4ff,#06ffa5,#ff006e);
-  color: #fff;
-  box-shadow: 0 2px 8px rgba(0,212,255,0.10);
+.required-indicator {
+  color: #ef4444;
+  font-weight: 800;
+  margin-left: 2px;
+  animation: pulse 2s infinite;
 }
-.popup-action-btn.save-btn:hover {
-  background: linear-gradient(135deg,#06ffa5,#00d4ff,#ff006e);
-  color: #fff;
-  box-shadow: 0 4px 16px rgba(0,212,255,0.18);
+
+/* Enhanced Info Button */
+.info-btn {
+  width: 22px; /* Reduced size */
+  height: 22px; /* Reduced size */
+  border-radius: 6px;
+  background: #f3f4f6;
+  border: 2px solid #e5e7eb;
+  color: #6b7280;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px; /* Reduced from 12px */
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  margin-left: 4px;
+  flex-shrink: 0;
+  position: relative;
+  overflow: hidden;
 }
 
+  .info-btn:hover {
+    background: #1E3A8A;
+    border-color: #1E3A8A;
+    color: white;
+    transform: scale(1.08);
+  }
 
-.form-card,
-.investigation-container {
-  overflow: visible !important;
+  .info-btn::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    border-radius: 50%;
+    background: rgba(30, 58, 138, 0.2);
+    transform: translate(-50%, -50%);
+    transition: width 0.6s, height 0.6s;
+  }
+
+  .info-btn:hover::before {
+    width: 150px;
+    height: 150px;
+  }
+
+.input-container {
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
 }
 
-.modern-field-selector-popup {
-  z-index: 3000 !important;
+.field-input {
+  width: 100%;
+  padding: 10px 14px; /* Reduced padding */
+  border: 2px solid #e5e7eb;
+  border-radius: 8px;
+  background: #ffffff;
+  color: #111827;
+  font-size: 13px; /* Reduced from 14px */
+  font-weight: 500;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  font-family: 'Inter', sans-serif;
+  flex: 1;
 }
 
-.info-btn, .glossy-info-btn {
-  opacity: 0.5;
-  background: rgba(10, 30, 60, 0.35);
-  border: 2px solid #00d4ff33;
-  box-shadow: none;
+  .field-input:focus {
+    border-color: #1E3A8A;
+    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1);
+    outline: none;
+  }
+
+  .field-input::placeholder {
+    color: #9CA3AF;
+    font-weight: 500;
+  }
+
+  .field-input.compact {
+    padding: 8px 10px; /* Reduced padding */
+    font-size: 12px; /* Reduced from 13px */
+  }
+
+select.field-input.empty-select {
+  color: black;
 }
-.info-btn:hover, .glossy-info-btn:hover {
-  opacity: 0.8;
-  background: rgba(10, 30, 60, 0.55);
-  border: 2px solid #00d4ff;
+
+textarea.field-input {
+  min-height: 80px; /* Reduced height */
+  resize: vertical;
+  font-family: 'Inter', sans-serif;
+  line-height: 1.5;
+  flex: 1;
 }
-.info-btn i, .glossy-info-btn i {
-  color: #0a1e3c;
-  font-size: 0.95em;
-  text-shadow: none;
+
+textarea.auto-scroll-textarea {
+  overflow-y: auto;
 }
 
+/* Enhanced Field Help */
 .field-help {
   position: absolute !important;
-  left: 36px;
-  top: 50%;
-  transform: translateY(-50%);
-  min-width: 180px;
-  max-width: 260px;
-  background: rgba(10, 30, 60, 0.85);
-  color: #fff;
+  top: 0;
+  left: calc(100% + 12px);
+  background: #1f2937;
+  color: white;
+  padding: 14px; /* Reduced padding */
   border-radius: 10px;
-  border: 2px solid #00d4ff;
-  box-shadow: 0 4px 24px rgba(0,212,255,0.10);
-  padding: 10px 16px 10px 16px;
-  z-index: 4000;
-  font-size: 0.97em;
-  font-weight: 500;
-  animation: fadeInInfoModal 0.18s cubic-bezier(.4,2,.6,1);
-  pointer-events: auto;
-  white-space: pre-line;
-}
-@keyframes fadeInInfoModal {
-  from { opacity: 0; transform: translateY(-50%) scale(0.98); }
-  to { opacity: 1; transform: translateY(-50%) scale(1); }
-}
-.field-help strong {
-  color: #00d4ff;
-  font-weight: 700;
-  font-size: 1.05em;
-  display: block;
-  margin-bottom: 2px;
-}
+  box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.2);
+  width: 280px; /* Reduced width */
+  z-index: 1000;
+  animation: fadeIn 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  font-size: 12px; /* Reduced from 13px */
+  line-height: 1.5;
+  border: 1px solid #374151;
+  position: fixed;
+  z-index:1;
+}
+
+  .field-help::before {
+    content: '';
+    position: absolute;
+    top: 16px;
+    left: -6px;
+    width: 12px;
+    height: 12px;
+    background: #1f2937;
+    transform: rotate(45deg);
+    border-left: 1px solid #374151;
+    border-bottom: 1px solid #374151;
+  }
+
+  .field-help strong {
+    color: #38bdf8;
+    display: block;
+    margin-bottom: 6px; /* Reduced margin */
+    font-size: 13px; /* Reduced from 14px */
+    font-weight: 700;
+  }
 
+/* ===== Enhanced File Upload ===== */
 .file-upload-block {
-  border: 2px solid #00d4ff;
-  border-radius: 18px;
-  background: rgba(240, 255, 255, 0.45);
-  box-shadow: 0 2px 16px rgba(0,212,255,0.08);
-  padding: 18px 18px 12px 18px;
-  margin-bottom: 12px;
-  position: relative;
-  animation: fileGlow 2.2s infinite alternate;
-  transition: box-shadow 0.22s, border-color 0.22s;
-}
-@keyframes fileGlow {
-  0% { box-shadow: 0 2px 16px rgba(0,212,255,0.08), 0 0 0 0 #06ffa5; border-color: #00d4ff; }
-  60% { box-shadow: 0 6px 32px rgba(0,212,255,0.18), 0 0 0 4px #06ffa5; border-color: #06ffa5; }
-  100% { box-shadow: 0 2px 16px rgba(0,212,255,0.08), 0 0 0 0 #00d4ff; border-color: #00d4ff; }
+  border: 2px solid #d1d5db;
+  border-radius: 10px;
+  background: #f9fafb;
+  padding: 16px; /* Reduced padding */
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  flex: 1;
+  display: flex;
+  flex-direction: column;
 }
 
-.file-upload-block .file-drop-zone {
-  background: rgba(255,255,255,0.85);
-  border: 2px dashed #00d4ff;
-  border-radius: 14px;
-  padding: 18px 0 12px 0;
+  .file-upload-block:hover {
+    border-color: #1E3A8A;
+    background: #ffffff;
+  }
+
+.file-drop-zone {
+  background: #ffffff;
+  border: 2px dashed #d1d5db;
+  border-radius: 8px;
+  padding: 24px 16px; /* Reduced padding */
   text-align: center;
-  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
   cursor: pointer;
-  margin-bottom: 8px;
-  position: relative;
-}
-.file-upload-block .file-drop-zone:hover, .file-upload-block .file-drop-zone.drag-over {
-  background: rgba(0,212,255,0.08);
-  border-color: #06ffa5;
-  box-shadow: 0 4px 24px rgba(0,212,255,0.18);
+  margin-bottom: 12px; /* Reduced margin */
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.file-upload-block .drop-zone-content i {
-  color: #00d4ff;
-  font-size: 2.2em;
-  margin-bottom: 6px;
-  animation: fileIconBounce 1.4s infinite alternate;
-  filter: drop-shadow(0 0 8px #06ffa5);
-  transition: color 0.18s;
+  .file-drop-zone:hover,
+  .file-drop-zone.drag-over {
+    border-color: #1E3A8A;
+    background: #f0f9ff;
+  }
+
+.drop-zone-content i {
+  font-size: 28px; /* Reduced from 32px */
+  color: #6b7280;
+  margin-bottom: 10px; /* Reduced margin */
+  transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }
-@keyframes fileIconBounce {
-  0% { transform: translateY(0) scale(1); }
-  60% { transform: translateY(-8px) scale(1.12); color: #06ffa5; }
-  100% { transform: translateY(0) scale(1); }
+
+.file-drop-zone:hover .drop-zone-content i {
+  color: #1E3A8A;
 }
 
-.file-upload-block .drop-zone-content p {
-  color: #222;
-  font-size: 1.08em;
+.drop-zone-content p {
+  color: #6b7280;
+  font-size: 12px; /* Reduced from 13px */
   font-weight: 500;
   margin: 0;
-  opacity: 0.85;
 }
 
-.file-upload-block .file-input {
-  opacity: 0;
-  position: absolute;
-  left: 0; top: 0; width: 100%; height: 100%;
-  cursor: pointer;
+.file-accepts {
+  color: #9CA3AF;
+  font-size: 11px; /* Reduced from 12px */
+  font-weight: 500;
+  margin-bottom: 12px; /* Reduced margin */
 }
 
-/* ===== HEADER STYLES ===== */
-.infopage-header {
+.file-list {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: #011329;
-  padding: 18px 32px 18px 32px;
-  border-radius: 0 0 18px 18px;
-  box-shadow: 0 2px 12px #38bdf844;
-  margin-bottom: 18px;
-  position: relative;
-  z-index: 10;
+  flex-wrap: wrap;
+  gap: 6px; /* Reduced gap */
 }
 
-.header-left {
+.file-chip {
   display: flex;
   align-items: center;
-  gap: 18px;
+  gap: 6px; /* Reduced gap */
+  background: #ffffff;
+  border: 2px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 6px 10px; /* Reduced padding */
+  font-size: 11px; /* Reduced from 12px */
+  font-weight: 500;
+  color: #374151;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.logo-img-header {
-  width: 54px;
-  height: 54px;
-  border-radius: 50%;
-  background: #fff;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
-  padding: 4px;
-  margin-top: -6px; /* Move logo slightly upwards */
-  margin-bottom: 1vh;
-}
+  .file-chip:hover {
+    border-color: #1E3A8A;
+    background: #f0f9ff;
+  }
 
-.py-detect-title-header {
-  font-size: 2.1rem;
-  font-family: 'Segoe UI', 'Arial', 'Roboto', sans-serif;
-  font-weight: 900;
-  letter-spacing: 6px;
-  color: #38bdf8;
+  .file-chip i {
+    color: #6b7280;
+    font-size: 12px; /* Reduced from 14px */
+  }
+
+.remove-file {
+  background: none;
+  border: none;
+  color: #9CA3AF;
+  cursor: pointer;
+  padding: 2px;
+  transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
   align-items: center;
-  gap: 2px;
-  margin-bottom: 1.5vh;
+  justify-content: center;
+  width: 18px; /* Reduced size */
+  height: 18px; /* Reduced size */
+  border-radius: 4px;
 }
 
-.py-detect-title-header .py-letter.p { color: #e3f6ff; text-shadow: 0 0 6px #38bdf8; }
-.py-detect-title-header .py-letter.y { color: #38bdf8; text-shadow: 0 0 6px #38bdf8; }
-.py-detect-title-header .py-shape { color: #e3f6ff; background: #e3f6ff; text-shadow: 0 0 6px #38bdf8; box-shadow: 0 0 6px #38bdf8, 0 0 2px #fff; border: 2px solid #23272b; width: 18px; height: 4px; display: inline-block; margin: 0 8px; border-radius: 2px; }
-.py-detect-title-header .py-letter.d { color: #e3f6ff; text-shadow: 0 0 6px #38bdf8; }
-.py-detect-title-header .py-letter.e { color: #38bdf8; text-shadow: 0 0 6px #38bdf8; }
-.py-detect-title-header .py-letter.t { color: #e3f6ff; text-shadow: 0 0 6px #38bdf8; }
-.py-detect-title-header .py-letter.e2 { color: #38bdf8; text-shadow: 0 0 6px #38bdf8; }
-.py-detect-title-header .py-letter.c { color: #e3f6ff; text-shadow: 0 0 6px #38bdf8; }
-.py-detect-title-header .py-letter.t2 { color: #38bdf8; text-shadow: 0 0 6px #38bdf8; }
+  .remove-file:hover {
+    background: #fee2e2;
+    color: #ef4444;
+  }
 
-.header-right {
-  display: flex;
-  align-items: center;
-  gap: 14px;
+.upload-confirmation {
+  color: #059669;
+  font-size: 12px; /* Reduced from 13px */
+  font-weight: 600;
+  margin-top: 10px; /* Reduced margin */
+  padding: 6px 10px; /* Reduced padding */
+  background: #d1fae5;
+  border-radius: 6px;
+  border: 2px solid #10b981;
+  animation: fadeIn 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.pykara-analysis-label {
-  color: #38bdf8;
-  font-size: 1.1em;
-  font-weight: 700;
-  letter-spacing: 1px;
+/* ===== Photo Field ===== */
+.field-container.photo-field {
+  /*grid-column: 1 / -1;*/
+  max-width: 100%;
 }
 
-.pykara-progress-bar {
-  width: 186px;
-  height: 6px;
-  background: #e3f6ff;
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: 0 2px 8px #38bdf844, 0 0 12px #38bdf8aa;
-  position: relative;
+/* ===== Enhanced Modern Navigation Buttons ===== */
+.modern-floating-nav-btn {
+  position: relative; /* Changed from fixed to relative */
+  margin-top: 30px; /* Added margin to position below form */
+  margin-bottom: 20px;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  align-items: center; /* Center the buttons */
+  width: 100%;
 }
 
-.pykara-progress-bar-inner {
-  height: 100%;
-  background: linear-gradient(270deg, #38bdf8, #06ffa5, #ff006e, #38bdf8);
-  background-size: 400% 100%;
-  border-radius: 8px 0 0 8px;
-  transition: width 0.4s cubic-bezier(.4,2,.6,1);
-  animation: progressBarGradientMove 2.5s linear infinite;
-  box-shadow: 0 0 16px #38bdf8cc, 0 0 8px #06ffa5aa;
+.modern-nav-row {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  margin-right: -1680px;
+  margin-top: -18px;
 }
 
-@keyframes progressBarGradientMove {
-  0% { background-position: 0% 50%; }
-  100% { background-position: 100% 50%; }
+.modern-round-btn {
+  width: 48px; /* Reduced size */
+  height: 48px; /* Reduced size */
+  border-radius: 50%;
+  border: none;
+  background: linear-gradient(135deg, #1E3A8A, #2563eb);
+  color: white;
+  font-size: 18px; /* Reduced from 20px */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 3px 10px 0 rgba(30, 58, 138, 0.3);
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  position: relative;
+  overflow: hidden;
 }
 
-.pykara-progress-percentage {
-  color: #38bdf8;
-  font-size: 1.05em;
-  font-weight: 700;
-  margin-left: 4px;
-}
+  .modern-round-btn::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.2);
+    transform: translate(-50%, -50%);
+    transition: width 0.6s, height 0.6s;
+  }
 
-/* ===== READABLE PROGRESS BAR ===== */
-.progress-container {
-  background: rgba(26, 26, 46, 0.9) !important;
-  backdrop-filter: blur(10px) !important;
-  padding: 8px 24px !important;
-  position: relative !important;
-}
+  .modern-round-btn:hover::before {
+    width: 150px;
+    height: 150px;
+  }
 
-.progress-bar {
-  background: linear-gradient(90deg, #00d4ff 0%, #06ffa5 50%, #ff006e 100%) !important;
-  height: 6px !important;
-  border-radius: 3px !important;
-  position: relative !important;
-  box-shadow: 0 0 10px rgba(0, 212, 255, 0.4) !important;
-}
+  .modern-round-btn:hover:not(:disabled) {
+    transform: translateY(-4px) scale(1.08);
+    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.2);
+  }
 
-.progress-text {
-  display: flex !important;
-  justify-content: space-between !important;
-  align-items: center !important;
-  font-size: 0.8rem !important;
-  color: #e0e6ed !important;
-  margin-bottom: 4px !important;
-}
+  .modern-round-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 
-.progress-ai {
-  color: #06ffa5 !important;
-  font-weight: 600 !important;
-}
+@keyframes bounceRight {
+  0% {
+    transform: translateX(0);
+  }
 
-/* ===== READABLE SECTION NAVIGATION ===== */
-.section-navigation {
-  background: linear-gradient(135deg, rgba(26, 26, 46, 0.9), rgba(22, 33, 62, 0.95)) !important;
-  backdrop-filter: blur(15px) !important;
-  border-bottom: 1px solid rgba(0, 212, 255, 0.2) !important;
-  padding: 16px 0 !important;
-  position: relative !important;
-}
+  60% {
+    transform: translateX(6px) scale(1.08);
+  }
 
-.section-pills {
-  display: flex !important;
-  justify-content: center !important;
-  gap: 16px !important;
-  max-width: 1200px !important;
-  margin: 0 auto !important;
-  padding: 0 24px !important;
+  100% {
+    transform: translateX(0);
+  }
 }
 
-.section-pill {
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)) !important;
-  border: 1px solid rgba(0, 212, 255, 0.3) !important;
-  backdrop-filter: blur(10px) !important;
-  padding: 12px 20px !important;
-  border-radius: 12px !important;
-  color: #e0e6ed !important;
-  font-weight: 500 !important;
-  font-size: 0.9rem !important;
-  cursor: pointer !important;
-  transition: all 0.3s ease !important;
-  position: relative !important;
-  display: flex !important;
-  align-items: center !important;
-  gap: 8px !important;
-  min-width: 150px !important;
-  justify-content: center !important;
-}
+@keyframes pulseSend {
+  0% {
+    box-shadow: 0 4px 24px rgba(0, 212, 255, 0.18);
+  }
 
-.section-pill:hover {
-  border-color: rgba(0, 212, 255, 0.6) !important;
-  box-shadow: 0 0 20px rgba(0, 212, 255, 0.3) !important;
-  transform: translateY(-2px) !important;
-}
+  60% {
+    box-shadow: 0 8px 32px rgba(255, 0, 110, 0.22);
+  }
 
-.section-pill.active {
-  background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(255, 0, 110, 0.1)) !important;
-  border-color: #00d4ff !important;
-  color: white !important;
-  box-shadow: 0 0 25px rgba(0, 212, 255, 0.4) !important;
-  transform: translateY(-3px) !important;
+  100% {
+    box-shadow: 0 4px 24px rgba(0, 212, 255, 0.18);
+  }
 }
 
-.section-pill::after {
-  content: attr(data-step) !important;
-  position: absolute !important;
-  top: -8px !important;
-  left: 12px !important;
-  width: 20px !important;
-  height: 20px !important;
-  background: linear-gradient(135deg, #7209b7, #4cc9f0) !important;
-  color: white !important;
-  border-radius: 50% !important;
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  font-size: 0.7rem !important;
-  font-weight: 700 !important;
-  border: 2px solid rgba(26, 26, 46, 0.9) !important;
+.modern-round-btn.next-btn-animated {
+  animation: bounceRight 1.2s infinite alternate;
 }
 
-.section-pill.active::after {
-  background: linear-gradient(135deg, #ff006e, #8338ec) !important;
-  animation: activeStep 2s ease-in-out infinite !important;
+.modern-round-btn.submit-btn-animated {
+  background: linear-gradient(135deg, #059669, #10b981);
+  animation: pulseSend 1.5s infinite alternate;
 }
 
-@keyframes activeStep {
-  0%, 100% { transform: scale(1); }
-  50% { transform: scale(1.1); }
-}
+  .modern-round-btn.submit-btn-animated:hover:not(:disabled) {
+    background: linear-gradient(135deg, #10b981, #059669);
+  }
 
-/* ===== READABLE SUBGROUP PILLS ===== */
-.subgroup-pills {
-  background: linear-gradient(135deg, rgba(22, 33, 62, 0.9), rgba(26, 26, 46, 0.95)) !important;
-  backdrop-filter: blur(15px) !important;
-  border-bottom: 1px solid rgba(0, 212, 255, 0.2) !important;
-  padding: 16px 24px !important;
-  display: flex !important;
-  justify-content: center !important;
-  flex-wrap: wrap !important;
-  gap: 12px !important;
-  max-width: 1200px !important;
-  margin: 0 auto !important;
+/* ===== Enhanced Submit Popup ===== */
+.submit-popup-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: fadeIn 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.subgroup-pills .pill {
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04)) !important;
-  border: 1px solid rgba(0, 212, 255, 0.25) !important;
-  backdrop-filter: blur(8px) !important;
-  padding: 8px 16px !important;
-  border-radius: 20px !important;
-  color: #e0e6ed !important;
-  font-weight: 500 !important;
-  font-size: 0.85rem !important;
-  cursor: pointer !important;
-  transition: all 0.3s ease !important;
-  display: flex !important;
-  align-items: center !important;
-  gap: 6px !important;
-  min-width: 120px !important;
-  justify-content: center !important;
+.submit-popup-modal {
+  background: #ffffff;
+  border-radius: 16px;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  padding: 32px; /* Reduced padding */
+  min-width: 360px; /* Reduced width */
+  max-width: 90vw;
+  text-align: center;
+  animation: scaleIn 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  border: 2px solid #e5e7eb;
+  position: relative;
+  overflow: hidden;
 }
 
-.subgroup-pills .pill:hover {
-  border-color: rgba(6, 255, 165, 0.6) !important;
-  box-shadow: 0 0 15px rgba(6, 255, 165, 0.3) !important;
-  transform: translateY(-1px) !important;
-}
+  .submit-popup-modal::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(90deg, #1E3A8A, #38bdf8);
+    z-index: 1;
+  }
 
-.subgroup-pills .pill.active {
-  background: linear-gradient(135deg, rgba(255, 0, 110, 0.2), rgba(131, 56, 236, 0.15)) !important;
-  border-color: #ff006e !important;
-  color: white !important;
-  box-shadow: 0 0 20px rgba(255, 0, 110, 0.4) !important;
-  transform: translateY(-2px) !important;
+.submit-popup-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px; /* Reduced gap */
+  position: relative;
+  z-index: 2;
 }
 
-/* ===== READABLE CONTENT AREA ===== */
-.investigation-container {
-  background: transparent !important;
-  padding: 24px 0 !important;
-  max-width: 100vw !important;
-  width: 96vw !important;
-  margin: 0 !important;
-  min-height: calc(100vh - 400px) !important;
-  position: relative !important;
-  left: 50% !important;
-  right: 50% !important;
-  margin-left: -48vw !important;
-  margin-right: -50vw !important;
-  box-sizing: border-box !important;
-}
-
-/* ===== FULL-WIDTH FORM CARD ===== */
-.form-card {
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.92)) !important;
-  backdrop-filter: blur(20px) !important;
-  border: 1px solid rgba(0, 212, 255, 0.2) !important;
-  border-radius: 0 !important;
-  box-shadow: 
-    0 8px 32px rgba(0, 0, 0, 0.1),
-    0 0 0 1px rgba(255, 255, 255, 0.2) !important;
-  color: #2C3E50 !important;
-  position: relative !important;
-  overflow: visible !important;
-  margin: 0 !important;
-  width: 100% !important;
-  max-width: 100% !important;
-  padding: 0 24px !important;
-  box-sizing: border-box !important;
-}
-
-.form-card::before {
-  content: '' !important;
-  position: absolute !important;
-  top: 0 !important;
-  left: -100% !important;
-  width: 100% !important;
-  height: 2px !important;
-  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.6), transparent) !important;
-  animation: cardScan 4s linear infinite !important;
+.submit-popup-icon {
+  font-size: 56px; /* Reduced from 64px */
+  color: #22c55e;
+  margin-bottom: 8px;
+  animation: float 3s ease-in-out infinite;
 }
 
-@keyframes cardScan {
-  0% { left: -100%; }
-  100% { left: 100%; }
+.submit-popup-content h3 {
+  color: #111827;
+  font-size: 24px; /* Reduced from 28px */
+  font-weight: 800;
+  margin: 0;
 }
 
-.card-header {
-  background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(255, 0, 110, 0.05)) !important;
-  border-bottom: 1px solid rgba(0, 212, 255, 0.2) !important;
-  padding: 16px 20px !important;
-  border-radius: 0 !important;
-  margin: 0 -24px !important;
-  margin-bottom: 0 !important;
-}
-
-.card-header h2 {
-  background: linear-gradient(45deg, #00d4ff, #ff006e) !important;
-  -webkit-background-clip: text !important;
-  -webkit-text-fill-color: transparent !important;
-  background-clip: text !important;
-  font-size: 1.1rem !important;
-  font-weight: 700 !important;
-  margin: 0 !important;
-  display: flex !important;
-  align-items: center !important;
-  gap: 8px !important;
+.submit-popup-content p {
+  color: #6b7280;
+  font-size: 14px; /* Reduced from 16px */
+  font-weight: 500;
+  margin: 0;
+  line-height: 1.6;
 }
 
-.card-content {
-  padding: 20px 0 !important;
-  background: rgba(255, 255, 255, 0.98) !important;
-  color: #2C3E50 !important;
-  width: 100% !important;
-  max-width: 100% !important;
-  box-sizing: border-box !important;
+.submit-popup-btn {
+  padding: 12px 28px; /* Reduced padding */
+  background: linear-gradient(135deg, #1E3A8A, #2563eb);
+  color: white;
+  border: none;
+  border-radius: 10px;
+  font-weight: 700;
+  font-size: 13px; /* Reduced from 14px */
+  cursor: pointer;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 3px 10px 0 rgba(30, 58, 138, 0.3);
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  position: relative;
+  overflow: hidden;
 }
 
-.section-description {
-  background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(6, 255, 165, 0.08)) !important;
-  border: 1px solid rgba(0, 212, 255, 0.2) !important;
-  border-radius: 8px !important;
-  padding: 12px 16px !important;
-  margin-bottom: 20px !important;
-  font-size: 0.85rem !important;
-  color: #2C3E50 !important;
-  border-left: 4px solid #00d4ff !important;
-  width: 100% !important;
-  max-width: 100% !important;
-  box-sizing: border-box !important;
-}
-
-/* ===== FULL-WIDTH FORM FIELDS ===== */
-.fields-grid {
-  display: grid !important;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
-  gap: 16px !important;
-  margin-top: 16px !important;
-  width: 100% !important;
-  max-width: 100% !important;
-  box-sizing: border-box !important;
-  padding: 0 !important;
-  overflow: visible !important;
+  .submit-popup-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 12px -3px rgba(0, 0, 0, 0.1), 0 3px 5px -3px rgba(0, 0, 0, 0.1);
+  }
+
+/* ===== Enhanced Microphone Button ===== */
+.mic-button-container {
   position: relative;
-}
+  display: inline-flex;
+  align-items: center;
+  margin-left: 6px; /* Reduced margin */
+}
+
+  .mic-button-container button {
+    width: 28px; /* Reduced size */
+    height: 28px; /* Reduced size */
+    border-radius: 50%;
+    background: #f3f4f6;
+    border: 2px solid #e5e7eb;
+    color: #374151;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px; /* Reduced from 14px */
+    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+  }
 
-.field-container {
-  background: rgba(255, 255, 255, 0.9) !important;
-  border: 1px solid rgba(0, 212, 255, 0.2) !important;
-  border-radius: 8px !important;
-  padding: 12px !important;
-  transition: all 0.3s ease !important;
-  position: relative !important;
-  overflow: visible !important;
-  z-index: 1;
-  width: 100% !important;
-  max-width: 100% !important;
-  box-sizing: border-box !important;
+    .mic-button-container button::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 0;
+      height: 0;
+      border-radius: 50%;
+      background: rgba(30, 58, 138, 0.1);
+      transform: translate(-50%, -50%);
+      transition: width 0.6s, height 0.6s;
+    }
+
+    .mic-button-container button:hover::before {
+      width: 100px;
+      height: 100px;
+    }
+
+    .mic-button-container button:hover {
+      background: #1E3A8A;
+      border-color: #1E3A8A;
+      color: white;
+    }
+
+.mic-popup {
+  position: absolute;
+  bottom: 120%;
+  left: 50%;
+  transform: translateX(-50%);
+  background: #1f2937;
+  color: white;
+  padding: 10px 14px; /* Reduced padding */
+  border-radius: 8px;
+  font-size: 11px; /* Reduced from 12px */
+  font-weight: 500;
+  white-space: nowrap;
+  z-index: 1000;
+  border: 1px solid #374151;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+}
+
+  .mic-popup::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 6px solid transparent;
+    border-top-color: #1f2937;
+  }
+
+.recording-status {
+  color: #ef4444;
+  font-size: 11px; /* Reduced from 12px */
+  font-weight: 600;
+  margin-top: 4px;
+  animation: pulse 1s infinite;
 }
 
-.field-container:hover {
-  border-color: rgba(0, 212, 255, 0.4) !important;
-  box-shadow: 0 0 15px rgba(0, 212, 255, 0.1) !important;
-  transform: translateY(-1px) !important;
+/* ===== Evidence Scene Grid ===== */
+.fields-grid.evidence-scene-grid {
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
 }
 
-.field-label {
-  color: #2C3E50 !important;
-  font-weight: 600 !important;
-  font-size: 0.85rem !important;
-  margin-bottom: 6px !important;
-  display: flex !important;
-  align-items: center !important;
-  gap: 6px !important;
-  width: 100% !important;
+/* ===== Remark Fields Full Width ===== */
+.field-container.remark,
+.field-container.remark-field,
+.field-container[data-field="Remark"],
+.field-container[data-field="REMARK"],
+.field-container[data-label="Remark"],
+.field-container[data-label="REMARK"],
+.field-container[data-subgroup="Remark"],
+.field-container[data-subgroup="remark"] {
+  grid-column: 1 / -1;
 }
 
-.field-input {
-  width: 100% !important;
-  padding: 10px 12px !important;
-  border: 1px solid #E1E8ED !important;
-  border-radius: 6px !important;
-  background: white !important;
-  color: #2C3E50 !important;
-  font-size: 0.85rem !important;
-  transition: all 0.3s ease !important;
-  box-sizing: border-box !important;
-}
-
-.field-input:focus {
-  border-color: #00d4ff !important;
-  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1) !important;
-  outline: none !important;
-}
-
-.field-input::placeholder {
-  color: #7F8C8D !important;
-}
-
-/* ===== CARD ACTIONS FULL WIDTH ===== */
-.card-actions {
-  display: flex !important;
-  align-items: center !important;
-  gap: 12px !important;
-  justify-content: flex-start !important;
-  width: 100% !important;
-  flex-wrap: wrap !important;
-  position: relative;
+/* ===== Professional Enhancements ===== */
+
+/* Add subtle pattern overlay to main container */
+.investigation-container::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: radial-gradient(circle at 25% 25%, rgba(30, 58, 138, 0.03) 0%, transparent 55%), radial-gradient(circle at 75% 75%, rgba(56, 189, 248, 0.02) 0%, transparent 55%);
+  pointer-events: none;
+  z-index: -1;
 }
 
-.card-actions-spacer {
-  flex: 1 1 auto;
+/* Enhanced hover effects for interactive elements */
+.field-selector-btn:hover,
+.info-btn:hover,
+.mic-button-container button:hover,
+.remove-file:hover {
+  transform: translateY(-1px);
 }
 
-.field-selector-container {
-  display: flex !important;
-  align-items: center !important;
-  justify-content: flex-end !important;
-  gap: 12px !important;
-  width: 100% !important;
+/* Smooth transitions for all interactive elements */
+button,
+input,
+select,
+textarea,
+.field-container,
+.section-pill,
+.subgroup-pills .pill {
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.modern-field-selector-btn {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  margin-left: auto;
+  /* Gradient borders for active states */
+  .field-container:focus-within {
+    border-color: #1E3A8A;
+    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1);
+  }
+
+  /* Professional loading skeleton */
+  .field-container.loading {
+    position: relative;
+    overflow: hidden;
+  }
+
+    .field-container.loading::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
+      animation: shimmer 2s infinite;
+    }
+
+/* Enhanced tooltips */
+[title] {
   position: relative;
 }
 
-.field-selector-btn.modern-selector-animated {
-  border-radius: 24px;
-  background: linear-gradient(135deg, #00d4ff 0%, #06ffa5 60%, #ff006e 100%);
+  [title]:hover::after {
+    content: attr(title);
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    background: #1f2937;
+    color: white;
+    padding: 6px 12px;
+    border-radius: 6px;
+    font-size: 11px;
+    white-space: nowrap;
+    z-index: 1000;
+    border: 1px solid #374151;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    margin-bottom: 8px;
+  }
+
+/* ===== Footer ===== */
+footer {
+  background: linear-gradient(135deg, rgba(30, 58, 138, 0.9) 0%, rgba(1, 19, 41, 0.95) 100%);
   color: #fff;
-  font-weight: 700;
-  font-size: 1rem;
-  padding: 10px 22px;
-  border: none;
-  box-shadow: 0 2px 12px rgba(0, 212, 255, 0.10);
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  cursor: pointer;
-  transition: background 0.18s, box-shadow 0.18s, transform 0.18s;
-  outline: none;
-  position: relative;
-  z-index: 2;
-  animation: selectorPulse 2s infinite alternate;
+  text-align: center;
+  padding: 14px 0; /* Reduced padding */
+  position: fixed;
+  width: 100%;
+  font-size: 13px; /* Reduced from 12px */
+  font-weight: 500;
+  margin-top: 24px;
+  bottom: 0;
+  left: 0;
+  z-index: 100;
 }
 
-.field-selector-btn.modern-selector-animated:hover,
-.field-selector-btn.modern-selector-animated.active {
-  background: linear-gradient(135deg, #06ffa5 0%, #00d4ff 60%, #ff006e 100%);
-  box-shadow: 0 4px 24px rgba(0, 212, 255, 0.18);
-  transform: scale(1.04);
+/* ===== Responsive Design ===== */
+@media (max-width: 1400px) {
+  .fields-grid {
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  }
 }
 
-@keyframes selectorPulse {
-  0% { box-shadow: 0 2px 12px rgba(0, 212, 255, 0.10); }
-  100% { box-shadow: 0 6px 24px rgba(0, 212, 255, 0.18); }
-}
+@media (max-width: 1200px) {
+  .header-inner,
+  .investigation-container {
+    padding: 0 16px;
+  }
 
-.field-selector-btn.modern-selector-animated i {
-  font-size: 1.2em;
-}
+  .section-pills,
+  .subgroup-pills {
+    padding: 0 16px;
+  }
 
-/* Highlight filled field-container with green border */
-.field-container.filled {
-  border-color: #06ffa5 !important;
-  box-shadow: 0 0 0 2px rgba(6,255,165,0.12);
-  transition: border-color 0.25s, box-shadow 0.25s;
-}
+  .card-header,
+  .card-content {
+    padding: 16px;
+  }
 
-/* ===== REMOVE BODY OVERFLOW ===== */
-body {
-  overflow-x: hidden !important;
-  width: 100vw !important;
-  box-sizing: border-box !important;
+  .fields-grid {
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 16px;
+  }
 }
 
-html {
-  overflow-x: hidden !important;
-  width: 100vw !important;
-  box-sizing: border-box !important;
-}
+@media (max-width: 992px) {
+  .header-inner {
+    flex-wrap: wrap;
+    gap: 16px;
+    padding: 12px 16px;
+    height: auto;
+  }
 
-/* ===== ENSURE ALL CONTAINERS ARE FULL WIDTH ===== */
-.site-header,
-.section-navigation,
-.subgroup-pills,
-.page-indicator-container {
-  width: 100vw !important;
-  max-width: 100vw !important;
-  margin: 0 !important;
-  box-sizing: border-box !important;
+  .header-progress {
+    order: 3;
+    width: 100%;
+    justify-content: center;
+    margin: 8px 0;
+  }
+
+  .section-pills {
+    flex-wrap: wrap;
+  }
+
+  .section-pill {
+    min-width: 140px; /* Reduced width */
+    flex: 1;
+  }
+
+  .modern-floating-nav-btn {
+    margin-top: 20px;
+    margin-bottom: 15px;
+  }
 }
 
-/* ===== RESPONSIVE FULL WIDTH ===== */
 @media (max-width: 768px) {
-  .investigation-container {
-    padding: 16px 0 !important;
-    margin-left: -50vw !important;
-    margin-right: -50vw !important;
-    left: 50% !important;
-    right: 50% !important;
-  }
-  
-  .form-card {
-    padding: 0 16px !important;
-    border-radius: 0 !important;
-  }
-  
-  .card-header {
-    margin: 0 -16px !important;
-    padding: 12px 16px !important;
+  .site-header {
+    height: auto;
   }
-  
-  .fields-grid {
-    grid-template-columns: 1fr !important;
-    gap: 12px !important;
-  }
-  
-  .card-actions {
-    flex-direction: column !important;
-    align-items: stretch !important;
-    gap: 8px !important;
+
+  .py-detect-title-header {
+    font-size: 22px;
+    letter-spacing: 1.5px;
   }
-  
-  .field-selector-container {
-    width: 100% !important;
+
+  .logo-img-header {
+    width: 32px;
+    height: 32px;
   }
-  
-  .field-selector-btn {
-    width: 100% !important;
-    justify-content: center !important;
+
+  .section-pill {
+    min-width: 120px; /* Reduced width */
+    padding: 8px 14px; /* Reduced padding */
+    font-size: 11px; /* Reduced from 12px */
   }
-}
 
-@media (max-width: 480px) {
-  .investigation-container {
-    padding: 12px 0 !important;
+  .compact-title {
+    font-size: 16px; /* Reduced from 18px */
   }
-  
-  .form-card {
-    padding: 0 12px !important;
+
+  .fields-grid {
+    grid-template-columns: 1fr;
   }
-  
-  .card-header {
-    margin: 0 -12px !important;
-    padding: 10px 12px !important;
+
+  .modern-field-selector-popup {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 90vw;
+    max-width: 360px; /* Reduced width */
   }
-  
-  .card-content {
-    padding: 16px 0 !important;
+
+  .popup-actions {
+    flex-direction: column;
   }
-}
 
-/* Crime Details style for autosave button */
-.autosave-indicator.crime-section-btn {
-  background: linear-gradient(135deg, #E8F4FD 0%, #F0F8FF 100%) !important;
-  border: 2px solid #4A90E2 !important;
-  color: #357ABD !important;
-  font-weight: 600 !important;
-  border-radius: 20px !important;
-  box-shadow: 0 2px 6px rgba(74, 144, 226, 0.08) !important;
-  padding: 10px 20px !important;
-  transition: all 0.3s;
-  display: flex !important;
-  align-items: center !important;
-  gap: 8px !important;
-}
+  .modern-floating-nav-btn {
+    margin-top: 15px;
+    margin-bottom: 10px;
+  }
 
-.autosave-indicator.crime-section-btn:hover {
-  border-color: #357ABD !important;
-  color: #fff !important;
-  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%) !important;
-  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.25) !important;
+  .modern-round-btn {
+    width: 42px; /* Reduced size */
+    height: 42px; /* Reduced size */
+    font-size: 16px; /* Reduced from 18px */
+  }
 }
 
-.autosave-right {
-  margin-left: auto !important;
-  margin-right: 0 !important;
-}
+@media (max-width: 480px) {
+  .header-actions {
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 8px;
+  }
 
-.autosave-left {
-  margin-right: auto !important;
-  margin-left: 0 !important;
-}
+  .autosave-indicator {
+    padding: 4px 8px;
+    font-size: 10px;
+  }
 
-.header-actions {
-  display: flex !important;
-  align-items: center !important;
-  gap: 16px !important;
-}
+  .profile-avatar {
+    width: 32px;
+    height: 32px;
+    font-size: 12px;
+  }
 
-.header-actions.autosave-right {
-  display: flex !important;
-  justify-content: flex-end !important;
-  width: 100%;
-}
+  .view-records-btn {
+    width: 36px;
+    height: 36px;
+    font-size: 16px;
+  }
 
-.autosave-indicator {
-  display: flex !important;
-  align-items: center !important;
-  gap: 8px !important;
-  padding: 8px 16px !important;
-  background: rgba(255, 255, 255, 0.15) !important;
-  border: 1px solid rgba(255, 255, 255, 0.2) !important;
-  border-radius: 8px !important;
-  font-size: 0.875rem !important;
-  color: white !important;
-  font-weight: 500 !important;
-  backdrop-filter: blur(10px) !important;
-}
+  .section-pill {
+    min-width: 100%;
+  }
 
-  .autosave-indicator.saving {
-    background: rgba(255, 255, 255, 0.25) !important;
-    animation: pulse 1.5s ease-in-out infinite !important;
+  .subgroup-pills .pill {
+    min-width: 110px; /* Reduced width */
+    font-size: 10px; /* Reduced from 11px */
+    padding: 5px 10px; /* Reduced padding */
   }
 
-.main-section-pill {
-  font-size: 1.25rem !important;
-  padding: 20px 36px !important;
-  min-width: 200px !important;
-  min-height: 64px !important;
-  border-width: 2.5px !important;
-  box-shadow: 0 4px 24px rgba(0, 212, 255, 0.18) !important;
-}
+  .card-header {
+    flex-direction: column;
+    gap: 10px; /* Reduced gap */
+    align-items: flex-start;
+  }
 
-.main-section-pill i {
-  font-size: 2rem !important;
-}
+  .modern-field-selector-btn {
+    align-self: flex-end;
+  }
 
-.main-section-pill span {
-  font-size: 1.25em !important;
-  font-weight: 700 !important;
-}
+  .field-container {
+    padding: 14px; /* Reduced padding */
+  }
 
-/* ===== MODERN NAVIGATION BUTTONS ===== */
-.modern-nav-btns {
-  display: flex;
-  justify-content: flex-end;
-  gap: 18px;
-  margin-top: 32px;
-  margin-bottom: 8px;
-}
+  .submit-popup-modal {
+    padding: 20px; /* Reduced padding */
+    min-width: 280px; /* Reduced width */
+  }
 
-.modern-round-btn {
-  width: 56px;
-  height: 56px;
-  border-radius: 50%;
-  border: none;
-  background: linear-gradient(135deg, #00d4ff 0%, #06ffa5 60%, #ff006e 100%);
-  color: #fff;
-  font-size: 2rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 4px 24px rgba(0, 212, 255, 0.18), 0 1.5px 6px rgba(0,0,0,0.08);
-  cursor: pointer;
-  transition: transform 0.18s cubic-bezier(.4,2,.6,1), box-shadow 0.18s;
-  outline: none;
-  position: relative;
-  z-index: 2;
-}
+  .submit-popup-icon {
+    font-size: 44px; /* Reduced from 48px */
+  }
 
-.modern-round-btn:active {
-  transform: scale(0.93);
-  box-shadow: 0 2px 8px rgba(0, 212, 255, 0.12);
-}
+  .submit-popup-content h3 {
+    font-size: 20px; /* Reduced from 24px */
+  }
 
-.modern-round-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+  .submit-popup-content p {
+    font-size: 12px; /* Reduced from 14px */
+  }
 }
 
-.next-btn-animated {
-  animation: bounceRight 1.2s infinite alternate;
-}
 
-@keyframes bounceRight {
-  0% { transform: translateX(0); }
-  60% { transform: translateX(6px) scale(1.08); }
-  100% { transform: translateX(0); }
-}
+/*8888888*/
 
-.submit-btn-animated {
-  animation: pulseSend 1.5s infinite alternate;
-}
+/* ===== Enhanced Field Help ===== */
+.field-help {
+  position: absolute !important;
+  top: 0;
+  left: calc(100% + -264px);
+  background: #1f2937;
+  color: white;
+  padding: 14px; /* Reduced padding */
+  border-radius: 10px;
+  box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.2);
+  width: 280px; /* Reduced width */
+  z-index: 1000 !important; /* Increased z-index and made important */
+  animation: fadeIn 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  font-size: 12px; /* Reduced from 13px */
+  line-height: 1.5;
+  border: 1px solid #374151;
+}
+
+  .field-help::before {
+    content: '';
+    position: absolute;
+    top: 16px;
+    left: -6px;
+    width: 12px;
+    height: 12px;
+    background: #1f2937;
+    transform: rotate(45deg);
+    border-left: 1px solid #374151;
+    border-bottom: 1px solid #374151;
+    z-index: 1001; /* Ensure arrow is above the popup */
+  }
 
-@keyframes pulseSend {
-  0% { box-shadow: 0 4px 24px rgba(0, 212, 255, 0.18); }
-  60% { box-shadow: 0 8px 32px rgba(255, 0, 110, 0.22); }
-  100% { box-shadow: 0 4px 24px rgba(0, 212, 255, 0.18); }
-}
+  .field-help strong {
+    color: #38bdf8;
+    display: block;
+    margin-bottom: 6px; /* Reduced margin */
+    font-size: 13px; /* Reduced from 14px */
+    font-weight: 700;
+  }
 
-.modern-round-btn i {
-  font-size: 2rem;
-  pointer-events: none;
-}
+/* Make sure field container doesn't interfere */
+.field-container {
+  background: #ffffff;
+  border: 2px solid #e5e7eb;
+  border-radius: 10px;
+  padding: 16px; /* Reduced padding */
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  animation: fadeIn 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  min-height: 120px; /* Set minimum height */
+  display: flex;
+  flex-direction: column;
+  z-index: 1; /* Keep this relatively low */
+  overflow: visible !important; /* Ensure popup can overflow */
+}
+form-card
+  .field-container:hover {
+    border-color: #1E3A8A;
+    box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.1), 0 6px 8px -4px rgba(0, 0, 0, 0.1);
+    transform: translateY(-3px);
+    z-index: 10; /* Raise on hover but keep lower than help popup */
+  }
 
-/* ===== FLOATING NAVIGATION BUTTON ===== */
-.modern-floating-nav-btn {
+/* ===== Submission Loader ===== */
+.submit-loader-backdrop {
   position: fixed;
-  bottom: 95px;
-  right: 32px;
-  z-index: 2000;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.75);
+  backdrop-filter: blur(8px);
+  z-index: 3000;
   display: flex;
-  flex-direction: column;
-  gap: 16px;
-  pointer-events: none;
+  align-items: center;
+  justify-content: center;
+  animation: fadeIn 300ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.modern-floating-nav-btn .modern-round-btn {
-  pointer-events: auto;
+.submit-loader-modal {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 20px;
+  box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.4);
+  padding: 40px 48px;
+  min-width: 420px;
+  max-width: 90vw;
+  text-align: center;
+  animation: scaleIn 350ms cubic-bezier(0.4, 0, 0.2, 1);
+  border: 2px solid rgba(56, 189, 248, 0.2);
+  position: relative;
+  overflow: hidden;
 }
 
-@media (max-width: 600px) {
-  .modern-floating-nav-btn {
-    bottom: 16px;
-    right: 16px;
+  .submit-loader-modal::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 6px;
+    background: linear-gradient(90deg, #1E3A8A, #38bdf8, #22c55e);
+    z-index: 1;
+    animation: gradientShift 3s infinite;
   }
-}
 
-/* Compact Card Header */
-.compact-card-header {
+.submit-loader-content {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: space-between;
-  padding: 8px 16px !important;
-  min-height: 0;
-  background: linear-gradient(135deg, rgba(0, 212, 255, 0.06), rgba(255, 0, 110, 0.04)) !important;
-  border-bottom: 1px solid rgba(0, 212, 255, 0.12) !important;
-  margin: 0 -24px !important;
+  gap: 24px;
+  position: relative;
+  z-index: 2;
 }
 
-.card-header-main {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+/* Spinner animation */
+.spinner-container {
+  position: relative;
+  width: 80px;
+  height: 80px;
 }
 
-.compact-title {
-  font-size: 1.1rem !important;
-  font-weight: 700 !important;
-  margin: 0 !important;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: #00d4ff !important;
-  background: none !important;
+.spinner {
+  width: 60px;
+  height: 60px;
+  border: 6px solid #f3f4f6;
+  border-top: 6px solid #1E3A8A;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
-.compact-title i {
-  font-size: 1.1em;
-  color: #00d4ff;
+.spinner-ring {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 80px;
+  height: 80px;
+  border: 3px solid rgba(56, 189, 248, 0.3);
+  border-radius: 50%;
+  animation: pulse-ring 2s infinite;
 }
 
-.field-counter.compact-field-counter {
-  font-size: 0.95em !important;
-  font-weight: 600 !important;
-  color: #222 !important;
-  background: none !important;
-  padding: 0 0 0 8px !important;
-  box-shadow: none !important;
-  border-radius: 0 !important;
-  text-shadow: none !important;
+.submit-loader-content h3 {
+  color: #111827;
+  font-size: 28px;
+  font-weight: 800;
+  margin: 0;
 }
 
-.modern-field-selector-btn.compact-selector-btn {
-  margin-left: 16px;
-  display: flex;
-  align-items: center;
-  height: 32px;
+.submit-loader-content p {
+  color: #6b7280;
+  font-size: 16px;
+  font-weight: 500;
+  margin: 0;
+  line-height: 1.6;
 }
 
-.field-selector-btn.modern-selector-animated.compact-selector-btn-inner {
-  font-size: 0.95rem;
-  padding: 4px 14px;
-  min-width: 0;
-  height: 32px;
-  border-radius: 16px;
-  gap: 6px;
+/* Progress bar */
+.loader-progress {
+  width: 100%;
+  height: 8px;
+  background: #f3f4f6;
+  border-radius: 4px;
+  overflow: hidden;
+  border: 1px solid #e5e7eb;
+  margin-top: 8px;
 }
 
-.field-selector-btn.modern-selector-animated.compact-selector-btn-inner i {
-  font-size: 1em;
+.loader-progress-bar {
+  height: 100%;
+  background: linear-gradient(90deg, #1E3A8A, #2563eb, #38bdf8);
+  border-radius: 4px;
+  transition: width 0.3s ease-out;
+  position: relative;
+  overflow: hidden;
 }
 
-.field-selector-counter {
-  font-size: 0.95em;
-  font-weight: 600;
-  margin-left: 2px;
-}
+  .loader-progress-bar::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+    animation: shimmer 1.5s infinite;
+  }
 
-/* ===== MODERN FIELD SELECTOR POPUP ===== */
-.modern-field-selector-popup {
-  position: absolute;
-  top: 110%;
-  right: 0;
-  min-width: 260px;
-  background: #fff;
-  border-radius: 16px;
-  box-shadow: 0 8px 32px rgba(0,212,255,0.12);
-  z-index: 3000 !important;
-  padding: 18px 20px 16px 20px;
-  animation: popupFadeIn 0.25s cubic-bezier(.4,2,.6,1);
+.loader-subtext {
+  color: #38bdf8 !important;
+  font-size: 14px !important;
+  font-weight: 600 !important;
+  margin-top: 4px !important;
 }
 
-.modern-field-selector-btn {
-  position: relative;
-}
+/* Add these animations if not already present */
+@keyframes spin {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
 
-@keyframes popupFadeIn {
-  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
-  to { opacity: 1; transform: translateY(0) scale(1); }
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
 }
 
-.popup-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 12px;
-}
+@keyframes gradientShift {
+  0% {
+    background-position: 0% 0%;
+  }
 
-.popup-header span {
-  font-weight: 700;
-  font-size: 1.1em;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: #00d4ff;
-}
+  50% {
+    background-position: 100% 0%;
+  }
 
-.popup-header i {
-  color: #00d4ff;
+  100% {
+    background-position: 0% 0%;
+  }
 }
 
-.popup-close-btn {
-  background: none;
-  border: none;
-  font-size: 1.2em;
-  color: #ff006e;
-  cursor: pointer;
-  transition: color 0.18s;
-}
-.popup-close-btn:hover {
-  color: #00d4ff;
+/* Ensure loader is above everything */
+.submit-popup-backdrop {
+  z-index: 2000;
 }
 
-.popup-fields-list {
-  max-height: 220px;
-  overflow: auto;
-  margin-bottom: 16px;
-  padding-right: 2px;
+.submit-loader-backdrop {
+  z-index: 3000;
 }
 
-.popup-field-row {
-  margin-bottom: 8px;
-}
+@media (max-width: 768px) {
+  .submit-loader-modal {
+    padding: 32px;
+    min-width: 320px;
+  }
 
-.popup-field-label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 1em;
-  cursor: pointer;
-  user-select: none;
-  font-weight: 500;
-  color: #222;
-  border-radius: 6px;
-  padding: 2px 4px;
-  transition: background 0.15s;
-}
-.popup-field-label:hover {
-  background: #f0faff;
-}
+  .submit-loader-content h3 {
+    font-size: 22px;
+  }
 
-.popup-field-label input[type="checkbox"] {
-  accent-color: #00d4ff;
-  width: 18px;
-  height: 18px;
-  border-radius: 4px;
-  border: 1.5px solid #00d4ff;
-  margin: 0;
-  transition: box-shadow 0.15s;
-}
+  .submit-loader-content p {
+    font-size: 14px;
+  }
 
-.popup-field-label input[type="checkbox"]:checked {
-  box-shadow: 0 0 0 2px #06ffa5;
-}
+  .spinner-container {
+    width: 60px;
+    height: 60px;
+  }
 
-.popup-field-text {
-  font-weight: 500;
-  color: #222;
-}
+  .spinner {
+    width: 40px;
+    height: 40px;
+    border-width: 4px;
+  }
 
-.popup-actions {
-  display: flex;
-  justify-content: space-between;
-  gap: 8px;
+  .spinner-ring {
+    width: 60px;
+    height: 60px;
+  }
 }
 
-.popup-action-btn {
-  flex: 1;
-  border: none;
-  border-radius: 8px;
-  padding: 8px 0;
-  font-weight: 600;
-  font-size: 1em;
-  cursor: pointer;
-  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
+/* ===== Enhanced Fields Grid ===== */
+.fields-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 16px; /* Reduced gap */
+  position: relative; /* Create stacking context */
+  z-index: 1; /* Base z-index for grid */
 }
 
-.popup-action-btn.clear-btn {
-  background: #f8f8f8;
-  color: #ff006e;
-}
-.popup-action-btn.clear-btn:hover {
-  background: #ffe6f0;
-  color: #d1005b;
+/* ===== Enhanced Scrolling for Physical Description ===== */
+/* When on Physical Description page, enable scrolling inside form card */
+.form-card.is-physical-description {
+  height: 32vw; /* Same height as before */
+  overflow-y: auto; /* Enable vertical scrolling */
+  overflow-x: hidden; /* Hide horizontal scroll */
 }
 
-.popup-action-btn.selectall-btn {
-  background: #f8f8f8;
-  color: #06ffa5;
-}
-.popup-action-btn.selectall-btn:hover {
-  background: #e6fff7;
-  color: #00d4ff;
-}
+  /* Ensure the content can scroll properly */
+  .form-card.is-physical-description .card-content {
+    min-height: 0; /* Remove min-height constraint */
+  }
 
-.popup-action-btn.save-btn {
-  background: linear-gradient(135deg,#00d4ff,#06ffa5,#ff006e);
-  color: #fff;
-  box-shadow: 0 2px 8px rgba(0,212,255,0.10);
-}
-.popup-action-btn.save-btn:hover {
-  background: linear-gradient(135deg,#06ffa5,#00d4ff,#ff006e);
-  color: #fff;
-  box-shadow: 0 4px 16px rgba(0,212,255,0.18);
-}
+  /* Custom scrollbar for Physical Description card */
+  .form-card.is-physical-description::-webkit-scrollbar {
+    width: 6px;
+  }
 
-/* ===== SUBMIT SUCCESS POPUP ===== */
-.submit-popup-backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(0,0,0,0.35);
-  z-index: 3000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.submit-popup-modal {
-  background: #fff;
-  border-radius: 16px;
-  box-shadow: 0 8px 32px #38bdf844, 0 0 24px #1e293b88;
-  padding: 32px 36px 28px 36px;
-  min-width: 320px;
-  max-width: 90vw;
-  text-align: center;
-  z-index: 3001;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.submit-popup-content h3 {
-  color: #38bdf8;
-  margin: 12px 0 8px 0;
-  font-size: 1.4em;
-  font-weight: 700;
-}
-.submit-popup-content p {
-  color: #23272b;
-  font-size: 1.08em;
-  margin-bottom: 18px;
-}
-.submit-popup-btn {
-  background: linear-gradient(90deg, #38bdf8 0%, #23272b 100%);
-  color: #fff;
-  font-size: 1em;
-  font-weight: 600;
-  border: none;
-  border-radius: 8px;
-  padding: 10px 32px;
-  box-shadow: 0 2px 12px #38bdf888;
-  cursor: pointer;
-  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
-}
-.submit-popup-btn:hover {
-  background: linear-gradient(90deg, #23272b 0%, #38bdf8 100%);
-  color: #bae6fd;
-  box-shadow: 0 2px 24px #bae6fd88;
-}
-.submit-popup-icon {
-  color: #38bdf8;
-  font-size: 2.6em;
-  margin-bottom: 8px;
+  .form-card.is-physical-description::-webkit-scrollbar-track {
+    background: #f1f5f9;
+    border-radius: 3px;
+  }
+
+  .form-card.is-physical-description::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 3px;
+  }
+
+    .form-card.is-physical-description::-webkit-scrollbar-thumb:hover {
+      background: #94a3b8;
+    }
+
+  /* Ensure fields grid maintains proper layout with scroll */
+  .form-card.is-physical-description .fields-grid {
+    min-height: auto; /* Allow natural height */
+    max-height: none; /* Remove max-height constraint */
+  }
+
+  /* Keep the same hover effects */
+  .form-card.is-physical-description:hover {
+    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.25);
+    transform: translateY(-2px);
+  }
+
+@media (max-width: 768px) {
+  /* ... existing mobile styles ... */
+
+  .form-card.is-physical-description {
+    height: 50vh; /* Use viewport height on mobile */
+    max-height: 500px; /* Increase max-height for mobile */
+  }
 }
 
+@media (max-width: 480px) {
+  /* ... existing small screen styles ... */
 
-/* Footer */
-footer {
-  background: linear-gradient(to right, #011022, #01030a);
-  color: #fff;
-  text-align: center;
-  padding: 10px 0px;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100%;
+  .form-card.is-physical-description {
+    height: 55vh; /* Slightly taller for very small screens */
+    max-height: 450px;
+  }
 }