:root {
  --color-primary: #1769e0;
  --color-success: #0d9f78;
  --color-warning: #d88b14;
  --color-danger: #dc3f59;
  --color-menu-bg: #f6faff;
  --color-menu-active-bg: rgba(23, 105, 224, .12);
  --color-menu-hover-bg: rgba(23, 105, 224, .07);
  --color-menu-text: #4a617a;
  --color-menu-text-active: #0b3159;
  --tc-bg: #edf3f9;
  --tc-surface: #ffffff;
  --tc-surface-2: #e6eef7;
  --tc-text: #08182b;
  --tc-muted: #4c627c;
  --tc-line: rgba(22, 57, 96, .2);
  --tc-shadow: 0 18px 48px rgba(29, 58, 91, .12);
  --tc-side-bg: linear-gradient(180deg, #fbfdff 0%, #edf4fb 100%);
  --tc-side-line: rgba(22, 57, 96, .14);
  --tc-side-shadow: 14px 0 38px rgba(29, 58, 91, .08);
  --tc-side-glow: rgba(23, 105, 224, .09);
  --tc-side-watermark: rgba(13, 49, 86, .035);
  --tc-header-bg: rgba(255, 255, 255, .9);
  --tc-grid-line: rgba(34, 92, 153, .05);
  color-scheme: light;
}
:root[data-theme-mode="dark"] {
  --color-primary: #5a9cff;
  --color-success: #35d4a5;
  --color-warning: #ffc55d;
  --color-danger: #ff7084;
  --color-menu-bg: #07121f;
  --color-menu-active-bg: rgba(90, 156, 255, .18);
  --color-menu-hover-bg: rgba(90, 156, 255, .1);
  --color-menu-text: #88a0bb;
  --color-menu-text-active: #ffffff;
  --tc-bg: #060d17;
  --tc-surface: #0c1929;
  --tc-surface-2: #101f32;
  --tc-text: #edf6ff;
  --tc-muted: #91a4bd;
  --tc-line: rgba(132, 176, 223, .16);
  --tc-shadow: 0 26px 70px rgba(0, 0, 0, .35);
  --tc-side-bg: linear-gradient(180deg, #091a2d 0%, #071523 100%);
  --tc-side-line: rgba(137, 176, 219, .12);
  --tc-side-shadow: 16px 0 44px rgba(0, 0, 0, .22);
  --tc-side-glow: rgba(41, 132, 255, .18);
  --tc-side-watermark: rgba(255, 255, 255, .035);
  --tc-header-bg: rgba(9, 22, 37, .9);
  --tc-grid-line: rgba(100, 159, 220, .045);
  color-scheme: dark;
}
html, body { background: var(--tc-bg) !important; color: var(--tc-text); font-family: Inter, "PingFang SC", "Noto Sans JP", "Microsoft YaHei", system-ui, sans-serif !important; }
body { transition: background .22s ease, color .22s ease; }
body::after { content: ""; position: fixed; z-index: -1; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(61, 126, 198, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(61, 126, 198, .045) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, #000, transparent 72%); }
.template, .el-container, .el-main { background: transparent !important; }
.template > .el-container { min-height: 100vh; }
.el-main { padding: 24px !important; }

.el-aside { position: relative; overflow: hidden !important; background: var(--color-menu-bg) !important; border-right: 1px solid var(--tc-line); box-shadow: 12px 0 34px rgba(6, 18, 32, .08); }
.el-aside::before { content: "TC"; position: absolute; right: -20px; bottom: 18px; color: rgba(255,255,255,.035); font-size: 92px; font-weight: 900; line-height: 1; pointer-events: none; }
.el-aside::after { content: "TUNGSTENCLOUD"; position: absolute; left: 22px; top: 74px; color: rgba(255,255,255,.28); font-size: 8px; letter-spacing: .2em; pointer-events: none; }
.ali-logo { width: auto !important; max-width: 140px; height: 34px !important; object-fit: contain; margin: 22px 24px 38px !important; filter: brightness(0) invert(1); }
.el-aside .el-menu { border-right: 0 !important; }
.el-aside .el-menu-item, .el-aside .el-submenu__title { height: 46px !important; line-height: 46px !important; margin: 4px 10px; border-radius: 12px; }
.el-aside .el-menu-item.is-active { background: var(--color-menu-active-bg) !important; box-shadow: inset 2px 0 var(--color-primary); }
.el-aside .el-menu-item:hover, .el-aside .el-submenu__title:hover { background: var(--color-menu-hover-bg) !important; }
.el-aside .iconfont { opacity: .9; }

.el-header { height: 66px !important; display: flex; align-items: center; border-bottom: 1px solid var(--tc-line); background: color-mix(in srgb, var(--tc-surface) 86%, transparent) !important; backdrop-filter: blur(16px); box-shadow: 0 5px 20px rgba(28, 56, 86, .05); }
.header-left, .header-right { align-items: center !important; }
.header-right-item { color: var(--tc-muted); }
.right-item, .head-box, .el-dropdown-header { border-radius: 10px !important; }
.el-autocomplete .el-input__inner { background: var(--tc-surface-2) !important; border-color: transparent !important; }

.tc-client-mode { position: fixed; z-index: 9999; right: 20px; bottom: 20px; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--tc-line); border-radius: 13px; color: var(--tc-text); background: color-mix(in srgb, var(--tc-surface) 90%, transparent); box-shadow: var(--tc-shadow); backdrop-filter: blur(14px); cursor: pointer; transition: transform .2s ease; }
.tc-client-mode:hover { transform: translateY(-3px); }
.tc-client-mode span { font-size: 18px; line-height: 1; }

.el-card, .main-card, .info-box, .statistics-box, .statistics-bottom, .product-list-box, .right-box > div, .content-box, .client-box { border-color: var(--tc-line) !important; background: var(--tc-surface) !important; box-shadow: none !important; }
.el-card, .info-box, .statistics-box, .statistics-bottom, .product-list-box, .right-box > div { border: 1px solid var(--tc-line); border-radius: 16px !important; }
.title-text, .el-card__header, h1, h2, h3, h4, .el-form-item__label { color: var(--tc-text) !important; }
.el-table, .el-table tr, .el-table th.el-table__cell, .el-table td.el-table__cell { background: transparent !important; color: var(--tc-text) !important; }
.el-table::before, .el-table__fixed-right::before, .el-table__fixed::before { background: var(--tc-line) !important; }
.el-table th.el-table__cell { color: var(--tc-muted) !important; font-size: 12px; font-weight: 650; }
.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf { border-bottom-color: var(--tc-line) !important; }
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell { background: var(--tc-surface-2) !important; }

.el-input__inner, .el-textarea__inner, .el-input-group__prepend, .el-input-group__append, .el-select-dropdown, .el-dropdown-menu, .el-picker-panel, .el-dialog, .el-message-box, .el-popover { color: var(--tc-text) !important; border-color: var(--tc-line) !important; background: var(--tc-surface) !important; box-shadow: var(--tc-shadow) !important; }
.el-input__inner, .el-textarea__inner { border-radius: 10px !important; }
.el-input__inner::placeholder, .el-textarea__inner::placeholder { color: var(--tc-muted) !important; }
.el-select-dropdown__item, .el-dropdown-menu__item { color: var(--tc-muted) !important; }
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover, .el-dropdown-menu__item:hover { color: var(--color-primary) !important; background: var(--tc-surface-2) !important; }
.el-dialog__title, .el-message-box__title, .el-form-item__label { color: var(--tc-text) !important; }
.el-dialog__header { border-bottom: 1px solid var(--tc-line); }
.el-loading-mask { background: color-mix(in srgb, var(--tc-surface) 78%, transparent) !important; }
.el-empty__description p, .el-pagination button, .el-pagination span:not([class*=suffix]), .el-checkbox, .el-radio { color: var(--tc-muted) !important; }
.el-pagination .btn-next, .el-pagination .btn-prev, .el-pager li { color: var(--tc-muted) !important; background: var(--tc-surface) !important; }
.el-pager li.active { color: var(--color-primary) !important; }
.el-button { border-radius: 10px !important; }
.el-button--default { color: var(--tc-text) !important; border-color: var(--tc-line) !important; background: var(--tc-surface) !important; }
.el-button--primary { border-color: var(--color-primary) !important; background: var(--color-primary) !important; box-shadow: 0 8px 20px color-mix(in srgb, var(--color-primary) 24%, transparent); }
.el-tabs__nav-wrap::after { background: var(--tc-line) !important; }
.el-tabs__item { color: var(--tc-muted) !important; }.el-tabs__item.is-active { color: var(--color-primary) !important; }
.el-divider { background: var(--tc-line) !important; }

#mainLoading { background: var(--tc-bg) !important; }
#mainLoading .ddr { background: var(--color-primary) !important; }
.bule-text, .blue-text, a.product-name { color: var(--color-primary) !important; }
.red-text, .red-time { color: var(--color-danger) !important; }
.green-text { color: var(--color-success) !important; }

@media (max-width: 900px) {
  .el-main { padding: 14px !important; }
  .tc-client-mode { right: 14px; bottom: 14px; }
  .drawer-menu { background: var(--color-menu-bg) !important; }
  .drawer-menu .el-menu { border-right: 0 !important; background: transparent !important; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }