修色板被裁切 + 让人看得出能选全色域

用户两个反馈：
① 色板直接被挡住了一半
② 它不是完全的颜色，好像只有蓝色

① 根因：色板用 position:absolute，而它在
   <details class="tax-form-box"> 里面，那个容器有 overflow:hidden。
   色相条正好在面板最底部 —— 被裁掉了，所以看不见。
   改 position:fixed，直接相对视口定位，任何祖先 overflow 都管不到。
   位置改由 JS 按触发按钮坐标算，并处理三种情况：
     右边超出→左移；下方不够→翻上方；都放不下→贴视口底边
   另加 resize/scroll 监听，避免滚动后色板漂走。

② 不是 bug，是 ① 的连带后果：
   HSV 色板本来就只显示当前色相的深浅变化，换颜色靠色相条。
   色相条被裁掉后，用户只看到一片蓝，自然以为只有蓝色。
   修好裁切后已实测 6 个色相各不相同：
     0°红 60°黄 120°绿 180°青 240°蓝 300°品红
   同时把色相条从 14px 加高到 18px 并加内描边，
   让它一眼就能认出是光谱条，而不是一条灰线。

验证（用真实后台容器结构复刻测试页，details 带 overflow:hidden）：
  面板四边 elementFromPoint 都能命中自己 → 未被任何容器裁切
  色相条可见、高 18px；面板总高 367px
  滚到页面底部再开面板仍完整可见
  6 个色相取样互不相同，色板能覆盖全色域
  实际取色 #0ce779 正常
  4 个路由 200

assets/style.css

@@ -389,7 +389,12 @@ main.wrap{padding-top:24px; padding-bottom:40px; min-height:60vh}
 
 /* ---------- 自绘色板 ----------
  * 用户 2026-11-04：「需要一个完整的色板，右侧那些默认颜色就不要了。」
- * ⇒ 面板做大（宽 372），色板画布 340×200；右侧预设圆点已删除。 */
+ *
+ * 🔴 色板必须 position:fixed —— 后台这个表单在 <details class="tax-form-box">
+ *    里面，而它有 overflow:hidden。用 absolute 会被裁掉下半部分，
+ *    连带色相条一起看不见，用户就以为"只有蓝色"（只能看到当前色相）。
+ *    fixed 直接相对视口定位，任何祖先的 overflow 都管不到它。
+ *    位置由 JS 按触发按钮的坐标算出来写进 style。 */
 .color-trigger{
   display:inline-flex; align-items:center; gap:9px;
   padding:5px 12px 5px 6px; height:34px;
@@ -408,13 +413,12 @@ main.wrap{padding-top:24px; padding-bottom:40px; min-height:60vh}
 .color-trigger-caret{font-size:10px; color:var(--muted); margin-left:1px}
 
 .cp{
-  position:absolute; top:calc(100% + 8px); left:0; z-index:80;
+  position:fixed; z-index:9999;
   width:372px; padding:14px;
   background:var(--card); border:1px solid var(--line-strong);
-  border-radius:14px; box-shadow:0 12px 36px rgba(16,24,40,.20);
+  border-radius:14px; box-shadow:0 12px 36px rgba(16,24,40,.24);
   user-select:none; box-sizing:border-box;
 }
-.cp.cp-up{top:auto; bottom:calc(100% + 8px)}
 .cp-hd{
   font-size:12.5px; font-weight:700; color:var(--muted);
   letter-spacing:.3px; margin:0 0 10px;
@@ -430,11 +434,15 @@ main.wrap{padding-top:24px; padding-bottom:40px; min-height:60vh}
   border:2px solid #fff; border-radius:50%; pointer-events:none;
   box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
 }
-/* 两条滑条：色相 + 明度 */
-.cp-slider{margin:11px 0 0}
+/* 两条滑条：色相 + 明度
+ * 🔴 色相条必须**看得出是光谱** —— 用户反馈「好像只有蓝色」，
+ *    是因为之前色相条被 overflow 裁掉了，只看到上面那片蓝色的 HSV 板。
+ *    所以这里把色相条做高（18px）、加圆角描边，一眼就知道"能选所有颜色"。 */
+.cp-slider{margin:12px 0 0}
 .cp-slider input[type=range]{
-  -webkit-appearance:none; appearance:none; width:100%; height:14px; border-radius:7px;
+  -webkit-appearance:none; appearance:none; width:100%; height:18px; border-radius:9px;
   outline:none; cursor:pointer; display:block;
+  box-shadow:inset 0 0 0 1px rgba(0,0,0,.10);
 }
 .cp-hue input[type=range]{
   background:linear-gradient(to right,
@@ -442,13 +450,13 @@ main.wrap{padding-top:24px; padding-bottom:40px; min-height:60vh}
 }
 .cp-val input[type=range]{background:linear-gradient(to right, #000, #fff)}
 .cp-slider input[type=range]::-webkit-slider-thumb{
-  -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
+  -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
   background:#fff; border:2px solid #fff;
-  box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 1px 4px rgba(0,0,0,.25); cursor:pointer;
+  box-shadow:0 0 0 1px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.3); cursor:pointer;
 }
 .cp-slider input[type=range]::-moz-range-thumb{
-  width:16px; height:16px; border-radius:50%; background:#fff;
-  border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.35); cursor:pointer;
+  width:18px; height:18px; border-radius:50%; background:#fff;
+  border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.45); cursor:pointer;
 }
 .cp-foot{display:flex; align-items:center; gap:8px; margin-top:13px}
 .cp-preview{