/* ?? ?????????? (v2.0)
 * ?????outpost-light?Harbor??????+ ?????????? themes.ts ??
 * ?????design-system/outpost.md / MASTER.md
 */

/* JetBrains Mono ? KPI / coords / IDs (tabular-nums) */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ?? ??????????????????? ?? */
  --mg-status-success: #22c55e;
  --mg-status-success-rgb: 34, 197, 94;
  --mg-status-warning: #f59e0b;
  --mg-status-warning-rgb: 245, 158, 11;
  --mg-status-danger:  #ef4444;
  --mg-status-danger-rgb: 239, 68, 68;
  --mg-status-info:    #3b82f6;
  --mg-status-info-rgb: 59, 130, 246;
  --mg-status-idle:    #94a3b8;
  --mg-status-idle-rgb: 148, 163, 184;

  /* ?? ????????ECharts / Progress ?? ?? */
  --mg-data-c1: #3b82f6;
  --mg-data-c2: #22c55e;
  --mg-data-c3: #a855f7;
  --mg-data-c4: #f59e0b;
  --mg-data-c5: #ef4444;
  --mg-data-c6: #06b6d4;
  --mg-data-c7: #ec4899;
  --mg-data-c8: #84cc16;

  /* ?? ????Outpost?Inter ?????? */
  --mg-font-sans: 'Inter', 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mg-font-mono: 'JetBrains Mono', 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ?? ????/ ???? ????????????????????????
   * ??????????????????????????????????????????
   * ??????#7c5cff ????(periwinkle) #5e7cff ?????????????? / ????*/
  --lg-primary:           #7d4dff;
  --lg-primary-rgb:       125, 77, 255;
  --lg-primary-hover:     #9c79ff;
  --lg-primary-hover-rgb: 156, 121, 255;
  --lg-primary-deep:      #5a2fc4;
  /* accent ????????????????????????/????????????*/
  --lg-accent:            #8b5cff;
  --lg-accent-rgb:        139, 92, 255;
  --lg-deep-rgb:          14, 9, 28;
  --lg-aside-rgb:         30, 20, 58;
  --lg-card-rgb:          36, 23, 68;
  --lg-text:              #eef0ff;
  --lg-text-soft:         rgba(220, 220, 250, 0.82);
  --lg-text-dim:          rgba(196, 198, 235, 0.58);

  /* default = outpost-light pure white (themes.ts overrides at runtime) */
  --mg-primary:        #7c3aed;
  --mg-primary-rgb:    124, 58, 237;
  --mg-primary-hover:  #8b5cf6;
  --mg-primary-hover-rgb: 139, 92, 246;
  --mg-primary-active: #5b21b6;
  --mg-accent:         #a855f7;
  --mg-accent-rgb:     168, 85, 247;

  --mg-primary-light-3: #a78bfa;
  --mg-primary-light-5: #c4b5fd;
  --mg-primary-light-7: #ddd6fe;
  --mg-primary-light-8: #ede9fe;
  --mg-primary-light-9: #f5f3ff;
  --mg-primary-dark-2:  #6d28d9;

  --mg-bg-app-1:        #ffffff;
  --mg-bg-app-2:        #ffffff;
  --mg-bg-app-3:        #ffffff;
  --mg-bg-app-deep-rgb: 255, 255, 255;

  --mg-bg-aside-1:      #ffffff;
  --mg-bg-aside-2:      #fafafa;
  --mg-bg-aside-rgb:    255, 255, 255;

  --mg-bg-card-rgb:         38, 24, 78;
  --mg-bg-card-hi-rgb:      58, 38, 110;
  --mg-bg-card-darker-rgb:  20, 12, 48;
  --mg-shadow-rgb:          8, 2, 24;

  --mg-text-tint-rgb:   242, 232, 255;
  --mg-text-hi-rgb:     220, 200, 252;

  --mg-orb-a-opacity: 0.55;
  --mg-orb-b-opacity: 0.50;
  --mg-orb-c-opacity: 0.40;

  /* ?? ???????????????????????? ?? */
  --mg-glass-bg:        rgba(255, 255, 255, 0.06);
  --mg-glass-bg-hover:  rgba(255, 255, 255, 0.10);
  --mg-glass-bg-active: rgba(255, 255, 255, 0.14);
  --mg-glass-border:    rgba(255, 255, 255, 0.18);
  --mg-glass-border-hi: rgba(255, 255, 255, 0.28);
  --mg-glass-shadow:
    0 10px 28px rgba(var(--mg-shadow-rgb), 0.55),
    0 0 22px rgba(var(--mg-primary-rgb), 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 1px 0 rgba(255, 255, 255, 0.12) inset;
  --mg-glass-shadow-hi:
    0 18px 44px rgba(var(--mg-shadow-rgb), 0.70),
    0 0 36px rgba(var(--mg-primary-hover-rgb), 0.30),
    0 0 0 1px rgba(var(--mg-accent-rgb), 0.25) inset,
    0 1px 0 rgba(255, 255, 255, 0.22) inset;
  --mg-glass-blur:      blur(20px) saturate(160%);
  --mg-glass-blur-hi:   blur(30px) saturate(180%);

  --mg-radius-sm: 8px;
  --mg-radius:    14px;
  --mg-radius-lg: 20px;
  --mg-radius-xl: 24px;

  /* ?? ?? ?? */
  --mg-text-light:  #ffffff;
  --mg-text-muted:  rgba(255, 255, 255, 0.7);
  --mg-text-dim:    rgba(255, 255, 255, 0.5);
  --mg-text-faint:  rgba(255, 255, 255, 0.35);
  --mg-divider:     rgba(255, 255, 255, 0.08);

  /* ?? Element Plus ???? ?? */
  --el-color-primary:        var(--mg-primary);
  --el-color-primary-rgb:    var(--mg-primary-rgb);
  --el-color-primary-light-3: var(--mg-primary-light-3);
  --el-color-primary-light-5: var(--mg-primary-light-5);
  --el-color-primary-light-7: var(--mg-primary-light-7);
  --el-color-primary-light-8: var(--mg-primary-light-8);
  --el-color-primary-light-9: var(--mg-primary-light-9);
  --el-color-primary-dark-2:  var(--mg-primary-dark-2);

  --mg-transition: all .25s cubic-bezier(.25, .8, .25, 1);

  /* ?? ????????veil ?? ??
   * ????????/ ?? / ??????rgba(255,255,255,.0x) ?????????
   * ??????????????????fame-lavender ????????????veil
   * ????????????????????????????fame-lavender ??????
   * ??????????????????? 6 ?????????*/
  --mg-veil-1: rgba(255, 255, 255, 0.05);
  --mg-veil-2: rgba(255, 255, 255, 0.08);
  --mg-veil-3: rgba(255, 255, 255, 0.12);
  --mg-veil-border: rgba(255, 255, 255, 0.12);
  --mg-veil-border-hi: rgba(255, 255, 255, 0.20);

  /* ?? ???? chrome????Harbor ????/???? themes.ts ???? ??
   * ???? themes.ts applyThemeVars ???????????*/
  --me-chrome-1: #ffffff;
  --me-chrome-2: #ffffff;
  --me-chrome-rgb: 255, 255, 255;
  --me-border: rgba(15, 23, 42, 0.10);
  --me-text: rgba(15, 23, 42, 0.92);
  --me-text-muted: rgba(15, 23, 42, 0.52);
  --me-surface: rgba(15, 23, 42, 0.03);
  --me-hover: rgba(30, 58, 95, 0.06);
  --me-active-glow: rgba(30, 58, 95, 0.14);
  --me-card-bg: #ffffff;
  --me-card-border: #e5e7eb;
  --me-inset: #f8fafc;

  /* ?? ?????????????
   * ???????????? + ???fame-lavender??????+ ??????????*/
  --mg-action-bg: rgba(76, 29, 149, 0.45);
  --mg-action-bg-hover: rgba(109, 40, 217, 0.75);
  --mg-action-border: rgba(167, 139, 250, 0.55);
  --mg-action-border-hi: rgba(196, 181, 253, 0.9);
}

html {
  --el-color-primary:        var(--mg-primary) !important;
  --el-color-primary-rgb:    var(--mg-primary-rgb) !important;
  --el-color-primary-light-3: var(--mg-primary-light-3) !important;
  --el-color-primary-light-5: var(--mg-primary-light-5) !important;
  --el-color-primary-light-7: var(--mg-primary-light-7) !important;
  --el-color-primary-light-8: var(--mg-primary-light-8) !important;
  --el-color-primary-light-9: var(--mg-primary-light-9) !important;
  --el-color-primary-dark-2:  var(--mg-primary-dark-2) !important;
}

body {
  margin: 0;
  font-family: var(--mg-font-sans);
  color: var(--mg-text-light);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(var(--mg-primary-hover-rgb), 0.45) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(var(--mg-bg-card-rgb), 0.65) 0%, transparent 55%),
    linear-gradient(135deg, var(--mg-bg-app-1) 0%, var(--mg-bg-app-2) 50%, var(--mg-bg-app-3) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  transition: background-color .35s ease;
}

#app { min-height: 100vh; position: relative; }

/* ?? ????????(????????????? ?? */
#app::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(var(--mg-accent-rgb), 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--mg-accent-rgb), 0.05) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.85) 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.85) 0%, transparent 75%);
  opacity: 0.55;
}
/* ?? ???????????? ?? */
#app::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.018) 0,
    rgba(255, 255, 255, 0.018) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}

/* ????router ???????? */
.app-shell, .login-page { position: relative; z-index: 1; }

/* ?? ?????????? */
.mg-glass {
  background: var(--mg-glass-bg);
  border: 1px solid var(--mg-glass-border);
  border-radius: var(--mg-radius);
  backdrop-filter: var(--mg-glass-blur);
  -webkit-backdrop-filter: var(--mg-glass-blur);
  box-shadow: var(--mg-glass-shadow);
  transition: var(--mg-transition);
}
.mg-glass:hover {
  background: var(--mg-glass-bg-hover);
  border-color: var(--mg-glass-border-hi);
  box-shadow: var(--mg-glass-shadow-hi);
  transform: translateY(-2px);
}
.mg-glass-lg {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--mg-radius-lg);
  backdrop-filter: var(--mg-glass-blur-hi);
  -webkit-backdrop-filter: var(--mg-glass-blur-hi);
  box-shadow:
    0 30px 80px rgba(var(--mg-shadow-rgb), 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.25) inset,
    0 1px 0 rgba(255, 255, 255, 0.4) inset;
}

/* ?? ????? ?? */
.el-button--primary {
  --el-button-bg-color: var(--mg-primary);
  --el-button-border-color: var(--mg-primary);
  --el-button-hover-bg-color: var(--mg-primary-hover);
  --el-button-hover-border-color: var(--mg-primary-hover);
  --el-button-active-bg-color: var(--mg-primary-active);
  --el-button-active-border-color: var(--mg-primary-active);
}

/* ?? ?????? */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb {
  background: rgba(var(--mg-accent-rgb), 0.4);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(var(--mg-accent-rgb), 0.7); }
::-webkit-scrollbar-track { background: transparent; }

::selection { background: rgba(var(--mg-accent-rgb), 0.4); color: #fff; }

a { color: var(--mg-accent); }
a:hover { color: rgba(var(--mg-accent-rgb), 0.85); }

/* ?? ??????Element Plus ????/??????????N+2 UI ?????
 * ??????industrial-purple (???? ????`.mg-content` ??`--el-text-color-primary`
 * ???? (line ~290) ????Table ????????????element-plus ??????
 * `var(--el-fill-color-light)` (#f5f7fa)?`var(--el-bg-color)` (#fff) ????????
 * ?????? FieldMemberEditor `.fme-desc`?ProjectPropertiesView .pp-desc??
 * `background: var(--el-fill-color-light)` + `color: var(--el-text-color-primary)` ????
 * ???? + ????????
 *
 * ???? element-plus ??/???????? `--mg-bg-card-rgb` ??????
 *   - industrial-purple ??--mg-bg-card-rgb = "38, 24, 78"  ???? 35-55% ???????? OK??
 *   - fame-lavender    ??--mg-bg-card-rgb = "255, 255, 255" ???? 35-55% ???? fame-lavender
 *     ??#2d1b69 ???line ~1069 ????????
 * ????????????????????*/
.mg-content {
  --el-fill-color-blank: transparent;
  --el-fill-color-light: rgba(var(--mg-bg-card-rgb), 0.45);
  --el-fill-color-lighter: rgba(var(--mg-bg-card-rgb), 0.35);
  --el-fill-color: rgba(var(--mg-bg-card-rgb), 0.55);
  --el-fill-color-dark: rgba(var(--mg-bg-card-rgb), 0.65);
  --el-fill-color-darker: rgba(var(--mg-bg-card-rgb), 0.75);
  --el-bg-color: rgba(var(--mg-bg-card-rgb), 0.55);
  --el-bg-color-page: transparent;
  --el-bg-color-overlay: rgba(var(--mg-bg-card-rgb), 0.92);
  /* ??/???????? alpha ????????????? */
  --el-dialog-bg-color: rgb(var(--mg-bg-card-rgb));
  --el-drawer-bg-color: rgb(var(--mg-bg-card-rgb));
  --el-border-color: rgba(255, 255, 255, 0.14);
  --el-border-color-light: rgba(255, 255, 255, 0.10);
  --el-border-color-lighter: rgba(255, 255, 255, 0.08);
  --el-border-color-extra-light: rgba(255, 255, 255, 0.06);
  --el-text-color-secondary: rgba(var(--mg-text-hi-rgb), 0.7);
  --el-text-color-placeholder: rgba(255, 255, 255, 0.40);
  --el-text-color-disabled: rgba(255, 255, 255, 0.30);
}

/* el-drawer????????????????? ?
 * EP ????background-color: var(--el-drawer-bg-color)?? .el-drawer ??????
 * ????????var(--el-dialog-bg-color, var(--el-bg-color))??????0.55 ?????
 * ?????? modal-class="tm-detail-drawer-modal"?? el-drawer ??class ????
 * ??????inheritAttrs=false + Teleport ????????? theme ??????
 * ?? alpha ??rgb() ?????????*/
.mg-content .el-drawer,
.tm-detail-drawer-modal .el-drawer {
  --el-drawer-bg-color: rgb(var(--mg-bg-card-rgb)) !important;
  --el-dialog-bg-color: rgb(var(--mg-bg-card-rgb)) !important;
  background: rgb(var(--mg-bg-card-rgb)) !important;
  background-color: rgb(var(--mg-bg-card-rgb)) !important;
  opacity: 1 !important;
}
.tm-detail-drawer-modal .el-drawer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgb(var(--mg-bg-card-rgb)) !important;
  z-index: 0;
  pointer-events: none;
}
.tm-detail-drawer-modal .el-drawer > * {
  position: relative;
  z-index: 1;
}

/* FieldMemberEditor / ProjectPropertiesView ?????????????
 * ?? scoped css ??`background: var(--el-fill-color-light)` + `color: var(--el-text-color-primary)`??
 * ???? `.mg-content` ???????? --mg-bg-card-rgb??????????Vue scoped ????
 * ????????????????? `.fme-desc` ??.mg-content ???????????????*/
.mg-content .fme-desc {
  background: rgba(var(--mg-bg-card-rgb), 0.55) !important;
  color: var(--mg-text-light) !important;
  border-left-color: var(--mg-accent) !important;
}
.mg-content .fme-path { color: var(--mg-text-light) !important; }
.mg-content .fme-path-empty { color: var(--mg-text-muted) !important; }

/* ??? ?admin ?? tabs???????? N+2 ??????????????????????????????????
 * ????????SceneManagerView) ?? type="border-card" + ???? tabs ??
 * ?? .admin-tabs ????????/ ???? / ???????? tab ????????
 *
 * ????el-tabs class="admin-tabs" type="border-card"> ... </el-tabs>
 * - ??????? + ????????
 * - tab ???? + ??????
 * - tab ?????????hover ????????????+ ??????
 * ?? .mg-content ???????????????????*/
.mg-content .admin-tabs.el-tabs--border-card {
  height: 100%;
  background: rgba(var(--mg-bg-card-rgb), 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: var(--mg-radius);
  box-shadow: var(--mg-glass-shadow);
  backdrop-filter: var(--mg-glass-blur);
  -webkit-backdrop-filter: var(--mg-glass-blur);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.mg-content .admin-tabs.el-tabs--border-card > .el-tabs__header {
  background: rgba(var(--mg-bg-card-darker-rgb), 0.35) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
  margin: 0;
}
.mg-content .admin-tabs.el-tabs--border-card > .el-tabs__header .el-tabs__nav {
  border: 0 !important;
}
.mg-content .admin-tabs.el-tabs--border-card > .el-tabs__header .el-tabs__item {
  background: transparent !important;
  color: rgba(220, 200, 240, 0.75) !important;
  border: 0 !important;
  height: 42px;
  line-height: 42px;
  font-size: 13.5px;
  letter-spacing: 0.5px;
  padding: 0 18px !important;
  transition: background .2s ease, color .2s ease;
}
.mg-content .admin-tabs.el-tabs--border-card > .el-tabs__header .el-tabs__item:hover {
  background: rgba(var(--mg-accent-rgb), 0.10) !important;
  color: #fff !important;
}
.mg-content .admin-tabs.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  background: rgba(var(--mg-accent-rgb), 0.18) !important;
  color: #fff !important;
  font-weight: 600;
  box-shadow: inset 0 -2px 0 0 var(--mg-accent);
}
.mg-content .admin-tabs.el-tabs--border-card > .el-tabs__content {
  flex: 1;
  padding: 14px;
  overflow: auto;
  background: transparent !important;
}
.mg-content .admin-tabs.el-tabs--border-card .el-tab-pane {
  height: 100%;
}

/* fame-lavender ????admin-tabs ?????? + ????+ ???? */
:root[data-shell="outpost"] .mg-content .admin-tabs.el-tabs--border-card {
  background: #ffffff !important;
  border: 1px solid rgba(124, 58, 237, 0.18) !important;
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.06) !important;
}
:root[data-shell="outpost"] .mg-content .admin-tabs.el-tabs--border-card > .el-tabs__header {
  background: rgba(124, 58, 237, 0.04) !important;
  border-bottom: 1px solid rgba(124, 58, 237, 0.14) !important;
}
:root[data-shell="outpost"] .mg-content .admin-tabs.el-tabs--border-card > .el-tabs__header .el-tabs__item {
  color: #4a3d6e !important;
}
:root[data-shell="outpost"] .mg-content .admin-tabs.el-tabs--border-card > .el-tabs__header .el-tabs__item:hover {
  background: rgba(124, 58, 237, 0.08) !important;
  color: #7c3aed !important;
}
:root[data-shell="outpost"] .mg-content .admin-tabs.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  background: rgba(124, 58, 237, 0.14) !important;
  color: #7c3aed !important;
}

/* Style A ? Ops Console?underline tabs?????????? border-card ??*/
.mg-content .admin-tabs.admin-tabs--ops {
  height: 100%;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mg-content .admin-tabs.admin-tabs--ops > .el-tabs__header {
  background: transparent !important;
  border-bottom: 1px solid var(--mg-veil-border, rgba(124, 58, 237, 0.14)) !important;
  margin: 0 0 8px;
  flex: none;
}
.mg-content .admin-tabs.admin-tabs--ops > .el-tabs__header .el-tabs__nav {
  border: 0 !important;
}
.mg-content .admin-tabs.admin-tabs--ops > .el-tabs__header .el-tabs__item {
  background: transparent !important;
  border: 0 !important;
  height: 36px;
  line-height: 36px;
  font-size: 13.5px;
  letter-spacing: 0.2px;
  padding: 0 16px !important;
  color: var(--mg-text-muted, #756d85) !important;
  font-weight: 500;
  box-shadow: none !important;
}
.mg-content .admin-tabs.admin-tabs--ops > .el-tabs__header .el-tabs__item:hover {
  color: var(--mg-primary, #7c3aed) !important;
  background: transparent !important;
}
.mg-content .admin-tabs.admin-tabs--ops > .el-tabs__header .el-tabs__item.is-active {
  color: var(--mg-primary, #7c3aed) !important;
  font-weight: 700;
  background: transparent !important;
}
.mg-content .admin-tabs.admin-tabs--ops > .el-tabs__header .el-tabs__active-bar {
  background: var(--mg-primary, #7c3aed);
  height: 2px;
}
.mg-content .admin-tabs.admin-tabs--ops > .el-tabs__content {
  flex: 1;
  padding: 0;
  overflow: hidden;
  background: transparent !important;
  min-height: 0;
}
.mg-content .admin-tabs.admin-tabs--ops .el-tab-pane {
  height: 100%;
}
:root[data-shell="outpost"] .mg-content .admin-tabs.admin-tabs--ops > .el-tabs__header .el-tabs__item {
  color: #4a3d6e !important;
}
:root[data-shell="outpost"] .mg-content .admin-tabs.admin-tabs--ops > .el-tabs__header .el-tabs__item:hover,
:root[data-shell="outpost"] .mg-content .admin-tabs.admin-tabs--ops > .el-tabs__header .el-tabs__item.is-active {
  color: #7c3aed !important;
}

/* ?? ??????Element Plus ?????????? */
.mg-content .el-card {
  background: linear-gradient(135deg, rgba(var(--mg-bg-card-rgb), 0.55) 0%, rgba(var(--mg-bg-app-deep-rgb), 0.6) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--mg-radius);
  backdrop-filter: var(--mg-glass-blur);
  -webkit-backdrop-filter: var(--mg-glass-blur);
  box-shadow: var(--mg-glass-shadow);
  color: var(--mg-text-light);
  transition: var(--mg-transition);
  overflow: hidden;
}
.mg-content .el-card:hover {
  background: linear-gradient(135deg, rgba(var(--mg-bg-card-hi-rgb), 0.65) 0%, rgba(var(--mg-bg-card-darker-rgb), 0.67) 100%) !important;
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: var(--mg-glass-shadow-hi);
  transform: translateY(-2px);
}
.mg-content .el-card.no-hover:hover {
  transform: none;
}
.mg-content .el-card__header {
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--mg-text-light);
  font-weight: 600;
  padding: 14px 18px;
}
.mg-content .el-card__body {
  background: transparent !important;
  color: var(--mg-text-light);
}

/* ????card?? ConfigPageBase ????????????*/
.mg-content .el-card .el-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}
.mg-content .el-card .el-card:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  transform: none;
  box-shadow: none;
}

.mg-content h1,
.mg-content h2,
.mg-content h3 { color: var(--mg-text-light); margin-top: 0; }
.mg-content p { color: var(--mg-text-muted); }

/* el-statistic ?????? */
.mg-content .el-statistic__head { color: var(--mg-text-muted); }
.mg-content .el-statistic__number { color: var(--mg-text-light); }
.mg-content .el-statistic__content { color: var(--mg-text-light); }

/* el-tabs ?????SimpleLite ??????/??/???? */
.mg-content .el-tabs {
  --el-text-color-primary: #fff;
}
.mg-content .el-tabs__item {
  color: rgba(255, 255, 255, 0.82) !important;
}
.mg-content .el-tabs__item:hover {
  color: #fff !important;
}
.mg-content .el-tabs__item.is-active {
  color: #fff !important;
  font-weight: 600;
}
.mg-content .el-tabs__active-bar {
  background-color: var(--mg-accent) !important;
}
.mg-content .el-tabs__nav-wrap::after {
  background-color: rgba(255, 255, 255, 0.14) !important;
}

/* el-table ?????? */
.mg-content .el-table,
.mg-content .el-table tr,
.mg-content .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background: transparent !important;
}
.mg-content .el-table {
  --el-table-bg-color: transparent;
  --el-table-tr-bg-color: transparent;
  --el-table-header-bg-color: transparent;
  --el-table-row-hover-bg-color: rgba(var(--mg-accent-rgb), 0.18);
  --el-table-border-color: rgba(255, 255, 255, 0.1);
  --el-table-header-text-color: rgba(255, 255, 255, 0.7);
  --el-table-text-color: var(--mg-text-light);
  --el-fill-color-blank: transparent;
  --el-fill-color-light: rgba(255, 255, 255, 0.04);
  color: var(--mg-text-light) !important;
}
.mg-content .el-table th.el-table__cell {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}
.mg-content .el-table td.el-table__cell {
  background: transparent !important;
  color: var(--mg-text-light) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
.mg-content .el-table--striped .el-table__body tr:nth-child(2n) td.el-table__cell {
  background: rgba(255, 255, 255, 0.03) !important;
}
.mg-content .el-table tr:hover > td.el-table__cell,
.mg-content .el-table__body tr.hover-row > td.el-table__cell {
  background: rgba(var(--mg-accent-rgb), 0.18) !important;
}
.mg-content .el-table__empty-block { background: transparent; color: var(--mg-text-dim); }
.mg-content .el-table__inner-wrapper::before,
.mg-content .el-table::before { background: rgba(255, 255, 255, 0.1) !important; }

/* el-input ?????? (admin ???? */
.mg-content .el-input__wrapper,
.mg-content .el-textarea__inner {
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset !important;
}
.mg-content .el-input__wrapper.is-focus {
  box-shadow: 0 0 0 1px rgba(var(--mg-accent-rgb), 0.7) inset, 0 0 16px rgba(var(--mg-primary-hover-rgb), 0.35) !important;
}
.mg-content .el-input__inner { color: var(--mg-text-light) !important; }
.mg-content .el-input__inner::placeholder { color: var(--mg-text-faint); }

/* el-form-item label */
.mg-content .el-form-item__label { color: var(--mg-text-muted) !important; }

/* el-divider */
.mg-content .el-divider__text { background: transparent !important; color: var(--mg-text-muted); }
.mg-content .el-divider { background: var(--mg-divider); }

/* el-tag ????????????*/
.mg-content .el-tag {
  background: rgba(var(--mg-accent-rgb), 0.18);
  color: rgba(var(--mg-text-tint-rgb), 1);
  border-color: rgba(var(--mg-accent-rgb), 0.4);
}
.mg-content .el-tag--success {
  background: rgba(111, 143, 76, 0.22);
  color: #c0d99c;
  border-color: rgba(111, 143, 76, 0.5);
}
.mg-content .el-tag--warning {
  background: rgba(201, 138, 29, 0.22);
  color: #f5cf85;
  border-color: rgba(201, 138, 29, 0.5);
}
.mg-content .el-tag--danger {
  background: rgba(179, 50, 79, 0.22);
  color: #ff9bb8;
  border-color: rgba(179, 50, 79, 0.5);
}
.mg-content .el-tag--info {
  background: rgba(122, 107, 135, 0.22);
  color: #c9bdd6;
  border-color: rgba(122, 107, 135, 0.5);
}

/* el-descriptions ??????*/
.mg-content .el-descriptions {
  --el-text-color-primary: #fff;
  --el-text-color-regular: var(--mg-text-muted);
  --el-border-color-lighter: rgba(255, 255, 255, 0.12);
  --el-fill-color-blank: transparent;
  color: var(--mg-text-light);
}
.mg-content .el-descriptions__body,
.mg-content .el-descriptions__table {
  background: transparent !important;
}
.mg-content .el-descriptions__label,
.mg-content .el-descriptions__cell.is-bordered-label {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--mg-text-muted) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
.mg-content .el-descriptions__content,
.mg-content .el-descriptions__cell.is-bordered-content {
  background: transparent !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
.mg-content .el-descriptions__title { color: #fff; }

/* el-progress ????*/
.mg-content .el-progress-bar__outer {
  background: rgba(255, 255, 255, 0.1);
}
.mg-content .el-progress-bar__inner {
  background: linear-gradient(90deg, var(--mg-primary-hover) 0%, var(--mg-accent) 100%);
}

/* el-alert ????*/
.mg-content .el-alert {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--mg-text-light);
}
.mg-content .el-alert__title,
.mg-content .el-alert__description { color: var(--mg-text-light) !important; }

/* el-collapse ????*/
.mg-content .el-collapse {
  border-color: rgba(255, 255, 255, 0.1);
  --el-collapse-header-bg-color: transparent;
  --el-collapse-content-bg-color: transparent;
  --el-collapse-header-text-color: #fff;
  --el-collapse-content-text-color: var(--mg-text-light);
}
.mg-content .el-collapse-item__header,
.mg-content .el-collapse-item__wrap {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--mg-text-light) !important;
}

/* el-radio / el-checkbox ?????? */
.mg-content .el-radio__label,
.mg-content .el-checkbox__label { color: var(--mg-text-light) !important; }
.mg-content .el-radio__inner,
.mg-content .el-checkbox__inner {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.32);
}

/* el-radio-button */
.mg-content .el-radio-button__inner {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: var(--mg-text-light) !important;
}
.mg-content .el-radio-button.is-active .el-radio-button__inner {
  background: var(--mg-primary) !important;
  border-color: var(--mg-primary) !important;
  color: #fff !important;
}

/* el-select ????*/
.mg-content .el-select .el-input__wrapper {
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset !important;
}

/* el-input-number ????*/
.mg-content .el-input-number .el-input-number__decrease,
.mg-content .el-input-number .el-input-number__increase {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--mg-text-muted) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* el-switch ????*/
.mg-content .el-switch.is-checked .el-switch__core {
  background: var(--mg-primary);
  border-color: var(--mg-primary);
}

/* el-statistic ???? */
.mg-content .el-statistic .el-statistic__head {
  color: var(--mg-text-muted);
  font-size: 13px;
}
.mg-content .el-statistic .el-statistic__number,
.mg-content .el-statistic .el-statistic__content {
  color: #fff;
  font-weight: 600;
  text-shadow: 0 2px 8px rgba(var(--mg-primary-hover-rgb), 0.4);
}

/* KPI ??????el-row class="kpi-row"> ?? el-statistic ??????*/
.mg-content .kpi-row .el-statistic,
.mg-content .kpi-card {
  background: linear-gradient(135deg, rgba(var(--mg-bg-card-rgb), 0.55) 0%, rgba(var(--mg-bg-app-deep-rgb), 0.6) 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--mg-radius);
  padding: 16px 18px;
  backdrop-filter: var(--mg-glass-blur);
  -webkit-backdrop-filter: var(--mg-glass-blur);
  box-shadow: var(--mg-glass-shadow);
  transition: var(--mg-transition);
}
.mg-content .kpi-row .el-statistic:hover,
.mg-content .kpi-card:hover {
  background: linear-gradient(135deg, rgba(var(--mg-bg-card-hi-rgb), 0.65) 0%, rgba(var(--mg-bg-card-darker-rgb), 0.67) 100%);
  transform: translateY(-2px);
  box-shadow: var(--mg-glass-shadow-hi);
  border-color: rgba(255, 255, 255, 0.22);
}

/* el-pagination ????*/
.mg-content .el-pagination {
  --el-pagination-bg-color: transparent;
  --el-pagination-button-bg-color: rgba(255, 255, 255, 0.06);
  --el-pagination-button-color: var(--mg-text-light);
  --el-pagination-hover-color: var(--mg-accent);
  color: var(--mg-text-muted);
}

/* el-dropdown-menu ?? */
.el-dropdown-menu {
  background: rgba(var(--mg-bg-aside-rgb), 0.92) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.el-dropdown-menu__item {
  color: rgba(255, 255, 255, 0.8) !important;
}
.el-dropdown-menu__item:hover {
  background: rgba(var(--mg-accent-rgb), 0.18) !important;
  color: #fff !important;
}

/* el-message / ???????? Element Plus ?????????????? */

/* el-button default ???????? */
.mg-content .el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--text) {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--mg-text-light);
}
.mg-content .el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--text):hover {
  background: rgba(var(--mg-accent-rgb), 0.18);
  border-color: rgba(var(--mg-accent-rgb), 0.5);
  color: #fff;
}

/* h2 ??????????????????*/
.el-dialog h2 { color: var(--mg-primary-active); }
.el-dialog { border-radius: var(--mg-radius); }

/* ??????????????? ??????????+ ???? + ???? ??????????????? */
:root[data-theme="industrial-purple"] {
  --mg-orb-a-opacity: 0.55;
  --mg-orb-b-opacity: 0.50;
  --mg-orb-c-opacity: 0.42;
  --mg-glass-bg:        rgba(28, 14, 62, 0.62);
  --mg-glass-bg-hover:  rgba(44, 22, 88, 0.72);
  --mg-glass-border:    rgba(var(--mg-accent-rgb), 0.18);
  --mg-glass-border-hi: rgba(var(--mg-accent-rgb), 0.55);
  --mg-glass-shadow:
    0 12px 32px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(var(--mg-primary-rgb), 0.25),
    0 0 0 1px rgba(var(--mg-accent-rgb), 0.10) inset,
    0 1px 0 rgba(255, 255, 255, 0.14) inset;
  --mg-glass-shadow-hi:
    0 20px 50px rgba(0, 0, 0, 0.68),
    0 0 42px rgba(var(--mg-primary-hover-rgb), 0.42),
    0 0 0 1px rgba(var(--mg-accent-rgb), 0.32) inset,
    0 1px 0 rgba(255, 255, 255, 0.24) inset;
  --mg-text-muted:      rgba(255, 255, 255, 0.86);
  --mg-text-dim:        rgba(220, 200, 252, 0.70);
}

:root[data-theme="industrial-purple"] body {
  background:
    radial-gradient(circle at 8% 8%, rgba(var(--mg-primary-hover-rgb), 0.55) 0%, transparent 48%),
    radial-gradient(ellipse at 92% 18%, rgba(var(--mg-accent-rgb), 0.28) 0%, transparent 42%),
    radial-gradient(circle at 78% 88%, rgba(var(--mg-primary-rgb), 0.55) 0%, transparent 46%),
    radial-gradient(ellipse at 18% 92%, rgba(99, 102, 241, 0.30) 0%, transparent 48%),
    linear-gradient(135deg, var(--mg-bg-app-1) 0%, var(--mg-bg-app-2) 48%, var(--mg-bg-app-3) 100%);
}

/* ??????:????,?????? */
:root[data-theme="industrial-purple"] #app::before {
  background-image:
    linear-gradient(rgba(var(--mg-accent-rgb), 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--mg-accent-rgb), 0.07) 1px, transparent 1px);
  opacity: 0.85;
}
:root[data-theme="industrial-purple"] #app::after {
  background-image: repeating-linear-gradient(
    0deg,
    rgba(var(--mg-accent-rgb), 0.03) 0,
    rgba(var(--mg-accent-rgb), 0.03) 1px,
    transparent 1px,
    transparent 3px
  );
}

/* ??????????*/
:root[data-theme="industrial-purple"] .mg-content .el-card,
:root[data-theme="industrial-purple"] .mg-content .kpi-row .el-statistic,
:root[data-theme="industrial-purple"] .mg-content .kpi-card {
  position: relative;
  background:
    linear-gradient(145deg,
      rgba(var(--mg-bg-card-rgb), 0.78) 0%,
      rgba(var(--mg-bg-app-deep-rgb), 0.86) 100%) !important;
  border: 1px solid rgba(var(--mg-accent-rgb), 0.14) !important;
  border-radius: var(--mg-radius) !important;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.5),
    0 0 22px rgba(var(--mg-primary-rgb), 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  overflow: hidden;
}
/* ?? 1px ??????????????*/
:root[data-theme="industrial-purple"] .mg-content .el-card::before,
:root[data-theme="industrial-purple"] .mg-content .kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--mg-accent-rgb), 0.55) 30%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(var(--mg-accent-rgb), 0.55) 70%,
    transparent 100%);
  pointer-events: none;
  opacity: 0.7;
}

:root[data-theme="industrial-purple"] .mg-content .el-card:hover,
:root[data-theme="industrial-purple"] .mg-content .kpi-row .el-statistic:hover,
:root[data-theme="industrial-purple"] .mg-content .kpi-card:hover {
  background:
    linear-gradient(145deg,
      rgba(var(--mg-bg-card-hi-rgb), 0.85) 0%,
      rgba(var(--mg-bg-card-darker-rgb), 0.92) 100%) !important;
  border-color: rgba(var(--mg-accent-rgb), 0.42) !important;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.6),
    0 0 38px rgba(var(--mg-primary-hover-rgb), 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

:root[data-theme="industrial-purple"] .mg-content .el-card .el-card {
  background: rgba(var(--mg-bg-card-darker-rgb), 0.55) !important;
}
:root[data-theme="industrial-purple"] .mg-content .el-card .el-card::before {
  display: none;
}

:root[data-theme="industrial-purple"] .mg-content .el-statistic__head {
  color: rgba(255, 255, 255, 0.78) !important;
}
:root[data-theme="industrial-purple"] .mg-content .el-statistic__number,
:root[data-theme="industrial-purple"] .mg-content .el-statistic__content {
  background: linear-gradient(135deg, #ffffff 0%, rgba(var(--mg-accent-rgb), 1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-shadow: 0 0 24px rgba(var(--mg-primary-hover-rgb), 0.5);
}

:root[data-theme="industrial-purple"] .mg-content .el-table th.el-table__cell {
  background: rgba(var(--mg-bg-card-darker-rgb), 0.75) !important;
}

:root[data-theme="industrial-purple"] .mg-content .el-input__wrapper,
:root[data-theme="industrial-purple"] .mg-content .el-textarea__inner {
  background: rgba(var(--mg-bg-card-darker-rgb), 0.55) !important;
  box-shadow: 0 0 0 1px rgba(var(--mg-accent-rgb), 0.18) inset !important;
}

/* ?????????? */
:root[data-theme="industrial-purple"] .el-button--primary {
  background: linear-gradient(135deg,
    var(--mg-primary) 0%,
    var(--mg-primary-hover) 100%) !important;
  border: none !important;
  box-shadow:
    0 8px 22px rgba(var(--mg-primary-rgb), 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.18) inset !important;
  position: relative;
  overflow: hidden;
}
:root[data-theme="industrial-purple"] .el-button--primary::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 80%; height: 100%;
  background: linear-gradient(110deg,
    transparent 0%,
    rgba(255, 255, 255, 0.0) 30%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0.0) 70%,
    transparent 100%);
  transition: left .6s cubic-bezier(.25, .8, .25, 1);
}
:root[data-theme="industrial-purple"] .el-button--primary:hover::after { left: 120%; }
:root[data-theme="industrial-purple"] .el-button--primary:hover {
  box-shadow:
    0 12px 32px rgba(var(--mg-primary-rgb), 0.6),
    0 0 28px rgba(var(--mg-primary-hover-rgb), 0.55),
    0 0 0 1px rgba(var(--mg-accent-rgb), 0.4) inset !important;
  transform: translateY(-1px);
}

/* el-tag ??????*/
:root[data-theme="industrial-purple"] .mg-content .el-tag {
  background: linear-gradient(135deg, rgba(var(--mg-primary-rgb), 0.25), rgba(var(--mg-accent-rgb), 0.18));
  color: #fff;
  border-color: rgba(var(--mg-accent-rgb), 0.45);
}

/* ??????????????KPI????? */
.mg-neon-text {
  background: linear-gradient(135deg, #ffffff 0%, var(--mg-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 18px rgba(var(--mg-primary-hover-rgb), 0.45);
}

/* ?????? orb ??????????????*/
@keyframes mg-pulse-glow {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(var(--mg-accent-rgb), 0.35),
      0 0 28px rgba(var(--mg-primary-hover-rgb), 0.35);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(var(--mg-accent-rgb), 0),
      0 0 38px rgba(var(--mg-primary-hover-rgb), 0.55);
  }
}

/* ????????????????????????????????????????????????????????????????????
 *  ???? (fame-lavender) ? ???FAME ????????
 *  ??????????????????????????????
 *           ?????????????????
 *           ?????orb / ?? / ????/ ??????
 * ???????????????????????????????????????????????????????????????????? */
:root[data-shell="outpost"] {
  --mg-glass-bg:        rgba(255, 255, 255, 0.95);
  --mg-glass-bg-hover:  rgba(249, 246, 255, 1);
  --mg-glass-bg-active: rgba(245, 240, 251, 1);
  --mg-glass-border:    rgba(124, 58, 237, 0.14);
  --mg-glass-border-hi: rgba(124, 58, 237, 0.35);
  --mg-glass-shadow:
    0 4px 14px rgba(45, 27, 105, 0.06),
    0 0 0 1px rgba(124, 58, 237, 0.06);
  --mg-glass-shadow-hi:
    0 8px 24px rgba(45, 27, 105, 0.10),
    0 0 0 1px rgba(124, 58, 237, 0.15);
  --mg-glass-blur:      none;
  --mg-glass-blur-hi:   none;

  /* ?????v2 ????????4.5:1 ?? 7-15:1????????????*/
  --mg-text-light:  #1a0f3d;   /* ????/ KPI ?? ? ?? ~15:1 */
  --mg-text-muted:  #4a3d6e;   /* ?? / ???? ? ?? ~9:1 (??#606266 ?????? 5:1) */
  --mg-text-dim:    #7a6b9a;   /* ???? / ????/ ?? ? ?? ~5:1 */
  --mg-text-faint:  #a8a0c0;   /* ?? / ???? ? ?? ~3:1 */
  --mg-divider:     #e8e1f0;   /* ????/ ?????? #ebe5f4 ??????????*/

  /* ??????? (WCAG AA ??) */
  --mg-status-success: #15803d;
  --mg-status-success-rgb: 21, 128, 61;
  --mg-status-warning: #b45309;
  --mg-status-warning-rgb: 180, 83, 9;
  --mg-status-danger:  #b91c1c;
  --mg-status-danger-rgb: 185, 28, 28;
  --mg-status-info:    #1d4ed8;
  --mg-status-info-rgb: 29, 78, 216;
  --mg-status-idle:    #64748b;
  --mg-status-idle-rgb: 100, 116, 139;

  /* ?? / ?????????? industrial-purple ?????? */
  --mg-bg-card-rgb:        255, 255, 255;
  --mg-bg-card-hi-rgb:     249, 246, 255;
  --mg-bg-card-darker-rgb: 245, 240, 251;
  --mg-accent-rgb:         124, 58, 237;

  /* ???? veil????????????????????????/ ???? */
  --mg-veil-1: rgba(124, 58, 237, 0.05);
  --mg-veil-2: rgba(124, 58, 237, 0.10);
  --mg-veil-3: rgba(124, 58, 237, 0.16);
  --mg-veil-border: rgba(124, 58, 237, 0.16);
  --mg-veil-border-hi: rgba(124, 58, 237, 0.32);

  /* ??????????+ ??????~6.9:1?WCAG AA ????*/
  --mg-action-bg: #7c3aed;
  --mg-action-bg-hover: #6d28d9;
  --mg-action-border: #7c3aed;
  --mg-action-border-hi: #6d28d9;
}

/* outpost-light: pure white shell + indigo accents */
:root[data-theme="outpost-light"] {
  --mg-glass-bg:        #ffffff;
  --mg-glass-bg-hover:  #ffffff;
  --mg-glass-bg-active: #f8fafc;
  --mg-glass-border:    rgba(15, 23, 42, 0.10);
  --mg-glass-border-hi: rgba(30, 58, 95, 0.22);
  --mg-glass-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 0 0 1px rgba(15, 23, 42, 0.06);
  --mg-glass-shadow-hi:
    0 4px 16px rgba(15, 23, 42, 0.06),
    0 0 0 1px rgba(30, 58, 95, 0.12);
  --mg-text-light:  #0f172a;
  --mg-text-muted:  #64748b;
  --mg-text-dim:    #94a3b8;
  --mg-text-faint:  #cbd5e1;
  --mg-divider:     #e5e7eb;
  --mg-veil-1: rgba(15, 23, 42, 0.03);
  --mg-veil-2: rgba(15, 23, 42, 0.05);
  --mg-veil-3: rgba(15, 23, 42, 0.08);
  --mg-veil-border: rgba(15, 23, 42, 0.10);
  --mg-veil-border-hi: rgba(30, 58, 95, 0.22);
  --mg-action-bg: #7c3aed;
  --mg-action-bg-hover: #8b5cf6;
  --mg-action-border: #7c3aed;
  --mg-action-border-hi: #8b5cf6;
}
:root[data-theme="outpost-light"] body {
  background: #ffffff !important;
}
:root[data-theme="outpost-light"] .aside {
  background: #ffffff !important;
  border-right: 1px solid #e5e7eb !important;
  box-shadow: 1px 0 0 rgba(15, 23, 42, 0.04) !important;
}
:root[data-theme="outpost-light"] .aside .logo {
  border-bottom-color: #e5e7eb !important;
  background: #ffffff !important;
}
:root[data-theme="outpost-light"] .aside .logo-img-full,
:root[data-theme="outpost-light"] .aside .logo-img-small {
  filter: brightness(0) saturate(100%) invert(27%) sepia(86%) saturate(2400%) hue-rotate(248deg) brightness(0.95);
}
:root[data-theme="outpost-light"] .aside .logo-title-zh {
  background: none !important;
  -webkit-text-fill-color: #7c3aed !important;
  color: #7c3aed !important;
  text-shadow: none !important;
}
:root[data-theme="outpost-light"] .aside .logo-title-en {
  color: #94a3b8 !important;
}
:root[data-theme="outpost-light"] .aside .logo-title-en b {
  color: #7c3aed !important;
}
:root[data-theme="outpost-light"] .aside .logo-abbr {
  color: #7c3aed !important;
}
:root[data-theme="outpost-light"] .aside .el-menu-item,
:root[data-theme="outpost-light"] .aside .el-sub-menu__title {
  color: #475569 !important;
}
:root[data-theme="outpost-light"] .aside .el-menu-item:hover,
:root[data-theme="outpost-light"] .aside .el-sub-menu__title:hover {
  background: #f8fafc !important;
  color: #0f172a !important;
}
:root[data-theme="outpost-light"] .aside .el-menu-item.is-active,
:root[data-theme="outpost-light"] .aside .el-sub-menu.is-active > .el-sub-menu__title {
  background: #f5f3ff !important;
  color: #7c3aed !important;
  box-shadow: inset 3px 0 0 #7c3aed !important;
  font-weight: 700 !important;
}
:root[data-theme="outpost-light"] .aside .el-menu .el-menu-item.is-active {
  background: #f5f3ff !important;
  box-shadow: inset 2px 0 0 #7c3aed !important;
  color: #7c3aed !important;
}
:root[data-theme="outpost-light"] .aside .el-sub-menu .el-menu {
  background: #f8fafc !important;
}
:root[data-theme="outpost-light"] .aside-footer {
  border-top-color: #e5e7eb !important;
  color: #94a3b8 !important;
}
:root[data-theme="outpost-light"] .aside-footer-badge {
  background: #f5f3ff !important;
  border-color: #ddd6fe !important;
  color: #7c3aed !important;
  box-shadow: none !important;
}
:root[data-theme="outpost-light"] .header {
  background: #ffffff !important;
  border-bottom-color: #e5e7eb !important;
  box-shadow: none !important;
}
:root[data-theme="outpost-light"] .header .el-breadcrumb__inner { color: #64748b !important; }
:root[data-theme="outpost-light"] .header .el-breadcrumb__item:last-child .el-breadcrumb__inner {
  color: #0f172a !important;
}
:root[data-theme="outpost-light"] .header .el-breadcrumb__separator { color: #cbd5e1 !important; }
:root[data-theme="outpost-light"] .header .el-breadcrumb__inner:hover { color: #7c3aed !important; }
:root[data-theme="outpost-light"] .header .user-name { color: #0f172a !important; }
:root[data-theme="outpost-light"] .header .icon-btn:hover { color: #7c3aed !important; }
:root[data-theme="outpost-light"] .header .el-radio-button.is-active .el-radio-button__inner {
  background: #7c3aed !important;
  border-color: #7c3aed !important;
  color: #fff !important;
}
:root[data-theme="outpost-light"] .mg-content h1,
:root[data-theme="outpost-light"] .mg-content h2,
:root[data-theme="outpost-light"] .mg-content h3 {
  color: #0f172a !important;
}
:root[data-theme="outpost-light"] .mg-content p { color: #64748b !important; }
:root[data-theme="outpost-light"] .mg-content .el-tabs__item,
:root[data-theme="outpost-light"] .el-tabs__item { color: #64748b !important; }
:root[data-theme="outpost-light"] .mg-content .el-tabs__item:hover,
:root[data-theme="outpost-light"] .el-tabs__item:hover { color: #7c3aed !important; }
:root[data-theme="outpost-light"] .mg-content .el-tabs__item.is-active,
:root[data-theme="outpost-light"] .el-tabs__item.is-active {
  color: #7c3aed !important;
  font-weight: 700;
}
:root[data-theme="outpost-light"] .el-tabs__active-bar {
  background-color: #7c3aed !important;
}
:root[data-theme="outpost-light"] .mg-content .el-form-item__label { color: #64748b !important; }
:root[data-theme="outpost-light"] .mg-content .method-btn,
:root[data-theme="outpost-light"] .mg-content .header-action-btn {
  background: #7c3aed !important;
  border-color: #7c3aed !important;
}
:root[data-theme="outpost-light"] .mg-content .method-btn:hover:not(:disabled),
:root[data-theme="outpost-light"] .mg-content .header-action-btn:hover {
  background: #8b5cf6 !important;
  border-color: #8b5cf6 !important;
}
:root[data-theme="outpost-light"] .mg-content .add-field-btn {
  background: #ffffff !important;
  border: 1px dashed #cbd5e1 !important;
  color: #7c3aed !important;
}
:root[data-theme="outpost-light"] .mg-content .add-field-btn:hover {
  background: #f8fafc !important;
  border-color: #7c3aed !important;
  color: #0f172a !important;
}

/* body???????????--mg-bg-app-*??*/
:root[data-shell="outpost"] body {
  background:
    linear-gradient(160deg, var(--mg-bg-app-1) 0%, var(--mg-bg-app-2) 55%, var(--mg-bg-app-3) 100%) !important;
  color: var(--mg-text-light);
}

/* ???????????? */
:root[data-shell="outpost"] #app::before,
:root[data-shell="outpost"] #app::after {
  display: none !important;
}

/* ?? AppShell ???? orb */
:root[data-shell="outpost"] .bg-orbs { display: none !important; }

/* ?????? aside ???? plum / ??/ ?? */
:root[data-shell="outpost"] .aside {
  background: linear-gradient(180deg, var(--mg-bg-aside-1) 0%, var(--mg-bg-aside-2) 100%) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 4px 0 24px rgba(45, 27, 105, 0.18) !important;
}
:root[data-shell="outpost"] .aside::before { display: none !important; }
:root[data-shell="outpost"] .aside .logo {
  background: transparent !important;
  border-bottom: 1px solid rgba(196, 181, 253, 0.12) !important;
}
:root[data-shell="outpost"] .aside .logo-title-zh {
  background: linear-gradient(135deg, #ffffff 0%, #c4b5fd 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
  font-weight: 700;
}

/* inactive menu item?????????????????????
 * ?? 14??????????Vue scoped ????:deep()???? css ?????
 * ?? :deep() ????????element-plus ???? .el-menu-item / .el-sub-menu__title ???*/
:root[data-shell="outpost"] .aside .el-menu {
  background: transparent !important;
  border-right: none !important;
}
:root[data-shell="outpost"] .aside .el-menu-item,
:root[data-shell="outpost"] .aside .el-sub-menu__title {
  color: #d4cae8 !important;
  font-weight: 500 !important;
  background: transparent !important;
}
:root[data-shell="outpost"] .aside .el-menu-item:hover,
:root[data-shell="outpost"] .aside .el-sub-menu__title:hover {
  background: rgba(196, 181, 253, 0.10) !important;
  color: #ffffff !important;
}
:root[data-shell="outpost"] .aside .el-menu-item.is-active,
:root[data-shell="outpost"] .aside .el-sub-menu.is-active > .el-sub-menu__title {
  background: linear-gradient(90deg, rgba(168, 85, 247, 0.30) 0%, rgba(124, 58, 237, 0.16) 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: inset 3px 0 0 #c4b5fd !important;
  text-shadow: none !important;
}

/* ????active ????????????*/
:root[data-shell="outpost"] .aside .el-menu .el-menu-item.is-active {
  background: linear-gradient(90deg, rgba(168, 85, 247, 0.22) 0%, transparent 100%) !important;
  box-shadow: inset 2px 0 0 #a855f7 !important;
}

/* outpost-light white sidebar wins over purple shell nav colors */
:root[data-shell="outpost"][data-theme="outpost-light"] .aside {
  background: #ffffff !important;
  border-right: 1px solid #e5e7eb !important;
  box-shadow: 1px 0 0 rgba(15, 23, 42, 0.04) !important;
}
:root[data-shell="outpost"][data-theme="outpost-light"] .aside .logo {
  border-bottom-color: #e5e7eb !important;
  background: #ffffff !important;
}
:root[data-shell="outpost"][data-theme="outpost-light"] .aside .logo-img-full,
:root[data-shell="outpost"][data-theme="outpost-light"] .aside .logo-img-small {
  filter: brightness(0) saturate(100%) invert(27%) sepia(86%) saturate(2400%) hue-rotate(248deg) brightness(0.95);
}
:root[data-shell="outpost"][data-theme="outpost-light"] .aside .logo-title-zh {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #7c3aed !important;
  color: #7c3aed !important;
}
:root[data-shell="outpost"][data-theme="outpost-light"] .aside .el-menu-item,
:root[data-shell="outpost"][data-theme="outpost-light"] .aside .el-sub-menu__title {
  color: #475569 !important;
  background: transparent !important;
}
:root[data-shell="outpost"][data-theme="outpost-light"] .aside .el-menu-item:hover,
:root[data-shell="outpost"][data-theme="outpost-light"] .aside .el-sub-menu__title:hover {
  background: #f8fafc !important;
  color: #0f172a !important;
}
:root[data-shell="outpost"][data-theme="outpost-light"] .aside .el-menu-item.is-active,
:root[data-shell="outpost"][data-theme="outpost-light"] .aside .el-sub-menu.is-active > .el-sub-menu__title {
  background: #f5f3ff !important;
  color: #7c3aed !important;
  box-shadow: inset 3px 0 0 #7c3aed !important;
  text-shadow: none !important;
}
:root[data-shell="outpost"][data-theme="outpost-light"] .aside .el-menu .el-menu-item.is-active {
  background: #f5f3ff !important;
  box-shadow: inset 2px 0 0 #7c3aed !important;
  color: #7c3aed !important;
}
:root[data-shell="outpost"][data-theme="outpost-light"] .aside .el-sub-menu .el-menu {
  background: #f8fafc !important;
}
:root[data-shell="outpost"][data-theme="outpost-light"] .header {
  border-bottom-color: #e5e7eb !important;
  box-shadow: none !important;
}

/* ?? header????????*/
:root[data-shell="outpost"] .header {
  background: #fff !important;
  border-bottom: 1px solid #ebe5f4 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 1px 6px rgba(45, 27, 105, 0.05) !important;
}
:root[data-shell="outpost"] .header::after { display: none !important; }
/* ?? 14?????? Vue scoped ????:deep() ?????? css ???????? ??????
 * ????AppShell.vue scoped ?????????? fame-lavender ?? header ????????
 * ???? :deep()????????????????(0,4,0) + !important ???? scoped ??(0,2,0)??
 * ?????????? "/" ????????rgba(255,255,255,.35)???????????*/
:root[data-shell="outpost"] .header .el-breadcrumb__inner { color: #4a3d6e !important; font-weight: 500; }
:root[data-shell="outpost"] .header .el-breadcrumb__item:last-child .el-breadcrumb__inner {
  color: #7c3aed !important;
  font-weight: 700;
}
:root[data-shell="outpost"] .header .el-breadcrumb__separator { color: #a8a0c0 !important; }
:root[data-shell="outpost"] .header .el-breadcrumb__inner:hover { color: #7c3aed !important; }
:root[data-shell="outpost"] .header .icon-btn {
  border-color: #ebe5f4 !important;
  color: #7c3aed !important;
  background: #f8f4fc !important;
}
:root[data-shell="outpost"] .header .icon-btn:hover {
  background: #ede9fe !important;
  border-color: #c4b5fd !important;
  color: #5b21b6 !important;
}
:root[data-shell="outpost"] .header .runmode-tag {
  background: #f5f3ff !important;
  border-color: #ddd6fe !important;
  color: #5b21b6 !important;
}
:root[data-shell="outpost"] .header .runmode-tag.WebEnabled {
  background: #ecfdf5 !important;
  border-color: #bbf7d0 !important;
  color: #047857 !important;
}
/* ?? N+2?? WebOnly ??????????.runmode-tag.WebOnly ??var(--mg-accent) ??????
   ??fame-lavender ?? header ?????? ???????????????????+ ??????*/
:root[data-shell="outpost"] .header .runmode-tag.WebOnly {
  background: #ede9fe !important;
  border-color: #c4b5fd !important;
  color: #6d28d9 !important;
}

/* ?? N+2?header ??ScopeSwitcher (el-radio-button) ??fame-lavender ????????
 * ?????? .mg-content .el-radio-button ???????? header ?? .mg-content ??
 * ???fame-lavender ???? header ??element-plus ???? (#fff ??+ #606266 ?? ????
 * ???????? + ?????? ????????????? + ?????????????*/
:root[data-shell="outpost"] .header .el-radio-button__inner {
  background: #fff !important;
  border-color: #ddd6fe !important;
  color: #5b21b6 !important;
  font-weight: 500;
}
:root[data-shell="outpost"] .header .el-radio-button__inner:hover {
  color: #6d28d9 !important;
  border-color: #c4b5fd !important;
  background: #f5f3ff !important;
}
:root[data-shell="outpost"] .header .el-radio-button.is-active .el-radio-button__inner {
  background: #7c3aed !important;
  border-color: #7c3aed !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.25);
}
:root[data-shell="outpost"] .header .user-link {
  background: #f8f4fc !important;
  border-color: #ebe5f4 !important;
  color: #2d1b69 !important;
}
:root[data-shell="outpost"] .header .user-link:hover {
  background: #ede9fe !important;
  border-color: #c4b5fd !important;
}
:root[data-shell="outpost"] .header .user-name { color: #2d1b69 !important; }

/* ???????????+ ??????v2 ???????? */
:root[data-shell="outpost"] .main,
:root[data-shell="outpost"] .mg-content {
  background: transparent !important;
  color: #1a0f3d !important;
}
:root[data-shell="outpost"] .mg-content h1,
:root[data-shell="outpost"] .mg-content h2,
:root[data-shell="outpost"] .mg-content h3 {
  color: #1a0f3d !important;
  font-weight: 700;
}
:root[data-shell="outpost"] .mg-content p { color: #4a3d6e !important; }
:root[data-shell="outpost"] .mg-content small,
:root[data-shell="outpost"] .mg-content .text-secondary { color: #7a6b9a !important; }

/* footer */
:root[data-shell="outpost"] .footer {
  background: rgba(255, 255, 255, 0.7) !important;
  border-top: 1px solid #ebe5f4 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #909399 !important;
}

/* el-card?????? + ?????????????? */
:root[data-shell="outpost"] .mg-content .el-card {
  background: #ffffff !important;
  border: 1px solid #e2dbf0 !important;
  border-radius: 14px !important;
  box-shadow:
    0 1px 2px rgba(45, 27, 105, 0.05),
    0 10px 26px rgba(108, 71, 200, 0.10) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #1a0f3d !important;
  overflow: hidden;
}
:root[data-shell="outpost"] .mg-content .el-card::before { display: none !important; }
:root[data-shell="outpost"] .mg-content .el-card:hover {
  background: #ffffff !important;
  border-color: #c4b5fd !important;
  box-shadow:
    0 4px 14px rgba(45, 27, 105, 0.10),
    0 18px 40px rgba(108, 71, 200, 0.16) !important;
  transform: translateY(-2px) !important;
}
:root[data-shell="outpost"] .mg-content .el-card .el-card {
  background: #faf7fd !important;
  border-color: #f0eaf6 !important;
  box-shadow: none !important;
}
:root[data-shell="outpost"] .mg-content .el-card__header {
  background: #faf7fd !important;
  border-bottom: 1px solid #e8e1f0 !important;
  color: #1a0f3d !important;
  font-weight: 600;
}
:root[data-shell="outpost"] .mg-content .el-card__body {
  background: transparent !important;
  color: #1a0f3d !important;
}

/* KPI ???????? */
:root[data-shell="outpost"] .mg-content .kpi-row .el-statistic,
:root[data-shell="outpost"] .mg-content .kpi-card {
  background: #fff !important;
  border: 1px solid #e2dbf0 !important;
  border-radius: 12px !important;
  box-shadow:
    0 1px 2px rgba(45, 27, 105, 0.05),
    0 8px 22px rgba(108, 71, 200, 0.10) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 16px 18px !important;
}
:root[data-shell="outpost"] .mg-content .kpi-row .el-statistic:hover,
:root[data-shell="outpost"] .mg-content .kpi-card:hover {
  background: #fff !important;
  border-color: #c4b5fd !important;
  box-shadow:
    0 4px 14px rgba(45, 27, 105, 0.09),
    0 14px 32px rgba(108, 71, 200, 0.15) !important;
  transform: translateY(-2px) !important;
}
:root[data-shell="outpost"] .mg-content .el-statistic__head { color: #4a3d6e !important; font-weight: 500; }
:root[data-shell="outpost"] .mg-content .el-statistic__number,
:root[data-shell="outpost"] .mg-content .el-statistic__content {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: #1a0f3d !important;
  text-shadow: none !important;
  font-family: var(--mg-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* el-table?????? + ?? hover */
:root[data-shell="outpost"] .mg-content .el-table {
  --el-table-bg-color: #ffffff;
  --el-table-tr-bg-color: #ffffff;
  --el-table-header-bg-color: #faf7fd;
  --el-table-row-hover-bg-color: #f5f3ff;
  --el-table-border-color: #e8e1f0;
  --el-table-header-text-color: #1a0f3d;
  --el-table-text-color: #1a0f3d;
  --el-fill-color-blank: #ffffff;
  --el-fill-color-light: #faf7fd;
  color: #1a0f3d !important;
}
:root[data-shell="outpost"] .mg-content .el-table,
:root[data-shell="outpost"] .mg-content .el-table tr {
  background: #ffffff !important;
}
:root[data-shell="outpost"] .mg-content .el-table th.el-table__cell {
  background: #faf7fd !important;
  color: #1a0f3d !important;
  border-bottom-color: #e8e1f0 !important;
  font-weight: 600;
}
:root[data-shell="outpost"] .mg-content .el-table td.el-table__cell {
  background: #ffffff !important;
  color: #1a0f3d !important;
  border-bottom-color: #f0eaf6 !important;
}
:root[data-shell="outpost"] .mg-content .el-table--striped .el-table__body tr:nth-child(2n) td.el-table__cell {
  background: #faf7fd !important;
}
:root[data-shell="outpost"] .mg-content .el-table tr:hover > td.el-table__cell {
  background: #f5f3ff !important;
}

/* el-input / el-textarea / el-select????+ ?? + ??????*/
:root[data-shell="outpost"] .mg-content .el-input__wrapper,
:root[data-shell="outpost"] .mg-content .el-textarea__inner,
:root[data-shell="outpost"] .mg-content .el-select .el-input__wrapper {
  background: #ffffff !important;
  box-shadow: 0 0 0 1px #e0d4f5 inset !important;
}
:root[data-shell="outpost"] .mg-content .el-input__wrapper:hover {
  box-shadow: 0 0 0 1px #c4b5fd inset !important;
}
:root[data-shell="outpost"] .mg-content .el-input__wrapper.is-focus {
  box-shadow:
    0 0 0 1px #7c3aed inset,
    0 0 0 3px rgba(124, 58, 237, 0.15) !important;
}
:root[data-shell="outpost"] .mg-content .el-input__inner,
:root[data-shell="outpost"] .mg-content .el-textarea__inner { color: #1a0f3d !important; font-weight: 500; }
:root[data-shell="outpost"] .mg-content .el-input__inner::placeholder,
:root[data-shell="outpost"] .mg-content .el-textarea__inner::placeholder { color: #a8a0c0 !important; }
:root[data-shell="outpost"] .mg-content .el-form-item__label { color: #4a3d6e !important; font-weight: 500; }

/* el-tabs??????+ ????*/
/* ??????el-tabs ???????????????????? primary??
   ?? .mg-content .el-tabs { --el-text-color-primary: #fff } ????h2 / label
   ???????"????"???????????tabs ??.ref-mgr-title ?????*/
:root[data-shell="outpost"] .mg-content .el-tabs {
  --el-text-color-primary: #2d1b69 !important;
  --el-text-color-regular: #303133 !important;
}
:root[data-shell="outpost"] .mg-content .el-tabs__item { color: #4a3d6e !important; font-weight: 500; }
:root[data-shell="outpost"] .mg-content .el-tabs__item:hover { color: #7c3aed !important; }
:root[data-shell="outpost"] .mg-content .el-tabs__item.is-active {
  color: #7c3aed !important;
  font-weight: 700;
}
/* ???element-plus ?? css ????????el-tabs__item ?? .mg-content ?????????
   ???????.mg-content ??????????dialog / drawer ???? tabs ??????*/
:root[data-shell="outpost"] .el-tabs__item { color: #4a3d6e !important; }
:root[data-shell="outpost"] .el-tabs__item:hover { color: #7c3aed !important; }
:root[data-shell="outpost"] .el-tabs__item.is-active { color: #7c3aed !important; font-weight: 700; }
:root[data-shell="outpost"] .mg-content .el-tabs__active-bar {
  background-color: #7c3aed !important;
  height: 3px !important;
  border-radius: 2px;
}
:root[data-shell="outpost"] .mg-content .el-tabs__nav-wrap::after { background-color: #e8e1f0 !important; }

/* ?????????????????????????????????????????????????????????????????????????
 *  ReflectionManagerPanel / CarPanelView ??tabs ????????N+2 UI ????
 *  ??????scoped CSS ??`color: var(--el-text-color-primary, #fff)`??
 *  ?? el-tab-pane ???????????????#fff ?????????????
 *  ???? fame-lavender ??????????????? #2d1b69?? !important??
 *  ??????scoped css??????????????????????????
 * ????????????????????????????????????????????????????????????????????????? */
:root[data-shell="outpost"] .mg-content .ref-mgr-page,
:root[data-shell="outpost"] .mg-content .ref-mgr-title,
:root[data-shell="outpost"] .mg-content .field-section-title,
:root[data-shell="outpost"] .mg-content .detail-name {
  color: #2d1b69 !important;
}
:root[data-shell="outpost"] .mg-content .ref-mgr-title { font-weight: 700; }
:root[data-shell="outpost"] .mg-content .detail-id,
:root[data-shell="outpost"] .mg-content .ref-type-asm,
:root[data-shell="outpost"] .mg-content .field-empty {
  color: #7a6b9a !important;
}
:root[data-shell="outpost"] .mg-content .ref-mgr-list-card,
:root[data-shell="outpost"] .mg-content .ref-mgr-detail-card {
  background: #fffefd !important;
  border: 1px solid rgba(40, 33, 58, 0.10) !important;
  box-shadow: none !important;
  border-radius: 8px !important;
}
:root[data-shell="outpost"] .mg-content .ref-mgr-count,
:root[data-shell="outpost"] .mg-content .col-mono,
:root[data-shell="outpost"] .mg-content .col-type {
  color: #756d85 !important;
}
:root[data-shell="outpost"] .mg-content .ref-chip {
  background: #fffefd !important;
  border-color: rgba(40, 33, 58, 0.12) !important;
  color: #756d85 !important;
}
:root[data-shell="outpost"] .mg-content .ref-chip b { color: #28213a !important; }
:root[data-shell="outpost"] .mg-content .ref-chip.is-active {
  color: #7c3aed !important;
  border-color: rgba(124, 58, 237, 0.4) !important;
  background: rgba(124, 58, 237, 0.08) !important;
}
:root[data-shell="outpost"] .mg-content .plugin-list-card {
  background: #fffefd !important;
  border: 1px solid rgba(40, 33, 58, 0.10) !important;
  box-shadow: none !important;
}
:root[data-shell="outpost"] .mg-content .ref-mgr-header,
:root[data-shell="outpost"] .mg-content .detail-header {
  border-color: rgba(124, 58, 237, 0.18) !important;
}
:root[data-shell="outpost"] .mg-content .field-section {
  color: #303133;
}
:root[data-shell="outpost"] .mg-content .status-value {
  color: #303133 !important;
}

/* el-tag????*/
:root[data-shell="outpost"] .mg-content .el-tag {
  background: #ede9fe !important;
  color: #5b21b6 !important;
  border-color: #ddd6fe !important;
}
:root[data-shell="outpost"] .mg-content .el-tag--primary {
  background: #ede9fe !important;
  color: #5b21b6 !important;
  border-color: #c4b5fd !important;
}
:root[data-shell="outpost"] .mg-content .el-tag--success {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border-color: #bbf7d0 !important;
}
:root[data-shell="outpost"] .mg-content .el-tag--warning {
  background: #fffbeb !important;
  color: #b45309 !important;
  border-color: #fde68a !important;
}
:root[data-shell="outpost"] .mg-content .el-tag--danger {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border-color: #fecaca !important;
}
:root[data-shell="outpost"] .mg-content .el-tag--info {
  background: #f3f4f6 !important;
  color: #4b5563 !important;
  border-color: #e5e7eb !important;
}

/* el-descriptions */
:root[data-shell="outpost"] .mg-content .el-descriptions {
  --el-text-color-primary: #2d1b69;
  --el-text-color-regular: #606266;
  --el-border-color-lighter: #ebe5f4;
  --el-fill-color-blank: #fff;
  color: #303133 !important;
}
:root[data-shell="outpost"] .mg-content .el-descriptions__label,
:root[data-shell="outpost"] .mg-content .el-descriptions__cell.is-bordered-label {
  background: #faf7fd !important;
  color: #606266 !important;
  border-color: #ebe5f4 !important;
}
:root[data-shell="outpost"] .mg-content .el-descriptions__content,
:root[data-shell="outpost"] .mg-content .el-descriptions__cell.is-bordered-content {
  background: #fff !important;
  color: #303133 !important;
  border-color: #ebe5f4 !important;
}
:root[data-shell="outpost"] .mg-content .el-descriptions__title { color: #2d1b69 !important; }

/* el-alert / collapse / radio / checkbox ?? */
:root[data-shell="outpost"] .mg-content .el-alert {
  background: #faf7fd !important;
  border: 1px solid #ebe5f4 !important;
  color: #303133 !important;
}
:root[data-shell="outpost"] .mg-content .el-alert__title,
:root[data-shell="outpost"] .mg-content .el-alert__description { color: #303133 !important; }

:root[data-shell="outpost"] .mg-content .el-collapse {
  border-color: #ebe5f4 !important;
  --el-collapse-header-text-color: #2d1b69;
  --el-collapse-content-text-color: #303133;
}
:root[data-shell="outpost"] .mg-content .el-collapse-item__header,
:root[data-shell="outpost"] .mg-content .el-collapse-item__wrap {
  background: #fff !important;
  border-color: #ebe5f4 !important;
  color: #303133 !important;
}

:root[data-shell="outpost"] .mg-content .el-radio__label,
:root[data-shell="outpost"] .mg-content .el-checkbox__label { color: #303133 !important; }
:root[data-shell="outpost"] .mg-content .el-radio__inner,
:root[data-shell="outpost"] .mg-content .el-checkbox__inner {
  background: #fff !important;
  border-color: #7c3aed !important;
  border-width: 1.5px !important;
}
/* ???????????? !important???????????????????????*/
:root[data-shell="outpost"] .mg-content .el-checkbox__input.is-checked .el-checkbox__inner,
:root[data-shell="outpost"] .mg-content .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background: #7c3aed !important;
  border-color: #7c3aed !important;
}
:root[data-shell="outpost"] .mg-content .el-checkbox__input.is-checked .el-checkbox__inner::after {
  border-color: #fff !important;
}
:root[data-shell="outpost"] .mg-content .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
  background-color: #fff !important;
}
:root[data-shell="outpost"] .mg-content .el-radio__input.is-checked .el-radio__inner {
  background: #7c3aed !important;
  border-color: #7c3aed !important;
}
:root[data-shell="outpost"] .mg-content .el-radio__input.is-checked .el-radio__inner::after {
  background: #fff !important;
}

:root[data-shell="outpost"] .mg-content .el-radio-button__inner {
  background: #fff !important;
  border-color: #ddd6fe !important;
  color: #5b21b6 !important;
}
:root[data-shell="outpost"] .mg-content .el-radio-button.is-active .el-radio-button__inner {
  background: #7c3aed !important;
  border-color: #7c3aed !important;
  color: #fff !important;
}

/* el-button--primary??????+ ???????????? */
:root[data-shell="outpost"] .el-button--primary {
  background: #7c3aed !important;
  border: 1px solid #7c3aed !important;
  color: #ffffff !important;
  font-weight: 600;
  box-shadow:
    0 1px 2px rgba(45, 27, 105, 0.08),
    0 2px 6px rgba(124, 58, 237, 0.22) !important;
}
:root[data-shell="outpost"] .el-button--primary::after { display: none !important; }
:root[data-shell="outpost"] .el-button--primary:hover {
  background: #6d28d9 !important;
  border-color: #6d28d9 !important;
  box-shadow:
    0 2px 6px rgba(45, 27, 105, 0.12),
    0 4px 14px rgba(124, 58, 237, 0.32) !important;
  transform: translateY(-1px) !important;
}
:root[data-shell="outpost"] .el-button--primary:active {
  background: #5b21b6 !important;
  border-color: #5b21b6 !important;
  transform: translateY(0) !important;
}

/* default ???????? + hover ????*/
:root[data-shell="outpost"] .mg-content .el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--text) {
  background: #ffffff !important;
  border-color: #ddd6fe !important;
  color: #5b21b6 !important;
  font-weight: 500;
}
:root[data-shell="outpost"] .mg-content .el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--text):hover {
  background: #f5f3ff !important;
  border-color: #a78bfa !important;
  color: #5b21b6 !important;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.10) !important;
}

/* el-progress */
:root[data-shell="outpost"] .mg-content .el-progress-bar__outer { background: #ede9fe !important; }
:root[data-shell="outpost"] .mg-content .el-progress-bar__inner {
  background: linear-gradient(90deg, #7c3aed 0%, #a855f7 100%) !important;
}

/* el-pagination ?? */
:root[data-shell="outpost"] .mg-content .el-pagination {
  --el-pagination-bg-color: #fff;
  --el-pagination-button-bg-color: #faf7fd;
  --el-pagination-button-color: #2d1b69;
  --el-pagination-hover-color: #7c3aed;
  color: #606266 !important;
}

/* el-dropdown ?? ??????header ??????*/
:root[data-shell="outpost"] .el-dropdown-menu {
  background: #fff !important;
  backdrop-filter: none !important;
  border: 1px solid #ebe5f4 !important;
  box-shadow: 0 6px 16px rgba(45, 27, 105, 0.10) !important;
}
:root[data-shell="outpost"] .el-dropdown-menu__item {
  color: #303133 !important;
}
:root[data-shell="outpost"] .el-dropdown-menu__item:hover {
  background: #f5f3ff !important;
  color: #7c3aed !important;
}

/* el-switch */
:root[data-shell="outpost"] .mg-content .el-switch.is-checked .el-switch__core {
  background: #7c3aed !important;
  border-color: #7c3aed !important;
}

/* el-dialog ?? h2 */
:root[data-shell="outpost"] .el-dialog h2 { color: #2d1b69 !important; }
:root[data-shell="outpost"] .el-dialog { background: #fff !important; }
:root[data-shell="outpost"] .el-dialog__title { color: #2d1b69 !important; }
:root[data-shell="outpost"] .el-dialog__body { color: #303133 !important; }

/* ??????????? FAME ??? */
:root[data-shell="outpost"] ::-webkit-scrollbar-thumb {
  background: rgba(124, 58, 237, 0.25);
}
:root[data-shell="outpost"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(124, 58, 237, 0.45);
}

/* ????????????????????????????????????????????????????????????????????
 *  ???????? design-system tokens ? ??design-system/MASTER.md??
 * ???????????????????????????????????????????????????????????????????? */

/* ?????KPI ???/ ?? / ID / ????*/
.mg-mono,
.mg-num {
  font-family: var(--mg-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ?????pill ????????*/
.mg-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.mg-pill.is-success {
  background: rgba(var(--mg-status-success-rgb), 0.15);
  color: var(--mg-status-success);
  border-color: rgba(var(--mg-status-success-rgb), 0.40);
}
.mg-pill.is-warning {
  background: rgba(var(--mg-status-warning-rgb), 0.15);
  color: var(--mg-status-warning);
  border-color: rgba(var(--mg-status-warning-rgb), 0.40);
}
.mg-pill.is-danger {
  background: rgba(var(--mg-status-danger-rgb), 0.15);
  color: var(--mg-status-danger);
  border-color: rgba(var(--mg-status-danger-rgb), 0.40);
}
.mg-pill.is-info {
  background: rgba(var(--mg-status-info-rgb), 0.15);
  color: var(--mg-status-info);
  border-color: rgba(var(--mg-status-info-rgb), 0.40);
}
.mg-pill.is-idle {
  background: rgba(var(--mg-status-idle-rgb), 0.15);
  color: var(--mg-status-idle);
  border-color: rgba(var(--mg-status-idle-rgb), 0.40);
}

/* ????????<span class="mg-live-dot is-success"/> */
.mg-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mg-status-info);
  position: relative;
}
.mg-live-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0;
  animation: mg-live-pulse 1.6s ease-out infinite;
}
.mg-live-dot.is-success { background: var(--mg-status-success); color: var(--mg-status-success); }
.mg-live-dot.is-warning { background: var(--mg-status-warning); color: var(--mg-status-warning); }
.mg-live-dot.is-danger  { background: var(--mg-status-danger);  color: var(--mg-status-danger);  }
.mg-live-dot.is-info    { background: var(--mg-status-info);    color: var(--mg-status-info);    }
.mg-live-dot.is-idle    { background: var(--mg-status-idle);    color: var(--mg-status-idle); }
.mg-live-dot.is-idle::after { animation: none; }

@keyframes mg-live-pulse {
  0%   { transform: scale(0.6); opacity: 0.55; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* ????????????*/
@media (prefers-reduced-motion: reduce) {
  .mg-live-dot::after { animation: none; }
  .bg-orb,
  .hero-orb,
  .hero-scene .agv-1,
  .hero-scene .agv-2,
  .hero-scene .float-data,
  .tag-dot,
  .quick-item,
  .quick-item.primary .quick-icon { animation: none !important; }
}

/* ?????????????????????????????????????????????????????????????????????????
 *  fame-lavender ??ReflectionManagerPanel ??????????
 *
 *  ??????scoped css ??.method-btn / .header-action-btn / .add-field-btn ??
 *  ?????? + ????rgba(170,110,250,0.30) ??#fff)?????????????????
 *  fame-lavender ????????????????????????????????
 *  ??????~1.5:1???? / ??" ?????????????? N+3 ?????????
 *
 *  ???? fame-lavender ??.el-button--primary ????????
 *  ?? #7c3aed ?? + #ffffff ?? + ?????????? ~6.9:1?WCAG AA ?????
 *  ?? ??????.add-field-btn) ??????????????????default ???????
 *
 *  ????:root[data-theme] .mg-content .x  = (0,3,0)?? !important ???? Vue
 *  scoped css ??.x[data-v-xxx] = (0,2,0)??
 * ????????????????????????????????????????????????????????????????????????? */
:root[data-shell="outpost"] .mg-content .method-btn,
:root[data-shell="outpost"] .mg-content .header-action-btn {
  background: #7c3aed !important;
  border: 1px solid #7c3aed !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow:
    0 1px 2px rgba(45, 27, 105, 0.08),
    0 2px 6px rgba(124, 58, 237, 0.22) !important;
}
:root[data-shell="outpost"] .mg-content .method-btn:hover:not(:disabled),
:root[data-shell="outpost"] .mg-content .header-action-btn:hover {
  background: #6d28d9 !important;
  border-color: #6d28d9 !important;
  color: #ffffff !important;
  box-shadow:
    0 2px 6px rgba(45, 27, 105, 0.12),
    0 4px 14px rgba(124, 58, 237, 0.32) !important;
}
:root[data-shell="outpost"] .mg-content .method-btn:active:not(:disabled) {
  background: #5b21b6 !important;
  border-color: #5b21b6 !important;
}
:root[data-shell="outpost"] .mg-content .method-btn:disabled {
  background: #c4b5fd !important;
  border-color: #c4b5fd !important;
  color: #ffffff !important;
  box-shadow: none !important;
  opacity: 0.85 !important;
}
:root[data-shell="outpost"] .mg-content .method-btn .method-btn-icon,
:root[data-shell="outpost"] .mg-content .method-btn .method-btn-spin {
  color: rgba(255, 255, 255, 0.92) !important;
}
:root[data-shell="outpost"] .mg-content .method-btn .method-btn-tag {
  background: rgba(255, 255, 255, 0.24) !important;
  color: #ffffff !important;
}

/* ?? ????????????default ???????????????????? primary ????*/
:root[data-shell="outpost"] .mg-content .add-field-btn {
  background: #ffffff !important;
  border: 1px dashed #a78bfa !important;
  color: #5b21b6 !important;
  font-weight: 500 !important;
}
:root[data-shell="outpost"] .mg-content .add-field-btn:hover {
  background: #f5f3ff !important;
  border-color: #7c3aed !important;
  color: #5b21b6 !important;
}
/* ????????????????????????? */
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .edit-property-panel .prop-add-field-btn,
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .edit-property-panel .add-field-btn {
  background: transparent !important;
  border: 1px dashed rgba(var(--mg-primary-rgb), 0.5) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-weight: 600 !important;
}
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .edit-property-panel .prop-add-field-btn:hover,
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .edit-property-panel .add-field-btn:hover {
  background: rgba(var(--mg-primary-rgb), 0.18) !important;
  border-color: var(--mg-primary) !important;
  color: #fff !important;
}

/* ?????????????????????????????????????????????????????????????????????????
 *  fame-lavender ? ??????????UI?MapEditorView??
 *  ?? / ?????/ ???????? + ??????????? .mg-content ??
 *  el-form ???el-tabs ?????? (#4a3d6e)??????????????????
 * ????????????????????????????????????????????????????????????????????????? */
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page {
  --el-text-color-primary: rgba(232, 215, 245, 0.95);
  --el-text-color-regular: rgba(220, 200, 230, 0.88);
  --el-text-color-secondary: rgba(200, 180, 220, 0.72);
  color: rgba(232, 215, 245, 0.92);
}

:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .el-form-item__label {
  color: rgba(220, 200, 230, 0.9) !important;
  font-weight: 500;
}

:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .el-tabs {
  --el-text-color-primary: rgba(232, 215, 245, 0.95) !important;
  --el-text-color-regular: rgba(220, 200, 240, 0.75) !important;
}
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .el-tabs__item,
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .map-editor-page .el-tabs__item {
  color: rgba(220, 200, 240, 0.72) !important;
  font-weight: 500;
}
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .el-tabs__item:hover,
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .map-editor-page .el-tabs__item:hover {
  color: rgba(240, 225, 255, 0.95) !important;
}
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .el-tabs__item.is-active,
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .map-editor-page .el-tabs__item.is-active {
  color: #ffffff !important;
  font-weight: 600;
}
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .el-tabs__nav-wrap::after {
  background-color: rgba(255, 255, 255, 0.1) !important;
}
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .el-tabs__active-bar {
  background: linear-gradient(90deg, rgba(170, 110, 250, 1) 0%, rgba(255, 110, 220, 1) 100%) !important;
}

/* ?? Tab?????????????chrome ???????????*/
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .edit-property-panel .layer-table.el-table {
  --el-table-bg-color: rgba(0, 0, 0, 0.28);
  --el-table-tr-bg-color: transparent;
  --el-table-header-bg-color: rgba(var(--mg-primary-rgb), 0.16);
  --el-table-text-color: var(--me-text);
  --el-table-header-text-color: var(--me-text);
  --el-table-row-hover-bg-color: rgba(var(--mg-primary-rgb), 0.14);
  --el-table-border-color: var(--me-border);
  --el-fill-color-blank: transparent;
  --el-fill-color-light: rgba(255, 255, 255, 0.04);
  color: var(--me-text) !important;
  background: rgba(0, 0, 0, 0.22) !important;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--me-border);
}
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .edit-property-panel .layer-table.el-table,
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .edit-property-panel .layer-table.el-table tr,
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .edit-property-panel .layer-table .el-table__inner-wrapper {
  background: transparent !important;
}
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .edit-property-panel .layer-table th.el-table__cell {
  background: rgba(var(--mg-primary-rgb), 0.16) !important;
  color: var(--me-text) !important;
  font-weight: 600 !important;
  border-bottom-color: var(--me-border) !important;
}
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .edit-property-panel .layer-table td.el-table__cell {
  background: transparent !important;
  color: var(--me-text) !important;
  font-weight: 500 !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .edit-property-panel .layer-table .cell {
  color: var(--me-text) !important;
}
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .edit-property-panel .layer-table.el-table--striped .el-table__body tr:nth-child(2n) td.el-table__cell {
  background: rgba(255, 255, 255, 0.03) !important;
}
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .edit-property-panel .layer-table tr:hover > td.el-table__cell {
  background: rgba(var(--mg-primary-rgb), 0.14) !important;
}

/* ?????????? */
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .edit-property-panel .new-layer .el-input__inner {
  color: var(--me-text) !important;
  font-weight: 500;
}
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .edit-property-panel .new-layer .el-input__inner::placeholder {
  color: var(--me-text-muted) !important;
}
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .edit-property-panel .new-layer .el-input-group__append .el-button {
  background: rgba(var(--mg-primary-rgb), 0.18) !important;
  border-color: rgba(var(--mg-primary-rgb), 0.35) !important;
  color: #fff !important;
  font-weight: 600 !important;
}
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .edit-property-panel .new-layer .el-input-group__append .el-button:hover {
  background: rgba(var(--mg-primary-rgb), 0.28) !important;
  border-color: var(--mg-primary) !important;
  color: #fff !important;
}

:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .el-checkbox__label {
  color: rgba(220, 200, 230, 0.88) !important;
}

:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .prop-card-flag,
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .prop-card-flag-text {
  color: rgba(200, 220, 255, 0.88) !important;
}
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .prop-card-flag.is-synced,
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .prop-card-flag.is-synced .prop-card-flag-text {
  color: rgba(220, 255, 230, 0.98) !important;
}

/* ?????????????Outpost ?????????? chrome ??? */
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .edit-property-panel .el-input__wrapper,
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .edit-property-panel .el-textarea__inner,
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .edit-property-panel .el-select .el-input__wrapper,
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .edit-property-panel .el-select__wrapper,
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .edit-property-panel .el-input-number .el-input__wrapper {
  background: rgba(0, 0, 0, 0.32) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .edit-property-panel .el-input__wrapper:hover,
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .edit-property-panel .el-select__wrapper:hover,
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .edit-property-panel .el-select .el-input__wrapper:hover {
  box-shadow: inset 0 0 0 1px rgba(var(--mg-primary-rgb), 0.5) !important;
}
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .edit-property-panel .el-input__wrapper.is-focus,
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .edit-property-panel .el-select__wrapper.is-focused,
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .edit-property-panel .el-select .el-input__wrapper.is-focus {
  box-shadow:
    inset 0 0 0 1px var(--mg-primary),
    0 0 0 3px rgba(var(--mg-primary-rgb), 0.18) !important;
}
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .edit-property-panel .el-input__inner,
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .edit-property-panel .el-textarea__inner,
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .edit-property-panel .el-select__placeholder,
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .edit-property-panel .el-select__selected-item {
  color: var(--me-text) !important;
  font-weight: 500;
}
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .edit-property-panel .el-input__inner::placeholder,
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .edit-property-panel .el-textarea__inner::placeholder {
  color: var(--me-text-muted) !important;
}
:root[data-shell="outpost"]:not([data-theme="outpost-light"]) .mg-content .map-editor-page .edit-property-panel .el-form-item__label {
  color: var(--me-text-muted) !important;
}

/* ?????????????????????????????????????????????????????????????????????????
 *  Harbor ?? ? ????????? + ??????????
 * ????????????????????????????????????????????????????????????????????????? */
:root[data-theme="outpost-light"] .mg-content .map-editor-page {
  --el-text-color-primary: #0b1220;
  --el-text-color-regular: #64748b;
  --el-text-color-secondary: #94a3b8;
  color: var(--me-text);
}
:root[data-theme="outpost-light"] .mg-content .map-editor-page .el-tabs__item {
  color: var(--me-text-muted) !important;
}
:root[data-theme="outpost-light"] .mg-content .map-editor-page .el-tabs__item:hover {
  color: var(--mg-primary) !important;
}
:root[data-theme="outpost-light"] .mg-content .map-editor-page .el-tabs__item.is-active {
  color: var(--mg-primary) !important;
  font-weight: 700;
}
:root[data-theme="outpost-light"] .mg-content .map-editor-page .el-tabs__active-bar {
  background: linear-gradient(90deg, #7c3aed 0%, #64748b 100%) !important;
}
:root[data-theme="outpost-light"] .mg-content .map-editor-page .el-tabs__nav-wrap::after {
  background-color: var(--me-border) !important;
}
:root[data-theme="outpost-light"] .mg-content .map-editor-page .edit-property-panel .el-input__wrapper,
:root[data-theme="outpost-light"] .mg-content .map-editor-page .edit-property-panel .el-textarea__inner,
:root[data-theme="outpost-light"] .mg-content .map-editor-page .edit-property-panel .el-select .el-input__wrapper,
:root[data-theme="outpost-light"] .mg-content .map-editor-page .edit-property-panel .el-select__wrapper,
:root[data-theme="outpost-light"] .mg-content .map-editor-page .edit-property-panel .el-input-number .el-input__wrapper {
  background: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(30, 58, 95, 0.14) !important;
}
:root[data-theme="outpost-light"] .mg-content .map-editor-page .edit-property-panel .el-input__wrapper:hover,
:root[data-theme="outpost-light"] .mg-content .map-editor-page .edit-property-panel .el-select__wrapper:hover {
  box-shadow: inset 0 0 0 1px rgba(30, 58, 95, 0.32) !important;
}
:root[data-theme="outpost-light"] .mg-content .map-editor-page .edit-property-panel .el-input__wrapper.is-focus,
:root[data-theme="outpost-light"] .mg-content .map-editor-page .edit-property-panel .el-select__wrapper.is-focused {
  box-shadow:
    inset 0 0 0 1px #7c3aed,
    0 0 0 3px rgba(30, 58, 95, 0.12) !important;
}
:root[data-theme="outpost-light"] .mg-content .map-editor-page .edit-property-panel .el-input__inner,
:root[data-theme="outpost-light"] .mg-content .map-editor-page .edit-property-panel .el-textarea__inner,
:root[data-theme="outpost-light"] .mg-content .map-editor-page .edit-property-panel .el-select__selected-item {
  color: #0b1220 !important;
}
:root[data-theme="outpost-light"] .mg-content .map-editor-page .edit-property-panel .el-input__inner::placeholder,
:root[data-theme="outpost-light"] .mg-content .map-editor-page .edit-property-panel .el-textarea__inner::placeholder,
:root[data-theme="outpost-light"] .mg-content .map-editor-page .edit-property-panel .el-select__placeholder {
  color: #94a3b8 !important;
}
:root[data-theme="outpost-light"] .mg-content .map-editor-page .edit-property-panel .prop-add-field-btn {
  background: #f5f3ff !important;
  border: 1px dashed rgba(124, 58, 237, 0.42) !important;
  color: #7c3aed !important;
}
:root[data-theme="outpost-light"] .mg-content .map-editor-page .edit-property-panel .prop-add-field-btn:hover {
  background: #ede9fe !important;
  border-color: #7c3aed !important;
  border-style: solid !important;
  color: #5b21b6 !important;
}
:root[data-theme="outpost-light"] .mg-content .map-editor-page .edit-property-panel .custom-field-item {
  background: #f8fafc !important;
  border: 1px solid #e5e7eb !important;
}
:root[data-theme="outpost-light"] .mg-content .map-editor-page .edit-property-panel .custom-field-key {
  color: rgba(45, 27, 105, 0.88) !important;
}
:root[data-theme="outpost-light"] .mg-content .map-editor-page .edit-property-panel .custom-field-input .el-input__wrapper {
  background: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.16) !important;
}
:root[data-theme="outpost-light"] .mg-content .map-editor-page .edit-property-panel .custom-field-input .el-input__inner {
  color: #1a0f3d !important;
  font-weight: 550 !important;
  -webkit-text-fill-color: #1a0f3d !important;
}
:root[data-theme="outpost-light"] .mg-content .map-editor-page .edit-property-panel .prop-action-btn {
  background: #7c3aed !important;
  border: 1px solid #7c3aed !important;
  color: #ffffff !important;
}
:root[data-theme="outpost-light"] .mg-content .map-editor-page .edit-property-panel .prop-action-btn .prop-action-icon,
:root[data-theme="outpost-light"] .mg-content .map-editor-page .edit-property-panel .prop-action-btn .prop-action-label {
  color: #ffffff !important;
}
:root[data-theme="outpost-light"] .mg-content .map-editor-page .edit-property-panel .prop-action-btn:nth-child(2n) {
  background: #ffffff !important;
  border-color: rgba(124, 58, 237, 0.4) !important;
  color: #7c3aed !important;
}
:root[data-theme="outpost-light"] .mg-content .map-editor-page .edit-property-panel .prop-action-btn:nth-child(2n) .prop-action-icon,
:root[data-theme="outpost-light"] .mg-content .map-editor-page .edit-property-panel .prop-action-btn:nth-child(2n) .prop-action-label {
  color: #7c3aed !important;
}
:root[data-theme="outpost-light"] .mg-content .map-editor-page .edit-property-panel .prop-action-btn:hover:not(:disabled) {
  background: #8b5cf6 !important;
  border-color: #8b5cf6 !important;
  color: #ffffff !important;
}
:root[data-theme="outpost-light"] .mg-content .map-editor-page .edit-property-panel .prop-action-btn:nth-child(2n):hover:not(:disabled) {
  background: #f5f3ff !important;
  border-color: #7c3aed !important;
  color: #5b21b6 !important;
}
:root[data-theme="outpost-light"] .mg-content .map-editor-page .edit-property-panel .prop-action-btn:nth-child(2n):hover:not(:disabled) .prop-action-icon,
:root[data-theme="outpost-light"] .mg-content .map-editor-page .edit-property-panel .prop-action-btn:nth-child(2n):hover:not(:disabled) .prop-action-label {
  color: #5b21b6 !important;
}
:root[data-theme="outpost-light"] .mg-content .map-editor-page .el-checkbox__label {
  color: #64748b !important;
}