/* Keep the shared content wrapper free of filters/transforms: dialogs use fixed positioning. */
:root {
    --mynq-page-gutter: clamp(12px, 2vw, 32px);
    --mynq-glass-base: #e7eff7;
    --mynq-text: #203448;
    --mynq-heading: #16344f;
    --mynq-muted: #53677b;
    --mynq-link: #155a9d;
    --mynq-glass-edge: rgba(255, 255, 255, 0.76);
    --mynq-glass-shadow: 0 12px 34px -18px rgba(36, 66, 98, 0.24), 0 3px 9px -5px rgba(36, 66, 98, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.72);
    --mynq-popup-bg: #f4f7fa;
    --mynq-control-bg: #f7fafd;
    --mynq-control-soft: #edf3f8;
    --mynq-tab-text: #405569;
    --mynq-tab-accent: #165d88;
}

/* Chengyue light-glass background: fixed blue, lilac, mint and warm glows. */
html {
    background: var(--mynq-glass-base);
}

body {
    height: auto;
    min-height: 100%;
    background: var(--mynq-glass-base);
    color: var(--mynq-text);
    isolation: isolate;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at 8% 8%, rgba(110, 171, 231, 0.42), transparent 54%),
                radial-gradient(ellipse at 90% 18%, rgba(167, 181, 221, 0.28), transparent 52%),
                radial-gradient(ellipse at 85% 90%, rgba(130, 204, 208, 0.30), transparent 56%),
                radial-gradient(ellipse at 42% 64%, rgba(251, 240, 226, 0.48), transparent 54%);
}

#app {
    min-width: 0;
    min-height: 100vh;
}

#app > .el-header {
    padding-right: var(--mynq-page-gutter);
    padding-left: var(--mynq-page-gutter);
    background: #f4f7fa;
    border-bottom: 1px solid var(--mynq-glass-edge);
    box-shadow: 0 4px 20px rgba(12, 25, 43, 0.1);
}

.mynq-header-row,
.mynq-body > div {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0 auto;
}

.mynq-body {
    min-width: 0;
    padding: 20px var(--mynq-page-gutter);
}

.mynq-header-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mynq-nav-btn {
    background: rgba(255, 255, 255, 0.5);
    color: #24699c;
}

.mynq-nav-btn:hover {
    color: #1b6398;
}

.mynq-body .detail-tabs {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.mynq-body .el-card {
    background: #f4f7fa;
    border-color: var(--mynq-glass-edge);
    border-radius: 12px;
    box-shadow: var(--mynq-glass-shadow);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.mynq-body .el-card__header {
    border-bottom-color: rgba(92, 114, 138, 0.16);
}

.mynq-body .el-card .text-grey,
.mynq-body .report-card .title sub {
    color: #52616f;
}

.mynq-body .node-box .node .node-status-online,
.mynq-body .mynode .node-status-online {
    color: #2d6f1c;
}

.mynq-body .node-box .node .node-status-offline,
.mynq-body .mynode .node-status-offline {
    color: #82530a;
}

.mynq-body .node-box {
    background: #eff5fa;
    border: 1px solid var(--mynq-glass-edge);
    border-radius: 16px;
}

.mynq-body .node-box > .el-card__body::after {
    content: "";
    display: table;
    clear: both;
}

.node-list-mode-row {
    z-index: 1;
}

.el-main .node-box .node {
    box-sizing: border-box;
    width: calc(25% - 20px);
    max-width: calc(100% - 20px);
    min-width: 0;
    margin: 10px;
    float: left;
}

.el-main .node-box .node .node-value {
    width: calc(100% - 46px);
}

.el-main .node-box .node .el-card__body {
    height: auto;
    min-height: 151px;
}

.detail-tabs > .el-tabs__content {
    border-radius: 12px;
}

.detail-tabs > .el-tabs__content > .el-tab-pane {
    background: #f2f6fa;
}

/* Keep Element UI's measured widths and transform-based tab scrolling intact. */
.mynq-body .el-tabs > .el-tabs__header {
    margin-bottom: 12px;
    border: 0;
}

.mynq-body .el-tabs__nav-wrap::after,
.mynq-body .el-tabs__nav[role="tablist"] > .el-tabs__active-bar {
    display: none;
}

.mynq-body .el-tabs__nav[role="tablist"] {
    box-sizing: border-box;
    padding: 4px;
    border: 1px solid var(--mynq-glass-edge);
    border-radius: 12px;
    background: #edf3f8;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 5px 16px rgba(12, 25, 43, 0.12);
}

.mynq-body .el-tabs__header .el-tabs__nav[role="tablist"] > .el-tabs__item {
    height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mynq-tab-text);
    box-shadow: none;
    line-height: 36px;
    transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.mynq-body .el-tabs__header .el-tabs__nav[role="tablist"] > .el-tabs__item:hover {
    background: rgba(255, 255, 255, 0.6);
    color: var(--mynq-tab-accent);
}

.mynq-body .el-tabs__header .el-tabs__nav[role="tablist"] > .el-tabs__item.is-active {
    background: #e4f2fc;
    color: var(--mynq-tab-accent);
    box-shadow: inset 0 0 0 1px rgba(68, 133, 172, 0.22), 0 2px 6px rgba(30, 75, 104, 0.1);
}

.mynq-body .el-tabs__header .el-tabs__nav[role="tablist"] > [role="tab"]:focus,
.mynq-body .el-tabs__header .el-tabs__nav[role="tablist"] > [role="tab"]:focus-visible,
.mynq-body .el-tabs__header .el-tabs__nav[role="tablist"] > [role="tab"].is-focus {
    outline: none;
}

.mynq-body .el-tabs__header .el-tabs__nav[role="tablist"] > .el-tabs__item.is-disabled {
    color: #788797;
    background: transparent;
    box-shadow: none;
    cursor: not-allowed;
}

.mynq-body .el-tabs__nav-prev,
.mynq-body .el-tabs__nav-next {
    border-radius: 8px;
    color: var(--mynq-link);
    line-height: 46px;
}

.mynq-body .report-card .el-tabs__nav-prev,
.mynq-body .report-card .el-tabs__nav-next {
    color: var(--mynq-tab-accent);
}

.mynq-drawer {
    --mynq-divider-surface: #fff;
}

:is(.mynq-body, .mynq-drawer) .el-divider--horizontal {
    background-color: rgba(92, 114, 138, 0.24);
}

:is(.mynq-body, .mynq-drawer) .el-divider__text {
    box-sizing: border-box;
    max-width: calc(100% - 24px);
    padding: 0 10px;
    background: var(--mynq-divider-surface, #edf3f8);
    color: #405569;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

:is(.mynq-body, .mynq-drawer) .el-divider__text.is-left {
    left: 12px;
}

/* Split the line around the label instead of painting an opaque box over glass. */
@supports selector(.el-divider:has(.el-divider__text)) {
    :is(.mynq-body, .mynq-drawer) .el-divider--horizontal:has(> .el-divider__text) {
        display: flex;
        align-items: center;
        gap: 10px;
        height: auto;
        min-height: 24px;
        background: transparent;
    }

    :is(.mynq-body, .mynq-drawer) .el-divider--horizontal:has(> .el-divider__text)::before,
    :is(.mynq-body, .mynq-drawer) .el-divider--horizontal:has(> .el-divider__text)::after {
        content: "";
        flex: 1 1 0;
        height: 1px;
        background: rgba(92, 114, 138, 0.24);
    }

    :is(.mynq-body, .mynq-drawer) .el-divider--horizontal:has(> .el-divider__text.is-left)::before,
    :is(.mynq-body, .mynq-drawer) .el-divider--horizontal:has(> .el-divider__text.is-right)::after {
        flex: 0 0 12px;
    }

    :is(.mynq-body, .mynq-drawer) .el-divider--horizontal > .el-divider__text {
        position: static;
        flex: 0 1 auto;
        min-width: 0;
        max-width: calc(100% - 44px);
        padding: 0;
        background: transparent;
        transform: none;
    }

    :is(.mynq-body, .mynq-drawer) .el-divider__text .el-checkbox {
        display: inline-flex;
        align-items: center;
        max-width: 100%;
        white-space: normal;
    }

    :is(.mynq-body, .mynq-drawer) .el-divider__text .el-checkbox__input {
        flex: 0 0 auto;
    }

    :is(.mynq-body, .mynq-drawer) .el-divider__text .el-checkbox__label {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

.mynq-body .el-descriptions .el-descriptions__body {
    background: transparent;
}

.mynq-body .el-descriptions__table {
    table-layout: fixed;
    width: 100%;
}

.mynq-body .el-descriptions-item__content {
    overflow-wrap: anywhere;
}

.mynq-body .overview-card {
    box-sizing: border-box;
    width: calc((100% - 32px) / 3);
    max-width: 100%;
    margin: 0 16px 12px 0;
}

.mynq-body .overview-card:last-child {
    margin-right: 0;
}

.report-card .el-tab-pane,
.report-card .el-tabs__nav .el-tabs__item {
    background: transparent;
}

.report-card .el-tab-pane {
    padding: 16px 0 0;
}

/* Keep the login card in normal flow when the keyboard or a challenge needs more room. */
.mynq-login-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    box-sizing: border-box;
    min-height: calc(100vh - 120px);
    min-height: calc(100dvh - 120px);
    padding: 28px 0;
}

.mynq-body .login-card {
    box-sizing: border-box;
    min-width: 0;
    position: relative;
    inset: auto;
    width: 420px;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 20px;
    transform: none;
}

.mynq-body .login-card.el-card > .el-card__body {
    padding: 32px;
}

.mynq-login-popover,
.mynq-login-drawer {
    box-sizing: border-box;
    max-width: 100vw;
    color: #30485c;
    background: #f4f7fa;
    border: 1px solid var(--mynq-glass-edge);
    box-shadow: 0 16px 48px rgba(12, 25, 43, 0.22);
}

.mynq-login-popover {
    padding: 24px;
    border-radius: 16px;
}

.mynq-login-popover.el-popper[x-placement^="bottom"] .popper__arrow {
    border-bottom-color: var(--mynq-glass-edge);
}

.mynq-login-popover.el-popper[x-placement^="bottom"] .popper__arrow::after {
    border-bottom-color: #f4f7fa;
}

.mynq-login-drawer.el-drawer {
    width: min(100%, 420px) !important;
    border-radius: 20px 0 0 20px;
}

.mynq-login-drawer .el-drawer__header {
    margin-bottom: 12px;
    color: #405569;
}

.mynq-login-drawer .el-drawer__body {
    overflow-y: auto;
    padding: 8px 24px max(24px, env(safe-area-inset-bottom));
}

.mynq-login-drawer .drawer-content {
    height: auto;
    min-height: 100%;
}

.mynq-login-heading {
    margin-bottom: 26px;
    text-align: left;
}

.mynq-login-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 15px;
    background: linear-gradient(140deg, #d2ecee, #dce8fc);
    color: #216b91;
    font-size: 24px;
    box-shadow: 0 6px 16px rgba(42, 95, 125, 0.09);
}

.mynq-login-title {
    margin: 0;
    color: #263e52;
    font-size: 24px;
    font-weight: 650;
    line-height: 1.4;
}

.mynq-login-subtitle {
    margin: 8px 0 0;
    color: #52687b;
    font-size: 13px;
    line-height: 1.7;
}

.mynq-login-form .el-form-item {
    margin-bottom: 22px;
}

.mynq-login-form .el-form-item__label {
    padding-bottom: 7px;
    color: #405569;
    font-weight: 500;
    line-height: 1.6;
}

.mynq-login-form .el-input__inner {
    height: 44px;
    border-color: rgba(87, 117, 144, 0.26);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.7);
    color: #263e52;
    font-size: 16px;
    line-height: 44px;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.mynq-login-form .el-input__inner::placeholder {
    color: #687d8e;
}

.mynq-login-form .el-input__inner:focus {
    border-color: #397d9f;
    box-shadow: 0 0 0 3px rgba(62, 136, 174, 0.15);
}

.mynq-login-form .el-form-item.is-error .el-input__inner {
    border-color: #c75454;
}

.mynq-login-form .el-form-item__error {
    color: #a6333c;
}

.mynq-login-submit.el-button--primary {
    width: 100%;
    min-height: 44px;
    border: 1px solid #2b6d91;
    border-radius: 10px;
    background: linear-gradient(110deg, #276e92, #397d9f);
    color: #fff;
    font-size: 15px;
    box-shadow: 0 5px 14px rgba(33, 90, 120, 0.17);
    transition: background-color 160ms ease, box-shadow 160ms ease;
}

.mynq-login-submit.el-button--primary:not(.is-disabled):hover {
    background: #216385;
    box-shadow: 0 7px 18px rgba(33, 90, 120, 0.24);
}

.mynq-login-submit.el-button--primary.is-disabled {
    border-color: #7797aa;
    background: #7797aa;
    box-shadow: none;
}

:is(.mynq-login-form, .mynq-login-popover, .mynq-login-drawer) button:focus-visible {
    outline: 2px solid #216b91;
    outline-offset: 3px;
}

.mynq-turnstile {
    min-width: 0;
    margin: 4px 0 20px;
    color: #52687b;
}

.mynq-turnstile-widget {
    display: flex;
    justify-content: center;
    min-width: 0;
}

.mynq-turnstile-status {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.mynq-turnstile-retry {
    min-height: 36px;
    color: #216b91;
}

/* Login feedback is appended to body by Element UI, outside the form scope. */
.el-notification {
    box-sizing: border-box;
    max-width: calc(100vw - 32px);
}

/* Element keeps ownership of column widths, fixed layers and scroll geometry. */
:is(.mynq-body, .mynq-drawer, .el-dialog) .el-table {
    --mynq-table-surface: #f3f7fa;
    --mynq-table-fixed: #f3f7fa;
    --mynq-table-header: #e6eef5;
    --mynq-table-stripe: #eaf1f7;
    --mynq-table-hover: #dfedf5;
    --mynq-table-current: #d6e9f4;
    --mynq-table-border: rgba(87, 117, 144, 0.18);
    border: 1px solid var(--mynq-table-border);
    border-radius: 12px;
    background: var(--mynq-table-surface);
    color: #344d61;
    box-shadow: 0 4px 14px rgba(12, 25, 43, 0.06);
}

:is(.mynq-body, .mynq-drawer, .el-dialog) .el-table tr {
    background: transparent;
}

:is(.mynq-body, .mynq-drawer, .el-dialog) .el-table th.el-table__cell {
    background: var(--mynq-table-header);
    color: #3b566b;
    font-weight: 600;
}

:is(.mynq-body, .mynq-drawer, .el-dialog) .el-table :is(th, td).el-table__cell {
    border-color: var(--mynq-table-border);
}

:is(.mynq-body, .mynq-drawer, .el-dialog) .el-table::before,
:is(.mynq-body, .mynq-drawer, .el-dialog) .el-table::after,
:is(.mynq-body, .mynq-drawer, .el-dialog) .el-table__fixed::before,
:is(.mynq-body, .mynq-drawer, .el-dialog) .el-table__fixed-right::before {
    background-color: var(--mynq-table-border);
}

:is(.mynq-body, .mynq-drawer, .el-dialog) .el-table__body tr.el-table__row--striped td.el-table__cell {
    background: var(--mynq-table-stripe);
}

/* Fixed cells must cover the horizontally scrolling content underneath. */
:is(.mynq-body, .mynq-drawer, .el-dialog) :is(.el-table__fixed, .el-table__fixed-right) td.el-table__cell,
:is(.mynq-body, .mynq-drawer, .el-dialog) .el-table__footer-wrapper td.el-table__cell {
    background: var(--mynq-table-fixed);
}

:is(.mynq-body, .mynq-drawer, .el-dialog) :is(.el-table__fixed, .el-table__fixed-right) tr.el-table__row--striped td.el-table__cell {
    background: var(--mynq-table-stripe);
}

:is(.mynq-body, .mynq-drawer, .el-dialog) .el-table .el-table__body tr:is(:hover, .hover-row) > td.el-table__cell {
    background: var(--mynq-table-hover);
}

:is(.mynq-body, .mynq-drawer, .el-dialog) .el-table .el-table__body tr.current-row > td.el-table__cell {
    background: var(--mynq-table-current);
}

:is(.mynq-body, .mynq-drawer, .el-dialog) .el-table__fixed-right-patch {
    border-color: var(--mynq-table-border);
    background: var(--mynq-table-header);
}

:is(.mynq-body, .mynq-drawer, .el-dialog) .el-table .el-table__empty-text {
    color: #5d7385;
}

:is(.mynq-body, .mynq-drawer, .el-dialog) .el-table .sort-caret.ascending {
    border-bottom-color: #8c9dac;
}

:is(.mynq-body, .mynq-drawer, .el-dialog) .el-table .sort-caret.descending {
    border-top-color: #8c9dac;
}

:is(.mynq-body, .mynq-drawer, .el-dialog) .el-table .ascending .sort-caret.ascending {
    border-bottom-color: #216b91;
}

:is(.mynq-body, .mynq-drawer, .el-dialog) .el-table .descending .sort-caret.descending {
    border-top-color: #216b91;
}

:is(.mynq-body, .mynq-drawer, .el-dialog) .el-table .el-loading-mask {
    background: rgba(239, 246, 250, 0.88);
}

:is(.mynq-body, .mynq-drawer, .el-dialog) .el-table .el-loading-spinner .path {
    stroke: #216b91;
}

.sort-drawer .el-scrollbar__view > div {
    max-width: 100%;
}

.el-drawer {
    max-width: 100%;
}

/* Element appends these panels to body; custom drawer classes may be on the wrapper. */
.el-message-box,
.el-drawer {
    --mynq-divider-surface: #f4f7fa;
    box-sizing: border-box;
    color: #30485c;
    background: #f4f7fa;
    border: 1px solid var(--mynq-glass-edge);
    box-shadow: 0 16px 48px rgba(12, 25, 43, 0.22);
}

.el-message-box {
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    border-radius: 16px;
    overflow-y: auto;
}

.el-drawer.rtl {
    border-radius: 18px 0 0 18px;
}

.el-message-box__title {
    padding-right: 24px;
    color: #263e52;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.el-message-box__content,
.el-drawer__header {
    color: #405569;
}

.el-message-box__message {
    overflow-wrap: anywhere;
}

.el-message-box__header,
.el-message-box__content,
.el-message-box__btns,
.el-drawer__header,
.el-drawer__body,
.el-drawer .drawer-footer {
    background: transparent;
}

.el-message-box .el-input__inner,
.el-drawer .el-input__inner,
.el-drawer .el-textarea__inner {
    background-color: rgba(255, 255, 255, 0.72);
    color: #30485c;
    border-color: rgba(87, 117, 144, 0.26);
}

.el-message-box .el-input__inner:focus,
.el-drawer .el-input__inner:focus,
.el-drawer .el-textarea__inner:focus {
    border-color: #397d9f;
}

.el-message-box__btns .el-button {
    border-radius: 8px;
}

.el-message-box__btns .el-button--default:not(.el-button--primary) {
    background: rgba(255, 255, 255, 0.68);
    border-color: rgba(87, 117, 144, 0.26);
    color: #405569;
}

.el-message-box__btns .el-button--default:not(.el-button--primary):hover {
    background: #e5f0f7;
    border-color: #8cb3ca;
    color: #216b91;
}

.el-message-box button:focus-visible,
.el-drawer .el-button:not([role="tab"]):focus-visible,
.el-drawer__close-btn:focus-visible {
    outline: 2px solid #216b91;
    outline-offset: 2px;
}

/* Correct the original dark-theme foregrounds on Chengyue's light background. */
.mynq-header-title,
.mynq-body h2.title,
.mynq-body .el-page-header,
.mynq-body .el-page-header__content {
    color: var(--mynq-heading);
}

.mynq-body .el-tabs__content,
.mynq-body .el-descriptions .el-descriptions__body {
    color: var(--mynq-text);
}

.el-main h2.title sub,
.refreshTip,
.copyright,
.mynq-body .text-grey {
    color: var(--mynq-muted);
}

:where(.mynq-body, .el-drawer, .el-dialog, .el-popover) .el-link.el-link--default,
.copyright a,
.mynq-body .extend-tab-content a {
    color: var(--mynq-link);
}

:where(.mynq-body, .el-drawer, .el-dialog, .el-popover) .el-link.el-link--default:hover,
.copyright a:hover {
    color: #0e477e;
}

:where(.mynq-body, .el-drawer, .el-dialog, .el-popover) .el-link.is-underline:hover::after {
    border-bottom-color: currentColor;
}

/* Real floating surfaces are styled directly, including portals appended to body. */
.el-dialog,
.el-popover,
.el-select-dropdown,
.el-notification,
.el-message,
.el-tooltip__popper.is-light,
.vue-country-list-wrap {
    --mynq-popper-color: var(--mynq-popup-bg);
    --mynq-popper-edge: var(--mynq-glass-edge);
    box-sizing: border-box;
    max-width: calc(100vw - 24px);
    border: 1px solid var(--mynq-glass-edge);
    border-radius: 14px;
    background: var(--mynq-popup-bg);
    color: var(--mynq-text);
    box-shadow: var(--mynq-glass-shadow);
}

.el-notification {
    max-width: calc(100vw - 32px);
}

.el-dialog {
    min-width: min(360px, calc(100vw - 24px));
}

.el-dialog__body {
    color: var(--mynq-text);
    overflow-wrap: anywhere;
}

.el-dialog__header,
.el-dialog__body,
.el-dialog__footer {
    background: transparent;
}

.el-dialog__title,
.el-popover__title,
.el-notification__title {
    color: var(--mynq-heading);
}

.el-notification__content {
    color: var(--mynq-muted);
    overflow-wrap: anywhere;
}

.el-message {
    min-width: 0;
}

.el-message__content {
    overflow-wrap: anywhere;
}

.el-tooltip__popper {
    max-width: min(420px, calc(100vw - 24px));
    overflow-wrap: anywhere;
    line-height: 1.6;
}

.el-tooltip__popper.is-dark {
    --mynq-popper-color: #273e52;
    --mynq-popper-edge: #273e52;
    border: 1px solid rgba(230, 241, 251, 0.2);
    border-radius: 10px;
    background: var(--mynq-popper-color);
    color: #f5f9fd;
    box-shadow: 0 8px 24px rgba(28, 48, 66, 0.18);
}

:is(.el-popover, .el-select-dropdown, .el-tooltip__popper)[x-placement^="top"] .popper__arrow { border-top-color: var(--mynq-popper-edge); }
:is(.el-popover, .el-select-dropdown, .el-tooltip__popper)[x-placement^="top"] .popper__arrow::after { border-top-color: var(--mynq-popper-color); }
:is(.el-popover, .el-select-dropdown, .el-tooltip__popper)[x-placement^="bottom"] .popper__arrow { border-bottom-color: var(--mynq-popper-edge); }
:is(.el-popover, .el-select-dropdown, .el-tooltip__popper)[x-placement^="bottom"] .popper__arrow::after { border-bottom-color: var(--mynq-popper-color); }
:is(.el-popover, .el-select-dropdown, .el-tooltip__popper)[x-placement^="left"] .popper__arrow { border-left-color: var(--mynq-popper-edge); }
:is(.el-popover, .el-select-dropdown, .el-tooltip__popper)[x-placement^="left"] .popper__arrow::after { border-left-color: var(--mynq-popper-color); }
:is(.el-popover, .el-select-dropdown, .el-tooltip__popper)[x-placement^="right"] .popper__arrow { border-right-color: var(--mynq-popper-edge); }
:is(.el-popover, .el-select-dropdown, .el-tooltip__popper)[x-placement^="right"] .popper__arrow::after { border-right-color: var(--mynq-popper-color); }

.el-select-dropdown__item {
    color: var(--mynq-text);
}

.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
    background: rgba(209, 229, 246, 0.65);
}

.el-select-dropdown__item.selected {
    background: rgba(201, 225, 245, 0.65);
    color: var(--mynq-link);
}

.el-select-dropdown__item.is-disabled {
    color: #788797;
    background: transparent;
}

/* Shared form surfaces: leave Element's validation and disabled state selectors stronger. */
:where(.mynq-body, .el-drawer, .el-dialog, .el-message-box, .el-popover) :is(.el-input__inner, .el-textarea__inner),
.vue-country-intl .country-intl-input,
.vue-country-intl .country-intl-label {
    border-color: rgba(87, 117, 144, 0.25);
    border-radius: 8px;
    background-color: var(--mynq-control-bg);
    color: var(--mynq-text);
}

:where(.mynq-body, .el-drawer, .el-dialog, .el-message-box, .el-popover) :is(.el-input__inner, .el-textarea__inner):focus {
    border-color: #397d9f;
}

:where(.mynq-body, .el-drawer, .el-dialog) :is(.el-input-group__prepend, .el-input-group__append) {
    background: var(--mynq-control-soft);
    color: var(--mynq-muted);
    border-color: rgba(87, 117, 144, 0.25);
}

:where(.mynq-body, .el-drawer, .el-dialog) :is(.el-input, .el-textarea).is-disabled :is(.el-input__inner, .el-textarea__inner) {
    background: #e7edf3;
    color: #728396;
}

:where(.mynq-body, .el-drawer, .el-dialog) :is(.el-form-item__label, .el-checkbox__label) {
    color: var(--mynq-muted);
}

:where(.mynq-body, .el-drawer, .el-dialog, .el-popover) .el-button--default:not(.is-disabled) {
    border-color: rgba(87, 117, 144, 0.25);
    border-radius: 8px;
    background: var(--mynq-control-bg);
    color: var(--mynq-text);
}

:where(.mynq-body, .el-drawer, .el-dialog, .el-popover) .el-button--default:not(.is-disabled):hover {
    background: #e4eff8;
    border-color: #97bdd9;
    color: var(--mynq-link);
}

:where(.mynq-body, .el-drawer, .el-dialog) .el-checkbox__inner {
    background-color: var(--mynq-control-bg);
    border-color: rgba(87, 117, 144, 0.4);
}

:where(.mynq-body, .el-drawer, .el-dialog) .el-checkbox__input.is-checked .el-checkbox__inner,
:where(.mynq-body, .el-drawer, .el-dialog) .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background: #2874b5;
    border-color: #2874b5;
}

:where(.mynq-body, .el-drawer, .el-dialog) .el-checkbox__input.is-disabled .el-checkbox__inner {
    background: #e7edf3;
    border-color: #c4ced9;
}

.vue-country-intl {
    background: transparent;
}

.vue-country-intl .country-intl-input-wrap {
    border-color: rgba(87, 117, 144, 0.25);
    border-radius: 8px;
}

/* The selected label overlays the search input; glass must not reveal both texts. */
.vue-country-intl:not(.focused) .country-intl-input-wrap.has-selected .country-intl-input,
.vue-country-intl:not(.focused) .country-intl-input-wrap.has-selected .country-intl-input::placeholder {
    color: transparent;
}

.vue-country-intl .vue-country-item.selected,
.vue-country-intl .vue-country-item.selected .vue-country-areaCode {
    background: rgba(201, 225, 245, 0.65);
    color: var(--mynq-link);
}

.vue-country-intl .vue-country-item:not(.selected):hover,
.vue-country-intl .vue-country-item:not(.selected):hover .vue-country-areaCode {
    background: rgba(209, 229, 246, 0.65);
    color: var(--mynq-text);
}

/* Nested panels borrow their parent's blur instead of creating repeated backdrop layers. */
.el-drawer .el-card,
.el-dialog .el-card {
    border-color: var(--mynq-glass-edge);
    border-radius: 12px;
    background: var(--mynq-control-bg);
    color: var(--mynq-text);
    box-shadow: 0 4px 16px rgba(36, 66, 98, 0.08);
}

.mynq-body .el-descriptions .is-bordered-label {
    background: var(--mynq-control-soft);
    color: var(--mynq-muted);
}

.mynq-body .el-descriptions .el-descriptions-item__cell {
    border-color: rgba(87, 117, 144, 0.18);
}

.mynq-body .el-step__icon,
.mynq-body .el-steps--simple {
    background: var(--mynq-control-bg);
}

.mynq-body .el-step__head.is-wait,
.mynq-body .el-step__title.is-wait,
.mynq-body .el-step__description.is-wait,
.mynq-body .el-empty__description p,
.mynq-body .el-result__subtitle p {
    color: var(--mynq-muted);
}

.mynq-body .el-alert {
    border: 1px solid var(--mynq-glass-edge);
    border-radius: 10px;
}

.el-alert--info.is-light,
.el-message--info { background: #edf3f8; color: #405b73; }
.el-alert--success.is-light,
.el-message--success { background: #edf6ee; color: #38723f; }
.el-alert--warning.is-light,
.el-message--warning { background: #fbf4e8; color: #8a5a19; }
.el-alert--error.is-light,
.el-message--error { background: #fbeeee; color: #a33d47; }

.el-message :is(.el-message__content, .el-icon-info, .el-icon-success, .el-icon-warning, .el-icon-error) {
    color: inherit;
}

.mynq-body .el-loading-mask,
.el-drawer .el-loading-mask,
.el-dialog .el-loading-mask {
    background: rgba(239, 246, 251, 0.76);
}

#full-loading-mask {
    background: var(--mynq-glass-base);
}

.mynq-body .el-skeleton__item {
    background-color: rgba(187, 205, 222, 0.38);
}

.mynq-body .el-progress-bar__outer,
.mynq-body .el-slider__runway {
    background: rgba(142, 169, 193, 0.22);
}

.mynq-body .extend-tab-content table tr th,
.mynq-body .extend-tab-content blockquote {
    background: var(--mynq-control-soft);
    color: var(--mynq-text);
}

.mynq-body .extend-tab-content table :is(th, td),
.mynq-body .extend-tab-content blockquote {
    border-color: rgba(87, 117, 144, 0.22);
}

.mynq-body .extend-tab-content code {
    color: #a13b65;
}

.mynq-body .extend-tab-content pre {
    background: #edf3f8;
    border: 1px solid rgba(87, 117, 144, 0.18);
}

.mynq-body .extend-tab-content pre code {
    color: var(--mynq-text);
}

.copyright {
    height: auto;
    min-height: 20px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root {
        --mynq-popup-bg: rgba(255, 255, 255, 0.86);
        --mynq-control-bg: rgba(255, 255, 255, 0.58);
        --mynq-control-soft: rgba(225, 236, 247, 0.54);
    }

    .el-dialog,
    .el-popover,
    .el-select-dropdown,
    .el-notification,
    .el-message,
    .el-tooltip__popper.is-light,
    .vue-country-list-wrap {
        background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 62%);
        -webkit-backdrop-filter: blur(18px) saturate(135%);
        backdrop-filter: blur(18px) saturate(135%);
    }

    .el-tooltip__popper.is-dark {
        --mynq-popper-color: rgba(31, 51, 70, 0.9);
        --mynq-popper-edge: rgba(31, 51, 70, 0.9);
        -webkit-backdrop-filter: blur(14px) saturate(125%);
        backdrop-filter: blur(14px) saturate(125%);
    }

    .el-alert--info.is-light,
    .el-message--info { background-color: rgba(230, 240, 250, 0.82); }
    .el-alert--success.is-light,
    .el-message--success { background-color: rgba(231, 245, 233, 0.82); }
    .el-alert--warning.is-light,
    .el-message--warning { background-color: rgba(251, 241, 221, 0.84); }
    .el-alert--error.is-light,
    .el-message--error { background-color: rgba(251, 232, 235, 0.84); }

    #app > .el-header,
    .mynq-body .el-card {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 62%), rgba(255, 255, 255, 0.78);
        -webkit-backdrop-filter: blur(18px) saturate(135%);
        backdrop-filter: blur(18px) saturate(135%);
    }

    .mynq-body .node-box {
        background: rgba(255, 255, 255, 0.42);
    }

    .mynq-body .el-tabs__nav[role="tablist"] {
        background: rgba(238, 246, 253, 0.78);
        -webkit-backdrop-filter: blur(14px) saturate(130%);
        backdrop-filter: blur(14px) saturate(130%);
    }

    .detail-tabs > .el-tabs__content > .el-tab-pane {
        background: rgba(255, 255, 255, 0.42);
    }

    .mynq-login-popover,
    .mynq-login-drawer {
        background: rgba(247, 250, 253, 0.94);
        -webkit-backdrop-filter: blur(20px) saturate(125%);
        backdrop-filter: blur(20px) saturate(125%);
    }

    .mynq-login-popover.el-popper[x-placement^="bottom"] .popper__arrow::after {
        border-bottom-color: rgba(247, 250, 253, 0.94);
    }

    .el-message-box,
    .el-drawer {
        background: rgba(247, 250, 253, 0.88);
        -webkit-backdrop-filter: blur(20px) saturate(125%);
        backdrop-filter: blur(20px) saturate(125%);
    }

    :is(.mynq-body, .mynq-drawer, .el-dialog) .el-table {
        --mynq-table-surface: rgba(247, 250, 253, 0.56);
    }

    /* The outer panel already blurs the backdrop; avoid repeated filters on every node. */
    .mynq-body .node-box .el-card {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@media (max-width: 1399px) {
    .el-main .node-box .node {
        width: calc(33.333333% - 20px);
    }
}

@media (max-width: 1023px) {
    .el-main .node-box .node {
        width: calc(50% - 20px);
    }

    .mynq-body .overview-card {
        width: 100%;
        margin: 0 0 12px;
    }
}

@media (max-width: 639px) {
    .mynq-body .login-card.el-card > .el-card__body {
        padding: 24px 20px;
    }

    .mynq-login-page {
        padding: 12px 0;
    }

    .mynq-login-drawer.el-drawer {
        border-radius: 16px 0 0 16px;
    }

    .mynq-body .el-tabs__header .el-tabs__nav[role="tablist"] > .el-tabs__item {
        padding-right: 12px;
        padding-left: 12px;
    }

    .el-main .node-box .node {
        width: calc(100% - 20px);
    }

    .mynq-body .el-card > .el-card__body {
        padding: 14px;
    }

    .mynq-body .node-box > .el-card__body {
        padding: 4px;
    }

    .detail-tabs > .el-tabs__content > .el-tab-pane {
        padding: 12px;
    }

    .report-card .el-card__body > .title {
        position: static;
        max-width: 100%;
        margin: 0 0 12px;
    }

    .report-card .el-tabs__nav {
        margin-left: 0;
    }

    .mynq-body .el-form-item__label {
        float: none;
        width: 100% !important;
        text-align: left;
    }

    .mynq-body .el-form-item__content {
        margin-left: 0 !important;
    }

    .mynq-body .el-input-group--append {
        display: flex;
        flex-direction: column;
    }

    .mynq-body .el-input-group--append > .el-input__inner {
        width: 100%;
        border-radius: 4px 4px 0 0;
    }

    .mynq-body .el-input-group--append > .el-input-group__append {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 36px;
        padding: 8px 12px;
        border-left: 1px solid #dcdfe6;
        border-top: 0;
        border-radius: 0 0 4px 4px;
    }

    .mynq-body .mynode .el-row {
        display: flex;
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .mynq-body .mynode .el-col {
        width: 50%;
    }

    .mynq-body .mynode .el-col:first-child {
        width: 100%;
    }

    .el-main h2.title sub {
        display: block;
        margin-left: 0;
        padding-bottom: 0;
        line-height: 1.5;
    }
}

@media (prefers-reduced-transparency: reduce) {
    :root {
        --mynq-popup-bg: #f4f7fa;
        --mynq-control-bg: #f7fafd;
        --mynq-control-soft: #edf3f8;
    }

    body::before { display: none; }

    .el-dialog,
    .el-popover,
    .el-select-dropdown,
    .el-notification,
    .el-message,
    .el-tooltip__popper.is-light,
    .vue-country-list-wrap {
        background-image: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .el-tooltip__popper.is-dark {
        --mynq-popper-color: #273e52;
        --mynq-popper-edge: #273e52;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .el-alert--info.is-light,
    .el-message--info { background-color: #edf3f8; }
    .el-alert--success.is-light,
    .el-message--success { background-color: #edf6ee; }
    .el-alert--warning.is-light,
    .el-message--warning { background-color: #fbf4e8; }
    .el-alert--error.is-light,
    .el-message--error { background-color: #fbeeee; }

    .mynq-login-popover,
    .mynq-login-drawer,
    .el-message-box,
    .el-drawer {
        background: #f4f7fa;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .mynq-login-popover.el-popper[x-placement^="bottom"] .popper__arrow::after {
        border-bottom-color: #f4f7fa;
    }

    :is(.mynq-body, .mynq-drawer, .el-dialog) .el-table {
        --mynq-table-surface: #f3f7fa;
    }

    #app > .el-header,
    .mynq-body .el-card {
        background: #f4f7fa;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .mynq-body .node-box {
        background: #eff5fa;
    }

    .mynq-body .el-tabs__nav[role="tablist"] {
        background: #edf3f8;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .detail-tabs > .el-tabs__content > .el-tab-pane {
        background: #f2f6fa;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mynq-login-form .el-input__inner,
    .mynq-login-submit.el-button--primary,
    .mynq-body .el-tabs__nav[role="tablist"],
    .mynq-body .el-tabs__header .el-tabs__nav[role="tablist"] > .el-tabs__item {
        transition: none;
    }
}