/* ============================================================
   components.css — 统一组件库（列表 / 详情 / 选样车 / 账户 通用一套）
   ============================================================ */

/* ---------------- 按钮 ---------------- */
.ytd-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:var(--ctl-h); padding-inline:var(--sp-5);
  border:1px solid transparent; border-radius:var(--r-sm);
  font-size:var(--fs-14); font-weight:var(--fw-medium); line-height:1;
  text-align:center; cursor:pointer; white-space:nowrap;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.ytd-btn:active{ transform:translateY(1px); }
.ytd-btn[disabled],.ytd-btn.is-disabled{ opacity:.45; cursor:not-allowed; pointer-events:none; }

.ytd-btn--primary{ background:var(--c-primary); color:#fff; }
.ytd-btn--primary:hover{ background:var(--c-primary-700); color:#fff; }
.ytd-btn--gold{ background:var(--c-accent-700); color:#fff; }
.ytd-btn--gold:hover{ background:var(--c-accent-600); color:#fff; }
.ytd-btn--secondary{ background:#fff; color:var(--c-ink-2); border-color:var(--c-line-2); }
.ytd-btn--secondary:hover{ border-color:var(--c-primary-300); color:var(--c-primary); }
.ytd-btn--ghost{ background:transparent; color:var(--c-ink-2); border-color:var(--c-line-2); }
.ytd-btn--ghost:hover{ background:var(--c-soft); }
.ytd-btn--on-dark{ background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.ytd-btn--on-dark:hover{ border-color:#fff; color:#fff; }
.ytd-btn--danger{ background:#fff; color:var(--c-danger); border-color:var(--c-line-2); }
.ytd-btn--danger:hover{ background:var(--c-danger-100); border-color:var(--c-danger); color:var(--c-danger); }
.ytd-btn--link{
  min-height:0; padding:0; background:none; border:0; color:var(--c-primary);
  font-weight:var(--fw-medium);
}
.ytd-btn--link:hover{ color:var(--c-primary-500); text-decoration:underline; }

.ytd-btn--lg{ min-height:var(--ctl-h-lg); padding-inline:var(--sp-6); font-size:var(--fs-16); }
.ytd-btn--sm{ min-height:32px; padding-inline:var(--sp-3); font-size:var(--fs-13); }
.ytd-btn--block{ width:100%; }
.ytd-btn__arrow{ transition:transform var(--dur) var(--ease); }
.ytd-btn:hover .ytd-btn__arrow{ transform:translateX(3px); }
[dir="rtl"] .ytd-btn__arrow{ transform:scaleX(-1); }
[dir="rtl"] .ytd-btn:hover .ytd-btn__arrow{ transform:scaleX(-1) translateX(3px); }

.ytd-btn.is-loading{ position:relative; color:transparent !important; }
.ytd-btn.is-loading::after{
  content:""; position:absolute; width:16px; height:16px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent;
  color:#fff; animation:ytd-spin .7s linear infinite;
}
.ytd-btn--secondary.is-loading::after,
.ytd-btn--ghost.is-loading::after{ color:var(--c-primary); }
@keyframes ytd-spin{ to{ transform:rotate(360deg); } }

/* ---------------- 卡片 ---------------- */
.ytd-card{ background:#fff; border:1px solid var(--c-line); border-radius:var(--r-md); }
.ytd-card--pad{ padding:var(--sp-5); }
.ytd-card--soft{ background:var(--c-soft); }
.ytd-card--hover{ transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease); }
.ytd-card--hover:hover{ border-color:var(--c-primary-300); box-shadow:var(--sh-xs); transform:translateY(-2px); }

/* ---------------- 徽标 / 标签 ---------------- */
.ytd-badge{
  display:inline-flex; align-items:center; gap:var(--sp-1);
  height:20px; padding-inline:var(--sp-2); border-radius:var(--r-xs);
  font-size:var(--fs-11); font-weight:var(--fw-semibold); letter-spacing:.02em; line-height:1;
  background:var(--c-soft); color:var(--c-muted);
}
.ytd-badge--gold{ background:var(--c-accent-100); color:var(--c-accent-600); }
.ytd-badge--blue{ background:var(--c-primary-100); color:var(--c-primary-500); }
.ytd-badge--green{ background:var(--c-success-100); color:var(--c-success); }
.ytd-badge--danger{ background:var(--c-danger-100); color:var(--c-danger); }
.ytd-badge--line{ background:transparent; border:1px solid currentColor; }
.ytd-badge--lg{ height:24px; font-size:var(--fs-12); padding-inline:var(--sp-3); }

/* ---------------- chips ---------------- */
.ytd-chip{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  height:32px; padding-inline:var(--sp-3); border-radius:var(--r-pill);
  border:1px solid var(--c-line-2); background:#fff;
  font-size:var(--fs-13); color:var(--c-body); white-space:nowrap;
}
a.ytd-chip:hover{ border-color:var(--c-primary-300); color:var(--c-primary); }
.ytd-chip.is-active{ background:var(--c-primary); border-color:var(--c-primary); color:#fff; }
.ytd-chip--soft{ background:var(--c-soft); border-color:var(--c-line); }
.ytd-chip--sm{ height:28px; font-size:var(--fs-12); }

/* 顶部分段按钮（排序切换） */
.ytd-segment{ display:inline-flex; border:1px solid var(--c-line-2); border-radius:var(--r-sm); overflow:hidden; }
.ytd-segment a,.ytd-segment span{
  display:inline-flex; align-items:center; height:34px; padding-inline:var(--sp-3);
  font-size:var(--fs-13); color:var(--c-body); background:#fff;
}
.ytd-segment a + a,.ytd-segment span + span{ border-inline-start:1px solid var(--c-line); }
.ytd-segment a:hover{ background:var(--c-soft); }
.ytd-segment .is-active{ background:var(--c-primary); border-color:var(--c-primary); color:#fff; }

/* ---------------- 表单 ---------------- */
.ytd-field{ display:flex; flex-direction:column; gap:var(--sp-2); }
.ytd-label{ font-size:var(--fs-13); color:var(--c-ink-2); }
.ytd-label .req{ color:var(--c-danger); }
.ytd-hint{ font-size:var(--fs-12); color:var(--c-muted); }
.ytd-input,.ytd-select,.ytd-textarea{
  width:100%; min-height:var(--ctl-h); padding:var(--sp-3);
  border:1px solid var(--c-line-2); border-radius:var(--r-sm); background:#fff;
  font-size:var(--fs-14); color:var(--c-ink);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.ytd-textarea{ min-height:110px; resize:vertical; }
.ytd-input:focus,.ytd-select:focus,.ytd-textarea:focus{
  border-color:var(--c-primary-500); box-shadow:0 0 0 3px var(--c-primary-100); outline:none;
}
.ytd-input.is-error,.ytd-textarea.is-error,.ytd-select.is-error{ border-color:var(--c-danger); background:var(--c-danger-100); }
.ytd-error{ font-size:var(--fs-12); color:var(--c-danger); }
.ytd-input-group{ display:flex; align-items:center; gap:var(--sp-2); }
.ytd-input-group .ytd-input{ flex:1; }

.ytd-check{ display:inline-flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-14); color:var(--c-body); cursor:pointer; }
.ytd-check input{ width:18px; height:18px; accent-color:var(--c-primary); cursor:pointer; }

/* 数量步进器（箱数） */
.ytd-stepper{ display:inline-flex; align-items:center; border:1px solid var(--c-line-2); border-radius:var(--r-sm); overflow:hidden; background:#fff; }
.ytd-stepper button{
  width:44px; height:var(--ctl-h); border:0; background:#fff; color:var(--c-body);
  font-size:18px; line-height:1; cursor:pointer;
}
.ytd-stepper button:hover{ background:var(--c-soft); color:var(--c-primary); }
.ytd-stepper input{
  width:64px; height:var(--ctl-h); border:0; border-inline:1px solid var(--c-line);
  text-align:center; font-size:var(--fs-15); font-weight:var(--fw-semibold);
  color:var(--c-ink); font-variant-numeric:tabular-nums; background:#fff;
}
.ytd-stepper input::-webkit-outer-spin-button,
.ytd-stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.ytd-stepper input[type=number]{ -moz-appearance:textfield; }

/* ---------------- 表格 ---------------- */
.ytd-table{ border:1px solid var(--c-line); border-radius:var(--r-md); overflow:hidden; }
.ytd-table__head{
  display:flex; align-items:center; gap:var(--sp-4); min-height:44px; padding-inline:var(--sp-4);
  background:var(--c-soft); font-size:var(--fs-12); font-weight:var(--fw-semibold);
  color:var(--c-ink-2); letter-spacing:.04em; text-transform:uppercase;
}
.ytd-table__row{
  display:flex; align-items:center; gap:var(--sp-4); min-height:72px; padding-inline:var(--sp-4);
  border-top:1px solid var(--c-line); transition:background-color var(--dur) var(--ease);
}
.ytd-table__row:hover{ background:var(--c-soft); }
.ytd-table__row.is-summary{ background:var(--c-soft); min-height:52px; }
.ytd-table__num{ font-variant-numeric:tabular-nums; }

/* ---------------- 面包屑 ---------------- */
.ytd-crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); font-size:var(--fs-13); color:var(--c-muted); }
.ytd-crumb a{ color:var(--c-muted); }
.ytd-crumb a:hover{ color:var(--c-primary); }
.ytd-crumb [aria-current="page"]{ color:var(--c-ink-2); }
.ytd-crumb__sep{ color:var(--c-line-2); }
[dir="rtl"] .ytd-crumb__sep{ transform:scaleX(-1); }

/* ---------------- 区块标题 ---------------- */
.ytd-sec-head{ margin-bottom:var(--sp-8); }
.ytd-sec-head__row{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-5); flex-wrap:wrap; }
.ytd-sec-head .ytd-eyebrow{ margin-bottom:var(--sp-2); }
.ytd-sec-head .ytd-sub{ margin-top:var(--sp-3); }
.ytd-sec-head--center{ text-align:center; }
.ytd-sec-head--center .ytd-sec-head__row{ justify-content:center; }
.ytd-sec-head--center .ytd-sub{ margin-inline:auto; }

/* ---------------- 分页 ---------------- */
.ytd-pagination{ display:flex; align-items:center; justify-content:center; gap:var(--sp-2); flex-wrap:wrap; }
.ytd-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; height:36px; padding-inline:var(--sp-2);
  border:1px solid var(--c-line); border-radius:var(--r-sm);
  font-size:var(--fs-13); color:var(--c-body); background:#fff;
  font-variant-numeric:tabular-nums;
}
.ytd-pagination .page-numbers:hover{ border-color:var(--c-primary-300); color:var(--c-primary); }
.ytd-pagination .page-numbers.current{ background:var(--c-primary); border-color:var(--c-primary); color:#fff; font-weight:var(--fw-semibold); }
.ytd-pagination .dots{ border-color:transparent; background:transparent; }

/* ---------------- 空态 / 加载 / 错误 ---------------- */
.ytd-empty{
  border:1px dashed var(--c-line-2); background:var(--c-soft); border-radius:var(--r-md);
  padding:var(--sp-9) var(--sp-5); text-align:center;
}
.ytd-empty__icon{ width:48px; height:48px; margin:0 auto var(--sp-4); color:var(--c-line-2); }
.ytd-empty__title{ font-size:var(--fs-18); font-weight:var(--fw-semibold); color:var(--c-ink); margin-bottom:var(--sp-2); }
.ytd-empty__text{ font-size:var(--fs-14); color:var(--c-muted); max-width:46ch; margin:0 auto var(--sp-5); }

.ytd-skeleton{ background:var(--c-soft); border-radius:var(--r-sm); position:relative; overflow:hidden; }
.ytd-skeleton::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  animation:ytd-shimmer 1.2s infinite;
}
@keyframes ytd-shimmer{ 0%{transform:translateX(-100%);} 100%{transform:translateX(100%);} }
@media (prefers-reduced-motion: reduce){ .ytd-skeleton::after{ animation:none; } }

.ytd-alert{ display:flex; gap:var(--sp-3); padding:var(--sp-4); border-radius:var(--r-sm); font-size:var(--fs-13); }
.ytd-alert--error{ background:var(--c-danger-100); color:#8C1D18; border:1px solid #F0C9C6; }
.ytd-alert--info{ background:var(--c-primary-50); color:var(--c-primary-500); border:1px solid var(--c-primary-100); }
.ytd-alert--success{ background:var(--c-success-100); color:#14663A; border:1px solid #C6E6D4; }

/* ---------------- Toast ---------------- */
.ytd-toast{
  position:fixed; top:var(--sp-5); inset-inline-end:var(--sp-5); z-index:var(--z-toast);
  display:grid; gap:var(--sp-2); width:min(360px,calc(100vw - 32px));
}
.ytd-toast__item{
  display:flex; align-items:flex-start; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4); border-radius:var(--r-sm);
  background:var(--c-dark); color:#fff; font-size:var(--fs-13);
  box-shadow:var(--sh-md);
}
.ytd-toast__item--error{ background:var(--c-danger); }
.ytd-toast__item--success{ background:#14663A; }
@media (max-width:559px){ .ytd-toast{ inset-inline:var(--sp-4); width:auto; top:var(--sp-3); } }

/* ---------------- 步骤条 ---------------- */
.ytd-steps{ display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; }
.ytd-steps__item{ display:inline-flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-14); color:var(--c-body); }
.ytd-steps__num{
  width:26px; height:26px; border-radius:50%; border:1px solid var(--c-line-2);
  font-size:var(--fs-12); font-weight:var(--fw-semibold); line-height:24px; text-align:center; color:var(--c-muted);
}
.ytd-steps__item.is-current{ color:var(--c-primary); font-weight:var(--fw-semibold); }
.ytd-steps__item.is-current .ytd-steps__num{ background:var(--c-primary); border-color:var(--c-primary); color:#fff; }
.ytd-steps__item.is-done .ytd-steps__num{ background:var(--c-success-100); border-color:var(--c-success); color:var(--c-success); }
.ytd-steps__line{ flex:0 0 48px; height:1px; background:var(--c-line-2); }

/* ---------------- 分类树（筛选栏） ---------------- */
.ytd-cat-tree > li{ border-bottom:1px solid var(--c-line); }
.ytd-cat-tree > li:last-child{ border-bottom:0; }
.ytd-cat-tree a{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding-block:var(--sp-2); font-size:var(--fs-14); color:var(--c-body); }
.ytd-cat-tree a:hover{ color:var(--c-primary); }
.ytd-cat-tree .is-current{ color:var(--c-primary); font-weight:var(--fw-semibold); }
.ytd-cat-tree .count{ font-size:var(--fs-12); color:var(--c-muted); font-variant-numeric:tabular-nums; }
.ytd-cat-tree .children{ padding-inline-start:var(--sp-4); }

/* ---------------- 模态 ---------------- */
.ytd-modal-backdrop{
  position:fixed; inset:0; background:rgba(11,34,55,.44); z-index:var(--z-modal);
  opacity:0; visibility:hidden; transition:opacity var(--dur-slow) var(--ease),visibility var(--dur-slow);
}
.ytd-modal-backdrop.is-open{ opacity:1; visibility:visible; }
.ytd-modal{
  position:fixed; z-index:var(--z-modal); inset-block:0; inset-inline:0; margin:auto;
  width:min(92vw,520px); max-height:86vh; overflow:auto;
  background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh-lg); padding:var(--sp-6);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease),visibility var(--dur-slow);
}
.ytd-modal.is-open{ opacity:1; visibility:visible; transform:translateY(0); }

/* ---------------- 图标 ---------------- */
.ytd-icon{ width:20px; height:20px; flex:0 0 auto; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.ytd-icon--16{ width:16px; height:16px; }
.ytd-icon--24{ width:24px; height:24px; }
.ytd-icon--gold{ color:var(--c-accent); }

/* ---------------- 工具类 ---------------- */
.ytd-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.ytd-muted{ color:var(--c-muted); }
.ytd-ink{ color:var(--c-ink); }
.ytd-row{ display:flex; align-items:center; gap:var(--sp-3); }
.ytd-row--wrap{ flex-wrap:wrap; }
.ytd-between{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; }
.ytd-stack{ display:grid; gap:var(--sp-3); }
.ytd-stack--lg{ display:grid; gap:var(--sp-5); }
.ytd-mt-4{ margin-top:var(--sp-4); } .ytd-mt-5{ margin-top:var(--sp-5); }
.ytd-mt-6{ margin-top:var(--sp-6); } .ytd-mt-8{ margin-top:var(--sp-8); }

/* 间距微调（只用于模板内的零星微调，不替代语义类） */
.g8{ gap:var(--sp-2); } .g10{ gap:var(--sp-3); } .g12{ gap:var(--sp-4); } .g14{ gap:var(--sp-5); }
.ytd-col{ display:grid; gap:2px; }
.ytd-hide-desktop{ display:none; }
@media (min-width:1024px){ .ytd-hide-desktop{ display:initial; } }

/* 禁用样式统一：让「不可点」看起来可读而不是像坏掉 */
.is-disabled,
[aria-disabled="true"]{ opacity:.5; pointer-events:none; }