:root {
    --gl-primary: #4facfe;
    --gl-primary-2: #00f2fe;

    
    --t-body: #0a0e1f;
    --t-embed: #0a0e27;
    --t-mask: rgba(10, 14, 31, 0.7);
    --t-patch: rgba(16, 22, 44, 0.95);
    --t-popup: rgba(20, 27, 52, 0.96);
    --t-tooltip: rgba(30, 40, 75, 0.96);
    --t-card-a: rgba(23, 31, 58, 0.94);
    --t-card-b: rgba(13, 18, 40, 0.94);
    --t-side-a: rgba(15, 21, 42, 0.85);
    --t-side-b: rgba(10, 14, 31, 0.92);
    --t-login: linear-gradient(135deg, #070b18 0%, #0d1b3a 55%, var(--t-body) 100%);
    --t-brand-grad: linear-gradient(90deg, #ffffff, #9fd4ff);
    --t-subitem: rgba(0, 0, 0, 0.18);

    
    --tw-02: rgba(255, 255, 255, 0.02);
    --tw-03: rgba(255, 255, 255, 0.03);
    --tw-04: rgba(255, 255, 255, 0.04);
    --tw-05: rgba(255, 255, 255, 0.05);
    --tw-06: rgba(255, 255, 255, 0.06);
    --tw-07: rgba(255, 255, 255, 0.07);
    --tw-08: rgba(255, 255, 255, 0.08);
    --tw-10: rgba(255, 255, 255, 0.10);
    --tw-11: rgba(255, 255, 255, 0.11);
    --tw-12: rgba(255, 255, 255, 0.12);
    --tw-14: rgba(255, 255, 255, 0.14);
    --tw-15: rgba(255, 255, 255, 0.15);
    --tw-16: rgba(255, 255, 255, 0.16);
    --tw-18: rgba(255, 255, 255, 0.18);
    --tw-28: rgba(255, 255, 255, 0.28);
    --tw-40: rgba(255, 255, 255, 0.40);
    --tw-50: rgba(255, 255, 255, 0.50);
    --tw-60: rgba(255, 255, 255, 0.60);
    --tw-88: rgba(255, 255, 255, 0.88);
    --tw-100: #ffffff;

    
    --tx-03: rgba(255, 255, 255, 0.03);
    --tx-04: rgba(255, 255, 255, 0.04);
    --tx-05: rgba(255, 255, 255, 0.05);
    --tx-06: rgba(255, 255, 255, 0.06);
    --tx-08: rgba(255, 255, 255, 0.08);
    --tx-09: rgba(255, 255, 255, 0.09);
    --tx-10: rgba(255, 255, 255, 0.10);
    --tx-12: rgba(255, 255, 255, 0.12);
    --tx-18: rgba(255, 255, 255, 0.18);
    --tx-28: rgba(255, 255, 255, 0.28);
    --tx-30: rgba(255, 255, 255, 0.30);
    --tx-35: rgba(255, 255, 255, 0.35);
    --tx-40: rgba(255, 255, 255, 0.40);
    --tx-45: rgba(255, 255, 255, 0.45);
    --tx-50: rgba(255, 255, 255, 0.50);
    --tx-55: rgba(255, 255, 255, 0.55);
    --tx-60: rgba(255, 255, 255, 0.60);
    --tx-62: rgba(255, 255, 255, 0.62);
    --tx-65: rgba(255, 255, 255, 0.65);
    --tx-70: rgba(255, 255, 255, 0.70);
    --tx-72: rgba(255, 255, 255, 0.72);
    --tx-75: rgba(255, 255, 255, 0.75);
    --tx-78: rgba(255, 255, 255, 0.78);
    --tx-80: rgba(255, 255, 255, 0.80);
    --tx-82: rgba(255, 255, 255, 0.82);
    --tx-85: rgba(255, 255, 255, 0.85);
    --tx-88: rgba(255, 255, 255, 0.88);
    --tx-90: rgba(255, 255, 255, 0.90);
    --tx-100: #ffffff;

    
    --tb-12: rgba(255, 255, 255, 0.12);
    --tb-16: rgba(255, 255, 255, 0.16);
    --tb-28: rgba(255, 255, 255, 0.28);

    
    --t-on-color: #ffffff;

    /* Readable semantic text and floating-layer colors for both themes. */
    --ui-text-muted: #aeb8cc;
    --ui-text-subtle: #9ba8c2;
    --ui-tooltip-bg: #1e284b;
    --ui-tooltip-text: #f8fafc;
    --ui-tooltip-border: rgba(174, 184, 204, 0.32);
    --ui-scrollbar-thumb: rgba(174, 184, 204, 0.42);
    --ui-scrollbar-thumb-hover: rgba(174, 184, 204, 0.68);

    
    --gl-bg: var(--t-body);
    --gl-text: var(--tx-88);
    --gl-text-sub: var(--tx-60);
    --gl-text-dim: var(--tx-40);
    --gl-border: var(--tb-12);
    --gl-glass: linear-gradient(135deg, var(--tw-08), var(--tw-02));
    --gl-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);

    
    --el-bg-color: #131a33;
    --el-bg-color-overlay: #1a2342;
    --el-bg-color-page: var(--t-body);
    --el-text-color-primary: #e9edf6;
    --el-text-color-regular: #d3d9e6;
    --el-text-color-secondary: #9aa3b8;
    --el-text-color-placeholder: #6e7790;
    --el-text-color-disabled: #4c5570;
    --el-border-color: #2b3350;
    --el-border-color-light: #252d47;
    --el-border-color-lighter: #1f2740;
    --el-border-color-extra-light: #1a2138;
    --el-border-color-hover: #3a4466;
    --el-border-color-dark: #313a5c;
    --el-fill-color: #1b2340;
    --el-fill-color-light: #161d36;
    --el-fill-color-lighter: #12192f;
    --el-fill-color-extra-light: #0f1529;
    --el-fill-color-blank: transparent;
    --el-fill-color-dark: #222b4c;
    --el-mask-color: rgba(10, 14, 31, 0.7);
    --el-disabled-bg-color: rgba(255, 255, 255, 0.05);
    --el-disabled-text-color: rgba(255, 255, 255, 0.32);
    --el-disabled-border-color: rgba(255, 255, 255, 0.12);

    
    --cc-card-bg: linear-gradient(135deg, rgba(23, 31, 58, 0.94), rgba(13, 18, 40, 0.94));
    --cc-card-border: var(--tw-16);
    --cc-card-hover-border: rgba(79, 172, 254, 0.55);
    --cc-card-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    --cc-card-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.42);
    --cc-onshelf-bg: linear-gradient(135deg, rgba(23, 46, 33, 0.6), rgba(13, 30, 22, 0.6));
    --cc-onshelf-border: rgba(74, 222, 128, 0.35);
    --cc-brand-color: #7ee2a8;
    --cc-brand-bg: rgba(34, 197, 94, 0.16);
    --cc-title-color: var(--tx-88);
    --cc-id-color: var(--ui-text-muted);
    --cc-url-color: #4facfe;
    --cc-url-hover: #00f2fe;
    --cc-side-border: var(--tw-12);
    --cc-price-color: #fbbf24;
    --cc-price-onshelf: #4ade80;
    --cc-currency-color: var(--ui-text-muted);
    --cc-fk-color: var(--ui-text-muted);
    --cc-fv-color: var(--tx-75);
    --cc-thumb-bg: var(--tw-05);
    --cc-thumb-border: var(--tw-12);
    --cc-empty-color: var(--ui-text-subtle);
}

[data-theme="light"] {
    --t-body: #eef2f8;
    --t-embed: #eef2f8;
    --t-mask: rgba(238, 242, 248, 0.75);
    --t-patch: rgba(255, 255, 255, 0.95);
    --t-popup: rgba(255, 255, 255, 0.97);
    --t-tooltip: rgba(255, 255, 255, 0.97);
    --t-card-a: rgba(255, 255, 255, 0.95);
    --t-card-b: rgba(255, 255, 255, 0.95);
    --t-side-a: rgba(255, 255, 255, 0.92);
    --t-side-b: rgba(240, 244, 250, 0.96);
    --t-login: linear-gradient(135deg, #eef2f8 0%, #dce8f6 55%, #f0f4fa 100%);
    --t-brand-grad: linear-gradient(90deg, #0f172a, #4facfe);
    --t-subitem: rgba(0, 0, 0, 0.04);

    
    --tx-03: rgba(15, 23, 42, 0.03);
    --tx-04: rgba(15, 23, 42, 0.04);
    --tx-05: rgba(15, 23, 42, 0.05);
    --tx-06: rgba(15, 23, 42, 0.06);
    --tx-08: rgba(15, 23, 42, 0.08);
    --tx-09: rgba(15, 23, 42, 0.09);
    --tx-10: rgba(15, 23, 42, 0.10);
    --tx-12: rgba(15, 23, 42, 0.12);
    --tx-18: rgba(15, 23, 42, 0.18);
    --tx-28: rgba(15, 23, 42, 0.28);
    --tx-30: rgba(15, 23, 42, 0.30);
    --tx-35: rgba(15, 23, 42, 0.35);
    --tx-40: rgba(15, 23, 42, 0.40);
    --tx-45: rgba(15, 23, 42, 0.45);
    --tx-50: rgba(15, 23, 42, 0.50);
    --tx-55: rgba(15, 23, 42, 0.55);
    --tx-60: rgba(15, 23, 42, 0.60);
    --tx-62: rgba(15, 23, 42, 0.62);
    --tx-65: rgba(15, 23, 42, 0.65);
    --tx-70: rgba(15, 23, 42, 0.70);
    --tx-72: rgba(15, 23, 42, 0.72);
    --tx-75: rgba(15, 23, 42, 0.75);
    --tx-78: rgba(15, 23, 42, 0.78);
    --tx-80: rgba(15, 23, 42, 0.80);
    --tx-82: rgba(15, 23, 42, 0.82);
    --tx-85: rgba(15, 23, 42, 0.85);
    --tx-88: rgba(15, 23, 42, 0.88);
    --tx-90: rgba(15, 23, 42, 0.90);
    --tx-100: #0f172a;

    
    --tb-12: rgba(15, 23, 42, 0.12);
    --tb-16: rgba(15, 23, 42, 0.16);
    --tb-28: rgba(15, 23, 42, 0.28);

    --gl-shadow: 0 8px 32px rgba(15, 23, 42, 0.10);

    --ui-text-muted: #526071;
    --ui-text-subtle: #64748b;
    --ui-tooltip-bg: #ffffff;
    --ui-tooltip-text: #1f2937;
    --ui-tooltip-border: rgba(15, 23, 42, 0.22);
    --ui-scrollbar-thumb: rgba(82, 96, 113, 0.42);
    --ui-scrollbar-thumb-hover: rgba(82, 96, 113, 0.68);

    
    --el-bg-color: #ffffff;
    --el-bg-color-overlay: #ffffff;
    --el-bg-color-page: var(--t-body);
    --el-text-color-primary: #303133;
    --el-text-color-regular: #606266;
    --el-text-color-secondary: #909399;
    --el-text-color-placeholder: #a8abb2;
    --el-text-color-disabled: #c0c4cc;
    --el-border-color: #dcdfe6;
    --el-border-color-light: #e4e7ed;
    --el-border-color-lighter: #ebeef5;
    --el-border-color-extra-light: #f2f6fc;
    --el-border-color-hover: #c0c4cc;
    --el-border-color-dark: #d4d7de;
    --el-fill-color: #f0f2f5;
    --el-fill-color-light: #f5f7fa;
    --el-fill-color-lighter: #fafafa;
    --el-fill-color-extra-light: #fafcff;
    --el-fill-color-blank: #ffffff;
    --el-fill-color-dark: #ebedf0;
    --el-mask-color: rgba(255, 255, 255, 0.9);
    --el-disabled-bg-color: #f5f7fa;
    --el-disabled-text-color: #c0c4cc;
    --el-disabled-border-color: #e4e7ed;

    
    --cc-card-bg: linear-gradient(135deg, #eef8f2, #e2f0e8);
    --cc-card-border: #cfe5d8;
    --cc-card-hover-border: #9fd4b4;
    --cc-card-shadow: 0 2px 10px rgba(22, 72, 50, 0.08);
    --cc-card-shadow-hover: 0 6px 20px rgba(22, 72, 50, 0.14);
    --cc-onshelf-bg: linear-gradient(135deg, #f1faf3, #e6f2e9);
    --cc-onshelf-border: #bfe3c8;
    --cc-brand-color: #14532d;
    --cc-brand-bg: rgba(34, 197, 94, 0.14);
    --cc-title-color: #1f2937;
    --cc-id-color: var(--ui-text-muted);
    --cc-url-color: #0e7490;
    --cc-url-hover: #0891b2;
    --cc-side-border: #c4dccb;
    --cc-price-color: #b45309;
    --cc-price-onshelf: #16a34a;
    --cc-currency-color: var(--ui-text-muted);
    --cc-fk-color: var(--ui-text-muted);
    --cc-fv-color: #334155;
    --cc-thumb-bg: #ffffff;
    --cc-thumb-border: #d4e6db;
    --cc-empty-color: var(--ui-text-subtle);
}


[data-theme="light"] body::before { opacity: .35; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body, #app { height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif; }
body { background: var(--t-body); color: var(--gl-text); }


body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 15% 18%, rgba(79, 172, 254, 0.20) 0%, transparent 36%),
        radial-gradient(circle at 85% 75%, rgba(0, 242, 254, 0.13) 0%, transparent 36%),
        radial-gradient(circle at 70% 8%, rgba(79, 172, 254, 0.10) 0%, transparent 30%),
        radial-gradient(circle at 30% 85%, rgba(0, 150, 255, 0.08) 0%, transparent 32%);
    animation: bgFloat 16s ease-in-out infinite alternate;
}
@keyframes bgFloat {
    0%   { opacity: .75; transform: scale(1); }
    50%  { opacity: 1;   transform: scale(1.08); }
    100% { opacity: .8;  transform: scale(1.03); }
}


.login-wrap {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--t-login);
    position: relative;
    overflow: hidden;
}
.login-wrap::before {
    content: '';
    position: absolute;
    width: 560px; height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(79, 172, 254, 0.28) 0%, transparent 70%);
    top: -160px; right: -120px;
    filter: blur(6px);
    animation: blobA 12s ease-in-out infinite alternate;
}
.login-wrap::after {
    content: '';
    position: absolute;
    width: 480px; height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 242, 254, 0.18) 0%, transparent 70%);
    bottom: -140px; left: -100px;
    filter: blur(6px);
    animation: blobB 14s ease-in-out infinite alternate;
}
@keyframes blobA {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-60px, 40px) scale(1.15); }
}
@keyframes blobB {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(50px, -40px) scale(1.12); }
}
.login-card {
    width: 400px;
    background: linear-gradient(150deg, var(--tw-11), var(--tw-03));
    backdrop-filter: blur(28px) saturate(170%);
    -webkit-backdrop-filter: blur(28px) saturate(170%);
    border-radius: 20px;
    padding: 40px 36px 28px;
    border: 1px solid var(--tw-16);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 var(--tw-15);
    position: relative;
    z-index: 2;
    overflow: hidden;
}
.login-card::before {
    content: '';
    position: absolute;
    top: 0; left: 10%;
    width: 80%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--tw-50), transparent);
}
.login-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}
.login-logo-img {
    height: 52px;
    max-width: 240px;
    object-fit: contain;
}
.login-icp {
    margin-top: 18px;
    padding-top: 14px;
    text-align: center;
    font-size: 12px;
    color: var(--ui-text-muted);
    border-top: 1px solid var(--tw-08);
    letter-spacing: 0.5px;
}
.login-icp .footer-copy,
.app-footer .footer-copy {
    color: var(--ui-text-muted);
    margin: 0 6px;
}
.login-title {
    text-align: center;
    font-size: 20px;
    color: var(--tx-100);
    margin-bottom: 4px;
    letter-spacing: 1px;
}
.login-sub {
    text-align: center;
    font-size: 12px;
    color: rgba(79, 172, 254, 0.9);
    margin-bottom: 28px;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.login-btn {
    width: 100%;
    height: 44px;
    font-size: 16px;
    letter-spacing: 6px;
    color: var(--t-on-color);
    background: linear-gradient(90deg, #4facfe, #00c6ff);
    border: none;
    box-shadow: 0 6px 20px rgba(79, 172, 254, 0.4);
    transition: all .3s;
}
.login-btn:hover {
    background: linear-gradient(90deg, #63b8ff, #1ce6ff);
    box-shadow: 0 8px 26px rgba(79, 172, 254, 0.55);
    transform: translateY(-1px);
}


.captcha-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.captcha-row .el-input { flex: 1; }
.captcha-img {
    width: 118px;
    height: 42px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid var(--tw-28);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    flex-shrink: 0;
    transition: all .25s;
}
.captcha-img:hover {
    border-color: rgba(79, 172, 254, 0.6);
    box-shadow: 0 0 12px rgba(79, 172, 254, 0.35);
    transform: scale(1.02);
}
.login-tip {
    text-align: center;
    font-size: 12px;
    color: var(--ui-text-subtle);
    margin-top: 8px;
}


.main-wrap { height: 100%; }
.sidebar {
    background: linear-gradient(180deg, var(--t-side-a), var(--t-side-b));
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border-right: 1px solid var(--tw-08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.brand {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-bottom: 1px solid var(--tw-06);
    flex-shrink: 0;
}
.brand .el-icon { filter: drop-shadow(0 0 8px rgba(79, 172, 254, 0.7)); }
.brand-logo {
    height: 30px;
    max-width: 120px;
    object-fit: contain;
    border-radius: 6px;
}
.brand-text {
    color: var(--tx-100);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 1px;
    background: var(--t-brand-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.side-menu {
    border-right: none;
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--ui-scrollbar-thumb) transparent;
    background: transparent !important;
    
    --el-menu-bg-color: transparent;
    --el-menu-text-color: var(--tx-72);
    --el-menu-hover-bg-color: var(--tw-08);
    --el-menu-hover-text-color: var(--tx-100);
    --el-menu-active-color: #172033;
    --el-menu-border-color: transparent;
    --el-menu-sub-item-height: 42px;
}
.side-menu::-webkit-scrollbar { width: 7px; }
.side-menu::-webkit-scrollbar-track { background: transparent; }
.side-menu::-webkit-scrollbar-thumb {
    background: var(--ui-scrollbar-thumb);
    border: 2px solid transparent;
    border-radius: 8px;
    background-clip: padding-box;
}
.side-menu::-webkit-scrollbar-thumb:hover { background-color: var(--ui-scrollbar-thumb-hover); }
.side-menu .el-menu-item {
    height: 48px;
    margin: 4px 10px;
    border-radius: 10px;
    color: var(--tx-72);
    transition: all .25s;
}
.side-menu .el-menu-item .el-icon { color: var(--tx-60); }
.side-menu .el-menu-item:hover {
    background: var(--tw-08) !important;
    color: var(--tx-100);
}
.side-menu .el-menu-item:hover .el-icon { color: #4facfe; }
.side-menu .el-menu-item.is-active {
    background: linear-gradient(90deg, #ffe45c, #ffc928) !important;
    color: #172033 !important;
    box-shadow: 0 4px 16px rgba(255, 201, 40, 0.32), inset 0 0 0 1px rgba(184, 132, 0, 0.28);
}
.side-menu .el-menu-item.is-active .el-icon { color: #172033 !important; filter: none; }

.side-menu .el-sub-menu__title {
    height: 48px;
    margin: 4px 10px;
    border-radius: 10px;
    color: var(--tx-72);
    transition: all .25s;
}
.side-menu .el-sub-menu__title:hover {
    background: var(--tw-08) !important;
    color: var(--tx-100);
}
.side-menu .el-sub-menu__title .el-icon { color: var(--tx-60); }
.side-menu .el-sub-menu .el-menu-item {
    background: var(--t-subitem);
    min-width: 160px;
}

.side-menu .el-sub-menu .el-menu-item {
    height: 42px;
    margin: 2px 10px 2px 16px;
    border-radius: 8px;
    color: var(--tx-65);
    background: transparent;
}
.side-menu .el-sub-menu .el-menu-item .el-icon { color: var(--tx-45); }
.side-menu .el-sub-menu .el-menu-item:hover {
    background: var(--tw-08) !important;
    color: var(--tx-100);
}
.side-menu .el-sub-menu .el-menu-item:hover .el-icon { color: #4facfe; }
.side-menu .el-sub-menu .el-menu-item.is-active {
    background: linear-gradient(90deg, #ffe45c, #ffc928) !important;
    color: #172033 !important;
    box-shadow: inset 0 0 0 1px rgba(184, 132, 0, 0.28);
}
.side-menu .el-sub-menu .el-menu-item.is-active .el-icon { color: #172033 !important; }

.side-menu.el-menu--collapse .el-sub-menu__title {
    margin: 4px 6px;
    padding: 0 !important;
    justify-content: center;
}
.side-menu.el-menu--collapse .el-sub-menu__title .el-icon { margin-right: 0; }
.el-menu--popup .el-menu-item,
.el-menu--popup .el-sub-menu__title {
    background: transparent;
}
.el-menu--popup {
    background: var(--t-popup) !important;
    border: 1px solid var(--tw-12) !important;
    border-radius: 10px;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    
    --el-menu-bg-color: var(--t-popup);
    --el-menu-text-color: var(--tx-75);
    --el-menu-hover-bg-color: rgba(79, 172, 254, 0.16);
    --el-menu-hover-text-color: var(--tx-100);
    --el-menu-active-color: #172033;
}
.el-menu--popup .el-menu-item {
    color: var(--tx-75);
}
.el-menu--popup .el-menu-item:hover {
    background: rgba(79, 172, 254, 0.16) !important;
    color: var(--tx-100) !important;
}
.el-menu--popup .el-menu-item.is-active {
    background: linear-gradient(90deg, #ffe45c, #ffc928) !important;
    color: #172033 !important;
}
.topbar {
    background: var(--tw-04);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border-bottom: 1px solid var(--tw-08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 20px;
}
.user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    outline: none;
}
.user-avatar {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    color: var(--t-on-color);
    font-weight: 600;
    box-shadow: 0 0 12px rgba(79, 172, 254, 0.5);
}
.user-name { font-size: 14px; color: var(--tx-100); }
.user-account { display: flex; flex-direction: column; min-width: 0; line-height: 18px; }
.user-id { font-size: 12px; color: var(--tx-200); white-space: nowrap; }
.content-area {
    padding: 16px;
    overflow-y: auto;
}
.page { min-height: 100%; min-width: 0; max-width: 100%; }
.order-workspace { min-width: 0; max-width: 100%; }
.order-workspace .stat-card { height: 100%; box-sizing: border-box; }
@media (max-width: 767px) {
    .order-workspace .el-col { margin-bottom: 8px; }
    .order-workspace > .el-row > .el-col,
    .order-workspace .stat-bar > .el-col { width: 50% !important; flex: 0 0 50% !important; max-width: 50% !important; }
    .order-workspace .toolbar { flex-wrap: wrap; }
    .order-workspace .pager { overflow-x: auto; max-width: 100%; }
}


.toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.perm-group-title {
    font-size: 13px; font-weight: 600; color: var(--tx-90);
    padding: 8px 12px; margin-bottom: 8px;
    background: var(--tw-08); border-radius: 8px 8px 0 0;
    letter-spacing: 1px;
}
.perm-box {
    border: 1px solid var(--tw-12);
    border-radius: 0 0 8px 8px;
    padding: 6px 12px 10px;
    max-height: 380px;
    overflow-y: auto;
    margin-bottom: 8px;
    background: var(--tw-03);
}
.perm-box .el-checkbox { margin-right: 0; }
.perm-box .el-checkbox__label { font-size: 13px; }
.perm-mod {
    font-size: 12px; color: var(--gl-primary); font-weight: 600;
    margin: 8px 0 2px; letter-spacing: 1px;
}
.perm-mod:first-child { margin-top: 2px; }
.perm-box::-webkit-scrollbar { width: 6px; }
.permission-dialog { max-width: calc(100vw - 24px); }
.perm-target { margin-bottom: 12px; overflow-wrap: anywhere; }
.permission-dialog .perm-box { height: 400px; max-height: 52vh; }
.permission-dialog .perm-group-title, .permission-dialog .perm-mod { letter-spacing: 0; }
.permission-dialog .el-tree { background: transparent; }
.permission-dialog .el-tree-node__content { height: auto; min-height: 32px; }
.perm-tree-label { white-space: normal; overflow-wrap: anywhere; font-size: 13px; line-height: 1.5; }
.perm-tree-label small { display: block; color: var(--ui-text-muted); font-size: 11px; }
.permission-dialog .el-checkbox { height: auto; min-height: 28px; }
.permission-dialog .el-checkbox__label { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 767px) {
    .permission-dialog .perm-box { height: auto; max-height: 32vh; }
}
.flex-1 { flex: 1; }
.pager {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
    max-width: 100%;
    overflow-x: auto;
}


.stat-card { border-radius: 14px; }
.stat-card .el-card__body { padding: 18px; }
.stat-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.stat-label { font-size: 13px; color: var(--gl-text-sub); margin-bottom: 6px; }
.stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--tx-100);
}
.stat-foot {
    margin-top: 10px;
    font-size: 12px;
    color: var(--gl-text-dim);
    border-top: 1px dashed var(--tw-14);
    padding-top: 8px;
}


.stat-bar { margin-bottom: 4px; }
.mini-stat {
    background: linear-gradient(135deg, var(--tw-08), var(--tw-02));
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border-radius: 12px;
    padding: 14px 16px;
    text-align: center;
    cursor: pointer;
    border: 1px solid var(--tw-12);
    transition: all .25s;
}
.mini-stat:hover {
    transform: translateY(-3px);
    border-color: rgba(79, 172, 254, 0.55);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 18px rgba(79, 172, 254, 0.15);
}
.ms-label { font-size: 12px; color: var(--gl-text-sub); }
.ms-value { font-size: 22px; font-weight: 700; color: var(--tx-100); margin-top: 4px; }
.ms-value.warn { color: #e6a23c; }
.ms-value.primary { color: #4facfe; }
.ms-value.ok { color: #67c23a; }
.ms-value.gray { color: var(--tx-45); }


.screen-embed {
    height: calc(100vh - 92px);
    border-radius: 10px;
    overflow: hidden;
    background: var(--t-embed);
}
.screen-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}


.reply-text { color: #67c23a; font-size: 13px; }


::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--tw-18); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(79, 172, 254, 0.45); }
::-webkit-scrollbar-track { background: transparent; }


.collect-groups {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 4px 14px;
    border-bottom: 1px dashed var(--tw-12);
    margin-bottom: 14px;
}
.cg-label { font-size: 13px; color: var(--ui-text-muted); font-weight: 600; }
.cg-item {
    padding: 3px 12px;
    border-radius: 14px;
    font-size: 12px;
    cursor: pointer;
    color: var(--tx-70);
    background: var(--tw-05);
    border: 1px solid var(--tw-12);
    transition: all .2s;
    user-select: none;
}
.cg-item:hover { border-color: #4facfe; color: #4facfe; }
.cg-item.active {
    background: linear-gradient(135deg, #4facfe, #00c6fb);
    color: #fff;
    border-color: transparent;
    font-weight: 600;
}
.prod-cell {
    display: flex;
    align-items: center;
    gap: 14px;
}
.prod-thumb {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    flex-shrink: 0;
    background: var(--tw-05);
    border: 1px solid var(--tw-10);
    cursor: pointer;
}
.prod-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-text-subtle);
}
.prod-info { min-width: 0; }
.prod-name {
    font-size: 15px;
    color: var(--tx-90);
    line-height: 1.45;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.prod-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.src-link {
    font-size: 13px;
    color: #4facfe;
    text-decoration: none;
    border-bottom: 1px dashed rgba(79, 172, 254, 0.5);
}
.src-link:hover { color: #00f2fe; }


.collect-card-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 120px;
}
.collect-card {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--cc-card-bg);
    border: 1px solid var(--cc-card-border);
    box-shadow: var(--cc-card-shadow);
    transition: all .25s;
}
.collect-card:hover {
    transform: translateY(-2px);
    border-color: var(--cc-card-hover-border);
    box-shadow: var(--cc-card-shadow-hover);
}
.collect-card.is-onshelf {
    background: var(--cc-onshelf-bg);
    border-color: var(--cc-onshelf-border);
}
.cc-check {
    margin-top: 36px;
    flex-shrink: 0;
}
.cc-thumb-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}
.cc-thumb {
    width: 112px;
    height: 112px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--cc-thumb-bg);
    border: 1px solid var(--cc-thumb-border);
}
.cc-thumb .el-image { width: 100%; height: 100%; display: block; }
.cc-thumb-empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cc-empty-color);
}

.cc-thumbs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    width: 100%;
    margin-top: 4px;
    padding-bottom: 2px;
    overflow-x: auto;
}
.cc-thumbs::-webkit-scrollbar { height: 3px; }
.cc-thumbs::-webkit-scrollbar-thumb { background: var(--cc-card-border); border-radius: 2px; }
.cc-thumb-mini {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    flex-shrink: 0;
    cursor: pointer;
    overflow: hidden;
    background: var(--cc-thumb-bg);
    border: 1px solid var(--cc-thumb-border);
    transition: all .2s;
}
.cc-thumb-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-thumb-mini:hover { border-color: var(--cc-card-hover-border); }
.cc-thumb-mini.is-active {
    border-color: #4facfe;
    box-shadow: 0 0 0 2px rgba(79, 172, 254, 0.35);
}
.cc-main {
    flex: 1;
    min-width: 0;
}
.cc-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}
.cc-brand {
    font-size: 13px;
    font-weight: 700;
    color: var(--cc-brand-color);
    background: var(--cc-brand-bg);
    padding: 1px 8px;
    border-radius: 6px;
}
.cc-tag { margin-left: 0; }
.cc-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--cc-title-color);
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
}
.cc-id {
    font-size: 12px;
    color: var(--cc-id-color);
    margin-top: 4px;
}
.cc-url {
    display: inline-block;
    max-width: 100%;
    font-size: 12px;
    color: var(--cc-url-color);
    text-decoration: none;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-bottom: 1px dashed var(--cc-url-color);
}
.cc-url:hover { color: var(--cc-url-hover); border-bottom-color: var(--cc-url-hover); }
.cc-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.cc-side {
    width: 220px;
    flex-shrink: 0;
    border-left: 1px dashed var(--cc-side-border);
    padding-left: 16px;
}
.cc-price {
    font-size: 20px;
    font-weight: 700;
    color: var(--cc-price-color);
}
.cc-price.is-onshelf { color: var(--cc-price-onshelf); }
.cc-currency {
    font-size: 12px;
    font-weight: 500;
    color: var(--cc-currency-color);
}
.cc-fields {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cc-field {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
}
.cc-fk {
    width: 52px;
    flex-shrink: 0;
    color: var(--cc-fk-color);
}
.cc-fv {
    flex: 1;
    min-width: 0;
    color: var(--cc-fv-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cc-actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
}


.menu-btn {
    font-size: 18px;
    color: var(--tx-100);
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 10px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .25s;
}
.menu-btn:hover {
    background: rgba(79, 172, 254, 0.18) !important;
    color: #4facfe !important;
    box-shadow: 0 0 12px rgba(79, 172, 254, 0.3);
}


.theme-toggle-btn { margin-right: 4px; }


.plugin-dl-btn {
    width: auto;
    height: 34px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    gap: 4px;
}


.site-img-row { display: flex; align-items: center; gap: 10px; }
.site-img-box {
    width: 120px;
    height: 72px;
    border: 1px dashed var(--tb-16);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    background: var(--tw-04);
    transition: border-color .2s;
}
.site-img-box:hover { border-color: var(--gl-primary); }
.site-img-favicon { width: 56px; height: 56px; }
.site-img-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--ui-text-muted);
    font-size: 12px;
}
.site-img-preview {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.topbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}


.sidebar { transition: width .25s ease; }
.sidebar-collapsed .brand-text { display: none; }
.sidebar-collapsed .brand { padding: 0; }
.sidebar-collapsed .side-menu .el-menu-item { justify-content: center; }
.side-menu.el-menu--collapse { width: 64px; }
.side-menu.el-menu--collapse .el-menu-item {
    margin: 4px 6px;
    padding: 0 !important;
    justify-content: center;
}
.side-menu.el-menu--collapse .el-menu-item .el-icon { margin-right: 0; }


.sidebar-mask {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    z-index: 1999;
    transition: opacity .3s;
}






.el-card {
    background: linear-gradient(135deg, var(--tw-07), var(--tw-02));
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--gl-border);
    border-radius: 14px;
    box-shadow: var(--gl-shadow);
    color: var(--gl-text);
}
.el-card:hover {
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(79, 172, 254, 0.22), 0 0 24px rgba(79, 172, 254, 0.10);
}
.el-card__header {
    border-bottom: 1px solid var(--tw-08);
    color: var(--tx-100);
}


.el-table {
    --el-table-bg-color: transparent;
    --el-table-tr-bg-color: transparent;
    --el-table-header-bg-color: var(--tx-06);
    --el-table-row-hover-bg-color: rgba(79, 172, 254, 0.09);
    --el-table-border-color: var(--tx-09);
    --el-table-text-color: var(--tx-85);
    --el-table-header-text-color: var(--tx-62);
    background: transparent;
    color: var(--tx-85);
}
.el-table th.el-table__cell {
    background: var(--tw-06) !important;
    color: var(--tx-62);
    font-weight: 600;
}
.el-table td.el-table__cell { background: transparent; }
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell { background: var(--tw-03); }
.el-table .el-table__row:hover > td.el-table__cell { background: rgba(79, 172, 254, 0.09) !important; }
.el-table__empty-text { color: var(--ui-text-muted); }
.el-table__body tr:hover > td.el-table__cell { background: rgba(79, 172, 254, 0.09) !important; }
.el-table .el-table__inner-wrapper::before { background-color: var(--tx-08); }
.el-table--border .el-table__inner-wrapper::after { background-color: var(--tx-08); }
.el-table__fixed-right-patch { background: var(--t-patch) !important; }
.el-table .el-table__fixed, .el-table .el-table__fixed-right { background: transparent; }
.responsive-table {
    --table-fixed-bg: #131a33;
    --table-fixed-stripe: #161d36;
    --table-fixed-hover: #1b2340;
    width: 100%;
    max-width: 100%;
}
[data-theme="light"] .responsive-table {
    --table-fixed-bg: #ffffff;
    --table-fixed-stripe: #f5f7fa;
    --table-fixed-hover: #f0f2f5;
}
.responsive-table .el-table__fixed,
.responsive-table .el-table__fixed-right,
.responsive-table .el-table__fixed-right-patch {
    background: var(--table-fixed-bg) !important;
}
.responsive-table th.el-table-fixed-column--right,
.responsive-table td.el-table-fixed-column--right {
    background: var(--table-fixed-bg) !important;
    box-shadow: -8px 0 12px -12px rgba(0, 0, 0, 0.8);
}
.responsive-table.el-table--striped .el-table__body tr.el-table__row--striped td.el-table-fixed-column--right {
    background: var(--table-fixed-stripe) !important;
}
.responsive-table .el-table__row:hover > td.el-table-fixed-column--right {
    background: var(--table-fixed-hover) !important;
}


.el-input__wrapper,
.el-input-number .el-input__wrapper,
.el-textarea__inner {
    background: var(--tw-06) !important;
    box-shadow: 0 0 0 1px var(--tb-16) inset !important;
    color: var(--tx-100);
    transition: box-shadow .25s;
}
.el-input__wrapper:hover, .el-textarea__inner:hover {
    box-shadow: 0 0 0 1px var(--tb-28) inset !important;
}
.el-input__wrapper.is-focus, .el-input-number.is-controls-right .el-input__wrapper.is-focus {
    box-shadow: 0 0 0 1px var(--gl-primary) inset, 0 0 10px rgba(79, 172, 254, 0.35) !important;
}
.el-input__inner, .el-textarea__inner { color: var(--tx-100); caret-color: #4facfe; }
.el-input__inner::placeholder, .el-textarea__inner::placeholder { color: var(--ui-text-subtle); }
.el-input__prefix .el-icon, .el-input__suffix .el-icon { color: var(--tx-50); }
.el-input-number__decrease, .el-input-number__increase {
    background: var(--tw-05);
    color: var(--tx-60);
}
.el-select__wrapper {
    background: var(--tw-06) !important;
    box-shadow: 0 0 0 1px var(--tb-16) inset !important;
}
.el-select__wrapper.is-focused {
    box-shadow: 0 0 0 1px var(--gl-primary) inset, 0 0 10px rgba(79, 172, 254, 0.35) !important;
}


.el-button {
    background: var(--tw-08);
    border: 1px solid var(--tw-16);
    color: var(--tx-85);
}
.el-button:hover {
    background: var(--tw-14);
    border-color: var(--tx-28);
    color: var(--tx-100);
}
.el-button--primary {
    background: linear-gradient(135deg, #4facfe, #00c6ff);
    border: none;
    color: var(--t-on-color);
    box-shadow: 0 4px 16px rgba(79, 172, 254, 0.35);
}
.el-button--primary:hover {
    background: linear-gradient(135deg, #63b8ff, #1ce6ff);
    color: var(--t-on-color);
    box-shadow: 0 6px 22px rgba(79, 172, 254, 0.5);
    transform: translateY(-1px);
}
.el-button--primary.is-plain {
    background: rgba(79, 172, 254, 0.12);
    border: 1px solid rgba(79, 172, 254, 0.45);
    color: var(--tx-90);
    box-shadow: none;
}
.el-button.is-link, .el-button.is-text {
    background: transparent;
    border: none;
    box-shadow: none;
}
.el-button.is-link:hover, .el-button.is-text:hover { background: var(--tw-08); }


.el-dialog, .el-message-box {
    background: linear-gradient(160deg, var(--t-card-a), var(--t-card-b)) !important;
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid var(--tw-14);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    color: var(--gl-text);
}
.el-dialog__title, .el-message-box__title { color: var(--tx-100); }
.el-message-box__message { color: var(--tx-75); }
.el-dialog__headerbtn .el-icon, .el-message-box__headerbtn .el-icon { color: var(--tx-55); }
.el-dialog__headerbtn:hover .el-icon, .el-message-box__headerbtn:hover .el-icon { color: #4facfe; }
.el-drawer {
    background: linear-gradient(160deg, var(--t-card-a), var(--t-card-b)) !important;
    backdrop-filter: blur(24px);
    border-left: 1px solid var(--tw-12);
    color: var(--gl-text);
}
.el-drawer__header { color: var(--tx-100); margin-bottom: 0; }


.el-popper.is-light {
    background: var(--t-popup) !important;
    border: 1px solid var(--tw-12) !important;
    color: var(--el-text-color-regular) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(20px) saturate(150%);
}
.el-popper.is-light .el-popper__arrow::before {
    background: var(--t-popup) !important;
    border-color: var(--tx-12) !important;
}
.el-popper.is-dark {
    background: var(--ui-tooltip-bg) !important;
    border: 1px solid var(--ui-tooltip-border) !important;
    color: var(--ui-tooltip-text) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32) !important;
}
.el-popper.is-dark .el-popper__arrow::before {
    background: var(--ui-tooltip-bg) !important;
    border-color: var(--ui-tooltip-border) !important;
}
.el-popper.is-dark .el-tooltip__content,
.el-popper.is-dark .el-popover__title { color: var(--ui-tooltip-text) !important; }
.el-dropdown-menu__item { color: var(--tx-80); }
.el-dropdown-menu__item:not(.is-disabled):hover { background: rgba(79, 172, 254, 0.16); color: var(--tx-100); }
.el-select-dropdown__item { color: var(--tx-80); }
.el-select-dropdown__item.is-hovering { background: rgba(79, 172, 254, 0.12); }
.el-select-dropdown__item.is-selected { color: #4facfe; font-weight: 600; }
.el-picker-panel { background: var(--t-popup) !important; }
.el-date-table th { color: var(--ui-text-muted); border-bottom-color: var(--tx-08); }
.el-date-table td .el-date-table-cell__text { color: var(--tx-80); }
.el-date-table td.today .el-date-table-cell__text { color: #4facfe; font-weight: 700; }
.el-date-table td.available:hover .el-date-table-cell__text { color: var(--tx-100); background: rgba(79, 172, 254, 0.2); }
.el-date-table td.current:not(.disabled) .el-date-table-cell__text { background: #4facfe; color: var(--t-on-color); }
.el-date-range-picker__content, .el-date-picker__header { color: var(--tx-80); }
.el-date-range-picker__header-label { color: var(--tx-80); }
.el-picker-panel__icon-btn { color: var(--tx-60); }


.el-pagination { color: var(--tx-70); }
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .btn-next,
.el-pagination.is-background .el-pager li {
    background: var(--tw-07);
    color: var(--tx-70);
}
.el-pagination.is-background .el-pager li:hover { background: rgba(79, 172, 254, 0.2); color: var(--tx-100); }
.el-pagination.is-background .el-pager li.is-active {
    background: linear-gradient(135deg, #4facfe, #00c6ff);
    color: var(--t-on-color);
    box-shadow: 0 3px 12px rgba(79, 172, 254, 0.4);
}


.el-tag {
    background: rgba(79, 172, 254, 0.14);
    border-color: rgba(79, 172, 254, 0.4);
    color: var(--tx-90);
}
.el-tag--success { background: rgba(103, 194, 58, 0.14); border-color: rgba(103, 194, 58, 0.4); color: var(--tx-90); }
.el-tag--warning { background: rgba(230, 162, 60, 0.14); border-color: rgba(230, 162, 60, 0.4); color: var(--tx-90); }
.el-tag--danger { background: rgba(245, 108, 108, 0.14); border-color: rgba(245, 108, 108, 0.4); color: var(--tx-90); }
.el-tag--info { background: var(--tw-08); border-color: var(--tx-18); color: var(--tx-65); }
.el-tag--primary { background: rgba(79, 172, 254, 0.14); border-color: rgba(79, 172, 254, 0.4); color: var(--tx-90); }
.el-tag.is-plain { background: var(--tw-04); }


.el-breadcrumb__inner, .el-breadcrumb__inner a { color: var(--tx-55); }
.el-breadcrumb__separator { color: var(--tx-30); }
.el-breadcrumb__item:last-child .el-breadcrumb__inner { color: var(--tx-100); }


.el-form-item__label { color: var(--tx-78); }
.el-radio__label, .el-checkbox__label { color: var(--tx-82); }
.el-descriptions__label, .el-descriptions__content { color: var(--tx-78); }
.el-descriptions__body { background: transparent; }
.el-descriptions__body .el-descriptions__cell { background: var(--tw-04); }
.el-descriptions__cell { border-color: var(--tx-10) !important; }
.el-alert {
    background: var(--tw-05);
    border: 1px solid var(--tw-12);
    color: var(--tx-85);
}
.el-alert__title { color: var(--tx-88); }
.el-alert__description { color: var(--tx-60); }
.el-alert--warning { background: rgba(230, 162, 60, 0.12); border-color: rgba(230, 162, 60, 0.32); }
.el-alert--info { background: rgba(79, 172, 254, 0.1); border-color: rgba(79, 172, 254, 0.3); }
.system-management-content .el-alert.is-light,
.system-management-content .el-alert.is-light .el-alert__title,
.system-management-content .el-alert.is-light .el-alert__description,
.system-management-content .el-alert.is-light .el-alert__content {
    color: var(--el-text-color-regular) !important;
}
.system-management-content .el-alert--info.is-light .el-alert__icon { color: #4facfe; }
.system-management-content .el-alert--warning.is-light .el-alert__icon { color: #e6a23c; }
.system-management-content .el-alert--error.is-light .el-alert__icon { color: #f56c6c; }
.el-empty__description p { color: var(--ui-text-muted); }
.el-loading-mask { background: var(--t-mask); backdrop-filter: blur(2px); }
.el-rate__icon { color: var(--tx-30); }
.el-switch { --el-switch-off-color: var(--tx-18); }
.el-divider { border-color: var(--tx-10); }
.el-divider__text { background: transparent; color: var(--tx-60); }
.el-tabs__item { color: var(--tx-65); }
.el-tabs__item.is-active { color: #4facfe; }
.el-tabs__nav-wrap::after { background-color: var(--tx-10); }
.el-tabs__active-bar { background: linear-gradient(90deg, #4facfe, #00f2fe); }
.el-progress-bar__outer { background: var(--tw-10); }


.el-message {
    background: var(--t-popup);
    border: 1px solid var(--tw-12);
    backdrop-filter: blur(16px);
    color: var(--tx-100);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.el-message .el-message__content { color: var(--tx-100); }


@media (max-width: 767px) {
    
    .sidebar-mobile {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 220px;
        z-index: 2000;
        transform: translateX(-100%);
        transition: transform .3s ease;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.4);
        overflow-y: auto;
    }
    .sidebar-mobile.sidebar-open {
        transform: translateX(0);
    }

    
    .topbar { padding: 0 12px; }
    .topbar-left { min-width: 0; }
    .user-name { display: none; }
    .topbar-right .el-tag { display: none; }

    
    .el-col { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
    .el-col .el-card { margin-bottom: 12px; }

    
    .content-area { padding: 12px; }
    .screen-embed { height: calc(100vh - 86px); }

    
    .el-dialog { width: 92% !important; max-width: 92% !important; }
    .el-message-box { width: 92% !important; max-width: 92% !important; }

    
    .login-card { width: 92%; padding: 32px 22px 22px; }

    
    .el-breadcrumb { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .topbar-left .el-badge { margin-left: 8px !important; flex-shrink: 0; }
    .responsive-table .el-table__header-wrapper tr th.el-table-fixed-column--right,
    .responsive-table .el-table__body-wrapper tr td.el-table-fixed-column--right,
    .responsive-table .el-table__footer-wrapper tr td.el-table-fixed-column--right {
        position: static !important;
        right: auto !important;
        box-shadow: none;
    }
}


.el-table .overdue-row td.el-table__cell { background: rgba(245, 108, 108, 0.10); }
.el-table .overdue-row:hover > td.el-table__cell { background: rgba(245, 108, 108, 0.16) !important; }


.app-footer {
    height: auto !important;
    padding: 10px 16px;
    border-top: 1px solid var(--tw-08);
    background: var(--tw-02);
}
.footer-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    color: var(--ui-text-muted);
    flex-wrap: wrap;
}
.footer-link { font-size: 12px; }
.login-icp .footer-link { margin: 0 6px; font-size: 12px; }
.login-icp span + .footer-link,
.login-icp .footer-link + .footer-link { margin-left: 8px; }


.login-lang-switch {
    position: absolute;
    top: 18px;
    right: 22px;
    z-index: 20;
}
.login-lang-switch .lang-btn,
.topbar-lang .lang-btn {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    color: var(--tx-75);
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid var(--tw-12);
    background: var(--tw-02);
    transition: all .2s;
    white-space: nowrap;
}
.login-lang-switch .lang-btn:hover,
.topbar-lang .lang-btn:hover {
    color: var(--primary, #4facfe);
    border-color: var(--primary, #4facfe);
}
.topbar-lang {
    margin: 0 6px;
    flex-shrink: 0;
}
.topbar-lang .lang-btn {
    border: none;
    background: transparent;
    padding: 5px 8px;
}
.el-dropdown-menu .is-active {
    color: var(--primary, #4facfe);
    font-weight: 600;
}


.sim-stat {
    background: linear-gradient(135deg, rgba(37,244,238,0.06), rgba(79,172,254,0.03));
    border: 1px solid rgba(37,244,238,0.15);
    border-radius: 10px;
    padding: 14px 16px;
}
.sim-stat-label { color: var(--ui-text-muted); font-size: 12px; }
.sim-stat-value { font-size: 22px; font-weight: 700; margin-top: 4px; color: var(--tx-90, #fff); font-family: "DIN", "Roboto", sans-serif; }

.sim-banner {
    background: linear-gradient(135deg, rgba(37,244,238,0.10), rgba(79,172,254,0.05));
    border: 1px solid rgba(37,244,238,0.18);
}
[data-theme="light"] .sim-banner {
    background: linear-gradient(135deg, rgba(37,244,238,0.10), rgba(79,172,254,0.06));
    border: 1px solid rgba(37,244,238,0.22);
}
.sim-banner .sim-banner-title { color: var(--tx-85, #25f4ee); }


.main-img-item {
    position: relative; cursor: pointer; padding: 2px;
    border: 2px solid transparent; border-radius: 8px; transition: border-color .2s;
}
.main-img-item:hover { border-color: var(--tx-30); }
.main-img-item.active { border-color: #25f4ee; }
.main-img-tag {
    position: absolute; left: 4px; top: 4px; z-index: 2;
    font-size: 10px; line-height: 1; padding: 3px 6px; border-radius: 8px; color: #fff;
}
.main-img-tag.cur { background: rgba(103, 194, 58, 0.88); }
.main-img-tag.sel { background: rgba(37, 244, 238, 0.9); color: #0b0f2a; }

.sim-country-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 12px 14px;
    height: 100%;
}
.sim-country-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.sim-country-flag { font-size: 22px; }
.sim-country-row {
    display: flex; align-items: center; justify-content: space-between;
    color: var(--tx-75, #a0b4e0); font-size: 12px;
    padding: 4px 0; border-bottom: 1px dashed rgba(255,255,255,0.05);
}
.sim-country-foot { margin-top: 8px; color: #25f4ee; font-size: 11px; opacity: 0.85; }

.engine-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: #909399; margin-right: 6px; vertical-align: 1px;
}
.engine-dot.on { background: #67c23a; box-shadow: 0 0 6px rgba(103,194,58,0.8); animation: engine-pulse 1.2s ease-in-out infinite; }
@keyframes engine-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.sim-shop-item {
    font-size: 12px; color: var(--tx-75, #a0b4e0);
    padding: 5px 8px; border-radius: 6px;
    display: flex; justify-content: space-between;
}
.sim-shop-item:nth-child(odd) { background: rgba(255,255,255,0.03); }

.order-timeliness { min-width: 0; }
.timeliness-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 14px; }
.timeliness-actions .el-button + .el-button { margin-left: 0; }
.timeliness-batch-message { margin-top: 14px; overflow-wrap: anywhere; }
.timeliness-status > * { max-width: 100%; overflow-wrap: anywhere; }
.timeliness-toolbar { display: grid; grid-template-columns: minmax(160px,1.4fr) repeat(5,minmax(120px,1fr)) auto auto; gap: 8px; margin-bottom: 12px; }
.timeliness-summary { display: flex; flex-wrap: wrap; gap: 16px; padding: 9px 0; border-top: 1px solid var(--el-border-color-lighter); font-size: 13px; }
.timeliness-status { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; line-height: 1.35; }
.timeliness-order-no { overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.timeliness-muted { color: var(--ui-text-muted); font-size: 12px; }
.risk-overdue { color: var(--el-color-danger); }
.risk-due-soon { color: var(--el-color-warning); }
.risk-unknown { color: var(--ui-text-muted); }
.risk-not_due { color: var(--el-color-success); }
.risk-not_applicable { color: var(--ui-text-subtle); }
.timeliness-pager { display: flex; justify-content: flex-end; margin-top: 14px; overflow-x: auto; }
.timeliness-pager .pager { max-width: 100%; }
.timeliness-pager .el-pagination { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
@media (max-width: 760px) { .timeliness-toolbar { grid-template-columns: repeat(2,minmax(0,1fr)); } .timeliness-toolbar .el-input, .timeliness-toolbar .el-select { width: 100%; } }

/* TikTok customer-service workspace */
.conversation-table .el-table__row { cursor: pointer; }
.customer-chat-dialog.el-dialog { max-width: 1440px; background: var(--el-bg-color) !important; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 8px; }
.customer-chat-dialog .el-dialog__body { padding-top: 8px; }
.customer-chat-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); min-height: 560px; border: 1px solid var(--el-border-color-lighter); }
.customer-chat-main { min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--el-border-color-lighter); }
.customer-msg-list { flex: 1; min-height: 390px; max-height: 56vh; overflow-y: auto; padding: 18px; background: var(--el-fill-color-lighter); }
.customer-message { display: flex; align-items: flex-end; gap: 7px; margin-bottom: 14px; }
.customer-message.is-outgoing { justify-content: flex-start; flex-direction: row-reverse; }
.customer-message-bubble { max-width: min(72%, 680px); padding: 9px 12px; border-radius: 6px; background: var(--el-bg-color); border: 1px solid var(--el-border-color-lighter); white-space: pre-wrap; overflow-wrap: anywhere; }
.customer-message.is-outgoing .customer-message-bubble { color: #fff; background: #1769aa; border-color: #1769aa; }
.customer-message-image { display: block; width: min(240px, 100%); aspect-ratio: 4/3; margin-bottom: 7px; border-radius: 4px; }
.customer-message-meta { margin-top: 5px; font-size: 11px; opacity: .68; }
.customer-message-translation { margin-top: 8px; padding-top: 8px; border-top: 1px solid currentColor; opacity: .82; }
.unsupported-message { color: var(--el-text-color-secondary); }
.reply-tools { display: flex; gap: 8px; padding: 10px 12px 0; }
.reply-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; padding: 10px 12px 12px; }
.customer-order-panel { min-width: 0; max-height: 68vh; overflow-y: auto; padding: 14px; background: var(--el-bg-color); }
.customer-panel-title { margin-bottom: 12px; font-size: 15px; font-weight: 600; }
.customer-order-item { padding: 12px 0; border-bottom: 1px solid var(--el-border-color-lighter); }
.customer-order-head { display: flex; justify-content: space-between; gap: 8px; overflow-wrap: anywhere; }
.customer-order-meta { margin: 5px 0 10px; color: var(--el-text-color-secondary); font-size: 12px; }
.customer-order-product { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 9px; margin-top: 8px; font-size: 12px; }
.customer-order-product .el-image, .order-image-empty { width: 48px; height: 48px; border-radius: 4px; background: var(--el-fill-color); }
.order-image-empty { display: grid; place-items: center; color: var(--el-text-color-placeholder); }
.customer-order-product small { color: var(--el-text-color-secondary); }
.auto-reply-countdown { color: var(--el-color-warning); font-size: 12px; font-variant-numeric: tabular-nums; }
.customer-message-badge { margin-right: 4px; }
.customer-message-button { position: relative; }
.customer-message-badge.is-fixed .el-badge__content { transform: translateY(-35%) translateX(75%); }
.sound-disabled-dot { position: absolute; right: 2px; bottom: 3px; width: 7px; height: 7px; border: 1px solid var(--el-bg-color); border-radius: 50%; background: var(--el-color-warning); }
.customer-notification-settings { padding-bottom: 12px; border-bottom: 1px solid var(--el-border-color-lighter); margin-bottom: 12px; }
.customer-sound-row { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 42px; }
.customer-notification-item { width: 100%; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 3px 10px; padding: 11px 2px; border: 0; border-bottom: 1px solid var(--el-border-color-lighter); color: var(--el-text-color-primary); background: transparent; text-align: left; cursor: pointer; }
.customer-notification-item span { color: var(--el-text-color-regular); }
.customer-notification-item small { grid-column: 1 / -1; color: var(--el-text-color-secondary); }
.customer-notification-item:hover { background: var(--el-fill-color-light); }
@media (max-width: 900px) {
    .customer-chat-dialog { width: 100% !important; margin: 0; min-height: 100vh; }
    .customer-chat-dialog .el-dialog__body { max-height: calc(100vh - 58px); overflow-y: auto; }
    .customer-chat-layout { grid-template-columns: 1fr; }
    .customer-chat-main { border-right: 0; }
    .customer-order-panel { max-height: none; border-top: 1px solid var(--el-border-color-lighter); }
    .customer-msg-list { min-height: 48vh; max-height: 55vh; }
    .customer-message-bubble { max-width: 86%; }
}