deepsky 1.120.6 → 1.122.0

package/dist/index.css

@@ -1,12 +1,12 @@
 
 .ui-ai {
-&[data-v-433912cc] {
+&[data-v-6259fd70] {
     height: 100%;
     overflow-y: scroll;
     position: relative;
     user-select: auto;
 }
-.ai-dialogs-box[data-v-433912cc] {
+.ai-dialogs-box[data-v-6259fd70] {
         display: flex;
         flex-flow: column nowrap;
         justify-content: start;
@@ -15,7 +15,7 @@
         height: calc(100% - 45px);
 }
 .dialog-content {
-&[data-v-433912cc] {
+&[data-v-6259fd70] {
         padding: 8px 10px 8px 8px;
         overflow-y: scroll;
         overflow-x: hidden;
@@ -27,13 +27,13 @@
 }
 .question,
         .reply {
-&[data-v-433912cc] {
+&[data-v-6259fd70] {
             width: 100%;
             display: flex;
             gap: 8px;
             align-items: flex-start;
 }
-.content[data-v-433912cc] {
+.content[data-v-6259fd70] {
                 border-radius: 10px;
                 padding: 8px 12px;
                 max-width: 80%;
@@ -41,7 +41,7 @@
                 font-size: 14px;
                 word-break: break-all;
 }
-.iconfont[data-v-433912cc] {
+.iconfont[data-v-6259fd70] {
                 flex-shrink: 0;
                 width: 32px;
                 height: 32px;
@@ -54,35 +54,35 @@
 }
 }
 .question {
-&[data-v-433912cc] {
+&[data-v-6259fd70] {
             justify-content: flex-end;
             flex-direction: row-reverse;
 }
-.content[data-v-433912cc] {
+.content[data-v-6259fd70] {
                 background: var(--ui-ai-question-bg);
                 color: var(--ui-ai-question-color);
                 border-bottom-right-radius: 2px;
 }
-.iconfont[data-v-433912cc] {
+.iconfont[data-v-6259fd70] {
                 background: var(--ui-ai-avatar-user-bg);
 }
 }
 .reply {
-&[data-v-433912cc] {
+&[data-v-6259fd70] {
             justify-content: flex-start;
 }
-.content[data-v-433912cc] {
+.content[data-v-6259fd70] {
                 background: var(--ui-ai-reply-bg);
                 color: var(--ui-ai-reply-color);
                 border-bottom-left-radius: 2px;
 }
-.iconfont[data-v-433912cc] {
+.iconfont[data-v-6259fd70] {
                 background: var(--ui-ai-avatar-ai-bg);
 }
 }
 }
 .send-box {
-&[data-v-433912cc] {
+&[data-v-6259fd70] {
         position: sticky;
         bottom: 0px;
         left: 0px;
@@ -91,19 +91,17 @@
         flex-shrink: 0;
         background: var(--ui-ai-send-box-bg);
         backdrop-filter: blur(8px);
-        border-top: var(--ui-ai-send-box-border);
-        box-shadow: var(--ui-ai-send-box-shadow);
         border-radius: 10px 10px 0 0;
 }
 .input-box {
-&[data-v-433912cc] {
+&[data-v-6259fd70] {
             display: flex;
             flex-flow: column nowrap;
             align-items: center;
             gap: 4px;
             padding: 6px;
 }
-.tools[data-v-433912cc] {
+.tools[data-v-6259fd70] {
                 display: flex;
                 flex-flow: row nowrap;
                 justify-content: flex-end;
@@ -116,7 +114,7 @@
                 padding: 3px 6px;
 }
 textarea {
-&[data-v-433912cc] {
+&[data-v-6259fd70] {
                 font-family: auto;
                 resize: none;
                 flex: 1;
@@ -133,13 +131,13 @@ textarea {
                 line-height: 1.6;
                 transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }
-&[data-v-433912cc]:focus {
+&[data-v-6259fd70]:focus {
                     border-color: var(--ui-base-input-border-focus);
                     box-shadow: var(--ui-base-input-shadow-focus);
 }
 }
 .iconfont {
-&[data-v-433912cc] {
+&[data-v-6259fd70] {
                 font-size: 22px;
                 padding: 5px;
                 border-radius: 6px;
@@ -147,7 +145,7 @@ textarea {
                 background: transparent;
                 transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease;
 }
-&[data-v-433912cc]:hover {
+&[data-v-6259fd70]:hover {
                     background: var(--ui-ai-tool-hover-bg);
                     color: var(--ui-ai-tool-hover-color);
                     transform: scale(1.1);
@@ -156,7 +154,7 @@ textarea {
 }
 }
 .sidebar-panel-toolbox {
-&[data-v-433912cc] {
+&[data-v-6259fd70] {
         background: var(--sidebar-panel-toolbox-bg);
         display: flex;
         align-items: center;
@@ -167,36 +165,36 @@ textarea {
         border-radius: 4px;
 }
 .iconfont {
-&[data-v-433912cc] {
+&[data-v-6259fd70] {
             font-size: var(--ui-icon-size-lv2);
             transition: color 0.2s ease, transform 0.15s ease;
 }
-&[data-v-433912cc]:hover {
+&[data-v-6259fd70]:hover {
                 color: var(--ui-catalogue-tools-hover-color);
                 transform: scale(1.1);
 }
 }
 .tip {
-&[data-v-433912cc] {
+&[data-v-6259fd70] {
             border-radius: 100px;
             padding: 0px 10px;
             border: 1px dashed;
 }
-&[data-v-433912cc]:hover {
+&[data-v-6259fd70]:hover {
                 background: var(--ui-hotkeys-hover-bg);
 }
 }
-.tools-icon[data-v-433912cc] {
+.tools-icon[data-v-6259fd70] {
             display: flex;
             align-items: center;
             gap: 10px;
 }
 .mode {
 .iconfont {
-&[data-v-433912cc] {
+&[data-v-6259fd70] {
                 font-size: var(--ui-icon-size-lv2);
 }
-&[data-v-433912cc]:hover {
+&[data-v-6259fd70]:hover {
                     color: var(--ui-catalogue-tools-hover-color);
 }
 }
@@ -208,12 +206,12 @@ textarea {
 
 
 .freeze {
-&[data-v-429b7cc9] {
+&[data-v-4ede6082] {
     background: var(--scope-freeze-bg) !important;
     border: var(--scope-freeze-border) !important;
     box-shadow: var(--scope-freeze-shadow) !important;
 }
-.scope-item[data-v-429b7cc9] {
+.scope-item[data-v-4ede6082] {
         transition: 0.2s;
         background: var(--scope-freeze-item-bg) !important;
         border: var(--scope-freeze-item-border) !important;
@@ -222,20 +220,17 @@ textarea {
 }
 }
 .note-scope {
-&[data-v-429b7cc9] {
+&[data-v-4ede6082] {
     transition: 0.2s;
     z-index: 7;
     position: fixed;
     background: var(--scope-bg);
     border: var(--scope-border);
     border-radius: 6px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
     box-shadow: var(--scope-shadow);
     box-sizing: border-box;
 }
-.scope-item[data-v-429b7cc9] {
+.scope-item[data-v-4ede6082] {
         transition: 0.2s;
         position: fixed;
         background: var(--scope-item-bg);
@@ -248,30 +243,30 @@ textarea {
         box-sizing: border-box;
         text-shadow: 0px 0px 2px #ffffff66;
         box-shadow: var(--scope-item-shadow);
-        animation: scope-item-in-429b7cc9 0.2s ease-out both;
+        animation: scope-item-in-4ede6082 0.2s ease-out both;
 }
 .iconbox {
-&[data-v-429b7cc9] {
+&[data-v-4ede6082] {
         display: flex;
         justify-content: space-evenly;
         align-items: center;
         width: 100%;
 }
 .iconfont {
-&[data-v-429b7cc9] {
+&[data-v-4ede6082] {
             transition: 0.3s;
             text-shadow: var(--scope-icon-shadow);
             cursor: pointer;
             color: var(--scope-icon-color);
 }
-&[data-v-429b7cc9]:hover {
+&[data-v-4ede6082]:hover {
                 color: var(--scope-icon-hover-color);
                 text-shadow: var(--scope-icon-hover-shadow);
 }
 }
 }
 }
-@keyframes scope-item-in-429b7cc9 {
+@keyframes scope-item-in-4ede6082 {
 from {
         opacity: 0;
         transform: scale(0.5);
@@ -338,7 +333,7 @@ to {
 
 
 .map-mini {
-&[data-v-91845cb2] {
+&[data-v-6a36cb14] {
     position: absolute;
     bottom: 42px;
     left: 10px;
@@ -349,7 +344,7 @@ to {
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
 }
 .map-mini-title {
-&[data-v-91845cb2] {
+&[data-v-6a36cb14] {
         display: flex;
         flex-flow: row nowrap;
         justify-content: space-between;
@@ -359,18 +354,18 @@ to {
         border-bottom: 1px solid var(--map-mini-border, #e2e8f0);
         user-select: none;
 }
-.map-mini-label[data-v-91845cb2] {
+.map-mini-label[data-v-6a36cb14] {
             font-size: 11px;
             color: var(--map-mini-title-color, #94a3b8);
             white-space: nowrap;
 }
 .scale-btns {
-&[data-v-91845cb2] {
+&[data-v-6a36cb14] {
             display: flex;
             gap: 1px;
 }
 button {
-&[data-v-91845cb2] {
+&[data-v-6a36cb14] {
                 padding: 1px 5px;
                 border: none;
                 border-radius: 3px;
@@ -383,10 +378,10 @@ button {
                     background 0.12s,
                     color 0.12s;
 }
-&[data-v-91845cb2]:hover {
+&[data-v-6a36cb14]:hover {
                     background: var(--map-mini-border, #e2e8f0);
 }
-&.active[data-v-91845cb2] {
+&.active[data-v-6a36cb14] {
                     background: var(--map-mini-title-color, #94a3b8);
                     color: var(--map-mini-bg, #fff);
 }
@@ -394,11 +389,11 @@ button {
 }
 }
 canvas {
-&[data-v-91845cb2] {
+&[data-v-6a36cb14] {
         display: block;
         cursor: grab;
 }
-&[data-v-91845cb2]:active {
+&[data-v-6a36cb14]:active {
             cursor: grabbing;
 }
 }
@@ -406,7 +401,7 @@ canvas {
 
 
 .map-status {
-&[data-v-183f92ee] {
+&[data-v-30d3f85c] {
     display: flex;
     flex-flow: row nowrap;
     gap: 10px;
@@ -415,38 +410,37 @@ canvas {
     left: 0px;
     margin: 10px;
 }
-.tool-item[data-v-183f92ee] {
-        background: var(--map-status-tools-bg);
+.tool-item[data-v-30d3f85c] {
         box-shadow: var(--map-status-tools-shadow);
         color: var(--map-status-tools-color);
         padding: 4px 8px;
         font-size: 14px;
 }
 .map-canvas {
-&[data-v-183f92ee] {
+&[data-v-30d3f85c] {
         border-radius: 4px;
         cursor: pointer;
         user-select: none;
         transition: background 0.15s;
 }
-&.active[data-v-183f92ee] {
+&.active[data-v-30d3f85c] {
             background: var(--map-status-active-bg, rgba(100, 160, 240, 0.18));
 }
 }
 .map-nodes {
-&[data-v-183f92ee] {
+&[data-v-30d3f85c] {
         border-radius: 4px;
         display: flex;
         justify-content: space-between;
         align-items: center;
         gap: 4px;
 }
-.iconfont[data-v-183f92ee] {
+.iconfont[data-v-30d3f85c] {
             cursor: pointer;
 }
 }
 .map-scale {
-&[data-v-183f92ee] {
+&[data-v-30d3f85c] {
         border-radius: 4px;
         display: flex;
         justify-content: space-between;
@@ -454,11 +448,11 @@ canvas {
         gap: 2px;
         padding: 0px 4px;
 }
-& > span[data-v-183f92ee] {
+& > span[data-v-30d3f85c] {
             padding: 4px;
             font-size: 14px;
 }
-.iconfont[data-v-183f92ee] {
+.iconfont[data-v-30d3f85c] {
             cursor: pointer;
 }
 }
@@ -1282,7 +1276,10 @@ input[data-v-13d4fd0e] {
 
 
 /* @import url("http://at.alicdn.com/t/c/font_4969407_yu0si81f92b.css"); */
-
+:root {
+    background: var(--page-bg);
+    color: var(--color);
+}
 * {
     margin: 0px;
     padding: 0px;
@@ -1370,47 +1367,53 @@ input[data-v-13d4fd0e] {
 }
 
 
-.cube-map[data-v-53b2d705] {
+.cube-map[data-v-4a2718d4] {
     position: relative;
     width: 100%;
     height: 100%;
 }
-
+.group-outbox {
+.node-outbox[data-v-4a2718d4] {
+        fill: var(--node-bg);
+        stroke: var(--node-hover-stroke);
+        stroke-width: 2;
+}
+}
 /* 硬件加速 */
-.group-nodes[data-v-53b2d705] {
+.group-nodes[data-v-4a2718d4] {
     transform: translateZ(1);
 }
 .group-linkers {
-&[data-v-53b2d705]{
+&[data-v-4a2718d4]{
     transform: translateZ(1);
     }
-path[data-v-53b2d705] {
+path[data-v-4a2718d4] {
         fill: none;
         filter: var(--linker-filter);
 }
 }
 .group-placeholder {
-&[data-v-53b2d705]{
+&[data-v-4a2718d4]{
     pointer-events: none;
     }
-.placeholder-linker[data-v-53b2d705] {
+.placeholder-linker[data-v-4a2718d4] {
         fill: none;
         filter: var(--linker-filter);
         stroke: var(--placeholder-linker-stroke);
         stroke-width: 2;
 }
-.placeholder-box-selector[data-v-53b2d705] {
+.placeholder-box-selector[data-v-4a2718d4] {
         stroke: var(--placeholder-box-selector-stroke);
         fill: var(--placeholder-box-selector-fill);
         stroke-width: 2;
 }
-.placeholder-line-delete[data-v-53b2d705] {
+.placeholder-line-delete[data-v-4a2718d4] {
         stroke-width: 2;
         fill: none;
         filter: drop-shadow(0px 0px 6px #ff7f7f);
 }
 }
-svg[data-v-53b2d705] {
+svg[data-v-4a2718d4] {
     width: 100%;
     height: 100%;
     position: absolute;
@@ -1827,12 +1830,12 @@ img[data-v-69532892] {
 }
 
 
-.cube-doc[data-v-4a9ebd38] {
+.cube-doc[data-v-5c77245d] {
     position: relative;
     font-family: var(--text-family);
     padding: 2px;
 }
-.cube-doc-footer[data-v-4a9ebd38] {
+.cube-doc-footer[data-v-5c77245d] {
     user-select: none;
     width: 100%;
     height: 50vh;
@@ -1946,7 +1949,7 @@ img[data-v-69532892] {
 
 
 /* SVG描边动画 */
-@keyframes dash-b2a878c4 {
+@keyframes dash-54f9b946 {
 from {
         stroke-dashoffset: 0px;
         stroke-dasharray: 3% 2%;
@@ -1957,42 +1960,42 @@ to {
 }
 }
 .cube-node {
-foreignObject[data-v-b2a878c4] {
+foreignObject[data-v-54f9b946] {
         border-radius: 4px;
         contain: layout;
         color: var(--color);
 }
-path[data-v-b2a878c4] {
+path[data-v-54f9b946] {
         fill: var(--fill, var(--node-bg));
         stroke-dasharray: var(--node-border-dash-array);
         transition: var(--map-transition-duration);
 }
-&:hover > path[data-v-b2a878c4] {
+&:hover > path[data-v-54f9b946] {
         stroke: var(--node-hover-stroke);
 }
-&[data-editing="true"] > path[data-v-b2a878c4] {
+&[data-editing="true"] > path[data-v-54f9b946] {
         stroke: black;
         stroke-width: 2;
 }
 }
 .node-selected {
-path[data-v-b2a878c4] {
+path[data-v-54f9b946] {
         stroke: var(--node-selected-stroke) !important;
         stroke-width: var(--node-selected-stroke-width);
         stroke-dasharray: none;
 }
 }
 .line-delete-selected {
-path[data-v-b2a878c4] {
+path[data-v-54f9b946] {
         fill: var(--linker-delete-selected-fill) !important;
         filter: var(--linker-delete-selected-filter);
 }
 }
 .node-dragging {
-&[data-v-b2a878c4] {
+&[data-v-54f9b946] {
     opacity: var(--node-dragging-opacity);
 }
-path[data-v-b2a878c4] {
+path[data-v-54f9b946] {
         stroke: var(--node-dragging-stroke) !important;
         stroke-width: var(--node-dragging-stroke-width);
         stroke-dasharray: none;
@@ -2000,14 +2003,14 @@ path[data-v-b2a878c4] {
 }
 }
 .node-editable {
-path[data-v-b2a878c4] {
+path[data-v-54f9b946] {
         /* fill: var(--node-editable-bg) !important; */
         filter: drop-shadow(0px 0px 20px var(--fill));
-        animation: dash-b2a878c4 24s linear infinite;
+        animation: dash-54f9b946 24s linear infinite;
 }
 }
 .cube-node-box {
-&[data-v-b2a878c4] {
+&[data-v-54f9b946] {
     margin: 0px !important;
     display: inline-block;
     min-width: var(--node-cbox-min-width);
@@ -2016,7 +2019,7 @@ path[data-v-b2a878c4] {
     transition: 0.2s;
 }
 .node-status {
-&[data-v-b2a878c4] {
+&[data-v-54f9b946] {
         display: flex;
         flex-flow: row wrap;
         align-items: center;
@@ -2026,19 +2029,19 @@ path[data-v-b2a878c4] {
         border: var(--node-status-border);
         background: var(--node-status-bg);
 }
-&[data-v-b2a878c4]:empty {
+&[data-v-54f9b946]:empty {
             display: none;
 }
-div[data-v-b2a878c4] {
+div[data-v-54f9b946] {
             cursor: pointer;
 }
-.status-fold[data-v-b2a878c4] {
+.status-fold[data-v-54f9b946] {
             border-radius: 4px;
             font-size: 10px;
             border: 1px dashed;
             padding: 1px 4px;
 }
-.iconfont[data-v-b2a878c4] {
+.iconfont[data-v-54f9b946] {
             cursor: pointer;
 }
 }
@@ -2135,7 +2138,7 @@ div[data-v-b2a878c4] {
 
 
 .cube-detail-list {
-&[data-v-e697f078] {
+&[data-v-a4ea0644] {
     --width-col1: 100px;
     --adjuster-bg: transparent;
     display: grid;
@@ -2147,15 +2150,15 @@ div[data-v-b2a878c4] {
     width: fit-content;
     max-width: 100%;
 }
-.cube-box[data-v-e697f078]:nth-child(odd) {
+.cube-box[data-v-a4ea0644]:nth-child(odd) {
         background: var(--detail-odd-bg);
 }
-.cube-box[data-v-e697f078]:nth-child(even) {
+.cube-box[data-v-a4ea0644]:nth-child(even) {
         background: var(--detail-even-bg);
         min-width: 100px;
 }
 .adder-wrap {
-&[data-v-e697f078] {
+&[data-v-a4ea0644] {
         display: flex;
         justify-content: center;
         align-items: center;
@@ -2164,14 +2167,14 @@ div[data-v-b2a878c4] {
         border-radius: 4px;
         cursor: pointer;
 }
-&>.adder[data-v-e697f078] {
+& > .adder[data-v-a4ea0644] {
             display: flex;
 }
-&:hover>.adder[data-v-e697f078] {
+&:hover > .adder[data-v-a4ea0644] {
             display: flex;
 }
 .adder {
-&[data-v-e697f078] {
+&[data-v-a4ea0644] {
             justify-content: center;
             align-items: center;
             background-color: var(--detail-adder-bg);
@@ -2180,7 +2183,7 @@ div[data-v-b2a878c4] {
             height: 20px;
             border-radius: 4px;
 }
-&[data-v-e697f078]::before {
+&[data-v-a4ea0644]::before {
                 content: "";
                 position: absolute;
                 border-radius: 10px;
@@ -2188,7 +2191,7 @@ div[data-v-b2a878c4] {
                 height: 2px;
                 background-color: #48cae4;
 }
-&[data-v-e697f078]::after {
+&[data-v-a4ea0644]::after {
                 content: "";
                 position: absolute;
                 border-radius: 10px;
@@ -2200,7 +2203,7 @@ div[data-v-b2a878c4] {
 }
 }
 .adjuster {
-&[data-v-e697f078] {
+&[data-v-a4ea0644] {
 
         position: absolute;
         left: calc(var(--width-col1) - 2px);
@@ -2211,7 +2214,7 @@ div[data-v-b2a878c4] {
         cursor: ew-resize;
         border-radius: 8px;
 }
-&[data-v-e697f078]:hover {
+&[data-v-a4ea0644]:hover {
             background: linear-gradient(0deg, #48cae4, deepskyblue);
 }
 }
@@ -2441,7 +2444,7 @@ div[data-v-b2a878c4] {
 }
 
 
-@keyframes slide-down-0c33f649 {
+@keyframes slide-down-3faf9e04 {
 from {
         /* height: 0px ;
         opacity: 0 ; */
@@ -2452,7 +2455,7 @@ to {
 }
 }
 .cube-code {
-&[data-v-0c33f649] {
+&[data-v-3faf9e04] {
     margin: 2px;
     text-align: left !important;
     position: relative;
@@ -2464,7 +2467,7 @@ to {
     overflow: hidden;
     break-inside: avoid;
 }
-.code-dragger[data-v-0c33f649] {
+.code-dragger[data-v-3faf9e04] {
         border-radius: 20px;
         width: 20px;
         aspect-ratio: 1;
@@ -2477,26 +2480,26 @@ to {
         cursor: nwse-resize;
 }
 .code-tabbar {
-&[data-v-0c33f649] {
+&[data-v-3faf9e04] {
         height: var(--code-tabbar-height);
         overflow: hidden;
 }
-.code-tabs-box[data-v-0c33f649] {
+.code-tabs-box[data-v-3faf9e04] {
             height: 100%;
 }
-.code-tab[data-v-0c33f649]:first-child {
+.code-tab[data-v-3faf9e04]:first-child {
             padding-left: 0px;
 }
 .code-tab {
-&[data-v-0c33f649] {
+&[data-v-3faf9e04] {
             transition: 0.5s;
             width: 160px;
             padding: 0px 2px;
 }
-&[data-v-0c33f649] > * {
+&[data-v-3faf9e04] > * {
                 pointer-events: var(--drag-item-point-event);
 }
-.code-tab-name[data-v-0c33f649] {
+.code-tab-name[data-v-3faf9e04] {
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
@@ -2506,14 +2509,14 @@ to {
                 background: var(--code-tabbar-item-bg);
                 color: var(--code-tabbar-item-color);
 }
-.code-active-tab[data-v-0c33f649] {
+.code-active-tab[data-v-3faf9e04] {
                 background: var(--code-tabbar-item-active-bg);
                 color: var(--code-tabbar-item-active-color);
 }
 }
 }
 .code-toolbar {
-&[data-v-0c33f649] {
+&[data-v-3faf9e04] {
         display: flex;
         justify-content: center;
         align-items: center;
@@ -2522,16 +2525,16 @@ to {
         background: var(--code-toolbar-bg);
 }
 .code-langs-box {
-&[data-v-0c33f649] {
+&[data-v-3faf9e04] {
             cursor: pointer;
             position: relative;
 }
-.code-active-lang[data-v-0c33f649] {
+.code-active-lang[data-v-3faf9e04] {
                 color: blueviolet;
                 cursor: pointer;
 }
 .code-langs {
-&[data-v-0c33f649] {
+&[data-v-3faf9e04] {
                 transition: 0.3s;
                 opacity: 0;
                 position: absolute;
@@ -2545,10 +2548,10 @@ to {
                 margin-top: 10px;
                 z-index: 2;
                 background: #ffffff59;
-                animation: 0.3s slide-down-0c33f649 forwards;
+                animation: 0.3s slide-down-3faf9e04 forwards;
 }
 .code-lang-item {
-&[data-v-0c33f649] {
+&[data-v-3faf9e04] {
                     padding: 5px;
                     margin: 2px;
                     cursor: pointer;
@@ -2557,26 +2560,26 @@ to {
                     text-overflow: ellipsis;
                     border-radius: 4px;
 }
-&[data-v-0c33f649]:hover {
+&[data-v-3faf9e04]:hover {
                         background: #bdbdbd66;
 }
 }
 }
 }
 .code-theme-box {
-&[data-v-0c33f649] {
+&[data-v-3faf9e04] {
             cursor: pointer;
             position: relative;
 }
-.code-active-theme[data-v-0c33f649]:hover {
+.code-active-theme[data-v-3faf9e04]:hover {
                 color: var(--code-toolbar-item-hover-color);
 }
-.code-active-theme[data-v-0c33f649] {
+.code-active-theme[data-v-3faf9e04] {
                 color: deeppink;
                 cursor: pointer;
 }
 .code-themes {
-&[data-v-0c33f649] {
+&[data-v-3faf9e04] {
                 opacity: 0;
                 transition: 0.3s;
                 position: absolute;
@@ -2590,10 +2593,10 @@ to {
                 margin-top: 10px;
                 z-index: 2;
                 background: #ffffff59;
-                animation: 0.3s slide-down-0c33f649 forwards;
+                animation: 0.3s slide-down-3faf9e04 forwards;
 }
 .code-theme-item {
-&[data-v-0c33f649] {
+&[data-v-3faf9e04] {
                     padding: 5px;
                     margin: 2px;
                     cursor: pointer;
@@ -2602,7 +2605,7 @@ to {
                     text-overflow: ellipsis;
                     border-radius: 4px;
 }
-&[data-v-0c33f649]:hover {
+&[data-v-3faf9e04]:hover {
                         background: #bdbdbd66;
 }
 }
@@ -2610,7 +2613,7 @@ to {
 }
 .input_add,
         .input_rename {
-&[data-v-0c33f649] {
+&[data-v-3faf9e04] {
             border: none;
             outline: none;
             background: transparent;
@@ -2619,7 +2622,7 @@ to {
             width: 0px;
             letter-spacing: 1px;
 }
-&[data-v-0c33f649]:focus {
+&[data-v-3faf9e04]:focus {
                 border: var(--code-input-border);
                 color: var(--code-input-color);
                 padding: 5px;
@@ -2627,7 +2630,7 @@ to {
 }
 }
 .code-tools {
-&[data-v-0c33f649] {
+&[data-v-3faf9e04] {
             display: flex;
             justify-content: center;
             align-items: center;
@@ -2635,11 +2638,11 @@ to {
             flex-flow: row nowrap;
 }
 .code-help {
-&:hover .code-tooltip[data-v-0c33f649] {
+&:hover .code-tooltip[data-v-3faf9e04] {
                     display: flex;
 }
 .code-tooltip {
-&[data-v-0c33f649] {
+&[data-v-3faf9e04] {
                     display: none;
                     padding: 5px 10px;
                     background: var(--code-tooltip-bg);
@@ -2652,7 +2655,7 @@ to {
                     color: var(--code-tooltip-color);
                     z-index: 2;
 }
-&[data-v-0c33f649]::before {
+&[data-v-3faf9e04]::before {
                         content: "";
                         border: 10px solid;
                         border-color: transparent;
@@ -2664,18 +2667,18 @@ to {
 }
 }
 .iconfont {
-&[data-v-0c33f649] {
+&[data-v-3faf9e04] {
                 cursor: pointer;
                 text-indent: 0px;
 }
-&[data-v-0c33f649]:hover {
+&[data-v-3faf9e04]:hover {
                     color: var(--code-toolbar-item-hover-color);
 }
 }
 }
 }
 .code-box {
-&[data-v-0c33f649] {
+&[data-v-3faf9e04] {
         position: relative;
         width: 100%;
         height: calc(100% - var(--code-tabbar-height));
@@ -2683,13 +2686,13 @@ to {
         overflow: hidden;
         border-radius: 4px;
 }
-.code-box-inner[data-v-0c33f649] {
+.code-box-inner[data-v-3faf9e04] {
             position: relative;
             min-width: 100%;
             min-height: 100%;
             display: inline-block;
 }
-textarea[data-v-0c33f649] {
+textarea[data-v-3faf9e04] {
             position: absolute;
             top: 0px;
             left: 0px;
@@ -2709,7 +2712,7 @@ textarea[data-v-0c33f649] {
             overflow: hidden;
 }
 .code-highlight {
-&[data-v-0c33f649] {
+&[data-v-3faf9e04] {
             pointer-events: none;
             position: relative;
             top: 0px;
@@ -2719,11 +2722,11 @@ textarea[data-v-0c33f649] {
             min-height: 100%;
             overflow: hidden;
 }
-&[data-v-0c33f649] code {
+&[data-v-3faf9e04] code {
                 font-family: inherit !important;
                 font-size: inherit;
 }
-&[data-v-0c33f649] pre {
+&[data-v-3faf9e04] pre {
                 font-family: inherit;
                 display: inline-block;
                 position: relative;
@@ -2756,7 +2759,7 @@ textarea[data-v-0c33f649] {
 
 
 .cube-table {
-&[data-v-4aca7a12] {
+&[data-v-ee541abe] {
     position: relative;
     min-width: var(--table-min-width);
     max-width: 100%;
@@ -2764,15 +2767,15 @@ textarea[data-v-0c33f649] {
     overflow: hidden;
 }
 .cube-table-title {
-&[data-v-4aca7a12] {
+&[data-v-ee541abe] {
         background: var(--table-title-bg);
 }
-&[data-v-4aca7a12] .cube-line {
+&[data-v-ee541abe] .cube-line {
             text-align: center;
 }
 }
 .cube-table-toolbar {
-&[data-v-4aca7a12] {
+&[data-v-ee541abe] {
         display: flex;
         justify-content: center;
         align-items: center;
@@ -2781,15 +2784,15 @@ textarea[data-v-0c33f649] {
         background: var(--table-toolbar-bg);
 }
 .iconfont {
-&[data-v-4aca7a12] {
+&[data-v-ee541abe] {
             cursor: pointer;
             text-indent: 0px !important;
 }
-&[data-v-4aca7a12]:hover {
+&[data-v-ee541abe]:hover {
                 color: var(--table-toolbar-icon-hover-color);
 }
 }
-.table-size[data-v-4aca7a12] {
+.table-size[data-v-ee541abe] {
             text-indent: 0px !important;
             border: 1px dashed;
             padding: 2px;
@@ -2798,26 +2801,26 @@ textarea[data-v-0c33f649] {
 }
 }
 .cube-table-container {
-&[data-v-4aca7a12] {
+&[data-v-ee541abe] {
         --drag-pointer-events: auto;
         display: grid;
         gap: 1px;
 }
 .cube-box {
-&[data-v-4aca7a12] {
+&[data-v-ee541abe] {
             background: var(--table-cell-bg);
             border-radius: 4px;
             padding: 4px;
 }
-&[data-v-4aca7a12] > * {
+&[data-v-ee541abe] > * {
                 pointer-events: var(--drag-pointer-events);
 }
 }
-.cube-box[data-v-4aca7a12]:focus-within {
+.cube-box[data-v-ee541abe]:focus-within {
             background: var(--table-cell-active-bg);
 }
 }
-.cube-table-dragger[data-v-4aca7a12] {
+.cube-table-dragger[data-v-ee541abe] {
         position: absolute;
         bottom: 0px;
         right: 0px;
@@ -2828,7 +2831,7 @@ textarea[data-v-0c33f649] {
         cursor: w-resize;
         background: var(--table-dragger-bg);
 }
-.cube-cell-selection[data-v-4aca7a12] {
+.cube-cell-selection[data-v-ee541abe] {
         user-select: none;
         background: var(--table-cell-selection-bg) !important;
 }
@@ -2882,7 +2885,7 @@ textarea[data-v-0c33f649] {
 
 
 .cube-submap {
-&[data-v-71da5452] {
+&[data-v-b0f22a9c] {
     overflow: hidden;
     border-radius: 4px;
     position: relative;
@@ -2892,41 +2895,48 @@ textarea[data-v-0c33f649] {
     box-shadow: var(--submap-shadow);
     break-inside: avoid;
 }
-& > svg[data-v-71da5452] {
+& > svg[data-v-b0f22a9c] {
         width: 100%;
         height: 100%;
         position: absolute;
         background: var(--submap-bg);
 }
 }
+.group-outbox {
+.node-outbox[data-v-b0f22a9c] {
+        fill: var(--node-bg);
+        stroke: var(--node-hover-stroke);
+        stroke-width: 2;
+}
+}
 .group-linkers {
-path[data-v-71da5452] {
+path[data-v-b0f22a9c] {
         fill: none;
         filter: var(--linker-filter);
 }
 }
 .group-placeholder {
-&[data-v-71da5452] {
+&[data-v-b0f22a9c] {
     pointer-events: none;
 }
-.placeholder-linker[data-v-71da5452] {
+.placeholder-linker[data-v-b0f22a9c] {
         fill: none;
         filter: var(--linker-filter);
         stroke: var(--placeholder-linker-stroke);
         stroke-width: 2;
 }
-.placeholder-box-selector[data-v-71da5452] {
+.placeholder-box-selector[data-v-b0f22a9c] {
         stroke: var(--placeholder-box-selector-stroke);
         fill: var(--placeholder-box-selector-fill);
         stroke-width: 2;
 }
-.placeholder-line-delete[data-v-71da5452] {
+.placeholder-line-delete[data-v-b0f22a9c] {
         stroke-width: 2;
         fill: none;
         filter: drop-shadow(0px 0px 6px #ff7f7f);
 }
 }
-.submap-dragger[data-v-71da5452] {
+.submap-dragger[data-v-b0f22a9c] {
     position: absolute;
     bottom: 0px;
     right: 0px;
@@ -2939,7 +2949,7 @@ path[data-v-71da5452] {
 }
 
 
-@keyframes slide-down-563d8528 {
+@keyframes slide-down-e5b5ee36 {
 from {
         opacity: 0;
 }
@@ -2949,14 +2959,14 @@ to {
 }
 }
 .cube-box-columns {
-&[data-v-563d8528] {
+&[data-v-e5b5ee36] {
     background: var(--box-columns-bg);
     position: relative;
     border-radius: 4px;
     min-width: var(--box-columns-min-width);
 }
 .box-columns-toolbar {
-&[data-v-563d8528] {
+&[data-v-e5b5ee36] {
         display: flex;
         justify-content: center;
         align-items: center;
@@ -2964,17 +2974,17 @@ to {
         height: var(--box-columns-toolbar-height);
         background: var(--box-columns-toolbar-bg);
 }
-.iconfont[data-v-563d8528] {
+.iconfont[data-v-e5b5ee36] {
             cursor: pointer;
             text-indent: 0px;
 }
 .box-columns-tool-layout {
-&[data-v-563d8528] {
+&[data-v-e5b5ee36] {
             position: relative;
 }
 .box-columns-layout {
-&[data-v-563d8528] {
-                animation: 0.3s slide-down-563d8528 forwards;
+&[data-v-e5b5ee36] {
+                animation: 0.3s slide-down-e5b5ee36 forwards;
                 z-index: 2;
                 position: absolute;
                 display: flex;
@@ -2990,16 +3000,16 @@ to {
                 background: var(--box-columns-layout-bg);
                 box-shadow: 0px 0px 4px var(--box-columns-layout-bg);
 }
-& > div[data-v-563d8528] {
+& > div[data-v-e5b5ee36] {
                     flex: 1;
 }
 & > div > div {
-&[data-v-563d8528] {
+&[data-v-e5b5ee36] {
                     font-size: 14px;
                     margin: 6px 0px;
                     cursor: pointer;
 }
-&[data-v-563d8528]:hover {
+&[data-v-e5b5ee36]:hover {
                         color: var(--box-columns-layout-item-hover-color);
 }
 }
@@ -3007,18 +3017,18 @@ to {
 }
 }
 .box-columns-content {
-&[data-v-563d8528] {
+&[data-v-e5b5ee36] {
         gap: var(--box-columns-gap);
         padding-top: 4px;
 }
-& > div[data-v-563d8528] {
+& > div[data-v-e5b5ee36] {
             margin-top: 0px;
             margin-bottom: var(--box-columns-gap);
             break-inside: avoid;
             background: var(--box-columns-block-bg);
 }
 }
-.box-columns-dragger[data-v-563d8528] {
+.box-columns-dragger[data-v-e5b5ee36] {
         position: absolute;
         bottom: 0px;
         right: 0px;
@@ -3036,40 +3046,44 @@ to {
 html.dark{color-scheme:dark;--el-color-primary:#409eff;--el-color-primary-light-3:rgb(51,117,185);--el-color-primary-light-5:rgb(42,89,138);--el-color-primary-light-7:rgb(33,61,91);--el-color-primary-light-8:rgb(29,48,67);--el-color-primary-light-9:rgb(24,34,43);--el-color-primary-dark-2:rgb(102,177,255);--el-color-success:#67c23a;--el-color-success-light-3:rgb(78,142,47);--el-color-success-light-5:rgb(62,107,39);--el-color-success-light-7:rgb(45,72,31);--el-color-success-light-8:rgb(37,55,28);--el-color-success-light-9:rgb(28,37,24);--el-color-success-dark-2:rgb(133,206,97);--el-color-warning:#e6a23c;--el-color-warning-light-3:rgb(167,119,48);--el-color-warning-light-5:rgb(125,91,40);--el-color-warning-light-7:rgb(83,63,32);--el-color-warning-light-8:rgb(62,48,28);--el-color-warning-light-9:rgb(41,34,24);--el-color-warning-dark-2:rgb(235,181,99);--el-color-danger:#f56c6c;--el-color-danger-light-3:rgb(178,82,82);--el-color-danger-light-5:rgb(133,64,64);--el-color-danger-light-7:rgb(88,46,46);--el-color-danger-light-8:rgb(65,38,38);--el-color-danger-light-9:rgb(42,29,29);--el-color-danger-dark-2:rgb(247,137,137);--el-color-error:#f56c6c;--el-color-error-light-3:rgb(178,82,82);--el-color-error-light-5:rgb(133,64,64);--el-color-error-light-7:rgb(88,46,46);--el-color-error-light-8:rgb(65,38,38);--el-color-error-light-9:rgb(42,29,29);--el-color-error-dark-2:rgb(247,137,137);--el-color-info:#909399;--el-color-info-light-3:rgb(107,109,113);--el-color-info-light-5:rgb(82,84,87);--el-color-info-light-7:rgb(57,58,60);--el-color-info-light-8:rgb(45,45,47);--el-color-info-light-9:rgb(32,33,33);--el-color-info-dark-2:rgb(166,169,173);--el-box-shadow:0px 12px 32px 4px rgba(0,0,0,0.36),0px 8px 20px rgba(0,0,0,0.72);--el-box-shadow-light:0px 0px 12px rgba(0,0,0,0.72);--el-box-shadow-lighter:0px 0px 6px rgba(0,0,0,0.72);--el-box-shadow-dark:0px 16px 48px 16px rgba(0,0,0,0.72),0px 12px 32px #000000,0px 8px 16px -8px #000000;--el-bg-color-page:#0a0a0a;--el-bg-color:#141414;--el-bg-color-overlay:#1d1e1f;--el-text-color-primary:#E5EAF3;--el-text-color-regular:#CFD3DC;--el-text-color-secondary:#A3A6AD;--el-text-color-placeholder:#8D9095;--el-text-color-disabled:#6C6E72;--el-border-color-darker:#636466;--el-border-color-dark:#58585B;--el-border-color:#4C4D4F;--el-border-color-light:#414243;--el-border-color-lighter:#363637;--el-border-color-extra-light:#2B2B2C;--el-fill-color-darker:#424243;--el-fill-color-dark:#39393A;--el-fill-color:#303030;--el-fill-color-light:#262727;--el-fill-color-lighter:#1D1D1D;--el-fill-color-extra-light:#191919;--el-fill-color-blank:transparent;--el-mask-color:rgba(0,0,0,0.8);--el-mask-color-extra-light:rgba(0,0,0,0.3)}html.dark .el-button{--el-button-disabled-text-color:rgba(255,255,255,0.5)}html.dark .el-card{--el-card-bg-color:var(--el-bg-color-overlay)}html.dark .el-empty{--el-empty-fill-color-0:var(--el-color-black);--el-empty-fill-color-1:#4b4b52;--el-empty-fill-color-2:#36383d;--el-empty-fill-color-3:#1e1e20;--el-empty-fill-color-4:#262629;--el-empty-fill-color-5:#202124;--el-empty-fill-color-6:#212224;--el-empty-fill-color-7:#1b1c1f;--el-empty-fill-color-8:#1c1d1f;--el-empty-fill-color-9:#18181a}
 
 .note-menubar {
-&[data-v-68edfa56] {
+&[data-v-41787142] {
+    box-sizing: border-box;
     flex-shrink: 0;
+    /* 高度仅为自身盒子，上下 margin 6px 产生悬浮胶囊效果 */
     height: var(--menubar-height);
-    padding: 5px;
-    background: var(--menubar-bg);
+    padding: 0 12px;
+
+    backdrop-filter: var(--menubar-backdrop, blur(18px) saturate(160%));
     display: flex;
     flex-flow: row nowrap;
     justify-content: center;
     align-items: center;
-    gap: 10px;
+    gap: 8px;
     user-select: none;
-    position: sticky;
-    top: 0;
+    /* 菜单栏在 flex column 中天然置顶，无需 sticky */
     z-index: var(--ui-z-index);
-    left: 0px;
 }
-.iconfont.active[data-v-68edfa56] {
+.iconfont.active[data-v-41787142] {
         background: var(--menubar-active-icon-bg);
         color: var(--menubar-active-icon-color);
         text-shadow: var(--menubar-active-icon-shadow);
 }
 .iconfont {
-&[data-v-68edfa56] {
-        transition: 0.5s;
-        font-size: 24px;
-        padding: var(--menubar-icon-padding);
-        border-radius: 4px;
+&[data-v-41787142] {
+        transition:
+            background var(--transition-base, 0.24s),
+            color var(--transition-base, 0.24s),
+            transform var(--transition-spring, 0.36s cubic-bezier(0.34, 1.56, 0.64, 1));
+        font-size: 22px;
+        padding: var(--menubar-icon-padding, 5px);
+        border-radius: 6px;
         background: var(--menubar-icon-bg);
         cursor: pointer;
-        padding: 2px;
         border: var(--menubar-icon-border);
+        will-change: transform;
 }
-&[data-v-68edfa56]:hover {
-            scale: 1.1;
+&[data-v-41787142]:hover {
+            transform: scale(1.12);
             background: var(--menubar-icon-hover-bg);
             color: var(--menubar-icon-hover-color);
 }
@@ -3262,33 +3276,31 @@ html.dark{color-scheme:dark;--el-color-primary:#409eff;--el-color-primary-light-
 
 
 .ui-sideitem-search {
-&[data-v-78878272] {
+&[data-v-cae7f5e4] {
     height: 100%;
     overflow-y: scroll;
     padding-bottom: 6px;
 }
 .search-bar {
-&[data-v-78878272] {
+&[data-v-cae7f5e4] {
         padding: 0 4px 6px;
 }
 .search-input-box {
-&[data-v-78878272] {
+&[data-v-cae7f5e4] {
             display: flex;
             align-items: center;
             flex-flow: row nowrap;
             gap: 8px;
             background: var(--ui-search-bar-bg);
-            border: var(--ui-search-bar-border);
-            box-shadow: var(--ui-search-bar-shadow);
             border-radius: 8px;
             padding: 6px 8px;
 }
-.box-input[data-v-78878272] {
+.box-input[data-v-cae7f5e4] {
                 flex: 1;
                 margin: 0;
 }
 .iconfont {
-&[data-v-78878272] {
+&[data-v-cae7f5e4] {
                 background: var(--ui-search-icon-bg);
                 color: var(--ui-search-icon-color);
                 font-size: 22px;
@@ -3298,21 +3310,21 @@ html.dark{color-scheme:dark;--el-color-primary:#409eff;--el-color-primary-light-
                 flex-shrink: 0;
                 transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
 }
-&[data-v-78878272]:hover {
+&[data-v-cae7f5e4]:hover {
                     background: var(--ui-search-icon-hover-bg);
                     color: var(--ui-search-icon-hover-color);
                     transform: scale(1.08);
-                    box-shadow: 0 3px 10px rgba(67, 229, 208, 0.3);
+                    box-shadow: 0 3px 10px color-mix(in srgb, var(--selection-bg, #43e5d0) 30%, transparent);
 }
 }
 }
 }
 .search-result {
-&[data-v-78878272] {
+&[data-v-cae7f5e4] {
         padding: 0 4px;
 }
 .search-result-item {
-&[data-v-78878272] {
+&[data-v-cae7f5e4] {
             padding: 7px 10px 7px 14px;
             cursor: pointer;
             border-radius: 6px;
@@ -3323,7 +3335,7 @@ html.dark{color-scheme:dark;--el-color-primary:#409eff;--el-color-primary-light-
             position: relative;
             transition: background 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
 }
-&[data-v-78878272]::before {
+&[data-v-cae7f5e4]::before {
                 content: "";
                 position: absolute;
                 left: 0;
@@ -3335,19 +3347,19 @@ html.dark{color-scheme:dark;--el-color-primary:#409eff;--el-color-primary-light-
                 opacity: 0;
                 transition: opacity 0.18s ease;
 }
-&[data-v-78878272]:nth-child(even) {
+&[data-v-cae7f5e4]:nth-child(even) {
                 background: var(--ui-search-item-even-bg);
 }
-&[data-v-78878272]:nth-child(odd) {
+&[data-v-cae7f5e4]:nth-child(odd) {
                 background: var(--ui-search-item-odd-bg);
 }
 &:hover {
-&[data-v-78878272] {
+&[data-v-cae7f5e4] {
                 background: var(--ui-search-item-hover-bg);
                 transform: translateX(2px);
                 box-shadow: var(--ui-search-item-hover-shadow);
 }
-&[data-v-78878272]::before {
+&[data-v-cae7f5e4]::before {
                     opacity: 1;
 }
 }
@@ -3357,499 +3369,432 @@ html.dark{color-scheme:dark;--el-color-primary:#409eff;--el-color-primary-light-
 
 
 .ui-sideitem-theme {
-&[data-v-18d6757b] {
+&[data-v-9faeeffa] {
     height: 100%;
     overflow-y: scroll;
     user-select: none;
-    padding-bottom: 6px;
+    padding: 0 0 10px;
 }
-.sidebar-panel-toolbox {
-&[data-v-18d6757b] {
-        background: var(--sidebar-panel-toolbox-bg);
+.theme-toolbox {
+&[data-v-9faeeffa] {
+        background: linear-gradient(135deg, color-mix(in srgb, var(--page-bg, #ffffff) 86%, transparent) 0%, color-mix(in srgb, var(--selection-bg, #cccccc) 16%, transparent) 100%), var(--sidebar-panel-toolbox-bg);
         display: flex;
         align-items: center;
         justify-content: space-between;
-        gap: 10px;
-        padding: 5px;
-        margin: 5px;
-        border-radius: 4px;
-        border: 1px solid var(--ui-theme-item-border);
-        box-shadow: var(--ui-theme-list-shadow);
+        gap: 14px;
+        padding: 10px 12px;
+        margin: 6px;
+}
+.toolbox-copy[data-v-9faeeffa] {
+            min-width: 0;
+}
+.toolbox-title[data-v-9faeeffa] {
+            font-size: 14px;
+            font-weight: 700;
+            color: var(--color);
+            letter-spacing: 0.08em;
+}
+.toolbox-desc[data-v-9faeeffa] {
+            font-size: 12px;
+            color: color-mix(in srgb, var(--color, #333333) 64%, transparent);
+            margin-top: 2px;
 }
 .iconfont {
-&[data-v-18d6757b] {
+&[data-v-9faeeffa] {
             font-size: var(--ui-icon-size-lv2);
             color: var(--ui-theme-item-color);
-            transition: color 0.2s ease;
+            transition:
+                color 0.2s ease,
+                transform 0.2s ease;
 }
-&[data-v-18d6757b]:hover {
+&[data-v-9faeeffa]:hover {
                 color: var(--ui-catalogue-tools-hover-color);
+                transform: translateX(-2px);
 }
 }
-.tools-icon[data-v-18d6757b] {
+.tools-icon[data-v-9faeeffa] {
             display: flex;
             align-items: center;
             gap: 10px;
 }
 }
 .list-box {
-&[data-v-18d6757b] {
-        /* display: flex;
-        gap: 4px;
-        flex-flow: row wrap; */
-        column-width: 180px;
-        column-gap: 8px;
+&[data-v-9faeeffa] {
+        padding: 0;
 }
-.list-item[data-v-18d6757b] {
-            padding: 8px;
-            cursor: pointer;
-            color: var(--ui-theme-item-color);
-            border: var(--ui-theme-item-border);
-            border-radius: 4px;
-            margin-bottom: 8px;
-            transition:
-                background 0.2s ease,
-                box-shadow 0.2s ease,
-                transform 0.2s ease;
-}
-.bg-item-clear[data-v-18d6757b] {
+.bg-item-clear {
+&[data-v-9faeeffa] {
             display: flex;
             justify-content: center;
             align-items: center;
+            flex-flow: column nowrap;
+            gap: 10px;
             cursor: pointer;
-            border-radius: 4px;
-            border: var(--ui-theme-item-border);
+            border-radius: 12px;
+            border: 1px solid color-mix(in srgb, var(--selection-bg, #bbbbbb) 28%, transparent);
             padding: 20px;
             color: var(--ui-theme-clear-color);
-            background: var(--ui-theme-clear-bg);
-            margin-bottom: 8px;
+            background: linear-gradient(135deg, color-mix(in srgb, var(--page-bg, #ffffff) 92%, transparent) 0%, color-mix(in srgb, var(--selection-bg, #bbbbbb) 10%, transparent) 100%), var(--ui-theme-clear-bg);
             transition:
                 background 0.2s ease,
                 box-shadow 0.2s ease,
                 transform 0.2s ease;
 }
+.clear-shape {
+&[data-v-9faeeffa] {
+                width: 44px;
+                height: 44px;
+                border-radius: 12px;
+                border: 1px solid color-mix(in srgb, var(--selection-bg, #bbbbbb) 36%, transparent);
+                background: linear-gradient(135deg, color-mix(in srgb, var(--selection-bg, #bbbbbb) 16%, transparent) 0%, transparent 100%), color-mix(in srgb, var(--page-bg, #ffffff) 88%, transparent);
+                clip-path: polygon(20% 0, 100% 0, 100% 80%, 80% 100%, 0 100%, 0 20%);
+                position: relative;
+}
+&[data-v-9faeeffa]::before,
+                &[data-v-9faeeffa]::after {
+                    content: "";
+                    position: absolute;
+                    inset: 50% auto auto 50%;
+                    width: 24px;
+                    height: 2px;
+                    background: color-mix(in srgb, var(--selection-bg, #bbbbbb) 65%, transparent);
+                    transform-origin: center;
+}
+&[data-v-9faeeffa]::before {
+                    transform: translate(-50%, -50%) rotate(45deg);
+}
+&[data-v-9faeeffa]::after {
+                    transform: translate(-50%, -50%) rotate(-45deg);
+}
+}
+}
 .bg-item {
-&[data-v-18d6757b] {
+&[data-v-9faeeffa] {
             cursor: pointer;
-            border-radius: 4px;
-            margin-bottom: 8px;
+            border-radius: 14px;
             overflow: hidden;
             border: var(--ui-theme-bg-item-border);
             box-shadow: var(--ui-theme-bg-item-shadow);
             transition:
                 transform 0.2s ease,
                 box-shadow 0.2s ease;
-            /* width: 120px; */
+            position: relative;
+            min-height: 120px;
+}
+.bg-frame[data-v-9faeeffa] {
+                position: absolute;
+                inset: 10px;
+                border: 1px solid rgba(255, 255, 255, 0.5);
+                border-radius: 10px;
+                z-index: 1;
+                pointer-events: none;
+                mix-blend-mode: screen;
 }
-img[data-v-18d6757b] {
+img[data-v-9faeeffa] {
                 width: 100%;
-                border-radius: 4px;
+                min-height: 120px;
+                object-fit: cover;
                 display: block;
 }
 }
-.bg-item[data-v-18d6757b]:hover,
-        .bg-item-clear[data-v-18d6757b]:hover {
-            transform: translateY(-1px);
-            box-shadow: var(--ui-theme-item-hover-shadow);
-}
-.list-item[data-v-18d6757b]:nth-child(even) {
-            background: var(--ui-theme-item-even-bg);
-}
-.list-item[data-v-18d6757b]:nth-child(odd) {
-            background: var(--ui-theme-item-odd-bg);
-}
-.list-item[data-v-18d6757b]:hover {
-            background: var(--ui-theme-item-hover-bg);
+.bg-item[data-v-9faeeffa]:hover,
+        .bg-item-clear[data-v-9faeeffa]:hover {
+            transform: translateY(-3px);
             box-shadow: var(--ui-theme-item-hover-shadow);
-            transform: translateY(-1px);
 }
 }
 .list-title {
-&[data-v-18d6757b] {
+&[data-v-9faeeffa] {
         color: var(--ui-theme-title-color);
-        padding: 6px;
+        padding: 8px 10px;
         display: flex;
-        justify-content: center;
+        justify-content: space-between;
         align-items: center;
-        gap: 6px;
-        margin: 2px 2px 4px 2px;
-        border-radius: 4px;
+        gap: 12px;
+        margin: 0 0 10px;
+        border-radius: 10px;
+}
+.section-title[data-v-9faeeffa] {
+            font-size: 14px;
+            font-weight: 700;
+            letter-spacing: 0.04em;
 }
-.iconfont[data-v-18d6757b] {
+.section-desc[data-v-9faeeffa] {
+            font-size: 12px;
+            color: color-mix(in srgb, currentColor 65%, transparent);
+            margin-top: 2px;
+}
+.iconfont {
+&[data-v-9faeeffa] {
             cursor: pointer;
-            transition: color 0.2s ease;
+            transition:
+                color 0.2s ease,
+                transform 0.2s ease;
+}
+&[data-v-9faeeffa]:hover {
+                transform: rotate(-20deg);
+}
 }
 }
-.list-background[data-v-18d6757b] {
+.list-background[data-v-9faeeffa] {
         background: var(--ui-background-title-bg);
         color: var(--ui-background-title-color);
 }
-.list-theme[data-v-18d6757b] {
+.list-theme[data-v-9faeeffa] {
         background: var(--ui-theme-title-bg);
 }
-.list-note-theme[data-v-18d6757b] {
+.list-note-theme[data-v-9faeeffa] {
         background: var(--ui-theme-title-bg);
 }
-.theme-list[data-v-18d6757b] {
-        border: var(--ui-theme-list-border);
+.theme-list[data-v-9faeeffa] {
+        border: var(--sidebar-cube-border);
         background: var(--ui-theme-list-bg);
-        border-radius: 4px;
+        border-radius: 12px;
         padding: 4px;
-        margin: 4px;
+        margin: 6px;
         box-shadow: var(--ui-theme-list-shadow);
 }
 .note-theme-list {
-&[data-v-18d6757b] {
-        border: var(--ui-theme-list-border);
-        background: var(--ui-theme-list-bg);
-        border-radius: 4px;
+&[data-v-9faeeffa] {
+        border: var(--sidebar-cube-border);
+        background: linear-gradient(160deg, color-mix(in srgb, var(--page-bg, #ffffff) 96%, transparent) 0%, color-mix(in srgb, var(--selection-bg, #cccccc) 8%, transparent) 100%), var(--ui-theme-list-bg);
+        border-radius: 16px;
         padding: 12px;
-        margin: 4px;
-        box-shadow: var(--ui-theme-list-shadow);
+        margin: 6px;
+        box-shadow:
+            var(--ui-theme-list-shadow),
+            inset 0 1px 0 rgba(255, 255, 255, 0.5);
+        position: relative;
+        overflow: hidden;
 }
-.list-box[data-v-18d6757b] {
+&[data-v-9faeeffa]::before {
+            content: "";
+            position: absolute;
+            inset: 0 auto auto 0;
+            width: 180px;
+            height: 180px;
+            background: radial-gradient(circle, color-mix(in srgb, var(--selection-bg, #bbbbbb) 10%, transparent) 0%, transparent 72%);
+            pointer-events: none;
+}
+.theme-card-grid[data-v-9faeeffa] {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
+            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
             gap: 14px;
 }
-.list-item {
-&[data-v-18d6757b] {
-            padding: 16px;
-            font-weight: 600;
-            font-size: 13px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            text-align: center;
-            min-height: 70px;
-            border: 2px solid;
-            border-radius: 12px;
+.theme-card {
+&[data-v-9faeeffa] {
+            padding: 14px;
+            min-height: 216px;
+            border: 1px solid color-mix(in srgb, var(--card-primary) 28%, transparent);
+            border-radius: 16px;
             position: relative;
             overflow: hidden;
             cursor: pointer;
-            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-            letter-spacing: 0.5px;
+            transition:
+                transform 0.26s ease,
+                box-shadow 0.26s ease,
+                border-color 0.26s ease;
+            letter-spacing: 0.04em;
+            background: linear-gradient(155deg, color-mix(in srgb, var(--card-surface) 96%, transparent) 0%, color-mix(in srgb, var(--card-primary) 10%, transparent) 100%), linear-gradient(135deg, color-mix(in srgb, var(--card-primary) 4%, transparent) 0%, color-mix(in srgb, var(--card-accent) 6%, transparent) 100%);
+            color: var(--card-ink);
+            display: flex;
+            flex-flow: column nowrap;
+            justify-content: space-between;
+            box-shadow:
+                0 12px 24px color-mix(in srgb, var(--card-primary) 10%, transparent),
+                inset 0 1px 0 rgba(255, 255, 255, 0.55);
+            clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
 }
-&[data-v-18d6757b]::before {
+&[data-v-9faeeffa]::before {
                 content: "";
                 position: absolute;
-                top: -50%;
-                left: -50%;
-                width: 200%;
-                height: 200%;
-                background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
-                transform: rotate(0deg);
-                transition: all 0.6s ease;
-}
-&[data-v-18d6757b]::after {
+                inset: -1px;
+                border: 1px solid color-mix(in srgb, var(--card-accent) 22%, transparent);
+                border-radius: 16px;
+                clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
+                pointer-events: none;
+}
+&[data-v-9faeeffa]::after {
                 content: "";
                 position: absolute;
-                inset: 0;
-                background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 60%);
-                opacity: 0;
-                transition: opacity 0.4s ease;
-}
-&:nth-child(1) {
-&[data-v-18d6757b] {
-                background: linear-gradient(135deg, rgba(128, 128, 128, 0.15) 0%, rgba(169, 169, 169, 0.08) 50%, rgba(128, 128, 128, 0.1) 100%);
-                border-color: rgba(128, 128, 128, 0.25);
-                color: rgba(128, 128, 128, 0.9);
-}
-&[data-v-18d6757b]:hover {
-                    border-color: rgba(128, 128, 128, 0.7);
-                    background: linear-gradient(135deg, rgba(128, 128, 128, 0.25) 0%, rgba(169, 169, 169, 0.18) 50%, rgba(128, 128, 128, 0.2) 100%);
-                    box-shadow:
-                        0 20px 40px rgba(128, 128, 128, 0.3),
-                        0 0 30px rgba(169, 169, 169, 0.25),
-                        0 0 60px rgba(128, 128, 128, 0.15),
-                        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
-}
-}
-&:nth-child(2) {
-&[data-v-18d6757b] {
-                background: linear-gradient(135deg, rgba(0, 128, 128, 0.15) 0%, rgba(0, 206, 209, 0.08) 50%, rgba(0, 128, 128, 0.1) 100%);
-                border-color: rgba(0, 128, 128, 0.25);
-                color: rgba(0, 128, 128, 0.9);
-}
-&[data-v-18d6757b]:hover {
-                    border-color: rgba(0, 128, 128, 0.7);
-                    background: linear-gradient(135deg, rgba(0, 128, 128, 0.25) 0%, rgba(0, 206, 209, 0.18) 50%, rgba(0, 128, 128, 0.2) 100%);
-                    box-shadow:
-                        0 20px 40px rgba(0, 128, 128, 0.3),
-                        0 0 30px rgba(0, 206, 209, 0.25),
-                        0 0 60px rgba(0, 128, 128, 0.15),
-                        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
-}
-}
-&:nth-child(3) {
-&[data-v-18d6757b] {
-                background: linear-gradient(135deg, rgba(0, 255, 127, 0.15) 0%, rgba(147, 51, 234, 0.08) 50%, rgba(0, 200, 136, 0.1) 100%);
-                border-color: rgba(0, 255, 127, 0.25);
-                color: rgba(0, 255, 127, 0.9);
-}
-&[data-v-18d6757b]:hover {
-                    border-color: rgba(0, 255, 127, 0.7);
-                    background: linear-gradient(135deg, rgba(0, 255, 127, 0.25) 0%, rgba(147, 51, 234, 0.18) 50%, rgba(0, 200, 136, 0.2) 100%);
-                    box-shadow:
-                        0 20px 40px rgba(0, 255, 127, 0.3),
-                        0 0 30px rgba(147, 51, 234, 0.25),
-                        0 0 60px rgba(0, 255, 127, 0.15),
-                        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
-}
-}
-&:nth-child(4) {
-&[data-v-18d6757b] {
-                background: linear-gradient(135deg, rgba(255, 140, 0, 0.15) 0%, rgba(255, 215, 0, 0.08) 50%, rgba(255, 165, 0, 0.1) 100%);
-                border-color: rgba(255, 140, 0, 0.25);
-                color: rgba(255, 140, 0, 0.9);
-}
-&[data-v-18d6757b]:hover {
-                    border-color: rgba(255, 140, 0, 0.7);
-                    background: linear-gradient(135deg, rgba(255, 140, 0, 0.25) 0%, rgba(255, 215, 0, 0.18) 50%, rgba(255, 165, 0, 0.2) 100%);
-                    box-shadow:
-                        0 20px 40px rgba(255, 140, 0, 0.3),
-                        0 0 30px rgba(255, 215, 0, 0.25),
-                        0 0 60px rgba(255, 140, 0, 0.15),
-                        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
-}
-}
-&:nth-child(5) {
-&[data-v-18d6757b] {
-                background: linear-gradient(135deg, rgba(255, 192, 203, 0.15) 0%, rgba(255, 182, 193, 0.08) 50%, rgba(255, 160, 180, 0.1) 100%);
-                border-color: rgba(255, 192, 203, 0.25);
-                color: rgba(255, 105, 180, 0.9);
-}
-&[data-v-18d6757b]:hover {
-                    border-color: rgba(255, 192, 203, 0.7);
-                    background: linear-gradient(135deg, rgba(255, 192, 203, 0.25) 0%, rgba(255, 182, 193, 0.18) 50%, rgba(255, 160, 180, 0.2) 100%);
-                    box-shadow:
-                        0 20px 40px rgba(255, 192, 203, 0.3),
-                        0 0 30px rgba(255, 182, 193, 0.25),
-                        0 0 60px rgba(255, 192, 203, 0.15),
-                        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
-}
-}
-&:nth-child(6) {
-&[data-v-18d6757b] {
-                background: linear-gradient(135deg, rgba(0, 105, 148, 0.15) 0%, rgba(25, 25, 112, 0.08) 50%, rgba(0, 100, 140, 0.1) 100%);
-                border-color: rgba(0, 105, 148, 0.25);
-                color: rgba(0, 105, 148, 0.9);
-}
-&[data-v-18d6757b]:hover {
-                    border-color: rgba(0, 105, 148, 0.7);
-                    background: linear-gradient(135deg, rgba(0, 105, 148, 0.25) 0%, rgba(25, 25, 112, 0.18) 50%, rgba(0, 100, 140, 0.2) 100%);
-                    box-shadow:
-                        0 20px 40px rgba(0, 105, 148, 0.3),
-                        0 0 30px rgba(25, 25, 112, 0.25),
-                        0 0 60px rgba(0, 105, 148, 0.15),
-                        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
-}
-}
-&:nth-child(7) {
-&[data-v-18d6757b] {
-                background: linear-gradient(135deg, rgba(57, 255, 20, 0.15) 0%, rgba(255, 16, 240, 0.08) 50%, rgba(0, 255, 200, 0.1) 100%);
-                border-color: rgba(57, 255, 20, 0.25);
-                color: rgba(57, 255, 20, 0.9);
-}
-&[data-v-18d6757b]:hover {
-                    border-color: rgba(57, 255, 20, 0.7);
-                    background: linear-gradient(135deg, rgba(57, 255, 20, 0.25) 0%, rgba(255, 16, 240, 0.18) 50%, rgba(0, 255, 200, 0.2) 100%);
-                    box-shadow:
-                        0 20px 40px rgba(57, 255, 20, 0.3),
-                        0 0 30px rgba(255, 16, 240, 0.25),
-                        0 0 60px rgba(57, 255, 20, 0.15),
-                        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
-}
-}
-&:nth-child(8) {
-&[data-v-18d6757b] {
-                background: linear-gradient(135deg, rgba(34, 139, 34, 0.15) 0%, rgba(0, 100, 0, 0.08) 50%, rgba(46, 125, 50, 0.1) 100%);
-                border-color: rgba(34, 139, 34, 0.25);
-                color: rgba(34, 139, 34, 0.9);
-}
-&[data-v-18d6757b]:hover {
-                    border-color: rgba(34, 139, 34, 0.7);
-                    background: linear-gradient(135deg, rgba(34, 139, 34, 0.25) 0%, rgba(0, 100, 0, 0.18) 50%, rgba(46, 125, 50, 0.2) 100%);
-                    box-shadow:
-                        0 20px 40px rgba(34, 139, 34, 0.3),
-                        0 0 30px rgba(0, 100, 0, 0.25),
-                        0 0 60px rgba(34, 139, 34, 0.15),
-                        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
-}
-}
-&:nth-child(9) {
-&[data-v-18d6757b] {
-                background: linear-gradient(135deg, rgba(147, 112, 219, 0.15) 0%, rgba(199, 21, 133, 0.08) 50%, rgba(186, 85, 211, 0.1) 100%);
-                border-color: rgba(147, 112, 219, 0.25);
-                color: rgba(147, 112, 219, 0.9);
-}
-&[data-v-18d6757b]:hover {
-                    border-color: rgba(147, 112, 219, 0.7);
-                    background: linear-gradient(135deg, rgba(147, 112, 219, 0.25) 0%, rgba(199, 21, 133, 0.18) 50%, rgba(186, 85, 211, 0.2) 100%);
-                    box-shadow:
-                        0 20px 40px rgba(147, 112, 219, 0.3),
-                        0 0 30px rgba(199, 21, 133, 0.25),
-                        0 0 60px rgba(147, 112, 219, 0.15),
-                        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
-}
-}
-&:nth-child(10) {
-&[data-v-18d6757b] {
-                background: linear-gradient(135deg, rgba(25, 25, 112, 0.15) 0%, rgba(0, 0, 50, 0.08) 50%, rgba(10, 20, 80, 0.1) 100%);
-                border-color: rgba(25, 25, 112, 0.25);
-                color: rgba(72, 119, 200, 0.9);
-}
-&[data-v-18d6757b]:hover {
-                    border-color: rgba(25, 25, 112, 0.7);
-                    background: linear-gradient(135deg, rgba(25, 25, 112, 0.25) 0%, rgba(0, 0, 50, 0.18) 50%, rgba(10, 20, 80, 0.2) 100%);
-                    box-shadow:
-                        0 20px 40px rgba(25, 25, 112, 0.3),
-                        0 0 30px rgba(0, 0, 50, 0.25),
-                        0 0 60px rgba(25, 25, 112, 0.15),
-                        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
-}
-}
-&:nth-child(11) {
-&[data-v-18d6757b] {
-                background: linear-gradient(135deg, rgba(220, 20, 60, 0.15) 0%, rgba(139, 0, 0, 0.08) 50%, rgba(199, 21, 133, 0.1) 100%);
-                border-color: rgba(220, 20, 60, 0.25);
-                color: rgba(220, 20, 60, 0.9);
-}
-&[data-v-18d6757b]:hover {
-                    border-color: rgba(220, 20, 60, 0.7);
-                    background: linear-gradient(135deg, rgba(220, 20, 60, 0.25) 0%, rgba(139, 0, 0, 0.18) 50%, rgba(199, 21, 133, 0.2) 100%);
-                    box-shadow:
-                        0 20px 40px rgba(220, 20, 60, 0.3),
-                        0 0 30px rgba(139, 0, 0, 0.25),
-                        0 0 60px rgba(220, 20, 60, 0.15),
-                        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
-}
-}
-&:nth-child(12) {
-&[data-v-18d6757b] {
-                background: linear-gradient(135deg, rgba(0, 206, 209, 0.15) 0%, rgba(72, 209, 204, 0.08) 50%, rgba(0, 180, 185, 0.1) 100%);
-                border-color: rgba(0, 206, 209, 0.25);
-                color: rgba(0, 206, 209, 0.9);
-}
-&[data-v-18d6757b]:hover {
-                    border-color: rgba(0, 206, 209, 0.7);
-                    background: linear-gradient(135deg, rgba(0, 206, 209, 0.25) 0%, rgba(72, 209, 204, 0.18) 50%, rgba(0, 180, 185, 0.2) 100%);
-                    box-shadow:
-                        0 20px 40px rgba(0, 206, 209, 0.3),
-                        0 0 30px rgba(72, 209, 204, 0.25),
-                        0 0 60px rgba(0, 206, 209, 0.15),
-                        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
-}
-}
-&:nth-child(13) {
-&[data-v-18d6757b] {
-                background: linear-gradient(135deg, rgba(192, 192, 192, 0.15) 0%, rgba(178, 140, 226, 0.08) 50%, rgba(200, 180, 220, 0.1) 100%);
-                border-color: rgba(192, 192, 192, 0.25);
-                color: rgba(178, 140, 226, 0.9);
-}
-&[data-v-18d6757b]:hover {
-                    border-color: rgba(192, 192, 192, 0.7);
-                    background: linear-gradient(135deg, rgba(192, 192, 192, 0.25) 0%, rgba(178, 140, 226, 0.18) 50%, rgba(200, 180, 220, 0.2) 100%);
-                    box-shadow:
-                        0 20px 40px rgba(192, 192, 192, 0.3),
-                        0 0 30px rgba(178, 140, 226, 0.25),
-                        0 0 60px rgba(192, 192, 192, 0.15),
-                        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
-}
-}
-&:hover {
-&[data-v-18d6757b] {
-                transform: translateY(-8px) scale(1.1);
+                right: -34px;
+                top: -32px;
+                width: 120px;
+                height: 120px;
+                background: radial-gradient(circle, color-mix(in srgb, var(--card-accent) 24%, transparent) 0%, transparent 70%);
+                pointer-events: none;
+}
+.theme-card-head[data-v-9faeeffa] {
+                display: flex;
+                align-items: flex-start;
+                justify-content: space-between;
+                gap: 10px;
 }
-&[data-v-18d6757b]::before {
-                    transform: rotate(45deg);
-                    animation: shine-animation-18d6757b 0.6s ease;
+.theme-motif[data-v-9faeeffa] {
+                font-size: 12px;
+                color: color-mix(in srgb, var(--card-ink) 78%, transparent);
+                background: color-mix(in srgb, var(--card-primary) 10%, transparent);
+                border: 1px solid color-mix(in srgb, var(--card-primary) 22%, transparent);
+                border-radius: 999px;
+                padding: 5px 10px;
+                max-width: 72%;
 }
-&[data-v-18d6757b]::after {
-                    opacity: 1;
+.theme-key[data-v-9faeeffa] {
+                font-size: 11px;
+                font-weight: 700;
+                color: color-mix(in srgb, var(--card-primary) 84%, var(--card-ink) 16%);
+                letter-spacing: 0.08em;
+                text-transform: uppercase;
 }
+.theme-geometry[data-v-9faeeffa] {
+                position: relative;
+                min-height: 96px;
+                margin: 12px 0 10px;
 }
-&[data-v-18d6757b]:active {
-                transform: translateY(-4px) scale(1.05);
+.geo[data-v-9faeeffa] {
+                position: absolute;
+                display: block;
 }
-&.active-theme {
-&[data-v-18d6757b] {
-                box-shadow:
-                    0 0 20px rgba(0, 206, 209, 0.6),
-                    0 0 40px rgba(0, 206, 209, 0.4),
-                    inset 0 0 20px rgba(255, 255, 255, 0.3),
-                    0 20px 40px rgba(100, 150, 255, 0.2);
-                border-color: rgba(0, 206, 209, 0.8) !important;
-                animation: active-pulse-18d6757b 2s ease-in-out infinite;
-}
-&[data-v-18d6757b]::after {
-                    opacity: 1;
-                    animation: active-glow-18d6757b 2s ease-in-out infinite;
+.geo-diamond[data-v-9faeeffa] {
+                width: 74px;
+                height: 74px;
+                left: 12px;
+                top: 10px;
+                background: linear-gradient(135deg, color-mix(in srgb, var(--card-primary) 70%, white 10%) 0%, color-mix(in srgb, var(--card-accent) 85%, white 10%) 100%);
+                clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
+                box-shadow: 0 10px 24px color-mix(in srgb, var(--card-primary) 22%, transparent);
+}
+.geo-band[data-v-9faeeffa] {
+                width: 88px;
+                height: 18px;
+                right: 8px;
+                top: 14px;
+                border-radius: 999px;
+                background: linear-gradient(90deg, color-mix(in srgb, var(--card-accent) 26%, transparent) 0%, color-mix(in srgb, var(--card-primary) 68%, transparent) 100%);
+                transform: rotate(-17deg);
+}
+.geo-orbit {
+&[data-v-9faeeffa] {
+                width: 120px;
+                height: 54px;
+                right: 10px;
+                bottom: 14px;
+                border: 1px solid color-mix(in srgb, var(--card-primary) 35%, transparent);
+                border-radius: 999px;
+                transform: rotate(-18deg);
+}
+&[data-v-9faeeffa]::before {
+                    content: "";
+                    position: absolute;
+                    top: 50%;
+                    left: 18px;
+                    width: 12px;
+                    height: 12px;
+                    border-radius: 50%;
+                    background: var(--card-accent);
+                    transform: translateY(-50%);
+                    box-shadow: 0 0 12px color-mix(in srgb, var(--card-accent) 40%, transparent);
+}
+}
+.geo-cut[data-v-9faeeffa] {
+                width: 48px;
+                height: 48px;
+                left: 92px;
+                bottom: 10px;
+                background: color-mix(in srgb, var(--card-primary) 18%, transparent);
+                border: 1px solid color-mix(in srgb, var(--card-primary) 24%, transparent);
+                clip-path: polygon(0 0, 100% 0, 72% 100%, 0 100%);
+}
+.theme-card-foot[data-v-9faeeffa] {
+                position: relative;
+                z-index: 1;
 }
+.theme-name[data-v-9faeeffa] {
+                font-size: 15px;
+                font-weight: 700;
 }
+.theme-palette-text[data-v-9faeeffa] {
+                margin-top: 4px;
+                font-size: 12px;
+                color: color-mix(in srgb, var(--card-ink) 65%, transparent);
 }
+.theme-swatches[data-v-9faeeffa] {
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                margin-top: 12px;
 }
-@keyframes active-pulse-18d6757b {
-0%,
-        100% {
-            box-shadow:
-                0 0 20px rgba(0, 206, 209, 0.6),
-                0 0 40px rgba(0, 206, 209, 0.4),
-                inset 0 0 20px rgba(255, 255, 255, 0.3),
-                0 20px 40px rgba(100, 150, 255, 0.2);
+.swatch[data-v-9faeeffa] {
+                width: 18px;
+                height: 18px;
+                border-radius: 6px;
+                border: 1px solid rgba(255, 255, 255, 0.5);
+                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
 }
-50% {
-            box-shadow:
-                0 0 30px rgba(0, 206, 209, 0.8),
-                0 0 60px rgba(0, 206, 209, 0.6),
-                inset 0 0 20px rgba(255, 255, 255, 0.4),
-                0 20px 50px rgba(100, 150, 255, 0.3);
+.swatch-primary[data-v-9faeeffa] {
+                background: var(--card-primary);
 }
+.swatch-accent[data-v-9faeeffa] {
+                background: var(--card-accent);
 }
-@keyframes active-glow-18d6757b {
-0%,
-        100% {
-            background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 60%);
+.swatch-surface[data-v-9faeeffa] {
+                background: var(--card-surface);
+                border-color: color-mix(in srgb, var(--card-primary) 18%, transparent);
 }
-50% {
-            background: radial-gradient(circle at 20% 20%, rgba(0, 206, 209, 0.25) 0%, transparent 60%);
+&[data-v-9faeeffa]:hover {
+                transform: translateY(-4px);
+                border-color: color-mix(in srgb, var(--card-primary) 48%, transparent);
+                box-shadow:
+                    0 18px 34px color-mix(in srgb, var(--card-primary) 18%, transparent),
+                    0 0 18px color-mix(in srgb, var(--card-accent) 14%, transparent),
+                    inset 0 1px 0 rgba(255, 255, 255, 0.12);
 }
+&[data-v-9faeeffa]:active {
+                transform: translateY(-1px);
 }
-@keyframes shine-animation-18d6757b {
-0% {
-            top: -50%;
-            left: -50%;
+&.active-theme[data-v-9faeeffa] {
+                border-color: color-mix(in srgb, var(--card-primary) 68%, transparent) !important;
+                box-shadow:
+                    0 0 0 1px color-mix(in srgb, var(--card-primary) 34%, transparent),
+                    0 18px 36px color-mix(in srgb, var(--card-primary) 22%, transparent),
+                    inset 0 0 12px rgba(255, 255, 255, 0.08);
+                background: linear-gradient(155deg, color-mix(in srgb, var(--card-surface) 90%, transparent) 0%, color-mix(in srgb, var(--card-primary) 16%, transparent) 100%), linear-gradient(135deg, color-mix(in srgb, var(--card-primary) 8%, transparent) 0%, color-mix(in srgb, var(--card-accent) 10%, transparent) 100%);
 }
-100% {
-            top: 50%;
-            left: 50%;
 }
 }
-.background-list[data-v-18d6757b] {
-        margin: 4px;
+.background-list {
+&[data-v-9faeeffa] {
+        margin: 6px;
         border: var(--ui-background-list-border);
-        background: var(--ui-background-list-bg);
-        border-radius: 4px;
-        padding: 4px;
+        background: linear-gradient(155deg, color-mix(in srgb, var(--page-bg, #ffffff) 96%, transparent) 0%, color-mix(in srgb, var(--selection-bg, #cccccc) 6%, transparent) 100%), var(--ui-background-list-bg);
+        border-radius: 16px;
+        padding: 12px;
         box-shadow: var(--ui-theme-list-shadow);
 }
+.background-grid[data-v-9faeeffa] {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
+            gap: 12px;
+}
+}
 }
 
 
 .ui-presets {
-&[data-v-359285dc] {
+&[data-v-79abdc5c] {
     padding-bottom: 6px;
 }
 .box-presets {
-&[data-v-359285dc] {
+&[data-v-79abdc5c] {
         padding: 4px;
-        column-width: 160px;
-        column-gap: 8px;
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+        gap: 8px;
 }
 .preset-item {
-&[data-v-359285dc] {
+&[data-v-79abdc5c] {
             padding: 8px 10px;
-            border-radius: 8px;
+            border-radius: 4px;
             position: relative;
             background: var(--ui-presets-item-bg);
             border: var(--ui-presets-item-border);
@@ -3860,9 +3805,12 @@ img[data-v-18d6757b] {
             align-items: center;
             margin-bottom: 8px;
             gap: 6px;
-            transition: background 0.22s ease, box-shadow 0.22s ease, transform 0.18s ease;
+            transition:
+                background 0.22s ease,
+                box-shadow 0.22s ease,
+                transform 0.18s ease;
 }
-&[data-v-359285dc]::before {
+&[data-v-79abdc5c]::before {
                 content: "";
                 position: absolute;
                 top: 0;
@@ -3874,50 +3822,52 @@ img[data-v-18d6757b] {
                 transition: opacity 0.2s ease;
 }
 &:hover {
-&[data-v-359285dc] {
+&[data-v-79abdc5c] {
                 background: var(--ui-presets-item-hover-bg);
                 box-shadow: var(--ui-presets-item-hover-shadow);
-                transform: translateY(-2px);
 }
-&[data-v-359285dc]::before {
+&[data-v-79abdc5c]::before {
                     opacity: 1;
 }
-.close-corner[data-v-359285dc] {
+.close-corner[data-v-79abdc5c] {
                     opacity: 1;
                     transform: scale(1);
 }
 }
-.preset-item-info[data-v-359285dc] {
+.preset-item-info[data-v-79abdc5c] {
                 flex: 1;
                 display: flex;
                 flex-flow: column nowrap;
                 min-width: 0;
 }
 .close-corner {
-&[data-v-359285dc] {
+&[data-v-79abdc5c] {
                 flex-shrink: 0;
                 cursor: pointer;
                 color: var(--ui-presets-delete-color);
                 font-size: 18px;
                 opacity: 0;
                 transform: scale(0.7);
-                transition: color 0.15s ease, opacity 0.2s ease, transform 0.18s ease;
+                transition:
+                    color 0.15s ease,
+                    opacity 0.2s ease,
+                    transform 0.18s ease;
 }
-&[data-v-359285dc]:hover {
+&[data-v-79abdc5c]:hover {
                     color: var(--ui-presets-delete-hover-color);
 }
 }
-.cube-name[data-v-359285dc],
-            .cube-type[data-v-359285dc] {
+.cube-name[data-v-79abdc5c],
+            .cube-type[data-v-79abdc5c] {
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
 }
-.cube-name[data-v-359285dc] {
+.cube-name[data-v-79abdc5c] {
                 font-size: var(--float-cubelist-name-size);
                 font-weight: 500;
 }
-.cube-type[data-v-359285dc] {
+.cube-type[data-v-79abdc5c] {
                 font-size: var(--float-cubelist-type-size);
                 color: var(--ui-presets-item-type-color);
                 margin-top: 2px;
@@ -4082,19 +4032,19 @@ img[data-v-18d6757b] {
 
 
 .sidebar-config {
-&[data-v-52bfd3cf] {
+&[data-v-5aa8b869] {
     user-select: none;
     padding-bottom: 6px;
 }
 .config-box {
-&[data-v-52bfd3cf] {
+&[data-v-5aa8b869] {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
         gap: 8px;
         padding: 4px;
 }
 .config-group {
-&[data-v-52bfd3cf] {
+&[data-v-5aa8b869] {
             display: flex;
             flex-flow: column nowrap;
             gap: 4px;
@@ -4106,11 +4056,11 @@ img[data-v-18d6757b] {
             padding: 0 0 6px;
             min-width: 0;
 }
-.active[data-v-52bfd3cf] {
+.active[data-v-5aa8b869] {
                 color: var(--ui-config-active-icon-color);
                 text-shadow: 0px 0px 4px var(--ui-config-active-icon-color);
 }
-.config-title[data-v-52bfd3cf] {
+.config-title[data-v-5aa8b869] {
                 display: flex;
                 justify-content: center;
                 align-items: center;
@@ -4123,7 +4073,7 @@ img[data-v-18d6757b] {
                 margin-bottom: 2px;
 }
 .config-item {
-&[data-v-52bfd3cf] {
+&[data-v-5aa8b869] {
                 display: flex;
                 gap: 10px;
                 align-items: center;
@@ -4133,37 +4083,37 @@ img[data-v-18d6757b] {
                 margin: 0 4px;
                 transition: background 0.18s ease;
 }
-&[data-v-52bfd3cf]:hover {
+&[data-v-5aa8b869]:hover {
                     background: var(--ui-config-item-hover-bg);
 }
-.color-cube[data-v-52bfd3cf] {
+.color-cube[data-v-5aa8b869] {
                     border-radius: 4px;
                     padding: 10px;
 }
 .flexbox {
-&[data-v-52bfd3cf] {
+&[data-v-5aa8b869] {
                     display: flex;
                     flex-flow: row nowrap;
                     gap: 6px;
                     padding: 6px 10px;
 }
-.iconfont[data-v-52bfd3cf] {
+.iconfont[data-v-5aa8b869] {
                         font-size: 24px;
 }
-.iconfont[data-v-52bfd3cf]:hover {
+.iconfont[data-v-5aa8b869]:hover {
                         color: var(--ui-config-active-icon-color);
                         text-shadow: 0px 0px 4px var(--ui-config-active-icon-color);
 }
 }
-.iconfont[data-v-52bfd3cf]::before {
+.iconfont[data-v-5aa8b869]::before {
                     margin-right: 5px;
 }
-.el-slider[data-v-52bfd3cf] {
+.el-slider[data-v-5aa8b869] {
                     width: 100%;
                     min-width: 120px;
                     max-width: 250px;
 }
-.config-item-name[data-v-52bfd3cf] {
+.config-item-name[data-v-5aa8b869] {
                     padding: 2px 7px;
                     background: var(--ui-config-item-name-bg);
                     color: var(--ui-config-item-name-color);
@@ -4178,185 +4128,280 @@ img[data-v-18d6757b] {
 
 
 .ui-sidebar {
-&[data-v-24d77e26] {
+&[data-v-d868f792] {
     display: flex;
     flex-flow: row nowrap;
+    /* 不设 height，依赖父级 flex stretch 拉伸 */
+
+    /* ————— 图标胶囊 ————— */
+
+    /* ————— 激活图标：不用 ::before（会覆盖 iconfont 字形），改用 ::after 做指示条 ————— */
 }
-.sidebar-icons[data-v-24d77e26] {
-        padding: 10px;
+.sidebar-icons[data-v-d868f792] {
+        box-sizing: border-box;
+        padding: 10px 6px;
         display: flex;
         flex-flow: column nowrap;
         align-items: center;
         gap: 12px;
-        background: var(--sidebar-bg);
-        height: 100%;
-
+        backdrop-filter: var(--sidebar-backdrop, blur(16px) saturate(156%));
         width: var(--sidebar-width);
         user-select: none;
         z-index: calc(var(--ui-z-index) + 1);
         flex-shrink: 0;
 }
-.active-sideitem[data-v-24d77e26] {
+.active-sideitem[data-v-d868f792] {
         color: var(--sidebar-icon-active-color);
         background: var(--sidebar-icon-active-gradient);
         text-shadow: var(--sidebar-icon-active-shadow);
-        box-shadow: var(--sidebar-icon-glow);
-        border-radius: 6px;
+        position: relative;
 }
 .iconfont {
-&[data-v-24d77e26] {
-        font-size: 24px;
+&[data-v-d868f792] {
+        font-size: 22px;
         cursor: pointer;
         background: var(--sidebar-icon-bg);
         border: var(--sidebar-icon-border);
         border-radius: 6px;
-        padding: var(--menubar-icon-padding);
-        transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.18s ease;
+        padding: var(--sidebar-icon-padding, 6px);
+        transition: background var(--transition-base, 0.24s), color var(--transition-base, 0.24s),
+                    box-shadow var(--transition-base, 0.24s), transform var(--transition-spring, 0.36s cubic-bezier(0.34, 1.56, 0.64, 1));
+        will-change: transform;
 }
-&[data-v-24d77e26]:hover {
+&[data-v-d868f792]:hover {
             background: var(--sidebar-icon-hover-bg);
             color: var(--sidebar-icon-hover-color);
-            transform: scale(1.12);
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+            transform: scale(1.15);
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 }
 }
+
+/* ————— 面板胶囊 ————— */
 .sidebar-panel {
-&[data-v-24d77e26] {
+&[data-v-d868f792] {
+    box-sizing: border-box;
     position: relative;
-    height: 100%;
+    /* 与图标胶囊上下对齐，左侧无间距贴近图标 */
+    margin: 6px 4px 6px 0;
     z-index: 8;
     overflow: hidden;
-    padding-right: 5px;
-    overflow: hidden;
     max-width: 1200px;
-    height: 100%;
 }
-.dragger[data-v-24d77e26] {
+.dragger {
+&[data-v-d868f792] {
         position: absolute;
         right: 0px;
         top: 0px;
         bottom: 0px;
         margin: auto;
         width: 4px;
-        height: 120px;
+        height: 100px;
         cursor: w-resize;
         background: var(--sidebar-dragger-hover-bg);
+        border-radius: 3px;
+        opacity: 0.45;
+        transition: height var(--transition-base, 0.24s), opacity var(--transition-fast, 0.15s);
+}
+&[data-v-d868f792]:hover {
+            height: 140px;
+            opacity: 1;
+}
 }
 .sideitem-component {
-&[data-v-24d77e26] {
+&[data-v-d868f792] {
         overflow: hidden;
         height: 100%;
         width: 100%;
         background: var(--sidebar-panel-bg);
+        backdrop-filter: var(--sidebar-panel-backdrop, blur(14px) saturate(140%));
+        -webkit-backdrop-filter: var(--sidebar-panel-backdrop, blur(14px) saturate(140%));
 }
-&[data-v-24d77e26] > *::-webkit-scrollbar {
+&[data-v-d868f792] > *::-webkit-scrollbar {
             display: none;
 }
-& > div[data-v-24d77e26] {
+& > div[data-v-d868f792] {
             height: 100%;
             overflow: scroll;
             padding-right: 4px;
 }
-&[data-v-24d77e26] .sidebar-panel-toolbox {
+&[data-v-d868f792] .sidebar-panel-toolbox {
             position: sticky;
             top: 0px;
             background: var(--sidebar-panel-toolbox-bg);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
             display: flex;
             align-items: center;
             justify-content: right;
-            gap: 10px;
-            padding: 4px;
+            gap: 8px;
+            padding: 4px 6px;
             margin: 4px;
-            border-radius: 4px;
+            border-radius: 6px;
             z-index: 2;
 .iconfont {
 & {
                 font-size: var(--ui-icon-size-lv2);
+                transition: color var(--transition-fast, 0.15s), transform var(--transition-spring, 0.36s cubic-bezier(0.34, 1.56, 0.64, 1));
+                will-change: transform;
 }
 &:hover {
                     color: var(--ui-catalogue-tools-hover-color);
+                    transform: scale(1.15);
 }
 }
 .tools-icon {
                 display: flex;
                 align-items: center;
-                gap: 10px;
+                gap: 8px;
 }
 }
 }
 }
 
 
-.doc-statusbar {
-&[data-v-041748c4] {
+.note-statusbar[data-v-1ab5f5dd] {
     flex-shrink: 0;
-    transition: 1s;
-    height: var(--statusbar-height);
-    position: absolute;
-    bottom: 0px;
+    transition:
+        transform var(--transition-base, 0.24s),
+        opacity var(--transition-base, 0.24s);
     width: 100%;
-    left: 0px;
+    z-index: var(--ui-z-index);
+    pointer-events: none;
+    font-size: var(--statusbar-font-size, 12px);
+}
+.statusbar-shell {
+&[data-v-1ab5f5dd] {
+    min-height: var(--statusbar-height, 32px);
+    font-size: var(--statusbar-font-size, 12px);
     display: flex;
     justify-content: space-between;
     align-items: center;
-    z-index: var(--ui-z-index);
-    background: var(--statusbar-bg);
-    padding: 4px;
+    gap: 8px;
+    width: 100%;
+    padding: 2px 10px;
+    pointer-events: auto;
+    overflow: hidden;
+    position: relative;
+    border-top: var(--statusbar-border-top, 1px solid rgba(255, 255, 255, 0.3));
+    box-shadow: var(--statusbar-shadow);
+    }
+&[data-v-1ab5f5dd] > * {
+        position: relative;
+        z-index: 1;
 }
-.notsave[data-v-041748c4] {
+.notsave[data-v-1ab5f5dd] {
         background: var(--statusbar-item-not-save-bg);
+        color: var(--statusbar-item-not-save-color);
+        box-shadow: var(--statusbar-item-not-save-shadow);
 }
-.mode-reading[data-v-041748c4] {
+.mode-reading[data-v-1ab5f5dd] {
         background: var(--statusbar-item-reading-mode-bg);
         color: var(--statusbar-item-reading-mode-color);
+        box-shadow: var(--statusbar-item-reading-mode-shadow);
 }
 }
-.statusbar-docid[data-v-041748c4] {
-    background: var(--statusbar-item-bg);
-    color: var(--statusbar-item-color);
-    padding: 2px 10px;
+.statusbar-docid {
+&[data-v-1ab5f5dd] {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    flex-shrink: 0;
+    max-width: min(34%, 320px);
+    cursor: pointer;
+    background: var(--statusbar-docid-bg);
+    color: var(--statusbar-docid-color);
+    padding: 3px 10px;
     border-radius: 4px;
+    box-shadow: var(--statusbar-docid-shadow);
+    transition:
+        transform var(--transition-spring, 0.36s cubic-bezier(0.34, 1.56, 0.64, 1)),
+        box-shadow var(--transition-base, 0.24s),
+        background var(--transition-base, 0.24s);
+    will-change: transform;
+    }
+&[data-v-1ab5f5dd]:hover {
+        transform: translateY(-2px);
+        background: var(--statusbar-docid-hover-bg);
+        box-shadow: var(--statusbar-docid-hover-shadow);
+}
+}
+.statusbar-docid-label[data-v-1ab5f5dd] {
+    flex-shrink: 0;
+    letter-spacing: 0.12em;
+    opacity: 0.6;
+}
+.statusbar-docid-value[data-v-1ab5f5dd] {
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 .statusbar-items {
-&[data-v-041748c4] {
+&[data-v-1ab5f5dd] {
+    flex: 1;
+    min-width: 0;
     max-width: var(--statusbar-items-max-width);
     overflow-x: scroll;
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
-    gap: 5px;
-}
-&[data-v-041748c4] > * {
+    gap: 8px;
+    padding: 1px;
+    }
+.statusbar-item {
+&[data-v-1ab5f5dd] {
         cursor: pointer;
         background: var(--statusbar-item-bg);
         color: var(--statusbar-item-color);
         white-space: nowrap;
-        text-overflow: ellipsis;
         overflow: hidden;
+        display: inline-flex;
+        align-items: center;
+        min-height: 20px;
+        max-width: 220px;
+        padding: 2px 8px;
+        border-radius: 4px;
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
+        transition:
+            transform var(--transition-spring, 0.36s cubic-bezier(0.34, 1.56, 0.64, 1)),
+            background var(--transition-base, 0.24s),
+            border-color var(--transition-base, 0.24s),
+            box-shadow var(--transition-base, 0.24s);
+        will-change: transform;
+        }
+&[data-v-1ab5f5dd]:hover {
+            background: var(--statusbar-item-hover-bg);
+            border-color: var(--statusbar-item-hover-border);
+            box-shadow: var(--statusbar-item-hover-shadow);
 }
-.has-scope[data-v-041748c4] {
+}
+.statusbar-item-text[data-v-1ab5f5dd] {
+        overflow: hidden;
+        text-overflow: ellipsis;
+}
+.has-scope[data-v-1ab5f5dd] {
         background: var(--statusbar-item-scope-exist-bg);
         color: var(--statusbar-item-scope-exist-color);
+        box-shadow: var(--statusbar-item-scope-exist-shadow);
 }
-.iconfont {
-&[data-v-041748c4] {
-        padding: 2px 10px;
-        border-radius: 4px;
+.statusbar-item.iconfont {
+&[data-v-1ab5f5dd] {
         font-weight: 300;
-}
-&[data-v-041748c4]::before {
-            margin-right: 5px;
+        }
+&[data-v-1ab5f5dd]::before {
+            margin-right: 4px;
+            opacity: 0.8;
 }
 }
-&[data-v-041748c4]::-webkit-scrollbar {
+&[data-v-1ab5f5dd]::-webkit-scrollbar {
         display: none;
 }
 }
 
 
 .ui-toolbar {
-&[data-v-0aa87a9d] {
+&[data-v-c7651bea] {
     user-select: none;
     z-index: var(--ui-z-index);
     display: flex;
@@ -4368,13 +4413,12 @@ img[data-v-18d6757b] {
     left: 0px;
     padding: 4px;
     border-radius: 4px;
-    background: var(--toolbar-bg);
 }
-.icon-disable[data-v-0aa87a9d] {
+.icon-disable[data-v-c7651bea] {
         color: var(--toolbar-icon-disable-color);
 }
 }
-.box-toolbar[data-v-0aa87a9d] {
+.box-toolbar[data-v-c7651bea] {
     transition: 0.6s;
     max-width: 100%;
     user-select: none;
@@ -4384,14 +4428,14 @@ img[data-v-18d6757b] {
     flex-flow: column nowrap;
     justify-content: center;
 }
-.tool-map[data-v-0aa87a9d] {
+.tool-map[data-v-c7651bea] {
     color: var(--toolbar-toolmap-color);
 }
-.icon-active[data-v-0aa87a9d] {
-    background: turquoise;
+.icon-active[data-v-c7651bea] {
+    background: var(--menu-item-bg-hover, turquoise);
 }
 .tool-group {
-&[data-v-0aa87a9d] {
+&[data-v-c7651bea] {
     display: flex;
     flex-flow: row nowrap;
     gap: 8px;
@@ -4402,15 +4446,15 @@ img[data-v-18d6757b] {
     border-radius: 5px;
     cursor: pointer;
 }
-&[data-v-0aa87a9d]:hover {
+&[data-v-c7651bea]:hover {
         background: var(--toolbar-custom-card-hover-bg);
 }
-& > div[data-v-0aa87a9d] {
+& > div[data-v-c7651bea] {
         font-size: var(--toolbar-iconsize);
         text-align: center;
 }
 }
-.toolbar-content[data-v-0aa87a9d] {
+.toolbar-content[data-v-c7651bea] {
     display: flex;
     justify-content: center;
     flex-flow: row wrap;
@@ -4418,7 +4462,7 @@ img[data-v-18d6757b] {
     padding: 4px;
 }
 .toolbar-foot {
-&[data-v-0aa87a9d] {
+&[data-v-c7651bea] {
     user-select: none;
     display: flex;
     align-items: center;
@@ -4427,10 +4471,10 @@ img[data-v-18d6757b] {
     overflow-y: hidden;
     scrollbar-width: none;
 }
-&[data-v-0aa87a9d]:empty {
+&[data-v-c7651bea]:empty {
         display: none;
 }
-& > div[data-v-0aa87a9d] {
+& > div[data-v-c7651bea] {
         border: 1px dashed;
         padding: 4px;
         border-radius: 5px;
@@ -4439,15 +4483,15 @@ img[data-v-18d6757b] {
         white-space: nowrap;
         font-size: 14px;
 }
-& > div[data-v-0aa87a9d]:hover {
+& > div[data-v-c7651bea]:hover {
         background-color: var(--toolbar-foot-icon-bg-hover);
 }
 }
 .active-item {
-&[data-v-0aa87a9d] {
+&[data-v-c7651bea] {
     position: relative;
 }
-&[data-v-0aa87a9d]::before {
+&[data-v-c7651bea]::before {
         content: "";
         width: 4px;
         height: 4px;
@@ -4467,11 +4511,16 @@ img[data-v-18d6757b] {
     inset: 0;
     max-width: 600px;
     width: 100%;
-    background: var(--dialog-bg, #1e1e1e);
-    color: var(--color, #fff);
-    border: 1px solid var(--dialog-border, #333);
-    border-radius: 14px;
-    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(80, 200, 220, 0.12);
+    background: var(--dialog-bg);
+    backdrop-filter: blur(24px) saturate(180%);
+    -webkit-backdrop-filter: blur(24px) saturate(180%);
+    color: var(--color);
+    border: 1px solid color-mix(in srgb, var(--selection-bg, #54d8ff) 24%, rgba(255, 255, 255, 0.3));
+    border-radius: 10px;
+    box-shadow:
+        0 20px 60px rgba(0, 0, 0, 0.18),
+        0 0 0 1px rgba(255, 255, 255, 0.1),
+        inset 0 1px 0 rgba(255, 255, 255, 0.45);
     padding: 20px 24px 24px;
     overflow: hidden;
     display: none;
@@ -4483,77 +4532,78 @@ img[data-v-18d6757b] {
 
     &[open] {
         display: flex;
-        animation: dialog-fade-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+        animation: dialog-spring-in 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
     }
 
     &::backdrop {
-        background: var(--dialog-backdrop-bg, rgba(0, 0, 0, 0.5));
-        backdrop-filter: blur(4px);
-        animation: backdrop-fade-in 0.22s ease-out forwards;
+        background: var(--dialog-backdrop-bg, rgba(0, 0, 0, 0.3));
+        backdrop-filter: blur(6px);
+        animation: backdrop-fade-in 0.25s ease-out forwards;
     }
 
     .title {
-        font-size: 16px;
+        font-size: 15px;
         font-weight: 600;
         text-align: center;
-        /* 负边距让标题条延伸至弹窗边缘 */
         margin: -20px -24px 0;
-        padding: 12px 44px 12px 24px;
+        padding: 11px 44px 11px 24px;
         background: var(--dialog-header-gradient);
         color: var(--dialog-header-color);
-        letter-spacing: 0.8px;
+        letter-spacing: 0.6px;
         flex-shrink: 0;
     }
 
     .close-corner {
         position: absolute;
-        right: 12px;
-        top: 8px;
-        width: 28px;
-        height: 28px;
+        right: 10px;
+        top: 7px;
+        width: 26px;
+        height: 26px;
         display: flex;
         justify-content: center;
         align-items: center;
         border-radius: 6px;
         cursor: pointer;
         color: var(--dialog-header-color, #888);
-        transition: all 0.18s;
+        transition: background 0.15s, color 0.15s, transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
         z-index: 1;
-        
+        will-change: transform;
+
         &::before {
             content: "×";
             font-family: sans-serif;
-            font-size: 24px;
+            font-size: 22px;
             line-height: 1;
         }
 
         &:hover {
-            background: var(--dialog-close-hover-bg, rgba(255, 255, 255, 0.15));
-            color: var(--dialog-close-hover-color, #fff);
-            transform: scale(1.1);
+            background: var(--dialog-close-hover-bg, rgba(255, 255, 255, 0.18));
+            color: var(--dialog-close-hover-color);
+            transform: scale(1.14) rotate(90deg);
         }
     }
 
     .submit {
-        padding: 10px 16px;
+        padding: 9px 16px;
         display: flex;
         justify-content: center;
         align-items: center;
         background: var(--float-confirm-gradient);
         color: var(--float-confirm-color);
-        border-radius: 8px;
+        border-radius: 6px;
         cursor: pointer;
         font-weight: 600;
         font-size: 14px;
-        letter-spacing: 0.5px;
-        transition: box-shadow 0.2s ease, transform 0.15s ease;
+        letter-spacing: 0.4px;
+        transition: box-shadow 0.2s ease, transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
         user-select: none;
         width: 100%;
         box-sizing: border-box;
+        will-change: transform;
 
         &:hover {
             box-shadow: var(--float-confirm-hover-shadow);
-            transform: translateY(-1px);
+            transform: translateY(-2px);
         }
 
         &:active {
@@ -4562,25 +4612,25 @@ img[data-v-18d6757b] {
     }
 }
 
-@keyframes dialog-fade-in {
-    from { opacity: 0; transform: scale(0.94) translateY(-12px); }
-    to { opacity: 1; transform: scale(1) translateY(0); }
+@keyframes dialog-spring-in {
+    from { opacity: 0; transform: scale(0.88) translateY(-16px); }
+    to   { opacity: 1; transform: scale(1)    translateY(0); }
 }
 
 @keyframes backdrop-fade-in {
     from { opacity: 0; }
-    to { opacity: 1; }
+    to   { opacity: 1; }
 }
 
 .ui-dialog-box input[type="text"] {
-    background: var(--dialog-input-bg, rgba(255, 255, 255, 0.05));
+    background: var(--dialog-input-bg);
     border: var(--float-input-border);
     border-radius: 6px;
     outline: none;
-    padding: 8px 12px;
+    padding: 7px 12px;
     font-size: 14px;
-    color: var(--color, #fff);
-    transition: all 0.2s;
+    color: var(--color);
+    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
     font-family: inherit;
     width: 100%;
     box-sizing: border-box;
@@ -4588,80 +4638,12 @@ img[data-v-18d6757b] {
 .ui-dialog-box input[type="text"]:focus {
     border-color: var(--ui-base-input-border-focus);
     box-shadow: var(--ui-base-input-shadow-focus);
-    background: var(--dialog-input-focus-bg, rgba(255, 255, 255, 0.1));
+    background: var(--dialog-input-focus-bg);
 }
 .ui-dialog-box input[type="text"]::placeholder {
     color: var(--dialog-input-placeholder-color, #888);
 }
 
-
-    .close-corner {
-        position: absolute;
-        right: 12px;
-        top: 8px;
-        width: 28px;
-        height: 28px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        border-radius: 6px;
-        cursor: pointer;
-        color: var(--dialog-header-color, #888);
-        transition: all 0.18s;
-        z-index: 1;
-        
-        &::before {
-            content: "×";
-            font-family: sans-serif;
-            font-size: 24px;
-            line-height: 1;
-        }
-
-        &:hover {
-            background: var(--dialog-close-hover-bg, rgba(255, 255, 255, 0.15));
-            color: var(--dialog-close-hover-color, #fff);
-            transform: scale(1.1);
-        }
-    }
-
-    .submit {
-        padding: 10px 16px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        background: var(--float-confirm-gradient);
-        color: var(--float-confirm-color);
-        border-radius: 8px;
-        cursor: pointer;
-        font-weight: 600;
-        font-size: 14px;
-        letter-spacing: 0.5px;
-        transition: box-shadow 0.2s ease, transform 0.15s ease;
-        user-select: none;
-        width: 100%;
-        box-sizing: border-box;
-
-        &:hover {
-            box-shadow: var(--float-confirm-hover-shadow);
-            transform: translateY(-1px);
-        }
-
-        &:active {
-            transform: translateY(0);
-        }
-    }
-
-
-@keyframes dialog-fade-in {
-    from { opacity: 0; transform: scale(0.94) translateY(-12px); }
-    to { opacity: 1; transform: scale(1) translateY(0); }
-}
-
-@keyframes backdrop-fade-in {
-    from { opacity: 0; }
-    to { opacity: 1; }
-}
-
 .ui-dialog-box input[type="text"] {
     background: var(--dialog-input-bg, rgba(255, 255, 255, 0.05));
     border: var(--float-input-border);
@@ -5024,13 +5006,13 @@ input[data-v-4772b3b2] {
 
 
 .float-cubelist {
-&[data-v-12c536b4] {
+&[data-v-d23ee166] {
     display: flex;
     justify-content: center;
     align-items: center;
     max-width: var(--float-cubelist-width);
     border-radius: 8px;
-    z-index: 6;
+    z-index: var(--float-zindex);
     position: relative;
     user-select: none;
     position: fixed;
@@ -5039,16 +5021,16 @@ input[data-v-4772b3b2] {
     box-shadow: var(--float-cubelist-box-shadow);
     border: var(--float-cubelist-border);
 }
-&[data-v-12c536b4]::-webkit-scrollbar {
+&[data-v-d23ee166]::-webkit-scrollbar {
         width: 4px;
         background-color: transparent;
 }
-&[data-v-12c536b4]::-webkit-scrollbar-thumb {
-        background: #888;
+&[data-v-d23ee166]::-webkit-scrollbar-thumb {
+        background: var(--ui-scrollbar-thumb-bg, #888);
         border-radius: 10px;
 }
 }
-.cube-list-content[data-v-12c536b4] {
+.cube-list-content[data-v-d23ee166] {
     padding: 4px 8px;
     background: var(--float-cubelist-bg);
     max-width: 100%;
@@ -5056,7 +5038,7 @@ input[data-v-4772b3b2] {
     border-radius: 8px;
 }
 .cube-list-search {
-&[data-v-12c536b4] {
+&[data-v-d23ee166] {
     margin: 5px 10px;
     border-radius: 100px;
     text-align: center;
@@ -5067,7 +5049,7 @@ input[data-v-4772b3b2] {
     align-items: center;
 }
 #filter-cube {
-&[data-v-12c536b4] {
+&[data-v-d23ee166] {
         font-size: 18px;
         width: 0px;
         overflow: hidden;
@@ -5082,11 +5064,11 @@ input[data-v-4772b3b2] {
         opacity: 0;
         color: var(--float-cubelist-input-color);
 }
-&[data-v-12c536b4]::placeholder {
+&[data-v-d23ee166]::placeholder {
             color: gray;
             letter-spacing: 1px;
 }
-&[data-v-12c536b4]:focus {
+&[data-v-d23ee166]:focus {
             width: 300px;
             padding: 6px 20px;
 
@@ -5094,11 +5076,11 @@ input[data-v-4772b3b2] {
             font-size: 16px;
 }
 }
-#filter-cube:focus + .icon[data-v-12c536b4] {
+#filter-cube:focus + .icon[data-v-d23ee166] {
         background-color: black;
         margin-left: -30px;
 }
-#filter-cube:focus + .icon[data-v-12c536b4]::before {
+#filter-cube:focus + .icon[data-v-d23ee166]::before {
         width: 50%;
         height: 2px;
         left: 25%;
@@ -5107,14 +5089,14 @@ input[data-v-4772b3b2] {
         background-color: var(--float-cubelist-search-color);
         transform: rotate(-45deg);
 }
-#filter-cube:focus + .icon[data-v-12c536b4]::after {
+#filter-cube:focus + .icon[data-v-d23ee166]::after {
         width: 50%;
         height: 2px;
         left: 25%;
         top: 48%;
 }
 .icon {
-&[data-v-12c536b4] {
+&[data-v-d23ee166] {
         width: 30px;
         height: 30px;
         display: flex;
@@ -5127,7 +5109,7 @@ input[data-v-4772b3b2] {
         position: relative;
         transition: 1s;
 }
-&[data-v-12c536b4]::before {
+&[data-v-d23ee166]::before {
             content: "";
             transition: 0.5s;
             position: absolute;
@@ -5138,7 +5120,7 @@ input[data-v-4772b3b2] {
             left: 20%;
             top: 20%;
 }
-&[data-v-12c536b4]::after {
+&[data-v-d23ee166]::after {
             content: "";
             transition: 0.5s;
             position: absolute;
@@ -5150,7 +5132,7 @@ input[data-v-4772b3b2] {
             left: 55%;
 }
 }
-&[data-v-12c536b4]:empty::before {
+&[data-v-d23ee166]:empty::before {
         content: "Find Cube...";
         color: #ccc;
         text-shadow: 0px 0px 2px black;
@@ -5158,7 +5140,7 @@ input[data-v-4772b3b2] {
 }
 }
 .cube-grid {
-&[data-v-12c536b4] {
+&[data-v-d23ee166] {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 5px;
@@ -5167,7 +5149,7 @@ input[data-v-4772b3b2] {
     padding-right: 4px;
 }
 .item-card {
-&[data-v-12c536b4] {
+&[data-v-d23ee166] {
         display: flex;
         align-items: center;
         gap: 4px;
@@ -5175,36 +5157,36 @@ input[data-v-4772b3b2] {
         border-radius: 4px;
         transition: 0.5s;
 }
-&[data-v-12c536b4]:hover {
+&[data-v-d23ee166]:hover {
             background: var(--float-cubelist-itembox-hover-bg);
             box-shadow: 0px 0px 12px var(--float-cubelist-itembox-hover-bg);
 }
-.iconfont[data-v-12c536b4] {
+.iconfont[data-v-d23ee166] {
             font-size: 24px;
             margin-left: 4px;
 }
 }
-.item-preset-global[data-v-12c536b4] {
+.item-preset-global[data-v-d23ee166] {
         background: var(--float-cubelist-preset-global-bg) !important;
 }
-.item-preset[data-v-12c536b4] {
+.item-preset[data-v-d23ee166] {
         background: var(--float-cubelist-preset-bg);
 }
-.item-cube[data-v-12c536b4] {
+.item-cube[data-v-d23ee166] {
         background: var(--float-cubelist-cube-bg);
 }
 .active {
-&[data-v-12c536b4] {
+&[data-v-d23ee166] {
         background: var(--float-cubelist-active-bg);
         box-shadow: var(--float-cubelist-active-shadow);
         color: var(--float-cubelist-active-color);
 }
-.iconfont[data-v-12c536b4] {
+.iconfont[data-v-d23ee166] {
             color: var(--float-cubelist-active-icon-color);
 }
 }
 .cube-box {
-&[data-v-12c536b4] {
+&[data-v-d23ee166] {
         border-radius: 8px;
         padding: 5px 10px;
         cursor: pointer;
@@ -5212,19 +5194,19 @@ input[data-v-4772b3b2] {
 
         overflow: hidden;
 }
-&[data-v-12c536b4] > * {
+&[data-v-d23ee166] > * {
             pointer-events: none;
 }
-.cube-name[data-v-12c536b4],
-        .cube-type[data-v-12c536b4] {
+.cube-name[data-v-d23ee166],
+        .cube-type[data-v-d23ee166] {
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
 }
-.cube-name[data-v-12c536b4] {
+.cube-name[data-v-d23ee166] {
             font-size: var(--float-cubelist-name-size);
 }
-.cube-type[data-v-12c536b4] {
+.cube-type[data-v-d23ee166] {
             font-size: var(--float-cubelist-type-size);
             color: var(--float-cubelist-itembox-code-bg);
 }
@@ -5232,7 +5214,7 @@ input[data-v-4772b3b2] {
 }
 
 
-@keyframes slide-374a4efa {
+@keyframes slide-4809ce28 {
 from {
         translate: 300px 0px;
 }
@@ -5240,21 +5222,22 @@ to {
         translate: 0px 0px;
 }
 }
-.float-dict-adder[data-v-374a4efa] {
+.float-dict-adder[data-v-4809ce28] {
     padding: 10px;
     position: fixed;
     right: 10px;
     top: 350px;
     border-radius: 12px;
-    animation: 0.3s slide-374a4efa ease-out forwards;
+    animation: 0.3s slide-4809ce28 ease-out forwards;
     background: var(--float-dict-adder-bg);
     border: var(--float-card-border);
     box-shadow: var(--float-shadow);
     backdrop-filter: blur(8px);
     min-width: 260px;
+    z-index: var(--float-zindex);
 }
 .float-dict-adder-tabs {
-&[data-v-374a4efa] {
+&[data-v-4809ce28] {
     display: flex;
     flex-flow: row nowrap;
     justify-content: space-evenly;
@@ -5265,10 +5248,10 @@ to {
     border-radius: 6px;
     margin-bottom: 6px;
 }
-.active[data-v-374a4efa] {
+.active[data-v-4809ce28] {
         background: var(--float-dict-adder-tab-active-bg);
 }
-div[data-v-374a4efa] {
+div[data-v-4809ce28] {
         cursor: pointer;
         padding: 5px 10px;
         background: var(--float-dict-adder-tab-item-bg);
@@ -5278,11 +5261,11 @@ div[data-v-374a4efa] {
         transition: background 0.18s ease;
 }
 }
-.float-dict-adder-associate[data-v-374a4efa] {
+.float-dict-adder-associate[data-v-4809ce28] {
     display: flex;
     flex-flow: column nowrap;
 }
-.float-dict-adder-tip[data-v-374a4efa] {
+.float-dict-adder-tip[data-v-4809ce28] {
     background: var(--float-dict-adder-tip-bg);
     border: var(--float-dict-adder-tip-border);
     padding: 5px 8px;
@@ -5291,7 +5274,7 @@ div[data-v-374a4efa] {
     font-size: 12px;
     opacity: 0.85;
 }
-.iconbox[data-v-374a4efa] {
+.iconbox[data-v-4809ce28] {
     display: flex;
     justify-content: flex-end;
     align-items: center;
@@ -5299,7 +5282,7 @@ div[data-v-374a4efa] {
     width: 100%;
 }
 .confirm {
-&[data-v-374a4efa] {
+&[data-v-4809ce28] {
     cursor: pointer;
     padding: 8px 14px;
     border-radius: 8px;
@@ -5313,7 +5296,7 @@ div[data-v-374a4efa] {
     margin-top: 4px;
     transition: box-shadow 0.2s ease, transform 0.15s ease;
 }
-&[data-v-374a4efa]:hover {
+&[data-v-4809ce28]:hover {
         box-shadow: var(--float-confirm-hover-shadow);
         transform: translateY(-1px);
 }
@@ -5321,12 +5304,12 @@ div[data-v-374a4efa] {
 
 
 .float-fomula {
-&[data-v-5599c20d] {
+&[data-v-50a99b16] {
     display: flex;
     flex-flow: column nowrap;
     gap: 5px;
     transition: 0.3s;
-    z-index: 6;
+    z-index: var(--float-zindex);
     position: fixed;
     width: 70%;
     max-width: 1200px;
@@ -5336,43 +5319,43 @@ div[data-v-374a4efa] {
     box-shadow: var(--float-fomula-shadow);
     background: var(--float-fomula-bg);
 }
-.active[data-v-5599c20d] {
+.active[data-v-50a99b16] {
         background: var(--float-fomula-nav-item-active-bg) !important;
 }
 .fomula-toolbar {
-&[data-v-5599c20d] {
+&[data-v-50a99b16] {
         display: flex;
         flex-flow: row nowrap;
         gap: 10px;
         align-items: center;
         width: 100%;
 }
-span[data-v-5599c20d] {
+span[data-v-50a99b16] {
             padding: 5px;
             font-size: var(--ui-icon-size-lv2);
             background: var(--float-fomula-nav-item-bg);
             border-radius: 4px;
             cursor: pointer;
 }
-span[data-v-5599c20d]:hover {
+span[data-v-50a99b16]:hover {
             background: var(--float-fomula-nav-item-bg);
 }
 }
-.fomula-editor[data-v-5599c20d] {
+.fomula-editor[data-v-50a99b16] {
         display: flex;
         flex-flow: row nowrap;
         gap: 5px;
         height: 400px;
 }
 .fomula-input-area {
-&[data-v-5599c20d] {
+&[data-v-50a99b16] {
         display: flex;
         flex-flow: column nowrap;
         gap: 5px;
         flex: 0 0;
         flex: 1;
 }
-.fomula-latex-input[data-v-5599c20d] {
+.fomula-latex-input[data-v-50a99b16] {
             flex: 1;
             color: var(--float-fomula-input-color);
 
@@ -5386,7 +5369,7 @@ span[data-v-5599c20d]:hover {
             outline: none;
 }
 .fomula-mathml-input {
-&[data-v-5599c20d] {
+&[data-v-50a99b16] {
             flex: 1;
             background: var(--float-fomula-part-bg);
             padding: 5px;
@@ -5398,13 +5381,13 @@ span[data-v-5599c20d]:hover {
             justify-content: center;
             align-items: center;
 }
-&[data-v-5599c20d]:empty::before{
+&[data-v-50a99b16]:empty::before{
                 content:'公式展示区域';
 }
 }
 }
 .fomula-candidate {
-&[data-v-5599c20d] {
+&[data-v-50a99b16] {
         display: flex;
         flex-flow: column nowrap;
         gap: 5px;
@@ -5415,7 +5398,7 @@ span[data-v-5599c20d]:hover {
         width: var(--float-fomula-candidator-width);
 }
 .fomula-candidate-nav {
-&[data-v-5599c20d] {
+&[data-v-50a99b16] {
             display: flex;
             flex-flow: row nowrap;
             gap: 10px;
@@ -5423,51 +5406,51 @@ span[data-v-5599c20d]:hover {
             overflow: hidden;
             flex-shrink: 0;
 }
-span[data-v-5599c20d] {
+span[data-v-50a99b16] {
                 background: var(--float-fomula-nav-item-bg);
                 padding: 5px 10px;
                 border-radius: 4px;
                 cursor: pointer;
 }
-span[data-v-5599c20d]:hover {
+span[data-v-50a99b16]:hover {
                 background: var(--float-fomula-nav-item-hover-bg);
 }
 .fomula-nav-type {
-&[data-v-5599c20d] {
+&[data-v-50a99b16] {
                 display: flex;
                 flex-flow: row nowrap;
                 gap: 5px;
                 overflow-x: scroll;
 }
-&[data-v-5599c20d]::-webkit-scrollbar {
+&[data-v-50a99b16]::-webkit-scrollbar {
                     width: 2px;
                     height: 2px;
                     background-color: var(--ui-scrollbar-bg);
 }
-span[data-v-5599c20d] {
+span[data-v-50a99b16] {
                     white-space: nowrap;
 }
 }
 }
 .fomula-candidate-values {
-&[data-v-5599c20d] {
+&[data-v-50a99b16] {
             overflow: scroll;
 }
 .fomula-type {
-&[data-v-5599c20d] {
+&[data-v-50a99b16] {
                 display: flex;
                 gap: 8px;
                 flex-flow: row wrap;
                 justify-content: start;
 }
-span[data-v-5599c20d] {
+span[data-v-50a99b16] {
                     padding: 3px 6px;
                     border-radius: 4px;
                     background: var(--float-fomula-candidate-item-bg);
                     cursor: pointer;
                     height: fit-content;
 }
-span[data-v-5599c20d]:hover {
+span[data-v-50a99b16]:hover {
                     background: var(--float-fomula-candidate-item-hover-bg);
 }
 }
@@ -5476,7 +5459,7 @@ span[data-v-5599c20d]:hover {
 }
 
 
-@keyframes goto-a3f7932a {
+@keyframes goto-d871a2bc {
 from {
         opacity: 0;
 }
@@ -5484,7 +5467,7 @@ to {
         opacity: 1;
 }
 }
-.text-link-ask[data-v-a3f7932a] {
+.text-link-ask[data-v-d871a2bc] {
     position: fixed;
     display: flex;
     flex-flow: column nowrap;
@@ -5494,12 +5477,13 @@ to {
     box-shadow: var(--float-shadow);
     border-radius: 12px;
     border: var(--float-card-border);
-    animation: 0.5s goto-a3f7932a ease-in forwards;
+    animation: 0.5s goto-d871a2bc ease-in forwards;
     background: var(--float-link-ask-bg);
     backdrop-filter: blur(8px);
     gap: 4px;
+    z-index: var(--float-zindex);
 }
-.iconbox[data-v-a3f7932a] {
+.iconbox[data-v-d871a2bc] {
     display: flex;
     justify-content: flex-end;
     align-items: center;
@@ -5507,7 +5491,7 @@ to {
     width: 100%;
 }
 .confirm {
-&[data-v-a3f7932a] {
+&[data-v-d871a2bc] {
     cursor: pointer;
     padding: 8px 14px;
     border-radius: 8px;
@@ -5520,14 +5504,14 @@ to {
     letter-spacing: 0.4px;
     transition: box-shadow 0.2s ease, transform 0.15s ease;
 }
-&[data-v-a3f7932a]:hover {
+&[data-v-d871a2bc]:hover {
         box-shadow: var(--float-confirm-hover-shadow);
         transform: translateY(-1px);
 }
 }
 
 
-@keyframes goto-725c4e4c {
+@keyframes goto-a493777a {
 from {
         opacity: 0;
 }
@@ -5535,7 +5519,7 @@ to {
         opacity: 1;
 }
 }
-.text-link-ask[data-v-725c4e4c] {
+.text-link-ask[data-v-a493777a] {
     position: fixed;
     display: flex;
     flex-flow: column nowrap;
@@ -5545,12 +5529,13 @@ to {
     box-shadow: var(--float-shadow);
     border-radius: 12px;
     border: var(--float-card-border);
-    animation: 0.5s goto-725c4e4c ease-in forwards;
+    animation: 0.5s goto-a493777a ease-in forwards;
     background: var(--float-link-ask-bg);
     backdrop-filter: blur(8px);
     gap: 4px;
+    z-index: var(--float-zindex);
 }
-.iconbox[data-v-725c4e4c] {
+.iconbox[data-v-a493777a] {
     display: flex;
     justify-content: flex-end;
     align-items: center;
@@ -5558,7 +5543,7 @@ to {
     width: 100%;
 }
 .confirm {
-&[data-v-725c4e4c] {
+&[data-v-a493777a] {
     cursor: pointer;
     padding: 8px 14px;
     border-radius: 8px;
@@ -5571,7 +5556,7 @@ to {
     letter-spacing: 0.4px;
     transition: box-shadow 0.2s ease, transform 0.15s ease;
 }
-&[data-v-725c4e4c]:hover {
+&[data-v-a493777a]:hover {
         box-shadow: var(--float-confirm-hover-shadow);
         transform: translateY(-1px);
 }
@@ -5584,6 +5569,7 @@ to {
     border-radius: 4px;
     box-shadow: var(--float-table-shadow);
     transition: 0.4s;
+    z-index: var(--float-zindex);
 .float-table-grid {
         display: grid;
         grid-template-columns: repeat(9, 1fr);
@@ -5616,7 +5602,7 @@ div {
 
 
 .float-rt {
-&[data-v-e7e23202] {
+&[data-v-16ce4aa8] {
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
@@ -5628,14 +5614,15 @@ div {
     border: var(--float-card-border);
     box-shadow: var(--float-shadow);
     backdrop-filter: blur(8px);
+    z-index: var(--float-zindex);
 }
-.iconfont[data-v-e7e23202] {
+.iconfont[data-v-16ce4aa8] {
         font-size: 18px;
         color: var(--float-color);
         opacity: 0.8;
 }
 input {
-&[data-v-e7e23202] {
+&[data-v-16ce4aa8] {
         padding: 5px 8px;
         background: transparent;
         border: var(--float-input-border);
@@ -5646,13 +5633,13 @@ input {
         min-width: 120px;
         transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }
-&[data-v-e7e23202]:focus {
+&[data-v-16ce4aa8]:focus {
             border-color: var(--ui-base-input-border-focus);
             box-shadow: var(--ui-base-input-shadow-focus);
 }
 }
 .submit {
-&[data-v-e7e23202] {
+&[data-v-16ce4aa8] {
         background: var(--float-confirm-gradient);
         color: var(--float-confirm-color);
         padding: 5px 12px;
@@ -5663,12 +5650,12 @@ input {
         font-weight: 600;
         transition: box-shadow 0.2s ease, transform 0.15s ease;
 }
-&[data-v-e7e23202]:hover {
+&[data-v-16ce4aa8]:hover {
             box-shadow: var(--float-confirm-hover-shadow);
             transform: translateY(-1px);
 }
 }
-.close-corner[data-v-e7e23202] {
+.close-corner[data-v-16ce4aa8] {
         position: static;
         width: 22px;
         height: 22px;
@@ -5687,7 +5674,7 @@ input {
 
 
 .float-dict {
-&[data-v-44af97fc] {
+&[data-v-bc85bf34] {
     transition: 0.3s;
     position: fixed;
     width: fit-content;
@@ -5702,15 +5689,16 @@ input {
     border: var(--float-card-border);
     overflow: hidden;
     backdrop-filter: blur(6px);
+    z-index: var(--float-zindex);
 }
-.float-dict-active[data-v-44af97fc] {
+.float-dict-active[data-v-bc85bf34] {
         background: var(--float-dict-active-bg);
 }
-.float-dict-keyword[data-v-44af97fc] {
+.float-dict-keyword[data-v-bc85bf34] {
         color: var(--float-dict-keyword-color);
 }
 div {
-&[data-v-44af97fc] {
+&[data-v-bc85bf34] {
         padding: 8px 12px;
         display: flex;
         justify-content: center;
@@ -5720,11 +5708,11 @@ div {
         white-space: nowrap;
         transition: background 0.15s ease;
 }
-&[data-v-44af97fc]:hover {
+&[data-v-bc85bf34]:hover {
             background: var(--float-dict-active-bg);
 }
 }
-div[data-v-44af97fc]::before {
+div[data-v-bc85bf34]::before {
         content: counter(dict);
         counter-increment: dict 1;
         color: var(--float-dict-num-color);
@@ -5805,49 +5793,44 @@ to {
 }
 }
 
-:root {
-    --ui-close-corner-bg: black;
-}
-
-@media (prefers-color-scheme: dark) {
-    :root {
-        --ui-close-corner-bg: #bababa;
-    }
-}
+/* --ui-close-corner-bg 由 deepsky-core 主题 CSS 提供，无需在此声明 */
 
 .close-corner {
-    flex: 0 0 30px;
-    width: 30px;
-    height: 30px;
+    flex: 0 0 28px;
+    width: 28px;
+    height: 28px;
 
     border-radius: 50%;
-    margin: 0px 10px;
+    margin: 0px 8px;
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
+    transition: transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s;
+    will-change: transform;
 
     &:hover {
         cursor: pointer;
+        transform: scale(1.1);
     }
 
     &::before {
-        transition: 0.5s;
+        transition: 0.36s cubic-bezier(0.34, 1.56, 0.64, 1);
         position: absolute;
         content: "";
-        width: 30px;
-        height: 30px;
+        width: 28px;
+        height: 28px;
         border-radius: 50%;
         background-color: var(--ui-close-corner-bg);
         transform: rotate(245deg);
     }
 
     &::after {
-        transition: 0.5s;
+        transition: 0.36s cubic-bezier(0.34, 1.56, 0.64, 1);
         position: absolute;
         content: "";
-        width: 30px;
-        height: 30px;
+        width: 28px;
+        height: 28px;
         border-radius: 50%;
         background-color: var(--ui-close-corner-bg);
         transform: rotate(245deg);
@@ -5856,8 +5839,8 @@ to {
     &:hover::before {
         position: absolute;
         content: "";
-        width: 25px;
-        height: 3px;
+        width: 22px;
+        height: 2.5px;
         background-color: var(--ui-close-corner-bg);
         transform: rotate(45deg);
     }
@@ -5865,8 +5848,8 @@ to {
     &:hover::after {
         position: absolute;
         content: "";
-        width: 3px;
-        height: 25px;
+        width: 2.5px;
+        height: 22px;
         background-color: var(--ui-close-corner-bg);
         transform: rotate(45deg);
     }
@@ -5876,192 +5859,229 @@ to {
     --x: 0;
     --y: 0;
 
+    /* ---- 全局动画时序 ---- */
+    --transition-fast: 0.15s cubic-bezier(0.22, 1, 0.36, 1);
+    --transition-base: 0.24s cubic-bezier(0.22, 1, 0.36, 1);
+    --transition-spring: 0.36s cubic-bezier(0.34, 1.56, 0.64, 1);
+
+    /* --color 由 deepsky-core 主题提供，此处作为无主题的默认值 */
     --color: black;
     --locate-anchor-bg: yellow;
 
-    --note-bg:unset;
-    --ui-input-border: 1px dashed black;
+    --note-bg: unset;
+    --ui-input-border: 1px dashed color-mix(in srgb, var(--selection-bg, black) 60%, black);
     --ui-z-index: 5;
     --ui-icon-size-lv1: 18px;
     --ui-icon-size-lv2: 24px;
     --ui-icon-size-lv3: 36px;
-    --ui-base-input-cover-bg: #08e7ff;
-    
-    --ui-base-input-bg: #ffffff;
-    --ui-base-input-text: #333333;
-    --ui-base-input-border-color: #dddddd;
-    --ui-base-input-border-focus: #08e7ff;
-    --ui-base-input-cover-gradient: linear-gradient(135deg, #08e7ff 0%, #00b4db 100%);
+
+    /* -------- 输入组件 —— 跟随主题 accent 色 -------- */
+    --ui-base-input-cover-bg: var(--selection-bg, #08e7ff);
+    --ui-base-input-bg: var(--page-bg, #ffffff);
+    --ui-base-input-text: var(--menu-item-color, #333333);
+    --ui-base-input-border-color: color-mix(in srgb, var(--selection-bg, #dddddd) 18%, #dddddd);
+    --ui-base-input-border-focus: var(--selection-bg, #08e7ff);
+    --ui-base-input-cover-gradient: linear-gradient(135deg, var(--selection-bg, #08e7ff) 0%, color-mix(in srgb, var(--selection-bg, #00b4db) 80%, #004060) 100%);
     --ui-base-input-cover-text: #ffffff;
-    --ui-base-input-shadow-focus: 0 4px 15px rgba(8, 231, 255, 0.3);
-    --ui-base-input-container-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(236, 254, 255, 0.88) 100%);
-    --ui-base-input-border-gradient: linear-gradient(135deg, rgba(8, 231, 255, 0.65) 0%, rgba(0, 180, 219, 0.45) 100%);
-    --ui-base-input-overlay-shadow: 0 8px 24px rgba(0, 185, 255, 0.18);
+    --ui-base-input-shadow-focus: 0 4px 15px color-mix(in srgb, var(--selection-bg, #08e7ff) 30%, transparent);
+    --ui-base-input-container-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, color-mix(in srgb, var(--page-bg, #ecfeff) 88%, transparent) 100%);
+    --ui-base-input-border-gradient: linear-gradient(135deg, color-mix(in srgb, var(--selection-bg, #08e7ff) 65%, transparent) 0%, color-mix(in srgb, var(--selection-bg, #00b4db) 45%, transparent) 100%);
+    --ui-base-input-overlay-shadow: 0 8px 24px color-mix(in srgb, var(--selection-bg, #00b9ff) 18%, transparent);
     --ui-base-input-text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 
     --ui-scrollbar-bg: transparent;
     --ui-scrollbar-thumb-bg: black;
-    --ui-submit-bg: #f7ffff80;
-    --ui-submit-hover-bg: #1fdeff82;
-    --ui-submit-color: black;
-
-    /* -----------------------------------ui-base----------------------------------------------- */
+    --ui-submit-bg: color-mix(in srgb, var(--page-bg, #f7ffff) 80%, transparent);
+    --ui-submit-hover-bg: color-mix(in srgb, var(--selection-bg, #1fdeff) 50%, transparent);
+    --ui-submit-color: var(--color, black);
 
     /* ------------------------------------------------dialog--------------------------------------------------- */
-    --dialog-bg: #f5f5f5e6;
-    --dialog-border: #d0d0d0;
+    --dialog-bg: color-mix(in srgb, var(--page-bg, #f5f5f5) 90%, transparent);
+    --dialog-border: color-mix(in srgb, var(--selection-bg, #d0d0d0) 18%, #d0d0d0);
     --dialog-backdrop-bg: rgba(0, 0, 0, 0.2);
-    
-    --dialog-close-color: #666;
+
+    --dialog-close-color: var(--menu-title-icon-color, #666);
     --dialog-close-hover-bg: rgba(0, 0, 0, 0.08);
-    --dialog-close-hover-color: #000;
-    
-    --dialog-input-bg: rgba(0, 0, 0, 0.03);
-    --dialog-input-border: #bbb;
-    --dialog-input-focus-bg: rgba(0, 0, 0, 0.08);
+    --dialog-close-hover-color: var(--menu-item-active-color, #000);
+
+    --dialog-input-bg: color-mix(in srgb, var(--menu-bg, #000000) 6%, transparent);
+    --dialog-input-border: color-mix(in srgb, var(--selection-bg, #bbbbbb) 25%, #bbbbbb);
+    --dialog-input-focus-bg: color-mix(in srgb, var(--menu-bg, #000000) 12%, transparent);
     --dialog-input-placeholder-color: #888;
 
-    --dialog-title-bg: #00000080;
+    --dialog-title-bg: color-mix(in srgb, var(--color, #000000) 50%, transparent);
     --dialog-title-color: snow;
-    --dialog-subcard-bg: #eeeeeeb3;
+    --dialog-subcard-bg: color-mix(in srgb, var(--menu-bg, #eeeeee) 70%, transparent);
 
-    --dialog-css-item-color-hover: deeppink;
+    --dialog-css-item-color-hover: var(--menu-item-active-color, deeppink);
     --dialog-css-item-border: unset;
-    --dialog-css-input-border: 1px dashed black;
-    /* -----------------------------------float----------------------------------------------- */
-
-    --float-shadow: 0 6px 24px rgba(0, 150, 200, 0.22), 0 0 0 1px rgba(80, 200, 220, 0.2);
-    --float-color: black;
-    --float-rt-bg: rgba(243, 254, 255, 0.95);
-    --float-card-border: 1px solid rgba(80, 200, 215, 0.45);
-    --float-header-gradient: linear-gradient(135deg, #cef7ff 0%, #bafff4 100%);
-    --float-header-color: #1c4448;
-    --float-confirm-gradient: linear-gradient(135deg, #3ddfd0 0%, #00c4b0 100%);
+    --dialog-css-input-border: 1px dashed var(--selection-bg, black);
+
+    --dialog-header-gradient: var(--menu-title-bg, linear-gradient(135deg, #cef7ff 0%, #bafff4 100%));
+    --dialog-header-color: var(--menu-title-icon-color, #1c4448);
+
+    /* ------------------------------------------------float--------------------------------------------------- */
+    --float-zindex:6;
+    --float-shadow: 0 6px 24px color-mix(in srgb, var(--selection-bg, #0096c8) 22%, transparent), 0 0 0 1px color-mix(in srgb, var(--selection-bg, #50c8dc) 20%, transparent);
+    --float-color: var(--color, black);
+    --float-rt-bg: color-mix(in srgb, var(--page-bg, #f3feff) 96%, transparent);
+    --float-card-border: 1px solid color-mix(in srgb, var(--selection-bg, #50c8d7) 45%, transparent);
+    --float-header-gradient: var(--menu-title-bg, linear-gradient(135deg, #cef7ff 0%, #bafff4 100%));
+    --float-header-color: var(--menu-title-icon-color, #1c4448);
+    --float-confirm-gradient: linear-gradient(135deg, var(--selection-bg, #3ddfd0) 0%, color-mix(in srgb, var(--selection-bg, #3ddfd0) 78%, #004040) 100%);
     --float-confirm-color: #ffffff;
-    --float-confirm-hover-shadow: 0 4px 16px rgba(0, 196, 180, 0.45);
-    --float-input-border: 1px solid rgba(90, 195, 208, 0.55);
-    --float-dict-active-bg: rgba(0, 240, 255, 0.2);
-    --float-dict-adder-bg: rgba(240, 254, 255, 0.96);
-    --float-dict-adder-tab-item-bg: rgba(185, 238, 244, 0.7);
+    --float-confirm-hover-shadow: 0 4px 16px color-mix(in srgb, var(--selection-bg, #00c4b0) 45%, transparent);
+    --float-input-border: 1px solid color-mix(in srgb, var(--selection-bg, #5ac3d0) 55%, transparent);
+    --float-dict-active-bg: color-mix(in srgb, var(--selection-bg, #00f0ff) 20%, transparent);
+    --float-dict-adder-bg: color-mix(in srgb, var(--page-bg, #f0feff) 96%, transparent);
+    --float-dict-adder-tab-item-bg: color-mix(in srgb, var(--selection-bg, #b9eef4) 35%, var(--menu-bg, white));
     --float-dict-adder-tip-bg: rgba(255, 248, 210, 0.82);
     --float-dict-adder-tip-border: 1px solid rgba(210, 155, 0, 0.5);
-    --dialog-header-gradient: linear-gradient(135deg, #cef7ff 0%, #bafff4 100%);
-    --dialog-header-color: #1c4448;
-
-    --float-link-ask-bg: rgba(243, 254, 255, 0.96);
-    --float-link-box-bg: #f5f5f5;
-    --float-link-bg: #dfdfdf;
-    --float-link-color: black;
-    --float-link-color-hover: #53d2dadb;
+
+    --float-link-ask-bg: color-mix(in srgb, var(--page-bg, #f3feff) 96%, transparent);
+    --float-link-box-bg: color-mix(in srgb, var(--menu-bg, #f5f5f5) 95%, transparent);
+    --float-link-bg: color-mix(in srgb, var(--menu-bg, #dfdfdf) 85%, transparent);
+    --float-link-color: var(--color, black);
+    --float-link-color-hover: var(--menu-item-active-color, #53d2dadb);
     --float-link-icon-hover-color: none;
-    --float-link-ask-border: 1px solid rgba(80, 200, 215, 0.4);
-    --float-link-ask-confirm-bg: linear-gradient(135deg, #3ddfd0 0%, #00c4b0 100%);
+    --float-link-ask-border: 1px solid color-mix(in srgb, var(--selection-bg, #50c8d7) 40%, transparent);
+    --float-link-ask-confirm-bg: linear-gradient(135deg, var(--selection-bg, #3ddfd0) 0%, color-mix(in srgb, var(--selection-bg, #3ddfd0) 78%, #004040) 100%);
 
-    --float-dict-keyword-color: blueviolet;
+    --float-dict-keyword-color: var(--menu-item-active-color, blueviolet);
     --float-dict-num-color: #4c4c4c87;
-    --float-dict-shadow: 0px 0px 12px #b4b4b48a;
-    --float-dict-bg: #e0e0e08a;
+    --float-dict-shadow: 0px 0px 12px color-mix(in srgb, var(--selection-bg, #b4b4b4) 28%, #b4b4b48a);
+    --float-dict-bg: color-mix(in srgb, var(--menu-bg, #e0e0e0) 54%, transparent);
     --float-dict-adder-tab-active-bg: #d1d1d187;
     --float-dict-adder-tab-bg: #e7e7e738;
 
-    --float-fomula-bg: #efefefb8;
+    --float-fomula-bg: color-mix(in srgb, var(--page-bg, #efefef) 74%, transparent);
     --float-fomula-input-height: 200px;
     --float-fomula-candidator-width: 400px;
-
-    --float-fomula-shadow: 0px 0px 10px #ababab94;
-    --float-fomula-part-bg: #e9e9e9bf;
-
-    --float-fomula-input-color: black;
+    --float-fomula-shadow: 0px 0px 10px color-mix(in srgb, var(--selection-bg, #ababab) 20%, #ababab94);
+    --float-fomula-part-bg: color-mix(in srgb, var(--menu-bg, #e9e9e9) 74%, transparent);
+    --float-fomula-input-color: var(--color, black);
     --float-fomula-latex-fontsize: 16px;
-    --float-fomula-nav-item-bg: #dedede7d;
-    --float-fomula-nav-item-hover-bg: #7fffd487;
-    --float-fomula-nav-item-active-bg: #7fffd487;
-    --float-fomula-candidate-item-bg: #c8c8c87d;
-    --float-fomula-candidate-item-hover-bg: #14e9ffa3;
+    --float-fomula-nav-item-bg: color-mix(in srgb, var(--menu-bg, #dedede) 49%, transparent);
+    --float-fomula-nav-item-hover-bg: color-mix(in srgb, var(--selection-bg, #7fffd4) 53%, transparent);
+    --float-fomula-nav-item-active-bg: color-mix(in srgb, var(--selection-bg, #7fffd4) 53%, transparent);
+    --float-fomula-candidate-item-bg: color-mix(in srgb, var(--menu-bg, #c8c8c8) 49%, transparent);
+    --float-fomula-candidate-item-hover-bg: color-mix(in srgb, var(--selection-bg, #14e9ff) 64%, transparent);
 
-    --float-cubelist-bg: snow;
+    --float-cubelist-bg: color-mix(in srgb, var(--page-bg, snow) 98%, transparent);
     --float-cubelist-border: unset;
-    --float-cube-active-type-bg: #272727bf;
-    --float-cubelist-input-color: black;
+    --float-cube-active-type-bg: color-mix(in srgb, var(--color, #272727) 74%, transparent);
+    --float-cubelist-input-color: var(--color, black);
 
-    --float-cubelist-active-bg: #55e3ffcc;
+    --float-cubelist-active-bg: color-mix(in srgb, var(--selection-bg, #55e3ff) 65%, transparent);
     --float-cubelist-active-shadow: 0px 0px 12px var(--float-cubelist-active-bg);
-    --float-cubelist-active-color: deeppink;
-    --float-cubelist-active-icon-color: deeppink;
+    --float-cubelist-active-color: var(--menu-item-active-color, deeppink);
+    --float-cubelist-active-icon-color: var(--menu-item-active-color, deeppink);
 
     --float-cubelist-grid-height: 250px;
     --float-cubelist-width: 560px;
     --float-cubelist-height: 280px;
     --float-cubelist-name-size: 16px;
     --float-cubelist-type-size: 14px;
-    --float-cubelist-box-shadow: 0px 0px 20px #d6d6d6cc;
+    --float-cubelist-box-shadow: 0px 0px 20px color-mix(in srgb, var(--selection-bg, #d6d6d6) 14%, #d6d6d6cc);
     --float-cubelist-search-shadow: 0px 0px 10px var(--float-cubelist-search-button-bg);
     --float-cubelist-itembox-bg: unset;
-    --float-cubelist-itembox-hover-bg: #04f5d2b8;
-    --float-cubelist-preset-bg: #fff0dacc;
-    --float-cubelist-cube-bg: #eeeeee80;
-    --float-cubelist-preset-global-bg:#f9daffcc;
-    --float-cubelist-itembox-code-bg: #7e7e7ecc;
-    
-
-    --float-cubelist-search-bg: #edededcc;
-    --float-cubelist-search-button-bg: turquoise;
+    --float-cubelist-itembox-hover-bg: color-mix(in srgb, var(--selection-bg, #04f5d2) 55%, transparent);
+    --float-cubelist-preset-bg: color-mix(in srgb, var(--menu-bg, #fff0da) 80%, transparent);
+    --float-cubelist-cube-bg: color-mix(in srgb, var(--menu-bg, #eeeeee) 50%, transparent);
+    --float-cubelist-preset-global-bg: color-mix(in srgb, var(--selection-bg, #f9daff) 14%, color-mix(in srgb, var(--menu-bg, #ddd) 70%, transparent));
+    --float-cubelist-itembox-code-bg: color-mix(in srgb, var(--color, #7e7e7e) 80%, transparent);
+
+    --float-cubelist-search-bg: color-mix(in srgb, var(--menu-bg, #ededed) 80%, transparent);
+    --float-cubelist-search-button-bg: var(--selection-bg, turquoise);
     --float-cubelist-search-color: var(--float-cubelist-search-button-bg);
-    --float-cubelist-tabs-bg: #010101b5;
+    --float-cubelist-tabs-bg: rgba(12, 12, 12, 0.72);
 
-    --float-table-shadow: 0px 0px 5px #53cbff;
+    --float-table-shadow: 0px 0px 5px var(--selection-bg, #53cbff);
     --float-table-grid-border: 1px solid #999;
     --float-table-grid-size: 6px;
-    --float-table-grid-active: #54fee0a1;
-
-    /* -----------------------------------menubar----------------------------------------------- */
-    --menubar-height: 40px;
-    --menubar-bg: #eeffff80;
+    --float-table-grid-active: color-mix(in srgb, var(--selection-bg, #54fee0) 42%, transparent);
+
+    /* ------------------------------------------------menubar--------------------------------------------------- */
+    --menubar-height: 38px;
+    --menubar-bg: color-mix(in srgb, var(--menu-bg, #eeffff) 72%, transparent);
+    --menubar-backdrop: blur(18px) saturate(160%);
+    --menubar-border: 1px solid color-mix(in srgb, var(--selection-bg, #54d8ff) 28%, rgba(255, 255, 255, 0.45));
+    --menubar-shadow: 0 4px 20px color-mix(in srgb, var(--selection-bg, #54d8ff) 14%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.55);
     --menubar-icon-border: none;
-    --menubar-icon-padding: 4px;
+    --menubar-icon-padding: 5px;
     --menubar-icon-bg: none;
-    --menubar-icon-hover-bg: #eff;
-    --menubar-active-icon-bg: transparent;
-    --menubar-active-icon-color: #a200ffdb;
-    --menubar-icon-hover-color: var(--menubar-active-icon-color);
-    --menubar-active-icon-shadow: 0px 0px 5px var(--menubar-active-icon-color);
-
-    /* -----------------------------toolbar-------------------------------------- */
-    --toolbar-iconsize: 24px;
-    --toolbar-bg: #f9f7f340;
-    --toolbar-icon-bg: #e7e7e740;
-    --toolbar-icon-color: black;
+    --menubar-icon-hover-bg: color-mix(in srgb, var(--selection-bg, #d4f5fb) 22%, transparent);
+    --menubar-active-icon-bg: color-mix(in srgb, var(--selection-bg, #baeaff) 30%, transparent);
+    --menubar-active-icon-color: var(--menu-item-active-color, #0088ff);
+    --menubar-icon-hover-color: var(--menu-item-active-color, #0088ff);
+    --menubar-active-icon-shadow: 0 0 8px color-mix(in srgb, var(--menu-item-active-color, #0088ff) 55%, transparent);
+
+    /* ------------------------------------------------toolbar--------------------------------------------------- */
+    --toolbar-iconsize: 22px;
+    --toolbar-bg: color-mix(in srgb, var(--page-bg, #f9f7f3) 65%, transparent);
+    --toolbar-backdrop: blur(14px) saturate(150%);
+    --toolbar-border-bottom: 1px solid color-mix(in srgb, var(--selection-bg, #aaddee) 22%, rgba(200, 200, 200, 0.2));
+    --toolbar-shadow: 0 4px 16px color-mix(in srgb, var(--selection-bg, #54d8ff) 10%, transparent);
+    --toolbar-icon-bg: transparent;
+    --toolbar-icon-color: var(--color, black);
     --toolbar-icon-border: none;
     --toolbar-custom-card-color: unset;
     --toolbar-custom-card-hover-color: unset;
-    --toolbar-custom-card-hover-bg: aquamarine;
-    --toolbar-custom-card-bg: #eee;
-
-    --toolbar-custom-title-bg: #ccc;
-    --toolbar-custom-title-color: black;
-    --toolbar-custom-scrollbar-bg: black;
+    --toolbar-custom-card-hover-bg: color-mix(in srgb, var(--selection-bg, #baeaff) 20%, transparent);
+    --toolbar-custom-card-bg: color-mix(in srgb, var(--menu-bg, #eeeeee) 55%, transparent);
+    --toolbar-group-border: 1px solid color-mix(in srgb, var(--selection-bg, #aaddee) 24%, rgba(200, 200, 200, 0.22));
+    --toolbar-group-shadow: 0 2px 8px color-mix(in srgb, var(--selection-bg, #55d8f5) 10%, transparent);
+    --toolbar-group-hover-shadow: 0 4px 16px color-mix(in srgb, var(--selection-bg, #55d8f5) 22%, transparent);
+    --toolbar-group-hover-bg: color-mix(in srgb, var(--selection-bg, #c0eeff) 18%, transparent);
+
+    --toolbar-custom-title-bg: color-mix(in srgb, var(--menu-bg, #cccccc) 85%, transparent);
+    --toolbar-custom-title-color: var(--color, black);
+    --toolbar-custom-scrollbar-bg: var(--color, black);
     --toolbar-custom-scrollbar-color: snow;
-    --toolbar-icon-disable-color: #d3d3d3;
-    --toolbar-foot-icon-bg-hover: aqua;
-    --toolbar-toolmap-color: #ff5da3;
-    /* -----------------------------statusbar-------------------------------------- */
+    --toolbar-icon-disable-color: color-mix(in srgb, var(--color, #d3d3d3) 28%, transparent);
+    --toolbar-foot-icon-bg-hover: color-mix(in srgb, var(--selection-bg, #baeaff) 28%, transparent);
+    --toolbar-foot-item-border: 1px solid color-mix(in srgb, var(--selection-bg, #aaddee) 32%, transparent);
+    --toolbar-toolmap-color: var(--menu-item-active-color, #ff5da3);
+    --toolbar-border-color: color-mix(in srgb, var(--selection-bg, #cccccc) 30%, rgba(200, 200, 200, 0.3));
+
+    /* ------------------------------------------------statusbar--------------------------------------------------- */
     --statusbar-tip-max-width: 30%;
     --statusbar-items-max-width: 68%;
-    --statusbar-height: 35px;
-    --statusbar-bg: #eeffff80;
-    --statusbar-item-color: snow;
-    --statusbar-item-bg: black;
+    --statusbar-height: 32px;
+    --statusbar-font-size: 14px;
+    --statusbar-bg: color-mix(in srgb, var(--page-bg, #f8fdff) 82%, transparent);
+    --statusbar-backdrop: blur(20px) saturate(180%);
+    --statusbar-border-top: 1px solid color-mix(in srgb, var(--selection-bg, #a0d8e8) 26%, rgba(255, 255, 255, 0.4));
+    --statusbar-shadow: 0 -4px 20px color-mix(in srgb, var(--selection-bg, #659ba3) 10%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.4);
+    --statusbar-item-color: var(--menu-item-color, #36565b);
+    --statusbar-item-bg: color-mix(in srgb, var(--menu-bg, #f0fafc) 60%, transparent);
+    --statusbar-item-border: color-mix(in srgb, var(--selection-bg, #88bfc5) 30%, rgba(200, 200, 200, 0.2));
+    --statusbar-item-hover-bg: color-mix(in srgb, var(--menu-bg, #dff7fa) 82%, var(--selection-bg, #d7eefa) 12%);
+    --statusbar-item-hover-border: color-mix(in srgb, var(--selection-bg, #68bac5) 48%, transparent);
+    --statusbar-item-hover-shadow: 0 4px 14px color-mix(in srgb, var(--selection-bg, #6cbab6) 20%, transparent);
+    --statusbar-docid-bg: color-mix(in srgb, var(--menu-bg, #dff6f8) 65%, transparent);
+    --statusbar-docid-hover-bg: color-mix(in srgb, var(--menu-bg, #ebfcfc) 80%, transparent);
+    --statusbar-docid-color: var(--menu-item-color, #26484d);
+    --statusbar-docid-border: color-mix(in srgb, var(--selection-bg, #73b4bc) 30%, rgba(200, 200, 200, 0.2));
+    --statusbar-docid-shadow: 0 2px 10px color-mix(in srgb, var(--selection-bg, #70b0b8) 10%, transparent);
+    --statusbar-docid-hover-shadow: 0 4px 14px color-mix(in srgb, var(--selection-bg, #6bb8b8) 18%, transparent);
     --statusbar-msg-box-width: 500px;
     --statusbar-msg-box-height: 525px;
     --statusbar-msg-color: snow;
     --statusbar-msg-bg: linear-gradient(-45deg, #00000096 25%, transparent 90%);
-    --statusbar-item-not-save-bg: #ff0588;
-    --statusbar-item-reading-mode-bg: turquoise;
-    --statusbar-item-reading-mode-color: black;
-
-    --statusbar-item-scope-exist-bg: turquoise;
-    --statusbar-item-scope-exist-color: unset;
 
+    /* ---- 语义状态色（固定，不随主题改变） ---- */
+    --statusbar-item-not-save-bg: linear-gradient(135deg, rgba(255, 227, 234, 0.98) 0%, rgba(255, 210, 223, 0.96) 100%);
+    --statusbar-item-not-save-color: #8f3c56;
+    --statusbar-item-not-save-shadow: 0 8px 18px rgba(222, 131, 157, 0.2);
+    --statusbar-item-reading-mode-bg: linear-gradient(135deg, rgba(213, 244, 239, 0.98) 0%, rgba(190, 236, 229, 0.94) 100%);
+    --statusbar-item-reading-mode-color: #21545b;
+    --statusbar-item-reading-mode-shadow: 0 8px 18px rgba(103, 183, 173, 0.18);
+    --statusbar-item-scope-exist-bg: linear-gradient(135deg, rgba(220, 243, 255, 0.98) 0%, rgba(196, 229, 247, 0.94) 100%);
+    --statusbar-item-scope-exist-color: #25566f;
+    --statusbar-item-scope-exist-shadow: 0 8px 18px rgba(114, 174, 205, 0.18);
+
+    /* ---- tip 背景（语义色，固定不随主题） ---- */
     --statusbar-tip-default-bg: linear-gradient(-45deg, rgb(8 255 208 / 80%) 25%, transparent 90%);
     --statusbar-tip-error-bg: linear-gradient(-45deg, rgb(227 31 186 / 80%) 25%, transparent 90%);
     --statusbar-tip-warning-bg: linear-gradient(-45deg, #ff961acc 25%, transparent 90%);
@@ -6075,420 +6095,180 @@ to {
     --statusbar-tip-blue-bg: linear-gradient(-45deg, rgb(8 236 255 / 80%) 25%, transparent 90%);
     --statusbar-tip-indigo-bg: linear-gradient(-45deg, rgb(8 89 255 / 80%) 25%, transparent 90%);
     --statusbar-tip-violet-bg: linear-gradient(-45deg, rgb(155 8 255 / 80%) 25%, transparent 90%);
-    /* -----------------------------sidebar-------------------------------------- */
-    --sidebar-panel-toolbox-bg: #eeeeee40;
-    --sidebar-width: 60px;
-    --sidebar-panel-bg: #ececec40;
-    --sidebar-bg: #eeffff80;
+
+    /* ------------------------------------------------sidebar--------------------------------------------------- */
+    --sidebar-panel-toolbox-bg: color-mix(in srgb, var(--page-bg, #eeeeee) 55%, transparent);
+    --sidebar-width: 52px;
+    --sidebar-panel-bg: color-mix(in srgb, var(--menu-bg, #ececec) 55%, transparent);
+    --sidebar-panel-backdrop: blur(14px) saturate(140%);
+    --sidebar-bg: color-mix(in srgb, var(--menu-bg, #eeffff) 72%, transparent);
+    --sidebar-backdrop: blur(16px) saturate(156%);
+    --sidebar-border-right: 1px solid color-mix(in srgb, var(--selection-bg, #54d8ff) 22%, rgba(255, 255, 255, 0.3));
     --sidebar-icon-border: none;
-    --sidebar-icon-padding: 4px;
+    --sidebar-icon-padding: 6px;
     --sidebar-icon-bg: none;
-    --sidebar-icon-hover-bg: #eff;
-    --sidebar-icon-active-color: #a200ffdb;
-    --sidebar-icon-hover-color: var(--sidebar-icon-active-color);
-    --sidebar-icon-active-shadow: 0px 0px 5px var(--sidebar-icon-active-color);
-    --sidebar-dragger-hover-bg: #dedede;
-
-    /* -----------------------------dialog-catalogue-------------------------------------- */
-
-    --ui-catalogue-title-bg: #ffffff45;
+    --sidebar-icon-hover-bg: color-mix(in srgb, var(--selection-bg, #d4f5fb) 20%, transparent);
+    --sidebar-icon-active-color: var(--menu-item-active-color, #0088ff);
+    --sidebar-icon-hover-color: var(--menu-item-active-color, #0088ff);
+    --sidebar-icon-active-shadow: 0 0 10px color-mix(in srgb, var(--menu-item-active-color, #0088ff) 55%, transparent);
+    --sidebar-dragger-hover-bg: color-mix(in srgb, var(--selection-bg, #dedede) 55%, transparent);
+    --sidebar-cube-border: 1px solid color-mix(in srgb, var(--selection-bg, #54d8ff) 30%, rgba(255, 255, 255, 0.4));
+    --sidebar-toolbox-radius: 10px;
+    /* ---- 侧边栏图标激活效果 —— 跟随主题 ---- */
+    --sidebar-icon-active-gradient: color-mix(in srgb, var(--selection-bg, #a200ff) 22%, transparent);
+    --sidebar-icon-glow: 0 0 14px color-mix(in srgb, var(--selection-bg, #a200ff) 40%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--selection-bg, #a200ff) 30%, transparent);
+
+    /* ------------------------------------------------catalogue--------------------------------------------------- */
+    --ui-catalogue-title-bg: color-mix(in srgb, var(--menu-bg, #ffffff) 45%, transparent);
     --ui-catalogue-title-color: auto;
     --ui-catalogue-title-radius: 4px;
     --ui-catalogue-title-padding: 2px;
-    --ui-catalogue-title-tool-color: cyan;
+    --ui-catalogue-title-tool-color: var(--menu-item-active-color, cyan);
     --ui-catalogue-title-tool-hover-color: snow;
-    --ui-catalogue-group-active-bg: turquoise;
+    --ui-catalogue-group-active-bg: color-mix(in srgb, var(--selection-bg, turquoise) 80%, transparent);
     --ui-catalogue-selection-thumb-bg: snow;
-    --ui-catalogue-selection-item-bg: #d6d6d6cc;
-    --ui-catalogue-selection-item-active-bg: #ffffffcc;
-    --ui-catalogue-item-odd-bg: snow;
+    --ui-catalogue-selection-item-bg: color-mix(in srgb, var(--menu-bg, #d6d6d6) 80%, transparent);
+    --ui-catalogue-selection-item-active-bg: color-mix(in srgb, var(--page-bg, #ffffff) 80%, transparent);
+    --ui-catalogue-item-odd-bg: color-mix(in srgb, var(--page-bg, #ffffff) 80%, transparent);
     --ui-catalogue-item-even-bg: transparent;
-    --ui-catalogue-item-hover-bg: #07f49e61;
+    --ui-catalogue-item-hover-bg: color-mix(in srgb, var(--selection-bg, #07f49e) 25%, transparent);
     --ui-catalogue-item-min-width: 160px;
-    --ui-catalogue-tools-hover-color: turquoise;
-    --ui-catalogue-group-drag-over-bg: yellow;
-    --ui-catalogue-group-bg: #eeeeee40;
-    --ui-catalogue-item-drag-bg: cyan;
-    --ui-catalogue-export-title-bg: linear-gradient(45deg, #c0ffdecc, #98fdffcc);
-
-    /* -----------------------------sideitem-hotkeys-------------------------------------- */
-    --ui-hotkeys-item-background: #e8e8e8ad;
-    --ui-hotkeys-hover-bg: #40e0d070;
-    --ui-hotkeys-group-bg: #7edbfd;
-    /* -----------------------------sideitem-search-------------------------------------- */
-    --ui-search-item-hover-bg: #7fffd475;
-    --ui-search-item-even-bg: #e8fffe80;
+    --ui-catalogue-tools-hover-color: var(--menu-item-active-color, turquoise);
+    --ui-catalogue-group-drag-over-bg: color-mix(in srgb, var(--selection-bg, yellow) 45%, yellow);
+    --ui-catalogue-group-bg: color-mix(in srgb, var(--menu-bg, #eeeeee) 40%, transparent);
+    --ui-catalogue-item-drag-bg: var(--selection-bg, cyan);
+    --ui-catalogue-export-title-bg: var(--menu-title-bg, linear-gradient(45deg, #c0ffdecc, #98fdffcc));
+
+    /* ------------------------------------------------sideitem-hotkeys--------------------------------------------------- */
+    --ui-hotkeys-item-background: color-mix(in srgb, var(--menu-bg, #e8e8e8) 68%, transparent);
+    --ui-hotkeys-hover-bg: color-mix(in srgb, var(--selection-bg, #40e0d0) 44%, transparent);
+    --ui-hotkeys-group-bg: color-mix(in srgb, var(--selection-bg, #7edbfd) 48%, transparent);
+
+    /* ------------------------------------------------sideitem-search--------------------------------------------------- */
+    --ui-search-item-hover-bg: color-mix(in srgb, var(--selection-bg, #7fffd4) 30%, transparent);
+    --ui-search-item-even-bg: color-mix(in srgb, var(--page-bg, #e8fffe) 80%, transparent);
     --ui-search-item-odd-bg: transparent;
-    --ui-search-icon-bg: #d0f7f7;
-    --ui-search-icon-color: #2a8f90;
-    --ui-search-icon-hover-bg: linear-gradient(135deg, #43e5d0 0%, #00c4b4 100%);
+    --ui-search-icon-bg: color-mix(in srgb, var(--selection-bg, #d0f7f7) 22%, var(--menu-bg, white));
+    --ui-search-icon-color: var(--menu-title-icon-color, #2a8f90);
+    --ui-search-icon-hover-bg: linear-gradient(135deg, var(--selection-bg, #43e5d0) 0%, color-mix(in srgb, var(--selection-bg, #00c4b4) 80%, #003030) 100%);
     --ui-search-icon-hover-color: #ffffff;
-    --ui-search-item-accent: #3dd5c8;
-    --ui-search-item-hover-shadow: 0 2px 8px rgba(61, 213, 200, 0.25);
-    --ui-search-bar-bg: #f0fffe;
-    --ui-search-bar-border: 1px solid #a8e8e4;
-    --ui-search-bar-shadow: 0 4px 12px rgba(67, 229, 208, 0.15);
-    /* -----------------------------sideitem-theme-------------------------------------- */
-    --ui-theme-item-hover-bg: #7fffd475;
-    --ui-theme-item-even-bg: #e0e0e080;
+    --ui-search-item-accent: var(--selection-bg, #3dd5c8);
+    --ui-search-item-hover-shadow: 0 2px 8px color-mix(in srgb, var(--selection-bg, #3dd5c8) 25%, transparent);
+    --ui-search-bar-bg: color-mix(in srgb, var(--page-bg, #f0fffe) 95%, transparent);
+    --ui-search-bar-border: 1px solid color-mix(in srgb, var(--selection-bg, #a8e8e4) 40%, transparent);
+    --ui-search-bar-shadow: 0 4px 12px color-mix(in srgb, var(--selection-bg, #43e5d0) 15%, transparent);
+
+    /* ------------------------------------------------sideitem-theme--------------------------------------------------- */
+    --ui-theme-item-hover-bg: color-mix(in srgb, var(--selection-bg, #7fffd4) 30%, transparent);
+    --ui-theme-item-even-bg: color-mix(in srgb, var(--menu-bg, #e0e0e0) 50%, transparent);
     --ui-theme-item-odd-bg: transparent;
-    --ui-theme-title-bg: #07ffd580;
-    --ui-theme-title-color: #1f3a3a;
-    --ui-theme-list-border: 2px solid #54d8ff;
-    --ui-theme-list-bg: #9affee40;
-    --ui-theme-list-shadow: 0px 4px 12px rgba(53, 182, 203, 0.16);
-    --ui-theme-item-border: 1px solid #86d7d9;
-    --ui-theme-item-color: #254545;
-    --ui-theme-item-hover-shadow: 0px 2px 8px rgba(0, 188, 212, 0.2);
-    --ui-theme-bg-item-border: 1px solid #7bcad0;
-    --ui-theme-bg-item-shadow: 0px 4px 10px rgba(66, 168, 190, 0.16);
-    --ui-theme-clear-bg: #f4ffffcc;
-    --ui-theme-clear-color: #2d4f52;
-
-    --ui-background-title-bg: #fb54bd80;
-    --ui-background-title-color: #4b2b41;
-    --ui-background-list-border: 2px solid #fb54bd;
-    --ui-background-list-bg: #9affee40;
-
-    /* -----------------------------sideitem-toolbar-------------------------------------- */
-    --ui-toolbar-enable-group-title-bg: #3ceaffcc;
-    --ui-toolbar-disable-group-title-bg: #ffac14cc;
-    --ui-toolbar-enable-group-bg: #3ceaff30;
-    --ui-toolbar-disable-group-bg: #ffac1430;
+    --ui-theme-title-bg: color-mix(in srgb, var(--selection-bg, #07ffd5) 50%, transparent);
+    --ui-theme-title-color: var(--menu-item-color, #1f3a3a);
+    
+    --ui-theme-list-bg: color-mix(in srgb, var(--selection-bg, #9affee) 22%, transparent);
+    --ui-theme-list-shadow: 0px 4px 12px color-mix(in srgb, var(--selection-bg, #35b6cb) 16%, transparent);
+    --ui-theme-item-border: 1px solid color-mix(in srgb, var(--selection-bg, #86d7d9) 50%, transparent);
+    --ui-theme-item-color: var(--menu-item-color, #254545);
+    --ui-theme-item-hover-shadow: 0px 2px 8px color-mix(in srgb, var(--selection-bg, #00bcd4) 20%, transparent);
+    --ui-theme-bg-item-border: 1px solid color-mix(in srgb, var(--selection-bg, #7bcad0) 40%, transparent);
+    --ui-theme-bg-item-shadow: 0px 4px 10px color-mix(in srgb, var(--selection-bg, #42a8be) 16%, transparent);
+    --ui-theme-clear-bg: color-mix(in srgb, var(--page-bg, #f4ffff) 80%, transparent);
+    --ui-theme-clear-color: var(--menu-item-color, #2d4f52);
+
+    --ui-background-title-bg: color-mix(in srgb, var(--selection-bg, #fb54bd) 55%, transparent);
+    --ui-background-title-color: var(--menu-title-icon-color, #4b2b41);
+    --ui-background-list-border: 2px solid color-mix(in srgb, var(--selection-bg, #fb54bd) 65%, transparent);
+    --ui-background-list-bg: color-mix(in srgb, var(--selection-bg, #9affee) 22%, transparent);
+
+    /* ------------------------------------------------sideitem-toolbar-config--------------------------------------------------- */
+    --ui-toolbar-enable-group-title-bg: color-mix(in srgb, var(--selection-bg, #3ceaff) 80%, transparent);
+    --ui-toolbar-disable-group-title-bg: rgba(220, 140, 0, 0.78);
+    --ui-toolbar-enable-group-bg: color-mix(in srgb, var(--selection-bg, #3ceaff) 18%, transparent);
+    --ui-toolbar-disable-group-bg: rgba(220, 140, 0, 0.12);
     --ui-toolbar-enable-group-title-color: unset;
     --ui-toolbar-disable-group-title-color: unset;
-
-    --ui-toolbar-border-enable: 1px solid #0c15ff;
-    --ui-toolbar-border-disable: 1px solid deeppink;
-
-    /* -----------------------------sideitem-config-------------------------------------- */
-    --ui-config-group-border: 1px solid #8fd8df;
-    --ui-config-group-bg: #f1ffffb3;
-    --ui-config-group-shadow: 0px 4px 12px rgba(67, 167, 184, 0.16);
-    --ui-config-group-title-bg: linear-gradient(135deg, #d7f7ff 0%, #c7fff4 100%);
-    --ui-config-group-title-color: #2a4c4f;
-    --ui-config-item-bg: #ffffff80;
-    --ui-config-item-hover-bg: #e7fffbcc;
-    --ui-config-item-name-bg: #dcfbff;
-    --ui-config-item-name-color: #33565a;
-    --ui-config-active-icon-color: deepskyblue;
-    /* -----------------------------sideitem-presets-------------------------------------- */
-    --ui-presets-item-bg: linear-gradient(135deg, #f0fff840 0%, #e8f7ff50 100%);
-    --ui-presets-item-border: 1px solid #a8dce8;
-    --ui-presets-item-shadow: 0px 3px 10px rgba(100, 200, 220, 0.18);
-    --ui-presets-item-hover-bg: linear-gradient(135deg, #cffff4cc 0%, #b8f0ffcc 100%);
-    --ui-presets-item-hover-shadow: 0px 6px 18px rgba(67, 200, 220, 0.28);
-    --ui-presets-item-type-color: #3a99a8;
-    --ui-presets-header-bg: linear-gradient(135deg, #e2fff8 0%, #d4f5ff 100%);
-    --ui-presets-header-border: 1px solid #8dd8e8;
+    --ui-toolbar-border-enable: 1px solid color-mix(in srgb, var(--selection-bg, #0c15ff) 80%, transparent);
+    --ui-toolbar-border-disable: 1px solid rgba(220, 80, 110, 0.55);
+
+    /* ------------------------------------------------sideitem-config--------------------------------------------------- */
+    --ui-config-group-border: 1px solid color-mix(in srgb, var(--selection-bg, #8fd8df) 50%, transparent);
+    --ui-config-group-bg: color-mix(in srgb, var(--page-bg, #f1ffff) 70%, transparent);
+    --ui-config-group-shadow: 0px 4px 12px color-mix(in srgb, var(--selection-bg, #43a7b8) 16%, transparent);
+    --ui-config-group-title-bg: var(--menu-title-bg, linear-gradient(135deg, #d7f7ff 0%, #c7fff4 100%));
+    --ui-config-group-title-color: var(--menu-title-icon-color, #2a4c4f);
+    --ui-config-item-bg: color-mix(in srgb, var(--page-bg, #ffffff) 80%, transparent);
+    --ui-config-item-hover-bg: color-mix(in srgb, var(--selection-bg, #e7fffb) 14%, var(--menu-bg, white));
+    --ui-config-item-name-bg: color-mix(in srgb, var(--selection-bg, #dcfbff) 16%, var(--menu-bg, white));
+    --ui-config-item-name-color: var(--menu-item-color, #33565a);
+    --ui-config-active-icon-color: var(--selection-bg, deepskyblue);
+
+    /* ------------------------------------------------sideitem-presets--------------------------------------------------- */
+    --ui-presets-item-bg: color-mix(in srgb, var(--page-bg, #f0fff8) 40%, transparent);
+    --ui-presets-item-border: 1px solid color-mix(in srgb, var(--selection-bg, #a8dce8) 40%, transparent);
+    --ui-presets-item-shadow: 0px 3px 10px color-mix(in srgb, var(--selection-bg, #64c8dc) 18%, transparent);
+    --ui-presets-item-hover-bg: color-mix(in srgb, var(--selection-bg, #b8f0ff) 24%, var(--menu-bg, white));
+    --ui-presets-item-hover-shadow: 0px 6px 18px color-mix(in srgb, var(--selection-bg, #43c8dc) 28%, transparent);
+    --ui-presets-item-type-color: var(--menu-item-active-color, #3a99a8);
+    --ui-presets-header-bg: var(--menu-title-bg, linear-gradient(135deg, #e2fff8 0%, #d4f5ff 100%));
+    --ui-presets-header-border: 1px solid color-mix(in srgb, var(--selection-bg, #8dd8e8) 45%, transparent);
     --ui-presets-delete-color: #c87090;
     --ui-presets-delete-hover-color: #e03060;
-    /* -----------------------------sideitem-ai-------------------------------------- */
-    --ui-ai-input-bg: #f0f0ff90;
-    --ui-ai-input-border: 1.5px solid #b0a0e850;
+
+    /* ------------------------------------------------sideitem-ai--------------------------------------------------- */
+    --ui-ai-input-bg: color-mix(in srgb, var(--page-bg, #f0f0ff) 56%, transparent);
+    --ui-ai-input-border: 1.5px solid color-mix(in srgb, var(--selection-bg, #b0a0e8) 30%, transparent);
     --ui-ai-input-disable-bg: #ffa0a780;
-    --ui-ai-tool-hover-bg: #ede8ff;
-    --ui-ai-tool-hover-color: #7c3aed;
-    --ui-ai-question-bg: linear-gradient(135deg, #dbeafe 0%, #ede9fe 100%);
-    --ui-ai-question-color: #2e3a62;
-    --ui-ai-reply-bg: linear-gradient(135deg, #f0fdf4 0%, #e8f5e9 100%);
-    --ui-ai-reply-color: #1a3a2a;
+    --ui-ai-tool-hover-bg: color-mix(in srgb, var(--selection-bg, #ede8ff) 16%, var(--menu-bg, white));
+    --ui-ai-tool-hover-color: var(--menu-item-active-color, #7c3aed);
+    --ui-ai-question-bg: linear-gradient(135deg, color-mix(in srgb, var(--selection-bg, #dbeafe) 18%, var(--page-bg, white)) 0%, color-mix(in srgb, var(--selection-bg, #ede9fe) 15%, var(--page-bg, white)) 100%);
+    --ui-ai-question-color: var(--menu-item-color, #2e3a62);
+    --ui-ai-reply-bg: color-mix(in srgb, var(--menu-bg, #f0fdf4) 72%, transparent);
+    --ui-ai-reply-color: var(--menu-item-color, #1a3a2a);
     --ui-ai-avatar-user-bg: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);
     --ui-ai-avatar-ai-bg: linear-gradient(135deg, #34d399 0%, #10b981 100%);
-    --ui-ai-send-box-bg: #f8f7ffcc;
-    --ui-ai-send-box-border: 1.5px solid #c4b5fd80;
-    --ui-ai-send-box-shadow: 0 -4px 20px rgba(139, 92, 246, 0.1);
-    --ui-ai-tools-bg: #ede8ff80;
-    --ui-ai-tools-border: 1px solid #c4b5fd60;
-    /* -----------------------------sidebar-icons-------------------------------------- */
-    --sidebar-icon-active-gradient: linear-gradient(135deg, #a200ff30 0%, #00e5ff20 100%);
-    --sidebar-icon-glow: 0 0 12px rgba(162, 0, 255, 0.35);
+    --ui-ai-send-box-bg: color-mix(in srgb, var(--page-bg, #f8f7ff) 80%, transparent);
+    --ui-ai-send-box-border: 1.5px solid color-mix(in srgb, var(--selection-bg, #c4b5fd) 40%, transparent);
+    --ui-ai-send-box-shadow: 0 -4px 20px color-mix(in srgb, var(--selection-bg, #8b5cf6) 10%, transparent);
+    --ui-ai-tools-bg: color-mix(in srgb, var(--selection-bg, #ede8ff) 14%, color-mix(in srgb, var(--menu-bg, white) 80%, transparent));
+    --ui-ai-tools-border: 1px solid color-mix(in srgb, var(--selection-bg, #c4b5fd) 25%, transparent);
 }
 
 @media (prefers-color-scheme: dark) {
     :root {
+        /* ---- 无主题加载时的暗色模式默认值 ---- */
+        /* 大部分变量已通过 var(--core-var) 引用了 deepsky-core 主题的暗色值，此处只补充编辑器特有的变量 */
         --color: snow;
         --locate-anchor-bg: #ff2c8fb3;
 
         --dark-bg: #38383840;
         --note-bg: unset;
-        --ui-input-border: 1px dashed #6e6e6e;
-        --ui-base-input-cover-bg: #545454d1;
-
-        --ui-base-input-bg: transparent;
-        --ui-base-input-text: #f0f0f0;
-        --ui-base-input-border-color: #4a4a4a;
-        --ui-base-input-border-focus: #00bcd4;
-        --ui-base-input-cover-gradient: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
-        --ui-base-input-cover-text: #e0e0e0;
-        --ui-base-input-shadow-focus: 0 4px 15px rgba(0, 188, 212, 0.25);
-        --ui-base-input-container-gradient: linear-gradient(135deg, rgba(34, 38, 46, 0.88) 0%, rgba(26, 31, 39, 0.82) 100%);
-        --ui-base-input-border-gradient: linear-gradient(135deg, rgba(65, 149, 255, 0.55) 0%, rgba(45, 193, 220, 0.4) 100%);
-        --ui-base-input-overlay-shadow: 0 10px 28px rgba(12, 114, 155, 0.3);
-        --ui-base-input-text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
-
-        --ui-scrollbar-bg: transparent;
         --ui-scrollbar-thumb-bg: #222;
-        --ui-submit-bg: #464646a8;
-        --ui-submit-hover-bg: #006c74db;
-        --ui-submit-color: snow;
-
-        /* -----------------------------------ui-base----------------------------------------------- */
-
-        /* ------------------------------------------------doc-presets--------------------------------------------------- */
-        --dialog-bg: #343434b3;
-        --dialog-border: #555;
-        --dialog-backdrop-bg: rgba(0, 0, 0, 0.6);
-        
-        --dialog-close-color: #aaa;
-        --dialog-close-hover-bg: rgba(255, 255, 255, 0.15);
-        --dialog-close-hover-color: #fff;
-        
-        --dialog-input-bg: rgba(255, 255, 255, 0.1);
-        --dialog-input-border: #666;
-        --dialog-input-focus-bg: rgba(255, 255, 255, 0.15);
-        --dialog-input-placeholder-color: #aaa;
-
-        --dialog-title-bg: #45b9ed80;
-        --dialog-title-color: snow;
-        --dialog-subcard-bg: #48484880;
-
-        --dialog-css-item-color-hover: deeppink;
-        --dialog-css-item-border: unset;
-        --dialog-css-input-border: 1px dashed cyan;
-        /* -----------------------------------float----------------------------------------------- */
-        --float-shadow: 0 8px 28px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(50, 120, 135, 0.25);
-        --float-color: snow;
-        --float-rt-bg: rgba(28, 40, 46, 0.96);
-        --float-card-border: 1px solid rgba(55, 125, 138, 0.4);
-        --float-header-gradient: linear-gradient(135deg, #1a3638 0%, #142c2a 100%);
-        --float-header-color: #c8f0f0;
-        --float-confirm-gradient: linear-gradient(135deg, #1a6660 0%, #0e4e4a 100%);
-        --float-confirm-color: #b8fdf8;
-        --float-confirm-hover-shadow: 0 4px 16px rgba(0, 80, 80, 0.5);
-        --float-input-border: 1px solid rgba(60, 128, 140, 0.5);
-        --float-dict-active-bg: rgba(0, 160, 175, 0.3);
-        --float-dict-adder-bg: rgba(24, 34, 40, 0.97);
-        --float-dict-adder-tab-item-bg: rgba(45, 74, 84, 0.72);
-        --float-dict-adder-tip-bg: rgba(50, 38, 8, 0.82);
-        --float-dict-adder-tip-border: 1px solid rgba(140, 100, 0, 0.5);
-        --dialog-header-gradient: linear-gradient(135deg, #1a3638 0%, #142c2a 100%);
-        --dialog-header-color: #c8f0f0;
-
-        --float-link-ask-bg: rgba(26, 38, 44, 0.97);
-        --float-link-box-bg: #4e4e4ec9;
-        --float-link-bg: #616161cc;
-        --float-link-color: #e1e1e1e8;
-        --float-link-color-hover: #53d2dadb;
-        --float-link-icon-hover-color: #2dc1dce0;
-        --float-link-ask-border: 1px solid rgba(55, 125, 138, 0.4);
-        --float-link-ask-confirm-bg: linear-gradient(135deg, #1a6660 0%, #0e4e4a 100%);
-
-        --float-dict-keyword-color: #47f9d4b3;
+
+        /* ---- dict 数字颜色在暗色下需更亮 ---- */
         --float-dict-num-color: snow;
-        --float-dict-shadow: 0px 0px 12px #b4b4b48a;
-        --float-dict-bg: #6c6c6c8a;
-        --float-dict-adder-tab-active-bg: #d1d1d187;
-        --float-dict-adder-tab-bg: #e7e7e738;
-
-        --float-fomula-bg: #474747b8;
-        --float-fomula-shadow: 0px 0px 10px #c6c6c6b5;
-        --float-fomula-part-bg: #484848bf;
-        --float-fomula-input-color: snow;
-        --float-fomula-latex-fontsize: 16px;
-        --float-fomula-nav-item-bg: #54535399;
-        --float-fomula-nav-item-hover-bg: #7fffd487;
-        --float-fomula-nav-item-active-bg: #03827b99;
-        --float-fomula-candidate-item-bg: #5959597d;
-        --float-fomula-candidate-item-hover-bg: #23a6c6c4;
-
-        --float-cube-active-type-bg: #7c7c7c91;
-        --float-cubelist-border: unset;
-        --float-cubelist-bg: #333333cc;
-        --float-cubelist-input-color: snow;
-        --float-cubelist-cube-bg: #46464680;
-        --float-cubelist-preset-bg: #33566480;
-        --float-cubelist-preset-global-bg:#60499c80;
-
-        --float-cubelist-width: 500px;
-        --float-cubelist-height: 300px;
-        --float-cubelist-name-size: 16px;
-        --float-cubelist-type-size: 14px;
-        --float-cubelist-box-shadow: 0px 0px 10px var(--float-cubelist-search-button-bg);
-        --float-cubelist-search-shadow: none;
-        --float-cubelist-search-bg: #46464699;
-        --float-cubelist-search-button-bg: #242424cc;
-        --float-cubelist-search-color: var(--float-cubelist-search-button-bg);
-        --float-cubelist-tabs-bg: #5252529e;
-        --float-cubelist-content-bg: #1c1c1c7d;
-        --float-cubelist-itembox-hover-bg: #246c71cc;
-        --float-cubelist-itembox-bg: unset;
-        --float-cubelist-itembox-code-bg: #0493a4cc;
-
-        --float-cubelist-active-bg: #005d91cc;
-        --float-cubelist-active-color: #14ffdd;
-        --float-cubelist-active-icon-color: #14ffdd;
-        --float-cubelist-active-shadow: 0px 0px 12px var(--float-cubelist-active-bg);
-
-        /* -----------------------------------editor----------------------------------------------- */
-        --doc-editor-padding: 2px;
-
-        /* -----------------------------------menubar----------------------------------------------- */
-        --menubar-height: 40px;
-        --menubar-bg: var(--dark-bg);
-        --menubar-icon-border: none;
-        --menubar-icon-padding: 4px;
-        --menubar-icon-bg: none;
-        --menubar-icon-hover-bg: none;
-        --menubar-icon-hover-color: deeppink;
-        --menubar-active-icon-bg: none;
-
-        /* -----------------------------toolbar-------------------------------------- */
-        --toolbar-bg: var(--dark-bg);
-        --toolbar-icon-bg: #46454540;
-        --toolbar-icon-color: #dddddd;
-        --toolbar-icon-border: none;
-        --toolbar-custom-card-color: unset;
-        --toolbar-custom-card-hover-color: unset;
-        --toolbar-custom-card-bg: #eee;
-        --toolbar-custom-card-hover-bg: #6363639e;
-
-        --toolbar-custom-title-bg: #ccc;
-        --toolbar-custom-title-color: black;
-        --toolbar-custom-scrollbar-bg: black;
-        --toolbar-custom-scrollbar-color: snow;
-        --toolbar-icon-disable-color: #8e8d8da3;
-        --toolbar-foot-icon-bg-hover: #4a4a4abd;
-        /* -----------------------------statusbar-------------------------------------- */
-        --statusbar-tip-max-width: 30%;
-        --statusbar-items-max-width: 68%;
-        --statusbar-height: 35px;
-        --statusbar-bg: var(--dark-bg);
-        --statusbar-item-color: snow;
-        --statusbar-item-bg: #6d6d6d80;
-
-        /* -----------------------------sidebar-------------------------------------- */
-        --sidebar-bg: var(--dark-bg);
-        --sidebar-panel-toolbox-bg: #2f2f2f40;
-        --sidebar-panel-bg: #33333340;
-        --sidebar-icon-border: none;
-        --sidebar-icon-padding: 4px;
-        --sidebar-icon-bg: none;
-        --sidebar-icon-hover-bg: none;
-        --sidebar-icon-hover-color: deeppink;
-        --sidebar-dragger-hover-bg: turquoise;
-
-        /* -----------------------------sidebar-catalogue-------------------------------------- */
-        --ui-catalogue-title-bg: black;
-        --ui-catalogue-title-color: snow;
-        --ui-catalogue-title-radius: 4px;
-        --ui-catalogue-title-padding: 2px;
-        --ui-catalogue-title-tool-color: cyan;
-        --ui-catalogue-title-tool-hover-color: snow;
+
+        /* ---- cubelist tabs 在暗色下需保持较深背景 ---- */
+        --float-cubelist-tabs-bg: rgba(60, 60, 60, 0.72);
+
+        /* ---- catalogue 选择器滑块暗色 ---- */
         --ui-catalogue-selection-thumb-bg: #595959;
-        --ui-catalogue-selection-item-bg: #333333d4;
-        --ui-catalogue-selection-item-active-bg: #88888885;
-        --ui-catalogue-item-odd-bg: snow;
-        --ui-catalogue-item-even-bg: transparent;
-        --ui-catalogue-item-hover-bg: #228289b5;
-        --ui-catalogue-item-min-width: 160px;
-        --ui-catalogue-tools-hover-color: turquoise;
-        --ui-catalogue-tools-delete-mode-bg: #e8246790;
-        --ui-catalogue-group-drag-over-bg: yellow;
-        --ui-catalogue-group-bg: #32323240;
-        --ui-catalogue-group-active-bg: #555757b5;
-        --ui-catalogue-item-drag-bg: cyan;
-
-        /* -----------------------------sidebar-hotkeys-------------------------------------- */
-        --ui-hotkeys-hover-bg: #368a8294;
-        --ui-hotkeys-item-background: #3f3f3f40;
-        --ui-hotkeys-group-bg: #05628460;
-        /* -----------------------------sidebar-search-------------------------------------- */
-        --ui-search-item-hover-bg: #18505ed4;
-        --ui-search-item-even-bg: #2a3e3f60;
-        --ui-search-item-odd-bg: transparent;
-        --ui-search-icon-bg: #4a6a6a8a;
-        --ui-search-icon-color: #7ecccc;
-        --ui-search-icon-hover-bg: linear-gradient(135deg, #1a7a72 0%, #0d6e66 100%);
-        --ui-search-icon-hover-color: #ccfffa;
-        --ui-search-item-accent: #2a9a92;
-        --ui-search-item-hover-shadow: 0 2px 8px rgba(30, 120, 115, 0.3);
-        --ui-search-bar-bg: #252f3080;
-        --ui-search-bar-border: 1px solid #3a5555;
-        --ui-search-bar-shadow: 0 4px 12px rgba(20, 100, 95, 0.2);
-        /* -----------------------------sidebar-theme-------------------------------------- */
-        --ui-theme-item-hover-bg: #7fffd475;
-        --ui-theme-item-even-bg: #3c3c3ccc;
-        --ui-theme-item-odd-bg: transparent;
-        --ui-theme-title-bg: #6ff9e140;
-        --ui-theme-title-color: #d7efef;
-        --ui-theme-list-border: 2px solid #54d8ff;
-        --ui-theme-list-bg: #00483c40;
-        --ui-theme-list-shadow: 0px 6px 16px rgba(0, 0, 0, 0.28);
-        --ui-theme-item-border: 1px solid #4f6f71;
-        --ui-theme-item-color: #d9ecec;
-        --ui-theme-item-hover-shadow: 0px 2px 10px rgba(45, 193, 220, 0.22);
-        --ui-theme-bg-item-border: 1px solid #49686a;
-        --ui-theme-bg-item-shadow: 0px 4px 12px rgba(0, 0, 0, 0.24);
-        --ui-theme-clear-bg: #2f494bcc;
-        --ui-theme-clear-color: #def2f2;
-        --ui-background-title-bg: #fb54bd80;
+
+        /* ---- 语义状态色暗色变体（保存/阅读/scope 状态保持语义识别性） ---- */
+        --statusbar-item-not-save-bg: linear-gradient(135deg, rgba(132, 55, 78, 0.94) 0%, rgba(103, 39, 58, 0.98) 100%);
+        --statusbar-item-not-save-color: #ffe9ef;
+        --statusbar-item-not-save-shadow: 0 10px 24px rgba(58, 18, 31, 0.28);
+        --statusbar-item-reading-mode-bg: linear-gradient(135deg, rgba(41, 102, 100, 0.94) 0%, rgba(28, 79, 78, 0.98) 100%);
+        --statusbar-item-reading-mode-color: #e7fffe;
+        --statusbar-item-reading-mode-shadow: 0 10px 24px rgba(13, 49, 47, 0.28);
+        --statusbar-item-scope-exist-bg: linear-gradient(135deg, rgba(44, 87, 116, 0.94) 0%, rgba(32, 62, 83, 0.98) 100%);
+        --statusbar-item-scope-exist-color: #ebf7ff;
+        --statusbar-item-scope-exist-shadow: 0 10px 24px rgba(10, 29, 43, 0.3);
+
+        /* ---- background 标题保持固定的品红色 ---- */
         --ui-background-title-color: #f2daea;
-        --ui-background-list-border: 2px solid #fb54bd;
-        --ui-background-list-bg: #006a5840;
-        /* -----------------------------sideitem-toolbar-------------------------------------- */
-        --ui-toolbar-enable-group-title-bg: #3ceaffcc;
-        --ui-toolbar-disable-group-title-bg: #ffac14cc;
-        --ui-toolbar-enable-group-bg: #3ceaff30;
-        --ui-toolbar-disable-group-bg: #ffac1430;
-        --ui-toolbar-enable-group-title-color: unset;
-        --ui-toolbar-disable-group-title-color: unset;
-        --ui-toolbar-border-enable: 1px solid #aaaaaa;
-        --ui-toolbar-border-disable: 1px solid #f9cb63;
-
-        /* -----------------------------sideitem-config-------------------------------------- */
-        --ui-config-group-border: 1px solid #4d6a6d;
-        --ui-config-group-bg: #2a3a3bb0;
-        --ui-config-group-shadow: 0px 6px 16px rgba(0, 0, 0, 0.3);
-        --ui-config-group-title-bg: linear-gradient(135deg, #42585a 0%, #37524e 100%);
-        --ui-config-group-title-color: #e3f2f2;
-        --ui-config-item-bg: #31424499;
-        --ui-config-item-hover-bg: #3b5658cc;
-        --ui-config-item-name-bg: #42595c;
-        --ui-config-item-name-color: #dcf0f0;
-        /* -----------------------------sideitem-presets-------------------------------------- */
-        --ui-presets-item-bg: linear-gradient(135deg, #2a3a3a50 0%, #25303850 100%);
-        --ui-presets-item-border: 1px solid #4a6868;
-        --ui-presets-item-shadow: 0px 3px 10px rgba(0, 0, 0, 0.22);
-        --ui-presets-item-hover-bg: linear-gradient(135deg, #1e5050cc 0%, #1a3c50cc 100%);
-        --ui-presets-item-hover-shadow: 0px 6px 18px rgba(0, 140, 130, 0.3);
-        --ui-presets-item-type-color: #5dccd8;
-        --ui-presets-header-bg: linear-gradient(135deg, #29414260 0%, #243640 100%);
-        --ui-presets-header-border: 1px solid #3a5a5a;
-        --ui-presets-delete-color: #c06060;
-        --ui-presets-delete-hover-color: #ff7070;
-        /* -----------------------------sideitem-ai-------------------------------------- */
-        --ui-ai-input-bg: #3a3a4a80;
-        --ui-ai-input-border: 1.5px solid #6a60a850;
-        --ui-ai-input-disable-bg: #6c6c6c80;
-        --ui-ai-tool-hover-bg: #3a3050;
-        --ui-ai-tool-hover-color: #c084fc;
-        --ui-ai-question-bg: linear-gradient(135deg, #1e2a4a 0%, #2a2040 100%);
-        --ui-ai-question-color: #c8d8f8;
-        --ui-ai-reply-bg: linear-gradient(135deg, #1a2e22 0%, #1e2e28 100%);
-        --ui-ai-reply-color: #b8e8c8;
-        --ui-ai-avatar-user-bg: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
-        --ui-ai-avatar-ai-bg: linear-gradient(135deg, #065f46 0%, #047857 100%);
-        --ui-ai-send-box-bg: #1e1e2ecc;
-        --ui-ai-send-box-border: 1.5px solid #4a3f7080;
-        --ui-ai-send-box-shadow: 0 -4px 20px rgba(80, 50, 120, 0.2);
-        --ui-ai-tools-bg: #2a2540;
-        --ui-ai-tools-border: 1px solid #3a3060;
-        /* -----------------------------sidebar-icons-------------------------------------- */
-        --sidebar-icon-active-gradient: linear-gradient(135deg, #a200ff25 0%, #00e5ff15 100%);
-        --sidebar-icon-glow: 0 0 14px rgba(162, 0, 255, 0.45);
     }
 }
+
 @font-face {
   font-family: "iconfont"; /* Project id 4747285 */
   src: url(052e5db19d2a07514321.woff2?t=1772706830294) format('woff2'),
@@ -7189,62 +6969,91 @@ to {
 
 }
 
-@keyframes clip-circle-55bf90cb {
-from {
-        clip-path: circle(0px at center);
-}
-to {
-        clip-path: circle(100% at center);
-}
-}
+/* ============================================================
+   根容器
+   ============================================================ */
 .deepsky-note {
-&[data-v-55bf90cb]{
-    --loading-info-color: gray;
-    --loading-info-bg: #5fefe170;
-    --loading-info-border: 1px solid blueviolet;
-    --loading-bg: black;
-
+&[data-v-33b171ca]{
     display: flex;
     flex-flow: column nowrap;
     width: 100vw;
     height: 100vh;
+    overflow: hidden;
     position: relative;
-    background: var(--note-bg);
+    /* 主题提供的基底色，防止动画前闪白 */
+    background:
+        radial-gradient(ellipse 80% 60% at 0% 0%,
+            color-mix(in srgb, var(--selection-bg, transparent) 7%, var(--page-bg, #f2fbfd)) 0%,
+            var(--page-bg, #f2fbfd) 60%),
+        radial-gradient(ellipse 70% 60% at 100% 100%,
+            color-mix(in srgb, var(--selection-bg, transparent) 5%, var(--page-bg, #f2fbfd)) 0%,
+            transparent 60%),
+        var(--page-bg, #f2fbfd);
+
+    /* 主题背景层（壁纸 / 渐变等） */
+
+    /* 主题环境光层 —— 用 selection-bg 在四角投射极淡的晕光，随主题变色 */
 }
-.deepsky-note-bg[data-v-55bf90cb] {
+.deepsky-note-bg[data-v-33b171ca] {
         position: absolute;
-        left: 0px;
-        top: 0px;
-        width: 100%;
-        height: 100%;
+        inset: 0;
+        pointer-events: none;
+        z-index: 0;
+        background:
+            radial-gradient(ellipse 75% 60% at 5% 5%,
+                color-mix(in srgb, var(--selection-bg, transparent) 13%, var(--page-bg, #f2fbfd)) 0%,
+                transparent 65%),
+            radial-gradient(ellipse 65% 65% at 95% 95%,
+                color-mix(in srgb, var(--selection-bg, transparent) 9%, var(--page-bg, #f2fbfd)) 0%,
+                transparent 60%),
+            radial-gradient(ellipse 50% 40% at 50% 100%,
+                color-mix(in srgb, var(--selection-bg, transparent) 5%, var(--page-bg, #f2fbfd)) 0%,
+                transparent 70%),
+            var(--page-bg, #f2fbfd);
+}
+&[data-v-33b171ca]::before {
+        content: '';
+        position: absolute;
+        inset: 0;
         pointer-events: none;
-        animation: clip-circle-55bf90cb 1s forwards;
-        background: var(--background);
+        z-index: 0;
+        background:
+            radial-gradient(ellipse 60% 40% at 0% 0%,
+                color-mix(in srgb, var(--selection-bg, transparent) 8%, transparent) 0%,
+                transparent 70%),
+            radial-gradient(ellipse 60% 40% at 100% 100%,
+                color-mix(in srgb, var(--selection-bg, transparent) 6%, transparent) 0%,
+                transparent 70%);
 }
 }
+
+/* ============================================================
+   编辑区布局（flex:1 自动消耗剩余高度，不依赖 calc）
+   ============================================================ */
 .deepsky-editor-box {
-&[data-v-55bf90cb]{
+&[data-v-33b171ca]{
+    box-sizing: border-box;
     display: flex;
     flex-flow: row nowrap;
-
-    height: calc(100vh - var(--menubar-height) - var(--statusbar-height));
+    flex: 1;
+    min-height: 0;         /* 允许 flex 子项收缩 */
+    position: relative;
+    z-index: 1;
 }
-.note-box[data-v-55bf90cb] {
+.note-box[data-v-33b171ca] {
+        box-sizing: border-box;
         width: 100%;
-        /* 不要添加这个css样式会导致 冻结块选区上无法滚动页面内容 */
+        min-width: 0;
         overflow: scroll;
 }
 }
+
+/* ============================================================
+   暗色模式覆盖
+   ============================================================ */
 @media (prefers-color-scheme: dark) {
 .deepsky-note {
-&[data-v-55bf90cb]{
-        --loading-info-color: #e6e6e6cc;
-        --loading-info-bg: #3a3a3aa6;
-        --loading-info-border: none;
-        --loading-bg: black;
-}
-.deepsky-note-bg[data-v-55bf90cb] {
-            background: var(--background);
+.deepsky-note-bg[data-v-33b171ca] { background: var(--background);
 }
 }
 }
@@ -7456,73 +7265,79 @@ html {
 }
 
 
-@keyframes clip-circle-2822e0b5 {
-from {
-        clip-path: circle(0px at center);
-}
-to {
-        clip-path: circle(100% at center);
-}
-}
+/* ============================================================
+   根容器
+   ============================================================ */
 .deepsky-note {
-&[data-v-2822e0b5]{
-    --loading-info-color: gray;
-    --loading-info-bg: #5fefe170;
-    --loading-info-border: 1px solid blueviolet;
-    --loading-bg: black;
-
+&[data-v-65abf43e]{
     display: flex;
     flex-flow: column nowrap;
     width: 100vw;
     height: 100vh;
+    overflow: hidden;
     position: relative;
-    background: var(--note-bg);
+    background: radial-gradient(ellipse 70% 60% at 100% 0%, color-mix(in srgb, var(--selection-bg, transparent) 7%, var(--page-bg, #f2fbfd)) 0%, var(--page-bg, #f2fbfd) 60%), radial-gradient(ellipse 70% 65% at 0% 100%, color-mix(in srgb, var(--selection-bg, transparent) 5%, var(--page-bg, #f2fbfd)) 0%, transparent 60%), var(--page-bg, #f2fbfd);
+
+    /* 地图编辑器用对角双色环境光，体现空间感 */
 }
-.deepsky-note-bg[data-v-2822e0b5] {
+.deepsky-note-bg[data-v-65abf43e] {
         position: absolute;
-        left: 0px;
-        top: 0px;
-        width: 100%;
-        height: 100%;
+        inset: 0;
         pointer-events: none;
-        animation: clip-circle-2822e0b5 1s forwards;
-        background: var(--background);
+        z-index: 0;
+        background: radial-gradient(ellipse 70% 60% at 95% 5%, color-mix(in srgb, var(--selection-bg, transparent) 15%, var(--page-bg, #f2fbfd)) 0%, transparent 65%), radial-gradient(ellipse 65% 70% at 5% 95%, color-mix(in srgb, var(--selection-bg, transparent) 10%, var(--page-bg, #f2fbfd)) 0%, transparent 60%), radial-gradient(ellipse 45% 35% at 50% 50%, color-mix(in srgb, var(--selection-bg, transparent) 4%, var(--page-bg, #f2fbfd)) 0%, transparent 70%), var(--page-bg, #f2fbfd);
+}
+&[data-v-65abf43e]::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        z-index: 0;
+        background: radial-gradient(ellipse 50% 50% at 100% 0%, color-mix(in srgb, var(--selection-bg, transparent) 10%, transparent) 0%, transparent 65%), radial-gradient(ellipse 50% 50% at 0% 100%, color-mix(in srgb, var(--selection-bg, transparent) 7%, transparent) 0%, transparent 65%);
 }
 }
+
+/* ============================================================
+   编辑区布局
+   ============================================================ */
 .deepsky-editor-box {
-&[data-v-2822e0b5]{
+&[data-v-65abf43e]{
+    box-sizing: border-box;
     display: flex;
     flex-flow: row nowrap;
-
-    height: calc(100vh - var(--menubar-height) - var(--statusbar-height));
+    flex: 1;
+    min-height: 0;
+    position: relative;
+    z-index: 1;
 }
 .note-box {
-&[data-v-2822e0b5]{
+&[data-v-65abf43e]{
+        box-sizing: border-box;
         position: relative;
         width: 100%;
+        min-width: 0;
         overflow: scroll;
         display: flex;
-        flex-flow: column wrap;
+        flex-flow: column nowrap;
+
+        /* 工具栏：不参与伸缩 */
+
+        /* 地图画布：填满剩余空间 */
 }
-& > div[data-v-2822e0b5]:first-child {
+& > div[data-v-65abf43e]:first-child {
             flex-shrink: 0;
             width: 100%;
 }
-.note[data-v-2822e0b5] {
+.note[data-v-65abf43e] {
             flex: 1;
+            min-height: 0;
             width: 100%;
 }
 }
 }
 @media (prefers-color-scheme: dark) {
 .deepsky-note {
-&[data-v-2822e0b5]{
-        --loading-info-color: #e6e6e6cc;
-        --loading-info-bg: #3a3a3aa6;
-        --loading-info-border: none;
-        --loading-bg: black;
-}
-.deepsky-note-bg[data-v-2822e0b5]{
+.deepsky-note-bg[data-v-65abf43e] {
             background: var(--background);
 }
 }