<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RDRS SpectraLib - integrated spectral library & analysis web platform</title>
<meta name="description" content="A professional web platform for the visualization, advanced processing, and AI database matching of Raman, Infrared (FT-IR), and X-ray Diffraction (XRD) spectra. Developed by Andrei Ionuț Apopei, PhD.">
  <meta name="keywords" content="Raman spectroscopy, infrared spectra, X-ray diffraction, XRD analysis, spectrum analysis software, baseline correction, curve deconvolution, AI phase unmixing, mineralogy database, RRUFF, ROD, RDRS">
  <meta name="author" content="Andrei Ionuț Apopei, PhD">
<link rel="icon" href="./assets/favicon-C-48e6ON.ico" type="image/x-icon">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://rdrs.uaic.ro/">

<meta property="og:type" content="website">
<meta property="og:url" content="https://rdrs.uaic.ro/">
<meta property="og:title" content="RDRS SpectraLib - integrated spectral library & analysis web platform">
<meta property="og:description" content="Process, analyze, and match Raman, FT-IR, and XRD spectra directly in your browser. Features include AI multi-phase unmixing, adaptive baseline correction, and a library of 14,000+ reference spectra.">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="RDRS SpectraLib - integrated spectral library & analysis web platform">
<meta name="twitter:description" content="Instrument-grade web application for advanced Raman, Infrared, and X-ray Diffraction (XRD) data processing and AI database matching.">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap" rel="stylesheet">
<script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.31/jspdf.plugin.autotable.min.js"></script>
  <script type="module" crossorigin src="./assets/index-BfaystpF.js"></script>
  <link rel="modulepreload" crossorigin href="./assets/core-app-KQSbBuOA.js">
  <link rel="stylesheet" crossorigin href="./assets/index-C5iNoWFT.css">
</head>
<body>

<div id="hdr">
  <h1 id="logo" style="margin:0; padding:0; display:inline;">RDRS <span class="vis-grad">Spectra</span>Lib</h1>
  <div class="hdr-sep"></div>
  
  <button class="hdr-btn" id="btn-request-modal"><i class="fa-solid fa-user-plus"></i> Request Access</button>
  <button class="hdr-btn" id="btn-login-modal"><i class="fa-solid fa-right-to-bracket"></i> Log In</button>
  <span id="auth-username" style="display:none; color:var(--acc); font-family:var(--mono); font-size:11.5px; font-weight:600; padding: 0 4px;"></span>  
  <a href="https://rdrs.uaic.ro/admin.php" target="_blank" class="hdr-btn" id="btn-admin" style="text-decoration:none; display:none;"><i class="fa-solid fa-gauge"></i></a>
  <button class="hdr-btn" id="btn-logout" style="display:none; border-color:var(--border); color:var(--txtm);"><i class="fa-solid fa-right-from-bracket"></i> Log Out</button>
  <div class="hdr-sep"></div>
  <button class="hdr-btn" id="btn-theme" title="Toggle Light/Dark"><i class="fa-solid fa-circle-half-stroke"></i> Theme</button>
  <div class="dropdown">
    <button class="hdr-btn" id="btn-file-menu" style="width:60px;">File <i class="fa-solid fa-caret-down"></i></button>
    <div class="dropdown-content" id="file-dropdown">
	   <button class="dd-btn" id="btn-open" title="Open spectra files"><span><i class="fa-solid fa-folder-open" style="width: 16px;"></i> Open...</span> <span class="dd-shortcut">Ctrl+O</span></button>
	   <button class="dd-btn" id="btn-import-wizard" title="Advanced Data Import"><span><i class="fa-solid fa-file-import" style="width: 16px;"></i> Import Wizard...</span></button>
     <button class="dd-btn locked" id="btn-digitizer" title="Extract data from chart images"><span><i class="fa-solid fa-crosshairs" style="width: 16px;"></i> Digitize Plot...</span></button>
     <div class="dd-sep"></div>

	   <button class="dd-btn locked" id="btn-camera" title="UV-VIS Spectrometer Feed"><span><i class="fa-solid fa-video" style="width: 16px;"></i> UV-VIS Acquisition</span></button>
	   <button class="dd-btn locked" id="btn-load-calib" title="Load Camera Calibration"><span><i class="fa-solid fa-upload" style="width: 16px;"></i> Load Calibration...</span></button>
	   <button class="dd-btn locked" id="btn-save-calib" title="Save Camera Calibration"><span><i class="fa-solid fa-download" style="width: 16px;"></i> Save Calibration</span></button>
	   <div class="dd-sep"></div>

	   <button class="dd-btn" id="btn-undo" title="Ctrl+Z"><span><i class="fa-solid fa-rotate-left" style="width: 16px;"></i> Undo</span> <span class="dd-shortcut">Ctrl+Z</span></button>
	   <button class="dd-btn" id="btn-redo" title="Ctrl+Y"><span><i class="fa-solid fa-rotate-right" style="width: 16px;"></i> Redo</span> <span class="dd-shortcut">Ctrl+Y</span></button>
	   <div class="dd-sep"></div>
	   <button class="dd-btn" id="btn-png" title="Export chart PNG"><span><i class="fa-solid fa-image" style="width: 16px;"></i> Export PNG</span></button>
	   <button class="dd-btn" id="btn-pdf" title="Generate Professional PDF Report"><span><i class="fa-solid fa-file-pdf" style="width: 16px;"></i> PDF Report</span></button>
	   <div class="dd-sep"></div>
	   <button class="dd-btn locked" id="b-export" title="Export selected spectra as CSV/TXT"><span><i class="fa-solid fa-file-csv" style="width: 16px;"></i> Export Data...</span> <span class="dd-shortcut">Ctrl+S</span></button>
	   <button class="dd-btn locked" id="btn-save" title="Save current project to JSON"><span><i class="fa-solid fa-floppy-disk" style="width: 16px;"></i> Save Project</span> <span class="dd-shortcut">Ctrl+Shift+S</span></button>
	   <div class="dd-sep"></div>
	   <button class="dd-btn" id="btn-prefs" title="Application Preferences"><span><i class="fa-solid fa-gear" style="width: 16px;"></i> Preferences...</span></button>
       <button class="dd-btn" id="btn-reset-settings" title="Reset all UI preferences, layouts, and tooltips"><span><i class="fa-solid fa-eraser" style="width: 16px;"></i> Reset Settings</span></button>
	 </div>
  </div>
  <div class="hdr-sep"></div>
  <button class="hdr-btn locked" id="btn-db" title="Load Reference Spectra" style="border-color: var(--acc); color: var(--acc);"><i class="fa-solid fa-database"></i> Database</button>
  <button class="hdr-btn locked" id="b-match" title="Match Spectrum to Database" style="border-color: var(--ok); color: var(--ok);"><i class="fa-solid fa-magnifying-glass-chart"></i> Match DB</button>
  <button class="hdr-btn locked" id="b-galaxy" title="Spectra Galaxy Map" style="border-color: #bc8cff; color: #bc8cff;"><i class="fa-solid fa-circle-nodes"></i> Galaxy</button>
  <button class="hdr-btn" id="btn-cheat" title="Toggle Band Assignments" style="border-color: var(--border);"><i class="fa-solid fa-tags"></i> Cheat Sheet</button>
  <button class="hdr-btn" id="btn-knowledge" title="Vibrational Knowledge Base" style="border-color: var(--border);"><i class="fa-solid fa-book-open"></i></button>
  <button class="hdr-btn" id="btn-calc" title="Spectroscopy Calculator"><i class="fa-solid fa-calculator"></i></button>
  
  <div style="margin-left:auto;font-size:10px;color:var(--txtm);font-family:var(--mono)">
	<button class="hdr-btn" id="b-donate" title="Support RDRS SpectraLib" style="padding: 2px 7px; font-size: 11px; border-color: #ff7b72; color: #ff7b72;"><i class="fa-solid fa-heart"></i> Support</button>
	<button class="hdr-btn" id="b-feedback" title="Leave a Testimonial or Feedback" style="padding: 2px 7px; font-size: 11px; border-color: var(--border);"><i class="fa-solid fa-comment-dots"></i></button>
  <button class="hdr-btn" id="b-workflow" title="Interactive Analysis Blueprint" style="padding: 2px 7px; font-size: 11px; border-color: var(--border);"><i class="fa-solid fa-route"></i></button>
  <button class="hdr-btn" id="b-info" title="About RDRS SpectraLib" style="padding: 2px 7px; font-size: 11px; border-color: var(--border);"><i class="fa-solid fa-info"></i></button>
  <span id="app-version">v26.5.9a</span>
  </div>
</div>

<div id="ws">
	<div id="chart-drop-overlay">⊕ DROP SPECTROSCOPY FILES HERE</div>
  <div id="sb">
    <div id="quota-gauge">
      <div class="quota-label">
        <span><i class="fa-solid fa-server"></i> COMPUTE QUOTA / MONTH</span>
        <span id="quota-text" style="color:var(--txtbr); font-weight:bold;">0 / 1000</span>
      </div>
      <div id="quota-bar-bg">
        <div id="quota-fill"></div>
      </div>
    </div>
    <div id="dz">
      <div class="dz-icon">⊕</div>
      <div>Drop CSV, TXT, SPC, SPA, .0, or WDF files here</div>
      <div style="font-size:10px;opacity:.6">or click to browse</div>
    </div>
	<input type="file" id="fi" multiple accept=".csv,.txt,.dat,.sp,.asc,.dtp,.spc,.json,.jdx,.dx,.spa,.wdf,.0" style="display:none">
  <input type="file" id="fi-wizard" multiple accept=".csv,.txt,.dat" style="display:none">
	<input type="file" id="fi-calib" accept=".json" style="display:none">
  <input type="file" id="fi-digitizer" accept="image/png, image/jpeg, image/jpg, image/bmp" style="display:none">
	
    <div id="spec-sec">
      <div class="sec-hdr" style="display:flex; flex-wrap:wrap; align-items:center; gap:5px;">
        <span>Spectra</span>
        
        <div id="spec-search-wrap" style="display:none; flex:1; position:relative; min-width:60px; margin: 0 4px;">
          <input type="text" id="spec-search" placeholder="Filter..." style="width:100%; background:var(--bg); border:1px solid var(--border); color:var(--txtbr); border-radius:3px; padding:2px 16px 2px 6px; font-size:9.5px; font-family:var(--sans); outline:none; transition: 0.2s;">
          <i class="fa-solid fa-xmark" id="spec-search-clear" style="position:absolute; right:5px; top:50%; transform:translateY(-50%); font-size:9px; cursor:pointer; color:var(--err); display:none;" title="Clear Search"></i>
        </div>
        
        <span id="cnt" style="font-family:var(--mono);font-weight:400; margin-left:auto;">0 loaded</span>
      </div>
      <div id="col-hdr" style="display:none">
        <span style="width:11px;flex-shrink:0"></span>
        <span style="width:16px;flex-shrink:0"></span>
        <span style="flex:1;font-size:9px">Name</span>
        <span style="width:38px;flex-shrink:0;text-align:center;font-size:9px;white-space:nowrap;"><i class="fa-solid fa-x"></i> Scale</span>
        <span style="width:38px;flex-shrink:0;text-align:center;font-size:9px;white-space:nowrap;"><i class="fa-solid fa-arrows-up-down"></i> Offset</span>
        <span style="width:38px;flex-shrink:0;text-align:center;font-size:9px;white-space:nowrap;"><i class="fa-solid fa-minus"></i> Width</span>
        <span style="width:18px"></span>
      </div>
      <ul id="spec-list" style="list-style:none"></ul>
      
      <div id="close-all-wrap" style="display:none; justify-content:space-between; padding-top:6px; padding-bottom:4px; margin-top:auto; flex-shrink:0;">
        <button id="btn-new-folder" class="cb" title="Create new folder" style="font-size:10px; padding:3px 8px;"><i class="fa-solid fa-folder-plus"></i> New Folder
</button>
        <button id="btn-toggle-vis" class="cb" title="Toggle visibility of all spectra" style="font-size:10px; padding:3px 8px;"><i class="fa-solid fa-eye"></i> Toggle All</button>
        <button id="btn-sort-az" class="cb" title="Sort Alphanumerically (Natural Order)" style="font-size:10px; padding:3px 8px;"><i class="fa-solid fa-arrow-down-a-z"></i> Sort A-Z</button>
        <button id="btn-close-all" class="cb warn" title="Close all spectra" style="font-size:10px; padding:3px 8px;"><i class="fa-solid fa-xmark"></i> Close All</button></div>
    </div>

    <div id="cp">
      <div class="sec-hdr collapsible-hdr" data-target="wrap-display" style="margin-top:0px; margin-bottom:6px">
        <span>Display Settings</span>
        <i class="fa-solid fa-chevron-down toggle-icon"></i>
      </div>
	  <div id="wrap-display" class="collapsible-content">
		  <div class="cr">
			<button class="cb" id="b-flip"><i class="fa-solid fa-right-left"></i> Flip X</button>
			<button class="cb on" id="b-legend" title="Toggle Legend (Outside / Floating / Hidden)"><i class="fa-solid fa-list"></i> Float</button>
			<button class="cb on" id="b-grid" title="Toggle Grid"><i class="fa-solid fa-table-cells"></i> Grid</button>
			<button class="cb warn" id="b-reset" title="Reset zoom, offsets, and display settings" style="margin-left:auto;"><i class="fa-solid fa-expand"></i> Reset View</button>
		  </div>
		  <div class="cr">
			<button class="cb" id="b-lines" title="Toggle Line Style"><i class="fa-solid fa-chart-line"></i> Lines</button>
			<span class="cl">Width:</span>
			<input class="ci" id="lw" type="number" value="1" step="0.5" min="0.5" max="8" style="width:38px" title="Line width">
      <button class="cb" id="b-plot-prefs" style="margin-left:auto;" title="Advanced Plot Configuration"><i class="fa-solid fa-gear"></i> Plot Config</button>
		  </div>
		  <div class="cr">
			<span class="cl" style="margin-left:4px;">Labels:</span>
			<input class="ci" id="lbl-size" type="number" value="10" step="1" min="6" max="24" style="width:48px" title="Peak Label Font Size">
			<button class="cb" id="b-fill" title="Toggle Area Fill"><i class="fa-solid fa-fill-drip"></i> Fill</button>
			<button class="cb" id="b-reorder" style="margin-left:auto" title="Enable drag and drop to reorder list"><i class="fa-solid fa-sort"></i> Reorder</button>
		  </div>
	  </div>
	  
      <div class="sec-hdr collapsible-hdr" data-target="wrap-interactive" style="margin-top:8px; margin-bottom:6px">
        <span>Interactive Tools</span>
        <i class="fa-solid fa-chevron-down toggle-icon"></i>
      </div>
      <div id="wrap-interactive" class="collapsible-content">
		  <div class="cr">
			<button class="cb" id="b-stack"><i class="fa-solid fa-layer-group"></i> Stack</button>
			<span class="cl">Δ:</span>
			<input class="ci" id="stkoff" type="number" value="1" step="0.1" min="0" style="width:42px" title="Stack offset per spectrum">
      <button class="cb" id="b-ridgeline" title="Toggle Ridgeline View"><i class="fa-solid fa-mountain-sun"></i> Ridgeline</button>
      <button class="cb" id="b-heatmap" title="Toggle 2D Heatmap View"><i class="fa-solid fa-map"></i> Heatmap</button>
			</div>
      <div class="cr">
			<button class="cb" id="b-waterfall" title="Toggle 3D Waterfall View"><i class="fa-solid fa-cubes"></i> 3D</button>
      <button class="cb" id="b-autonorm" title="Visually normalize"><i class="fa-solid fa-arrows-up-to-line"></i> Auto-Norm</button>
			<button class="cb" id="b-rangeslider" style="margin-left: 6px;" title="Toggle Range Slider"><i class="fa-solid fa-sliders"></i> Range</button>
      <button class="cb" id="b-dragy"  title="Move spectrum vertically"><i class="fa-solid fa-arrows-up-down"></i> Drag Y</button>
    </div>
		  <div class="cr">
			<div style="display: flex; gap: 1px;">
			  <button class="cb" id="b-cursor" style="border-top-right-radius: 0; border-bottom-right-radius: 0;" title="Toggle Cursor Mode">
				<i class="fa-solid fa-crosshairs"></i> Cursor
			  </button>
			  <button class="cb warn" id="b-clrcur" style="border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: 6px; padding-right: 6px;" title="Clear All Cursors">
				<i class="fa-solid fa-xmark"></i>
			  </button>
			</div>
			<button class="cb" id="b-live-cursor" style="margin-left: 6px;" title="Toggle Live Unified Tracking"><i class="fa-solid fa-ruler-vertical"></i> Live Track</button>
			<button class="cb" id="b-freehand" title="Directly modify data points. Not recommended due to hard alteration of spectroscopic data."><i class="fa-solid fa-paintbrush"></i> Freehand Edit</button>
			
      
		  </div>
		  <div class="cr">
			<button class="cb" id="b-draw"><i class="fa-solid fa-bezier-curve"></i> Manual Baseline</button>
      <label class="ck" id="lbl-spline" style="display:none; margin-left:8px; font-size:11px; color:var(--txtbr);" title="Toggle between Spline (Smooth) and Linear (Straight) interpolation"><input type="checkbox" id="ck-spline" checked> <i class="fa-solid fa-bezier-curve" style="color:var(--acc);"></i> Spline</label>
			<label class="ck" id="lbl-snap" style="display:none; margin-left:8px; font-size:11px; color:var(--txtbr);"><input type="checkbox" id="ck-snap" checked> <i class="fa-solid fa-magnet" style="color:var(--acc);"></i> Snap</label>
			<button class="cb" id="b-applydraw" style="display:none; background:var(--ok); color:#000; border:none; margin-left:4px;"><i class="fa-solid fa-check"></i> Apply</button>
		  </div>
	  </div>
	  
	  <div id="cam-panel" style="display: none; background: rgba(210, 153, 34, 0.05); border: 1px solid var(--warn); border-radius: 4px; padding: 8px; margin-bottom: 10px;">
        <div class="sec-hdr" style="margin-top:0; border-bottom: none; color: var(--warn);">
          <span><i class="fa-solid fa-video"></i> UV-VIS Acquisition</span>
          <div>
              <button id="cam-minimize" style="background:none; border:none; color:var(--warn); cursor:pointer; font-size: 12px; margin-right: 5px;" title="Minimize Panel"><i class="fa-solid fa-chevron-up"></i></button>
              <button id="cam-close" style="background:none; border:none; color:var(--txtm); cursor:pointer; font-size: 14px;">✕</button>
              <button class="help-btn" onclick="openDoc('doc-live')" style="margin-right: 5px; border:none; background:none; color: var(--warn);"><i class="fa-solid fa-question"></i></button>
          </div>
        </div>
        
        <div id="cam-panel-content">
            <div class="fg" style="margin-bottom: 6px;">
                <select class="fs" id="cam-select" style="font-size: 10px; padding: 4px;"></select>
            </div>

            <div id="cam-video-container" style="position: relative; width: 100%; aspect-ratio: 4/3; background: #000; margin-bottom: 10px; overflow: hidden; border-radius: 4px; border: 1px solid var(--border);">
                <video id="live-video" autoplay playsinline style="width: 100%; height: 100%; object-fit: contain; pointer-events: none;"></video>
                <div id="cam-roi-box" style="position: absolute; left: 0; width: 100%; border: 1px solid var(--err); background: rgba(248, 81, 73, 0.2); pointer-events: none;"></div>
                
                <div id="cam-sat-alert" style="position: absolute; top: 10px; right: 10px; background: rgba(248, 81, 73, 0.9); color: #fff; padding: 4px 8px; border-radius: 4px; font-weight: bold; font-family: var(--mono); font-size: 11px; display: none; pointer-events: none; z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,0.5);">
                    <i class="fa-solid fa-triangle-exclamation fa-fade"></i> SENSOR SATURATED
                </div>
            </div>
            
            <div class="fr2" style="margin-bottom: 6px;">
                <div class="fg" style="margin-bottom: 0;">
                    <label class="fl">Extract Y (%)</label>
                    <input type="number" class="fi" id="cam-start-y" value="50" step="1" min="0" max="100" style="padding: 4px;">
                </div>
                <div class="fg" style="margin-bottom: 0;">
                    <label class="fl">Slit Height (px)</label>
                    <input type="number" class="fi" id="cam-size-y" value="20" step="1" min="1" style="padding: 4px;">
                </div>
            </div>

            <div class="fr2" style="margin-bottom: 6px;">
                <div class="fg" style="margin-bottom: 0;">
                    <label class="fl">Start X (px)</label>
                    <input type="number" class="fi" id="cam-start-x" value="0" step="10" min="0" style="padding: 4px;">
                </div>
                <div class="fg" style="margin-bottom: 0;">
                    <label class="fl">End X (px)</label>
                    <input type="number" class="fi" id="cam-end-x" value="1920" step="10" min="0" style="padding: 4px;">
                </div>
            </div>
            
            <div class="fg" style="margin-bottom: 8px;">
                <label class="fl">Sensor Extraction Channel</label>
                <select class="fs" id="cam-channel" style="font-size: 10px; padding: 4px;">
                    <option value="luma" selected>Luminance (Grayscale / Demosaiced)</option>
                    <option value="red">Red Channel (Bayer)</option>
                    <option value="green">Green Channel (Bayer)</option>
                    <option value="blue">Blue Channel (Bayer)</option>
                </select>
            </div>

            <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 12px; margin-bottom: 8px;">
                
                <div class="fg" style="margin-bottom: 0;">
                    <label class="fl">Live Smooth (IIR)</label>
                    <input type="range" id="cam-smooth" min="1" max="100" value="20" style="width: 100%; accent-color: var(--warn); margin-top: 5px;">
                </div>

                <div class="fg" style="margin-bottom: 0; display: flex; align-items: flex-end; gap: 10px;">
                    <label class="ck" style="font-weight: 600; color: var(--txtbr); font-size: 10px; margin-bottom: 4px; white-space: nowrap;">
                        <input type="checkbox" id="cam-live-peaks"> Live Peaks
                    </label>
                    
                    <div style="display: flex; flex-direction: column; flex: 1;">
                        <label class="fl" style="font-size: 9px; margin-bottom: 2px;">Prominence (%)</label>
                        <input type="number" class="fi" id="cam-live-peak-thr" value="15" min="1" max="100" style="width: 100%; padding: 3px 4px; font-size: 10px;">
                    </div>
                    
                    <div style="display: flex; flex-direction: column; flex: 1;">
                        <label class="fl" style="font-size: 9px; margin-bottom: 2px;">Min Distance</label>
                        <input type="number" class="fi" id="cam-live-peak-dist" value="10" min="1" style="width: 100%; padding: 3px 4px; font-size: 10px;">
                    </div>
                </div>

            </div>

            <div class="fg" style="margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; padding: 6px; background: rgba(0,0,0,0.2); border: 1px solid var(--border); border-radius: 4px;">
                <label class="ck" style="font-weight: 600; color: var(--txtbr); font-size: 10px; margin: 0;" title="Stops the chart from jumping up and down">
                    <input type="checkbox" id="cam-lock-y" checked> <i class="fa-solid fa-lock"></i> Lock Y-Axis
                </label>
                <select class="fs" id="cam-lock-y-range" style="font-size: 9px; padding: 2px 4px; height: 22px; width: 140px;">
                    <option value="255" selected>[0 - 255] (8-bit Raw)</option>
                    <option value="1">[0 - 1] (Normalized)</option>
                    <option value="100">[0 - 100] (Percent)</option>
                </select>
            </div>

            <div class="fg" style="margin-bottom: 10px; padding: 6px; background: rgba(0,0,0,0.2); border: 1px solid var(--border); border-radius: 4px;">
                <label class="ck" style="font-weight: 600; color: var(--txtbr);" title="Mathematically reverses the pixel array">
                    <input type="checkbox" id="cam-mirror"> <i class="fa-solid fa-right-left"></i> Mirror Camera Sensor (Flip H)
                </label>
            </div>

            <div class="fr3" style="margin-bottom: 8px;">
                <button class="cb" id="btn-open-cam-settings" style="padding: 4px; font-size: 10px;" title="Camera Hardware Controls"><i class="fa-solid fa-gear"></i> Settings</button>
                <button class="cb" id="btn-open-cam-calib" style="padding: 4px; font-size: 10px;" title="Wavelength Calibration"><i class="fa-solid fa-ruler-horizontal"></i> Calibrate</button>
                <button class="cb" id="btn-open-cam-kinetics" style="padding: 4px; font-size: 10px;" title="Time-Series Setup"><i class="fa-solid fa-stopwatch"></i> Kinetics</button>
            </div>

            <div style="margin-bottom: 6px; display: flex; gap: 5px; width: 100%;">
                <select class="fs" id="cam-capture-mode" style="font-size: 10px; padding: 4px; flex: 1; min-width: 0;">
                    <option value="single" selected>Single Shot</option>
                    <option value="continuous">Continuous Avg</option>
                    <option value="kinetics" style="color: var(--acc); font-weight: bold;">Kinetics Series</option>
                </select>
                <input type="number" class="fi" id="cam-capture-sec" value="2" step="0.5" min="0" style="padding: 4px; flex: 1; min-width: 0; display: none;" title="Seconds to Average">
            </div>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; background: rgba(0,0,0,0.15); padding: 8px; border: 1px solid var(--border); border-radius: 4px;">
                <div style="display: flex; flex-direction: column; gap: 4px;">
                    <button class="cb" id="cam-dark-frame" style="width: 100%; border-color: #a371f7; color: #a371f7;"><i class="fa-solid fa-moon"></i> Set Dark</button>
                    <label class="ck" style="font-weight: 600; color: var(--txtbr); font-size: 10px; margin: 0;" title="Subtracts sensor noise">
                        <input type="checkbox" id="cam-dark-sub"> Apply Dark (D)
                    </label>
                </div>
                <div style="display: flex; flex-direction: column; gap: 4px;">
                    <button class="cb" id="cam-white-frame" style="width: 100%; border-color: #eab308; color: #eab308;"><i class="fa-solid fa-sun"></i> Set White</button>
                    
                    <div style="display: flex; align-items: center; justify-content: space-between;">
                        <label class="ck" style="font-weight: 600; color: var(--txtbr); font-size: 10px; margin: 0;" title="Calculates (Sample - Dark) / (White - Dark)">
                            <input type="checkbox" id="cam-white-ref"> Apply Flat (W)
                        </label>
                        <select id="cam-analysis-mode" class="fs" style="font-size: 9px; padding: 2px 4px; height: 20px; width: 70px; display: none;">
                            <option value="T" selected>Trans %</option>
                            <option value="A">Abs (A)</option>
                        </select>
                    </div>
                </div>
            </div>

            <div style="display: flex; gap: 8px;">
                <button class="cb" id="cam-freeze" style="flex: 1; border: 1px solid var(--acc); color: var(--acc); font-weight: bold; height: 32px;" title="Pause live chart updates"><i class="fa-solid fa-pause"></i> Freeze</button>
                <button class="cb" id="cam-capture" style="flex: 2; background: var(--ok); color: #000; border: none; font-weight: bold; height: 32px;"><i class="fa-solid fa-camera-retro"></i> Capture Data</button>
            </div>
            
            <canvas id="live-canvas" style="display:none;"></canvas>
        </div>
      </div>
      
	  <div class="sec-hdr collapsible-hdr" data-target="proc" style="margin-top:8px; margin-bottom:6px">
        <span>Preprocessing</span>
        <i class="fa-solid fa-chevron-down toggle-icon"></i>
      </div>
      <div id="proc" class="collapsible-content">
        <button class="pb" id="b-smooth"><i class="fa-solid fa-wave-square"></i> Smooth</button>
        <button class="pb" id="b-base"><i class="fa-solid fa-arrows-down-to-line"></i> Baseline</button>
        <button class="pb" id="b-norm"><i class="fa-solid fa-arrow-up-9-1"></i> Normalize</button>
        <button class="pb" id="b-scale"><i class="fa-solid fa-arrows-up-down"></i> Scale Y</button>
        <button class="pb" id="b-xshift"><i class="fa-solid fa-arrows-left-right"></i> Shift X</button>
        <button class="pb" id="b-xconv"><i class="fa-solid fa-exchange"></i> Axis Convert</button>
        <button class="pb" id="b-cut"><i class="fa-solid fa-scissors"></i> Cut Range</button>
        <button class="pb" id="b-interp" title="Resample data density"><i class="fa-solid fa-chart-line"></i> Interpolate</button>
        <button class="pb" id="b-zap"><i class="fa-solid fa-eraser"></i> Zap Peak</button>
        <button class="pb" id="b-despike"><i class="fa-solid fa-wand-magic-sparkles"></i> Despike</button>
        <button class="pb" id="b-align"><i class="fa-solid fa-align-center"></i> Peak Align</button>
        <button class="pb" id="b-macro"><i class="fa-solid fa-bolt"></i> Batch Pipeline</button>
      </div>
	  
	  <div class="sec-hdr collapsible-hdr" data-target="wrap-analysis" style="margin-top:12px; margin-bottom:6px">
        <span>Analysis</span>
        <i class="fa-solid fa-chevron-down toggle-icon"></i>
      </div>
      <div id="wrap-analysis" class="collapsible-content" style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:3px;margin-top:2px">
		<div style="display: flex; gap: 1px;">
		  <button class="pb" id="b-peaks" style="flex: 1; border-top-right-radius: 0; border-bottom-right-radius: 0;" title="Find Peaks">
			<i class="fa-solid fa-mountain"></i> Find Peaks
		  </button>
		  <button class="pb" id="b-del-peak-mode" style="border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: 6px; padding-right: 6px;" title="Delete Peak Mode (Click a label to remove it)">
			<i class="fa-solid fa-xmark"></i>
		  </button>
		</div>
		
    <button class="pb" id="b-fit"><i class="fa-solid fa-chart-bar"></i> Curve Fit</button>

		<div style="display: flex; gap: 1px;">
          <button class="pb" id="b-area" style="flex: 1; border-top-right-radius: 0; border-bottom-right-radius: 0;" title="Calculate Peak Area">
            <i class="fa-solid fa-chart-area"></i> Area
          </button>
          <button class="pb warn" id="b-clrarea" style="border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: 6px; padding-right: 6px;" title="Clear Area Highlights">
            <i class="fa-solid fa-xmark"></i>
          </button>
        </div>
		
		<button class="pb" id="b-color"><i class="fa-solid fa-palette"></i> CIE Color</button>
    <button class="pb" id="b-deriv"><i class="fa-solid fa-chart-line"></i> Derivative</button>
    <button class="pb" id="b-merge"><i class="fa-solid fa-link"></i> Merge</button>
    <button class="pb" id="b-sub"><i class="fa-solid fa-minus"></i> Subtract</button>
    <button class="pb" id="b-add"><i class="fa-solid fa-plus"></i> Add</button>
    <button class="pb" id="b-div"><i class="fa-solid fa-divide"></i> Divide</button>
    <button class="pb" id="b-avg"><i class="fa-solid fa-plus-minus"></i> Average Spectra</button>
    <button class="pb locked" id="b-density"><i class="fa-solid fa-fire-flame-curved"></i> Spectral Density</button>
    <button class="pb locked" id="b-pca"><i class="fa-solid fa-project-diagram"></i> Cluster Analysis</button>
    <button class="pb locked" id="b-hca"><i class="fa-solid fa-folder-tree"></i> Dendrogram</button>
    <button class="pb locked" id="b-chemo"><i class="fa-solid fa-brain"></i> Train & Predict</button>
    <button class="pb locked" id="b-calib"><i class="fa-solid fa-ruler-combined"></i> Univariate Calib</button>
    <button class="pb locked" id="b-kinetics"><i class="fa-solid fa-stopwatch"></i> Kinetics Fit</button>
    <button class="pb locked" id="b-trend"><i class="fa-solid fa-chart-line"></i> Trend / SPLOM</button>
    <button class="pb locked" id="b-2dcos"><i class="fa-solid fa-border-all"></i> 2D-COS (2T2D)</button>
    <button class="pb locked" id="b-lcf"><i class="fa-solid fa-layer-group"></i> LCF Unmixing</button>
    <button class="pb locked" id="b-mcr"><i class="fa-solid fa-eye-slash"></i> MCR Unmixing</button>
    <button class="pb locked" id="b-mix"><i class="fa-solid fa-blender"></i> Mix Builder</button>
    <button class="pb locked" id="b-snr" style="grid-column: span 3;"><i class="fa-solid fa-tower-broadcast"></i> Evaluate Quality</button>
      </div>
	  
    </div>
  </div>

  <div id="main">
      <button id="btn-sidebar-toggle" title="Toggle Sidebar"><i class="fa-solid fa-chevron-left"></i></button>
      <button id="btn-collapse-all" title="Collapse All Panels"><i class="fa-solid fa-compress"></i></button>

      <div id="workspace-spectra" class="workspace active">
          <div id="chart-empty-state" style="position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: var(--txtm); pointer-events: none; z-index: 5; padding: 40px 60px; background: transparent; display: none;">
              <div style="font-size: 28px; opacity: 0.5; margin-bottom: 8px;">⊕</div>
              <div style="font-size: 14px; font-family: var(--sans);">Drop CSV / TXT / SPC / SPA / .0 / WDF files here</div>
          </div>

          <div id="chartdiv"></div>
          
          <div id="console-resizer"></div>
          
          <div id="console-panel" style="display:none; height: 180px; background: var(--card); border-top: 1px solid var(--border); overflow-y: auto; font-family: var(--mono); font-size: 11px; padding: 10px; color: var(--txtm); flex-shrink: 0;">
            <div style="display: flex; justify-content: space-between; align-items: center; color: var(--acc); border-bottom: 1px solid var(--border2); margin-bottom: 8px; padding-bottom: 5px; font-weight: 600; letter-spacing: 0.05em;">
                <span>COMMAND HISTORY & PEAK DATA</span>
                <button id="btn-clear-console" style="background:none; border:none; color:var(--txtm); font-family:var(--mono); font-size:9px; cursor:pointer; text-decoration:underline;">[Clear Log]</button>
            </div>
            <div id="log-content"></div>
          </div>

          <div id="sbar">
            <div style="display: flex; align-items: center; gap: 5px;">
                <button id="btn-console" style="background:none; border:1px solid var(--border); color:var(--acc); font-family:var(--mono); font-size:9px; cursor:pointer; border-radius:3px; padding:1px 6px; transition: all 0.2s;">CONSOLE</button>
            </div>
            <span id="sbar-cur"></span>
            <span id="sbar-hov" style="margin-left: 15px; padding-left: 15px; border-left: 1px solid var(--border); color:var(--txtbr);">X: 0.00 | Y: 0.00</span>
            <span id="sbar-range" style="margin-left: 15px; padding-left: 15px; border-left: 1px solid var(--border); color:var(--txtm); font-size: 9.5px; letter-spacing: 0.05em;">View: Auto</span>    
            <span id="sbar-npts" style="margin-left:auto"></span>
          </div>
      </div>

      <div id="workspace-pca" class="workspace" style="display:none; background: var(--bg);">
          
          <div class="workspace-header" style="padding: 10px 15px; background: var(--panel); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;">
              <h2 style="margin:0; font-size: 15px; color: var(--txtbr); font-family: var(--mono); display: flex; align-items: center;">
                  <i class="fa-solid fa-project-diagram" style="margin-right: 8px;"></i> Exploratory Cluster Analysis
                  <button class="help-btn" onclick="openDoc('doc-pca')" style="margin-left: 12px; padding: 3px 8px; font-size: 10px; background: rgba(88,166,255,0.1); border: 1px solid var(--acc); color: var(--acc); border-radius: 4px; cursor: pointer; font-family: var(--sans); font-weight: 600;"><i class="fa-solid fa-question"></i> Help</button>
              </h2>
              <div style="display: flex; align-items: center; gap: 15px;">
                  
                  <button class="bc warn" id="btn-pca-hide-sel" style="padding: 3px 8px; display: none; border-color: var(--err); color: var(--err);" title="Hide lassoed spectra"><i class="fa-solid fa-eye-slash"></i> Hide Selected</button>
                  <button class="bc ok" id="btn-pca-show-all" style="padding: 3px 8px; display: none; border-color: var(--ok); color: var(--ok);" title="Show all hidden spectra in this cluster"><i class="fa-solid fa-eye"></i> Show All</button>

                  <label style="font-size: 11px; color: var(--txtm); font-family: var(--sans); margin: 0;">Grid:
                      <select id="pca-grid-size" style="background: var(--bg); color: var(--txtbr); border: 1px solid var(--border); border-radius: 3px; font-size: 11px; padding: 2px;">
                          <option value="auto" selected>Auto</option>
                          <option value="2">2x2</option>
                          <option value="3">3x3</option>
                          <option value="4">4x4</option>
                          <option value="5">5x5</option>
                      </select>
                  </label>
                  
                  <label class="ck" style="font-size: 11px; margin: 0; font-weight: normal; letter-spacing: normal; text-transform: none; cursor: pointer;">
                      <input type="checkbox" id="pca-toggle-legend" checked> Show Legends
                  </label>
                  
                  <button class="bc" id="btn-pca-png" style="padding: 3px 8px;" title="Export Matrix as PNG"><i class="fa-solid fa-image"></i></button>
                  
                  <button id="btn-exit-pca" class="ba" style="background: var(--err); color: #fff;"><i class="fa-solid fa-arrow-left"></i> Exit Dashboard</button>
              </div>
          </div>
          
          <div id="pca-dashboard-content" style="flex: 1; padding: 15px; overflow-y: auto; display: grid; grid-template-columns: 1fr 2.5fr; grid-template-rows: 1fr 1fr; gap: 15px; min-height: 0;">
              
              <div style="grid-column: 1; grid-row: 1; background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 10px; display: flex; flex-direction: column; min-height: 250px;">
                  <div style="font-size: 11px; font-family: var(--mono); color: var(--txtm); margin-bottom: 5px; flex-shrink: 0;">SCREE PLOT (EXPLAINED VARIANCE)</div>
                  <div id="pca-scree" style="flex: 1; min-height: 0;"></div>
              </div>

              <div style="grid-column: 1; grid-row: 2; background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 10px; display: flex; flex-direction: column; min-height: 250px;">
                  <div style="font-size: 11px; font-family: var(--mono); color: var(--txtm); margin-bottom: 5px; flex-shrink: 0;">LOADINGS (PHYSICAL SHIFTS)</div>
                  <div id="pca-loadings" style="flex: 1; min-height: 0;"></div>
              </div>

              <div style="grid-column: 2; grid-row: 1 / span 2; background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 10px; display: flex; flex-direction: column; min-height: 600px;">
                  <div style="font-size: 11px; font-family: var(--mono); color: var(--txtm); margin-bottom: 5px; flex-shrink: 0;">SCORES MATRIX (CLUSTERING)</div>
                  <div id="pca-scores" style="flex: 1; min-height: 0;"></div>
              </div>

          </div>
      </div>

      <div id="workspace-galaxy" class="workspace" style="display:none; background: var(--bg);">
          <div class="workspace-header" style="padding: 10px 15px; background: var(--panel); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;">
              <h2 style="margin:0; font-size: 15px; color: var(--txtbr); font-family: var(--mono); display: flex; align-items: center;">
                  <i class="fa-solid fa-circle-nodes" style="margin-right: 8px;"></i> Spectra Galaxy
                  <span class="db-badge" id="badge-galaxy-count" style="margin-left: 10px; display: none;"></span>
                  
                  <button class="help-btn" onclick="openDoc('doc-galaxy')" style="margin-left: 12px; padding: 3px 8px; font-size: 10px; background: rgba(88,166,255,0.1); border: 1px solid var(--acc); color: var(--acc); border-radius: 4px; cursor: pointer; font-family: var(--sans); font-weight: 600;"><i class="fa-solid fa-question"></i> Help</button>
              </h2>
              <div style="display: flex; align-items: center; gap: 15px;">
                  <button id="btn-exit-galaxy" class="ba" style="background: var(--err); color: #fff;"><i class="fa-solid fa-arrow-left"></i> Exit Galaxy</button>
              </div>
          </div>
          <div style="flex: 1; display: flex; overflow: hidden;">
              <div id="galaxy-map-container" style="flex: 2.5; position: relative; border-right: 1px solid var(--border);">
                  <div id="galaxy-chartdiv" style="width: 100%; height: 100%;"></div>
              </div>
              
              <div id="galaxy-detail-container" style="flex: 1; display: flex; flex-direction: column; background: var(--card);">
                  
                  <div style="flex: 1; display: flex; flex-direction: column; border-bottom: 1px solid var(--border); min-height: 0;">
                      <div style="padding: 10px; border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: 11px; color: var(--txtm); font-weight: 600; background: var(--panel);">
                          <i class="fa-solid fa-sliders"></i> GALAXY CONTROLS
                      </div>
                      <div style="padding: 15px; overflow-y: auto; flex: 1;">
                          <div class="fg">
                              <label class="fl">Color Map By</label>
                              <select class="fs" id="galaxy-color-mode">
                                  <option value="peak" selected>Primary Peak Position (cm⁻¹)</option>
                                  <option value="chem_class">Chemical Superclass (Dana)</option>
                                  <option value="entropy">Spectral Entropy (Signal Complexity)</option>
                                  <option value="peaks">Peak Density (Count)</option>
                                  <option value="com">Center of Mass (Centroid cm⁻¹)</option>
                                  <option value="database">Database Source</option>
                              </select>
                          </div>
                          <div class="fg" style="margin-top: 15px;">
                              <label class="fl">Marker Size</label>
                              <input type="range" id="galaxy-marker-size" min="2" max="15" value="5" style="width: 100%; accent-color: var(--acc);">
                          </div>

                          <div class="fg" style="margin-top: 15px; padding: 10px; background: rgba(0,0,0,0.15); border: 1px solid var(--border); border-radius: 4px;">
                              <label class="ck" style="font-weight: 600; color: var(--txtbr); margin: 0;">
                                  <input type="checkbox" id="galaxy-3d-mode"> <i class="fa-solid fa-cube"></i> Enable 3D Galaxy
                              </label>
                              <p class="info" style="margin-top: 4px; margin-bottom: 0;">Renders the True 3D UMAP mathematical projection.</p>
                          </div>
                          
                          <button class="ba" id="btn-galaxy-locate" style="width: 100%; margin-top: 20px; display: none; background: var(--warn); color: #000;">
                              <i class="fa-solid fa-crosshairs"></i> Locate My Target Spectrum
                          </button>
                      </div>
                  </div>

                  <div style="flex: 1; display: flex; flex-direction: column; min-height: 0;">
                      <div style="padding: 10px; border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: 11px; color: var(--txtm); font-weight: 600; background: var(--panel);">
                          <i class="fa-solid fa-chart-line"></i> 1-D SPECTRUM COMPARISON
                      </div>
                      <div id="galaxy-detail-chartdiv" style="flex: 1; min-height: 0; background: var(--bg);"></div>
                  </div>
                  
              </div>
          </div>
      </div>

      <div id="workspace-digitizer" class="workspace" style="display:none; background: var(--bg);">
        <div class="workspace-header" style="padding: 10px 15px; background: var(--panel); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;">
            <h2 style="margin:0; font-size: 15px; color: var(--txtbr); font-family: var(--mono); display: flex; align-items: center;">
                <i class="fa-solid fa-crosshairs" style="margin-right: 8px;"></i> Plot Digitizer
                <button class="help-btn" onclick="openDoc('doc-digitizer')" style="margin-left: 12px; padding: 3px 8px; font-size: 10px; background: rgba(88,166,255,0.1); border: 1px solid var(--acc); color: var(--acc); border-radius: 4px; cursor: pointer; font-family: var(--sans); font-weight: 600;"><i class="fa-solid fa-question"></i> Help</button>
            </h2>
            <div style="display: flex; align-items: center; gap: 15px;">
                <button id="btn-digi-push" class="ba" style="background: var(--ok); color: #000; display: none;"><i class="fa-solid fa-check"></i> Generate Spectrum</button>
                <button id="btn-exit-digitizer" class="ba" style="background: var(--err); color: #fff;"><i class="fa-solid fa-arrow-left"></i> Exit Digitizer</button>
            </div>
        </div>
        
        <div style="display: flex; flex: 1; overflow: hidden;">
            <div style="width: 320px; background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; padding: 15px; flex-shrink: 0;">
            
                <div style="margin-bottom: 15px;">
                    <button class="bc" id="btn-digi-load" style="width: 100%; border-color: var(--acc); color: var(--acc);"><i class="fa-solid fa-image"></i> Load New Image</button>
                </div>

                <div class="sec-hdr" style="margin-top:0; border-bottom: 1px solid var(--border2); margin-bottom: 10px;">1. Axes Calibration</div>
                <p class="info" style="margin-top: 0; margin-bottom: 10px;">Click the buttons below, then click the image to map pixels to data values.</p>
                
                <div class="fr2" style="margin-bottom: 8px;">
                    <button class="cb" id="btn-digi-x1"><i class="fa-solid fa-location-crosshairs"></i> Set X1</button>
                    <input type="number" class="fi" id="val-digi-x1" placeholder="Data Value">
                </div>
                <div class="fr2" style="margin-bottom: 15px;">
                    <button class="cb" id="btn-digi-x2"><i class="fa-solid fa-location-crosshairs"></i> Set X2</button>
                    <input type="number" class="fi" id="val-digi-x2" placeholder="Data Value">
                </div>

                <div class="fr2" style="margin-bottom: 8px;">
                    <button class="cb" id="btn-digi-y1"><i class="fa-solid fa-location-crosshairs"></i> Set Y1</button>
                    <input type="number" class="fi" id="val-digi-y1" placeholder="Data Value">
                </div>
                <div class="fr2" style="margin-bottom: 15px;">
                    <button class="cb" id="btn-digi-y2"><i class="fa-solid fa-location-crosshairs"></i> Set Y2</button>
                    <input type="number" class="fi" id="val-digi-y2" placeholder="Data Value">
                </div>

                <div class="sec-hdr" style="margin-top: 10px; border-bottom: 1px solid var(--border2); margin-bottom: 10px;">2. Data Extraction</div>
                
                <div class="tabs" style="margin-bottom: 10px;">
                    <button class="tb on" id="tab-digi-manual">Manual</button>
                    <button class="tb" id="tab-digi-auto">Auto (AI)</button>
                </div>

                <div id="digi-manual-controls" style="display: block;">
                    <div class="fr2" style="margin-bottom: 8px;">
                        <button class="cb" id="btn-digi-add" style="width: 100%;"><i class="fa-solid fa-hand-pointer"></i> Add Points</button>
                        <button class="cb warn" id="btn-digi-erase-pt" style="width: 100%;"><i class="fa-solid fa-eraser"></i> Erase Point</button>
                    </div>
                    <div class="fr2">
                        <button class="cb warn" id="btn-digi-undo"><i class="fa-solid fa-rotate-left"></i> Undo Last</button>
                        <button class="cb warn" id="btn-digi-clear"><i class="fa-solid fa-trash"></i> Clear All</button>
                    </div>
                </div>

                <div id="digi-auto-controls" style="display: none; background: rgba(0,0,0,0.1); padding: 10px; border: 1px solid var(--border); border-radius: 4px;">
                    
                    <div class="fg" style="border-bottom: 1px solid var(--border2); padding-bottom: 10px; margin-bottom: 10px;">
                        <label class="fl">1. Highlight Region of Interest (Mask)</label>
                        <div style="display: flex; gap: 5px;">
                            <button class="cb" id="btn-digi-mask-draw" style="flex: 2;"><i class="fa-solid fa-highlighter"></i> Draw</button>
                            <button class="cb" id="btn-digi-mask-erase" style="flex: 2;"><i class="fa-solid fa-eraser"></i> Erase</button>
                            <button class="cb warn" id="btn-digi-mask-clear" style="flex: 1;" title="Clear Mask"><i class="fa-solid fa-trash"></i></button>
                        </div>
                        <div style="display: flex; align-items: center; gap: 10px; margin-top: 8px;">
                            <label class="fl" style="margin:0;">Brush Size:</label>
                            <input type="range" id="digi-mask-size" min="5" max="100" value="30" style="flex: 1; accent-color: #eab308;">
                        </div>
                    </div>

                    <label class="fl">2. Extract Line</label>
                    <div class="fg">
                        <label class="fl">Line Color Target</label>
                        <div style="display: flex; gap: 5px;">
                            <input type="color" id="digi-auto-color" value="#000000" style="width: 40px; height: 28px; padding: 0; cursor: pointer;">
                            <button class="cb" id="btn-digi-pick-color" style="flex: 1;"><i class="fa-solid fa-eye-dropper"></i> Pick from Image</button>
                        </div>
                    </div>
                    <div class="fr2">
                        <div class="fg">
                            <label class="fl" title="How close to the target color">Color Tol.</label>
                            <input type="number" class="fi" id="digi-auto-tol" value="50" min="1" max="150">
                        </div>
                        <div class="fg">
                            <label class="fl" title="Number of points to generate (e.g. 1024)">Target Points</label>
                            <input type="number" class="fi" id="digi-auto-pts" value="1024" min="10" step="1">
                        </div>
                    </div>
                    <button class="ba" id="btn-digi-run-auto" style="width: 100%;"><i class="fa-solid fa-robot"></i> Run Auto-Extraction</button>
                </div>

                <div class="sec-hdr" style="margin-top: 15px; border-bottom: 1px solid var(--border2); margin-bottom: 10px;">3. Point Styling</div>
                <div class="fr3">
                    <div class="fg" style="margin-bottom:0;">
                        <label class="fl">Color</label>
                        <input type="color" id="digi-pt-color" value="#bc8cff" style="width:100%; height:24px; padding:0; cursor:pointer;">
                    </div>
                    <div class="fg" style="margin-bottom:0;">
                        <label class="fl">Size</label>
                        <input type="number" class="fi" id="digi-pt-size" value="4" min="1" max="15" style="padding: 2px 4px;">
                    </div>
                    <div class="fg" style="margin-bottom:0;">
                        <label class="fl">Opacity</label>
                        <input type="number" class="fi" id="digi-pt-opac" value="1.0" min="0.1" max="1.0" step="0.1" style="padding: 2px 4px;">
                    </div>
                </div>

            </div>

            <div id="digi-canvas-wrapper" style="flex: 1; background: #000; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; user-select: none;">
                
                <div style="position: absolute; top: 15px; right: 15px; z-index: 10; display: flex; gap: 5px; background: rgba(22, 27, 34, 0.85); backdrop-filter: blur(4px); padding: 5px; border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.5);">
                    <button class="cb" id="btn-digi-fit" title="Fit to Screen"><i class="fa-solid fa-expand"></i> Fit</button>
                    <button class="cb" id="btn-digi-100" title="Actual Size (1:1)"><i class="fa-solid fa-magnifying-glass-plus"></i> 1:1</button>
                    <div style="width: 1px; background: var(--border); margin: 0 2px;"></div>
                    <span style="color: var(--txtm); font-size: 11px; display: flex; align-items: center; padding: 0 6px;"><i class="fa-solid fa-mouse"></i>&nbsp;&nbsp;Scroll to Zoom | Middle-Click to Pan</span>
                </div>

                <div id="digi-transform-box" style="position: relative; transform-origin: 0 0; box-shadow: 0 0 20px rgba(0,0,0,0.8);">
                    <canvas id="digi-img-canvas" style="display: block;"></canvas>
                    <canvas id="digi-mask-canvas" style="position: absolute; top: 0; left: 0; opacity: 0.4; pointer-events: none;"></canvas>
                    <canvas id="digi-ui-canvas" style="position: absolute; top: 0; left: 0; cursor: crosshair;"></canvas>
                </div>
                
                <div id="digi-empty-state" style="position: absolute; text-align: center; color: var(--txtm); pointer-events: none;">
                    <div style="font-size: 32px; opacity: 0.5; margin-bottom: 10px;"><i class="fa-solid fa-image"></i></div>
                    <div style="font-family: var(--sans);">Load an image to begin digitization</div>
                </div>
            </div>
        </div>
      </div>

      <div id="workspace-hca" class="workspace" style="display:none; background: var(--bg);">
          <div class="workspace-header" style="padding: 10px 15px; background: var(--panel); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;">
              <h2 style="margin:0; font-size: 15px; color: var(--txtbr); font-family: var(--mono); display: flex; align-items: center;">
                  <i class="fa-solid fa-folder-tree" style="margin-right: 8px;"></i> Hierarchical Cluster Analysis (HCA)
                  <button class="help-btn" onclick="openDoc('doc-hca')" style="margin-left: 12px; padding: 3px 8px; font-size: 10px; background: rgba(88,166,255,0.1); border: 1px solid var(--acc); color: var(--acc); border-radius: 4px; cursor: pointer; font-family: var(--sans); font-weight: 600;"><i class="fa-solid fa-question"></i> Help</button>
              </h2>
              <div style="display: flex; align-items: center; gap: 15px;">
                  <button class="bc" id="btn-hca-png" style="padding: 3px 8px;" title="Export Dendrogram as PNG"><i class="fa-solid fa-image"></i> Export PNG</button>
                  <button id="btn-exit-hca" class="ba" style="background: var(--err); color: #fff;"><i class="fa-solid fa-arrow-left"></i> Exit Dashboard</button>
              </div>
          </div>
          <div id="hca-dashboard-content" style="flex: 1; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; min-height: 0;">
              <div style="background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 10px; display: flex; flex-direction: column; flex: 1; min-height: 600px;">
                  <div style="font-size: 11px; font-family: var(--mono); color: var(--txtm); margin-bottom: 5px; flex-shrink: 0;">DENDROGRAM (WARD LINKAGE)</div>
                  <div id="hca-chartdiv" style="flex: 1; min-height: 0;"></div>
              </div>
          </div>
      </div>

      <div id="workspace-trend" class="workspace" style="display:none; background: var(--bg);">
          <div class="workspace-header" style="padding: 10px 15px; background: var(--panel); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;">
              <h2 style="margin:0; font-size: 15px; color: var(--txtbr); font-family: var(--mono); display: flex; align-items: center;">
                  <i class="fa-solid fa-chart-line" style="margin-right: 8px;"></i> Peak Trend Analysis (SPLOM)
                  <button class="help-btn" onclick="openDoc('doc-trend')" style="margin-left: 12px; padding: 3px 8px; font-size: 10px; background: rgba(88,166,255,0.1); border: 1px solid var(--acc); color: var(--acc); border-radius: 4px; cursor: pointer; font-family: var(--sans); font-weight: 600;"><i class="fa-solid fa-question"></i> Help</button>
              </h2>
              
              <div style="display: flex; align-items: center; gap: 15px;">
                  <button class="bc warn" id="btn-trend-hide-sel" style="padding: 3px 8px; display: none; border-color: var(--err); color: var(--err);" title="Hide lassoed spectra"><i class="fa-solid fa-eye-slash"></i> Hide Selected</button>
                  <button class="bc ok" id="btn-trend-show-all" style="padding: 3px 8px; display: none; border-color: var(--ok); color: var(--ok);" title="Show all hidden spectra in this trend"><i class="fa-solid fa-eye"></i> Show All</button>

                  <button class="bc" id="btn-trend-png" style="padding: 3px 8px;" title="Export Correlogram as PNG"><i class="fa-solid fa-image"></i> Export PNG</button>
                  <button id="btn-exit-trend" class="ba" style="background: var(--err); color: #fff;"><i class="fa-solid fa-arrow-left"></i> Exit Dashboard</button>
              </div>
          </div>
          
          <div id="trend-dashboard-content" style="flex: 1; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; min-height: 0;">
              <p class="info" style="margin-top: 0; margin-bottom: 10px;">
                  Hover over any point to identify the spectrum. <b>Click and drag</b> to zoom into specific clusters. Click any individual point to toggle its visibility across the workspace. <i>(Double-click the chart to reset the zoom).</i>
              </p>
              
              <div style="background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 10px; display: flex; flex-direction: column; flex: 1; min-height: 600px;">
                  <div style="font-size: 11px; font-family: var(--mono); color: var(--txtm); margin-bottom: 5px; flex-shrink: 0;">CORRELOGRAM MATRIX</div>
                  <div id="trend-chartdiv" style="flex: 1; min-height: 0; width: 100%;"></div>
              </div>
          </div>
      </div>

      <div id="workspace-2dcos" class="workspace" style="display:none; background: var(--bg);">
          <div class="workspace-header" style="padding: 10px 15px; background: var(--panel); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;">
              <h2 style="margin:0; font-size: 15px; color: var(--txtbr); font-family: var(--mono); display: flex; align-items: center;">
                  <i class="fa-solid fa-border-all" style="margin-right: 8px;"></i> 2D-COS Interactive Slicer
                  <button class="help-btn" onclick="openDoc('doc-2dcos')" style="margin-left: 12px; padding: 3px 8px; font-size: 10px; background: rgba(88,166,255,0.1); border: 1px solid var(--acc); color: var(--acc); border-radius: 4px; cursor: pointer; font-family: var(--sans); font-weight: 600;"><i class="fa-solid fa-question"></i> Help</button>
              </h2>
              <div style="display: flex; align-items: center; gap: 15px;">
                  <label class="ck" style="font-size: 11px; margin: 0; color: var(--txtbr); cursor: pointer;">
                      <input type="checkbox" id="2dcos-show-margins" checked> Show 1D Margins
                  </label>
                  
                  <label style="font-size: 11px; color: var(--txtm); font-family: var(--sans); margin: 0;">Map Type:
                      <select id="2dcos-type" style="background: var(--bg); color: var(--txtbr); border: 1px solid var(--border); border-radius: 3px; font-size: 11px; padding: 4px;">
                          <option value="async" selected>Asynchronous (Resolution)</option>
                          <option value="sync">Synchronous (In-Phase)</option>
                      </select>
                  </label>
                  <button class="ba" id="btn-save-slice" style="padding: 6px 12px; font-size: 11px; display: none; background: #bc8cff; color: #000; border: none;"><i class="fa-solid fa-download"></i> Save Extracted Slice</button>
                  <button id="btn-exit-2dcos" class="ba" style="background: var(--err); color: #fff;"><i class="fa-solid fa-arrow-left"></i> Exit Dashboard</button>
              </div>
          </div>
          <div id="2dcos-dashboard-content" style="flex: 1; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; min-height: 0;">
              <p class="info" style="margin-top: 0; margin-bottom: 10px;"><b>Click anywhere</b> on the 2D contour map (left) to extract the isolated 1D pure-component slice at that wavelength (right).</p>
              
              <div style="display: flex; gap: 15px; flex: 1; min-height: 500px;">
                  <div style="flex: 1; background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 10px; display: flex; flex-direction: column;">
                      <div style="font-size: 11px; font-family: var(--mono); color: var(--txtm); margin-bottom: 5px; flex-shrink: 0;">2D CONTOUR MAP</div>
                      <div id="2dcos-heatmap" style="flex: 1; min-height: 0;"></div>
                  </div>
                  <div style="flex: 1; background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 10px; display: flex; flex-direction: column;">
                      <div style="font-size: 11px; font-family: var(--mono); color: var(--txtm); margin-bottom: 5px; flex-shrink: 0;">EXTRACTED 1D SLICE</div>
                      <div id="2dcos-slice" style="flex: 1; min-height: 0;"></div>
                  </div>
              </div>
          </div>
      </div>


      <div id="workspace-density" class="workspace" style="display:none; background: var(--bg);">
          <div class="workspace-header" style="padding: 10px 15px; background: var(--panel); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;">
              <h2 style="margin:0; font-size: 15px; color: var(--txtbr); font-family: var(--mono); display: flex; align-items: center;">
                  <i class="fa-solid fa-fire-flame-curved" style="margin-right: 8px;"></i> Spectral Density Analysis
              </h2>
              <div style="display: flex; align-items: center; gap: 15px;">
                  <label style="font-size: 11px; color: var(--txtm); font-family: var(--sans); margin: 0;">Color Map:
                      <select id="density-colorscale" style="background: var(--bg); color: var(--txtbr); border: 1px solid var(--border); border-radius: 3px; font-size: 11px; padding: 4px;">
                          <option value="Hot" selected>Hot (Black to Red/Yellow)</option>
                          <option value="Jet">Jet (Blue to Red)</option>
                          <option value="Viridis">Viridis (Blue to Green/Yellow)</option>
                          <option value="Plasma">Plasma (Purple to Yellow)</option>
                      </select>
                  </label>
                  
                  <button class="bc" id="btn-density-png" style="padding: 3px 8px;" title="Export Heatmap as PNG"><i class="fa-solid fa-image"></i> Export PNG</button>
                  
                  <button id="btn-exit-density" class="ba" style="background: var(--err); color: #fff;"><i class="fa-solid fa-arrow-left"></i> Exit Dashboard</button>
              </div>
          </div>
          <div id="density-dashboard-content" style="flex: 1; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; min-height: 0;">
              <p class="info" style="margin-top: 0; margin-bottom: 10px;"><b>Bright / Hot</b> regions indicate paths that the majority of your spectra share. <b>Dark / Cold</b> regions represent rare outliers or isolated noise.</p>
              <div style="background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 10px; display: flex; flex-direction: column; flex: 1; min-height: 600px;">
                  <div style="font-size: 11px; font-family: var(--mono); color: var(--txtm); margin-bottom: 5px; flex-shrink: 0;">2D DENSITY HEATMAP</div>
                  <div id="density-chartdiv" style="flex: 1; min-height: 0;"></div>
              </div>
          </div>
      </div>


      <div id="workspace-multimatch" class="workspace" style="display:none; background: var(--bg);">
          <div class="workspace-header" style="padding: 10px 15px; background: var(--panel); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;">
              <h2 style="margin:0; font-size: 15px; color: var(--txtbr); font-family: var(--mono); display: flex; align-items: center;">
                  <i class="fa-solid fa-layer-group" style="margin-right: 8px;"></i> Interactive Multi-Phase Match
              </h2>
              <div style="display: flex; align-items: center; gap: 15px;">
                  <button id="btn-mm-quantify" class="ba" style="background: var(--ok); color: #000; display: none;"><i class="fa-solid fa-calculator"></i> Calculate Quantities (LCF)</button>
                  <button id="btn-exit-multimatch" class="ba" style="background: var(--err); color: #fff;"><i class="fa-solid fa-arrow-left"></i> Exit Dashboard</button>
              </div>
          </div>
          
          <div style="display: flex; flex: 1; overflow: hidden;">
              <div style="flex: 2.5; display: flex; flex-direction: column; padding: 15px; position: relative;">
                  <p class="info" style="margin-top: 0; margin-bottom: 10px;"><b>Click</b> on any unexplained peak in the <span style="color:#f85149; font-weight:bold;">Red Residual Line</span> to search the database for that specific position.</p>
                  <div style="background: var(--card); border: 1px solid var(--border); border-radius: 4px; flex: 1; padding: 10px; display: flex; flex-direction: column; min-height: 400px;">
                      <div id="multimatch-chartdiv" style="flex: 1; min-height: 0;"></div>
                  </div>
              </div>
              
              <div style="width: 380px; background: var(--panel); border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; flex-shrink: 0;">
                  
                  <div style="padding: 15px; border-bottom: 1px solid var(--border);">
                      <div style="font-size: 11px; font-family: var(--mono); color: var(--txtm); margin-bottom: 10px; font-weight: 600;"><i class="fa-solid fa-check-circle" style="color:var(--ok);"></i> ACCEPTED PHASES</div>
                      <div id="mm-accepted-list" style="display:flex; flex-direction:column; gap:6px;">
                          <div style="color:var(--txtm); font-size:11px; font-style:italic; text-align:center; padding: 10px 0;">No phases accepted yet.</div>
                      </div>
                  </div>

                  <div style="padding: 15px; flex: 1; display: flex; flex-direction: column;">
                      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                          <div style="font-size: 11px; font-family: var(--mono); color: var(--txtm); font-weight: 600;"><i class="fa-solid fa-magnifying-glass"></i> PEAK SEARCH RESULTS</div>
                          <span id="mm-search-target" style="font-size: 11px; color: var(--acc); font-weight: bold; font-family: var(--mono);"></span>
                      </div>
                      
                      <div style="display:flex; gap:5px; margin-bottom:10px;">
                          <input type="text" id="mm-manual-search" class="fi" placeholder="Or search manually (e.g. Quartz)..." style="font-size:11px; padding:4px 6px;">
                          <button id="btn-mm-manual-search" class="bc" style="padding:4px 8px; font-size:11px;"><i class="fa-solid fa-search"></i></button>
                      </div>
                      
                      <div id="mm-search-results" style="flex: 1; background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 5px; overflow-y: auto;">
                          <div style="color:var(--txtm); font-size:11px; font-style:italic; text-align:center; padding: 20px 10px;">Click a peak on the chart to search the database.</div>
                      </div>
                  </div>
                  
              </div>
          </div>
      </div>


      <div id="workspace-kinetics" class="workspace" style="display:none; background: var(--bg);">
          <div class="workspace-header" style="padding: 10px 15px; background: var(--panel); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;">
              <h2 style="margin:0; font-size: 15px; color: var(--txtbr); font-family: var(--mono); display: flex; align-items: center;">
                  <i class="fa-solid fa-stopwatch" style="margin-right: 8px;"></i> Kinetic Curve Fitting
              </h2>
              <div style="display: flex; align-items: center; gap: 15px;">
                  <button class="bc" id="btn-kinetics-png" style="padding: 3px 8px;" title="Export Kinetics as PNG"><i class="fa-solid fa-image"></i> Export PNG</button>
                  <button id="btn-exit-kinetics" class="ba" style="background: var(--err); color: #fff;"><i class="fa-solid fa-arrow-left"></i> Exit Dashboard</button>
              </div>
          </div>
          <div id="kinetics-dashboard-content" style="flex: 1; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; min-height: 0;">
              
              <div id="kinetics-readout-panel" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 15px;">
                  <div style="background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--acc); padding: 10px; border-radius: 4px;">
                      <div style="font-size: 10px; color: var(--txtm); text-transform: uppercase;">Reaction Order</div>
                      <div id="kin-out-order" style="font-size: 16px; font-weight: 600; color: var(--txtbr); font-family: var(--mono);">--</div>
                  </div>
                  <div style="background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--warn); padding: 10px; border-radius: 4px;">
                      <div style="font-size: 10px; color: var(--txtm); text-transform: uppercase;">Rate Constant (k)</div>
                      <div id="kin-out-k" style="font-size: 16px; font-weight: 600; color: var(--txtbr); font-family: var(--mono);">--</div>
                  </div>
                  <div style="background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--ok); padding: 10px; border-radius: 4px;">
                      <div style="font-size: 10px; color: var(--txtm); text-transform: uppercase;">Half-Life (t½)</div>
                      <div id="kin-out-hl" style="font-size: 16px; font-weight: 600; color: var(--txtbr); font-family: var(--mono);">--</div>
                  </div>
                  <div style="background: var(--card); border: 1px solid var(--border); border-left: 3px solid #bc8cff; padding: 10px; border-radius: 4px;">
                      <div style="font-size: 10px; color: var(--txtm); text-transform: uppercase;">R² Fit Quality</div>
                      <div id="kin-out-r2" style="font-size: 16px; font-weight: 600; color: var(--txtbr); font-family: var(--mono);">--</div>
                  </div>
              </div>

              <div style="background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 10px; display: flex; flex-direction: column; flex: 1; min-height: 500px;">
                  <div id="kinetics-chartdiv" style="flex: 1; min-height: 0;"></div>
              </div>
          </div>
      </div>

  </div>

<div id="float-cheat" style="display:none; position:absolute; right:20px; top:60px; width:340px; max-height:calc(100vh - 100px); background:var(--panel); border:1px solid var(--border); border-radius:8px; box-shadow:0 12px 30px rgba(0,0,0,0.5); z-index:100; flex-direction:column; overflow:hidden; transform: translateX(400px); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);">
    <div style="padding:12px 15px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; background:var(--card); flex-shrink:0;">
      <span style="font-family:var(--mono); font-weight:600; color:var(--txtbr); font-size:12px;"><i class="fa-solid fa-tags"></i> Mineral Band Assignments</span>
      <button id="btn-close-cheat" style="background:none; border:none; color:var(--txtm); cursor:pointer; font-size:14px;">✕</button>
    </div>
    <div id="cheat-list" style="flex:1; overflow-y:auto; padding:10px 15px;">
      </div>
</div>


<div class="ov" id="ov-calc" style="pointer-events: none; background: transparent;">
  <div class="modal" style="width: 380px; pointer-events: auto; position: absolute; top: 70px; right: 20px; transform: none; left: auto; bottom: auto; margin: 0;">
    <h3 style="display: flex; justify-content: space-between; align-items: center; cursor: grab;">
      <span><i class="fa-solid fa-calculator"></i> Spectroscopy Calculator</span>
      <button class="bc warn" onclick="closeModal('ov-calc')" style="padding: 3px 8px;">✕</button>
    </h3>
    
    <div class="tabs" style="margin-bottom: 10px;">
      <button class="tb on" data-tab="calc-standard">Standard</button>
      <button class="tb" data-tab="calc-shift">Δ Shift</button>
      <button class="tb" data-tab="calc-wave">λ (nm)</button>
      <button class="tb" data-tab="calc-ratio">Ratio</button>
    </div>

    <div class="tc on" id="calc-standard">
      <div style="background: rgba(0,0,0,0.2); border: 1px solid var(--border); border-radius: 4px; padding: 10px; margin-bottom: 12px; text-align: right; font-family: var(--mono);">
        <div id="calc-std-history" style="height: 14px; font-size: 11px; color: var(--txtm); margin-bottom: 4px;"></div>
        <div id="calc-std-display" style="font-size: 26px; font-weight: bold; color: var(--txtbr); overflow: hidden; text-overflow: ellipsis;">0</div>
      </div>

      <div id="calc-std-grid" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;">
        <button class="bc" data-action="percent" style="font-size: 14px; padding: 8px;">%</button>
        <button class="bc" data-action="clear-entry" style="font-size: 14px; padding: 8px;">CE</button>
        <button class="bc" data-action="clear-all" style="font-size: 14px; padding: 8px;">C</button>
        <button class="bc" data-action="backspace" style="font-size: 14px; padding: 8px; color: var(--warn);" title="Backspace"><i class="fa-solid fa-delete-left"></i></button>

        <button class="bc" data-val="7" style="font-size: 16px; padding: 8px; font-weight: bold; background: rgba(255,255,255,0.03);">7</button>
        <button class="bc" data-val="8" style="font-size: 16px; padding: 8px; font-weight: bold; background: rgba(255,255,255,0.03);">8</button>
        <button class="bc" data-val="9" style="font-size: 16px; padding: 8px; font-weight: bold; background: rgba(255,255,255,0.03);">9</button>
        <button class="bc" data-action="op" style="font-size: 18px; padding: 8px; color: var(--acc); background: rgba(88,166,255,0.1);">÷</button>

        <button class="bc" data-val="4" style="font-size: 16px; padding: 8px; font-weight: bold; background: rgba(255,255,255,0.03);">4</button>
        <button class="bc" data-val="5" style="font-size: 16px; padding: 8px; font-weight: bold; background: rgba(255,255,255,0.03);">5</button>
        <button class="bc" data-val="6" style="font-size: 16px; padding: 8px; font-weight: bold; background: rgba(255,255,255,0.03);">6</button>
        <button class="bc" data-action="op" style="font-size: 18px; padding: 8px; color: var(--acc); background: rgba(88,166,255,0.1);">×</button>

        <button class="bc" data-val="1" style="font-size: 16px; padding: 8px; font-weight: bold; background: rgba(255,255,255,0.03);">1</button>
        <button class="bc" data-val="2" style="font-size: 16px; padding: 8px; font-weight: bold; background: rgba(255,255,255,0.03);">2</button>
        <button class="bc" data-val="3" style="font-size: 16px; padding: 8px; font-weight: bold; background: rgba(255,255,255,0.03);">3</button>
        <button class="bc" data-action="op" style="font-size: 18px; padding: 8px; color: var(--acc); background: rgba(88,166,255,0.1);">-</button>

        <button class="bc" data-action="sign" style="font-size: 16px; padding: 8px; font-weight: bold;">±</button>
        <button class="bc" data-val="0" style="font-size: 16px; padding: 8px; font-weight: bold; background: rgba(255,255,255,0.03);">0</button>
        <button class="bc" data-action="decimal" style="font-size: 16px; padding: 8px; font-weight: bold;">.</button>
        <button class="bc" data-action="op" style="font-size: 18px; padding: 8px; color: var(--acc); background: rgba(88,166,255,0.1);">+</button>

        <button class="ba" data-action="eq" style="grid-column: span 4; font-size: 18px; padding: 10px; font-weight: bold; margin-top: 4px;">=</button>
      </div>
    </div>

    <div class="tc" id="calc-shift">
      <p class="info" style="margin-top:0; margin-bottom:10px;">Calculate the distance between two peaks.</p>
      <div class="fr2">
        <div class="fg">
          <label class="fl">Peak 1 (X)</label>
          <div style="display:flex; gap:4px;">
            <input type="number" class="fi" id="calc-p1" placeholder="e.g. 1350">
            <button class="bc btn-calc-pick" data-target="calc-p1" data-axis="x" title="Pick from chart"><i class="fa-solid fa-crosshairs"></i></button>
          </div>
        </div>
        <div class="fg">
          <label class="fl">Peak 2 (X)</label>
          <div style="display:flex; gap:4px;">
            <input type="number" class="fi" id="calc-p2" placeholder="e.g. 1580">
            <button class="bc btn-calc-pick" data-target="calc-p2" data-axis="x" title="Pick from chart"><i class="fa-solid fa-crosshairs"></i></button>
          </div>
        </div>
      </div>
      <div style="background: rgba(0,0,0,0.15); border: 1px solid var(--border); border-left: 3px solid var(--acc); padding: 8px; border-radius: 4px; margin-top: 5px;">
        <span style="font-size: 11px; color: var(--txtm);">Distance (Δ): </span>
        <b id="calc-shift-res" style="color: var(--txtbr); font-family: var(--mono); font-size: 14px;">0.00</b>
      </div>
    </div>

    <div class="tc" id="calc-wave">
      <p class="info" style="margin-top:0; margin-bottom:10px;">Convert Raman Shift to absolute Wavelength.</p>
      <div class="fr2">
        <div class="fg">
          <label class="fl">Laser λ (nm)</label>
          <input type="number" class="fi" id="calc-laser" value="532" step="0.1">
        </div>
        <div class="fg">
          <label class="fl">Raman Shift (cm⁻¹)</label>
          <div style="display:flex; gap:4px;">
            <input type="number" class="fi" id="calc-rs" placeholder="e.g. 464">
            <button class="bc btn-calc-pick" data-target="calc-rs" data-axis="x" title="Pick from chart"><i class="fa-solid fa-crosshairs"></i></button>
          </div>
        </div>
      </div>
      <div style="background: rgba(0,0,0,0.15); border: 1px solid var(--border); border-left: 3px solid var(--ok); padding: 8px; border-radius: 4px; margin-top: 5px;">
        <span style="font-size: 11px; color: var(--txtm);">Absolute Emission: </span>
        <b id="calc-wave-res" style="color: var(--txtbr); font-family: var(--mono); font-size: 14px;">0.00 nm</b>
      </div>
    </div>

    <div class="tc" id="calc-ratio">
      <p class="info" style="margin-top:0; margin-bottom:10px;">Calculate intensity or area ratios.</p>
      <div class="fr2">
        <div class="fg">
          <label class="fl">Value 1 (Numerator)</label>
          <div style="display:flex; gap:4px;">
            <input type="number" class="fi" id="calc-v1" placeholder="e.g. 1500">
            <button class="bc btn-calc-pick" data-target="calc-v1" data-axis="y" title="Pick Y from chart"><i class="fa-solid fa-crosshairs"></i></button>
          </div>
        </div>
        <div class="fg">
          <label class="fl">Value 2 (Denominator)</label>
          <div style="display:flex; gap:4px;">
            <input type="number" class="fi" id="calc-v2" placeholder="e.g. 500">
            <button class="bc btn-calc-pick" data-target="calc-v2" data-axis="y" title="Pick Y from chart"><i class="fa-solid fa-crosshairs"></i></button>
          </div>
        </div>
      </div>
      <div style="background: rgba(0,0,0,0.15); border: 1px solid var(--border); border-left: 3px solid #bc8cff; padding: 8px; border-radius: 4px; margin-top: 5px;">
        <span style="font-size: 11px; color: var(--txtm);">Ratio (V1 / V2): </span>
        <b id="calc-ratio-res" style="color: var(--txtbr); font-family: var(--mono); font-size: 14px;">0.00</b>
      </div>
    </div>

  </div>
</div>

<div class="ov" id="ov-axis-query">
<div class="modal" style="width: 500px;">
  <h3 id="aq-filename">Axis Type Query</h3>
  <div class="fr2" style="gap: 20px;">
    <div style="border: 1px solid var(--border); padding: 10px; border-radius: 4px;">
      <label class="fl">X Axis Type</label>
      <div id="aq-x-options">
        <label class="sci"><input type="radio" name="x-type" value="Pixel number"> Pixel number</label>
        <label class="sci"><input type="radio" name="x-type" value="Wavelength [nm]"> Wavelength [nm]</label>
        <label class="sci"><input type="radio" name="x-type" value="Wavelength [µm]"> Wavelength [µm]</label>
        <label class="sci"><input type="radio" name="x-type" value="Wavenumbers [1/cm]"> Wavenumbers [1/cm]</label>
        <label class="sci"><input type="radio" name="x-type" value="Raman Shift [1/cm]" checked> Raman Shift [1/cm]</label>
        <label class="sci"><input type="radio" name="x-type" value="Electron Volts [eV]"> Electron Volts [eV]</label>
        <label class="sci"><input type="radio" name="x-type" value="Frequency [THz]"> Frequency [THz]</label>
		<label class="sci"><input type="radio" name="x-type" value="2-Theta [°]"> 2-Theta [°]</label>
      </div>
    </div>
    <div style="border: 1px solid var(--border); padding: 10px; border-radius: 4px;">
      <label class="fl">Y Axis Type</label>
      <div id="aq-y-options">
        <label class="sci"><input type="radio" name="y-type" value="Transmittance 0-100%"> Transmittance 0-100%</label>
        <label class="sci"><input type="radio" name="y-type" value="Absorbance"> Absorbance</label>
        <label class="sci"><input type="radio" name="y-type" value="Intensity" checked> Intensity</label>
        <label class="sci"><input type="radio" name="y-type" value="Counts"> Counts</label>
        <label class="sci"><input type="radio" name="y-type" value="arbitrary units"> arbitrary units</label>
		<label class="sci"><input type="radio" name="y-type" value="Reflectance 0-100%"> Reflectance 0-100%</label>
		<label class="sci"><input type="radio" name="y-type" value="log(1/R)"> log(1/R)</label>
		<label class="sci"><input type="radio" name="y-type" value="Kubelka-Munk units"> Kubelka-Munk units</label>
      </div>
    </div>
  </div>
  <div style="margin-top: 15px;">
    <label class="ck"><input type="checkbox" id="aq-same-all"> use same axis types for all files</label>
  </div>
  <div class="mf">
    <button class="bc" id="aq-cancel">Cancel</button>
    <button class="ba" id="aq-apply">Apply</button>
  </div>
</div>
</div>



<div class="ov" id="ov-norm">
<div class="modal">
  <h3><i class="fa-solid fa-arrow-up-9-1"></i> Normalize Spectra <button class="help-btn" onclick="openDoc('doc-norm')"><i class="fa-solid fa-question"></i> Help</button></h3>
  <div class="fg"><label class="fl">Apply to Spectra</label>
    <div class="ss" id="ss-norm"></div></div>
  <div class="fg"><label class="fl">Mode</label>
    <select class="fs" id="nm-mode">
	  <option value="01">0 → 1 (Min-Max)</option>
	  <option value="0100">0 → 100 % (Min-Max)</option>
	  <option value="max">Divide by Max only</option>
	  <optgroup label="Reflectance Conversions">
		<option value="log1r">Pseudo-Absorbance [log(1/R)]</option>
		<option value="km">Kubelka-Munk [F(R)]</option>
	  </optgroup>
	  <optgroup label="Chemometric Preprocessing">
        <option value="snv">Standard Normal Variate (SNV)</option>
        <option value="msc">Multiplicative Scatter Correction (MSC)</option>
        <option value="mc">Mean-Centering</option>
    </optgroup>
	</select>
  </div>
  <div class="fg"><label class="ck"><input type="checkbox" id="nm-keep" checked> Keep original spectra</label></div>
  <div class="mf">
    <button class="bc" onclick="openDoc('doc-intro')" style="margin-right: auto; border-color: var(--border); color: var(--txtm);" title="View RDRS SpectraLib APA Citation"><i class="fa-solid fa-quote-right"></i> Cite</button>
    <button class="bc" data-ov="ov-norm">Cancel</button>
    <button class="ba" id="ap-norm">Apply</button>
  </div>
</div></div>

<div class="ov" id="ov-smooth">
<div class="modal">
  <h3><i class="fa-solid fa-wave-square"></i> Smooth Spectra <button class="help-btn" onclick="openDoc('doc-smooth')"><i class="fa-solid fa-question"></i> Help</button></h3>
  <div class="fg"><label class="fl">Apply to Spectra</label>
    <div class="ss" id="ss-sm"></div></div>
  <div class="tabs">
    <button class="tb on" data-tab="sm-ma">Moving Avg.</button>
    <button class="tb" data-tab="sm-sg">Savitzky-Golay</button>
    <button class="tb" data-tab="sm-pf">Percentile Filter</button>
  </div>
  <div class="tc on" id="sm-ma">
    <div class="fr2">
      <div class="fg"><label class="fl">Half Window (pts)</label>
        <input type="number" class="fi" id="ma-hw" value="5" min="1" max="200"></div>
      <div class="fg"><label class="fl">Function</label>
        <select class="fs" id="ma-fn">
          <option value="rect">Rectangular</option>
          <option value="tri">Triangular</option>
        </select></div>
    </div>
  </div>
  <div class="tc" id="sm-sg">
    <div class="fr2">
      <div class="fg"><label class="fl">Half Window (pts)</label>
        <input type="number" class="fi" id="sg-hw" value="5" min="2" max="200"></div>
      <div class="fg"><label class="fl">Polynomial Order</label>
        <input type="number" class="fi" id="sg-ord" value="3" min="1" max="8"></div>
    </div>
    <p class="info">Window must be &gt; polynomial order. Lower order = smoother.</p>
  </div>
  <div class="tc" id="sm-pf">
    <div class="fr2">
      <div class="fg"><label class="fl">Half Window (pts)</label>
        <input type="number" class="fi" id="pf-hw" value="5" min="1" max="200"></div>
      <div class="fg"><label class="fl">Percentile (%)</label>
        <input type="number" class="fi" id="pf-pct" value="50" min="0" max="100"></div>
    </div>
    <p class="info">50% = median filter. &lt;50% = removes spikes/peaks above baseline.</p>
  </div>
  <div class="fr2" style="margin-top: 8px; border-top: 1px solid var(--border); padding-top: 12px;">
    <div class="fg"><label class="fl">X Start (Optional)</label>
      <input type="number" class="fi" id="sm-xs" placeholder="Auto (Min)"></div>
    <div class="fg"><label class="fl">X End (Optional)</label>
      <input type="number" class="fi" id="sm-xe" placeholder="Auto (Max)"></div>
  </div>
  <p class="info" style="margin-top: 0; margin-bottom: 8px;">Leave X Start and X End blank to smooth the entire spectrum.</p>
  <div class="fg" style="margin-top:8px"><label class="ck"><input type="checkbox" id="sm-keep" checked> Keep original spectra</label></div>
  <div class="mf">
    <button class="bc" onclick="openDoc('doc-intro')" style="margin-right: auto; border-color: var(--border); color: var(--txtm);" title="View RDRS SpectraLib APA Citation"><i class="fa-solid fa-quote-right"></i> Cite</button>
    <button class="bc" data-ov="ov-smooth">Cancel</button>
    <button class="ba" id="ap-sm">Apply</button>
  </div>
</div></div>

<div class="ov" id="ov-base">
<div class="modal" style="width: 540px;">
  <h3><i class="fa-solid fa-arrows-down-to-line"></i> Automatic Baseline Correction <button class="help-btn" onclick="openDoc('doc-base')"><i class="fa-solid fa-question"></i> Help</button></h3>
  <div class="fg"><label class="fl">Apply to Spectra</label>
    <div class="ss" id="ss-bl"></div></div>
  <div class="tabs">
    <button class="tb" data-tab="bl-lin">Linear</button>
    <button class="tb" data-tab="bl-adap">Adaptive (SNIP)</button>
    <button class="tb" data-tab="bl-scat">Scattering (Poly)</button>
    <button class="tb" data-tab="bl-roll">Rolling Ball</button>
    <button class="tb on" data-tab="bl-als">ALS</button> </div>
  
  <div class="tc on" id="bl-als"> <div class="fr3">
      <div class="fg"><label class="fl">Smoothness (λ)</label>
        <input type="number" class="fi" id="bl-als-lam" value="100000" step="10000" title="Typically 10^4 to 10^9"></div>
      <div class="fg"><label class="fl">Asymmetry (p)</label>
        <input type="number" class="fi" id="bl-als-p" value="0.01" step="0.001" title="Typically 0.001 to 0.1"></div>
      <div class="fg"><label class="fl">Iterations</label>
        <input type="number" class="fi" id="bl-als-iter" value="10" min="1" max="50"></div>
    </div>
    <p class="info">Asymmetric Least Squares (Eilers-Boelens). The ultimate baseline for Raman fluorescence. <b>λ</b> controls rigidity. <b>p</b> controls asymmetry (hugging the bottom).</p>
  </div>
  <div class="tc" id="bl-roll">
    <div class="fr2">
      <div class="fg"><label class="fl">Ball Radius (Window Size)</label>
        <input type="number" class="fi" id="bl-roll-win" value="150" min="10" max="1000" title="Must be wider than your widest peak"></div>
      <div class="fg"><label class="fl">Offset</label>
        <input type="number" class="fi" id="bl-roll-ofs" value="0" step="1"></div>
    </div>
    <p class="info">Morphological filter. Excellent for highly irregular, wavy backgrounds. The Ball Radius must be strictly wider than the base of your widest peak!</p>
  </div>
  <div class="tc" id="bl-lin"> <div class="fr2">
      <div class="fg"><label class="fl">Slope</label>
        <input type="number" class="fi" id="bl-slope" value="0" step="0.0001"></div>
      <div class="fg"><label class="fl">Offset (Y intercept)</label>
        <input type="number" class="fi" id="bl-ofs" value="0" step="1"></div>
    </div>
    <p class="info">Subtracts: baseline = slope × x + offset from each spectrum.</p>
  </div>
  <div class="tc" id="bl-adap">
    <div class="fr2">
      <div class="fg"><label class="fl">Iterations (Coarseness)</label>
        <input type="number" class="fi" id="bl-iter" value="40" min="5" max="300"></div>
      <div class="fg"><label class="fl">Offset</label>
        <input type="number" class="fi" id="bl-aofs" value="0" step="1"></div>
    </div>
    <p class="info">SNIP algorithm — iterative peak-clipping in log²-space. Higher iterations = flatter baseline.</p>
  </div>
  <div class="tc" id="bl-scat">
    <div class="fr3">
      <div class="fg"><label class="fl">Poly Power</label>
        <select class="fs" id="bl-pow">
          <option value="2">2nd</option>
          <option value="3" selected>3rd</option>
          <option value="4">4th</option>
          <option value="5">5th</option>
        </select></div>
      <div class="fg"><label class="fl">Vert. Spread</label>
        <input type="number" class="fi" id="bl-vsp" value="0" step="0.01"></div>
      <div class="fg"><label class="fl">Offset</label>
        <input type="number" class="fi" id="bl-sofs" value="0" step="1"></div>
    </div>
    <p class="info">Iterative polynomial fit — clamps peaks above fitted curve + spread, then refits. Good for fluorescence background.</p>
  </div>
  <div class="fr2" style="margin-top:8px">
    <div class="fg"><label class="ck" style="color:var(--acc);"><input type="checkbox" id="bl-preview" checked> <i class="fa-solid fa-circle"></i> Live Preview</label></div>
    <div class="fg"><label class="ck"><input type="checkbox" id="bl-keep" checked> Keep original spectra</label></div>
  </div>
  <div class="mf">
    <button class="bc" onclick="openDoc('doc-intro')" style="margin-right: auto; border-color: var(--border); color: var(--txtm);" title="View RDRS SpectraLib APA Citation"><i class="fa-solid fa-quote-right"></i> Cite</button>
    <button class="bc" data-ov="ov-base">Cancel</button>
    <button class="ba" id="ap-bl">Apply</button>
  </div>
</div></div>

<div class="ov" id="ov-cut">
<div class="modal">
  <h3><i class="fa-solid fa-scissors"></i> Cut Spectrum Range <button class="help-btn" onclick="openDoc('doc-cut')"><i class="fa-solid fa-question"></i> Help</button></h3>
  <div class="fg"><label class="fl">Apply to Spectra</label>
    <div class="ss" id="ss-cut"></div></div>
  <div class="fr2">
    <div class="fg"><label class="fl">X Start (keep from)</label>
      <input type="number" class="fi" id="cut-xs" placeholder="auto (min)"></div>
    <div class="fg"><label class="fl">X End (keep to)</label>
      <input type="number" class="fi" id="cut-xe" placeholder="auto (max)"></div>
  </div>
  <p class="info">Only data points within [X Start, X End] are retained. Leave blank to use full range boundary.</p>
  <div class="fg" style="margin-top:8px"><label class="ck"><input type="checkbox" id="cut-keep" checked> Keep original spectra</label></div>
  <div class="mf">
    <button class="bc" onclick="openDoc('doc-intro')" style="margin-right: auto; border-color: var(--border); color: var(--txtm);" title="View RDRS SpectraLib APA Citation"><i class="fa-solid fa-quote-right"></i> Cite</button>
    <button class="bc" data-ov="ov-cut">Cancel</button>
    <button class="ba" id="ap-cut">Apply</button>
  </div>
</div></div>

<div class="ov" id="ov-interp">
<div class="modal" style="width: 480px;">
  <h3><i class="fa-solid fa-chart-line"></i> Data Interpolation (Resampling) <button class="help-btn" onclick="openDoc('doc-interp')"><i class="fa-solid fa-question"></i> Help</button></h3>
  <div class="fg"><label class="fl">Apply to Spectra</label>
    <div class="ss" id="ss-interp"></div></div>
  
  <div class="fg"><label class="fl">Algorithm</label>
    <select class="fs" id="int-algo">
      <option value="akima" selected>Akima Spline (Best for spectra - prevents ringing artifacts)</option>
      <option value="cubic">Natural Cubic Spline (Extremely smooth, but may overshoot)</option>
      <option value="linear">Linear (Straight lines between points)</option>
    </select>
  </div>

  <div class="fr3" style="margin-top: 12px;">
    <div class="fg"><label class="fl">X Start</label>
      <input type="number" class="fi" id="int-xs" placeholder="Auto (Min)"></div>
    <div class="fg"><label class="fl">X End</label>
      <input type="number" class="fi" id="int-xe" placeholder="Auto (Max)"></div>
    <div class="fg"><label class="fl">New Step Size (ΔX)</label>
      <input type="number" class="fi" id="int-step" value="1.0" step="0.1" min="0.01"></div>
  </div>
  
  <p class="info" style="margin-top: 4px;">Creates a new uniform X-axis grid. A Step Size of 1.0 generates a point every 1 cm⁻¹. Leave X Start and X End blank to use the spectrum's current limits.</p>
  
  <div class="fg" style="margin-top:12px"><label class="ck"><input type="checkbox" id="int-keep" checked> Keep original spectra</label></div>
  <div class="mf">
    <button class="bc" data-ov="ov-interp">Cancel</button>
    <button class="ba" id="ap-interp">Interpolate Data</button>
  </div>
</div>
</div>

<div class="ov" id="ov-pk">
<div class="modal">
  <h3><i class="fa-solid fa-mountain"></i> Find Peaks <button class="help-btn" onclick="openDoc('doc-peaks')"><i class="fa-solid fa-question"></i> Help</button></h3>
  <div class="fg"><label class="fl">Apply to Spectra</label>
    <div class="ss" id="ss-pk"></div></div>
  <div class="fr2">
    <div class="fg"><label class="fl" title="How much the peak stands out from its local background">Prominence (%)</label>
      <input type="number" class="fi" id="pk-thr" value="5" min="0.1" max="100" step="0.5"></div>
    <div class="fg"><label class="fl" title="Minimum data points between peaks (filters out noise)">Min Distance (pts)</label>
      <input type="number" class="fi" id="pk-dist" value="15" min="1" max="200" step="1"></div>
  </div>
  <div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 3px;">
      <label class="fl" style="margin-bottom: 0;">Search Region</label>
      <button id="btn-pk-get-view" class="bc" style="padding: 2px 8px; font-size: 10px; color: var(--acc);" title="Snap to current zoom bounds"><i class="fa-solid fa-crop-simple"></i> Get View</button>
  </div>
  <div class="fr2">
    <div class="fg"><input type="number" class="fi" id="pk-xs" placeholder="Start X (Optional)"></div>
    <div class="fg"><input type="number" class="fi" id="pk-xe" placeholder="End X (Optional)"></div>
  </div>
  <div class="fr2" style="margin-top:4px">
    <div class="fg"><label class="ck"><input type="checkbox" id="pk-inv" title="Find minima / T maxima"> Inverted</label></div>
    <div class="fg"><label class="ck" style="color:var(--acc);"><input type="checkbox" id="pk-preview"> <i class="fa-solid fa-circle"></i> Live Preview <span style="font-size: 9px; color: var(--txtm); margin-left: 4px;">(1 spectrum only)</span></label></div>
  </div>
  <div class="fr2">
    <div class="fg"><label class="ck"><input type="checkbox" id="pk-lbl" checked> Add X labels</label></div>
    <div class="fg"><label class="ck" title="Rotate labels -90 degrees"><input type="checkbox" id="pk-rot" checked> Vertical (-90°)</label></div>
  </div>
  <p class="info" style="margin-top: 2px;">Note: Live Preview only works when exactly ONE spectrum is selected.</p>
  <div class="mf">
    <div style="margin-right: auto; display: flex; gap: 7px;">
      <button class="bc" onclick="openDoc('doc-intro')" style="border-color: var(--border); color: var(--txtm);" title="View RDRS SpectraLib APA Citation"><i class="fa-solid fa-quote-right"></i> Cite</button>
      <button class="bc warn" id="b-clrpk">Clear All Labels</button>
    </div>
    
    <button class="bc" data-ov="ov-pk">Cancel</button>
    <button class="ba" id="ap-pk">Find Peaks</button>
  </div>
</div></div>

<div class="ov" id="ov-sc">
<div class="modal">
  <h3><i class="fa-solid fa-arrows-up-down"></i> Scale Intensity <button class="help-btn" onclick="openDoc('doc-scale')"><i class="fa-solid fa-question"></i> Help</button></h3>
  <div class="fg"><label class="fl">Apply to Spectra</label>
    <div class="ss" id="ss-sc"></div></div>
  <div class="tabs">
    <button class="tb on" data-tab="sc-mul">Multiply by Factor</button>
    <button class="tb" data-tab="sc-nrm">Normalize All Same</button>
  </div>
  <div class="tc on" id="sc-mul">
    <div class="fg"><label class="fl">Multiplier</label>
      <input type="number" class="fi" id="sc-fac" value="1" step="0.1" min="0.001"></div>
    <p class="info">Each Y value = Y × multiplier. Useful for visual comparison of peak heights.</p>
  </div>
  <div class="tc" id="sc-nrm">
    <div class="fg"><label class="fl">Target Range</label>
      <select class="fs" id="sc-rng">
        <option value="01">0 → 1</option>
        <option value="0100">0 → 100%</option>
      </select></div>
    <p class="info">All selected spectra normalized to same intensity range for visual comparison when stacked.</p>
  </div>
  <div class="fg" style="margin-top:8px"><label class="ck"><input type="checkbox" id="sc-keep" checked> Keep original spectra</label></div>
  <div class="mf">
    <button class="bc" onclick="openDoc('doc-intro')" style="margin-right: auto; border-color: var(--border); color: var(--txtm);" title="View RDRS SpectraLib APA Citation"><i class="fa-solid fa-quote-right"></i> Cite</button>
    <button class="bc" data-ov="ov-sc">Cancel</button>
    <button class="ba" id="ap-sc">Apply</button>
  </div>
</div></div>

<div class="ov" id="ov-db">
<div class="modal" style="width: 600px;">
  <h3><i class="fa-solid fa-book"></i> Reference Database <span class="db-badge" id="badge-db-modal">~11,415 Raman Spectra</span> <button class="help-btn" onclick="openDoc('doc-db')"><i class="fa-solid fa-question"></i> Help</button></h3>
  <p class="info" style="margin-bottom: 15px; margin-top: 0;">
    Search curated libraries of reference spectra. While primarily focused on <b>minerals, rocks, and gemstones</b>, the database also includes pharmaceuticals, microplastics, organic compounds, and artificial materials.
  </p>
  
  <div class="fg">
    <label class="fl">Global Search</label>
    <input type="text" id="db-search" class="fi" placeholder="Search by mineral name, reference, or info... (e.g. Calcite)">
  </div>
  
  <div class="sec-hdr collapsible-hdr" data-target="pt-wrapper" style="margin-top:10px;">
      <span><i class="fa-solid fa-flask"></i> Filter by Chemistry</span>
      <i class="fa-solid fa-chevron-down toggle-icon"></i>
  </div>
  
  <div id="pt-wrapper" class="collapsible-content collapsed" style="margin-bottom: 15px;">
      <div style="display:flex; justify-content:space-between; font-size:10px; color:var(--txtm); margin-top:5px;">
          <span style="padding-top: 2px;">Click to toggle: <b style="color:var(--ok);">Required</b> / <b style="color:var(--err);">Excluded</b></span>
          
          <div style="display:flex; gap:12px; align-items:center;">
              <button id="btn-pt-strict" style="background:rgba(248, 81, 73, 0.1); border:1px solid var(--err); color:var(--err); cursor:pointer; font-family:var(--sans); padding:2px 8px; border-radius:3px; font-weight:600; font-size:10px; transition:0.2s;" title="Marks all unclicked elements as Excluded (Red)">Exclude Others</button>
              
              <button id="btn-pt-clear" style="background:none; border:none; color:var(--acc); cursor:pointer; font-family:var(--sans);">Clear All</button>
          </div>
      </div>
      
      <div class="pt-grid" id="periodic-table">
          <div class="pt-el c-nm">H</div>
          <div class="pt-spacer-top"></div>
          <div class="pt-el c-ng pt-dis" title="No IMA Minerals">He</div>
          
          <div class="pt-el c-am">Li</div><div class="pt-el c-ae">Be</div>
          <div class="pt-spacer"></div>
          <div class="pt-el c-md">B</div><div class="pt-el c-nm">C</div><div class="pt-el c-nm">N</div><div class="pt-el c-nm">O</div><div class="pt-el c-hl">F</div><div class="pt-el c-ng pt-dis" title="No IMA Minerals">Ne</div>
          
          <div class="pt-el c-am">Na</div><div class="pt-el c-ae">Mg</div>
          <div class="pt-spacer"></div>
          <div class="pt-el c-ptm">Al</div><div class="pt-el c-md">Si</div><div class="pt-el c-nm">P</div><div class="pt-el c-nm">S</div><div class="pt-el c-hl">Cl</div><div class="pt-el c-ng pt-dis" title="No IMA Minerals">Ar</div>
          
          <div class="pt-el c-am">K</div><div class="pt-el c-ae">Ca</div><div class="pt-el c-tm">Sc</div><div class="pt-el c-tm">Ti</div><div class="pt-el c-tm">V</div><div class="pt-el c-tm">Cr</div><div class="pt-el c-tm">Mn</div><div class="pt-el c-tm">Fe</div><div class="pt-el c-tm">Co</div><div class="pt-el c-tm">Ni</div><div class="pt-el c-tm">Cu</div><div class="pt-el c-tm">Zn</div><div class="pt-el c-ptm">Ga</div><div class="pt-el c-md">Ge</div><div class="pt-el c-md">As</div><div class="pt-el c-nm">Se</div><div class="pt-el c-hl">Br</div><div class="pt-el c-ng pt-dis" title="No IMA Minerals">Kr</div>
          
          <div class="pt-el c-am">Rb</div><div class="pt-el c-ae">Sr</div><div class="pt-el c-tm">Y</div><div class="pt-el c-tm">Zr</div><div class="pt-el c-tm">Nb</div><div class="pt-el c-tm">Mo</div><div class="pt-el c-tm pt-dis" title="No IMA Minerals">Tc</div><div class="pt-el c-tm">Ru</div><div class="pt-el c-tm">Rh</div><div class="pt-el c-tm">Pd</div><div class="pt-el c-tm">Ag</div><div class="pt-el c-tm">Cd</div><div class="pt-el c-ptm">In</div><div class="pt-el c-ptm">Sn</div><div class="pt-el c-md">Sb</div><div class="pt-el c-md">Te</div><div class="pt-el c-hl">I</div><div class="pt-el c-ng pt-dis" title="No IMA Minerals">Xe</div>
          
          <div class="pt-el c-am">Cs</div><div class="pt-el c-ae">Ba</div>
          <div class="pt-label">Ln</div>
          <div class="pt-el c-tm">Hf</div><div class="pt-el c-tm">Ta</div><div class="pt-el c-tm">W</div><div class="pt-el c-tm">Re</div><div class="pt-el c-tm">Os</div><div class="pt-el c-tm">Ir</div><div class="pt-el c-tm">Pt</div><div class="pt-el c-tm">Au</div><div class="pt-el c-tm">Hg</div><div class="pt-el c-ptm">Tl</div><div class="pt-el c-ptm">Pb</div><div class="pt-el c-ptm">Bi</div><div class="pt-el c-ptm pt-dis" title="No IMA Minerals">Po</div><div class="pt-el c-hl pt-dis" title="No IMA Minerals">At</div><div class="pt-el c-ng pt-dis" title="No IMA Minerals">Rn</div>
          
          <div class="pt-el c-am pt-dis" title="No IMA Minerals">Fr</div><div class="pt-el c-ae pt-dis" title="No IMA Minerals">Ra</div>
          <div class="pt-label">An</div>
          <div style="grid-column: span 15;"></div>
          
          <div style="grid-column: span 18; height: 6px;"></div>
          
          <div style="grid-column: span 2; display: flex; justify-content: flex-end; padding-right: 6px;" class="pt-label">Ln</div>
          <div class="pt-el c-ln">La</div><div class="pt-el c-ln">Ce</div><div class="pt-el c-ln pt-dis" title="No IMA Minerals">Pr</div><div class="pt-el c-ln">Nd</div><div class="pt-el c-ln pt-dis" title="No IMA Minerals">Pm</div><div class="pt-el c-ln">Sm</div><div class="pt-el c-ln pt-dis" title="No IMA Minerals">Eu</div><div class="pt-el c-ln">Gd</div><div class="pt-el c-ln pt-dis" title="No IMA Minerals">Tb</div><div class="pt-el c-ln">Dy</div><div class="pt-el c-ln pt-dis" title="No IMA Minerals">Ho</div><div class="pt-el c-ln">Er</div><div class="pt-el c-ln pt-dis" title="No IMA Minerals">Tm</div><div class="pt-el c-ln">Yb</div><div class="pt-el c-ln pt-dis" title="No IMA Minerals">Lu</div>
          <div style="grid-column: span 1;"></div>
          
          <div style="grid-column: span 2; display: flex; justify-content: flex-end; padding-right: 6px;" class="pt-label">An</div>
          <div class="pt-el c-an pt-dis" title="No IMA Minerals">Ac</div><div class="pt-el c-an">Th</div><div class="pt-el c-an pt-dis" title="No IMA Minerals">Pa</div><div class="pt-el c-an">U</div>
          <div style="grid-column: span 12;"></div>
      </div>
  </div>
  
  
  <div style="text-align: center; margin: 15px 0 10px; color: var(--txtm); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;">— OR BROWSE BY CATEGORY —</div>

  <div class="fr2" style="margin-bottom: 15px;">
      <div class="fg"><label class="fl">Technique (Category)</label>
        <select class="fs" id="db-category">
          <option value="Raman" selected>Raman Spectroscopy</option>
		      <option value="Raman_Broad">Raman Spectroscopy (Broad Scan)</option>
          <option value="Infrared">Infrared (Absorbance)</option>
          <option value="UV-VIS-NIR">UV-VIS-NIR (Absorbance)</option>
		  <option value="XRD">X-Ray Diffraction (XRD)</option>
        </select>
      </div>
      <div class="fg"><label class="fl">Select Database</label>
        <select class="fs" id="db-class">
          <option value="">-- Choose a Database --</option>
          <option value="RRUFF Database">RRUFF Database (minerals)</option>
		      <option value="ROD Database">ROD Database (minerals)</option>
          <option value="USGS Database">USGS Database (minerals & others)</option>
          <option value="SWGDRUG Database">SWGDRUG Database (drug ingredients)</option>
          <option value="Primpke Database">Primpke Database (microplastics)</option>
          <option value="FLOPP Database">FLOPP Database (plastic particles)</option>
          <option value="FLOPP-e Database">FLOPP-e Database (environmental plastics)</option>
          <option value="Kimmel Database">Kimmel Database (archaeological)</option>
          <option value="PhotochemCAD Database">PhotochemCAD Database (absorption & fluorescence)</option>
          <option value="SLoPP Database">SLoPP Database (plastic particles)</option>
          <option value="SLoPP-E Database">SLoPP-E Database (environmental plastics)</option>
          <option value="PharmExcipients Database">PharmExcipients Database (pharmaceutical excipients)</option>
        </select>
      </div>
  </div>

  <div class="fg"><label class="fl">Available Reference Spectra</label>
    <div class="ss" id="ss-db" style="min-height: 200px;">
      <div style="padding:15px; text-align:center; color:var(--txtm); font-style:italic;">
        Search or select a class to securely fetch minerals.
      </div>
    </div>
  </div>
  <div class="mf">
    <button class="bc" onclick="openDoc('doc-intro')" style="margin-right: auto; border-color: var(--border); color: var(--txtm);" title="View RDRS SpectraLib APA Citation">
      <i class="fa-solid fa-quote-right"></i> How to Cite
    </button>
    <button class="bc" data-ov="ov-db">Cancel</button>
    <button class="ba" id="ap-db">Add to Chart</button>
  </div>
</div></div>


<div class="ov" id="ov-export">
<div class="modal" style="width: 420px;">
  <h3><i class="fa-solid fa-floppy-disk"></i> Export Spectra Data</h3>
  <div class="fg">
    <label class="fl">Select Spectra to Export</label>
    <div class="ss" id="ss-export" style="min-height: 120px;"></div>
  </div>
  
  <div class="fr2">
    <div class="fg">
      <label class="fl">File Format</label>
      <select class="fs" id="exp-fmt">
        <option value="csv" selected>CSV (Comma Separated)</option>
        <option value="txt">TXT (Tab Separated)</option>
		<option value="jdx">JCAMP-DX (.jdx)</option>
      </select>
    </div>
  </div>
  
  <p class="info" style="margin-bottom: 12px; color: var(--warn);">
     <b>Batch Export:</b> Each selected spectrum will be downloaded as an individual file. Filenames will be automatically sanitized for your Operating System.
  </p>
  
  <div class="mf">
    <button class="bc" onclick="openDoc('doc-intro')" style="margin-right: auto; border-color: var(--border); color: var(--txtm);" title="View RDRS SpectraLib APA Citation"><i class="fa-solid fa-quote-right"></i> Cite</button>
    <button class="bc" data-ov="ov-export">Cancel</button>
    <button class="ba" id="ap-export">Export Selected</button>
  </div>
</div>
</div>

<div class="ov" id="ov-match">
<div class="modal" style="width: 600px;">
  <h3>⚲ Match Spectrum to Database <span class="db-badge" id="badge-match-modal"></span> <button class="help-btn" onclick="openDoc('doc-match')"><i class="fa-solid fa-question"></i> Help</button></h3>
  <p class="info" style="margin-bottom: 15px; margin-top: 0;">
    Identify unknown spectra using traditional algorithms or Machine Learning. Note: The AI models are primarily optimized for <b>minerals, rocks, and gemstones</b>, while traditional algorithms (like 1st Derivative) can search our expanded libraries of <b>organics, plastics, and pharmaceuticals</b>.
  </p>
  
  <div class="fg"><label class="fl">Select ONE Spectrum to Match</label>
    <div class="ss" id="ss-match"></div>
  </div>
  
  <div class="fr2">
    <div class="fg"><label class="fl">Database Category</label>
      <select class="fs" id="match-category">
        <option value="Raman" selected>Raman Spectroscopy (Standard)</option>
		    <option value="Raman_Broad">Raman Spectroscopy (Broad Scan)</option>
		    <option value="Raman_ROD">Raman Spectroscopy (Low-Range / ROD)</option>
        <option value="Infrared">Infrared (Absorbance)</option>
        <option value="UV-VIS-NIR">UV-VIS-NIR (Absorbance)</option>
		    <option value="XRD">X-Ray Diffraction (XRD)</option>
      </select>
    </div>
    <div class="fg"><label class="fl">Matching Algorithm</label>
      <select class="fs" id="match-algo">
		<option value="cnn" id="opt-cnn" selected>AI: Machine Learning (Highest Accuracy)</option>
		<option value="cnn_mix" style="color:var(--acc); font-weight:600;">AI: Multi-Phase Mixture (Experimental)</option>
        <option value="derivative">1st Derivative (Ignores Baseline)</option>
        <option value="pearson">Pearson Correlation (Shape)</option>
        <option value="cosine">Cosine Similarity (Intensity)</option>
        <option value="dtw">Shift-Invariant (X-axis drift)</option>
      </select>
    </div>
  </div>

  <div class="fg" id="match-db-class-container" style="display:none; margin-top: 10px; padding: 10px; background: rgba(0,0,0,0.15); border: 1px solid var(--border); border-radius: 4px;">
    <label class="fl" style="color: var(--txtbr);">Target Database (Math Algorithms Only)</label>
    <select class="fs" id="match-db-class">
      <option value="" selected>All Databases (Global Search)</option>
    </select>
  </div>

  <div class="fg" style="margin-top:12px; padding:10px; background:rgba(0,0,0,0.15); border-left:3px solid var(--acc); border-radius:4px;">
    
    <div style="display: flex; align-items: center; justify-content: space-between;">
        <label class="ck" style="font-weight:600; color:var(--txtbr); margin:0;">
          <input type="checkbox" id="match-restrict-range"> Restrict X-Axis Range
        </label>
        <div id="match-range-btn-group" style="display:none; gap: 6px;">
            <button id="btn-match-get-view" class="bc" style="padding: 2px 8px; font-size: 10px; color: var(--acc);" title="Snap to current zoom bounds"><i class="fa-solid fa-crop-simple"></i> Get View</button>
            <button id="btn-match-reset-view" class="bc" style="padding: 2px 8px; font-size: 10px; color: var(--txtm);" title="Clear inputs and use full spectrum"><i class="fa-solid fa-expand"></i> Full</button>
        </div>
    </div>

    <div id="match-range-inputs" class="fr2" style="display:none; margin-top:8px;">
      <div class="fg" style="margin-bottom:0;">
        <input type="number" class="fi" id="match-min-x" placeholder="Start X">
      </div>
      <div class="fg" style="margin-bottom:0;">
        <input type="number" class="fi" id="match-max-x" placeholder="End X">
      </div>
    </div>
    <p class="info" style="margin-top:6px; margin-bottom:0;">Limits the match to a specific region. <b>Automatically disables AI models.</b></p>
  </div>

  <div id="match-unit-info" style="margin-top:-5px; margin-bottom:12px; font-size:10.5px; color:var(--warn); display:flex; align-items:center; gap:5px;">
      <i class="fa-solid fa-triangle-exclamation"></i> <span>Requires X-axis in <b>Raman Shift [cm⁻¹]</b></span>
  </div>
  <div class="fg" id="match-explain-container" style="margin-top:12px; padding:10px; background:rgba(0,0,0,0.15); border-left:3px solid var(--acc); border-radius:4px;">
    <label class="ck" style="font-weight:600; color:var(--txtbr); margin:0;">
      <input type="checkbox" id="match-explain-ai"> Explain AI Decision (1D Grad-CAM)
    </label>
    <p class="info" style="margin-top:6px; margin-bottom:0;">Generates a visual heatmap showing which physical peaks the Neural Network used to make its prediction. <b>(AI Models Only)</b></p>
  </div>
  <div class="fg" id="mix-thresh-container" style="display:none; margin-top:12px; padding:10px; background:rgba(0,0,0,0.15); border:1px solid var(--border); border-radius:4px;">
    <label class="fl">AI Sensitivity (Confidence Threshold)</label>
    <div style="display:flex; gap:10px; align-items:center;">
      <input type="range" id="mix-thresh-slider" min="1" max="50" step="1" value="10" style="flex:1; accent-color:var(--acc);">
      <span id="mix-thresh-val" style="font-family:var(--mono); font-size:12px; color:var(--acc); font-weight:600; width:30px; text-align:right;">10%</span>
    </div>
    <p class="info" style="margin-top:6px; margin-bottom:0;">Lower % = finds more hidden trace minerals, but increases false positives.</p>
  </div>
  
  <div class="mf" style="justify-content: center; margin-bottom: 15px; padding-top: 0; border-top: none;">
     <button class="ba" id="btn-run-match" style="width: 100%;">🔍 Find Best Matches</button>
  </div>
  
  <div class="fg"><label class="fl">Match Results</label>
    <div class="ss" id="ss-match-results" style="min-height: 200px;">
      <div style="padding:15px; text-align:center; color:var(--txtm); font-style:italic;">
        Select a spectrum above and click "Find Best Matches" to query the server.
      </div>
    </div>
  </div>
  
  <div style="border-top: 1px solid var(--border); margin-top: 15px; padding-top: 15px;">
      <p class="info" style="margin-top:0; margin-bottom:8px;">Dealing with a complex mixture? Use the interactive peak-by-peak residual search to identify overlapping compounds.</p>
      <button class="ba" id="btn-launch-multimatch" style="width: 100%;"><i class="fa-solid fa-layer-group"></i> Launch Interactive Multi-Phase Match</button>
  </div>

  <div class="mf">
	<button class="bc" onclick="openDoc('doc-intro')" style="margin-right: auto; border-color: var(--border); color: var(--txtm);" title="View RDRS SpectraLib APA Citation">
      <i class="fa-solid fa-quote-right"></i> How to Cite
    </button>
    <button class="bc" data-ov="ov-match">Cancel</button>
    <button class="ba" id="ap-match">Add Selected to Chart</button>
  </div>
</div></div>


<div class="ov" id="ov-galaxy">
<div class="modal" style="width: 500px;">
  
  <h3 style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
    <span><i class="fa-solid fa-circle-nodes"></i> Spectra Galaxy Map</span>
    <button class="help-btn" onclick="openDoc('doc-galaxy')"><i class="fa-solid fa-question"></i> Help</button>
  </h3>
  
  <p class="info" style="margin-bottom:15px; margin-top:0;">Explore the database as an interactive 2D/3D map. Select a spectrum below to project it as a "You Are Here" marker.</p>
  
  <div class="fg"><label class="fl">Target Spectrum to Project (Optional)</label>
    <div class="ss" id="ss-galaxy" style="max-height: 120px;"></div>
  </div>

  <div class="fg">
        <label class="fl">Database Category</label>
        <select class="fs" id="galaxy-category">
            <option value="Raman" selected>Raman Spectroscopy (Standard)</option>
            <option value="Raman_Broad">Raman Spectroscopy (Broad Scan)</option>
            <option value="Raman_ROD">Raman Spectroscopy (Low-Range / ROD)</option>
            <option value="Infrared">Infrared (FTIR)</option>
            <option value="XRD">X-Ray Diffraction (XRD)</option>
        </select>
    </div>

  <div class="mf">
    <button class="bc" data-ov="ov-galaxy">Cancel</button>
    <button class="ba" id="ap-galaxy" style="background:#bc8cff; color:#000;">Launch Galaxy</button>
  </div>
</div>
</div>


<div class="ov" id="ov-sub">
<div class="modal" style="width: 500px;">
  <h3><i class="fa-solid fa-minus"></i> Spectral Stripping (Subtract) <button class="help-btn" onclick="openDoc('doc-sub')"><i class="fa-solid fa-question"></i> Help</button></h3>
  <p class="info" style="margin-bottom:15px;">Remove a reference mineral phase from a mixed sample.</p>
  
  <div class="fg">
    <label class="fl">Minuend (Mixed Sample)</label>
    <select class="fs" id="sub-minuend"></select>
  </div>
  
  <div class="fg">
    <label class="fl">Subtrahend (Pure Reference to Strip)</label>
    <select class="fs" id="sub-subtrahend"></select>
  </div>
  
  <div class="fg">
    <label class="fl">Subtrahend Multiplier (Scale factor)</label>
    <div style="display:flex; gap:10px; align-items:center;">
      <input type="range" id="sub-fac-slider" min="0.01" max="20" step="0.01" value="1.0" style="flex:1; accent-color:var(--acc);">
      <input type="number" class="fi" id="sub-fac" value="1.0" step="0.01" min="0.01" style="width:70px;">
    </div>
    <p class="info">Scales the reference before subtracting. Example: 0.5 removes 50% of the reference intensity.</p>
  </div>
  
  <div class="fg" style="margin-top:12px; display:flex; gap: 15px; align-items:center;">
    <label class="ck" title="Prevents negative spikes by flattening over-subtracted areas">
      <input type="checkbox" id="sub-clamp" checked> Clamp negative peaks (Flatten)
    </label>
    <label class="ck">
      <input type="checkbox" id="sub-keep" checked> Keep original spectra
    </label>
  </div>
  <div class="mf">
    <button class="bc" onclick="openDoc('doc-intro')" style="margin-right: auto; border-color: var(--border); color: var(--txtm);" title="View RDRS SpectraLib APA Citation"><i class="fa-solid fa-quote-right"></i> Cite</button>
    <button class="bc" data-ov="ov-sub">Cancel</button>
    <button class="ba" id="ap-sub">Subtract</button>
  </div>
</div></div>

<div class="ov" id="ov-lcf">
<div class="modal" style="width: 500px;">
  <h3><i class="fa-solid fa-layer-group"></i> Linear Combination Fitting (LCF) <button class="help-btn" onclick="openDoc('doc-lcf')"><i class="fa-solid fa-question"></i> Help</button></h3>
  <p class="info" style="margin-bottom:15px; color:var(--warn);"><b>Note:</b> For accurate percentages, ensure your Target and References are fully baseline-corrected first!</p>

  <div class="fg">
    <label class="fl">Target (Mixed Sample)</label>
    <select class="fs" id="lcf-target"></select>
  </div>

  <div class="fg">
    <label class="fl">Select Reference Components</label>
    <div class="ss" id="ss-lcf" style="min-height: 120px;"></div>
  </div>
  <p class="info">Select 2 to 5 pure reference spectra you suspect are hiding inside the mixture.</p>

  <div class="mf">
    <button class="bc" onclick="openDoc('doc-intro')" style="margin-right: auto; border-color: var(--border); color: var(--txtm);" title="View RDRS SpectraLib APA Citation"><i class="fa-solid fa-quote-right"></i> Cite</button>
    <button class="bc" data-ov="ov-lcf">Cancel</button>
    <button class="ba" id="ap-lcf">Run Unmixing</button>
  </div>
</div></div>

<div class="ov" id="ov-mcr">
<div class="modal" style="width: 500px;">
  <h3><i class="fa-solid fa-eye-slash"></i> MCR-ALS Blind Unmixing <button class="help-btn" onclick="openDoc('doc-mcr')"><i class="fa-solid fa-question"></i> Help</button></h3>
  <p class="info" style="margin-bottom:15px;">Extract pure spectral signatures from a dataset without using a reference database.</p>

  <div class="fg">
    <label class="fl">Select Mixture Spectra (Min. 3 recommended)</label>
    <div class="ss" id="ss-mcr" style="min-height: 120px;"></div>
  </div>
  
  <div class="fg">
    <label class="fl">Number of Components to Extract</label>
    <input type="number" class="fi" id="mcr-n" value="2" min="1" max="10" style="width: 100px;">
  </div>

  <div class="fg" style="margin-top:12px; padding:10px; background:rgba(0,0,0,0.15); border-left:3px solid var(--acc); border-radius:4px;">
    <label class="ck" style="font-weight:600; color:var(--txtbr); margin:0;">
      <input type="checkbox" id="mcr-simplisma" checked> Use SIMPLISMA initial guess (recommended)
    </label>
    <p class="info" style="margin-top:6px; margin-bottom:0;">SIMPLISMA (which stands for SIMPLe-to-use Interactive Self-modeling Mixture Analysis) is one of the most famous and effective chemometric algorithms ever developed for spectroscopy. Finds the purest physical wavenumbers to seed the algorithm, drastically reducing mathematical artifacts compared to a blind guess.</p>
  </div>

  <div class="mf">
    <button class="bc" data-ov="ov-mcr">Cancel</button>
    <button class="ba" id="ap-mcr">Run Extraction</button>
  </div>
</div></div>

<div class="ov" id="ov-snr">
<div class="modal" style="width: 480px;">
  <h3><i class="fa-solid fa-tower-broadcast"></i> Evaluate & Smart Prune <button class="help-btn" onclick="openDoc('doc-snr')"><i class="fa-solid fa-question"></i> Help</button></h3>
  
  <div class="fg">
    <label class="fl">Apply to Spectra</label>
    <div class="ss" id="ss-snr" style="min-height: 80px;"></div>
  </div>

  <div class="tabs" style="margin-top: 12px;">
    <button class="tb on" data-tab="snr-eval">Evaluate SNR (Highlight)</button>
    <button class="tb" data-tab="snr-prune">Smart Prune (Top Extractor)</button>
  </div>

  <div class="tc on" id="snr-eval">
      <p class="info" style="margin-bottom:15px;">Evaluate the Signal-to-Noise Ratio (SNR) and apply colored quality badges to the sidebar.</p>
      <div class="fr2">
        <div class="fg">
          <label class="fl">Good Quality (Green) &ge;</label>
          <input type="number" class="fi" id="snr-good" value="100" min="1">
        </div>
        <div class="fg">
          <label class="fl">Poor Quality (Red) &lt;</label>
          <input type="number" class="fi" id="snr-poor" value="50" min="1">
        </div>
      </div>
      <div class="mf" style="margin-top: 10px;">
        <button class="bc" data-ov="ov-snr">Cancel</button>
        <button class="ba" id="ap-snr">Evaluate SNR</button>
      </div>
  </div>

  <div class="tc" id="snr-prune">
      <p class="info" style="margin-bottom:15px;">Automatically identifies the most pristine, representative spectra in a massive dataset and hides/folders the rest.</p>
      
      <div class="fr2" style="align-items: center;">
        <div class="fg" style="margin-bottom: 0;">
          <label class="fl">Keep Top 'N' Spectra</label>
          <input type="number" class="fi" id="prune-keep-n" value="5" min="1" step="1">
        </div>
        <div class="fg" style="margin-bottom: 0;">
          <label class="ck" style="font-weight: 600; color: var(--txtbr);">
            <input type="checkbox" id="prune-folder-trash" checked> Move rejected to folder
          </label>
        </div>
      </div>
      
      <div class="mf" style="margin-top: 15px;">
        <button class="bc" data-ov="ov-snr">Cancel</button>
        <button class="ba" id="ap-prune"><i class="fa-solid fa-filter"></i> Extract Top Spectra</button>
      </div>
  </div>

</div>
</div>

<div class="ov" id="ov-area">
<div class="modal">
  <h3><i class="fa-solid fa-chart-area"></i> Integrate Peak Area <button class="help-btn" onclick="openDoc('doc-area')"><i class="fa-solid fa-question"></i> Help</button></h3>
  <div class="fg"><label class="fl">Apply to Spectra</label>
    <div class="ss" id="ss-area"></div></div>
    <div class="fr2">
    <div class="fg"><label class="fl">X Start (Left Bound)</label>
      <input type="number" class="fi" id="area-xs" placeholder="e.g. 450"></div>
    <div class="fg"><label class="fl">X End (Right Bound)</label>
      <input type="number" class="fi" id="area-xe" placeholder="e.g. 550"></div>
  </div>
  
  <div class="fg" style="margin-top: 10px; margin-bottom: 0;">
      <div style="display: flex; gap: 5px;">
        <button class="cb" id="b-area-pick" style="flex: 1;"><i class="fa-solid fa-hand-pointer"></i> Visually Pick Peak</button>
        <button class="bc warn" id="b-area-clear" style="padding: 4px 8px; display: none;" title="Clear bounds"><i class="fa-solid fa-trash"></i></button>
      </div>
      <div id="area-pick-readout" style="font-size:11px; color:var(--txtm); margin-top:6px; text-align:center; min-height:16px;"></div>
  </div>

  <p class="info" style="line-height:1.4; margin-top: 6px;">Calculates the Total Area (down to Y=0) and the Net Area (above a local baseline connecting the bounds) using the Trapezoidal Rule.</p>
    <div class="mf">
    <button class="bc" onclick="openDoc('doc-intro')" style="margin-right: auto; border-color: var(--border); color: var(--txtm);" title="View RDRS SpectraLib APA Citation"><i class="fa-solid fa-quote-right"></i> Cite</button>
    <button class="bc" data-ov="ov-area">Cancel</button>
    <button class="ba" id="ap-area">Calculate Area</button>
  </div>
</div></div>

<div class="ov" id="ov-deriv">
<div class="modal">
  <h3><i class="fa-solid fa-chart-line"></i> Derivative Spectroscopy <button class="help-btn" onclick="openDoc('doc-deriv')"><i class="fa-solid fa-question"></i> Help</button></h3>
  <div class="fg"><label class="fl">Apply to Spectra</label>
    <div class="ss" id="ss-deriv"></div></div>
  <div class="fg"><label class="fl">Derivative Order</label>
    <select class="fs" id="drv-order">
      <option value="1">1st Derivative (Slope / Inflection)</option>
      <option value="2">2nd Derivative (Hidden Peak Resolution)</option>
    </select>
  </div>
  <p class="info" style="color:var(--warn); margin-top:8px;">⚠️ <b>Note:</b> Derivatives amplify noise exponentially. It is highly recommended to apply a Savitzky-Golay Smooth to your spectra before deriving.</p>
  <div class="fg" style="margin-top:12px"><label class="ck"><input type="checkbox" id="drv-keep" checked> Keep original spectra</label></div>
  <div class="mf">
    <button class="bc" onclick="openDoc('doc-intro')" style="margin-right: auto; border-color: var(--border); color: var(--txtm);" title="View RDRS SpectraLib APA Citation"><i class="fa-solid fa-quote-right"></i> Cite</button>
    <button class="bc" data-ov="ov-deriv">Cancel</button>
    <button class="ba" id="ap-deriv">Calculate</button>
  </div>
</div></div>

<div class="ov" id="ov-fit">
<div class="modal">
  <h3><i class="fa-solid fa-chart-bar"></i> Peak Curve Fitting (Deconvolution) <button class="help-btn" onclick="openDoc('doc-fit')"><i class="fa-solid fa-question"></i> Help</button></h3>
  <div class="fg"><label class="fl">Apply to ONE Spectrum</label>
    <div class="ss" id="ss-fit"></div></div>
  <div class="fr2">
    <div class="fg"><label class="fl">X Start (Isolate Cluster)</label>
      <input type="number" class="fi" id="fit-xs" placeholder="e.g. 400"></div>
    <div class="fg"><label class="fl">X End (Isolate Cluster)</label>
      <input type="number" class="fi" id="fit-xe" placeholder="e.g. 600"></div>
  </div>
  <div class="fr2" style="margin-top:5px;">
    <div class="fg" style="margin-bottom: 0;"><label class="fl">Number of Peaks</label>
      <select class="fs" id="fit-n">
        <option value="1">1 Peak</option>
        <option value="2" selected>2 Peaks</option>
        <option value="3">3 Peaks</option>
        <option value="4">4 Peaks</option>
        <option value="5">5 Peaks</option>
        <option value="6">6 Peaks</option>
        <option value="7">7 Peaks</option>
        <option value="8">8 Peaks</option>
        <option value="9">9 Peaks</option>
        <option value="10">10 Peaks</option>
      </select>
     </div>
     <div class="fg" style="margin-bottom: 0;"><label class="fl">Profile Shape</label>
      <select class="fs" id="fit-shape">
        <option value="gaussian" selected>Gaussian (Standard)</option>
        <option value="lorentzian">Lorentzian (Lifetime)</option>
        <option value="pseudo_voigt">Pseudo-Voigt (Mixed)</option>
        <option value="asym_voigt">Asymmetric Voigt (Split)</option>
      </select>
     </div>
  </div>
  
  <div class="fg" style="margin-top: 10px; margin-bottom: 0;">
      <div style="display: flex; gap: 5px;">
        <button class="cb" id="b-fit-pick" style="flex: 1;"><i class="fa-solid fa-hand-pointer"></i> Visually Pick Centers</button>
        <button class="bc warn" id="b-fit-clear" style="padding: 4px 8px; display: none;" title="Clear picked centers"><i class="fa-solid fa-trash"></i></button>
      </div>
      <div id="fit-pick-readout" style="font-size:11px; color:var(--txtm); margin-top:6px; text-align:center; min-height:16px;"></div>
  </div>
  
  <div class="sec-hdr collapsible-hdr" data-target="fit-adv" style="margin-top:12px; margin-bottom:6px; cursor:pointer;">
    <span><i class="fa-solid fa-sliders"></i> Advanced Solver Parameters</span> <i class="fa-solid fa-chevron-down toggle-icon"></i>
  </div>
  <div id="fit-adv" class="collapsible-content collapsed" style="background: rgba(0,0,0,0.1); padding: 8px; border: 1px solid var(--border); border-radius: 4px;">
    <div class="fr2">
      <div class="fg" style="margin-bottom:0;"><label class="fl">Max Iterations</label>
      <input type="number" class="fi" id="fit-iter" value="10000" step="1000"></div>
      <div class="fg" style="margin-bottom:0;"><label class="fl">Tolerance (ftol/xtol)</label>
      <input type="number" class="fi" id="fit-tol" value="1e-8" step="1e-9"></div>
    </div>
    <p class="info" style="margin-top:6px; margin-bottom:0;">Increase iterations or lower tolerance if complex peaks fail to converge.</p>
  </div>
  
  <p class="info" style="margin-top: 10px;">Uses Levenberg-Marquardt to resolve overlapping peak profiles.</p>
  <div class="mf">
    <button class="bc" onclick="openDoc('doc-intro')" style="margin-right: auto; border-color: var(--border); color: var(--txtm);" title="View RDRS SpectraLib APA Citation"><i class="fa-solid fa-quote-right"></i> Cite</button>
    <button class="bc" data-ov="ov-fit">Cancel</button>
    <button class="ba" id="ap-fit">Run Optimization</button>
  </div>
</div></div>

<div class="ov" id="ov-despike">
<div class="modal">
  <h3><i class="fa-solid fa-wand-magic-sparkles"></i> Cosmic Ray Removal <button class="help-btn" onclick="openDoc('doc-despike')"><i class="fa-solid fa-question"></i> Help</button></h3>
  <div class="fg"><label class="fl">Apply to ONE Spectrum</label>
    <div class="ss" id="ss-despike"></div></div>
	
  <div class="fg"><label class="fl">Algorithm</label>
    <select class="fs" id="ds-algo">
      <option value="derivative" selected>Derivative (Gradient) - Best for Sharp Rays</option>
      <option value="zscore">Z-Score (Median Filter) - Best for Broad Artifacts</option>
    </select>
  </div>
  <div class="fr2">
    <div class="fg"><label class="fl">Sensitivity (Threshold)</label>
      <input type="number" class="fi" id="ds-sens" value="5" step="0.5" title="Lower = more aggressive"></div>
    <div class="fg"><label class="fl">Spike Width (Points)</label>
      <input type="number" class="fi" id="ds-width" value="1" min="1" max="5" title="Half-window for filter/dilation"></div>
  </div>
  
  <p class="info">Uses a median filter and Z-score thresholding to identify and remove artificially sharp cosmic ray artifacts.</p>
  <div class="fr2" style="margin-top:8px">
    <div class="fg"><label class="ck" style="color:var(--acc);"><input type="checkbox" id="ds-preview" checked> <i class="fa-solid fa-circle"></i> Live Preview</label></div>
    <div class="fg"><label class="ck"><input type="checkbox" id="ds-keep" checked> Keep original spectrum</label></div>
  </div>
  <div class="mf">
    <button class="bc" onclick="openDoc('doc-intro')" style="margin-right: auto; border-color: var(--border); color: var(--txtm);" title="View RDRS SpectraLib APA Citation"><i class="fa-solid fa-quote-right"></i> Cite</button>
    <button class="bc" data-ov="ov-despike">Cancel</button>
    <button class="ba" id="ap-despike">Remove Spikes</button>
  </div>
</div></div>

<div class="ov" id="ov-align">
<div class="modal" style="width: 480px;">
  <h3><i class="fa-solid fa-align-center"></i> Spectral Alignment (Cross-Correlation) <button class="help-btn" onclick="openDoc('doc-align')"><i class="fa-solid fa-question"></i> Help</button></h3>
  
  <div class="fg"><label class="fl">Target Spectra to Align</label>
    <div class="ss" id="ss-align"></div>
  </div>
  
  <div class="fg"><label class="fl">Reference Spectrum (The Anchor)</label>
    <select class="fs" id="align-ref"></select>
  </div>

  <div class="fg">
    <label class="fl">Maximum Allowed Shift (Data Points)</label>
    <input type="number" class="fi" id="align-max-shift" value="50" min="1" max="500">
    <p class="info" style="margin-top: 4px;">Restricts the algorithm from wildly shifting spectra if no logical match is found. 50 points is usually enough to fix thermal laser drift.</p>
  </div>
  
  <div class="fg" style="margin-top:12px"><label class="ck"><input type="checkbox" id="align-keep" checked> Keep original spectra</label></div>
  <div class="mf">
    <button class="bc" data-ov="ov-align">Cancel</button>
    <button class="ba" id="ap-align">Align Spectra</button>
  </div>
</div>
</div>

<div class="ov" id="ov-avg">
<div class="modal">
  <h3><i class="fa-solid fa-plus-minus"></i> Average Spectra <button class="help-btn" onclick="openDoc('doc-avg')"><i class="fa-solid fa-question"></i> Help</button></h3>
  <div class="fg"><label class="fl">Select Spectra to Average</label>
    <div class="ss" id="ss-avg"></div></div>
  <p class="info">Calculates the mean intensity across all selected spectra. If X-axes do not perfectly align, they will be automatically interpolated to match the first selected spectrum.</p>
  <div class="fr2" style="margin-top:12px">
    <div class="fg"><label class="ck" title="Draws a shaded area representing variance"><input type="checkbox" id="avg-std" checked> Draw ±1 Std. Dev. Envelope</label></div>
    <div class="fg"><label class="ck"><input type="checkbox" id="avg-keep" checked> Keep original spectra</label></div>
  </div>
  <div class="mf">
    <button class="bc" onclick="openDoc('doc-intro')" style="margin-right: auto; border-color: var(--border); color: var(--txtm);" title="View RDRS SpectraLib APA Citation"><i class="fa-solid fa-quote-right"></i> Cite</button>
    <button class="bc" data-ov="ov-avg">Cancel</button>
    <button class="ba" id="ap-avg">Calculate Mean</button>
  </div>
</div></div>

<div class="ov" id="ov-pca">
<div class="modal" style="width: 500px;">
  <h3><i class="fa-solid fa-project-diagram"></i> Exploratory Cluster Analysis <button class="help-btn" onclick="openDoc('doc-pca')"><i class="fa-solid fa-question"></i> Help</button></h3>
  
  <div class="fg"><label class="fl">Select Spectra for Clustering (Min. 3)</label>
    <div class="ss" id="ss-pca"></div>
  </div>
  
  <div class="fg">
    <label class="fl">Algorithm</label>
    <select class="fs" id="cluster-algo">
        <option value="pca" selected>PCA (Linear / Global Variance)</option>
        <option value="tsne">t-SNE (Non-Linear / Local Clusters)</option>
        <option value="umap">UMAP (Non-Linear / Hybrid)</option>
    </select>
  </div>
  
  <p class="info" style="margin-top: 8px;">Reduces complex spectral arrays into a 2D scatter plot, grouping statistically similar spectra together. Highly recommended for mapping datasets or finding outliers.</p>
  
  <div class="mf">
    <button class="bc" data-ov="ov-pca">Cancel</button>
    <button class="ba" id="ap-pca">Compute Clusters</button>
  </div>
</div></div>

<div class="ov" id="ov-hca">
<div class="modal" style="width: 500px;">
  <h3><i class="fa-solid fa-folder-tree"></i> Hierarchical Cluster Analysis <button class="help-btn" onclick="openDoc('doc-hca')"><i class="fa-solid fa-question"></i> Help</button></h3>
  
  <div class="fg"><label class="fl">Select Spectra for Clustering (Min. 3)</label>
    <div class="ss" id="ss-hca"></div>
  </div>
  
  <div class="fg" style="margin-top:12px; padding:8px; background:rgba(0,0,0,0.15); border-left:3px solid var(--acc); border-radius:4px;">
    <label class="ck" style="font-weight:600; color:var(--txtbr); margin:0;">
      <input type="checkbox" id="hca-inc-heatmap" checked> Include Distance Matrix Heatmap
    </label>
  </div>
  
  <p class="info" style="margin-top:10px;">HCA constructs a "Family Tree" showing exactly which spectra are most chemically identical and at what mathematical distance they diverge into distinct phases.</p>
  
  <div class="mf">
    <button class="bc" data-ov="ov-hca">Cancel</button>
    <button class="ba" id="ap-hca">Build Tree</button>
  </div>
</div></div>

<div class="ov" id="ov-chemo">
<div class="modal" style="width: 600px;">
  <h3><i class="fa-solid fa-brain"></i> Chemometric Modeling (PLS-R / SVM / LDA) <button class="help-btn" onclick="openDoc('doc-chemo')"><i class="fa-solid fa-question"></i> Help</button></h3>
  <p class="info" style="margin-bottom:12px;">Type a known value/class next to a spectrum to <b>Train</b> the model. Leave it completely blank to treat it as an <b>Unknown</b> to be predicted.</p>
  
  <div class="fg">
    <label class="fl">Algorithm Type</label>
    <select class="fs" id="chemo-task">
      <option value="pls_r" selected>PLS Regression (Predict continuous numbers, e.g., % Concentration)</option>
      <option value="svm">SVM Classification (Predict categories, e.g., "Quartz" vs "Calcite")</option>
      <option value="lda">LDA Discriminant Analysis (Supervised 2D Scatter Plot)</option>
    </select>
  </div>

  <div class="fg" id="chemo-pls-params">
    <label class="fl">PLS Components (Latent Variables)</label>
    <input type="number" class="fi" id="pls-comp" value="3" min="1" max="10" style="width: 100px;">
    <p class="info" style="margin-top: 4px;">Controls model complexity. Too high = overfitting noise. Too low = underfitting data.</p>
  </div>

  <div class="fg">
    <label class="fl">Dataset Assignment</label>
    <div class="ss" id="list-chemo" style="max-height: 250px; overflow-y: auto; padding: 5px;"></div>
  </div>

  <div class="mf">
    <button class="bc" data-ov="ov-chemo">Cancel</button>
    <button class="ba" id="ap-chemo">Train Model & Predict</button>
  </div>
</div></div>

<div class="ov" id="ov-calib">
<div class="modal" style="width: 550px;">
  <h3><i class="fa-solid fa-ruler-combined"></i> Univariate Calibration (Beer's Law) <button class="help-btn" onclick="openDoc('doc-calib')"><i class="fa-solid fa-question"></i> Help</button></h3>
  <p class="info" style="margin-bottom:15px;">Build a standard linear calibration curve using a specific peak. <b>Note:</b> You must run the "Find Peaks" tool first so the algorithm can track shifting peaks!</p>
  
  <div class="fr3">
    <div class="fg">
      <label class="fl">Target Peak (X)</label>
      <input type="number" class="fi" id="calib-cx" placeholder="e.g. 464.5">
    </div>
    <div class="fg">
      <label class="fl">Tolerance (± X)</label>
      <input type="number" class="fi" id="calib-tol" value="15" title="Search window for shifting peaks">
    </div>
    <div class="fg">
      <label class="fl">Metric</label>
      <select class="fs" id="calib-metric">
        <option value="y" selected>Peak Height (Intensity)</option>
        <option value="area">Peak Area</option>
        <option value="fwhm">FWHM (Width)</option>
      </select>
    </div>
  </div>
  
  <div class="fg" style="margin-top: 5px; margin-bottom: 15px;">
      <div style="display: flex; gap: 5px;">
        <button class="cb" id="b-calib-pick" style="flex: 1;"><i class="fa-solid fa-hand-pointer"></i> Visually Pick Target Peak</button>
        <button class="bc warn" id="b-calib-clear" style="padding: 4px 8px; display: none;" title="Clear"><i class="fa-solid fa-trash"></i></button>
      </div>
  </div>

  <div class="fg">
    <label class="fl">Dataset Assignment</label>
    <div style="font-size:10.5px; color:var(--txtm); margin-bottom:6px;">Type known concentrations below. Leave blank to treat as an unknown to be predicted.</div>
    <div class="ss" id="list-calib" style="max-height: 200px; overflow-y: auto; padding: 5px;"></div>
  </div>

  <div class="mf">
    <button class="bc" data-ov="ov-calib">Cancel</button>
    <button class="ba" id="ap-calib">Build curve & Predict</button>
  </div>
</div></div>

<div class="ov" id="ov-kinetics">
<div class="modal" style="width: 550px;">
  <h3><i class="fa-solid fa-stopwatch"></i> Sequential Kinetic Curve Fitting <button class="help-btn" onclick="openDoc('doc-kinetics')"><i class="fa-solid fa-question"></i> Help</button></h3>
  <p class="info" style="margin-bottom:15px;">Analyze time-series reactions by tracking peak intensity or area over time to calculate rate constants and half-lives.</p>
  
  <div class="fg">
    <label class="fl">Apply to Spectra</label>
    <div class="ss" id="ss-kinetics" style="min-height: 80px;"></div>
  </div>

  <div class="fr3">
    <div class="fg">
      <label class="fl">Target Peak (X)</label>
      <input type="number" class="fi" id="kin-cx" placeholder="e.g. 464.5">
    </div>
    <div class="fg">
      <label class="fl">Tolerance (± X)</label>
      <input type="number" class="fi" id="kin-tol" value="15" title="Search window for shifting peaks">
    </div>
    <div class="fg">
      <label class="fl">Metric</label>
      <select class="fs" id="kin-metric">
        <option value="y" selected>Peak Height</option>
        <option value="area">Peak Area</option>
      </select>
    </div>
  </div>
  
  <div class="fg" style="margin-top: 5px; margin-bottom: 15px;">
      <div style="display: flex; gap: 5px;">
        <button class="cb" id="b-kin-pick" style="flex: 1;"><i class="fa-solid fa-hand-pointer"></i> Visually Pick Target Peak</button>
        <button class="bc warn" id="b-kin-clear" style="padding: 4px 8px; display: none;" title="Clear"><i class="fa-solid fa-trash"></i></button>
      </div>
  </div>

  <div class="fr2">
    <div class="fg">
      <label class="fl">Time Assignment</label>
      <select class="fs" id="kin-time-mode">
        <option value="auto" selected>Auto-Extract from Name</option>
        <option value="interval">Fixed Interval (Seconds)</option>
      </select>
    </div>
    <div class="fg" id="kin-interval-wrap" style="display:none;">
      <label class="fl">Time between spectra</label>
      <input type="number" class="fi" id="kin-interval" value="10" min="1" step="1">
    </div>
  </div>
  <p class="info" style="margin-top: 0; margin-bottom: 15px;">Auto-Extract looks for patterns like "10s", "15min", or "2hr" in the spectrum name.</p>

  <div class="fg">
    <label class="fl">Kinetic Reaction Order</label>
    <select class="fs" id="kin-order">
      <option value="0">Zero-Order (Linear Rate)</option>
      <option value="1" selected>First-Order (Exponential Decay/Growth)</option>
      <option value="2">Second-Order (Inverse Rate)</option>
    </select>
  </div>

  <div class="mf" style="margin-top: 15px;">
    <button class="bc" data-ov="ov-kinetics">Cancel</button>
    <button class="ba" id="ap-kinetics">Compute Kinetics</button>
  </div>
</div></div>

<div class="ov" id="ov-color">
<div class="modal" style="width: 480px;">
  <h3><i class="fa-solid fa-palette"></i> Colorimetric Analysis (CIE 1931) <button class="help-btn" onclick="openDoc('doc-color')"><i class="fa-solid fa-question"></i> Help</button></h3>
  <div class="fg"><label class="fl">Apply to Spectra</label>
    <div class="ss" id="ss-color"></div></div>
    
  <div class="fr2">
    <div class="fg"><label class="fl">X Start (Emission Range)</label>
      <input type="number" class="fi" id="color-xs" placeholder="e.g. 400"></div>
    <div class="fg"><label class="fl">X End (Emission Range)</label>
      <input type="number" class="fi" id="color-xe" placeholder="e.g. 800"></div>
  </div>
  
  <p class="info" style="color:var(--warn); margin-top: 8px; margin-bottom: 10px;">⚠️ <b>Note:</b> Your X-axis must be set to <b>Wavelength [nm]</b>.</p>
  <p class="info">Calculates the CIE 1931 (x, y) coordinates from an emission spectrum. Use the X bounds to isolate the material's emission and exclude the laser/LED excitation peaks!</p>
  
  <div class="mf">
    <button class="bc" onclick="openDoc('doc-intro')" style="margin-right: auto; border-color: var(--border); color: var(--txtm);" title="View RDRS SpectraLib APA Citation"><i class="fa-solid fa-quote-right"></i> Cite</button>
    <button class="bc" data-ov="ov-color">Cancel</button>
    <button class="ba" id="ap-color">Calculate Color</button>
  </div>
</div></div>

<div class="ov" id="ov-macro">
<div class="modal" style="width: 550px;">
  <h3><i class="fa-solid fa-bolt"></i> Batch Processing Pipeline <button class="help-btn" onclick="openDoc('doc-macro')"><i class="fa-solid fa-question"></i> Help</button></h3>
  <div class="fg"><label class="fl">Apply to Spectra</label>
    <div class="ss" id="ss-macro" style="max-height: 80px;"></div>
  </div>
  <p class="info" style="margin-bottom:12px;">Execute multiple processing steps in exact mathematical sequence.</p>
  
  <div style="border:1px solid var(--border); border-radius:4px; padding:10px; margin-bottom:8px; background: rgba(0,0,0,0.2);">
    <label class="ck" style="font-weight:600; color:var(--txtbr);"><input type="checkbox" id="mac-ck-cut"> 1. Cut X-Range</label>
    <div class="fr2" style="margin-top:8px; padding-left:24px;">
      <input type="number" class="fi" id="mac-cut-xs" placeholder="X Start (e.g. 400)">
      <input type="number" class="fi" id="mac-cut-xe" placeholder="X End (e.g. 1800)">
    </div>
  </div>

  <div style="border:1px solid var(--border); border-radius:4px; padding:10px; margin-bottom:8px; background: rgba(0,0,0,0.2);">
    <label class="ck" style="font-weight:600; color:var(--txtbr);"><input type="checkbox" id="mac-ck-sm"> 2. Smooth</label>
    <div class="fr3" style="margin-top:8px; padding-left:24px;">
      <select class="fs" id="mac-sm-type">
        <option value="sg">Savitzky-Golay</option>
        <option value="ma">Moving Average</option>
      </select>
      <input type="number" class="fi" id="mac-sm-hw" value="5" title="Half Window">
      <input type="number" class="fi" id="mac-sm-ord" value="3" title="SG Poly Order">
    </div>
  </div>

  <div style="border:1px solid var(--border); border-radius:4px; padding:10px; margin-bottom:8px; background: rgba(0,0,0,0.2);">
    <label class="ck" style="font-weight:600; color:var(--txtbr);"><input type="checkbox" id="mac-ck-bl"> 3. Auto Baseline</label>
    <div class="fr3" style="margin-top:8px; padding-left:24px;">
      <select class="fs" id="mac-bl-type">
        <option value="adap">Adaptive (SNIP)</option>
        <option value="scat">Scattering (Poly)</option>
        <option value="rolling">Rolling Ball</option>
        <option value="als">ALS (Asymmetric)</option> </select>
      <input type="number" class="fi" id="mac-bl-p1" value="100000" title="Param 1: Iters(SNIP) / Poly(Scat) / Radius(Roll) / λ(ALS)">
      <input type="number" class="fi" id="mac-bl-p2" value="0.01" title="Param 2: Offset(SNIP/Scat) / p(ALS)">
      <input type="number" class="fi" id="mac-bl-p3" value="10" title="Param 3: Iters(ALS only)" style="display:none;" id="mac-bl-p3-container">
    </div>
  </div>

  <div style="border:1px solid var(--border); border-radius:4px; padding:10px; margin-bottom:8px; background: rgba(0,0,0,0.2);">
    <label class="ck" style="font-weight:600; color:var(--txtbr);"><input type="checkbox" id="mac-ck-nm"> 4. Normalize</label>
    <div style="margin-top:8px; padding-left:24px;">
      <select class="fs" id="mac-nm-mode">
        <option value="01">0 → 1 (Min-Max)</option>
        <option value="0100">0 → 100 % (Min-Max)</option>
        <option value="max">Divide by Max</option>
      </select>
    </div>
  </div>

  <div class="fg" style="margin-top:12px"><label class="ck"><input type="checkbox" id="mac-keep" checked> Keep original spectra</label></div>
  <div class="mf">
    <button class="bc" onclick="openDoc('doc-intro')" style="margin-right: auto; border-color: var(--border); color: var(--txtm);" title="View RDRS SpectraLib APA Citation"><i class="fa-solid fa-quote-right"></i> Cite</button>
    <button class="bc" data-ov="ov-macro">Cancel</button>
    <button class="ba" id="ap-macro" style="background:#22d3ee;">Run Pipeline</button>
  </div>
</div></div>


<div class="ov" id="ov-xconv">
<div class="modal" style="width: 520px;">
  <h3><i class="fa-solid fa-exchange"></i> Unit & Axis Conversions <button class="help-btn" onclick="openDoc('doc-xconv')"><i class="fa-solid fa-question"></i> Help</button></h3>
  
  <div class="fg"><label class="fl">Apply to Spectra</label>
    <div class="ss" id="ss-xconv"></div>
  </div>

  <div class="tabs" style="margin-top: 12px;">
    <button class="tb on" data-tab="xc-math-x">X-Axis Math</button>
    <button class="tb" data-tab="xc-math-y">Y-Axis Math</button>
    <button class="tb" data-tab="xc-rename">Rename Labels</button>
  </div>

  <div class="tc on" id="xc-math-x">
    <div class="fr2">
      <div class="fg"><label class="fl">Conversion Type</label>
        <select class="fs" id="xc-type-x">
          <optgroup label="Vibrational (Raman / IR)">
            <option value="nm2rs">nm → Raman Shift (cm⁻¹)</option>
            <option value="rs2nm">Raman Shift (cm⁻¹) → nm</option>
            <option value="nm2ev">nm → Electron Volts (eV)</option>
            <option value="ev2nm">Electron Volts (eV) → nm</option>
            <option value="cm2thz">Wavenumbers (cm⁻¹) → THz</option>
            <option value="thz2cm">THz → Wavenumbers (cm⁻¹)</option>
          </optgroup>
          <optgroup label="Diffraction (XRD)">
            <option value="th2d">2-Theta [°] → d-spacing [Å]</option>
            <option value="d2th">d-spacing [Å] → 2-Theta [°]</option>
            <option value="xrd_conv">2-Theta Target Conversion</option>
          </optgroup>
        </select>
      </div>
      
      <div class="fg" id="xc-laser-container"><label class="fl">Laser Wavelength (nm)</label>
        <input type="number" class="fi" id="xc-laser" value="532" step="0.1" title="Excitation laser wavelength">
      </div>

      <div class="fg" id="xc-xrd-source-container" style="display:none;">
        <label class="fl">Original X-Ray Target [Å]</label>
        <select class="fs" id="xc-xrd-source">
          <option value="1.5406">Cu Kα1 (1.5406 Å)</option>
          <option value="1.7890">Co Kα1 (1.7890 Å)</option>
          <option value="0.7093">Mo Kα1 (0.7093 Å)</option>
          <option value="1.9360">Fe Kα1 (1.9360 Å)</option>
          <option value="2.2897">Cr Kα1 (2.2897 Å)</option>
        </select>
      </div>
    </div>
    
    <div class="fr2" id="xc-xrd-target-row" style="display:none; margin-top:-4px;">
       <div></div>
       <div class="fg">
         <label class="fl">Convert to Target [Å]</label>
         <select class="fs" id="xc-xrd-target">
           <option value="1.5406" selected>Cu Kα1 (1.5406 Å)</option>
           <option value="1.7890">Co Kα1 (1.7890 Å)</option>
           <option value="0.7093">Mo Kα1 (0.7093 Å)</option>
           <option value="1.9360">Fe Kα1 (1.9360 Å)</option>
           <option value="2.2897">Cr Kα1 (2.2897 Å)</option>
         </select>
       </div>
    </div>
    
    <p class="info">Mathematically recalculates the physical X-axis array for the selected spectra.</p>
  </div>

  <div class="tc" id="xc-math-y">
    <div class="fg"><label class="fl">Conversion Type</label>
      <select class="fs" id="xc-type-y">
        <option value="t2a">Transmittance (%) → Absorbance</option>
        <option value="a2t">Absorbance → Transmittance (%)</option>
      </select>
    </div>
    <p class="info">Mathematically recalculates the Y-axis intensity array for the selected spectra.</p>
  </div>

  <div class="tc" id="xc-rename">
    <div class="fr2">
      <div class="fg"><label class="fl">New X-Axis Label</label>
        <input type="text" class="fi" id="xc-label-x" placeholder="e.g., Wavelength [nm]"></div>
      <div class="fg"><label class="fl">New Y-Axis Label</label>
        <input type="text" class="fi" id="xc-label-y" placeholder="e.g., Absorbance"></div>
    </div>
    <p class="info" style="color:var(--warn);">Just renames the global chart axes. <b>No math is applied to the data.</b></p>
  </div>

  <div class="fg" style="margin-top:12px"><label class="ck"><input type="checkbox" id="xc-keep" checked> Keep original spectra (Math conversions only)</label></div>
  <div class="mf">
    <button class="bc" onclick="openDoc('doc-intro')" style="margin-right: auto; border-color: var(--border); color: var(--txtm);" title="View RDRS SpectraLib APA Citation"><i class="fa-solid fa-quote-right"></i> Cite</button>
    <button class="bc" data-ov="ov-xconv">Cancel</button>
    <button class="ba" id="ap-xconv">Apply</button>
  </div>
</div></div>

<div class="ov" id="ov-xshift">
<div class="modal" style="width: 380px;">
  <h3><i class="fa-solid fa-arrows-left-right"></i> Shift X-Axis <button class="help-btn" onclick="openDoc('doc-xshift')"><i class="fa-solid fa-question"></i> Help</button></h3>
  <div class="fg"><label class="fl">Apply to Spectra</label>
    <div class="ss" id="ss-xshift"></div></div>
  <div class="fg"><label class="fl">Shift Amount (e.g. 15.5 or -10)</label>
    <input type="number" class="fi" id="xs-val" value="0" step="0.1"></div>
  <p class="info" style="margin-top:8px;">Shifts the entire spectrum horizontally by adding or subtracting this value from the X-axis.</p>
  <div class="fg" style="margin-top:12px"><label class="ck"><input type="checkbox" id="xs-keep" checked> Keep original spectra</label></div>
  <div class="mf">
    <button class="bc" onclick="openDoc('doc-intro')" style="margin-right: auto; border-color: var(--border); color: var(--txtm);" title="View RDRS SpectraLib APA Citation"><i class="fa-solid fa-quote-right"></i> Cite</button>
    <button class="bc" data-ov="ov-xshift">Cancel</button>
    <button class="ba" id="ap-xshift">Apply Shift</button>
  </div>
</div></div>


<div class="ov" id="ov-zap">
<div class="modal">
  <h3><i class="fa-solid fa-eraser"></i> Zap Peak (Excise) <button class="help-btn" onclick="openDoc('doc-zap')"><i class="fa-solid fa-question"></i> Help</button></h3>
  <div class="fg"><label class="fl">Apply to Spectra</label>
    <div class="ss" id="ss-zap"></div></div>
  <div class="fr2">
    <div class="fg"><label class="fl">Center Position (X)</label>
      <input type="number" class="fi" id="zap-cx" placeholder="e.g. 1045"></div>
    <div class="fg"><label class="fl">Cut Width (± X)</label>
      <input type="number" class="fi" id="zap-w" value="10" placeholder="e.g. 10"></div>
  </div>
  <p class="info">Removes data between [Center - Width] and [Center + Width], bridging the gap with a straight interpolated line.</p>
  <div class="fg" style="margin-top:12px"><label class="ck"><input type="checkbox" id="zap-keep" checked> Keep original spectra</label></div>
  <div class="mf">
    <button class="bc" onclick="openDoc('doc-intro')" style="margin-right: auto; border-color: var(--border); color: var(--txtm);" title="View RDRS SpectraLib APA Citation"><i class="fa-solid fa-quote-right"></i> Cite</button>
    <button class="bc" data-ov="ov-zap">Cancel</button>
    <button class="ba" id="ap-zap">Zap Peak</button>
  </div>
</div></div>

<div class="ov" id="ov-merge">
<div class="modal">
  <h3><i class="fa-solid fa-link"></i> Merge Spectra (Stitch) <button class="help-btn" onclick="openDoc('doc-merge')"><i class="fa-solid fa-question"></i> Help</button></h3>
  <div class="fg"><label class="fl">Select Spectra to Merge</label>
    <div class="ss" id="ss-merge"></div></div>
  <p class="info">Combines multiple spectral chunks into a single, continuous line. Overlapping regions are averaged together. Gaps are interpolated.</p>
  <div class="fg" style="margin-top:12px"><label class="ck"><input type="checkbox" id="merge-keep" checked> Keep original spectra</label></div>
  <div class="mf">
    <button class="bc" onclick="openDoc('doc-intro')" style="margin-right: auto; border-color: var(--border); color: var(--txtm);" title="View RDRS SpectraLib APA Citation"><i class="fa-solid fa-quote-right"></i> Cite</button>
    <button class="bc" data-ov="ov-merge">Cancel</button>
    <button class="ba" id="ap-merge">Merge Spectra</button>
  </div>
</div></div>

<div class="ov" id="ov-add">
<div class="modal" style="width: 480px;">
  <h3><i class="fa-solid fa-plus"></i> Add Spectra <button class="help-btn" onclick="openDoc('doc-combine')"><i class="fa-solid fa-question"></i> Help</button></h3>
  <div class="fg"><label class="fl">Target Spectra (Augends)</label>
    <div class="ss" id="ss-add"></div></div>
  <div class="fg"><label class="fl">Spectrum to Add (Addend)</label>
    <select class="fs" id="add-ref"></select></div>
  <div class="fg"><label class="fl">Addend Multiplier (Scale factor)</label>
    <input type="number" class="fi" id="add-fac" value="1.0" step="0.1"></div>
  <p class="info">Adds the reference spectrum to all selected target spectra.</p>
  <div class="fg" style="margin-top:12px"><label class="ck"><input type="checkbox" id="add-keep" checked> Keep original spectra</label></div>
  <div class="mf">
    <button class="bc" onclick="openDoc('doc-intro')" style="margin-right: auto; border-color: var(--border); color: var(--txtm);" title="View RDRS SpectraLib APA Citation"><i class="fa-solid fa-quote-right"></i> Cite</button>
    <button class="bc" data-ov="ov-add">Cancel</button>
    <button class="ba" id="ap-add">Add Spectra</button>
  </div>
</div></div>

<div class="ov" id="ov-div">
<div class="modal" style="width: 480px;">
  <h3><i class="fa-solid fa-divide"></i> Divide Spectra <button class="help-btn" onclick="openDoc('doc-combine')"><i class="fa-solid fa-question"></i> Help</button></h3>
  <div class="fg"><label class="fl">Target Spectra (Numerators)</label>
    <div class="ss" id="ss-div"></div></div>
  <div class="fg"><label class="fl">Spectrum to Divide By (Denominator)</label>
    <select class="fs" id="div-ref"></select></div>
  <p class="info">Divides all selected target spectra by the reference spectrum. Useful for generating transmission/reflectance ratios.</p>
  <div class="fg" style="margin-top:12px"><label class="ck"><input type="checkbox" id="div-keep" checked> Keep original spectra</label></div>
  <div class="mf">
    <button class="bc" onclick="openDoc('doc-intro')" style="margin-right: auto; border-color: var(--border); color: var(--txtm);" title="View RDRS SpectraLib APA Citation"><i class="fa-solid fa-quote-right"></i> Cite</button>
    <button class="bc" data-ov="ov-div">Cancel</button>
    <button class="ba" id="ap-div">Divide Spectra</button>
  </div>
</div></div>

<div class="ov" id="ov-density">
<div class="modal" style="width: 480px;">
  <h3><i class="fa-solid fa-fire-flame-curved"></i> Spectral Density Analysis <button class="help-btn" onclick="openDoc('doc-density')"><i class="fa-solid fa-question"></i> Help</button></h3>
  <p class="info" style="margin-bottom:15px;">Converts a massive, unreadable overlap of spectra (a "hairball") into a 2D statistical density heatmap.</p>
  
  <div class="fg">
    <label class="fl">Select Spectra to Analyze (Min. 3)</label>
    <div class="ss" id="ss-density"></div>
  </div>
  
  <div class="fg">
    <label class="fl" title="Higher resolution takes longer to render. 150-200 is optimal.">Y-Axis Resolution (Vertical Bins)</label>
    <input type="number" class="fi" id="density-bins" value="150" min="50" max="500" step="10">
  </div>

  <div class="mf" style="margin-top: 15px;">
    <button class="bc" data-ov="ov-density">Cancel</button>
    <button class="ba" id="ap-density">Generate Heat-Line Plot</button>
  </div>
</div>
</div>

<div class="ov" id="ov-2dcos">
<div class="modal" style="width: 500px;">
  <h3><i class="fa-solid fa-border-all"></i> 2D-COS (2T2D) <button class="help-btn" onclick="openDoc('doc-2dcos')"><i class="fa-solid fa-question"></i> Help</button></h3>
  <div class="fg"><label class="fl">Select Spectra (Min. 2)</label>
    <div class="ss" id="ss-2dcos"></div>
  </div>
  <p class="info" style="margin-top:10px;">2D-COS analyzes how spectral bands change across a set of mixtures to mathematically resolve overlapping peaks.</p>
  <div class="mf">
    <button class="bc" data-ov="ov-2dcos">Cancel</button>
    <button class="ba" id="ap-2dcos">Compute 2D-COS</button>
  </div>
</div></div>

<div class="ov" id="ov-mix">
<div class="modal" style="width: 500px;">
  <h3><i class="fa-solid fa-blender"></i> Synthetic Mixture Builder <button class="help-btn" onclick="openDoc('doc-mix')"><i class="fa-solid fa-question"></i> Help</button></h3>
  <p class="info" style="margin-bottom:15px;">Dynamically mix pure references to visually match an unknown target spectrum, or build a new one from scratch.</p>
  
  <div class="fg">
    <label class="fl">Target (Unknown Sample)</label>
    <div style="display: flex; gap: 10px; align-items: center;">
        <select class="fs" id="mix-target" style="flex: 1;"></select>
        <label class="ck" style="white-space: nowrap; font-size: 11px; color: var(--txtbr);">
            <input type="checkbox" id="mix-dummy-target"> Blank Target
        </label>
    </div>
  </div>
  
  <div class="fr2">
      <div class="fg">
        <label class="fl">Component 1 (Required)</label>
        <select class="fs" id="mix-comp1"></select>
      </div>
      <div class="fg">
        <label class="fl">Component 2</label>
        <select class="fs" id="mix-comp2"></select>
      </div>
  </div>
  
  <div class="fr3">
      <div class="fg">
        <label class="fl">Comp 3 (Opt)</label>
        <select class="fs" id="mix-comp3"></select>
      </div>
      <div class="fg">
        <label class="fl">Comp 4 (Opt)</label>
        <select class="fs" id="mix-comp4"></select>
      </div>
      <div class="fg">
        <label class="fl">Comp 5 (Opt)</label>
        <select class="fs" id="mix-comp5"></select>
      </div>
  </div>

  <div class="fg" style="margin-top: 10px;">
      <label class="ck" title="Mathematically scales all components to 0-1 before mixing so their tallest peaks have equal weight.">
          <input type="checkbox" id="mix-prenorm" checked> Pre-Normalize Components to 0-1 (Recommended)
      </label>
  </div>

  <button class="ba" id="btn-init-mix" style="width:100%; margin-bottom:10px; background:var(--card); border:1px solid var(--acc); color:var(--acc);"><i class="fa-solid fa-gears"></i> Initialize Sliders</button>

  <div id="mix-sliders-wrap" style="display:none; background:rgba(0,0,0,0.15); padding:15px; border:1px solid var(--border); border-radius:4px; margin-bottom:15px;">
    <div id="mix-row1" class="fg" style="margin-bottom:12px;">
        <div style="display:flex; justify-content:space-between; margin-bottom:4px;">
            <label class="fl" id="mix-name1" style="margin:0; color:var(--txtbr);">Comp 1</label>
            <input type="number" class="fi" id="mix-fac1" value="0.50" step="0.01" min="0" max="1" style="width:60px; padding:2px 4px; height:20px;">
        </div>
        <input type="range" id="mix-fac1-slider" min="0" max="1" step="0.01" value="0.50" style="width:100%; accent-color:var(--acc);">
    </div>
    <div id="mix-row2" class="fg" style="margin-bottom:12px;">
        <div style="display:flex; justify-content:space-between; margin-bottom:4px;">
            <label class="fl" id="mix-name2" style="margin:0; color:var(--txtbr);">Comp 2</label>
            <input type="number" class="fi" id="mix-fac2" value="0.50" step="0.01" min="0" max="1" style="width:60px; padding:2px 4px; height:20px;">
        </div>
        <input type="range" id="mix-fac2-slider" min="0" max="1" step="0.01" value="0.50" style="width:100%; accent-color:var(--acc);">
    </div>
    <div id="mix-row3" class="fg" style="margin-bottom:12px;">
        <div style="display:flex; justify-content:space-between; margin-bottom:4px;">
            <label class="fl" id="mix-name3" style="margin:0; color:var(--txtbr);">Comp 3</label>
            <input type="number" class="fi" id="mix-fac3" value="0.50" step="0.01" min="0" max="1" style="width:60px; padding:2px 4px; height:20px;">
        </div>
        <input type="range" id="mix-fac3-slider" min="0" max="1" step="0.01" value="0.50" style="width:100%; accent-color:var(--acc);">
    </div>
    <div id="mix-row4" class="fg" style="margin-bottom:12px;">
        <div style="display:flex; justify-content:space-between; margin-bottom:4px;">
            <label class="fl" id="mix-name4" style="margin:0; color:var(--txtbr);">Comp 4</label>
            <input type="number" class="fi" id="mix-fac4" value="0.50" step="0.01" min="0" max="1" style="width:60px; padding:2px 4px; height:20px;">
        </div>
        <input type="range" id="mix-fac4-slider" min="0" max="1" step="0.01" value="0.50" style="width:100%; accent-color:var(--acc);">
    </div>
    <div id="mix-row5" class="fg" style="margin-bottom:0;">
        <div style="display:flex; justify-content:space-between; margin-bottom:4px;">
            <label class="fl" id="mix-name5" style="margin:0; color:var(--txtbr);">Comp 5</label>
            <input type="number" class="fi" id="mix-fac5" value="0.50" step="0.01" min="0" max="1" style="width:60px; padding:2px 4px; height:20px;">
        </div>
        <input type="range" id="mix-fac5-slider" min="0" max="1" step="0.01" value="0.50" style="width:100%; accent-color:var(--acc);">
    </div>
  </div>

  <div class="mf">
    <button class="bc" data-ov="ov-mix">Cancel</button>
    <button class="ba" id="ap-mix">Save Synthetic Mix</button>
  </div>
</div></div>

<div class="ov" id="ov-trend">
<div class="modal" style="width: 480px;">
  <h3><i class="fa-solid fa-chart-line"></i> Peak Trend Analysis (SPLOM) <button class="help-btn" onclick="openDoc('doc-trend')"><i class="fa-solid fa-question"></i> Help</button></h3>
  <p class="info" style="margin-bottom:15px;">Track how a specific peak's Position, Intensity, and FWHM change across your dataset. <b>Note:</b> You must run the "Find Peaks" tool on your dataset first!</p>
  
  <div class="fr2">
    <div class="fg">
      <label class="fl">Target Peak Center (X)</label>
      <input type="number" class="fi" id="trend-cx" placeholder="e.g. 450.5">
    </div>
    <div class="fg">
      <label class="fl">Tracking Tolerance (± X)</label>
      <input type="number" class="fi" id="trend-tol" value="15" title="How far the peak is allowed to shift">
    </div>
  </div>
  
  <div class="fg" style="margin-top: 10px; margin-bottom: 0;">
      <div style="display: flex; gap: 5px;">
        <button class="cb" id="b-trend-pick" style="flex: 1;"><i class="fa-solid fa-hand-pointer"></i> Visually Pick Target Peak</button>
        <button class="bc warn" id="b-trend-clear" style="padding: 4px 8px; display: none;" title="Clear"><i class="fa-solid fa-trash"></i></button>
      </div>
      <div id="trend-pick-readout" style="font-size:11px; color:var(--txtm); margin-top:6px; text-align:center; min-height:16px;"></div>
  </div>

  <div class="mf" style="margin-top: 15px;">
    <button class="bc" data-ov="ov-trend">Cancel</button>
    <button class="ba" id="ap-trend">Generate Correlogram</button>
  </div>
</div>
</div>

<div class="ov" id="ov-login">
<div class="modal" style="width: 320px;">
  <h3 style="display: flex; justify-content: space-between; align-items: center;">
    <span><i class="fa-solid fa-user"></i> User Login</span>
    <button class="bc" onclick="closeModal('ov-login'); document.getElementById('btn-request-modal').click();" style="font-size: 10px; padding: 3px 8px; color: var(--acc); border-color: var(--acc); background: rgba(88, 166, 255, 0.1); font-family: var(--sans); font-weight: 600; cursor: pointer; transition: 0.2s;" onmouseover="this.style.background='var(--acc)'; this.style.color='#000';" onmouseout="this.style.background='rgba(88, 166, 255, 0.1)'; this.style.color='var(--acc)';">
      <i class="fa-solid fa-user-plus"></i> Request Access
    </button>
  </h3>
  <div class="fg">
    <label class="fl">Username</label>
    <input type="text" class="fi" id="log-user" placeholder="Enter username">
  </div>
  <div class="fg">
    <label class="fl">Password</label>
    <input type="password" class="fi" id="log-pass" placeholder="Enter password">
  </div>
  <div id="log-err" style="color: var(--err); font-size: 11px; display: none; margin-bottom: 10px;">Invalid credentials.</div>
  <div class="mf">
    <button class="bc" onclick="openDoc('doc-intro')" style="margin-right: auto; border-color: var(--border); color: var(--txtm);" title="View RDRS SpectraLib APA Citation"><i class="fa-solid fa-quote-right"></i> Cite</button>
    <button class="bc" data-ov="ov-login">Cancel</button>
    <button class="ba" id="ap-login">Log In</button>
  </div>
</div></div>

<div class="ov" id="ov-request">
<div class="modal" style="width: 420px;">
  <h3><i class="fa-solid fa-user-plus"></i> Request Account Access</h3>
  <p class="info" style="margin-bottom: 5px;">Access to the Database, AI Match, and Analysis features requires a verified researcher account.</p>
  <p class="info" style="margin-bottom: 15px;">If you find it useful, consider supporting the project to help cover server costs and keep the platform evolving!</p>
  
  <div class="fg">
    <label class="fl">Full Name *</label>
    <input type="text" class="fi" id="req-name" placeholder="e.g. Andrei Ionuţ APOPEI, PhD">
  </div>
  <div class="fg">
    <label class="fl"><span style="color:var(--warn);">Only Institutional Email (no gmail/yahoo/microsoft/etc.) *</span></label>
    <input type="email" class="fi" id="req-email" placeholder="name@university.edu / name@institution.email ...">
  </div>
  <div class="fg">
    <label class="fl">Affiliation / Institute *</label>
    <input type="text" class="fi" id="req-affil" placeholder="University or Laboratory Name">
  </div>
  <div class="fg">
    <label class="fl">Intended Use *</label>
    <textarea class="fi" id="req-use" placeholder="Briefly describe how you plan to use RDRS SpectraLib..." style="height: 60px; resize: vertical; font-family: var(--sans);"></textarea>
  </div>

  <div class="fg" style="margin-top: 15px; padding: 10px; background: rgba(0,0,0,0.15); border-left: 3px solid var(--acc); border-radius: 4px;">
    <label class="ck" style="font-size: 10.5px; color: var(--txtbr); font-weight: normal; line-height: 1.4; margin: 0; display: flex; align-items: flex-start; gap: 8px;">
      <input type="checkbox" id="req-consent" style="margin-top: 2px; cursor: pointer;">
      <span>
        I consent to the secure storage of my username/name, email, and affiliation for account verification purposes, and agree to receive important service updates regarding RDRS SpectraLib in accordance with GDPR.
        <button type="button" class="help-btn" onclick="openDoc('doc-privacy')" style="margin-left: 6px; padding: 2px 6px; font-size: 9px; vertical-align: middle;">
          <i class="fa-solid fa-shield-halved"></i> Privacy Policy
        </button>
      </span>
    </label>
  </div>
  
  <div id="req-err" style="color: var(--err); font-size: 11px; display: none; margin-bottom: 10px;"></div>
  
  <div class="mf">
    <button class="bc" onclick="openDoc('doc-intro')" style="margin-right: auto; border-color: var(--border); color: var(--txtm);" title="View RDRS SpectraLib APA Citation"><i class="fa-solid fa-quote-right"></i> Cite</button>
    <button class="bc" data-ov="ov-request">Cancel</button>
    <button class="ba" id="ap-request">Submit Request</button>
  </div>
</div></div>

<div class="ov" id="ov-feedback">
<div class="modal" style="width: 450px;">
  <h3 style="display: flex; justify-content: space-between; align-items: center;">
    <span><i class="fa-solid fa-comment-dots"></i> Submit Feedback</span>
    <button class="bc" id="btn-open-testimonials" style="font-size: 10px; padding: 3px 8px; color: var(--acc); border-color: var(--acc); background: rgba(88, 166, 255, 0.1); font-family: var(--sans); font-weight: 600; cursor: pointer; transition: 0.2s;" onmouseover="this.style.background='var(--acc)'; this.style.color='#000';" onmouseout="this.style.background='rgba(88, 166, 255, 0.1)'; this.style.color='var(--acc)';"><i class="fa-solid fa-star"></i> Read Testimonials</button>
  </h3>
  
  <p class="info" style="margin-bottom: 15px; color: var(--txtm);">
    Help us improve RDRS SpectraLib! Your testimonials may be featured on the platform.
  </p>

  <div class="fr2">
    <div class="fg">
      <label class="fl">Your Name (Required)</label>
      <input type="text" class="fi" id="fb-name" placeholder="e.g. Dr. Jane Doe">
    </div>
    <div class="fg">
      <label class="fl">Affiliation / Status</label>
      <input type="text" class="fi" id="fb-affil" placeholder="e.g. Geologist, UAIC">
    </div>
  </div>

  <div class="fg" style="margin-top: 5px;">
    <div style="display: flex; justify-content: space-between; align-items: flex-end;">
      <label class="fl">Feedback / Testimonial</label>
      <span id="fb-counter" style="font-family: var(--mono); font-size: 10px; color: var(--acc);">0 / 200 words</span>
    </div>
    <textarea class="fi" id="fb-text" placeholder="Share your experience using the software..." style="height: 100px; resize: vertical; font-family: var(--sans); margin-top: 3px; line-height: 1.4;"></textarea>
  </div>

  <div id="fb-err" style="color: var(--err); font-size: 11px; display: none; margin-bottom: 10px;">Please fill out the required fields.</div>

  <div class="mf">
    <button class="bc" onclick="openDoc('doc-intro')" style="margin-right: auto; border-color: var(--border); color: var(--txtm);" title="View RDRS SpectraLib APA Citation"><i class="fa-solid fa-quote-right"></i> Cite</button>
    <button class="bc" data-ov="ov-feedback">Cancel</button>
    <button class="ba" id="ap-feedback">Submit Feedback</button>
  </div>
</div>
</div>

<div class="ov" id="ov-testimonials">
<div class="modal" style="width: 500px;">
  <h3><i class="fa-solid fa-star"></i> User Testimonials</h3>
  
  <div style="background: rgba(88, 166, 255, 0.05); border: 1px solid var(--border); border-left: 3px solid var(--acc); border-radius: 6px; padding: 25px 20px; margin-bottom: 20px; min-height: 140px; display: flex; flex-direction: column; justify-content: center;">
    
    <p id="testim-text" style="font-size: 14px; line-height: 1.6; color: var(--txtbr); font-family: var(--sans); font-style: italic; margin-bottom: 15px; text-align: center;">
      Loading testimonials...
    </p>
    
    <div style="text-align: right; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 10px; margin-top: auto;">
        <div id="testim-name" style="font-weight: 600; color: var(--acc); font-size: 13px;"></div>
        <div id="testim-affil" style="color: var(--txtm); font-size: 11px; margin-top: 2px;"></div>
    </div>
    
  </div>

  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px;">
    <button class="bc" id="btn-testim-prev" style="padding: 4px 10px; font-size: 11px;">&leftarrow; Previous</button>
    <div id="testim-counter" style="font-family: var(--mono); font-size: 10px; color: var(--txtm);">0 / 0</div>
    <button class="bc" id="btn-testim-next" style="padding: 4px 10px; font-size: 11px;">Next &rightarrow;</button>
  </div>
  
  <div class="mf" style="justify-content: flex-end; padding-top: 15px; margin-top: 10px;">
    <button class="ba" data-ov="ov-testimonials" onclick="closeModal('ov-testimonials')">Close</button>
  </div>
</div>
</div>

<div class="ov" id="ov-tips">
<div class="modal" style="width: 450px;">
  <h3><i class="fa-solid fa-lightbulb"></i> RDRS Tips & Tricks</h3>
  
  <div style="background: rgba(88, 166, 255, 0.1); border: 1px solid var(--acc); border-radius: 6px; padding: 20px; margin-bottom: 20px; min-height: 100px; display: flex; align-items: center; justify-content: center; text-align: center;">
    <p id="tip-content" style="font-size: 13px; line-height: 1.6; color: var(--txtbr); font-family: var(--sans);">
      </p>
  </div>

  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
    <button class="bc" id="btn-tip-prev" style="padding: 4px 10px; font-size: 11px;">&leftarrow; Previous</button>
    <div id="tip-counter" style="font-family: var(--mono); font-size: 10px; color: var(--txtm);">1 / 5</div>
    <button class="bc" id="btn-tip-next" style="padding: 4px 10px; font-size: 11px;">Next &rightarrow;</button>
  </div>

  <div class="mf" style="justify-content: space-between; align-items: center;">
    <label class="ck" style="font-size: 11px; color: var(--txtm);">
      <input type="checkbox" id="ck-hide-tips"> Got it. Hide this for next time.
    </label>
    <button class="ba" id="btn-tip-ok">OK</button>
  </div>
</div>
</div>

<div class="ov" id="ov-prefs">
<div class="modal" style="width: 500px;">
  <h3><i class="fa-solid fa-gear"></i> Advanced Plot Configuration <button class="help-btn" onclick="openDoc('doc-prefs')"><i class="fa-solid fa-question"></i> Help</button></h3>
  
  <div class="tabs">
    <button class="tb on" data-tab="pref-global">Global</button>
    <button class="tb" data-tab="pref-xaxis">X-Axis</button>
    <button class="tb" data-tab="pref-yaxis">Y-Axis</button>
  </div>

  <div class="tc on" id="pref-global">
    <div style="border:1px solid var(--border); border-radius:4px; padding:15px; margin-bottom:15px; background: rgba(0,0,0,0.15);">
      <label class="ck" style="font-weight:600; color:var(--txtbr);">
        <input type="checkbox" id="pref-webgl"> Use WebGL Rendering Engine
      </label>
      <p class="info" style="margin-top:8px; margin-left: 22px;">
        <b>SVG (Unchecked):</b> Best quality, required for PDF Reports. Lags with >20 spectra.<br>
        <b>WebGL (Checked):</b> Uses GPU. 60fps panning for 50+ spectra. May cause minor fill artifacts.
      </p>
    </div>
    
    <div class="fr2">
      <div class="fg">
        <label class="ck" style="font-weight:600; color:var(--txtbr);" title="Draws a bounding box with ticks on top/right">
          <input type="checkbox" id="pref-mirror"> Mirror Axes (Bounding Box)
        </label>
        <p class="info" style="margin-left:22px;">Standard scientific journal style.</p>
      </div>
    </div>
  </div>

  <div class="tc" id="pref-xaxis">
    <div class="fr2">
      <div class="fg"><label class="fl">Scale Type</label>
        <select class="fs" id="pref-x-scale">
          <option value="linear">Linear</option>
          <option value="log">Logarithmic</option>
        </select>
      </div>
      <div class="fg"><label class="fl">Major Ticks</label>
        <select class="fs" id="pref-x-ticks">
          <option value="outside">Outside</option>
          <option value="inside">Inside</option>
          <option value="cross">Cross</option>
          <option value="">Hidden</option>
        </select>
      </div>
    </div>
    <div class="fr2" style="margin-top: 5px;">
      <div class="fg"><label class="ck"><input type="checkbox" id="pref-x-line" checked> Show Axis Line</label></div>
      <div class="fg"><label class="ck"><input type="checkbox" id="pref-x-grid" checked> Show Gridlines</label></div>
      <div class="fg"><label class="ck"><input type="checkbox" id="pref-x-minor"> Show Minor Ticks</label></div>
    </div>
  </div>

  <div class="tc" id="pref-yaxis">
    <div class="fr2">
      <div class="fg"><label class="fl">Scale Type</label>
        <select class="fs" id="pref-y-scale">
          <option value="linear">Linear</option>
          <option value="log">Logarithmic</option>
        </select>
      </div>
      <div class="fg"><label class="fl">Major Ticks</label>
        <select class="fs" id="pref-y-ticks">
          <option value="outside">Outside</option>
          <option value="inside">Inside</option>
          <option value="cross">Cross</option>
          <option value="">Hidden</option>
        </select>
      </div>
    </div>
    <div class="fr2" style="margin-top: 5px;">
      <div class="fg"><label class="ck"><input type="checkbox" id="pref-y-line" checked> Show Axis Line</label></div>
      <div class="fg"><label class="ck"><input type="checkbox" id="pref-y-grid" checked> Show Gridlines</label></div>
      <div class="fg"><label class="ck"><input type="checkbox" id="pref-y-minor"> Show Minor Ticks</label></div>
    </div>
    <p class="info" style="color:var(--warn); margin-top:8px;">⚠️ <b>Note:</b> Logarithmic Y-scales require strictly positive data. Baseline-subtracted spectra with negative noise may cause visual glitches.</p>
  </div>

  <div class="mf">
    <button class="bc" data-ov="ov-prefs">Cancel</button>
    <button class="ba" id="ap-prefs">Save Configurations</button>
  </div>
</div>
</div>

<div class="ov" id="ov-donate">
<div class="modal" style="width: 480px;">
  <h3><i class="fa-solid fa-heart"></i> Support RDRS SpectraLib</h3>
  
  <div style="background: rgba(255, 123, 114, 0.1); border: 1px solid rgba(255, 123, 114, 0.3); border-radius: 6px; padding: 20px; margin-bottom: 20px; text-align: center;">
    <p style="font-size: 14px; line-height: 1.6; color: var(--txtbr); font-family: var(--sans); margin-bottom: 12px;">
      RDRS SpectraLib is developed and maintained independently to provide a professional, instrument-grade analytical tool for the scientific community.
    </p>
    <p style="font-size: 12.5px; color: var(--txtm); margin-bottom: 0;">
      If you find it useful, consider supporting the project to help cover server costs and keep the platform evolving!
    </p>
  </div>
  
  <div class="fr3" style="margin-bottom: 15px;">
    <a href="https://paypal.me/aiapopei/10" target="_blank" class="bc" style="text-align: center; text-decoration: none; padding: 12px 5px; border-color: #ff7b72; color: #ff7b72; transition: 0.2s;" onmouseover="this.style.background='#ff7b72'; this.style.color='#000';" onmouseout="this.style.background='var(--card)'; this.style.color='#ff7b72';">
      <i class="fa-solid fa-mug-hot"></i> Buy a Coffee<br><span style="font-size: 16px; font-weight: bold; font-family: var(--mono); margin-top: 4px; display: inline-block;">$10</span>
    </a>
    <a href="https://paypal.me/aiapopei/25" target="_blank" class="bc" style="text-align: center; text-decoration: none; padding: 12px 5px; border-color: #ff7b72; color: #ff7b72; transition: 0.2s;" onmouseover="this.style.background='#ff7b72'; this.style.color='#000';" onmouseout="this.style.background='var(--card)'; this.style.color='#ff7b72';">
      <i class="fa-solid fa-microscope"></i> Lab Supporter<br><span style="font-size: 16px; font-weight: bold; font-family: var(--mono); margin-top: 4px; display: inline-block;">$25</span>
    </a>
    <a href="https://paypal.me/aiapopei/50" target="_blank" class="bc" style="text-align: center; text-decoration: none; padding: 12px 5px; border-color: #ff7b72; color: #ff7b72; transition: 0.2s;" onmouseover="this.style.background='#ff7b72'; this.style.color='#000';" onmouseout="this.style.background='var(--card)'; this.style.color='#ff7b72';">
      <i class="fa-solid fa-rocket"></i> Pro Sponsor<br><span style="font-size: 16px; font-weight: bold; font-family: var(--mono); margin-top: 4px; display: inline-block;">$50</span>
    </a>
  </div>
  
  <div style="text-align: center; margin-bottom: 10px;">
    <a href="https://paypal.me/aiapopei" target="_blank" class="ba" style="display: inline-block; text-decoration: none; width: 100%; background: #ff7b72; color: #000; padding: 10px; font-size: 13px;">
      ➔ Donate Custom Amount via PayPal
    </a>
  </div>
  
  <p class="info" style="text-align: center; margin-top: 15px;">Secure payments processed by PayPal. Thank you for your support!</p>
  
  <div class="mf" style="justify-content: center; margin-top: 15px; border-top: none; padding-top: 0;">
    <button class="bc" data-ov="ov-donate" onclick="closeModal('ov-donate')" style="font-size: 11px;">Maybe Later</button>
  </div>
</div>
</div>

<div class="ov" id="ov-del-folder">
    <div class="modal" style="width: 420px;">
        <h3><i class="fa-solid fa-folder-minus"></i> Delete Folder</h3>
        <p class="info" style="margin-bottom: 15px; color: var(--txtbr);">What would you like to do with the spectra inside this folder?</p>
        
        <div class="fr2" style="display: flex; flex-direction: column; gap: 10px;">
            <button class="ba" id="btn-del-folder-only" style="background: var(--card); color: var(--txt); border: 1px solid var(--border); text-align: left; padding: 10px;">
                <i class="fa-solid fa-folder-open" style="color: var(--acc); width: 20px; font-size: 16px;"></i> <b style="font-size: 13px;">Delete Folder Only</b><br>
                <span style="font-size: 10.5px; font-weight: normal; color: var(--txtm); margin-left: 25px; display: inline-block; margin-top: 4px;">Spectra will be moved to the main workspace.</span>
            </button>
            <button class="ba warn" id="btn-del-folder-all" style="background: rgba(248,81,73,0.1); color: var(--err); border: 1px solid var(--err); text-align: left; padding: 10px;">
                <i class="fa-solid fa-trash" style="width: 20px; font-size: 16px;"></i> <b style="font-size: 13px;">Delete Folder & Spectra</b><br>
                <span style="font-size: 10.5px; font-weight: normal; margin-left: 25px; display: inline-block; margin-top: 4px;">Permanently removes the folder and all its contents.</span>
            </button>
        </div>
        
        <div class="mf">
            <button class="bc" data-ov="ov-del-folder">Cancel</button>
        </div>
    </div>
</div>

<div class="ov" id="ov-move-folder">
    <div class="modal" style="width: 420px;">
        <h3><i class="fa-solid fa-file-import"></i> Move Spectra to Folder</h3>
        <p class="info" style="margin-bottom: 15px; color: var(--txtbr);">Which root spectra would you like to move into this folder?</p>
        
        <div class="fr2" style="display: flex; flex-direction: column; gap: 10px;">
            <button class="ba" id="btn-move-visible" style="background: var(--card); color: var(--txt); border: 1px solid var(--acc); text-align: left; padding: 10px; transition: 0.2s;" onmouseover="this.style.background='rgba(88, 166, 255, 0.1)'" onmouseout="this.style.background='var(--card)'">
                <i class="fa-solid fa-eye" style="color: var(--acc); width: 20px; font-size: 16px;"></i> <b style="font-size: 13px;">Move Visible Only</b><br>
                <span style="font-size: 10.5px; font-weight: normal; color: var(--txtm); margin-left: 25px; display: inline-block; margin-top: 4px;">Only moves root spectra that are currently visible on the chart.</span>
            </button>
            <button class="ba" id="btn-move-all" style="background: var(--card); color: var(--txt); border: 1px solid var(--border); text-align: left; padding: 10px; transition: 0.2s;" onmouseover="this.style.background='rgba(255, 255, 255, 0.05)'" onmouseout="this.style.background='var(--card)'">
                <i class="fa-solid fa-layer-group" style="color: var(--txtm); width: 20px; font-size: 16px;"></i> <b style="font-size: 13px;">Move All Root Spectra</b><br>
                <span style="font-size: 10.5px; font-weight: normal; color: var(--txtm); margin-left: 25px; display: inline-block; margin-top: 4px;">Moves all root spectra (including hidden ones).</span>
            </button>
        </div>
        
        <div class="mf">
            <button class="bc" data-ov="ov-move-folder">Cancel</button>
        </div>
    </div>
</div>

<div class="ov" id="ov-batch-rename">
    <div class="modal" style="width: 600px; max-width: 95vw;">
        <h3><i class="fa-solid fa-file-signature"></i> Batch Rename Spectra</h3>
        <p class="info" style="margin-bottom: 15px;">Create a naming pattern using text and variables. The preview will update automatically.</p>
        
        <div class="fg">
            <label class="fl">New Name Pattern</label>
            <input type="text" class="fi" id="batch-rename-pattern" value="Cluster_<Inc 0Nr>" style="font-family: var(--mono); font-size: 13px; font-weight: bold; color: var(--acc);">
        </div>
        
        <div class="fg" style="margin-bottom: 15px;">
            <label class="fl">Insert Variables</label>
            <div style="display: flex; flex-wrap: wrap; gap: 8px;">
                <button class="bc batch-tag-btn" data-tag="<Name>" style="padding: 4px 8px; font-size: 10.5px; font-family: var(--mono); border-color: var(--border2);">&lt;Name&gt; (Original)</button>
                <button class="bc batch-tag-btn" data-tag="<Inc Nr>" style="padding: 4px 8px; font-size: 10.5px; font-family: var(--mono); border-color: var(--border2);">&lt;Inc Nr&gt; (1, 2, 3)</button>
                <button class="bc batch-tag-btn" data-tag="<Inc 0Nr>" style="padding: 4px 8px; font-size: 10.5px; font-family: var(--mono); border-color: var(--border2);">&lt;Inc 0Nr&gt; (01, 02)</button>
                <button class="bc batch-tag-btn" data-tag="<Inc Alpha>" style="padding: 4px 8px; font-size: 10.5px; font-family: var(--mono); border-color: var(--border2);">&lt;Inc Alpha&gt; (A, B, C)</button>
            </div>
        </div>

        <div style="background: var(--card); border: 1px solid var(--border); border-radius: 4px; display: flex; flex-direction: column; overflow: hidden; height: 250px;">
            <div style="padding: 6px 10px; background: var(--border2); font-size: 11px; font-family: var(--mono); color: var(--txtm); border-bottom: 1px solid var(--border); display: flex;">
                <div style="flex: 1;">Original Name</div>
                <div style="flex: 1;"><i class="fa-solid fa-arrow-right"></i> New Name Preview</div>
            </div>
            <div id="batch-rename-preview" style="flex: 1; overflow-y: auto; padding: 10px; background: var(--bg);">
                </div>
        </div>
        
        <div class="mf" style="margin-top: 20px;">
            <button class="bc" data-ov="ov-batch-rename">Cancel</button>
            <button class="ba" id="ap-batch-rename" style="background: var(--ok); color: #000;">Rename Spectra</button>
        </div>
    </div>
</div>

<div class="ov" id="ov-calib-chart">
    <div class="modal" style="width: 600px; max-width: 95vw;">
        <h3 style="display: flex; justify-content: space-between; align-items: center;">
            <span><i class="fa-solid fa-chart-line"></i> Camera Calibration Curve</span>
            <button class="bc warn" onclick="closeModal('ov-calib-chart')" style="padding: 3px 8px;">✕</button>
        </h3>
        <div id="calib-stats-readout" style="display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; padding: 8px; background: rgba(0,0,0,0.15); border: 1px solid var(--border); border-radius: 4px; margin-bottom: 10px;">
            <span style="color: var(--txtbr);" id="calib-eq">Equation: </span>
            <span style="color: var(--ok); font-weight: bold;" id="calib-r2">R²: </span>
        </div>
        <div id="calib-curve-chartdiv" style="width: 100%; height: 350px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg);"></div>
    </div>
</div>

<div class="ov" id="ov-cam-settings">
    <div class="modal" style="width: 400px;">
        <h3><i class="fa-solid fa-gear"></i> Camera Hardware Controls</h3>
        <p class="info" style="color: var(--warn); margin-bottom: 12px;">
            ⚠️ <b>Note:</b> Browsers heavily restrict direct hardware access. Sliders are automatically disabled if your OS/Camera denies WebRTC override permissions.
        </p>
        
        <div id="cam-hardware-controls">
            <div style="text-align:center; padding: 20px; color: var(--txtm); font-family: var(--mono); font-size: 11px;">
                <i class="fa-solid fa-circle-notch fa-spin"></i> Waiting for active camera stream...
            </div>
        </div>

        <div class="mf" style="margin-top: 15px; justify-content: space-between;">
            <button class="bc warn" id="btn-reset-cam-settings" style="display: none;"><i class="fa-solid fa-rotate-left"></i> Reset Defaults</button>
            <div style="display: flex; gap: 5px;">
                <button class="ba" onclick="closeModal('ov-cam-settings')">Done</button>
            </div>
        </div>
    </div>
</div>

<div class="ov" id="ov-cam-calib">
    <div class="modal" style="width: 450px;">
        <h3 style="display: flex; align-items: center; justify-content: space-between;">
            <span><i class="fa-solid fa-ruler-horizontal"></i> Wavelength Calibration</span>
            <button class="cb" id="cam-cfl-help" style="padding: 2px 6px; font-size: 10px; color: var(--acc);" title="View CFL Reference Spectrum"><i class="fa-solid fa-lightbulb"></i> View CFL</button>
        </h3>
        <p class="info" style="margin-bottom: 15px;">Click a button below, then click on the live chart to set the pixel coordinate for that known emission peak.</p>
        
        <div class="fr2" style="margin-bottom: 8px; align-items: center;">
            <button class="cb" id="btn-calib-p1" style="font-size: 11px;"><i class="fa-solid fa-hand-pointer"></i> Set P1</button>
            <div style="display:flex; align-items:center; gap: 8px;">
                <input type="number" class="fi" id="val-calib-p1" value="436.6" step="0.1" style="width: 80px;">
                <span style="font-size: 11px; color: #58a6ff; font-weight: 600;">Hg Blue</span>
            </div>
        </div>
        <div class="fr2" style="margin-bottom: 8px; align-items: center;">
            <button class="cb" id="btn-calib-p2" style="font-size: 11px;"><i class="fa-solid fa-hand-pointer"></i> Set P2</button>
            <div style="display:flex; align-items:center; gap: 8px;">
                <input type="number" class="fi" id="val-calib-p2" value="546.5" step="0.1" style="width: 80px;">
                <span style="font-size: 11px; color: #3fb950; font-weight: 600;">Hg Green</span>
            </div>
        </div>
        <div class="fr2" style="margin-bottom: 15px; align-items: center;">
            <button class="cb" id="btn-calib-p3" style="font-size: 11px;"><i class="fa-solid fa-hand-pointer"></i> Set P3</button>
            <div style="display:flex; align-items:center; gap: 8px;">
                <input type="number" class="fi" id="val-calib-p3" value="611.6" step="0.1" style="width: 80px;">
                <span style="font-size: 11px; color: #f85149; font-weight: 600;">Eu Red</span>
            </div>
        </div>
        
        <div class="mf" style="justify-content: space-between;">
            <div style="display:flex; gap: 5px;">
                <button class="bc warn" id="btn-reset-calib" style="padding: 4px 12px;">Reset</button>
                <button class="bc" id="btn-view-calib-chart" style="padding: 4px 12px; display: none;"><i class="fa-solid fa-chart-line"></i> View Curve</button>
            </div>
            <div style="display:flex; gap: 5px;">
                <button class="bc" onclick="closeModal('ov-cam-calib')">Close</button>
                <button class="ba" id="btn-apply-calib">Apply Math</button>
            </div>
        </div>
    </div>
</div>

<div class="ov" id="ov-cam-kinetics">
    <div class="modal" style="width: 400px;">
        <h3><i class="fa-solid fa-stopwatch"></i> Kinetics Setup</h3>
        <p class="info" style="margin-bottom: 15px;">Configure the time-series capture loop.</p>
        
        <div class="fr2">
            <div class="fg">
                <label class="fl">Interval (Seconds)</label>
                <input type="number" class="fi" id="cam-kin-interval" value="10" step="1" min="1">
            </div>
            <div class="fg">
                <label class="fl">Total Captures</label>
                <input type="number" class="fi" id="cam-kin-count" value="15" step="1" min="2">
            </div>
        </div>
        
        <div class="fg" style="margin-top: 5px;">
            <label class="fl">View Mode After Capture</label>
            <select class="fs" id="cam-kin-view">
                <option value="simple">Standard Lines (Default)</option>
                <option value="heatmap" selected>2D Heatmap Contour</option>
                <option value="waterfall">3D Waterfall View</option>
            </select>
        </div>

        <div class="mf" style="margin-top: 15px;">
            <button class="bc" onclick="closeModal('ov-cam-kinetics')">Cancel</button>
            <button class="ba" onclick="closeModal('ov-cam-kinetics')">Apply Settings</button>
        </div>
    </div>
</div>

<div class="ov" id="ov-cfl-ref">
    <div class="modal" style="width: 600px; max-width: 95vw;">
        <h3 style="display: flex; justify-content: space-between; align-items: center;">
            <span><i class="fa-solid fa-lightbulb"></i> CFL Reference Spectrum</span>
            <button class="bc warn" onclick="closeModal('ov-cfl-ref')" style="padding: 3px 8px;">✕</button>
        </h3>
        <p class="info">Standard compact fluorescent lamps (CFL) contain Argon and Mercury vapor, alongside rare-earth phosphors (Eu, Tb). You can use the sharp Mercury emission lines to perfectly calibrate your camera to Nanometers.</p>
        <div id="cfl-chartdiv" style="width: 100%; height: 300px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg);"></div>
    </div>
</div>

<div class="ov" id="ov-import-wizard">
    <div class="modal" style="width: 800px; max-width: 95vw;">
        <h3><i class="fa-solid fa-file-import"></i> Data Import Wizard</h3>
        <p class="info" id="wizard-file-count" style="margin-bottom: 15px;">Previewing formatting for 1 file.</p>
        
        <div style="display: grid; grid-template-columns: 250px 1fr; gap: 20px;">
            <div style="background: rgba(0,0,0,0.1); padding: 12px; border: 1px solid var(--border); border-radius: 4px;">
                <div class="fg">
                    <label class="fl">Separator / Delimiter</label>
                    <select class="fs" id="wiz-delim">
                        <option value="auto" selected>Auto-Detect</option>
                        <option value=",">Comma (,)</option>
                        <option value="\t">Tab</option>
                        <option value=" ">Space</option>
                        <option value=";">Semicolon (;)</option>
                    </select>
                </div>
                
                <div class="fr2">
                    <div class="fg">
                        <label class="fl">Skip Top Rows</label>
                        <input type="number" class="fi" id="wiz-skip-top" value="0" min="0">
                    </div>
                    <div class="fg">
                        <label class="fl">Skip Bottom Rows</label>
                        <input type="number" class="fi" id="wiz-skip-bottom" value="0" min="0">
                    </div>
                </div>

                <div class="fr2">
                    <div class="fg">
                        <label class="fl" style="color: #58a6ff;">X Column</label>
                        <input type="number" class="fi" id="wiz-col-x" value="1" min="1" style="border-color: #58a6ff;">
                    </div>
                    <div class="fg">
                        <label class="fl" style="color: #3fb950;">Y Column</label>
                        <input type="number" class="fi" id="wiz-col-y" value="2" min="1" style="border-color: #3fb950;">
                    </div>
                </div>
            </div>

            <div style="background: var(--card); border: 1px solid var(--border); border-radius: 4px; display: flex; flex-direction: column; overflow: hidden; height: 300px;">
                <div style="padding: 6px 10px; background: var(--border2); font-size: 11px; font-family: var(--mono); color: var(--txtm); border-bottom: 1px solid var(--border);">
                    Live Preview (First 30 rows)
                </div>
                <div id="wiz-table-container" style="flex: 1; overflow: auto; padding: 10px; background: var(--bg);">
                    </div>
            </div>
        </div>

        <div class="mf" style="margin-top: 20px;">
            <button class="bc" data-ov="ov-import-wizard">Cancel</button>
            <button class="ba" id="btn-confirm-wizard">Import Data</button>
        </div>
    </div>
</div>

<div class="ov" id="ov-workflow">
<div class="modal" style="width: 750px; max-width: 95vw;">
  <h3 style="display: flex; justify-content: space-between; align-items: center;">
    <span><i class="fa-solid fa-route"></i> Raman Analysis Workflow</span>
    <button class="bc warn" onclick="closeModal('ov-workflow')" style="padding: 3px 8px;">✕</button>
  </h3>
  
  <p class="info" style="margin-bottom: 15px;">Inspired by standard chemometric practices, follow this blueprint to process raw data into high-level knowledge. Click a step to learn more.</p>

  <div id="workflow-path" style="display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin-bottom: 20px; padding: 15px; background: rgba(0,0,0,0.15); border: 1px solid var(--border); border-radius: 6px;">
      
      <button class="wf-step active" data-step="1"><i class="fa-solid fa-folder-open"></i><br>Load</button>
      <i class="fa-solid fa-arrow-right" style="color: var(--txtm); font-size: 12px;"></i>
      
      <button class="wf-step" data-step="2"><i class="fa-solid fa-wand-magic-sparkles"></i><br>Despike</button>
      <i class="fa-solid fa-arrow-right" style="color: var(--txtm); font-size: 12px;"></i>
      
      <button class="wf-step" data-step="3"><i class="fa-solid fa-ruler-horizontal"></i><br>Calibrate</button>
      <i class="fa-solid fa-arrow-right" style="color: var(--txtm); font-size: 12px;"></i>
      
      <button class="wf-step" data-step="4"><i class="fa-solid fa-arrows-down-to-line"></i><br>Baseline</button>
      <i class="fa-solid fa-arrow-right" style="color: var(--txtm); font-size: 12px;"></i>
      
      <button class="wf-step" data-step="5"><i class="fa-solid fa-wave-square"></i><br>Smooth</button>
      <i class="fa-solid fa-arrow-right" style="color: var(--txtm); font-size: 12px;"></i>
      
      <button class="wf-step" data-step="6"><i class="fa-solid fa-arrow-up-9-1"></i><br>Normalize</button>
      
      <button class="wf-step locked" data-step="7"><i class="fa-solid fa-project-diagram"></i><br>Explore</button>
      <i class="fa-solid fa-arrow-right" style="color: var(--txtm); font-size: 12px;"></i>
      
      <button class="wf-step locked" data-step="8"><i class="fa-solid fa-magnifying-glass-chart"></i><br>Match</button>
      <i class="fa-solid fa-arrow-right" style="color: var(--txtm); font-size: 12px;"></i>
      
      <button class="wf-step locked" data-step="9"><i class="fa-solid fa-chart-line"></i><br>Evaluate</button>
      <i class="fa-solid fa-arrow-right" style="color: var(--txtm); font-size: 12px;"></i>

      <button class="wf-step locked" data-step="10"><i class="fa-solid fa-floppy-disk"></i><br>Export</button>
  </div>

  <div style="display: flex; gap: 15px; background: var(--card); border: 1px solid var(--border); border-left: 4px solid #bc8cff; border-radius: 4px; padding: 15px; min-height: 120px; width: 100%;">
      
      <div id="wf-panel-content" style="width: 100%; display: flex;"></div>
      
  </div>

</div>
</div>

<div id="toast"><i class="fa-solid fa-lock"></i> You must be logged in to use this feature.</div>

<div id="doc-sb">
  <div style="padding: 14px 18px; height: 50px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); background: var(--card); flex-shrink: 0;">
    <span style="color: var(--txtbr); font-size: 13px; font-weight: 600; font-family: var(--mono); letter-spacing: 0.05em;"><i class="fa-solid fa-book"></i> RDRS SpectraLib Documentation</span>
    <button id="btn-close-doc" style="background:var(--hover); border:1px solid var(--border); border-radius:4px; color:var(--txtm); cursor:pointer; width:24px; height:24px; display:flex; align-items:center; justify-content:center; transition:0.2s;">✕</button>
  </div>
  
  <div style="padding: 14px 18px; border-bottom: 1px solid var(--border2); flex-shrink: 0;">
    <input type="text" id="doc-search" class="fi" placeholder="Search documentation...">
  </div>
  
  
<div id="doc-content" style="flex:1; overflow-y:auto; padding: 18px;">
    
    <div class="doc-sec" id="doc-intro">
      <h4 style="color: var(--txtbr);">About RDRS SpectraLib</h4>
      <p>A comprehensive, instrument-grade web application designed for the visualization, advanced processing, and high-speed mathematical matching of Raman and infrared spectra. Built to process proprietary laboratory data alongside massive open-source reference libraries.</p>
      <p><span style="color: var(--ok); font-weight: 600;"><i class="fa-solid fa-lock"></i> Data Privacy Guarantee:</span> All spectrum parsing and processing happens completely locally in your browser. Your raw data files and spectra are <b>never</b> uploaded, saved, or collected by RDRS SpectraLib server.</p>
      
      <div style="margin-top: 15px; padding: 12px; background: rgba(0,0,0,0.15); border-left: 3px solid var(--acc); border-radius: 4px;">
        <p style="margin-bottom: 8px; font-weight: 600; color: var(--txtbr); font-size: 13px;">Scientific Use & Citations</p>
        
        <p style="font-size: 11.5px; color: var(--txtm); margin-bottom: 8px; line-height: 1.5;">
            RDRS SpectraLib is provided as a free tool for the academic and scientific community. If you use RDRS SpectraLib in your scientific work, publications, or presentations, please reference the software as:
        </p>
        
        <div style="font-size: 11.5px; line-height: 1.5; color: var(--txtbr); margin-bottom: 12px; padding: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 3px; font-family: var(--sans);">
          Apopei A. I. 2026. RDRS SpectraLib - integrated spectral library & analysis web platform, version <span id="cite-version">v26.5.9a</span>, https://rdrs.uaic.ro
        </div>
        
        <ul style="padding-left: 16px; color: var(--txtm); font-size: 11px; line-height: 1.5; margin-bottom: 0;">
            <li>Please ensure you insert the current version number (found in the top right header).</li>
            <li>You may leave out the part in quotation marks.</li>
            <li><i>(And please, try to get the spelling right!)</i></li>
        </ul>
      </div>
      
      <div style="border-top: 1px solid var(--border); padding-top: 10px; margin-top: 10px;">
        <p style="font-weight: 600; color: var(--txtbr); margin-bottom: 6px;">Developed by Andrei Ionuț Apopei, PhD</p>
        <div style="display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-family: var(--mono);">
          <a href="mailto:andrei.apopei@uaic.ro" style="color: var(--txtm); text-decoration: none; transition: 0.2s;" onmouseover="this.style.color='var(--acc)'" onmouseout="this.style.color='var(--txtm)'"><i class="fa-solid fa-envelope"></i> andrei.apopei@uaic.ro</a>
          <a href="https://geology.uaic.ro/andrei.apopei/" target="_blank" rel="noopener noreferrer" style="color: var(--txtm); text-decoration: none; transition: 0.2s;" onmouseover="this.style.color='var(--acc)'" onmouseout="this.style.color='var(--txtm)'"><i class="fa-solid fa-globe"></i> geology.uaic.ro/andrei.apopei</a>
          <a href="https://www.linkedin.com/in/aiapopei/" target="_blank" rel="noopener noreferrer" style="color: var(--txtm); text-decoration: none; transition: 0.2s;" onmouseover="this.style.color='var(--acc)'" onmouseout="this.style.color='var(--txtm)'"><i class="fa-solid fa-briefcase"></i> linkedin.com/in/aiapopei</a>
        </div>
      </div>
    </div>

    <div style="margin-top: 10px; padding: 10px; background: rgba(210, 153, 34, 0.1); border-left: 3px solid var(--warn); border-radius: 4px;">
      <p style="margin-bottom: 0; font-size: 11px; color: var(--txtbr); line-height: 1.4;">
        <span class="doc-lock-badge" style="margin-left: 0; margin-right: 6px;"><i class="fa-solid fa-lock"></i> Account Required</span>
        Features marked with this badge require a verified researcher account due to server compute limits and database copyright protections.
      </p>
    </div>

    <div class="doc-sec" id="doc-workflow">
      <h4 style="color: var(--txtbr);">Basic Workflow (Multiple Spectra)</h4>
      <p>RDRS SpectraLib is designed to handle dozens of spectra simultaneously. When you open any processing tool (like Smooth or Baseline), you will see a list of all your loaded spectra.</p>
      <ol style="padding-left: 20px; color: var(--txtm); font-size: 11.5px; line-height: 1.5;">
        <li><b>Check the boxes</b> next to the spectra you want to process. (Visible spectra in the chart are checked by default).</li>
        <li>Select your settings and click <b>Apply</b>.</li>
        <li>By default, RDRS SpectraLib keeps your original data and creates a brand new, processed copy with a tag (like <code>[SG]</code> or <code>[Cut]</code>) added to the name.</li>
      </ol>
    </div>

    <div class="doc-sec" id="doc-protection">
      <h4 style="color: #f85149;"><i class="fa-solid fa-shield-halved"></i> Data Protection & Export Restrictions</h4>
      <p>RDRS SpectraLib operates under strict licensing agreements with external providers (such as RRUFF™ and ROD). To protect the intellectual property of these databases, certain restrictions are enforced:</p>
      
      <ul style="padding-left: 20px; color: var(--txtm); font-size: 11px; margin-bottom: 8px; line-height: 1.4;">
        <li style="margin-bottom: 4px;"><b style="color:var(--txtbr);">Export Block:</b> Reference spectra loaded from the Database or generated via the Match tool cannot be exported as raw data files (CSV, TXT, or JCAMP-DX).</li>
        <li style="margin-bottom: 4px;"><b style="color:var(--txtbr);">Derived Protection:</b> Any spectrum created by processing a reference file (e.g., Smoothing, Baseline Correction, or Averaging a reference) inherits this protection and remains locked.</li>
        <li style="margin-bottom: 4px;"><b style="color:var(--txtbr);">Project Saves:</b> When saving a Project (.json), protected reference spectra are automatically stripped from the file to prevent unauthorized redistribution of raw database arrays.</li>
      </ul>

      <div style="margin-top: 8px; padding: 10px; background: rgba(56, 139, 253, 0.1); border-left: 3px solid var(--acc); border-radius: 4px;">
        <p style="margin-bottom: 0; font-size: 10.5px; color: var(--txtbr); line-height: 1.4;">
          <i class="fa-solid fa-circle-info"></i> <b>Note:</b> These restrictions apply <b>ONLY</b> to database references. Your own uploaded laboratory data remains fully exportable and accessible at all times. You can always include reference spectra in your <b>Professional PDF Reports</b> for publication and visual comparison.
        </p>
      </div>
    </div>

    <div class="doc-sec" id="doc-db">
      <h4 style="color: #ff7b72;"><i class="fa-solid fa-database"></i> Reference Database <span class="doc-lock-badge"><i class="fa-solid fa-lock"></i></span></h4>
      <p>Load pure, verified reference spectra directly into your chart for visual comparison.</p>
      <p><b>How to use:</b> Type a mineral name (e.g., "Quartz") into the Global Search, or use the dropdowns to browse by Technique and Class. Check the boxes of the minerals you want, and click <b>Add to Chart</b>. Hovering over a result will show a live preview overlay.</p>
      
      <div style="margin-top: 12px; padding: 10px; background: rgba(0,0,0,0.15); border-left: 3px solid var(--acc); border-radius: 4px;">
        <p style="margin-bottom: 6px; font-weight: 600; color: var(--txtbr);">Data Sources & Citations</p>
        <ul style="margin-bottom: 0; padding-left: 15px;">
          <li style="margin-bottom: 8px;">
            <b style="color:var(--txtbr);">RRUFF Project:</b> A comprehensive collection of 14,000+ Raman and infrared spectra of minerals, provided by the University of Arizona. When publishing data analyzed using these reference matches, please cite:
            <div style="font-size: 9.5px; line-height: 1.4; color: var(--txtm); margin-top: 4px; padding: 4px 0 0 8px; border-left: 1px solid var(--border);">
              <i>Lafuente, B., Downs, R. T., Yang, H., & Stone, N. (2015). The power of databases: the RRUFF project. Highlights in Mineralogical Crystallography, T Armbruster and R M Danisi, Eds., Berlin, Germany, W. De Gruyter, 1–30.</i>
            </div>
          </li>
          <li style="margin-bottom: 8px;">
            <b style="color:var(--txtbr);">Raman Open Database (ROD):</b> An interconnected open-access resource for Raman spectroscopy and X-ray diffraction material identification. Please cite:
            <div style="font-size: 9.5px; line-height: 1.4; color: var(--txtm); margin-top: 4px; padding: 4px 0 0 8px; border-left: 1px solid var(--border);">
              <i>El Mendili, Y., Vaitkus, A., Merkys, A., Gražulis, S., Chateigner, D., Mathevet, F., ... & Le Guen, M. (2019). Raman Open Database: first interconnected Raman–X-ray diffraction open-access resource for material identification. Applied Crystallography, 52(3), 618-625.</i>
            </div>
          </li>
          <li style="margin-bottom: 8px;">
            <b style="color:var(--txtbr);">USGS Spectral Library:</b> A collection of 2,456 UV-VIS-NIR-MIR-FIR reflectance spectra of rocks and minerals, soil, vegetation, artificial materials, and organic compounds provided by the U.S. Geological Survey (splib07a). Please cite:
            <div style="font-size: 9.5px; line-height: 1.4; color: var(--txtm); margin-top: 4px; padding: 4px 0 0 8px; border-left: 1px solid var(--border);">
              <i>Kokaly, R.F., Clark, R.N., Swayze, G.A., Livo, K.E., Hoefen, T.M., Pearson, N.C., Wise, R.A., Benzel, W.M., Lowers, H.A., Driscoll, R.L., and Klein, A.J., 2017, USGS Spectral Library Version 7 Data: U.S. Geological Survey data release, https://dx.doi.org/10.5066/F7RR1WDJ.</i>
            </div>
          </li>
          <li style="margin-bottom: 8px;">
            <b style="color:var(--txtbr);">SWGDRUG IR Library:</b> A collection of FTIR-ATR absorbance spectra of drug ingredients, excipients, and related compounds compiled by the Scientific Working Group for the Analysis of Seized Drugs. Please cite:
            <div style="font-size: 9.5px; line-height: 1.4; color: var(--txtm); margin-top: 4px; padding: 4px 0 0 8px; border-left: 1px solid var(--border);">
              <i>Scientific Working Group for the Analysis of Seized Drugs (SWGDRUG). IR Library. Retrieved from https://swgdrug.org/ir.htm</i>
            </div>
          </li>
          <li style="margin-bottom: 8px;">
            <b style="color:var(--txtbr);">Primpke Microplastics Library:</b> A reference database for the automated analysis of microplastic samples based on Fourier transform infrared (FTIR) spectroscopy. Please cite:
            <div style="font-size: 9.5px; line-height: 1.4; color: var(--txtm); margin-top: 4px; padding: 4px 0 0 8px; border-left: 1px solid var(--border);">
              <i>Primpke, S., Wirth, M., Lorenz, C. et al. Reference database design for the automated analysis of microplastic samples based on Fourier transform infrared (FTIR) spectroscopy. Anal Bioanal Chem 410, 5131–5141 (2018). https://doi.org/10.1007/s00216-018-1156-x.</i>
            </div>
          </li>
          <li style="margin-bottom: 8px;">
            <b style="color:var(--txtbr);">Kimmel Archaeological Library:</b> A reference library of FTIR absorbance spectra of natural and biogenic materials of archaeological interest. Please cite:
            <div style="font-size: 9.5px; line-height: 1.4; color: var(--txtm); margin-top: 4px; padding: 4px 0 0 8px; border-left: 1px solid var(--border);">
              <i>Weiner, S. (2010). Microarchaeology: Beyond the Visible Archaeological Record. Cambridge University Press. Spectra provided by the Kimmel Center for Archaeological Science, Weizmann Institute of Science, Israel.</i>
            </div>
          </li>
          <li style="margin-bottom: 8px;">
            <b style="color:var(--txtbr);">FLOPP & FLOPP-e Libraries:</b> Open-access μATR-FTIR spectral libraries of standard plastic particles and weathered microplastics recovered from environmental samples. Please cite:
            <div style="font-size: 9.5px; line-height: 1.4; color: var(--txtm); margin-top: 4px; padding: 4px 0 0 8px; border-left: 1px solid var(--border);">
              <i>De Frond, H., Rubinovitz, R. and Rochman, C.M., 2021. μATR-FTIR Spectral Libraries of Plastic Particles (FLOPP and FLOPP-e) for the Analysis of Microplastics. Analytical Chemistry, 93(48), pp.15878-15885.</i>
            </div>
          </li>
          <li style="margin-bottom: 8px;">
            <b style="color:var(--txtbr);">PhotochemCAD Database:</b> A database of absorption and fluorescence spectra of >300 common compounds, including dyes, aromatic hydrocarbons, and biomolecules. Please cite:
            <div style="font-size: 9.5px; line-height: 1.4; color: var(--txtm); margin-top: 4px; padding: 4px 0 0 8px; border-left: 1px solid var(--border);">
              <i>Taniguchi, M. and Lindsey, J.S. (2018), Database of Absorption and Fluorescence Spectra of &gt;300 Common Compounds for use in PhotochemCAD. Photochem Photobiol, 94: 290-327. https://doi.org/10.1111/php.12860</i>
            </div>
          </li>
          <li style="margin-bottom: 8px;">
            <b style="color:var(--txtbr);">SLoPP & SLoPP-E Libraries:</b> Application-based and spectral libraries of Raman spectroscopy parameters specific to microplastics, including particles aged in the environment. Please cite:
            <div style="font-size: 9.5px; line-height: 1.4; color: var(--txtm); margin-top: 4px; padding: 4px 0 0 8px; border-left: 1px solid var(--border);">
              <i>Munno, K., De Frond, H., O'Donnell, B. and Rochman, C.M., 2020. Increasing the accessibility for characterizing microplastics: introducing new application-based and spectral libraries of plastic particles (SLoPP and SLoPP-E). Analytical chemistry, 92(3), pp.2443-2451.</i>
            </div>
          </li>
          <li style="margin-bottom: 8px;">
            <b style="color:var(--txtbr);">PharmExcipients Database:</b> A low-wavenumber Raman spectral database of 75 commonly used pharmaceutical excipients divided into groups based on chemical composition. Please cite:
            <div style="font-size: 9.5px; line-height: 1.4; color: var(--txtm); margin-top: 4px; padding: 4px 0 0 8px; border-left: 1px solid var(--border);">
              <i>Bērziņš, K., Sales, R. E., Barnsley, J. E., Walker, G., Fraser-Miller, S. J., & Gordon, K. C. (2020). Low-wavenumber Raman spectral database of pharmaceutical excipients. Vibrational spectroscopy, 107, 103021.</i>
            </div>
          </li>
          <li>
            <b style="color:var(--txtbr);">RDRS SpectraLib Database:</b> Our proprietary internal database. Currently under active development (spectra organization and processing phase).
            <div style="font-size: 9.5px; line-height: 1.4; color: var(--txtm); margin-top: 4px; padding: 4px 0 0 8px; border-left: 1px solid var(--border);">
              <i>Buzgar N., Apopei A. I., & Buzatu A. (2009). Romanian Database of Raman Spectroscopy (https://rdrs.uaic.ro).</i>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="doc-sec" id="doc-match">
      <h4 style="color: #ff7b72;"><i class="fa-solid fa-magnifying-glass-chart"></i> Match Spectrum to Database <span class="doc-lock-badge"><i class="fa-solid fa-lock"></i></span></h4>
      <p>Identify an unknown sample by comparing it against our 11,400+ reference library using traditional mathematical algorithms or advanced Artificial Intelligence.</p>
      
      <p style="margin-top: 8px;"><b>Available Algorithms:</b></p>
      <ul style="padding-left: 20px; color: var(--txtm); font-size: 11px; margin-bottom: 8px; line-height: 1.4;">
        <li style="margin-bottom: 4px;"><b>Machine Learning:</b> Features models trained specifically on pure Raman, Infrared (FT-IR), and <b>X-Ray Diffraction (XRD)</b> datasets. Achieves high validation accuracy by intelligently ignoring noise and background humps. <i>Best for identifying the single dominant phase in a sample.</i></li>
        <li style="margin-bottom: 4px;"><b style="color:var(--acc);">AI: Multi-Phase Mixture (Experimental):</b> A multi-label neural network designed to untangle and identify multiple overlapping minerals in a single mixed rock. <i>(Available for standard Raman and XRD).</i> Use the <b>Sensitivity Slider</b> to adjust detection limits: lower it to find hidden trace minerals, or raise it to prevent false positives.</li>
        <li style="margin-bottom: 4px;"><b>1st Derivative:</b> The traditional gold-standard. Mathematically strips away sloped baselines to match pure peak inflection points.</li>
        <li style="margin-bottom: 4px;"><b>Pearson / Cosine:</b> General curve shape and intensity correlation matchers.</li>
        <li><b>Shift-Invariant (X-Axis Drift):</b> Uses mathematical cross-correlation to perfectly match spectra even if your spectrometer's laser suffered from thermal drift, completely avoiding the need to manually align data first!</li>
      </ul>

      <p><b>How to use:</b></p>
      <ol style="padding-left: 20px; color: var(--txtm); font-size: 11.5px; line-height: 1.5; margin-bottom: 8px;">
        <li>Select <b>exactly one</b> unknown spectrum from the list.</li>
        <li>Select the correct <b>Database Category</b> to route your data to the appropriate AI brain. <i>(Ensure your X-axis units match the required format for that technique!)</i></li>
        <li>Select your algorithm. <i>(If using the Multi-Phase Mixture, adjust your Sensitivity threshold).</i></li>
        <li>Click <b>Find Best Matches</b>.</li>
      </ol>

      <div style="margin-top: 8px; padding: 8px; background: rgba(0,0,0,0.15); border-left: 3px solid var(--warn); border-radius: 4px; margin-bottom: 10px;">
        <p style="margin-bottom: 0; font-size: 10.5px; color: var(--txtm); line-height: 1.4;">
          <b style="color:var(--txtbr);"><i class="fa-solid fa-crop-simple"></i> Restrict X-Axis Range:</b> Need to focus the match on a specific peak cluster? Check this box and use "Get View" to snap to your current zoom. <span style="color:var(--warn); font-weight:600;">Note: This automatically disables AI models.</span>
        </p>
      </div>

      <div style="margin-top: 8px; padding: 8px; background: rgba(0,0,0,0.15); border-left: 3px solid var(--warn); border-radius: 4px; margin-bottom: 10px;">
        <p style="margin-bottom: 0; font-size: 10.5px; color: var(--txtm); line-height: 1.4;">
          <b style="color:var(--txtbr);"><i class="fa-solid fa-brain"></i> Explainable AI (Grad-CAM):</b> Want to know <i>why</i> the AI made its prediction? Check the <b>Explain AI Decision</b> box before running a match to generate a visual heatmap behind your spectrum, highlighting the exact physical peaks the model focused on. <span style="color:var(--warn); font-weight:600;">Note: This feature is strictly available for AI algorithms.</span>
        </p>
      </div>
      
      <div style="margin-top: 8px; padding: 8px; background: rgba(0,0,0,0.15); border-left: 3px solid var(--warn); border-radius: 4px;">
        <p style="margin-bottom: 0; font-size: 10.5px; color: var(--txtm); line-height: 1.4;">
          <b style="color:var(--txtbr);"><i class="fa-solid fa-lightbulb"></i> Pro Tip for Mixtures:</b> The Multi-Phase AI is highly sensitive to background fluorescence and amorphous humps. Always run an <b>Auto Baseline (ALS)</b> on your sample before matching to ensure maximum accuracy!
        </p>
      </div>

      <div style="margin-top: 8px; padding: 8px; background: rgba(0,0,0,0.15); border-left: 3px solid var(--warn); border-radius: 4px; margin-bottom: 10px;">
        <p style="margin-bottom: 0; font-size: 10.5px; color: var(--txtm); line-height: 1.4;">
          <b style="color:var(--txtbr);"><i class="fa-solid fa-layer-group"></i> Interactive Multi-Phase Match:</b> Dealing with a complex mixture? Click the button at the bottom of the tool to launch a dedicated dashboard where you can visually click unexplained peaks in the residual and iteratively subtract overlapping compounds using intelligent, dynamic scaling.
        </p>
      </div>

      <p class="info" style="margin-top: 10px;">Note: Results are paginated. You can load up to the top 50 closest matches by clicking "Show Next 10 Results" at the bottom of the list.</p>
    </div>

    <div class="doc-sec" id="doc-galaxy">
      <h4 style="color: #ff7b72;"><i class="fa-solid fa-diagram-project"></i> Spectra Galaxy <span class="doc-lock-badge"><i class="fa-solid fa-lock"></i></span></h4>
      <p>Visualize the entire reference database as an interactive 2D map using <b>UMAP</b> (Uniform Manifold Approximation and Projection). Minerals with similar molecular structures and spectral fingerprints naturally cluster together into physical "galaxies".</p>
      
      <p style="margin-top: 8px;"><b>Available Analytics & Color Maps:</b></p>
      <ul style="padding-left: 20px; color: var(--txtm); font-size: 11px; margin-bottom: 8px; line-height: 1.4;">
        <li style="margin-bottom: 4px;"><b>Chemical Superclass (Dana):</b> Categorizes minerals into standard families (Silicates, Carbonates, Sulfates, Oxides, etc.) based on their elemental composition.</li>
        <li style="margin-bottom: 4px;"><b>Primary Peak Position:</b> Applies a continuous thermal heatmap based on the location of the absolute highest intensity peak in the spectrum.</li>
        <li style="margin-bottom: 4px;"><b>Spectral Entropy:</b> Maps the mathematical "messiness" or complexity of the signal. Clean, sharp spectra contrast heavily against highly fluorescent data or complex mixtures.</li>
        <li><b>Center of Mass:</b> Maps the weighted centroid of the spectral curve, highlighting regions where the bulk of the scattering or diffraction occurs.</li>
      </ul>

      <p><b>How to use:</b></p>
      <ol style="padding-left: 20px; color: var(--txtm); font-size: 11.5px; line-height: 1.5; margin-bottom: 8px;">
        <li>Select <b>one</b> unknown spectrum from your workspace to automatically project it onto the map as a <b style="color:#eab308;">Yellow Star (⭐)</b>. <i>(Or select none to freely browse the database).</i></li>
        <li>Select the correct <b>Instrument Category</b> (Raman, FT-IR, or XRD) from the Galaxy Controls to load the corresponding universe.</li>
        <li>Use the <b>Color Map By</b> dropdown to analyze the clusters, and drag/scroll to pan and zoom around the map.</li>
        <li>Click any dot in the cloud to instantly compare its database reference against your target in the bottom-right <b>1D Spectrum Comparison</b> panel.</li>
      </ol>
      
      <div style="margin-top: 8px; padding: 8px; background: rgba(0,0,0,0.15); border-left: 3px solid var(--warn); border-radius: 4px;">
        <p style="margin-bottom: 0; font-size: 10.5px; color: var(--txtm); line-height: 1.4;">
          <b style="color:var(--txtbr);"><i class="fa-solid fa-lightbulb"></i> Pro Tip for Visual Matching:</b> In the 1D Comparison panel, both your target spectrum and the database reference are <b>auto-normalized from 0 to 1</b>. This allows you to perfectly compare peak alignments and curve shapes, even if the absolute raw intensities are drastically different!
        </p>
      </div>

      <p class="info" style="margin-top: 10px;">Note: The points physically closest to your Target Star on the 2D map are mathematically your most likely phase matches. If you lose your place while panning, click "Locate My Target Spectrum" to snap the camera back.</p>
    </div>
	
    <div class="doc-sec" id="doc-digitizer">
      <h4 style="color: #79c0ff;"><i class="fa-solid fa-crosshairs"></i> Plot Digitizer</h4>
      <p>A massive quantity of historical and technical data is only available as chart images in published PDFs. The Plot Digitizer uses a combination of computer vision techniques and manual inputs to recover raw data arrays from these images.</p>
      
      <div style="margin-top: 12px; padding: 10px; background: rgba(0,0,0,0.15); border-left: 3px solid var(--acc); border-radius: 4px; margin-bottom: 12px;">
        <p style="margin-bottom: 6px; font-weight: 600; color: var(--txtbr); font-size: 11px;">Phase 1: Axes Calibration</p>
        <p style="color: var(--txtm); font-size: 10.5px; line-height: 1.4; margin-bottom: 6px;">
            Before extracting data, you must map the image pixels to real data values. You must specify four points: X1, X2 on the X-axis, and Y1, Y2 on the Y-axis.
        </p>
        <ul style="padding-left: 15px; color: var(--txtm); font-size: 10.5px; margin-bottom: 0; line-height: 1.4;">
            <li style="margin-bottom: 3px;">Click <b>Set X1</b>, then click a tick mark on the left side of the chart's X-axis. Type the known data value into the box.</li>
            <li style="margin-bottom: 3px;">Repeat this for <b>X2</b> (right side of X-axis), <b>Y1</b> (bottom of Y-axis), and <b>Y2</b> (top of Y-axis).</li>
            <li><b style="color:var(--txtbr);">Pro-Tip:</b> For best accuracy during the digitization process, pick points that are as far away from each other as possible.</li>
        </ul>
      </div>

      <p style="margin-bottom: 6px; font-weight: 600; color: var(--txtbr); font-size: 11px;">Phase 2: Data Extraction</p>
      <ul style="padding-left: 20px; color: var(--txtm); font-size: 11.5px; line-height: 1.5; margin-bottom: 12px;">
        <li style="margin-bottom: 6px;"><b style="color:var(--acc);">Manual Mode:</b> Click <b>Add Points Mode</b> and manually click along the curve to extract data points. Use the Undo or Clear buttons to adjust your output.</li>
        <li style="margin-bottom: 6px;"><b style="color:var(--acc);">Auto (AI) Mode:</b> Uses computer vision to automatically trace colored lines.
            <ul style="padding-left: 15px; margin-top: 4px;">
                <li style="margin-bottom: 3px;"><b>1. Mask:</b> Use the highlighter to paint over the specific curve you want. This limits the AI's search to your specified region, ignoring intersecting lines and text.</li>
                <li style="margin-bottom: 3px;"><b>2. Color Target:</b> Click the eye-dropper and select the exact color of the curve from the image.</li>
                <li><b>3. Run:</b> Click Run Auto-Extraction. The AI will place points along the center of the line.</li>
            </ul>
        </li>
      </ul>

      <p style="margin-bottom: 6px; font-weight: 600; color: var(--txtbr); font-size: 11px;">Phase 3: Generate Spectrum</p>
      <p style="color: var(--txtm); font-size: 10.5px; line-height: 1.4; margin-bottom: 0;">
          Once you are satisfied with the extracted points, click the green <b>Generate Spectrum</b> button in the top right. RDRS SpectraLib will automatically convert your pixels into physical units using your calibration data and push the new spectrum directly into your main workspace for analysis!
      </p>
    </div>

	<div class="doc-sec" id="doc-prefs">
      <h4 style="color: #79c0ff;"><i class="fa-solid fa-gear"></i> Advanced Plot Configuration</h4>
      <p>RDRS SpectraLib gives you deep, publication-level control over how your data is rendered on the screen. These settings are cached in your browser so your preferred lab aesthetic loads automatically every time.</p>
      
      <ul style="padding-left: 20px; color: var(--txtm); font-size: 11.5px; line-height: 1.5;">
        <li style="margin-bottom: 6px;"><b style="color:var(--txtbr);">Global - Rendering Engine:</b> <b>SVG</b> is the default engine (crisp lines, perfect for PDF exports). <b>WebGL</b> offloads rendering to your GPU for 60fps panning when analyzing massive datasets (50+ spectra), though filled areas may show minor artifacts.</li>
        <li style="margin-bottom: 6px;"><b style="color:var(--txtbr);">Global - Mirror Axes:</b> Draws a solid bounding box around the top and right sides of the chart, replicating your tick styles. This is the standard aesthetic for most scientific journals.</li>
        <li style="margin-bottom: 6px;"><b style="color:var(--txtbr);">Axis Scales (Linear vs Logarithmic):</b> Logarithmic scales are incredibly useful when a massive fluorescence hump dwarfs a tiny Raman signal. <span style="color:var(--warn);"><i>Note: Log scales require strictly positive data.</i></span></li>
        <li><b style="color:var(--txtbr);">Ticks & Grids:</b> Independently toggle gridlines, axis lines, and minor ticks for the X and Y axes. You can also change the direction of major ticks (Inside, Outside, Cross, or Hidden) to match specific publication formatting rules.</li>
      </ul>

      <div style="margin-top: 8px; padding: 8px; background: rgba(0,0,0,0.15); border-left: 3px solid var(--acc); border-radius: 4px; margin-bottom: 10px;">
        <p style="margin-bottom: 0; font-size: 10.5px; color: var(--txtm); line-height: 1.4;">
          <b style="color:var(--txtbr);"><i class="fa-solid fa-lightbulb"></i> Pro-Tip:</b> If you ever accidentally hide your axes or mess up your chart layout, click <b>File &gt; Reset Settings</b> at the top of the screen to instantly restore the default factory view!
        </p>
      </div>
    </div>

    <div class="doc-sec" id="doc-workspace">
      <h4 style="color: #79c0ff;"><i class="fa-solid fa-list-check"></i> Workspace & Sidebar Management</h4>
      <p>Manage large datasets efficiently using the built-in file explorer tools.</p>
      <ul style="padding-left: 20px; color: var(--txtm); font-size: 11.5px; line-height: 1.5;">
        <li style="margin-bottom: 6px;"><i class="fa-solid fa-folder-plus"></i> <b style="color:var(--acc);">Folders:</b> Click the <b>New</b> button at the bottom of the sidebar to create virtual folders. Grouping spectra allows you to instantly toggle visibility (<i class="fa-solid fa-eye"></i>) or delete an entire dataset with a single click.</li>
        <li style="margin-bottom: 6px;">☰ <b style="color:var(--acc);">Drag & Drop:</b> Reordering is permanently unlocked! Click and drag the handle next to any spectrum to arrange your list, or drop it onto a folder header to organize it. The chart's layering updates dynamically to match your list.</li>
        <li style="margin-bottom: 6px;"><i class="fa-solid fa-magnifying-glass"></i> <b style="color:var(--acc);">Live Filter:</b> When 2 or more spectra are loaded, a search bar appears at the top of the sidebar. Type any part of a name to instantly filter your list. Folders containing matching spectra will automatically expand to show you the results.</li>
        <li style="margin-bottom: 6px;"><i class="fa-solid fa-pen"></i> <b style="color:var(--acc);">Renaming:</b> Click the pen icon next to any spectrum or folder to rename it inline. Press <b>Enter</b> to save.</li>
        <li><i class="fa-solid fa-file-signature"></i> <b style="color:var(--acc);">Batch Rename:</b> Click the signature icon on any folder header to rename all spectra inside it simultaneously. Use dynamic variables like <code>&lt;Name&gt;</code> and <code>&lt;Inc 0Nr&gt;</code> to instantly generate organized naming patterns for your clusters.</li>
      </ul>
    </div>

    <div class="doc-sec" id="doc-display">
      <h4 style="color: #79c0ff;"><i class="fa-solid fa-desktop"></i> Display Settings</h4>
      <p>Visual toggles to customize your workspace appearance. These do not mathematically alter raw data arrays.</p>
      <ul style="padding-left: 20px; color: var(--txtm); font-size: 11.5px; line-height: 1.5;">
        <li style="margin-bottom: 4px;"><i class="fa-solid fa-right-left"></i> <b style="color:var(--acc);">Flip X:</b> Reverses the X-axis direction.</li>
        <li style="margin-bottom: 4px;"><i class="fa-solid fa-list"></i> <b style="color:var(--acc);">Legend:</b> Cycles the chart legend between Outside, Floating, and Hidden.</li>
        <li style="margin-bottom: 4px;"><i class="fa-solid fa-table-cells"></i> <b style="color:var(--acc);">Grid:</b> Toggles background layout gridlines.</li>
        <li style="margin-bottom: 4px;"><i class="fa-solid fa-expand"></i> <b style="color:var(--acc);">Reset View:</b> Instantly restores default zoom, offsets, tools, and display states.</li>
        <li style="margin-bottom: 4px;"><i class="fa-solid fa-chart-line"></i> <b style="color:var(--acc);">Lines:</b> Cycles the rendering engine between continuous Lines, independent Points, or Both. Use <b>Width</b> to adjust thickness.</li>
        <li style="margin-bottom: 4px;"><b style="color:var(--acc);">Labels:</b> Adjusts the font size of detected peak annotations.</li>
        <li><i class="fa-solid fa-fill-drip"></i> <b style="color:var(--acc);">Fill:</b> Shades the area under the curve. Reveals a dynamic UV-Vis rainbow gradient if your X-axis is set to [nm].</li>
      </ul>
    </div>

    <div class="doc-sec" id="doc-interactive">
      <h4 style="color: #eab308;"><i class="fa-solid fa-hand-pointer"></i> Interactive Tools</h4>
      <p>Tools that modify the chart's physical layout and active tracking.</p>
      <ul style="padding-left: 20px; color: var(--txtm); font-size: 11.5px; line-height: 1.5;">
        <li style="margin-bottom: 6px;"><i class="fa-solid fa-layer-group"></i> <b style="color:var(--acc);">Stack:</b> Vertically separates overlapping spectra by a standard offset (Δ).</li>
        <li style="margin-bottom: 6px;"><i class="fa-solid fa-arrows-up-to-line"></i> <b style="color:var(--acc);">Auto-Norm:</b> Temporarily min-max scales all spectra to a 0-1 range for visual comparison without changing the underlying raw detector counts.</li>
        <li style="margin-bottom: 6px;"><i class="fa-solid fa-arrows-up-down"></i> <b style="color:var(--acc);">Drag Y:</b> Activate this to physically click and drag spectra vertically across the chart for rapid visual alignment.</li>
        <li style="margin-bottom: 6px;"><i class="fa-solid fa-crosshairs"></i> <b style="color:var(--acc);">Cursor:</b> Click anywhere on the chart to drop vertical tracking lines. Useful for identifying peak boundaries before integration.</li>
        <li style="margin-bottom: 6px;"><i class="fa-solid fa-mountain-sun"></i> <b style="color:var(--acc);">Ridgeline:</b> Creates a pseudo-3D overlapping "mountain" effect. Spectra are automatically normalized to [0,1] and filled to their baseline. Perfect for visualizing peak shifts across massive datasets. Adjust the <b style="color:var(--txtbr);">Δ</b> (Stack Offset) input to control the exact amount of overlap!</li>
        <li style="margin-bottom: 6px;"><i class="fa-solid fa-map"></i> <b style="color:var(--acc);">Heatmap:</b> Instantly transforms all visible spectra into a dense 2D color contour plot. Perfect for visualizing temperature series or spatial mapping.</li>
        <li style="margin-bottom: 6px;"><i class="fa-solid fa-paintbrush"></i> <b style="color:var(--acc);">Freehand Edit:</b> Danger! Manually "paint" over massive artifacts to force the data down to zero. <i>Note: This permanently alters the raw data points.</i></li>
        <li><i class="fa-solid fa-bezier-curve"></i> <b style="color:var(--acc);">Manual Baseline:</b> Click to physically drop and draw a custom baseline under your peaks. Turn on the <i class="fa-solid fa-magnet"></i> <b>Snap</b> magnet to lock your clicks directly to the true data line.</li>
      </ul>
    </div>

    <div class="doc-sec" id="doc-cut">
      <h4 style="color: #bc8cff;"><i class="fa-solid fa-scissors"></i> Cut Range & <i class="fa-solid fa-arrows-up-down"></i> Scale Y</h4>
      <ul>
        <li><b style="color:var(--acc);">Cut Range:</b> Deletes all data outside of the X-bounds you provide. Excellent for removing noisy detector edges.</li>
        <li><b style="color:var(--acc);">Scale:</b> Multiplies the intensity by a specific factor. Note: You can also visually scale spectra without altering the raw data by changing the <code>×Scale</code> box in the left sidebar next to the spectrum name!</li>
      </ul>
    </div>

    <div class="doc-sec" id="doc-interp">
      <h4 style="color: #bc8cff;"><i class="fa-solid fa-chart-line"></i> Data Interpolation (Resampling)</h4>
      <p>Increases or decreases the data density of your spectrum and forces it onto a strict, uniform X-axis grid. <b>Note:</b> Interpolation does not increase the true optical resolution of your spectrometer; it is primarily used to align disparate datasets so they can be processed by matrix-based chemometrics (like PCA or 2D-COS).</p>
      
      <p style="margin-top: 8px; font-weight: 600; color: var(--txtbr); font-size: 11px;">Available Algorithms:</p>
      <ul style="padding-left: 20px; color: var(--txtm); font-size: 11.5px; line-height: 1.5;">
        <li style="margin-bottom: 6px;"><b style="color:var(--txtbr);">Akima Spline:</b> <span style="color:var(--ok);">The gold standard for spectroscopy.</span> A specialized monotone spline that resists overshooting. It perfectly smooths data while strictly preserving the local shape, preventing fake negative dips around sharp Raman peaks.</li>
        <li style="margin-bottom: 6px;"><b style="color:var(--txtbr);">Natural Cubic Spline:</b> Creates an extremely smooth polynomial curve. <span style="color:var(--warn);">Warning:</span> Susceptible to "Runge's Phenomenon" (Ringing). If you have a sharp peak next to a flat baseline, a cubic spline will mathematically overshoot and create an artificial negative crater at the base of the peak.</li>
        <li><b style="color:var(--txtbr);">Linear:</b> Simply draws straight lines between existing points. Mathematically safe with zero artifacts, but leaves low-density peaks looking like jagged triangles.</li>
      </ul>
      <p><b>How to use:</b> Enter a new Step Size (e.g., <code>1.0</code> for a point every 1 cm⁻¹). Leave the X Start and X End bounds blank to automatically use the spectrum's current limits.</p>
    </div>

    <div class="doc-sec" id="doc-zap">
      <h4 style="color: #bc8cff;"><i class="fa-solid fa-eraser"></i> Zap Peak (Excise)</h4>
      <p>Removes bad data points (like stubborn artifacts or saturated solvent peaks) and heals the gap with a clean, interpolated line.</p>
      <p><b>How to use:</b> Input the exact X-axis center of the bad peak, and how wide the cut should be. RDRS SpectraLib will delete the data in that window and draw a straight line connecting the two broken ends.</p>
    </div>

    <div class="doc-sec" id="doc-despike">
      <h4 style="color: #bc8cff;"><i class="fa-solid fa-wand-magic-sparkles"></i> Cosmic Ray Removal (Despiking)</h4>
      <p>Automatically detects and removes artificially sharp spikes caused by high-energy particles hitting the camera sensor.</p>
      <ul>
        <li><b>Derivative (Gradient) algorithm:</b> The industry standard. Identifies cosmic rays by hunting for near-vertical instantaneous slopes (which true Raman peaks do not have). Excellent for preserving sharp diamond or silicon peaks.</li>
        <li><b>Z-Score (Median) algorithm:</b> Best for broader artifacts or saturated pixels.</li>
      </ul>
      <p><b>Tip:</b> Keep <i class="fa-solid fa-circle"></i> <b>Live Preview</b> checked! The red dashed line will show you exactly what the cleaned spectrum looks like before you apply it.</p>
    </div>

    <div class="doc-sec" id="doc-align">
      <h4 style="color: #bc8cff;"><i class="fa-solid fa-align-center"></i> Spectral Alignment (Cross-Correlation)</h4>
      <p>Fixes instrument drift. Minor temperature changes in a laboratory can cause a spectrometer's laser to drift, shifting the X-axis slightly over time. If you run PCA or LCF on shifted peaks, the math will model the instrument drift instead of the actual chemical variance.</p>
      
      <p style="margin-top: 8px;"><b>The Math:</b> RDRS SpectraLib uses a <b>1st Derivative Global Cross-Correlation</b> algorithm. Instead of dynamically stretching or warping the X-axis (which destroys quantitative peak areas), this algorithm slides the <i>entire</i> spectrum left and right to find the perfect overlap with your anchor reference. This strictly preserves your physical peak shapes, FWHM, and Integration Areas.</p>

      <div style="margin-top: 8px; padding: 8px; background: rgba(0,0,0,0.15); border-left: 3px solid var(--acc); border-radius: 4px; margin-bottom: 10px;">
        <p style="margin-bottom: 0; font-size: 10.5px; color: var(--txtm); line-height: 1.4;">
          <b style="color:var(--txtbr);"><i class="fa-solid fa-lightbulb"></i> Pro-Tip: The Max Shift Parameter.</b> 
          If you try to align two completely different minerals, the algorithm might jump wildly to force two unrelated peaks to overlap. The <b>Maximum Allowed Shift</b> (default 50 points) restricts the math from searching too far. For standard thermal laser drift, a shift limit of 20 to 50 points is usually perfect.
        </p>
      </div>
    </div>

    <div class="doc-sec" id="doc-smooth">
      <h4 style="color: #bc8cff;"><i class="fa-solid fa-wave-square"></i> Smoothing</h4>
      <p>Reduces high-frequency detector noise. Selecting the right algorithm and window size is critical to reducing noise without artificially broadening your actual chemical peaks.</p>
      
      <p style="margin-top: 8px;"><b>Available Algorithms:</b></p>
      <ul style="padding-left: 20px; color: var(--txtm); font-size: 11.5px; line-height: 1.5; margin-bottom: 12px;">
        <li style="margin-bottom: 6px;"><b style="color:var(--txtbr);">Savitzky-Golay:</b> The gold standard for vibrational spectroscopy. It fits a local polynomial across the sliding window. <i>(Preserves sharp peak heights and widths much better than standard averaging. Lower polynomial order = smoother curve).</i></li>
        <li style="margin-bottom: 6px;"><b style="color:var(--txtbr);">Moving Average:</b> A traditional sliding filter. <b>Rectangular</b> weights all points in the window equally, while <b>Triangular</b> gives more weight to the center point (better for preserving peak tips).</li>
        <li style="margin-bottom: 6px;"><b style="color:var(--txtbr);">Percentile Filter:</b> A non-linear ranking filter. Setting it to <b>&lt;50%</b> creates a standard Median filter. Setting it lower (&lt;50%) is excellent for mathematically flattening out sharp cosmic rays or artificial spikes that ride on top of the true baseline.</li>
      </ul>

      <div style="padding: 10px; background: rgba(0,0,0,0.15); border-left: 3px solid var(--acc); border-radius: 4px;">
        <p style="margin-bottom: 0; font-size: 10.5px; color: var(--txtm); line-height: 1.4;">
          <b style="color:var(--txtbr);"><i class="fa-solid fa-layer-group"></i> Region-Specific Smoothing:</b> Don't blur pristine peaks just to fix a noisy detector tail! Enter an <b>X Start</b> and <b>X End</b> to apply the smoothing filter <i>only</i> to a specific noisy section of your spectrum. Leave the inputs completely blank to smooth the entire array.
        </p>
      </div>
    </div>

    <div class="doc-sec" id="doc-norm">
      <h4 style="color: #bc8cff;"><i class="fa-solid fa-arrow-up-9-1"></i> Normalization & Preprocessing</h4>
      <p>Mathematical scaling and scattering corrections to prepare your data for advanced chemometrics.</p>
      
      <ul style="padding-left: 20px; color: var(--txtm); font-size: 11.5px; line-height: 1.5; margin-top: 8px;">
        <li style="margin-bottom: 6px;"><b style="color:var(--txtbr);">0 → 1 / 0 → 100% (Min-Max):</b> Scales the Y-axis so the lowest point is 0 and the highest is 1 (or 100). <span style="color:var(--acc);">Essential before running Hierarchical Cluster Analysis (HCA)</span> so weak and strong acquisitions of the same mineral group together properly.</li>
        <li style="margin-bottom: 6px;"><b style="color:var(--txtbr);">Divide by Max:</b> Scales the highest peak to 1, but leaves the baseline wherever it naturally falls.</li>
        <li style="margin-bottom: 6px;"><b style="color:var(--txtbr);">SNV & MSC (Scatter Correction):</b> Standard Normal Variate and Multiplicative Scatter Correction eliminate physical baseline shifts and multiplicative scattering effects caused by sample surface roughness (e.g., in powders). <span style="color:var(--acc);">Highly recommended before PCA Clustering.</span></li>
        <li><b style="color:var(--txtbr);">Mean-Centering:</b> Subtracts the average of the dataset from every spectrum. <span style="color:var(--warn); font-weight:600;">Mandatory prerequisite before running Train & Predict (PLS-R/SVM) models.</span></li>
      </ul>
    </div>

    <div class="doc-sec" id="doc-base">
      <h4 style="color: #bc8cff;"><i class="fa-solid fa-arrows-down-to-line"></i> Automatic Baseline Correction</h4>
      <p>Removes thermal noise, fluorescence, or sloped backgrounds from your data.</p>
        <ul style="padding-left: 15px; margin-top: 4px; list-style-type: circle;">
            <li style="margin-bottom: 3px;"><b style="color:var(--txtbr);">ALS (Asymmetric):</b> The gold standard for massive fluorescent humps.</li>
            <li style="margin-bottom: 3px;"><b style="color:var(--txtbr);">Rolling Ball:</b> Acts as a morphological filter, perfectly tracing highly irregular or "wavy" backgrounds (like glass slides).</li>
            <li style="margin-bottom: 3px;"><b style="color:var(--txtbr);">Adaptive (SNIP):</b> Highly effective iterative clipping, excellent for standard Raman.</li>
            <li><b style="color:var(--txtbr);">Scattering (Poly):</b> Fits a polynomial to handle broad, wavy backgrounds.</li>
        </ul>
    </div>

    <div class="doc-sec" id="doc-xshift">
      <h4 style="color: #bc8cff;"><i class="fa-solid fa-arrows-left-right"></i> Shift X-Axis</h4>
      <p>Corrects instrumental calibration errors by manually shifting the data horizontally.</p>
      <p><b>How to use:</b> Enter a positive number to shift the peaks to the right (higher wavenumbers), or a negative number to shift them to the left. The Y-intensities remain completely unchanged.</p>
    </div>

    <div class="doc-sec" id="doc-xconv">
      <h4 style="color: #bc8cff;"><i class="fa-solid fa-exchange"></i> Unit & Axis Conversions</h4>
      <p>A unified tool to mathematically transform your data arrays or fix imported metadata.</p>
      <ul style="padding-left: 20px; color: var(--txtm); font-size: 11.5px; line-height: 1.5;">
        <li style="margin-bottom: 6px;"><b>Vibrational Math:</b> Converts physical X units for optical spectroscopy (e.g., nm ↔ cm⁻¹, eV, THz). <i>Note: Formulas like nm to eV mathematically reverse the array, which RDRS SpectraLib handles and re-sorts automatically.</i></li>
        <li style="margin-bottom: 6px;"><b>Diffraction Math (XRD):</b> Uses Bragg's Law (<i>nλ = 2d sinθ</i>) to convert between 2-Theta angles and physical d-spacing. </li>
        <li style="margin-bottom: 6px;"><b>XRD Target Conversion:</b> <span style="color: var(--warn);">Crucial for AI Matching!</span> The RDRS AI models are trained exclusively on Copper (Cu Kα1) radiation. If your diffractometer used a different anode (like Cobalt or Molybdenum), you must use this tool to mathematically convert your 2-Theta angles to the Copper standard before running a match.</li>
        <li style="margin-bottom: 6px;"><b>Y-Axis Math:</b> Converts intensity scales (e.g., Transmittance % ↔ Absorbance).</li>
        <li><b>Rename Labels:</b> Overwrites the global axis titles for your PDF reports without altering the underlying raw data points.</li>
      </ul>
    </div>

    <div class="doc-sec" id="doc-macro">
      <h4 style="color: #bc8cff;"><i class="fa-solid fa-bolt"></i> Batch Processing Pipeline (Macros)</h4>
      <p>The ultimate power-user tool. Apply an entire sequence of mathematical operations to dozens of spectra with a single click.</p>
      <p><b>How to use:</b> Check the boxes for the operations you want to apply (Cut, Smooth, Baseline, Normalize), adjust the specific parameters, and click <b>Run Pipeline</b>. RDRS SpectraLib will sequentially chain the math together in the background.</p>
    </div>


    <div class="doc-sec" id="doc-peaks">
      <h4 style="color: #56d364;"><i class="fa-solid fa-mountain"></i> Find Peaks</h4>
      <p>Automatically detect and label peaks (maxima) or valleys (minima) based on height thresholds.</p>
      <p>When peaks are found, RDRS SpectraLib automatically calculates the <b>FWHM (Full Width at Half Maximum)</b> for crystallographic analysis. The results are automatically logged to the Console and exported in your PDF reports.</p>
    </div>

    <div class="doc-sec" id="doc-area">
      <h4 style="color: #56d364;"><i class="fa-solid fa-chart-area"></i> Integrate Peak Area</h4>
      <p>Calculates the area under a curve, which is proportional to chemical concentration.</p>
      <p><b>How to use:</b> Click the <b>✛ Cursor</b> tool in the left panel to find the X-axis start and end points of your peak. Enter those numbers here. The Console Log will open and display the <b>Total Area</b> (down to zero) and the <b>Net Area</b> (above the local background).</p>
    </div>

    <div class="doc-sec" id="doc-color">
      <h4 style="color: #56d364;"><i class="fa-solid fa-palette"></i> Colorimetric Analysis (CIE 1931)</h4>
      <p>Extracts the true mathematical color (Hex code and x,y coordinates) from an emission or photoluminescence spectrum.</p>
      <p><b>How to use:</b> Your X-axis <b>must</b> be set to <i>Wavelength [nm]</i>. Input the X bounds to isolate the material's emission peak (carefully excluding the excitation laser/LED). The application integrates the area using standard CIE 1931 Color Matching Functions and outputs the precise color swatch directly to the Console.</p>
    </div>

    <div class="doc-sec" id="doc-fit">
      <h4 style="color: #56d364;"><i class="fa-solid fa-chart-bar"></i> Peak Curve Fitting (Deconvolution)</h4>
      <p>Resolves heavily overlapping peak clusters into individual mathematical components using Levenberg-Marquardt optimization. You can now model true physical and instrumental states by selecting specific <b>Profile Shapes</b>.</p>
      
      <p style="margin-top: 8px;"><b>How to use:</b></p>
      <ol style="padding-left: 20px; color: var(--txtm); font-size: 11.5px; line-height: 1.5; margin-bottom: 8px;">
        <li style="margin-bottom: 4px;"><b>(Highly Recommended)</b> Click <b style="color:var(--acc);"><i class="fa-solid fa-hand-pointer"></i> Visually Pick Centers</b>. The modal will become transparent. Click directly on the chart to drop vertical markers where you suspect hidden peak shoulders are located. <i>(Right-click to undo, or use the <i class="fa-solid fa-trash"></i> trash icon to start over).</i></li>
        <li style="margin-bottom: 4px;"><b>Auto-Bounding:</b> As you drop centers, RDRS SpectraLib will automatically calculate the optimal <b>X Start</b> and <b>X End</b> bounds to isolate the cluster for you! <i>(You can still type these manually if needed).</i></li>
        <li style="margin-bottom: 4px;">Click <b style="color:var(--acc);"><i class="fa-solid fa-check"></i> Finish Picking</b>.</li>
        <li style="margin-bottom: 4px;">Select your <b>Profile Shape</b>. <i>(See the guide below)</i>.</li>
        <li style="margin-bottom: 4px;">If you choose to skip visual picking, manually enter your X-bounds and select the <b>Number of Peaks</b> (up to 10) to force the solver to blindly guess.</li>
        <li>Click <b>Run Optimization</b>.</li>
      </ol>

      <div style="margin-top: 8px; padding: 8px; background: rgba(0,0,0,0.15); border-left: 3px solid var(--acc); border-radius: 4px; margin-bottom: 10px;">
        <p style="margin-bottom: 6px; font-weight: 600; color: var(--txtbr); font-size: 11px;">Which Profile Shape should I choose?</p>
        <ul style="padding-left: 15px; color: var(--txtm); font-size: 10.5px; margin-bottom: 0; line-height: 1.4;">
            <li style="margin-bottom: 3px;"><b style="color:var(--txtbr);">Gaussian:</b> Best for modeling the blur caused strictly by the instrument/spectrometer (slits, gratings).</li>
            <li style="margin-bottom: 3px;"><b style="color:var(--txtbr);">Lorentzian:</b> Best for modeling the true physical nature of the sample, such as vibrational lifetime decay (Raman) or crystallite size/strain (XRD).</li>
            <li style="margin-bottom: 3px;"><b style="color:var(--txtbr);">Pseudo-Voigt (Mixed):</b> The absolute gold standard for real-world data. It perfectly blends Gaussian (instrument) and Lorentzian (sample) profiles together.</li>
            <li><b style="color:var(--txtbr);">Asymmetric Voigt (Split):</b> Uses 4 parameters (including separate Left and Right widths) to perfectly model peaks that lean to one side due to structural strain or phonon confinement.</li>
        </ul>
      </div>

      <div style="margin-top: 8px; padding: 8px; background: rgba(0,0,0,0.15); border-left: 3px solid var(--warn); border-radius: 4px; margin-bottom: 10px;">
        <p style="margin-bottom: 0; font-size: 10.5px; color: var(--txtm); line-height: 1.4;">
          <b style="color:var(--txtbr);"><i class="fa-solid fa-lightbulb"></i> Why pick centers visually?</b> Blindly guessing peak locations often causes the math to fail on asymmetric data. By clicking the exact X-coordinates, you give the algorithm a perfect starting line, guaranteeing sub-second convergence for complex overlaps.
        </p>
      </div>

      <p><b>Advanced Solver Parameters:</b> If your data is extremely noisy and triggers an 'Optimization failed to converge' error, expand the Advanced Parameters drawer. Increase the <b>Max Iterations</b> (e.g., 20000) or lower the <b>Tolerance</b> (e.g., 1e-6) to force the math to solve it.</p>
    </div>

    <div class="doc-sec" id="doc-deriv">
      <h4 style="color: #56d364;"><i class="fa-solid fa-chart-line"></i> Derivative Spectroscopy</h4>
      <p>Calculates the 1st or 2nd derivative to identify hidden shoulders or overlapping bands. Because derivatives amplify signal noise exponentially, always apply a <b>Savitzky-Golay Smooth</b> prior to using this tool.</p>
    </div>

    <div class="doc-sec" id="doc-sub">
      <h4 style="color: #56d364;"><i class="fa-solid fa-minus"></i> Spectral Stripping (Subtract)</h4>
      <p>Used to mathematically remove a pure reference phase from a mixed sample spectrum.</p>
      <p><b>How to use:</b> Select your mixed sample (Minuend) and the pure database reference (Subtrahend). Slowly drag the multiplier slider. Watch the chart update live until the reference peaks visually disappear from your mixed sample.</p>
    </div>

    <div class="doc-sec" id="doc-merge">
      <h4 style="color: #56d364;"><i class="fa-solid fa-link"></i> Merge Spectra (Stitch)</h4>
      <p>Combines multiple spectral segments (e.g., from a dual-grating spectrometer) into one continuous trace.</p>
      <p><b>How to use:</b> Select the spectra you want to weave together. RDRS SpectraLib will automatically sort them by X-axis, interpolate any empty gaps, and average any overlapping regions to create a single, seamless line.</p>
    </div>

    <div class="doc-sec" id="doc-combine">
      <h4 style="color: #56d364;"><i class="fa-solid fa-plus"></i> Add & <i class="fa-solid fa-divide"></i> Divide Spectra</h4>
      <p>Perform direct mathematical operations between multiple target spectra and a single reference spectrum.</p>
      <ul style="padding-left: 20px; color: var(--txtm); font-size: 11.5px; line-height: 1.5;">
        <li style="margin-bottom: 4px;"><b style="color:var(--acc);">＋ Add Spectra:</b> Adds the Y-values of a reference spectrum to your selected targets.</li>
        <li><b style="color:var(--acc);">÷ Divide Spectra:</b> Divides your target spectra by a reference spectrum. Essential for calculating Transmission/Reflectance ratios.</li>
      </ul>
      <p><b>Auto-Alignment Magic:</b> RDRS SpectraLib will automatically interpolate the reference data to perfectly align with each target's X-axis before calculating the results.</p>
    </div>

    <div class="doc-sec" id="doc-avg">
      <h4 style="color: #56d364;"><i class="fa-solid fa-plus-minus"></i> Spectrum Averaging & Variance</h4>
      <p>Calculates the Mean (average) of multiple spectra. Highly recommended for heterogeneous samples where multiple acquisitions were taken. If you check <b>Draw ±1 Std. Dev.</b>, it will draw a semi-transparent shaded area behind the main line representing the sample variance!</p>
    </div>

    <div class="doc-sec" id="doc-density">
      <h4 style="color: #56d364;"><i class="fa-solid fa-fire-flame-curved"></i> Spectral Density Analysis <span class="doc-lock-badge"><i class="fa-solid fa-lock"></i></span></h4>
      <p>Converts a massive, unreadable overlap of spectra (a "hairball") into a 2D statistical density heatmap.</p>
      <p style="margin-top: 8px;"><b>How to use:</b> Select your spectra and adjust the Y-Axis Resolution (bins). The resulting visualization will show bright/hot regions where the majority of your spectra share a path, making it easy to see the dominant trend while ignoring rare outliers or isolated noise.</p>
    </div>
	
	  <div class="doc-sec" id="doc-pca">
      <h4 style="color: #56d364;"><i class="fa-solid fa-project-diagram"></i> Exploratory Cluster Analysis <span class="doc-lock-badge"><i class="fa-solid fa-lock"></i></span></h4>
      <p>Advanced unsupervised Machine Learning techniques that reduce the dimensionality of complex spectra, compressing thousands of data points into a 2D scatter plot to group chemically similar spectra together.</p>
      
      <p style="margin-top: 8px;"><b>Available Algorithms:</b></p>
      <ul style="padding-left: 20px; color: var(--txtm); font-size: 11.5px; line-height: 1.5; margin-bottom: 12px;">
        <li style="margin-bottom: 4px;"><b style="color:var(--txtbr);">PCA (Linear):</b> Best for understanding <i>global</i> variance and identifying the exact physical peaks that drive the separation between samples.</li>
        <li style="margin-bottom: 4px;"><b style="color:var(--txtbr);">t-SNE (Non-Linear):</b> Highly effective at untangling complex, overlapping data into tight, distinct local clusters.</li>
        <li><b style="color:var(--txtbr);">UMAP (Hybrid):</b> The modern successor to t-SNE. Creates distinct local clusters while mathematically preserving the global distances between groups.</li>
      </ul>

      <p style="margin-top: 8px;"><b>How to use:</b> Select at least 3 spectra, choose your algorithm, and click Compute. Depending on your choice, the dashboard will display:</p>
      
      <ul style="padding-left: 20px; color: var(--txtm); font-size: 11.5px; line-height: 1.5;">
        <li style="margin-bottom: 4px;"><b style="color:var(--acc);">Scree Plot (PCA Only):</b> Shows how much physical variance is explained by each Principal Component (PC). The curve flattens out when the remaining components are just noise.</li>
        <li style="margin-bottom: 4px;"><b style="color:var(--acc);">Loadings (PCA Only):</b> Shows the physical Raman shifts (or wavelengths) that are driving the separation in the clusters. Peaks here indicate <i>why</i> spectra are grouping together.</li>
        <li><b style="color:var(--acc);">Scores Matrix (All Algos):</b> The main scatter plots. Chemically identical spectra will cluster together. The diagonal plots (KDE) show the statistical distribution (bell curves) of your data. <i>(Expands to full screen for t-SNE and UMAP).</i></li>
      </ul>

      <div style="margin-top: 8px; padding: 8px; background: rgba(0,0,0,0.15); border-left: 3px solid var(--warn); border-radius: 4px; margin-bottom: 10px;">
        <p style="margin-bottom: 0; font-size: 10.5px; color: var(--txtm); line-height: 1.4;">
          <b style="color:var(--txtbr);"><i class="fa-solid fa-lightbulb"></i> Pro-Tip 1: Group by Folders!</b> If you organize your spectra into Folders in the left sidebar <i>before</i> running your analysis, the matrix will pull their exact colors and automatically calculate/draw <b>95% Confidence Ellipses</b> around your groups!
        </p>
      </div>

      <div style="margin-top: 8px; padding: 8px; background: rgba(0,0,0,0.15); border-left: 3px solid var(--acc); border-radius: 4px;">
        <p style="margin-bottom: 0; font-size: 10.5px; color: var(--txtm); line-height: 1.4;">
          <b style="color:var(--txtbr);"><i class="fa-solid fa-hand-pointer"></i> Pro-Tip 2: Interactive Filtering.</b> Spot a weird outlier? Click any dot on the Matrix to instantly hide/show that specific spectrum. <b>Or, use the Lasso tool</b> to circle a whole cluster of outliers and click <b>Hide Selected</b> in the top right. When you click "Exit Dashboard", your main workspace will reflect your choices!
        </p>
      </div>
    </div>

    <div class="doc-sec" id="doc-hca">
      <h4 style="color: #56d364;"><i class="fa-solid fa-folder-tree"></i> Hierarchical Cluster Analysis (HCA) <span class="doc-lock-badge"><i class="fa-solid fa-lock"></i></span></h4>
      <p>HCA is an advanced unsupervised chemometric technique that calculates the mathematical distance (variance) between spectra and groups them into a "family tree" called a <strong>Dendrogram</strong>. It is the gold standard for classifying unknown samples or proving that different acquisitions belong to the exact same mineral phase.</p>

      <p style="margin-top: 8px;"><b>How to use:</b></p>
      <ol style="padding-left: 20px; color: var(--txtm); font-size: 11.5px; line-height: 1.5; margin-bottom: 8px;">
        <li style="margin-bottom: 4px;">Select at least 3 spectra (the more, the better).</li>
        <li style="margin-bottom: 4px;"><b>(Optional)</b> Check <i>Include Distance Matrix Heatmap</i> if you want to visualize the exact Euclidean distance between every single pair of spectra as a 2D color grid.</li>
        <li>Click <b>Build Tree</b>.</li>
      </ol>

      <div style="margin-top: 8px; padding: 8px; background: rgba(0,0,0,0.15); border-left: 3px solid var(--acc); border-radius: 4px; margin-bottom: 10px;">
        <p style="margin-bottom: 6px; font-weight: 600; color: var(--txtbr); font-size: 11px;">How to read the results:</p>
        <ul style="padding-left: 15px; color: var(--txtm); font-size: 10.5px; margin-bottom: 0; line-height: 1.4;">
            <li style="margin-bottom: 3px;"><b style="color:var(--txtbr);">Dendrogram (Tree):</b> Spectra connected by short branches are mathematically nearly identical. The longer the horizontal branch stretches before it merges with another, the more chemically distinct those groups are.</li>
            <li><b style="color:var(--txtbr);">Heatmap (Matrix):</b> Dark purple/blue squares mean the two intersecting spectra have zero variance (identical). Bright yellow squares indicate completely different materials.</li>
        </ul>
      </div>

      <div style="margin-top: 8px; padding: 8px; background: rgba(0,0,0,0.15); border-left: 3px solid var(--warn); border-radius: 4px;">
        <p style="margin-bottom: 0; font-size: 10.5px; color: var(--txtm); line-height: 1.4;">
          <b style="color:var(--txtbr);"><i class="fa-solid fa-lightbulb"></i> Pro-Tip:</b> The HCA algorithm compares absolute Y-intensities. To prevent a strong spectrum and a weak spectrum of the <i>same mineral</i> from being clustered into separate groups, you should always mathematically <b>Normalize (0 → 1)</b> your dataset before running HCA!
        </p>
      </div>
    </div>

    <div class="doc-sec" id="doc-chemo">
      <h4 style="color: #56d364;"><i class="fa-solid fa-brain"></i> Train & Predict (Chemometrics) <span class="doc-lock-badge"><i class="fa-solid fa-lock"></i></span></h4>
      <p>Build custom Machine Learning models (PLS-R or SVM) directly in your browser to predict continuous concentrations or classify unknown samples.</p>
      
      <ul style="padding-left: 20px; color: var(--txtm); font-size: 11.5px; line-height: 1.5; margin-top: 8px; margin-bottom: 10px;">
        <li style="margin-bottom: 4px;"><b style="color:var(--txtbr);">PLS Regression (PLS-R):</b> Predicts continuous numbers (e.g., % Concentration, Temperature, Hardness). Requires strictly numerical training values.</li>
        <li><b style="color:var(--txtbr);">SVM Classification:</b> Predicts categorical groups (e.g., "Cancer" vs "Healthy", or "Quartz" vs "Calcite").</li>
        <li><b style="color:var(--txtbr);">LDA Discriminant Analysis:</b> A supervised classification method that projects spectra into a 2D scatter space, maximizing the mathematical separation between your defined categories.</li>
      </ul>

      <p style="font-weight: 600; color: var(--txtbr); font-size: 11.5px;">The Proper Workflow:</p>
      <ol style="padding-left: 20px; color: var(--txtm); font-size: 11.5px; line-height: 1.5; margin-bottom: 8px;">
        <li style="margin-bottom: 4px;"><b>Pre-process:</b> Your data <i>must</i> be mathematically clean to prevent the algorithm from memorizing background noise. Apply <b>Auto Baseline</b> &rarr; <b>Cut Range</b> (to isolate the active peaks) &rarr; <b>SNV</b> &rarr; <b>Mean-Centering</b>.</li>
        <li style="margin-bottom: 4px;"><b>Assign Training Data:</b> Open the Train & Predict tool. Type your known values (e.g., "85") into the boxes next to your reference spectra.</li>
        <li style="margin-bottom: 4px;"><b>Assign Unknowns:</b> Leave the boxes completely <b>blank</b> for the spectra you want the AI to predict.</li>
        <li>Click <b>Train Model & Predict</b>. The results will be automatically logged to the Console for easy copying to Excel.</li>
      </ol>

      <div style="margin-top: 8px; padding: 10px; background: rgba(0,0,0,0.15); border-left: 3px solid var(--warn); border-radius: 4px;">
        <p style="margin-bottom: 6px; font-weight: 600; color: var(--txtbr); font-size: 11px;">Understanding the Diagnostics Pill:</p>
        <p style="margin-bottom: 0; font-size: 10.5px; color: var(--txtm); line-height: 1.4;">
          Before spitting out predictions, the server runs a strict <b>Leave-One-Out Cross-Validation (LOOCV)</b>. If the resulting <b style="color:var(--ok);">R² Score</b> is green (> 0.90), your model is highly trustworthy. If it flashes red, your data requires better pre-processing (or you need to adjust the <b>PLS Components</b> parameter to prevent underfitting or overfitting the noise).
        </p>
      </div>

      <div style="margin-top: 8px; padding: 10px; background: rgba(0,0,0,0.15); border-left: 3px solid #bc8cff; border-radius: 4px;">
        <p style="margin-bottom: 6px; font-weight: 600; color: var(--txtbr); font-size: 11px;">Explainable AI (feature importance chart):</p>
        <p style="margin-bottom: 0; font-size: 10.5px; color: var(--txtm); line-height: 1.4;">
          After your model trains successfully, a purple area chart will automatically generate in your console Log. This maps the <b>Model Coefficients</b> (Weights). Positive or negative peaks on this chart show you exactly which physical chemical bonds (Raman shifts) the AI used to predict your concentrations!
        </p>
      </div>
    </div>

    <div class="doc-sec" id="doc-calib">
      <h4 style="color: #56d364;"><i class="fa-solid fa-ruler-combined"></i> Univariate Calibration (Beer's Law) <span class="doc-lock-badge"><i class="fa-solid fa-lock"></i></span></h4>
      <p>Builds a standard linear calibration curve linking peak intensity (or area/FWHM) to physical concentration.</p>
      <p style="margin-top: 8px;"><b>How to use:</b> Select a target peak, and input the known concentrations for your standard spectra. The system will calculate the linear regression (R²) and predict the concentrations of any blank "Unknown" spectra. A visual calibration curve and detailed metrics are logged to the Console.</p>
      
      <div style="margin-top: 8px; padding: 8px; background: rgba(0,0,0,0.15); border-left: 3px solid var(--warn); border-radius: 4px;">
        <p style="margin-bottom: 0; font-size: 10.5px; color: var(--txtm); line-height: 1.4;">
          <b style="color:var(--txtbr);"><i class="fa-solid fa-triangle-exclamation"></i> Prerequisite:</b> You <b>must</b> run the "Find Peaks" tool on your dataset before using this module! The algorithm uses the detected peak lists to intelligently track your chosen peak even if it shifts horizontally due to chemical changes.
        </p>
      </div>
    </div>

    <div class="doc-sec" id="doc-kinetics">
      <h4 style="color: #56d364;"><i class="fa-solid fa-stopwatch"></i> Sequential Kinetic Curve Fitting <span class="doc-lock-badge"><i class="fa-solid fa-lock"></i></span></h4>
      <p>Analyzes time-series reactions by tracking a target peak's intensity or area over time to calculate physical rate constants and half-lives.</p>
      <p style="margin-top: 8px;"><b>How to use:</b> Visually pick a target peak. The algorithm will automatically extract the time intervals from your filenames (e.g., "10s", "15min") or use a fixed interval. Select the Reaction Order (0, 1st, or 2nd) and compute. The resulting decay/growth curve and mathematical constants (k, t½, R²) will be displayed in a dedicated dashboard.</p>
    </div>

    <div class="doc-sec" id="doc-trend">
      <h4 style="color: #56d364;"><i class="fa-solid fa-chart-line"></i> Peak Trend Analysis (SPLOM) <span class="doc-lock-badge"><i class="fa-solid fa-lock"></i></span></h4>
      <p>Generates a Scatterplot Matrix (SPLOM) to track how a specific peak's Position (X), Intensity (Y), FWHM, and Area evolve across a sequence of files. Essential for kinetics, thermal degradation, and phase transition studies.</p>
      
      <p style="margin-top: 8px;"><b>How to use:</b></p>
      <ol style="padding-left: 20px; color: var(--txtm); font-size: 11.5px; line-height: 1.5; margin-bottom: 8px;">
        <li style="margin-bottom: 4px;">Run the <b style="color:var(--txtbr);"><i class="fa-solid fa-mountain"></i> Find Peaks</b> tool on your loaded dataset to extract the mathematical parameters.</li>
        <li style="margin-bottom: 4px;">Open the <b>Trend / SPLOM</b> tool.</li>
        <li style="margin-bottom: 4px;">Click <b style="color:var(--acc);"><i class="fa-solid fa-hand-pointer"></i> Visually Pick Target Peak</b> and click the specific peak you want to track on the main chart.</li>
        <li>Click <b>Generate Correlogram</b>. The algorithm will hunt for that peak in every file (within your specified ± Tolerance window) and map the correlations.</li>
      </ol>

      <div style="margin-top: 8px; padding: 8px; background: rgba(0,0,0,0.15); border-left: 3px solid var(--acc); border-radius: 4px; margin-bottom: 10px;">
        <p style="margin-bottom: 0; font-size: 10.5px; color: var(--txtm); line-height: 1.4;">
          <b style="color:var(--txtbr);"><i class="fa-solid fa-magnifying-glass"></i> Pro-Tip 1: Deep Zoom.</b> Click and drag a box inside any subplot to instantly zoom into specific clusters across all dimensions simultaneously. Double-click the chart to reset the view!
        </p>
      </div>

      <div style="margin-top: 8px; padding: 8px; background: rgba(0,0,0,0.15); border-left: 3px solid var(--warn); border-radius: 4px; margin-bottom: 10px;">
        <p style="margin-bottom: 0; font-size: 10.5px; color: var(--txtm); line-height: 1.4;">
          <b style="color:var(--txtbr);"><i class="fa-solid fa-hand-pointer"></i> Pro-Tip 2: Interactive Filtering.</b> The dots in the SPLOM inherit the exact colors of your spectra. Click any individual point to instantly hide or show that specific spectrum in your main workspace!
        </p>
      </div>
    </div>

    <div class="doc-sec" id="doc-2dcos">
      <h4 style="color: #56d364;"><i class="fa-solid fa-border-all"></i> 2D Correlation Spectroscopy (2T2D) <span class="doc-lock-badge"><i class="fa-solid fa-lock"></i></span></h4>
      <p>Two-Trace Two-Dimensional (2T2D) Correlation Spectroscopy mathematically analyzes how spectral bands change across a dynamic dataset. It spreads highly overlapping 1D peaks across a 2D plane to resolve hidden components and track physical changes.</p>

      <div style="margin-top: 12px; padding: 10px; background: rgba(0,0,0,0.15); border-left: 3px solid var(--acc); border-radius: 4px; margin-bottom: 12px;">
        <p style="margin-bottom: 6px; font-weight: 600; color: var(--txtbr); font-size: 11px;">1. What spectra should I load?</p>
        <ul style="padding-left: 15px; color: var(--txtm); font-size: 10.5px; margin-bottom: 0; line-height: 1.4;">
            <li style="margin-bottom: 3px;"><b style="color:var(--txtbr);">The Rule of Variance:</b> 2D-COS analyzes <i>changes</i>. You need at least 2 spectra, but loading a <b>series of 5 to 30 spectra</b> (e.g., a temperature ramp, a time-series/kinetics run, or a solid-solution compositional shift) yields the best results.</li>
            <li style="margin-bottom: 3px;"><b style="color:var(--txtbr);">The "Average" Reference:</b> The algorithm automatically calculates the mean of your selected spectra to use as the baseline reference point. Spectra that deviate from this average will generate the 2D cross-peaks.</li>
            <li><b style="color:var(--warn);">Crucial Prep:</b> You <b>must</b> apply Auto-Baseline correction before running 2D-COS. Because the math is highly sensitive to variance, sloped or floating fluorescent baselines will drown out the actual peak correlations!</li>
        </ul>
      </div>

      <p style="margin-bottom: 6px; font-weight: 600; color: var(--txtbr); font-size: 11px;">2. How to read the Contour Maps:</p>
      <ul style="padding-left: 20px; color: var(--txtm); font-size: 11.5px; line-height: 1.5; margin-bottom: 12px;">
        <li style="margin-bottom: 6px;"><b style="color:var(--acc);">Synchronous Map (In-Phase):</b> Highlights simultaneous changes.
            <ul style="padding-left: 15px; margin-top: 2px;">
                <li><i>Auto-peaks (The Diagonal):</i> The dense spots running bottom-left to top-right. These show the regions experiencing the greatest intensity changes across your dataset.</li>
                <li><i>Cross-peaks (Off-Diagonal):</i> If Red (Positive), the two intersecting peaks are growing or shrinking together. If Blue (Negative), one peak grows while the other shrinks.</li>
            </ul>
        </li>
        <li style="margin-bottom: 6px;"><b style="color:var(--acc);">Asynchronous Map (Out-of-Phase):</b> The ultimate tool for resolving hidden phases.
            <ul style="padding-left: 15px; margin-top: 2px;">
                <li><i>The Diagonal:</i> Always mathematically zero (white/flat).</li>
                <li><i>Cross-peaks ("Butterflies"):</i> Red and Blue off-diagonal clusters prove that the peaks are changing <i>independently</i> of each other. This is definitive proof of a <b>peak shifting</b> (due to chemical substitution/stress) or the presence of a completely <b>different, hidden mineral phase</b>.</li>
            </ul>
        </li>
      </ul>

        <p style="margin-bottom: 6px; font-weight: 600; color: var(--txtbr); font-size: 11px;">3. The interactive slicer (numerical purification)</p>
        <p style="color: var(--txtm); font-size: 10.5px; line-height: 1.4; margin-bottom: 6px;">
            The Slicer isn't just a visualization tool; it acts as a numerical curve-resolution tool. By mathematical definition, a horizontal slice of an asynchronous 2T2D map taken at a specific characteristic peak is <b>entirely devoid of the spectral contribution from that peak's species</b>.
        </p>
        <p style="color: var(--txtm); font-size: 10.5px; line-height: 1.4; margin-bottom: 0;">
            <b>Workflow:</b> Ensure <i>Show 1D Margins</i> is checked. Hover over the center of an Asynchronous "butterfly" cross-peak. Click it. The 1D slice on the right has now mathematically stripped away the interference from the peak pointing to the Y-axis. Click <b>Save Extracted Slice</b> to push this purified trace back into your workspace for further analysis!
        </p>
    </div>

    <div class="doc-sec" id="doc-lcf">
      <h4 style="color: #56d364;"><i class="fa-solid fa-layer-group"></i> Linear Combination Fitting (LCF) <span class="doc-lock-badge"><i class="fa-solid fa-lock"></i></span></h4>
      <p>Quantifies the percentage composition of a mixed sample using Non-Negative Least Squares (NNLS).</p>
      <p><b>How to use:</b> Baseline correct your mixed sample. Load the pure reference spectra from the database. Open the LCF tool, select the mixture as the Target, check the references, and calculate. The algorithm builds a synthetic "Fit" curve and logs the exact mathematical percentages to the Console.</p>
    </div>

    <div class="doc-sec" id="doc-mcr">
      <h4 style="color: #56d364;"><i class="fa-solid fa-eye-slash"></i> MCR Blind Unmixing <span class="doc-lock-badge"><i class="fa-solid fa-lock"></i></span></h4>
      <p>Multivariate Curve Resolution (MCR-ALS) mathematically extracts the pure "hidden" components from a mixed dataset <b>without needing a reference database</b>.</p>
      
      <p style="margin-top: 8px;"><b>How to use:</b></p>
      <ol style="padding-left: 20px; color: var(--txtm); font-size: 11.5px; line-height: 1.5; margin-bottom: 8px;">
        <li style="margin-bottom: 4px;">Select your mixed spectra (e.g., a time-series of a chemical reaction or a spatial map).</li>
        <li style="margin-bottom: 4px;">Input the number of pure components you suspect are in the mixture.</li>
        <li style="margin-bottom: 4px;">Keep <b>Use SIMPLISMA initial guess</b> checked (highly recommended) to seed the algorithm with real physical peaks rather than blind algebraic guesses.</li>
        <li>Click <b>Run Extraction</b>. The algorithm will mathematically deduce the pure spectral signatures and add them directly to your chart.</li>
      </ol>
      
      <div style="margin-top: 8px; padding: 8px; background: rgba(0,0,0,0.15); border-left: 3px solid #bc8cff; border-radius: 4px; margin-bottom: 10px;">
        <p style="margin-bottom: 0; font-size: 10.5px; color: var(--txtm); line-height: 1.4;">
          <b style="color:var(--txtbr);"><i class="fa-solid fa-wand-magic-sparkles"></i> The SIMPLISMA advantage:</b> Standard NMF algorithms guess starting components algebraically, which often results in mathematically valid but physically impossible spectra (like negative dips or weird shapes). SIMPLISMA mathematically scans your dataset for the "purest variables" (wavenumbers where only one phase is emitting) and uses those <i>real</i> data points as the starting guess, guaranteeing much cleaner, instrument-grade results.
        </p>
      </div>

      <div style="margin-top: 8px; padding: 8px; background: rgba(0,0,0,0.15); border-left: 3px solid var(--acc); border-radius: 4px;">
        <p style="margin-bottom: 0; font-size: 10.5px; color: var(--txtm); line-height: 1.4;">
          <b style="color:var(--txtbr);"><i class="fa-solid fa-lightbulb"></i> MCR vs LCF:</b> Use <b>LCF Unmixing</b> when you already know what minerals are in the rock and want exact percentages. Use <b>MCR Blind Unmixing</b> when you have absolutely no idea what is in the sample and need the math to blindly separate the phases for you.
        </p>
      </div>
    </div>

    <div class="doc-sec" id="doc-mix">
      <h4 style="color: #56d364;"><i class="fa-solid fa-blender"></i> Synthetic Mixture Builder <span class="doc-lock-badge"><i class="fa-solid fa-lock"></i></span></h4>
      <p>Dynamically mix pure references to visually match an unknown target spectrum, or build a hypothetical mixture from scratch.</p>
      <p style="margin-top: 8px;"><b>How to use:</b> Select a Target (or check "Blank Target"), then select up to 5 pure components. Use the sliders to adjust the proportional weight of each component. The <span style="color:#00ffcc; font-weight:bold;">cyan dotted line</span> previews the synthetic mix in real-time on your chart.</p>
      
      <div style="margin-top: 8px; padding: 8px; background: rgba(0,0,0,0.15); border-left: 3px solid var(--acc); border-radius: 4px;">
        <p style="margin-bottom: 0; font-size: 10.5px; color: var(--txtm); line-height: 1.4;">
          <b style="color:var(--txtbr);"><i class="fa-solid fa-lightbulb"></i> Pre-Normalize:</b> Keep "Pre-Normalize Components to 0-1" checked! This ensures highly fluorescent raw spectra don't mathematically overpower weaker references. When checked, a 0.5/0.5 slider ratio guarantees the highest peak of each phase will be mathematically equal in the final mix.
        </p>
      </div>
    </div>

    <div class="doc-sec" id="doc-snr">
      <h4 style="color: #56d364;"><i class="fa-solid fa-tower-broadcast"></i> Evaluate & Prune (SNR) <span class="doc-lock-badge"><i class="fa-solid fa-lock"></i></span></h4>
      <p>A dual-purpose dataset cleanup tool. <b>Evaluate SNR</b> calculates signal-to-noise ratios to flag noisy acquisitions, while <b>Smart Prune</b> automatically isolates the most pristine and representative spectra from massive datasets.</p>

      <div style="margin-top: 12px; padding: 10px; background: rgba(0,0,0,0.15); border-left: 3px solid var(--acc); border-radius: 4px; margin-bottom: 12px;">
        <p style="margin-bottom: 6px; font-weight: 600; color: var(--txtbr); font-size: 11px;">1. Evaluate SNR (Quality Highlighting)</p>
        <p style="color: var(--txtm); font-size: 10.5px; line-height: 1.4; margin-bottom: 6px;">
            Calculates the Signal-to-Noise Ratio (SNR) for all visible spectra. Set your custom thresholds for <b style="color:var(--ok);">Good</b> vs <b style="color:var(--err);">Poor</b> quality, and click <b>Evaluate</b>. Results will permanently appear as colored badges in the left sidebar next to each spectrum's name.
        </p>
      </div>

      <div style="padding: 10px; background: rgba(0,0,0,0.15); border-left: 3px solid var(--warn); border-radius: 4px;">
        <p style="margin-bottom: 6px; font-weight: 600; color: var(--txtbr); font-size: 11px;">2. Smart Prune (Top Extractor)</p>
        <p style="color: var(--txtm); font-size: 10.5px; line-height: 1.4; margin-bottom: 6px;">
            Automatically identifies the best spectra in your dataset so you don't have to review them manually. Enter how many spectra you want to keep (e.g., Top 5). The algorithm scores every spectrum based on:
        </p>
        <ul style="padding-left: 15px; color: var(--txtm); font-size: 10.5px; margin-bottom: 8px; line-height: 1.4;">
            <li style="margin-bottom: 3px;"><b style="color:var(--txtbr);">Cleanliness (40%):</b> Signal-to-Noise Ratio (SNR).</li>
            <li style="margin-bottom: 3px;"><b style="color:var(--txtbr);">Representativeness (40%):</b> Pearson Correlation (R²) to the dataset's average curve.</li>
            <li><b style="color:var(--txtbr);">Signal Strength (20%):</b> Maximum Peak Intensity.</li>
        </ul>
        <p style="color: var(--txtm); font-size: 10.5px; line-height: 1.4; margin-bottom: 0;">
            The top spectra are kept visible on the chart, while all rejected spectra are automatically hidden and neatly packed away into a "Pruned Dataset" folder in your sidebar.
        </p>
      </div>
    </div>
	
    <div class="doc-sec" id="doc-live">
        <h4 style="color: #eab308;"><i class="fa-solid fa-video"></i> UV-VIS Acquisition (Live Hardware) <span class="doc-lock-badge"><i class="fa-solid fa-lock"></i></span></h4>
        <p>Connect USB spectrometers, CMOS sensors, or Virtual Cameras (via OBS/SharpCap) directly to the browser for real-time photon digitization.</p>
        
        <div style="margin-top: 10px; padding: 10px; background: rgba(210, 153, 34, 0.1); border-left: 3px solid var(--warn); border-radius: 4px;">
            <p style="margin-bottom: 0; font-size: 11px; color: var(--txtbr); line-height: 1.4;">
                <i class="fa-solid fa-triangle-exclamation"></i> <b>Hardware Note:</b> For quantitative results, ensure you have disabled "Auto-Exposure" and "Auto-White Balance" in the <b>Camera Settings</b>. Watch the live chart for the red <b>SATURATION ALERT</b> badge—if your sensor clips at maximum brightness (255), your math is corrupted. Lower your exposure!
            </p>
        </div>

        <ul style="padding-left: 20px; color: var(--txtm); font-size: 11.5px; line-height: 1.6; margin-top:12px;">
            <li><b style="color:var(--acc);">Region of Interest (ROI):</b> Use <b>Extract Y</b> and <b>Slit Height</b> to isolate the diffraction streak. Adjust <b>Start/End X</b> to crop dead sensor pixels; this significantly reduces CPU overhead on 4K sensors.</li>
            <li><b style="color:var(--acc);">Sensor Extraction Channel:</b> Select standard Luminance (Grayscale) or isolate specific Bayer RGB channels (Red, Green, Blue). Isolating the physical color channel that matches your optical diffraction peak heavily reduces noise on standard webcams.</li>
            <li><b style="color:var(--acc);">Live Smooth (IIR):</b> An Infinite Impulse Response temporal filter. Higher values integrate light over more frames, effectively suppressing high-frequency sensor noise (Dark Current) at the cost of responsiveness.</li>
            <li><b style="color:var(--acc);">Dark Frame Subtraction (D):</b> Turn off your light source and click <b>Set Dark</b> to capture the sensor's thermal noise floor. Toggle <b>Apply Dark</b> to mathematically subtract this from every frame.</li>
            <li><b style="color:var(--acc);">Flat-Field Correction & Analysis Mode (W):</b> Capture a "White" reference (e.g., a halogen lamp). Enabling <b>Apply Flat</b> unlocks the Analysis Mode dropdown. Select <b>Trans %</b> to calculate Transmittance <i>(Sample - Dark) / (White - Dark)</i>, or select <b>Abs (A)</b> to calculate true quantitative Absorbance <i>(-log10(T))</i> according to Beer's Law.</li>
            <li><b style="color:var(--acc);">Kinetics Series:</b> Automated time-lapse acquisition. Define an <b>Interval</b> and <b>Total Captures</b> to monitor chemical reactions. Results can be automatically piped into a <b>2D Heatmap</b> or <b>3D Waterfall</b> view upon completion.</li>
        </ul>

        <h5 style="color: var(--txtbr); margin-bottom: 8px; font-size: 13px;">Wavelength Calibration [nm]</h5>
        <p>To convert raw pixels into physical units, use a known emission source (like a fluorescent lamp or laser pointer):</p>
        <ol style="padding-left: 20px; color: var(--txtm); font-size: 11.5px; line-height: 1.5;">
            <li>Drop a <b><i class="fa-solid fa-crosshairs"></i> Cursor</b> on a known peak (e.g., Mercury 546.1 nm).</li>
            <li>Click <b>Set P1</b> in the calibration panel. Repeat for <b>P2</b> (and <b>P3</b> for non-linear gratings).</li>
            <li>Click <b>Apply Math</b>. The system will calculate a <b>Regression Fit (Linear or Quadratic)</b> and project a dynamic UV-Vis rainbow beneath your data.</li>
        </ol>

        <div style="margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px;">
            <p class="info" style="margin-bottom: 6px;"><i class="fa-solid fa-floppy-disk"></i> Hardware parameters (ROI bounds, Channel, Smooth factor, and Y-axis locks) are instantly saved to your browser so your setup loads automatically every session.</p>
            <p class="info"><i class="fa-solid fa-upload"></i> Use <b>File > Save Calibration</b> to export your 2-Point or 3-Point regression coefficients. Authenticated users can auto-load these profiles in future sessions.</p>
        </div>
    </div>

    <div class="doc-sec" id="doc-privacy">
      <h4 style="color: #79c0ff;"><i class="fa-solid fa-shield-halved"></i> Privacy Policy & GDPR Compliance</h4>
      <p>RDRS SpectraLib is committed to protecting your personal data and your scientific intellectual property in strict accordance with the General Data Protection Regulation (GDPR).</p>
      
      <p style="margin-top: 8px; font-weight: 600; color: var(--txtbr); font-size: 11px;">1. What data is collected?</p>
      <ul style="padding-left: 20px; color: var(--txtm); font-size: 11.5px; line-height: 1.5; margin-bottom: 12px;">
        <li style="margin-bottom: 4px;"><b style="color:var(--txtbr);">Account Data:</b> When an account is requested, your Name, Institutional Email, Affiliation, and stated Intended Use are collected. This information is stored securely in the database to verify academic/researcher status.</li>
        <li style="margin-bottom: 4px;"><b style="color:var(--txtbr);">Usage Telemetry:</b> To monitor server health and improve the application, basic interaction events are logged (e.g., "User ran LCF Unmixing"). <span style="color:var(--ok); font-weight:600;">Actual spectral data arrays are NEVER logged, uploaded, or viewed.</span></li>
        <li><b style="color:var(--txtbr);">Connection Data:</b> IP addresses are temporarily logged during sessions strictly to prevent abuse and access rate-limit violations.</li>
      </ul>

      <p style="margin-top: 8px; font-weight: 600; color: var(--txtbr); font-size: 11px;">2. How is your data used?</p>
      <p style="color: var(--txtm); font-size: 11.5px; line-height: 1.5; margin-bottom: 12px;">
        Your email is used exclusively to send initial login credentials, password resets, and critical operational updates regarding the RDRS SpectraLib platform (such as major algorithmic changes or server migrations). <b>Your data will never be sold or used for third-party marketing.</b>
      </p>

      <p style="margin-top: 8px; font-weight: 600; color: var(--txtbr); font-size: 11px;">3. Scientific Data Privacy Guarantee</p>
      <div style="margin-top: 8px; padding: 10px; background: rgba(63, 185, 80, 0.1); border-left: 3px solid var(--ok); border-radius: 4px; margin-bottom: 12px;">
        <p style="margin-bottom: 0; font-size: 10.5px; color: var(--txtbr); line-height: 1.4;">
          <i class="fa-solid fa-lock"></i> All spectral parsing, filtering, baseline correction, and rendering happens <b>100% locally in your browser memory</b>. Your proprietary laboratory `.txt` or `.csv` files never leave your computer. The only time data is transmitted to the server is when `Analysis`, `Match DB` or an AI tool is explicitly clicked, during which an anonymous array of numbers is sent to the backend server, processed, and immediately discarded from RAM.
        </p>
      </div>

      <p style="margin-top: 8px; font-weight: 600; color: var(--txtbr); font-size: 11px;">4. Your Rights (Data Deletion)</p>
      <p style="color: var(--txtm); font-size: 11.5px; line-height: 1.5; margin-bottom: 0;">
        You have the "Right to be Forgotten." To permanently delete an RDRS SpectraLib account and wipe all associated telemetry/logs from the servers, please send an email to <a href="#" style="color: var(--acc); text-decoration: none;">&#097;&#110;&#100;&#114;&#101;&#105;&#046;&#097;&#112;&#111;&#112;&#101;&#105;&#064;&#117;&#097;&#105;&#099;&#046;&#114;&#111;</a> from the registered institutional email address.
      </p>
    </div>

  </div>

  
  
</div>

<div id="knowledge-sb" style="position: fixed; top: 0; right: -420px; width: 400px; height: 100vh; background: var(--panel); border-left: 1px solid var(--border); z-index: 9999; display: flex; flex-direction: column; box-shadow: -8px 0 30px rgba(0,0,0,0.6); transition: right 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);">
    <div style="padding: 14px 18px; height: 50px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); background: var(--card); flex-shrink: 0;">
        <span style="color: var(--txtbr); font-size: 13px; font-weight: 600; font-family: var(--mono); letter-spacing: 0.05em;"><i class="fa-solid fa-book-open"></i> Knowledge Base</span>
        <button id="btn-close-knowledge" style="background:var(--hover); border:1px solid var(--border); border-radius:4px; color:var(--txtm); cursor:pointer; width:24px; height:24px; display:flex; align-items:center; justify-content:center;">✕</button>
    </div>
    
    <div style="padding: 14px 18px; border-bottom: 1px solid var(--border2); display: flex; flex-direction: column; gap: 8px;">
        <input type="text" id="knowledge-search" class="fi" placeholder="Search mineral or author...">
        <div class="fr2">
            <select class="fs" id="knowledge-filter-type" style="font-size: 11px;">
                <option value="All">All Types</option>
                <option value="Raman">Raman</option>
                <option value="Infrared">Infrared</option>
                <option value="Both">Both</option>
            </select>
            <select class="fs" id="knowledge-filter-class" style="font-size: 11px;">
                <option value="All">All Classes</option>
                </select>
        </div>
    </div>

    <div id="knowledge-content" style="flex:1; overflow-y:auto; padding: 18px;">
        </div>
</div>


<input type="color" id="cpick">
<div id="loading"><i class="fa-solid fa-hourglass-half"></i> Processing…</div>

</body>
</html>