:root {
  --mass-primary: #4b38f2;
  --mass-primary-deep: #18005a;
  --mass-primary-soft: #7868ff;
  --mass-cyan: #20d2c8;
  --mass-blue: #4678ff;
  --mass-purple: #a255ff;
  --mass-orange: #ff9b39;
  --mass-pink: #ff5e8e;
  --mass-bg: #f3f6ff;
  --mass-soft: #f7f9ff;
  --mass-line: #e7ebf7;
  --mass-text: #161a32;
  --mass-muted: #687089;
  --mass-light: #929ab2;
  --mass-dark: #08023f;
  --mass-shadow: 0 18px 48px rgba(39, 43, 91, 0.12);
  --mass-radius: 18px;
  --mass-container: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--mass-text);
  background: #ffffff;
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
  line-height: 1.7;
}

a { color: inherit; text-decoration: none; }

.mass-container {
  width: min(var(--mass-container), calc(100% - 40px));
  margin: 0 auto;
}

.mass-topbar {
  height: 28px;
  color: rgba(255, 255, 255, 0.78);
  background: var(--mass-primary-deep);
  font-size: 11px;
}

.mass-topbar .mass-container,
.mass-header .mass-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 24px;
}

.mass-topbar span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mass-topbar span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mass-cyan);
  box-shadow: 0 0 0 4px rgba(32, 210, 200, 0.12);
}

.mass-header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 62px;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(226, 231, 246, 0.92);
  backdrop-filter: blur(16px);
}

.mass-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 168px;
  font-size: 16px;
  font-weight: 800;
}

.mass-logo-image {
  width: auto;
  height: 38px;
  object-fit: contain;
}

.mass-header .mass-logo { gap: 0; }

.mass-header .mass-logo-mark,
.mass-header .mass-logo > span:last-child { display: none; }

.mass-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 40px;
  color: #3a4058;
  font-size: 13px;
  font-weight: 600;
}

.mass-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 2px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #334155;
  letter-spacing: 0.02em;
  transition: color 0.3s ease;
  -webkit-font-smoothing: antialiased;
}

.mass-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--mass-primary), var(--mass-cyan));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mass-nav a:hover {
  color: var(--mass-primary);
  font-weight: 600;
}

.mass-nav a:hover::after { transform: scaleX(1); }

.mass-nav a.active {
  color: var(--mass-primary);
  font-weight: 600;
}

.mass-nav a.active::after { transform: scaleX(1); }

.mass-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 168px;
  gap: 10px;
}

.mass-btn,
.mass-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 19px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 700;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.mass-btn:hover,
.mass-link-btn:hover { transform: translateY(-1px); }

.mass-btn {
  color: #ffffff;
  background: var(--mass-primary);
  box-shadow: 0 12px 22px rgba(75, 56, 242, 0.22);
}

.mass-link-btn {
  color: var(--mass-primary);
  background: #ffffff;
  border-color: #dbe0f4;
}

.mass-footer {
  padding: 56px 0 34px;
  color: rgba(255, 255, 255, 0.72);
  background: #070735;
  font-size: 12px;
}

.mass-footer-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: 1.35fr repeat(4, 1fr) 1.3fr;
  align-items: start;
}

.mass-footer-brand-image {
  width: auto;
  height: 42px;
  margin: 0 0 10px;
  object-fit: contain;
}

.mass-footer-grid > div:first-child strong { display: none; }

.mass-footer h3,
.mass-footer strong { color: #ffffff; }

.mass-footer h3 {
  margin: 0 0 12px;
  font-size: 13px;
}

.mass-footer a,
.mass-footer span {
  display: block;
  margin: 6px 0;
}

.mass-qr-row {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.mass-qr {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  color: #070735;
  background:
    linear-gradient(90deg, #111 10%, transparent 10% 20%, #111 20% 30%, transparent 30% 40%, #111 40% 50%, transparent 50% 60%, #111 60% 70%, transparent 70% 80%, #111 80%),
    #ffffff;
  background-size: 18px 18px;
  border: 6px solid #ffffff;
  font-size: 0;
}

.mass-footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mass-footer-bottom > span:nth-child(2) { display: none; }

.cms-page-main {
  min-height: 60vh;
  background: #ffffff;
  padding: 40px 0 60px;
}

.cms-shell {
  width: min(var(--mass-container), calc(100% - 40px));
  margin: 0 auto;
}

.cms-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 13px;
  color: var(--mass-muted);
}

.cms-breadcrumb a {
  color: var(--mass-muted);
  transition: color 0.2s;
}

.cms-breadcrumb a:hover { color: var(--mass-primary); }

.cms-breadcrumb span:last-child { color: var(--mass-text); }

.cms-section { margin-bottom: 28px; }

.cms-card {
  background: #ffffff;
  border: 1px solid var(--mass-line);
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(52, 63, 118, 0.07);
}

.cms-page-hero {
  padding: 32px 28px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.cms-page-hero h1 {
  margin: 10px 0 0;
  font-size: 24px;
  line-height: 1.35;
}

.cms-page-hero p {
  margin: 8px 0 0;
  color: var(--mass-muted);
  font-size: 14px;
  max-width: 600px;
}

.cms-section-kicker {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 4px;
  color: var(--mass-primary);
  background: rgba(75, 56, 242, 0.08);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.cms-mini-stat-grid {
  display: flex;
  gap: 16px;
  flex-shrink: 0;
}

.cms-mini-stat {
  text-align: center;
  padding: 12px 18px;
  background: var(--mass-soft);
  border-radius: 8px;
}

.cms-mini-stat strong {
  display: block;
  font-size: 11px;
  color: var(--mass-muted);
  font-weight: 600;
}

.cms-mini-stat span {
  display: block;
  margin-top: 4px;
  font-size: 18px;
  font-weight: 800;
  color: var(--mass-primary);
}

.cms-content-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  align-items: start;
}

.cms-page-content { padding: 28px; }

.cms-richtext {
  font-size: 15px;
  line-height: 1.8;
  color: var(--mass-text);
}

.cms-side-panel { padding: 22px; }

.cms-side-panel h3 {
  margin: 10px 0 14px;
  font-size: 15px;
}

.cms-side-links a {
  display: block;
  padding: 10px 0;
  border-top: 1px solid var(--mass-line);
}

.cms-side-links a strong {
  display: block;
  font-size: 13px;
  color: var(--mass-text);
}

.cms-side-links a span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--mass-muted);
}

.cms-empty-state {
  padding: 20px;
  text-align: center;
  color: var(--mass-muted);
  font-size: 13px;
}

.cms-page-search {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.cms-page-search p {
  margin: 0;
  color: var(--mass-muted);
  font-size: 13px;
  flex: 1;
}

.cms-page-search form {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.cms-page-search input[type="text"] {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--mass-line);
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  min-width: 200px;
}

.cms-page-search input[type="text"]:focus {
  border-color: var(--mass-primary);
}

.cms-content-stack {
  display: grid;
  gap: 12px;
}

.cms-post-card { padding: 20px 24px; }

.cms-post-card h3 {
  margin: 8px 0 0;
  font-size: 16px;
}

.cms-post-card h3 a { transition: color 0.2s; }

.cms-post-card h3 a:hover { color: var(--mass-primary); }

.cms-post-summary {
  margin: 6px 0 0;
  color: var(--mass-muted);
  font-size: 13px;
}

.cms-meta-row {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--mass-light);
}

.cms-text-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mass-primary);
}

.cms-page-pager {
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cms-page-pager strong {
  font-size: 14px;
}

.cms-meta-line {
  display: flex;
  gap: 12px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--mass-muted);
}

.cms-pagination {
  display: flex;
  gap: 8px;
}

.cms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.cms-btn:hover { transform: translateY(-1px); }

.cms-btn-primary {
  color: #ffffff;
  background: var(--mass-primary);
}

.cms-btn-secondary {
  color: var(--mass-primary);
  background: #ffffff;
  border-color: #dbe0f4;
}

/* ===== CMS 首页 ===== */
.cms-shell-wide {
  width: min(var(--mass-container), calc(100% - 40px));
  margin: 0 auto;
}

.cms-hero-grid,
.cms-home-hero-grid,
.cms-grid-2,
.cms-home-summary-grid,
.cms-feature-grid,
.cms-product-grid,
.cms-home-split {
  display: grid;
  gap: 24px;
}

.cms-hero-grid,
.cms-home-hero-grid {
  grid-template-columns: 1.2fr 1fr;
  align-items: start;
}

.cms-home-summary-grid,
.cms-feature-grid,
.cms-product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cms-home-split,
.cms-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cms-feature-grid-wide {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cms-hero-copy,
.cms-home-hero-copy,
.cms-hero-panel,
.cms-home-hero-surface,
.cms-home-summary-card,
.cms-product-card,
.cms-cms-focus-card,
.cms-capability-panel,
.cms-channel-card,
.cms-page-content,
.cms-side-panel {
  padding: 28px;
}

.cms-hero-copy h1,
.cms-home-hero-copy h1 {
  margin: 10px 0 0;
  font-size: 28px;
  line-height: 1.35;
}

.cms-hero-copy > p,
.cms-home-hero-copy > p {
  margin: 10px 0 0;
  color: var(--mass-muted);
  font-size: 14px;
  max-width: 600px;
}

.cms-eyebrow {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 4px;
  color: var(--mass-primary);
  background: rgba(75, 56, 242, 0.08);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.cms-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.cms-chip-list,
.cms-home-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.cms-chip,
.cms-home-hero-tags span {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 20px;
  background: var(--mass-soft);
  font-size: 12px;
  font-weight: 600;
  color: var(--mass-muted);
  transition: background 0.2s, color 0.2s;
}

.cms-chip:hover {
  background: var(--mass-primary);
  color: #ffffff;
}

.cms-kpi-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 20px;
}

.cms-kpi-grid-strong .cms-kpi span {
  font-size: 16px;
}

.cms-kpi {
  text-align: center;
  padding: 12px 18px;
  background: var(--mass-soft);
  border-radius: 8px;
  flex: 1;
  min-width: 100px;
}

.cms-kpi strong {
  display: block;
  font-size: 11px;
  color: var(--mass-muted);
  font-weight: 600;
}

.cms-kpi span {
  display: block;
  margin-top: 4px;
  font-size: 18px;
  font-weight: 800;
  color: var(--mass-primary);
}

.cms-panel-heading,
.cms-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.cms-section-head-compact {
  margin-bottom: 12px;
}

.cms-section-head h2,
.cms-panel-heading h2,
.cms-home-summary-card h2,
.cms-product-card h3,
.cms-cms-focus-card h2 {
  margin: 10px 0 0;
  font-size: 20px;
  line-height: 1.35;
}

.cms-section-head > p,
.cms-home-summary-card > p,
.cms-product-card > p,
.cms-cms-focus-card > p {
  margin: 10px 0 0;
  color: var(--mass-muted);
  font-size: 13px;
  max-width: 400px;
}

.cms-home-summary-card > p,
.cms-product-card > p {
  max-width: none;
}

.cms-card-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--mass-soft);
  font-size: 12px;
  font-weight: 800;
  color: var(--mass-primary);
}

.cms-channel-card h3,
.cms-product-card h3 {
  margin: 12px 0 0;
  font-size: 16px;
}

.cms-channel-card h3 a,
.cms-product-card h3 a { transition: color 0.2s; }

.cms-channel-card h3 a:hover { color: var(--mass-primary); }

.cms-channel-card > p { margin: 6px 0 0; color: var(--mass-muted); font-size: 13px; }

.cms-home-hero-surface-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.cms-home-hero-surface-head strong {
  font-size: 13px;
  color: var(--mass-text);
  letter-spacing: 0.04em;
}

.cms-app-stack {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.cms-app-stack-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 16px;
  border-radius: 10px;
  background: var(--mass-soft);
  border: 1px solid var(--mass-line);
}

.cms-app-stack-item.is-featured {
  background: rgba(75, 56, 242, 0.06);
  border-color: rgba(75, 56, 242, 0.16);
}

.cms-app-stack-label {
  margin: 0;
  color: var(--mass-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cms-app-stack-item h2,
.cms-app-stack-item h3 {
  margin: 8px 0 0;
  font-size: 18px;
  line-height: 1.3;
}

.cms-app-stack-item h3 { font-size: 16px; }

.cms-app-stack-item p {
  margin: 6px 0 0;
  color: var(--mass-muted);
  font-size: 13px;
}

.cms-app-stack-state,
.cms-product-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 20px;
  background: rgba(32, 210, 200, 0.12);
  color: #0d9488;
  border: 1px solid rgba(32, 210, 200, 0.24);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.cms-app-stack-state.is-waiting,
.cms-product-status.is-muted {
  color: var(--mass-orange);
  background: rgba(255, 155, 57, 0.1);
  border-color: rgba(255, 155, 57, 0.2);
}

.cms-product-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cms-product-card.is-current {
  border-color: rgba(75, 56, 242, 0.2);
  box-shadow: 0 14px 36px rgba(75, 56, 242, 0.1);
}

.cms-check-list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.cms-check-list li {
  position: relative;
  padding: 6px 0 6px 18px;
  color: var(--mass-muted);
  font-size: 13px;
}

.cms-check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mass-cyan);
}

.cms-text-note {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--mass-light);
}

.cms-capability-list {
  display: grid;
  gap: 12px;
}

.cms-capability-list article {
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--mass-soft);
}

.cms-capability-list strong {
  display: block;
  font-size: 14px;
  color: var(--mass-text);
}

.cms-capability-list p {
  margin: 4px 0 0;
  color: var(--mass-muted);
  font-size: 13px;
}

.cms-spotlight-card {
  margin-top: 16px;
  padding: 16px;
  border-radius: 8px;
  background: var(--mass-soft);
}

.cms-spotlight-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--mass-primary);
  letter-spacing: 0.04em;
}

.cms-spotlight-card h3 {
  margin: 8px 0 0;
  font-size: 16px;
}

.cms-spotlight-card h3 a:hover { color: var(--mass-primary); }

.cms-spotlight-card > p {
  margin: 6px 0 0;
  color: var(--mass-muted);
  font-size: 13px;
}

.cms-post-list {
  display: grid;
  gap: 10px;
}

.cms-post-list-item { padding: 16px 20px; }

.cms-post-list-title {
  margin: 6px 0 0;
  font-size: 15px;
}

.cms-post-list-title a:hover { color: var(--mass-primary); }

.cms-home-hero-copy,
.cms-home-hero-surface,
.cms-home-summary-card,
.cms-product-card,
.cms-cms-focus-card,
.cms-capability-panel {
  background: #ffffff;
  border: 1px solid var(--mass-line);
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(52, 63, 118, 0.07);
}

@media (max-width: 980px) {
  .mass-nav { display: none; }
  .mass-footer-grid { grid-template-columns: 1fr; }
  .cms-content-layout { grid-template-columns: 1fr; }
  .cms-page-hero { flex-direction: column; }
  .cms-page-search { flex-direction: column; }
  .cms-page-search form { width: 100%; }
  .cms-page-search input[type="text"] { flex: 1; }
  .cms-hero-grid,
  .cms-home-hero-grid,
  .cms-home-summary-grid,
  .cms-feature-grid,
  .cms-product-grid,
  .cms-home-split,
  .cms-grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .mass-container,
  .cms-shell,
  .cms-shell-wide { width: min(100% - 24px, var(--mass-container)); }
  .mass-header-actions { display: none; }
  .mass-footer-bottom { flex-direction: column; }
  .cms-kpi-grid { flex-direction: column; }
}

.mass-auth-layer .layui-layer-content {
  overflow: hidden !important;
}

.mass-auth-layer iframe {
  overflow: hidden;
  display: block;
}