/* TungstenCloud Console 1.8 — stable, low-overhead application shell. */
:root[theme="tungstencloud"] {
  --color-primary: #246fdd;
  --color-success: #168567;
  --color-warning: #b96d12;
  --color-danger: #d3485d;
  --color-menu-bg: #0a2035;
  --color-menu-active-bg: rgba(76, 150, 255, .18);
  --color-menu-hover-bg: rgba(255, 255, 255, .07);
  --color-menu-text: #a9bdd2;
  --color-menu-text-active: #ffffff;
  --tc-bg: #f3f6fa;
  --tc-surface: #ffffff;
  --tc-surface-2: #f7f9fc;
  --tc-text: #15263a;
  --tc-muted: #63758a;
  --tc-line: #dce4ed;
  --tc-line-strong: #c8d4e1;
  --tc-shadow: 0 8px 24px rgba(30, 55, 83, .07);
  --tc-side-bg: linear-gradient(180deg, #0b243c 0%, #071a2c 100%);
  --tc-side-line: rgba(173, 207, 239, .12);
  --tc-side-shadow: 8px 0 22px rgba(18, 39, 61, .1);
  --tc-side-glow: rgba(49, 139, 241, .14);
  --tc-side-watermark: rgba(255, 255, 255, .025);
  --tc-header-bg: #ffffff;
  --tc-grid-line: transparent;
  color-scheme: light;
}

:root[theme="tungstencloud"][data-theme-mode="dark"] {
  --color-primary: #65a5ff;
  --color-success: #40c99a;
  --color-warning: #efb35a;
  --color-danger: #ff7c8e;
  --color-menu-bg: #061321;
  --color-menu-active-bg: rgba(87, 159, 255, .2);
  --color-menu-hover-bg: rgba(255, 255, 255, .065);
  --color-menu-text: #8ea7c1;
  --color-menu-text-active: #ffffff;
  --tc-bg: #08111e;
  --tc-surface: #0f1c2b;
  --tc-surface-2: #142437;
  --tc-text: #e8f0fa;
  --tc-muted: #91a5bb;
  --tc-line: #22364c;
  --tc-line-strong: #304a66;
  --tc-shadow: 0 10px 28px rgba(0, 0, 0, .18);
  --tc-side-bg: linear-gradient(180deg, #071827 0%, #050f1b 100%);
  --tc-side-line: rgba(151, 190, 229, .11);
  --tc-side-shadow: 9px 0 24px rgba(0, 0, 0, .2);
  --tc-side-glow: rgba(68, 145, 241, .17);
  --tc-side-watermark: rgba(255, 255, 255, .022);
  --tc-header-bg: #0c1826;
  --tc-grid-line: transparent;
  color-scheme: dark;
}

html[theme="tungstencloud"],
html[theme="tungstencloud"] body {
  min-height: 100%;
  color: var(--tc-text) !important;
  background: var(--tc-bg) !important;
}

html[theme="tungstencloud"] body::after { display: none !important; }

html[theme="tungstencloud"].tc-theme-switching *,
html[theme="tungstencloud"].tc-theme-switching *::before,
html[theme="tungstencloud"].tc-theme-switching *::after {
  transition: none !important;
}

html[theme="tungstencloud"].tc-theme-switching body,
html[theme="tungstencloud"].tc-theme-switching .el-aside,
html[theme="tungstencloud"].tc-theme-switching .el-header,
html[theme="tungstencloud"].tc-theme-switching .el-main,
html[theme="tungstencloud"].tc-theme-switching .el-card,
html[theme="tungstencloud"].tc-theme-switching .main-card,
html[theme="tungstencloud"].tc-theme-switching .content-box,
html[theme="tungstencloud"].tc-theme-switching .el-dialog {
  transition: color .16s ease, background-color .16s ease, border-color .16s ease !important;
}

html[theme="tungstencloud"] .template,
html[theme="tungstencloud"] .product,
html[theme="tungstencloud"] .template > .el-container,
html[theme="tungstencloud"] .product > .el-container {
  min-height: 100vh;
  background: var(--tc-bg) !important;
}

html[theme="tungstencloud"] .el-aside {
  width: 228px !important;
  flex: 0 0 228px !important;
  border-right: 1px solid var(--tc-side-line) !important;
  color: var(--color-menu-text) !important;
  background: var(--tc-side-bg) !important;
  box-shadow: var(--tc-side-shadow) !important;
}

html[theme="tungstencloud"] .el-aside::before {
  right: -24px !important;
  bottom: 18px !important;
  color: var(--tc-side-watermark) !important;
}

html[theme="tungstencloud"][data-tc-side-brand="true"] .el-aside::after {
  content: "" !important;
}

html[theme="tungstencloud"][data-tc-plugin="true"][data-tc-side-brand="false"] .el-aside::after {
  top: 24px !important;
  left: 22px !important;
  width: 178px;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 760;
  line-height: 1.35;
  letter-spacing: .14em !important;
  white-space: pre;
  content: "TUNGSTENCLOUD\A CLOUD OPERATIONS" !important;
}

html[theme="tungstencloud"] .tc-side-brand {
  min-height: 68px !important;
  margin: 12px 14px 14px !important;
  padding: 10px 8px !important;
  border-bottom: 1px solid var(--tc-side-line) !important;
}

html[theme="tungstencloud"] .tc-side-mark {
  background: linear-gradient(135deg, #2e82f1, #18a0bd) !important;
  box-shadow: none !important;
}

html[theme="tungstencloud"] .tc-side-copy strong { color: #ffffff !important; }
html[theme="tungstencloud"] .tc-side-copy small { color: #809ab4 !important; }
html[theme="tungstencloud"] .el-aside .el-menu,
html[theme="tungstencloud"] .el-aside .el-menu-item,
html[theme="tungstencloud"] .el-aside .el-submenu__title { background: transparent !important; }
html[theme="tungstencloud"] .el-aside .el-menu-item,
html[theme="tungstencloud"] .el-aside .el-submenu__title {
  height: 46px !important;
  margin: 3px 12px !important;
  padding-right: 14px !important;
  padding-left: 16px !important;
  border-radius: 10px !important;
  color: var(--color-menu-text) !important;
  line-height: 46px !important;
}
html[theme="tungstencloud"] .el-aside .el-menu-item:hover,
html[theme="tungstencloud"] .el-aside .el-submenu__title:hover {
  color: #ffffff !important;
  background: var(--color-menu-hover-bg) !important;
}
html[theme="tungstencloud"] .el-aside .el-menu-item.is-active {
  color: #ffffff !important;
  background: var(--color-menu-active-bg) !important;
  box-shadow: inset 3px 0 #58a5ff !important;
}
html[theme="tungstencloud"] .el-aside .iconfont {
  width: 20px;
  margin-right: 11px !important;
  color: #7894af !important;
  font-size: 17px !important;
}
html[theme="tungstencloud"] .el-aside .el-menu-item:hover .iconfont,
html[theme="tungstencloud"] .el-aside .el-menu-item.is-active .iconfont { color: #dcecff !important; }

html[theme="tungstencloud"] .el-header {
  height: 68px !important;
  padding: 0 24px !important;
  border-bottom: 1px solid var(--tc-line) !important;
  color: var(--tc-text) !important;
  background: var(--tc-header-bg) !important;
  box-shadow: 0 1px 0 rgba(22, 45, 70, .02) !important;
  backdrop-filter: none !important;
}
html[theme="tungstencloud"] .tc-console-identity strong { color: var(--tc-text) !important; }
html[theme="tungstencloud"] .tc-console-identity small { color: var(--tc-muted) !important; }
html[theme="tungstencloud"] .el-main {
  min-width: 0;
  padding: 28px !important;
  color: var(--tc-text) !important;
  background: var(--tc-bg) !important;
}

html[theme="tungstencloud"] .el-card,
html[theme="tungstencloud"] .main-card,
html[theme="tungstencloud"] .content-box,
html[theme="tungstencloud"] .info-box,
html[theme="tungstencloud"] .statistics-box,
html[theme="tungstencloud"] .statistics-bottom,
html[theme="tungstencloud"] .product-list-box,
html[theme="tungstencloud"] .right-box > div {
  border: 1px solid var(--tc-line) !important;
  border-radius: 16px !important;
  color: var(--tc-text) !important;
  background: var(--tc-surface) !important;
  box-shadow: var(--tc-shadow) !important;
}

html[theme="tungstencloud"] .el-input__inner,
html[theme="tungstencloud"] .el-textarea__inner,
html[theme="tungstencloud"] .el-input-group__prepend,
html[theme="tungstencloud"] .el-input-group__append {
  border-color: var(--tc-line) !important;
  color: var(--tc-text) !important;
  background: var(--tc-surface-2) !important;
  box-shadow: none !important;
}
html[theme="tungstencloud"] .el-input__inner:focus,
html[theme="tungstencloud"] .el-textarea__inner:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 13%, transparent) !important;
}
html[theme="tungstencloud"] .el-button { box-shadow: none !important; }
html[theme="tungstencloud"] .el-button--primary {
  border-color: var(--color-primary) !important;
  background: var(--color-primary) !important;
}
html[theme="tungstencloud"] .el-button--default {
  border-color: var(--tc-line-strong) !important;
  color: var(--tc-text) !important;
  background: var(--tc-surface) !important;
}

html[theme="tungstencloud"] .el-table,
html[theme="tungstencloud"] .el-table tr,
html[theme="tungstencloud"] .el-table td.el-table__cell { background: var(--tc-surface) !important; }
html[theme="tungstencloud"] .el-table th.el-table__cell {
  color: var(--tc-muted) !important;
  background: var(--tc-surface-2) !important;
}
html[theme="tungstencloud"] .el-table td.el-table__cell,
html[theme="tungstencloud"] .el-table th.el-table__cell {
  border-bottom-color: var(--tc-line) !important;
}
html[theme="tungstencloud"] .el-table .cell {
  color: inherit;
  line-height: 1.55;
}
html[theme="tungstencloud"] .el-tabs__nav-wrap::after { height: 1px; background: var(--tc-line) !important; }
html[theme="tungstencloud"] .el-tabs__item { color: var(--tc-muted) !important; }
html[theme="tungstencloud"] .el-tabs__item.is-active,
html[theme="tungstencloud"] .el-tabs__item:hover { color: var(--color-primary) !important; }

html[theme="tungstencloud"] .tc-client-mode {
  right: 22px;
  bottom: 22px;
  width: 42px;
  height: 42px;
  border: 1px solid var(--tc-line-strong);
  border-radius: 50%;
  color: var(--tc-text);
  background: var(--tc-surface);
  box-shadow: 0 5px 16px rgba(21, 45, 72, .12);
  backdrop-filter: none;
}
html[theme="tungstencloud"] .tc-client-mode:hover { transform: translateY(-1px); }

/* The product controller keeps Magic Cube's native dynamic module lifecycle. */
html[theme="tungstencloud"][data-tc-page="product"] .config-box {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}
html[theme="tungstencloud"][data-tc-page="product"] .config-box > .content {
  min-height: 0;
  padding: 24px !important;
  overflow-x: auto;
  border: 1px solid var(--tc-line) !important;
  border-radius: 16px !important;
  color: var(--tc-text) !important;
  background: var(--tc-surface) !important;
  box-shadow: var(--tc-shadow) !important;
}

/* Plugin routes use a compact application canvas instead of the stock full-width sheet. */
html[data-tc-plugin="true"] .el-main {
  padding: 28px 30px 52px !important;
  color: var(--tc-text) !important;
  background: var(--tc-bg) !important;
}
html[data-tc-plugin="true"] .el-main > * {
  width: 100% !important;
  max-width: 1440px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 auto !important;
}
html[data-tc-plugin="true"] .el-main .main-card,
html[data-tc-plugin="true"] .el-main > .content-box,
html[data-tc-plugin="true"] .el-main > .el-card {
  width: 100% !important;
  padding: 28px 30px 34px !important;
  overflow: visible !important;
  border: 1px solid var(--tc-line) !important;
  border-radius: 18px !important;
  color: var(--tc-text) !important;
  background: var(--tc-surface) !important;
  box-shadow: var(--tc-shadow) !important;
}
html[data-tc-plugin="true"] .main-card > .main-card-title,
html[data-tc-plugin="true"] .main-card > .main-title,
html[data-tc-plugin="true"] .el-main h1:first-child,
html[data-tc-plugin="true"] .el-main h2:first-child {
  min-height: auto !important;
  margin: 0 0 20px !important;
  padding: 0 0 18px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--tc-line) !important;
  border-radius: 0 !important;
  color: var(--tc-text) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 24px !important;
  font-weight: 740 !important;
  line-height: 1.35 !important;
}
html[data-tc-plugin="true"] .main-card > .main-card-title::after,
html[data-tc-plugin="true"] .main-card > .main-title::after { display: none !important; }
html[data-tc-plugin="true"] .el-tabs__header { margin-bottom: 22px !important; }
html[data-tc-plugin="true"] .content_searchbar,
html[data-tc-plugin="true"] .searchbar,
html[data-tc-plugin="true"] .filter-box,
html[data-tc-plugin="true"] .search-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px !important;
}
html[data-tc-plugin="true"] .tabledata,
html[data-tc-plugin="true"] .content-table,
html[data-tc-plugin="true"] .content_table {
  width: 100% !important;
  max-width: none !important;
  overflow-x: auto;
  border: 1px solid var(--tc-line) !important;
  border-radius: 13px !important;
  color: var(--tc-text) !important;
  background: var(--tc-surface) !important;
  box-shadow: none !important;
}
html[data-tc-plugin="true"] .el-table th.el-table__cell,
html[data-tc-plugin="true"] .el-table td.el-table__cell { padding: 14px 0 !important; }
html[data-tc-plugin="true"] .el-table .cell { padding-right: 16px !important; padding-left: 16px !important; }

html[data-tc-page="recommend"] .recommend-box,
html[data-tc-page="recommend"] .recommend-box-open,
html[data-tc-page="recommend"] .recommend-content {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-tc-page="recommend"] .top-statistic {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin: 20px 0 26px !important;
}
html[data-tc-page="recommend"] .top-statistic .top-item {
  width: auto !important;
  min-width: 0 !important;
  min-height: 132px !important;
  margin: 0 !important;
  padding: 20px !important;
  border: 1px solid var(--tc-line) !important;
  border-radius: 14px !important;
  color: var(--tc-text) !important;
  background: var(--tc-surface-2) !important;
  box-shadow: none !important;
}
html[data-tc-page="recommend"] .top-money { color: var(--tc-text) !important; font-size: 25px !important; }
html[data-tc-page="recommend"] .top-text { color: var(--tc-muted) !important; }
html[data-tc-page="recommend"] .recommend-link,
html[data-tc-page="recommend"] .recommend-table,
html[data-tc-page="recommend"] .recommend-list,
html[data-tc-page="recommend"] .recommend-product {
  width: 100% !important;
  max-width: none !important;
}

html[data-tc-page="source"] .source-list,
html[data-tc-page="source"] .host-list,
html[data-tc-page="source"] .product-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
html[data-tc-page="source"] .source-item,
html[data-tc-page="source"] .host-item,
html[data-tc-page="source"] .product-item,
html[data-tc-page="ticket"] .ticket-item,
html[data-tc-page="ticket"] .ticket-card {
  min-width: 0 !important;
  padding: 20px !important;
  border: 1px solid var(--tc-line) !important;
  border-radius: 14px !important;
  color: var(--tc-text) !important;
  background: var(--tc-surface-2) !important;
  box-shadow: none !important;
}
html[data-tc-page="child-account"] .child-top,
html[data-tc-page="child-account"] .child-account-top,
html[data-tc-page="child-account"] .subaccount-top {
  margin-bottom: 20px !important;
  padding: 18px 20px !important;
  border: 1px solid var(--tc-line) !important;
  border-radius: 14px !important;
  background: var(--tc-surface-2) !important;
}

@media (max-width: 1180px) {
  html[data-tc-page="recommend"] .top-statistic { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html[data-tc-page="source"] .source-list,
  html[data-tc-page="source"] .host-list,
  html[data-tc-page="source"] .product-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 900px) {
  html[theme="tungstencloud"] .el-aside { width: 0 !important; flex-basis: 0 !important; border: 0 !important; }
  html[theme="tungstencloud"] .el-main,
  html[data-tc-plugin="true"] .el-main { padding: 16px 14px 78px !important; }
  html[data-tc-plugin="true"] .el-main .main-card,
  html[data-tc-plugin="true"] .el-main > .content-box,
  html[data-tc-plugin="true"] .el-main > .el-card { padding: 20px 16px 24px !important; }
}

@media (max-width: 640px) {
  html[data-tc-page="recommend"] .top-statistic,
  html[data-tc-page="source"] .source-list,
  html[data-tc-page="source"] .host-list,
  html[data-tc-page="source"] .product-list { grid-template-columns: minmax(0, 1fr) !important; }
  html[theme="tungstencloud"][data-tc-page="product"] .config-box > .content { min-height: 0; padding: 14px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html[theme="tungstencloud"] *,
  html[theme="tungstencloud"] *::before,
  html[theme="tungstencloud"] *::after { transition: none !important; animation: none !important; }
}

/* TungstenCloud 2.1.8 layout hotfix: custom top-menu wrappers prevent Element UI
 * from automatically switching the inner container to a vertical layout. */
html[theme="tungstencloud"] .template > .el-container,
html[theme="tungstencloud"] .product > .el-container {
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
}
html[theme="tungstencloud"] .template > .el-container > .el-container,
html[theme="tungstencloud"] .product > .el-container > .el-container {
  width: 0 !important;
  min-width: 0 !important;
  min-height: 100vh !important;
  display: flex !important;
  flex: 1 1 0% !important;
  flex-direction: column !important;
  align-items: stretch !important;
}
html[theme="tungstencloud"] .template > .el-container > .el-container > div:first-child,
html[theme="tungstencloud"] .product > .el-container > .el-container > div:first-child,
html[theme="tungstencloud"] .template > .el-container > .el-container > .el-header,
html[theme="tungstencloud"] .product > .el-container > .el-container > .el-header {
  width: 100% !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
}
html[theme="tungstencloud"] .template > .el-container > .el-container > .el-main,
html[theme="tungstencloud"] .product > .el-container > .el-container > .el-main {
  width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

/* Add-on templates sometimes render their Vue root as the first body element.
 * The stock loading rule hides that root; keep plugin pages recoverable. */
html[theme="tungstencloud"][data-tc-plugin="true"] body > .template:first-child,
html[theme="tungstencloud"][data-tc-plugin="true"] body > .product:first-child,
html[theme="tungstencloud"][data-tc-plugin="true"] .template,
html[theme="tungstencloud"][data-tc-plugin="true"] .product {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}