/* Lightweight white theme. Loaded after the legacy embedded theme. */
:root {
    color-scheme: light;
    --system-bg: #ffffff;
    --system-surface: #ffffff;
    --system-soft: #f6f7f9;
    --system-hover: #f0f1f3;
    --system-border: #dcdfe4;
    --system-text: #111111;
    --system-muted: #5f6368;
}

/* Keep every text-bearing element readable on the white system surface. */
html body :where(
    div, span, p, a, label, legend, li, dt, dd,
    h1, h2, h3, h4, h5, h6, strong, small, code,
    table, thead, tbody, tr, th, td,
    button, input, textarea, select, option
) {
    color: var(--system-text) !important;
}

html body input::placeholder,
html body textarea::placeholder {
    color: #8a8f98 !important;
    opacity: 1 !important;
}

html body .n-icon,
html body svg {
    color: var(--system-text) !important;
}

html body svg [fill="white"],
html body svg [fill="#fff"],
html body svg [fill="#ffffff"] {
    fill: var(--system-text) !important;
}

html,
body,
#app,
#appProvider {
    background: var(--system-bg) !important;
    background-image: none !important;
    color: var(--system-text) !important;
}

#app::before,
#app::after,
.v3-left-panel::after,
.view-account-container::before,
.v3-left-bg-img,
.v3-right-glow,
#v3-core-canvas {
    display: none !important;
    content: none !important;
    background: none !important;
    background-image: none !important;
    animation: none !important;
}

html body #app .n-layout,
html body #app .n-layout-scroll-container,
html body #app .n-layout-content,
html body #app .n-layout-header,
html body #app .n-layout-footer,
html body #app .n-layout-sider,
html body #app .layout,
html body #app .layout-content,
html body #app .layout-header,
html body #app .layout-footer {
    background: var(--system-bg) !important;
    background-image: none !important;
    color: var(--system-text) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html body #app .n-layout-sider {
    border-right: 1px solid var(--system-border) !important;
    box-shadow: none !important;
}

html body #app .n-menu.n-menu--vertical,
html body #app .sidebar-user-footer {
    background: var(--system-bg) !important;
    border-color: var(--system-border) !important;
    box-shadow: none !important;
}

html body #app .n-menu-item-content,
html body #app .n-menu-item-content::before {
    background: transparent !important;
    color: var(--system-text) !important;
    box-shadow: none !important;
}

html body #app .n-menu-item-content:hover,
html body #app .n-menu-item-content--selected,
html body #app .n-menu-item-content--selected::before,
html body #app .n-menu-item-content--active,
html body #app .n-menu-item-content--active::before {
    background: var(--system-hover) !important;
}

html body #app .n-menu-item-content .n-menu-item-content-header,
html body #app .n-menu-item-content .n-icon,
html body #app .n-menu-item-content--selected .n-menu-item-content-header,
html body #app .n-menu-item-content--selected .n-icon,
html body #app .n-menu-item-content--active .n-menu-item-content-header,
html body #app .n-menu-item-content--active .n-icon,
html body #app .logo .title::before,
html body #app .logo .title::after,
html body #app .layout-header-left .logo .title::before,
html body #app .layout-header-left .logo .title::after,
html body #app .home-stat-label,
html body #app .proCard .n-card-header__main {
    color: var(--system-text) !important;
    -webkit-text-fill-color: var(--system-text) !important;
}

html body #app .logo img,
html body #app .layout-header-left .logo img {
    filter: none !important;
}

html body #app .n-card,
html body #app .n-form.n-form--inline,
html body #app .remark-modal-content,
html body .n-modal,
html body .n-dialog,
html body .n-popover,
html body .n-dropdown-menu,
html body .n-base-select-menu,
html body .n-drawer-content,
html body .n-message,
html body .n-notification {
    background: var(--system-surface) !important;
    background-image: none !important;
    color: var(--system-text) !important;
    border-color: var(--system-border) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08) !important;
}

html body #app .n-list,
html body #app .n-list-item,
html body #app .n-tabs,
html body #app .n-tab-pane,
html body #app .n-collapse,
html body #app .n-collapse-item,
html body #app .n-descriptions,
html body #app .n-descriptions-table,
html body #app .n-thing,
html body #app .n-page-header,
html body #app .n-result,
html body .n-drawer,
html body .n-drawer-content-wrapper,
html body .n-modal-container,
html body .n-dialog-container {
    background-color: var(--system-bg) !important;
    background-image: none !important;
    color: var(--system-text) !important;
}

html body #app .n-card,
html body #app .n-form.n-form--inline {
    box-shadow: none !important;
}

html body #app .n-data-table,
html body #app .n-data-table-wrapper,
html body #app .n-data-table-base-table,
html body #app .n-data-table-table,
html body #app .n-data-table-th,
html body #app .n-data-table-td,
html body #app .n-table,
html body #app .n-table th,
html body #app .n-table td {
    background: var(--system-bg) !important;
    color: var(--system-text) !important;
    border-color: var(--system-border) !important;
}

html body #app table,
html body #app table thead,
html body #app table tbody,
html body #app table tr,
html body #app table th,
html body #app table td {
    background-color: var(--system-bg) !important;
    background-image: none !important;
    color: var(--system-text) !important;
    border-color: var(--system-border) !important;
}

html body #app table thead tr,
html body #app table thead th {
    background-color: var(--system-soft) !important;
}

html body #app .n-data-table-th,
html body #app .n-table th {
    background: var(--system-soft) !important;
    font-weight: 600 !important;
}

html body #app .n-data-table-tr:hover .n-data-table-td,
html body #app .n-table tr:hover td {
    background: var(--system-hover) !important;
}

html body #app .n-input,
html body #app .n-input-wrapper,
html body #app .n-base-selection,
html body #app .n-base-selection-label,
html body #app .n-input .n-input__input-el,
html body #app .n-input .n-input__textarea-el,
html body .n-base-select-option,
html body .n-date-panel,
html body .n-time-picker-panel {
    --n-color: var(--system-bg) !important;
    --n-color-focus: var(--system-bg) !important;
    --n-text-color: var(--system-text) !important;
    --n-placeholder-color: #8a8f98 !important;
    --n-border: 1px solid var(--system-border) !important;
    --n-border-hover: 1px solid #9ca3af !important;
    --n-border-focus: 1px solid #111111 !important;
    background: var(--system-bg) !important;
    background-image: none !important;
    color: var(--system-text) !important;
    border-color: var(--system-border) !important;
    box-shadow: none !important;
}

html body #app .n-input.n-input--focus,
html body #app .n-base-selection.n-base-selection--active,
html body #app .n-base-selection.n-base-selection--focus {
    box-shadow: 0 0 0 2px rgba(17, 17, 17, .08) !important;
}

html body #app .n-form-item-label,
html body #app .n-form.n-form--inline .n-form-item-label,
html body #app .n-form-item-label__text,
html body #app .n-checkbox,
html body #app .n-checkbox__label,
html body #app .n-radio,
html body #app .n-radio__label,
html body #app .n-breadcrumb,
html body #app .n-pagination,
html body #app .n-tabs-tab,
html body #app .n-card-header,
html body #app .n-card__content,
html body .n-modal *,
html body .n-dialog *,
html body .n-popover *,
html body .n-dropdown-menu *,
html body .n-base-select-menu * {
    color: var(--system-text) !important;
}

html body #app .n-button,
html body #app .custom-logout-btn,
html body #app .device-action-btn,
html body #app .remark-modal-btn-confirm,
html body #app .remark-modal-btn-cancel {
    --n-color: var(--system-bg) !important;
    --n-color-hover: var(--system-hover) !important;
    --n-color-pressed: #e5e7eb !important;
    --n-color-focus: var(--system-hover) !important;
    --n-text-color: var(--system-text) !important;
    --n-text-color-hover: var(--system-text) !important;
    --n-text-color-pressed: var(--system-text) !important;
    --n-text-color-focus: var(--system-text) !important;
    --n-border: 1px solid var(--system-border) !important;
    --n-border-hover: 1px solid #111111 !important;
    --n-border-pressed: 1px solid #111111 !important;
    --n-border-focus: 1px solid #111111 !important;
    background: var(--system-bg) !important;
    background-image: none !important;
    color: var(--system-text) !important;
    border-color: var(--system-border) !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

html body #app .n-button .n-button__content,
html body #app .n-button .n-icon,
html body .n-modal .n-button .n-button__content,
html body .n-dialog .n-button .n-button__content {
    color: var(--system-text) !important;
    -webkit-text-fill-color: var(--system-text) !important;
}

html body #app .n-switch .n-switch__rail {
    background: #d1d5db !important;
    border-color: #b8bdc5 !important;
}

html body #app .n-switch.n-switch--active .n-switch__rail {
    background: #111111 !important;
    border-color: #111111 !important;
}

html body #app .view-account,
html body #app .v3-left-panel,
html body #app .view-account-container,
html body #app .view-account-form {
    background: var(--system-bg) !important;
    background-image: none !important;
    color: var(--system-text) !important;
    border-color: var(--system-border) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    filter: none !important;
    animation: none !important;
}

html body #app .v3-left-panel {
    border-right: 1px solid var(--system-border) !important;
}

html body #app .v3-title-main,
html body #app .v3-title-sub,
html body #app .v3-left-content *,
html body #app .view-account-top-desc,
html body #app .view-account-top::after,
html body #app .v3-form-welcome-main,
html body #app .v3-form-welcome-sub,
html body #app .view-account-form .n-form-item-label,
html body #app .slider-captcha-label,
html body #app .slider-captcha-text {
    background: none !important;
    color: var(--system-text) !important;
    -webkit-text-fill-color: var(--system-text) !important;
    text-shadow: none !important;
    filter: none !important;
}

html body #app .slider-captcha-wrapper,
html body #app .slider-captcha-track,
html body #app .slider-captcha-btn {
    background: var(--system-soft) !important;
    background-image: none !important;
    color: var(--system-text) !important;
    border-color: var(--system-border) !important;
    box-shadow: none !important;
}

html body #vk-overlay,
html body #vk-grid > div,
html body #vk-footer,
html body #vk-footer > button {
    background: var(--system-bg) !important;
    background-image: none !important;
    color: var(--system-text) !important;
    border-color: var(--system-border) !important;
    box-shadow: none !important;
}

/* Device details and conditional panels are loaded after the base theme. */
html body #app .tabs-wrapper,
html body #app .image-wrapper,
html body #app .top-password-box,
html body #app .log-viewer,
html body #app .log-line,
html body #app .file-item,
html body #app .modal-content,
html body #app .tabs-view-dark-background,
html body #app .proCard,
html body #app .apk-gen-section,
html body #app .apk-gen-resource-section,
html body #app .resource-list,
html body #app .img-wrapper,
html body #app .app-download-card,
html body #app .app-icon-wrapper {
    background: var(--system-bg) !important;
    background-image: none !important;
    color: var(--system-text) !important;
    border-color: var(--system-border) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html body #app [data-v-fc0266af][style*="background: rgb(30, 30, 30)"],
html body #app [data-v-fc0266af][style*="background: rgb(42, 42, 42)"],
html body #app [data-v-fc0266af][style*="background: #1e1e1e"],
html body #app [data-v-fc0266af][style*="background: #2a2a2a"] {
    background: var(--system-bg) !important;
    color: var(--system-text) !important;
    border-color: var(--system-border) !important;
    box-shadow: none !important;
}

/* Custom account dialogs and inline panels rendered outside #app. */
html body [style*="background-color: rgba(0, 0, 0, 0.85)"],
html body [style*="background: rgb(16, 16, 20)"],
html body [style*="background-color: rgb(16, 16, 20)"],
html body [style*="background: rgb(24, 24, 28)"],
html body [style*="background-color: rgb(24, 24, 28)"],
html body [style*="background: rgb(30, 30, 30)"],
html body [style*="background-color: rgb(30, 30, 30)"],
html body [style*="background: rgb(30, 30, 34)"],
html body [style*="background-color: rgb(30, 30, 34)"],
html body [style*="background: rgb(42, 42, 42)"],
html body [style*="background-color: rgb(42, 42, 42)"] {
    background: var(--system-bg) !important;
    background-color: var(--system-bg) !important;
    background-image: none !important;
    color: var(--system-text) !important;
    border-color: var(--system-border) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
}

html body #app .sidebar-user-footer,
html body #app .n-card,
html body #app .view-account-form,
html body #app .slider-captcha-wrapper,
html body #app .slider-captcha-btn,
html body #app .n-button,
html body #app .n-menu-item-content {
    transition-duration: .12s !important;
    transition-property: color, background-color, border-color !important;
}

@media (prefers-reduced-motion: reduce) {
    html body #app *,
    html body #app *::before,
    html body #app *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media (max-width: 1000px) {
    html body #app .view-account {
        display: block !important;
        height: 100vh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    html body #app .v3-left-panel {
        display: none !important;
    }

    html body #app .view-account-container {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 100vh !important;
        height: auto !important;
        padding: 28px 20px !important;
        justify-content: flex-start !important;
        overflow: visible !important;
    }

    html body #app .view-account-top {
        margin: 0 auto 24px !important;
    }

    html body #app .view-account-top-desc {
        font-size: 32px !important;
    }

    html body #app .view-account-form {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 440px !important;
        top: 0 !important;
        padding: 32px 24px !important;
    }
}