/* ============================================================
   PATNA STUDENT SUVIDHA — NEUMORPHIC DESIGN SYSTEM
   Soft UI with warm cream tones, dual shadows & texture
   ============================================================ */

/* ── CSS CUSTOM PROPERTIES (Design Tokens) ────────────────── */
:root {
  /* Base palette — premium light warm cream/sand */
  --nm-bg:          #EAE5DB;
  --nm-bg-dark:     #DFD9CE;
  --nm-bg-light:    #FAF7F2;
  --nm-surface:     #E5E0D5;
  --nm-surface-2:   #F2ECE0;

  /* Shadows */
  --nm-shadow-light: #FFFFFF;
  --nm-shadow-dark:  rgba(160, 150, 135, 0.45);
  --nm-shadow-sm:    3px 3px 8px var(--nm-shadow-dark), -3px -3px 8px var(--nm-shadow-light);
  --nm-shadow-md:    6px 6px 16px var(--nm-shadow-dark), -6px -6px 16px var(--nm-shadow-light);
  --nm-shadow-lg:    10px 10px 28px var(--nm-shadow-dark), -10px -10px 28px var(--nm-shadow-light);
  --nm-shadow-inset: inset 4px 4px 10px var(--nm-shadow-dark), inset -4px -4px 10px var(--nm-shadow-light);
  --nm-shadow-inset-sm: inset 2px 2px 6px var(--nm-shadow-dark), inset -2px -2px 6px var(--nm-shadow-light);

  /* Brand colours */
  --nm-blue:        #3B6FD4;
  --nm-blue-light:  rgba(59, 111, 212, 0.12);
  --nm-orange:      #C05A3E;
  --nm-orange-light:rgba(192, 90, 62, 0.12);
  --nm-green:       #1B4332;
  --nm-green-light: rgba(27, 67, 50, 0.12);
  --nm-red:         #EF4444;
  --nm-amber:       #F59E0B;

  /* Text */
  --nm-text-primary:   #2D2A26;
  --nm-text-secondary: #7A7067;
  --nm-text-muted:     #A39C93;
  --nm-text-inverse:   #FAF7F2;

  /* Borders */
  --nm-border:      rgba(168, 160, 149, 0.3);
  --nm-border-light:rgba(255, 255, 255, 0.7);

  /* Typography */
  --nm-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --nm-font-display: 'Outfit', 'Inter', sans-serif;

  /* Radii */
  --nm-radius-sm:  10px;
  --nm-radius-md:  16px;
  --nm-radius-lg:  24px;
  --nm-radius-xl:  32px;
  --nm-radius-full: 9999px;

  /* Easing */
  --nm-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --nm-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --nm-ease-out:    cubic-bezier(0, 0, 0.2, 1);
}

/* ── GLOBAL RESETS ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; }
-webkit-tap-highlight-color: transparent;

/* ── BODY / PAGE BASE ─────────────────────────────────────── */
body.nm-body {
  background-color: var(--nm-bg);
  background-image:
    /* Soft noise texture */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"),
    /* Warm radial glow */
    radial-gradient(ellipse at 20% 10%, rgba(249,115,22,0.04) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(59,111,212,0.05) 0%, transparent 60%);
  min-height: 100vh;
  font-family: var(--nm-font-primary);
  color: var(--nm-text-primary);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* ── NEUMORPHIC SURFACE CLASSES ───────────────────────────── */

/* Raised element (convex) */
.nm-raised {
  background: var(--nm-bg);
  box-shadow: var(--nm-shadow-md);
  border-radius: var(--nm-radius-md);
}
.nm-raised-sm {
  background: var(--nm-bg);
  box-shadow: var(--nm-shadow-sm);
  border-radius: var(--nm-radius-sm);
}
.nm-raised-lg {
  background: var(--nm-bg);
  box-shadow: var(--nm-shadow-lg);
  border-radius: var(--nm-radius-lg);
}

/* Sunken / inset element */
.nm-inset {
  background: var(--nm-bg-dark);
  box-shadow: var(--nm-shadow-inset);
  border-radius: var(--nm-radius-md);
}
.nm-inset-sm {
  background: var(--nm-bg-dark);
  box-shadow: var(--nm-shadow-inset-sm);
  border-radius: var(--nm-radius-sm);
}

/* Card surfaces */
.nm-card {
  background: linear-gradient(145deg, var(--nm-bg-light), var(--nm-bg));
  box-shadow: var(--nm-shadow-md);
  border-radius: var(--nm-radius-lg);
}
.nm-card-sm {
  background: linear-gradient(145deg, var(--nm-bg-light), var(--nm-bg));
  box-shadow: var(--nm-shadow-sm);
  border-radius: var(--nm-radius-md);
}

/* ── BUTTONS ──────────────────────────────────────────────── */

.nm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: var(--nm-radius-full);
  border: none;
  font-family: var(--nm-font-primary);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    box-shadow 0.2s var(--nm-ease-smooth),
    transform 0.15s var(--nm-ease-spring),
    background 0.2s;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
}

.nm-btn-primary {
  background: linear-gradient(135deg, #3B6FD4 0%, #2855B8 100%);
  color: #ffffff;
  box-shadow:
    4px 4px 12px rgba(43, 85, 184, 0.35),
    -2px -2px 6px rgba(255,255,255,0.4),
    inset 0 1px 0 rgba(255,255,255,0.2);
}
.nm-btn-primary:active {
  transform: scale(0.96);
  box-shadow:
    2px 2px 6px rgba(43, 85, 184, 0.3),
    inset 2px 2px 6px rgba(0,0,0,0.15);
}

.nm-btn-secondary {
  background: var(--nm-bg);
  color: var(--nm-blue);
  box-shadow: var(--nm-shadow-sm);
}
.nm-btn-secondary:active {
  transform: scale(0.96);
  box-shadow: var(--nm-shadow-inset-sm);
}

.nm-btn-orange {
  background: linear-gradient(135deg, #F97316 0%, #EA6008 100%);
  color: #ffffff;
  box-shadow:
    4px 4px 12px rgba(249, 115, 22, 0.35),
    -2px -2px 6px rgba(255,255,255,0.4),
    inset 0 1px 0 rgba(255,255,255,0.2);
}
.nm-btn-orange:active {
  transform: scale(0.96);
  box-shadow:
    2px 2px 6px rgba(249, 115, 22, 0.3),
    inset 2px 2px 6px rgba(0,0,0,0.15);
}

.nm-btn-green {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #ffffff;
  box-shadow:
    4px 4px 12px rgba(16, 185, 129, 0.35),
    -2px -2px 6px rgba(255,255,255,0.4),
    inset 0 1px 0 rgba(255,255,255,0.2);
}
.nm-btn-green:active {
  transform: scale(0.96);
  box-shadow:
    2px 2px 6px rgba(16, 185, 129, 0.3),
    inset 2px 2px 6px rgba(0,0,0,0.15);
}

/* ── ICON BUTTON ──────────────────────────────────────────── */
.nm-icon-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--nm-bg);
  box-shadow: var(--nm-shadow-sm);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: box-shadow 0.18s var(--nm-ease-smooth), transform 0.15s var(--nm-ease-spring);
  color: var(--nm-text-secondary);
  will-change: transform;
}
.nm-icon-btn:active {
  transform: scale(0.9);
  box-shadow: var(--nm-shadow-inset-sm);
}

/* ── CHIP / TAG ───────────────────────────────────────────── */
.nm-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 14px;
  border-radius: var(--nm-radius-full);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--nm-bg);
  box-shadow: var(--nm-shadow-sm);
  color: var(--nm-text-secondary);
  cursor: pointer;
  transition: box-shadow 0.18s var(--nm-ease-smooth), transform 0.15s var(--nm-ease-spring);
  user-select: none;
}
.nm-chip.active {
  background: linear-gradient(135deg, #3B6FD4, #2855B8);
  color: #fff;
  box-shadow: 4px 4px 12px rgba(43, 85, 184, 0.35), -2px -2px 6px rgba(255,255,255,0.4);
}
.nm-chip:active { transform: scale(0.94); }

/* ── INPUT / FORM ELEMENTS ────────────────────────────────── */
.nm-input {
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--nm-radius-md);
  border: none;
  background: var(--nm-bg-dark);
  box-shadow: var(--nm-shadow-inset);
  font-family: var(--nm-font-primary);
  font-size: 15px; font-weight: 500;
  color: var(--nm-text-primary);
  outline: none;
  transition: box-shadow 0.2s var(--nm-ease-smooth);
}
.nm-input::placeholder { color: var(--nm-text-muted); }
.nm-input:focus {
  box-shadow:
    inset 4px 4px 10px var(--nm-shadow-dark),
    inset -4px -4px 10px var(--nm-shadow-light),
    0 0 0 2px rgba(59, 111, 212, 0.25);
}

/* ── STATUS BADGES ────────────────────────────────────────── */
.nm-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px;
  border-radius: var(--nm-radius-full);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.nm-badge-green {
  background: rgba(16, 185, 129, 0.15);
  color: #047857;
  box-shadow: inset 2px 2px 4px rgba(4, 120, 87, 0.1), inset -1px -1px 3px rgba(255,255,255,0.5);
}
.nm-badge-blue {
  background: rgba(59, 111, 212, 0.15);
  color: #1D4ED8;
  box-shadow: inset 2px 2px 4px rgba(29, 78, 216, 0.1), inset -1px -1px 3px rgba(255,255,255,0.5);
}
.nm-badge-orange {
  background: rgba(249, 115, 22, 0.15);
  color: #C2410C;
  box-shadow: inset 2px 2px 4px rgba(194, 65, 12, 0.1), inset -1px -1px 3px rgba(255,255,255,0.5);
}
.nm-badge-red {
  background: rgba(239, 68, 68, 0.15);
  color: #B91C1C;
  box-shadow: inset 2px 2px 4px rgba(185, 28, 28, 0.1), inset -1px -1px 3px rgba(255,255,255,0.5);
}

/* ── DIVIDERS ─────────────────────────────────────────────── */
.nm-divider {
  width: 100%; height: 1px;
  background: linear-gradient(to right, transparent, var(--nm-border), transparent);
  margin: 12px 0;
}

/* ── TOP APP BAR ──────────────────────────────────────────── */
.nm-app-bar {
  background: rgba(234, 229, 219, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 2px 12px var(--nm-shadow-dark), 0 -1px 0 rgba(255,255,255,0.7);
  border-bottom: 1px solid rgba(255,255,255,0.5);
}

/* ── BOTTOM NAV BAR ───────────────────────────────────────── */
.nm-bottom-nav {
  background: rgba(234, 229, 219, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 -4px 20px rgba(168, 160, 149, 0.25), 0 1px 0 rgba(255,255,255,0.8) inset;
  border-top: 1px solid rgba(255,255,255,0.6);
}

/* ── TOGGLE SWITCH ────────────────────────────────────────── */
.nm-toggle-track {
  width: 52px; height: 28px;
  border-radius: var(--nm-radius-full);
  background: var(--nm-bg-dark);
  box-shadow: var(--nm-shadow-inset-sm);
  position: relative;
  transition: background 0.25s;
}
.nm-toggle-track.checked { background: linear-gradient(135deg, #10B981, #059669); }
.nm-toggle-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(145deg, #FDFCFA, #E4E0DA);
  box-shadow: 2px 2px 6px rgba(168,160,149,0.5), -1px -1px 3px rgba(255,255,255,0.8);
  transition: transform 0.25s var(--nm-ease-spring);
}
.nm-toggle-track.checked .nm-toggle-thumb { transform: translateX(24px); }

/* ── PROGRESS BAR ─────────────────────────────────────────── */
.nm-progress-track {
  width: 100%; height: 8px;
  border-radius: var(--nm-radius-full);
  background: var(--nm-bg-dark);
  box-shadow: var(--nm-shadow-inset-sm);
  overflow: hidden;
}
.nm-progress-fill {
  height: 100%;
  border-radius: var(--nm-radius-full);
  background: linear-gradient(90deg, #3B6FD4, #10B981);
  box-shadow: 0 0 8px rgba(59, 111, 212, 0.4);
  transition: width 0.4s var(--nm-ease-smooth);
}

/* ── COUNTER BUTTONS ──────────────────────────────────────── */
.nm-counter-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--nm-bg);
  box-shadow: var(--nm-shadow-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700;
  color: var(--nm-blue);
  cursor: pointer;
  transition: box-shadow 0.15s var(--nm-ease-smooth), transform 0.12s var(--nm-ease-spring);
  user-select: none;
  will-change: transform;
}
.nm-counter-btn:active {
  transform: scale(0.88);
  box-shadow: var(--nm-shadow-inset-sm);
}

/* ── SELECTION CARD ───────────────────────────────────────── */
.nm-select-card {
  background: var(--nm-bg);
  box-shadow: var(--nm-shadow-md);
  border-radius: var(--nm-radius-lg);
  padding: 16px;
  cursor: pointer;
  transition:
    box-shadow 0.2s var(--nm-ease-smooth),
    transform 0.15s var(--nm-ease-spring);
  will-change: transform;
  border: 2px solid transparent;
}
.nm-select-card.selected {
  border-color: var(--nm-blue);
  box-shadow: var(--nm-shadow-sm), 0 0 0 2px rgba(59, 111, 212, 0.2);
  background: linear-gradient(145deg, #FDFCFA, #EAE6E0);
}
.nm-select-card:active { transform: scale(0.98); }

/* ── FLOATING ACTION BUTTON ───────────────────────────────── */
.nm-fab {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #3B6FD4, #2855B8);
  color: #fff;
  box-shadow:
    6px 6px 18px rgba(43, 85, 184, 0.4),
    -3px -3px 8px rgba(255,255,255,0.5),
    inset 0 1px 0 rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: box-shadow 0.2s var(--nm-ease-smooth), transform 0.15s var(--nm-ease-spring);
  will-change: transform;
}
.nm-fab:active {
  transform: scale(0.92);
  box-shadow:
    3px 3px 10px rgba(43, 85, 184, 0.35),
    inset 2px 2px 6px rgba(0,0,0,0.15);
}

/* ── ANIMATIONS ───────────────────────────────────────────── */

/* Smooth entrance */
@keyframes nm-slide-up {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.nm-slide-up { animation: nm-slide-up 0.4s var(--nm-ease-spring) both; }

@keyframes nm-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.nm-fade-in { animation: nm-fade-in 0.35s var(--nm-ease-out) both; }

/* Stagger children */
.nm-stagger > *:nth-child(1) { animation-delay: 0.05s; }
.nm-stagger > *:nth-child(2) { animation-delay: 0.10s; }
.nm-stagger > *:nth-child(3) { animation-delay: 0.15s; }
.nm-stagger > *:nth-child(4) { animation-delay: 0.20s; }
.nm-stagger > *:nth-child(5) { animation-delay: 0.25s; }
.nm-stagger > *:nth-child(6) { animation-delay: 0.30s; }

/* Soft pulse */
@keyframes nm-pulse-soft {
  0%, 100% { box-shadow: var(--nm-shadow-md); }
  50% { box-shadow: var(--nm-shadow-lg), 0 0 0 4px rgba(59, 111, 212, 0.08); }
}
.nm-pulse { animation: nm-pulse-soft 3s ease-in-out infinite; }

/* Gentle float */
@keyframes nm-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.nm-float { animation: nm-float 3s ease-in-out infinite; }

/* Loading spinner */
@keyframes nm-spin {
  to { transform: rotate(360deg); }
}
.nm-spinner {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 3px solid var(--nm-bg-dark);
  border-top-color: var(--nm-blue);
  box-shadow: var(--nm-shadow-inset-sm);
  animation: nm-spin 0.9s linear infinite;
}

/* Shimmer skeleton */
@keyframes nm-shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}
.nm-skeleton {
  background: linear-gradient(
    90deg,
    var(--nm-bg-dark) 25%,
    var(--nm-bg-light) 50%,
    var(--nm-bg-dark) 75%
  );
  background-size: 200% 100%;
  animation: nm-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--nm-radius-sm);
}

/* ── UTILITY CLASSES ──────────────────────────────────────── */
.nm-text-primary   { color: var(--nm-text-primary); }
.nm-text-secondary { color: var(--nm-text-secondary); }
.nm-text-muted     { color: var(--nm-text-muted); }
.nm-text-blue      { color: var(--nm-blue); }
.nm-text-orange    { color: var(--nm-orange); }
.nm-text-green     { color: var(--nm-green); }

.nm-bg-surface     { background: var(--nm-surface); }
.nm-bg-light       { background: var(--nm-bg-light); }

/* ── PAGE TRANSITION ──────────────────────────────────────── */
body { transition: opacity 0.3s ease; }
body.nm-exit { opacity: 0; transform: scale(1.01); }

/* Live badge */
.nm-live-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: #EF4444;
  color: #fff;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--nm-radius-full);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}
.nm-live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: nm-live-pulse 1.1s ease-in-out infinite;
}
@keyframes nm-live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.65); }
}

/* ============================================================
   GLOBAL DARK THEME OVERRIDES FOR HARDCODED LIGHT STYLES
   ============================================================ */

/* Force body background-color and texture */
body, 
[style*="background-color:#FAF8F5"], 
[style*="background-color:#F0EDE8"], 
[style*="background-color: #FAF8F5"], 
[style*="background-color: #F0EDE8"], 
[style*="background:#F0EDE8"], 
[style*="background: #F0EDE8"] {
  background-color: var(--nm-bg) !important;
  background: var(--nm-bg) !important;
  color: var(--nm-text-primary) !important;
}

body {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 20% 10%, rgba(245, 129, 86, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(108, 152, 245, 0.08) 0%, transparent 60%) !important;
}

/* Translucent headers and footers that were hardcoded to cream/light gray */
header, footer, .nm-app-bar, .nm-bottom-nav,
[style*="background: rgba(240,237,232"], 
[style*="background:rgba(240,237,232"],
[style*="background: rgba(240, 237, 232"] {
  background: rgba(234, 229, 219, 0.92) !important;
  border-color: var(--nm-border) !important;
  box-shadow: 0 4px 20px rgba(168, 160, 149, 0.2) !important;
}

/* Ensure inputs are visible and dark themed */
input, select, textarea {
  color: var(--nm-text-primary) !important;
}
input::placeholder, select::placeholder, textarea::placeholder {
  color: var(--nm-text-muted) !important;
}

/* Force hardcoded dark text colors to corresponding light/muted tokens */
.text-gray-800, .text-gray-900, .text-zinc-800, .text-zinc-900, .text-slate-800, .text-slate-900, .text-on-surface,
[style*="color:#2D2A26"], [style*="color: #2D2A26"],
[style*="color:#23211F"], [style*="color: #23211F"] {
  color: var(--nm-text-primary) !important;
}

.text-gray-500, .text-gray-600, .text-zinc-500, .text-zinc-600, .text-slate-500, .text-slate-600, .text-on-surface-variant,
[style*="color:#7A7067"], [style*="color: #7A7067"],
[style*="color:#5D5954"], [style*="color: #5D5954"] {
  color: var(--nm-text-secondary) !important;
}

.text-gray-400, .text-zinc-400, .text-slate-400,
[style*="color:#A39C93"], [style*="color: #A39C93"] {
  color: var(--nm-text-muted) !important;
}

/* Map hardcoded light cards to premium translucent glass/dark cards */
.glass-effect, .neu-card, .settings-row, .plan-card-neu, .nm-card, .nm-raised {
  background: linear-gradient(145deg, var(--nm-bg-light), var(--nm-bg)) !important;
  box-shadow: var(--nm-shadow-md) !important;
  border-color: var(--nm-border) !important;
}

.glass-card {
  background: rgba(255, 255, 255, 0.7) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow: var(--nm-shadow-md) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* Handle active/inset elements */
.active-plan, .nm-inset {
  background: var(--nm-bg-dark) !important;
  box-shadow: var(--nm-shadow-inset) !important;
}

/* Force white panels to map to darker background-light */
.bg-white, .bg-white\/80, .bg-white\/90, .bg-white\/95 {
  background-color: var(--nm-bg-light) !important;
}

/* Border overrides */
.border-gray-100, .border-gray-200, .border-white\/60, .border-white\/80 {
  border-color: var(--nm-border) !important;
}

/* Tailwind arbitrary values mapping */
.bg-\[\#FAF8F5\], .bg-\[\#FDFCFA\], .bg-\[\#F0EDE8\] {
  background-color: var(--nm-bg) !important;
}
.bg-\[\#EAE6E0\]\/60 {
  background-color: rgba(229, 224, 213, 0.6) !important;
}
.border-\[\#EAE5DB\] {
  border-color: var(--nm-border) !important;
}
.bg-\[\#eff4ff\] {
  background-color: var(--nm-bg-light) !important;
}
.bg-\[\#002113\] {
  background-color: rgba(16, 185, 129, 0.1) !important;
}
.text-zinc-600, .text-zinc-800 {
  color: var(--nm-text-primary) !important;
}

/* ── Jump Navigation Highlight ── */
@keyframes jumpGlow {
  0%, 100% { 
    box-shadow: var(--nm-shadow-md) !important;
    outline: 2px solid transparent; 
  }
  50% { 
    box-shadow: 0 0 20px rgba(192, 90, 62, 0.4) !important;
    outline: 2px solid var(--nm-orange); 
  }
}
.jump-highlight {
  animation: jumpGlow 1.5s ease-in-out;
}