@layer base {
  body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  }
}

@media print {
  /* Hide interactive chrome and nav during browser print */
  header, footer, .no-print, .floating-share, .nav-bar, button:not(.printable-action) {
    display: none !important;
  }
  body {
    background: white !important;
    color: black !important;
  }
  .print-area {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* ========================================================
   GLOBAL ROUND SLIDER THUMBS (Almost 2x size of default square)
   ======================================================== */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  background: transparent;
  cursor: pointer;
  outline: none;
  margin: 4px 0;
}

/* WebKit Track (Chrome, Edge, Safari, iOS, Android) */
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  background-color: #e2e8f0; /* slate-200 */
  border-radius: 9999px;
  border: none;
  cursor: pointer;
}

/* WebKit Thumb (Round, 28px diameter ~ 2x typical 14px square) */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  background-color: #4f46e5; /* indigo-600 */
  border: 3.5px solid #ffffff;
  box-shadow: 0 2px 6px -1px rgba(79, 70, 229, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
  cursor: grab;
  margin-top: -10px; /* (8px track - 28px thumb) / 2 = -10px centers thumb on track */
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="range"]:hover::-webkit-slider-thumb {
  background-color: #4338ca; /* indigo-700 */
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.5), 0 2px 4px rgba(0, 0, 0, 0.25);
}

input[type="range"]:active::-webkit-slider-thumb {
  cursor: grabbing;
  background-color: #3730a3; /* indigo-800 */
  transform: scale(1.18);
  box-shadow: 0 0 0 6px rgba(99, 102, 241, 0.25), 0 4px 10px rgba(79, 70, 229, 0.6);
}

/* Firefox Track */
input[type="range"]::-moz-range-track {
  width: 100%;
  height: 8px;
  background-color: #e2e8f0;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
}

/* Firefox Thumb (Round, 28px diameter ~ 2x typical 14px square) */
input[type="range"]::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  background-color: #4f46e5;
  border: 3.5px solid #ffffff;
  box-shadow: 0 2px 6px -1px rgba(79, 70, 229, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
  cursor: grab;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="range"]:hover::-moz-range-thumb {
  background-color: #4338ca;
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.5), 0 2px 4px rgba(0, 0, 0, 0.25);
}

input[type="range"]:active::-moz-range-thumb {
  cursor: grabbing;
  background-color: #3730a3;
  transform: scale(1.18);
  box-shadow: 0 0 0 6px rgba(99, 102, 241, 0.25), 0 4px 10px rgba(79, 70, 229, 0.6);
}