/* ==========================================================================
   TY 云科技 · 购物车（Cart/Vault）双主题配色规范
   - 浅色模式（Light）：浅色·玫瑰粉 × 奶白
   - 深色模式（Dark）：深色·柔粉 × 梅紫灰
   严格对齐设计稿 202C360172C0F9A17B832D345059F8D6.png
   ========================================================================== */

:root {
  /* ----------------------------------------------------
     浅色模式（默认 / light）: 玫瑰粉 × 奶白
     ---------------------------------------------------- */
  --ty-c-bg: #faf7f8;
  --ty-c-card: #ffffff;
  --ty-c-card-subtle: #fcf9fb;
  --ty-c-card-border: #f0e6ec;
  --ty-c-card-border-hover: #e8c6d5;
  --ty-c-text: #27212b;
  --ty-c-text-sub: #635b67;
  --ty-c-text-muted: #8d8591;

  /* 玫瑰粉主题色 */
  --ty-c-rose: #ab4468;
  --ty-c-rose-hover: #963556;
  --ty-c-rose-subtle: #fbf0f4;
  --ty-c-rose-border: #f2d4e0;

  /* 横幅 Banner */
  --ty-c-banner-bg: linear-gradient(135deg, #fceef3 0%, #faedf0 50%, #f7ede9 100%);
  --ty-c-banner-border: #f4dfe6;
  --ty-c-banner-title: #b54567;
  --ty-c-banner-sub: #6e6471;
  --ty-c-banner-pill-bg: #ffffff;
  --ty-c-banner-pill-border: #eed2dd;
  --ty-c-banner-pill-text: #964260;

  /* 导航与标签 Pills */
  --ty-c-pill-bg: #f5edf1;
  --ty-c-pill-text: #594f5d;
  --ty-c-pill-active-bg: #ab4468;
  --ty-c-pill-active-text: #ffffff;

  /* 特惠与线路通知栏 (CN2 Box) */
  --ty-c-notice-bg: #f4faf6;
  --ty-c-notice-border: #d2ecd9;
  --ty-c-notice-text: #1d7348;
  --ty-c-notice-sub: #4b8064;

  /* 规格项 Spec Box */
  --ty-c-spec-k: #857d89;
  --ty-c-spec-v: #27212b;

  /* 按钮与状态 */
  --ty-c-btn-outline-border: #d4a5b7;
  --ty-c-btn-outline-text: #ab4468;
  --ty-c-btn-outline-hover-bg: #fdf2f6;

  --ty-c-btn-primary-bg: linear-gradient(135deg, #b8436b 0%, #a4385d 100%);
  --ty-c-btn-primary-text: #ffffff;
  --ty-c-btn-primary-shadow: 0 4px 14px rgba(171, 68, 104, .28);

  --ty-c-btn-soldout-bg: transparent;
  --ty-c-btn-soldout-border: #d6cbd2;
  --ty-c-btn-soldout-text: #8c828e;

  /* 徽章 */
  --ty-c-badge-bg: #fcedf2;
  --ty-c-badge-text: #ab4468;
  --ty-c-badge-border: #f5d4e1;

  --ty-c-badge-green-bg: #eaf6ee;
  --ty-c-badge-green-text: #1d7348;
  --ty-c-badge-green-border: #c8ebd1;

  /* 浮动选型建议框 */
  --ty-c-helper-bg: #ffffff;
  --ty-c-helper-border: #f0e6ec;
}

/* ----------------------------------------------------
   深色模式（dark）: 柔粉 × 梅紫灰
   ---------------------------------------------------- */
:root[data-theme="dark"],
html[data-theme="dark"],
body[data-theme="dark"] {
  --ty-c-bg: #1c1720;
  --ty-c-card: #252029;
  --ty-c-card-subtle: #29232d;
  --ty-c-card-border: #352c38;
  --ty-c-card-border-hover: #543c51;
  --ty-c-text: #f5edf3;
  --ty-c-text-sub: #bcaeb9;
  --ty-c-text-muted: #857783;

  /* 柔粉主题色 */
  --ty-c-rose: #df88aa;
  --ty-c-rose-hover: #ec9cbd;
  --ty-c-rose-subtle: #342732;
  --ty-c-rose-border: #4d3647;

  /* 横幅 Banner */
  --ty-c-banner-bg: linear-gradient(135deg, #372935 0%, #302530 50%, #29242a 100%);
  --ty-c-banner-border: #453443;
  --ty-c-banner-title: #f2d4e1;
  --ty-c-banner-sub: #baa9b6;
  --ty-c-banner-pill-bg: rgba(255, 255, 255, .08);
  --ty-c-banner-pill-border: rgba(255, 255, 255, .15);
  --ty-c-banner-pill-text: #eecada;

  /* 导航与标签 Pills */
  --ty-c-pill-bg: #2b232c;
  --ty-c-pill-text: #b8aab5;
  --ty-c-pill-active-bg: #4a3447;
  --ty-c-pill-active-text: #f8e1ec;

  /* 特惠与线路通知栏 (CN2 Box) */
  --ty-c-notice-bg: #223229;
  --ty-c-notice-border: #2d4c3a;
  --ty-c-notice-text: #59d18e;
  --ty-c-notice-sub: #90bfa3;

  /* 规格项 Spec Box */
  --ty-c-spec-k: #8f828e;
  --ty-c-spec-v: #eee5ed;

  /* 按钮与状态 */
  --ty-c-btn-outline-border: #5a3d52;
  --ty-c-btn-outline-text: #e393b3;
  --ty-c-btn-outline-hover-bg: #352533;

  --ty-c-btn-primary-bg: linear-gradient(135deg, #c74b77 0%, #aa3b63 100%);
  --ty-c-btn-primary-text: #ffffff;
  --ty-c-btn-primary-shadow: 0 4px 16px rgba(0, 0, 0, .45);

  --ty-c-btn-soldout-bg: transparent;
  --ty-c-btn-soldout-border: #3b323c;
  --ty-c-btn-soldout-text: #736873;

  /* 徽章 */
  --ty-c-badge-bg: #3a2836;
  --ty-c-badge-text: #e49ab8;
  --ty-c-badge-border: #4e3549;

  --ty-c-badge-green-bg: #1f3627;
  --ty-c-badge-green-text: #5bd491;
  --ty-c-badge-green-border: #2c543a;

  /* 浮动选型建议框 */
  --ty-c-helper-bg: #252029;
  --ty-c-helper-border: #352c38;
}

/* 系统偏好为 dark 且未显式指定 light 时的自动生效 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]),
  html:not([data-theme="light"]) {
    --ty-c-bg: #1c1720;
    --ty-c-card: #252029;
    --ty-c-card-subtle: #29232d;
    --ty-c-card-border: #352c38;
    --ty-c-card-border-hover: #543c51;
    --ty-c-text: #f5edf3;
    --ty-c-text-sub: #bcaeb9;
    --ty-c-text-muted: #857783;
    --ty-c-rose: #df88aa;
    --ty-c-rose-hover: #ec9cbd;
    --ty-c-rose-subtle: #342732;
    --ty-c-rose-border: #4d3647;
    --ty-c-banner-bg: linear-gradient(135deg, #372935 0%, #302530 50%, #29242a 100%);
    --ty-c-banner-border: #453443;
    --ty-c-banner-title: #f2d4e1;
    --ty-c-banner-sub: #baa9b6;
    --ty-c-banner-pill-bg: rgba(255, 255, 255, .08);
    --ty-c-banner-pill-border: rgba(255, 255, 255, .15);
    --ty-c-banner-pill-text: #eecada;
    --ty-c-pill-bg: #2b232c;
    --ty-c-pill-text: #b8aab5;
    --ty-c-pill-active-bg: #4a3447;
    --ty-c-pill-active-text: #f8e1ec;
    --ty-c-notice-bg: #223229;
    --ty-c-notice-border: #2d4c3a;
    --ty-c-notice-text: #59d18e;
    --ty-c-notice-sub: #90bfa3;
    --ty-c-spec-k: #8f828e;
    --ty-c-spec-v: #eee5ed;
    --ty-c-btn-outline-border: #5a3d52;
    --ty-c-btn-outline-text: #e393b3;
    --ty-c-btn-outline-hover-bg: #352533;
    --ty-c-btn-primary-bg: linear-gradient(135deg, #c74b77 0%, #aa3b63 100%);
    --ty-c-btn-primary-text: #ffffff;
    --ty-c-btn-primary-shadow: 0 4px 16px rgba(0, 0, 0, .45);
    --ty-c-btn-soldout-bg: transparent;
    --ty-c-btn-soldout-border: #3b323c;
    --ty-c-btn-soldout-text: #736873;
    --ty-c-badge-bg: #3a2836;
    --ty-c-badge-text: #e49ab8;
    --ty-c-badge-border: #4e3549;
    --ty-c-badge-green-bg: #1f3627;
    --ty-c-badge-green-text: #5bd491;
    --ty-c-badge-green-border: #2c543a;
    --ty-c-helper-bg: #252029;
    --ty-c-helper-border: #352c38;
  }
}

/* ==========================================================================
   页面容器全局底色映射
   ========================================================================== */
body,
.main-content,
.page-content,
.ty-catalog {
  background-color: var(--ty-c-bg) !important;
  color: var(--ty-c-text);
  transition: background-color .2s ease, color .2s ease;
}

/* 隐藏原有老样式外壳 */
.products-banner-buttons.ty-products-banner,
.ty-l1-tabs {
  display: none !important;
}

/* 顶部面包屑导航条 */
.ty-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ty-c-text-muted);
  margin-bottom: 16px;
}
.ty-breadcrumb a {
  color: var(--ty-c-text-muted) !important;
  text-decoration: none;
}
.ty-breadcrumb a:hover {
  color: var(--ty-c-rose) !important;
}

/* ==========================================================================
   Banner 横幅组件：轻松上云，自在生长。
   ========================================================================== */
.ty-cloud-banner {
  position: relative;
  border-radius: 18px;
  background: var(--ty-c-banner-bg);
  border: 1px solid var(--ty-c-banner-border);
  padding: 28px 36px;
  margin-bottom: 24px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .02);
  transition: all .2s ease;
}
.ty-banner-subtag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ty-c-rose);
  margin-bottom: 8px;
}
.ty-banner-subtag::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ty-c-rose);
}
.ty-cloud-banner h2.ty-banner-title {
  font-size: 25px;
  font-weight: 850;
  color: var(--ty-c-banner-title) !important;
  margin: 0 0 8px 0;
  letter-spacing: -.01em;
}
.ty-cloud-banner p.ty-banner-desc {
  font-size: 13.5px;
  color: var(--ty-c-banner-sub);
  margin: 0 0 18px 0;
  line-height: 1.5;
}
.ty-banner-chips-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.ty-banner-chip-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  background: var(--ty-c-banner-pill-bg);
  border: 1px solid var(--ty-c-banner-pill-border);
  color: var(--ty-c-banner-pill-text);
  box-shadow: 0 2px 6px rgba(0,0,0,.02);
}
.ty-banner-chip-item i {
  font-size: 14px;
}

/* Banner 右侧趣味卡片插画装饰 */
.ty-banner-deco-card {
  position: absolute;
  right: 36px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
}
.ty-deco-badge-top {
  background: var(--ty-c-card);
  border: 1px solid var(--ty-c-card-border);
  border-radius: 10px;
  padding: 6px 14px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ty-c-text-sub);
  box-shadow: 0 4px 14px rgba(0,0,0,.04);
  margin-bottom: 10px;
}
.ty-deco-cloud-box {
  background: var(--ty-c-card);
  border: 1px solid var(--ty-c-card-border);
  border-radius: 14px;
  padding: 12px 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  gap: 12px;
}
.ty-deco-cloud-box i {
  font-size: 30px;
  color: var(--ty-c-rose);
}
.ty-deco-cloud-box .text-wrap {
  display: flex;
  flex-direction: column;
}
.ty-deco-cloud-box .t1 {
  font-size: 13px;
  font-weight: 700;
  color: var(--ty-c-text);
}
.ty-deco-cloud-box .t2 {
  font-size: 11px;
  color: var(--ty-c-text-muted);
}
@media (max-width: 992px) {
  .ty-banner-deco-card { display: none; }
}

/* ==========================================================================
   两栏布局与左侧产品分类导航
   ========================================================================== */
.ty-catalog-wrapper {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.ty-catalog-sidebar {
  width: 196px;
  flex-shrink: 0;
  position: sticky;
  top: 85px;
}
.ty-catalog-sidebar-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: var(--ty-c-text-sub);
  padding: 4px 10px 10px;
  border-bottom: 1px solid var(--ty-c-card-border);
  margin-bottom: 10px;
}
.ty-side-item a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ty-c-text-sub) !important;
  text-decoration: none;
  margin-bottom: 5px;
  transition: all .15s ease;
}
.ty-side-item a:hover {
  background: var(--ty-c-card);
  color: var(--ty-c-text) !important;
}
.ty-side-item.active a {
  background: var(--ty-c-rose-subtle) !important;
  color: var(--ty-c-rose) !important;
  font-weight: 700;
  border: 1px solid var(--ty-c-rose-border);
}
.ty-side-item .ty-sale-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  color: #df88aa;
  background: rgba(223, 136, 170, .14);
  padding: 1px 6px;
  border-radius: 6px;
}
.ty-catalog-content {
  flex: 1;
  min-width: 0;
}

/* ==========================================================================
   头部主标题与进入控制台
   ========================================================================== */
.ty-product-main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}
.ty-pmh-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ty-pmh-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ty-pmh-title {
  font-size: 22px;
  font-weight: 850;
  color: var(--ty-c-text);
  margin: 0;
}
.ty-pmh-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ty-c-badge-green-text);
  background: var(--ty-c-badge-green-bg);
  border: 1px solid var(--ty-c-badge-green-border);
  padding: 2px 8px;
  border-radius: 12px;
  text-transform: uppercase;
}
.ty-pmh-tag::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.ty-pmh-subtitle {
  font-size: 13px;
  color: var(--ty-c-text-muted);
  margin: 0;
}
.ty-btn-console-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ty-c-text-sub) !important;
  background: var(--ty-c-card);
  border: 1px solid var(--ty-c-card-border);
  text-decoration: none;
  transition: all .15s ease;
}
.ty-btn-console-pill:hover {
  background: var(--ty-c-card-subtle);
  color: var(--ty-c-text) !important;
  border-color: var(--ty-c-card-border-hover);
}

/* ==========================================================================
   二级区域分组胶囊 Tabs (香港一区, 香港六区...)
   ========================================================================== */
.ty-region-pills-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.ty-region-pill-item a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 13px;
  color: var(--ty-c-pill-text) !important;
  background: var(--ty-c-pill-bg);
  border: 1px solid transparent;
  text-decoration: none;
  transition: all .15s ease;
}
.ty-region-pill-item a:hover {
  background: var(--ty-c-card);
  color: var(--ty-c-text) !important;
  border-color: var(--ty-c-card-border);
}
.ty-region-pill-item.active a {
  background: var(--ty-c-pill-active-bg) !important;
  color: var(--ty-c-pill-active-text) !important;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
.ty-pill-cn2-badge {
  font-size: 10px;
  padding: 1px 4px;
  background: #3ecf7a;
  color: #fff;
  border-radius: 4px;
  font-weight: 700;
  margin-left: 2px;
}

/* ==========================================================================
   CN2 优化线路特惠横幅 (Notice Box)
   ========================================================================== */
.ty-notice-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-radius: 10px;
  background: var(--ty-c-notice-bg);
  border: 1px solid var(--ty-c-notice-border);
  margin-bottom: 18px;
  font-size: 13px;
}
.ty-notice-left {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ty-c-notice-text);
  font-weight: 600;
}
.ty-notice-left i {
  font-size: 17px;
}
.ty-notice-divider {
  opacity: .35;
  margin: 0 4px;
}
.ty-notice-features {
  font-weight: 400;
  color: var(--ty-c-notice-sub);
}
.ty-notice-link {
  color: var(--ty-c-notice-text) !important;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ty-notice-link:hover {
  text-decoration: underline;
}

/* ==========================================================================
   全部套餐工具条 (过滤与排序)
   ========================================================================== */
.ty-filter-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--ty-c-text-sub);
}
.ty-filter-count {
  font-weight: 700;
  color: var(--ty-c-text);
}
.ty-filter-count span {
  font-weight: 500;
  font-size: 12px;
  color: var(--ty-c-text-muted);
  margin-left: 4px;
}
.ty-filter-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* 现代化精美胶囊滑块 Switch */
.ty-stock-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  color: var(--ty-c-text-sub);
  margin-bottom: 0;
  transition: color 0.18s ease;
}
.ty-stock-toggle:hover {
  color: var(--ty-c-text);
}
.ty-switch-wrap {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
}
.ty-switch-wrap input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.ty-switch-track {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--ty-c-card-border);
  border: 1px solid var(--ty-c-card-border-hover);
  transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 34px;
}
.ty-switch-track:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16);
  transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
}
.ty-switch-wrap input:checked + .ty-switch-track {
  background-color: var(--ty-c-rose);
  border-color: var(--ty-c-rose);
}
.ty-switch-wrap input:checked + .ty-switch-track:before {
  transform: translateX(16px);
  background-color: #ffffff;
}

/* 默认排序样式优化 */
.ty-sort-select {
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--ty-c-card);
  border: 1px solid var(--ty-c-card-border);
  transition: all .18s ease;
}
.ty-sort-select:hover {
  border-color: var(--ty-c-card-border-hover);
}

/* ==========================================================================
   产品卡片核心网格 (3列布局)
   ========================================================================== */
.ty-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}
@media (max-width: 1200px) {
  .ty-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .ty-catalog-wrapper {
    flex-direction: column;
  }
  .ty-catalog-sidebar {
    width: 100%;
    position: static;
  }
  .ty-card-grid {
    grid-template-columns: 1fr;
  }
}

/* 单个产品卡片 */
.ty-plan-card {
  position: relative;
  border-radius: 18px;
  background: var(--ty-c-card);
  border: 1px solid var(--ty-c-card-border);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .02);
  transition: all .2s ease;
}
.ty-plan-card:hover {
  transform: translateY(-3px);
  border-color: var(--ty-c-card-border-hover);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .06);
}

/* 卡片右上角标签 */
.ty-plan-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  background: var(--ty-c-badge-bg);
  border: 1px solid var(--ty-c-badge-border);
  color: var(--ty-c-badge-text);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ty-plan-badge.green {
  background: var(--ty-c-badge-green-bg);
  border-color: var(--ty-c-badge-green-border);
  color: var(--ty-c-badge-green-text);
}

/* 卡片头部 */
.ty-plan-head {
  margin-bottom: 12px;
}
.ty-plan-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--ty-c-rose-subtle);
  color: var(--ty-c-rose);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  margin-bottom: 12px;
}
.ty-plan-name {
  font-size: 16.5px;
  font-weight: 850;
  color: var(--ty-c-text);
  margin: 0 0 4px 0;
}
.ty-plan-sub {
  font-size: 12px;
  color: var(--ty-c-text-muted);
  margin: 0;
}

/* 价格区域 */
.ty-plan-price-row {
  margin: 14px 0 16px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ty-plan-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.ty-plan-price-currency {
  font-size: 16px;
  font-weight: 700;
  color: var(--ty-c-text);
}
.ty-plan-price-amount {
  font-size: 29px;
  font-weight: 850;
  letter-spacing: -.02em;
  color: var(--ty-c-text);
  line-height: 1;
}
.ty-plan-price-cycle {
  font-size: 12.5px;
  color: var(--ty-c-text-muted);
}
.ty-plan-price-hint {
  font-size: 11.5px;
  color: var(--ty-c-text-muted);
}

/* 规格参数列表 */
.ty-plan-specs {
  border-top: 1px dashed var(--ty-c-card-border);
  border-bottom: 1px dashed var(--ty-c-card-border);
  padding: 14px 0;
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.ty-plan-spec-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
}
.ty-plan-spec-k {
  color: var(--ty-c-spec-k);
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
}
.ty-plan-spec-v {
  font-weight: 700;
  color: var(--ty-c-spec-v);
}
.ty-plan-spec-full {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

/* 底部状态提示 (如 仅剩1台 · 即时交付) */
.ty-plan-footer-note {
  font-size: 11.5px;
  color: var(--ty-c-text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 14px;
}
.ty-plan-footer-note::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ty-c-text-muted);
}
.ty-plan-footer-note.ok {
  color: var(--ty-c-notice-text);
}
.ty-plan-footer-note.ok::before {
  background: var(--ty-c-notice-text);
}

/* 操作按钮 */
.ty-plan-btn-wrap .btn {
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  transition: all .18s ease;
  text-decoration: none;
}

/* 默认幽灵线框按钮 */
.ty-plan-btn-outline {
  background: transparent;
  border: 1px solid var(--ty-c-btn-outline-border);
  color: var(--ty-c-btn-outline-text) !important;
}
.ty-plan-btn-outline:hover {
  background: var(--ty-c-btn-outline-hover-bg);
  border-color: var(--ty-c-rose-hover);
  color: var(--ty-c-rose-hover) !important;
}

/* 高亮主按钮（图右侧第3卡进阶优选） */
.ty-plan-btn-highlight {
  background: var(--ty-c-btn-primary-bg) !important;
  color: var(--ty-c-btn-primary-text) !important;
  border: none !important;
  box-shadow: var(--ty-c-btn-primary-shadow);
}
.ty-plan-btn-highlight:hover {
  opacity: .93;
  transform: translateY(-1px);
}

/* 售罄按钮 */
.ty-plan-btn-soldout {
  background: var(--ty-c-btn-soldout-bg);
  border: 1px solid var(--ty-c-btn-soldout-border);
  color: var(--ty-c-btn-soldout-text) !important;
  cursor: not-allowed;
}

/* ==========================================================================
   左侧悬浮选型辅助卡片 (不确定怎么选？)
   ========================================================================== */
.ty-helper-floating-card {
  margin-top: 24px;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--ty-c-helper-bg);
  border: 1px solid var(--ty-c-helper-border);
  font-size: 12px;
}
.ty-helper-title {
  font-weight: 700;
  color: var(--ty-c-text);
  margin-bottom: 4px;
}
.ty-helper-desc {
  color: var(--ty-c-text-muted);
  line-height: 1.4;
  margin-bottom: 8px;
}
.ty-helper-link {
  color: var(--ty-c-rose) !important;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.ty-helper-link:hover {
  text-decoration: underline;
}
/* ==========================================================================

   �[�T�W)�X[4^#Z���X�Y3 !}Yt�R�W (Ultra-High Specificity Dark Theme Direct Overrides)

   �m�0xrig:j+^�tPcx��~?202C360172C0F9A17B832D345059F8D6.png Y�EQvf�-lA~y�s�Mq�~?3� �YoT O�?

   ========================================================================== */



html[data-theme="dark"],

html[data-theme="dark"] body,

body[data-theme="dark"] {

  background-color: #1c1720 !important;

  color: #f5edf3 !important;

}



html[data-theme="dark"] .main-content,

html[data-theme="dark"] .page-content,

html[data-theme="dark"] .container-fluid,

html[data-theme="dark"] .ty-catalog,

html[data-theme="dark"] .ty-catalog-main,

html[data-theme="dark"] .ty-catalog-wrapper {

  background-color: #1c1720 !important;

  color: #f5edf3 !important;

}



/* $i5�.r�m�^�Z�b��x�?*/

html[data-theme="dark"] #page-topbar,

html[data-theme="dark"] .navbar-header,

html[data-theme="dark"] .ty-topnav {

  background-color: #252029 !important;

  border-color: #352c38 !important;

  color: #f5edf3 !important;

}

html[data-theme="dark"] .ty-topnav .ty-a {

  color: #bcaeb9 !important;

}

html[data-theme="dark"] .ty-topnav .ty-a:hover,

html[data-theme="dark"] .ty-topnav .ty-li.active .ty-a {

  color: #df88aa !important;

  background-color: #342732 !important;

}



/* ȕ 2�[^p?*/

html[data-theme="dark"] .ty-breadcrumb,

html[data-theme="dark"] .ty-breadcrumb a,

html[data-theme="dark"] .ty-breadcrumb span {

  color: #857783 !important;

}



/* $iX4Q Banner�3l�Nɓ�S{\m/b}w�D�jn"��q�f��?*/

html[data-theme="dark"] .ty-cloud-banner {

  background: linear-gradient(135deg, #372935 0%, #302530 50%, #29242a 100%) !important;

  border: 1px solid #453443 !important;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;

}

html[data-theme="dark"] .ty-cloud-banner h2.ty-banner-title {

  color: #f2d4e1 !important;

}

html[data-theme="dark"] .ty-cloud-banner p.ty-banner-desc {

  color: #baa9b6 !important;

}

html[data-theme="dark"] .ty-banner-subtag {

  color: #df88aa !important;

}

html[data-theme="dark"] .ty-banner-subtag::before {

  background: #df88aa !important;

}

html[data-theme="dark"] .ty-banner-chip-item {

  background: rgba(255, 255, 255, 0.08) !important;

  border: 1px solid rgba(255, 255, 255, 0.15) !important;

  color: #eecada !important;

}

html[data-theme="dark"] .ty-deco-badge-top {

  background: #252029 !important;

  border: 1px solid #352c38 !important;

  color: #baa9b6 !important;

}

html[data-theme="dark"] .ty-deco-cloud-box {

  background: #252029 !important;

  border: 1px solid #352c38 !important;

  color: #f5edf3 !important;

}

html[data-theme="dark"] .ty-deco-cloud-box i {

  color: #df88aa !important;

}

html[data-theme="dark"] .ty-deco-cloud-box .t1 {

  color: #f5edf3 !important;

}

html[data-theme="dark"] .ty-deco-cloud-box .t2 {

  color: #857783 !important;

}



/* �[?�vfR��U��nF�z͓?*/

html[data-theme="dark"] .ty-catalog-sidebar-title {

  color: #857783 !important;

  border-color: #352c38 !important;

}

html[data-theme="dark"] .ty-side-item a {

  color: #bcaeb9 !important;

}

html[data-theme="dark"] .ty-side-item a:hover {

  background: #252029 !important;

  color: #f5edf3 !important;

}

html[data-theme="dark"] .ty-side-item.active a {

  background: #342732 !important;

  color: #df88aa !important;

  border: 1px solid #4d3647 !important;

}

html[data-theme="dark"] .ty-helper-floating-card {

  background: #252029 !important;

  border: 1px solid #352c38 !important;

}

html[data-theme="dark"] .ty-helper-title {

  color: #f5edf3 !important;

}

html[data-theme="dark"] .ty-helper-desc {

  color: #857783 !important;

}

html[data-theme="dark"] .ty-helper-link {

  color: #df88aa !important;

}



/* �m�~#r�h:j/\ */

html[data-theme="dark"] .ty-pmh-title {

  color: #f5edf3 !important;

}

html[data-theme="dark"] .ty-pmh-subtitle {

  color: #857783 !important;

}

html[data-theme="dark"] .ty-btn-console-pill {

  background: #252029 !important;

  border: 1px solid #352c38 !important;

  color: #bcaeb9 !important;

}

html[data-theme="dark"] .ty-btn-console-pill:hover {

  background: #2d2633 !important;

  color: #f5edf3 !important;

}



/* \m�\��V��TYqs����l Tabs */

html[data-theme="dark"] .ty-region-pill-item a {

  background: #2b232c !important;

  color: #b8aab5 !important;

}

html[data-theme="dark"] .ty-region-pill-item a:hover {

  background: #342732 !important;

  color: #f5edf3 !important;

}

html[data-theme="dark"] .ty-region-pill-item.active a {

  background: #4a3447 !important;

  color: #f8e1ec !important;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;

}



/* �~��w��1laqW���X */

html[data-theme="dark"] .ty-notice-card {

  background: #223229 !important;

  border: 1px solid #2d4c3a !important;

}

html[data-theme="dark"] .ty-notice-left,

html[data-theme="dark"] .ty-notice-link {

  color: #59d18e !important;

}

html[data-theme="dark"] .ty-notice-features {

  color: #90bfa3 !important;

}



/* ig�V�b͓?*/

html[data-theme="dark"] .ty-filter-count {

  color: #f5edf3 !important;

}

html[data-theme="dark"] .ty-filter-count span {

  color: #857783 !important;

}

html[data-theme="dark"] .ty-stock-toggle {

  color: #bcaeb9 !important;

}

html[data-theme="dark"] .ty-switch-track {

  background-color: #352c38 !important;

  border-color: #483a4c !important;

}

html[data-theme="dark"] .ty-switch-wrap input:checked + .ty-switch-track {

  background-color: #df88aa !important;

  border-color: #df88aa !important;

}

html[data-theme="dark"] .ty-sort-select {

  background: #252029 !important;

  border-color: #352c38 !important;

}



/* \mC'dW���Xbxr͓?z>~ */

html[data-theme="dark"] .ty-plan-card {

  background: #252029 !important;

  border: 1px solid #352c38 !important;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;

}

html[data-theme="dark"] .ty-plan-card:hover {

  border-color: #543c51 !important;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;

}

html[data-theme="dark"] .ty-plan-badge {

  background: #3a2836 !important;

  border-color: #4e3549 !important;

  color: #e49ab8 !important;

}

html[data-theme="dark"] .ty-plan-badge.green {

  background: #1f3627 !important;

  border-color: #2c543a !important;

  color: #5bd491 !important;

}

html[data-theme="dark"] .ty-plan-icon {

  background: #342732 !important;

  color: #df88aa !important;

}

html[data-theme="dark"] .ty-plan-name {

  color: #f5edf3 !important;

}

html[data-theme="dark"] .ty-plan-sub {

  color: #857783 !important;

}

html[data-theme="dark"] .ty-plan-price-currency,

html[data-theme="dark"] .ty-plan-price-amount {

  color: #f5edf3 !important;

}

html[data-theme="dark"] .ty-plan-price-cycle,

html[data-theme="dark"] .ty-plan-price-hint {

  color: #857783 !important;

}

html[data-theme="dark"] .ty-plan-specs {

  border-top-color: #352c38 !important;

  border-bottom-color: #352c38 !important;

}

html[data-theme="dark"] .ty-plan-spec-k {

  color: #8f828e !important;

}

html[data-theme="dark"] .ty-plan-spec-v {

  color: #eee5ed !important;

}

html[data-theme="dark"] .ty-plan-footer-note {

  color: #857783 !important;

}

html[data-theme="dark"] .ty-plan-footer-note.ok {

  color: #59d18e !important;

}

html[data-theme="dark"] .ty-plan-footer-note.ok::before {

  background: #59d18e !important;

}



/* ��Y3c */

html[data-theme="dark"] .ty-plan-btn-outline {

  border-color: #5a3d52 !important;

  color: #e393b3 !important;

}

html[data-theme="dark"] .ty-plan-btn-outline:hover {

  background: #352533 !important;

  border-color: #ec9cbd !important;

  color: #ec9cbd !important;

}

html[data-theme="dark"] .ty-plan-btn-highlight {

  background: linear-gradient(135deg, #c74b77 0%, #aa3b63 100%) !important;

  color: #ffffff !important;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;

}

html[data-theme="dark"] .ty-plan-btn-soldout {

  border-color: #3b323c !important;

  color: #736873 !important;

}



/* O�'1�s��1ldeW���XUt�USU��\�iX��Pbf'�Ʌ3|Ut�U
m */

html[data-theme="dark"] .card,

html[data-theme="dark"] .card-body,

html[data-theme="dark"] .card-header,

html[data-theme="dark"] .card-footer,

html[data-theme="dark"] .smc-card,

html[data-theme="dark"] .ordersummary {

  background-color: #252029 !important;

  border-color: #352c38 !important;

  color: #f5edf3 !important;

}



html[data-theme="dark"] .form-control,

html[data-theme="dark"] .custom-select {

  background-color: #2c2531 !important;

  border-color: #483a4c !important;

  color: #f5edf3 !important;

}



/* $i5�.r#Z��lyy�6�LQe�GZ�s\m��	j�~?*/

#tyHeaderPillThemeBtn {

  transition: all 0.25s ease !important;

}

html[data-theme="dark"] #tyHeaderPillThemeBtn {

  background-color: #df88aa !important;

  color: #1c1720 !important;

  box-shadow: 0 2px 10px rgba(223, 136, 170, 0.4) !important;

}



/* ===== TY-CART-BTN-UNIFY 2026-10-11 统一「立即选购」为清晰粉描边（深浅一致），hover 实心 =====
   模板把第3个套餐(idx==2)写成实心 highlight、其余 outline，而 outline 当前渲染成暗底(#2d2633)、
   看着像坏了，一排按钮深浅不一——浅色深色都有这个问题。
   这里把 outline 与 highlight 统一成：透明底 + 清晰粉边 + 粉字，hover 才实心粉。
   颜色走 --ty-accent 令牌（浅色=深玫红#ab4468、深色=柔粉#df88aa），深浅两套自适应，
   跟之前重置密码/续费那批按钮的"去填充改描边"处理保持一致。 */
.btn.ty-plan-btn-outline,
.btn.ty-plan-btn-highlight {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--ty-accent) !important;
  color: var(--ty-accent) !important;
  box-shadow: none !important;
  font-weight: 700;
  letter-spacing: .01em;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.btn.ty-plan-btn-outline:hover,
.btn.ty-plan-btn-highlight:hover {
  background: var(--ty-accent) !important;
  background-image: none !important;
  border-color: var(--ty-accent) !important;
  color: var(--ty-on-accent) !important;
  box-shadow: 0 8px 18px rgba(var(--ty-accent-rgb), .28) !important;
  opacity: 1 !important;
  transform: translateY(-1px);
}


/* ===== TY-CHKBOX 2026-10-12 复选框（同意服务条款/隐私条款）双模式美化 =====
   Bootstrap 的 .custom-control-label::before 默认白底，深色下就是一个白方块。
   改走主题令牌：未选=表面色+描边，悬停=描边提亮，选中=主色填充+白色对勾，
   键盘聚焦=焦点环。只动颜色不动几何，避免与厂商排版打架。 */
.custom-control-label { color: var(--ty-text-2); cursor: pointer; }
.custom-control-label::before {
  background-color: var(--ty-surface-2) !important;
  border-color: var(--ty-border-2) !important;
  border-radius: .3rem !important;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.custom-control-label:hover::before { border-color: var(--ty-accent) !important; }
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--ty-accent) !important;
  border-color: var(--ty-accent) !important;
}
.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 3px var(--ty-ring, rgba(232,160,192,.30)) !important;
}
.custom-control-input:disabled ~ .custom-control-label { opacity: .55; }
.custom-control-label a { color: var(--ty-accent); }
.custom-control-label a:hover { text-decoration: underline; }