/* =======================================================================
   淘客返利控制台 · 业务层样式
   外观令牌全部来自 /style/design-system.css（--theme-* / --surface / --radius-md …）
   这里只写这套控制台特有的东西：登录页、表格、筛选条、指标补充、规则卡、图表
   ======================================================================= */

/* reset.css 排最前，样式包里任何 display 规则都会盖掉隐藏态，这里统一兜底 */
[hidden],
.hidden {
  display: none !important;
}

/* ---------- 登录（外观照 QQ农场Bot 认证页：深色品牌栏 + 浅色表单栏） ---------- */
.tk-login {
  height: 100%;
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: 24px;
  background:
    radial-gradient(54% 46% at 84% 4%, color-mix(in srgb, var(--theme-primary) 42%, transparent), transparent 72%),
    radial-gradient(46% 40% at 2% 98%, color-mix(in srgb, var(--gold) 20%, transparent), transparent 74%),
    var(--theme-secondary);
}

.tk-auth {
  --aside-ink: #f4f7f0;
  --aside-soft: color-mix(in srgb, #f4f7f0 68%, transparent);
  --aside-faint: color-mix(in srgb, #f4f7f0 42%, transparent);
  --aside-line: rgba(255, 255, 255, 0.13);

  position: relative;
  width: min(900px, 100%);
  min-height: min(600px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(330px, 0.94fr);
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--theme-secondary);
  box-shadow: 0 24px 60px color-mix(in srgb, black 36%, transparent);
  animation: tk-auth-in 0.6s var(--motion-ease) both;
}

/* 左：品牌区 */
.tk-auth .auth-aside {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 26px;
  overflow: hidden;
  padding: 44px 46px 34px;
  color: var(--aside-ink);
  background:
    radial-gradient(70% 58% at 26% 6%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 72%),
    radial-gradient(62% 48% at 2% 96%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 74%),
    color-mix(in srgb, var(--theme-secondary) 88%, black 12%);
}

.tk-auth .auth-aside::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -30% -20% auto;
  height: 82%;
  background:
    linear-gradient(166deg, color-mix(in srgb, var(--theme-primary) 26%, transparent), transparent 64%),
    linear-gradient(14deg, color-mix(in srgb, var(--gold) 14%, transparent), transparent 56%);
  animation: tk-drift 12s ease-in-out infinite alternate;
}

.tk-auth .auth-scene {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.tk-auth .auth-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(3px 3px at 18% 62%, color-mix(in srgb, #fff4b4 85%, transparent), transparent 60%),
    radial-gradient(2px 2px at 34% 78%, color-mix(in srgb, #d6ffbf 80%, transparent), transparent 60%),
    radial-gradient(2.5px 2.5px at 52% 70%, color-mix(in srgb, #ffec96 80%, transparent), transparent 60%),
    radial-gradient(2px 2px at 68% 84%, color-mix(in srgb, #fff4b4 75%, transparent), transparent 60%),
    radial-gradient(2px 2px at 82% 66%, color-mix(in srgb, #deffaa 70%, transparent), transparent 60%);
  filter: drop-shadow(0 0 6px color-mix(in srgb, #ffec96 45%, transparent));
  animation: tk-firefly 11s ease-in-out infinite alternate;
}

.tk-auth .scene-sun {
  position: absolute;
  top: 9%;
  right: 9%;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  box-shadow:
    0 0 0 22px color-mix(in srgb, var(--gold) 5%, transparent),
    0 0 54px color-mix(in srgb, var(--gold) 14%, transparent);
  animation: tk-sun 8s ease-in-out infinite;
}

.tk-auth .scene-plot {
  position: absolute;
  bottom: -10%;
  width: 72%;
  height: 31%;
  border: 1px solid color-mix(in srgb, var(--gold) 12%, transparent);
  border-radius: 50%;
  background: repeating-linear-gradient(108deg, transparent 0 20px, color-mix(in srgb, var(--gold) 6%, transparent) 21px 22px);
  transform: rotate(-7deg);
  animation: tk-plot 14s ease-in-out infinite alternate;
}

.tk-auth .plot-one {
  left: -16%;
}

.tk-auth .plot-two {
  right: -28%;
  bottom: -15%;
  transform: rotate(9deg) scale(0.9);
  animation-delay: -6s;
}

.tk-auth .scene-plant {
  position: absolute;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--gold) 34%, var(--aside-ink));
  opacity: 0.45;
  filter: drop-shadow(0 6px 10px color-mix(in srgb, black 12%, transparent));
}

/* 装饰元素全部靠右，别压到标题和要点文字 */
.tk-auth .seed-one {
  top: 20%;
  right: 13%;
  font-size: 22px;
  animation: tk-seed 7s ease-in-out infinite;
}

.tk-auth .seed-two {
  top: 44%;
  right: 6%;
  font-size: 17px;
  animation: tk-seed 7s -2.4s ease-in-out infinite;
}

.tk-auth .seed-three {
  right: 20%;
  bottom: 26%;
  font-size: 19px;
  animation: tk-seed 7s -4.6s ease-in-out infinite;
}

.tk-auth .leaf-one {
  top: 31%;
  right: 30%;
  font-size: 18px;
  animation: tk-leaf 9s ease-in-out infinite;
}

.tk-auth .leaf-two {
  right: 8%;
  bottom: 12%;
  font-size: 16px;
  animation: tk-leaf 9s -4s ease-in-out infinite;
}

.tk-auth .aside-top,
.tk-auth .aside-copy,
.tk-auth .aside-points li {
  animation: tk-rise 0.6s var(--motion-ease) both;
}

.tk-auth .aside-copy {
  margin-top: auto;
  animation-delay: 0.08s;
}

.tk-auth .aside-points li:nth-child(1) {
  animation-delay: 0.14s;
}

.tk-auth .aside-points li:nth-child(2) {
  animation-delay: 0.2s;
}

.tk-auth .aside-points li:nth-child(3) {
  animation-delay: 0.26s;
}

.tk-auth .aside-top {
  display: flex;
  align-items: center;
  gap: 13px;
}

.tk-auth .brand-mark {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--aside-line);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 24px;
  animation: tk-pulse 3.6s ease-in-out infinite;
}

.tk-auth .brand-word {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.tk-auth .brand-word strong {
  font-size: 16px;
  font-weight: 700;
}

.tk-auth .brand-word small {
  color: var(--aside-soft);
  font-size: 11px;
}

.tk-auth .aside-copy h1 {
  margin: 0;
  max-width: 15em;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.36;
}

.tk-auth .aside-copy p {
  max-width: 34em;
  margin: 18px 0 0;
  color: var(--aside-soft);
  font-size: 13px;
  line-height: 1.8;
}

.tk-auth .aside-points {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tk-auth .aside-points li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
}

.tk-auth .aside-points li > i {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: color-mix(in srgb, var(--gold) 72%, white);
  background: rgba(255, 255, 255, 0.08);
  font-size: 16px;
  animation: tk-breathe 3.2s ease-in-out infinite;
}

.tk-auth .aside-points li:nth-child(2) > i {
  animation-delay: 0.8s;
}

.tk-auth .aside-points li:nth-child(3) > i {
  animation-delay: 1.6s;
}

.tk-auth .aside-points span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.tk-auth .aside-points strong {
  font-size: 13px;
  font-weight: 700;
}

.tk-auth .aside-points small {
  color: var(--aside-faint);
  font-size: 11px;
  line-height: 1.5;
}

.tk-auth .aside-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 4px;
  color: var(--aside-faint);
  font-size: 10px;
  letter-spacing: 0.06em;
}

/* 右：表单区 */
.tk-auth .auth-main {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 38px 34px 32px;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--surface);
}

.tk-auth .mobile-brand {
  display: none;
}

.tk-auth .auth-card {
  position: relative;
  width: 100%;
  margin-block: auto;
  animation: tk-card-in 0.62s var(--motion-ease) both;
}

.tk-auth .card-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
}

.tk-auth .card-head p {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.6;
}

.tk-auth .auth-form {
  display: grid;
  gap: 13px;
  margin-top: 20px;
}

.tk-auth .form-row {
  display: grid;
  gap: 6px;
  animation: tk-field-in 0.48s var(--motion-ease) both;
}

.tk-auth .form-row > label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
}

.tk-auth .field {
  height: 44px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--ink) 26%, transparent);
  border-radius: var(--radius-sm);
  background: #ffffff;
  transition:
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease;
}

.tk-auth .field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  animation: tk-focus 0.42s var(--motion-ease) both;
}

.tk-auth .field.invalid {
  border-color: #c2544a;
  box-shadow: 0 0 0 3px color-mix(in srgb, #c2544a 14%, transparent);
}

.tk-auth .field > i {
  flex: 0 0 auto;
  color: var(--ink-faint);
  font-size: 17px;
  transition:
    color var(--motion-fast) ease,
    transform var(--motion-fast) ease;
}

.tk-auth .field:focus-within > i:first-child {
  color: var(--accent);
  transform: scale(1.1);
}

.tk-auth .field input {
  min-width: 0;
  flex: 1;
  width: 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent !important;
  font-size: 14px;
  -webkit-appearance: none;
  appearance: none;
}

.tk-auth .field input::placeholder {
  color: color-mix(in srgb, var(--ink) 58%, transparent);
}

.tk-auth .ghost-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  color: var(--ink-faint);
  background: transparent;
  cursor: pointer;
  transition:
    color var(--motion-fast) ease,
    background var(--motion-fast) ease;
}

.tk-auth .ghost-icon:hover {
  color: var(--ink);
  background: var(--surface-muted);
}

.tk-auth .notice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  color: #8f3730;
  background: color-mix(in srgb, #c2544a 14%, transparent);
  font-size: 12px;
  line-height: 1.5;
  animation: tk-notice 0.28s var(--motion-ease) both;
}

.tk-auth .submit {
  position: relative;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-sm);
  color: #fff;
  background: var(--theme-gradient);
  background-size: 180% 180%;
  box-shadow: var(--shadow-glow);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  animation: tk-flow 7s ease-in-out infinite;
  transition:
    transform var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    opacity var(--motion-fast) ease;
}

.tk-auth .submit::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 -42%;
  width: 32%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skew(-18deg);
  transition: left 0.58s var(--motion-ease);
}

.tk-auth .submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lift);
}

.tk-auth .submit:hover:not(:disabled)::after,
.tk-auth .submit:focus-visible:not(:disabled)::after {
  left: 116%;
}

.tk-auth .submit:disabled {
  opacity: 0.55;
  box-shadow: none;
  cursor: not-allowed;
}

.tk-auth .submit > i:last-child {
  transition: transform var(--motion-fast) ease;
}

.tk-auth .submit:hover:not(:disabled) > i:last-child {
  transform: translateX(3px);
}

.tk-auth .card-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 12px 0 0;
  color: var(--ink-faint);
  font-size: 10px;
  text-align: center;
}

/* 窄屏：收成一张浅色卡片，品牌区换成卡片上方的紧凑标识 */
@media (max-width: 860px) {
  .tk-login {
    display: block;
    padding: 0;
    background: linear-gradient(
      168deg,
      color-mix(in srgb, var(--theme-primary) 46%, white) 0%,
      var(--theme-primary) 58%,
      var(--theme-secondary) 100%
    );
  }

  .tk-auth {
    display: block;
    width: 100%;
    min-height: 100dvh;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    animation: none;
  }

  .tk-auth .auth-aside {
    display: none;
  }

  .tk-auth .auth-main {
    min-height: 100dvh;
    padding: 26px 18px calc(22px + env(safe-area-inset-bottom));
    border-radius: 0;
    background: transparent;
  }

  .tk-auth .mobile-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin: max(4vh, 22px) 0 20px;
    color: #fff;
  }

  .tk-auth .mobile-brand .brand-mark {
    width: 44px;
    height: 44px;
    border-color: rgba(255, 255, 255, 0.24);
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    font-size: 22px;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--theme-secondary) 32%, transparent);
  }

  .tk-auth .mobile-brand .brand-word strong {
    color: #fff;
    font-size: 17px;
  }

  .tk-auth .mobile-brand .brand-word small {
    color: color-mix(in srgb, white 82%, transparent);
  }

  .tk-auth .auth-card {
    padding: 22px 20px;
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: 0 18px 48px color-mix(in srgb, var(--theme-secondary) 34%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tk-auth,
  .tk-auth *,
  .tk-auth *::before,
  .tk-auth *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@keyframes tk-auth-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.99);
  }
}

@keyframes tk-card-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.99);
  }
}

@keyframes tk-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@keyframes tk-field-in {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
}

@keyframes tk-notice {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
}

@keyframes tk-focus {
  60% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 13%, transparent);
  }
}

@keyframes tk-flow {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes tk-pulse {
  45% {
    transform: translateY(-2px) rotate(-3deg);
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--theme-primary) 8%, transparent);
  }
}

@keyframes tk-breathe {
  50% {
    transform: scale(1.08);
    filter: brightness(1.2);
  }
}

@keyframes tk-drift {
  to {
    transform: translate3d(-14px, 20px, 0) scale(1.07);
  }
}

@keyframes tk-firefly {
  0%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  50% {
    opacity: 0.9;
    transform: translateY(-8px);
  }
}

@keyframes tk-sun {
  50% {
    transform: scale(1.06);
    opacity: 0.88;
  }
}

@keyframes tk-plot {
  to {
    translate: 10px -7px;
  }
}

@keyframes tk-seed {
  45% {
    transform: translate3d(5px, -13px, 0) rotate(8deg);
    opacity: 0.9;
  }
}

@keyframes tk-leaf {
  0%,
  100% {
    transform: rotate(-14deg);
    opacity: 0.35;
  }
  50% {
    transform: translate3d(10px, -8px, 0) rotate(15deg);
    opacity: 0.74;
  }
}

/* uno.css 里没有的图标，路径取自 @iconify-json/carbon 原文 */
.tk-auth .i-carbon-view-off {
  --un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m5.24 22.51l1.43-1.42A14.06 14.06 0 0 1 3.07 16C5.1 10.93 10.7 7 16 7a12.4 12.4 0 0 1 4 .72l1.55-1.56A14.7 14.7 0 0 0 16 5A16.69 16.69 0 0 0 1.06 15.66a1 1 0 0 0 0 .68a16 16 0 0 0 4.18 6.17'/%3E%3Cpath fill='currentColor' d='M12 15.73a4 4 0 0 1 3.7-3.7l1.81-1.82a6 6 0 0 0-7.33 7.33Zm18.94-.07a16.4 16.4 0 0 0-5.74-7.44L30 3.41L28.59 2L2 28.59L3.41 30l5.1-5.1A15.3 15.3 0 0 0 16 27a16.69 16.69 0 0 0 14.94-10.66a1 1 0 0 0 0-.68M20 16a4 4 0 0 1-6 3.44L19.44 14a4 4 0 0 1 .56 2m-4 9a13.05 13.05 0 0 1-6-1.58l2.54-2.54a6 6 0 0 0 8.35-8.35l2.87-2.87A14.54 14.54 0 0 1 28.93 16C26.9 21.07 21.3 25 16 25'/%3E%3C/svg%3E");
  -webkit-mask: var(--un-icon) no-repeat;
  mask: var(--un-icon) no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background-color: currentColor;
  color: inherit;
  width: 1.2em;
  height: 1.2em;
}

/* ---------- 表单字段（设计系统只有 .field-tip，这里补外壳） ---------- */
.tk-field,
.tk-field-dark {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.tk-field > span,
.tk-field-dark > span {
  font-size: 13px;
  font-weight: 600;
  color: color-mix(in srgb, var(--theme-text) 92%, transparent);
}

.tk-field-dark em.field-tip,
.tk-field em.field-tip {
  font-style: normal;
  color: color-mix(in srgb, var(--theme-text) 74%, transparent);
  font-size: 12px;
}

.tk-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: color-mix(in srgb, var(--theme-text) 82%, transparent);
}

/* ---------- 侧边栏分组 ---------- */
.sidebar-nav-group {
  padding: 10px 12px 3px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, white 52%, var(--sidebar-accent, #9fd4b8));
}

/* 筛选条：能一行摆下就别折成两行，搜索框吃掉剩余宽度 */
.tk-card-head {
  align-items: center;
  flex-wrap: wrap;
}

.tk-card-head .tk-actions {
  flex: 1 1 auto;
  min-width: 0;
}

@media (min-width: 900px) {
  .tk-card-head .tk-actions {
    flex-wrap: nowrap;
  }

  .tk-card-head .tk-actions > select.base-input,
  .tk-card-head .tk-actions > .base-button {
    flex: none;
  }

  .tk-card-head .tk-actions > input.base-input {
    flex: 1 1 200px;
    max-width: 320px;
  }
}

.sidebar-nav-link > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-nav-badge {
  flex: none;
  min-width: 20px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  border-radius: 999px;
  color: #231308;
  background: var(--theme-accent);
}

/* 图标遮罩没渲染出来时至少别把布局挤坏 */
.sidebar-nav-link.is-ready > div {
  display: inline-block;
}

/* ---------- 窄屏顶栏 ---------- */
.tk-mobilebar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(10px);
  color: var(--theme-text);
}

.tk-mobilebar[hidden] {
  display: none;
}

.tk-mobilebar strong {
  flex: 1;
  font-size: 15px;
}

.tk-mobilebar-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font-size: 18px;
  color: var(--theme-secondary);
  background: color-mix(in srgb, var(--theme-primary) 12%, white);
}

@media (min-width: 1024px) {
  .tk-mobilebar {
    display: none;
  }
}

/* ---------- 按钮三件套（沿用 .base-button 的高度与按压态） ---------- */
.tk-btn-primary,
.tk-btn-ghost,
.tk-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
}

.tk-btn-primary {
  color: #fff;
  background-color: var(--theme-primary);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--theme-primary) 24%, transparent);
}

.tk-btn-primary:hover {
  background-color: color-mix(in srgb, var(--theme-primary) 88%, black);
}

.tk-btn-ghost {
  color: color-mix(in srgb, var(--theme-text) 82%, transparent);
  background: color-mix(in srgb, var(--theme-text) 8%, white);
  border: 1px solid var(--border-soft);
}

.tk-btn-ghost:hover {
  background: color-mix(in srgb, var(--theme-text) 13%, white);
}

.tk-btn-danger {
  color: #fff;
  background: #c2410c;
}

.tk-btn-danger:hover {
  background: color-mix(in srgb, #c2410c 88%, black);
}

.tk-btn-quiet {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 9px;
  color: color-mix(in srgb, var(--theme-text) 74%, transparent);
  background: color-mix(in srgb, var(--theme-primary) 10%, white);
  border: 1px solid var(--border-soft);
  cursor: pointer;
  white-space: nowrap;
}

.tk-btn-quiet:hover {
  background: color-mix(in srgb, var(--theme-primary) 18%, white);
}

.tk-btn-quiet.is-on {
  color: #fff;
  background: var(--theme-primary);
  border-color: transparent;
}

.tk-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* 条里混了「标题在上」的输入框时，居中会跑到标题那一半去，改成跟输入框底边对齐并同高 */
.tk-actions-field {
  align-items: flex-end;
}

.tk-actions-field > .base-button {
  min-height: 42px;
}

/* ---------- 卡片外壳 ---------- */
.tk-card {
  padding: 18px 20px;
  border-radius: var(--radius-md, 16px);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--theme-secondary) 8%, transparent);
}

.tk-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.tk-card-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--theme-text);
}

.tk-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tk-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.tk-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.tk-grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

/* 文案页：左边窄列表，右边宽编辑器 */
.tk-grid-2-tpl {
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
}

@media (max-width: 900px) {
  .tk-grid-2-tpl {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- 表格 ---------- */
.tk-table-wrap {
  overflow: auto;
  border-radius: var(--radius-md, 16px);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--theme-secondary) 8%, transparent);
}

.tk-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  color: var(--theme-text);
}

.tk-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 11px 14px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: color-mix(in srgb, var(--theme-text) 66%, transparent);
  background: color-mix(in srgb, var(--theme-primary) 8%, var(--surface));
  border-bottom: 1px solid var(--border-soft);
}

.tk-table tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border-soft) 70%, transparent);
  vertical-align: middle;
}

.tk-table tbody tr:last-child td {
  border-bottom: 0;
}

.tk-table tbody tr:hover td {
  background: color-mix(in srgb, var(--theme-primary) 6%, transparent);
}

.tk-table .is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tk-table .is-right {
  text-align: right;
}

.tk-table .is-dim {
  color: color-mix(in srgb, var(--theme-text) 55%, transparent);
}

.tk-table .is-mono {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
}

.tk-table .is-title {
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tk-row-click {
  cursor: pointer;
}

.tk-empty {
  padding: 34px 16px;
  text-align: center;
  font-size: 13px;
  color: color-mix(in srgb, var(--theme-text) 55%, transparent);
}

.tk-truncate {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: bottom;
}

/* ---------- 小胶囊 / 状态 ---------- */
.tk-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 999px;
  white-space: nowrap;
  background: color-mix(in srgb, var(--theme-text) 8%, white);
  color: color-mix(in srgb, var(--theme-text) 74%, transparent);
}

.tk-pill.is-ok {
  background: color-mix(in srgb, #16a34a 14%, white);
  color: #14603a;
}

.tk-pill.is-warn {
  background: color-mix(in srgb, var(--theme-accent) 26%, white);
  color: #6b4b10;
}

.tk-pill.is-bad {
  background: color-mix(in srgb, #dc2626 13%, white);
  color: #8f2020;
}

.tk-pill.is-info {
  background: color-mix(in srgb, var(--theme-primary) 14%, white);
  color: var(--theme-secondary);
}

/* ---------- 键值块 ---------- */
.tk-kv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px 18px;
}

.tk-kv > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.tk-kv small {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--theme-text) 48%, transparent);
}

.tk-kv b {
  font-size: 14px;
  font-weight: 600;
  color: var(--theme-text);
  word-break: break-all;
}

.tk-pre {
  margin: 0;
  padding: 12px 14px;
  max-height: 340px;
  overflow: auto;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  line-height: 1.65;
  color: color-mix(in srgb, var(--theme-text) 88%, transparent);
  white-space: pre-wrap;
  word-break: break-all;
  border-radius: 12px;
  background: color-mix(in srgb, var(--theme-secondary) 7%, white);
  border: 1px solid var(--border-soft);
}

/* 扫码授权：左边二维码，右边说明和按钮 */
.tk-auth-qr {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.tk-qr {
  flex: none;
  width: 240px;
  height: 240px;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(24, 55, 43, 0.08);
}

.tk-qr svg {
  display: block;
  width: 100%;
  height: 100%;
}

.tk-auth-qr-side {
  flex: 1 1 auto;
  min-width: 0;
}

.tk-need {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--theme-primary) 24%, white);
  background: color-mix(in srgb, var(--theme-primary) 5%, white);
}

.tk-need h4 {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--theme-text);
}

.tk-need p {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.75;
  color: color-mix(in srgb, var(--theme-text) 78%, transparent);
}

.tk-need b {
  color: var(--theme-primary);
}

/* design-system 那条 .base-input 把 border-color / background-color 写成了 !important，这里必须跟着加 */
.tk-field.is-missing input.base-input:not([type='checkbox']):not([type='radio']):not([type='range']) {
  border-color: color-mix(in srgb, #dc2626 65%, transparent) !important;
  background: color-mix(in srgb, #dc2626 5%, white) !important;
}

.tk-field.is-missing > span {
  color: #8f2020;
}

@media (max-width: 720px) {
  .tk-auth-qr {
    flex-direction: column;
  }
}

.tk-reply {
  margin: 0;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--theme-text);
  border-radius: 14px;
  background: color-mix(in srgb, var(--theme-primary) 8%, white);
  border: 1px solid var(--border-soft);
}

/* ---------- 概览：检查项 ---------- */
.tk-check-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px 10px;
}

.tk-check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-size: 13px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--theme-text);
}

.tk-check-item i {
  flex: none;
  font-size: 16px;
}

.tk-check-item.is-ok i {
  color: #16a34a;
}

.tk-check-item.is-bad {
  background: color-mix(in srgb, var(--theme-accent) 12%, white);
  border-color: color-mix(in srgb, var(--theme-accent) 34%, transparent);
}

.tk-check-item.is-bad i {
  color: #b45309;
}

.tk-check-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tk-check-item em {
  font-style: normal;
  margin-left: auto;
  flex: none;
  font-size: 11px;
  color: color-mix(in srgb, var(--theme-text) 46%, transparent);
}

/* ---------- 走势图 ---------- */
.tk-chart {
  display: flex;
  gap: 8px;
  height: 196px;
  margin-top: 6px;
}

.tk-chart-y {
  position: relative;
  flex: none;
  width: 46px;
  height: calc(100% - 22px);
}

.tk-chart-y > span {
  position: absolute;
  right: 4px;
  transform: translateY(-50%);
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  color: color-mix(in srgb, var(--theme-text) 42%, transparent);
  font-variant-numeric: tabular-nums;
}

.tk-chart-plot {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

/* 网格线和柱子共用同一块绘图区，底部 22px 留给日期 */
.tk-chart-lines,
.tk-chart-bars {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 22px;
}

.tk-chart-lines {
  pointer-events: none;
}

.tk-chart-lines i {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  margin-top: -0.5px;
  background: color-mix(in srgb, var(--theme-text) 8%, transparent);
}

.tk-chart-lines i:last-child {
  background: color-mix(in srgb, var(--theme-text) 22%, transparent);
}

.tk-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
}

.tk-col {
  position: relative;
  display: flex;
  align-items: flex-end;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
}

.tk-col::before {
  content: '';
  position: absolute;
  inset: -2px -1px 0;
  border-radius: 8px;
  transition: background-color 0.16s ease;
}

.tk-col:hover::before {
  background: color-mix(in srgb, var(--theme-primary) 8%, transparent);
}

.tk-bar {
  position: relative;
  width: 100%;
  min-width: 3px;
  height: var(--h, 0%);
  min-height: 3px;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--theme-primary) 92%, white),
    color-mix(in srgb, var(--theme-primary) 44%, white)
  );
  transition: filter 0.16s ease;
}

.tk-col.is-zero .tk-bar {
  background: color-mix(in srgb, var(--theme-text) 13%, transparent);
}

.tk-col.is-today .tk-bar {
  background: linear-gradient(180deg, var(--theme-primary), var(--theme-secondary));
}

.tk-col:hover .tk-bar {
  filter: brightness(1.06) saturate(1.15);
}

/* 峰值那根柱子上方标一个数，悬停时让位给气泡 */
.tk-bar::before {
  content: attr(data-val);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 5px);
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 700;
  color: var(--theme-primary);
  opacity: 0;
}

.tk-col.is-peak .tk-bar::before {
  opacity: 1;
}

.tk-col:hover .tk-bar::before {
  opacity: 0;
}

.tk-bar::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 8;
  padding: 7px 10px;
  border-radius: 9px;
  background: var(--theme-secondary);
  color: #f4fbf7;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.55;
  white-space: pre-line;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 10px 26px rgba(10, 40, 28, 0.26);
  transform: translate(-50%, 4px);
  transition: opacity 0.14s ease, transform 0.14s ease;
}

.tk-col:hover .tk-bar::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* 最左最右两根的气泡贴着柱子往外开，别被卡片裁掉 */
.tk-col:first-child .tk-bar::after,
.tk-col:last-child .tk-bar::after {
  left: 0;
  transform: translate(0, 4px);
}

.tk-col:last-child .tk-bar::after {
  left: auto;
  right: 0;
}

.tk-col:first-child:hover .tk-bar::after,
.tk-col:last-child:hover .tk-bar::after {
  transform: translate(0, 0);
}

.tk-x {
  position: absolute;
  left: 50%;
  bottom: -19px;
  transform: translateX(-50%);
  font-size: 10.5px;
  font-style: normal;
  white-space: nowrap;
  color: color-mix(in srgb, var(--theme-text) 45%, transparent);
  font-variant-numeric: tabular-nums;
}

.tk-col.is-today .tk-x {
  color: var(--theme-primary);
  font-weight: 700;
}

.tk-chart-empty {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--theme-primary) 3%, transparent);
  color: color-mix(in srgb, var(--theme-text) 45%, transparent);
  font-size: 13px;
}

.tk-chart-tabs {
  margin-bottom: 4px;
}

/* ---------- 分级规则 ---------- */
.tk-tier {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--theme-primary) 4%, white);
}

.tk-tier.is-off {
  opacity: 0.6;
}

.tk-tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 10px;
}

.tk-tier-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* ---------- 分组筛选条 ---------- */
.tk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #dfe4ea;
  border-radius: 999px;
  background: #fff;
  color: var(--theme-text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .16s, border-color .16s, color .16s;
}

.tk-chip b {
  font-size: 12px;
  font-weight: 500;
  color: color-mix(in srgb, var(--theme-text) 55%, transparent);
}

.tk-chip:hover {
  border-color: color-mix(in srgb, var(--theme-primary) 45%, #dfe4ea);
}

.tk-chip.is-on {
  border-color: color-mix(in srgb, var(--theme-primary) 55%, transparent);
  background: color-mix(in srgb, var(--theme-primary) 10%, white);
  color: color-mix(in srgb, var(--theme-primary) 78%, black);
}

.tk-chip.is-on b {
  color: color-mix(in srgb, var(--theme-primary) 70%, black);
}

/* ---------- 带单位后缀的输入框 ---------- */
.tk-field .tk-unit {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.tk-field .tk-unit > input {
  flex: 1 1 auto;
  min-width: 0;
}

/* design-system 里那条 .base-input:not()×3 的圆角权重更高，这里要多带一个类才压得住 */
.tk-field .tk-unit > input.base-input:not([type='checkbox']):not([type='radio']):not([type='range']) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.tk-field .tk-unit > b {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  padding: 0 12px;
  border: 1px solid #d7dce3;
  border-left: 0;
  border-radius: 0 10px 10px 0;
  background: #f4f6f9;
  color: #66707d;
  font-size: 13px;
  font-weight: 600;
}

.tk-field .tk-unit > input:focus + b {
  border-color: var(--theme-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary) 16%, transparent);
}

/* ---------- 分佣页的跳转卡 ---------- */
.tk-jump {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}

.tk-jump > span {
  flex: 1 1 auto;
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--theme-text) 58%, transparent);
}

.tk-jump > b {
  display: block;
  font-size: 14px;
}

.tk-jump > i {
  flex: none;
  color: color-mix(in srgb, var(--theme-text) 40%, transparent);
}

.tk-jump:hover {
  border-color: color-mix(in srgb, var(--theme-primary) 45%, var(--border-soft));
  box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
  transform: translateY(-1px);
}

.tk-hint {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--theme-text) 62%, transparent);
}

/* ---------- 功能开关 ---------- */
.tk-switch-list {
  display: grid;
  gap: 10px;
}

.tk-switch {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--theme-primary) 4%, white);
  cursor: pointer;
  transition:
    border-color var(--motion-fast) ease,
    background-color var(--motion-fast) ease;
}

.tk-switch:hover {
  border-color: color-mix(in srgb, var(--theme-primary) 34%, white);
}

.tk-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.tk-switch-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 17px;
  color: var(--theme-primary);
  background: color-mix(in srgb, var(--theme-primary) 12%, white);
}

.tk-switch-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tk-switch-text b {
  font-size: 14px;
  color: var(--theme-text);
}

.tk-switch-text em {
  font-style: normal;
  font-size: 12.5px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--theme-text) 60%, transparent);
}

.tk-switch-track {
  position: relative;
  flex: none;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: #d1d5db;
  transition: background-color 0.16s ease;
}

.tk-switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.16s ease;
}

.tk-switch input:checked + .tk-switch-track {
  background: var(--theme-primary);
}

.tk-switch input:checked + .tk-switch-track .tk-switch-knob {
  transform: translateX(20px);
}

.tk-switch input:focus-visible + .tk-switch-track {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary) 26%, transparent);
}

/* ---------- 提醒条 / 风险列表 ---------- */
.tk-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  background: color-mix(in srgb, var(--gold) 12%, white);
  font-size: 13px;
  line-height: 1.7;
  color: var(--theme-text);
}

.tk-alert-list {
  display: grid;
  gap: 10px;
}

.tk-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--theme-primary) 4%, white);
}

.tk-alert > i {
  flex: none;
  margin-top: 1px;
}

.tk-alert-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tk-alert-body b {
  font-size: 14px;
  color: var(--theme-text);
}

.tk-alert-body p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--theme-text) 62%, transparent);
}

.tk-alert.is-error {
  border-color: color-mix(in srgb, #dc2626 34%, transparent);
  background: color-mix(in srgb, #dc2626 6%, white);
}

.tk-alert.is-error > i {
  color: #b91c1c;
}

.tk-alert.is-warn {
  border-color: color-mix(in srgb, #d97706 34%, transparent);
  background: color-mix(in srgb, #d97706 7%, white);
}

.tk-alert.is-warn > i {
  color: #b45309;
}

.tk-alert.is-info > i {
  color: var(--theme-primary);
}

.tk-row-total td {
  font-weight: 700;
  color: var(--theme-text);
  background: color-mix(in srgb, var(--theme-primary) 5%, white);
}

/* ---------- 今日指标 ---------- */
.tk-today {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.tk-today-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--theme-primary) 4%, white);
}

.tk-today-cell small {
  font-size: 12px;
  color: color-mix(in srgb, var(--theme-text) 58%, transparent);
}

.tk-today-cell b {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--theme-text);
}

.tk-delta {
  align-self: flex-start;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  color: color-mix(in srgb, var(--theme-text) 60%, transparent);
  background: color-mix(in srgb, var(--theme-text) 8%, transparent);
}

.tk-delta.is-up {
  color: #15803d;
  background: color-mix(in srgb, #16a34a 14%, white);
}

.tk-delta.is-down {
  color: #b91c1c;
  background: color-mix(in srgb, #dc2626 10%, white);
}

/* ---------- 文案模板 ---------- */
.tk-grid-2-tpl > .tk-card:first-child {
  position: sticky;
  top: 14px;
  align-self: start;
  max-height: calc(100vh - 28px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.tk-tpl-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tk-tpl-group {
  margin: 8px 2px 1px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--theme-text) 48%, transparent);
}

.tk-tpl-group:first-child {
  margin-top: 0;
}

.tk-tpl-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  border-radius: 11px;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--theme-secondary) 4%, white);
  color: color-mix(in srgb, var(--theme-text) 82%, transparent);
  cursor: pointer;
}

.tk-tpl-item:hover {
  background: color-mix(in srgb, var(--theme-primary) 10%, white);
}

.tk-tpl-item.is-on {
  border-color: color-mix(in srgb, var(--theme-primary) 55%, transparent);
  background: color-mix(in srgb, var(--theme-primary) 14%, white);
  color: var(--theme-primary);
}

.tk-tpl-name {
  display: block;
  min-width: 0;
}

.tk-tpl-name small {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 400;
  color: color-mix(in srgb, var(--theme-text) 58%, transparent);
}

.tk-tpl-item.is-on small {
  color: color-mix(in srgb, var(--theme-primary) 76%, transparent);
}

.tk-tpl-item em {
  flex: none;
  font-style: normal;
  font-size: 10.5px;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, #dc2626 16%, white);
  color: #8f2020;
}

.tk-vars {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tk-var {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 4px 9px;
  text-align: left;
  border-radius: 9px;
  border: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--theme-secondary) 8%, white);
  color: var(--theme-secondary);
  cursor: pointer;
}

.tk-var b {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11.5px;
  font-weight: 600;
}

.tk-var small {
  font-size: 11px;
  color: color-mix(in srgb, var(--theme-text) 66%, transparent);
}

.tk-var:hover {
  border-color: color-mix(in srgb, var(--theme-primary) 55%, transparent);
  background: color-mix(in srgb, var(--theme-primary) 12%, white);
}

.tk-var-more {
  align-self: center;
  padding: 4px 10px;
  font-size: 11.5px;
  border-radius: 999px;
  border: 1px dashed var(--border-soft);
  background: transparent;
  color: color-mix(in srgb, var(--theme-text) 62%, transparent);
  cursor: pointer;
}

.tk-var-more:hover {
  border-color: color-mix(in srgb, var(--theme-primary) 45%, transparent);
  color: var(--theme-primary);
}

.tk-unknown:empty {
  display: none;
}

.tk-unknown {
  margin: 8px 0 0;
  padding: 7px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, #dc2626 24%, white);
  background: color-mix(in srgb, #dc2626 7%, white);
  color: #8f2020;
}

.tk-tpl-pv {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.tk-tpl-pv > div {
  min-width: 0;
}

.tk-tpl-pv small {
  display: block;
  margin-bottom: 4px;
  font-size: 11.5px;
  color: color-mix(in srgb, var(--theme-text) 58%, transparent);
}

@media (max-width: 1180px) {
  .tk-tpl-pv {
    grid-template-columns: minmax(0, 1fr);
  }
}

textarea.tk-area {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 13px;
  line-height: 1.7;
  color: var(--theme-text);
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  outline: none;
  resize: vertical;
}

textarea.tk-area:focus {
  border-color: color-mix(in srgb, var(--theme-primary) 55%, transparent);
}

/* ---------- 选品结果 ---------- */
.tk-item {
  display: flex;
  gap: 14px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  background: var(--surface);
}

.tk-item figure {
  margin: 0;
  flex: none;
  width: 74px;
  height: 74px;
  border-radius: 12px;
  overflow: hidden;
  background: color-mix(in srgb, var(--theme-secondary) 8%, white);
  display: grid;
  place-items: center;
  font-size: 22px;
  color: color-mix(in srgb, var(--theme-text) 40%, transparent);
}

.tk-item figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tk-item-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tk-item-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--theme-text) 70%, transparent);
}

.tk-item-metrics b {
  color: var(--theme-text);
  font-variant-numeric: tabular-nums;
}

.tk-price-big {
  font-size: 18px;
  font-weight: 700;
  color: #b45309;
  font-variant-numeric: tabular-nums;
}

/* ---------- 日志 ---------- */
.tk-log-filter {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ---------- 批量条 ---------- */
.tk-batchbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 13px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--theme-primary) 26%, transparent);
  background: color-mix(in srgb, var(--theme-primary) 10%, white);
  color: var(--theme-secondary);
}

.tk-batchbar[hidden] {
  display: none;
}

/* ---------- 补充原子类（uno.css 是按示例页生成的，这里补齐本页用到的） ---------- */
.flex-1 { flex: 1 1 0%; }
.shrink-0 { flex-shrink: 0; }
.min-w-0 { min-width: 0; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.25rem; }
.mb-4 { margin-bottom: 1rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.w-full { width: 100%; }
.text-left { text-align: left; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.font-bold { font-weight: 700; }
.leading-relaxed { line-height: 1.625; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.p-4 { padding: 1rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }

/* 浮层打开时锁住背景滚动（js/ui.js 会给 <html> 加 .ui-locked） */
html.ui-locked body {
  overflow: hidden;
}

/* 用户多选框 */
.tk-pick {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--theme-primary);
  cursor: pointer;
}

/* ---------- 用户行操作菜单 ---------- */
.tk-menu {
  position: fixed;
  z-index: 5000;
  min-width: 194px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border: 1px solid #d7dde5;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(15, 40, 30, 0.18);
}

.tk-menu.hidden {
  display: none;
}

.tk-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--theme-text);
  font-size: 13px;
  font-weight: 550;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.tk-menu-item > i {
  flex: none;
  width: 16px;
  height: 16px;
  font-size: 16px;
  color: color-mix(in srgb, var(--theme-text) 55%, transparent);
}

.tk-menu-item:hover {
  background: color-mix(in srgb, var(--theme-primary) 12%, white);
}

.tk-menu-item.is-danger {
  color: #b0352b;
}

.tk-menu-item.is-danger > i {
  color: #c1493d;
}

.tk-menu-item.is-danger:hover {
  background: rgba(196, 74, 62, 0.09);
}

/* ---------- 概览：今日数据卡 ---------- */
.section-kicker.is-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 -4px;
  color: var(--theme-text);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.section-kicker.is-head::before {
  content: '';
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: var(--theme-primary);
}

.ov-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(214px, 1fr));
  gap: 14px;
}

.ov-card {
  position: relative;
  overflow: hidden;
  padding: 18px 20px 16px;
  border: 1px solid rgba(17, 24, 39, 0.045);
  border-radius: 14px;
}

.ov-card h4 {
  margin: 0;
  color: #4b5563;
  font-size: 14px;
  font-weight: 600;
}

.ov-num {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 12px;
  color: #111827;
  font-size: 30px;
  font-weight: 750;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.ov-num small {
  color: #6b7280;
  font-size: 13px;
  font-weight: 500;
}

.ov-cmp {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 12px;
  color: #6b7280;
  font-size: 12.5px;
}

.ov-cmp span {
  display: flex;
  gap: 6px;
}

.ov-cmp b {
  color: #374151;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ov-cmp b.is-up {
  color: #0f9960;
}

.ov-cmp b.is-down {
  color: #d1495b;
}

/* 右下角的浅色水印图标：uno 的 mask 图标靠 currentColor 上色 */
.ov-mark {
  position: absolute;
  right: -6px;
  bottom: -14px;
  font-size: 104px;
  line-height: 1;
  opacity: 0.09;
  pointer-events: none;
}

.ov-card.is-gold {
  background: #fff6ec;
}

.ov-card.is-gold .ov-mark {
  color: #e8a33d;
}

.ov-card.is-blue {
  background: #eef3fe;
}

.ov-card.is-blue .ov-mark {
  color: #4d7fe3;
}

.ov-card.is-peach {
  background: #fdf0ee;
}

.ov-card.is-peach .ov-mark {
  color: #d9705f;
}

.ov-card.is-violet {
  background: #eff1fc;
}

.ov-card.is-violet .ov-mark {
  color: #6f7cd8;
}