.tc-theme-root {
  /* NOTE:
     Do NOT define --tc-primary/strong/soft on body.
     JS writes these variables to :root; defining them on body would override
     the JS-selected theme and break switching.
  */
  --tc-bg-1: #ffffff;
  --tc-bg-2: #ffffff;
  --tc-bg-3: #ffffff;
  --tc-text: #35255f;
  --tc-muted: #665091;
  --tc-surface: rgba(255, 255, 255, 0.92);
  --tc-border: rgba(120, 95, 175, 0.25);
  --tc-radius: 22px;
  --tc-grad-main: linear-gradient(120deg, var(--tc-primary-soft), var(--tc-primary), var(--tc-primary-strong));
  --tc-grad-soft: linear-gradient(120deg, #ffffff, var(--tc-primary-soft), var(--tc-primary));
  --tc-grad-card: linear-gradient(120deg, #ffffff, var(--tc-primary-soft));
  --tc-page-bg: #ffffff;
}

body.table-theme.tc-theme-root,
body.user-theme-violet.tc-theme-root {
  color: var(--tc-text);
}

body.table-theme.tc-theme-root {
  background: #ffffff !important;
}

body.user-theme-violet.tc-theme-root {
  background: #ffffff !important;
}

body.table-theme.tc-theme-root :root,
body.user-theme-violet.tc-theme-root :root {
  --purple-1: var(--tc-primary-soft);
  --purple-2: var(--tc-primary-soft);
  --purple-3: var(--tc-primary);
  --purple-4: var(--tc-primary-strong);
}

body.tc-theme-root .panel,
body.tc-theme-root .modal-content,
body.tc-theme-root .form-control,
body.tc-theme-root .btn,
body.tc-theme-root .navbar,
body.tc-theme-root .input-group-addon {
  border-radius: var(--tc-radius) !important;
}

body.tc-theme-root .btn-primary,
body.tc-theme-root .shops-action-btn,
body.tc-theme-root .cfxzs-side .btn:not(.btn-light) {
  background: var(--tc-grad-main) !important;
  border-color: transparent !important;
  color: #fff !important;
}

body.tc-theme-root .app-header.navbar,
body.tc-theme-root .cfxzs-head,
body.tc-theme-root .result-head {
  background: var(--tc-grad-soft) !important;
}

body.tc-theme-root .input-group-addon {
  background: var(--tc-primary) !important;
  color: #fff !important;
  border-color: transparent !important;
}

body.tc-theme-root .form-control {
  border-color: var(--tc-border) !important;
}

/* light mode: force white page background for user + table templates */
body.user-theme-violet.tc-theme-root,
body.table-theme.tc-theme-root,
body.user-theme-violet.tc-theme-root #content,
body.table-theme.tc-theme-root .wrapper,
body.table-theme.tc-theme-root .container {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* user-wide polish for all pages (head + head2 routes) */
body.tc-theme-root .widget,
body.tc-theme-root .block,
body.tc-theme-root .login-card,
body.tc-theme-root .list-group-item,
body.tc-theme-root .well {
  border-radius: var(--tc-radius) !important;
  border-color: var(--tc-border) !important;
}

body.tc-theme-root .text-primary,
body.tc-theme-root a {
  color: var(--tc-primary-strong);
}

/* table template: replace legacy purple gradients (exclude navbar links: text-only) */
body.table-theme.tc-theme-root .panel-heading,
body.table-theme.tc-theme-root .query-unlock-group .input-group-btn .btn {
  background-image: var(--tc-grad-main) !important;
}

/* table template (light): navbar stays pure white, only text/active items themed */
body.table-theme.tc-theme-root .navbar.navbar-default {
  background: rgba(255, 255, 255, 0.92) !important;
  background-image: none !important;
}

/* user pages (all php under /user/) unified theme tone */
body.tc-theme-root .user-home .panel,
body.tc-theme-root .cfxzs-panel,
body.tc-theme-root .shops-live-wrap,
body.tc-theme-root .cfxzs-result {
  background: var(--tc-surface) !important;
  border-color: var(--tc-border) !important;
}

body.tc-theme-root .user-home .panel-heading.user-panel-head,
body.tc-theme-root .user-home .hero-card,
body.tc-theme-root .user-home .hero-entry .btn,
body.tc-theme-root .user-home .hero-stat.self-order-stat a,
body.tc-theme-root .user-home .quick-item .title i,
body.tc-theme-root .user-home .balance-actions a,
body.tc-theme-root .cfxzs-head,
body.tc-theme-root .cfxzs-side .btn:not(.btn-light),
body.tc-theme-root .shops-action-btn,
body.tc-theme-root .shops-buy-btn,
body.tc-theme-root #submit_buy {
  background-image: var(--tc-grad-main) !important;
}

body.tc-theme-root .user-home .hero-badge,
body.tc-theme-root .user-home .hero-side a,
body.tc-theme-root .user-home .hero-stat,
body.tc-theme-root .user-home .bind-tip-card,
body.tc-theme-root .cfxzs-side .btn.btn-light,
body.tc-theme-root .shops-paste-format,
body.tc-theme-root .shops-live-head {
  background-image: var(--tc-grad-main) !important;
}

body.tc-theme-root .user-home .hero-badge,
body.tc-theme-root .user-home .hero-side a,
body.tc-theme-root .user-home .hero-stat,
body.tc-theme-root .user-home .hero-stat .label,
body.tc-theme-root .user-home .hero-stat .value,
body.tc-theme-root .user-home .hero-stat .value a {
  color: #fff !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.28) !important;
}

body.tc-theme-root .cfxzs-body .input-group-addon,
body.tc-theme-root .shops-shell .input-group-addon,
body.tc-theme-root .user-home .btn-default {
  background-image: var(--tc-grad-main) !important;
  color: #fff !important;
}

body.tc-theme-root .user-home .quick-item,
body.tc-theme-root .user-home .list-group-item,
body.tc-theme-root .shops-live-wrap,
body.tc-theme-root .cfxzs-result {
  box-shadow: 0 12px 26px color-mix(in srgb, var(--tc-primary) 22%, transparent) !important;
}

body.tc-theme-root .user-home .quick-item .title,
body.tc-theme-root .user-home .bind-tip-title,
body.tc-theme-root .shops-shell .shops-guide,
body.tc-theme-root .cfxzs-result .result-tools .result-label {
  color: var(--tc-primary-strong) !important;
}

.tc-fab {
  position: fixed;
  right: 16px;
  top: 14px;
  z-index: 9998;
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  color: #fff;
  background: var(--tc-grad-main);
  box-shadow: 0 10px 24px rgba(88, 40, 200, 0.24);
}

/* table top-nav theme button */
.table-theme .tc-nav-item {
  display: flex;
  align-items: center;
  position: relative;
}
.tc-fab.tc-fab-nav {
  position: static;
  margin: 8px 4px 8px 8px;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--tc-border);
  color: #fff;
  background: var(--tc-grad-main);
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tc-fab.tc-fab-nav:hover {
  background: var(--tc-grad-main);
  color: #fff;
}

.tc-panel {
  position: fixed;
  right: 16px;
  top: 56px;
  width: 320px;
  max-width: calc(100vw - 24px);
  z-index: 9999;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--tc-border);
  border-radius: 16px;
  box-shadow: 0 20px 44px rgba(48, 27, 108, 0.26);
  padding: 12px 12px 10px;
}

.tc-panel.tc-hidden {
  display: none;
}

.tc-panel.tc-panel-nav {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: auto;
  width: 320px;
  max-width: min(92vw, 320px);
}

.tc-title {
  margin: 0 0 8px;
  font-weight: 700;
  color: #302060;
}

.tc-row {
  margin-bottom: 10px;
}

/* fallback: hide legacy mode row from cached old JS panel */
.tc-panel #tcModeRow,
.tc-panel .tc-row:nth-of-type(n+3) {
  display: none !important;
}

.tc-chip-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tc-chip {
  border: 1px solid #e1d7fb;
  background: #fff;
  color: #3c2e67;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
}

.tc-chip.active {
  border-color: var(--tc-primary);
  box-shadow: 0 0 0 1px var(--tc-primary-soft) inset;
}

.tc-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  margin-right: 6px;
  vertical-align: -1px;
}

@media (max-width: 768px) {
  .tc-panel {
    right: 10px;
    left: 10px;
    width: auto;
    top: 54px;
  }
  .tc-fab {
    right: 10px;
    top: 10px;
  }
  .tc-fab.tc-fab-nav {
    margin: 6px 4px;
    width: 32px;
    height: 32px;
  }
}