/* finesse · register=product · shell=canonical-sidebar (frost-light+dark)
 * A=arctic-steel on mist · B=system-sans · C=existing-ia
 * D=css-pointer-light + backdrop-blur · E=white-frost-glass
 * SOUL=7 SPECTACLE=4 DENSITY=8 */
:root {
  --frost-page: #cfd8e1;
  --frost-glass: rgba(248, 251, 253, .56);
  --frost-glass-2: rgba(255, 255, 255, .38);
  --frost-border: rgba(255, 255, 255, .62);
  --frost-line: rgba(20, 40, 55, .08);
  --frost-ink: #14222b;
  --frost-muted: #4b5d68;
  --frost-faint: #7b8c96;
  --frost-accent: #3E6A82;
  --frost-accent-2: #7A9BB0;
  --frost-soft: rgba(62, 106, 130, .12);
  --frost-on: #f4f8fb;
  --frost-glow: rgba(180, 214, 230, .55);
  --frost-up: #2F7A62;
  --frost-blur: 20px;
  --frost-spot-x: 72%;
  --frost-spot-y: 10%;
  --el-color-primary: #3E6A82 !important;
  --el-color-primary-rgb: 62, 106, 130 !important;
  --el-color-primary-light-3: #6b8fa3 !important;
  --el-color-primary-light-5: #8ea9b8 !important;
  --el-color-primary-light-7: #b4c6d0 !important;
  --el-color-primary-light-8: #c7d5dc !important;
  --el-color-primary-light-9: #e8f0f4 !important;
  --el-color-primary-dark-2: #325568 !important;
  --el-bg-color-page: transparent !important;
  --el-bg-color: rgba(248, 251, 253, .56) !important;
  --el-bg-color-overlay: rgba(248, 251, 253, .72) !important;
  --el-fill-color: rgba(255, 255, 255, .28) !important;
  --el-fill-color-light: rgba(255, 255, 255, .22) !important;
  --el-fill-color-blank: rgba(248, 251, 253, .72) !important;
  --el-table-bg-color: transparent !important;
  --el-table-tr-bg-color: transparent !important;
  --el-table-header-bg-color: rgba(255, 255, 255, .22) !important;
  --el-table-row-hover-bg-color: rgba(255, 255, 255, .32) !important;
  --theme-color: #3E6A82 !important;
  --el-border-radius-base: 12px !important;
  --art-primary: #3E6A82 !important;
  --art-bg-color: transparent !important;
  --art-hover-color: rgba(255, 255, 255, .36) !important;
  --art-active-color: rgba(255, 255, 255, .5) !important;
  --art-card-border: rgba(255, 255, 255, .55) !important;
  --default-bg-color: transparent !important;
  --default-box-color: rgba(248, 251, 253, .56) !important;
  --ui-shadow-glow: 0 0 0 3px var(--frost-soft) !important;
  --ui-transition-fast: .16s cubic-bezier(.22, 1, .36, 1);
}
html.dark {
  --frost-page: #12181d;
  --frost-glass: rgba(22, 30, 36, .52);
  --frost-glass-2: rgba(255, 255, 255, .06);
  --frost-border: rgba(255, 255, 255, .12);
  --frost-line: rgba(255, 255, 255, .08);
  --frost-ink: #e8f0f4;
  --frost-muted: #b3c2cb;
  --frost-faint: #7f909a;
  --frost-accent: #8FCBE0;
  --frost-accent-2: #A9C4D4;
  --frost-soft: rgba(143, 203, 224, .14);
  --frost-on: #102026;
  --frost-glow: rgba(143, 203, 224, .28);
  --frost-up: #4EC49A;
  --el-color-primary: #8FCBE0 !important;
  --el-color-primary-rgb: 143, 203, 224 !important;
  --el-color-primary-light-3: #6fb3cc !important;
  --el-color-primary-light-5: #5a9cb4 !important;
  --el-color-primary-light-7: #3d7a90 !important;
  --el-color-primary-light-8: #2e6478 !important;
  --el-color-primary-light-9: rgba(143, 203, 224, .14) !important;
  --el-color-primary-dark-2: #b5dce9 !important;
  --el-bg-color: rgba(22, 30, 36, .52) !important;
  --el-bg-color-overlay: rgba(22, 30, 36, .72) !important;
  --el-fill-color: rgba(255, 255, 255, .06) !important;
  --el-fill-color-light: rgba(255, 255, 255, .04) !important;
  --el-fill-color-blank: rgba(22, 30, 36, .52) !important;
  --el-table-header-bg-color: rgba(255, 255, 255, .04) !important;
  --el-table-row-hover-bg-color: rgba(255, 255, 255, .06) !important;
  --theme-color: #8FCBE0 !important;
  --art-primary: #8FCBE0 !important;
  --art-hover-color: rgba(255, 255, 255, .06) !important;
  --art-active-color: rgba(143, 203, 224, .14) !important;
  --art-card-border: rgba(255, 255, 255, .12) !important;
  --default-box-color: rgba(22, 30, 36, .52) !important;
}
html, body, #app {
  background-color: var(--frost-page) !important;
  color: var(--frost-ink);
}
body {
  min-height: 100vh;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  background-image:
    radial-gradient(900px 520px at 8% -12%, rgba(210, 228, 238, .95), transparent 58%),
    radial-gradient(720px 460px at 92% 0%, rgba(186, 210, 224, .8), transparent 52%),
    radial-gradient(640px 420px at 70% 100%, rgba(232, 238, 242, .7), transparent 55%),
    linear-gradient(180deg, #d7e0e8 0%, #c5d1db 100%) !important;
  background-attachment: fixed !important;
}
html.dark body {
  background-image:
    radial-gradient(900px 520px at 8% -12%, rgba(40, 70, 86, .7), transparent 58%),
    radial-gradient(720px 460px at 92% 0%, rgba(28, 48, 58, .8), transparent 52%),
    linear-gradient(180deg, #141b21 0%, #0e1318 100%) !important;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(480px 300px at var(--frost-spot-x) var(--frost-spot-y), rgba(255, 255, 255, .28), transparent 58%);
}
html.dark body::before {
  background: radial-gradient(480px 300px at var(--frost-spot-x) var(--frost-spot-y), rgba(143, 203, 224, .12), transparent 58%);
}
#app, .layout-container, .layout-content, .layout-main-content, .page-content, .app-main, main {
  background: transparent !important;
}
#app-sidebar,
.layout-sidebar,
.el-aside {
  background: rgba(248, 251, 253, .28) !important;
  backdrop-filter: blur(var(--frost-blur)) saturate(1.35);
  -webkit-backdrop-filter: blur(var(--frost-blur)) saturate(1.35);
  border-right: 1px solid var(--frost-border) !important;
  box-shadow: none !important;
}
html.dark #app-sidebar,
html.dark .layout-sidebar,
html.dark .el-aside {
  background: rgba(18, 24, 29, .42) !important;
}
.layout-header,
.el-header {
  background: rgba(248, 251, 253, .42) !important;
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--frost-border) !important;
  box-shadow: none !important;
}
html.dark .layout-header,
html.dark .el-header {
  background: rgba(22, 30, 36, .42) !important;
}
.el-menu,
.menu-left,
.el-scrollbar__view {
  background: transparent !important;
}
.el-menu-item,
.el-sub-menu__title {
  border-radius: 12px !important;
  margin: 3px 8px !important;
  transition: background var(--ui-transition-fast), color var(--ui-transition-fast), transform var(--ui-transition-fast) !important;
}
.el-menu-item:hover,
.el-sub-menu__title:hover {
  background: rgba(255, 255, 255, .32) !important;
  color: var(--frost-ink) !important;
}
.el-menu-item.is-active {
  background: rgba(255, 255, 255, .5) !important;
  color: var(--frost-ink) !important;
  font-weight: 650 !important;
  box-shadow: inset 3px 0 0 var(--frost-accent), inset 0 1px 0 rgba(255, 255, 255, .7);
}
html.dark .el-menu-item.is-active {
  background: rgba(143, 203, 224, .12) !important;
  color: var(--frost-ink) !important;
}
.art-card,
.art-card-sm,
.art-card-xs,
.art-table-card,
.el-card,
.el-table,
.el-collapse {
  background: var(--frost-glass) !important;
  backdrop-filter: blur(var(--frost-blur)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--frost-blur)) saturate(1.4);
  border: 1px solid var(--frost-border) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 18px 40px -28px rgba(30, 50, 70, .28) !important;
}
html.dark .art-card,
html.dark .art-card-sm,
html.dark .art-table-card,
html.dark .el-card,
html.dark .el-table {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 40px -28px rgba(0, 0, 0, .5) !important;
}
.el-card__header,
.art-card-header {
  border-bottom-color: var(--frost-line) !important;
  background: transparent !important;
}
.el-table th.el-table__cell {
  background: rgba(255, 255, 255, .22) !important;
  color: var(--frost-faint) !important;
  font-weight: 600 !important;
}
html.dark .el-table th.el-table__cell {
  background: rgba(255, 255, 255, .04) !important;
}
.el-table td.el-table__cell {
  background: transparent !important;
  border-color: var(--frost-line) !important;
}
.el-table tbody tr:hover > td.el-table__cell {
  background: rgba(255, 255, 255, .32) !important;
}
.el-table__inner-wrapper::before,
.el-table--border::after,
.el-table--border::before {
  display: none !important;
}
.el-button {
  border-radius: 12px !important;
  font-weight: 650 !important;
  position: relative;
  overflow: hidden;
  transition: transform var(--ui-transition-fast), box-shadow var(--ui-transition-fast), background var(--ui-transition-fast) !important;
}
.el-button:not(.el-button--text):not(.is-disabled):hover {
  box-shadow: 0 0 18px var(--frost-glow) !important;
}
.el-button:not(.el-button--text):not(.is-disabled):active {
  transform: translateY(1px) scale(.98) !important;
}
.el-button--primary {
  background: linear-gradient(180deg, #567e94, var(--frost-accent)) !important;
  border-color: transparent !important;
  color: var(--frost-on) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 28px var(--frost-glow) !important;
}
html.dark .el-button--primary {
  color: #102026 !important;
}
.el-button:not(.el-button--primary):not(.el-button--text):not(.el-button--danger):not(.el-button--success) {
  background: var(--frost-glass-2) !important;
  border-color: var(--frost-border) !important;
  color: var(--frost-ink) !important;
  backdrop-filter: blur(12px);
}
.el-input__wrapper,
.el-textarea__inner,
.el-select__wrapper,
.el-input-number .el-input__wrapper {
  background: rgba(255, 255, 255, .38) !important;
  border-radius: 12px !important;
  box-shadow: 0 0 0 1px var(--frost-border) inset !important;
  backdrop-filter: blur(12px);
  transition: box-shadow var(--ui-transition-fast) !important;
}
.el-input__wrapper.is-focus,
.el-select__wrapper.is-focused,
.el-textarea__inner:focus {
  box-shadow: 0 0 0 1px var(--frost-accent) inset, 0 0 0 3px var(--frost-soft), 0 0 18px var(--frost-glow) !important;
}
.el-tag {
  border-radius: 999px !important;
  border-color: var(--frost-border) !important;
  background: rgba(255, 255, 255, .4) !important;
}
.el-tag--success {
  background: rgba(47, 122, 98, .12) !important;
  color: var(--frost-up) !important;
  border-color: transparent !important;
}
.el-dialog,
.el-drawer,
.el-message-box,
.el-popper.el-dropdown__popper,
.el-picker__popper,
.el-select-dropdown {
  background: rgba(248, 251, 253, .72) !important;
  backdrop-filter: blur(22px) saturate(1.45) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.45) !important;
  border: 1px solid var(--frost-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 60px -28px rgba(30, 50, 70, .4) !important;
}
html.dark .el-dialog,
html.dark .el-drawer,
html.dark .el-message-box,
html.dark .el-popper.el-dropdown__popper {
  background: rgba(22, 30, 36, .72) !important;
}
.el-overlay {
  background: rgba(16, 28, 36, .28) !important;
  backdrop-filter: blur(8px);
}
.el-pagination button,
.el-pager li {
  border-radius: 10px !important;
}
.el-switch.is-checked .el-switch__core {
  background: var(--frost-accent) !important;
  border-color: var(--frost-accent) !important;
}
.el-tabs__item.is-active {
  color: var(--frost-accent) !important;
  font-weight: 650 !important;
}
.el-tabs__active-bar {
  background: var(--frost-accent) !important;
}
.el-message {
  background: rgba(20, 34, 43, .78) !important;
  color: #eef6fa !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  backdrop-filter: blur(18px);
  border-radius: 12px !important;
}
#nprogress .bar {
  background: var(--frost-accent) !important;
}
#nprogress .peg {
  box-shadow: 0 0 10px var(--frost-accent), 0 0 5px var(--frost-accent) !important;
}
.phone-frame,
.phone-frame *,
.screen-control-page .phone-frame,
.screen-control-page canvas,
video,
canvas {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
@media (prefers-reduced-motion: reduce) {
  body::before { display: none; }
  * { transition: none !important; }
}