/* ==========================================================================
   TY 主题 · 设计令牌
   黑白双模式：默认跟随系统 prefers-color-scheme，可用 html[data-theme] 强制
   纯 CSS 媒体查询，首屏无闪烁；JS 只在用户手动切换时才参与
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* 供外壳复用的半透明基色：浅色=墨，深色=白 */
  --ty-hi-rgb: 16, 18, 21;
  --ty-accent-rgb: 236, 72, 153;
  /* 辉光/阴影专用：不能等于强调色，否则深色下白按钮会糊出一片白光 */
  --ty-glow-rgb: 12, 14, 18;

  /* 表面 */
  --ty-bg: #ffffff;
  --ty-bg-2: #f5f6f8;
  --ty-surface: #ffffff;
  --ty-surface-2: #f0f2f5;
  --ty-surface-3: #e2e5ea;
  --ty-glass: rgba(255, 255, 255, .78);
  --ty-grid: rgba(17, 19, 24, .055);

  /* 文字 */
  --ty-text: #101215;
  --ty-text-2: #4d545e;
  --ty-text-3: #838b96;
  --ty-text-inv: #ffffff;

  /* 描边与阴影 */
  --ty-border: #e2e5ea;
  --ty-border-2: #c9ced6;
  --ty-line: #e2e5ea;
  --ty-line-2: #c9ced6;
  --ty-fg: #101215;
  --ty-fg-2: #4d545e;
  --ty-fg-3: #838b96;
  --ty-shadow: 0 18px 44px rgba(16, 18, 21, .10);
  --ty-shadow-sm: 0 2px 10px rgba(16, 18, 21, .06);
  --ty-ring: rgba(236, 72, 153, .35);

  /* 主色 = 墨；反色态自动变白，无需第二套变量 */
  --ty-accent: #ec4899;
  --ty-accent-2: #db2777;
  --ty-on-accent: #ffffff;
  /* 选中态（页签/开关）单独一对令牌：深色模式用抬升灰，
     否则和大面积反色白的主按钮叠在一起，层级就糊了 */
  --ty-sel-bg: #ec4899;
  --ty-sel-fg: #ffffff;

  /* 状态色（黑白主题里唯一保留的彩色，降饱和） */
  --ty-ok: #0a7d3f;
  --ty-ok-bg: rgba(10, 125, 63, .10);
  --ty-warn: #9a5b00;
  --ty-warn-bg: rgba(154, 91, 0, .10);
  --ty-err: #bf2f26;
  --ty-err-bg: rgba(191, 47, 38, .10);
  --ty-info: #1a5fd0;
  --ty-info-bg: rgba(26, 95, 208, .10);

  /* 粒子/装饰层，供 canvas 读取 */
  --ty-fx-particle: 255, 255, 255;
  --ty-fx-line: 16, 18, 21;
  --ty-fx-glow: 16, 18, 21;
  --ty-fx-alpha: .10;

  /* 尺度 */
  --ty-r-sm: 8px;
  --ty-r: 12px;
  --ty-r-lg: 18px;
  --ty-r-pill: 999px;
  --ty-gap: 16px;
  --ty-maxw: 1240px;
  --ty-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* 液态玻璃：浅色模式下靠白纱 + 描边 + 投影，深色靠白雾 */
  /* 面板实底：卡片不再全透，避免背后元素/网格从卡里透出来 */
  --ty-panel: rgba(255, 255, 255, .92);
  --ty-panel-line: rgba(16, 18, 21, .10);
  --ty-glass-1: rgba(255, 255, 255, .82);
  --ty-glass-2: rgba(255, 255, 255, .52);
  --ty-glass-bd: rgba(16, 18, 21, .10);
  --ty-glass-rim: rgba(255, 255, 255, .9);
  --ty-page-1: #eef0f4;
  --ty-page-2: #f7f8fa;
}

/* 深色：跟随系统 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ty-hi-rgb: 255, 255, 255;
    --ty-accent-rgb: 255, 255, 255;
    --ty-glow-rgb: 0, 0, 0;
    --ty-bg: #0a0b0d;
    --ty-bg-2: #101215;
    --ty-surface: #121418;
    --ty-surface-2: #1f232a;
    --ty-surface-3: #2a2f37;
    --ty-glass: rgba(20, 22, 26, .72);
    --ty-grid: rgba(255, 255, 255, .055);

    --ty-text: #f3f5f7;
    --ty-text-2: #a9b1bc;
    --ty-text-3: #7b848f;
    --ty-text-inv: #0a0b0d;

    --ty-border: #26292e;
    --ty-border-2: #3a3f46;
  --ty-line: #26292e;
    --ty-line-2: #3a3f46;
    --ty-fg: #f3f5f7;
    --ty-fg-2: #a9b1bc;
    --ty-fg-3: #7b848f;
    --ty-shadow: 0 22px 54px rgba(0, 0, 0, .55);
    --ty-shadow-sm: 0 2px 12px rgba(0, 0, 0, .45);
    --ty-ring: rgba(255, 255, 255, .14);

    --ty-accent: #f4f6f8;
    --ty-accent-2: #c9cfd8;
    --ty-on-accent: #0a0b0d;
    --ty-sel-bg: #2a2e35;
    --ty-sel-fg: #f3f5f7;

    --ty-ok: #3ecf7a;
    --ty-ok-bg: rgba(62, 207, 122, .12);
    --ty-warn: #e0a03c;
    --ty-warn-bg: rgba(224, 160, 60, .12);
    --ty-err: #ff6b61;
    --ty-err-bg: rgba(255, 107, 97, .12);
    --ty-info: #6ea8ff;
    --ty-info-bg: rgba(110, 168, 255, .12);

    --ty-fx-particle: 255, 255, 255;
    --ty-fx-line: 255, 255, 255;
    --ty-fx-glow: 120, 140, 170;
    --ty-fx-alpha: .10;

      --ty-glass-1: rgba(255, 255, 255, .075);
    --ty-glass-2: rgba(255, 255, 255, .028);
    --ty-glass-bd: rgba(255, 255, 255, .14);
    --ty-glass-rim: rgba(255, 255, 255, .22);
    --ty-page-1: #07080c;
    --ty-page-2: #0d1017;
  }
}

/* 手动覆盖：系统偏好在 html[data-theme] 存在时让位 */
:root[data-theme="light"] {
  color-scheme: light;
  --ty-glow-rgb: 12, 14, 18;
  --ty-panel: rgba(255, 255, 255, .92);
  --ty-panel-line: rgba(16, 18, 21, .10);
  --ty-line: #e2e5ea;
  --ty-line-2: #c9ced6;
  --ty-fg: #101215;
  --ty-fg-2: #4d545e;
  --ty-fg-3: #838b96;
  --ty-glass-1: rgba(255, 255, 255, .82);
  --ty-glass-2: rgba(255, 255, 255, .52);
  --ty-glass-bd: rgba(16, 18, 21, .10);
  --ty-glass-rim: rgba(255, 255, 255, .9);
  --ty-page-1: #eef0f4;
  --ty-page-2: #f7f8fa;
  --ty-hi-rgb: 16, 18, 21;
  --ty-accent-rgb: 236, 72, 153;
  --ty-bg: #ffffff;
  --ty-bg-2: #f5f6f8;
  --ty-surface: #ffffff;
  --ty-surface-2: #f0f2f5;
  --ty-surface-3: #e2e5ea;
  --ty-glass: rgba(255, 255, 255, .78);
  --ty-grid: rgba(17, 19, 24, .055);
  --ty-text: #101215;
  --ty-text-2: #4d545e;
  --ty-text-3: #838b96;
  --ty-text-inv: #ffffff;
  --ty-border: #e2e5ea;
  --ty-border-2: #c9ced6;
  --ty-shadow: 0 18px 44px rgba(16, 18, 21, .10);
  --ty-shadow-sm: 0 2px 10px rgba(16, 18, 21, .06);
  --ty-ring: rgba(236, 72, 153, .35);
  --ty-accent: #ec4899;
  --ty-accent-2: #db2777;
  --ty-on-accent: #ffffff;
  --ty-ok: #0a7d3f;
  --ty-ok-bg: rgba(10, 125, 63, .10);
  --ty-warn: #9a5b00;
  --ty-warn-bg: rgba(154, 91, 0, .10);
  --ty-err: #bf2f26;
  --ty-err-bg: rgba(191, 47, 38, .10);
  --ty-info: #1a5fd0;
  --ty-info-bg: rgba(26, 95, 208, .10);
  --ty-fx-particle: 40, 44, 52;
  --ty-fx-line: 16, 18, 21;
  --ty-fx-glow: 16, 18, 21;
  --ty-fx-alpha: .10;
  --ty-sel-bg: #ec4899;
  --ty-sel-fg: #ffffff;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ty-glow-rgb: 0, 0, 0;
  --ty-panel: rgba(18, 20, 25, .88);
  --ty-panel-line: rgba(255, 255, 255, .10);
  --ty-sel-bg: #2a2e35;
  --ty-sel-fg: #f3f5f7;
  --ty-line: #26292e;
  --ty-line-2: #3a3f46;
  --ty-fg: #f3f5f7;
  --ty-fg-2: #a9b1bc;
  --ty-fg-3: #7b848f;
  --ty-panel: rgba(18, 20, 25, .88);
  --ty-panel-line: rgba(255, 255, 255, .10);
  --ty-glass-1: rgba(255, 255, 255, .045);
  --ty-glass-2: rgba(255, 255, 255, .015);
  --ty-glass-bd: rgba(255, 255, 255, .10);
  --ty-glass-rim: rgba(255, 255, 255, .07);
  --ty-page-1: #08090c;
  --ty-page-2: #0c0e13;
  --ty-hi-rgb: 255, 255, 255;
  --ty-accent-rgb: 255, 255, 255;
  --ty-bg: #0a0b0d;
  --ty-bg-2: #101215;
  --ty-surface: #121418;
  --ty-surface-2: #1f232a;
  --ty-surface-3: #2a2f37;
  --ty-glass: rgba(20, 22, 26, .72);
  --ty-grid: rgba(255, 255, 255, .055);
  --ty-text: #f3f5f7;
  --ty-text-2: #a9b1bc;
  --ty-text-3: #7b848f;
  --ty-text-inv: #0a0b0d;
  --ty-border: #26292e;
  --ty-border-2: #3a3f46;
  --ty-shadow: 0 22px 54px rgba(0, 0, 0, .55);
  --ty-shadow-sm: 0 2px 12px rgba(0, 0, 0, .45);
  --ty-ring: rgba(255, 255, 255, .14);
  --ty-accent: #f4f6f8;
  --ty-accent-2: #c9cfd8;
  --ty-on-accent: #0a0b0d;
  --ty-ok: #3ecf7a;
  --ty-ok-bg: rgba(62, 207, 122, .12);
  --ty-warn: #e0a03c;
  --ty-warn-bg: rgba(224, 160, 60, .12);
  --ty-err: #ff6b61;
  --ty-err-bg: rgba(255, 107, 97, .12);
  --ty-info: #6ea8ff;
  --ty-info-bg: rgba(110, 168, 255, .12);
  --ty-fx-particle: 255, 255, 255;
  --ty-fx-line: 255, 255, 255;
  --ty-fx-glow: 120, 140, 170;
  --ty-fx-alpha: .16;
}

/* --------------------------------------------------------------------------
   基座：只在 TY 页面包裹层内生效，不裸改 body，避免污染未迁移页面
   -------------------------------------------------------------------------- */
.ty-root {
  background: var(--ty-bg);
  color: var(--ty-text);
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s ease, color .25s ease;
}

/* 网格底纹，参考稿的方格背景 */
.ty-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--ty-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--ty-grid) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 40%, transparent 100%);
}

/* 通用原子 */
.ty-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--ty-r-pill);
  border: 1px solid var(--ty-border);
  background: var(--ty-glass);
  color: var(--ty-text-2);
  font-size: 13px;
  line-height: 1;
}

.ty-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ty-ok);
  box-shadow: 0 0 0 3px var(--ty-ok-bg);
}

.ty-card {
  background: var(--ty-surface);
  border: 1px solid var(--ty-border);
  border-radius: var(--ty-r-lg);
  box-shadow: var(--ty-shadow);
}

/* 焦点可见性：黑白主题下靠描边而不是彩色 */
.ty-root a:focus-visible,
.ty-root button:focus-visible,
.ty-root input:focus-visible,
.ty-root select:focus-visible {
  outline: 2px solid var(--ty-ring);
  outline-offset: 2px;
}

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

/* ---------------------------------------------------------- 液态玻璃基元 */
.ty-glass {
  position: relative;
  background-color: var(--ty-panel);
  background-image: linear-gradient(155deg, var(--ty-glass-1), var(--ty-glass-2));
  border: 1px solid var(--ty-panel-line);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  backdrop-filter: blur(26px) saturate(160%);
  box-shadow: var(--ty-shadow);
}

/* 顶部一条内高光 + 1px 实描边即可做出玻璃边。
   不用 mask-composite 挖边：该写法在 Chrome 下不稳定，
   失效时整条渐变会糊在卡片上，看起来像一道白斑。 */
.ty-glass {
  box-shadow:
    var(--ty-shadow),
    inset 0 1px 0 var(--ty-glass-rim);
}


/* ==========================================================================
   品牌渐变令牌（粉 → 蓝）rgb(249,204,205) → rgb(175,201,222)
   与官网 web/airboom/assets/css/ty.tokens.css 同名同义，两份要一起改，
   否则其中一边引用不到令牌会被浏览器静默丢弃（不报错、就是没效果）。

   --ty-auth-glow 是登录/注册整屏氛围 wash 的强度：
   同一个 alpha 在浅色和深色下观感差近 4 倍（rgba 压在近黑底上亮度提升
   远大于压在白底上），所以强度必须按模式分开，不能共用一个值。
   ========================================================================== */
:root {
  --ty-blush-rgb: 249, 204, 205;
  --ty-powder-rgb: 175, 201, 222;
  --ty-mist-rgb: 212, 203, 214;
  --ty-plum: #84558b;
  --ty-plum-rgb: 132, 85, 139;
  --ty-bg-rgb: 255, 255, 255;
  --ty-auth-glow: .40;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ty-mist-rgb: 22, 21, 26;
    --ty-plum: #b79ac4;
    --ty-plum-rgb: 183, 154, 196;
    --ty-bg-rgb: 10, 11, 13;
    --ty-auth-glow: .10;
  }
}

:root[data-theme="light"] {
  --ty-mist-rgb: 212, 203, 214;
  --ty-plum: #84558b;
  --ty-plum-rgb: 132, 85, 139;
  --ty-bg-rgb: 255, 255, 255;
  --ty-auth-glow: .40;
}

:root[data-theme="dark"] {
  --ty-mist-rgb: 22, 21, 26;
  --ty-plum: #b79ac4;
  --ty-plum-rgb: 183, 154, 196;
  --ty-bg-rgb: 10, 11, 13;
  --ty-auth-glow: .10;
}


/* ==========================================================================
   --ty-brand-wash：品牌粉蓝氛围在大面积面板上的强度。
   浅色 .5 是轻柔粉；同一个值压在近黑上算出来是 rgb(130,107,111)
   —— 脏紫褐。所以深色必须单独给，不能共用。
   （和 --ty-ft-glow / --ty-auth-glow 是同一类问题：
     半透明彩色氛围的观感强烈依赖底色明度。）
   ========================================================================== */
:root { --ty-brand-wash: .50; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ty-brand-wash: .12; }
}

:root[data-theme="light"] { --ty-brand-wash: .50; }
:root[data-theme="dark"]  { --ty-brand-wash: .12; }


/* ============================================================ 品牌令牌 · 单一来源
   --pink-* / --text-main / --ty-cart-* / --ty-pink 这组原先散在
   configureproduct、viewcart、pay、service_cloud、servicedetail 五个模板的
   :root 里，外加 ty.vendor.css 一个带 !important 的"兼容层"。
   带 !important 的自定义属性无视层叠顺序，会静默压掉任何同名声明——
   这就是"在模板里改了完全没反应"的根源（曾因此产生黑底黑字故障）。

   现在全部收在这里，按四模式各给一份，模板侧不再定义、也不再需要 !important。
   厂商原值是艳粉（#b83272 / #fff0f7 / #2f1f2b），这里统一成品牌粉蓝。 */

:root {
  --pink-main:        #e85b97;
  --pink-main-hover:  #d94486;
  --pink-dark:        #8d2c55;
  --pink-light:       rgba(249, 204, 205, .35);
  --pink-soft:        rgba(232, 91, 151, .10);
  --pink-border:      rgba(232, 91, 151, .30);
  --pink-border-soft: rgba(232, 91, 151, .18);
  --pink-bg:          rgba(249, 204, 205, .18);
  --text-main:        var(--ty-fg);
  --text-sub:         var(--ty-fg-2);
  --danger:           #d6285f;
  --white:            #ffffff;

  /* 厂商遗留的色名令牌：统一指向语义令牌，不再是艳粉 */
  --ty-pink:          var(--ty-accent);
  --ty-pink-2:        var(--ty-accent-2);
  --ty-pink-soft:     var(--ty-accent-2);
  --ty-purple:        var(--ty-accent-2);
  --ty-cyan:          var(--ty-info);

  --ty-cart-bg:       var(--ty-bg);
  --ty-cart-pink:     var(--ty-accent);
  --ty-cart-pink-2:   var(--ty-accent-2);
  --ty-cart-purple:   var(--ty-accent-2);
  --ty-cart-blue:     var(--ty-info);
  --ty-cart-cyan:     var(--ty-info);
  --ty-cart-green:    var(--ty-ok);
  --ty-cart-warning:  var(--ty-warn);
  --ty-cart-card:     var(--ty-surface);
  --ty-cart-card-2:   var(--ty-surface-2);
  --ty-cart-border:   var(--ty-line);
  --ty-cart-text:     var(--ty-fg);
  --ty-cart-muted:    var(--ty-fg-2);
  --ty-bg-card:       var(--ty-surface);
  --ty-bg-card-2:     var(--ty-surface-2);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pink-main:        #c9ced6;
    --pink-main-hover:  #e2e5ea;
    --pink-dark:        #a9b1bc;
    --pink-light:       rgba(255, 255, 255, .06);
    --pink-soft:        rgba(255, 255, 255, .05);
    --pink-border:      rgba(255, 255, 255, .10);
    --pink-border-soft: rgba(255, 255, 255, .06);
    --pink-bg:          rgba(255, 255, 255, .04);
    --danger:           #ff6b8e;
  }
}

:root[data-theme="light"] {
  --pink-main:        #e85b97;
  --pink-main-hover:  #d94486;
  --pink-dark:        #8d2c55;
  --pink-light:       rgba(249, 204, 205, .35);
  --pink-soft:        rgba(232, 91, 151, .10);
  --pink-border:      rgba(232, 91, 151, .30);
  --pink-border-soft: rgba(232, 91, 151, .18);
  --pink-bg:          rgba(249, 204, 205, .18);
  --danger:           #d6285f;
}

:root[data-theme="dark"] {
  --pink-main:        #c9ced6;
  --pink-main-hover:  #e2e5ea;
  --pink-dark:        #a9b1bc;
  --pink-light:       rgba(255, 255, 255, .06);
  --pink-soft:        rgba(255, 255, 255, .05);
  --pink-border:      rgba(255, 255, 255, .10);
  --pink-border-soft: rgba(255, 255, 255, .06);
  --pink-bg:          rgba(255, 255, 255, .04);
  --danger:           #ff6b8e;
}

/* 修复：媒体查询深色块漏定义 --ty-panel/--ty-panel-line，导致"跟随系统"深色下
   登录卡等用 --ty-panel 的面板不翻深（手动 [data-theme=dark] 有定义所以没事）。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ty-panel: rgba(18, 20, 25, .88);
    --ty-panel-line: rgba(255, 255, 255, .10);
  }
}

/* 修：toast 错误图标背景被 repeat 平铺成一整片盾牌——强制去背景图/不平铺 */
#toast-container > div,
#toast-container .toast,
#toast-container .toast-error,
#toast-container .toast-success,
#toast-container .toast-warning,
#toast-container .toast-info {
  background-image: none !important;
  background-repeat: no-repeat !important;
}

/* ===== PALETTE v2 按设计稿重定色：浅色=玫瑰粉×奶白 / 深色=柔粉×梅紫灰（覆盖前面所有 token）===== */
:root,
:root[data-theme="light"] {
  --ty-bg: #f6efec; --ty-bg-2: #efe5e1;
  --ty-surface: #fffdfc; --ty-surface-2: #f7f0ed;
  --ty-panel: rgba(255, 253, 252, .92); --ty-panel-line: rgba(120, 70, 80, .10);
  --ty-glass: rgba(255, 255, 255, .78);
  --ty-glass-1: rgba(255,255,255,.82); --ty-glass-2: rgba(255,255,255,.52);
  --ty-glass-bd: rgba(120,70,80,.10); --ty-glass-rim: rgba(255,255,255,.9);
  --ty-grid: rgba(90,50,60,.055);
  --ty-text: #3a2b31; --ty-text-2: #6b5a60; --ty-text-3: #9a8a90; --ty-text-inv: #ffffff;
  --ty-fg: #3a2b31; --ty-fg-2: #6b5a60; --ty-fg-3: #9a8a90;
  --ty-border: #ecdfd9; --ty-border-2: #dccbc4; --ty-line: #ecdfd9; --ty-line-2: #dccbc4;
  --ty-hi-rgb: 58, 43, 49;
  --ty-accent: #d94f75; --ty-accent-2: #b83a5e; --ty-accent-rgb: 217, 79, 117;
  --ty-on-accent: #ffffff; --ty-sel-bg: #d94f75; --ty-sel-fg: #ffffff;
  --ty-ring: rgba(217, 79, 117, .30);
  --ty-page-1: #f2e9e5; --ty-page-2: #faf5f2;
  --pink-main: #d94f75; --pink-main-hover: #c23e63; --pink-dark: #8d2c55;
  --pink-light: rgba(249,204,205,.35); --pink-soft: rgba(217,79,117,.10);
  --pink-border: rgba(217,79,117,.30); --pink-border-soft: rgba(217,79,117,.18); --pink-bg: rgba(249,204,205,.18);
}
:root[data-theme="dark"] {
  --ty-bg: #241d29; --ty-bg-2: #2b2331;
  --ty-surface: #2f2838; --ty-surface-2: #382f42;
  --ty-panel: rgba(47, 40, 56, .9); --ty-panel-line: rgba(255,255,255,.08);
  --ty-glass: rgba(47,40,56,.72);
  --ty-glass-1: rgba(255,255,255,.075); --ty-glass-2: rgba(255,255,255,.028);
  --ty-glass-bd: rgba(255,255,255,.14); --ty-glass-rim: rgba(255,255,255,.22);
  --ty-grid: rgba(255,255,255,.055);
  --ty-text: #ece5f0; --ty-text-2: #b8adbe; --ty-text-3: #8b8093; --ty-text-inv: #241d29;
  --ty-fg: #ece5f0; --ty-fg-2: #b8adbe; --ty-fg-3: #8b8093;
  --ty-border: #453a51; --ty-border-2: #564a63; --ty-line: #453a51; --ty-line-2: #564a63;
  --ty-hi-rgb: 236, 229, 240;
  --ty-accent: #e8a0c0; --ty-accent-2: #d67fa8; --ty-accent-rgb: 232, 160, 192;
  --ty-on-accent: #2a1f28; --ty-sel-bg: #3a2f45; --ty-sel-fg: #f0aecb;
  --ty-ring: rgba(232, 160, 192, .34);
  --ty-page-1: #1e1823; --ty-page-2: #2a2331;
  --pink-main: #e8a0c0; --pink-main-hover: #f0aecb; --pink-dark: #f4b3cf;
  --pink-light: rgba(255,255,255,.06); --pink-soft: rgba(232,160,192,.14);
  --pink-border: rgba(232,160,192,.34); --pink-border-soft: rgba(232,160,192,.20); --pink-bg: rgba(232,160,192,.12);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ty-bg: #241d29; --ty-bg-2: #2b2331;
    --ty-surface: #2f2838; --ty-surface-2: #382f42;
    --ty-panel: rgba(47, 40, 56, .9); --ty-panel-line: rgba(255,255,255,.08);
    --ty-glass: rgba(47,40,56,.72);
    --ty-glass-1: rgba(255,255,255,.075); --ty-glass-2: rgba(255,255,255,.028);
    --ty-glass-bd: rgba(255,255,255,.14); --ty-glass-rim: rgba(255,255,255,.22);
    --ty-grid: rgba(255,255,255,.055);
    --ty-text: #ece5f0; --ty-text-2: #b8adbe; --ty-text-3: #8b8093; --ty-text-inv: #241d29;
    --ty-fg: #ece5f0; --ty-fg-2: #b8adbe; --ty-fg-3: #8b8093;
    --ty-border: #453a51; --ty-border-2: #564a63; --ty-line: #453a51; --ty-line-2: #564a63;
    --ty-hi-rgb: 236, 229, 240;
    --ty-accent: #e8a0c0; --ty-accent-2: #d67fa8; --ty-accent-rgb: 232, 160, 192;
    --ty-on-accent: #2a1f28; --ty-sel-bg: #3a2f45; --ty-sel-fg: #f0aecb;
    --ty-ring: rgba(232, 160, 192, .34);
    --ty-page-1: #1e1823; --ty-page-2: #2a2331;
    --pink-main: #e8a0c0; --pink-main-hover: #f0aecb; --pink-dark: #f4b3cf;
    --pink-light: rgba(255,255,255,.06); --pink-soft: rgba(232,160,192,.14);
    --pink-border: rgba(232,160,192,.34); --pink-border-soft: rgba(232,160,192,.20); --pink-bg: rgba(232,160,192,.12);
  }
}
/* ==========================================================================
   TY 云科技 · 全站核心配色体系 (Vault Clientarea & Cart 对齐版)
   亮色：浅色·玫瑰粉 × 奶白
   暗色：深色·柔粉 × 梅紫灰
   严格对齐设计稿 202C360172C0F9A17B832D345059F8D6.png
   ========================================================================== */

/* ----------------------------------------------------
   默认 / 亮色模式 (Light)
   ---------------------------------------------------- */
:root,
:root[data-theme= light],
html[data-theme=light],
body[data-theme=light] {
  --ty-bg: #faf7f8 !important;
  --ty-bg-2: #f4eef2 !important;
  --ty-bg-card: #ffffff !important;
  --ty-bg-card-2: #fdfafc !important;
  --ty-surface: #ffffff !important;
  --ty-surface-2: #faf4f7 !important;
  --ty-glass: rgba(255, 255, 255, 0.92) !important;
  --ty-border: #f0e6ec !important;
  --ty-border-2: #e5d8e1 !important;
  --ty-line: #f0e6ec !important;

  /* 文字 */
  --ty-text: #27212b !important;
  --ty-text-2: #635b67 !important;
  --ty-text-3: #8d8591 !important;
  --ty-muted: #8d8591 !important;

  /* 玫瑰粉主题色 */
  --ty-accent: #ab4468 !important;
  --ty-accent-hover: #963556 !important;
  --ty-accent-subtle: #fbf0f4 !important;
  --ty-on-accent: #ffffff !important;
  --ty-brand: #ab4468 !important;
}

/* ----------------------------------------------------
   深色模式 (Dark): 柔粉 × 梅紫灰
   ---------------------------------------------------- */
:root[data-theme=dark],
html[data-theme= dark],
body[data-theme=dark] {
  --ty-bg: #1c1720 !important;
  --ty-bg-2: #252029 !important;
  --ty-bg-card: #252029 !important;
  --ty-bg-card-2: #2c2531 !important;
  --ty-surface: #252029 !important;
  --ty-surface-2: #2d2633 !important;
  --ty-glass: rgba(37, 32, 41, 0.92) !important;
  --ty-border: #352c38 !important;
  --ty-border-2: #483a4c !important;
  --ty-line: #352c38 !important;

  /* 文字 */
  --ty-text: #f5edf3 !important;
  --ty-text-2: #bcaeb9 !important;
  --ty-text-3: #857783 !important;
  --ty-muted: #857783 !important;

  /* 柔粉主题色 */
  --ty-accent: #df88aa !important;
  --ty-accent-hover: #ec9cbd !important;
  --ty-accent-subtle: #342732 !important;
  --ty-on-accent: #ffffff !important;
  --ty-brand: #df88aa !important;
}

/* 系统偏好深色回退 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]),
  html:not([data-theme=light]) {
    --ty-bg: #1c1720 !important;
    --ty-bg-2: #252029 !important;
    --ty-bg-card: #252029 !important;
    --ty-bg-card-2: #2c2531 !important;
    --ty-surface: #252029 !important;
    --ty-surface-2: #2d2633 !important;
    --ty-glass: rgba(37, 32, 41, 0.92) !important;
    --ty-border: #352c38 !important;
    --ty-border-2: #483a4c !important;
    --ty-line: #352c38 !important;
    --ty-text: #f5edf3 !important;
    --ty-text-2: #bcaeb9 !important;
    --ty-text-3: #857783 !important;
    --ty-muted: #857783 !important;
    --ty-accent: #df88aa !important;
    --ty-accent-hover: #ec9cbd !important;
    --ty-accent-subtle: #342732 !important;
    --ty-on-accent: #ffffff !important;
    --ty-brand: #df88aa !important;
  }
}

/* 强制全站背景与卡片遵循令牌 */
body, .main-content, .page-content {
  background-color: var(--ty-bg) !important;
  color: var(--ty-text) !important;
}

.card, .card-body, .card-header, .card-footer, .list-group-item, .modal-content {
  background-color: var(--ty-surface) !important;
  border-color: var(--ty-border) !important;
  color: var(--ty-text) !important;
}

#page-topbar {
  background: var(--ty-glass) !important;
}

.ty-topnav {
  background: var(--ty-glass) !important;
  border-color: var(--ty-border) !important;
}

/* 按钮微调（玫瑰粉/柔粉质感） */
.btn-primary {
  background-color: var(--ty-accent) !important;
  border-color: var(--ty-accent) !important;
  color: #fff !important;
}
.btn-primary:hover {
  background-color: var(--ty-accent-hover) !important;
  border-color: var(--ty-accent-hover) !important;
  opacity: .92;
}

/* 顶栏图标自适应 */
.ty-theme-toggle {
  cursor: pointer !important;
}
.ty-theme-toggle .ty-ico {
  pointer-events: none;
}
/* ==========================================================================
   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;

}