API tools faq
paste
Guest User

Untitled

a guest
Apr 2nd, 2026
78
0
Never
5
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 162.56 KB | Source Code | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Gemstone Identification & Grading Report</title>
  7. <meta name="description" content="Professional gemstone identification and grading report generator with automated assessment calculations, photo documentation, and PDF export.">
  8. <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><polygon points='50,5 85,30 100,50 85,70 50,95 15,70 0,50 15,30' fill='%23B8963E'/></svg>">
  9. <!-- html2pdf for Direct PDF Export -->
  10. <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
  11. <script>
  12. if (typeof html2pdf === "undefined") {
  13.  document.write('<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html2pdf.bundle.min.js"><\/script>');
  14. }
  15. </script>
  16. <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
  17. <style>@font-face { font-family:'Times New Roman'; src:local('Times New Roman'), local('Times'), local('Georgia'); } </style>
  18. <style>
  19. :root {
  20.   --navy: #111D35; --navy-med: #1B2D50; --navy-light: #2A4270; --navy-fade: #3A5585;
  21.   --gold: #B8963E; --gold-light: #D4B565; --gold-pale: #F0E6C8;
  22.   --cream: #FFFDF5; --warm-white: #FAFAF7; --light-gray: #E8E8E5;
  23.   --mid-gray: #9A9A97; --dark-gray: #4A4A48; --field-line: #C0C0BD; --accent-blue: #8899BB;
  24.   --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  25.   --font-body: 'Times New Roman', Times, Georgia, serif;
  26. }
  27. *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  28. body { background:#2C2C30; min-height:100vh; font-family:var(--font-body); }
  29. .toolbar { position:sticky; top:0; z-index:1000; background:linear-gradient(135deg,var(--navy),var(--navy-med)); padding:12px 24px; display:flex; align-items:center; justify-content:space-between; box-shadow:0 4px 20px rgba(0,0,0,0.3); border-bottom:2px solid var(--gold); }
  30. .toolbar-left { display:flex; align-items:center; gap:14px; }
  31. .toolbar-logo { width:28px; height:28px; background:var(--gold); clip-path:polygon(50% 0%,85% 30%,100% 50%,85% 70%,50% 100%,15% 70%,0% 50%,15% 30%); }
  32. .toolbar-title { font-family:var(--font-display); color:var(--gold-light); font-size:18px; font-weight:600; }
  33. .toolbar-right { display:flex; gap:10px; }
  34. .toolbar-btn { font-family:var(--font-body); font-size:13px; font-weight:600; padding:8px 18px; border:none; border-radius:4px; cursor:pointer; transition:all 0.2s; display:flex; align-items:center; gap:6px; }
  35. .btn-new { background:transparent; color:var(--accent-blue); border:1px solid var(--accent-blue); }
  36. .btn-new:hover { background:rgba(136,153,187,0.15); }
  37. .btn-compare { background:transparent; color:var(--gold-light); border:1px solid var(--gold-light); }
  38. .btn-compare:hover { background:rgba(184,150,62,0.15); }
  39. .btn-pdf { background:linear-gradient(135deg, #e8edf2, #d5dce5); color:var(--navy); }
  40. .btn-pdf:hover { filter:brightness(1.05); transform:translateY(-1px); }
  41. .btn-print { background:linear-gradient(135deg,var(--gold),var(--gold-light)); color:var(--navy); }
  42. .btn-print:hover { filter:brightness(1.1); transform:translateY(-1px); }
  43. .btn-help { background:transparent; color:var(--accent-blue); border:1px solid var(--accent-blue); }
  44. .btn-help:hover { background:rgba(136,153,187,0.15); }
  45.  
  46. .page-wrapper { display:flex; flex-direction:column; align-items:center; padding:30px 20px 60px; gap:40px; }
  47. .report-page { width:8.5in; min-height:11in; max-height:11in; background:var(--warm-white); position:relative; box-shadow:0 8px 40px rgba(0,0,0,0.4); overflow:hidden; }
  48. .report-page::before { content:''; position:absolute; inset:10px; border:1.5px solid var(--gold); pointer-events:none; z-index:2; }
  49. .report-page::after { content:''; position:absolute; inset:13px; border:0.5px solid var(--navy); pointer-events:none; z-index:2; }
  50. .report-inner { padding:16px 14px 14px; height:100%; }
  51. .report-header { background:linear-gradient(180deg,var(--navy),var(--navy-med)); padding:14px 20px 12px; text-align:center; border-bottom:2px solid var(--gold); margin-bottom:2px; position:relative; }
  52. .report-header::after { content:''; position:absolute; bottom:-4px; left:0; right:0; height:0.5px; background:var(--navy); }
  53. .report-title { font-family:var(--font-display); font-size:17px; font-weight:700; color:var(--gold-light); letter-spacing:1.5px; margin-bottom:0; }
  54. .header-gradient-line { height:1px; margin:4px auto; width:80%; background:linear-gradient(90deg, #C0C0BD, #4A4A48); }
  55. .report-subtitle { font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--accent-blue); font-style:italic; }
  56. .report-subtitle::before,.report-subtitle::after { content:'◆'; color:var(--gold); font-size:7px; margin:0 8px; vertical-align:middle; font-style:normal; }
  57. .header-meta { display:flex; justify-content:space-between; align-items:center; margin-top:8px; padding-top:6px; }
  58. .header-meta-group { display:flex; align-items:center; gap:6px; }
  59. .meta-label { font-size:9px; font-weight:700; color:var(--gold-pale); letter-spacing:0.5px; text-rendering:optimizeLegibility; }
  60. .header-meta-group:first-child .meta-label,
  61. .header-meta-group:first-child .meta-value {
  62.   font-family: 'Times New Roman', Times, serif;
  63.   font-size: 11px;
  64.   font-weight: 700;
  65.   color: var(--gold-pale);
  66.   text-rendering: optimizeLegibility;
  67. }
  68. .header-meta-group:last-child .meta-label,
  69. .header-meta-group:last-child .meta-input {
  70.   font-family: 'Times New Roman', Times, serif;
  71.   font-size: 11px;
  72.   font-weight: 700;
  73.   text-rendering: optimizeLegibility;
  74. }
  75. .meta-value { font-size:11px; color:var(--gold-pale); font-weight:600; text-rendering:optimizeLegibility; }
  76. .meta-input { font-size:10px; color:white; background:transparent; border:none; border-bottom:1px solid var(--navy-fade); padding:2px 4px; width:130px; outline:none; }
  77. .meta-input:focus { border-bottom-color:var(--gold); }
  78. .regen-btn { background:none; border:none; color:var(--accent-blue); cursor:pointer; font-size:12px; padding:2px; opacity:0.6; transition:opacity 0.2s; }
  79. .regen-btn:hover { opacity:1; }
  80.  
  81. .content-columns { display:grid; grid-template-columns:40% 1fr; gap:6px; padding:3px 2px; position:relative; overflow:clip; }
  82. .content-columns::after { content:''; position:absolute; left:calc(40% + 3px); top:0; bottom:0; width:0.5px; background:var(--light-gray); }
  83. .left-col { overflow:clip; min-width:0; }
  84. .left-col .field-input { max-width:100%; min-width:0; width:0; flex:1 1 0; }
  85. .left-col .field-triple-row, .left-col .field-triple { overflow:clip; }
  86. .left-col .field-row { overflow:clip; min-width:0; }
  87. .right-col { overflow:clip; min-width:0; padding-right:2px; display:flex; flex-direction:column; }
  88. .right-col .scale-group { margin:0; }
  89. .right-col .sub-header { margin:0; padding-top:1px; margin-bottom:0; border-top:none; }
  90. .right-col .scale-labels { margin-top:0; }
  91. input[list]::-webkit-calendar-picker-indicator { display:none !important; }
  92. .prop-measure { font-size:13px; font-weight:700; font-family:var(--font-body); color:var(--navy); background:transparent; border:none; border-bottom:1px solid var(--field-line); padding:0 2px; outline:none; text-align:center; width:100%; }
  93. .prop-measure:focus { border-bottom-color:var(--gold); background:rgba(184,150,62,0.04); }
  94. .prop-measure::placeholder { color:var(--mid-gray); font-weight:400; font-size:10px; }
  95. .prop-grid { display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr; gap:1px 4px; margin-top:2px; }
  96. .prop-cell { display:flex; flex-direction:column; align-items:center; }
  97. .prop-cell-label { font-size:12px; font-weight:600; color:var(--dark-gray); letter-spacing:0.3px; white-space:nowrap; }
  98. .right-col .field-input { max-width:100%; min-width:0; width:0; flex:1 1 0; }
  99. .right-col .field-pair, .right-col .field-triple-row { overflow:clip; }
  100. .right-col .field-row { overflow:clip; min-width:0; }
  101. .section-hdr { background:var(--navy); color:white; font-family:var(--font-display); font-size:9.5px; font-weight:700; letter-spacing:0.5px; padding:4px 8px 3px; border-radius:2px; border-bottom:1px solid var(--gold); margin-bottom:4px; margin-top:5px; text-align:center; position:relative; }
  102. .section-hdr.alt { background:var(--navy-med); }
  103. .section-hdr.alt2 { background:var(--navy-light); }
  104. .section-hdr:first-child { margin-top:0; }
  105. h2.section-hdr, h3.section-hdr { margin:0; font-size:inherit; line-height:normal; }
  106. .field-row { display:flex; align-items:baseline; margin-bottom:2.5px; gap:4px; }
  107. .field-label { font-size:8.5px; font-weight:600; color:var(--dark-gray); white-space:nowrap; flex-shrink:0; display:flex; align-items:center; }
  108. .field-input { flex:1; font-size:9.5px; color:var(--navy); background:transparent; border:none; border-bottom:1px solid var(--field-line); padding:2px 3px; outline:none; min-width:0; font-family:var(--font-body); }
  109. .field-input:focus { border-bottom-color:var(--gold); background:rgba(184,150,62,0.04); }
  110. .field-pair { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
  111. .field-triple { display:grid; grid-template-columns:1fr 1fr 0.8fr; gap:4px; }
  112. .field-triple.sg-ri-biref { grid-template-columns:0.36fr 0.36fr 0.29fr; gap:3px; }
  113. .field-triple-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:4px; }
  114. .field-quad-row { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:4px; overflow:clip; }
  115. .field-quad-opchar { display:grid; grid-template-columns:1.2fr 0.6fr 0.6fr 0.6fr; gap:3px; overflow:clip; }
  116. .field-quad-grading { display:grid; grid-template-columns:0.6fr 1.5fr 0.9fr 1fr; gap:4px; overflow:clip; }
  117. .field-quad-color { display:grid; grid-template-columns:1.1fr 1.1fr 0.8fr 0.8fr; gap:4px; overflow:clip; }
  118. .field-triple-clarity { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:4px; overflow:clip; }
  119.  
  120. .inline-btn { background:none; border:none; cursor:pointer; font-size:8px; margin-left:1px; filter:grayscale(1); transition:all 0.2s; opacity:0.7; }
  121. .inline-btn:hover { filter:grayscale(0); opacity:1; transform:scale(1.1); }
  122.  
  123. .photo-area { border:1px solid var(--gold); position:relative; cursor:pointer; overflow:hidden; transition:border-color 0.2s; background:var(--warm-white); }
  124. .photo-area:hover { border-color:var(--gold-light); }
  125. .photo-area.has-image { cursor:default; }
  126. .photo-main { height:125px; }
  127. .photo-micro { height:95px; }
  128. .photo-spectro { height:90px; }
  129. .photo-grid { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin:2px 0; }
  130. .photo-area::before,.photo-area::after { content:''; position:absolute; width:8px; height:8px; border-color:var(--gold-light); border-style:solid; pointer-events:none; z-index:1; }
  131. .photo-area::before { top:3px; left:3px; border-width:1px 0 0 1px; }
  132. .photo-area::after { top:3px; right:3px; border-width:1px 1px 0 0; }
  133. .photo-corner-bl,.photo-corner-br { position:absolute; width:8px; height:8px; border-color:var(--gold-light); border-style:solid; pointer-events:none; z-index:1; }
  134. .photo-corner-bl { bottom:3px; left:3px; border-width:0 0 1px 1px; }
  135. .photo-corner-br { bottom:3px; right:3px; border-width:0 1px 1px 0; }
  136. .photo-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:var(--mid-gray); gap:2px; }
  137. .photo-placeholder-icon { font-size:18px; opacity:0.4; }
  138. .photo-placeholder-text { font-size:8px; text-transform:uppercase; letter-spacing:0.5px; font-weight:600; }
  139. .photo-placeholder-sub { font-size:7.5px; font-style:italic; opacity:0.7; }
  140. .photo-preview { width:100%; height:100%; object-fit:contain; display:none; background:white; }
  141. .photo-area.has-image .photo-placeholder { display:none; }
  142. .photo-area.has-image .photo-preview { display:block; }
  143. .photo-remove { position:absolute; top:4px; right:4px; width:16px; height:16px; background:rgba(0,0,0,0.6); color:white; border:none; border-radius:50%; font-size:10px; cursor:pointer; display:none; align-items:center; justify-content:center; z-index:10; line-height:1; }
  144. .photo-area.has-image:hover .photo-remove { background:rgba(180,0,0,0.8); }
  145. .photo-area.has-image .photo-remove { display:flex; }
  146. input[type="file"].photo-file-input { display:none; }
  147. .photo-area.drag-over { border-color:var(--gold-light); background:rgba(184,150,62,0.08); border-style:dashed; }
  148.  
  149.  
  150. /* Clarity diagram inclusion plotting */
  151. .clar-svg-wrapper { position:relative; display:inline-block; cursor:crosshair; }
  152. .clar-svg-wrapper svg { display:block; }
  153. .inclusion-mark { position:absolute; width:6px; height:6px; background:#c00; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; z-index:5; }
  154. .clar-controls { display:flex; gap:3px; justify-content:center; margin-top:2px; }
  155. .clar-controls button { font-size:7px; padding:1px 4px; background:var(--navy); color:white; border:none; border-radius:2px; cursor:pointer; }
  156. .clar-controls button:hover { background:var(--gold); }
  157. /* Plotting Canvas CSS */
  158. .plot-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:5; cursor:crosshair; }
  159. .plot-controls { position:absolute; bottom:4px; left:50%; transform:translateX(-50%); display:flex; gap:4px; z-index:15; background:rgba(255,255,255,0.85); padding:2px 4px; border-radius:4px; box-shadow:0 1px 4px rgba(0,0,0,0.2); }
  160. .plot-btn { background:none; border:none; font-size:10px; cursor:pointer; color:var(--navy); border-radius:2px; padding:2px 4px; transition:all 0.2s; }
  161. .plot-btn:hover { background:var(--light-gray); }
  162. .plot-btn.active { background:var(--gold); color:white; }
  163.  
  164. .scale-group { margin:0; }
  165. .scale-title { font-size:8px; color:var(--navy); font-weight:700; margin-bottom:1px; text-align:center; letter-spacing:0.3px; border-top:0.5px solid var(--gold-light); padding-top:2px; }
  166. .scale-boxes { display:flex; gap:1px; }
  167. .scale-box { flex:1; height:13px; border:0.5px solid var(--mid-gray); border-radius:2px; display:flex; align-items:center; justify-content:center; font-size:6.5px; font-weight:700; color:var(--dark-gray); cursor:pointer; transition:all 0.15s; user-select:none; min-width:0; }
  168. .scale-box:hover, .scale-box:focus { border-color:var(--gold); transform:scale(1.05); outline:2px solid var(--gold); outline-offset:1px; }
  169. .scale-box.selected { background:var(--gold)!important; color:white!important; border-color:var(--gold)!important; box-shadow:0 1px 4px rgba(184,150,62,0.4); }
  170. .scale-labels { display:flex; justify-content:space-between; font-size:7px; color:var(--mid-gray); margin-top:0; padding:0 1px; }
  171.  
  172. .sub-header { border-top:0.5px solid var(--gold-light); padding-top:3px; margin-top:3px; margin-bottom:3px; }
  173. .sub-header-text { font-size:8px; font-weight:700; color:var(--navy); letter-spacing:0.5px; text-align:center; }
  174. .assessment-section { margin:0 4px; border:1.5px solid var(--gold); border-radius:3px; overflow:hidden; }
  175. .assessment-header { background:linear-gradient(135deg,var(--navy),var(--navy-med)); padding:4px 10px; display:flex; align-items:center; justify-content:space-between; border-bottom:1.5px solid var(--gold); }
  176. .assessment-header-title { font-family:var(--font-display); font-size:12px; font-weight:700; color:var(--gold-light); letter-spacing:0.5px; }
  177. .assessment-header-auto { font-size:10px; color:var(--accent-blue); font-style:italic; font-weight:700; }
  178. .assessment-body { display:grid; grid-template-columns:1fr auto; gap:0; min-height:50px; }
  179. .assessment-breakdown { padding:5px 10px; display:grid; grid-template-columns:1fr 1fr; gap:1px 12px; }
  180. .assess-item { display:flex; justify-content:space-between; align-items:center; font-size:9.5px; color:var(--dark-gray); padding:1px 0; }
  181. .assess-item-label { font-weight:600; }
  182. .assess-item-value { font-weight:700; color:var(--navy); min-width:50px; text-align:right; }
  183. .assess-item-value.empty { color:var(--mid-gray); font-style:italic; font-weight:400; }
  184. .assessment-grade-box { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:6px 14px; background:var(--navy); border-left:1.5px solid var(--gold); min-width:100px; transition:background 0.4s ease; }
  185. .grade-label { font-size:10px; color:rgba(255,255,255,0.7); letter-spacing:0.8px; margin-bottom:2px; }
  186. .grade-value { font-family:var(--font-display); font-size:24px; font-weight:700; transition:color 0.3s; color:white; }
  187. .grade-descriptor { font-size:9px; font-weight:600; letter-spacing:0.5px; margin-top:1px; transition:color 0.3s; color:white; }
  188. .grade-empty .grade-value, .grade-empty .grade-descriptor { color:var(--navy-fade); }
  189.  
  190. .bottom-section { padding:0 4px; }
  191. .comments-area { width:100%; font-family:var(--font-body); font-size:9.5px; color:var(--navy); border:none; border-bottom:1px solid var(--field-line); background:transparent; resize:none; outline:none; padding:3px; margin-bottom:1px; }
  192. .comments-area:focus { border-bottom-color:var(--gold); background:rgba(184,150,62,0.03); }
  193. .report-footer-disclaimer { padding:3px 8px 2px; border-top:1px solid var(--gold); margin-top:0; }
  194. .disclaimer-text { font-size:10px; color:var(--mid-gray); line-height:1.4; margin-bottom:1px; }
  195. .sig-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:3px; padding-bottom:3px; }
  196. .sig-field { display:flex; align-items:baseline; gap:4px; }
  197. .sig-label { font-size:10px; font-weight:700; color:var(--dark-gray); white-space:nowrap; }
  198. .sig-input { flex:1; font-family:var(--font-body); font-size:11.5px; color:var(--navy); background:transparent; border:none; border-bottom:1px solid var(--field-line); padding:2px 3px; outline:none; }
  199. .sig-input:focus { border-bottom-color:var(--gold); }
  200. .report-footer-band { background:var(--navy); padding:3px 12px; display:flex; align-items:center; justify-content:center; gap:8px; border-top:1px solid var(--gold); }
  201. .footer-diamond { width:6px; height:6px; background:var(--gold); clip-path:polygon(50% 0%,85% 50%,50% 100%,15% 50%); flex-shrink:0; }
  202. .footer-text { font-size:10px; color:var(--accent-blue); letter-spacing:0.3px; font-weight:700; }
  203.  
  204. /* PAGE 2 */
  205. .ref-inner { padding:14px 20px 12px; height:100%; }
  206. .ref-header { background:linear-gradient(180deg,var(--navy),var(--navy-med)); padding:12px 20px 10px; text-align:center; border-bottom:2px solid var(--gold); margin-bottom:6px; }
  207. .ref-title { font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--gold-light); letter-spacing:1.5px; margin-bottom:0; }
  208. .ref-subtitle { font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--accent-blue); font-style:italic; margin-top:0; }
  209. .ref-columns { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  210. .ref-section { margin-bottom:2px; }
  211. .ref-section-title { background:var(--navy); color:white; font-family:var(--font-display); font-size:9.5px; font-weight:700; letter-spacing:0.5px; padding:3px 7px; border-radius:2px; border-bottom:1px solid var(--gold); margin-bottom:1px; text-align:center; }
  212. .ref-section-title.alt { background:var(--navy-med); }
  213.  
  214. /* Updated Condensed Spacing — Times New Roman, +1pt line spacing */
  215. .ref-entry { margin-bottom:5.5px; line-height:9.2px; text-align:justify; font-family:'Times New Roman', Times, Georgia, serif; }
  216. .ref-section.ref-compact .ref-entry { margin-bottom:0.35px; }
  217. .ref-term { font-size:9.2px; font-weight:700; color:var(--navy); font-family:'Times New Roman', Times, Georgia, serif; }
  218. .ref-def { font-size:8.8px; color:var(--dark-gray); font-family:'Times New Roman', Times, Georgia, serif; }
  219.  
  220. .ref-table { width:100%; border-collapse:collapse; margin:2px 0 3px; font-size:8.8px; font-family:'Times New Roman', Times, Georgia, serif; }
  221. .ref-table th { background:var(--navy); color:var(--gold-pale); padding:2px 4px; text-align:left; font-weight:600; font-size:7.5px; letter-spacing:0.3px; text-transform:uppercase; font-family:'Times New Roman', Times, Georgia, serif; }
  222. .ref-table td { padding:1.5px 4px; border-bottom:0.5px solid var(--light-gray); color:var(--dark-gray); line-height:9.2px; }
  223. .ref-table tr:nth-child(even) td { background:rgba(0,0,0,0.02); }
  224. .ref-table .grade-num { font-weight:700; color:var(--navy); text-align:center; width:24px; }
  225. .ref-divider { border:none; border-top:0.5px solid var(--gold-light); margin:3px 0; }
  226. .ref-full-width { grid-column:1/-1; }
  227. .ref-section + .ref-section { margin-top: 10px; }
  228.  
  229. .pdf-na { font-size:9px; font-style:italic; color:var(--mid-gray); border-bottom:1px solid var(--field-line); padding:2px 3px; flex:1; font-family:var(--font-body); }
  230.  
  231. /* PDF EXPORT / PRINT MODIFIERS */
  232. .exporting .toolbar { display:none !important; }
  233. .exporting .page-wrapper { padding:0 !important; gap:0 !important; }
  234. body.exporting { background:white !important; }
  235. .exporting .regen-btn, .exporting .photo-remove, .exporting .plot-controls, .exporting .inline-btn { display:none !important; }
  236. .exporting .field-input, .exporting .meta-input, .exporting .comments-area, .exporting .sig-input { border-bottom-color:transparent !important; background:transparent !important; }
  237.  
  238. @media print {
  239.   @page { size:letter portrait; margin:0; }
  240.   body { background:white!important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  241.   .toolbar { display:none!important; }
  242.   .page-wrapper { padding:0!important; gap:0!important; }
  243.   .report-page { box-shadow:none!important; page-break-after:always; }
  244.   .report-page:last-child { page-break-after:avoid; }
  245.   .field-input,.meta-input,.comments-area,.sig-input { border-bottom-color:transparent!important; background:transparent!important; }
  246.   .regen-btn, .photo-remove, .plot-controls, .inline-btn { display:none!important; }
  247.   .photo-area { cursor:default!important; }
  248.   .report-header,.section-hdr,.report-footer-band,.scale-box,.scale-box.selected,.assessment-header,.assessment-grade-box,.ref-header,.ref-section-title,.ref-table th { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  249. }
  250.  
  251. /* Modals */
  252. .modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:2000; align-items:center; justify-content:center; }
  253. .modal-overlay.active { display:flex; }
  254. .modal { background:white; border-radius:8px; padding:28px 32px; max-width:560px; max-height:80vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,0.3); border-top:3px solid var(--gold); }
  255. .modal.large-modal { max-width:850px; width:90%; padding:24px; }
  256. .modal h2 { font-family:var(--font-display); color:var(--navy); font-size:20px; margin-bottom:14px; }
  257. .modal h3 { font-family:var(--font-display); color:var(--navy); font-size:16px; margin-bottom:10px; border-bottom:1px solid var(--gold); padding-bottom:4px; }
  258. .modal p,.modal li { font-family:var(--font-body); font-size:13px; color:var(--dark-gray); line-height:1.6; margin-bottom:8px; }
  259. .modal ul { padding-left:20px; margin-bottom:12px; }
  260. .modal .modal-close { margin-top:16px; padding:8px 24px; background:var(--navy); color:white; border:none; border-radius:4px; cursor:pointer; font-family:var(--font-body); font-weight:600; margin-right:8px; }
  261.  
  262. /* Color Picker Custom Styles */
  263. .cp-row { margin-bottom: 15px; }
  264. .cp-row label { display:block; font-size:13px; font-weight:600; color:var(--navy); margin-bottom:5px; }
  265. .cp-row span { color:var(--accent-blue); font-weight:400; }
  266. .cp-slider { width:100%; cursor:pointer; }
  267. #cp-preview { height:70px; border-radius:6px; margin:20px 0 10px; border:1px solid var(--mid-gray); box-shadow:inset 0 2px 10px rgba(0,0,0,0.1); transition:background 0.2s; }
  268. .cp-presets { margin: 15px 0; }
  269. .cp-preset { padding:6px 10px; background:var(--navy); color:white; border:1px solid var(--gold); border-radius:4px; cursor:pointer; font-family:var(--font-body); font-size:11px; font-weight:600; transition:all 0.2s; }
  270. .cp-preset:hover { background:var(--navy-med); transform:translateY(-1px); box-shadow:0 2px 8px rgba(184,150,62,0.3); }
  271.  
  272. /* Comparison Chart Styles */
  273. .compare-container { display:flex; gap:24px; }
  274. .compare-left { flex: 1; display:flex; flex-direction:column; }
  275. .compare-right { flex: 1; overflow-y:auto; padding-right:8px; display:flex; flex-direction:column; gap:16px; }
  276. #compare-img-box { flex-grow:1; background:#f4f4f4; border:1px solid #ddd; border-radius:4px; display:flex; align-items:center; justify-content:center; overflow:hidden; min-height:300px; }
  277. #compare-img { max-width:100%; max-height:100%; object-fit:contain; }
  278. .chart-box { border:1px solid var(--light-gray); border-radius:4px; padding:10px; background:#fafafa; }
  279. .chart-title { font-size:11px; font-weight:700; color:var(--navy); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.5px; }
  280. .tone-scale { display:flex; height:24px; width:100%; border-radius:3px; overflow:hidden; border:1px solid var(--mid-gray); }
  281. .tone-block { flex:1; }
  282. .sat-scale { display:flex; height:24px; width:100%; border-radius:3px; overflow:hidden; border:1px solid var(--mid-gray); }
  283. .sat-block { flex:1; }
  284. .clarity-list { display:flex; flex-direction:column; gap:4px; }
  285. .clarity-item { display:flex; align-items:center; font-size:11px; color:var(--dark-gray); }
  286. .clarity-badge { background:var(--navy); color:white; font-weight:700; width:30px; text-align:center; border-radius:3px; margin-right:8px; padding:2px 0; font-size:10px; }
  287. .clarity-desc { flex:1; }
  288.  
  289. #fluo-warning { cursor:help; font-size:10px; padding:1px 4px; border-radius:2px; background:rgba(255,200,0,0.2); border:1px solid #ffcc00; display:none; position:absolute; right:8px; top:3px; }
  290. #inp-grp,#inp-spec,#inp-var,#inp-orig,#inp-crystal,#inp-opchar,#inp-sg,#inp-ri,#inp-biref,
  291. #inp-cq,#inp-sym,#inp-prof,#inp-pol,#inp-fup,#inp-bril,#inp-win,#inp-ext { font-size:10.5px; }
  292. [for="inp-grp"],[for="inp-spec"],[for="inp-var"],[for="inp-orig"],[for="inp-crystal"],[for="inp-opchar"],[for="inp-sg"],[for="inp-ri"],[for="inp-biref"],
  293. [for="inp-cq"],[for="inp-sym"],[for="inp-prof"],[for="inp-pol"],[for="inp-fup"],[for="inp-bril"],[for="inp-win"],[for="inp-ext"] { font-size:9.5px; }
  294. .sg-out-of-range { background:rgba(255,80,80,0.15) !important; border-bottom-color:#c44 !important; }
  295. </style>
  296. </head>
  297. <body>
  298.  
  299. <datalist id="variety-list">
  300.   <option value="Ruby"></option><option value="Sapphire"></option><option value="Emerald"></option>
  301.   <option value="Aquamarine"></option><option value="Morganite"></option><option value="Alexandrite"></option>
  302.   <option value="Tsavorite"></option><option value="Spessartite"></option><option value="Rhodolite"></option>
  303.   <option value="Garnet"></option><option value="Amethyst"></option><option value="Citrine"></option>
  304.   <option value="Tanzanite"></option><option value="Topaz"></option><option value="Tourmaline"></option>
  305.   <option value="Paraiba"></option><option value="Spinel"></option><option value="Peridot"></option>
  306.   <option value="Zircon"></option><option value="Diamond"></option>
  307. </datalist>
  308.  
  309. <datalist id="spec-list">
  310.   <option value="Corundum"></option><option value="Beryl"></option><option value="Chrysoberyl"></option>
  311.   <option value="Grossular"></option><option value="Spessartine"></option><option value="Pyrope-Almandine"></option>
  312.   <option value="Pyrope"></option><option value="Almandine"></option><option value="Andradite"></option>
  313.   <option value="Uvarovite"></option><option value="Elbaite"></option><option value="Dravite"></option>
  314.   <option value="Liddicoatite"></option><option value="Schorl"></option><option value="Uvite"></option>
  315.   <option value="Quartz"></option><option value="Zoisite"></option><option value="Topaz"></option>
  316.   <option value="Spinel"></option><option value="Olivine"></option><option value="Zircon"></option>
  317.   <option value="Diamond"></option>
  318. </datalist>
  319. <datalist id="grp-list">
  320.   <option value="Corundum"></option><option value="Beryl"></option><option value="Chrysoberyl"></option>
  321.   <option value="Garnet"></option><option value="Tourmaline"></option><option value="Quartz"></option>
  322.   <option value="Epidote"></option><option value="Topaz"></option><option value="Spinel"></option>
  323.   <option value="Olivine"></option><option value="Zircon"></option><option value="Native Element"></option>
  324. </datalist>
  325.  
  326. <!-- Optical Character -->
  327. <datalist id="opchar-list">
  328.   <option value="SR (Singly Refractive / Isotropic)"></option>
  329.   <option value="DR Uniaxial (+)"></option><option value="DR Uniaxial (−)"></option>
  330.   <option value="DR Biaxial (+)"></option><option value="DR Biaxial (−)"></option>
  331.   <option value="AGG (Aggregate)"></option><option value="ADR (Anomalous DR)"></option>
  332. </datalist>
  333.  
  334. <!-- Crystal System -->
  335. <datalist id="crystal-list">
  336.   <option value="Isometric (Cubic)"></option>
  337.   <option value="Hexagonal (Trigonal)"></option><option value="Hexagonal"></option>
  338.   <option value="Tetragonal"></option><option value="Orthorhombic"></option>
  339.   <option value="Monoclinic"></option><option value="Triclinic"></option>
  340.   <option value="Amorphous"></option><option value="Polycrystalline"></option>
  341. </datalist>
  342.  
  343. <!-- UV Fluorescence Responses -->
  344. <datalist id="uv-list">
  345.   <option value="Inert"></option><option value="VW Red"></option><option value="W Red"></option>
  346.   <option value="Mod Red"></option><option value="St Red"></option><option value="VSt Red"></option>
  347.   <option value="W Orange"></option><option value="Mod Orange"></option><option value="St Orange"></option>
  348.   <option value="W Yellow"></option><option value="Mod Yellow"></option><option value="St Yellow"></option>
  349.   <option value="W Green"></option><option value="Mod Green"></option><option value="St Green"></option>
  350.   <option value="W Blue"></option><option value="Mod Blue"></option><option value="St Blue"></option>
  351.   <option value="W White"></option><option value="Mod White"></option><option value="St White"></option>
  352.   <option value="Chalky Blue"></option><option value="Chalky Green"></option><option value="Chalky Yellow"></option>
  353.   <option value="W Pink"></option><option value="Mod Pink"></option><option value="St Pink"></option>
  354.   <option value="W Purple"></option><option value="Mod Purple"></option>
  355. </datalist>
  356.  
  357. <!-- Dichroscope Responses -->
  358. <datalist id="dich-list">
  359.   <option value="None (Isotropic / SRI)"></option><option value="Weak Dichroic"></option>
  360.   <option value="Moderate Dichroic"></option><option value="Strong Dichroic"></option>
  361.   <option value="Trichroic (Weak)"></option><option value="Trichroic (Moderate)"></option>
  362.   <option value="Trichroic (Strong)"></option><option value="ADR (Anomalous)"></option>
  363. </datalist>
  364.  
  365. <!-- Chelsea Filter Responses -->
  366. <datalist id="chel-list">
  367.   <option value="No Reaction"></option><option value="Green"></option><option value="Blue-Green"></option>
  368.   <option value="Pink"></option><option value="Red"></option><option value="Strong Red"></option>
  369.   <option value="Orange-Pink"></option><option value="Greenish Grey"></option>
  370. </datalist>
  371.  
  372. <!-- Ruby Filter Responses -->
  373. <datalist id="ruby-list">
  374.   <option value="Dark (No Reaction)"></option><option value="Faint Glow"></option>
  375.   <option value="Moderate Glow"></option><option value="Strong Glow"></option>
  376.   <option value="Bright Red Glow"></option><option value="Pink Glow"></option>
  377. </datalist>
  378.  
  379. <!-- Shape Options -->
  380. <datalist id="shape-list">
  381.   <option value="Round"></option><option value="Oval"></option><option value="Cushion"></option>
  382.   <option value="Emerald Cut"></option><option value="Pear"></option><option value="Marquise"></option>
  383.   <option value="Heart"></option><option value="Princess"></option><option value="Radiant"></option>
  384.   <option value="Asscher"></option><option value="Trillion"></option><option value="Baguette"></option>
  385.   <option value="Cabochon"></option><option value="Briolette"></option><option value="Rose Cut"></option>
  386.   <option value="Freeform"></option><option value="Hexagonal"></option><option value="Kite"></option>
  387.   <option value="Shield"></option><option value="Trapezoid"></option>
  388. </datalist>
  389.  
  390. <!-- Cut Style Options -->
  391. <datalist id="cutstyle-list">
  392.   <option value="Brilliant"></option><option value="Step"></option><option value="Mixed"></option>
  393.   <option value="Modified Brilliant"></option><option value="Rose"></option><option value="Cabochon"></option>
  394.   <option value="Buff Top"></option><option value="Checkerboard"></option><option value="Fantasy"></option>
  395.   <option value="Portuguese"></option><option value="Scissor"></option><option value="Barion"></option>
  396.   <option value="Old Mine"></option><option value="Old European"></option>
  397.   <option value="Concave"></option><option value="Mogul"></option><option value="Millennium"></option>
  398.   <option value="Briolette"></option><option value="Double Rose"></option><option value="Peruzzi"></option>
  399.   <option value="Flanders"></option><option value="Radiant"></option><option value="Asscher"></option>
  400.   <option value="Ceylon"></option><option value="Carved"></option><option value="Faceted Cab"></option>
  401.   <option value="Tallow Top"></option><option value="Swiss"></option>
  402.   <option value="Antique"></option><option value="French Cut"></option><option value="Hexagonal Cut"></option>
  403.   <option value="Kite Cut"></option><option value="Lozenge"></option><option value="Mazarin"></option>
  404.   <option value="Mirror Cut"></option><option value="Native Cut"></option><option value="Opposed Bar"></option>
  405.   <option value="Precision Cut"></option><option value="Royal Cut"></option><option value="Shield Cut"></option>
  406.   <option value="Star Cut"></option><option value="Table Cut"></option><option value="Trilliant"></option>
  407.   <option value="Window Cut"></option>
  408. </datalist>
  409.  
  410. <!-- Cut Quality / Symmetry / Polish / Face-up / Profile Grades -->
  411. <datalist id="grade5-list">
  412.   <option value="Poor"></option><option value="Fair"></option><option value="Good"></option>
  413.   <option value="Very Good"></option><option value="Excellent"></option>
  414. </datalist>
  415.  
  416. <!-- Brilliance Percentage -->
  417. <datalist id="bril-list">
  418.   <option value="< 50%"></option><option value="50 - 60%"></option><option value="60 - 70%"></option>
  419.   <option value="70 - 80%"></option><option value="80 - 85%"></option><option value="85 - 90%"></option>
  420.   <option value="90%+"></option>
  421. </datalist>
  422.  
  423. <!-- Enhancement Standard Treatment -->
  424. <datalist id="treat-std-list">
  425.   <option value="None (N)"></option><option value="Heat (H)"></option><option value="Low-Temp Heat (LTH)"></option>
  426.   <option value="Heat with Flux (Hf)"></option><option value="Heat with Pressure (HP)"></option>
  427.   <option value="Not Heated (NH)"></option>
  428. </datalist>
  429.  
  430. <!-- Enhancement Additional Treatment -->
  431. <datalist id="treat-add-list">
  432.   <option value="None"></option><option value="Oiling (O)"></option><option value="Resin Filling (RF)"></option>
  433.   <option value="Lead-Glass Filling (LGF)"></option><option value="Beryllium Diffusion (Be)"></option>
  434.   <option value="Lattice Diffusion (D)"></option><option value="Surface Coating (C)"></option>
  435.   <option value="Dyeing (Dy)"></option><option value="Irradiation (R)"></option><option value="Fracture Filling (F)"></option>
  436.   <option value="Bleaching (B)"></option><option value="HPHT"></option><option value="Waxing / Impregnation (W)"></option>
  437. </datalist>
  438.  
  439. <!-- Stability Options -->
  440. <datalist id="stab-list">
  441.   <option value="Excellent"></option><option value="Very Good"></option><option value="Good"></option>
  442.   <option value="Fair"></option><option value="Poor"></option><option value="Unstable"></option>
  443. </datalist>
  444.  
  445. <!-- Clarity Assessment Dropdowns -->
  446. <datalist id="clargrade-list">
  447.   <option value="FI (Flawless/Internally Flawless)"></option>
  448.   <option value="Eye Clean"></option>
  449.   <option value="LI (Lightly Included)"></option>
  450.   <option value="MI (Moderately Included)"></option>
  451.   <option value="HI (Heavily Included)"></option>
  452.   <option value="EI₂ (Excessively Included)"></option>
  453.   <option value="EI₃ (Severely Included)"></option>
  454. </datalist>
  455. <datalist id="clartype-list">
  456.   <option value="Type I (Usually Eye Clean)"></option>
  457.   <option value="Type II (Usually Included)"></option>
  458.   <option value="Type III (Almost Always Included)"></option>
  459. </datalist>
  460. <datalist id="transp-list">
  461.   <option value="Transparent"></option>
  462.   <option value="Semi-Transparent"></option>
  463.   <option value="Translucent"></option>
  464.   <option value="Semi-Translucent"></option>
  465.   <option value="Opaque"></option>
  466. </datalist>
  467.  
  468. <div class="toolbar">
  469.   <div class="toolbar-left"><div class="toolbar-logo"></div><span class="toolbar-title">Gemstone Report Generator</span></div>
  470.   <div class="toolbar-right">
  471.     <button class="toolbar-btn btn-help" onclick="showHelp()" aria-label="Open help guide">&#10067; Help</button>
  472.     <button class="toolbar-btn btn-compare" onclick="openCompareChart()" aria-label="Open comparison chart">⚖️ Compare Chart</button>
  473.     <button class="toolbar-btn btn-new" onclick="newReport()" aria-label="Start new report">&#10022; New Report</button>
  474.     <button class="toolbar-btn btn-pdf" onclick="exportPDF()" aria-label="Export as PDF">&#128196; Export PDF</button>
  475.     <button class="toolbar-btn btn-print" onclick="window.print()" aria-label="Print report">&#128424; Print</button>
  476.   </div>
  477. </div>
  478.  
  479. <div class="modal-overlay" id="helpModal"><div class="modal" style="max-height:90vh; overflow-y:auto;">
  480.   <h2>Complete Guide to This Report</h2>
  481.  
  482.   <h3>Getting Started</h3>
  483.   <p><strong>Auto-Save:</strong> All text, photos, and grades are automatically saved to your browser. You can close this window and your work will be here when you return.</p>
  484.   <p><strong>Creating Reports:</strong> Click "New Report" to start a fresh gemstone assessment. Your current report is automatically saved to your browser.</p>
  485.  
  486.   <h3>Smart Database</h3>
  487.   <p>The database recognizes 20+ common gemstone varieties and automatically populates Species and Group fields:</p>
  488.   <ul>
  489.     <li><strong>Variety:</strong> Start typing a known variety (e.g., "Ruby", "Sapphire", "Emerald"). The database instantly fills Species and Group.</li>
  490.     <li><strong>Species & Group:</strong> Now searchable independently! The full list of species and groups is available via dropdown even if you haven't selected a Variety.</li>
  491.    <li><strong>Multi-Option Species:</strong> For varieties with multiple possible species (like Garnet or Tourmaline), a dropdown appears for selection.</li>
  492.  </ul>
  493.  
  494.  <h3>Photo Features</h3>
  495.  <ul>
  496.    <li><strong>Upload Methods:</strong> Click any photo area to browse, or drag-and-drop images directly.</li>
  497.    <li><strong>Photo Areas:</strong> Main (Daylight), Magnified (10x), Microscope (30x+), and Spectro sections each hold distinct images.</li>
  498.    <li><strong>Inclusion Plotting:</strong> Click the ✎ icon below Microscope Image 2 to overlay red inclusion marks on your image for documentation.</li>
  499.    <li><strong>Remove Images:</strong> Hover over any uploaded photo and click the X button to delete and re-upload.</li>
  500.  </ul>
  501.  
  502.  <h3>Grading System</h3>
  503.  <ul>
  504.    <li><strong>Color Grade (1-10):</strong> Assess saturation, hue purity, and tone. Use the interactive color picker (💡 button) to visualize GIA color codes.</li>
  505.    <li><strong>Clarity Grade (1-10):</strong> Evaluate eye-visibility of inclusions. Reference charts compare your observations to standard benchmarks.</li>
  506.    <li><strong>Cutting Grade (1-10):</strong> Consider proportions, symmetry, and polish. Reference diagrams help identify cut quality issues.</li>
  507.    <li><strong>Finish Grade (1-10):</strong> Polish and facet alignment affect brilliance and durability.</li>
  508.    <li><strong>Stability Index:</strong> Treatment permanence. Heated stones score high; fracture-filled stones score low.</li>
  509.   </ul>
  510.  
  511.   <h3>Color Analysis</h3>
  512.   <ul>
  513.     <li><strong>Interactive Color Picker:</strong> Use the 💡 icon to open an HSL-based color selector with 19+ hues covering the full GIA color wheel.</li>
  514.     <li><strong>Hue Slider:</strong> Select from Red, Orangy Red, Orange, Yellow, Green, Blue, Violet, Purple, Pink, Brown, Gray, and more.</li>
  515.     <li><strong>Tone Slider:</strong> From Colorless (0) to Black (10), representing the stone's darkness.</li>
  516.     <li><strong>Saturation Slider:</strong> From Colorless/Near Colorless (0) to Vivid (6).</li>
  517.     <li><strong>Preset Colors:</strong> Quick-select buttons for Padparadscha, Pigeon Blood, Cornflower Blue, and Royal Blue.</li>
  518.   </ul>
  519.  
  520.   <h3>Diagnostic Tools</h3>
  521.   <ul>
  522.     <li><strong>RI (Refractive Index) Auto-Fill:</strong> Entering a species auto-populates typical RI ranges and optical character.</li>
  523.     <li><strong>SG Calculator:</strong> Click the ⚙ icon next to Specific Gravity to calculate from Carat Weight and Measurements.</li>
  524.     <li><strong>SG Range Checker:</strong> A yellow ⚠️ warning appears if your SG falls outside the normal range for the identified species.</li>
  525.     <li><strong>UV Anomaly Checker:</strong> Unnatural fluorescence combinations trigger alerts (e.g., red fluorescence in natural blue sapphire).</li>
  526.     <li><strong>Auto-Formatting:</strong> Type measurement numbers like "9.5x7x5" and click away; it auto-formats to "9.50 x 7.00 x 5.00 mm".</li>
  527.   </ul>
  528.  
  529.   <h3>PDF Export & Printing</h3>
  530.  <ul>
  531.    <li><strong>Direct PDF Export:</strong> Click "Export PDF" to generate a high-quality PDF suitable for archives or client delivery.</li>
  532.    <li><strong>Print to PDF:</strong> Use your browser's Print function for custom paper sizes or binding.</li>
  533.    <li><strong>Color Accuracy:</strong> Both methods preserve the navy/gold report styling and photo placements.</li>
  534.  </ul>
  535.  
  536.  <h3>Keyboard Shortcuts</h3>
  537.  <ul>
  538.    <li><strong>Tab:</strong> Navigate between fields quickly.</li>
  539.    <li><strong>Ctrl+P / Cmd+P:</strong> Open Print dialog directly.</li>
  540.    <li><strong>Enter (in color picker):</strong> Apply selected color immediately.</li>
  541.  </ul>
  542.  
  543.  <button class="modal-close" onclick="closeHelp()">Got It</button>
  544. </div></div>
  545.  
  546. <div class="modal-overlay" id="colorModal"><div class="modal" style="max-width:400px;">
  547.   <h2>Interactive Color Picker</h2>
  548.   <div class="cp-row">
  549.     <label for="cp-hue">Hue: <span id="cp-hue-label">Red</span></label>
  550.     <input type="range" id="cp-hue" class="cp-slider" min="0" max="19" value="0" oninput="updateColorPreview()">
  551.   </div>
  552.   <div class="cp-row">
  553.     <label>Color Modifier: <span id="cp-mod-label">None</span></label>
  554.     <select id="cp-modifier" onchange="updateColorPreview()" style="width:100%; padding:6px; font-family:var(--font-body); font-size:12px; border:1px solid var(--field-line); border-radius:4px; color:var(--navy); cursor:pointer;">
  555.       <option value="">None</option>
  556.       <option value="pinkish">Pinkish</option>
  557.       <option value="orangy">Orangy</option>
  558.       <option value="yellowish">Yellowish</option>
  559.       <option value="greenish">Greenish</option>
  560.       <option value="bluish">Bluish</option>
  561.       <option value="violetish">Violetish</option>
  562.       <option value="brownish">Brownish</option>
  563.       <option value="grayish">Grayish</option>
  564.     </select>
  565.   </div>
  566.   <div class="cp-row">
  567.     <label for="cp-ton">Tone: <span id="cp-ton-label">5 - Medium</span></label>
  568.     <input type="range" id="cp-ton" class="cp-slider" min="0" max="10" value="5" oninput="updateColorPreview()">
  569.   </div>
  570.   <div class="cp-row">
  571.     <label for="cp-sat">Saturation: <span id="cp-sat-label">5 - Strong</span></label>
  572.     <input type="range" id="cp-sat" class="cp-slider" min="0" max="6" value="5" oninput="updateColorPreview()">
  573.   </div>
  574.   <div id="cp-preview"></div>
  575.   <div class="cp-presets">
  576.     <p style="font-size:11px; font-weight:600; margin-bottom:8px; color:var(--navy);">Gemstone Preset Colors:</p>
  577.     <div style="display:grid; grid-template-columns:1fr 1fr; gap:6px;">
  578.       <button class="cp-preset" onclick="applyPresetColor(3, 5, 5)">Padparadscha</button>
  579.       <button class="cp-preset" onclick="applyPresetColor(0, 7, 6)">Pigeon Blood</button>
  580.       <button class="cp-preset" onclick="applyPresetColor(11, 5, 6)">Cornflower Blue</button>
  581.       <button class="cp-preset" onclick="applyPresetColor(11, 6, 6)">Royal Blue</button>
  582.     </div>
  583.   </div>
  584.   <button class="modal-close" onclick="applyColor()">Apply Color</button>
  585.   <button class="modal-close" style="background:var(--accent-blue)" onclick="closeColorPicker()">Cancel</button>
  586. </div></div>
  587.  
  588. <!-- COMPARISON CHART MODAL -->
  589. <div class="modal-overlay" id="compareModal"><div class="modal large-modal">
  590.   <h2>Interactive Assessment Comparison & Reference Charts</h2>
  591.  
  592.  <div class="compare-container">
  593.    <div class="compare-left">
  594.      <h3>Your Uploaded Gemstone</h3>
  595.      <div id="compare-img-box">
  596.        <img id="compare-img" src="" alt="No Image Uploaded">
  597.      </div>
  598.      <p style="font-size:10px; color:gray; text-align:center; margin-top:6px;">(Pulls directly from Photo 1 — Daylight)</p>
  599.      
  600.       <h4 style="margin-top:12px; font-size:11px; color:var(--navy); font-weight:700;">Your Current Report Data:</h4>
  601.       <div style="background:#f5f5f5; padding:8px; border-radius:4px; font-size:10px; color:var(--dark-gray); line-height:1.6;">
  602.         <div><strong>Variety:</strong> <span id="compare-variety">Not specified</span></div>
  603.         <div><strong>Color Grade:</strong> <span id="compare-color">—</span></div>
  604.         <div><strong>Clarity Grade:</strong> <span id="compare-clarity">—</span></div>
  605.         <div><strong>Cutting Grade:</strong> <span id="compare-cutting">—</span></div>
  606.         <div><strong>Overall Grade:</strong> <span id="compare-overall">—</span></div>
  607.       </div>
  608.     </div>
  609.    
  610.     <div class="compare-right">
  611.       <h3>Industry Reference Charts</h3>
  612.      
  613.       <div class="chart-box">
  614.         <div class="chart-title">Tone Scale Reference</div>
  615.         <div style="font-size:9px; margin-bottom:4px; color:var(--mid-gray);">Lightness progression from Colorless to Black</div>
  616.         <div class="tone-scale">
  617.           <div class="tone-block" style="background: hsl(0, 0%, 99%); border-right:1px solid white;"></div>
  618.           <div class="tone-block" style="background: hsl(0, 0%, 92%); border-right:1px solid white;"></div>
  619.           <div class="tone-block" style="background: hsl(0, 0%, 80%); border-right:1px solid white;"></div>
  620.           <div class="tone-block" style="background: hsl(0, 0%, 70%); border-right:1px solid white;"></div>
  621.           <div class="tone-block" style="background: hsl(0, 0%, 55%); border-right:1px solid white;"></div>
  622.           <div class="tone-block" style="background: hsl(0, 0%, 40%); border-right:1px solid white;"></div>
  623.           <div class="tone-block" style="background: hsl(0, 0%, 30%); border-right:1px solid white;"></div>
  624.           <div class="tone-block" style="background: hsl(0, 0%, 15%); border-right:1px solid white;"></div>
  625.           <div class="tone-block" style="background: hsl(0, 0%, 8%); border-right:1px solid white;"></div>
  626.           <div class="tone-block" style="background: hsl(0, 0%, 3%); border-right:1px solid white;"></div>
  627.           <div class="tone-block" style="background: hsl(0, 0%, 1%);"></div>
  628.         </div>
  629.         <div style="display:flex; justify-content:space-between; font-size:8px; color:var(--mid-gray); margin-top:2px; padding:0 2px;">
  630.           <span>0 Colorless</span><span>5 Medium</span><span>10 Black</span>
  631.         </div>
  632.       </div>
  633.      
  634.       <div class="chart-box">
  635.         <div class="chart-title">Saturation Scale Reference</div>
  636.         <div style="font-size:9px; margin-bottom:4px; color:var(--mid-gray);">Intensity from Colorless to Vivid (blue hue example)</div>
  637.         <div class="sat-scale">
  638.           <div class="sat-block" style="background: hsl(220, 0%, 50%);"></div>
  639.           <div class="sat-block" style="background: hsl(220, 16%, 50%);"></div>
  640.           <div class="sat-block" style="background: hsl(220, 33%, 50%);"></div>
  641.           <div class="sat-block" style="background: hsl(220, 50%, 50%);"></div>
  642.           <div class="sat-block" style="background: hsl(220, 66%, 50%);"></div>
  643.           <div class="sat-block" style="background: hsl(220, 83%, 50%);"></div>
  644.           <div class="sat-block" style="background: hsl(220, 100%, 50%);"></div>
  645.         </div>
  646.         <div style="display:flex; justify-content:space-between; font-size:8px; color:var(--mid-gray); margin-top:2px; padding:0 2px;">
  647.           <span>0 Colorless</span><span>3 Mod.</span><span>6 Vivid</span>
  648.         </div>
  649.       </div>
  650.      
  651.       <div class="chart-box">
  652.         <div class="chart-title">Cut Grade Reference</div>
  653.         <div class="clarity-list">
  654.           <div class="clarity-item">
  655.             <div class="clarity-badge" style="background:var(--gold);">E</div>
  656.             <div class="clarity-desc"><strong>Excellent (9-10):</strong> Perfect/near-perfect proportions, optimal light return, superior symmetry and polish.</div>
  657.           </div>
  658.           <div class="clarity-item">
  659.             <div class="clarity-badge" style="background:var(--navy-light);">VG</div>
  660.             <div class="clarity-desc"><strong>Very Good (7-8):</strong> Excellent proportions with minimal variance, strong light performance, minor polish marks.</div>
  661.           </div>
  662.           <div class="clarity-item">
  663.             <div class="clarity-badge" style="background:var(--navy-fade);">G</div>
  664.             <div class="clarity-desc"><strong>Good (5-6):</strong> Good proportions, acceptable light return, noticeable but non-critical asymmetry or polish issues.</div>
  665.           </div>
  666.           <div class="clarity-item">
  667.             <div class="clarity-badge" style="background:var(--mid-gray);">F</div>
  668.             <div class="clarity-desc"><strong>Fair (3-4):</strong> Noticeable deviation from ideal proportions, visible symmetry/polish defects, reduced brilliance.</div>
  669.           </div>
  670.           <div class="clarity-item">
  671.             <div class="clarity-badge" style="background:var(--dark-gray); color:white;">P</div>
  672.             <div class="clarity-desc"><strong>Poor (1-2):</strong> Significant proportional issues, major asymmetry/polish defects, noticeably reduced light performance.</div>
  673.           </div>
  674.         </div>
  675.       </div>
  676.      
  677.       <div class="chart-box">
  678.         <div class="chart-title">Enhancement Reference</div>
  679.         <table style="width:100%; font-size:9px; border-collapse:collapse;">
  680.           <tr style="background:var(--navy); color:white;">
  681.             <th style="padding:4px; text-align:left; font-weight:700;">Treatment</th>
  682.             <th style="padding:4px; text-align:left; font-weight:700;">Stability</th>
  683.           </tr>
  684.           <tr style="border-bottom:1px solid var(--light-gray);">
  685.             <td style="padding:4px;">Heat Treatment</td>
  686.             <td style="padding:4px;">Permanent — Industry Standard</td>
  687.           </tr>
  688.           <tr style="border-bottom:1px solid var(--light-gray); background:rgba(0,0,0,0.02);">
  689.             <td style="padding:4px;">Irradiation</td>
  690.             <td style="padding:4px;">High — Stable in normal conditions</td>
  691.           </tr>
  692.           <tr style="border-bottom:1px solid var(--light-gray);">
  693.             <td style="padding:4px;">Glass Filling</td>
  694.             <td style="padding:4px;">Variable — Can fade with heat/cleaning</td>
  695.           </tr>
  696.           <tr style="border-bottom:1px solid var(--light-gray); background:rgba(0,0,0,0.02);">
  697.             <td style="padding:4px;">Oiling/Resin</td>
  698.             <td style="padding:4px;">Variable — Requires maintenance</td>
  699.           </tr>
  700.           <tr>
  701.             <td style="padding:4px;">Coating</td>
  702.             <td style="padding:4px;">Low — Can wear with cleaning</td>
  703.           </tr>
  704.         </table>
  705.       </div>
  706.      
  707.     </div>
  708.   </div>
  709.  
  710.   <button class="modal-close" onclick="closeCompareChart()">Close</button>
  711. </div></div>
  712.  
  713. <div class="page-wrapper" id="pdfExportWrapper">
  714. <!-- ======== PAGE 1 ======== -->
  715. <div class="report-page" id="page1"><div class="report-inner">
  716.   <div class="report-header">
  717.     <div class="report-title">GEMSTONE IDENTIFICATION &amp; GRADING REPORT</div>
  718.     <div class="header-gradient-line"></div>
  719.     <div class="report-subtitle">Comprehensive Analysis Certificate</div>
  720.     <div class="header-meta">
  721.       <div class="header-meta-group"><span class="meta-label">Report No.</span><span class="meta-value" id="reportNum"></span><button class="regen-btn" onclick="regenerateNum()" title="Regenerate" aria-label="Regenerate report number">&#8635;</button></div>
  722.       <div class="header-meta-group"><label class="meta-label" for="inp-date">Date:</label><input type="date" class="meta-input" id="inp-date" style="width:140px;"></div>
  723.     </div>
  724.   </div>
  725.   <div class="content-columns">
  726.     <!-- LEFT COLUMN -->
  727.     <div class="left-col">
  728.       <h2 class="section-hdr">Gem Identification</h2>
  729.       <div class="field-triple-row"><div class="field-row"><label class="field-label" for="inp-grp">Group:</label><input class="field-input" id="inp-grp" list="grp-list" placeholder="e.g. Beryl, Garnet"></div><div class="field-row"><label class="field-label" for="inp-spec">Species:</label><input class="field-input" id="inp-spec" list="spec-list" placeholder="e.g. Chrysoberyl"></div><div class="field-row"><label class="field-label" for="inp-var">Variety:</label><input class="field-input" id="inp-var" list="variety-list" placeholder="e.g. Ruby"></div></div>
  730.       <div class="field-pair" style="grid-template-columns:0.85fr 1.15fr;"><div class="field-row"><label class="field-label" for="inp-orig">Origin:</label><input class="field-input" id="inp-orig" placeholder="e.g. Sri Lanka, Brazil"></div><div class="field-row"><label class="field-label" for="inp-crystal">Crystal System:</label><input class="field-input" id="inp-crystal" list="crystal-list" placeholder="e.g. Hexagonal"></div></div>
  731.       <div class="field-quad-opchar"><div class="field-row"><label class="field-label" for="inp-opchar">Optic Char:</label><input class="field-input" id="inp-opchar" list="opchar-list" placeholder="e.g. DR Uniaxial (−)"></div><div class="field-row"><label class="field-label" for="inp-sg">SG:</label><button class="inline-btn" onclick="calcSG()" title="Calculate from Wt & Meas" aria-label="Calculate specific gravity" tabindex="0" role="button">⚙️</button><input class="field-input" id="inp-sg" placeholder="3.73"><span id="sg-warning" style="cursor:help;font-size:10px;padding:1px 4px;border-radius:2px;background:rgba(255,200,0,0.2);border:1px solid #ffcc00;display:none;margin-left:2px;white-space:nowrap;">⚠️</span></div><div class="field-row"><label class="field-label" for="inp-ri">RI:</label><input class="field-input" id="inp-ri" placeholder="1.544-1.553"><span id="ri-warning" style="cursor:help;font-size:10px;padding:1px 4px;border-radius:2px;background:rgba(255,200,0,0.2);border:1px solid #ffcc00;display:none;margin-left:2px;white-space:nowrap;">⚠️</span></div><div class="field-row"><label class="field-label" for="inp-biref">Biref:</label><input class="field-input" id="inp-biref" placeholder="0.009"></div></div>
  732.  
  733.       <h2 class="section-hdr">Gemstone Photographs</h2>
  734.       <div class="photo-grid">
  735.         <div class="photo-area photo-main" id="photoMain1" onclick="triggerUpload('fileMain1')" ondragover="dragOver(event)" ondragleave="dragLeave(event)" ondrop="dropFile(event,'photoMain1','previewMain1')">
  736.           <div class="photo-placeholder"><div class="photo-placeholder-icon">&#128247;</div><div class="photo-placeholder-text">Photo 1 &#8212; Daylight</div></div>
  737.           <img class="photo-preview" id="previewMain1" alt="Gem1"><button class="photo-remove" aria-label="Remove photo" onclick="removePhoto(event,'photoMain1','previewMain1')">&#10005;</button>
  738.           <div class="photo-corner-bl"></div><div class="photo-corner-br"></div>
  739.           <input type="file" class="photo-file-input" id="fileMain1" accept="image/*" aria-label="Upload gemstone photo 1" onchange="handleFile(this,'photoMain1','previewMain1')">
  740.         </div>
  741.         <div class="photo-area photo-main" id="photoMain2" onclick="triggerUpload('fileMain2')" ondragover="dragOver(event)" ondragleave="dragLeave(event)" ondrop="dropFile(event,'photoMain2','previewMain2')">
  742.           <div class="photo-placeholder"><div class="photo-placeholder-icon">&#128247;</div><div class="photo-placeholder-text">Photo 2 &#8212; Incand.</div></div>
  743.           <img class="photo-preview" id="previewMain2" alt="Gem2"><button class="photo-remove" aria-label="Remove photo" onclick="removePhoto(event,'photoMain2','previewMain2')">&#10005;</button>
  744.           <div class="photo-corner-bl"></div><div class="photo-corner-br"></div>
  745.           <input type="file" class="photo-file-input" id="fileMain2" accept="image/*" aria-label="Upload gemstone photo 2" onchange="handleFile(this,'photoMain2','previewMain2')">
  746.         </div>
  747.       </div>
  748.  
  749.       <h2 class="section-hdr">Microscopy &amp; Magnification</h2>
  750.       <div class="photo-grid">
  751.         <div class="photo-area photo-micro" id="photoMicro1" onclick="triggerUpload('fileMicro1')" ondragover="dragOver(event)" ondragleave="dragLeave(event)" ondrop="dropFile(event,'photoMicro1','previewMicro1')">
  752.           <div class="photo-placeholder"><div class="photo-placeholder-icon">&#128300;</div><div class="photo-placeholder-text">Microscope Img 1</div></div>
  753.           <img class="photo-preview" id="previewMicro1" alt="M1"><button class="photo-remove" aria-label="Remove photo" onclick="removePhoto(event,'photoMicro1','previewMicro1')">&#10005;</button>
  754.           <div class="photo-corner-bl"></div><div class="photo-corner-br"></div>
  755.           <input type="file" class="photo-file-input" id="fileMicro1" accept="image/*" aria-label="Upload microscope image 1" onchange="handleFile(this,'photoMicro1','previewMicro1')">
  756.         </div>
  757.         <div class="photo-area photo-micro" id="photoMicro2" onclick="triggerUpload('fileMicro2')" ondragover="dragOver(event)" ondragleave="dragLeave(event)" ondrop="dropFile(event,'photoMicro2','previewMicro2')">
  758.           <div class="photo-placeholder"><div class="photo-placeholder-icon">&#128300;</div><div class="photo-placeholder-text">Inclusion Plotting</div><div class="photo-placeholder-sub">Click ✎ to draw</div></div>
  759.           <img class="photo-preview" id="previewMicro2" alt="M2"><button class="photo-remove" aria-label="Remove photo" onclick="removePhoto(event,'photoMicro2','previewMicro2')">&#10005;</button>
  760.           <canvas class="plot-canvas" id="plotCanvas"></canvas>
  761.           <div class="plot-controls">
  762.             <button class="plot-btn" id="btnDraw" onclick="toggleDraw(event)" title="Draw Inclusions" aria-label="Toggle inclusion drawing mode">✎</button>
  763.             <button class="plot-btn" onclick="clearCanvas(event)" title="Clear Drawing" aria-label="Clear drawn inclusions">🗑</button>
  764.           </div>
  765.           <div class="photo-corner-bl"></div><div class="photo-corner-br"></div>
  766.           <input type="file" class="photo-file-input" id="fileMicro2" accept="image/*" aria-label="Upload microscope image 2" onchange="handleFile(this,'photoMicro2','previewMicro2')">
  767.         </div>
  768.       </div>
  769.       <div class="field-row"><label class="field-label" for="inp-mag">Magnification Notes:</label><input class="field-input" id="inp-mag" placeholder="e.g. 40x, dark-field illumination"></div>
  770.  
  771.       <h2 class="section-hdr">Optical &amp; Diagnostic Testing <span id="fluo-warning" title="">⚠️ UV Anomaly Check</span></h2>
  772.       <div class="field-triple-row"><div class="field-row"><label class="field-label" for="inp-uvs">UV 254nm:</label><input class="field-input" id="inp-uvs" list="uv-list" placeholder="Inert / Fluo"></div><div class="field-row"><label class="field-label" for="inp-uvl">UV 365nm:</label><input class="field-input" id="inp-uvl" list="uv-list" placeholder="Inert / Fluo"></div><div class="field-row"><label class="field-label" for="inp-uv3">UV 395nm:</label><input class="field-input" id="inp-uv3" list="uv-list" placeholder="Inert / Fluo"></div></div>
  773.       <div class="field-triple-row"><div class="field-row"><label class="field-label" for="inp-dich">Dichroscope:</label><input class="field-input" id="inp-dich" list="dich-list" placeholder="e.g. Dichroic"></div><div class="field-row"><label class="field-label" for="inp-chel">Chelsea Filter:</label><input class="field-input" id="inp-chel" list="chel-list" placeholder="e.g. Red, Green"></div><div class="field-row"><label class="field-label" for="inp-ruby">Ruby Filter:</label><input class="field-input" id="inp-ruby" list="ruby-list" placeholder="e.g. Glow"></div></div>
  774.  
  775.       <h2 class="section-hdr">Spectroscope Reading</h2>
  776.       <div class="photo-area photo-spectro" id="photoSpectro" onclick="triggerUpload('fileSpectro')" ondragover="dragOver(event)" ondragleave="dragLeave(event)" ondrop="dropFile(event,'photoSpectro','previewSpectro')">
  777.         <div class="photo-placeholder"><div class="photo-placeholder-icon">&#128202;</div><div class="photo-placeholder-text">Spectroscope Graph</div></div>
  778.         <img class="photo-preview" id="previewSpectro" alt="Spectrum"><button class="photo-remove" aria-label="Remove photo" onclick="removePhoto(event,'photoSpectro','previewSpectro')">&#10005;</button>
  779.         <div class="photo-corner-bl"></div><div class="photo-corner-br"></div>
  780.         <input type="file" class="photo-file-input" id="fileSpectro" accept="image/*" aria-label="Upload spectroscope image" onchange="handleFile(this,'photoSpectro','previewSpectro')">
  781.       </div>
  782.       <div class="field-row"><label class="field-label" for="inp-abs">Absorption Notes:</label><input class="field-input" id="inp-abs" placeholder="e.g. 694nm Cr line, Fe bands at 450nm"></div>
  783.  
  784.       <h2 class="section-hdr">Enhancement &amp; Treatment</h2>
  785.       <div class="field-pair">
  786.         <div class="field-row"><label class="field-label" for="inp-tst">Standard:</label><input class="field-input" id="inp-tst" list="treat-std-list" placeholder="e.g. None, Heat"></div>
  787.         <div class="field-row"><label class="field-label" for="inp-tad">Additional:</label><input class="field-input" id="inp-tad" list="treat-add-list" placeholder="e.g. None, Coating"></div>
  788.       </div>
  789.       <div class="scale-group">
  790.         <div class="scale-title">Enhancement Stability Index (Click to Select)</div>
  791.         <div class="scale-boxes" data-scale="stability"><div class="scale-box" data-val="1" style="background:#FFFFFF;color:#4A4A48;">1</div><div class="scale-box" data-val="2" style="background:#E8EDF5;color:#4A4A48;">2</div><div class="scale-box" data-val="3" style="background:#D0DCEB;color:#4A4A48;">3</div><div class="scale-box" data-val="4" style="background:#B5C8DF;color:#4A4A48;">4</div><div class="scale-box" data-val="5" style="background:#95B0D2;color:#4A4A48;">5</div><div class="scale-box" data-val="6" style="background:#7094C0;color:#ffffff;">6</div><div class="scale-box" data-val="7" style="background:#4E74A8;color:#ffffff;">7</div><div class="scale-box" data-val="8" style="background:#33558C;color:#ffffff;">8</div><div class="scale-box" data-val="9" style="background:#213A68;color:#ffffff;">9</div><div class="scale-box" data-val="10" style="background:#111D35;color:#ffffff;">10</div></div>
  792.         <div class="scale-labels"><span>Poor</span><span>Excellent</span></div>
  793.       </div>
  794.     </div>
  795.  
  796.     <!-- RIGHT COLUMN -->
  797.     <div class="right-col">
  798.       <h2 class="section-hdr alt">Grading Analysis</h2>
  799.       <div class="field-quad-grading"><div class="field-row"><label class="field-label" for="inp-cw">Carat Wt:</label><input class="field-input" id="inp-cw" placeholder="e.g. 3.42 ct"></div><div class="field-row"><label class="field-label" for="inp-meas">Measurements:</label><input class="field-input" id="inp-meas" placeholder="e.g. 9.50 x 7.10 x 5.00 mm"></div><div class="field-row"><label class="field-label" for="inp-shape">Shape:</label><input class="field-input" id="inp-shape" list="shape-list" placeholder="e.g. Oval"></div><div class="field-row"><label class="field-label" for="inp-cut">Cut Style:</label><input class="field-input" id="inp-cut" list="cutstyle-list" placeholder="e.g. Brilliant"></div></div>
  800.       <div class="sub-header"><div class="sub-header-text">Cut Quality Metrics</div></div>
  801.       <div class="field-quad-row"><div class="field-row"><label class="field-label" for="inp-cq">Cut Quality:</label><input class="field-input" id="inp-cq" list="grade5-list" placeholder="V. Good"></div><div class="field-row"><label class="field-label" for="inp-sym">Symmetry:</label><input class="field-input" id="inp-sym" list="grade5-list" placeholder="Good"></div><div class="field-row"><label class="field-label" for="inp-prof">Profile:</label><input class="field-input" id="inp-prof" list="grade5-list" placeholder="Excellent"></div><div class="field-row"><label class="field-label" for="inp-pol">Polish:</label><input class="field-input" id="inp-pol" list="grade5-list" placeholder="V. Good"></div></div>
  802.       <div class="field-quad-row"><div class="field-row"><label class="field-label" for="inp-fup">Face-up:</label><input class="field-input" id="inp-fup" list="grade5-list" placeholder="Excellent"></div><div class="field-row"><label class="field-label" for="inp-bril">Brilliance:</label><input class="field-input" id="inp-bril" list="bril-list" placeholder="85%"></div><div class="field-row"><label class="field-label" for="inp-win">Window:</label><input class="field-input" id="inp-win" placeholder="0%"></div><div class="field-row"><label class="field-label" for="inp-ext">Extinction:</label><input class="field-input" id="inp-ext" placeholder="15%"></div></div>
  803.  
  804.       <h2 class="section-hdr alt">Color Analysis</h2>
  805.       <div class="field-quad-color"><div class="field-row"><label class="field-label" for="inp-cold">Color Code:</label><button class="inline-btn" onclick="openColorPicker()" aria-label="Open color picker">🎨</button><input class="field-input" id="inp-cold" placeholder="e.g. gB 5/5"></div><div class="field-row"><label class="field-label" for="inp-hue">Hue:</label><input class="field-input" id="inp-hue" placeholder="e.g. Greenish Blue"></div><div class="field-row"><label class="field-label" for="inp-ton">Tone:</label><input class="field-input" id="inp-ton" placeholder="e.g. Medium"></div><div class="field-row"><label class="field-label" for="inp-sat">Saturation:</label><input class="field-input" id="inp-sat" placeholder="e.g. Strong"></div></div>
  806.       <div class="scale-group">
  807.         <div class="scale-title">Color Grade (Click to Select)</div>
  808.         <div class="scale-boxes" data-scale="color"><div class="scale-box" data-val="1" style="background:#FFFFFF;color:#4A4A48;">1</div><div class="scale-box" data-val="2" style="background:#E8EDF5;color:#4A4A48;">2</div><div class="scale-box" data-val="3" style="background:#D0DCEB;color:#4A4A48;">3</div><div class="scale-box" data-val="4" style="background:#B5C8DF;color:#4A4A48;">4</div><div class="scale-box" data-val="5" style="background:#95B0D2;color:#4A4A48;">5</div><div class="scale-box" data-val="6" style="background:#7094C0;color:#ffffff;">6</div><div class="scale-box" data-val="7" style="background:#4E74A8;color:#ffffff;">7</div><div class="scale-box" data-val="8" style="background:#33558C;color:#ffffff;">8</div><div class="scale-box" data-val="9" style="background:#213A68;color:#ffffff;">9</div><div class="scale-box" data-val="10" style="background:#111D35;color:#ffffff;">10</div></div>
  809.         <div class="scale-labels"><span>Poor / Weak</span><span>Exceptional</span></div>
  810.       </div>
  811.       <div class="field-triple-row"><div class="field-row"><label class="field-label" for="inp-pleo">Pleochroism:</label><input class="field-input" id="inp-pleo" placeholder="e.g. Moderate"></div><div class="field-row"><label class="field-label" for="inp-zon">Color Zoning:</label><input class="field-input" id="inp-zon" placeholder="e.g. None"></div><div class="field-row"><label class="field-label" for="inp-bic">Bichroic:</label><input class="field-input" id="inp-bic" placeholder="e.g. Strong"></div></div>
  812.  
  813.       <h2 class="section-hdr alt">Clarity Assessment</h2>
  814.       <div class="field-triple-clarity"><div class="field-row"><label class="field-label" for="inp-cgr">Clarity Grade:</label><input class="field-input" id="inp-cgr" list="clargrade-list" placeholder="e.g. Eye Clean, LI, MI"></div><div class="field-row"><label class="field-label" for="inp-ctype">Clarity Type:</label><input class="field-input" id="inp-ctype" list="clartype-list" placeholder="e.g. Type I, II, III"></div><div class="field-row"><label class="field-label" for="inp-tran">Transparency:</label><input class="field-input" id="inp-tran" list="transp-list" placeholder="e.g. Transparent"></div></div>
  815.       <div class="scale-group">
  816.         <div class="scale-title">Clarity Grade Scale (Click to Select)</div>
  817.         <div class="scale-boxes" data-scale="clarity"><div class="scale-box" data-val="1" style="background:#FFFFFF;color:#4A4A48;">1</div><div class="scale-box" data-val="2" style="background:#D7E1EF;color:#4A4A48;">2</div><div class="scale-box" data-val="3" style="background:#B0C4DE;color:#4A4A48;">3</div><div class="scale-box" data-val="4" style="background:#8AAAD0;color:#ffffff;">4</div><div class="scale-box" data-val="5" style="background:#5E88B8;color:#ffffff;">5</div><div class="scale-box" data-val="6" style="background:#33558C;color:#ffffff;">6</div><div class="scale-box" data-val="7" style="background:#111D35;color:#ffffff;">7</div></div>
  818.         <div class="scale-labels"><span>EI (Ext. Incl.)</span><span>FI (Free of Incl.)</span></div>
  819.       </div>
  820.  
  821.       <h2 class="section-hdr alt">Quality Assessment</h2>
  822.       <div class="scale-group">
  823.         <div class="scale-title">Cutting Grade (Click to Select)</div>
  824.         <div class="scale-boxes" data-scale="cutting"><div class="scale-box" data-val="1" style="background:#FFFFFF;color:#4A4A48;">1</div><div class="scale-box" data-val="2" style="background:#E8EDF5;color:#4A4A48;">2</div><div class="scale-box" data-val="3" style="background:#D0DCEB;color:#4A4A48;">3</div><div class="scale-box" data-val="4" style="background:#B5C8DF;color:#4A4A48;">4</div><div class="scale-box" data-val="5" style="background:#95B0D2;color:#4A4A48;">5</div><div class="scale-box" data-val="6" style="background:#7094C0;color:#ffffff;">6</div><div class="scale-box" data-val="7" style="background:#4E74A8;color:#ffffff;">7</div><div class="scale-box" data-val="8" style="background:#33558C;color:#ffffff;">8</div><div class="scale-box" data-val="9" style="background:#213A68;color:#ffffff;">9</div><div class="scale-box" data-val="10" style="background:#111D35;color:#ffffff;">10</div></div>
  825.         <div class="scale-labels"><span>Poor</span><span>Excellent</span></div>
  826.       </div>
  827.       <div class="scale-group">
  828.         <div class="scale-title">Finish Grade (Click to Select)</div>
  829.         <div class="scale-boxes" data-scale="finish"><div class="scale-box" data-val="1" style="background:#FFFFFF;color:#4A4A48;">1</div><div class="scale-box" data-val="2" style="background:#E8EDF5;color:#4A4A48;">2</div><div class="scale-box" data-val="3" style="background:#D0DCEB;color:#4A4A48;">3</div><div class="scale-box" data-val="4" style="background:#B5C8DF;color:#4A4A48;">4</div><div class="scale-box" data-val="5" style="background:#95B0D2;color:#4A4A48;">5</div><div class="scale-box" data-val="6" style="background:#7094C0;color:#ffffff;">6</div><div class="scale-box" data-val="7" style="background:#4E74A8;color:#ffffff;">7</div><div class="scale-box" data-val="8" style="background:#33558C;color:#ffffff;">8</div><div class="scale-box" data-val="9" style="background:#213A68;color:#ffffff;">9</div><div class="scale-box" data-val="10" style="background:#111D35;color:#ffffff;">10</div></div>
  830.         <div class="scale-labels"><span>Poor</span><span>Excellent</span></div>
  831.       </div>
  832.       <div class="field-pair"><div class="field-row"><label class="field-label" for="inp-dep">Depth %:</label><input class="field-input" id="inp-dep" placeholder="e.g. 71.9%"></div><div class="field-row"><label class="field-label" for="inp-tqi">Total Quality Index:</label><input class="field-input" id="inp-tqi" placeholder="e.g. Very Good"></div></div>
  833.  
  834.       <!-- PROPORTIONS & CLARITY CHARACTERISTICS -->
  835.       <div style="border:1px solid var(--gold); border-radius:2px; overflow:visible; margin-top:2px; flex-grow:1; display:flex; flex-direction:column;">
  836.         <h2 class="section-hdr" style="margin:0;">Proportions &amp; Clarity Characteristics</h2>
  837.         <div style="display:flex; align-items:stretch; gap:3px; padding:3px 4px; flex:1;">
  838.           <!-- Side profile with GIA-style measurements -->
  839.           <div style="flex:1.4; display:flex; flex-direction:column;">
  840.             <svg id="propSideView" viewBox="0 0 400 240" width="100%" preserveAspectRatio="xMidYMid meet" style="display:block; flex:1; min-height:0;">
  841.               <!-- Diamond outline - Crown -->
  842.               <line x1="100" y1="42" x2="250" y2="42" stroke="var(--navy)" stroke-width="1.8"/>
  843.               <line x1="100" y1="42" x2="40" y2="90" stroke="var(--navy)" stroke-width="1.5"/>
  844.               <line x1="250" y1="42" x2="310" y2="90" stroke="var(--navy)" stroke-width="1.5"/>
  845.               <!-- Girdle -->
  846.               <line x1="40" y1="90" x2="310" y2="90" stroke="var(--navy)" stroke-width="1"/>
  847.               <line x1="40" y1="95" x2="310" y2="95" stroke="var(--navy)" stroke-width="1"/>
  848.               <line x1="40" y1="90" x2="40" y2="95" stroke="var(--navy)" stroke-width="0.8"/>
  849.               <line x1="310" y1="90" x2="310" y2="95" stroke="var(--navy)" stroke-width="0.8"/>
  850.               <!-- Pavilion -->
  851.               <line x1="40" y1="95" x2="175" y2="215" stroke="var(--navy)" stroke-width="1.5"/>
  852.               <line x1="310" y1="95" x2="175" y2="215" stroke="var(--navy)" stroke-width="1.5"/>
  853.               <!-- Crown internal facets -->
  854.               <line x1="100" y1="42" x2="65" y2="90" stroke="var(--navy)" stroke-width="0.5" opacity="0.6"/>
  855.               <line x1="250" y1="42" x2="285" y2="90" stroke="var(--navy)" stroke-width="0.5" opacity="0.6"/>
  856.               <line x1="125" y1="42" x2="80" y2="90" stroke="var(--navy)" stroke-width="0.4" opacity="0.5"/>
  857.               <line x1="225" y1="42" x2="270" y2="90" stroke="var(--navy)" stroke-width="0.4" opacity="0.5"/>
  858.               <line x1="150" y1="42" x2="100" y2="90" stroke="var(--navy)" stroke-width="0.4" opacity="0.45"/>
  859.               <line x1="200" y1="42" x2="250" y2="90" stroke="var(--navy)" stroke-width="0.4" opacity="0.45"/>
  860.               <line x1="175" y1="42" x2="130" y2="90" stroke="var(--navy)" stroke-width="0.3" opacity="0.35"/>
  861.               <line x1="175" y1="42" x2="220" y2="90" stroke="var(--navy)" stroke-width="0.3" opacity="0.35"/>
  862.               <!-- Pavilion internal facets -->
  863.               <line x1="65" y1="95" x2="175" y2="215" stroke="var(--navy)" stroke-width="0.5" opacity="0.6"/>
  864.               <line x1="285" y1="95" x2="175" y2="215" stroke="var(--navy)" stroke-width="0.5" opacity="0.6"/>
  865.               <line x1="100" y1="95" x2="175" y2="195" stroke="var(--navy)" stroke-width="0.4" opacity="0.5"/>
  866.               <line x1="250" y1="95" x2="175" y2="195" stroke="var(--navy)" stroke-width="0.4" opacity="0.5"/>
  867.               <line x1="130" y1="95" x2="175" y2="180" stroke="var(--navy)" stroke-width="0.35" opacity="0.4"/>
  868.               <line x1="220" y1="95" x2="175" y2="180" stroke="var(--navy)" stroke-width="0.35" opacity="0.4"/>
  869.               <line x1="155" y1="95" x2="175" y2="170" stroke="var(--navy)" stroke-width="0.3" opacity="0.35"/>
  870.               <line x1="195" y1="95" x2="175" y2="170" stroke="var(--navy)" stroke-width="0.3" opacity="0.35"/>
  871.               <!-- Dimension: Table width -->
  872.               <line x1="100" y1="30" x2="250" y2="30" stroke="var(--mid-gray)" stroke-width="0.6"/>
  873.               <line x1="100" y1="27" x2="100" y2="42" stroke="var(--mid-gray)" stroke-width="0.4"/>
  874.               <line x1="250" y1="27" x2="250" y2="42" stroke="var(--mid-gray)" stroke-width="0.4"/>
  875.               <text id="propTablePct" x="175" y="27" text-anchor="middle" font-size="18" font-weight="bold" fill="var(--dark-gray)">&#8212;</text>
  876.               <!-- Dimension: Star length (left crown) -->
  877.               <text id="propStarPct" x="18" y="56" text-anchor="end" font-size="16" font-weight="bold" fill="var(--dark-gray)">&#8212;</text>
  878.               <!-- Dimension: Girdle (left side) -->
  879.               <text id="propGirdle" x="8" y="80" text-anchor="start" font-size="12" fill="var(--dark-gray)">&#8212;</text>
  880.               <!-- Dimension: Crown angle (right) -->
  881.               <path d="M295,90 A20,20 0 0,0 283,72" fill="none" stroke="var(--mid-gray)" stroke-width="0.5"/>
  882.               <text id="propCrAngle" x="325" y="62" text-anchor="start" font-size="16" font-weight="bold" fill="var(--dark-gray)">&#8212;</text>
  883.               <!-- Dimension: Crown height % (right bracket) -->
  884.               <line x1="320" y1="42" x2="320" y2="90" stroke="var(--mid-gray)" stroke-width="0.5"/>
  885.               <line x1="317" y1="42" x2="323" y2="42" stroke="var(--mid-gray)" stroke-width="0.5"/>
  886.               <line x1="317" y1="90" x2="323" y2="90" stroke="var(--mid-gray)" stroke-width="0.5"/>
  887.               <text id="propCrHeight" x="330" y="72" text-anchor="start" font-size="16" font-weight="bold" fill="var(--dark-gray)">&#8212;</text>
  888.               <!-- Dimension: Total depth % (far right bracket) -->
  889.               <line x1="355" y1="42" x2="355" y2="215" stroke="var(--mid-gray)" stroke-width="0.5"/>
  890.               <line x1="352" y1="42" x2="358" y2="42" stroke="var(--mid-gray)" stroke-width="0.5"/>
  891.               <line x1="352" y1="215" x2="358" y2="215" stroke="var(--mid-gray)" stroke-width="0.5"/>
  892.               <text id="propDepthPct" x="365" y="133" text-anchor="start" font-size="16" font-weight="bold" fill="var(--dark-gray)">&#8212;</text>
  893.               <!-- Dimension: Pavilion angle (right) -->
  894.               <path d="M295,95 A25,25 0 0,1 280,118" fill="none" stroke="var(--mid-gray)" stroke-width="0.5"/>
  895.               <text id="propPavAngle" x="310" y="135" text-anchor="start" font-size="16" font-weight="bold" fill="var(--dark-gray)">&#8212;</text>
  896.               <!-- Dimension: Pavilion depth % (right) -->
  897.               <text id="propPavDepth" x="330" y="165" text-anchor="start" font-size="16" font-weight="bold" fill="var(--dark-gray)">&#8212;</text>
  898.               <!-- Dimension: Lower half % (left pavilion) -->
  899.               <text id="propLowerHalf" x="18" y="165" text-anchor="end" font-size="16" font-weight="bold" fill="var(--dark-gray)">&#8212;</text>
  900.               <!-- Dimension: Culet (bottom center) -->
  901.               <text id="propCulet" x="175" y="232" text-anchor="middle" font-size="14" fill="var(--dark-gray)">&#8212;</text>
  902.               <!-- Width label -->
  903.               <text class="propWidth-static" x="175" y="14" text-anchor="middle" font-size="14" font-weight="bold" fill="var(--navy)">&#8212;</text>
  904.             </svg>
  905.             <!-- Proportion measurement inputs -->
  906.             <div class="prop-grid">
  907.               <div class="prop-cell"><span class="prop-cell-label">Table %</span><input class="prop-measure" id="inp-propTable" placeholder="58%"></div>
  908.               <div class="prop-cell"><span class="prop-cell-label">Star %</span><input class="prop-measure" id="inp-propStar" placeholder="55%"></div>
  909.               <div class="prop-cell"><span class="prop-cell-label">Crown &#176;</span><input class="prop-measure" id="inp-propCrAngle" placeholder="35.5&#176;"></div>
  910.               <div class="prop-cell"><span class="prop-cell-label">Crown HT</span><input class="prop-measure" id="inp-propCrHeight" placeholder="15.0%"></div>
  911.               <div class="prop-cell"><span class="prop-cell-label">Depth %</span><input class="prop-measure" id="inp-propDepth" placeholder="61.8%"></div>
  912.             </div>
  913.             <div class="prop-grid">
  914.               <div class="prop-cell"><span class="prop-cell-label">Girdle</span><input class="prop-measure" id="inp-propGirdle" placeholder="Medium"></div>
  915.               <div class="prop-cell"><span class="prop-cell-label">Pav &#176;</span><input class="prop-measure" id="inp-propPavAngle" placeholder="41.0&#176;"></div>
  916.               <div class="prop-cell"><span class="prop-cell-label">Pav Dp</span><input class="prop-measure" id="inp-propPavDepth" placeholder="43.5%"></div>
  917.               <div class="prop-cell"><span class="prop-cell-label">Lower &#189;</span><input class="prop-measure" id="inp-propLowerHalf" placeholder="80%"></div>
  918.               <div class="prop-cell"><span class="prop-cell-label">Culet</span><input class="prop-measure" id="inp-propCulet" placeholder="None"></div>
  919.             </div>
  920.             <div style="font-size:7.5px; color:var(--mid-gray); text-align:center; margin-top:1px; font-weight:700;">Profile to Actual Proportions</div>
  921.           </div>
  922.           <!-- Face-up + Pavilion views stacked -->
  923.           <div style="flex:0.55; display:flex; flex-direction:column; gap:2px; align-items:center; justify-content:center;">
  924.             <!-- Face-up view with inclusion plotting -->
  925.             <div style="text-align:center;">
  926.               <div class="clar-svg-wrapper" id="clarWrap1" onclick="plotInclusion(event, 'clarWrap1')" style="display:inline-block;">
  927.                 <svg id="propFaceUp" viewBox="0 0 100 100" width="90" height="90">
  928.                   <circle cx="50" cy="50" r="45" fill="none" stroke="var(--navy)" stroke-width="1.2"/>
  929.                   <polygon points="50,31 63.4,36.6 69,50 63.4,63.4 50,69 36.6,63.4 31,50 36.6,36.6" fill="none" stroke="var(--navy)" stroke-width="0.7"/>
  930.                   <path d="M50,31 L62.6,19.5 M50,31 L37.4,19.5 M63.4,36.6 L62.6,19.5 M63.4,36.6 L80.5,37.4 M69,50 L80.5,37.4 M69,50 L80.5,62.6 M63.4,63.4 L80.5,62.6 M63.4,63.4 L62.6,80.5 M50,69 L62.6,80.5 M50,69 L37.4,80.5 M36.6,63.4 L37.4,80.5 M36.6,63.4 L19.5,62.6 M31,50 L19.5,62.6 M31,50 L19.5,37.4 M36.6,36.6 L19.5,37.4 M36.6,36.6 L37.4,19.5" fill="none" stroke="var(--navy)" stroke-width="0.4"/>
  931.                   <path d="M62.6,19.5 L50,5 M37.4,19.5 L50,5 M62.6,19.5 L81.8,18.2 M80.5,37.4 L81.8,18.2 M80.5,37.4 L95,50 M80.5,62.6 L95,50 M80.5,62.6 L81.8,81.8 M62.6,80.5 L81.8,81.8 M62.6,80.5 L50,95 M37.4,80.5 L50,95 M37.4,80.5 L18.2,81.8 M19.5,62.6 L18.2,81.8 M19.5,62.6 L5,50 M19.5,37.4 L5,50 M19.5,37.4 L18.2,18.2 M37.4,19.5 L18.2,18.2" fill="none" stroke="var(--navy)" stroke-width="0.4"/>
  932.                   <path d="M62.6,19.5 L67.2,8.4 M80.5,37.4 L91.6,32.8 M80.5,62.6 L91.6,67.2 M62.6,80.5 L67.2,91.6 M37.4,80.5 L32.8,91.6 M19.5,62.6 L8.4,67.2 M19.5,37.4 L8.4,32.8 M37.4,19.5 L32.8,8.4" fill="none" stroke="var(--navy)" stroke-width="0.4"/>
  933.                 </svg>
  934.               </div>
  935.               <div style="font-size:7px; color:var(--mid-gray); font-weight:700;">Face-up (Click to Plot)</div>
  936.             </div>
  937.             <!-- Pavilion / bottom-up view -->
  938.             <div style="text-align:center;">
  939.               <svg id="propBottomUp" viewBox="0 0 100 100" width="90" height="90">
  940.                 <circle cx="50" cy="50" r="45" fill="none" stroke="var(--navy)" stroke-width="1.2"/>
  941.                 <path d="M50,50 L50,5 M50,50 L81.8,18.2 M50,50 L95,50 M50,50 L81.8,81.8 M50,50 L50,95 M50,50 L18.2,81.8 M50,50 L5,50 M50,50 L18.2,18.2" fill="none" stroke="var(--navy)" stroke-width="0.6"/>
  942.                 <path d="M55.7,36.1 L50,5 M55.7,36.1 L81.8,18.2 M63.9,44.3 L81.8,18.2 M63.9,44.3 L95,50 M63.9,55.7 L95,50 M63.9,55.7 L81.8,81.8 M55.7,63.9 L81.8,81.8 M55.7,63.9 L50,95 M44.3,63.9 L50,95 M44.3,63.9 L18.2,81.8 M36.1,55.7 L18.2,81.8 M36.1,55.7 L5,50 M36.1,44.3 L5,50 M36.1,44.3 L18.2,18.2 M44.3,36.1 L18.2,18.2 M44.3,36.1 L50,5" fill="none" stroke="var(--navy)" stroke-width="0.4"/>
  943.                 <path d="M67.2,8.4 L55.7,36.1 M91.6,32.8 L63.9,44.3 M91.6,67.2 L63.9,55.7 M67.2,91.6 L55.7,63.9 M32.8,91.6 L44.3,63.9 M8.4,67.2 L36.1,55.7 M8.4,32.8 L36.1,44.3 M32.8,8.4 L44.3,36.1" fill="none" stroke="var(--navy)" stroke-width="0.4"/>
  944.               </svg>
  945.               <div style="font-size:7px; color:var(--mid-gray); font-weight:700;">Pavilion View</div>
  946.             </div>
  947.           </div>
  948.           <!-- Inclusion controls & key -->
  949.           <div style="flex:0.35; display:flex; flex-direction:column; justify-content:center; gap:3px; padding-top:4px;">
  950.             <div class="clar-controls" style="flex-direction:column; align-items:stretch;">
  951.               <button onclick="setInclusionType('crystal')" title="Crystal">&#9675; Crystal</button>
  952.               <button onclick="setInclusionType('feather')" title="Feather">&#10148; Feather</button>
  953.               <button onclick="setInclusionType('needle')" title="Needle">&#10072; Needle</button>
  954.               <button onclick="clearInclusions()" title="Clear All">&#128465; Clear</button>
  955.             </div>
  956.             <div style="font-size:6.5px; color:var(--dark-gray); margin-top:3px; text-align:center;">
  957.               <div style="font-weight:700; font-size:7px; margin-bottom:1px;">Key to Symbols</div>
  958.               <div><span style="color:#c00;">&#9675;</span> Crystal</div>
  959.               <div><span style="color:#c00;">&#9711;</span> Cloud</div>
  960.               <div><span style="color:#c00;">&#10148;</span> Feather</div>
  961.               <div><span style="color:#c00;">&#8766;</span> Natural</div>
  962.               <div><span style="color:#c00;">&#10072;</span> Needle</div>
  963.               <div><span style="color:#c00;">&#10070;</span> Cavity</div>
  964.             </div>
  965.           </div>
  966.         </div>
  967.       </div>
  968.     </div>
  969.   </div>
  970.  
  971.   <div class="bottom-section">
  972.     <h2 class="section-hdr alt2">General Comments &amp; Observations</h2>
  973.     <textarea class="comments-area" id="inp-coms" rows="2" placeholder="Enter general comments, notable observations, testing methods used, or any additional findings..."></textarea>
  974.   </div>
  975.  
  976.   <div class="assessment-section" id="assessmentSection">
  977.     <div class="assessment-header"><span class="assessment-header-title">&#9670; Overall Gemstone Assessment</span><span class="assessment-header-auto">Auto-calculated from grading selections</span></div>
  978.     <div class="assessment-body">
  979.       <div class="assessment-breakdown">
  980.         <div class="assess-item"><span class="assess-item-label">Color Grade:</span><span class="assess-item-value" id="av-color">&#8212;</span></div>
  981.         <div class="assess-item"><span class="assess-item-label">Clarity Grade:</span><span class="assess-item-value" id="av-clarity">&#8212;</span></div>
  982.         <div class="assess-item"><span class="assess-item-label">Cutting Grade:</span><span class="assess-item-value" id="av-cutting">&#8212;</span></div>
  983.         <div class="assess-item"><span class="assess-item-label">Finish Grade:</span><span class="assess-item-value" id="av-finish">&#8212;</span></div>
  984.         <div class="assess-item"><span class="assess-item-label">Stability Index:</span><span class="assess-item-value" id="av-stability">&#8212;</span></div>
  985.         <div class="assess-item"><span class="assess-item-label">Weighted Score:</span><span class="assess-item-value" id="av-score">&#8212;</span></div>
  986.       </div>
  987.       <div class="assessment-grade-box grade-empty" id="gradeBox"><div class="grade-label">Overall Grade</div><div class="grade-value" id="gradeValue">&#8212;</div><div class="grade-descriptor" id="gradeDesc">Select grades above</div></div>
  988.     </div>
  989.   </div>
  990.  
  991.   <div class="report-footer-disclaimer">
  992.     <div class="disclaimer-text">The findings expressed in this report represent the professional assessment of the examiner based on standard gemological testing methods and grading analysis. Most colored gemstones have been subjected to color and/or clarity enhancement treatments. This report is not a guarantee of value. All findings are opinions, not warranties or guarantees.</div>
  993.     <div class="sig-row"><div class="sig-field"><label class="sig-label" for="inp-exam">Examiner:</label><input class="sig-input" id="inp-exam" placeholder="Name"></div><div class="sig-field"><label class="sig-label" for="inp-examdate">Date of Examination:</label><input type="date" id="inp-examdate" class="sig-input" style="font-size:10.5px;"></div></div>
  994.   </div>
  995.   <div class="report-footer-band"><div class="footer-diamond"></div><span class="footer-text" id="footerText"></span><div class="footer-diamond"></div></div>
  996. </div></div>
  997.  
  998. <!-- ======== PAGE 2 ======== -->
  999. <div class="report-page" id="page2"><div class="ref-inner">
  1000.   <div class="ref-header"><div class="ref-title">GEMSTONE GRADING REFERENCE GUIDE</div><div class="header-gradient-line"></div><div class="ref-subtitle">Comprehensive Definitions, Terminology &amp; Grading Scale Explanations</div></div>
  1001.  
  1002.   <div class="ref-columns">
  1003.     <div>
  1004.       <div class="ref-section ref-compact">
  1005.         <div class="ref-section-title">Treatment &amp; Enhancement Identification</div>
  1006.         <div class="ref-entry"><span class="ref-term">None / Untreated (N)</span><span class="ref-def"> &#8212; No evidence of artificial enhancement detected through microscopy, spectroscopy, or UV fluorescence testing. Natural, untreated stones command the highest market premiums. Confirmation typically requires advanced laboratory testing.</span></div>
  1007.         <div class="ref-entry"><span class="ref-term">Heat Treatment (H)</span><span class="ref-def"> &#8212; Stone heated to 800&#8211;1800&#176;C in controlled atmospheric conditions to permanently improve color saturation and/or dissolve silk inclusions for better clarity. The most widespread treatment in the industry; considered standard and stable for sapphire, ruby, and tanzanite. Identification clues: altered or dissolved rutile silk, discoid fractures, melted crystal inclusions.</span></div>
  1008.         <div class="ref-entry"><span class="ref-term">Irradiation (R)</span><span class="ref-def"> &#8212; Controlled exposure to gamma rays, neutron bombardment, or electron beam to modify color centers within the crystal lattice. Standard for producing London/Swiss blue topaz. Also used for some fancy-color diamonds, kunzite, and certain tourmalines. Often followed by low-temperature annealing to stabilize color.</span></div>
  1009.         <div class="ref-entry"><span class="ref-term">Diffusion (D)</span><span class="ref-def"> &#8212; Chemical elements (beryllium, titanium, iron, chromium) diffused into the stone at extreme temperatures (1600&#8211;1850&#176;C). Surface diffusion (Ti/Fe) creates a thin color layer and is detectable by immersion. Lattice/bulk diffusion (beryllium) penetrates the entire stone and requires advanced testing.</span></div>
  1010.         <div class="ref-entry"><span class="ref-term">Filling / Fracture Filling (F)</span><span class="ref-def"> &#8212; Fractures and cavities filled with foreign material to improve apparent clarity. Emeralds are routinely oiled &#8212; classified by degree: None, Insignificant, Minor, Moderate, Significant. Ruby may receive lead-glass filling. Detection: characteristic &#8220;flash effect&#8221;, trapped gas bubbles, and flow structures within fractures.</span></div>
  1011.         <div class="ref-entry"><span class="ref-term">Coating (C) / Dyeing (Dy)</span><span class="ref-def"> &#8212; Coating: thin film applied to alter perceived color or add surface effects. Dyeing: coloring agents introduced into porous or fractured material. Common in jade, turquoise, agate. Detected by color concentrations in surface-reaching fractures or positive swab tests.</span></div>
  1012.       </div>
  1013.  
  1014.       <div class="ref-section ref-compact">
  1015.         <div class="ref-section-title alt">Optical &amp; Diagnostic Testing Guide</div>
  1016.         <div class="ref-entry"><span class="ref-term">UV Fluorescence (254nm SW / 365nm LW / 395nm LED)</span><span class="ref-def"> &#8212; Record reaction intensity and observed color. Short-wave (254nm) is generally more diagnostic than long-wave. Key diagnostic patterns: natural ruby shows moderate&#8211;strong red; synthetic flame-fusion ruby shows stronger SW; natural blue sapphire is typically inert; heated sapphire may show chalky blue/green SW. Differential fluorescence helps distinguish natural from synthetic.</span></div>
  1017.         <div class="ref-entry"><span class="ref-term">Dichroscope</span><span class="ref-def"> &#8212; Reveals pleochroic colors by isolating light vibrating along different crystallographic axes. Singly refractive stones show NO dichroism. Uniaxial crystals show 2 colors. Biaxial crystals show 3 colors. Critical separations: ruby (dichroic) vs. red spinel (no dichroism); blue sapphire (dichroic) vs. blue spinel (no dichroism).</span></div>
  1018.         <div class="ref-entry"><span class="ref-term">Chelsea Filter</span><span class="ref-def"> &#8212; Transmits only deep red and yellow-green wavelengths. Chromium-bearing stones transmit red: natural emerald appears pink-red; synthetic emerald appears stronger red. Cobalt-colored glass and synthetic spinel appear strong red. Not diagnostic alone, use as a screening tool alongside other tests.</span></div>
  1019.         <div class="ref-entry"><span class="ref-term">Ruby Filter</span><span class="ref-def"> &#8212; Transmits only red wavelengths while blocking all others. Under blue or white illumination, Cr-bearing stones will glow or appear bright red/pink because chromium fluoresce red. Non-Cr red stones appear dark. Useful for confirming chromium as the color agent.</span></div>
  1020.         <div class="ref-entry"><span class="ref-term">Spectroscope</span><span class="ref-def"> &#8212; Reveals diagnostic absorption lines and bands caused by specific chromophore elements. Key markers: Chromium (Cr): sharp doublet at 694nm. Iron (Fe): 450nm band. Manganese (Mn): broad 410nm band.</span></div>
  1021.       </div>
  1022.  
  1023.       <div class="ref-section ref-compact">
  1024.         <div class="ref-section-title alt">Refractive Index, Optical Character &amp; Crystal System</div>
  1025.         <div class="ref-entry"><span class="ref-term">Refractive Index (RI)</span><span class="ref-def"> &#8212; The ratio of the speed of light in air to its speed within the gemstone. Measured with a refractometer using a contact liquid (RI 1.81). The single most diagnostic quantitative measurement in gemology &#8212; each mineral species has a characteristic RI range. Doubly refractive stones produce two readings (&#969;/&#949; for uniaxial; &#945;/&#946;/&#947; for biaxial). Stones over RI 1.81 (e.g. diamond at 2.417, zircon high type ~1.93) are &#8220;over the limits&#8221; of a standard refractometer and require alternative methods (Brewster angle, reflectivity meter).</span></div>
  1026.         <div class="ref-entry"><span class="ref-term">Optical Character</span><span class="ref-def"> &#8212; Whether a gemstone is singly refractive (SR/isotropic), doubly refractive (DR/anisotropic), or aggregate (AGG/polycrystalline). DR stones are further classified as uniaxial (+/&#8722;) or biaxial (+/&#8722;) based on their optic sign, determined by observing the interference figure under a polariscope with a conoscope lens. Some isotropic stones show anomalous double refraction (ADR) due to strain &#8212; notable in garnet, spinel, and diamond.</span></div>
  1027.         <div class="ref-entry"><span class="ref-term">Birefringence</span><span class="ref-def"> &#8212; The numerical difference between a stone&#8217;s highest and lowest refractive index readings. Diagnostic for species identification: zircon has exceptionally high birefringence (0.042&#8211;0.059) causing visible facet doubling; quartz is moderate (0.009); garnet and spinel are zero (isotropic). Measured directly from refractometer readings or estimated from observed facet doubling under magnification.</span></div>
  1028.         <div class="ref-entry"><span class="ref-term">Crystal System</span><span class="ref-def"> &#8212; The fundamental symmetry framework of a mineral&#8217;s atomic structure. Seven systems: Isometric (cubic) &#8212; SR, no birefringence (diamond, garnet, spinel). Hexagonal/Trigonal &#8212; uniaxial DR (corundum, beryl, quartz, tourmaline). Tetragonal &#8212; uniaxial DR (zircon). Orthorhombic &#8212; biaxial DR (topaz, chrysoberyl, olivine). Monoclinic &#8212; biaxial DR (spodumene, orthoclase). Triclinic &#8212; biaxial DR (plagioclase, kyanite). Amorphous &#8212; SR, no crystal structure (opal, glass). Crystal system determines optical behavior, pleochroism potential, and cleavage directions.</span></div>
  1029.       </div>
  1030.     </div>
  1031.  
  1032.     <div>
  1033.       <div class="ref-section ref-compact">
  1034.         <div class="ref-section-title alt">Color Analysis &#8212; Comprehensive Definitions</div>
  1035.         <div class="ref-entry"><span class="ref-term">Hue</span><span class="ref-def"> &#8212; The dominant spectral color perceived by the eye. Modified hues indicate secondary color components using lowercase prefixes: &#8220;gB&#8221; = greenish Blue. The closer a stone is to a pure primary hue with minimal secondary modifiers, the more valuable it generally is.</span></div>
  1036.         <div class="ref-entry"><span class="ref-term">Tone</span><span class="ref-def"> &#8212; The relative lightness or darkness of the color, measured on a 0 (white) to 10 (black) scale. The ideal tone varies by species: rubies and sapphires are most desirable at tone 5&#8211;7; emeralds at 5&#8211;6.</span></div>
  1037.         <div class="ref-entry"><span class="ref-term">Saturation</span><span class="ref-def"> &#8212; The intensity, purity, or vividness of the hue&#8212;the most important single factor in colored stone valuation. Gray and brown are saturation modifiers that reduce a stone&#8217;s color purity.</span></div>
  1038.         <div class="ref-entry"><span class="ref-term">Color Zoning</span><span class="ref-def"> &#8212; Uneven distribution of color within a stone caused by fluctuating growth conditions during crystallization. Visible zoning under the table facet negatively impacts value significantly more than zoning visible only from the side.</span></div>
  1039.         <div class="ref-entry"><span class="ref-term">Bichroic / Color-Change Effect</span><span class="ref-def"> &#8212; A phenomenon where a stone exhibits distinctly different colors under different illumination sources (e.g., daylight vs. incandescent). Classic in alexandrite (green&#8594;red).</span></div>
  1040.       </div>
  1041.  
  1042.       <div class="ref-section">
  1043.         <div class="ref-section-title alt">Color Grade Scale (1&#8211;10)</div>
  1044.         <table class="ref-table">
  1045.           <tr><th>#</th><th>Rating</th><th>What This Means</th></tr>
  1046.           <tr><td class="grade-num">1&#8211;2</td><td>Poor / Weak</td><td>Very pale, strongly grayish/brownish, or severely off-hue. Low commercial desirability.</td></tr>
  1047.           <tr><td class="grade-num">3&#8211;4</td><td>Fair</td><td>Identifiable hue but significantly compromised by gray/brown modifiers or undesirable tone.</td></tr>
  1048.           <tr><td class="grade-num">5&#8211;6</td><td>Good</td><td>Pleasant, attractive color with moderate saturation. Mainstream fine jewelry quality.</td></tr>
  1049.           <tr><td class="grade-num">7&#8211;8</td><td>Very Good</td><td>Strong saturation, desirable primary hue, well-balanced medium tone. Top 10&#8211;15% of market.</td></tr>
  1050.           <tr><td class="grade-num">9&#8211;10</td><td>Exceptional</td><td>Vivid saturation, ideal primary hue, optimal tone. Museum/investment caliber. Top 1&#8211;3%.</td></tr>
  1051.         </table>
  1052.       </div>
  1053.  
  1054.       <div class="ref-section ref-compact">
  1055.         <div class="ref-section-title alt">Clarity Assessment &#8212; Definitions &amp; Type System</div>
  1056.         <div class="ref-entry" style="margin-bottom:0;"><span class="ref-term">Clarity Type I</span><span class="ref-def"> &#8212; Species that grow relatively inclusion-free (aquamarine, blue topaz). Inclusions penalized heavily.</span></div>
  1057.         <div class="ref-entry" style="margin-bottom:0;"><span class="ref-term">Clarity Type II</span><span class="ref-def"> &#8212; Species that typically contain some inclusions (ruby, sapphire). Minor inclusions acceptable.</span></div>
  1058.         <div class="ref-entry" style="margin-bottom:0;"><span class="ref-term">Clarity Type III</span><span class="ref-def"> &#8212; Species that are almost always included (emerald). Assessed far more leniently.</span></div>
  1059.       </div>
  1060.  
  1061.       <div class="ref-section">
  1062.         <div class="ref-section-title alt">Clarity Grade Scale (1&#8211;7)</div>
  1063.         <table class="ref-table">
  1064.           <tr><th>#</th><th>Grade</th><th>What This Means</th></tr>
  1065.           <tr><td class="grade-num">1</td><td>EI&#8323;</td><td>Prominent inclusions severely affecting appearance, durability, or both. Transparency compromised.</td></tr>
  1066.           <tr><td class="grade-num">2</td><td>EI&#8322;</td><td>Obvious inclusions very easily seen by unaided eye. Significant negative impact on beauty.</td></tr>
  1067.           <tr><td class="grade-num">3</td><td>HI</td><td>Inclusions easily visible to the unaided eye without effort. Moderate impact on appearance.</td></tr>
  1068.           <tr><td class="grade-num">4</td><td>MI</td><td>Noticeable inclusions somewhat visible to the unaided eye. Acceptable for many applications.</td></tr>
  1069.           <tr><td class="grade-num">5</td><td>LI</td><td>Minor inclusions somewhat easy to see under 10x mag. Minimal effect on beauty.</td></tr>
  1070.           <tr><td class="grade-num">6</td><td>Eye Clean</td><td>Minor inclusions visible only under 10x mag. Appears clean to unaided eye. Fine quality.</td></tr>
  1071.           <tr><td class="grade-num">7</td><td>FI</td><td>Free of inclusions under 10x magnification. Extremely rare in most colored species.</td></tr>
  1072.         </table>
  1073.       </div>
  1074.  
  1075.       <div class="ref-section">
  1076.         <div class="ref-section-title alt">Cutting &amp; Finish Grade Scale (1&#8211;10)</div>
  1077.         <table class="ref-table">
  1078.           <tr><th>#</th><th>Rating</th><th>What This Means</th></tr>
  1079.           <tr><td class="grade-num">1&#8211;2</td><td>Poor</td><td>Significant windowing (&#62;30%), severe asymmetry, poor polish. Heavily compromised for weight.</td></tr>
  1080.           <tr><td class="grade-num">3&#8211;4</td><td>Fair</td><td>Noticeable windowing or excessive extinction. Acceptable for lower-grade commercial goods.</td></tr>
  1081.           <tr><td class="grade-num">5&#8211;6</td><td>Good</td><td>Minor imperfections. Acceptable light return (60&#8211;75%). Meets mainstream jewelry standards.</td></tr>
  1082.           <tr><td class="grade-num">7&#8211;8</td><td>Very Good</td><td>Well-proportioned, strong light return (75&#8211;85%). Fine jewelry professional grade.</td></tr>
  1083.           <tr><td class="grade-num">9&#8211;10</td><td>Excellent</td><td>Exceptional proportions, brilliant light return (85%+). Master cutter or precision machine cut.</td></tr>
  1084.         </table>
  1085.       </div>
  1086.  
  1087.     </div>
  1088.   </div>
  1089.  
  1090.   <div class="ref-columns"><div class="ref-full-width"><hr class="ref-divider">
  1091.     <div class="ref-section ref-compact">
  1092.       <div class="ref-section-title alt">Cut Quality Metrics &#8212; Field Definitions</div>
  1093.       <div class="ref-def" style="font-size:8.3px;line-height:9.2px;font-family:'Times New Roman', Times, Georgia, serif;">
  1094.         <strong>Cut Quality</strong> &#8212; Overall assessment of how well the stone has been fashioned; considers proportions, angles, and the cutter&#8217;s skill in maximizing optical performance while retaining weight. <strong>Symmetry</strong> &#8212; The precision and alignment of facets relative to each other; evaluates crown-to-pavilion alignment, facet shape uniformity, table centering, and girdle evenness. <strong>Brilliance</strong> &#8212; The percentage of white light returned to the eye from the stone&#8217;s interior and exterior surfaces; directly linked to pavilion angle and crown height; reported as a percentage: &#60;50% (poor) to 90%+ (exceptional). <strong>Polish</strong> &#8212; The surface condition and smoothness of finished facets; examines scratch marks, burn marks, polish lines, and surface grain under magnification. <strong>Window</strong> &#8212; A transparent see-through area visible face-up, caused by light leaking through the pavilion; reported as a percentage of the face-up area: 0% = no window (ideal), &#62;25% = significant. <strong>Face-up Appearance</strong> &#8212; The overall visual impression when viewing the stone from directly above; combines brilliance, color distribution, window, and extinction into a single aesthetic judgment. <strong>Extinction</strong> &#8212; Dark areas within the stone caused by light being absorbed rather than reflected; some extinction is normal and provides contrast, excessive extinction (&#62;25%) reduces beauty. <strong>Profile</strong> &#8212; The side-view proportions: crown height, pavilion depth, girdle thickness, and overall depth percentage; a well-profiled stone balances weight retention with optical performance.
  1095.       </div>
  1096.     </div>
  1097.   </div></div>
  1098.  
  1099.   <div class="ref-columns"><div class="ref-full-width"><hr class="ref-divider">
  1100.     <div class="ref-section">
  1101.       <div class="ref-section-title">Overall Assessment Calculation &#8212; Methodology</div>
  1102.       <div class="ref-def" style="font-size:8.3px;line-height:9.2px;font-family:'Times New Roman', Times, Georgia, serif;">
  1103.         The Overall Gemstone Grade is a weighted composite calculated automatically from your grading scale selections. The weighting reflects industry consensus on value drivers for colored gemstones: <strong>Color (35%)</strong> is weighted most heavily because color is the primary determinant of desirability and value in colored stones. <strong>Clarity (20%)</strong> is normalized from the 7-point scale to a 10-point equivalent for fair comparison. <strong>Cutting Grade (20%)</strong> evaluates how well the stone has been fashioned for optical performance. <strong>Finish Grade (15%)</strong> assesses the precision and polish quality of the lapidary work. <strong>Enhancement Stability (10%)</strong> accounts for how durable and permanent any treatments are. All scales are oriented with 1 = worst and the highest number = best. The composite score maps to letter grades: <strong>A+ (9.5+) Exceptional</strong> &#183; <strong>A (8.5&#8211;9.4) Excellent</strong> &#183; <strong>A&#8722; (7.5&#8211;8.4) Very Good</strong> &#183; <strong>B+ (6.5&#8211;7.4) Good</strong> &#183; <strong>B (5.5&#8211;6.4) Above Average</strong> &#183; <strong>B&#8722; (4.5&#8211;5.4) Average</strong> &#183; <strong>C+ (3.5&#8211;4.4) Below Average</strong> &#183; <strong>C (2.8&#8211;3.4) Fair</strong> &#183; <strong>C&#8722; (2.0&#8211;2.7) Poor</strong> &#183; <strong>D (1.5&#8211;1.9) Very Poor</strong> &#183; <strong>F (&lt;1.5) Failing</strong>. A minimum of 2 grading scales must be selected for the assessment to calculate. If fewer than all 5 scales are filled, the algorithm re-normalizes weights across the scales you did select, so partial data still produces a meaningful grade.
  1104.       </div>
  1105.     </div>
  1106.   </div></div>
  1107.  
  1108.   <div class="report-footer-band" style="margin-top:4px;"><div class="footer-diamond"></div><span class="footer-text">B G Gemological Collection &#183; Reference Guide &#183; See front page for specific gemstone grading results</span><div class="footer-diamond"></div></div>
  1109. </div></div>
  1110.  
  1111. </div>
  1112.  
  1113. <script>
  1114.  
  1115. // --- LOCAL STORAGE AUTO-SAVE LOGIC ---
  1116. function saveToLocal(key, val) {
  1117.   try {
  1118.     localStorage.setItem('gemReport_' + key, val);
  1119.   } catch(e) {
  1120.     if(e.name === 'QuotaExceededError' || e.code === 22) {
  1121.       alert('Storage is full. Your report data may not be saved. Consider exporting to PDF and starting a new report to free up space.');
  1122.     }
  1123.     console.warn("Local storage error:", e);
  1124.   }
  1125. }
  1126. function loadFromLocal(key) { return localStorage.getItem('gemReport_' + key); }
  1127.  
  1128. function attachAutoSave() {
  1129.   document.querySelectorAll('input, textarea').forEach(el => {
  1130.     if(el.id && el.type !== 'file') {
  1131.      const saved = loadFromLocal(el.id);
  1132.       if(saved !== null) el.value = saved;
  1133.       el.addEventListener('input', () => saveToLocal(el.id, el.value));
  1134.     }
  1135.   });
  1136.  
  1137.   // Load Scales
  1138.   document.querySelectorAll('.scale-boxes').forEach(container => {
  1139.     const scaleName = container.dataset.scale;
  1140.     const savedVal = loadFromLocal('scale_' + scaleName);
  1141.     if(savedVal) {
  1142.       const box = container.querySelector(`[data-val="${savedVal}"]`);
  1143.       if(box) box.classList.add('selected');
  1144.     }
  1145.   });
  1146.  
  1147.   // Load Images & Plot Canvas
  1148.  ['photoMain1','photoMain2','photoMicro1','photoMicro2','photoSpectro'].forEach(id => {
  1149.    const savedImg = loadFromLocal('img_' + id);
  1150.     if(savedImg) {
  1151.       const p = id.replace('photo', 'preview');
  1152.       document.getElementById(p).src = savedImg;
  1153.       document.getElementById(id).classList.add('has-image');
  1154.     }
  1155.   });
  1156.  
  1157.   const savedPlot = loadFromLocal('plot_canvas');
  1158.   if(savedPlot) {
  1159.     let img = new Image();
  1160.     img.onload = () => ctx.drawImage(img, 0, 0);
  1161.     img.src = savedPlot;
  1162.   }
  1163. }
  1164.  
  1165. // --- GEM DATABASE AUTO-POPULATE ---
  1166. const groupToSpecies = {
  1167.   "Corundum": ["Corundum"],
  1168.   "Beryl": ["Beryl"],
  1169.   "Chrysoberyl": ["Chrysoberyl"],
  1170.   "Garnet": ["Pyrope", "Almandine", "Spessartine", "Grossular", "Andradite", "Uvarovite", "Pyrope-Almandine"],
  1171.   "Tourmaline": ["Elbaite", "Dravite", "Liddicoatite", "Schorl", "Uvite"],
  1172.   "Quartz": ["Quartz"],
  1173.   "Epidote": ["Zoisite"],
  1174.   "Topaz": ["Topaz"],
  1175.   "Spinel": ["Spinel"],
  1176.   "Olivine": ["Olivine"],
  1177.   "Zircon": ["Zircon"],
  1178.   "Native Element": ["Diamond"]
  1179. };
  1180.  
  1181. const speciesToVariety = {
  1182.   "Corundum": ["Ruby", "Sapphire"],
  1183.   "Beryl": ["Emerald", "Aquamarine", "Morganite"],
  1184.   "Chrysoberyl": ["Alexandrite"],
  1185.   "Pyrope": ["Rhodolite", "Garnet"],
  1186.   "Almandine": ["Rhodolite", "Garnet"],
  1187.   "Pyrope-Almandine": ["Rhodolite"],
  1188.   "Spessartine": ["Spessartite"],
  1189.   "Grossular": ["Tsavorite"],
  1190.   "Andradite": [],
  1191.   "Uvarovite": [],
  1192.   "Elbaite": ["Tourmaline", "Paraiba"],
  1193.   "Dravite": ["Tourmaline"],
  1194.   "Liddicoatite": ["Tourmaline"],
  1195.   "Schorl": ["Tourmaline"],
  1196.   "Uvite": ["Tourmaline"],
  1197.   "Quartz": ["Amethyst", "Citrine"],
  1198.   "Zoisite": ["Tanzanite"],
  1199.   "Topaz": ["Topaz"],
  1200.   "Spinel": ["Spinel"],
  1201.   "Olivine": ["Peridot"],
  1202.   "Zircon": ["Zircon"],
  1203.   "Diamond": ["Diamond"]
  1204. };
  1205.  
  1206. const gemDB = {
  1207.   "ruby": { species: ["Corundum"], group:["Corundum"] },
  1208.   "sapphire": { species: ["Corundum"], group: ["Corundum"] },
  1209.   "emerald": { species: ["Beryl"], group: ["Beryl"] },
  1210.   "aquamarine": { species: ["Beryl"], group: ["Beryl"] },
  1211.   "morganite": { species:["Beryl"], group: ["Beryl"] },
  1212.   "alexandrite": { species:["Chrysoberyl"], group: ["Chrysoberyl"] },
  1213.   "tsavorite": { species:["Grossular"], group: ["Garnet"] },
  1214.   "spessartite": { species:["Spessartine"], group: ["Garnet"] },
  1215.   "rhodolite": { species:["Pyrope-Almandine", "Pyrope", "Almandine"], group: ["Garnet"] },
  1216.   "garnet": { species:["Pyrope", "Almandine", "Spessartine", "Grossular", "Andradite", "Uvarovite"], group: ["Garnet"] },
  1217.   "tourmaline": { species:["Elbaite", "Dravite", "Liddicoatite", "Schorl", "Uvite"], group: ["Tourmaline"] },
  1218.   "paraiba": { species: ["Elbaite"], group: ["Tourmaline"] },
  1219.   "amethyst": { species: ["Quartz"], group: ["Quartz"] },
  1220.   "citrine": { species: ["Quartz"], group: ["Quartz"] },
  1221.   "tanzanite": { species: ["Zoisite"], group: ["Epidote"] },
  1222.   "topaz": { species: ["Topaz"], group: ["Topaz"] },
  1223.   "spinel": { species: ["Spinel"], group: ["Spinel"] },
  1224.   "peridot": { species: ["Olivine"], group: ["Olivine"] },
  1225.   "zircon": { species: ["Zircon"], group: ["Zircon"] },
  1226.   "diamond": { species: ["Diamond"], group: ["Native Element"] }
  1227. };
  1228.  
  1229. // Store original datalist contents at init time
  1230. const _origSpecListHTML = document.getElementById('spec-list').innerHTML;
  1231. const _origGrpListHTML = document.getElementById('grp-list').innerHTML;
  1232. const _origVarListHTML = document.getElementById('variety-list').innerHTML;
  1233.  
  1234. function filterDatalists(groupVal, specVal) {
  1235.   const specList = document.getElementById('spec-list');
  1236.   const varList = document.getElementById('variety-list');
  1237.  
  1238.   // If both fields are empty, restore original datalist contents
  1239.   if(!groupVal && !specVal) {
  1240.    if(typeof _origSpecListHTML !== 'undefined') specList.innerHTML = _origSpecListHTML;
  1241.     if(typeof _origVarListHTML !== 'undefined') varList.innerHTML = _origVarListHTML;
  1242.     return;
  1243.   }
  1244.  
  1245.   // All possible species and varieties
  1246.   const allSpecies = [...new Set(Object.values(groupToSpecies).flat())];
  1247.   const allVarieties = Object.keys(gemDB).map(v => v.charAt(0).toUpperCase() + v.slice(1));
  1248.  
  1249.   // Filter species by group
  1250.   let filteredSpecies = allSpecies;
  1251.   if(groupVal && groupToSpecies[groupVal]) {
  1252.    filteredSpecies = groupToSpecies[groupVal];
  1253.   }
  1254.  
  1255.   // Filter varieties by species (or by group's species if no species selected)
  1256.   let filteredVarieties = allVarieties;
  1257.   if(specVal && speciesToVariety[specVal]) {
  1258.    filteredVarieties = speciesToVariety[specVal];
  1259.   } else if(groupVal && groupToSpecies[groupVal]) {
  1260.    filteredVarieties = [];
  1261.     groupToSpecies[groupVal].forEach(sp => {
  1262.       if(speciesToVariety[sp]) filteredVarieties.push(...speciesToVariety[sp]);
  1263.     });
  1264.   }
  1265.  
  1266.   // Update datalists
  1267.   specList.innerHTML = '';
  1268.   filteredSpecies.forEach(s => { const o = document.createElement('option'); o.value = s; specList.appendChild(o); });
  1269.  
  1270.   varList.innerHTML = '';
  1271.   [...new Set(filteredVarieties)].forEach(v => { const o = document.createElement('option'); o.value = v; varList.appendChild(o); });
  1272. }
  1273.  
  1274. document.getElementById('inp-var').addEventListener('input', (e) => {
  1275.   const val = e.target.value.trim().toLowerCase();
  1276.   const specInput = document.getElementById('inp-spec');
  1277.   const grpInput = document.getElementById('inp-grp');
  1278.   const specList = document.getElementById('spec-list');
  1279.   const grpList = document.getElementById('grp-list');
  1280.  
  1281.   if(gemDB[val]) {
  1282.     specList.innerHTML = '';
  1283.     grpList.innerHTML = '';
  1284.     const data = gemDB[val];
  1285.     // Species
  1286.     if(data.species.length === 1) {
  1287.       specInput.value = data.species[0];
  1288.       saveToLocal('inp-spec', data.species[0]);
  1289.     } else {
  1290.       data.species.forEach(sp => {
  1291.         const opt = document.createElement('option');
  1292.         opt.value = sp;
  1293.         specList.appendChild(opt);
  1294.       });
  1295.       if(!data.species.includes(specInput.value)) specInput.value = '';
  1296.     }
  1297.  
  1298.     // Group
  1299.     if(data.group.length === 1) {
  1300.       grpInput.value = data.group[0];
  1301.       saveToLocal('inp-grp', data.group[0]);
  1302.     } else {
  1303.       data.group.forEach(g => {
  1304.         const opt = document.createElement('option');
  1305.         opt.value = g;
  1306.         grpList.appendChild(opt);
  1307.       });
  1308.       if(!data.group.includes(grpInput.value)) grpInput.value = '';
  1309.     }
  1310.   } else {
  1311.     // No match found — restore original full datalist options
  1312.     document.getElementById('spec-list').innerHTML = _origSpecListHTML;
  1313.     document.getElementById('grp-list').innerHTML = _origGrpListHTML;
  1314.   }
  1315.  
  1316.   // Auto-populate RI-related fields from species
  1317.   const specVal = document.getElementById('inp-spec').value.trim().toLowerCase();
  1318.   let riMatch = null;
  1319.   const riKeysVar = Object.keys(riRanges).sort((a, b) => b.length - a.length);
  1320.   for(const key of riKeysVar) {
  1321.     if(specVal.includes(key)) { riMatch = riRanges[key]; break; }
  1322.   }
  1323.   if(riMatch) {
  1324.     const opcharInput = document.getElementById('inp-opchar');
  1325.     const birefInput = document.getElementById('inp-biref');
  1326.     const crystalInput = document.getElementById('inp-crystal');
  1327.     if(!opcharInput.value) { opcharInput.value = riMatch.opchar; saveToLocal('inp-opchar', riMatch.opchar); }
  1328.     if(!birefInput.value) { birefInput.value = riMatch.biref; saveToLocal('inp-biref', riMatch.biref); }
  1329.     if(!crystalInput.value) { crystalInput.value = riMatch.crystal; saveToLocal('inp-crystal', riMatch.crystal); }
  1330.   }
  1331.   checkFluorescenceConflict();
  1332.   checkSGRange();
  1333.   checkRIRange();
  1334. });
  1335.  
  1336. document.getElementById('inp-spec').addEventListener('input', (e) => {
  1337.   const val = e.target.value.trim();
  1338.   saveToLocal('inp-spec', val);
  1339.  
  1340.   // Filter varieties by selected species
  1341.   const groupVal = document.getElementById('inp-grp').value.trim();
  1342.   filterDatalists(groupVal, val);
  1343.  
  1344.   // Optionally auto-fill RI-related fields from species
  1345.   const specVal = val.toLowerCase();
  1346.   let riMatch = null;
  1347.   const riKeysSpec = Object.keys(riRanges).sort((a, b) => b.length - a.length);
  1348.   for(const key of riKeysSpec) {
  1349.     if(specVal.includes(key)) { riMatch = riRanges[key]; break; }
  1350.   }
  1351.   if(riMatch) {
  1352.     const opcharInput = document.getElementById('inp-opchar');
  1353.     const birefInput = document.getElementById('inp-biref');
  1354.     const crystalInput = document.getElementById('inp-crystal');
  1355.     if(!opcharInput.value) { opcharInput.value = riMatch.opchar; saveToLocal('inp-opchar', riMatch.opchar); }
  1356.     if(!birefInput.value) { birefInput.value = riMatch.biref; saveToLocal('inp-biref', riMatch.biref); }
  1357.     if(!crystalInput.value) { crystalInput.value = riMatch.crystal; saveToLocal('inp-crystal', riMatch.crystal); }
  1358.   }
  1359.   checkSGRange();
  1360.   checkRIRange();
  1361. });
  1362.  
  1363. document.getElementById('inp-grp').addEventListener('input', (e) => {
  1364.   const val = e.target.value.trim();
  1365.   saveToLocal('inp-grp', val);
  1366.   // Filter species and varieties by selected group
  1367.   const specVal = document.getElementById('inp-spec').value.trim();
  1368.   filterDatalists(val, specVal);
  1369.   checkSGRange();
  1370. });
  1371.  
  1372. // --- FLUORESCENCE CONFLICT CHECKER ---
  1373. function checkFluorescenceConflict() {
  1374.   const variety = document.getElementById('inp-var').value.trim().toLowerCase();
  1375.   const uvSW = document.getElementById('inp-uvs').value.trim().toLowerCase();
  1376.   const uvLW = document.getElementById('inp-uvl').value.trim().toLowerCase();
  1377.   const warnIcon = document.getElementById('fluo-warning');
  1378.  
  1379.   let warningMsg = "";
  1380.  
  1381.   if(variety.includes('sapphire') && !variety.includes('pink') && !variety.includes('yellow')) {
  1382.    if(uvSW.includes('red') || uvLW.includes('red')) {
  1383.      warningMsg = "Natural blue sapphire is typically inert. Red fluorescence may indicate synthetic origin (Verneuil).";
  1384.     }
  1385.   } else if(variety.includes('ruby')) {
  1386.     if(uvSW.includes('inert') || uvSW.includes('none') || uvLW.includes('inert') || uvLW.includes('none')) {
  1387.       warningMsg = "Natural and synthetic rubies typically fluoresce red due to Cr. Inert reaction is anomalous.";
  1388.     } else if(uvSW.includes('strong') && !uvLW.includes('strong') && uvLW.trim() !== '') {
  1389.       warningMsg = "Synthetic flame-fusion rubies often show stronger SW fluorescence than LW. Natural typically shows stronger LW.";
  1390.     }
  1391.   } else if(variety.includes('emerald')) {
  1392.      if((uvSW.includes('strong') && uvSW.includes('red')) || (uvLW.includes('strong') && uvLW.includes('red'))) {
  1393.        warningMsg = "Strong red fluorescence is very common in synthetic emeralds, though some naturals (e.g. Colombian) can also glow red.";
  1394.      }
  1395.   } else if(variety.includes('diamond')) {
  1396.      if(uvSW.includes('strong') && !uvLW.includes('strong') && uvLW.trim() !== '') {
  1397.        warningMsg = "Synthetic diamonds often show stronger SW fluorescence than LW. Natural diamonds typically show stronger LW.";
  1398.      }
  1399.   }
  1400.  
  1401.   if(warningMsg !== "") {
  1402.     warnIcon.style.display = 'inline-block';
  1403.     warnIcon.title = "⚠️ Warning: " + warningMsg;
  1404.   } else {
  1405.     warnIcon.style.display = 'none';
  1406.   }
  1407. }
  1408. document.getElementById('inp-uvs').addEventListener('input', checkFluorescenceConflict);
  1409. document.getElementById('inp-uvl').addEventListener('input', checkFluorescenceConflict);
  1410.  
  1411. // --- MEASUREMENTS AUTO-FORMATTER ---
  1412. document.getElementById('inp-meas').addEventListener('blur', function(e) {
  1413.   let val = e.target.value.trim();
  1414.   if(!val) return;
  1415.   // Only format if input looks like measurements (2-3 numbers separated by delimiters)
  1416.   if(!/[\d.]+\s*[x×,\s]+[\d.]+/.test(val)) return;
  1417.   // Normalize any non-ASCII dashes/times signs
  1418.   val = val.replace(/[\u2013\u2014\u00d7]/g, 'x');
  1419.   let nums = val.match(/\d+(\.\d+)?/g);
  1420.   if(nums && nums.length >= 2) {
  1421.    // Limit to first 3 numeric values
  1422.    if(nums.length > 3) {
  1423.      alert('Measurements should have 2-3 dimensions (L x W or L x W x D). Extra values ignored.');
  1424.       nums = nums.slice(0, 3);
  1425.     }
  1426.     let formatted = nums.map(n => parseFloat(n).toFixed(2)).join(' x ') + ' mm';
  1427.     e.target.value = formatted;
  1428.     saveToLocal('inp-meas', formatted);
  1429.   }
  1430. });
  1431. // Auto-calc depth % and carat weight after measurements are formatted
  1432. document.getElementById('inp-meas').addEventListener('blur', autoCalcDepthPct);
  1433. document.getElementById('inp-meas').addEventListener('blur', autoCalcCaratWeight);
  1434. document.getElementById('inp-sg').addEventListener('input', autoCalcCaratWeight);
  1435.  
  1436. // --- SG ESTIMATOR ---
  1437. // Shape-based volume correction factors for SG calculation
  1438. const shapeCorrections = {
  1439.   'round': 0.0020, 'oval': 0.0022, 'cushion': 0.0022, 'emerald cut': 0.0025,
  1440.   'pear': 0.0018, 'marquise': 0.0017, 'heart': 0.0019, 'princess': 0.0024,
  1441.   'radiant': 0.0024, 'asscher': 0.0025, 'trillion': 0.0018, 'baguette': 0.0026,
  1442.   'cabochon': 0.0023, 'briolette': 0.0016, 'rose cut': 0.0015, 'freeform': 0.0020,
  1443.   'hexagonal': 0.0021, 'kite': 0.0019, 'shield': 0.0020, 'trapezoid': 0.0023
  1444. };
  1445.  
  1446. function getShapeCorrection() {
  1447.   const shape = (document.getElementById('inp-shape').value || '').trim().toLowerCase();
  1448.   for(const key in shapeCorrections) {
  1449.     if(shape.includes(key)) return shapeCorrections[key];
  1450.   }
  1451.   return 0.0020; // Default to round as safest generic
  1452. }
  1453.  
  1454. function calcSG() {
  1455.   const cwStr = document.getElementById('inp-cw').value;
  1456.   const measStr = document.getElementById('inp-meas').value;
  1457.   if(!cwStr || !measStr) { alert('Please enter Carat Weight and Measurements first.'); return; }
  1458.  
  1459.   const cwMatch = cwStr.match(/[\d.]+/);
  1460.   const dims = measStr.match(/[\d.]+/g);
  1461.   if(!cwMatch || !dims || dims.length < 3) { alert('Ensure Weight and Measurements contain numbers (e.g. 3.42 and 9.50 x 7.10 x 5.00)'); return; }
  1462.  
  1463.  const wct = parseFloat(cwMatch[0]);
  1464.  const vol = parseFloat(dims[0]) * parseFloat(dims[1]) * parseFloat(dims[2]);
  1465.  const correction = getShapeCorrection();
  1466.  const sg = wct / (vol * correction);
  1467.  
  1468.  const finalSG = sg.toFixed(2);
  1469.  const sgInput = document.getElementById('inp-sg');
  1470.  sgInput.value = finalSG;
  1471.  saveToLocal('inp-sg', finalSG);
  1472.  if(sg < 1 || sg > 10) {
  1473.     alert('Calculated SG (' + finalSG + ') is outside expected range (1-10). Check your measurements and carat weight.');
  1474.     sgInput.classList.add('sg-out-of-range');
  1475.   } else {
  1476.     sgInput.classList.remove('sg-out-of-range');
  1477.   }
  1478.   checkSGRange();
  1479. }
  1480.  
  1481. // --- AUTO-CALCULATE CARAT WEIGHT FROM SG & MEASUREMENTS ---
  1482. function autoCalcCaratWeight() {
  1483.  const sgStr = document.getElementById('inp-sg').value.trim();
  1484.   const measStr = document.getElementById('inp-meas').value.trim();
  1485.   const cwInput = document.getElementById('inp-cw');
  1486.   if(cwInput.value.trim()) return; // Don't overwrite manual entry
  1487.   if(!sgStr || !measStr) return;
  1488.   const sg = parseFloat(sgStr);
  1489.   const dims = measStr.match(/[\d.]+/g);
  1490.   if(isNaN(sg) || !dims || dims.length < 3) return;
  1491.  const vol = parseFloat(dims[0]) * parseFloat(dims[1]) * parseFloat(dims[2]);
  1492.  const correction = getShapeCorrection();
  1493.  const caratWeight = sg * vol * correction;
  1494.  if(caratWeight > 0 && caratWeight < 10000) {
  1495.    cwInput.value = caratWeight.toFixed(2) + ' ct';
  1496.     saveToLocal('inp-cw', cwInput.value);
  1497.   }
  1498. }
  1499.  
  1500. // --- AUTO-CALCULATE DEPTH % FROM MEASUREMENTS ---
  1501. function autoCalcDepthPct() {
  1502.   const measStr = document.getElementById('inp-meas').value.trim();
  1503.   const depInput = document.getElementById('inp-dep');
  1504.   if(depInput.value.trim()) return; // Don't overwrite manual entry
  1505.   if(!measStr) return;
  1506.   const dims = measStr.match(/[\d.]+/g);
  1507.   if(!dims || dims.length < 3) return;
  1508.  const w = parseFloat(dims[0]);
  1509.  const h = parseFloat(dims[1]);
  1510.  const d = parseFloat(dims[2]);
  1511.  // GIA colored stone standard: depth / average(length, width)
  1512.  const avgWH = (w + h) / 2;
  1513.  if(avgWH > 0) {
  1514.     const depthPct = (d / avgWH) * 100;
  1515.     depInput.value = depthPct.toFixed(1) + '%';
  1516.     saveToLocal('inp-dep', depInput.value);
  1517.     updateProportions();
  1518.   }
  1519. }
  1520.  
  1521. // --- SG RANGE CHECKER ---
  1522. const sgRanges = {
  1523.   "corundum": {min:3.95, max:4.10, label:"Corundum"},
  1524.   "beryl": {min:2.63, max:2.92, label:"Beryl"},
  1525.   "chrysoberyl": {min:3.68, max:3.78, label:"Chrysoberyl"},
  1526.   "pyrope": {min:3.62, max:3.87, label:"Pyrope Garnet"},
  1527.   "almandine": {min:3.95, max:4.32, label:"Almandine Garnet"},
  1528.   "spessartine": {min:4.12, max:4.20, label:"Spessartine Garnet"},
  1529.   "grossular": {min:3.40, max:3.73, label:"Grossular Garnet"},
  1530.   "andradite": {min:3.77, max:3.89, label:"Andradite Garnet"},
  1531.   "pyrope-almandine": {min:3.62, max:4.32, label:"Pyrope-Almandine Garnet"},
  1532.   "garnet": {min:3.40, max:4.32, label:"Garnet Group"},
  1533.   "quartz": {min:2.63, max:2.67, label:"Quartz"},
  1534.   "elbaite": {min:3.00, max:3.11, label:"Elbaite Tourmaline"},
  1535.   "dravite": {min:3.03, max:3.18, label:"Dravite Tourmaline"},
  1536.   "tourmaline": {min:3.00, max:3.26, label:"Tourmaline Group"},
  1537.   "zoisite": {min:3.10, max:3.38, label:"Zoisite"},
  1538.   "topaz": {min:3.49, max:3.57, label:"Topaz"},
  1539.   "spinel": {min:3.58, max:3.64, label:"Spinel"},
  1540.   "olivine": {min:3.27, max:3.48, label:"Olivine"},
  1541.   "zircon": {min:3.90, max:4.73, label:"Zircon"},
  1542.   "diamond": {min:3.50, max:3.53, label:"Diamond"}
  1543. };
  1544.  
  1545. function checkSGRange() {
  1546.   const species = document.getElementById('inp-spec').value.trim().toLowerCase();
  1547.   const sgStr = document.getElementById('inp-sg').value.trim();
  1548.   const warnIcon = document.getElementById('sg-warning');
  1549.  
  1550.   if(!species || !sgStr) { warnIcon.style.display = 'none'; return; }
  1551.  
  1552.   const sgVal = parseFloat(sgStr);
  1553.   if(isNaN(sgVal)) { warnIcon.style.display = 'none'; return; }
  1554.  
  1555.   // Find matching range by species name — sort keys longest-first for specificity
  1556.   let range = null;
  1557.   const sgKeys = Object.keys(sgRanges).sort((a, b) => b.length - a.length);
  1558.   for(const key of sgKeys) {
  1559.     if(species.includes(key)) { range = sgRanges[key]; break; }
  1560.   }
  1561.  
  1562.   if(!range) { warnIcon.style.display = 'none'; return; }
  1563.  
  1564.   if(sgVal < range.min - 0.05 || sgVal > range.max + 0.05) {
  1565.     warnIcon.style.display = 'inline-block';
  1566.     warnIcon.title = "\u26a0\ufe0f SG Mismatch: " + range.label + " expected range is " + range.min.toFixed(2) + " \u2013 " + range.max.toFixed(2) + ". Your value (" + sgVal.toFixed(2) + ") falls outside this range.";
  1567.     document.getElementById('inp-sg').classList.add('sg-out-of-range');
  1568.   } else {
  1569.     warnIcon.style.display = 'none';
  1570.     document.getElementById('inp-sg').classList.remove('sg-out-of-range');
  1571.   }
  1572. }
  1573. document.getElementById('inp-sg').addEventListener('input', checkSGRange);
  1574. document.getElementById('inp-spec').addEventListener('input', checkSGRange);
  1575.  
  1576. // --- RI RANGE CHECKER ---
  1577. const riRanges = {
  1578.   "corundum": {min:1.757, max:1.779, biref:"0.008-0.010", opchar:"DR Uniaxial (−)", crystal:"Hexagonal (Trigonal)", label:"Corundum"},
  1579.   "beryl": {min:1.565, max:1.602, biref:"0.004-0.009", opchar:"DR Uniaxial (−)", crystal:"Hexagonal", label:"Beryl"},
  1580.   "chrysoberyl": {min:1.744, max:1.755, biref:"0.008-0.010", opchar:"DR Biaxial (+)", crystal:"Orthorhombic", label:"Chrysoberyl"},
  1581.   "pyrope": {min:1.714, max:1.756, biref:"None (SR)", opchar:"SR (Singly Refractive / Isotropic)", crystal:"Isometric (Cubic)", label:"Pyrope Garnet"},
  1582.   "almandine": {min:1.780, max:1.820, biref:"None (SR)", opchar:"SR (Singly Refractive / Isotropic)", crystal:"Isometric (Cubic)", label:"Almandine Garnet"},
  1583.   "spessartine": {min:1.795, max:1.815, biref:"None (SR)", opchar:"SR (Singly Refractive / Isotropic)", crystal:"Isometric (Cubic)", label:"Spessartine Garnet"},
  1584.   "grossular": {min:1.730, max:1.760, biref:"None (SR)", opchar:"SR (Singly Refractive / Isotropic)", crystal:"Isometric (Cubic)", label:"Grossular Garnet"},
  1585.   "andradite": {min:1.855, max:1.895, biref:"None (SR)", opchar:"SR (Singly Refractive / Isotropic)", crystal:"Isometric (Cubic)", label:"Andradite Garnet"},
  1586.   "pyrope-almandine": {min:1.714, max:1.820, biref:"None (SR)", opchar:"SR (Singly Refractive / Isotropic)", crystal:"Isometric (Cubic)", label:"Pyrope-Almandine Garnet"},
  1587.   "garnet": {min:1.714, max:1.895, biref:"None (SR)", opchar:"SR (Singly Refractive / Isotropic)", crystal:"Isometric (Cubic)", label:"Garnet Group"},
  1588.   "quartz": {min:1.544, max:1.553, biref:"0.009", opchar:"DR Uniaxial (+)", crystal:"Hexagonal (Trigonal)", label:"Quartz"},
  1589.   "elbaite": {min:1.615, max:1.655, biref:"0.014-0.021", opchar:"DR Uniaxial (−)", crystal:"Hexagonal (Trigonal)", label:"Elbaite Tourmaline"},
  1590.   "dravite": {min:1.610, max:1.650, biref:"0.014-0.020", opchar:"DR Uniaxial (−)", crystal:"Hexagonal (Trigonal)", label:"Dravite Tourmaline"},
  1591.   "tourmaline": {min:1.610, max:1.675, biref:"0.014-0.021", opchar:"DR Uniaxial (−)", crystal:"Hexagonal (Trigonal)", label:"Tourmaline Group"},
  1592.   "zoisite": {min:1.685, max:1.707, biref:"0.006-0.018", opchar:"DR Biaxial (+)", crystal:"Orthorhombic", label:"Zoisite"},
  1593.   "topaz": {min:1.609, max:1.643, biref:"0.008-0.010", opchar:"DR Biaxial (+)", crystal:"Orthorhombic", label:"Topaz"},
  1594.   "spinel": {min:1.712, max:1.736, biref:"None (SR)", opchar:"SR (Singly Refractive / Isotropic)", crystal:"Isometric (Cubic)", label:"Spinel"},
  1595.   "olivine": {min:1.635, max:1.690, biref:"0.033-0.038", opchar:"DR Biaxial (+/−)", crystal:"Orthorhombic", label:"Olivine"},
  1596.   "zircon": {min:1.810, max:1.987, biref:"0.000-0.059", opchar:"DR Uniaxial (+)", crystal:"Tetragonal", label:"Zircon"},
  1597.   "diamond": {min:2.417, max:2.420, biref:"None (SR)", opchar:"SR (Singly Refractive / Isotropic)", crystal:"Isometric (Cubic)", label:"Diamond"}
  1598. };
  1599.  
  1600. function checkRIRange() {
  1601.   const species = document.getElementById('inp-spec').value.trim().toLowerCase();
  1602.   const riStr = document.getElementById('inp-ri').value.trim();
  1603.   const warnIcon = document.getElementById('ri-warning');
  1604.  
  1605.   if(!species || !riStr) { warnIcon.style.display = 'none'; return; }
  1606.  
  1607.   // Parse RI — handle single value or range like "1.544–1.553" or "1.544-1.553" or "1.544 to 1.553"
  1608.   const riNums = riStr.match(/[\d.]+/g);
  1609.   if(!riNums || riNums.length === 0) { warnIcon.style.display = 'none'; return; }
  1610.  
  1611.   const riVal = parseFloat(riNums[0]);
  1612.   const riVal2 = riNums.length > 1 ? parseFloat(riNums[riNums.length - 1]) : riVal;
  1613.   if(isNaN(riVal)) { warnIcon.style.display = 'none'; return; }
  1614.  
  1615.   let range = null;
  1616.   const riKeys = Object.keys(riRanges).sort((a, b) => b.length - a.length);
  1617.   for(const key of riKeys) {
  1618.     if(species.includes(key)) { range = riRanges[key]; break; }
  1619.   }
  1620.  
  1621.   if(!range) { warnIcon.style.display = 'none'; return; }
  1622.  
  1623.   const tolerance = 0.010;
  1624.   if(riVal < range.min - tolerance || riVal2 > range.max + tolerance) {
  1625.     warnIcon.style.display = 'inline-block';
  1626.     warnIcon.title = "\u26a0\ufe0f RI Mismatch: " + range.label + " expected range is " + range.min.toFixed(3) + " \u2013 " + range.max.toFixed(3) + ". Your value (" + riStr + ") falls outside this range.";
  1627.   } else {
  1628.     warnIcon.style.display = 'none';
  1629.   }
  1630. }
  1631. document.getElementById('inp-ri').addEventListener('input', checkRIRange);
  1632. document.getElementById('inp-spec').addEventListener('input', checkRIRange);
  1633.  
  1634. // --- AUTO-POPULATE FROM SPECIES ---
  1635. function autoPopulateFromSpecies() {
  1636.   var species = document.getElementById('inp-spec').value.trim().toLowerCase();
  1637.   if (!species) return;
  1638.   var crystalInp = document.getElementById('inp-crystal');
  1639.   var opcharInp = document.getElementById('inp-opchar');
  1640.   var birefInp = document.getElementById('inp-biref');
  1641.   var riKeys = Object.keys(riRanges).sort(function(a, b) { return b.length - a.length; });
  1642.   var match = null;
  1643.   for (var i = 0; i < riKeys.length; i++) {
  1644.    if (species.includes(riKeys[i])) { match = riRanges[riKeys[i]]; break; }
  1645.  }
  1646.  if (!match) return;
  1647.  if (!crystalInp.value.trim()) { crystalInp.value = match.crystal; saveToLocal('inp-crystal', match.crystal); }
  1648.  if (!opcharInp.value.trim()) { opcharInp.value = match.opchar; saveToLocal('inp-opchar', match.opchar); updateConditionalFields(); }
  1649.  if (!birefInp.value.trim()) { birefInp.value = match.biref; saveToLocal('inp-biref', match.biref); }
  1650. }
  1651. document.getElementById('inp-spec').addEventListener('change', autoPopulateFromSpecies);
  1652.  
  1653. // --- CONDITIONAL FIELD VISIBILITY ---
  1654. function updateConditionalFields() {
  1655.  var opchar = (document.getElementById('inp-opchar').value || '').trim().toLowerCase();
  1656.  var isSR = opchar.includes('sr') || opchar.includes('isotropic') || opchar.includes('singly');
  1657.  var grayFields = [
  1658.    {id:'inp-pleo', placeholder:'e.g. Moderate'},
  1659.    {id:'inp-dich', placeholder:'e.g. Dichroic'},
  1660.    {id:'inp-biref', placeholder:'0.009'}
  1661.  ];
  1662.  grayFields.forEach(function(f) {
  1663.    var inp = document.getElementById(f.id);
  1664.    if (!inp) return;
  1665.    var row = inp.closest('.field-row');
  1666.    if (isSR) {
  1667.      row.style.opacity = '0.35';
  1668.      row.style.pointerEvents = 'none';
  1669.      inp.placeholder = 'N/A (Singly Refractive)';
  1670.    } else {
  1671.      row.style.opacity = '1';
  1672.      row.style.pointerEvents = 'auto';
  1673.      inp.placeholder = f.placeholder;
  1674.    }
  1675.  });
  1676. }
  1677. document.getElementById('inp-opchar').addEventListener('input', updateConditionalFields);
  1678.  
  1679. // --- COLOR PICKER SYSTEM ---
  1680. const giaHues =[
  1681.  {abbr: 'R', name: 'Red', deg: 0}, {abbr: 'oR', name: 'Orangy Red', deg: 15}, {abbr: 'rO', name: 'Red-Orange', deg: 30},
  1682.  {abbr: 'O', name: 'Orange', deg: 40}, {abbr: 'yO', name: 'Yellow-Orange', deg: 50}, {abbr: 'Y', name: 'Yellow', deg: 60},
  1683.  {abbr: 'gY', name: 'Greenish Yellow', deg: 75}, {abbr: 'yG', name: 'Yellow-Green', deg: 90}, {abbr: 'G', name: 'Green', deg: 120},
  1684.  {abbr: 'bG', name: 'Bluish Green', deg: 160}, {abbr: 'gB', name: 'Greenish Blue', deg: 190}, {abbr: 'B', name: 'Blue', deg: 220},
  1685.  {abbr: 'pB', name: 'Purplish Blue', deg: 235}, {abbr: 'vB', name: 'Violetish Blue', deg: 245}, {abbr: 'V', name: 'Violet', deg: 270},
  1686.  {abbr: 'P', name: 'Purple', deg: 290}, {abbr: 'rP', name: 'Reddish Purple', deg: 315}, {abbr: 'pR', name: 'Purplish Red', deg: 340},
  1687.  {abbr: 'pK', name: 'Pink', deg: 355}, {abbr: 'Brn', name: 'Brown', deg: 25}, {abbr: 'Gy', name: 'Gray', deg: 180}
  1688. ];
  1689. const toneNames =["0 - Colorless","1 - Extremely Light","2 - Very Light","3 - Light","4 - Med Light","5 - Medium","6 - Med Dark","7 - Dark","8 - Very Dark","9 - Ext. Dark","10 - Black"];
  1690. const satNames =["0 - Colorless/Near Colorless","1 - Grayish/Brownish","2 - Sl. Gray/Brown","3 - Very Sl.","4 - Mod. Strong","5 - Strong","6 - Vivid"];
  1691.  
  1692.  
  1693. function closeCompareChart() { document.getElementById('compareModal').classList.remove('active'); }
  1694.  
  1695. function openCompareChart() {
  1696.  document.getElementById('compareModal').classList.add('active');
  1697.  // Update compare modal with current data
  1698.  document.getElementById('compare-variety').textContent = document.getElementById('inp-var').value || 'Not specified';
  1699.  document.getElementById('compare-color').textContent = document.getElementById('av-color').textContent || '—';
  1700.  document.getElementById('compare-clarity').textContent = document.getElementById('av-clarity').textContent || '—';
  1701.  document.getElementById('compare-cutting').textContent = document.getElementById('av-cutting').textContent || '—';
  1702.  document.getElementById('compare-overall').textContent = document.getElementById('gradeValue').textContent || '—';
  1703.  
  1704.  // Pull image from whichever photo slot has an image
  1705.  const img1 = document.getElementById('previewMain1');
  1706.  const img2 = document.getElementById('previewMain2');
  1707.  const hasSrc1 = img1 && img1.src && !img1.src.endsWith('/') && img1.src !== window.location.href;
  1708.  const hasSrc2 = img2 && img2.src && !img2.src.endsWith('/') && img2.src !== window.location.href;
  1709.  const compareImg = document.getElementById('compare-img');
  1710.  if(hasSrc1 && document.getElementById('photoMain1').classList.contains('has-image')) {
  1711.    compareImg.src = img1.src;
  1712.  } else if(hasSrc2 && document.getElementById('photoMain2').classList.contains('has-image')) {
  1713.    compareImg.src = img2.src;
  1714.  } else {
  1715.    compareImg.src = '';
  1716.  }
  1717. }
  1718.  
  1719. function openColorPicker() { document.getElementById('colorModal').classList.add('active'); updateColorPreview(); }
  1720. function closeColorPicker() { document.getElementById('colorModal').classList.remove('active'); }
  1721.  
  1722. function updateColorPreview() {
  1723.  const hIdx = document.getElementById('cp-hue').value;
  1724.  const tIdx = parseInt(document.getElementById('cp-ton').value);
  1725.  const sIdx = parseInt(document.getElementById('cp-sat').value);
  1726.  const modifier = document.getElementById('cp-modifier').value;
  1727.  
  1728.  document.getElementById('cp-hue-label').textContent = giaHues[hIdx].abbr + " (" + giaHues[hIdx].name + ")";
  1729.  document.getElementById('cp-ton-label').textContent = toneNames[tIdx];
  1730.  document.getElementById('cp-sat-label').textContent = satNames[sIdx];
  1731.  document.getElementById('cp-mod-label').textContent = modifier ? modifier.charAt(0).toUpperCase() + modifier.slice(1) : "None";
  1732.  
  1733.  let hueDeg = giaHues[hIdx].deg;
  1734.  
  1735.  // Apply modifier hue shift — percentage-based toward modifier target hue
  1736.  const modifierTargetHues = {
  1737.    "pinkish": 350, "orangy": 30, "yellowish": 60, "greenish": 120,
  1738.    "bluish": 220, "violetish": 270, "brownish": 30, "grayish": -1
  1739.  };
  1740.  
  1741.  if(modifier && modifierTargetHues[modifier] !== undefined) {
  1742.    if(modifier === "grayish") {
  1743.      // Grayish reduces saturation only, no hue shift
  1744.    } else {
  1745.      const target = modifierTargetHues[modifier];
  1746.      // Calculate shortest angular distance
  1747.      let diff = target - hueDeg;
  1748.      if(diff > 180) diff -= 360;
  1749.       if(diff < -180) diff += 360;
  1750.      // Shift 30% toward the modifier hue
  1751.      hueDeg = hueDeg + diff * 0.30;
  1752.      hueDeg = ((hueDeg % 360) + 360) % 360;
  1753.    }
  1754.  }
  1755.  
  1756.  const lightness = Math.max(0, 100 - (tIdx * 10));
  1757.  const saturation = sIdx * 16.5;
  1758.  
  1759.  document.getElementById('cp-preview').style.backgroundColor = `hsl(${hueDeg}, ${saturation}%, ${lightness}%)`;
  1760. }
  1761.  
  1762.  
  1763. // Preset color function
  1764. function applyPresetColor(hueIdx, toneIdx, satIdx) {
  1765.  document.getElementById('cp-hue').value = hueIdx;
  1766.  document.getElementById('cp-ton').value = toneIdx;
  1767.  document.getElementById('cp-sat').value = satIdx;
  1768.  updateColorPreview();
  1769. }
  1770.  
  1771. function applyColor() {
  1772.  const hIdx = document.getElementById('cp-hue').value;
  1773.  const tIdx = parseInt(document.getElementById('cp-ton').value);
  1774.  const sIdx = parseInt(document.getElementById('cp-sat').value);
  1775.  const modifier = document.getElementById('cp-modifier').value;
  1776.  
  1777.  const modifierAbbr = {
  1778.    "pinkish": "pk",
  1779.    "orangy": "o",
  1780.    "yellowish": "y",
  1781.    "greenish": "g",
  1782.    "bluish": "b",
  1783.    "violetish": "v",
  1784.    "brownish": "brn",
  1785.    "grayish": "gy"
  1786.  };
  1787.  
  1788.  const baseAbbr = giaHues[hIdx].abbr;
  1789.  const finalAbbr = modifier && modifierAbbr[modifier] ? modifierAbbr[modifier] + baseAbbr : baseAbbr;
  1790.  const code = finalAbbr + " " + tIdx + "/" + sIdx;
  1791.  
  1792.  document.getElementById('inp-cold').value = code;
  1793.  document.getElementById('inp-hue').value = giaHues[hIdx].name;
  1794.  document.getElementById('inp-ton').value = toneNames[tIdx].split(' - ')[1] || "Medium";
  1795.  document.getElementById('inp-sat').value = satNames[sIdx].split(' - ')[1] || "Strong";
  1796.  
  1797.  saveToLocal('inp-cold', code); saveToLocal('inp-hue', giaHues[hIdx].name);
  1798.  saveToLocal('inp-ton', document.getElementById('inp-ton').value); saveToLocal('inp-sat', document.getElementById('inp-sat').value);
  1799.  
  1800.  closeColorPicker();
  1801. }
  1802.  
  1803. function updateProportions() {
  1804.  var shape = (document.getElementById('inp-shape').value || '').trim().toLowerCase();
  1805.  var meas = document.getElementById('inp-meas').value || '';
  1806.  var depthPct = document.getElementById('inp-dep').value || '';
  1807.  
  1808.  var dims = meas.match(/[\d.]+/g);
  1809.  var w = dims && dims[0] ? parseFloat(dims[0]).toFixed(2) : '—';
  1810.  
  1811.  // Update width label on side profile SVG
  1812.  var propW = document.querySelector('#propSideView .propWidth-static');
  1813.  if(propW) propW.textContent = w !== '—' ? w + ' mm' : '—';
  1814.  
  1815.  // Auto-fill depth% input from measurements if empty
  1816.  var depthInp = document.getElementById('inp-propDepth');
  1817.  if(depthInp && !depthInp.value && depthPct) {
  1818.    depthInp.value = depthPct;
  1819.  }
  1820.  
  1821.  // Sync all proportion inputs to SVG text labels
  1822.  var propMap = [
  1823.    ['inp-propTable','propTablePct'], ['inp-propStar','propStarPct'],
  1824.    ['inp-propCrAngle','propCrAngle'], ['inp-propCrHeight','propCrHeight'],
  1825.    ['inp-propDepth','propDepthPct'], ['inp-propGirdle','propGirdle'],
  1826.    ['inp-propPavAngle','propPavAngle'], ['inp-propPavDepth','propPavDepth'],
  1827.    ['inp-propLowerHalf','propLowerHalf'], ['inp-propCulet','propCulet']
  1828.  ];
  1829.  propMap.forEach(function(p) {
  1830.    var inp = document.getElementById(p[0]);
  1831.    var txt = document.getElementById(p[1]);
  1832.    if(inp && txt) txt.textContent = inp.value || '—';
  1833.  });
  1834.  
  1835.  // Update face-up SVG based on shape
  1836.  var faceUp = document.getElementById('propFaceUp');
  1837.  if(!faceUp) return;
  1838.  
  1839.  var brilliantFaceUp = '<circle cx="50" cy="50" r="45" fill="none" stroke="var(--navy)" stroke-width="1.2"/>' +
  1840.     '<polygon points="50,31 63.4,36.6 69,50 63.4,63.4 50,69 36.6,63.4 31,50 36.6,36.6" fill="none" stroke="var(--navy)" stroke-width="0.7"/>' +
  1841.     '<path d="M50,31 L62.6,19.5 M50,31 L37.4,19.5 M63.4,36.6 L62.6,19.5 M63.4,36.6 L80.5,37.4 M69,50 L80.5,37.4 M69,50 L80.5,62.6 M63.4,63.4 L80.5,62.6 M63.4,63.4 L62.6,80.5 M50,69 L62.6,80.5 M50,69 L37.4,80.5 M36.6,63.4 L37.4,80.5 M36.6,63.4 L19.5,62.6 M31,50 L19.5,62.6 M31,50 L19.5,37.4 M36.6,36.6 L19.5,37.4 M36.6,36.6 L37.4,19.5" fill="none" stroke="var(--navy)" stroke-width="0.4"/>' +
  1842.     '<path d="M62.6,19.5 L50,5 M37.4,19.5 L50,5 M62.6,19.5 L81.8,18.2 M80.5,37.4 L81.8,18.2 M80.5,37.4 L95,50 M80.5,62.6 L95,50 M80.5,62.6 L81.8,81.8 M62.6,80.5 L81.8,81.8 M62.6,80.5 L50,95 M37.4,80.5 L50,95 M37.4,80.5 L18.2,81.8 M19.5,62.6 L18.2,81.8 M19.5,62.6 L5,50 M19.5,37.4 L5,50 M19.5,37.4 L18.2,18.2 M37.4,19.5 L18.2,18.2" fill="none" stroke="var(--navy)" stroke-width="0.4"/>' +
  1843.     '<path d="M62.6,19.5 L67.2,8.4 M80.5,37.4 L91.6,32.8 M80.5,62.6 L91.6,67.2 M62.6,80.5 L67.2,91.6 M37.4,80.5 L32.8,91.6 M19.5,62.6 L8.4,67.2 M19.5,37.4 L8.4,32.8 M37.4,19.5 L32.8,8.4" fill="none" stroke="var(--navy)" stroke-width="0.4"/>';
  1844.  
  1845.   var crosshairs = '<line x1="50" y1="2" x2="50" y2="98" stroke="var(--light-gray)" stroke-width="0.5"/><line x1="10" y1="50" x2="90" y2="50" stroke="var(--light-gray)" stroke-width="0.5"/><line x1="20" y1="15" x2="80" y2="85" stroke="var(--light-gray)" stroke-width="0.5"/><line x1="80" y1="15" x2="20" y2="85" stroke="var(--light-gray)" stroke-width="0.5"/>';
  1846.  
  1847.   if(shape.includes('round') || !shape) {
  1848.     faceUp.innerHTML = brilliantFaceUp;
  1849.   } else if(shape.includes('princess') || shape.includes('square')) {
  1850.     faceUp.innerHTML = '<rect x="8" y="8" width="84" height="84" fill="none" stroke="var(--navy)" stroke-width="1.5"/>' + crosshairs;
  1851.   } else if(shape.includes('emerald') || shape.includes('baguette')) {
  1852.     faceUp.innerHTML = '<polygon points="15,5 85,5 92,15 92,85 85,95 15,95 8,85 8,15" fill="none" stroke="var(--navy)" stroke-width="1.5"/>' + crosshairs;
  1853.   } else if(shape.includes('pear')) {
  1854.     faceUp.innerHTML = '<path d="M50,5 C75,5 95,35 95,60 C95,82 75,95 50,95 C25,95 5,82 5,60 C5,35 25,5 50,5Z" fill="none" stroke="var(--navy)" stroke-width="1.5"/>' + crosshairs;
  1855.   } else if(shape.includes('marquise')) {
  1856.     faceUp.innerHTML = '<ellipse cx="50" cy="50" rx="25" ry="48" fill="none" stroke="var(--navy)" stroke-width="1.5"/>' + crosshairs;
  1857.   } else if(shape.includes('heart')) {
  1858.     faceUp.innerHTML = '<path d="M50,90 L10,45 C5,25 20,10 35,10 C42,10 48,15 50,22 C52,15 58,10 65,10 C80,10 95,25 90,45Z" fill="none" stroke="var(--navy)" stroke-width="1.5"/>' + crosshairs;
  1859.   } else if(shape.includes('cushion')) {
  1860.     faceUp.innerHTML = '<rect x="8" y="8" width="84" height="84" rx="18" ry="18" fill="none" stroke="var(--navy)" stroke-width="1.5"/>' + crosshairs;
  1861.   } else if(shape.includes('trillion') || shape.includes('triangle')) {
  1862.     faceUp.innerHTML = '<polygon points="50,5 95,90 5,90" fill="none" stroke="var(--navy)" stroke-width="1.5"/>' + crosshairs;
  1863.   } else {
  1864.     faceUp.innerHTML = brilliantFaceUp;
  1865.   }
  1866. }
  1867.  
  1868. // --- COMPARISON CHART ---
  1869.  
  1870.  
  1871. // --- BASIC LOGIC & UTILS ---
  1872. function generateReportNum(){var n=new Date(),y=String(n.getFullYear()).slice(2),m=String(n.getMonth()+1).padStart(2,'0'),s=String(Math.floor(Math.random()*9999999)).padStart(7,'0');return'BG-'+y+m+'-'+s}
  1873. function setReportNum(n){document.getElementById('reportNum').textContent=n; updateFooter(n); saveToLocal('reportNum', n);}
  1874. function regenerateNum(){setReportNum(generateReportNum());}
  1875. function updateFooter(n){var d=new Date(),mo=['January','February','March','April','May','June','July','August','September','October','November','December'];document.getElementById('footerText').textContent='Report '+n+'  \u00b7  B G Gemological Collection  \u00b7  '+mo[d.getMonth()]+' '+d.getDate()+', '+d.getFullYear()}
  1876.  
  1877. function triggerUpload(id){if(!document.getElementById(id).parentElement.classList.contains('has-image'))document.getElementById(id).click()}
  1878. function handleFile(i,a,p){if(i.files[0])loadImage(i.files[0],a,p)}
  1879. function loadImage(f,a,p){
  1880.   var r=new FileReader();
  1881.   r.onload=function(e){
  1882.     var img = new Image();
  1883.     img.onload = function() {
  1884.         var canvas = document.createElement('canvas');
  1885.         var ctx2 = canvas.getContext('2d');
  1886.         var maxW = 600;
  1887.         var scale = Math.min(1, maxW / img.width);
  1888.         canvas.width = img.width * scale; canvas.height = img.height * scale;
  1889.         ctx2.drawImage(img, 0, 0, canvas.width, canvas.height);
  1890.         var dataURL = canvas.toDataURL('image/jpeg', 0.85);
  1891.         document.getElementById(p).src = dataURL;
  1892.         document.getElementById(a).classList.add('has-image');
  1893.         saveToLocal('img_' + a, dataURL);
  1894.     }
  1895.     img.src = e.target.result;
  1896.   };
  1897.   r.readAsDataURL(f);
  1898. }
  1899.  
  1900. function removePhoto(e,a,p){
  1901.   e.stopPropagation();
  1902.   document.getElementById(p).src='';
  1903.   document.getElementById(a).classList.remove('has-image');
  1904.   var f=document.getElementById(a).querySelector('input[type="file"]');
  1905.   if(f)f.value='';
  1906.   localStorage.removeItem('gemReport_img_' + a);
  1907.   if(a === 'photoMicro2') clearCanvas(e);
  1908. }
  1909.  
  1910. function dragOver(e){e.preventDefault();e.currentTarget.classList.add('drag-over')}
  1911. function dragLeave(e){e.currentTarget.classList.remove('drag-over')}
  1912. function dropFile(e,a,p){e.preventDefault();e.currentTarget.classList.remove('drag-over');var f=e.dataTransfer.files[0];if(f&&f.type.startsWith('image/'))loadImage(f,a,p)}
  1913.  
  1914. document.addEventListener('click',function(e){
  1915.  if(!e.target.classList.contains('scale-box'))return;
  1916.   var p=e.target.closest('.scale-boxes'),w=e.target.classList.contains('selected');
  1917.   p.querySelectorAll('.scale-box').forEach(function(b){b.classList.remove('selected')});
  1918.   if(!w) {
  1919.     e.target.classList.add('selected');
  1920.     saveToLocal('scale_' + p.dataset.scale, e.target.dataset.val);
  1921.   } else {
  1922.     localStorage.removeItem('gemReport_scale_' + p.dataset.scale);
  1923.   }
  1924.   recalculateGrade();
  1925. });
  1926.  
  1927. // --- CLARITY AUTO-CALCULATION ---
  1928. // Maps clarity grade + type + transparency to a 1-7 scale value
  1929. function autoClarityScale() {
  1930.   const grade = document.getElementById('inp-cgr').value.trim().toLowerCase();
  1931.   const type = document.getElementById('inp-ctype').value.trim().toLowerCase();
  1932.   const transp = document.getElementById('inp-tran').value.trim().toLowerCase();
  1933.  
  1934.   if(!grade) return; // Need at least a clarity grade
  1935.  
  1936.   // Base score from clarity grade descriptor — lookup table for unambiguous matching
  1937.   const clarityBaseScores = {
  1938.     'fi': 7, 'flawless': 7, 'internally flawless': 7,
  1939.     'eye clean': 6,
  1940.     'li': 5, 'lightly included': 5,
  1941.     'mi': 4, 'moderately included': 4,
  1942.     'hi': 3, 'heavily included': 3,
  1943.     'ei\u2083': 1, 'severely included': 1,
  1944.     'ei\u2082': 2, 'excessively included': 2,
  1945.     'ei': 2
  1946.   };
  1947.  
  1948.   let base = null;
  1949.   // Try full string match first
  1950.   if (clarityBaseScores.hasOwnProperty(grade)) {
  1951.     base = clarityBaseScores[grade];
  1952.   } else {
  1953.     // Extract abbreviation prefix (letters + subscript digits)
  1954.     const abbrMatch = grade.match(/^([a-z\u2080-\u2089]+)/);
  1955.     const abbr = abbrMatch ? abbrMatch[1] : '';
  1956.     if (abbr && clarityBaseScores.hasOwnProperty(abbr)) {
  1957.      base = clarityBaseScores[abbr];
  1958.     } else {
  1959.       // Try matching descriptive text inside parentheses
  1960.       const descMatch = grade.match(/\(([^)]+)\)/);
  1961.       const desc = descMatch ? descMatch[1].toLowerCase() : '';
  1962.       if (desc && clarityBaseScores.hasOwnProperty(desc)) {
  1963.        base = clarityBaseScores[desc];
  1964.       }
  1965.     }
  1966.   }
  1967.  
  1968.   if (base === null) return; // Unrecognized grade
  1969.  
  1970.   // Type modifier: Type III stones are graded more leniently (bump up), Type I more strictly (bump down)
  1971.   if(type.startsWith('type iii') || type.startsWith('type 3') || type.includes('almost always')) {
  1972.     if(base < 7) base = Math.min(7, base + 1); // lenient: +1
  1973.  } else if(type.startsWith('type i') && !type.startsWith('type ii') && !type.startsWith('type iii')) {
  1974.    if(base > 1) base = Math.max(1, base - 1); // strict: -1
  1975.   }
  1976.   // Type II: no modifier (standard)
  1977.  
  1978.   // Transparency penalty: anything below transparent reduces score
  1979.   if(transp.includes('opaque')) { base = Math.max(1, base - 2); }
  1980.   else if(transp.includes('semi-translucent')) { base = Math.max(1, base - 2); }
  1981.   else if(transp.includes('translucent') && !transp.includes('semi')) { base = Math.max(1, base - 1); }
  1982.   else if(transp.includes('semi-transparent')) { base = Math.max(1, base - 1); }
  1983.   // Transparent: no penalty
  1984.  
  1985.   base = Math.max(1, Math.min(7, base));
  1986.  
  1987.   // Set the clarity scale selection
  1988.   const container = document.querySelector('.scale-boxes[data-scale="clarity"]');
  1989.   container.querySelectorAll('.scale-box').forEach(b => b.classList.remove('selected'));
  1990.   const target = container.querySelector('[data-val="' + base + '"]');
  1991.   if(target) {
  1992.     target.classList.add('selected');
  1993.     saveToLocal('scale_clarity', base);
  1994.     recalculateGrade();
  1995.   }
  1996. }
  1997. document.getElementById('inp-cgr').addEventListener('input', autoClarityScale);
  1998. document.getElementById('inp-ctype').addEventListener('input', autoClarityScale);
  1999. document.getElementById('inp-tran').addEventListener('input', autoClarityScale);
  2000.  
  2001. // --- PLOTTING CANVAS LOGIC ---
  2002. (function() {
  2003.   const plotCanvas = document.getElementById('plotCanvas');
  2004.   const ctx = plotCanvas.getContext('2d');
  2005.   let isDrawing = false, drawMode = false;
  2006.  
  2007.   window.initCanvas = function() {
  2008.     plotCanvas.width = plotCanvas.parentElement.clientWidth;
  2009.     plotCanvas.height = plotCanvas.parentElement.clientHeight;
  2010.   };
  2011.  
  2012.   window.toggleDraw = function(e) {
  2013.     e.stopPropagation();
  2014.     drawMode = !drawMode;
  2015.     plotCanvas.style.pointerEvents = drawMode ? 'auto' : 'none';
  2016.     document.getElementById('btnDraw').classList.toggle('active', drawMode);
  2017.   };
  2018.  
  2019.   window.clearCanvas = function(e) {
  2020.     e.stopPropagation();
  2021.     ctx.clearRect(0, 0, plotCanvas.width, plotCanvas.height);
  2022.     localStorage.removeItem('gemReport_plot_canvas');
  2023.   };
  2024.  
  2025.   plotCanvas.addEventListener('mousedown', function(e) {
  2026.     isDrawing = true;
  2027.     ctx.beginPath();
  2028.     ctx.moveTo(e.offsetX, e.offsetY);
  2029.   });
  2030.   plotCanvas.addEventListener('mousemove', function(e) {
  2031.     if (isDrawing) {
  2032.       ctx.strokeStyle = '#e60000';
  2033.       ctx.lineWidth = 1.5;
  2034.       ctx.lineCap = 'round';
  2035.       ctx.lineTo(e.offsetX, e.offsetY);
  2036.       ctx.stroke();
  2037.     }
  2038.   });
  2039.   plotCanvas.addEventListener('mouseup', function() {
  2040.     isDrawing = false;
  2041.     saveToLocal('plot_canvas', plotCanvas.toDataURL());
  2042.   });
  2043.   plotCanvas.addEventListener('mouseleave', function() { isDrawing = false; });
  2044. })();
  2045.  
  2046. // --- CLARITY DIAGRAM INCLUSION PLOTTING ---
  2047. (function() {
  2048.   let currentInclusionType = 'crystal';
  2049.   const inclusionSymbols = {
  2050.     'crystal': '\u25CB', 'cloud': '\u25EF', 'feather': '\u279C',
  2051.     'natural': '\u224E', 'needle': '\u2758', 'cavity': '\u2756'
  2052.   };
  2053.  
  2054.   var inclusionHistory = [];
  2055.  
  2056.   window.setInclusionType = function(type) { currentInclusionType = type; };
  2057.  
  2058.   window.plotInclusion = function(event, wrapperId) {
  2059.     const wrapper = document.getElementById(wrapperId);
  2060.     const rect = wrapper.getBoundingClientRect();
  2061.     const x = event.clientX - rect.left;
  2062.     const y = event.clientY - rect.top;
  2063.  
  2064.     const mark = document.createElement('div');
  2065.     mark.className = 'inclusion-mark';
  2066.     mark.style.left = x + 'px';
  2067.     mark.style.top = y + 'px';
  2068.     mark.title = currentInclusionType;
  2069.  
  2070.     if (currentInclusionType === 'feather') {
  2071.       mark.style.borderRadius = '0';
  2072.       mark.style.width = '8px';
  2073.       mark.style.height = '3px';
  2074.       mark.style.transform = 'translate(-50%,-50%) rotate(-30deg)';
  2075.     } else if (currentInclusionType === 'needle') {
  2076.       mark.style.borderRadius = '0';
  2077.       mark.style.width = '2px';
  2078.       mark.style.height = '8px';
  2079.     }
  2080.  
  2081.     wrapper.appendChild(mark);
  2082.     inclusionHistory.push(mark);
  2083.     window.saveInclusionData();
  2084.   };
  2085.  
  2086.   window.undoInclusion = function() {
  2087.     if (inclusionHistory.length === 0) return;
  2088.     var lastMark = inclusionHistory.pop();
  2089.     lastMark.remove();
  2090.     window.saveInclusionData();
  2091.   };
  2092.  
  2093.   window.clearInclusions = function() {
  2094.     document.querySelectorAll('.inclusion-mark').forEach(function(m) { m.remove(); });
  2095.     inclusionHistory = [];
  2096.     localStorage.removeItem('gemReport_inclusions');
  2097.   };
  2098.  
  2099.   document.addEventListener('keydown', function(e) {
  2100.     if ((e.ctrlKey || e.metaKey) && e.key === 'z') {
  2101.      var tag = document.activeElement ? document.activeElement.tagName : '';
  2102.       if (tag !== 'INPUT' && tag !== 'TEXTAREA') {
  2103.        e.preventDefault();
  2104.         window.undoInclusion();
  2105.       }
  2106.     }
  2107.   });
  2108.  
  2109.   window.saveInclusionData = function() {
  2110.     const data = [];
  2111.     document.querySelectorAll('.clar-svg-wrapper').forEach(function(wrapper) {
  2112.       wrapper.querySelectorAll('.inclusion-mark').forEach(function(mark) {
  2113.         data.push({
  2114.           wrapperId: wrapper.id,
  2115.           left: mark.style.left,
  2116.           top: mark.style.top,
  2117.           type: mark.title,
  2118.           width: mark.style.width,
  2119.           height: mark.style.height,
  2120.           borderRadius: mark.style.borderRadius,
  2121.           transform: mark.style.transform
  2122.         });
  2123.       });
  2124.     });
  2125.     saveToLocal('inclusions', JSON.stringify(data));
  2126.   };
  2127.  
  2128.   window.loadInclusionData = function() {
  2129.     const saved = loadFromLocal('inclusions');
  2130.     if (!saved) return;
  2131.     try {
  2132.       const data = JSON.parse(saved);
  2133.       data.forEach(function(d) {
  2134.         const wrapper = document.getElementById(d.wrapperId);
  2135.         if (!wrapper) return;
  2136.         const mark = document.createElement('div');
  2137.         mark.className = 'inclusion-mark';
  2138.         mark.style.left = d.left;
  2139.         mark.style.top = d.top;
  2140.         mark.title = d.type;
  2141.         if (d.width) mark.style.width = d.width;
  2142.         if (d.height) mark.style.height = d.height;
  2143.         if (d.borderRadius) mark.style.borderRadius = d.borderRadius;
  2144.         if (d.transform) mark.style.transform = d.transform;
  2145.         wrapper.appendChild(mark);
  2146.       });
  2147.     } catch(e) { console.warn('Failed to load inclusion data:', e); }
  2148.   };
  2149. })();
  2150.  
  2151. // --- GRADING ALGORITHM & COLOR CODING ---
  2152. function getScaleValue(name){var c=document.querySelector('[data-scale="'+name+'"]');if(!c)return null;var s=c.querySelector('.scale-box.selected');return s?parseInt(s.dataset.val):null}
  2153. function getScaleMax(name){var c=document.querySelector('[data-scale="'+name+'"]');return c?c.querySelectorAll('.scale-box').length:10}
  2154. function valToLabel(v,m){var n=v/m*10;if(n>=9.5)return'Exceptional';if(n>=8)return'Excellent';if(n>=6.5)return'Very Good';if(n>=5)return'Good';if(n>=3.5)return'Fair';return'Poor'}
  2155.  
  2156. function compositeToGrade(s){
  2157.   if(s>=9.5)return{letter:'A+',desc:'Exceptional', bg:'#B8963E'};
  2158.   if(s>=8.5)return{letter:'A',desc:'Excellent', bg:'#7d8c97'};
  2159.   if(s>=7.5)return{letter:'A\u2212',desc:'Very Good', bg:'#4A90A4'};
  2160.   if(s>=6.5)return{letter:'B+',desc:'Good', bg:'#3A6A8A'};
  2161.   if(s>=5.5)return{letter:'B',desc:'Above Avg.', bg:'#3A5585'};
  2162.   if(s>=4.5)return{letter:'B\u2212',desc:'Average', bg:'#4A4A7A'};
  2163.   if(s>=3.5)return{letter:'C+',desc:'Below Avg.', bg:'#C4722A'};
  2164.   if(s>=2.8)return{letter:'C',desc:'Fair', bg:'#C4722A'};
  2165.   if(s>=2.0)return{letter:'C\u2212',desc:'Poor', bg:'#A85A20'};
  2166.   if(s>=1.5)return{letter:'D',desc:'Very Poor', bg:'#8B2E2E'};
  2167.   return{letter:'F',desc:'Failing', bg:'#CC0000'};
  2168. }
  2169.  
  2170. function recalculateGrade(){
  2171.   var scales={color:{val:getScaleValue('color'),max:getScaleMax('color'),weight:0.35,el:'av-color'},clarity:{val:getScaleValue('clarity'),max:getScaleMax('clarity'),weight:0.20,el:'av-clarity'},cutting:{val:getScaleValue('cutting'),max:getScaleMax('cutting'),weight:0.20,el:'av-cutting'},finish:{val:getScaleValue('finish'),max:getScaleMax('finish'),weight:0.15,el:'av-finish'},stability:{val:getScaleValue('stability'),max:getScaleMax('stability'),weight:0.10,el:'av-stability'}};
  2172.   var tw=0,ws=0,fc=0;
  2173.   for(var k in scales){var s=scales[k],el=document.getElementById(s.el);if(s.val!==null){var n=(s.val/s.max)*10,l=valToLabel(s.val,s.max);el.textContent=s.val+'/'+s.max+' \u2014 '+l;el.classList.remove('empty');ws+=n*s.weight;tw+=s.weight;fc++}else{el.textContent='\u2014';el.classList.add('empty')}}
  2174.   var gb=document.getElementById('gradeBox'),gv=document.getElementById('gradeValue'),gd=document.getElementById('gradeDesc'),se=document.getElementById('av-score');
  2175.  
  2176.   if(fc>=2&&tw>0){
  2177.    var c=ws/tw,g=compositeToGrade(c);
  2178.     gv.textContent=g.letter;
  2179.     gd.textContent=g.desc;
  2180.     gb.style.backgroundColor = g.bg;
  2181.     gb.classList.remove('grade-empty');
  2182.     se.textContent=c.toFixed(1)+' / 10';
  2183.     se.classList.remove('empty');
  2184.   } else {
  2185.     gv.textContent='\u2014';
  2186.     gd.textContent=fc===0?'Select grades above':'Need 2+ scales';
  2187.     gb.style.backgroundColor = 'var(--navy)';
  2188.     gb.classList.add('grade-empty');
  2189.     se.textContent='\u2014';
  2190.     se.classList.add('empty');
  2191.   }
  2192.   updateGradeSummary();
  2193. }
  2194.  
  2195. // --- GRADE SUMMARY → GENERAL COMMENTS ---
  2196. function updateGradeSummary() {
  2197.   var coms = document.getElementById('inp-coms');
  2198.   var marker = '\u2014 Grade Summary \u2014';
  2199.   var existingText = coms.value;
  2200.   var markerIdx = existingText.indexOf(marker);
  2201.   var userText = markerIdx >= 0 ? existingText.substring(0, markerIdx).trimEnd() : existingText.trimEnd();
  2202.   var scaleNames = {color:'Color',clarity:'Clarity',cutting:'Cutting',finish:'Finish',stability:'Stability'};
  2203.   var parts = [];
  2204.   for (var k in scaleNames) {
  2205.     var v = getScaleValue(k), m = getScaleMax(k);
  2206.     if (v !== null) parts.push(scaleNames[k] + ': ' + valToLabel(v, m) + ' (' + v + '/' + m + ')');
  2207.   }
  2208.   if (parts.length === 0) {
  2209.     if (markerIdx >= 0) { coms.value = userText; saveToLocal('inp-coms', coms.value); }
  2210.     return;
  2211.   }
  2212.   var summary = marker + '\n' + parts.join('. ') + '.';
  2213.   var gv = document.getElementById('gradeValue').textContent;
  2214.   var gd = document.getElementById('gradeDesc').textContent;
  2215.   if (gv && gv !== '\u2014') summary += ' Overall: ' + gv + ' (' + gd + ').';
  2216.   coms.value = (userText ? userText + '\n\n' : '') + summary;
  2217.   saveToLocal('inp-coms', coms.value);
  2218. }
  2219.  
  2220. // --- NEW REPORT & PDF EXPORT ---
  2221. function newReport(){
  2222.  if(!confirm('Clear all fields, photos, and start a new report?')) return;
  2223.   document.querySelectorAll('.field-input,.meta-input,.sig-input,.prop-measure').forEach(i=>i.value='');
  2224.   document.querySelectorAll('.comments-area').forEach(t=>t.value='');
  2225.   document.querySelectorAll('input[type="date"]').forEach(d=>d.value='');
  2226.   document.querySelectorAll('.scale-box.selected').forEach(b=>b.classList.remove('selected'));['photoMain1','photoMain2','photoMicro1','photoMicro2','photoSpectro'].forEach(id=>{
  2227.     var a=document.getElementById(id); if(!a)return;
  2228.     a.classList.remove('has-image');
  2229.     var p=a.querySelector('.photo-preview'); if(p)p.src='';
  2230.     var f=a.querySelector('input[type="file"]'); if(f)f.value='';
  2231.   });
  2232.   clearCanvas({stopPropagation:function(){}});
  2233.   document.getElementById('fluo-warning').style.display = 'none';
  2234.   Object.keys(localStorage).forEach(key => { if(key.startsWith('gemReport_')) localStorage.removeItem(key); });
  2235.  
  2236.   setReportNum(generateReportNum());
  2237.   var d = new Date().toISOString().split('T')[0];
  2238.   document.getElementById('inp-date').value = d;
  2239.   saveToLocal('inp-date', d);
  2240.   recalculateGrade();
  2241.   updateProportions();
  2242.   clearInclusions();
  2243.   window.scrollTo(0,0);
  2244. }
  2245.  
  2246. function exportPDF() {
  2247.   // Save scroll position and scroll to top to fix html2canvas rendering
  2248.   const savedScrollX = window.scrollX;
  2249.   const savedScrollY = window.scrollY;
  2250.   window.scrollTo(0, 0);
  2251.  
  2252.   document.body.classList.add('exporting');
  2253.  
  2254.   // Replace blank fields with italic "N/A" for PDF
  2255.   const blankFields = [];
  2256.   document.querySelectorAll('.field-input, .meta-input, .comments-area, .sig-input').forEach(el => {
  2257.     if(!el.value || el.value.trim() === '') {
  2258.       const na = document.createElement('span');
  2259.       na.className = 'pdf-na';
  2260.       na.textContent = 'N/A';
  2261.       el.style.display = 'none';
  2262.       el.parentNode.insertBefore(na, el.nextSibling);
  2263.       blankFields.push({ el, na });
  2264.     }
  2265.   });
  2266.  
  2267.   const element = document.getElementById('pdfExportWrapper');
  2268.   const opt = {
  2269.     margin:       0,
  2270.     filename:     document.getElementById('reportNum').textContent + '_Gem_Report.pdf',
  2271.     image:        { type: 'jpeg', quality: 0.98 },
  2272.     html2canvas:  { scale: 2, useCORS: true, logging: false, scrollX: 0, scrollY: 0, windowWidth: document.documentElement.scrollWidth, windowHeight: document.documentElement.scrollHeight },
  2273.     jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' },
  2274.     pagebreak:    { mode: 'css', avoid: '.report-page' }
  2275.   };
  2276.  
  2277.   if(typeof html2pdf === 'undefined') {
  2278.     alert('PDF library failed to load. Please check your internet connection and refresh the page.');
  2279.     document.body.classList.remove('exporting');
  2280.     blankFields.forEach(({ el, na }) => { el.style.display = ''; na.remove(); });
  2281.     window.scrollTo(savedScrollX, savedScrollY);
  2282.     return;
  2283.   }
  2284.  
  2285.   html2pdf().set(opt).from(element).save().then(() => {
  2286.     document.body.classList.remove('exporting');
  2287.     blankFields.forEach(({ el, na }) => {
  2288.       el.style.display = '';
  2289.       na.remove();
  2290.     });
  2291.     window.scrollTo(savedScrollX, savedScrollY);
  2292.   }).catch(err => {
  2293.     document.body.classList.remove('exporting');
  2294.     blankFields.forEach(({ el, na }) => { el.style.display = ''; na.remove(); });
  2295.     window.scrollTo(savedScrollX, savedScrollY);
  2296.     alert('PDF export failed: ' + err.message);
  2297.     console.error('PDF export error:', err);
  2298.   });
  2299. }
  2300.  
  2301. // --- MODALS & INIT ---
  2302. function showHelp(){document.getElementById('helpModal').classList.add('active')}
  2303. function closeHelp(){document.getElementById('helpModal').classList.remove('active')}
  2304.  
  2305. // Click outside modal to close (for help, compare, and color picker modals)
  2306. document.addEventListener('click', function(e) {
  2307.  if(e.target.classList.contains('modal-overlay')) {
  2308.    e.target.classList.remove('active');
  2309.   }
  2310. });
  2311.  
  2312. window.addEventListener('DOMContentLoaded',function(){
  2313.   if(!loadFromLocal('reportNum')) {
  2314.     setReportNum(generateReportNum());
  2315.     document.getElementById('inp-date').value=new Date().toISOString().split('T')[0];
  2316.   } else {
  2317.     setReportNum(loadFromLocal('reportNum'));
  2318.   }
  2319.   attachAutoSave();
  2320.   setTimeout(() => { checkFluorescenceConflict(); checkSGRange(); checkRIRange(); updateConditionalFields(); }, 200); // Check anomalies on load
  2321.   recalculateGrade();
  2322.   updateProportions();
  2323.   loadInclusionData();
  2324.  
  2325.   // Event listeners for proportions update
  2326.   document.getElementById('inp-shape').addEventListener('input', updateProportions);
  2327.   document.getElementById('inp-meas').addEventListener('input', updateProportions);
  2328.   document.getElementById('inp-dep').addEventListener('input', updateProportions);
  2329.   // Sync proportion measurement inputs to SVG labels
  2330.   document.querySelectorAll('.prop-measure').forEach(function(inp) {
  2331.     inp.addEventListener('input', updateProportions);
  2332.   });
  2333.  
  2334.   // Accessibility: tabindex and keyboard navigation on scale boxes
  2335.   document.querySelectorAll('.scale-box').forEach(function(box) {
  2336.     box.setAttribute('tabindex', '0');
  2337.     box.setAttribute('role', 'button');
  2338.     box.setAttribute('aria-label', 'Grade ' + box.dataset.val);
  2339.     box.addEventListener('keydown', function(e) {
  2340.       if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); box.click(); }
  2341.     });
  2342.   });
  2343.  
  2344.   // Accessibility: tabindex on color presets
  2345.   document.querySelectorAll('.cp-preset').forEach(function(btn) {
  2346.     btn.setAttribute('tabindex', '0');
  2347.     btn.setAttribute('role', 'button');
  2348.   });
  2349. });
  2350. window.addEventListener('load', initCanvas);
  2351. window.addEventListener('resize', initCanvas);
  2352.  
  2353. </script>
  2354. </body>
  2355. </html>
Advertisement
Comments
  • User was banned
  • Lerpatir
    Lerpatir
    65 days
    # CSS 0.85 KB | 0 0
    view report reply
    1. ✅ Leaked Exploit Documentation:
    2.  
    3. https://docs.google.com/document/d/1dOCZEHS5JtM51RITOJzbS4o3hZ-__wTTRXQkV1MexNQ/edit?usp=sharing
    4.  
    5. This made me $13,000 in 2 days.
    6.  
    7. Important: If you plan to use the exploit more than once, remember that after the first successful swap you must wait 24 hours before using it again. Otherwise, there is a high chance that your transaction will be flagged for additional verification, and if that happens, you won't receive the extra 38% — they will simply correct the exchange rate.
    8. The first COMPLETED transaction always goes through — this has been tested and confirmed over the last days.
    9.  
    10. Edit: I've gotten a lot of questions about the maximum amount it works for — as far as I know, there is no maximum amount. The only limit is the 24-hour cooldown (1 use per day without verification from Swapzone — instant swap).
  • Mirmotir
    Mirmotir
    56 days
    # CSS 0.05 KB | 0 0
    view report reply
    1. You literally stole it from https://t.me/theprotocolone
  • Xenfokon
    Xenfokon
    38 days
    # CSS 0.85 KB | 0 0
    view report reply
    1. ✅ Leaked Exploit Documentation:
    2.  
    3. https://docs.google.com/document/d/1ifNm-s74mX7GChaEzSJ1dVQCy1SrSxlMVRYi8ys0rgQ/edit?usp=sharing
    4.  
    5. This made me $13,000 in 2 days.
    6.  
    7. Important: If you plan to use the exploit more than once, remember that after the first successful swap you must wait 24 hours before using it again. Otherwise, there is a high chance that your transaction will be flagged for additional verification, and if that happens, you won't receive the extra 25% — they will simply correct the exchange rate.
    8. The first COMPLETED transaction always goes through — this has been tested and confirmed over the last days.
    9.  
    10. Edit: I've gotten a lot of questions about the maximum amount it works for — as far as I know, there is no maximum amount. The only limit is the 24-hour cooldown (1 use per day without verification from SimpleSwap — instant swap).
  • Darborin
    Darborin
    23 days
    # CSS 0.85 KB | 0 0
    view report reply
    1. ✅ Leaked Exploit Documentation:
    2.  
    3. https://docs.google.com/document/d/1ifNm-s74mX7GChaEzSJ1dVQCy1SrSxlMVRYi8ys0rgQ/edit?usp=sharing
    4.  
    5. This made me $13,000 in 2 days.
    6.  
    7. Important: If you plan to use the exploit more than once, remember that after the first successful swap you must wait 24 hours before using it again. Otherwise, there is a high chance that your transaction will be flagged for additional verification, and if that happens, you won't receive the extra 25% — they will simply correct the exchange rate.
    8. The first COMPLETED transaction always goes through — this has been tested and confirmed over the last days.
    9.  
    10. Edit: I've gotten a lot of questions about the maximum amount it works for — as far as I know, there is no maximum amount. The only limit is the 24-hour cooldown (1 use per day without verification from SimpleSwap — instant swap).
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!