* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    scrollbar-width: thin;
    scrollbar-color: var(--dark-border) transparent;
}

html, body {
    width: 100%;
    height: 100%;
}

#app {
    width: 100%;
    height: 100%;
}

:deep(.el-input__inner:focus) {
    background-color: transparent !important;
    border-color: #dcdfe6 !important;
}

.el-table thead th {
    font-weight: bold !important;
}

body {
    font-family: Inter, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    line-height: 1.5;
    color: var(--el-text-color-primary);
    font-size: 14px;
}

html, body {
    background: var(--el-bg-color);
}

ul, ol {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    outline: none;
    border: none;
    background: none;
}

*:focus {
    outline: none;
}

.el-message {
    white-space: nowrap !important;
}

.message-bottom {
    top: auto !important;
    bottom: 20px !important;

    .el-icon {
        display: none !important;
    }
}

.el-input-group__append, .el-input-group__prepend {
    color: var(--el-text-color-primary) !important;
}

.tox .tox-dialog__iframe.tox-dialog__iframe--opaque {
    background-color: var(--el-bg-color) !important;
}

.tox .tox-dialog--width-lg {
    height: 850px !important;
    @media (max-width: 1024px) {
        height: calc(100% - 40px) !important;
    }
}

.tox .tox-dialog__body-content {
    overflow: initial !important;
    max-height: min(850px, calc(100vh - 110px)) !important;
    @media (max-width: 1024px) {
        box-sizing: initial !important;
        max-height: min(850px, calc(100% - 40px)) !important;
    }
}

.tox-dialog__body-content {
    height: auto !important;
    flex-basis: auto !important;
}

.tox .tox-collection--grid .tox-collection__group {
    max-height: 220px !important;
}

:root {
    --el-color-primary: #1890ff;
    --el-color-primary-dark-2: #1064c0;
    --el-color-primary-light-3: #4dabff;
    --el-color-primary-light-5: #69c0ff;
    --el-color-primary-light-7: #91d5ff;
    --el-color-primary-light-9: #e6f7ff;

    --extra-light-fill: #FAFCFF;
    --settings-page-background: #fafbfc;
    --light-ill: #F5F7FA;
    --light-border: #E4E7ED;
    --header-actions-border: inset 0 -1px 0 0 var(--el-border-color-lighter);
    --aside-backgound: #191A23;
    --aside-menu-active-background: #27282D;
    --loadding-background: rgba(255, 255, 255, 0.8);
    --dark-border: #CDD0D6;
    --base-fill: #F0F2F5;
    --regular-text-color: #585d69;
    --light-border-color: #e7e9ec;
    --aside-right-border: 3px 0 5px rgba(0, 21, 41, .35);
    --choose-account-background: var(--el-color-primary-light-8);
    --el-text-color-regular: var(--el-text-color-primary);
    --email-scroll-content-color: rgba(25, 41, 59, 0.4);
    --search-hit-background: #ffe58f;
    --email-hover-background: #F2F6FC;
    --email-right-click-background: #FDF6EC;
    --login-border: none;
    --form-desc-color: #71717a;
    --login-switch-color: #006be6;
    --scrollbar-track-color: #A8ABB2;
    --base-border-color: #DCDFE6;
    --secondary-text-color: #909399;
    --message-block-color: rgba(0, 0, 0, 0);
    --loading-hide-transition: all 200ms;
    --vt-x: 50%;
    --vt-y: 50%;
    --vt-duration: 520ms;
    --vt-easing: ease-out;
}

.dark {
    --extra-light-fill: #191919;
    --settings-page-background: var(--extra-light-fill);
    --light-ill: #262727;
    --light-border: #414243;
    --aside-backgound: #141414;
    --aside-menu-active-background: rgba(255, 255, 255, 0.08);
    --header-actions-border: inset 0 -1px 0 0 var(--el-border-color-lighter);
    --loadding-background: rgba(0, 0, 0, 0.3);
    --dark-border: #636466;
    --base-fill: #303030;
    --regular-text-color: #bfbdbc;
    --light-border-color: #414243;
    --aside-right-border: 3px 0 5px #0A0A0A;
    --choose-account-background: #39393A;
    --email-scroll-content-color: rgba(255, 255, 255, 0.3);
    --search-hit-background: #8a6a12;
    --email-hover-background: #1D1E1F;
    --email-right-click-background: var(--email-hover-background);
    --login-border: none;
    --form-desc-color: #8D9095;
    --login-switch-color: rgb(102, 177, 255);
    --scrollbar-track-color: #8D9095;
    --base-border-color: #4C4D4F;
    --secondary-text-color: #A3A6AD;
    --message-block-color: rgba(30, 30, 30, 0.2);
    --el-border-color: #414243 !important;
}

.el-input {
    --el-input-text-color: var(--el-text-color-primary) !important;
}

/* 视图过渡，基于径向剪裁 */
html.dark,
html:not(.dark) {
    view-transition-name: root;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

/* 层级控制，确保对应方向动画在上层可见 */
html[data-theme-to="dark"]::view-transition-new(root) { z-index: 2; }
html[data-theme-to="dark"]::view-transition-old(root) { z-index: 1; }
html[data-theme-to="light"]::view-transition-old(root) { z-index: 2; }
html[data-theme-to="light"]::view-transition-new(root) { z-index: 1; }

/* 切到暗色：新视图从点击点向外扩散 */
html[data-theme-to="dark"]::view-transition-new(root) {
    clip-path: circle(0px at var(--vt-x) var(--vt-y));
    animation: vt-radial-in var(--vt-duration) var(--vt-easing) forwards;
}

/* 切到浅色：旧视图向点击点收缩 */
html[data-theme-to="light"]::view-transition-old(root) {
    clip-path: circle(var(--vt-end-radius, 0px) at var(--vt-x) var(--vt-y));
    animation: vt-radial-out var(--vt-duration) var(--vt-easing) forwards;
}

@keyframes vt-radial-in {
    from { clip-path: circle(0px at var(--vt-x) var(--vt-y)); }
    to   { clip-path: circle(var(--vt-end-radius, 0px) at var(--vt-x) var(--vt-y)); }
}

@keyframes vt-radial-out {
    from { clip-path: circle(var(--vt-end-radius, 0px) at var(--vt-x) var(--vt-y)); }
    to   { clip-path: circle(0px at var(--vt-x) var(--vt-y)); }
}
html.dark{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--el-color-primary:#409eff;--el-color-primary-light-3:#3375b9;--el-color-primary-light-5:#2a598a;--el-color-primary-light-7:#213d5b;--el-color-primary-light-8:#1d3043;--el-color-primary-light-9:#18222b;--el-color-primary-dark-2:#66b1ff;--el-color-success:#67c23a;--el-color-success-light-3:#4e8e2f;--el-color-success-light-5:#3e6b27;--el-color-success-light-7:#2d481f;--el-color-success-light-8:#25371c;--el-color-success-light-9:#1c2518;--el-color-success-dark-2:#85ce61;--el-color-warning:#e6a23c;--el-color-warning-light-3:#a77730;--el-color-warning-light-5:#7d5b28;--el-color-warning-light-7:#533f20;--el-color-warning-light-8:#3e301c;--el-color-warning-light-9:#292218;--el-color-warning-dark-2:#ebb563;--el-color-danger:#f56c6c;--el-color-danger-light-3:#b25252;--el-color-danger-light-5:#854040;--el-color-danger-light-7:#582e2e;--el-color-danger-light-8:#412626;--el-color-danger-light-9:#2a1d1d;--el-color-danger-dark-2:#f78989;--el-color-error:#f56c6c;--el-color-error-light-3:#b25252;--el-color-error-light-5:#854040;--el-color-error-light-7:#582e2e;--el-color-error-light-8:#412626;--el-color-error-light-9:#2a1d1d;--el-color-error-dark-2:#f78989;--el-color-info:#909399;--el-color-info-light-3:#6b6d71;--el-color-info-light-5:#525457;--el-color-info-light-7:#393a3c;--el-color-info-light-8:#2d2d2f;--el-color-info-light-9:#202121;--el-color-info-dark-2:#a6a9ad;--el-box-shadow:0px 12px 32px 4px #0000005c, 0px 8px 20px #000000b8;--el-box-shadow-light:0px 0px 12px #000000b8;--el-box-shadow-lighter:0px 0px 6px #000000b8;--el-box-shadow-dark:0px 16px 48px 16px #000000b8, 0px 12px 32px #000, 0px 8px 16px -8px #000;--el-bg-color-page:#0a0a0a;--el-bg-color:#141414;--el-bg-color-overlay:#1d1e1f;--el-text-color-primary:#e5eaf3;--el-text-color-regular:#cfd3dc;--el-text-color-secondary:#a3a6ad;--el-text-color-placeholder:#8d9095;--el-text-color-disabled:#6c6e72;--el-border-color-darker:#636466;--el-border-color-dark:#58585b;--el-border-color:#4c4d4f;--el-border-color-light:#414243;--el-border-color-lighter:#363637;--el-border-color-extra-light:#2b2b2c;--el-fill-color-darker:#424243;--el-fill-color-dark:#39393a;--el-fill-color:#303030;--el-fill-color-light:#262727;--el-fill-color-lighter:#1d1d1d;--el-fill-color-extra-light:#191919;--el-fill-color-blank:#141414;--el-mask-color:#000c;--el-mask-color-extra-light:#0000004d}html.dark .el-button{--el-button-disabled-text-color:#ffffff80}html.dark .el-card{--el-card-bg-color:var(--el-bg-color-overlay);--el-fill-color-blank:var(--el-card-bg-color)}html.dark .el-empty{--el-empty-fill-color-0:var(--el-color-black);--el-empty-fill-color-1:#4b4b52;--el-empty-fill-color-2:#36383d;--el-empty-fill-color-3:#1e1e20;--el-empty-fill-color-4:#262629;--el-empty-fill-color-5:#202124;--el-empty-fill-color-6:#212224;--el-empty-fill-color-7:#1b1c1f;--el-empty-fill-color-8:#1c1d1f;--el-empty-fill-color-9:#18181a}/* Make clicks pass-through */
#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  background: #29d;

  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;

  width: 100%;
  height: 2px;
}

/* Fancy blur effect */
#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
  opacity: 1.0;

  -webkit-transform: rotate(3deg) translate(0px, -4px);
      -ms-transform: rotate(3deg) translate(0px, -4px);
          transform: rotate(3deg) translate(0px, -4px);
}

/* Remove these to get rid of the spinner */
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 15px;
}

#nprogress .spinner-icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;

  border: solid 2px transparent;
  border-top-color: #29d;
  border-left-color: #29d;
  border-radius: 50%;

  -webkit-animation: nprogress-spinner 400ms linear infinite;
          animation: nprogress-spinner 400ms linear infinite;
}

.nprogress-custom-parent {
  overflow: hidden;
  position: relative;
}

.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
  position: absolute;
}

@-webkit-keyframes nprogress-spinner {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

