react-public-components 1.1.19 → 1.2.1

package/dist/index.css

@@ -1,3 +1,17 @@
+/* src/index.less */
+@keyframes rpc-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.rpc_loading_icon {
+  display: inline-block;
+  animation: rpc-spin 0.85s infinite linear;
+}
+
 /* CollapseBox/index.less */
 .collapsible-wrapper {
   position: relative;
@@ -193,4 +207,4435 @@
     offset-distance: 100%;
   }
 }
+
+/* ColorPicker/index.less */
+.react-public-color-picker-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  background: #ffffff;
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  box-sizing: border-box;
+}
+.react-public-color-picker-trigger:hover:not(.react-public-color-picker-disabled) {
+  border-color: #4096ff;
+}
+.react-public-color-picker-trigger.react-public-color-picker-size-small {
+  height: 24px;
+  padding: 2px 6px;
+  font-size: 12px;
+}
+.react-public-color-picker-trigger.react-public-color-picker-size-middle {
+  height: 32px;
+  padding: 4px 8px;
+  font-size: 14px;
+}
+.react-public-color-picker-trigger.react-public-color-picker-size-large {
+  height: 40px;
+  padding: 6px 12px;
+  font-size: 16px;
+}
+.react-public-color-picker-trigger.react-public-color-picker-disabled {
+  background: #f5f5f5;
+  border-color: #d9d9d9;
+  cursor: not-allowed;
+  opacity: 0.65;
+}
+.react-public-color-picker-color-block {
+  position: relative;
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  background-image:
+    conic-gradient(
+      #eee 0 25%,
+      #fff 0 50%,
+      #eee 0 75%,
+      #fff 0 100%);
+  background-size: 8px 8px;
+}
+.react-public-color-picker-color-inner {
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+}
+.react-public-color-picker-clear-icon {
+  color: #bfbfbf;
+  font-size: 12px;
+  transition: color 0.2s;
+  display: inline-flex;
+  align-items: center;
+}
+.react-public-color-picker-clear-icon:hover {
+  color: #595959;
+}
+.react-public-color-picker-popover {
+  position: absolute;
+  z-index: 1050;
+  padding: 12px;
+  background: #ffffff;
+  border-radius: 8px;
+  box-shadow:
+    0 6px 16px 0 rgba(0, 0, 0, 0.08),
+    0 3px 6px -4px rgba(0, 0, 0, 0.12),
+    0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  width: max-content;
+  min-width: 250px;
+  max-width: 90vw;
+  box-sizing: border-box;
+  user-select: none;
+  animation: react-public-color-picker-fade-in 0.2s ease;
+}
+@keyframes react-public-color-picker-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+.react-public-color-picker-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+  width: 100%;
+}
+.react-public-color-picker-panel-clear-btn {
+  width: 24px;
+  height: 24px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  background: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  margin-left: auto;
+}
+.react-public-color-picker-panel-clear-btn:hover {
+  border-color: #ff4d4f;
+  background: #fff1f0;
+}
+.react-public-color-picker-mode-segmented {
+  display: flex;
+  background: #f5f5f5;
+  padding: 2px;
+  border-radius: 6px;
+  flex: 1;
+  margin-right: 8px;
+}
+.react-public-color-picker-mode-option {
+  flex: 1;
+  text-align: center;
+  padding: 4px 0;
+  font-size: 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  color: #595959;
+  transition: all 0.2s;
+}
+.react-public-color-picker-mode-option.active {
+  background: #ffffff;
+  color: #1677ff;
+  font-weight: 500;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+}
+.react-public-color-picker-gradient-slider {
+  position: relative;
+  height: 14px;
+  border-radius: 7px;
+  margin-bottom: 12px;
+  cursor: pointer;
+  background-image:
+    conic-gradient(
+      #eee 0 25%,
+      #fff 0 50%,
+      #eee 0 75%,
+      #fff 0 100%);
+  background-size: 8px 8px;
+}
+.react-public-color-picker-gradient-bg {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+}
+.react-public-color-picker-gradient-stop-handle {
+  position: absolute;
+  top: 50%;
+  width: 14px;
+  height: 14px;
+  border: 2px solid #ffffff;
+  border-radius: 50%;
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
+  transform: translate(-50%, -50%);
+  cursor: grab;
+  box-sizing: border-box;
+  transition: border-color 0.15s;
+}
+.react-public-color-picker-gradient-stop-handle.active {
+  border-color: #1677ff;
+  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.3), 0 0 4px rgba(0, 0, 0, 0.4);
+}
+.react-public-color-picker-arrow {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: #ffffff;
+  transform: rotate(45deg);
+  box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.03);
+}
+.react-public-color-picker-popover-bottomLeft .react-public-color-picker-arrow {
+  top: -4px;
+  left: 16px;
+}
+.react-public-color-picker-popover-bottomRight .react-public-color-picker-arrow {
+  top: -4px;
+  right: 16px;
+}
+.react-public-color-picker-popover-topLeft .react-public-color-picker-arrow {
+  bottom: -4px;
+  left: 16px;
+}
+.react-public-color-picker-popover-topRight .react-public-color-picker-arrow {
+  bottom: -4px;
+  right: 16px;
+}
+.react-public-color-picker-panel-body {
+  width: 240px;
+  box-sizing: border-box;
+}
+.react-public-color-picker-palette {
+  position: relative;
+  width: 100%;
+  height: 150px;
+  border-radius: 6px;
+  cursor: crosshair;
+  overflow: hidden;
+  margin-bottom: 12px;
+}
+.react-public-color-picker-saturation-bg {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(
+      to right,
+      #fff,
+      transparent);
+}
+.react-public-color-picker-brightness-bg {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(
+      to top,
+      #000,
+      transparent);
+}
+.react-public-color-picker-handler {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  border: 2px solid #ffffff;
+  border-radius: 50%;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  box-sizing: border-box;
+}
+.react-public-color-picker-slider-container {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+.react-public-color-picker-slider-group {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.react-public-color-picker-side-block {
+  position: relative;
+  width: 26px;
+  height: 26px;
+  border-radius: 6px;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  flex-shrink: 0;
+  background-image:
+    conic-gradient(
+      #eee 0 25%,
+      #fff 0 50%,
+      #eee 0 75%,
+      #fff 0 100%);
+  background-size: 8px 8px;
+}
+.react-public-color-picker-slider {
+  position: relative;
+  height: 10px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.react-public-color-picker-hue-slider {
+  background:
+    linear-gradient(
+      to right,
+      #ff0000 0%,
+      #ffff00 17%,
+      #00ff00 33%,
+      #00ffff 50%,
+      #0000ff 67%,
+      #ff00ff 83%,
+      #ff0000 100%);
+}
+.react-public-color-picker-alpha-slider {
+  background-image:
+    conic-gradient(
+      #eee 0 25%,
+      #fff 0 50%,
+      #eee 0 75%,
+      #fff 0 100%);
+  background-size: 8px 8px;
+}
+.react-public-color-picker-alpha-bg {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+}
+.react-public-color-picker-slider-handler {
+  position: absolute;
+  top: 50%;
+  width: 14px;
+  height: 14px;
+  border: 2px solid #ffffff;
+  border-radius: 50%;
+  background: transparent;
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  box-sizing: border-box;
+}
+.react-public-color-picker-inputs {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  box-sizing: border-box;
+}
+.react-public-color-picker-format-select {
+  width: 58px;
+  height: 28px;
+  padding: 0 2px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  background: #fff;
+  font-size: 12px;
+  cursor: pointer;
+  outline: none;
+  flex-shrink: 0;
+}
+.react-public-color-picker-format-select:focus {
+  border-color: #4096ff;
+}
+.react-public-color-picker-input-field {
+  flex: 1;
+  min-width: 0;
+  height: 28px;
+  padding: 0 6px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  font-size: 12px;
+  outline: none;
+  box-sizing: border-box;
+}
+.react-public-color-picker-input-field:focus {
+  border-color: #4096ff;
+}
+.react-public-color-picker-alpha-input {
+  width: 44px;
+  height: 28px;
+  padding: 0 2px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  font-size: 12px;
+  text-align: center;
+  outline: none;
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+.react-public-color-picker-alpha-input:focus {
+  border-color: #4096ff;
+}
+.react-public-color-picker-presets {
+  padding-top: 4px;
+}
+.react-public-color-picker-presets-standalone {
+  border-top: 1px solid #f0f0f0;
+  padding-top: 10px;
+  margin-top: 4px;
+}
+.react-public-color-picker-preset-title {
+  font-size: 12px;
+  color: #595959;
+  margin-bottom: 6px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  user-select: none;
+}
+.react-public-color-picker-preset-title:hover {
+  color: #1677ff;
+}
+.react-public-color-picker-preset-colors {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  max-width: 220px;
+  margin-bottom: 6px;
+}
+.react-public-color-picker-preset-item {
+  position: relative;
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  cursor: pointer;
+  overflow: hidden;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
+  transition: transform 0.1s ease;
+  background-image:
+    conic-gradient(
+      #eee 0 25%,
+      #fff 0 50%,
+      #eee 0 75%,
+      #fff 0 100%);
+  background-size: 8px 8px;
+}
+.react-public-color-picker-preset-item:hover {
+  transform: scale(1.15);
+}
+.react-public-color-picker-preset-item-inner {
+  width: 100%;
+  height: 100%;
+}
+
+/* CopyButton/index.less */
+.rpc_copy_button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  box-sizing: border-box;
+  font-size: 14px;
+  line-height: 1.5714;
+  font-family: inherit;
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  position: relative;
+  white-space: nowrap;
+}
+.rpc_copy_button_button {
+  height: 32px;
+  padding: 4px 15px;
+  border-radius: 6px;
+  border: 1px solid #d9d9d9;
+  background: #ffffff;
+  color: #262626;
+}
+.rpc_copy_button_button:hover:not(.rpc_copy_button_button_disabled) {
+  color: #4096ff;
+  border-color: #4096ff;
+}
+.rpc_copy_button_button:active:not(.rpc_copy_button_button_disabled) {
+  color: #0958d9;
+  border-color: #0958d9;
+}
+.rpc_copy_button_button.rpc_copy_button_primary {
+  background: #1677ff;
+  border-color: #1677ff;
+  color: #ffffff;
+}
+.rpc_copy_button_button.rpc_copy_button_primary:hover:not(.rpc_copy_button_disabled) {
+  background: #4096ff;
+  border-color: #4096ff;
+  color: #ffffff;
+}
+.rpc_copy_button_button.rpc_copy_button_copied {
+  color: #52c41a;
+  border-color: #b7eb8f;
+  background: #f6ffed;
+}
+.rpc_copy_button_button.rpc_copy_button_copied.rpc_copy_button_primary {
+  background: #52c41a;
+  border-color: #52c41a;
+  color: #ffffff;
+}
+.rpc_copy_button_icon {
+  padding: 4px;
+  border: none;
+  background: transparent;
+  color: #8c8c8c;
+  border-radius: 4px;
+}
+.rpc_copy_button_icon:hover:not(.rpc_copy_button_icon_disabled) {
+  color: #1677ff;
+  background: rgba(0, 0, 0, 0.04);
+}
+.rpc_copy_button_icon.rpc_copy_button_copied {
+  color: #52c41a;
+}
+.rpc_copy_button_inline {
+  padding: 0 4px;
+  border: none;
+  background: transparent;
+  color: #1677ff;
+}
+.rpc_copy_button_inline:hover:not(.rpc_copy_button_inline_disabled) {
+  color: #4096ff;
+  text-decoration: underline;
+}
+.rpc_copy_button_inline.rpc_copy_button_copied {
+  color: #52c41a;
+}
+.rpc_copy_button_disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  pointer-events: none;
+}
+.rpc_copy_button_icon_wrap {
+  display: inline-flex;
+  align-items: center;
+  transition: transform 0.2s ease;
+}
+.rpc_copy_button_tooltip {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%) translateY(4px);
+  background: rgba(0, 0, 0, 0.85);
+  color: #ffffff;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  line-height: 1.4;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  z-index: 1000;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+.rpc_copy_button_tooltip::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 4px solid transparent;
+  border-top-color: rgba(0, 0, 0, 0.85);
+}
+.rpc_copy_button:hover .rpc_copy_button_tooltip_hover,
+.rpc_copy_button_tooltip_visible {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+
+/* TextEllipsis/index.less */
+.rpc_text_ellipsis {
+  position: relative;
+  box-sizing: border-box;
+  line-height: 1.5714;
+  color: inherit;
+  display: inline-flex;
+  max-width: 100%;
+  vertical-align: bottom;
+}
+.rpc_text_ellipsis_content_wrap {
+  display: inline-block;
+  max-width: 100%;
+  vertical-align: bottom;
+}
+.rpc_text_ellipsis_single_line {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+}
+.rpc_text_ellipsis_multi_line {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+}
+.rpc_text_ellipsis_expanded {
+  display: block;
+  overflow: visible;
+  -webkit-line-clamp: unset !important;
+  white-space: normal;
+}
+.rpc_text_ellipsis_action_btn {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 6px;
+  color: #1677ff;
+  cursor: pointer;
+  font-size: 13px;
+  user-select: none;
+  transition: color 0.2s ease;
+  white-space: nowrap;
+}
+.rpc_text_ellipsis_action_btn:hover {
+  color: #4096ff;
+  text-decoration: underline;
+}
+.rpc_text_ellipsis_prefix {
+  margin-right: 4px;
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.rpc_text_ellipsis_suffix {
+  margin-left: 4px;
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.rpc_text_ellipsis_tooltip {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%) translateY(4px);
+  background: rgba(0, 0, 0, 0.85);
+  color: #ffffff;
+  padding: 6px 10px;
+  border-radius: 6px;
+  font-size: 12px;
+  line-height: 1.5;
+  max-width: 320px;
+  word-break: break-all;
+  white-space: normal;
+  pointer-events: none;
+  opacity: 0;
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  z-index: 1000;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+.rpc_text_ellipsis_tooltip::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 4px solid transparent;
+  border-top-color: rgba(0, 0, 0, 0.85);
+}
+.rpc_text_ellipsis:hover .rpc_text_ellipsis_tooltip_visible {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+
+/* DebounceSelect/index.less */
+.rpc_debounce_select {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-block;
+  width: 100%;
+  min-width: 160px;
+  font-size: 14px;
+  font-family: inherit;
+  color: #262626;
+}
+.rpc_debounce_select_selector {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
+  min-height: 34px;
+  padding: 3px 11px;
+  background: #ffffff;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  cursor: text;
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  box-sizing: border-box;
+}
+.rpc_debounce_select_selector:hover:not(.rpc_debounce_select_selector_disabled) {
+  border-color: #4096ff;
+}
+.rpc_debounce_select_selector_focused {
+  border-color: #1677ff;
+  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.15);
+}
+.rpc_debounce_select_selector_disabled {
+  background: #f5f5f5;
+  border-color: #d9d9d9;
+  cursor: not-allowed;
+  color: rgba(0, 0, 0, 0.25);
+}
+.rpc_debounce_select_input {
+  flex: 1;
+  min-width: 60px;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 14px;
+  color: inherit;
+  padding: 0;
+  margin: 0;
+}
+.rpc_debounce_select_input::placeholder {
+  color: #bfbfbf;
+}
+.rpc_debounce_select_input:disabled {
+  cursor: not-allowed;
+}
+.rpc_debounce_select_tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 1px 8px;
+  background: #f5f5f5;
+  border: 1px solid #e8e8e8;
+  border-radius: 4px;
+  font-size: 12px;
+  color: #262626;
+  user-select: none;
+}
+.rpc_debounce_select_tag_close {
+  font-size: 10px;
+  color: #8c8c8c;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+}
+.rpc_debounce_select_tag_close:hover {
+  color: #ff4d4f;
+}
+.rpc_debounce_select_actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
+  color: #8c8c8c;
+  font-size: 12px;
+  flex-shrink: 0;
+}
+.rpc_debounce_select_clear_btn {
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  transition: color 0.2s;
+}
+.rpc_debounce_select_clear_btn:hover {
+  color: #595959;
+}
+.rpc_debounce_select_dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  background: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12);
+  border: 1px solid #f0f0f0;
+  max-height: 256px;
+  overflow-y: auto;
+  z-index: 1050;
+  padding: 4px;
+  box-sizing: border-box;
+  animation: rpcSelectFadeIn 0.15s ease-out;
+}
+.rpc_debounce_select_item {
+  padding: 7px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #262626;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  transition: background 0.15s ease;
+}
+.rpc_debounce_select_item:hover {
+  background: #f5f5f5;
+}
+.rpc_debounce_select_item_selected {
+  font-weight: 600;
+  color: #1677ff;
+  background: #e6f4ff;
+}
+.rpc_debounce_select_item_selected:hover {
+  background: #bae0ff;
+}
+.rpc_debounce_select_item_disabled {
+  cursor: not-allowed;
+  color: #bfbfbf;
+  background: transparent !important;
+}
+.rpc_debounce_select_empty {
+  padding: 18px 0;
+  text-align: center;
+  color: #8c8c8c;
+  font-size: 13px;
+}
+@keyframes rpcSelectFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* CountUp/index.less */
+.rpc_count_up {
+  display: inline-flex;
+  align-items: baseline;
+  font-variant-numeric: tabular-nums;
+  font-family: inherit;
+  color: inherit;
+  line-height: 1;
+}
+.rpc_count_up_prefix {
+  margin-right: 2px;
+  font-size: 0.85em;
+  opacity: 0.85;
+}
+.rpc_count_up_suffix {
+  margin-left: 2px;
+  font-size: 0.85em;
+  opacity: 0.85;
+}
+.rpc_count_up_value {
+  font-weight: inherit;
+}
+
+/* ContextMenu/index.less */
+.rpc_context_menu {
+  display: inline-block;
+  width: 100%;
+}
+.rpc_context_menu_panel {
+  position: fixed;
+  min-width: 160px;
+  background: #ffffff;
+  border-radius: 8px;
+  box-shadow:
+    0 6px 16px 0 rgba(0, 0, 0, 0.08),
+    0 3px 6px -4px rgba(0, 0, 0, 0.12),
+    0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  border: 1px solid #f0f0f0;
+  padding: 4px;
+  z-index: 2000;
+  box-sizing: border-box;
+  animation: rpcMenuFadeIn 0.12s ease-out;
+  user-select: none;
+  font-family: inherit;
+}
+.rpc_context_menu_item {
+  display: flex;
+  align-items: center;
+  padding: 7px 12px;
+  font-size: 13px;
+  line-height: 1.5;
+  color: #262626;
+  border-radius: 4px;
+  cursor: pointer;
+  position: relative;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+.rpc_context_menu_item:hover:not(.rpc_context_menu_item_disabled) {
+  background: #f5f5f5;
+  color: #1677ff;
+}
+.rpc_context_menu_item_icon {
+  margin-right: 8px;
+  display: inline-flex;
+  align-items: center;
+  font-size: 14px;
+}
+.rpc_context_menu_item_label {
+  flex: 1;
+}
+.rpc_context_menu_item_shortcut {
+  margin-left: 16px;
+  color: #8c8c8c;
+  font-size: 11px;
+  font-family: monospace;
+}
+.rpc_context_menu_item_arrow {
+  margin-left: 8px;
+  font-size: 10px;
+  color: #8c8c8c;
+}
+.rpc_context_menu_item_danger {
+  color: #ff4d4f;
+}
+.rpc_context_menu_item_danger:hover:not(.rpc_context_menu_item_disabled) {
+  background: #fff1f0;
+  color: #ff4d4f;
+}
+.rpc_context_menu_item_disabled {
+  cursor: not-allowed;
+  color: #bfbfbf !important;
+  background: transparent !important;
+}
+.rpc_context_menu_divider {
+  height: 1px;
+  margin: 4px 0;
+  background: #f0f0f0;
+}
+.rpc_context_menu_submenu {
+  position: absolute;
+  top: 0;
+  left: 100%;
+  min-width: 150px;
+  background: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12);
+  border: 1px solid #f0f0f0;
+  padding: 4px;
+  display: none;
+  z-index: 2001;
+}
+.rpc_context_menu_submenu_left {
+  left: auto;
+  right: 100%;
+}
+.rpc_context_menu_item:hover > .rpc_context_menu_submenu {
+  display: block;
+  animation: rpcMenuFadeIn 0.12s ease-out;
+}
+@keyframes rpcMenuFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Fullscreen/index.less */
+.rpc_fullscreen_container {
+  position: relative;
+  box-sizing: border-box;
+}
+.rpc_fullscreen_container:fullscreen {
+  background-color: #ffffff !important;
+  width: 100vw !important;
+  height: 100vh !important;
+  overflow: auto !important;
+  box-sizing: border-box !important;
+}
+.rpc_fullscreen_container:fullscreen::backdrop {
+  background-color: #ffffff !important;
+}
+.rpc_fullscreen_container:-webkit-full-screen {
+  background-color: #ffffff !important;
+  width: 100vw !important;
+  height: 100vh !important;
+  overflow: auto !important;
+  box-sizing: border-box !important;
+}
+.rpc_fullscreen_container_fullscreen {
+  background-color: #ffffff !important;
+}
+.rpc_fullscreen_container_web_fullscreen {
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  width: 100vw !important;
+  height: 100vh !important;
+  z-index: 9999 !important;
+  background-color: #ffffff !important;
+  overflow: auto !important;
+  border-radius: 0 !important;
+  margin: 0 !important;
+}
+.rpc_fullscreen_container_action_btn {
+  position: absolute;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  color: #595959;
+  cursor: pointer;
+  font-size: 15px;
+  z-index: 10;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.rpc_fullscreen_container_action_btn:hover {
+  color: #1677ff;
+  background: #ffffff;
+  border-color: #1677ff;
+  box-shadow: 0 4px 12px rgba(22, 119, 255, 0.15);
+}
+.rpc_fullscreen_container_action_btn_top_right {
+  top: 12px;
+  right: 12px;
+}
+.rpc_fullscreen_container_action_btn_top_left {
+  top: 12px;
+  left: 12px;
+}
+.rpc_fullscreen_container_action_btn_bottom_right {
+  bottom: 12px;
+  right: 12px;
+}
+.rpc_fullscreen_container_action_btn_bottom_left {
+  bottom: 12px;
+  left: 12px;
+}
+.rpc_fullscreen_btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 32px;
+  padding: 4px 15px;
+  border-radius: 6px;
+  border: 1px solid #d9d9d9;
+  background: #ffffff;
+  color: #262626;
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 1.5714;
+  user-select: none;
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.rpc_fullscreen_btn:hover {
+  color: #4096ff;
+  border-color: #4096ff;
+}
+.rpc_fullscreen_btn_active {
+  color: #1677ff;
+  border-color: #1677ff;
+  background: #e6f4ff;
+}
+.rpc_fullscreen_btn_icon_only {
+  padding: 4px;
+  width: 32px;
+  height: 32px;
+}
+
+/* ImageCropper/index.less */
+.rpc_image_cropper {
+  position: relative;
+  box-sizing: border-box;
+  user-select: none;
+  background: #141414;
+  overflow: hidden;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.rpc_image_cropper_canvas_wrap {
+  position: relative;
+  width: 100%;
+  height: 360px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: grab;
+  overflow: hidden;
+}
+.rpc_image_cropper_canvas_wrap:active {
+  cursor: grabbing;
+}
+.rpc_image_cropper_canvas {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+}
+.rpc_image_cropper_mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  box-sizing: border-box;
+}
+.rpc_image_cropper_crop_box {
+  position: absolute;
+  box-sizing: border-box;
+  border: 2px solid #1677ff;
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
+  pointer-events: none;
+}
+.rpc_image_cropper_crop_box_round {
+  border-radius: 50%;
+}
+.rpc_image_cropper_crop_box_grid {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.rpc_image_cropper_crop_box_grid::before,
+.rpc_image_cropper_crop_box_grid::after {
+  content: "";
+  position: absolute;
+  background: rgba(255, 255, 255, 0.35);
+}
+.rpc_image_cropper_crop_box_grid::before {
+  top: 33.33%;
+  left: 0;
+  right: 0;
+  height: 33.33%;
+  border-top: 1px dashed rgba(255, 255, 255, 0.5);
+  border-bottom: 1px dashed rgba(255, 255, 255, 0.5);
+}
+.rpc_image_cropper_crop_box_grid::after {
+  left: 33.33%;
+  top: 0;
+  bottom: 0;
+  width: 33.33%;
+  border-left: 1px dashed rgba(255, 255, 255, 0.5);
+  border-right: 1px dashed rgba(255, 255, 255, 0.5);
+}
+.rpc_image_cropper_toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background: #1f1f1f;
+  width: 100%;
+  box-sizing: border-box;
+  border-top: 1px solid #303030;
+}
+.rpc_image_cropper_btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 12px;
+  border-radius: 6px;
+  background: #2a2a2a;
+  border: 1px solid #434343;
+  color: #ffffff;
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.rpc_image_cropper_btn:hover {
+  background: #3a3a3a;
+  border-color: #1677ff;
+  color: #1677ff;
+}
+.rpc_image_cropper_btn_primary {
+  background: #1677ff;
+  border-color: #1677ff;
+}
+.rpc_image_cropper_btn_primary:hover {
+  background: #4096ff;
+  border-color: #4096ff;
+  color: #ffffff;
+}
+.rpc_cropper_modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.65);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2100;
+  padding: 20px;
+  box-sizing: border-box;
+  animation: rpcCropperFadeIn 0.2s ease-out;
+}
+.rpc_cropper_modal_card {
+  background: #ffffff;
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+  width: 100%;
+  max-width: 580px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.rpc_cropper_modal_header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid #f0f0f0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #1f1f1f;
+}
+.rpc_cropper_modal_close {
+  cursor: pointer;
+  color: #8c8c8c;
+  font-size: 16px;
+}
+.rpc_cropper_modal_close:hover {
+  color: #262626;
+}
+.rpc_cropper_modal_footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 14px 20px;
+  border-top: 1px solid #f0f0f0;
+  background: #fafafa;
+}
+@keyframes rpcCropperFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* ScrollTracker/index.less */
+.rpc_scroll_tracker {
+  position: fixed;
+  left: 0;
+  right: 0;
+  z-index: 1060;
+  pointer-events: none;
+  height: 3px;
+  background: transparent;
+}
+.rpc_scroll_tracker_top {
+  top: 0;
+}
+.rpc_scroll_tracker_bottom {
+  bottom: 0;
+}
+.rpc_scroll_tracker_bar {
+  height: 100%;
+  background: #1677ff;
+  transition: width 0.08s ease-out;
+  box-shadow: 0 0 8px rgba(22, 119, 255, 0.5);
+}
+.rpc_scroll_tracker_percentage {
+  position: absolute;
+  right: 12px;
+  top: 8px;
+  background: rgba(0, 0, 0, 0.75);
+  color: #ffffff;
+  font-size: 11px;
+  font-family: monospace;
+  padding: 2px 6px;
+  border-radius: 4px;
+  pointer-events: auto;
+}
+.rpc_sticky_header {
+  position: sticky;
+  z-index: 1000;
+  box-sizing: border-box;
+  transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.rpc_sticky_header_stuck {
+  background: rgba(255, 255, 255, 0.88) !important;
+  backdrop-filter: blur(12px) !important;
+  -webkit-backdrop-filter: blur(12px) !important;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+/* FilePreviewer/index.less */
+.rpc_file_previewer_modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.72);
+  backdrop-filter: blur(8px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2200;
+  padding: 24px;
+  box-sizing: border-box;
+  animation: rpcPreviewerFadeIn 0.2s ease-out;
+}
+.rpc_file_previewer_modal_card {
+  background: #ffffff;
+  border-radius: 12px;
+  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
+  width: 100%;
+  max-width: 840px;
+  height: 80vh;
+  max-height: 640px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.rpc_file_previewer_modal_header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 20px;
+  border-bottom: 1px solid #f0f0f0;
+  background: #ffffff;
+  z-index: 10;
+}
+.rpc_file_previewer_modal_title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #1f1f1f;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 70%;
+}
+.rpc_file_previewer_modal_actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.rpc_file_previewer_modal_action_btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border-radius: 6px;
+  border: 1px solid #e8e8e8;
+  background: #ffffff;
+  color: #595959;
+  cursor: pointer;
+  font-size: 16px;
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.rpc_file_previewer_modal_action_btn:hover {
+  color: #1677ff;
+  border-color: #1677ff;
+  background: #f0f5ff;
+  box-shadow: 0 2px 6px rgba(22, 119, 255, 0.12);
+}
+.rpc_file_previewer_modal_action_btn:active {
+  background: #e6f4ff;
+  transform: scale(0.96);
+}
+.rpc_file_previewer_modal_body {
+  flex: 1;
+  background: #0f0f0f;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+}
+.rpc_file_previewer_modal_image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  user-select: none;
+  transition: transform 0.2s ease-out;
+}
+.rpc_file_previewer_modal_media {
+  max-width: 100%;
+  max-height: 100%;
+  outline: none;
+}
+.rpc_file_previewer_modal_audio_wrap {
+  background: #1f1f1f;
+  padding: 32px 48px;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  color: #ffffff;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+}
+.rpc_file_previewer_modal_iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background: #ffffff;
+}
+.rpc_file_previewer_modal_text_wrap {
+  width: 100%;
+  height: 100%;
+  background: #1e1e1e;
+  color: #d4d4d4;
+  padding: 20px;
+  box-sizing: border-box;
+  overflow: auto;
+  font-family: monospace;
+  font-size: 13px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+}
+.rpc_file_previewer_modal_fallback_card {
+  background: #ffffff;
+  padding: 40px;
+  border-radius: 12px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  max-width: 400px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+@keyframes rpcPreviewerFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* TagInput/index.less */
+.rpc_tag_input {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  min-height: 34px;
+  padding: 4px 8px;
+  background: #ffffff;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #262626;
+  cursor: text;
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  width: 100%;
+}
+.rpc_tag_input:hover:not(.rpc_tag_input_disabled) {
+  border-color: #4096ff;
+}
+.rpc_tag_input_focused {
+  border-color: #1677ff;
+  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.15);
+}
+.rpc_tag_input_disabled {
+  background: #f5f5f5;
+  cursor: not-allowed;
+  border-color: #d9d9d9;
+  color: rgba(0, 0, 0, 0.25);
+}
+.rpc_tag_input_error {
+  border-color: #ff4d4f !important;
+}
+.rpc_tag_input_error:focus-within,
+.rpc_tag_input_error_focused {
+  box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.15) !important;
+}
+.rpc_tag_input_tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  background: #f5f5f5;
+  border: 1px solid #e8e8e8;
+  border-radius: 4px;
+  font-size: 12px;
+  line-height: 1.4;
+  color: #262626;
+  user-select: none;
+  transition: all 0.15s;
+}
+.rpc_tag_input_tag:hover {
+  background: #e6f4ff;
+  border-color: #91caff;
+  color: #0958d9;
+}
+.rpc_tag_input_tag_close {
+  font-size: 10px;
+  color: #8c8c8c;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  transition: color 0.15s;
+}
+.rpc_tag_input_tag_close:hover {
+  color: #ff4d4f;
+}
+.rpc_tag_input_input {
+  flex: 1;
+  min-width: 80px;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 13px;
+  color: inherit;
+  padding: 2px 4px;
+  margin: 0;
+}
+.rpc_tag_input_input::placeholder {
+  color: #bfbfbf;
+}
+.rpc_tag_input_input:disabled {
+  cursor: not-allowed;
+}
+.rpc_tag_input_error_tip {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  color: #ff4d4f;
+  font-size: 12px;
+  line-height: 1.4;
+  white-space: nowrap;
+  animation: rpcTagFadeIn 0.15s ease-out;
+}
+@keyframes rpcTagFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-3px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* PasswordStrength/index.less */
+.rpc_password_strength {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  box-sizing: border-box;
+  font-size: 13px;
+  color: #262626;
+}
+.rpc_password_strength_bars {
+  display: flex;
+  gap: 6px;
+  width: 100%;
+  height: 5px;
+}
+.rpc_password_strength_bar_segment {
+  flex: 1;
+  height: 100%;
+  background: #f0f0f0;
+  border-radius: 3px;
+  transition: background 0.3s ease;
+}
+.rpc_password_strength_bar_segment_active_weak {
+  background: #ff4d4f;
+}
+.rpc_password_strength_bar_segment_active_medium {
+  background: #fa8c16;
+}
+.rpc_password_strength_bar_segment_active_good {
+  background: #1677ff;
+}
+.rpc_password_strength_bar_segment_active_strong {
+  background: #52c41a;
+}
+.rpc_password_strength_label {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 12px;
+  color: #8c8c8c;
+}
+.rpc_password_strength_level_text {
+  font-weight: 600;
+}
+.rpc_password_strength_rules {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 6px;
+  padding: 10px 12px;
+  background: #fafafa;
+  border: 1px solid #f0f0f0;
+  border-radius: 6px;
+  font-size: 12px;
+}
+.rpc_password_strength_rule_item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: #8c8c8c;
+  transition: color 0.2s;
+}
+.rpc_password_strength_rule_item_passed {
+  color: #52c41a;
+  font-weight: 500;
+}
+
+/* JsonEditor/index.less */
+.rpc_json_editor {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  background: #1e1e1e;
+  color: #d4d4d4;
+  border-radius: 8px;
+  border: 1px solid #333333;
+  font-family:
+    "Fira Code",
+    Consolas,
+    Monaco,
+    "Courier New",
+    monospace;
+  font-size: 13px;
+  line-height: 1.6;
+  overflow: hidden;
+}
+.rpc_json_editor_toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 14px;
+  background: #252526;
+  border-bottom: 1px solid #333333;
+  user-select: none;
+}
+.rpc_json_editor_title {
+  font-size: 12px;
+  color: #9cdcfe;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.rpc_json_editor_actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.rpc_json_editor_btn {
+  padding: 3px 10px;
+  border-radius: 4px;
+  background: #333333;
+  border: 1px solid #444444;
+  color: #cccccc;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.rpc_json_editor_btn:hover {
+  background: #444444;
+  color: #ffffff;
+  border-color: #1677ff;
+}
+.rpc_json_editor_body {
+  position: relative;
+  display: flex;
+  flex: 1;
+  min-height: 180px;
+  overflow: hidden;
+}
+.rpc_json_editor_line_numbers {
+  padding: 12px 10px;
+  background: #1e1e1e;
+  color: #858585;
+  text-align: right;
+  user-select: none;
+  border-right: 1px solid #2d2d2d;
+  font-size: 12px;
+  min-width: 32px;
+  box-sizing: border-box;
+}
+.rpc_json_editor_textarea {
+  flex: 1;
+  padding: 12px 14px;
+  background: transparent;
+  color: #d4d4d4;
+  border: none;
+  outline: none;
+  resize: none;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  tab-size: 2;
+  white-space: pre;
+  overflow: auto;
+  box-sizing: border-box;
+}
+.rpc_json_editor_textarea::selection {
+  background: #264f78;
+}
+.rpc_json_editor_status_bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 14px;
+  background: #007acc;
+  color: #ffffff;
+  font-size: 11px;
+  line-height: 1.4;
+}
+.rpc_json_editor_status_bar_error {
+  background: #d32f2f;
+}
+
+/* InfiniteScrollList/index.less */
+.rpc_infinite_scroll_list {
+  position: relative;
+  box-sizing: border-box;
+}
+.rpc_infinite_scroll_list_container {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.rpc_infinite_scroll_list_footer {
+  padding: 16px 0;
+  text-align: center;
+  color: #8c8c8c;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+.rpc_infinite_scroll_list_end {
+  color: #bfbfbf;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+}
+.rpc_infinite_scroll_list_end::before,
+.rpc_infinite_scroll_list_end::after {
+  content: "";
+  width: 48px;
+  height: 1px;
+  background: #f0f0f0;
+}
+
+/* Marquee/index.less */
+.rpc_marquee {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  user-select: none;
+  width: 100%;
+  box-sizing: border-box;
+}
+.rpc_marquee_container {
+  display: flex;
+  flex-direction: row;
+  width: max-content;
+  will-change: transform;
+}
+.rpc_marquee_vertical {
+  flex-direction: column;
+  height: 100%;
+}
+.rpc_marquee_vertical .rpc_marquee_container {
+  flex-direction: column;
+  height: max-content;
+  width: 100%;
+}
+.rpc_marquee_content {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-around;
+  gap: var(--rpc-marquee-gap, 24px);
+  min-width: 100%;
+}
+.rpc_marquee_vertical .rpc_marquee_content {
+  flex-direction: column;
+  min-height: 100%;
+  min-width: unset;
+}
+.rpc_marquee_pause_on_hover:hover .rpc_marquee_container {
+  animation-play-state: paused !important;
+}
+.rpc_marquee_gradient::before,
+.rpc_marquee_gradient::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 48px;
+  z-index: 2;
+  pointer-events: none;
+}
+.rpc_marquee_gradient::before {
+  left: 0;
+  background:
+    linear-gradient(
+      to right,
+      var(--rpc-marquee-gradient-color, #ffffff),
+      transparent);
+}
+.rpc_marquee_gradient::after {
+  right: 0;
+  background:
+    linear-gradient(
+      to left,
+      var(--rpc-marquee-gradient-color, #ffffff),
+      transparent);
+}
+@keyframes rpcMarqueeLeft {
+  0% {
+    transform: translateX(0%);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
+}
+@keyframes rpcMarqueeRight {
+  0% {
+    transform: translateX(-50%);
+  }
+  100% {
+    transform: translateX(0%);
+  }
+}
+@keyframes rpcMarqueeUp {
+  0% {
+    transform: translateY(0%);
+  }
+  100% {
+    transform: translateY(-50%);
+  }
+}
+@keyframes rpcMarqueeDown {
+  0% {
+    transform: translateY(-50%);
+  }
+  100% {
+    transform: translateY(0%);
+  }
+}
+
+/* SpotlightCard/index.less */
+.rpc_spotlight_card {
+  position: relative;
+  box-sizing: border-box;
+  border-radius: 12px;
+  background: #ffffff;
+  border: 1px solid #f0f0f0;
+  overflow: hidden;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+.rpc_spotlight_card_spotlight {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  z-index: 1;
+}
+.rpc_spotlight_card:hover .rpc_spotlight_card_spotlight {
+  opacity: 1;
+}
+.rpc_spotlight_card_content {
+  position: relative;
+  z-index: 2;
+}
+.rpc_spotlight_card_dark {
+  background: #18181b;
+  border-color: #27272a;
+  color: #ffffff;
+}
+
+/* SensitiveMask/index.less */
+.rpc_sensitive_mask {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  box-sizing: border-box;
+  font-family: inherit;
+  font-size: 14px;
+  color: inherit;
+  vertical-align: middle;
+}
+.rpc_sensitive_mask_text {
+  font-variant-numeric: tabular-nums;
+  font-family: monospace, inherit;
+}
+.rpc_sensitive_mask_action_btn {
+  display: inline-flex;
+  align-items: center;
+  color: #8c8c8c;
+  cursor: pointer;
+  font-size: 14px;
+  transition: color 0.15s;
+}
+.rpc_sensitive_mask_action_btn:hover {
+  color: #1677ff;
+}
+
+/* DiffViewer/index.less */
+.rpc_diff_viewer {
+  position: relative;
+  box-sizing: border-box;
+  border-radius: 8px;
+  border: 1px solid #d9d9d9;
+  background: #ffffff;
+  font-family:
+    "Fira Code",
+    Consolas,
+    Monaco,
+    "Courier New",
+    monospace;
+  font-size: 12px;
+  line-height: 1.6;
+  overflow: hidden;
+}
+.rpc_diff_viewer_header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px;
+  background: #f5f5f5;
+  border-bottom: 1px solid #e8e8e8;
+  font-family: sans-serif;
+}
+.rpc_diff_viewer_title {
+  font-weight: 600;
+  color: #1f1f1f;
+  font-size: 13px;
+}
+.rpc_diff_viewer_mode_toggle {
+  display: inline-flex;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  overflow: hidden;
+  background: #ffffff;
+}
+.rpc_diff_viewer_mode_btn {
+  padding: 2px 10px;
+  border: none;
+  background: transparent;
+  font-size: 12px;
+  cursor: pointer;
+  color: #595959;
+}
+.rpc_diff_viewer_mode_btn_active {
+  background: #1677ff;
+  color: #ffffff;
+}
+.rpc_diff_viewer_table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+.rpc_diff_viewer_row:hover {
+  background: rgba(0, 0, 0, 0.02);
+}
+.rpc_diff_viewer_row_added {
+  background: #e6ffed !important;
+  color: #135200;
+}
+.rpc_diff_viewer_row_removed {
+  background: #ffeef0 !important;
+  color: #a8071a;
+}
+.rpc_diff_viewer_row_empty {
+  background: #f9f9f9;
+}
+.rpc_diff_viewer_gutter {
+  width: 40px;
+  padding: 0 8px;
+  text-align: right;
+  user-select: none;
+  color: #8c8c8c;
+  border-right: 1px solid #f0f0f0;
+  font-size: 11px;
+}
+.rpc_diff_viewer_marker {
+  width: 20px;
+  text-align: center;
+  user-select: none;
+  font-weight: 600;
+}
+.rpc_diff_viewer_code {
+  padding: 0 10px;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+/* CronPicker/index.less */
+.rpc_cron_picker {
+  box-sizing: border-box;
+  background: #ffffff;
+  border: 1px solid #d9d9d9;
+  border-radius: 8px;
+  padding: 16px;
+  font-size: 14px;
+  color: #262626;
+}
+.rpc_cron_picker_tabs {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 16px;
+  border-bottom: 1px solid #f0f0f0;
+  padding-bottom: 8px;
+  flex-wrap: wrap;
+}
+.rpc_cron_picker_tab_btn {
+  padding: 4px 12px;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: #595959;
+  cursor: pointer;
+  font-size: 13px;
+  transition: all 0.15s;
+}
+.rpc_cron_picker_tab_btn:hover {
+  color: #1677ff;
+}
+.rpc_cron_picker_tab_btn_active {
+  background: #e6f4ff;
+  color: #1677ff;
+  font-weight: 600;
+  border-color: #91caff;
+}
+.rpc_cron_picker_panel {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-height: 80px;
+}
+.rpc_cron_picker_field_row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.rpc_cron_picker_select,
+.rpc_cron_picker_input {
+  padding: 5px 10px;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  font-size: 13px;
+  outline: none;
+  background: #ffffff;
+}
+.rpc_cron_picker_select:focus,
+.rpc_cron_picker_input:focus {
+  border-color: #1677ff;
+}
+.rpc_cron_picker_footer {
+  margin-top: 16px;
+  padding-top: 14px;
+  border-top: 1px dashed #e8e8e8;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.rpc_cron_picker_cron_badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.rpc_cron_picker_cron_code {
+  font-family: monospace;
+  font-size: 14px;
+  font-weight: 600;
+  color: #1677ff;
+  background: #f0f5ff;
+  padding: 2px 8px;
+  border-radius: 4px;
+  border: 1px solid #adc6ff;
+}
+.rpc_cron_picker_human_desc {
+  font-size: 13px;
+  color: #52c41a;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* GuidedTour/index.less */
+.rpc_guided_tour {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2500;
+  pointer-events: auto;
+  box-sizing: border-box;
+}
+.rpc_guided_tour_mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+}
+.rpc_guided_tour_highlight_box {
+  position: absolute;
+  border-radius: 6px;
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.65);
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  pointer-events: none;
+  border: 2px solid #1677ff;
+}
+.rpc_guided_tour_popover {
+  position: absolute;
+  width: 320px;
+  background: #ffffff;
+  border-radius: 10px;
+  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.2);
+  padding: 18px 20px;
+  z-index: 2510;
+  box-sizing: border-box;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  animation: rpcTourFadeIn 0.2s ease-out;
+  font-family: inherit;
+}
+.rpc_guided_tour_header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+.rpc_guided_tour_title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #1f1f1f;
+}
+.rpc_guided_tour_description {
+  font-size: 13px;
+  line-height: 1.6;
+  color: #595959;
+  margin-bottom: 16px;
+}
+.rpc_guided_tour_footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.rpc_guided_tour_progress {
+  font-size: 12px;
+  color: #8c8c8c;
+}
+.rpc_guided_tour_actions {
+  display: flex;
+  gap: 8px;
+}
+.rpc_guided_tour_btn {
+  padding: 4px 12px;
+  border-radius: 6px;
+  font-size: 12px;
+  cursor: pointer;
+  border: 1px solid #d9d9d9;
+  background: #ffffff;
+  color: #595959;
+  transition: all 0.15s;
+}
+.rpc_guided_tour_btn:hover {
+  border-color: #1677ff;
+  color: #1677ff;
+}
+.rpc_guided_tour_btn_primary {
+  background: #1677ff;
+  border-color: #1677ff;
+  color: #ffffff;
+}
+.rpc_guided_tour_btn_primary:hover {
+  background: #4096ff;
+  border-color: #4096ff;
+  color: #ffffff;
+}
+@keyframes rpcTourFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* NumericRangeInput/index.less */
+.rpc_numeric_range_input {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 8px;
+  box-sizing: border-box;
+  vertical-align: middle;
+}
+.rpc_numeric_range_input_container {
+  display: inline-flex;
+  align-items: center;
+  background: #ffffff;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  padding: 4px 8px;
+  transition: all 0.2s;
+  box-sizing: border-box;
+}
+.rpc_numeric_range_input_container:hover {
+  border-color: #4096ff;
+}
+.rpc_numeric_range_input_container_focused {
+  border-color: #1677ff;
+  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.15);
+}
+.rpc_numeric_range_input_container_error {
+  border-color: #ff4d4f !important;
+}
+.rpc_numeric_range_input_container_error_focused {
+  box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.15) !important;
+}
+.rpc_numeric_range_input_container_disabled {
+  background: #f5f5f5;
+  border-color: #d9d9d9;
+  cursor: not-allowed;
+}
+.rpc_numeric_range_input_container_disabled input {
+  cursor: not-allowed;
+  color: rgba(0, 0, 0, 0.25);
+}
+.rpc_numeric_range_input_input {
+  width: 72px;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 13px;
+  color: #262626;
+  text-align: center;
+  box-sizing: border-box;
+  font-family: inherit;
+}
+.rpc_numeric_range_input_input::placeholder {
+  color: #bfbfbf;
+}
+.rpc_numeric_range_input_separator {
+  margin: 0 6px;
+  color: #8c8c8c;
+  user-select: none;
+  font-size: 13px;
+}
+.rpc_numeric_range_input_prefix,
+.rpc_numeric_range_input_suffix {
+  color: #8c8c8c;
+  font-size: 13px;
+  user-select: none;
+}
+.rpc_numeric_range_input_shortcuts {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+.rpc_numeric_range_input_shortcut_item {
+  padding: 2px 8px;
+  background: #f5f5f5;
+  border-radius: 4px;
+  color: #595959;
+  font-size: 12px;
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.15s;
+}
+.rpc_numeric_range_input_shortcut_item:hover {
+  background: #e6f4ff;
+  color: #1677ff;
+}
+
+/* MetricCard/index.less */
+.rpc_metric_card {
+  box-sizing: border-box;
+  background: #ffffff;
+  border: 1px solid #f0f0f0;
+  border-radius: 10px;
+  padding: 18px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  transition: all 0.2s;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
+}
+.rpc_metric_card:hover {
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
+  border-color: #e6f4ff;
+}
+.rpc_metric_card_header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.rpc_metric_card_title {
+  font-size: 13px;
+  color: #8c8c8c;
+  font-weight: 500;
+}
+.rpc_metric_card_body {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+}
+.rpc_metric_card_value_wrap {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+}
+.rpc_metric_card_prefix,
+.rpc_metric_card_suffix {
+  font-size: 16px;
+  color: #595959;
+  font-weight: 500;
+}
+.rpc_metric_card_value {
+  font-size: 28px;
+  font-weight: 700;
+  color: #1f1f1f;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    sans-serif;
+  line-height: 1;
+}
+.rpc_metric_card_trend {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  font-size: 12px;
+  font-weight: 600;
+}
+.rpc_metric_card_trend_up {
+  color: #52c41a;
+}
+.rpc_metric_card_trend_down {
+  color: #ff4d4f;
+}
+.rpc_metric_card_sparkline {
+  width: 100%;
+  height: 36px;
+  overflow: hidden;
+}
+.rpc_metric_card_footer {
+  font-size: 12px;
+  color: #8c8c8c;
+  border-top: 1px solid #f5f5f5;
+  padding-top: 10px;
+  margin-top: 2px;
+}
+
+/* AudioPlayer/index.less */
+.rpc_audio_player {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 16px;
+  background: #ffffff;
+  border: 1px solid #e8e8e8;
+  border-radius: 24px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  box-sizing: border-box;
+  user-select: none;
+  width: 100%;
+  max-width: 480px;
+}
+.rpc_audio_player_play_btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  background: #1677ff;
+  color: #ffffff;
+  cursor: pointer;
+  font-size: 18px;
+  transition: all 0.2s;
+  flex-shrink: 0;
+}
+.rpc_audio_player_play_btn:hover {
+  background: #4096ff;
+  transform: scale(1.05);
+}
+.rpc_audio_player_info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
+}
+.rpc_audio_player_title_row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 12px;
+}
+.rpc_audio_player_title {
+  font-weight: 500;
+  color: #262626;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rpc_audio_player_time {
+  color: #8c8c8c;
+  font-family: monospace;
+  font-size: 11px;
+}
+.rpc_audio_player_progress_bar {
+  position: relative;
+  width: 100%;
+  height: 6px;
+  background: #f0f0f0;
+  border-radius: 3px;
+  cursor: pointer;
+  overflow: hidden;
+}
+.rpc_audio_player_progress_fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  background: #1677ff;
+  border-radius: 3px;
+  transition: width 0.1s linear;
+}
+.rpc_audio_player_extra {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+.rpc_audio_player_speed_btn {
+  padding: 2px 6px;
+  border-radius: 4px;
+  border: 1px solid #d9d9d9;
+  background: #fafafa;
+  font-size: 11px;
+  color: #595959;
+  cursor: pointer;
+}
+.rpc_audio_player_speed_btn:hover {
+  border-color: #1677ff;
+  color: #1677ff;
+}
+.rpc_audio_player_download_btn {
+  color: #8c8c8c;
+  cursor: pointer;
+  font-size: 15px;
+  transition: color 0.15s;
+}
+.rpc_audio_player_download_btn:hover {
+  color: #1677ff;
+}
+
+/* QrCodeCard/index.less */
+.rpc_qrcode_card {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+  background: #ffffff;
+  border: 1px solid #f0f0f0;
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
+  box-sizing: border-box;
+  user-select: none;
+}
+.rpc_qrcode_card_wrap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+  padding: 8px;
+  background: #ffffff;
+}
+.rpc_qrcode_card_canvas {
+  display: block;
+}
+.rpc_qrcode_card_logo {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  border: 2px solid #ffffff;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+  background: #ffffff;
+  object-fit: cover;
+}
+.rpc_qrcode_card_mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.94);
+  backdrop-filter: blur(3px);
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  font-size: 13px;
+  color: #595959;
+  cursor: pointer;
+  z-index: 10;
+  transition: all 0.2s ease-in-out;
+}
+.rpc_qrcode_card_mask_loading {
+  cursor: default;
+  gap: 10px;
+}
+.rpc_qrcode_card_mask_text {
+  font-size: 13px;
+  font-weight: 500;
+  color: #595959;
+  letter-spacing: 0.2px;
+}
+.rpc_qrcode_card_refresh_btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 12px;
+  border-radius: 4px;
+  background: #1677ff;
+  color: #ffffff;
+  border: none;
+  font-size: 12px;
+  cursor: pointer;
+  margin-top: 4px;
+}
+.rpc_qrcode_card_info {
+  margin-top: 14px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.rpc_qrcode_card_title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1f1f1f;
+}
+.rpc_qrcode_card_description {
+  font-size: 12px;
+  color: #8c8c8c;
+}
+.rpc_qrcode_card_download {
+  margin-top: 10px;
+  color: #1677ff;
+  font-size: 12px;
+  cursor: pointer;
+  text-decoration: underline;
+}
+.rpc_qrcode_card_download:hover {
+  color: #4096ff;
+}
+
+/* ActivityLog/index.less */
+.rpc_activity_log {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  box-sizing: border-box;
+}
+.rpc_activity_log_item {
+  display: flex;
+  gap: 14px;
+  position: relative;
+  padding-bottom: 20px;
+}
+.rpc_activity_log_item:last-child {
+  padding-bottom: 0;
+}
+.rpc_activity_log_item:last-child .rpc_activity_log_line {
+  display: none;
+}
+.rpc_activity_log_avatar_col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}
+.rpc_activity_log_avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: #e6f4ff;
+  color: #1677ff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-weight: 600;
+  flex-shrink: 0;
+  z-index: 2;
+  overflow: hidden;
+}
+.rpc_activity_log_avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.rpc_activity_log_line {
+  position: absolute;
+  top: 32px;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 2px;
+  background: #f0f0f0;
+}
+.rpc_activity_log_content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+.rpc_activity_log_header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  font-size: 13px;
+}
+.rpc_activity_log_operator_row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+.rpc_activity_log_operator {
+  font-weight: 600;
+  color: #1f1f1f;
+}
+.rpc_activity_log_role {
+  font-size: 11px;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: #f5f5f5;
+  color: #8c8c8c;
+}
+.rpc_activity_log_action {
+  color: #595959;
+}
+.rpc_activity_log_target {
+  color: #1677ff;
+  font-weight: 500;
+}
+.rpc_activity_log_time {
+  font-size: 12px;
+  color: #bfbfbf;
+  flex-shrink: 0;
+}
+.rpc_activity_log_detail {
+  background: #fafafa;
+  border: 1px solid #f0f0f0;
+  border-radius: 6px;
+  padding: 8px 12px;
+  font-size: 12px;
+  color: #595959;
+  line-height: 1.6;
+}
+.rpc_activity_log_toggle_btn {
+  color: #1677ff;
+  font-size: 12px;
+  cursor: pointer;
+  align-self: flex-start;
+  user-select: none;
+}
+.rpc_activity_log_toggle_btn:hover {
+  color: #4096ff;
+}
+
+/* DragSortList/index.less */
+.rpc_drag_sort_list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  box-sizing: border-box;
+  user-select: none;
+}
+.rpc_drag_sort_list_item {
+  display: flex;
+  align-items: center;
+  padding: 10px 14px;
+  background: #ffffff;
+  border: 1px solid #e8e8e8;
+  border-radius: 6px;
+  cursor: grab;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s,
+    border-color 0.2s;
+  box-sizing: border-box;
+}
+.rpc_drag_sort_list_item:hover {
+  border-color: #91caff;
+}
+.rpc_drag_sort_list_item:active {
+  cursor: grabbing;
+}
+.rpc_drag_sort_list_item_dragging {
+  opacity: 0.4;
+  border: 1px dashed #1677ff !important;
+  background: #e6f4ff !important;
+}
+.rpc_drag_sort_list_item_over {
+  border-top: 2px solid #1677ff;
+}
+.rpc_drag_sort_list_handle {
+  margin-right: 12px;
+  color: #bfbfbf;
+  font-size: 16px;
+  cursor: grab;
+  user-select: none;
+}
+
+/* TiltCard/index.less */
+.rpc_tilt_card {
+  position: relative;
+  box-sizing: border-box;
+  border-radius: 12px;
+  background: #ffffff;
+  border: 1px solid #f0f0f0;
+  transform-style: preserve-3d;
+  will-change: transform;
+  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
+  overflow: hidden;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
+}
+.rpc_tilt_card:hover {
+  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
+}
+.rpc_tilt_card_content {
+  position: relative;
+  z-index: 2;
+  transform: translateZ(20px);
+}
+.rpc_tilt_card_glare {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  z-index: 3;
+  border-radius: inherit;
+}
+
+/* VirtualList/index.less */
+.rpc_virtual_list {
+  position: relative;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  box-sizing: border-box;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+  background: #ffffff;
+}
+.rpc_virtual_list_content {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+.rpc_virtual_list_item {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #f9f9f9;
+  padding: 0 16px;
+}
+.rpc_virtual_list_item:hover {
+  background: #fafafa;
+}
+
+/* Watermark/index.less */
+.rpc_watermark_wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 100px;
+  box-sizing: border-box;
+}
+.rpc_watermark_wrapper .rpc_watermark_layer {
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  pointer-events: none !important;
+  z-index: 9999 !important;
+  background-repeat: repeat !important;
+  display: block !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+}
+
+/* VideoPlayer/index.less */
+.rpc_video_player {
+  position: relative;
+  background: #000000;
+  border-radius: 10px;
+  overflow: hidden;
+  user-select: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+.rpc_video_player_video {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.rpc_video_player_big_play_btn {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.6);
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28px;
+  cursor: pointer;
+  backdrop-filter: blur(4px);
+  transition: all 0.2s;
+  z-index: 5;
+}
+.rpc_video_player_big_play_btn:hover {
+  background: #1677ff;
+  transform: translate(-50%, -50%) scale(1.1);
+}
+.rpc_video_player_controls {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 8px 16px;
+  background:
+    linear-gradient(
+      to top,
+      rgba(0, 0, 0, 0.8) 0%,
+      transparent 100%);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  color: #ffffff;
+  z-index: 10;
+  transition: opacity 0.3s ease;
+}
+.rpc_video_player_controls_hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+.rpc_video_player_progress_wrap {
+  width: 100%;
+  height: 6px;
+  background: rgba(255, 255, 255, 0.25);
+  border-radius: 3px;
+  cursor: pointer;
+  position: relative;
+  transition: height 0.15s;
+}
+.rpc_video_player_progress_wrap:hover {
+  height: 8px;
+}
+.rpc_video_player_progress_fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  background: #1677ff;
+  border-radius: 3px;
+}
+.rpc_video_player_bar_row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 13px;
+}
+.rpc_video_player_left_btns,
+.rpc_video_player_right_btns {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.rpc_video_player_btn {
+  background: transparent;
+  border: none;
+  color: #ffffff;
+  font-size: 16px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 4px;
+  opacity: 0.85;
+  transition: opacity 0.15s;
+}
+.rpc_video_player_btn:hover {
+  opacity: 1;
+}
+.rpc_video_player_time {
+  font-size: 12px;
+  font-family: monospace;
+  opacity: 0.9;
+}
+.rpc_video_player_speed_btn {
+  font-size: 12px;
+  padding: 1px 6px;
+  border: 1px solid rgba(255, 255, 255, 0.4);
+  border-radius: 4px;
+}
+
+/* PdfViewer/index.less */
+.rpc_pdf_viewer {
+  display: flex;
+  flex-direction: column;
+  background: #525659;
+  border-radius: 8px;
+  overflow: hidden;
+  box-sizing: border-box;
+  border: 1px solid #333333;
+}
+.rpc_pdf_viewer_toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px;
+  background: #323639;
+  color: #f1f1f1;
+  font-size: 13px;
+  user-select: none;
+}
+.rpc_pdf_viewer_title {
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rpc_pdf_viewer_actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.rpc_pdf_viewer_btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  border-radius: 4px;
+  border: 1px solid #4a4d50;
+  background: #202124;
+  color: #e8eaed;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.rpc_pdf_viewer_btn:hover {
+  background: #4a4d50;
+  color: #ffffff;
+}
+.rpc_pdf_viewer_body {
+  flex: 1;
+  position: relative;
+  background: #525659;
+  overflow: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.rpc_pdf_viewer_frame {
+  width: 100%;
+  height: 100%;
+  border: none;
+  display: block;
+  transition: transform 0.2s ease;
+}
+
+/* BadgeRibbon/index.less */
+.rpc_badge_ribbon_wrapper {
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+}
+.rpc_badge_ribbon_wrapper .rpc_badge_ribbon {
+  position: absolute;
+  top: 14px;
+  height: 22px;
+  line-height: 22px;
+  padding: 0 10px;
+  color: #ffffff;
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+  background: #ff4d4f;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+  z-index: 10;
+  user-select: none;
+}
+.rpc_badge_ribbon_wrapper .rpc_badge_ribbon_end {
+  right: -8px;
+  border-radius: 2px 0 0 2px;
+}
+.rpc_badge_ribbon_wrapper .rpc_badge_ribbon_end::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  right: 0;
+  border: 4px solid transparent;
+  border-top-color: rgba(0, 0, 0, 0.4);
+  border-right-color: rgba(0, 0, 0, 0.4);
+}
+.rpc_badge_ribbon_wrapper .rpc_badge_ribbon_start {
+  left: -8px;
+  border-radius: 0 2px 2px 0;
+}
+.rpc_badge_ribbon_wrapper .rpc_badge_ribbon_start::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 0;
+  border: 4px solid transparent;
+  border-top-color: rgba(0, 0, 0, 0.4);
+  border-left-color: rgba(0, 0, 0, 0.4);
+}
+
+/* ShimmerSkeleton/index.less */
+.rpc_shimmer_skeleton {
+  display: block;
+  box-sizing: border-box;
+}
+.rpc_shimmer_skeleton_bar {
+  background: #f0f0f0;
+  background:
+    linear-gradient(
+      90deg,
+      #f0f0f0 25%,
+      #e0e0e0 50%,
+      #f0f0f0 75%);
+  background-size: 200% 100%;
+  border-radius: 4px;
+  animation: rpcShimmerWave 1.6s infinite ease-in-out;
+}
+.rpc_shimmer_skeleton_avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: #f0f0f0;
+  background:
+    linear-gradient(
+      90deg,
+      #f0f0f0 25%,
+      #e0e0e0 50%,
+      #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: rpcShimmerWave 1.6s infinite ease-in-out;
+}
+.rpc_shimmer_skeleton_card {
+  padding: 16px;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.rpc_shimmer_skeleton_list_item {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 12px 0;
+  border-bottom: 1px solid #f5f5f5;
+}
+@keyframes rpcShimmerWave {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* FlipCard/index.less */
+.rpc_flip_card {
+  perspective: 1000px;
+  box-sizing: border-box;
+  display: inline-block;
+  user-select: none;
+}
+.rpc_flip_card *,
+.rpc_flip_card *::before,
+.rpc_flip_card *::after {
+  box-sizing: border-box;
+}
+.rpc_flip_card_inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+  transform-style: preserve-3d;
+}
+.rpc_flip_card_flipped_horizontal {
+  transform: rotateY(180deg);
+}
+.rpc_flip_card_flipped_vertical {
+  transform: rotateX(180deg);
+}
+.rpc_flip_card_front,
+.rpc_flip_card_back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  border-radius: 12px;
+  box-sizing: border-box;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+.rpc_flip_card_back_horizontal {
+  transform: rotateY(180deg);
+}
+.rpc_flip_card_back_vertical {
+  transform: rotateX(180deg);
+}
+
+/* KanbanBoard/index.less */
+.rpc_kanban_board {
+  display: flex;
+  gap: 16px;
+  overflow-x: auto;
+  padding-bottom: 8px;
+  box-sizing: border-box;
+  user-select: none;
+}
+.rpc_kanban_board_column {
+  flex: 1;
+  min-width: 280px;
+  max-width: 360px;
+  background: #f7f8fa;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+  box-sizing: border-box;
+  border: 1px solid #ebedf0;
+  transition: background-color 0.2s;
+}
+.rpc_kanban_board_column_dragover {
+  background: #e6f4ff;
+  border-color: #91caff;
+}
+.rpc_kanban_board_column_header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 10px;
+  margin-bottom: 8px;
+  border-bottom: 1px solid #f0f0f0;
+}
+.rpc_kanban_board_column_title_wrap {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+  font-size: 14px;
+  color: #1f1f1f;
+}
+.rpc_kanban_board_column_dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+.rpc_kanban_board_column_count {
+  font-size: 12px;
+  color: #8c8c8c;
+  background: #e8e8e8;
+  padding: 1px 6px;
+  border-radius: 10px;
+  font-weight: normal;
+}
+.rpc_kanban_board_column_body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-height: 120px;
+}
+.rpc_kanban_board_card {
+  background: #ffffff;
+  border-radius: 8px;
+  padding: 12px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+  border: 1px solid #e8e8e8;
+  cursor: grab;
+  transition: all 0.15s ease;
+}
+.rpc_kanban_board_card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  border-color: #d9d9d9;
+}
+.rpc_kanban_board_card_dragging {
+  opacity: 0.4;
+  border-style: dashed;
+}
+
+/* TreeFilterPanel/index.less */
+.rpc_tree_filter_panel {
+  background: #ffffff;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+  padding: 16px;
+  box-sizing: border-box;
+  user-select: none;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.rpc_tree_filter_panel_row {
+  display: flex;
+  align-items: flex-start;
+  font-size: 13px;
+  line-height: 1.6;
+}
+.rpc_tree_filter_panel_label {
+  width: 80px;
+  flex-shrink: 0;
+  color: #8c8c8c;
+  font-weight: 500;
+  padding-top: 2px;
+}
+.rpc_tree_filter_panel_options {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.rpc_tree_filter_panel_item {
+  padding: 2px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  color: #595959;
+  transition: all 0.15s;
+}
+.rpc_tree_filter_panel_item:hover {
+  color: #1677ff;
+}
+.rpc_tree_filter_panel_item_active {
+  background: #e6f4ff;
+  color: #1677ff;
+  font-weight: 500;
+}
+.rpc_tree_filter_panel_footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 10px;
+  border-top: 1px dashed #f0f0f0;
+  font-size: 12px;
+  color: #8c8c8c;
+}
+.rpc_tree_filter_panel_clear_btn {
+  color: #1677ff;
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: 12px;
+}
+.rpc_tree_filter_panel_clear_btn:hover {
+  text-decoration: underline;
+}
+
+/* EnvBadge/index.less */
+.rpc_env_badge {
+  position: fixed;
+  z-index: 99999;
+  user-select: none;
+  box-sizing: border-box;
+}
+.rpc_env_badge_top_right {
+  top: 18px;
+  right: 18px;
+}
+.rpc_env_badge_top_left {
+  top: 18px;
+  left: 18px;
+}
+.rpc_env_badge_bottom_right {
+  bottom: 18px;
+  right: 18px;
+}
+.rpc_env_badge_tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 12px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 700;
+  color: #ffffff;
+  cursor: pointer;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+  backdrop-filter: blur(8px);
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+.rpc_env_badge_tag:hover {
+  transform: scale(1.06);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
+}
+.rpc_env_badge_tag_dev {
+  background: #52c41a;
+}
+.rpc_env_badge_tag_test,
+.rpc_env_badge_tag_uat {
+  background: #fa8c16;
+}
+.rpc_env_badge_tag_staging {
+  background: #722ed1;
+}
+.rpc_env_badge_tag_prod {
+  background: #f5222d;
+  animation: rpcEnvProdPulse 2s infinite ease-in-out;
+}
+.rpc_env_badge_popover {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 10px;
+  width: 280px;
+  background: #ffffff;
+  border-radius: 10px;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
+  border: 1px solid #f0f0f0;
+  padding: 14px;
+  box-sizing: border-box;
+  color: #262626;
+  font-size: 13px;
+}
+.rpc_env_badge_pop_header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-weight: 600;
+  margin-bottom: 10px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #f0f0f0;
+}
+.rpc_env_badge_pop_row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 6px;
+  font-size: 12px;
+}
+.rpc_env_badge_pop_row span:first-child {
+  color: #8c8c8c;
+}
+.rpc_env_badge_pop_row span:last-child {
+  font-family: monospace;
+  color: #1f1f1f;
+  font-weight: 500;
+}
+.rpc_env_badge_switch_wrap {
+  margin-top: 10px;
+  padding-top: 8px;
+  border-top: 1px dashed #f0f0f0;
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+.rpc_env_badge_switch_btn {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  border: 1px solid #d9d9d9;
+  background: #f5f5f5;
+  color: #595959;
+  cursor: pointer;
+  text-decoration: none;
+  transition: all 0.15s;
+}
+.rpc_env_badge_switch_btn:hover {
+  border-color: #1677ff;
+  color: #1677ff;
+  background: #e6f4ff;
+}
+@keyframes rpcEnvProdPulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.85;
+  }
+}
+
+/* StatusTimeline/index.less */
+.rpc_status_timeline {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  user-select: none;
+}
+.rpc_status_timeline_item {
+  display: flex;
+  gap: 14px;
+  position: relative;
+  padding-bottom: 24px;
+}
+.rpc_status_timeline_item:last-child {
+  padding-bottom: 0;
+}
+.rpc_status_timeline_item:last-child .rpc_status_timeline_line {
+  display: none;
+}
+.rpc_status_timeline_axis {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 24px;
+  flex-shrink: 0;
+}
+.rpc_status_timeline_dot {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 700;
+  color: #ffffff;
+  z-index: 2;
+}
+.rpc_status_timeline_dot_finish {
+  background: #52c41a;
+}
+.rpc_status_timeline_dot_process {
+  background: #1677ff;
+  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.2);
+  animation: rpcTimelinePulse 1.8s infinite;
+}
+.rpc_status_timeline_dot_error {
+  background: #ff4d4f;
+}
+.rpc_status_timeline_dot_wait {
+  background: #d9d9d9;
+  color: #8c8c8c;
+}
+.rpc_status_timeline_line {
+  width: 2px;
+  flex: 1;
+  background: #e8e8e8;
+  margin-top: 4px;
+  margin-bottom: -4px;
+}
+.rpc_status_timeline_content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 13px;
+}
+.rpc_status_timeline_header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.rpc_status_timeline_title {
+  font-weight: 600;
+  color: #1f1f1f;
+}
+.rpc_status_timeline_time {
+  font-size: 12px;
+  color: #8c8c8c;
+}
+.rpc_status_timeline_operator {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: #595959;
+}
+.rpc_status_timeline_duration {
+  display: inline-block;
+  font-size: 11px;
+  padding: 1px 6px;
+  background: #f5f5f5;
+  color: #8c8c8c;
+  border-radius: 4px;
+  margin-top: 2px;
+}
+.rpc_status_timeline_desc {
+  color: #595959;
+  line-height: 1.5;
+  font-size: 12px;
+  margin-top: 4px;
+}
+@keyframes rpcTimelinePulse {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.15);
+  }
+}
+
+/* GradientText/index.less */
+.rpc_gradient_text {
+  display: inline-block;
+  font-weight: 700;
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  background-size: 200% auto;
+}
+.rpc_gradient_text_animate {
+  animation: rpcGradientTextFlow 4s linear infinite;
+}
+@keyframes rpcGradientTextFlow {
+  0% {
+    background-position: 0% center;
+  }
+  100% {
+    background-position: 200% center;
+  }
+}
+
+/* KeyValEditor/index.less */
+.rpc_key_val_editor {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  box-sizing: border-box;
+  user-select: none;
+}
+.rpc_key_val_editor_row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.rpc_key_val_editor_checkbox {
+  cursor: pointer;
+}
+.rpc_key_val_editor_input {
+  flex: 1;
+  padding: 6px 10px;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  font-size: 13px;
+  color: #262626;
+  outline: none;
+  transition: all 0.15s;
+}
+.rpc_key_val_editor_input:focus {
+  border-color: #1677ff;
+  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.1);
+}
+.rpc_key_val_editor_input:disabled {
+  background: #f5f5f5;
+  color: #bfbfbf;
+}
+.rpc_key_val_editor_btn_icon {
+  background: none;
+  border: none;
+  color: #8c8c8c;
+  cursor: pointer;
+  font-size: 14px;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  transition: color 0.15s;
+}
+.rpc_key_val_editor_btn_icon:hover {
+  color: #ff4d4f;
+}
+.rpc_key_val_editor_footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 4px;
+}
+.rpc_key_val_editor_add_btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 12px;
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  background: #ffffff;
+  color: #595959;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.rpc_key_val_editor_add_btn:hover {
+  border-color: #1677ff;
+  color: #1677ff;
+}
+
+/* QuickDateRange/index.less */
+.rpc_quick_date_range {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  user-select: none;
+  box-sizing: border-box;
+}
+.rpc_quick_date_range_pill {
+  padding: 3px 10px;
+  border-radius: 14px;
+  background: #f5f5f5;
+  border: 1px solid #e8e8e8;
+  font-size: 12px;
+  color: #595959;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+.rpc_quick_date_range_pill:hover {
+  color: #1677ff;
+  border-color: #91caff;
+}
+.rpc_quick_date_range_pill_active {
+  background: #e6f4ff;
+  border-color: #1677ff;
+  color: #1677ff;
+  font-weight: 500;
+}
+
+/* PhotoViewer/index.less */
+.rpc_photo_viewer {
+  display: flex;
+  flex-direction: column;
+  background: #0f1117;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 14px;
+  overflow: hidden;
+  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
+  user-select: none;
+  box-sizing: border-box;
+}
+.rpc_photo_viewer_top_bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  background: rgba(255, 255, 255, 0.03);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  color: #ffffff;
+  font-size: 13px;
+}
+.rpc_photo_viewer_top_title {
+  font-weight: 500;
+  color: #e6e6e6;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rpc_photo_viewer_counter {
+  font-size: 12px;
+  color: #8c8c8c;
+  font-family: monospace;
+  background: rgba(255, 255, 255, 0.08);
+  padding: 2px 8px;
+  border-radius: 10px;
+}
+.rpc_photo_viewer_main_wrap {
+  position: relative;
+  width: 100%;
+  height: 380px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background:
+    radial-gradient(
+      circle at center,
+      #1a1d26 0%,
+      #0b0c10 100%);
+  overflow: hidden;
+}
+.rpc_photo_viewer_main_img {
+  max-width: 92%;
+  max-height: 90%;
+  object-fit: contain;
+  border-radius: 8px;
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
+  transition: opacity 0.25s ease, transform 0.25s ease;
+}
+.rpc_photo_viewer_nav_btn {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.12);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  color: #ffffff;
+  font-size: 20px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
+  z-index: 10;
+}
+.rpc_photo_viewer_nav_btn:hover {
+  background: rgba(255, 255, 255, 0.25);
+  transform: translateY(-50%) scale(1.08);
+  box-shadow: 0 0 16px rgba(255, 255, 255, 0.2);
+}
+.rpc_photo_viewer_nav_btn_prev {
+  left: 16px;
+}
+.rpc_photo_viewer_nav_btn_next {
+  right: 16px;
+}
+.rpc_photo_viewer_thumbs_wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 12px 18px;
+  background: #090a0d;
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+  overflow-x: auto;
+}
+.rpc_photo_viewer_thumb {
+  width: 68px;
+  height: 44px;
+  border-radius: 6px;
+  overflow: hidden;
+  cursor: pointer;
+  opacity: 0.38;
+  border: 2px solid transparent;
+  transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
+  flex-shrink: 0;
+  background: #14161f;
+}
+.rpc_photo_viewer_thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.rpc_photo_viewer_thumb:hover {
+  opacity: 0.75;
+  transform: translateY(-2px);
+}
+.rpc_photo_viewer_thumb_active {
+  opacity: 1 !important;
+  border-color: #1677ff;
+  transform: translateY(-2px);
+  box-shadow: 0 0 12px rgba(22, 119, 255, 0.6);
+}
+
+/* TrendIndicator/index.less */
+.rpc_trend_indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 12px;
+  font-weight: 600;
+  user-select: none;
+  box-sizing: border-box;
+}
+.rpc_trend_indicator_filled {
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+.rpc_trend_indicator_outlined {
+  padding: 1px 5px;
+  border-radius: 4px;
+  border: 1px solid currentColor;
+}
+.rpc_trend_indicator_up {
+  color: #52c41a;
+}
+.rpc_trend_indicator_up.rpc_trend_indicator_filled {
+  background: rgba(82, 196, 26, 0.12);
+}
+.rpc_trend_indicator_down {
+  color: #ff4d4f;
+}
+.rpc_trend_indicator_down.rpc_trend_indicator_filled {
+  background: rgba(255, 77, 79, 0.12);
+}
+.rpc_trend_indicator_flat {
+  color: #8c8c8c;
+}
+.rpc_trend_indicator_flat.rpc_trend_indicator_filled {
+  background: rgba(0, 0, 0, 0.05);
+}
+.rpc_trend_indicator_arrow {
+  font-size: 11px;
+  line-height: 1;
+}
+
+/* SegmentedProgress/index.less */
+.rpc_seg_progress {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  box-sizing: border-box;
+  user-select: none;
+}
+.rpc_seg_progress_bar {
+  width: 100%;
+  border-radius: 6px;
+  background: #f0f0f0;
+  overflow: hidden;
+  display: flex;
+}
+.rpc_seg_progress_segment {
+  height: 100%;
+  transition: width 0.3s ease;
+  cursor: pointer;
+}
+.rpc_seg_progress_segment:hover {
+  filter: brightness(1.1);
+}
+.rpc_seg_progress_legend {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 16px;
+  font-size: 12px;
+  color: #595959;
+}
+.rpc_seg_progress_legend_item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.rpc_seg_progress_dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+/* HoverCard/index.less */
+.rpc_hover_card {
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+}
+.rpc_hover_card_popover {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 8px;
+  width: 280px;
+  background: #ffffff;
+  border-radius: 10px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
+  border: 1px solid #f0f0f0;
+  padding: 14px;
+  z-index: 1000;
+  animation: rpcHoverCardFade 0.18s cubic-bezier(0.25, 1, 0.5, 1);
+}
+@keyframes rpcHoverCardFade {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* TreeTransfer/index.less */
+.rpc_tree_transfer {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  box-sizing: border-box;
+  user-select: none;
+}
+.rpc_tree_transfer_panel {
+  width: 240px;
+  height: 300px;
+  border: 1px solid #d9d9d9;
+  border-radius: 8px;
+  background: #ffffff;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.rpc_tree_transfer_header {
+  padding: 8px 12px;
+  border-bottom: 1px solid #f0f0f0;
+  font-size: 13px;
+  font-weight: 600;
+  color: #262626;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #fafafa;
+}
+.rpc_tree_transfer_body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 13px;
+}
+.rpc_tree_transfer_tree_item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.rpc_tree_transfer_tree_child {
+  padding-left: 18px;
+}
+.rpc_tree_transfer_target_item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 6px;
+  border-radius: 4px;
+}
+.rpc_tree_transfer_target_item:hover {
+  background: #fafafa;
+}
+.rpc_tree_transfer_del_btn {
+  background: none;
+  border: none;
+  color: #8c8c8c;
+  cursor: pointer;
+  font-size: 12px;
+}
+.rpc_tree_transfer_del_btn:hover {
+  color: #ff4d4f;
+}
+
+/* NumberStepper/index.less */
+.rpc_num_stepper {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  background: #ffffff;
+  overflow: hidden;
+  user-select: none;
+  box-sizing: border-box;
+}
+.rpc_num_stepper_btn {
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: #fafafa;
+  color: #595959;
+  font-size: 16px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s;
+}
+.rpc_num_stepper_btn:hover:not(:disabled) {
+  background: #f0f0f0;
+  color: #1677ff;
+}
+.rpc_num_stepper_btn:disabled {
+  color: #bfbfbf;
+  cursor: not-allowed;
+}
+.rpc_num_stepper_input {
+  width: 48px;
+  height: 32px;
+  border: none;
+  border-left: 1px solid #f0f0f0;
+  border-right: 1px solid #f0f0f0;
+  text-align: center;
+  font-size: 13px;
+  font-weight: 600;
+  color: #262626;
+  outline: none;
+}
+
+/* JsonTree/index.less */
+.rpc_json_tree {
+  font-family: monospace;
+  font-size: 13px;
+  line-height: 1.6;
+  background: #1e1e1e;
+  color: #d4d4d4;
+  padding: 12px 16px;
+  border-radius: 8px;
+  overflow-x: auto;
+  box-sizing: border-box;
+  user-select: text;
+}
+.rpc_json_tree_node {
+  margin-left: 14px;
+}
+.rpc_json_tree_toggle {
+  cursor: pointer;
+  display: inline-block;
+  width: 14px;
+  color: #858585;
+  user-select: none;
+  transition: transform 0.15s;
+}
+.rpc_json_tree_toggle_collapsed {
+  transform: rotate(-90deg);
+}
+.rpc_json_tree_key {
+  color: #9cdcfe;
+  font-weight: 500;
+}
+.rpc_json_tree_colon {
+  color: #d4d4d4;
+  margin-right: 6px;
+}
+.rpc_json_tree_string {
+  color: #ce9178;
+}
+.rpc_json_tree_number {
+  color: #b5cea8;
+}
+.rpc_json_tree_boolean {
+  color: #569cd6;
+  font-weight: 600;
+}
+.rpc_json_tree_null {
+  color: #808080;
+  font-style: italic;
+}
+.rpc_json_tree_bracket {
+  color: #d4d4d4;
+}
+.rpc_json_tree_count {
+  color: #6a9955;
+  font-size: 11px;
+  margin-left: 6px;
+}
+
+/* CodeSnippet/index.less */
+.rpc_code_snippet {
+  background: #141414;
+  border-radius: 8px;
+  border: 1px solid #303030;
+  overflow: hidden;
+  font-family: monospace;
+  font-size: 13px;
+  box-sizing: border-box;
+  user-select: text;
+}
+.rpc_code_snippet_top_bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  background: #1f1f1f;
+  border-bottom: 1px solid #303030;
+  user-select: none;
+}
+.rpc_code_snippet_dots {
+  display: flex;
+  gap: 6px;
+}
+.rpc_code_snippet_dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+.rpc_code_snippet_dot_red {
+  background: #ff5f56;
+}
+.rpc_code_snippet_dot_yellow {
+  background: #ffbd2e;
+}
+.rpc_code_snippet_dot_green {
+  background: #27c93f;
+}
+.rpc_code_snippet_lang {
+  font-size: 11px;
+  color: #8c8c8c;
+  text-transform: uppercase;
+  font-weight: 600;
+}
+.rpc_code_snippet_copy_btn {
+  background: none;
+  border: none;
+  color: #8c8c8c;
+  cursor: pointer;
+  font-size: 12px;
+  transition: color 0.15s;
+}
+.rpc_code_snippet_copy_btn:hover {
+  color: #ffffff;
+}
+.rpc_code_snippet_content {
+  padding: 12px 16px;
+  overflow-x: auto;
+  color: #e6e6e6;
+  line-height: 1.5;
+  margin: 0;
+}
+
+/* MiniSparkline/index.less */
+.rpc_mini_sparkline {
+  display: inline-block;
+  vertical-align: middle;
+  user-select: none;
+  box-sizing: border-box;
+}
+.rpc_mini_sparkline svg {
+  display: block;
+}
+
+/* FileDropZone/index.less */
+.rpc_file_dropzone {
+  border: 2px dashed #d9d9d9;
+  border-radius: 12px;
+  background: #fafafa;
+  padding: 32px 20px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  user-select: none;
+  box-sizing: border-box;
+}
+.rpc_file_dropzone:hover {
+  border-color: #1677ff;
+  background: #f0f7ff;
+}
+.rpc_file_dropzone_active {
+  border-color: #1677ff;
+  background: #e6f4ff;
+  box-shadow: 0 0 16px rgba(22, 119, 255, 0.2);
+}
+.rpc_file_dropzone_icon {
+  font-size: 36px;
+}
+.rpc_file_dropzone_title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #262626;
+}
+.rpc_file_dropzone_hint {
+  font-size: 12px;
+  color: #8c8c8c;
+}
+
+/* CascadeDrawer/index.less */
+.rpc_cascade_drawer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  box-sizing: border-box;
+}
+.rpc_cascade_drawer_mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.45);
+}
+.rpc_cascade_drawer_content {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 440px;
+  background: #ffffff;
+  box-shadow: -6px 0 24px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.rpc_cascade_drawer_header {
+  padding: 14px 20px;
+  border-bottom: 1px solid #f0f0f0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.rpc_cascade_drawer_breadcrumbs {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #262626;
+}
+.rpc_cascade_drawer_crumb_btn {
+  background: none;
+  border: none;
+  color: #1677ff;
+  cursor: pointer;
+  font-size: inherit;
+  font-weight: inherit;
+  padding: 0;
+}
+.rpc_cascade_drawer_crumb_btn:hover {
+  text-decoration: underline;
+}
+.rpc_cascade_drawer_close_btn {
+  background: none;
+  border: none;
+  color: #8c8c8c;
+  cursor: pointer;
+  font-size: 16px;
+}
+.rpc_cascade_drawer_close_btn:hover {
+  color: #262626;
+}
+.rpc_cascade_drawer_body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+}
+
+/* DualRangeSlider/index.less */
+.rpc_dual_slider {
+  position: relative;
+  width: 100%;
+  padding: 10px 0;
+  box-sizing: border-box;
+  user-select: none;
+}
+.rpc_dual_slider_track {
+  position: relative;
+  height: 6px;
+  background: #f0f0f0;
+  border-radius: 3px;
+}
+.rpc_dual_slider_highlight {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  background: #1677ff;
+  border-radius: 3px;
+}
+.rpc_dual_slider_thumb {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #ffffff;
+  border: 2px solid #1677ff;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+  cursor: grab;
+  transition: transform 0.1s;
+}
+.rpc_dual_slider_thumb:hover {
+  transform: translate(-50%, -50%) scale(1.15);
+}
+.rpc_dual_slider_thumb:active {
+  cursor: grabbing;
+}
+
+/* FilterChips/index.less */
+.rpc_filter_chips {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  box-sizing: border-box;
+  user-select: none;
+}
+.rpc_filter_chips_chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: #f5f5f5;
+  border: 1px solid #e8e8e8;
+  border-radius: 16px;
+  padding: 3px 10px;
+  font-size: 12px;
+  color: #595959;
+  transition: all 0.15s;
+}
+.rpc_filter_chips_chip:hover {
+  border-color: #d9d9d9;
+  background: #fafafa;
+}
+.rpc_filter_chips_label {
+  color: #8c8c8c;
+}
+.rpc_filter_chips_val {
+  color: #262626;
+  font-weight: 500;
+}
+.rpc_filter_chips_close {
+  cursor: pointer;
+  font-size: 11px;
+  color: #8c8c8c;
+}
+.rpc_filter_chips_close:hover {
+  color: #ff4d4f;
+}
+.rpc_filter_chips_clear_all {
+  background: none;
+  border: none;
+  color: #1677ff;
+  font-size: 12px;
+  cursor: pointer;
+  padding: 0 4px;
+}
+.rpc_filter_chips_clear_all:hover {
+  text-decoration: underline;
+}
+
+/* AnnouncementBar/index.less */
+.rpc_announcement_bar {
+  width: 100%;
+  background:
+    linear-gradient(
+      90deg,
+      #1677ff 0%,
+      #722ed1 100%);
+  color: #ffffff;
+  padding: 8px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  font-size: 13px;
+  font-weight: 500;
+  box-sizing: border-box;
+  user-select: none;
+}
+.rpc_announcement_bar_content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.rpc_announcement_bar_close {
+  position: absolute;
+  right: 16px;
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.8);
+  cursor: pointer;
+  font-size: 14px;
+}
+.rpc_announcement_bar_close:hover {
+  color: #ffffff;
+}
+
+/* JsonDiffViewer/index.less */
+.rpc_json_diff {
+  background: #1e1e1e;
+  color: #d4d4d4;
+  font-family: monospace;
+  font-size: 13px;
+  line-height: 1.6;
+  padding: 14px 18px;
+  border-radius: 8px;
+  overflow-x: auto;
+  box-sizing: border-box;
+  user-select: text;
+}
+.rpc_json_diff_row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 2px 4px;
+  border-radius: 4px;
+}
+.rpc_json_diff_row_added {
+  background: rgba(82, 196, 26, 0.15);
+  color: #73d13d;
+}
+.rpc_json_diff_row_removed {
+  background: rgba(255, 77, 79, 0.15);
+  color: #ff7875;
+  text-decoration: line-through;
+}
+.rpc_json_diff_row_modified {
+  background: rgba(250, 173, 20, 0.15);
+  color: #ffc53d;
+}
+.rpc_json_diff_row_unchanged {
+  color: #8c8c8c;
+}
+.rpc_json_diff_sign {
+  width: 14px;
+  font-weight: 700;
+}
+.rpc_json_diff_key {
+  color: #9cdcfe;
+}
+.rpc_json_diff_arrow {
+  color: #8c8c8c;
+  margin: 0 4px;
+}
 /*# sourceMappingURL=index.css.map */