/* ========================================================================== 
   玥耀 FPGA — Inner Page Layouts & Design-System Page
   ========================================================================== */

/* ========================================================================== 
   产品中心：选型导览 + 统一目录面板
   ========================================================================== */

[data-page="products"] .product-hero {
  padding-top: calc(var(--nav-h) + var(--sp-10));
  padding-bottom: var(--sp-12);
}
[data-page="products"] .product-hero .page-hero__bg {
  background:
    radial-gradient(700px 300px at 18% 0%, rgba(59, 130, 246, 0.18), transparent 70%),
    radial-gradient(460px 240px at 86% 100%, rgba(34, 211, 238, 0.10), transparent 72%);
}
.product-hero__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.72fr);
  gap: var(--sp-16);
  align-items: end;
  margin-top: var(--sp-8);
}
.product-hero__copy { min-width: 0; }
.product-hero__copy .page-hero__eyebrow { margin-top: 0; }
.product-hero__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  background: var(--c-bg-glass);
  box-shadow: var(--glow-inset), var(--sh-sm);
}
.product-hero__step {
  min-width: 0;
  padding: var(--sp-2) var(--sp-4);
  border-inline-start: 1px solid var(--c-border-soft);
}
.product-hero__step:first-child { border-inline-start: 0; }
.product-hero__step span,
.product-hero__step strong,
.product-hero__step small { display: block; }
.product-hero__step span {
  font: var(--fw-medium) 11px/1 var(--font-mono);
  letter-spacing: var(--ls-wide);
  color: var(--c-brand-400);
}
.product-hero__step strong {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-text-100);
}
.product-hero__step small {
  margin-top: var(--sp-1);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--c-text-300);
}

.catalog-section { padding-block: var(--sp-12) var(--sp-20); }
.catalog {
  display: grid;
  grid-template-columns: var(--catalog-rail-w) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
  padding: var(--sp-6);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  background: var(--c-bg-700);
  box-shadow: var(--glow-inset), var(--sh-md);
}
.catalog--no-rail { grid-template-columns: minmax(0, 1fr); }

.catalog__rail {
  min-width: 0;
  position: sticky;
  top: calc(var(--nav-h) + var(--sp-4));
  align-self: start;
  max-height: calc(100vh - var(--nav-h) - var(--sp-10));
  overflow-y: auto;
  scrollbar-width: thin;
  padding-inline-end: var(--sp-6);
  border-inline-end: 1px solid var(--c-border-soft);
}
.rail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 40px;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-border-soft);
}
.rail__title {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-wide);
  color: var(--c-text-300);
}
.rail__reset {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding-inline: var(--sp-2);
  font-size: var(--fs-caption);
  color: var(--c-brand-400);
}
.rail__reset:hover { color: var(--c-accent-400); }
.rail__list { display: grid; gap: var(--sp-1); padding-top: var(--sp-3); }
.rail__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 44px;
  padding-inline: var(--sp-3);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--c-text-200);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.rail__item:hover { background: rgba(148, 163, 184, 0.08); color: var(--c-text-100); }
.rail__item-name { min-width: 0; overflow-wrap: anywhere; }
.rail__item-check { flex: none; opacity: 0; color: var(--c-brand-400); }
.rail__item[aria-current="page"] {
  background: rgba(59, 130, 246, 0.12);
  border-color: var(--c-border-brand);
  color: var(--c-brand-400);
  font-weight: var(--fw-medium);
}
.rail__item[aria-current="page"] .rail__item-check { opacity: 1; }
.rail__hint {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-border-soft);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--c-text-300);
}

.catalog__results { min-width: 0; }
.catalog__toolbar {
  position: sticky;
  top: calc(var(--nav-h) + var(--sp-4));
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-6);
  min-height: var(--toolbar-h);
  padding: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-6);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-md);
  background: var(--c-bg-glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--glow-inset), var(--sh-sm);
}
.catalog__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  min-width: 0;
}
.result-count { font-size: var(--fs-sm); color: var(--c-text-300); }
.result-count b { color: var(--c-text-100); font: var(--fw-semibold) var(--fs-body)/1 var(--font-mono); }
.catalog__clear {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 32px;
  padding-inline: var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  color: var(--c-text-300);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.catalog__clear:hover { color: var(--c-text-100); border-color: var(--c-border-strong); background: rgba(148, 163, 184, 0.06); }
.catalog__clear svg { width: 13px; height: 13px; }
.catalog-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: min(440px, 100%);
}
.catalog-search > .icon {
  position: absolute;
  left: var(--sp-3);
  z-index: 1;
  color: var(--c-text-300);
  pointer-events: none;
}
.catalog-search .input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-height: 44px;
  padding-left: 38px;
}
.catalog-search .btn { min-height: 44px; }

/* 产品网格：3 列竖卡（图上文下，对应草图版式） */
[data-page="products"] .product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}
/* 稀疏态（≤2 个产品）：小卡左对齐，避免单卡被拉伸成大块 */
.product-grid.is-sparse {
  grid-template-columns: minmax(0, 360px);
  justify-content: start;
}
[data-page="products"] .product-card { overflow: hidden; }
/* 竖卡：媒体区固定比例在上，与信息区以横线分隔 */
[data-page="products"] .product-card .card__media {
  aspect-ratio: 16 / 10;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  border-inline-end: 0;
  padding: var(--sp-4);
}
[data-page="products"] .product-card .card__media img {
  inset: var(--sp-4);
  width: calc(100% - (var(--sp-4) * 2));
  height: calc(100% - (var(--sp-4) * 2));
  object-fit: contain;
  transition: transform var(--t-base);
}
[data-page="products"] .product-card:hover .card__media img { transform: scale(1.05); }
/* 推荐徽标：定位到媒体区右上角，脱离正文信息流 */
[data-page="products"] .product-card .card__media .badge {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 2;
}
[data-page="products"] .product-card .card__body { min-width: 0; padding: var(--sp-4) var(--sp-5) var(--sp-5); }
[data-page="products"] .product-card__name { margin-top: var(--sp-1); font-size: var(--fs-h4); }
[data-page="products"] .product-card__name a:hover { color: var(--c-brand-400); }
[data-page="products"] .product-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
[data-page="products"] .product-card__meta span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding-inline: var(--sp-3);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-pill);
  background: rgba(148, 163, 184, 0.05);
  font-size: var(--fs-caption);
  color: var(--c-text-300);
}
[data-page="products"] .product-card__desc { max-width: 64ch; -webkit-line-clamp: 2; line-clamp: 2; }
/* 竖卡内规格行：键左值右的紧凑行式 */
[data-page="products"] .product-card .spec-list { margin-top: var(--sp-4); }
[data-page="products"] .product-card .spec-list__row { padding: var(--sp-2) 0; }
[data-page="products"] .product-card .spec-list__val {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-page="products"] .product-card__actions {
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: var(--sp-4);
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border-soft);
}
.product-card__price { min-width: 0; }
.product-card__price > span,
.product-card__price > strong { display: block; }
.product-card__price > span { font-size: var(--fs-caption); color: var(--c-text-300); }
.product-card__price > strong {
  margin-top: var(--sp-1);
  color: var(--c-text-100);
  font: var(--fw-semibold) var(--fs-body)/1.3 var(--font-mono);
  overflow-wrap: anywhere;
}

.catalog-empty {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-6);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-bg-700);
  box-shadow: var(--glow-inset);
}
.catalog-empty__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: rgba(59, 130, 246, 0.10);
  color: var(--c-brand-400);
}
.catalog-empty__title { font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--c-text-100); }
.catalog-empty__hint { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-300); line-height: var(--lh-normal); }
.catalog-empty--block {
  flex-direction: column;
  text-align: center;
  gap: var(--sp-4);
  padding: var(--sp-12) var(--sp-6);
  border-style: dashed;
  background: var(--c-bg-800);
}
.catalog-empty--block p { max-width: 56ch; margin-inline: auto; }
.catalog-empty--block .btn { margin-top: var(--sp-2); }
.compare-section {
  background: linear-gradient(180deg, transparent, rgba(59, 130, 246, 0.035) 36%, transparent);
}
.compare-section .catalog-empty {
  margin-top: var(--sp-8);
  max-width: 680px;
  margin-inline: auto;
}

@media (max-width: 1023px) {
  .product-hero__content { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .product-hero__steps { max-width: 660px; }
  .catalog { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); padding: var(--sp-5); }
  .catalog__rail {
    padding: 0 0 var(--sp-5);
    border-inline-end: 0;
    border-bottom: 1px solid var(--c-border-soft);
  }
  .rail__head { border-bottom: 0; padding-bottom: var(--sp-3); }
  .rail__list {
    display: flex;
    gap: var(--sp-2);
    padding-top: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
  }
  .rail__list::-webkit-scrollbar { display: none; }
  .rail__item {
    flex: none;
    min-height: 44px;
    padding-inline: var(--sp-4);
    border-color: var(--c-border);
    border-radius: var(--r-pill);
    scroll-snap-align: start;
  }
  .rail__item-check { display: none; }
  .rail__hint { margin-top: var(--sp-3); padding-top: var(--sp-3); }
  [data-page="products"] .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-page="products"] .product-card .card__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
}

@media (max-width: 760px) {
  [data-page="products"] .product-hero { padding-bottom: var(--sp-10); }
  .catalog-section { padding-block: var(--sp-10) var(--sp-16); }
  .catalog__toolbar { position: static; flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .catalog__meta { order: 2; justify-content: space-between; }
  .catalog-search { order: 1; width: 100%; }
  [data-page="products"] .product-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  [data-page="products"] .product-hero { padding-top: calc(var(--nav-h) + var(--sp-8)); padding-bottom: var(--sp-8); }
  .product-hero__content { margin-top: var(--sp-6); gap: var(--sp-6); }
  .product-hero__copy .t-lead { margin-top: var(--sp-4); font-size: var(--fs-body); }
  .product-hero__steps { padding: var(--sp-3) var(--sp-2); }
  .product-hero__step { padding-inline: var(--sp-2); }
  .product-hero__step small { display: none; }
  .catalog-section { padding-block: var(--sp-6) var(--sp-12); }
  .catalog { gap: var(--sp-5); padding: var(--sp-4); }
  .rail__hint { display: none; }
  .catalog__toolbar { margin-bottom: var(--sp-5); padding-bottom: var(--sp-4); }
  .catalog-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .catalog-search .btn { min-width: 72px; padding-inline: var(--sp-4); }
  [data-page="products"] .product-card .card__media { padding: var(--sp-5); }
  [data-page="products"] .product-card .card__media img {
    inset: var(--sp-5);
    width: calc(100% - (var(--sp-5) * 2));
    height: calc(100% - (var(--sp-5) * 2));
  }
  [data-page="products"] .product-card .card__body { padding: var(--sp-5); }
  [data-page="products"] .product-card__name { font-size: var(--fs-h4); }
  [data-page="products"] .product-card .spec-list { grid-template-columns: minmax(0, 1fr); }
  [data-page="products"] .product-card .spec-list__row {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-3);
    border-inline-end: 0;
    border-bottom: 1px solid var(--c-border-soft);
  }
  [data-page="products"] .product-card .spec-list__row:last-child { border-bottom: 0; }
  [data-page="products"] .product-card .spec-list__val { margin-top: 0; text-align: end; }
  [data-page="products"] .product-card__actions { flex-direction: column; align-items: stretch; gap: var(--sp-4); }
  [data-page="products"] .product-card__actions .btn { width: 100%; min-height: 44px; }
  .product-card__price { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
  .product-card__price > strong { margin-top: 0; text-align: end; }
  .catalog-empty { align-items: flex-start; padding: var(--sp-5); }
  .catalog-empty--block { align-items: center; padding: var(--sp-10) var(--sp-5); }
  .pagination { flex-wrap: wrap; }
}

/* ==========================================================================
   产品详情：左图库 + 右关键信息
   ========================================================================== */

.pdp {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--sp-12);
  align-items: start;
}
.pdp__gallery { display: grid; gap: var(--sp-4); min-width: 0; }
.pdp__key { min-width: 0; }
.pdp__main {
  position: relative;
  aspect-ratio: 4 / 3;
  min-height: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  background:
    radial-gradient(520px 260px at 50% 8%, rgba(59, 130, 246, 0.18), transparent 68%),
    linear-gradient(160deg, #0C1322, #080B12);
  display: grid; place-items: center;
  overflow: hidden;
  padding: var(--sp-8);
}
.pdp__main svg { width: 100%; height: auto; }
/* 主图绝对定位适配容器：grid auto 轨道下百分比高度无法解析（会回退 auto 撑破 aspect-ratio），
   与 .card__media img 同款方案，任何比例图片都完整居中显示 */
.pdp__main img {
  position: absolute;
  inset: var(--sp-8);
  width: calc(100% - (var(--sp-8) * 2));
  height: calc(100% - (var(--sp-8) * 2));
  object-fit: contain;
  display: block;
}
.pdp__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.pdp__thumb {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-bg-700);
  color: inherit;
  font: inherit;
  text-align: inherit;
  aspect-ratio: 4 / 3;
  display: grid; grid-template-rows: minmax(0, 1fr); place-items: center;
  padding: var(--sp-3);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.pdp__thumb:hover { border-color: var(--c-border-strong); }
.pdp__thumb[aria-selected="true"] { border-color: var(--c-border-brand); background: rgba(59, 130, 246, 0.08); }
.pdp__thumb:focus-visible { outline: 2px solid var(--c-border-brand); outline-offset: 2px; }
.pdp__thumb img { width: 100%; height: 100%; min-height: 0; object-fit: contain; display: block; }

.pdp__key { }
.pdp__title { font-size: var(--fs-h1); margin-top: var(--sp-4); }
.pdp__lead { margin-top: var(--sp-4); color: var(--c-text-300); font-size: var(--fs-lead); line-height: var(--lh-loose); }
.pdp__cta { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-8); }
.pdp__quick { margin-top: var(--sp-8); }

@media (max-width: 1023px) { .pdp { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); } }

/* 接口定义表 */
.pinout { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.pinout th, .pinout td { padding: var(--sp-3) var(--sp-4); text-align: start; border-bottom: 1px solid var(--c-border-soft); }
.pinout thead th {
  font-family: var(--font-mono); font-size: var(--fs-caption);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--c-text-300); font-weight: var(--fw-regular);
}
.pinout td { font-family: var(--font-mono); color: var(--c-text-100); }
.pinout td:first-child { color: var(--c-brand-300); }

/* 尺寸图 */
.dim-panel {
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: #05070C;
  padding: var(--sp-8);
  display: grid;
  place-items: center;
}
.dim-panel svg { width: 100%; max-width: 520px; height: auto; }

/* 资料下载列表 */
.dl-list { display: grid; gap: 0; border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; }
.dl-item {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-bg-700);
  border-bottom: 1px solid var(--c-border-soft);
  transition: background var(--t-fast);
}
.dl-item:last-child { border-bottom: 0; }
.dl-item:hover { background: var(--c-bg-600); }
.dl-item svg { color: var(--c-brand-400); flex: none; }
.dl-item__name { font-size: var(--fs-sm); color: var(--c-text-100); }
.dl-item__meta { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--c-text-300); }
.dl-item__action { margin-inline-start: auto; }

/* ==========================================================================
   解决方案：系统架构
   ========================================================================== */

.sol-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--sp-10);
  align-items: center;
  padding-block: var(--sp-12);
  border-bottom: 1px solid var(--c-border-soft);
}
.sol-block:last-child { border-bottom: 0; }
.sol-block--flip .sol-block__art { order: -1; }
.sol-block__art {
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  background: #05070C;
  padding: var(--sp-6);
}
.sol-block__art svg { width: 100%; height: auto; }
.sol-block__points { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); }
.sol-block__points li { display: flex; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--c-text-300); line-height: var(--lh-normal); }
.sol-block__points svg { color: var(--c-accent-400); flex: none; margin-top: 4px; width: 16px; height: 16px; }

@media (max-width: 1023px) {
  .sol-block { grid-template-columns: minmax(0, 1fr); }
  .sol-block--flip .sol-block__art { order: 0; }
}

/* ==========================================================================
   关于玥耀：能力矩阵 + 时间线
   ========================================================================== */

.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@media (max-width: 900px) { .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cap-grid { grid-template-columns: minmax(0, 1fr); } }
.cap {
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-bg-700);
  padding: var(--sp-6);
}
.cap svg { color: var(--c-brand-300); margin-bottom: var(--sp-4); width: 24px; height: 24px; stroke-width: 1.4; }
.cap h3 { font-size: var(--fs-body); }
.cap p { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-300); line-height: var(--lh-normal); }

.timeline { position: relative; padding-inline-start: var(--sp-8); }
.timeline::before {
  content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px;
  width: 1px; background: linear-gradient(180deg, var(--c-brand-500), rgba(148,163,184,.15));
}
.tl-item { position: relative; padding-bottom: var(--sp-8); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: calc(-1 * var(--sp-8) + 1px); top: 6px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--c-bg-900); border: 2px solid var(--c-brand-500);
  box-shadow: 0 0 0 4px rgba(59,130,246,.12);
}
.tl-item__year { font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: var(--ls-wide); color: var(--c-brand-400); }
.tl-item h3 { font-size: var(--fs-body); margin-top: var(--sp-2); }
.tl-item p { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-300); line-height: var(--lh-normal); }

/* ==========================================================================
   联系销售：表单布局
   ========================================================================== */

.contact-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sp-12); align-items: start; }
@media (max-width: 1023px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.form-grid .field--full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

.upload {
  display: block;
  max-width: 100%;
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--r-lg);
  background: rgba(148, 163, 184, 0.03);
  padding: var(--sp-8);
  text-align: center;
  transition: border-color var(--t-fast), background var(--t-fast);
  cursor: pointer;
}
.upload input[type="file"] { max-width: 100%; }
.upload:hover { border-color: var(--c-border-brand); background: rgba(59, 130, 246, 0.06); }
.upload svg { margin: 0 auto var(--sp-4); color: var(--c-brand-400); width: 26px; height: 26px; }
.upload__t { font-size: var(--fs-sm); color: var(--c-text-100); }
.upload__d { margin-top: var(--sp-2); font-size: var(--fs-caption); color: var(--c-text-300); }

.contact-side {
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-bg-700);
  padding: var(--sp-6);
}
.contact-side dl { margin: 0; }
.contact-side .row { padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-border-soft); }
.contact-side .row:last-child { border-bottom: 0; }
.contact-side dt { font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-text-300); }
.contact-side dd { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--c-text-100); }
.contact-side dd a {
  color: var(--c-brand-400);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.contact-side dd a:hover { color: var(--c-brand-300); border-bottom-color: currentColor; }

/* ==========================================================================
   设计系统文档页
   ========================================================================== */

.ds-section { padding-block: var(--sp-12); border-bottom: 1px solid var(--c-border-soft); }
.ds-section > .t-h3 { margin-bottom: var(--sp-2); }
.ds-section > .t-sm { margin-bottom: var(--sp-8); }

.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--sp-4); }
.swatch {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-bg-700);
}
.swatch__chip { height: 76px; border-bottom: 1px solid var(--c-border-soft); }
.swatch__meta { padding: var(--sp-3) var(--sp-4); }
.swatch__name { font-size: var(--fs-caption); color: var(--c-text-200); }
.swatch__hex { font-family: var(--font-mono); font-size: 11px; color: var(--c-text-300); margin-top: 3px; letter-spacing: .04em; }
.swatch__ratio { font-family: var(--font-mono); font-size: 11px; margin-top: var(--sp-2); }
.swatch__ratio.pass { color: var(--c-success); }
.swatch__ratio.fail { color: var(--c-warning); }

.ds-row {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: var(--sp-6);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--c-border-soft);
  align-items: center;
}
.ds-row:last-child { border-bottom: 0; }
.ds-row__label { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--c-text-300); letter-spacing: .04em; }
.ds-row__demo { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
@media (max-width: 767px) { .ds-row { grid-template-columns: 1fr; gap: var(--sp-3); } }

.space-demo { display: grid; gap: var(--sp-3); width: 100%; }
.space-demo .bar { display: flex; align-items: center; gap: var(--sp-4); }
.space-demo .bar i { height: 14px; background: linear-gradient(90deg, rgba(59,130,246,.85), rgba(34,211,238,.35)); border-radius: 3px; display: block; }
.space-demo .bar span { font-family: var(--font-mono); font-size: 11px; color: var(--c-text-300); white-space: nowrap; }

.radius-demo { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.radius-demo .box {
  width: 96px; height: 72px;
  border: 1px solid var(--c-border-strong);
  background: rgba(59, 130, 246, 0.08);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 11px; color: var(--c-text-300);
}

.type-demo { display: grid; gap: var(--sp-5); }
.type-demo .item { display: flex; align-items: baseline; gap: var(--sp-6); flex-wrap: wrap; }
.type-demo .item .meta { font-family: var(--font-mono); font-size: 11px; color: var(--c-text-300); white-space: nowrap; }

.token-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.token-table th, .token-table td { padding: var(--sp-3) var(--sp-4); text-align: start; border-bottom: 1px solid var(--c-border-soft); }
.token-table thead th { font-family: var(--font-mono); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--c-text-300); font-weight: var(--fw-regular); }
.token-table td:first-child { font-family: var(--font-mono); color: var(--c-brand-300); white-space: nowrap; }
.token-table td:nth-child(2) { font-family: var(--font-mono); color: var(--c-text-100); white-space: nowrap; }
.token-table td:last-child { color: var(--c-text-300); }

.ds-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
@media (max-width: 900px) { .ds-split { grid-template-columns: minmax(0, 1fr); } }

/* 规范条目（do / don't） */
.dd-list { display: grid; gap: var(--sp-4); }
.dd { display: flex; gap: var(--sp-3); font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--c-text-300); }
.dd b { color: var(--c-text-100); }
.dd svg { flex: none; margin-top: 3px; width: 16px; height: 16px; }
.dd--do svg { color: var(--c-success); }
.dd--no svg { color: var(--c-danger); }
/* ========================================================================== 
   后台同步产品内容
   ========================================================================== */

.managed-product-card { min-width: 0; }
.managed-product-card .card__media { position: relative; overflow: hidden; }
.managed-product-badge { position: absolute; z-index: 2; top: 16px; left: 16px; }
.managed-product-image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  background: var(--c-bg-900);
}
.managed-product-image--detail { min-height: 390px; }
.managed-product-placeholder {
  position: relative;
  width: 100%;
  min-height: 260px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--c-text-200);
  background: var(--c-bg-900);
}
.managed-product-placeholder--detail { min-height: 390px; }
.managed-product-placeholder span {
  position: relative;
  z-index: 1;
  font: 600 13px/1.2 var(--font-mono);
  letter-spacing: .08em;
}
.managed-product-placeholder svg {
  position: absolute;
  inset: 12% 8%;
  width: 84%;
  height: 76%;
  fill: none;
  stroke: var(--c-brand-500);
  stroke-width: 1.2;
  opacity: .38;
}
.managed-product-price,
.managed-detail-price {
  margin-top: var(--sp-5);
  color: var(--c-text-100);
  font: 600 18px/1.3 var(--font-mono);
}
.managed-detail-price { margin-top: var(--sp-8); font-size: 24px; }
.managed-empty {
  grid-column: 1 / -1;
  padding: clamp(40px, 8vw, 88px) var(--sp-6);
  text-align: center;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-bg-900);
}
.managed-empty p { max-width: 60ch; margin: var(--sp-3) auto 0; color: var(--c-text-200); }
/* 整页级空态：先前用 52vh 撑出半屏空白，边界收到固定内边距 */
.managed-empty--page {
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-block: var(--sp-16);
}
.managed-detail-thumb { overflow: hidden; }
.managed-detail-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.managed-detail-thumb span { font: 600 10px/1.2 var(--font-mono); color: var(--c-text-200); }
.managed-detail-section { margin-top: clamp(64px, 8vw, 112px); }

/* 窄屏：搜索置顶，计数与清除筛选下沉为一行 */
@media (max-width: 760px) {
  .catalog__toolbar { position: static; flex-direction: column; align-items: stretch; gap: var(--sp-3); padding: var(--sp-4); }
  .catalog__meta { order: 2; justify-content: space-between; }
  .catalog-search { order: 1; width: 100%; }
  .managed-product-image--detail,
  .managed-product-placeholder--detail { min-height: 280px; }
  .managed-detail-price { font-size: 20px; }
}