/* ==========================================================================
   通用组件 · 前缀 yb-
   按钮 / 图标按钮 / 输入框 / 选择器 / 复选 单选 开关 / 分段控制 / 标签页
   弹出层 / 菜单 / 对话框 / 轻提示 / 文字提示 / 徽标 / 头像 / 图块
   卡片 / 空状态 / 骨架屏 / 涨跌标签
   ========================================================================== */

/* ---------- 按钮 Button ---------- */
.yb-btn {
  --btn-h: 36px;
  --btn-px: 14px;
  --btn-fs: var(--fs-14);
  --btn-bg: var(--c-surface);
  --btn-fg: var(--c-text-1);
  --btn-bd: var(--c-border-2);
  --btn-bg-hover: var(--c-fill-1);
  --btn-bg-active: var(--c-fill-2);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--btn-h);
  padding: 0 var(--btn-px);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--btn-fs);
  font-weight: var(--fw-medium);
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.yb-btn:hover { background: var(--btn-bg-hover); }
.yb-btn:active { background: var(--btn-bg-active); transform: scale(.98); }
.yb-btn > .yb-icon { width: 18px; height: 18px; margin-left: -2px; }

.yb-btn--primary {
  --btn-bg: var(--c-primary); --btn-fg: #fff; --btn-bd: var(--c-primary);
  --btn-bg-hover: var(--c-primary-hover); --btn-bg-active: var(--c-primary-active);
}
.yb-btn--accent {
  --btn-bg: var(--c-brand-sun); --btn-fg: var(--c-brand-ink); --btn-bd: var(--c-brand-sun);
  --btn-bg-hover: #FFCB5C; --btn-bg-active: #F5B62C;
}
.yb-btn--ghost { --btn-bg: transparent; --btn-bd: transparent; }
.yb-btn--danger {
  --btn-bg: var(--c-danger); --btn-fg: #fff; --btn-bd: var(--c-danger);
  --btn-bg-hover: var(--c-red-600); --btn-bg-active: #B02A2F;
}
.yb-btn--sm { --btn-h: 32px; --btn-px: 12px; --btn-fs: var(--fs-13); border-radius: var(--r-sm); }
.yb-btn--sm > .yb-icon { width: 16px; height: 16px; }
.yb-btn--lg { --btn-h: 44px; --btn-px: 20px; --btn-fs: var(--fs-15); border-radius: var(--r-lg); }
.yb-btn--block { display: flex; width: 100%; }

/* 禁用：统一为灰色。aria-disabled 仍可悬停与聚焦，用来显示「为什么不可用」的提示 */
.yb-btn:disabled, .yb-btn.is-disabled, .yb-btn[aria-disabled="true"] {
  --btn-bg: var(--c-fill-1); --btn-bg-hover: var(--c-fill-1); --btn-bg-active: var(--c-fill-1);
  --btn-fg: var(--c-text-4); --btn-bd: var(--c-fill-1);
  cursor: not-allowed;
  transform: none !important;
}
.yb-btn:disabled, .yb-btn.is-disabled { pointer-events: none; }
.yb-btn.is-loading { color: transparent; pointer-events: none; }
.yb-btn.is-loading::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--btn-fg);
  border-right-color: transparent;
  animation: yb-spin .7s linear infinite;
}

/* ---------- 图标按钮 Icon button ---------- */
.yb-icon-btn {
  --ib: 36px;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--ib);
  height: var(--ib);
  border-radius: var(--r-md);
  color: var(--c-icon);
  transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), color var(--dur-1);
}
.yb-icon-btn:hover { background: var(--c-fill-1); }
.yb-icon-btn:active { background: var(--c-fill-2); transform: scale(.94); }
.yb-icon-btn--sm { --ib: 28px; border-radius: var(--r-sm); }
.yb-icon-btn--sm .yb-icon { width: 16px; height: 16px; }
.yb-icon-btn--muted { color: var(--c-text-3); }
.yb-icon-btn--muted:hover { color: var(--c-icon); }
.yb-icon-btn--bordered { border: 1px solid var(--c-border-2); background: var(--c-surface); }

/* ---------- 表单字段 Field ---------- */
.yb-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.yb-label { font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--c-text-1); }
.yb-help { font-size: var(--fs-12); color: var(--c-text-3); line-height: var(--lh-snug); }
.yb-field.is-error .yb-help { color: var(--c-danger); }

/* ---------- 输入框 Input ---------- */
.yb-input {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-md);
  color: var(--c-text-1);
  cursor: text;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), background-color var(--dur-1);
}
.yb-input:hover { border-color: var(--c-gray-300); }
.yb-input:focus-within { border-color: var(--c-primary); box-shadow: var(--focus-ring); }
.yb-input > .yb-icon { width: 18px; height: 18px; color: var(--c-text-3); }
.yb-input input,
.yb-input textarea {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: var(--fs-14);
}
.yb-input input:focus-visible, .yb-input textarea:focus-visible { outline: none; }
.yb-input input::placeholder, .yb-input textarea::placeholder { color: var(--c-text-4); }
.yb-input--sm { height: 34px; border-radius: var(--r-sm); }
.yb-input--sm > .yb-icon { width: 16px; height: 16px; }
.yb-input--filled { background: var(--c-fill-1); border-color: transparent; }
.yb-input--filled:hover { border-color: transparent; background: var(--c-fill-2); }
.yb-input--filled:focus-within { background: var(--c-surface); }
.yb-input--textarea { height: auto; padding: 10px 12px; align-items: stretch; }
.yb-input--textarea textarea { min-height: 88px; resize: vertical; line-height: var(--lh-base); }
.yb-field.is-error .yb-input { border-color: var(--c-danger); }
.yb-field.is-error .yb-input:focus-within { box-shadow: 0 0 0 3px rgba(229, 72, 77, .12); }
.yb-input.is-disabled { background: var(--c-fill-1); color: var(--c-text-4); pointer-events: none; }

/* ---------- 选择器 Select ---------- */
.yb-select { position: relative; min-width: 0; }
.yb-select-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 38px;
  padding: 0 10px 0 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-md);
  font-size: var(--fs-14);
  text-align: left;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.yb-select-trigger:hover { border-color: var(--c-gray-300); }
.yb-select-trigger[aria-expanded="true"] { border-color: var(--c-primary); box-shadow: var(--focus-ring); }
.yb-select-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yb-select-value.is-placeholder { color: var(--c-text-4); }
.yb-select-trigger > .yb-icon { width: 16px; height: 16px; color: var(--c-text-3); }

/* 选项（Select 与切换器共用） */
.yb-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  font-size: var(--fs-14);
  color: var(--c-text-1);
  text-align: left;
  transition: background-color var(--dur-1) var(--ease-out);
}
.yb-option:hover, .yb-option:focus-visible { background: var(--c-fill-1); outline: none; }
.yb-option[aria-selected="true"] { font-weight: var(--fw-medium); }
.yb-option[aria-disabled="true"] { color: var(--c-text-4); pointer-events: none; }
.yb-option-check {
  margin-left: auto;
  width: 16px; height: 16px;
  opacity: 0;
  transform: scale(.6);
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-spring);
}
.yb-option[aria-selected="true"] .yb-option-check { opacity: 1; transform: none; }

/* ---------- 复选 / 单选 / 开关（视觉隐藏原生 input，外观完全自定义） ---------- */
.yb-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-14);
  color: var(--c-text-1);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.yb-check-input {
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.yb-check-box {
  display: grid;
  place-items: center;
  flex: none;
  width: 18px; height: 18px;
  border: 1.5px solid var(--c-gray-300);
  border-radius: 5px;
  background: var(--c-surface);
  color: #fff;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1);
}
.yb-check-box .yb-icon {
  width: 14px; height: 14px;
  stroke-width: 2.4;
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  transition: stroke-dashoffset var(--dur-2) var(--ease-out);
}
.yb-check:hover .yb-check-box { border-color: var(--c-gray-400); }
.yb-check-input:checked + .yb-check-box { background: var(--c-primary); border-color: var(--c-primary); }
.yb-check-input:checked + .yb-check-box .yb-icon { stroke-dashoffset: 0; }
.yb-check-input:focus-visible + .yb-check-box,
.yb-check-input:focus-visible + .yb-switch-track { box-shadow: 0 0 0 3px rgba(30, 43, 64, .18); }
.yb-check-input:disabled ~ * { opacity: .45; }
.yb-check:has(.yb-check-input:disabled) { cursor: not-allowed; }

.yb-check--radio .yb-check-box { border-radius: 50%; }
.yb-check--radio .yb-check-box::after {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform var(--dur-2) var(--ease-spring);
}
.yb-check--radio .yb-check-input:checked + .yb-check-box::after { transform: scale(1); }

.yb-switch-track {
  position: relative;
  flex: none;
  width: 36px; height: 20px;
  border-radius: var(--r-full);
  background: var(--c-gray-300);
  transition: background-color var(--dur-2) var(--ease-out), box-shadow var(--dur-1);
}
.yb-switch-track::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(23, 26, 31, .18);
  transition: transform var(--dur-2) var(--ease-spring);
}
.yb-check:hover .yb-switch-track { background: var(--c-gray-400); }
.yb-check-input:checked + .yb-switch-track { background: var(--c-primary); }
.yb-check-input:checked + .yb-switch-track::after { transform: translateX(16px); }

/* ---------- 分段控制 Segmented ---------- */
.yb-segmented {
  position: relative;
  display: inline-flex;
  flex: none;
  padding: 3px;
  background: var(--c-fill-1);
  border-radius: var(--r-md);
  isolation: isolate;
}
.yb-segmented-item {
  position: relative;
  height: 30px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--c-text-2);
  white-space: nowrap;
  transition: color var(--dur-2) var(--ease-out);
}
.yb-segmented-item:hover, .yb-segmented-item.is-active { color: var(--c-text-1); }
.yb-segmented--sm .yb-segmented-item { height: 26px; padding: 0 10px; font-size: var(--fs-12); }

/* 滑块指示器（分段控制与标签页共用，由 JS 定位） */
.yb-seg-indicator {
  position: absolute;
  left: 0;
  width: 0;
  pointer-events: none;
  z-index: -1;
  transition: transform var(--dur-3) var(--ease-out), width var(--dur-3) var(--ease-out);
}
.yb-segmented > .yb-seg-indicator {
  top: 3px; bottom: 3px;
  background: var(--c-surface);
  border-radius: 7px;
  box-shadow: var(--shadow-raise);
}

/* ---------- 标签页 Tabs ---------- */
.yb-tabs {
  position: relative;
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--c-border);
  isolation: isolate;
  overflow-x: auto;
  scrollbar-width: none;
}
.yb-tabs::-webkit-scrollbar { display: none; }
.yb-tabs-item {
  height: 42px;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--c-text-3);
  white-space: nowrap;
  transition: color var(--dur-2) var(--ease-out);
}
.yb-tabs-item:hover, .yb-tabs-item.is-active { color: var(--c-text-1); }
.yb-tabs > .yb-seg-indicator {
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--c-text-1);
  z-index: 1;
}

/* ---------- 弹出层 Popover（由 JS 挂载到 body 并定位） ---------- */
.yb-popover {
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-popover);
  min-width: 200px;
  max-width: calc(100vw - 16px);
  max-height: var(--avail-h, 440px);
  padding: 6px;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  opacity: 0;
  transform: translateY(-4px) scale(.98);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.yb-popover[data-side="top"] { transform: translateY(4px) scale(.98); }
.yb-popover.is-open { opacity: 1; transform: none; }

/* 手机端：弹出层变为底部抽屉 */
.yb-popover.is-sheet {
  top: auto !important;
  left: 0 !important;
  right: 0;
  bottom: 0;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none;
  max-height: 78vh;
  padding: 0 8px calc(12px + env(safe-area-inset-bottom));
  border: 0;
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  box-shadow: var(--shadow-modal);
  transform: translateY(100%);
  transition-duration: var(--dur-3);
}
.yb-popover.is-sheet.is-open { transform: none; }
.yb-popover.is-sheet::before {
  content: "";
  display: block;
  width: 36px; height: 4px;
  margin: 10px auto 8px;
  border-radius: var(--r-full);
  background: var(--c-gray-200);
}
.yb-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-popover) - 1);
  background: rgba(17, 20, 26, .32);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
}
.yb-sheet-backdrop.is-visible { opacity: 1; }

/* ---------- 菜单 Menu ---------- */
.yb-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  font-size: var(--fs-14);
  color: var(--c-text-1);
  text-align: left;
  white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease-out);
}
.yb-menu-item:hover, .yb-menu-item:focus-visible { background: var(--c-fill-1); outline: none; }
.yb-menu-item > .yb-icon { width: 18px; height: 18px; color: var(--c-icon); }
.yb-menu-item > .yb-badge { margin-left: auto; }
.yb-menu-item.is-danger, .yb-menu-item.is-danger > .yb-icon { color: var(--c-danger); }
.yb-menu-item.is-danger:hover, .yb-menu-item.is-danger:focus-visible { background: var(--c-danger-bg); }
.yb-menu-sep { height: 1px; margin: 6px -6px; background: var(--c-divider); }
.yb-menu-label { padding: 8px 10px 4px; font-size: var(--fs-12); color: var(--c-text-3); }

/* ---------- 对话框 Modal ---------- */
.yb-modal-root {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: 24px 16px;
}
.yb-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 20, 26, .36);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
}
.yb-modal {
  position: relative;
  width: min(var(--modal-w, 420px), 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 24px;
  background: var(--c-surface);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-modal);
  opacity: 0;
  transform: translateY(10px) scale(.97);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.yb-modal-root.is-open .yb-modal-backdrop { opacity: 1; }
.yb-modal-root.is-open .yb-modal { opacity: 1; transform: none; }
.yb-modal-close { position: absolute; top: 14px; right: 14px; }
.yb-modal-icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: var(--c-fill-1);
  color: var(--c-icon);
}
.yb-modal--danger .yb-modal-icon { background: var(--c-danger-bg); color: var(--c-danger); }
.yb-modal-title { font-size: var(--fs-18); padding-right: 24px; }
.yb-modal-body { margin-top: 8px; font-size: var(--fs-14); line-height: 1.7; color: var(--c-text-2); }
.yb-modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
@media (max-width: 479px) {
  .yb-modal { padding: 20px; }
  .yb-modal-foot > .yb-btn { flex: 1; }
}

/* ---------- 轻提示 Toast ---------- */
.yb-toast-stack {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top));
  left: 50%;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100vw - 32px);
  transform: translateX(-50%);
  pointer-events: none;
}
.yb-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 16px 10px 14px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  font-size: var(--fs-14);
  color: var(--c-text-1);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-8px) scale(.98);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.yb-toast.is-visible { opacity: 1; transform: none; }
.yb-toast.is-leaving { opacity: 0; transform: translateY(-6px) scale(.98); }
.yb-toast-icon { width: 18px; height: 18px; }
.yb-toast--success .yb-toast-icon { color: var(--c-success); }
.yb-toast--error .yb-toast-icon { color: var(--c-danger); }
.yb-toast--warning .yb-toast-icon { color: var(--c-warning); }
.yb-toast--info .yb-toast-icon { color: var(--c-icon); }

/* ---------- 文字提示 Tooltip ---------- */
.yb-tooltip {
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-tooltip);
  max-width: 240px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  background: var(--c-gray-900);
  color: #fff;
  font-size: var(--fs-12);
  line-height: 1.5;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transform: scale(.96);
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), visibility 0s linear var(--dur-1);
}
.yb-tooltip.is-visible {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), visibility 0s;
}
.yb-tooltip-arrow {
  position: absolute;
  width: 8px; height: 8px;
  background: inherit;
  border-radius: 1px;
  transform: rotate(45deg);
}
.yb-tooltip[data-side="top"] .yb-tooltip-arrow { bottom: -3px; }
.yb-tooltip[data-side="bottom"] .yb-tooltip-arrow { top: -3px; }
.yb-tooltip[data-side="right"] .yb-tooltip-arrow { left: -3px; }
.yb-tooltip[data-side="left"] .yb-tooltip-arrow { right: -3px; }

/* ---------- 徽标 Badge ---------- */
.yb-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-full);
  background: var(--c-fill-1);
  color: var(--c-text-2);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  line-height: 1;
  white-space: nowrap;
}
.yb-badge--dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.yb-badge--success { background: var(--c-success-bg); color: var(--c-green-600); }
.yb-badge--warning { background: var(--c-warning-bg); color: var(--c-amber-700); }
.yb-badge--danger  { background: var(--c-danger-bg);  color: var(--c-red-600); }
.yb-badge--info    { background: var(--c-info-bg);    color: var(--c-sky-600); }
.yb-badge--brand   { background: var(--c-amber-100);  color: var(--c-brand-ink); }
.yb-badge--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--c-border-2); }

/* ---------- 头像 Avatar ---------- */
.yb-avatar {
  --av: 32px;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--av);
  height: var(--av);
  overflow: hidden;
  border-radius: 50%;
  background: var(--c-amber-100);
  color: var(--c-brand-ink);
  font-size: calc(var(--av) * .42);
  font-weight: var(--fw-semibold);
  line-height: 1;
}
.yb-avatar--sm { --av: 24px; }
.yb-avatar--lg { --av: 40px; }
.yb-avatar--xl { --av: 56px; }
.yb-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 图块 Tile：浅色底 + 黑色线性图标，用于产品 / 指标 ---------- */
.yb-tile {
  --tile: 32px;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--tile);
  height: var(--tile);
  border-radius: calc(var(--tile) * .3);
  background: var(--tile-bg, var(--c-fill-1));
  color: var(--c-icon);
}
.yb-tile > .yb-icon { width: calc(var(--tile) * .56); height: calc(var(--tile) * .56); }
.tone-ink    { --tile-bg: var(--c-gray-100); }
.tone-amber  { --tile-bg: var(--c-amber-100); }
.tone-sky    { --tile-bg: var(--c-sky-100); }
.tone-violet { --tile-bg: var(--c-violet-100); }
.tone-mint   { --tile-bg: var(--c-mint-100); }

/* ---------- 卡片 Card ---------- */
.yb-card {
  min-width: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
}
.yb-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 18px 20px 0;
}
.yb-card-title { font-size: var(--fs-15); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.yb-card-sub { margin-top: 2px; font-size: var(--fs-13); color: var(--c-text-3); }
.yb-card-body { padding: 16px 20px 20px; }

/* ---------- 链接 Link ---------- */
.yb-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--c-text-2);
  border-radius: var(--r-xs);
  transition: color var(--dur-1);
}
.yb-link:hover { color: var(--c-text-1); }
.yb-link > .yb-icon { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease-out); }
.yb-link:hover > .yb-icon { transform: translateX(2px); }

/* ---------- 空状态 Empty ---------- */
.yb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 24px;
  text-align: center;
}
.yb-empty-icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-bottom: 14px;
  border-radius: 16px;
  background: var(--c-fill-1);
  color: var(--c-icon);
}
.yb-empty-title { font-size: var(--fs-15); font-weight: var(--fw-semibold); }
.yb-empty-desc { max-width: 36em; margin-top: 6px; font-size: var(--fs-13); color: var(--c-text-3); line-height: var(--lh-base); }
.yb-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }

/* ---------- 骨架屏 Skeleton ---------- */
.yb-skeleton {
  display: block;
  border-radius: var(--r-xs);
  background: linear-gradient(90deg, var(--c-gray-100) 25%, var(--c-gray-50) 50%, var(--c-gray-100) 75%);
  background-size: 200% 100%;
  animation: yb-shimmer 1.4s ease-in-out infinite;
}

/* ---------- 涨跌 Trend ---------- */
.yb-trend {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 22px;
  padding: 0 7px 0 5px;
  border-radius: var(--r-full);
  font-family: var(--font-num);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
.yb-trend > .yb-icon { width: 14px; height: 14px; stroke-width: 2; }
.yb-trend.is-up   { color: var(--c-trend-up);   background: var(--c-trend-up-bg); }
.yb-trend.is-down { color: var(--c-trend-down); background: var(--c-trend-down-bg); }

/* ---------- 加载旋转 ---------- */
.yb-spin { animation: yb-spin .8s linear infinite; }

/* ---------- 键位 Kbd ---------- */
.yb-kbd {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid var(--c-border-2);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--c-surface);
  color: var(--c-text-2);
  font-family: var(--font-num);
  font-size: 11px;
  font-weight: var(--fw-medium);
}

/* ---------- 补充 ---------- */
.yb-trend.is-flat { padding: 0 8px; color: var(--c-text-2); background: var(--c-fill-1); }
.yb-icon-btn.is-spinning > .yb-icon { animation: yb-spin .8s linear infinite; }
.yb-btn > .yb-icon.is-trailing { margin: 0 -4px 0 0; }
.yb-option > .yb-icon:not(.yb-option-check) { width: 18px; height: 18px; color: var(--c-icon); }
.yb-tooltip-kbd {
  margin-left: 8px;
  color: rgba(255, 255, 255, .56);
  font-family: var(--font-num);
  letter-spacing: .04em;
}
.yb-code {
  padding: 1px 6px;
  border-radius: var(--r-xs);
  background: var(--c-fill-1);
  color: var(--c-text-1);
  font-family: var(--font-mono);
  font-size: 12px;
}

/* ---------- 纸艺插画 Paper：呼应 Logo 的层叠纸艺，用于空状态与引导页 ---------- */
.yb-paper { display: block; width: var(--paper-size, 180px); height: auto; overflow: visible; }
.yb-paper .p-shade { fill: rgba(30, 43, 64, .06); }
.yb-paper .p-layer { stroke: #fff; stroke-width: 1.5; }
.yb-paper .p-1 { fill: var(--c-sky-100); }
.yb-paper .p-2 { fill: #E8F2FD; }
.yb-paper .p-3 { fill: var(--c-amber-50); }
.yb-paper .p-4 { fill: var(--c-amber-100); }
.yb-paper .p-5 { fill: #FFD873; }
.yb-paper .p-core { fill: #fff; stroke: var(--c-brand-ink); stroke-width: 2.5; }
.yb-paper .p-icon { color: var(--c-brand-ink); }

/* ---------- 跳到主要内容（键盘用户） ---------- */
.skip-link {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 200;
  padding: 8px 14px;
  border-radius: var(--r-md);
  background: var(--c-primary);
  color: #fff;
  font-size: var(--fs-13);
  transform: translateY(-160%);
  transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

/* ---------- 对话框变体 ---------- */
/* 表单对话框：标题与底部按钮固定，中间内容滚动 */
.yb-modal--form { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.yb-modal--form .yb-modal-title { flex: none; padding: 22px 56px 0 24px; }
.yb-modal--form .yb-modal-body {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 18px 24px 24px;
  overflow: auto;
  overscroll-behavior: contain;
  color: var(--c-text-1);
}
.yb-modal--form .yb-modal-foot { flex: none; margin: 0; padding: 14px 24px; border-top: 1px solid var(--c-divider); }

/* 手机端：sheet 对话框从底部升起 */
@media (max-width: 639px) {
  .yb-modal-root.is-sheet { place-items: end stretch; padding: 0; }
  .yb-modal-root.is-sheet .yb-modal {
    width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: var(--r-2xl) var(--r-2xl) 0 0;
    transform: translateY(100%);
    transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-out);
  }
  .yb-modal-root.is-sheet.is-open .yb-modal { transform: none; }
  .yb-modal-root.is-sheet .yb-modal-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .yb-modal--form .yb-modal-title { padding: 20px 52px 0 20px; }
  .yb-modal--form .yb-modal-body { padding: 16px 20px 20px; }
  .yb-modal--form .yb-modal-foot { padding-left: 20px; padding-right: 20px; }
}

/* ---------- 图片上传位 Upload slots ---------- */
.yb-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.yb-slot {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--c-fill-1);
  outline: none;
}
.yb-slot-empty, .yb-slot-busy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: inherit;
  font-size: var(--fs-12);
  color: var(--c-text-3);
}
.yb-slot-empty {
  width: 100%;
  border: 1.5px dashed var(--c-border-2);
  background: var(--c-gray-25);
  text-align: center;
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), color var(--dur-1);
}
.yb-slot-empty > .yb-icon { width: 22px; height: 22px; color: var(--c-icon); }
.yb-slot-empty:hover { border-color: var(--c-gray-400); background: var(--c-fill-1); color: var(--c-text-2); }
.yb-slot-busy > .yb-icon { width: 22px; height: 22px; color: var(--c-icon); }
.yb-slot img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-3) var(--ease-out); }
.yb-slot img.is-loaded { opacity: 1; }
.yb-slot-index {
  position: absolute;
  top: 8px; left: 8px;
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--r-full);
  background: rgba(23, 26, 31, .62);
  color: #fff;
  font-size: 11px;
  font-weight: var(--fw-semibold);
}
.yb-slot-actions {
  position: absolute;
  right: 8px; bottom: 8px;
  display: flex;
  gap: 6px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.yb-slot:hover .yb-slot-actions, .yb-slot:focus-within .yb-slot-actions { opacity: 1; transform: none; }
.yb-slot-act {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .94);
  color: var(--c-icon);
  box-shadow: 0 1px 3px rgba(23, 26, 31, .16);
  transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.yb-slot-act:hover { background: #fff; }
.yb-slot-act:active { transform: scale(.94); }
.yb-slot-act > .yb-icon { width: 16px; height: 16px; }
.yb-slot.is-dragover .yb-slot-empty,
.is-dragover > .yb-slots .yb-slot-empty { border-color: var(--c-primary); background: var(--c-sky-50); color: var(--c-text-1); }
.yb-slot.is-dragover::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--c-primary);
  border-radius: inherit;
  pointer-events: none;
}
@media (hover: none) {
  .yb-slot-actions { opacity: 1; transform: none; }
}

/* ---------- 文件选择 File picker ---------- */
.yb-file-drop, .yb-file {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 12px 14px;
  border-radius: var(--r-lg);
  text-align: left;
}
.yb-file-drop {
  border: 1.5px dashed var(--c-border-2);
  background: var(--c-gray-25);
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.yb-file-drop:hover { border-color: var(--c-gray-400); background: var(--c-fill-1); }
.is-dragover > .yb-file-drop, .is-dragover .yb-file-drop { border-color: var(--c-primary); background: var(--c-sky-50); }
.yb-file-drop .yb-tile, .yb-file .yb-tile { --tile: 40px; }
.yb-file-drop-text, .yb-file-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.yb-file-drop-text b, .yb-file-name {
  overflow: hidden;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--c-text-1);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.yb-file-drop-text span, .yb-file-size { font-size: var(--fs-12); color: var(--c-text-3); }
.yb-file { border: 1px solid var(--c-border); background: var(--c-surface); padding-right: 8px; }
.yb-file.is-busy { color: var(--c-text-2); }
.yb-file.is-busy > .yb-icon { width: 18px; height: 18px; margin: 0 11px; }
.is-dragover > .yb-file { border-color: var(--c-primary); box-shadow: var(--focus-ring); }