/* ==========================================
   0. THEME VARIABLES
   ========================================== */
:root {
  --bg: #f7f9fb;
  --text: #191c1e;
  --panel: #ffffff;
  --header: #0f1b2b;
  --nav: #106399;
  --border: #e5e7eb;
  --border-light: #c5c6cd;
  --highlight: #cee5ff;
  --highlight-sel: #81c1fd;
  
  --primary: #0f1b2b;
  --secondary: #106399;
}

body.theme-dark {
  --bg: #0f172a;
  --text: #f8fafc;
  --panel: #1e293b;
  --header: #020617;
  --nav: #1e40af;
  --border: #334155;
  --border-light: #1e293b;
  --highlight: #334155;
  --highlight-sel: #00f5d4;
  
  --primary: #020617;
  --secondary: #1e40af;
}

body.theme-floral {
  --bg: #fff5f8;
  --text: #4a1d24;
  --panel: #ffffff;
  --header: #d81b60;
  --nav: #ec407a;
  --border: #f8bbd0;
  --border-light: #fce4ec;
  --highlight: #f8bbd0;
  --highlight-sel: #f48fb1;
  
  --primary: #d81b60;
  --secondary: #ec407a;
}

body.theme-desert {
  --bg: #2d1b1b;
  --text: #ffcc80;
  --panel: #3e2723;
  --header: #bf360c;
  --nav: #d84315;
  --border: #5d4037;
  --border-light: #4e342e;
  --highlight: #795548;
  --highlight-sel: #8d6e63;
  
  --primary: #bf360c;
  --secondary: #d84315;
}

/* ==========================================
   1. PRIVACY MODE (BLUR)
   ========================================== */
body.privacy-active .font-mono,
body.privacy-active .text-2xl,
body.privacy-active .text-3xl,
body.privacy-active .text-lg,
body.privacy-active td.text-right,
body.privacy-active th.text-right,
body.privacy-active input[type=number] {
  filter: blur(6px);
  user-select: none;
  pointer-events: none;
  transition: filter 0.3s ease;
}
body.privacy-active .font-mono:hover,
body.privacy-active .text-2xl:hover,
body.privacy-active .text-3xl:hover,
body.privacy-active .text-lg:hover,
body.privacy-active td.text-right:hover,
body.privacy-active th.text-right:hover,
body.privacy-active input[type=number]:hover {
  filter: blur(0px);
}

/* Hide spin buttons on number inputs globally */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
input[type=number] {
  -moz-appearance: textfield;
}

/* Chart Containers */
.chart-box { position: relative; height: 300px; width: 100%; margin-top: 10px; overflow: hidden; }
.chart-box canvas { display: block; width: 100%; height: 100%; }