@nice2dev/ui-audio 1.0.10 → 1.0.12

package/dist/index.mjs

@@ -138,16 +138,16 @@ const st = {
       return;
     const A = Q, R = a;
     if (W.width = A, W.height = R + z, w.clearRect(0, 0, A, R + z), p !== "transparent" && (w.fillStyle = p, w.fillRect(0, 0, A, R + z)), b) {
-      w.fillStyle = "rgba(128,128,128,0.15)", w.fillRect(0, 0, A, z), w.fillStyle = "#888", w.font = "10px monospace", w.textAlign = "center";
+      w.fillStyle = "rgba(128,128,128,0.15)", w.fillRect(0, 0, A, z), w.fillStyle = "var(--nice-text-secondary, #888)", w.font = "10px monospace", w.textAlign = "center";
       const P = Math.max(1, Math.floor(n / (Q / 80)));
       for (let M = 0; M <= n; M += P) {
         const I = M / n * A;
-        w.fillText(ui(M), I, z - 4), w.fillStyle = "rgba(128,128,128,0.3)", w.fillRect(I, z, 1, R), w.fillStyle = "#888";
+        w.fillText(ui(M), I, z - 4), w.fillStyle = "rgba(128,128,128,0.3)", w.fillRect(I, z, 1, R), w.fillStyle = "var(--nice-text-secondary, #888)";
       }
     }
     for (const P of c) {
       const M = P.start / n * A, I = P.end / n * A;
-      w.fillStyle = P.color ?? "rgba(99,102,241,0.15)", w.fillRect(M, z, I - M, R), P.label && (w.fillStyle = P.color ?? "#6366f1", w.font = "10px sans-serif", w.textAlign = "left", w.fillText(P.label, M + 2, z + 12));
+      w.fillStyle = P.color ?? "var(--nice-accent-tint-15, rgba(99, 102, 241, 0.15))", w.fillRect(M, z, I - M, R), P.label && (w.fillStyle = P.color ?? "var(--nice-info, #6366f1)", w.font = "10px sans-serif", w.textAlign = "left", w.fillText(P.label, M + 2, z + 12));
     }
     if (q !== null && $ !== null) {
       const P = Math.min(q, $), M = Math.max(q, $);
@@ -166,7 +166,7 @@ const st = {
           const re = Math.sqrt(ie / (se * 2));
           I = Math.max(I, re);
         }
-        h && x && P > 1 && (w.fillStyle = "rgba(255,255,255,0.6)", w.font = "bold 11px sans-serif", w.textAlign = "left", w.fillText(F === 0 ? "L" : F === 1 ? "R" : `Ch${F + 1}`, 4, te + 14));
+        h && x && P > 1 && (w.fillStyle = "var(--nice-overlay-light-60, rgba(255, 255, 255, 0.6))", w.font = "bold 11px sans-serif", w.textAlign = "left", w.fillText(F === 0 ? "L" : F === 1 ? "R" : `Ch${F + 1}`, 4, te + 14));
       }
       j(I);
     }
@@ -176,7 +176,7 @@ const st = {
     }
     for (const P of l) {
       const M = P.time / n * A;
-      w.beginPath(), w.strokeStyle = P.color ?? "#f59e0b", w.lineWidth = 2, w.setLineDash([4, 4]), w.moveTo(M, z), w.lineTo(M, R + z), w.stroke(), w.setLineDash([]), P.label && (w.fillStyle = P.color ?? "#f59e0b", w.font = "bold 10px sans-serif", w.textAlign = "center", w.fillText(P.label, M, z + R - 4));
+      w.beginPath(), w.strokeStyle = P.color ?? "var(--nice-warning, #f59e0b)", w.lineWidth = 2, w.setLineDash([4, 4]), w.moveTo(M, z), w.lineTo(M, R + z), w.stroke(), w.setLineDash([]), P.label && (w.fillStyle = P.color ?? "var(--nice-warning, #f59e0b)", w.font = "bold 10px sans-serif", w.textAlign = "center", w.fillText(P.label, M, z + R - 4));
     }
   }, [
     e,
@@ -271,7 +271,7 @@ const st = {
               top: z + 4,
               bottom: 4,
               width: 12,
-              background: "rgba(0,0,0,0.3)",
+              background: "var(--nice-overlay-30, rgba(0, 0, 0, 0.3))",
               borderRadius: 4,
               overflow: "hidden"
             },
@@ -283,7 +283,7 @@ const st = {
                   bottom: 0,
                   width: "100%",
                   height: `${Math.min(100, L * 300)}%`,
-                  background: L > 0.8 ? "#ef4444" : L > 0.5 ? "#f59e0b" : "#22c55e",
+                  background: L > 0.8 ? "var(--nice-danger, #ef4444)" : L > 0.5 ? "var(--nice-warning, #f59e0b)" : "var(--nice-success, #22c55e)",
                   borderRadius: 4,
                   transition: "height 50ms"
                 }
@@ -1038,15 +1038,15 @@ const cr = 140, rn = 24, Li = [
     if (!A)
       return;
     const R = w.width, P = w.height;
-    A.clearRect(0, 0, R, P), A.fillStyle = "#1a1a2e", A.fillRect(0, 0, R, P), A.strokeStyle = "rgba(255,255,255,0.06)", A.lineWidth = 1;
+    A.clearRect(0, 0, R, P), A.fillStyle = "var(--nice-bg, #1a1a2e)", A.fillRect(0, 0, R, P), A.strokeStyle = "var(--nice-overlay-light-6, rgba(255, 255, 255, 0.06))", A.lineWidth = 1;
     for (let F = 0; F <= 127; F += 16) {
       const H = L(F);
       A.beginPath(), A.moveTo(0, H), A.lineTo(R, H), A.stroke();
     }
-    A.fillStyle = "rgba(255,255,255,0.3)", A.font = "10px monospace", A.textBaseline = "middle";
+    A.fillStyle = "var(--nice-overlay-light-30, rgba(255, 255, 255, 0.3))", A.font = "10px monospace", A.textBaseline = "middle";
     for (const F of [0, 32, 64, 96, 127])
       A.fillText(String(F), 2, L(F));
-    A.strokeStyle = "rgba(255,255,255,0.04)";
+    A.strokeStyle = "var(--nice-overlay-light-4, rgba(255, 255, 255, 0.04))";
     for (let F = 0; F <= n; F++) {
       const H = D(F);
       A.beginPath(), A.moveTo(H, 0), A.lineTo(H, P), A.stroke();
@@ -1056,7 +1056,7 @@ const cr = 140, rn = 24, Li = [
       A.beginPath(), A.moveTo(D(M[0].time), P - rn);
       for (const F of M)
         A.lineTo(D(F.time), L(F.value));
-      A.lineTo(D(M[M.length - 1].time), P - rn), A.closePath(), A.fillStyle = "rgba(59, 130, 246, 0.15)", A.fill(), A.beginPath(), A.strokeStyle = "#3b82f6", A.lineWidth = 2;
+      A.lineTo(D(M[M.length - 1].time), P - rn), A.closePath(), A.fillStyle = "var(--nice-primary-tint-15, rgba(59, 130, 246, 0.15))", A.fill(), A.beginPath(), A.strokeStyle = "var(--nice-primary, #3b82f6)", A.lineWidth = 2;
       for (let F = 0; F < M.length; F++) {
         const H = D(M[F].time), te = L(M[F].value);
         F === 0 ? A.moveTo(H, te) : ((M[F].handleType ?? "linear") === "step" && A.lineTo(H, L(M[F - 1].value)), A.lineTo(H, te));
@@ -1064,10 +1064,10 @@ const cr = 140, rn = 24, Li = [
       A.stroke();
       for (const F of M) {
         const H = D(F.time), te = L(F.value), ne = y === F.id;
-        A.beginPath(), A.arc(H, te, ne ? 6 : 4, 0, Math.PI * 2), A.fillStyle = ne ? "#60a5fa" : "#3b82f6", A.fill(), A.strokeStyle = "#fff", A.lineWidth = 1.5, A.stroke();
+        A.beginPath(), A.arc(H, te, ne ? 6 : 4, 0, Math.PI * 2), A.fillStyle = ne ? "var(--nice-primary-light, #60a5fa)" : "var(--nice-primary, #3b82f6)", A.fill(), A.strokeStyle = "var(--nice-bg, #fff)", A.lineWidth = 1.5, A.stroke();
       }
     }
-    A.strokeStyle = "rgba(255,255,255,0.15)", A.lineWidth = 1, A.setLineDash([4, 4]);
+    A.strokeStyle = "var(--nice-overlay-light-15, rgba(255, 255, 255, 0.15))", A.lineWidth = 1, A.setLineDash([4, 4]);
     const I = L(0);
     A.beginPath(), A.moveTo(0, I), A.lineTo(R, I), A.stroke(), A.setLineDash([]);
   }, [N, n, q, D, L, y]);
@@ -1158,19 +1158,23 @@ const cr = 140, rn = 24, Li = [
     "div",
     {
       className: "card p-3 mb-3",
-      style: { background: "#0d1117", color: "#e6edf3", borderRadius: 8 },
+      style: {
+        background: "var(--nice-bg, #0d1117)",
+        color: "var(--nice-text, #e6edf3)",
+        borderRadius: 8
+      },
       children: [
         /* @__PURE__ */ v("div", { className: "d-flex align-items-center gap-2 mb-2 flex-wrap", children: [
-          /* @__PURE__ */ d("h6", { className: "mb-0", style: { color: "#58a6ff" }, children: u("ccLane.title", "CC Automation Lane") }),
+          /* @__PURE__ */ d("h6", { className: "mb-0", style: { color: "var(--nice-primary, #58a6ff)" }, children: u("ccLane.title", "CC Automation Lane") }),
           /* @__PURE__ */ d(
             "select",
             {
               className: "form-select form-select-sm",
               style: {
                 width: 160,
-                background: "#161b22",
-                color: "#e6edf3",
-                border: "1px solid #30363d"
+                background: "var(--nice-bg-secondary, #161b22)",
+                color: "var(--nice-text, #e6edf3)",
+                border: "1px solid var(--nice-border, #30363d)"
               },
               value: t,
               onChange: (w) => o(Number(w.target.value)),
@@ -1266,17 +1270,27 @@ const cr = 140, rn = 24, Li = [
               children: "Clear"
             }
           ),
-          /* @__PURE__ */ v("span", { style: { fontSize: 11, color: "#8b949e", marginLeft: "auto" }, children: [
-            N.length,
-            " ",
-            u("ccLane.events", "events")
-          ] })
+          /* @__PURE__ */ v(
+            "span",
+            {
+              style: { fontSize: 11, color: "var(--nice-text-muted, #8b949e)", marginLeft: "auto" },
+              children: [
+                N.length,
+                " ",
+                u("ccLane.events", "events")
+              ]
+            }
+          )
         ] }),
         g && /* @__PURE__ */ d(
           "div",
           {
             className: "mb-2 p-2",
-            style: { background: "#161b22", borderRadius: 6, border: "1px solid #30363d" },
+            style: {
+              background: "var(--nice-bg-secondary, #161b22)",
+              borderRadius: 6,
+              border: "1px solid var(--nice-border, #30363d)"
+            },
             children: /* @__PURE__ */ v("div", { className: "d-flex gap-2 flex-wrap align-items-center mb-2", children: [
               /* @__PURE__ */ v("label", { style: { fontSize: 12 }, children: [
                 "Wave:",
@@ -1287,9 +1301,9 @@ const cr = 140, rn = 24, Li = [
                     style: {
                       width: 110,
                       display: "inline-block",
-                      background: "#0d1117",
-                      color: "#e6edf3",
-                      border: "1px solid #30363d"
+                      background: "var(--nice-bg, #0d1117)",
+                      color: "var(--nice-text, #e6edf3)",
+                      border: "1px solid var(--nice-border, #30363d)"
                     },
                     value: C.waveform,
                     onChange: (w) => E((A) => ({ ...A, waveform: w.target.value })),
@@ -1309,9 +1323,9 @@ const cr = 140, rn = 24, Li = [
                     style: {
                       width: 70,
                       display: "inline-block",
-                      background: "#0d1117",
-                      color: "#e6edf3",
-                      border: "1px solid #30363d"
+                      background: "var(--nice-bg, #0d1117)",
+                      color: "var(--nice-text, #e6edf3)",
+                      border: "1px solid var(--nice-border, #30363d)"
                     },
                     min: 0.01,
                     max: 20,
@@ -1380,7 +1394,7 @@ const cr = 140, rn = 24, Li = [
             "aria-label": "CC automation lane editor canvas"
           }
         ) }),
-        /* @__PURE__ */ d("div", { style: { fontSize: 11, color: "#8b949e", marginTop: 4 }, children: u("ccLane.hint", "Click to draw. Double-click to add/remove points. Drag to draw curves.") })
+        /* @__PURE__ */ d("div", { style: { fontSize: 11, color: "var(--nice-text-muted, #8b949e)", marginTop: 4 }, children: u("ccLane.hint", "Click to draw. Double-click to add/remove points. Drag to draw curves.") })
       ]
     }
   );
@@ -1497,14 +1511,14 @@ const Nh = ({
     {
       className: "card p-3 mb-3",
       style: {
-        background: "#0d1117",
-        color: "#e6edf3",
+        background: "var(--nice-bg, #0d1117)",
+        color: "var(--nice-text, #e6edf3)",
         borderRadius: 8,
         opacity: n ? 1 : 0.6
       },
       children: [
         /* @__PURE__ */ v("div", { className: "d-flex align-items-center gap-2 mb-2", children: [
-          /* @__PURE__ */ d("h6", { className: "mb-0", style: { color: "#58a6ff" }, children: a("arp.title", "Arpeggiator") }),
+          /* @__PURE__ */ d("h6", { className: "mb-0", style: { color: "var(--nice-primary, #58a6ff)" }, children: a("arp.title", "Arpeggiator") }),
           /* @__PURE__ */ d(
             "button",
             {
@@ -1553,7 +1567,11 @@ const Nh = ({
               "select",
               {
                 className: "form-select form-select-sm",
-                style: { background: "#161b22", color: "#e6edf3", border: "1px solid #30363d" },
+                style: {
+                  background: "var(--nice-bg-secondary, #161b22)",
+                  color: "var(--nice-text, #e6edf3)",
+                  border: "1px solid var(--nice-border, #30363d)"
+                },
                 value: e.rate,
                 onChange: (l) => s({ rate: l.target.value }),
                 children: i.map((l) => /* @__PURE__ */ d("option", { value: l, children: l }, l))
@@ -1657,10 +1675,10 @@ const Nh = ({
     const c = l.getContext("2d");
     if (!c)
       return;
-    c.clearRect(0, 0, an, zt), c.fillStyle = "#161b22", c.fillRect(0, 0, an, zt), c.strokeStyle = "rgba(255,255,255,0.1)", c.lineWidth = 1, c.setLineDash([3, 3]), c.beginPath(), c.moveTo(0, zt / 2), c.lineTo(an, zt / 2), c.stroke(), c.setLineDash([]);
+    c.clearRect(0, 0, an, zt), c.fillStyle = "var(--nice-bg-secondary, #161b22)", c.fillRect(0, 0, an, zt), c.strokeStyle = "var(--nice-overlay-light-10, rgba(255, 255, 255, 0.1))", c.lineWidth = 1, c.setLineDash([3, 3]), c.beginPath(), c.moveTo(0, zt / 2), c.lineTo(an, zt / 2), c.stroke(), c.setLineDash([]);
     const u = Ei(e, an, zt);
     if (u.length > 0) {
-      c.beginPath(), c.strokeStyle = e.enabled ? "#3b82f6" : "#484f58", c.lineWidth = 1.5;
+      c.beginPath(), c.strokeStyle = e.enabled ? "var(--nice-primary, #3b82f6)" : "var(--nice-text-secondary, #484f58)", c.lineWidth = 1.5;
       for (let h = 0; h < u.length; h++) {
         const f = u[h].x, m = u[h].y;
         h === 0 ? c.moveTo(f, m) : c.lineTo(f, m);
@@ -1675,14 +1693,14 @@ const Nh = ({
     {
       className: "card p-2 mb-2",
       style: {
-        background: "#0d1117",
-        color: "#e6edf3",
+        background: "var(--nice-bg, #0d1117)",
+        color: "var(--nice-text, #e6edf3)",
         borderRadius: 8,
         opacity: e.enabled ? 1 : 0.5
       },
       children: [
         /* @__PURE__ */ v("div", { className: "d-flex align-items-center gap-2 mb-2", children: [
-          /* @__PURE__ */ v("h6", { className: "mb-0", style: { color: "#58a6ff", fontSize: 13 }, children: [
+          /* @__PURE__ */ v("h6", { className: "mb-0", style: { color: "var(--nice-primary, #58a6ff)", fontSize: 13 }, children: [
             a("lfo.title", "LFO"),
             " ",
             n !== void 0 ? `#${n + 1}` : ""
@@ -1723,7 +1741,11 @@ const Nh = ({
               ref: o,
               width: an,
               height: zt,
-              style: { borderRadius: 4, border: "1px solid #30363d", flexShrink: 0 },
+              style: {
+                borderRadius: 4,
+                border: "1px solid var(--nice-border, #30363d)",
+                flexShrink: 0
+              },
               role: "img",
               "aria-label": "LFO waveform preview canvas"
             }
@@ -1841,9 +1863,9 @@ const Nh = ({
                   className: "form-select form-select-sm",
                   style: {
                     width: 80,
-                    background: "#161b22",
-                    color: "#e6edf3",
-                    border: "1px solid #30363d",
+                    background: "var(--nice-bg-secondary, #161b22)",
+                    color: "var(--nice-text, #e6edf3)",
+                    border: "1px solid var(--nice-border, #30363d)",
                     fontSize: 11
                   },
                   value: e.syncDivision ?? "1/4",
@@ -1861,9 +1883,9 @@ const Nh = ({
                     style: {
                       width: 55,
                       display: "inline-block",
-                      background: "#161b22",
-                      color: "#e6edf3",
-                      border: "1px solid #30363d",
+                      background: "var(--nice-bg-secondary, #161b22)",
+                      color: "var(--nice-text, #e6edf3)",
+                      border: "1px solid var(--nice-border, #30363d)",
                       fontSize: 11
                     },
                     min: 0,
@@ -1898,10 +1920,14 @@ const Eh = ({
       "div",
       {
         className: "card p-3 mb-3",
-        style: { background: "#0d1117", color: "#e6edf3", borderRadius: 8 },
+        style: {
+          background: "var(--nice-bg, #0d1117)",
+          color: "var(--nice-text, #e6edf3)",
+          borderRadius: 8
+        },
         children: [
-          /* @__PURE__ */ d("h6", { className: "mb-0", style: { color: "#58a6ff" }, children: i("stepSeq.title", "Step Sequencer") }),
-          /* @__PURE__ */ d("small", { style: { color: "#8b949e" }, children: "Provide a `seq` prop (useStepSequencer) for live editing." })
+          /* @__PURE__ */ d("h6", { className: "mb-0", style: { color: "var(--nice-primary, #58a6ff)" }, children: i("stepSeq.title", "Step Sequencer") }),
+          /* @__PURE__ */ d("small", { style: { color: "var(--nice-text-muted, #8b949e)" }, children: "Provide a `seq` prop (useStepSequencer) for live editing." })
         ]
       }
     );
@@ -1910,10 +1936,14 @@ const Eh = ({
     "div",
     {
       className: "card p-3 mb-3",
-      style: { background: "#0d1117", color: "#e6edf3", borderRadius: 8 },
+      style: {
+        background: "var(--nice-bg, #0d1117)",
+        color: "var(--nice-text, #e6edf3)",
+        borderRadius: 8
+      },
       children: [
         /* @__PURE__ */ v("div", { className: "d-flex align-items-center gap-2 mb-2 flex-wrap", children: [
-          /* @__PURE__ */ d("h6", { className: "mb-0", style: { color: "#58a6ff" }, children: i("stepSeq.title", "Step Sequencer") }),
+          /* @__PURE__ */ d("h6", { className: "mb-0", style: { color: "var(--nice-primary, #58a6ff)" }, children: i("stepSeq.title", "Step Sequencer") }),
           /* @__PURE__ */ d(
             "button",
             {
@@ -1932,9 +1962,9 @@ const Eh = ({
                 className: "form-control form-control-sm",
                 style: {
                   width: 70,
-                  background: "#161b22",
-                  color: "#e6edf3",
-                  border: "1px solid #30363d"
+                  background: "var(--nice-bg-secondary, #161b22)",
+                  color: "var(--nice-text, #e6edf3)",
+                  border: "1px solid var(--nice-border, #30363d)"
                 },
                 min: 20,
                 max: 300,
@@ -2013,7 +2043,16 @@ const Eh = ({
                 minWidth: 34
               },
               children: [
-                /* @__PURE__ */ d("span", { style: { fontSize: 9, color: b ? "#8b949e" : "#30363d" }, children: f + 1 }),
+                /* @__PURE__ */ d(
+                  "span",
+                  {
+                    style: {
+                      fontSize: 9,
+                      color: b ? "var(--nice-text-muted, #8b949e)" : "var(--nice-border, #30363d)"
+                    },
+                    children: f + 1
+                  }
+                ),
                 /* @__PURE__ */ d(
                   "button",
                   {
@@ -2022,11 +2061,11 @@ const Eh = ({
                       width: 32,
                       height: 32,
                       borderRadius: 4,
-                      border: p ? "2px solid #f0c040" : "1px solid #30363d",
-                      background: m ? `hsl(${210 + h.velocity / 127 * 40}, 80%, ${35 + h.velocity / 127 * 20}%)` : b ? "#21262d" : "#161b22",
+                      border: p ? "2px solid var(--nice-warning, #f0c040)" : "1px solid var(--nice-border, #30363d)",
+                      background: m ? `hsl(${210 + h.velocity / 127 * 40}, 80%, ${35 + h.velocity / 127 * 20}%)` : b ? "#21262d" : "var(--nice-bg-secondary, #161b22)",
                       cursor: "pointer",
                       padding: 0,
-                      color: m ? "#fff" : "#484f58",
+                      color: m ? "var(--nice-bg, #fff)" : "var(--nice-text-secondary, #484f58)",
                       fontSize: 8,
                       fontWeight: 600,
                       transition: "background 0.1s"
@@ -2040,7 +2079,7 @@ const Eh = ({
                     style: {
                       width: 32,
                       height: 20,
-                      background: "#161b22",
+                      background: "var(--nice-bg-secondary, #161b22)",
                       borderRadius: 2,
                       position: "relative",
                       overflow: "hidden"
@@ -2054,7 +2093,7 @@ const Eh = ({
                           left: 0,
                           width: "100%",
                           height: `${h.velocity / 127 * 100}%`,
-                          background: m ? "rgba(59, 130, 246, 0.6)" : "rgba(59, 130, 246, 0.15)",
+                          background: m ? "var(--nice-primary-tint-60, rgba(59, 130, 246, 0.6))" : "var(--nice-primary-tint-15, rgba(59, 130, 246, 0.15))",
                           borderRadius: 2,
                           cursor: "ns-resize"
                         },
@@ -2075,7 +2114,7 @@ const Eh = ({
                     )
                   }
                 ),
-                m && h.probability < 1 && /* @__PURE__ */ v("span", { style: { fontSize: 8, color: "#f0c040" }, children: [
+                m && h.probability < 1 && /* @__PURE__ */ v("span", { style: { fontSize: 8, color: "var(--nice-warning, #f0c040)" }, children: [
                   Math.round(h.probability * 100),
                   "%"
                 ] })
@@ -2084,11 +2123,11 @@ const Eh = ({
             f
           );
         }) }) }),
-        /* @__PURE__ */ d("div", { style: { fontSize: 11, color: "#8b949e", marginTop: 6 }, children: i("stepSeq.hint", "Click steps to toggle. Drag velocity bars vertically.") })
+        /* @__PURE__ */ d("div", { style: { fontSize: 11, color: "var(--nice-text-muted, #8b949e)", marginTop: 6 }, children: i("stepSeq.hint", "Click steps to toggle. Drag velocity bars vertically.") })
       ]
     }
   );
-}, Vi = "_panelNarrow_se2i3_3", Ui = "_panelWide_se2i3_9", qi = "_smallLabel_se2i3_19", Hi = "_noteText_se2i3_29", ji = "_buttonRow_se2i3_41", Ki = "_noteTextMargin_se2i3_49", Yi = "_rangeW100_se2i3_63", Zi = "_zoomValue_se2i3_69", Xi = "_selectW100_se2i3_77", Qi = "_inputW70_se2i3_83", Ji = "_masterVolGroup_se2i3_93", es = "_rangeW140_se2i3_99", ts = "_volumeValue_se2i3_105", ns = "_selectW140_se2i3_115", rs = "_freqGroup_se2i3_121", as = "_freqValue_se2i3_127", os = "_narrowGroup_se2i3_137", is = "_rangeW120_se2i3_143", ss = "_smallValue_se2i3_149", ls = "_presetDivider_se2i3_159", cs = "_presetLabel_se2i3_165", ds = "_presetBtn_se2i3_175", us = "_deletePresetSelect_se2i3_183", hs = "_presetNameInput_se2i3_191", ps = "_savePresetBtn_se2i3_199", fs = "_countInAlert_se2i3_211", ms = "_inputW80_se2i3_219", gs = "_levelLabel_se2i3_225", ys = "_levelMeter_se2i3_233", bs = "_levelBar_se2i3_249", be = {
+}, Vi = "_panelNarrow_42xt3_3", Ui = "_panelWide_42xt3_9", qi = "_smallLabel_42xt3_19", Hi = "_noteText_42xt3_29", ji = "_buttonRow_42xt3_41", Ki = "_noteTextMargin_42xt3_49", Yi = "_rangeW100_42xt3_63", Zi = "_zoomValue_42xt3_69", Xi = "_selectW100_42xt3_77", Qi = "_inputW70_42xt3_83", Ji = "_masterVolGroup_42xt3_93", es = "_rangeW140_42xt3_99", ts = "_volumeValue_42xt3_105", ns = "_selectW140_42xt3_115", rs = "_freqGroup_42xt3_121", as = "_freqValue_42xt3_127", os = "_narrowGroup_42xt3_137", is = "_rangeW120_42xt3_143", ss = "_smallValue_42xt3_149", ls = "_presetDivider_42xt3_159", cs = "_presetLabel_42xt3_165", ds = "_presetBtn_42xt3_175", us = "_deletePresetSelect_42xt3_183", hs = "_presetNameInput_42xt3_191", ps = "_savePresetBtn_42xt3_199", fs = "_countInAlert_42xt3_211", ms = "_inputW80_42xt3_219", gs = "_levelLabel_42xt3_225", ys = "_levelMeter_42xt3_233", bs = "_levelBar_42xt3_249", be = {
   panelNarrow: Vi,
   panelWide: Ui,
   smallLabel: qi,
@@ -2570,7 +2609,7 @@ const Eh = ({
         className: be.levelBar,
         style: {
           width: `${Math.min(1, u * 2) * 100}%`,
-          background: u > 0.7 ? "#f44336" : "#4caf50"
+          background: u > 0.7 ? "var(--nice-danger, #f44336)" : "var(--nice-success, #4caf50)"
         }
       }
     ) })
@@ -3368,8 +3407,8 @@ const Kt = (e, t) => t && t > 0 ? e * 15 / t : e / 10, Ur = (e) => {
 function Cr(e, t, ...n) {
   (Rs || typeof window < "u" && window.DEBUG_KARAOKE) && console.log(
     `%c[KARAOKE-DEBUG]%c [${e}] ${t}`,
-    "background:#6c3483;color:#fff;padding:1px 4px;border-radius:3px;font-weight:bold",
-    "color:#6c3483;font-weight:bold",
+    "background:var(--nice-accent-dark, #6c3483);color:var(--nice-bg, #FFF);padding: var(--nice-space-px, 1px) var(--nice-space-1, 4px);border-radius:var(--nice-radius-sm, 3px);font-weight:bold",
+    "color:var(--nice-accent-dark, #6c3483);font-weight:bold",
     ...n
   );
 }
@@ -4150,7 +4189,7 @@ ${P}
 ${H}
 <linearGradient id="${y}b" x1="0" y1="0" x2="0" y2="${n}" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="rgba(255,255,255,.55)"/><stop offset=".3" stop-color="rgba(255,255,255,.35)"/><stop offset="1" stop-color="rgba(255,255,255,.08)"/></linearGradient>
 <linearGradient id="${y}f" x1="0" y1="${L}" x2="0" y2="${j}" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="${T}"/><stop offset=".5" stop-color="${E}"/><stop offset="1" stop-color="${C}"/></linearGradient>
-<linearGradient id="${y}h" x1="0" y1="${L}" x2="0" y2="${Q}" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff" stop-opacity="${U}"/><stop offset=".5" stop-color="#fff" stop-opacity="${U * 0.25}"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient>
+<linearGradient id="${y}h" x1="0" y1="${L}" x2="0" y2="${Q}" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="var(--nice-bg, #fff)" stop-opacity="${U}"/><stop offset=".5" stop-color="var(--nice-bg, #fff)" stop-opacity="${U * 0.25}"/><stop offset="1" stop-color="var(--nice-bg, #fff)" stop-opacity="0"/></linearGradient>
 <linearGradient id="${y}g" x1="0" y1="${z}" x2="0" y2="${j}" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="${_}" stop-opacity="0"/><stop offset=".6" stop-color="${_}" stop-opacity="${$ * 0.6}"/><stop offset="1" stop-color="${_}" stop-opacity="${$}"/></linearGradient>
 <clipPath id="${y}c"><path d="${w}"/><path d="${A}"/><path d="${R}"/></clipPath>
 </defs>
@@ -4226,7 +4265,7 @@ function In(e, t, n, r, a, o, i, s = 70, l = 55, c = 0, u, h, f = !1, m, p) {
   const T = `hsl(${b},${Math.min(x + 10, 100)}%,${Math.max(y - 22, 4)}%)`, _ = `hsl(${b},${x}%,${y}%)`, N = `hsl(${b},${Math.max(x - 12, 0)}%,${Math.min(y + 18, 88)}%)`, q = `hsl(${b},${Math.min(x + 20, 100)}%,${Math.min(y + 30, 93)}%)`, U = s / 100 * 0.78, $ = l / 100 * 0.65, D = 1 - c / 100 * 0.87, L = je, j = a - je, Q = j - L, z = L + Q * 0.44, J = L + Q * 0.58;
   e.save(), e.translate(t, n);
   const K = e.createLinearGradient(0, 0, 0, a);
-  K.addColorStop(0, "rgba(255,255,255,0.55)"), K.addColorStop(0.3, "rgba(255,255,255,0.35)"), K.addColorStop(1, "rgba(255,255,255,0.08)"), e.fillStyle = K, e.beginPath(), Xe(e, S.out), e.fill(), e.fillRect(C, 0, k, a), e.beginPath(), Xe(e, ot(g.out, E)), e.fill();
+  K.addColorStop(0, "rgba(255,255,255,0.55)"), K.addColorStop(0.3, "rgba(255,255,255,0.35)"), K.addColorStop(1, "var(--nice-overlay-light-8, rgba(255, 255, 255, 0.08))"), e.fillStyle = K, e.beginPath(), Xe(e, S.out), e.fill(), e.fillRect(C, 0, k, a), e.beginPath(), Xe(e, ot(g.out, E)), e.fill();
   const oe = e.createLinearGradient(0, L, 0, j);
   oe.addColorStop(0, N), oe.addColorStop(0.5, _), oe.addColorStop(1, T), e.globalAlpha = D, e.fillStyle = oe, e.beginPath(), Xe(e, S.inn), e.fill(), e.fillRect(C, je, k, a - 2 * je), e.beginPath(), Xe(e, ot(g.inn, E)), e.fill(), e.globalAlpha = 1, m && (e.save(), e.beginPath(), Xe(e, S.inn), e.rect(C, je, k, a - 2 * je), Xe(e, ot(g.inn, E)), e.clip(), e.globalAlpha = D * 0.9, e.fillStyle = m, e.fillRect(0, 0, r, a), e.globalAlpha = 1, e.restore()), p && (e.save(), e.beginPath(), Xe(e, S.inn), e.rect(C, je, k, a - 2 * je), Xe(e, ot(g.inn, E)), e.clip(), e.globalAlpha = D * 0.85, e.fillStyle = p, e.fillRect(0, 0, r, a), e.globalAlpha = 1, e.restore()), e.save(), e.beginPath(), Xe(e, S.inn), e.rect(C, je, k, a - 2 * je), Xe(e, ot(g.inn, E)), e.clip();
   const W = e.createLinearGradient(0, J, 0, j);
@@ -4238,11 +4277,11 @@ function Js(e) {
   const { ctx: t, ballX: n, height: r, playerColor: a, currentTime: o } = e;
   t.save(), t.globalCompositeOperation = "source-over";
   const i = t.createLinearGradient(Math.max(0, n - 60), 0, n, 0);
-  i.addColorStop(0, "rgba(0,0,0,0)"), i.addColorStop(1, a), t.globalAlpha = 0.18, t.fillStyle = i, t.fillRect(Math.max(0, n - 60), 0, 60, r), t.globalAlpha = 0.9, t.strokeStyle = a, t.lineWidth = 3, t.shadowColor = a, t.shadowBlur = 12, t.beginPath(), t.moveTo(n, 0), t.lineTo(n, r), t.stroke();
+  i.addColorStop(0, "transparent"), i.addColorStop(1, a), t.globalAlpha = 0.18, t.fillStyle = i, t.fillRect(Math.max(0, n - 60), 0, 60, r), t.globalAlpha = 0.9, t.strokeStyle = a, t.lineWidth = 3, t.shadowColor = a, t.shadowBlur = 12, t.beginPath(), t.moveTo(n, 0), t.lineTo(n, r), t.stroke();
   const s = 6 + Math.sin(o * 6) * 2;
-  t.fillStyle = e.ballIsGold ? "#FFD700" : a, t.beginPath(), t.moveTo(n, e.ballY - s), t.lineTo(n + s * 0.7, e.ballY), t.lineTo(n, e.ballY + s), t.lineTo(n - s * 0.7, e.ballY), t.closePath(), t.fill(), t.restore(), t.save(), t.globalCompositeOperation = "source-atop", t.globalAlpha = 0.35;
+  t.fillStyle = e.ballIsGold ? "var(--nice-warning, #FFD700)" : a, t.beginPath(), t.moveTo(n, e.ballY - s), t.lineTo(n + s * 0.7, e.ballY), t.lineTo(n, e.ballY + s), t.lineTo(n - s * 0.7, e.ballY), t.closePath(), t.fill(), t.restore(), t.save(), t.globalCompositeOperation = "source-atop", t.globalAlpha = 0.35;
   for (const l of e.visibleNotes)
-    l.isSung && (t.fillStyle = l.isGold ? "#FFD700" : a, t.fillRect(l.x, l.y, l.w, l.h));
+    l.isSung && (t.fillStyle = l.isGold ? "var(--nice-warning, #FFD700)" : a, t.fillRect(l.x, l.y, l.w, l.h));
   t.restore();
 }
 function el(e) {
@@ -4250,22 +4289,22 @@ function el(e) {
   t.save();
   for (let f = 0; f < l; f++) {
     const m = (u + f * 2.1) % (Math.PI * 2), p = Math.sin(m) * 0.5 + 0.5, b = c + p * a * 3, x = (1 - p) * 0.5;
-    t.globalAlpha = x, t.strokeStyle = i ? "#FFD700" : o, t.lineWidth = 2 - p, t.beginPath(), t.arc(n, r, b, 0, Math.PI * 2), t.stroke();
+    t.globalAlpha = x, t.strokeStyle = i ? "var(--nice-warning, #FFD700)" : o, t.lineWidth = 2 - p, t.beginPath(), t.arc(n, r, b, 0, Math.PI * 2), t.stroke();
   }
-  t.globalAlpha = 0.8, t.shadowColor = i ? "#FFD700" : o, t.shadowBlur = 16 + Math.sin(s * 8) * 4, t.fillStyle = i ? "#FFF0A8" : o;
+  t.globalAlpha = 0.8, t.shadowColor = i ? "var(--nice-warning, #FFD700)" : o, t.shadowBlur = 16 + Math.sin(s * 8) * 4, t.fillStyle = i ? "var(--nice-warning-bg, #fff0a8)" : o;
   const h = a * (0.8 + Math.sin(s * 10) * 0.2);
   t.beginPath(), t.arc(n, r, h, 0, Math.PI * 2), t.fill();
   for (const f of e.visibleNotes) {
     if (!f.isSung)
       continue;
     const m = (s * 6 + f.x * 0.01) % (Math.PI * 2), p = 0.15 + Math.sin(m) * 0.1;
-    t.globalAlpha = p, t.fillStyle = f.isGold ? "#FFD700" : o, t.fillRect(f.x, f.y, f.w, f.h);
+    t.globalAlpha = p, t.fillStyle = f.isGold ? "var(--nice-warning, #FFD700)" : o, t.fillRect(f.x, f.y, f.w, f.h);
   }
   t.restore();
 }
 function tl(e) {
   const { ctx: t, ballX: n, ballY: r, ballRadius: a, playerColor: o, ballIsGold: i, currentTime: s } = e, l = 20 + Math.abs(Math.sin(s * 3)) * 15, c = s * 5 % (Math.PI * 2), u = -Math.abs(Math.sin(c)) * l, h = r + u;
-  t.save(), t.globalAlpha = 0.3, t.fillStyle = "rgba(0,0,0,0.5)";
+  t.save(), t.globalAlpha = 0.3, t.fillStyle = "var(--nice-overlay-50, rgba(0, 0, 0, 0.5))";
   const f = 1 - Math.abs(u) / (l + 20);
   t.beginPath(), t.ellipse(
     n,
@@ -4283,8 +4322,8 @@ function tl(e) {
   }
   t.restore(), t.save();
   const p = 1 + Math.abs(Math.sin(c)) * 0.15, b = 1 / p;
-  if (t.translate(n, h), t.scale(b, p), t.shadowColor = i ? "#FFD700" : o, t.shadowBlur = 12, t.fillStyle = i ? "#FFF0A8" : o, t.beginPath(), t.arc(0, 0, a, 0, Math.PI * 2), t.fill(), t.lineWidth = 1.5, t.strokeStyle = "rgba(0,0,0,0.35)", t.stroke(), t.restore(), Math.abs(Math.sin(c)) < 0.1) {
-    t.save(), t.globalAlpha = 0.6, t.fillStyle = i ? "#FFD700" : o;
+  if (t.translate(n, h), t.scale(b, p), t.shadowColor = i ? "var(--nice-warning, #FFD700)" : o, t.shadowBlur = 12, t.fillStyle = i ? "var(--nice-warning-bg, #fff0a8)" : o, t.beginPath(), t.arc(0, 0, a, 0, Math.PI * 2), t.fill(), t.lineWidth = 1.5, t.strokeStyle = "var(--nice-overlay-35, rgba(0, 0, 0, 0.35))", t.stroke(), t.restore(), Math.abs(Math.sin(c)) < 0.1) {
+    t.save(), t.globalAlpha = 0.6, t.fillStyle = i ? "var(--nice-warning, #FFD700)" : o;
     for (let x = 0; x < 4; x++) {
       const y = x / 4 * Math.PI * 2 + s, S = n + Math.cos(y) * (a + 4), g = r + Math.sin(y) * 2;
       t.beginPath(), t.arc(S, g, 2, 0, Math.PI * 2), t.fill();
@@ -4312,7 +4351,7 @@ const rl = 1e3, al = 20, ol = 70, il = 5, ga = 26, ya = "rgba(255,215,70,0.98)",
 <radialGradient id='g${o}' cx='50%' cy='40%' r='60%'>
 <stop offset='0%' stop-color='hsl(${e} ${t}% ${n}%)' stop-opacity='1'/>
 <stop offset='60%' stop-color='hsl(${e} ${Math.max(10, t - 30)}% ${Math.min(90, n + 10)}%)' stop-opacity='0.9'/>
-<stop offset='100%' stop-color='rgba(0,0,0,0)' stop-opacity='0'/>
+<stop offset='100%' stop-color='transparent' stop-opacity='0'/>
 </radialGradient>
 </defs>
 <g transform='translate(${r / 2}, ${r / 2})'>
@@ -4350,7 +4389,7 @@ function En(e) {
     const t = $r(e), [n, r, a] = Ds(t), o = (i) => i.toString(16).padStart(2, "0");
     return `#${o(n)}${o(r)}${o(a)}`.toLowerCase();
   } catch {
-    return "#ffcc00";
+    return "var(--nice-warning, #ffcc00)";
   }
 }
 function ul(e, t, n, r, a, o) {
@@ -4433,22 +4472,22 @@ const Sa = (e, t, n, r, a, o, i, s, l, c, u, h, f, m, p, b, x, y, S, g, k, C, E,
   const _ = T ?? null, N = (_ == null ? void 0 : _.filledBar) ?? tn, q = (_ == null ? void 0 : _.emptyBar) ?? qr, U = (_ == null ? void 0 : _.goldFilledBar) ?? jr, $ = (_ == null ? void 0 : _.goldEmptyBar) ?? Hr, D = (_ == null ? void 0 : _.font) ?? Kr, L = An(N.capStyleName), j = An(q.capStyleName), Q = An(U.capStyleName), z = An($.capStyleName), J = N.patternName ? Nn(N.patternName) : null, K = q.patternName ? Nn(q.patternName) : null, oe = U.patternName ? Nn(U.patternName) : null, W = $.patternName ? Nn($.patternName) : null, B = J ? Dn(
     e,
     J,
-    N.patternColor ?? N.color ?? "#ffffff",
+    N.patternColor ?? N.color ?? "var(--nice-bg, #fff)",
     N.patternColor
   ) : null, w = K ? Dn(
     e,
     K,
-    q.patternColor ?? q.color ?? "#d1d5db",
+    q.patternColor ?? q.color ?? "var(--nice-border, #d1d5db)",
     q.patternColor
   ) : null, A = oe ? Dn(
     e,
     oe,
-    U.patternColor ?? "#FFD700",
+    U.patternColor ?? "var(--nice-warning, #FFD700)",
     U.patternColor
   ) : null, R = W ? Dn(
     e,
     W,
-    $.patternColor ?? "#FFD700",
+    $.patternColor ?? "var(--nice-warning, #FFD700)",
     $.patternColor
   ) : null;
   wa !== o && (wa = o, Cr(
@@ -4465,7 +4504,7 @@ const Sa = (e, t, n, r, a, o, i, s, l, c, u, h, f, m, p, b, x, y, S, g, k, C, E,
       goldEmptyOverlay: !!R
     }
   ));
-  const P = N.textureUrl ? Ln(e, N.textureUrl, N.textureScale) : null, M = q.textureUrl ? Ln(e, q.textureUrl, q.textureScale) : null, I = U.textureUrl ? Ln(e, U.textureUrl, U.textureScale) : null, F = $.textureUrl ? Ln(e, $.textureUrl, $.textureScale) : null, H = typeof document < "u" ? $r(s || "var(--accent-primary, #ffcc00)") : s || "var(--accent-primary, #ffcc00)", te = En(H || "#ffcc00"), ne = (de) => $r(de), se = D.fontFamily || "Arial", ie = D.fontSize || 18, re = ne(D.fontColor || "var(--btn-text, #fff)"), O = D.outlineColor ? ne(D.outlineColor) : null, Y = typeof D.outlineWidth == "number" ? D.outlineWidth : 0, le = D.shadow || null;
+  const P = N.textureUrl ? Ln(e, N.textureUrl, N.textureScale) : null, M = q.textureUrl ? Ln(e, q.textureUrl, q.textureScale) : null, I = U.textureUrl ? Ln(e, U.textureUrl, U.textureScale) : null, F = $.textureUrl ? Ln(e, $.textureUrl, $.textureScale) : null, H = typeof document < "u" ? $r(s || "var(--accent-primary, #ffcc00)") : s || "var(--accent-primary, #ffcc00)", te = En(H || "var(--nice-warning, #ffcc00)"), ne = (de) => $r(de), se = D.fontFamily || "Arial", ie = D.fontSize || 18, re = ne(D.fontColor || "var(--btn-text, #fff)"), O = D.outlineColor ? ne(D.outlineColor) : null, Y = typeof D.outlineWidth == "number" ? D.outlineWidth : 0, le = D.shadow || null;
   typeof document < "u" && ((!bt || bt.width !== t || bt.height !== n) && (bt = document.createElement("canvas"), bt.width = t, bt.height = n, Je = bt.getContext("2d")), Je && Je.clearRect(0, 0, t, n), (!ct || ct.width !== t || ct.height !== n) && (ct = document.createElement("canvas"), ct.width = t, ct.height = n, Tt = ct.getContext("2d")), Tt && Tt.clearRect(0, 0, t, n), (!pt || pt.width !== t || pt.height !== n) && (pt = document.createElement("canvas"), pt.width = t, pt.height = n, Oe = pt.getContext("2d")), Oe && Oe.clearRect(0, 0, t, n));
   const he = S ? -S : 0, ye = g || t;
   e.fillStyle = H, e.font = `bold ${ie}px ${se}`;
@@ -4515,7 +4554,7 @@ const Sa = (e, t, n, r, a, o, i, s, l, c, u, h, f, m, p, b, x, y, S, g, k, C, E,
         };
         e.save(), e.globalAlpha = Me, e.font = `bold ${Math.round(ie * 1.2)}px ${se}`;
         const xe = de.label, Re = e.measureText(xe).width, Ie = he + ye / 2 - Re / 2;
-        e.fillStyle = ve[xe] || re, e.shadowColor = "rgba(0,0,0,0.5)", e.shadowBlur = 6, e.fillText(xe, Ie, 58), O && Y > 0 && (e.lineWidth = Y, e.strokeStyle = O, e.strokeText(xe, Ie, 58)), e.restore();
+        e.fillStyle = ve[xe] || re, e.shadowColor = "var(--nice-overlay-50, rgba(0, 0, 0, 0.5))", e.shadowBlur = 6, e.fillText(xe, Ie, 58), O && Y > 0 && (e.lineWidth = Y, e.strokeStyle = O, e.strokeText(xe, Ie, 58)), e.restore();
       }
     }
   }
@@ -4617,7 +4656,7 @@ const Sa = (e, t, n, r, a, o, i, s, l, c, u, h, f, m, p, b, x, y, S, g, k, C, E,
             At,
             $e,
             Q,
-            U.color ?? "#FFD700",
+            U.color ?? "var(--nice-warning, #FFD700)",
             U.highlight,
             U.glow,
             U.glass,
@@ -4667,7 +4706,7 @@ const Sa = (e, t, n, r, a, o, i, s, l, c, u, h, f, m, p, b, x, y, S, g, k, C, E,
           );
         }), de.restore());
       }
-      Tt && (Tt.fillStyle = "#ffffff", Tt.fillRect(Pe, Ue, Ee, $e));
+      Tt && (Tt.fillStyle = "var(--nice-bg, #fff)", Tt.fillRect(Pe, Ue, Ee, $e));
     });
   };
   if (r.forEach((de) => {
@@ -4713,7 +4752,7 @@ const Sa = (e, t, n, r, a, o, i, s, l, c, u, h, f, m, p, b, x, y, S, g, k, C, E,
   })) {
     bt && e.drawImage(bt, 0, 0), pt && e.drawImage(pt, 0, 0), e.save(), e.globalCompositeOperation = "source-over", e.globalAlpha = 0.28;
     const de = Math.max(18, pe * 5), ge = e.createRadialGradient(nt, Ye, 0, nt, Ye, de);
-    if (ge.addColorStop(0, gt), ge.addColorStop(1, "rgba(0,0,0,0)"), e.fillStyle = ge, e.beginPath(), e.arc(nt, Ye, de, 0, Math.PI * 2), e.fill(), e.restore(), m && Je && ct && (Je.save(), Je.globalCompositeOperation = "source-over", Je.globalAlpha = 0.95, Je.fillStyle = gt, Je.beginPath(), Je.arc(nt, Ye, pe + 4, 0, Math.PI * 2), Je.fill(), Je.restore(), Je.save(), Je.globalCompositeOperation = "destination-in", Je.drawImage(ct, 0, 0), Je.restore(), e.drawImage(bt, 0, 0)), m && Oe && ct)
+    if (ge.addColorStop(0, gt), ge.addColorStop(1, "transparent"), e.fillStyle = ge, e.beginPath(), e.arc(nt, Ye, de, 0, Math.PI * 2), e.fill(), e.restore(), m && Je && ct && (Je.save(), Je.globalCompositeOperation = "source-over", Je.globalAlpha = 0.95, Je.fillStyle = gt, Je.beginPath(), Je.arc(nt, Ye, pe + 4, 0, Math.PI * 2), Je.fill(), Je.restore(), Je.save(), Je.globalCompositeOperation = "destination-in", Je.drawImage(ct, 0, 0), Je.restore(), e.drawImage(bt, 0, 0)), m && Oe && ct)
       try {
         const ve = En(gt), { h: xe, s: Re, l: Ie } = cl(ve), Se = dl(xe, Math.max(10, Math.round(Re * (typeof u == "number" ? u : 0.25))), Ie, 0.85);
         Oe.save(), Oe.globalCompositeOperation = "multiply", Oe.globalAlpha = 0.65, Oe.fillStyle = Se, Oe.beginPath(), Oe.arc(nt, Ye, Math.max(8, pe + 6), 0, Math.PI * 2), Oe.fill(), Oe.restore(), Oe.save(), Oe.globalCompositeOperation = "destination-out", Oe.drawImage(ct, 0, 0), Oe.restore(), e.drawImage(pt, 0, 0);
@@ -4971,7 +5010,7 @@ const Sa = (e, t, n, r, a, o, i, s, l, c, u, h, f, m, p, b, x, y, S, g, k, C, E,
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ d("style", { children: "@keyframes av-latency-pulse {0% { transform: scale(1); box-shadow: 0 4px 10px rgba(0,0,0,0.2);} 50% { transform: scale(1.08); box-shadow: 0 8px 18px rgba(0,0,0,0.32);} 100% { transform: scale(1); box-shadow: 0 4px 10px rgba(0,0,0,0.2);} } .av-latency-pulse { animation: av-latency-pulse 1s ease-in-out infinite; }" }),
+        /* @__PURE__ */ d("style", { children: "@keyframes av-latency-pulse {0% { transform: scale(1); box-shadow: 0 4px 10px var(--nice-overlay-20, rgba(0, 0, 0, 0.2));} 50% { transform: scale(1.08); box-shadow: 0 8px 18px rgba(0,0,0,0.32);} 100% { transform: scale(1); box-shadow: 0 4px 10px var(--nice-overlay-20, rgba(0, 0, 0, 0.2));} } .av-latency-pulse { animation: av-latency-pulse 1s ease-in-out infinite; }" }),
         /* @__PURE__ */ d(
           "div",
           {
@@ -4997,7 +5036,7 @@ const Sa = (e, t, n, r, a, o, i, s, l, c, u, h, f, m, p, b, x, y, S, g, k, C, E,
                     background: F,
                     padding: "6px 10px",
                     borderRadius: 12,
-                    boxShadow: "0 4px 10px rgba(0,0,0,0.35)",
+                    boxShadow: "0 4px 10px var(--nice-overlay-35, rgba(0, 0, 0, 0.35))",
                     fontWeight: 700,
                     minWidth: 56,
                     textAlign: "center",
@@ -5018,7 +5057,7 @@ const Sa = (e, t, n, r, a, o, i, s, l, c, u, h, f, m, p, b, x, y, S, g, k, C, E,
                   background: "var(--latency-none-bg, rgba(75,85,99,0.9))",
                   padding: "6px 8px",
                   borderRadius: 12,
-                  boxShadow: "0 4px 10px rgba(0,0,0,0.35)",
+                  boxShadow: "0 4px 10px var(--nice-overlay-35, rgba(0, 0, 0, 0.35))",
                   minWidth: 44,
                   textAlign: "center"
                 },
@@ -5097,8 +5136,8 @@ function sp(e) {
   return pl.find((t) => t.url === e);
 }
 const fl = {
-  color: "#2196f3",
-  highlight: "#ffffff",
+  color: "var(--nice-primary, #2196f3)",
+  highlight: "var(--nice-bg, #fff)",
   glow: 0,
   capStyle: "flat",
   pattern: null,
@@ -5107,15 +5146,15 @@ const fl = {
   fill: e = fl,
   onChange: t = () => {
   },
-  previewColor: n = "#2196f3",
-  accentColor: r = "#0d6efd",
+  previewColor: n = "var(--nice-primary, #2196f3)",
+  accentColor: r = "var(--nice-primary, #0d6efd)",
   width: a,
   height: o
 }) => {
   const { t: i } = ke(), [s, l] = Z(null), c = (y, S) => {
     t({ ...e, [y]: S });
   }, u = Be(() => {
-    const y = e.color || n || "#2196f3";
+    const y = e.color || n || "var(--nice-primary, #2196f3)";
     return (S, g, k) => {
       const C = Yn.find((T) => T.name === S) || Yn[0], E = g ? Nr.find((T) => T.name === g) ?? null : null;
       return Qs({
@@ -5133,7 +5172,7 @@ const fl = {
         textureScale: e.textureScale
       });
     };
-  }, [e, n]), h = `2px solid ${r}`, f = r === "#d4a017" ? "#fff8e1" : "#e7f1ff", m = X(null), p = X(null), b = G((y, S) => {
+  }, [e, n]), h = `2px solid ${r}`, f = r === "var(--nice-warning-dark, #d4a017)" ? "var(--nice-warning-bg, #fff8e1)" : "#e7f1ff", m = X(null), p = X(null), b = G((y, S) => {
     y.current && y.current.scrollBy({ left: S * 180, behavior: "smooth" });
   }, []), x = {
     position: "absolute",
@@ -5148,12 +5187,12 @@ const fl = {
     justifyContent: "center",
     fontSize: 18,
     fontWeight: 700,
-    color: "#ccc",
-    background: "linear-gradient(90deg, rgba(30,30,30,0.9) 60%, transparent)"
+    color: "var(--nice-border, #ccc)",
+    background: "linear-gradient(90deg, var(--nice-overlay-90, rgba(30, 30, 30, 0.9)) 60%, transparent)"
   };
   return /* @__PURE__ */ v("div", { style: { padding: "4px 0" }, children: [
     /* @__PURE__ */ v("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }, children: [
-      /* @__PURE__ */ d(Qe.Label, { className: "mb-0", style: { fontSize: 13, color: "#ccc" }, children: i("playerForm.barColor", "Color") }),
+      /* @__PURE__ */ d(Qe.Label, { className: "mb-0", style: { fontSize: 13, color: "var(--nice-border, #ccc)" }, children: i("playerForm.barColor", "Color") }),
       /* @__PURE__ */ d(
         Qe.Check,
         {
@@ -5161,7 +5200,7 @@ const fl = {
           id: `bar-color-auto-${r}`,
           label: i("playerForm.auto", "Auto"),
           checked: !e.color,
-          onChange: (y) => c("color", y.target.checked ? null : n || "#2196f3"),
+          onChange: (y) => c("color", y.target.checked ? null : n || "var(--nice-primary, #2196f3)"),
           className: "mb-0"
         }
       ),
@@ -5175,7 +5214,7 @@ const fl = {
         }
       )
     ] }),
-    /* @__PURE__ */ d(Qe.Label, { style: { fontSize: 13, color: "#ccc" }, children: i("playerForm.capShape", "Cap shape") }),
+    /* @__PURE__ */ d(Qe.Label, { style: { fontSize: 13, color: "var(--nice-border, #ccc)" }, children: i("playerForm.capShape", "Cap shape") }),
     /* @__PURE__ */ v("div", { style: { position: "relative", marginBottom: 10 }, children: [
       /* @__PURE__ */ d(
         "button",
@@ -5195,7 +5234,7 @@ const fl = {
             left: "auto",
             right: 0,
             borderRadius: "0 6px 6px 0",
-            background: "linear-gradient(270deg, rgba(30,30,30,0.9) 60%, transparent)"
+            background: "linear-gradient(270deg, var(--nice-overlay-90, rgba(30, 30, 30, 0.9)) 60%, transparent)"
           },
           onClick: () => b(m, 1),
           children: "�"
@@ -5223,10 +5262,10 @@ const fl = {
                 style: {
                   cursor: "pointer",
                   flexShrink: 0,
-                  border: S ? h : "1px solid #555",
+                  border: S ? h : "1px solid var(--nice-text-secondary, #555)",
                   borderRadius: 6,
                   padding: 3,
-                  background: S ? f : "#222"
+                  background: S ? f : "var(--nice-text, #222)"
                 },
                 dangerouslySetInnerHTML: { __html: u(y.name, null) }
               },
@@ -5236,7 +5275,7 @@ const fl = {
         }
       )
     ] }),
-    /* @__PURE__ */ d(Qe.Label, { style: { fontSize: 13, color: "#ccc" }, children: i("playerForm.pattern", "Pattern") }),
+    /* @__PURE__ */ d(Qe.Label, { style: { fontSize: 13, color: "var(--nice-border, #ccc)" }, children: i("playerForm.pattern", "Pattern") }),
     /* @__PURE__ */ v("div", { style: { position: "relative", marginBottom: 10 }, children: [
       /* @__PURE__ */ d(
         "button",
@@ -5256,7 +5295,7 @@ const fl = {
             left: "auto",
             right: 0,
             borderRadius: "0 6px 6px 0",
-            background: "linear-gradient(270deg, rgba(30,30,30,0.9) 60%, transparent)"
+            background: "linear-gradient(270deg, var(--nice-overlay-90, rgba(30, 30, 30, 0.9)) 60%, transparent)"
           },
           onClick: () => b(p, 1),
           children: "�"
@@ -5283,13 +5322,13 @@ const fl = {
                 style: {
                   cursor: "pointer",
                   flexShrink: 0,
-                  border: e.patternName ? "1px solid #555" : h,
+                  border: e.patternName ? "1px solid var(--nice-text-secondary, #555)" : h,
                   borderRadius: 6,
                   padding: "3px 8px",
-                  background: e.patternName ? "#222" : f,
+                  background: e.patternName ? "var(--nice-text, #222)" : f,
                   fontSize: 12,
                   lineHeight: "22px",
-                  color: "#ccc"
+                  color: "var(--nice-border, #ccc)"
                 },
                 children: "�"
               }
@@ -5304,10 +5343,10 @@ const fl = {
                   style: {
                     cursor: "pointer",
                     flexShrink: 0,
-                    border: S ? h : "1px solid #555",
+                    border: S ? h : "1px solid var(--nice-text-secondary, #555)",
                     borderRadius: 6,
                     padding: 3,
-                    background: S ? f : "#222"
+                    background: S ? f : "var(--nice-text, #222)"
                   },
                   dangerouslySetInnerHTML: { __html: u(e.capStyleName, y.name) }
                 },
@@ -5330,7 +5369,7 @@ const fl = {
       }
     ),
     /* @__PURE__ */ v("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 10 }, children: [
-      /* @__PURE__ */ d(Qe.Label, { className: "mb-0", style: { fontSize: 13, color: "#ccc" }, children: i("playerForm.patternColor", "Pattern color") }),
+      /* @__PURE__ */ d(Qe.Label, { className: "mb-0", style: { fontSize: 13, color: "var(--nice-border, #ccc)" }, children: i("playerForm.patternColor", "Pattern color") }),
       /* @__PURE__ */ d(
         Qe.Check,
         {
@@ -5338,7 +5377,7 @@ const fl = {
           id: `bar-pattern-color-auto-${r}`,
           label: i("playerForm.auto", "Auto"),
           checked: !e.patternColor,
-          onChange: (y) => c("patternColor", y.target.checked ? null : n || "#ffffff"),
+          onChange: (y) => c("patternColor", y.target.checked ? null : n || "var(--nice-bg, #fff)"),
           className: "mb-0"
         }
       ),
@@ -5353,7 +5392,7 @@ const fl = {
       )
     ] }),
     !e.patternOnly && /* @__PURE__ */ v(Ke, { children: [
-      /* @__PURE__ */ v(Qe.Label, { style: { fontSize: 13, color: "#ccc" }, children: [
+      /* @__PURE__ */ v(Qe.Label, { style: { fontSize: 13, color: "var(--nice-border, #ccc)" }, children: [
         i("playerForm.highlight", "Highlight"),
         ": ",
         e.highlight,
@@ -5369,7 +5408,7 @@ const fl = {
           className: "mb-2"
         }
       ),
-      /* @__PURE__ */ v(Qe.Label, { style: { fontSize: 13, color: "#ccc" }, children: [
+      /* @__PURE__ */ v(Qe.Label, { style: { fontSize: 13, color: "var(--nice-border, #ccc)" }, children: [
         i("playerForm.glow", "Glow"),
         ": ",
         e.glow,
@@ -5386,7 +5425,7 @@ const fl = {
         }
       )
     ] }),
-    /* @__PURE__ */ v(Qe.Label, { style: { fontSize: 13, color: "#ccc" }, children: [
+    /* @__PURE__ */ v(Qe.Label, { style: { fontSize: 13, color: "var(--nice-border, #ccc)" }, children: [
       i("playerForm.glass", "Transparency (glass)"),
       ": ",
       e.glass,
@@ -5402,7 +5441,13 @@ const fl = {
         className: "mb-2"
       }
     ),
-    /* @__PURE__ */ d(Qe.Label, { style: { fontSize: 13, fontWeight: 600, marginTop: 4, color: "#ccc" }, children: i("playerForm.texture", "Texture") }),
+    /* @__PURE__ */ d(
+      Qe.Label,
+      {
+        style: { fontSize: 13, fontWeight: 600, marginTop: 4, color: "var(--nice-border, #ccc)" },
+        children: i("playerForm.texture", "Texture")
+      }
+    ),
     /* @__PURE__ */ v("div", { style: { marginBottom: 6 }, children: [
       /* @__PURE__ */ v("div", { style: { display: "flex", gap: 4, flexWrap: "wrap", marginBottom: 6 }, children: [
         /* @__PURE__ */ d(
@@ -5438,9 +5483,9 @@ const fl = {
             maxHeight: 130,
             overflowY: "auto",
             padding: 4,
-            border: "1px solid #dee2e6",
+            border: "1px solid var(--nice-border, #dee2e6)",
             borderRadius: 6,
-            background: "#f8f9fa"
+            background: "var(--nice-bg-secondary, #f8f9fa)"
           },
           children: s.entries.map((y) => {
             const S = e.textureUrl === y.url;
@@ -5454,7 +5499,7 @@ const fl = {
                   height: 48,
                   borderRadius: 6,
                   cursor: "pointer",
-                  border: S ? `3px solid ${r}` : "1px solid #bbb",
+                  border: S ? `3px solid ${r}` : "1px solid var(--nice-text-muted, #bbb)",
                   backgroundImage: `url(${y.url})`,
                   backgroundSize: "cover",
                   boxShadow: S ? `0 0 6px ${r}` : void 0
@@ -5475,15 +5520,15 @@ const fl = {
               borderRadius: 6,
               backgroundImage: `url(${e.textureUrl})`,
               backgroundSize: `${Math.round(256 * e.textureScale)}px`,
-              border: "1px solid #aaa"
+              border: "1px solid var(--nice-text-muted, #aaa)"
             }
           }
         ),
-        /* @__PURE__ */ d("span", { style: { fontSize: 11, color: "#666" }, children: e.textureUrl.split("/").pop() })
+        /* @__PURE__ */ d("span", { style: { fontSize: 11, color: "var(--nice-text-secondary, #666)" }, children: e.textureUrl.split("/").pop() })
       ] })
     ] }),
     e.textureUrl && /* @__PURE__ */ v(Ke, { children: [
-      /* @__PURE__ */ v(Qe.Label, { style: { fontSize: 13, color: "#ccc" }, children: [
+      /* @__PURE__ */ v(Qe.Label, { style: { fontSize: 13, color: "var(--nice-border, #ccc)" }, children: [
         i("playerForm.textureScale", "Texture scale"),
         ": ",
         e.textureScale.toFixed(1),
@@ -5896,205 +5941,227 @@ Attempted URLs: ${Array.isArray(B.attemptedUrls) ? B.attemptedUrls.join(", ") :
       et.error("generateScientificReport error", W), et.warn(o("audioPitch.reportError") + String(W));
     }
   }
-  return /* @__PURE__ */ v("div", { style: { marginTop: 32, padding: 16, border: "1px solid #ccc", borderRadius: 8 }, children: [
-    /* @__PURE__ */ d("h3", { children: o("audioPitch.title") }),
-    /* @__PURE__ */ v("div", { style: { marginBottom: 12 }, children: [
-      /* @__PURE__ */ d("label", { htmlFor: "pitch-algorithm-select", style: { marginRight: 8 }, children: o("audioPitch.algorithm") }),
-      /* @__PURE__ */ v(
-        "select",
-        {
-          id: "pitch-algorithm-select",
-          value: i,
-          onChange: (W) => s(W.target.value),
-          style: { marginRight: 16 },
-          children: [
-            /* @__PURE__ */ d("option", { value: "ultrastar-wp", children: "Ultrastar WP (autokorelacja)" }),
-            /* @__PURE__ */ d("option", { value: "crepe", children: "crepe (AI)" }),
-            /* @__PURE__ */ d("option", { value: "pitchy", children: "pitchy (YIN)" }),
-            /* @__PURE__ */ d("option", { value: "librosa", children: "Librosa (PYIN)" })
-          ]
-        }
-      ),
-      /* @__PURE__ */ v("label", { style: { marginRight: 8 }, children: [
-        /* @__PURE__ */ d(
-          "input",
-          {
-            type: "checkbox",
-            checked: u,
-            onChange: (W) => h(W.target.checked)
-          }
-        ),
-        " ",
-        o("audioPitch.compareAll")
-      ] }),
-      /* @__PURE__ */ d(
-        "input",
-        {
-          type: "file",
-          accept: "audio/*",
-          ref: $,
-          onChange: j,
-          disabled: k
-        }
-      )
-    ] }),
-    k && /* @__PURE__ */ d("div", { children: o("audioPitch.analyzing") }),
-    /* @__PURE__ */ v("div", { style: { marginTop: 8 }, children: [
-      /* @__PURE__ */ d("b", { children: o("audioPitch.method") }),
-      " ",
-      i
-    ] }),
-    E && /* @__PURE__ */ v("div", { style: { color: "red", marginTop: 8 }, children: [
-      /* @__PURE__ */ v("b", { children: [
-        i,
-        ": "
-      ] }),
-      /* @__PURE__ */ d("div", { children: E }),
-      q && /* @__PURE__ */ d(
-        "pre",
-        {
-          style: {
-            background: "#111",
-            color: "#f88",
-            padding: 8,
-            borderRadius: 4,
-            whiteSpace: "pre-wrap",
-            marginTop: 8
-          },
-          children: q
-        }
-      )
-    ] }),
-    _ && /* @__PURE__ */ v("div", { style: { marginTop: 12 }, children: [
-      /* @__PURE__ */ d("b", { children: "Aubio diagnostics" }),
-      /* @__PURE__ */ d(
-        "pre",
-        {
-          style: {
-            background: "#111",
-            color: "#f88",
-            padding: 8,
-            borderRadius: 4,
-            whiteSpace: "pre-wrap"
-          },
-          children: _
-        }
-      ),
-      N && /* @__PURE__ */ v("div", { style: { marginTop: 8 }, children: [
-        /* @__PURE__ */ d("b", { children: "Probe:" }),
-        " ",
-        N
-      ] })
-    ] }),
-    (Object.keys(f).length > 0 || Object.keys(p).length > 0) && /* @__PURE__ */ v("div", { style: { marginTop: 12 }, children: [
-      /* @__PURE__ */ d("button", { onClick: () => oe(), children: o("audioPitch.downloadReport") }),
-      Object.entries(p).length > 0 && /* @__PURE__ */ v("div", { style: { marginTop: 8 }, children: [
-        /* @__PURE__ */ d("b", { children: "Per-algorithm errors:" }),
-        Object.entries(p).filter(([W, B]) => B).map(([W, B]) => /* @__PURE__ */ v("div", { style: { marginTop: 6 }, children: [
+  return /* @__PURE__ */ v(
+    "div",
+    {
+      style: {
+        marginTop: 32,
+        padding: 16,
+        border: "1px solid var(--nice-border, #ccc)",
+        borderRadius: 8
+      },
+      children: [
+        /* @__PURE__ */ d("h3", { children: o("audioPitch.title") }),
+        /* @__PURE__ */ v("div", { style: { marginBottom: 12 }, children: [
+          /* @__PURE__ */ d("label", { htmlFor: "pitch-algorithm-select", style: { marginRight: 8 }, children: o("audioPitch.algorithm") }),
+          /* @__PURE__ */ v(
+            "select",
+            {
+              id: "pitch-algorithm-select",
+              value: i,
+              onChange: (W) => s(W.target.value),
+              style: { marginRight: 16 },
+              children: [
+                /* @__PURE__ */ d("option", { value: "ultrastar-wp", children: "Ultrastar WP (autokorelacja)" }),
+                /* @__PURE__ */ d("option", { value: "crepe", children: "crepe (AI)" }),
+                /* @__PURE__ */ d("option", { value: "pitchy", children: "pitchy (YIN)" }),
+                /* @__PURE__ */ d("option", { value: "librosa", children: "Librosa (PYIN)" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ v("label", { style: { marginRight: 8 }, children: [
+            /* @__PURE__ */ d(
+              "input",
+              {
+                type: "checkbox",
+                checked: u,
+                onChange: (W) => h(W.target.checked)
+              }
+            ),
+            " ",
+            o("audioPitch.compareAll")
+          ] }),
+          /* @__PURE__ */ d(
+            "input",
+            {
+              type: "file",
+              accept: "audio/*",
+              ref: $,
+              onChange: j,
+              disabled: k
+            }
+          )
+        ] }),
+        k && /* @__PURE__ */ d("div", { children: o("audioPitch.analyzing") }),
+        /* @__PURE__ */ v("div", { style: { marginTop: 8 }, children: [
+          /* @__PURE__ */ d("b", { children: o("audioPitch.method") }),
+          " ",
+          i
+        ] }),
+        E && /* @__PURE__ */ v("div", { style: { color: "red", marginTop: 8 }, children: [
           /* @__PURE__ */ v("b", { children: [
-            W,
-            ":"
+            i,
+            ": "
           ] }),
+          /* @__PURE__ */ d("div", { children: E }),
+          q && /* @__PURE__ */ d(
+            "pre",
+            {
+              style: {
+                background: "var(--nice-text, #111)",
+                color: "var(--nice-danger-light, #f88)",
+                padding: 8,
+                borderRadius: 4,
+                whiteSpace: "pre-wrap",
+                marginTop: 8
+              },
+              children: q
+            }
+          )
+        ] }),
+        _ && /* @__PURE__ */ v("div", { style: { marginTop: 12 }, children: [
+          /* @__PURE__ */ d("b", { children: "Aubio diagnostics" }),
           /* @__PURE__ */ d(
             "pre",
             {
               style: {
-                background: "#111",
-                color: "#f88",
+                background: "var(--nice-text, #111)",
+                color: "var(--nice-danger-light, #f88)",
                 padding: 8,
                 borderRadius: 4,
                 whiteSpace: "pre-wrap"
               },
-              children: B
+              children: _
             }
-          )
-        ] }, W))
-      ] })
-    ] }),
-    S.length > 0 && /* @__PURE__ */ v("div", { style: { marginTop: 16 }, children: [
-      /* @__PURE__ */ d("b", { children: o("audioPitch.resultUltrastar") }),
-      /* @__PURE__ */ v("pre", { style: { background: "#222", color: "#fff", padding: 8, borderRadius: 4 }, children: [
-        S.map(
-          (W) => `: ${Math.round(W.start * 10)} ${Math.round(W.duration * 10)} ${W.pitch} [${W.freq.toFixed(1)} Hz]`
-        ).join(`
+          ),
+          N && /* @__PURE__ */ v("div", { style: { marginTop: 8 }, children: [
+            /* @__PURE__ */ d("b", { children: "Probe:" }),
+            " ",
+            N
+          ] })
+        ] }),
+        (Object.keys(f).length > 0 || Object.keys(p).length > 0) && /* @__PURE__ */ v("div", { style: { marginTop: 12 }, children: [
+          /* @__PURE__ */ d("button", { onClick: () => oe(), children: o("audioPitch.downloadReport") }),
+          Object.entries(p).length > 0 && /* @__PURE__ */ v("div", { style: { marginTop: 8 }, children: [
+            /* @__PURE__ */ d("b", { children: "Per-algorithm errors:" }),
+            Object.entries(p).filter(([W, B]) => B).map(([W, B]) => /* @__PURE__ */ v("div", { style: { marginTop: 6 }, children: [
+              /* @__PURE__ */ v("b", { children: [
+                W,
+                ":"
+              ] }),
+              /* @__PURE__ */ d(
+                "pre",
+                {
+                  style: {
+                    background: "var(--nice-text, #111)",
+                    color: "var(--nice-danger-light, #f88)",
+                    padding: 8,
+                    borderRadius: 4,
+                    whiteSpace: "pre-wrap"
+                  },
+                  children: B
+                }
+              )
+            ] }, W))
+          ] })
+        ] }),
+        S.length > 0 && /* @__PURE__ */ v("div", { style: { marginTop: 16 }, children: [
+          /* @__PURE__ */ d("b", { children: o("audioPitch.resultUltrastar") }),
+          /* @__PURE__ */ v(
+            "pre",
+            {
+              style: {
+                background: "var(--nice-text, #222)",
+                color: "var(--nice-bg, #fff)",
+                padding: 8,
+                borderRadius: 4
+              },
+              children: [
+                S.map(
+                  (W) => `: ${Math.round(W.start * 10)} ${Math.round(W.duration * 10)} ${W.pitch} [${W.freq.toFixed(1)} Hz]`
+                ).join(`
 `),
-        `
+                `
 -`
-      ] })
-    ] }),
-    l && l.length > 0 && /* @__PURE__ */ v("div", { style: { marginTop: 24 }, children: [
-      /* @__PURE__ */ d("b", { children: o("audioPitch.waveformRms") }),
-      /* @__PURE__ */ d(
-        "canvas",
-        {
-          width: 600,
-          height: 100,
-          style: {
-            background: "#222",
-            borderRadius: 4,
-            width: "100%",
-            maxWidth: 600,
-            display: "block"
-          },
-          role: "img",
-          "aria-label": "Waveform and RMS visualization canvas",
-          ref: (W) => {
-            if (!W)
-              return;
-            const B = W.getContext("2d");
-            if (B) {
-              B.clearRect(0, 0, 600, 100), B.strokeStyle = "#0ff", B.beginPath();
-              for (let w = 0; w < l.length; w += Math.ceil(l.length / 600)) {
-                const A = w / l.length * 600, R = 50 - l[w] * 48;
-                w === 0 ? B.moveTo(A, R) : B.lineTo(A, R);
-              }
-              if (B.stroke(), x.length > 0) {
-                B.strokeStyle = "#ff0", B.beginPath();
-                for (let w = 0; w < x.length; w++) {
-                  const A = w / x.length * 600, R = 100 - x[w] * 90;
-                  w === 0 ? B.moveTo(A, R) : B.lineTo(A, R);
+              ]
+            }
+          )
+        ] }),
+        l && l.length > 0 && /* @__PURE__ */ v("div", { style: { marginTop: 24 }, children: [
+          /* @__PURE__ */ d("b", { children: o("audioPitch.waveformRms") }),
+          /* @__PURE__ */ d(
+            "canvas",
+            {
+              width: 600,
+              height: 100,
+              style: {
+                background: "var(--nice-text, #222)",
+                borderRadius: 4,
+                width: "100%",
+                maxWidth: 600,
+                display: "block"
+              },
+              role: "img",
+              "aria-label": "Waveform and RMS visualization canvas",
+              ref: (W) => {
+                if (!W)
+                  return;
+                const B = W.getContext("2d");
+                if (B) {
+                  B.clearRect(0, 0, 600, 100), B.strokeStyle = "var(--nice-info, #0ff)", B.beginPath();
+                  for (let w = 0; w < l.length; w += Math.ceil(l.length / 600)) {
+                    const A = w / l.length * 600, R = 50 - l[w] * 48;
+                    w === 0 ? B.moveTo(A, R) : B.lineTo(A, R);
+                  }
+                  if (B.stroke(), x.length > 0) {
+                    B.strokeStyle = "var(--nice-warning, #ff0)", B.beginPath();
+                    for (let w = 0; w < x.length; w++) {
+                      const A = w / x.length * 600, R = 100 - x[w] * 90;
+                      w === 0 ? B.moveTo(A, R) : B.lineTo(A, R);
+                    }
+                    B.stroke();
+                  }
                 }
-                B.stroke();
               }
             }
-          }
-        }
-      ),
-      /* @__PURE__ */ v("div", { style: { color: "#aaa", fontSize: 12, marginTop: 4 }, children: [
-        /* @__PURE__ */ d("span", { style: { color: "#0ff" }, children: "Waveform" }),
-        "  | ",
-        " ",
-        /* @__PURE__ */ d("span", { style: { color: "#ff0" }, children: "RMS" })
-      ] })
-    ] }),
-    !k && S.length === 0 && !E && /* @__PURE__ */ d("div", { style: { marginTop: 16, color: "#aaa" }, children: /* @__PURE__ */ d("i", { children: o("audioPitch.noNotesDetected") }) }),
-    u && Object.keys(f).length > 0 && /* @__PURE__ */ v("div", { style: { marginTop: 16 }, children: [
-      /* @__PURE__ */ d("h4", { children: o("audioPitch.algorithmComparison") }),
-      Object.entries(f).map(([W, B]) => /* @__PURE__ */ v("div", { style: { marginBottom: 12 }, children: [
-        /* @__PURE__ */ d("b", { children: W }),
-        ": ",
-        o("audioPitch.detectedSegments"),
-        " ",
-        B.length,
-        /* @__PURE__ */ d(
-          "pre",
-          {
-            style: {
-              background: "#111",
-              color: "#ddd",
-              padding: 8,
-              borderRadius: 4,
-              marginTop: 8
-            },
-            children: B.map(
-              (w) => `: ${Math.round(w.start * 10)} ${Math.round(w.duration * 10)} ${w.pitch} [${w.freq.toFixed(1)} Hz]`
-            ).join(`
+          ),
+          /* @__PURE__ */ v("div", { style: { color: "var(--nice-text-muted, #aaa)", fontSize: 12, marginTop: 4 }, children: [
+            /* @__PURE__ */ d("span", { style: { color: "var(--nice-info, #0ff)" }, children: "Waveform" }),
+            "  | ",
+            " ",
+            /* @__PURE__ */ d("span", { style: { color: "var(--nice-warning, #ff0)" }, children: "RMS" })
+          ] })
+        ] }),
+        !k && S.length === 0 && !E && /* @__PURE__ */ d("div", { style: { marginTop: 16, color: "var(--nice-text-muted, #aaa)" }, children: /* @__PURE__ */ d("i", { children: o("audioPitch.noNotesDetected") }) }),
+        u && Object.keys(f).length > 0 && /* @__PURE__ */ v("div", { style: { marginTop: 16 }, children: [
+          /* @__PURE__ */ d("h4", { children: o("audioPitch.algorithmComparison") }),
+          Object.entries(f).map(([W, B]) => /* @__PURE__ */ v("div", { style: { marginBottom: 12 }, children: [
+            /* @__PURE__ */ d("b", { children: W }),
+            ": ",
+            o("audioPitch.detectedSegments"),
+            " ",
+            B.length,
+            /* @__PURE__ */ d(
+              "pre",
+              {
+                style: {
+                  background: "var(--nice-text, #111)",
+                  color: "var(--nice-border, #ddd)",
+                  padding: 8,
+                  borderRadius: 4,
+                  marginTop: 8
+                },
+                children: B.map(
+                  (w) => `: ${Math.round(w.start * 10)} ${Math.round(w.duration * 10)} ${w.pitch} [${w.freq.toFixed(1)} Hz]`
+                ).join(`
 `)
-          }
-        )
-      ] }, W))
-    ] })
-  ] });
+              }
+            )
+          ] }, W))
+        ] })
+      ]
+    }
+  );
 }
 function De(e, t) {
   var a;
@@ -6145,48 +6212,52 @@ const ml = [
     id: "default",
     name: "Cyan ? Yellow ? Amber",
     sungGradient: ["#00e5ff", "#ffe600", "#ffab00"],
-    goldGradient: ["#FFD700", "#FFA000", "#FFD700"],
+    goldGradient: ["var(--nice-warning, #FFD700)", "#FFA000", "var(--nice-warning, #FFD700)"],
     glowColor: "rgba(0,229,255,0.6)"
   },
   {
     id: "neon-pink",
     name: "Neon Pink ? Violet ? Blue",
-    sungGradient: ["#ff1493", "#9b59b6", "#3498db"],
-    goldGradient: ["#FFD700", "#FF69B4", "#FFD700"],
+    sungGradient: ["#ff1493", "#9b59b6", "var(--nice-primary, #3498db)"],
+    goldGradient: ["var(--nice-warning, #FFD700)", "#FF69B4", "var(--nice-warning, #FFD700)"],
     glowColor: "rgba(255,20,147,0.6)"
   },
   {
     id: "fire",
     name: "Red ? Orange ? Yellow",
     sungGradient: ["#ff1744", "#ff9100", "#ffea00"],
-    goldGradient: ["#FFD700", "#FF6D00", "#FFD700"],
+    goldGradient: ["var(--nice-warning, #FFD700)", "#FF6D00", "var(--nice-warning, #FFD700)"],
     glowColor: "rgba(255,23,68,0.6)"
   },
   {
     id: "ocean",
     name: "Deep Blue ? Teal ? Aqua",
     sungGradient: ["#1a237e", "#00897b", "#00e5ff"],
-    goldGradient: ["#FFD700", "#00BCD4", "#FFD700"],
+    goldGradient: ["var(--nice-warning, #FFD700)", "#00BCD4", "var(--nice-warning, #FFD700)"],
     glowColor: "rgba(0,137,123,0.6)"
   },
   {
     id: "forest",
     name: "Green ? Lime ? Yellow",
     sungGradient: ["#1b5e20", "#76ff03", "#ffea00"],
-    goldGradient: ["#FFD700", "#76ff03", "#FFD700"],
+    goldGradient: ["var(--nice-warning, #FFD700)", "#76ff03", "var(--nice-warning, #FFD700)"],
     glowColor: "rgba(118,255,3,0.6)"
   },
   {
     id: "retro",
     name: "Orange ? Pink ? Purple",
-    sungGradient: ["#ff6d00", "#e91e63", "#7b1fa2"],
-    goldGradient: ["#FFD700", "#E91E63", "#FFD700"],
+    sungGradient: ["#ff6d00", "var(--nice-accent-pink, #e91e63)", "#7b1fa2"],
+    goldGradient: [
+      "var(--nice-warning, #FFD700)",
+      "var(--nice-accent-pink, #e91e63)",
+      "var(--nice-warning, #FFD700)"
+    ],
     glowColor: "rgba(233,30,99,0.6)"
   }
 ], Zt = {
   presetId: "default",
   customSungGradient: ["#00e5ff", "#ffe600", "#ffab00"],
-  customGoldGradient: ["#FFD700", "#FFA000", "#FFD700"],
+  customGoldGradient: ["var(--nice-warning, #FFD700)", "#FFA000", "var(--nice-warning, #FFD700)"],
   customGlowColor: "rgba(0,229,255,0.6)",
   animationMode: "ball",
   fontFamily: "Arial",
@@ -6539,20 +6610,26 @@ const kl = ({ index: e, style: t, data: n }) => {
   }, [i, c, g, r]), /* @__PURE__ */ v("div", { children: [
     /* @__PURE__ */ v("div", { style: { display: "flex", gap: 8, alignItems: "center", marginBottom: 8 }, children: [
       /* @__PURE__ */ d("button", { onClick: () => l((C) => !C), disabled: !t, children: s ? "Pause" : "Play" }),
-      /* @__PURE__ */ v("div", { style: { fontSize: 13, color: "#666" }, children: [
+      /* @__PURE__ */ v("div", { style: { fontSize: 13, color: "var(--nice-text-secondary, #666)" }, children: [
         (m.current || 0).toFixed(2),
         "s"
       ] }),
-      /* @__PURE__ */ v("div", { style: { marginLeft: "auto", fontSize: 13, color: "#666" }, children: [
-        "Notes: ",
-        c.length
-      ] })
+      /* @__PURE__ */ v(
+        "div",
+        {
+          style: { marginLeft: "auto", fontSize: 13, color: "var(--nice-text-secondary, #666)" },
+          children: [
+            "Notes: ",
+            c.length
+          ]
+        }
+      )
     ] }),
     /* @__PURE__ */ d(
       "div",
       {
         style: {
-          border: "1px solid #ddd",
+          border: "1px solid var(--nice-border, #ddd)",
           height: 220,
           overflow: "hidden",
           padding: 8,
@@ -6570,7 +6647,7 @@ const kl = ({ index: e, style: t, data: n }) => {
             itemData: k,
             children: kl
           }
-        ) : /* @__PURE__ */ d("div", { style: { color: "#888" }, children: a("karaokeEditor.noText", "No text") })
+        ) : /* @__PURE__ */ d("div", { style: { color: "var(--nice-text-secondary, #888)" }, children: a("karaokeEditor.noText", "No text") })
       }
     ),
     !n && /* @__PURE__ */ d(
@@ -6633,7 +6710,7 @@ function gp({ ultrastarText: e, audioUrl: t, audioRef: n, ytRef: r }) {
           this.texts = [];
           const _ = {
             font: "18px monospace",
-            color: "#ffffff"
+            color: "var(--nice-bg, #fff)"
           }, N = 22;
           let q = 20;
           const U = m.current;
@@ -6653,12 +6730,15 @@ function gp({ ultrastarText: e, audioUrl: t, audioRef: n, ytRef: r }) {
           else
             _ = this.audioEl && this.audioEl.currentTime || 0;
           for (let q = 0; q < this.texts.length; q++)
-            this.texts[q].setStyle({ backgroundColor: void 0, color: "#ffffff" });
+            this.texts[q].setStyle({ backgroundColor: void 0, color: "var(--nice-bg, #fff)" });
           const N = p.current;
           for (const q of N)
             if (_ >= q.start && _ < q.start + Math.max(1e-3, q.duration)) {
               const U = this.texts[q.lineIndex];
-              U && U.setStyle({ backgroundColor: "rgba(0,130,200,0.16)", color: "#00aaff" });
+              U && U.setStyle({
+                backgroundColor: "rgba(0,130,200,0.16)",
+                color: "var(--nice-info, #00aaff)"
+              });
             }
         }
       }
@@ -7007,10 +7087,10 @@ const $l = st.scoped("GenericPlayer"), Tl = (e) => /youtu(\.be|be\.com)/i.test(e
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
-              background: "rgba(0,0,0,0.6)",
+              background: "var(--nice-overlay-60, rgba(0, 0, 0, 0.6))",
               cursor: "pointer"
             },
-            children: /* @__PURE__ */ d("span", { style: { color: "#fff", fontSize: 24 }, children: "Click to activate audio" })
+            children: /* @__PURE__ */ d("span", { style: { color: "var(--nice-bg, #fff)", fontSize: 24 }, children: "Click to activate audio" })
           }
         ),
         or && /* @__PURE__ */ v(
@@ -7076,9 +7156,9 @@ const $l = st.scoped("GenericPlayer"), Tl = (e) => /youtu(\.be|be\.com)/i.test(e
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center",
-                    background: "rgba(0,0,0,0.7)"
+                    background: "var(--nice-overlay-70, rgba(0, 0, 0, 0.7))"
                   },
-                  children: /* @__PURE__ */ d("span", { style: { color: "#fff", fontSize: 72, fontWeight: "bold" }, children: w })
+                  children: /* @__PURE__ */ d("span", { style: { color: "var(--nice-bg, #fff)", fontSize: 72, fontWeight: "bold" }, children: w })
                 }
               ),
               c === "nobuttons" && /* @__PURE__ */ d(
@@ -7214,7 +7294,7 @@ const $l = st.scoped("GenericPlayer"), Tl = (e) => /youtu(\.be|be\.com)/i.test(e
             onToggle: We
           }
         ),
-        c === "compact" && gt.length > 0 && /* @__PURE__ */ d(Ll, { items: gt, onPick: (ue) => Ge(N + 1 + ue) }),
+        c === "compact" && gt.length > 0 && /* @__PURE__ */ d(Ll, { items: gt, onSelect: (ue) => Ge(N + 1 + ue) }),
         c === "nobuttons" && /* @__PURE__ */ d(Ke, {}),
         c === "full" && e.length > 0 && /* @__PURE__ */ d("div", { className: "gp-list", style: { display: "grid", gap: 4 }, children: e.map((ue, pe) => /* @__PURE__ */ v(
           "button",
@@ -7394,10 +7474,7 @@ const $l = st.scoped("GenericPlayer"), Tl = (e) => /youtu(\.be|be\.com)/i.test(e
       }
     )
   ] });
-}, Ll = ({
-  items: e,
-  onPick: t
-}) => {
+}, Ll = ({ items: e, onSelect: t }) => {
   const { t: n } = ke();
   return /* @__PURE__ */ v(
     "div",
@@ -7549,10 +7626,10 @@ const Fl = (e) => !!e && /\.m3u8(\?.*)?$/i.test(e), Ca = (e) => {
   const t = Math.floor(e / 60), n = Math.floor(e % 60);
   return `${t}:${n.toString().padStart(2, "0")}`;
 }, pr = {
-  border: "1px solid #d1d5db",
+  border: "1px solid var(--nice-border, #d1d5db)",
   borderRadius: 8,
   padding: "6px 10px",
-  background: "#fff",
+  background: "var(--nice-bg, #fff)",
   cursor: "pointer"
 }, zl = ({
   isPlaying: e,
@@ -7575,7 +7652,7 @@ const Fl = (e) => !!e && /\.m3u8(\?.*)?$/i.test(e), Ca = (e) => {
         style: { display: "flex", alignItems: "baseline", gap: 8, justifyContent: "space-between" },
         children: [
           /* @__PURE__ */ d("div", {}),
-          /* @__PURE__ */ v("div", { style: { fontSize: 12, color: "#64748b" }, children: [
+          /* @__PURE__ */ v("div", { style: { fontSize: 12, color: "var(--nice-text-secondary, #64748b)" }, children: [
             Ca(r),
             " / ",
             Ca(a)
@@ -7709,7 +7786,7 @@ function Gl(e, t, n, r, a, o) {
   }
   i.items = s;
 }
-const Wl = "#94a3b8", Vl = ({ height: e, coverUrl: t, title: n, subtitle: r, label: a }) => /* @__PURE__ */ d("div", { style: { textAlign: "center", color: "#e2e8f0" }, children: t ? /* @__PURE__ */ d("img", { alt: "cover", src: t, style: { height: e - 24, objectFit: "contain" } }) : /* @__PURE__ */ v("div", { style: { opacity: 0.8 }, children: [
+const Wl = "var(--nice-text-muted, #94a3b8)", Vl = ({ height: e, coverUrl: t, title: n, subtitle: r, label: a }) => /* @__PURE__ */ d("div", { style: { textAlign: "center", color: "var(--nice-border, #e2e8f0)" }, children: t ? /* @__PURE__ */ d("img", { alt: "cover", src: t, style: { height: e - 24, objectFit: "contain" } }) : /* @__PURE__ */ v("div", { style: { opacity: 0.8 }, children: [
   /* @__PURE__ */ d("div", { style: { fontSize: 18, fontWeight: 600 }, children: n ?? "—" }),
   /* @__PURE__ */ d("div", { style: { marginTop: 8, fontSize: 12, color: Wl }, children: a ?? r ?? "—" })
 ] }) });
@@ -7847,7 +7924,7 @@ function Zl(e, t, n, r, a, o) {
     const c = (l.hue + r * 120) % 360, u = e.createRadialGradient(l.x, l.y, l.r * 0.2, l.x, l.y, l.r);
     u.addColorStop(0, `hsla(${c}, 95%, 70%, .8)`), u.addColorStop(1, `hsla(${(c + 40) % 360}, 90%, 30%, 0)`), e.fillStyle = u, e.shadowBlur = 18, e.shadowColor = `hsl(${c}, 100%, 60%)`, e.beginPath(), e.arc(l.x, l.y, l.r, 0, Math.PI * 2), e.fill();
   }
-  e.restore(), e.strokeStyle = "rgba(255,255,255,.06)", e.lineWidth = 2, e.strokeRect(1, 1, t - 2, n - 2);
+  e.restore(), e.strokeStyle = "var(--nice-overlay-light-6, rgba(255, 255, 255, 0.06))", e.lineWidth = 2, e.strokeRect(1, 1, t - 2, n - 2);
 }
 function Xl(e, t, n, r, a, o) {
   o.current || (o.current = { tris: [] });
@@ -7918,7 +7995,7 @@ function ec(e, t, n, r, a, o) {
 function tc(e, t, n, r, a, o) {
   e.fillStyle = "rgba(10,16,28,0.25)", e.fillRect(0, 0, t, n);
   const i = t / 2, s = n / 2, l = Math.min(t, n) * (0.38 + a * 0.12), c = e.createRadialGradient(i, s, l * 0.1, i, s, l);
-  c.addColorStop(0, `hsla(${(o + 200) % 360},90%,70%,0.95)`), c.addColorStop(0.5, `hsla(${(o + 260) % 360},80%,55%,0.6)`), c.addColorStop(1, "rgba(0,0,0,0)"), e.fillStyle = c, e.beginPath(), e.arc(i, s, l, 0, Math.PI * 2), e.fill();
+  c.addColorStop(0, `hsla(${(o + 200) % 360},90%,70%,0.95)`), c.addColorStop(0.5, `hsla(${(o + 260) % 360},80%,55%,0.6)`), c.addColorStop(1, "transparent"), e.fillStyle = c, e.beginPath(), e.arc(i, s, l, 0, Math.PI * 2), e.fill();
   const u = 18 + Math.floor(a * 50);
   for (let h = 0; h < u; h++) {
     const f = h / u * Math.PI * 2 + r * (0.6 + a * 1.4), m = (Math.sin(r * 2 + h * 1.7) + Math.cos(r * 1.3 + h * 2.1)) * 0.15, p = l * (0.4 + 0.55 * Math.abs(Math.sin(r * 1.2 + h))), b = 6;
@@ -7939,7 +8016,7 @@ function nc(e, t, n, r, a) {
     const f = r[h * i] / 255, m = h / 96 * Math.PI * 2, p = c, b = c + f * (u - c), x = s + Math.cos(m) * p, y = l + Math.sin(m) * p, S = s + Math.cos(m) * b, g = l + Math.sin(m) * b;
     e.strokeStyle = `hsl(${h / 96 * 360 + a},85%,60%)`, e.lineWidth = 3, e.beginPath(), e.moveTo(x, y), e.lineTo(S, g), e.stroke();
   }
-  e.fillStyle = "rgba(255,255,255,0.08)", e.beginPath(), e.arc(s, l, c * 0.85, 0, Math.PI * 2), e.fill();
+  e.fillStyle = "var(--nice-overlay-light-8, rgba(255, 255, 255, 0.08))", e.beginPath(), e.arc(s, l, c * 0.85, 0, Math.PI * 2), e.fill();
 }
 function rc(e, t, n, r, a, o) {
   const i = t / 2, s = n / 2, l = Math.min(t, n) * 0.5, c = $a(r, 0, Math.floor(r.length * 0.1)) / 255, u = $a(r, Math.floor(r.length * 0.6), r.length) / 255;
@@ -7972,7 +8049,7 @@ function ac(e, t, n, r, a, o) {
     m === 0 ? e.moveTo(x, y) : e.lineTo(x, y);
   }
   const f = e.createLinearGradient(0, i + s, 0, n);
-  f.addColorStop(0, "hsla(190,90%,65%,0.9)"), f.addColorStop(1, "hsla(160,85%,55%,0.4)"), e.strokeStyle = f, e.lineWidth = 2, e.stroke(), e.globalCompositeOperation = "lighter", e.strokeStyle = "rgba(255,255,255,0.08)", e.lineWidth = 6, e.beginPath(), e.moveTo(0, i - s), e.lineTo(t, i - s), e.stroke(), e.beginPath(), e.moveTo(0, i + s), e.lineTo(t, i + s), e.stroke(), e.globalCompositeOperation = "source-over";
+  f.addColorStop(0, "hsla(190,90%,65%,0.9)"), f.addColorStop(1, "hsla(160,85%,55%,0.4)"), e.strokeStyle = f, e.lineWidth = 2, e.stroke(), e.globalCompositeOperation = "lighter", e.strokeStyle = "var(--nice-overlay-light-8, rgba(255, 255, 255, 0.08))", e.lineWidth = 6, e.beginPath(), e.moveTo(0, i - s), e.lineTo(t, i - s), e.stroke(), e.beginPath(), e.moveTo(0, i + s), e.lineTo(t, i + s), e.stroke(), e.globalCompositeOperation = "source-over";
 }
 function oc(e, t, n, r, a, o) {
   const i = t / 2, s = n / 2, l = 5, c = Math.min(t, n) * 0.12;
@@ -8016,7 +8093,7 @@ function lc(e, t, n, r, a, o) {
   e.restore();
 }
 function cc(e, t, n, r) {
-  e.lineWidth = 2, e.strokeStyle = "#c7d2fe", e.beginPath();
+  e.lineWidth = 2, e.strokeStyle = "var(--nice-primary-light, #c7d2fe)", e.beginPath();
   const a = t / r.length;
   for (let o = 0; o < r.length; o++) {
     const i = (r[o] - 128) / 128, s = o * a, l = n / 2 + i * (n * 0.45);
@@ -8035,9 +8112,9 @@ const dc = ({ active: e, onClick: t, title: n, children: r }) => /* @__PURE__ */
       padding: "4px 8px",
       borderRadius: 6,
       fontSize: 12,
-      border: `1px solid ${e ? "#6366f1" : "#334155"}`,
+      border: `1px solid ${e ? "var(--nice-info, #6366f1)" : "var(--nice-text, #334155)"}`,
       background: e ? "rgba(99,102,241,.12)" : "rgba(15,23,42,.6)",
-      color: e ? "#e2e8f0" : "#cbd5e1",
+      color: e ? "var(--nice-border, #e2e8f0)" : "var(--nice-border, #cbd5e1)",
       cursor: "pointer",
       whiteSpace: "nowrap",
       lineHeight: 1.2
@@ -8069,10 +8146,10 @@ const dc = ({ active: e, onClick: t, title: n, children: r }) => /* @__PURE__ */
             // don't let the column stretch — each custom-fit
             gridAutoColumns: "max-content",
             gap: 6,
-            background: "rgba(2,6,23,.5)",
+            background: "var(--nice-overlay-50, rgba(2, 6, 23, 0.5))",
             padding: 6,
             borderRadius: 10,
-            border: "1px solid #334155",
+            border: "1px solid var(--nice-text, #334155)",
             backdropFilter: "blur(2px)",
             // keep panel at the right edge
             justifyItems: "end",
@@ -8122,10 +8199,10 @@ const pc = ({ vu: e, hide: t }) => {
         bottom: 10,
         display: "flex",
         gap: 2,
-        background: "rgba(2,6,23,.5)",
+        background: "var(--nice-overlay-50, rgba(2, 6, 23, 0.5))",
         padding: "6px 8px",
         borderRadius: 8,
-        border: "1px solid #334155",
+        border: "1px solid var(--nice-text, #334155)",
         backdropFilter: "blur(2px)",
         pointerEvents: "none",
         zIndex: 9998
@@ -8139,7 +8216,7 @@ const pc = ({ vu: e, hide: t }) => {
               width: 6,
               height: 18,
               borderRadius: 2,
-              background: o < r ? `hsl(${i}, 80%, 50%)` : "#1f2937"
+              background: o < r ? `hsl(${i}, 80%, 50%)` : "var(--nice-text, #1f2937)"
             }
           },
           o
@@ -8596,7 +8673,7 @@ const yc = "var(--text-dim, #94a3b8)", bc = ({ active: e, onClick: t, title: n,
         }
       } else if (p === "waveform") {
         const A = T.current;
-        K.lineWidth = 2, K.strokeStyle = "#c7d2fe", K.beginPath();
+        K.lineWidth = 2, K.strokeStyle = "var(--nice-primary-light, #c7d2fe)", K.beginPath();
         const R = oe / A.length;
         for (let P = 0; P < A.length; P++) {
           const M = (A[P] - 128) / 128, I = P * R, F = W / 2 + M * (W * 0.45);
@@ -8611,7 +8688,7 @@ const yc = "var(--text-dim, #94a3b8)", bc = ({ active: e, onClick: t, title: n,
             K.fillStyle = `hsl(${se}, ${ie}%, ${re}%)`, K.fillRect(H * P, F * M, Math.ceil(P), Math.ceil(M));
           }
       }
-      K.strokeStyle = getComputedStyle(document.documentElement).getPropertyValue("--waveform-stroke") || "#c7d2fe", g.current = requestAnimationFrame(j);
+      K.strokeStyle = getComputedStyle(document.documentElement).getPropertyValue("--waveform-stroke") || "var(--nice-primary-light, #c7d2fe)", g.current = requestAnimationFrame(j);
     }, Q = () => {
       var oe;
       const J = x.current, K = Math.max(1, Math.floor(window.devicePixelRatio || 1));
@@ -8634,10 +8711,10 @@ const yc = "var(--text-dim, #94a3b8)", bc = ({ active: e, onClick: t, title: n,
           bottom: 10,
           display: "flex",
           gap: 2,
-          background: "rgba(2,6,23,.5)",
+          background: "var(--nice-overlay-50, rgba(2, 6, 23, 0.5))",
           padding: "6px 8px",
           borderRadius: 8,
-          border: "1px solid #334155",
+          border: "1px solid var(--nice-text, #334155)",
           backdropFilter: "blur(2px)"
         },
         children: Array.from({ length: $ }).map((L, j) => {
@@ -8649,7 +8726,7 @@ const yc = "var(--text-dim, #94a3b8)", bc = ({ active: e, onClick: t, title: n,
                 width: 6,
                 height: 18,
                 borderRadius: 2,
-                background: j < D ? `hsl(${Q}, 80%, 50%)` : "#1f2937"
+                background: j < D ? `hsl(${Q}, 80%, 50%)` : "var(--nice-text, #1f2937)"
               }
             },
             j
@@ -8678,7 +8755,7 @@ const yc = "var(--text-dim, #94a3b8)", bc = ({ active: e, onClick: t, title: n,
               placeItems: "center",
               background: "transparent"
             },
-            children: /* @__PURE__ */ d("div", { style: { textAlign: "center", color: "#e2e8f0" }, children: a ? /* @__PURE__ */ d("img", { alt: "cover", src: a, style: { height: r - 24, objectFit: "contain" } }) : /* @__PURE__ */ v("div", { style: { opacity: 0.8 }, children: [
+            children: /* @__PURE__ */ d("div", { style: { textAlign: "center", color: "var(--nice-border, #e2e8f0)" }, children: a ? /* @__PURE__ */ d("img", { alt: "cover", src: a, style: { height: r - 24, objectFit: "contain" } }) : /* @__PURE__ */ v("div", { style: { opacity: 0.8 }, children: [
               /* @__PURE__ */ d("div", { style: { fontSize: 18, fontWeight: 600 }, children: o ?? "�" }),
               /* @__PURE__ */ d("div", { style: { marginTop: 8, fontSize: 12, color: yc }, children: s ?? i ?? "�" })
             ] }) })
@@ -8718,10 +8795,10 @@ const yc = "var(--text-dim, #94a3b8)", bc = ({ active: e, onClick: t, title: n,
                 right: 10,
                 display: "flex",
                 gap: 6,
-                background: "rgba(2,6,23,.5)",
+                background: "var(--nice-overlay-50, rgba(2, 6, 23, 0.5))",
                 padding: "6px",
                 borderRadius: 10,
-                border: "1px solid #334155",
+                border: "1px solid var(--nice-text, #334155)",
                 backdropFilter: "blur(2px)",
                 pointerEvents: "auto",
                 // �and ENABLE only for the switcher
@@ -8884,12 +8961,12 @@ const yc = "var(--text-dim, #94a3b8)", bc = ({ active: e, onClick: t, title: n,
       display: "grid",
       placeItems: "center",
       borderRadius: 6,
-      border: "1px solid #e5e7eb",
+      border: "1px solid var(--nice-border, #e5e7eb)",
       background: j ? "var(--active-bg, #eef2ff)" : "var(--bg, #fff)",
       opacity: L ? 1 : 0.35,
       cursor: L && S && !g ? "pointer" : "default",
       transition: "transform .05s ease"
-    }, z = D === "youtube" ? "#FF0000" : D === "spotify" ? "#1DB954" : D === "tidal" ? "#111827" : D === "hls" ? "#7C3AED" : "#374151", J = D === "youtube" ? "YouTube" : D === "spotify" ? "Spotify" : D === "tidal" ? "TIDAL" : D === "hls" ? "HLS" : "Audio", K = T("playlistItem.sourceLabel") + ": " + J + (j ? ` ${T("playlistItem.sourceSelected")}` : "");
+    }, z = D === "youtube" ? "var(--nice-danger, #ff0000)" : D === "spotify" ? "var(--nice-success, #1db954)" : D === "tidal" ? "var(--nice-text, #111827)" : D === "hls" ? "var(--nice-accent, #7c3aed)" : "var(--nice-text, #374151)", J = D === "youtube" ? "YouTube" : D === "spotify" ? "Spotify" : D === "tidal" ? "TIDAL" : D === "hls" ? "HLS" : "Audio", K = T("playlistItem.sourceLabel") + ": " + J + (j ? ` ${T("playlistItem.sourceSelected")}` : "");
     return /* @__PURE__ */ d(
       "button",
       {
@@ -9043,19 +9120,19 @@ const yc = "var(--text-dim, #94a3b8)", bc = ({ active: e, onClick: t, title: n,
   );
 }, wc = {
   width: 48,
-  border: "1px solid #e5e7eb",
+  border: "1px solid var(--nice-border, #e5e7eb)",
   borderRadius: 6,
   padding: "8px 6px",
   fontSize: 14,
   textAlign: "center"
 }, fr = {
   width: "100%",
-  border: "1px solid #e5e7eb",
+  border: "1px solid var(--nice-border, #e5e7eb)",
   borderRadius: 6,
   padding: "8px 10px",
   fontSize: 14
 }, Fn = {
-  border: "1px solid #d1d5db",
+  border: "1px solid var(--nice-border, #d1d5db)",
   background: "var(--bg, #fff)",
   padding: "6px 8px",
   borderRadius: 6,
@@ -9180,12 +9257,18 @@ const yc = "var(--text-dim, #94a3b8)", bc = ({ active: e, onClick: t, title: n,
   }, [c, s, p, a, k]);
   me(() => {
   }, [f.length, l]);
-  const z = i ?? /* @__PURE__ */ d("div", { style: { padding: "0.75rem", color: "#777", fontStyle: "italic" }, children: u("genericPlaylist.emptyState", "No songs. Add the first one below.") }), J = o ?? u("genericPlaylist.addSong", "Add song");
+  const z = i ?? /* @__PURE__ */ d(
+    "div",
+    {
+      style: { padding: "0.75rem", color: "var(--nice-text-secondary, #777)", fontStyle: "italic" },
+      children: u("genericPlaylist.emptyState", "No songs. Add the first one below.")
+    }
+  ), J = o ?? u("genericPlaylist.addSong", "Add song");
   return /* @__PURE__ */ v(
     "div",
     {
       className: "gp-container",
-      style: { border: "1px solid #e5e7eb", borderRadius: 8, padding: 12 },
+      style: { border: "1px solid var(--nice-border, #e5e7eb)", borderRadius: 8, padding: 12 },
       children: [
         /* @__PURE__ */ v(
           "div",
@@ -9204,8 +9287,8 @@ const yc = "var(--text-dim, #94a3b8)", bc = ({ active: e, onClick: t, title: n,
                   style: {
                     padding: "6px 10px",
                     borderRadius: 6,
-                    border: "1px solid #d1d5db",
-                    background: "#f9fafb"
+                    border: "1px solid var(--nice-border, #d1d5db)",
+                    background: "var(--nice-bg-secondary, #f9fafb)"
                   },
                   "aria-label": J,
                   children: [
@@ -9234,7 +9317,7 @@ const yc = "var(--text-dim, #94a3b8)", bc = ({ active: e, onClick: t, title: n,
                   onDrop: L(K.id),
                   onDragEnd: j,
                   style: {
-                    border: W ? "2px dashed #6366f1" : "2px solid transparent",
+                    border: W ? "2px dashed var(--nice-info, #6366f1)" : "2px solid transparent",
                     borderRadius: 8,
                     padding: W ? 4 : 0
                   },
@@ -9275,7 +9358,7 @@ const yc = "var(--text-dim, #94a3b8)", bc = ({ active: e, onClick: t, title: n,
           }
         ),
         c && !s && /* @__PURE__ */ d("div", { style: { marginTop: 12 }, children: /* @__PURE__ */ v("details", { children: [
-          /* @__PURE__ */ d("summary", { style: { cursor: "pointer", color: "#374151" }, children: u("genericPlaylist.bulkPasteSummary", "Paste multiple items at once") }),
+          /* @__PURE__ */ d("summary", { style: { cursor: "pointer", color: "var(--nice-text, #374151)" }, children: u("genericPlaylist.bulkPasteSummary", "Paste multiple items at once") }),
           /* @__PURE__ */ v("div", { style: { marginTop: 6 }, children: [
             /* @__PURE__ */ d(
               "textarea",
@@ -9292,7 +9375,7 @@ OR: Artist;Title;Version`
                 rows: 3,
                 style: {
                   width: "100%",
-                  border: "1px solid #e5e7eb",
+                  border: "1px solid var(--nice-border, #e5e7eb)",
                   borderRadius: 6,
                   padding: 8,
                   fontFamily: "inherit"
@@ -9309,7 +9392,7 @@ OR: Artist;Title;Version`
                   marginTop: 6
                 },
                 children: [
-                  /* @__PURE__ */ d("div", { style: { color: "#6b7280", fontSize: 12 }, children: u(
+                  /* @__PURE__ */ d("div", { style: { color: "var(--nice-text-secondary, #6b7280)", fontSize: 12 }, children: u(
                     "genericPlaylist.bulkPasteHint",
                     "Each line will be added as a separate song."
                   ) }),
@@ -9322,8 +9405,8 @@ OR: Artist;Title;Version`
                       style: {
                         padding: "6px 10px",
                         borderRadius: 6,
-                        border: "1px solid #d1d5db",
-                        background: "#f9fafb"
+                        border: "1px solid var(--nice-border, #d1d5db)",
+                        background: "var(--nice-bg-secondary, #f9fafb)"
                       },
                       children: u("genericPlaylist.addFromList", "Add from list")
                     }
@@ -9337,24 +9420,24 @@ OR: Artist;Title;Version`
     }
   );
 }, Ta = [
-  "#ef4444",
-  "#f97316",
-  "#f59e0b",
-  "#eab308",
-  "#84cc16",
-  "#22c55e",
-  "#14b8a6",
-  "#06b6d4",
-  "#3b82f6",
-  "#6366f1",
-  "#8b5cf6",
-  "#a855f7",
-  "#d946ef",
-  "#ec4899",
-  "#f43f5e",
+  "var(--nice-danger, #ef4444)",
+  "var(--nice-warning, #f97316)",
+  "var(--nice-warning, #f59e0b)",
+  "var(--nice-warning, #eab308)",
+  "var(--nice-success, #84cc16)",
+  "var(--nice-success, #22c55e)",
+  "var(--nice-info, #14b8a6)",
+  "var(--nice-info, #06b6d4)",
+  "var(--nice-primary, #3b82f6)",
+  "var(--nice-info, #6366f1)",
+  "var(--nice-accent, #8b5cf6)",
+  "var(--nice-accent, #a855f7)",
+  "var(--nice-accent-pink, #d946ef)",
+  "var(--nice-accent-pink, #ec4899)",
+  "var(--nice-danger, #f43f5e)",
   "#78716c",
-  "#64748b",
-  "#000000"
+  "var(--nice-text-secondary, #64748b)",
+  "var(--nice-text, #000000)"
 ], _n = [
   "??",
   "??",
@@ -10345,7 +10428,7 @@ const Nc = ({ rule: e, onChange: t, onRemove: n }) => /* @__PURE__ */ v("div", {
                           borderRadius: 8,
                           padding: 8,
                           zIndex: 100,
-                          boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
+                          boxShadow: "0 4px 12px var(--nice-overlay-10, rgba(0, 0, 0, 0.1))",
                           minWidth: 140
                         },
                         children: [
@@ -10779,9 +10862,9 @@ function Eo() {
   );
 }
 const Oc = st.scoped("PlaylistList"), Fc = {
-  border: "1px solid #e5e7eb",
+  border: "1px solid var(--nice-border, #e5e7eb)",
   borderRadius: 8,
-  background: "#fff"
+  background: "var(--nice-bg, #fff)"
 }, zc = { ...Fc, padding: "8px 10px", cursor: "pointer" }, Lo = {
   border: "1px solid var(--border-light, #d1d5db)",
   borderRadius: 8,
@@ -10803,7 +10886,12 @@ const Oc = st.scoped("PlaylistList"), Fc = {
           placeholder: r("playlistList.playlistName", "Playlist name..."),
           value: o,
           onChange: (l) => i(l.target.value),
-          style: { flex: 1, border: "1px solid #d1d5db", borderRadius: 8, padding: "6px 10px" },
+          style: {
+            flex: 1,
+            border: "1px solid var(--nice-border, #d1d5db)",
+            borderRadius: 8,
+            padding: "6px 10px"
+          },
           "aria-label": "Playlist name"
         }
       ),
@@ -10930,7 +11018,7 @@ const Oc = st.scoped("PlaylistList"), Fc = {
           /* @__PURE__ */ v("div", { children: [
             e == null ? void 0 : e({
               placeholder: s("playlistBrowser.searchAndAdd", "Search and add to playlist..."),
-              onPick: (y) => {
+              onSelect: (y) => {
                 c && b(c, [Na(y)]);
               }
             }),
@@ -10945,7 +11033,7 @@ const Oc = st.scoped("PlaylistList"), Fc = {
                 onChange: (y) => f(y.target.value),
                 style: {
                   width: "100%",
-                  border: "1px solid #d1d5db",
+                  border: "1px solid var(--nice-border, #d1d5db)",
                   borderRadius: 8,
                   padding: "6px 10px",
                   marginTop: 10
@@ -10955,7 +11043,7 @@ const Oc = st.scoped("PlaylistList"), Fc = {
           ] }),
           t == null ? void 0 : t({
             query: h,
-            onPick: (y) => {
+            onSelect: (y) => {
               c && b(c, [Na(y)]);
             }
           }),
@@ -11453,7 +11541,7 @@ const Do = (e, t = null) => e.filter((n) => n.parentId === t).sort((n, r) => n.s
                 /* @__PURE__ */ d(
                   "button",
                   {
-                    style: { ...O, color: "#ef4444" },
+                    style: { ...O, color: "var(--nice-danger, #ef4444)" },
                     onClick: () => m(ee),
                     children: "?"
                   }
@@ -11464,7 +11552,7 @@ const Do = (e, t = null) => e.filter((n) => n.parentId === t).sort((n, r) => n.s
                   style: {
                     ...O,
                     background: fe.color,
-                    color: "#fff",
+                    color: "var(--nice-bg, #fff)",
                     borderRadius: 4,
                     padding: "2px 8px"
                   },
@@ -11639,7 +11727,7 @@ const Do = (e, t = null) => e.filter((n) => n.parentId === t).sort((n, r) => n.s
               transition: "box-shadow 0.15s, transform 0.15s"
             },
             onMouseEnter: (f) => {
-              f.currentTarget.style.boxShadow = "0 4px 12px rgba(0,0,0,0.08)", f.currentTarget.style.transform = "translateY(-1px)";
+              f.currentTarget.style.boxShadow = "0 4px 12px var(--nice-overlay-8, rgba(0, 0, 0, 0.08))", f.currentTarget.style.transform = "translateY(-1px)";
             },
             onMouseLeave: (f) => {
               f.currentTarget.style.boxShadow = "none", f.currentTarget.style.transform = "none";
@@ -11723,7 +11811,7 @@ const Do = (e, t = null) => e.filter((n) => n.parentId === t).sort((n, r) => n.s
     value: wt.Library,
     label: "Library",
     icon: "??",
-    hex: "#6366f1",
+    hex: "var(--nice-info, #6366f1)",
     css: "var(--source-library, #6366f1)",
     cssBg: "var(--source-library-bg, #6366f118)"
   },
@@ -11731,7 +11819,7 @@ const Do = (e, t = null) => e.filter((n) => n.parentId === t).sort((n, r) => n.s
     value: wt.Spotify,
     label: "Spotify",
     icon: "??",
-    hex: "#1db954",
+    hex: "var(--nice-success, #1db954)",
     css: "var(--source-spotify, #1db954)",
     cssBg: "var(--source-spotify-bg, #1db95418)"
   },
@@ -11739,7 +11827,7 @@ const Do = (e, t = null) => e.filter((n) => n.parentId === t).sort((n, r) => n.s
     value: wt.Tidal,
     label: "Tidal",
     icon: "?",
-    hex: "#000000",
+    hex: "var(--nice-text, #000000)",
     css: "var(--source-tidal, #000000)",
     cssBg: "var(--source-tidal-bg, #00000018)"
   },
@@ -11747,7 +11835,7 @@ const Do = (e, t = null) => e.filter((n) => n.parentId === t).sort((n, r) => n.s
     value: wt.YouTube,
     label: "YouTube",
     icon: "??",
-    hex: "#ff0000",
+    hex: "var(--nice-danger, #ff0000)",
     css: "var(--source-youtube, #ff0000)",
     cssBg: "var(--source-youtube-bg, #ff000018)"
   },
@@ -12079,7 +12167,7 @@ const Do = (e, t = null) => e.filter((n) => n.parentId === t).sort((n, r) => n.s
   borderRadius: 6,
   border: "none",
   background: "var(--accent, #6366f1)",
-  color: "#fff",
+  color: "var(--nice-bg, #fff)",
   cursor: "pointer",
   fontWeight: 600
 }, Gn = {
@@ -12697,11 +12785,11 @@ function ed(e) {
   return t ? (0.299 * t.r + 0.587 * t.g + 0.114 * t.b) / 255 : 1;
 }
 function _o() {
-  const e = Oa("--text-primary") || "rgba(255,255,255,0.95)", t = Oa("--nav-active") || "goldenrod", n = document.documentElement.getAttribute("data-theme") === "dark", a = ed(e) < 0.45;
+  const e = Oa("--text-primary") || "var(--nice-overlay-light-95, rgba(255, 255, 255, 0.95))", t = Oa("--nav-active") || "goldenrod", n = document.documentElement.getAttribute("data-theme") === "dark", a = ed(e) < 0.45;
   return {
     base: gr(e, 0.92),
     staffLine: gr(e, 0.22),
-    outline: a ? "rgba(255,255,255,0.75)" : "rgba(0,0,0,0.55)",
+    outline: a ? "var(--nice-overlay-light-75, rgba(255, 255, 255, 0.75))" : "var(--nice-overlay-55, rgba(0, 0, 0, 0.55))",
     accents: [gr(t, 0.95)],
     isDark: n,
     notesDark: a
@@ -14888,7 +14976,9 @@ function ef(e = {}) {
   };
 }
 function Ho(e) {
-  const t = X(null), n = X(/* @__PURE__ */ new Map()), r = X(1), a = G(() => {
+  const t = X(null), n = X(
+    /* @__PURE__ */ new Map()
+  ), r = X(1), a = G(() => {
     if (!t.current) {
       const i = e();
       i.onmessage = (s) => {
@@ -15634,19 +15724,19 @@ function pf(e, t, n) {
   return Math.max(0, Math.round(t - a));
 }
 const jo = {
-  crepe: "#a78bfa",
-  librosa: "#34d399",
-  pitchy: "#60a5fa",
-  autocorr: "#555555"
+  crepe: "var(--nice-accent, #a78bfa)",
+  librosa: "var(--nice-success-light, #34d399)",
+  pitchy: "var(--nice-primary-light, #60a5fa)",
+  autocorr: "var(--nice-text-secondary, #555555)"
 };
 function ff(e) {
   return e === "autocorr" ? "Ultrastar" : e.charAt(0).toUpperCase() + e.slice(1);
 }
 function mf(e) {
-  return jo[e] ?? "#555555";
+  return jo[e] ?? "var(--nice-text-secondary, #555555)";
 }
 function gf(e) {
-  const t = jo[e] ?? "#555555";
+  const t = jo[e] ?? "var(--nice-text-secondary, #555555)";
   return `var(--algo-${e}, ${t})`;
 }
 function yf(e, t) {
@@ -17635,44 +17725,44 @@ function Jf(e = {}) {
 }
 var Hu = /* @__PURE__ */ ((e) => (e[e.Ultrastar = 0] = "Ultrastar", e))(Hu || {}), It = /* @__PURE__ */ ((e) => (e.Unknown = "Unknown", e.Dimmer = "Dimmer", e.DimmerWithOff = "DimmerWithOff", e.RotationWithOff = "RotationWithOff", e.RotationWithOffAndCcw = "RotationWithOffAndCcw", e.Options = "Options", e))(It || {}), ju = /* @__PURE__ */ ((e) => (e[e.Equalizer = 0] = "Equalizer", e[e.Compressor = 1] = "Compressor", e[e.Reverb = 2] = "Reverb", e[e.Delay = 3] = "Delay", e[e.Distortion = 4] = "Distortion", e[e.Chorus = 5] = "Chorus", e[e.Flanger = 6] = "Flanger", e[e.Phaser = 7] = "Phaser", e))(ju || {}), Ku = /* @__PURE__ */ ((e) => (e[e.ReadOnly = 0] = "ReadOnly", e[e.Edit = 1] = "Edit", e[e.Owner = 2] = "Owner", e))(Ku || {});
 const e0 = [
-  "#4caf50",
-  "#2196f3",
-  "#ff9800",
-  "#e91e63",
-  "#9c27b0",
-  "#00bcd4",
-  "#8bc34a",
-  "#ffc107"
+  "var(--nice-success, #4caf50)",
+  "var(--nice-primary, #2196f3)",
+  "var(--nice-warning, #ff9800)",
+  "var(--nice-accent-pink, #e91e63)",
+  "var(--nice-accent, #9c27b0)",
+  "var(--nice-info, #00bcd4)",
+  "var(--nice-success, #8bc34a)",
+  "var(--nice-warning, #ffc107)"
 ], Xt = [
-  "#2196f3",
+  "var(--nice-primary, #2196f3)",
   // blue
-  "#e53935",
+  "var(--nice-danger, #e53935)",
   // red
-  "#ffeb3b",
+  "var(--nice-warning, #ffeb3b)",
   // yellow
-  "#43a047",
+  "var(--nice-success, #43a047)",
   // green
-  "#ff9800",
+  "var(--nice-warning, #ff9800)",
   // orange
-  "#9c27b0",
+  "var(--nice-accent, #9c27b0)",
   // purple
-  "#00bcd4",
+  "var(--nice-info, #00bcd4)",
   // cyan
-  "#ffc107",
+  "var(--nice-warning, #ffc107)",
   // amber
-  "#8bc34a",
+  "var(--nice-success, #8bc34a)",
   // lime green
-  "#f44336",
+  "var(--nice-danger, #f44336)",
   // crimson
-  "#3f51b5",
+  "var(--nice-accent, #3f51b5)",
   // indigo
-  "#607d8b",
+  "var(--nice-text-secondary, #607d8b)",
   // blue-grey
-  "#795548",
+  "var(--nice-warning-dark, #795548)",
   // brown
-  "#cddc39",
+  "var(--nice-warning, #cddc39)",
   // lime
-  "#673ab7",
+  "var(--nice-accent, #673ab7)",
   // deep purple
   "#009688"
   // teal
@@ -17706,7 +17796,7 @@ const nr = ["off", "no function", "brak"], Yu = (e) => e.segments.some((t) => t.
     "div",
     {
       className: "ntd-dmx-channel",
-      style: { border: "1px solid #e5e7eb", borderRadius: 8, padding: 12 },
+      style: { border: "1px solid var(--nice-border, #e5e7eb)", borderRadius: 8, padding: 12 },
       children: [
         /* @__PURE__ */ v("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 6 }, children: [
           /* @__PURE__ */ v("strong", { children: [
@@ -17714,7 +17804,7 @@ const nr = ["off", "no function", "brak"], Yu = (e) => e.segments.some((t) => t.
             ". ",
             e.name
           ] }),
-          a && s && /* @__PURE__ */ d("span", { style: { fontSize: 12, color: "#6b7280" }, children: s.name })
+          a && s && /* @__PURE__ */ d("span", { style: { fontSize: 12, color: "var(--nice-text-secondary, #6b7280)" }, children: s.name })
         ] }),
         /* @__PURE__ */ d(
           "input",
@@ -17744,7 +17834,12 @@ const nr = ["off", "no function", "brak"], Yu = (e) => e.segments.some((t) => t.
               i(u), n(u);
             },
             onBlur: () => r == null ? void 0 : r(o),
-            style: { width: 80, padding: 6, border: "1px solid #d1d5db", borderRadius: 6 }
+            style: {
+              width: 80,
+              padding: 6,
+              border: "1px solid var(--nice-border, #d1d5db)",
+              borderRadius: 6
+            }
           }
         ) }),
         Yu(e) && /* @__PURE__ */ d(
@@ -17757,8 +17852,8 @@ const nr = ["off", "no function", "brak"], Yu = (e) => e.segments.some((t) => t.
               marginTop: 8,
               padding: "6px 10px",
               borderRadius: 6,
-              border: "1px solid #d1d5db",
-              background: "#f9fafb",
+              border: "1px solid var(--nice-border, #d1d5db)",
+              background: "var(--nice-bg-secondary, #f9fafb)",
               cursor: "pointer"
             },
             children: "OFF"
@@ -17787,7 +17882,7 @@ const nr = ["off", "no function", "brak"], Yu = (e) => e.segments.some((t) => t.
     "div",
     {
       className: "ntd-dmx-channel",
-      style: { border: "1px solid #e5e7eb", borderRadius: 8, padding: 12 },
+      style: { border: "1px solid var(--nice-border, #e5e7eb)", borderRadius: 8, padding: 12 },
       children: [
         /* @__PURE__ */ v("strong", { children: [
           e.channel,
@@ -17815,8 +17910,8 @@ const nr = ["off", "no function", "brak"], Yu = (e) => e.segments.some((t) => t.
                   style: {
                     padding: "8px 10px",
                     borderRadius: 8,
-                    border: l ? "2px solid #2563eb" : "1px solid #d1d5db",
-                    background: l ? "#eff6ff" : "#fff",
+                    border: l ? "2px solid var(--nice-primary-hover, #2563eb)" : "1px solid var(--nice-border, #d1d5db)",
+                    background: l ? "var(--nice-primary-bg, #eff6ff)" : "var(--nice-bg, #fff)",
                     textAlign: "left",
                     cursor: "pointer",
                     overflow: "hidden",
@@ -17932,7 +18027,12 @@ function r0({
                   {
                     value: (c == null ? void 0 : c.serialNumber) || "",
                     onChange: ($) => u(s.find((D) => D.serialNumber === $.target.value) ?? null),
-                    style: { width: "100%", padding: 8, borderRadius: 6, border: "1px solid #d1d5db" },
+                    style: {
+                      width: "100%",
+                      padding: 8,
+                      borderRadius: 6,
+                      border: "1px solid var(--nice-border, #d1d5db)"
+                    },
                     children: s.map(($) => {
                       var D, L;
                       return /* @__PURE__ */ v("option", { value: $.serialNumber, children: [
@@ -17946,12 +18046,18 @@ function r0({
                     })
                   }
                 ),
-                q && /* @__PURE__ */ v("div", { style: { marginTop: 6, fontSize: 12, color: "#6b7280" }, children: [
-                  "Mode: ",
-                  /* @__PURE__ */ d("b", { children: q.modeName }),
-                  ", footprint: ",
-                  /* @__PURE__ */ d("b", { children: q.footprint })
-                ] })
+                q && /* @__PURE__ */ v(
+                  "div",
+                  {
+                    style: { marginTop: 6, fontSize: 12, color: "var(--nice-text-secondary, #6b7280)" },
+                    children: [
+                      "Mode: ",
+                      /* @__PURE__ */ d("b", { children: q.modeName }),
+                      ", footprint: ",
+                      /* @__PURE__ */ d("b", { children: q.footprint })
+                    ]
+                  }
+                )
               ] }),
               /* @__PURE__ */ d(
                 "button",
@@ -17961,8 +18067,8 @@ function r0({
                   style: {
                     padding: "10px 14px",
                     borderRadius: 8,
-                    border: "1px solid #10b981",
-                    background: "#ecfdf5",
+                    border: "1px solid var(--nice-success, #10b981)",
+                    background: "var(--nice-success-bg, #ecfdf5)",
                     cursor: "pointer"
                   },
                   children: "Open port"
@@ -17976,8 +18082,8 @@ function r0({
                   style: {
                     padding: "10px 14px",
                     borderRadius: 8,
-                    border: "1px solid #ef4444",
-                    background: "#fef2f2",
+                    border: "1px solid var(--nice-danger, #ef4444)",
+                    background: "var(--nice-danger-bg, #fef2f2)",
                     cursor: "pointer"
                   },
                   children: "Close port"
@@ -17990,8 +18096,8 @@ function r0({
                   style: {
                     padding: "10px 14px",
                     borderRadius: 8,
-                    border: "1px solid #4b5563",
-                    background: "#f3f4f6",
+                    border: "1px solid var(--nice-text-secondary, #4b5563)",
+                    background: "var(--nice-bg-secondary, #f3f4f6)",
                     cursor: "pointer"
                   },
                   children: "Blackout"
@@ -18020,7 +18126,12 @@ function r0({
                     max: 44,
                     value: m,
                     onChange: ($) => p(Number($.target.value)),
-                    style: { width: "100%", padding: 8, borderRadius: 6, border: "1px solid #d1d5db" }
+                    style: {
+                      width: "100%",
+                      padding: 8,
+                      borderRadius: 6,
+                      border: "1px solid var(--nice-border, #d1d5db)"
+                    }
                   }
                 )
               ] }),
@@ -18034,7 +18145,12 @@ function r0({
                     max: 255,
                     value: b,
                     onChange: ($) => x(Sr(Number($.target.value))),
-                    style: { width: "100%", padding: 8, borderRadius: 6, border: "1px solid #d1d5db" }
+                    style: {
+                      width: "100%",
+                      padding: 8,
+                      borderRadius: 6,
+                      border: "1px solid var(--nice-border, #d1d5db)"
+                    }
                   }
                 )
               ] }),
@@ -18045,8 +18161,8 @@ function r0({
                   style: {
                     padding: "10px 14px",
                     borderRadius: 8,
-                    border: "1px solid #3b82f6",
-                    background: "#eff6ff",
+                    border: "1px solid var(--nice-primary, #3b82f6)",
+                    background: "var(--nice-primary-bg, #eff6ff)",
                     cursor: "pointer"
                   },
                   children: "Apply configuration"
@@ -18558,7 +18674,7 @@ const d0 = ({
         style: {
           left: F,
           width: H,
-          backgroundColor: (te == null ? void 0 : te.color) || I.color || "#8b5cf6"
+          backgroundColor: (te == null ? void 0 : te.color) || I.color || "var(--nice-accent, #8b5cf6)"
         },
         onClick: (ne) => {
           ne.stopPropagation(), T(M.id);
@@ -18669,7 +18785,7 @@ const d0 = ({
                 "span",
                 {
                   className: "nice-dmx-timeline__track-color",
-                  style: { backgroundColor: M.color || "#8b5cf6" }
+                  style: { backgroundColor: M.color || "var(--nice-accent, #8b5cf6)" }
                 }
               ),
               /* @__PURE__ */ d("span", { className: "nice-dmx-timeline__track-name", children: M.name }),
@@ -19035,7 +19151,7 @@ function p0({
     const H = () => {
       q.current = requestAnimationFrame(H), F.clearRect(0, 0, I.width, I.height);
       const te = F.createLinearGradient(0, I.height, 0, 0);
-      if (te.addColorStop(0, "rgba(99,102,241,0.8)"), te.addColorStop(0.5, "rgba(168,85,247,0.6)"), te.addColorStop(1, "rgba(236,72,153,0.4)"), !g.isPlaying) {
+      if (te.addColorStop(0, "var(--nice-accent-tint-80, rgba(99, 102, 241, 0.8))"), te.addColorStop(0.5, "rgba(168,85,247,0.6)"), te.addColorStop(1, "rgba(236,72,153,0.4)"), !g.isPlaying) {
         const re = I.width / 32;
         for (let O = 0; O < 32; O++) {
           const Y = 4 + Math.sin(Date.now() / 1e3 + O * 0.3) * 3;
@@ -19333,7 +19449,7 @@ const dh = qe.forwardRef(function(t, n) {
     width: a = 300,
     height: o = 100,
     barCount: i = 32,
-    barColor: s = "#3b82f6",
+    barColor: s = "var(--nice-primary, #3b82f6)",
     backgroundColor: l = "transparent",
     fftSize: c = 256,
     smoothing: u = 0.8,
@@ -19508,34 +19624,34 @@ const dh = qe.forwardRef(function(t, n) {
   gap: 8,
   padding: 12,
   borderRadius: 12,
-  boxShadow: "0 4px 20px rgba(0, 0, 0, 0.15)",
+  boxShadow: "0 4px 20px var(--nice-overlay-15, rgba(0, 0, 0, 0.15))",
   fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
   fontSize: 14,
   minWidth: 200,
   maxWidth: 280,
   transition: "all 0.2s ease"
 }, hh = {
-  background: "rgba(255, 255, 255, 0.95)",
-  text: "#1a1a1a",
-  textSecondary: "#666",
-  border: "rgba(0, 0, 0, 0.1)",
-  speakingRing: "#22c55e",
-  mutedBg: "#fee2e2",
-  mutedIcon: "#ef4444",
-  activeBg: "#dcfce7",
-  activeIcon: "#22c55e",
-  hoverBg: "rgba(0, 0, 0, 0.05)"
+  background: "var(--nice-overlay-light-95, rgba(255, 255, 255, 0.95))",
+  text: "var(--nice-bg, #1a1a1a)",
+  textSecondary: "var(--nice-text-secondary, #666)",
+  border: "var(--nice-overlay-10, rgba(0, 0, 0, 0.1))",
+  speakingRing: "var(--nice-success, #22c55e)",
+  mutedBg: "var(--nice-danger-bg, #fee2e2)",
+  mutedIcon: "var(--nice-danger, #ef4444)",
+  activeBg: "var(--nice-success-bg, #dcfce7)",
+  activeIcon: "var(--nice-success, #22c55e)",
+  hoverBg: "var(--nice-overlay-5, rgba(0, 0, 0, 0.05))"
 }, ph = {
   background: "rgba(30, 30, 30, 0.95)",
-  text: "#ffffff",
-  textSecondary: "#a0a0a0",
-  border: "rgba(255, 255, 255, 0.1)",
-  speakingRing: "#22c55e",
-  mutedBg: "#7f1d1d",
-  mutedIcon: "#fca5a5",
+  text: "var(--nice-bg, #fff)",
+  textSecondary: "var(--nice-text-muted, #a0a0a0)",
+  border: "var(--nice-overlay-light-10, rgba(255, 255, 255, 0.1))",
+  speakingRing: "var(--nice-success, #22c55e)",
+  mutedBg: "var(--nice-danger-dark, #7f1d1d)",
+  mutedIcon: "var(--nice-danger-bg, #fca5a5)",
   activeBg: "#14532d",
-  activeIcon: "#86efac",
-  hoverBg: "rgba(255, 255, 255, 0.1)"
+  activeIcon: "var(--nice-success-light, #86efac)",
+  hoverBg: "var(--nice-overlay-light-10, rgba(255, 255, 255, 0.1))"
 }, y0 = qe.forwardRef(function(t, n) {
   const {
     userId: r,
@@ -19768,7 +19884,7 @@ const dh = qe.forwardRef(function(t, n) {
             width: 256,
             height: 32,
             barCount: 24,
-            barColor: E ? "#9ca3af" : ["#3b82f6", "#8b5cf6"],
+            barColor: E ? "var(--nice-text-muted, #9ca3af)" : ["var(--nice-primary, #3b82f6)", "var(--nice-accent, #8b5cf6)"],
             barGap: 3,
             barBorderRadius: 2,
             autoStart: !1,
@@ -19848,8 +19964,8 @@ const dh = qe.forwardRef(function(t, n) {
                 padding: "8px 12px",
                 borderRadius: 8,
                 border: "none",
-                backgroundColor: "#fef2f2",
-                color: "#dc2626",
+                backgroundColor: "var(--nice-danger-bg, #fef2f2)",
+                color: "var(--nice-danger-dark, #dc2626)",
                 cursor: "pointer",
                 display: "flex",
                 alignItems: "center",
@@ -19900,7 +20016,7 @@ const dh = qe.forwardRef(function(t, n) {
             borderRadius: "50%",
             border: "none",
             backgroundColor: j.background,
-            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+            boxShadow: "0 4px 12px var(--nice-overlay-15, rgba(0, 0, 0, 0.15))",
             cursor: "pointer",
             display: "flex",
             alignItems: "center",
@@ -19936,7 +20052,7 @@ const dh = qe.forwardRef(function(t, n) {
                   height: 20,
                   borderRadius: "50%",
                   backgroundColor: j.speakingRing,
-                  color: "#fff",
+                  color: "var(--nice-bg, #fff)",
                   fontSize: 11,
                   fontWeight: 600,
                   display: "flex",