:root {
    --yj-primary: #1677ff;
    --yj-secondary: #5268e9;
    --yj-sidebar: #172f53;
    --yj-page-bg: #eef5ff;
    --yj-text: #162033;
    --yj-text-muted: #667085;
    --yj-border: rgba(255, 255, 255, .86);
    --yj-border-soft: rgba(105, 132, 168, .16);
    --yj-glass-frame: rgba(255, 255, 255, .66);
    --yj-glass-card: rgba(255, 255, 255, .78);
    --yj-solid-data: rgba(255, 255, 255, .95);
    --yj-shadow-frame: 0 18px 48px rgba(55, 82, 120, .12);
    --yj-shadow-card: 0 10px 28px rgba(55, 82, 120, .09);
    --yj-radius-page: 24px;
    --yj-radius-card: 16px;
    --yj-radius-control: 10px;
    --yj-blur: 18px;
    --yj-blur-strong: 22px;
    --yj-motion-fast: 160ms;
    --yj-motion-normal: 220ms;
}

.professional-glass-surface {
    border: 1px solid var(--yj-border);
    background: var(--yj-glass-card);
    box-shadow: var(--yj-shadow-card);
    -webkit-backdrop-filter: blur(var(--yj-blur)) saturate(145%);
    backdrop-filter: blur(var(--yj-blur)) saturate(145%);
}

@media (prefers-reduced-motion: reduce) {
    .app-shell--professional-glass *,
    .app-login--professional-glass * {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.app-shell--professional-glass::before,
.app-shell--professional-glass::after,
.app-login--professional-glass::before {
    pointer-events: none;
}

.app-shell--professional-glass {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--yj-text);
    background:
        radial-gradient(circle at 8% 8%, rgba(111, 187, 255, .22), transparent 30%),
        radial-gradient(circle at 88% 16%, rgba(183, 135, 255, .15), transparent 28%),
        linear-gradient(145deg, var(--yj-page-bg), #f9f7ff 50%, #eefaf7);
}

.app-shell--professional-glass::before,
.app-shell--professional-glass::after {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    content: "";
}

.app-shell--professional-glass::before {
    top: -120px;
    right: -90px;
    width: 320px;
    height: 320px;
    background: rgba(69, 159, 255, .14);
}

.app-shell--professional-glass::after {
    bottom: -150px;
    left: 30%;
    width: 280px;
    height: 280px;
    background: rgba(161, 112, 255, .11);
}

.app-shell__sider,
.app-shell__main {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.app-shell__sider,
.app-shell__sider .ant-layout-sider,
.app-sidebar {
    height: 100%;
    background: linear-gradient(180deg, rgba(16, 30, 56, .93), rgba(23, 47, 83, .86));
    -webkit-backdrop-filter: blur(var(--yj-blur-strong));
    backdrop-filter: blur(var(--yj-blur-strong));
}

.app-shell__sider {
    border-right: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 12px 0 32px rgba(27, 48, 80, .10);
}

.app-sidebar__brand {
    background: transparent;
}

.app-sidebar__menu,
.app-sidebar__menu.ant-menu,
.app-sidebar__menu .ant-menu,
.app-sidebar__menu .ant-menu-submenu-title {
    background: transparent !important;
}

.app-sidebar__menu .ant-menu-item,
.app-sidebar__menu .ant-menu-submenu-title {
    margin-inline: 10px;
    width: calc(100% - 20px);
    border-radius: 11px;
    color: #aebed3;
    transition: color var(--yj-motion-fast) ease, background var(--yj-motion-fast) ease;
}

.app-sidebar__menu .ant-menu-item:hover,
.app-sidebar__menu .ant-menu-submenu-title:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .08) !important;
}

.app-sidebar__menu .ant-menu-item-selected {
    color: #fff !important;
    background: rgba(255, 255, 255, .15) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}

.app-shell__header {
    position: relative;
    z-index: 2;
    border: 1px solid var(--yj-border);
    border-top: 0;
    border-radius: 0 0 var(--yj-radius-card) var(--yj-radius-card);
    background: var(--yj-glass-frame);
    box-shadow: var(--yj-shadow-card);
    -webkit-backdrop-filter: blur(var(--yj-blur)) saturate(145%);
    backdrop-filter: blur(var(--yj-blur)) saturate(145%);
}

.app-shell__tabs .ant-tabs-nav {
    border: 1px solid rgba(255, 255, 255, .74);
    border-radius: 12px;
    background: rgba(255, 255, 255, .58);
    box-shadow: 0 7px 20px rgba(55, 82, 120, .07);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.app-shell__tabs .ant-tabs-tab-active {
    border-color: rgba(22, 119, 255, .18) !important;
    background: rgba(255, 255, 255, .9) !important;
}

.app-shell__tabs .ant-tabs-content-holder {
    background: transparent;
}

.app-login--professional-glass {
    position: relative;
    display: flex;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    align-items: center;
    justify-content: flex-end;
    overflow-x: hidden;
    overflow-y: auto;
    background-image:
        linear-gradient(125deg, rgba(16, 47, 86, .44), rgba(82, 104, 233, .20)),
        url("/assets/imgs/login_background.jpeg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.app-login--professional-glass::before {
    position: absolute;
    inset: 0;
    content: "";
    background:
        radial-gradient(circle at 78% 24%, rgba(115, 190, 255, .28), transparent 30%),
        radial-gradient(circle at 20% 84%, rgba(182, 136, 255, .20), transparent 34%);
}

.app-login__panel {
    position: relative;
    z-index: 1;
    display: flex;
    box-sizing: border-box;
    width: max(25%, 340px);
    height: max(40%, 600px);
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    margin-right: 15%;
    overflow-y: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: var(--yj-radius-page);
    background: rgba(255, 255, 255, .74);
    box-shadow: 0 24px 70px rgba(14, 38, 74, .28);
    -webkit-backdrop-filter: blur(var(--yj-blur-strong)) saturate(145%);
    backdrop-filter: blur(var(--yj-blur-strong)) saturate(145%);
    animation: yj-login-enter var(--yj-motion-normal) ease-out both;
}

.app-login__title {
    display: flex;
    height: 15%;
    align-items: center;
    justify-content: center;
    padding-top: 20px;
    color: var(--yj-text);
    font-family: "Microsoft YaHei", sans-serif;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 2px;
}

.app-login__tabs .ant-tabs-tab .ant-typography,
.app-login__tabs .ant-checkbox-wrapper {
    color: var(--yj-text) !important;
}

.app-login__tabs .ant-input-affix-wrapper,
.app-login__tabs .ant-btn {
    width: 100%;
    padding: 10px;
    border-radius: var(--yj-radius-control);
    font-family: "Microsoft YaHei", sans-serif;
    font-size: 16px;
    letter-spacing: 1px;
}

.app-login--professional-glass #login-submit {
    border: 0;
    background: linear-gradient(135deg, var(--yj-primary), var(--yj-secondary));
    box-shadow: 0 10px 24px rgba(37, 107, 229, .26);
}

@keyframes yj-login-enter {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
    .app-login--professional-glass {
        justify-content: center;
        padding: 16px;
    }

    .app-login__panel {
        width: min(100%, 420px);
        height: min(680px, calc(100vh - 32px));
        margin-right: 0;
    }
}

.app-shell--professional-glass .ant-card,
.app-shell--professional-glass .ant-collapse {
    border: 1px solid var(--yj-border);
    border-radius: var(--yj-radius-card);
    background: var(--yj-glass-card);
    box-shadow: var(--yj-shadow-card);
    -webkit-backdrop-filter: blur(var(--yj-blur)) saturate(135%);
    backdrop-filter: blur(var(--yj-blur)) saturate(135%);
}

.app-shell--professional-glass .ant-card-head,
.app-shell--professional-glass .ant-collapse-header {
    border-color: var(--yj-border-soft);
    color: var(--yj-text);
}

.app-shell--professional-glass .ant-table-wrapper {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .92);
    border-radius: var(--yj-radius-card);
    background: var(--yj-solid-data);
    box-shadow: var(--yj-shadow-card);
}

.app-shell--professional-glass .ant-table,
.app-shell--professional-glass .ant-table-container,
.app-shell--professional-glass .ant-table-cell-fix-left,
.app-shell--professional-glass .ant-table-cell-fix-right {
    background: var(--yj-solid-data);
}

.app-shell--professional-glass .ant-table-thead > tr > th {
    border-color: rgba(105, 132, 168, .13);
    background: rgba(234, 241, 250, .92);
    color: #506078;
}

.app-shell--professional-glass .ant-table-tbody > tr > td {
    border-color: rgba(105, 132, 168, .11);
}

.app-shell--professional-glass .ant-table-tbody > tr:hover > td {
    background: #f2f7ff !important;
}

.app-shell--professional-glass .ant-input,
.app-shell--professional-glass .ant-input-affix-wrapper,
.app-shell--professional-glass .ant-select-selector,
.app-shell--professional-glass .ant-picker,
.app-shell--professional-glass .ant-input-number,
.app-shell--professional-glass .ant-cascader-picker {
    border-color: rgba(93, 122, 159, .20) !important;
    border-radius: var(--yj-radius-control) !important;
    background: rgba(255, 255, 255, .88) !important;
}

.app-shell--professional-glass .ant-input:focus,
.app-shell--professional-glass .ant-input-affix-wrapper-focused,
.app-shell--professional-glass .ant-select-focused .ant-select-selector,
.app-shell--professional-glass .ant-picker-focused {
    border-color: var(--yj-primary) !important;
    box-shadow: 0 0 0 3px rgba(22, 119, 255, .12) !important;
}

.app-shell--professional-glass .ant-btn {
    border-radius: var(--yj-radius-control);
    transition: transform var(--yj-motion-fast) ease, box-shadow var(--yj-motion-fast) ease;
}

.app-shell--professional-glass .ant-btn-primary:not(.ant-btn-dangerous) {
    border-color: transparent;
    background: linear-gradient(135deg, var(--yj-primary), var(--yj-secondary));
    box-shadow: 0 8px 18px rgba(37, 107, 229, .22);
}

.app-shell--professional-glass .ant-btn-primary:not(.ant-btn-dangerous):not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 11px 24px rgba(37, 107, 229, .28);
}

.app-shell--professional-glass .ant-btn-primary.ant-btn-dangerous {
    border-color: #ff4d4f;
    background: #ff4d4f;
    box-shadow: 0 8px 18px rgba(255, 77, 79, .22);
}

.app-shell--professional-glass .ant-btn-primary.ant-btn-dangerous:not(:disabled):hover {
    border-color: #ff7875;
    background: #ff7875;
    transform: translateY(-1px);
    box-shadow: 0 11px 24px rgba(255, 77, 79, .28);
}

.app-shell--professional-glass .ant-btn-primary.ant-btn-dangerous:not(:disabled):focus,
.app-shell--professional-glass .ant-btn-primary.ant-btn-dangerous:not(:disabled):focus-visible {
    border-color: #ff7875;
    box-shadow: 0 0 0 3px rgba(255, 77, 79, .22);
}

.app-shell--professional-glass .ant-btn-primary.ant-btn-dangerous:disabled {
    border-color: #ffccc7;
    background: #ffccc7;
    color: rgba(255, 255, 255, .90);
    box-shadow: none;
    transform: none;
}

.app-shell--professional-glass .ant-pagination-item,
.app-shell--professional-glass .ant-pagination-prev,
.app-shell--professional-glass .ant-pagination-next {
    border-radius: 9px;
    background: rgba(255, 255, 255, .86);
}

.ant-modal-content,
.ant-drawer-content,
.ant-dropdown-menu,
.ant-popover-inner {
    border: 1px solid rgba(255, 255, 255, .90);
    border-radius: var(--yj-radius-card) !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 24px 70px rgba(27, 48, 80, .18) !important;
    -webkit-backdrop-filter: blur(var(--yj-blur-strong));
    backdrop-filter: blur(var(--yj-blur-strong));
}

.ant-modal-mask,
.ant-drawer-mask {
    background: rgba(20, 38, 65, .36) !important;
}

.ant-tooltip-inner {
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    background: rgba(23, 47, 83, .96);
}

.ant-message-notice-content,
.ant-notification-notice {
    border: 1px solid rgba(255, 255, 255, .90);
    border-radius: 12px;
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--yj-shadow-card);
    -webkit-backdrop-filter: blur(var(--yj-blur));
    backdrop-filter: blur(var(--yj-blur));
}

.ai-action-feedback.ant-notification-notice {
    width: calc(100vw - 32px);
    max-width: 680px;
    padding: 18px 46px 18px 20px;
    border: 1px solid rgba(255, 255, 255, .92);
    border-left: 4px solid var(--yj-primary);
    border-radius: 16px;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, .97),
        rgba(245, 249, 255, .91)
    );
    box-shadow: 0 18px 54px rgba(27, 48, 80, .18);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);
    animation: ai-action-feedback-enter .24s ease-out both;
}

.ai-action-feedback--success.ant-notification-notice {
    border-left-color: #52c41a;
}

.ai-action-feedback--error.ant-notification-notice {
    border-left-color: #ff4d4f;
}

.ai-action-feedback .ant-notification-notice-message {
    margin-bottom: 5px;
    color: var(--yj-text);
    font-size: 15px;
    font-weight: 650;
}

.ai-action-feedback .ant-notification-notice-description {
    color: var(--yj-text-secondary);
    line-height: 1.65;
}

@keyframes ai-action-feedback-enter {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.app-shell--professional-glass .ai-workbench-page {
    background: transparent;
    color: var(--yj-text);
}

.app-shell--professional-glass .ai-workbench-card,
.app-shell--professional-glass .ai-workbench-main-card,
.app-shell--professional-glass .ai-workbench-preview-card,
.app-shell--professional-glass .ai-workbench-source-collapse,
.app-shell--professional-glass .ai-draft-toolbar-card {
    border-color: var(--yj-border) !important;
    border-radius: var(--yj-radius-card) !important;
    background: var(--yj-glass-card) !important;
    box-shadow: var(--yj-shadow-card);
}

.app-shell--professional-glass .ai-workbench-layout-frame,
.app-shell--professional-glass .ai-workbench-rich-editor,
.app-shell--professional-glass .ai-workbench-preview-frame {
    border-color: rgba(93, 122, 159, .18);
    background: var(--yj-solid-data);
}

.app-shell--professional-glass .ai-workbench-editor-toolbar,
.app-shell--professional-glass .ai-workbench-image-toolbar,
.app-shell--professional-glass .ai-workbench-decorative-item {
    border-color: rgba(93, 122, 159, .15);
    background: rgba(248, 251, 255, .90);
}

.app-shell--professional-glass .ai-category-nav__label {
    border-color: rgba(22, 119, 255, .28);
    border-radius: 9px;
    background: rgba(255, 255, 255, .72);
    color: #607087;
}

.app-shell--professional-glass .ai-category-nav__item {
    color: var(--yj-text);
}

.app-shell--professional-glass .ai-category-nav__item--active {
    border-radius: 8px;
    background: rgba(22, 119, 255, .11);
    color: var(--yj-primary);
}

.app-shell--professional-glass .ai-category-nav__add {
    color: var(--yj-primary);
}

.app-shell--professional-glass .ai-draft-folder-nav {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(93, 122, 159, .16);
    border-radius: 12px;
    background: rgba(255, 255, 255, .66);
    box-shadow: 0 8px 24px rgba(25, 55, 95, .06);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    flex-wrap: wrap;
}

.app-shell--professional-glass .ai-draft-folder-nav .ant-radio-group {
    display: flex;
    flex: 1 1 320px;
    gap: 6px;
    flex-wrap: wrap;
}

.app-shell--professional-glass .ai-draft-folder-nav .ant-radio-button-wrapper {
    border-radius: 8px;
}

@media (max-width: 768px) {
    .app-shell--professional-glass {
        --yj-radius-page: 18px;
        --yj-radius-card: 13px;
        --yj-blur: 12px;
        --yj-blur-strong: 15px;
    }

    .app-shell--professional-glass .app-shell__header {
        border-radius: 0 0 12px 12px;
    }
}

.app-shell--professional-glass .ai-storage-settings-page {
    color: var(--yj-text);
}

.app-shell--professional-glass .ai-storage-settings-page .ant-card {
    border-color: var(--yj-border);
    border-radius: var(--yj-radius-card);
    background: var(--yj-glass-card);
    box-shadow: var(--yj-shadow-card);
    -webkit-backdrop-filter: blur(var(--yj-blur));
    backdrop-filter: blur(var(--yj-blur));
}

.app-shell--professional-glass .ai-storage-settings-page .ant-input,
.app-shell--professional-glass .ai-storage-settings-page .ant-select-selector {
    border-color: rgba(93, 122, 159, .22);
    background: rgba(255, 255, 255, .82);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .professional-glass-surface,
    .app-shell__header,
    .app-shell__tabs .ant-tabs-nav,
    .app-shell--professional-glass .ant-card,
    .app-shell--professional-glass .ai-storage-settings-page .ant-card,
    .app-shell--professional-glass .ant-collapse,
    .app-login__panel,
    .ant-message-notice-content,
    .ant-notification-notice,
    .ai-action-feedback.ant-notification-notice {
        background: rgba(255, 255, 255, .98);
    }

    .app-shell--professional-glass .ai-draft-folder-nav {
        background: rgba(255, 255, 255, .98);
    }

    .app-shell__sider,
    .app-shell__sider .ant-layout-sider,
    .app-sidebar {
        background: linear-gradient(180deg, #10203b, #172f53);
    }

    .ant-modal-content,
    .ant-drawer-content,
    .ant-dropdown-menu,
    .ant-popover-inner,
    .app-shell--professional-glass .ai-workbench-card,
    .app-shell--professional-glass .ai-workbench-main-card,
    .app-shell--professional-glass .ai-workbench-preview-card,
    .app-shell--professional-glass .ai-workbench-source-collapse,
    .app-shell--professional-glass .ai-draft-toolbar-card {
        background: rgba(255, 255, 255, .98) !important;
    }
}