/* 中为AI企服 · AI 装修主题令牌（Design Tokens）
   只改外观变量，不动页面结构/元素。所有可主题化的颜色/圆角/阴影都走这些 CSS 变量。 */
.zw-root {
  /* ── Semantic（语义层）── */
  --zw-page-bg: #f6f8fb;
  --zw-header-bg: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 45%, #2563eb 75%, #3b82f6 100%);
  --zw-header-text: #ffffff;
  --zw-primary: #2563eb;          /* 主色：主按钮/链接/搜索图标 */
  --zw-accent: #ff6a00;           /* 强调色：找产品/找顾问、亮点 */
  --zw-price: #ef4444;            /* 价格色 */
  --zw-card-bg: #ffffff;
  --zw-text: #1f2937;
  --zw-subtext: #94a3b8;
  --zw-title: #334155;            /* 区块标题色 */
  --zw-title-align: center;       /* 区块标题对齐 */
  --zw-nav-active: #2563eb;       /* 底部导航高亮 */
  --zw-radius: 16px;              /* 卡片圆角 */
  --zw-card-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.10);

  /* ── Component（组件层）── */
  --zw-banner-a: linear-gradient(145deg, #eef5ff 0%, #d9e9ff 55%, #cfe0ff 100%);
  --zw-banner-b: linear-gradient(145deg, #fff7ed 0%, #ffedd5 55%, #ffe4c7 100%);
  --zw-entry-title-a: #1d4ed8;
  --zw-entry-title-b: #c2410c;
  --zw-banner-cols: 2;            /* 找产品/找顾问：2=并排，1=各占一行 */
  --zw-quick-icon-size: 46px;     /* 快捷入口图标大小 */
  --zw-product-card-radius: 16px; /* 商品卡片圆角 */
  --zw-staff-tag-bg: #ff8c1a;     /* 人员标签背景 */
  --zw-hero-ops-shadow: 0 10px 28px -12px rgba(15, 23, 42, 0.22);

  /* ── Layout（布局层）── */
  --zw-section-spacing: 12px;     /* 区块间距 */
  --zw-header-height: auto;       /* 顶部高度 */

  background: var(--zw-page-bg);
  color: var(--zw-text);
}

/* 入口卡布局：flex，默认并排；AI 用 flex-direction:column 变上下、order 交换更直观 */
.zw-banner-grid { display: flex; gap: .625rem; }
.zw-banner-grid > * { flex: 1 1 0; min-width: 0; }

/* ── 首页双入口 + 快捷区 ── */
.zw-hero-ops {
  margin-top: -2px;
  padding-top: 10px;
  background: linear-gradient(180deg, var(--zw-primary) 0%, var(--zw-primary) 28%, var(--zw-page-bg) 72%);
}
.zw-hero-ops-inner {
  background: var(--zw-card-bg);
  border-radius: calc(var(--zw-radius) + 4px);
  box-shadow: var(--zw-hero-ops-shadow);
  padding: 12px 12px 10px;
  border: 1px solid rgba(255, 255, 255, 0.7);
}
.zw-entry-card {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  min-height: 92px;
  padding: 14px 12px 12px 14px;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .2s ease;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}
.zw-entry-card:active { transform: scale(0.985); }
.zw-entry-a { background: var(--zw-banner-a); color: var(--zw-entry-title-a); }
.zw-entry-b { background: var(--zw-banner-b); color: var(--zw-entry-title-b); }
.zw-entry-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 1;
}
.zw-entry-title {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.15;
  color: inherit;
  white-space: nowrap;
}
.zw-entry-desc {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 500;
  color: inherit;
  opacity: 0.72;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 28px;
}
.zw-entry-cta {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: inherit;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  white-space: nowrap;
}
.zw-entry-art {
  position: relative;
  width: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.zw-entry-blob {
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.9), rgba(255,255,255,.15) 70%);
  opacity: 0.95;
}
.zw-entry-icon {
  position: relative;
  width: 48px;
  height: 48px;
  color: inherit;
}
.zw-quick-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}
.zw-quick-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  padding: 2px 0 4px;
}
.zw-quick-icon {
  width: var(--zw-quick-icon-size);
  height: var(--zw-quick-icon-size);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--qi, #3b82f6);
  background: color-mix(in srgb, var(--qi, #3b82f6) 14%, white);
  box-shadow: 0 4px 10px -6px color-mix(in srgb, var(--qi, #3b82f6) 55%, transparent);
  transition: transform .15s ease, box-shadow .2s ease;
}
.zw-quick-item:active .zw-quick-icon {
  transform: translateY(1px);
}
.zw-quick-icon svg {
  width: 22px;
  height: 22px;
}
.zw-quick-label {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.zw-quick-badge {
  position: absolute;
  top: -2px;
  right: calc(50% - 28px);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ff3b30;
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  font-weight: 700;
  box-shadow: 0 0 0 2px #fff;
}

/* 令牌驱动的通用类（模板里用这些类，AI 改变量即可整体换肤） */
.zw-page   { background: var(--zw-page-bg); }
.zw-header { background: var(--zw-header-bg); color: var(--zw-header-text); }
.zw-card   { background: var(--zw-card-bg); border-radius: var(--zw-radius); box-shadow: var(--zw-card-shadow); }
.zw-round  { border-radius: var(--zw-radius); }
.zw-price  { color: var(--zw-price); }
.zw-accent { color: var(--zw-accent); }
.zw-title  { color: var(--zw-title); text-align: var(--zw-title-align); }
.zw-primary-bg { background: var(--zw-primary); }
.zw-primary-tx { color: var(--zw-primary); }
.zw-nav-active { color: var(--zw-nav-active) !important; }
.zw-banner-a { background: var(--zw-banner-a); }
.zw-banner-b { background: var(--zw-banner-b); }
.zw-cart-btn { border-color: var(--zw-price); color: var(--zw-price); }

/* 平滑换肤过渡 */
.zw-root, .zw-root [style], .zw-card, .zw-header, .zw-entry-card, .zw-hero-ops-inner {
  transition: background .35s ease, color .35s ease, border-radius .35s ease, box-shadow .35s ease;
}