/* ==========================================================================
 * components.css —— 彦禧 OS 通用组件样式
 *
 * 纪律：
 *   - 只消费 CSS 变量（--yx-* 令牌 / --theme-* 品牌注入点）；
 *   - 禁止硬编码色值与 z-index 数字；
 *   - 功能色（success/warning/danger/info）视觉面积 ≤10%，仅用于状态边条/徽标/标签；
 *   - 所有交互过渡 0.2s cubic-bezier(0.4, 0, 0.2, 1)；
 *   - 圆角：卡片 24px / 按钮 12px / 输入框 8px / 标签 999px；
 *   - 间距 4px 倍数。
 * ==========================================================================
 */

/* ---------- 按钮 ----------
 * 4 变体 × 5 态（default / hover / active / disabled / loading）
 */
.yx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--yx-spacing-x2);
  /* FIX-41：按钮高统一 36px（④§1 锁定），padding 0 16px */
  min-height: 36px;
  padding: 0 var(--yx-spacing-x4);
  border-radius: var(--yx-radius-button-pill);
  font-size: var(--yx-font-size-base);
  font-weight: var(--yx-font-weight-medium);
  line-height: var(--yx-lineHeight-tight);
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  position: relative;
}

.yx-btn:disabled,
.yx-btn.is-loading {
  cursor: not-allowed;
  opacity: 0.56;
}

.yx-btn.is-loading::after {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: yx-spin 0.8s linear infinite;
}

@keyframes yx-spin {
  to {
    transform: rotate(360deg);
  }
}

/* primary */
.yx-btn--primary {
  background: var(--theme-primary, var(--yx-color-brand-primary));
  color: var(--yx-color-brand-on-primary);
  box-shadow: var(--yx-shadow-button);
}

.yx-btn--primary:hover:not(:disabled):not(.is-loading) {
  background: var(--theme-primary-hover, var(--yx-color-brand-primary-hover));
}

.yx-btn--primary:active:not(:disabled):not(.is-loading) {
  background: var(--theme-primary-active, var(--yx-color-brand-primary-active));
}

/* secondary */
.yx-btn--secondary {
  background: var(--yx-color-bg-card);
  color: var(--yx-color-text-primary);
  border-color: var(--yx-color-border-default);
}

.yx-btn--secondary:hover:not(:disabled):not(.is-loading) {
  background: var(--yx-color-bg-subtle);
  border-color: var(--yx-color-border-strong);
}

.yx-btn--secondary:active:not(:disabled):not(.is-loading) {
  background: var(--yx-color-brand-primary-subtle);
}

/* ghost */
.yx-btn--ghost {
  background: transparent;
  color: var(--yx-color-text-secondary);
  border-color: transparent;
}

.yx-btn--ghost:hover:not(:disabled):not(.is-loading) {
  background: var(--yx-color-bg-subtle);
  color: var(--yx-color-text-primary);
}

.yx-btn--ghost:active:not(:disabled):not(.is-loading) {
  background: var(--yx-color-brand-primary-subtle);
  color: var(--yx-color-brand-primary);
}

/* text */
.yx-btn--text {
  background: transparent;
  color: var(--theme-primary, var(--yx-color-brand-primary));
  padding-left: var(--yx-spacing-x2);
  padding-right: var(--yx-spacing-x2);
}

.yx-btn--text:hover:not(:disabled):not(.is-loading) {
  background: var(--theme-primary-subtle, var(--yx-color-brand-primary-subtle));
}

.yx-btn--text:active:not(:disabled):not(.is-loading) {
  opacity: 0.8;
}

/* 尺寸 */
.yx-btn--sm {
  /* 小按钮不继承 .yx-btn 的 36px 最小高，保持紧凑 */
  min-height: 0;
  padding: var(--yx-spacing-x1) var(--yx-spacing-x3);
  font-size: var(--yx-font-size-sm);
}
.yx-btn--lg {
  padding: var(--yx-spacing-x3) var(--yx-spacing-x5);
  font-size: var(--yx-font-size-lg);
}

.yx-btn--pill {
  border-radius: var(--yx-radius-button-pill);
}

/* ---------- 状态点 ---------- */
.yx-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ---------- 输入框 ----------
 * 4 态：default / hover / focus / disabled / error
 */
.yx-input,
.yx-textarea {
  width: 100%;
  padding: var(--yx-spacing-x2) var(--yx-spacing-x3);
  border: 1px solid var(--yx-color-border-default);
  border-radius: var(--yx-radius-input);
  background: var(--yx-color-bg-card);
  color: var(--yx-color-text-primary);
  font-size: var(--yx-font-size-base);
  line-height: var(--yx-lineHeight-base);
  outline: none;
}

/* FIX-41：单行输入框（含 select.yx-input）高统一 36px（④§2 锁定）；
   textarea 保持自适应高度 */
.yx-input {
  height: 36px;
}

.yx-input::placeholder,
.yx-textarea::placeholder {
  color: var(--yx-color-text-disabled);
}

.yx-input:hover:not(:disabled):not(.is-error),
.yx-textarea:hover:not(:disabled):not(.is-error) {
  border-color: var(--yx-color-border-strong);
}

.yx-input:focus:not(:disabled):not(.is-error),
.yx-textarea:focus:not(:disabled):not(.is-error) {
  border-color: var(--theme-primary, var(--yx-color-brand-primary));
  box-shadow: 0 0 0 3px
    var(--theme-primary-subtle, var(--yx-color-brand-primary-subtle));
}

.yx-input:disabled,
.yx-textarea:disabled {
  background: var(--yx-color-bg-subtle);
  color: var(--yx-color-text-disabled);
  cursor: not-allowed;
}

.yx-input.is-error,
.yx-textarea.is-error,
.yx-select.is-error .yx-select__trigger {
  border-color: var(--yx-color-functional-danger-solid);
}

.yx-input.is-error:focus,
.yx-textarea.is-error:focus,
.yx-select.is-error .yx-select__trigger:focus {
  box-shadow: 0 0 0 3px var(--yx-color-functional-danger-subtle);
}

.yx-field__error {
  margin-top: var(--yx-spacing-x1);
  font-size: var(--yx-font-size-xs);
  color: var(--yx-color-functional-danger-solid);
}

/* ---------- 下拉选择器 ---------- */
.yx-select {
  position: relative;
  display: inline-block;
  width: 100%;
}

.yx-select__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--yx-spacing-x2);
  /* FIX-41：触发框与输入框同构，高 36px（④§3.1 锁定） */
  height: 36px;
  padding: 0 var(--yx-spacing-x3);
  border: 1px solid var(--yx-color-border-default);
  border-radius: var(--yx-radius-input);
  background: var(--yx-color-bg-card);
  color: var(--yx-color-text-primary);
  font-size: var(--yx-font-size-base);
  cursor: pointer;
  outline: none;
}

.yx-select__trigger:hover {
  border-color: var(--yx-color-border-strong);
}

.yx-select__trigger:focus {
  border-color: var(--theme-primary, var(--yx-color-brand-primary));
  box-shadow: 0 0 0 3px
    var(--theme-primary-subtle, var(--yx-color-brand-primary-subtle));
}

.yx-select__trigger.is-open .yx-select__arrow {
  transform: rotate(180deg);
}

.yx-select__options {
  position: absolute;
  top: calc(100% + var(--yx-spacing-x1));
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  padding: var(--yx-spacing-x1);
  background: var(--yx-glass-bg-strong);
  -webkit-backdrop-filter: var(--yx-glass-backdrop);
  backdrop-filter: var(--yx-glass-backdrop);
  border: 1px solid var(--yx-glass-border);
  border-radius: var(--yx-radius-button);
  box-shadow: var(--yx-shadow-dropdown);
  z-index: var(--yx-zIndex-dropdown);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.yx-select__trigger.is-open + .yx-select__options,
.yx-select.is-open .yx-select__options {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.yx-select__option {
  padding: var(--yx-spacing-x2) var(--yx-spacing-x3);
  border-radius: var(--yx-radius-input);
  font-size: var(--yx-font-size-sm);
  color: var(--yx-color-text-secondary);
  cursor: pointer;
}

.yx-select__option:hover {
  background: var(--yx-color-bg-subtle);
  color: var(--yx-color-text-primary);
}

.yx-select__option.is-selected {
  background: var(--yx-color-brand-primary-subtle);
  color: var(--yx-color-brand-primary);
  font-weight: var(--yx-font-weight-medium);
}

.yx-select__option.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---------- 表格 ---------- */
.yx-table-wrap {
  width: 100%;
  overflow-x: auto;
  background: var(--yx-color-bg-card);
  border: 1px solid var(--yx-color-border-card, var(--yx-color-border-default));
  border-radius: var(--yx-radius-card);
  box-shadow: var(--yx-shadow-card);
}

.yx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--yx-font-size-sm);
  color: var(--yx-color-text-secondary);
}

.yx-table th,
.yx-table td {
  padding: var(--yx-spacing-x3) var(--yx-spacing-x4);
  text-align: left;
  border-bottom: 1px solid var(--yx-color-border-default);
}

.yx-table th {
  font-weight: var(--yx-font-weight-semibold);
  color: var(--yx-color-text-primary);
  background: var(--yx-color-bg-subtle);
}

.yx-table tbody tr:last-child td {
  border-bottom: none;
}

.yx-table tbody tr:hover td {
  background: var(--yx-color-bg-subtle);
}

.yx-table__empty {
  padding: var(--yx-spacing-x8) var(--yx-spacing-x4);
  text-align: center;
  color: var(--yx-color-text-tertiary);
}

/* 骨架屏 */
.yx-skeleton {
  display: inline-block;
  background: var(--yx-color-bg-subtle);
  border-radius: var(--yx-radius-input);
  animation: yx-skeleton-breathe 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes yx-skeleton-breathe {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

.yx-skeleton--text {
  height: 1em;
  width: 100%;
}
.yx-skeleton--title {
  height: 1.25em;
  width: 40%;
}
.yx-skeleton--avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.yx-skeleton--button {
  height: 36px;
  width: 96px;
  border-radius: var(--yx-radius-button);
}

/* ---------- 卡片（统一毛玻璃，v0.4.2） ---------- */
.yx-card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: var(--card-radius);
  box-shadow: var(--glass-shadow);
  padding: var(--yx-spacing-x6);
}

.yx-card--flat {
  background: var(--yx-color-bg-card);
  border: 1px solid var(--yx-color-border-card, var(--yx-color-border-default));
  box-shadow: none;
}

.yx-card--hover:hover {
  box-shadow: var(--yx-shadow-card-hover);
}

/* ---------- Tab ---------- */
.yx-tabs {
  display: flex;
  align-items: center;
  gap: var(--yx-spacing-x1);
  width: fit-content;
}

/* pill */
.yx-tabs--pill {
  padding: var(--yx-spacing-x1);
  background: var(--yx-color-bg-card);
  border: 1px solid var(--yx-color-border-card, var(--yx-color-border-default));
  border-radius: var(--yx-radius-button);
}

.yx-tabs--pill .yx-tabs__tab {
  padding: var(--yx-spacing-x2) var(--yx-spacing-x4);
  border-radius: var(--yx-radius-input);
  font-size: var(--yx-font-size-sm);
  color: var(--yx-color-text-secondary);
  cursor: pointer;
}

.yx-tabs--pill .yx-tabs__tab:hover {
  background: var(--yx-color-bg-subtle);
  color: var(--yx-color-text-primary);
}

.yx-tabs--pill .yx-tabs__tab.is-active {
  background: var(--yx-color-brand-primary-subtle);
  color: var(--yx-color-brand-primary);
  font-weight: var(--yx-font-weight-medium);
}

/* line */
.yx-tabs--line {
  border-bottom: 1px solid var(--yx-color-border-default);
}

.yx-tabs--line .yx-tabs__tab {
  position: relative;
  padding: var(--yx-spacing-x2) var(--yx-spacing-x4);
  font-size: var(--yx-font-size-sm);
  color: var(--yx-color-text-secondary);
  cursor: pointer;
}

.yx-tabs--line .yx-tabs__tab:hover {
  color: var(--yx-color-text-primary);
}

.yx-tabs--line .yx-tabs__tab.is-active {
  color: var(--yx-color-brand-primary);
  font-weight: var(--yx-font-weight-medium);
}

.yx-tabs--line .yx-tabs__tab.is-active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: var(--yx-spacing-x3);
  right: var(--yx-spacing-x3);
  height: 2px;
  background: var(--yx-color-brand-primary);
  border-radius: 999px;
}

/* ---------- 弹窗 ---------- */
.yx-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--yx-color-bg-overlay);
  z-index: var(--yx-zIndex-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--yx-spacing-x4);
  opacity: 0;
  visibility: hidden;
}

.yx-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.yx-modal {
  width: 100%;
  max-width: 420px;
  background: var(--yx-glass-bg-strong);
  -webkit-backdrop-filter: var(--yx-glass-backdrop);
  backdrop-filter: var(--yx-glass-backdrop);
  border: 1px solid var(--yx-glass-border);
  border-radius: var(--yx-radius-modal);
  box-shadow: var(--yx-shadow-modal);
  padding: var(--yx-spacing-x6);
  transform: scale(0.96);
}

.yx-modal-overlay.is-open .yx-modal {
  transform: scale(1);
}

.yx-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--yx-spacing-x4);
}

.yx-modal__title {
  margin: 0;
  font-size: var(--yx-font-size-lg);
  font-weight: var(--yx-font-weight-semibold);
}

.yx-modal__close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--yx-radius-button);
  color: var(--yx-color-text-tertiary);
}

.yx-modal__close:hover {
  background: var(--yx-color-bg-subtle);
  color: var(--yx-color-text-primary);
}

.yx-modal__body {
  color: var(--yx-color-text-secondary);
  font-size: var(--yx-font-size-base);
  line-height: var(--yx-lineHeight-loose);
}

.yx-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--yx-spacing-x3);
  margin-top: var(--yx-spacing-x5);
}

.yx-modal--confirm .yx-modal__body {
  display: flex;
  align-items: flex-start;
  gap: var(--yx-spacing-x3);
}

.yx-modal__icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--yx-color-functional-warning-subtle);
  color: var(--yx-color-functional-warning-solid);
}

/* 抽屉 */
.yx-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 480px;
  background: var(--yx-glass-bg-strong);
  -webkit-backdrop-filter: var(--yx-glass-backdrop);
  backdrop-filter: var(--yx-glass-backdrop);
  border-left: 1px solid var(--yx-glass-border);
  box-shadow: var(--yx-shadow-modal);
  z-index: var(--yx-zIndex-modal);
  padding: var(--yx-spacing-x6);
  transform: translateX(100%);
}

.yx-drawer.is-open {
  transform: translateX(0);
}

/* ---------- Toast ---------- */
.yx-toast-container {
  position: fixed;
  top: var(--yx-spacing-x4);
  right: var(--yx-spacing-x4);
  display: flex;
  flex-direction: column;
  gap: var(--yx-spacing-x2);
  z-index: var(--yx-zIndex-toast);
  pointer-events: none;
}

.yx-toast {
  pointer-events: auto;
  min-width: 200px;
  max-width: 320px;
  padding: var(--yx-spacing-x3) var(--yx-spacing-x4);
  border-radius: var(--yx-radius-button);
  background: var(--yx-glass-bg-strong);
  -webkit-backdrop-filter: var(--yx-glass-backdrop);
  backdrop-filter: var(--yx-glass-backdrop);
  border: 1px solid var(--yx-glass-border);
  box-shadow: var(--yx-shadow-dropdown);
  font-size: var(--yx-font-size-base);
}

.yx-toast--success {
  border-left: 3px solid var(--yx-color-functional-success-solid);
}
.yx-toast--warning {
  border-left: 3px solid var(--yx-color-functional-warning-solid);
}
.yx-toast--danger {
  border-left: 3px solid var(--yx-color-functional-danger-solid);
}
.yx-toast--info {
  border-left: 3px solid var(--yx-color-functional-info-solid);
}

/* ---------- Badge ---------- */
.yx-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--yx-spacing-x1);
  border-radius: 12px;
  background: var(--yx-color-functional-danger-subtle);
  color: var(--yx-color-functional-danger-solid);
  font-size: 10px;
  font-weight: var(--yx-font-weight-semibold);
  line-height: 1;
}

.yx-badge--dot {
  width: 8px;
  height: 8px;
  min-width: auto;
  padding: 0;
  border-radius: 50%;
  background: var(--yx-color-functional-danger-solid);
}

.yx-badge--success {
  background: var(--yx-color-functional-success-subtle);
  color: var(--yx-color-functional-success-solid);
}
.yx-badge--warning {
  background: var(--yx-color-functional-warning-subtle);
  color: var(--yx-color-functional-warning-solid);
}
.yx-badge--info {
  background: var(--yx-color-functional-info-subtle);
  color: var(--yx-color-functional-info-solid);
}

.yx-topbar__action .yx-badge {
  position: absolute;
  top: -2px;
  right: -2px;
}

/* ---------- 消息铃铛下拉窗 ---------- */
.yx-topbar__notice-wrap {
  position: relative;
}

.yx-notice-panel {
  position: absolute;
  top: calc(100% + var(--yx-spacing-x2));
  right: 0;
  width: 320px;
  max-height: 70vh;
  overflow-y: auto;
  padding: var(--yx-spacing-x2);
  background: var(--yx-glass-bg-strong);
  -webkit-backdrop-filter: var(--yx-glass-backdrop);
  backdrop-filter: var(--yx-glass-backdrop);
  border: 1px solid var(--yx-glass-border);
  border-radius: var(--yx-radius-button);
  box-shadow: var(--yx-shadow-dropdown);
  z-index: var(--yx-zIndex-dropdown);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.yx-notice-panel.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.yx-notice-panel__section {
  display: flex;
  flex-direction: column;
  gap: var(--yx-spacing-x1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.yx-notice-panel__divider {
  height: 1px;
  margin: var(--yx-spacing-x2) 0;
  background: var(--yx-color-border-default);
}

.yx-notice-panel__item {
  display: flex;
  align-items: flex-start;
  gap: var(--yx-spacing-x2);
  padding: var(--yx-spacing-x2) var(--yx-spacing-x3);
  border-radius: var(--yx-radius-input);
  cursor: pointer;
  color: var(--yx-color-text-secondary);
}

.yx-notice-panel__item:hover {
  background: var(--yx-color-bg-subtle);
  color: var(--yx-color-text-primary);
}

.yx-notice-panel__item--strong .yx-notice-panel__title {
  font-weight: var(--yx-font-weight-semibold);
  color: var(--yx-color-text-primary);
}

.yx-notice-panel__dot {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.yx-notice-panel__dot--strong {
  background: var(--yx-color-functional-danger-solid);
}

.yx-notice-panel__dot--weak {
  background: var(--yx-color-functional-warning-solid);
}

.yx-notice-panel__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--yx-spacing-x1);
}

.yx-notice-panel__title {
  margin: 0;
  font-size: var(--yx-font-size-sm);
  line-height: var(--yx-lineHeight-tight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yx-notice-panel__meta {
  margin: 0;
  font-size: var(--yx-font-size-xs);
  color: var(--yx-color-text-tertiary);
  line-height: var(--yx-lineHeight-tight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yx-notice-panel__empty {
  margin: 0;
  padding: var(--yx-spacing-x6) var(--yx-spacing-x4);
  text-align: center;
  font-size: var(--yx-font-size-sm);
  color: var(--yx-color-text-tertiary);
}

.yx-notice-panel__footer {
  display: block;
  padding: var(--yx-spacing-x2) var(--yx-spacing-x3);
  margin-top: var(--yx-spacing-x1);
  border-radius: var(--yx-radius-input);
  text-align: center;
  font-size: var(--yx-font-size-sm);
  color: var(--theme-primary, var(--yx-color-brand-primary));
}

.yx-notice-panel__footer:hover {
  background: var(--yx-color-bg-subtle);
}

/* ---------- v0.7.2 MSG-01：铃铛「公告｜全部」标签 + 小喇叭浮层 ---------- */
.yx-notice-panel__tabs {
  display: flex;
  gap: var(--yx-spacing-x1);
  padding: var(--yx-spacing-x1);
  margin-bottom: var(--yx-spacing-x1);
  border-radius: var(--yx-radius-input);
  background: var(--yx-color-bg-subtle);
}

.yx-notice-panel__tab {
  flex: 1 1 0;
  padding: var(--yx-spacing-x1) var(--yx-spacing-x2);
  border: none;
  border-radius: var(--yx-radius-input);
  background: transparent;
  font-size: var(--yx-font-size-xs);
  color: var(--yx-color-text-secondary);
  cursor: pointer;
}

.yx-notice-panel__tab.is-active {
  background: var(--yx-color-bg-card);
  color: var(--yx-color-text-primary);
  font-weight: var(--yx-font-weight-medium);
}

/* 公告类消息标题前的 📢 图标 */
.yx-notice-panel__ann-icon {
  display: inline-flex;
  vertical-align: -2px;
  margin-right: var(--yx-spacing-x1);
  color: var(--theme-primary, var(--yx-color-brand-primary));
}

/* ---------- v0.7.2 MSG-01：公告详情弹窗 ---------- */
.yx-announcement-revoked {
  margin: 0 0 var(--yx-spacing-x2);
}

.yx-announcement-meta {
  margin: 0 0 var(--yx-spacing-x3);
  font-size: var(--yx-font-size-xs);
  color: var(--yx-color-text-tertiary);
}

.yx-announcement-body {
  font-size: var(--yx-font-size-sm);
  color: var(--yx-color-text-primary);
  line-height: var(--yx-lineHeight-base);
  word-break: break-word;
}

.yx-announcement-body img {
  max-width: 100%;
}

/* ---------- 标签 ---------- */
.yx-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--yx-spacing-x1);
  padding: var(--yx-spacing-x1) var(--yx-spacing-x2);
  border-radius: 12px;
  font-size: var(--yx-font-size-xs);
  font-weight: var(--yx-font-weight-medium);
}

.yx-tag--default {
  background: var(--yx-color-bg-subtle);
  color: var(--yx-color-text-secondary);
}
.yx-tag--success {
  background: var(--yx-color-functional-success-subtle);
  color: var(--yx-color-functional-success-solid);
}
.yx-tag--warning {
  background: var(--yx-color-functional-warning-subtle);
  color: var(--yx-color-functional-warning-solid);
}
.yx-tag--danger {
  background: var(--yx-color-functional-danger-subtle);
  color: var(--yx-color-functional-danger-solid);
}
.yx-tag--info {
  background: var(--yx-color-functional-info-subtle);
  color: var(--yx-color-functional-info-solid);
}

/* ---------- 状态圆点（FIX-90：卡片面板状态标签点状化 + CSS Tooltip） ---------- */
.yx-status-dot {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.yx-status-dot--success {
  background: var(--yx-color-functional-success-solid);
}
.yx-status-dot--info {
  background: var(--yx-color-functional-info-solid);
}
.yx-status-dot--warning {
  background: var(--yx-color-functional-warning-solid);
}
.yx-status-dot::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  padding: var(--yx-spacing-x1) var(--yx-spacing-x2);
  border-radius: var(--yx-radius-button);
  background: var(--yx-color-bg-card);
  border: 1px solid var(--yx-color-border-default);
  box-shadow: var(--yx-shadow-dropdown);
  font-size: var(--yx-font-size-xs);
  color: var(--yx-color-text-primary);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--yx-motion-duration-fast)
    var(--yx-motion-easing-standard);
  pointer-events: none;
  z-index: 30;
}
.yx-status-dot:hover::after {
  opacity: 1;
  visibility: visible;
}

/* ---------- 过渡统一 ---------- */
.yx-motion-ready .yx-btn,
.yx-motion-ready .yx-input,
.yx-motion-ready .yx-textarea,
.yx-motion-ready .yx-select__trigger,
.yx-motion-ready .yx-select__option,
.yx-motion-ready .yx-card,
.yx-motion-ready .yx-table tbody tr,
.yx-motion-ready .yx-tabs__tab,
.yx-motion-ready .yx-modal,
.yx-motion-ready .yx-drawer,
.yx-motion-ready .yx-tag,
.yx-motion-ready .yx-notice-panel,
.yx-motion-ready .yx-notice-panel__item,
.yx-motion-ready .yx-notice-panel__footer {
  transition:
    background var(--yx-motion-duration-base) var(--yx-motion-easing-standard),
    color var(--yx-motion-duration-base) var(--yx-motion-easing-standard),
    border-color var(--yx-motion-duration-base) var(--yx-motion-easing-standard),
    box-shadow var(--yx-motion-duration-base) var(--yx-motion-easing-standard),
    transform var(--yx-motion-duration-base) var(--yx-motion-easing-standard),
    opacity var(--yx-motion-duration-base) var(--yx-motion-easing-standard);
}

/* ---------- 反馈浮窗 ---------- */
.yx-feedback-float {
  position: fixed;
  right: var(--yx-spacing-x6);
  bottom: var(--yx-spacing-x6);
  /* 层级说明：modal(1200) 高于抽屉遮罩 overlay(1100)，抽屉面板本身在遮罩的
     层叠上下文内，因此浮窗始终可见；打开抽屉时靠下方左移规则避让，
     保证抽屉 footer 的「提交」按钮不被遮挡。 */
  z-index: var(--yx-zIndex-modal);
  transition: right 0.2s var(--yx-motion-easing-standard);
}

/* 抽屉/对话面板打开期间：左移到面板左缘外侧。
   面板为 width:100% + max-width:420px（.yx-feedback-drawer / .yx-feedback-chat），
   故位移量取 min(420px, 100vw)。 */
body.yx-feedback-drawer-open .yx-feedback-float,
body.yx-feedback-chat-open .yx-feedback-float {
  right: calc(min(420px, 100vw) + var(--yx-spacing-x6));
}

/* 截屏期间临时隐藏，避免 getDisplayMedia 选「整个屏幕」时把按钮截入画面 */
.yx-feedback-float--hidden {
  display: none;
}

/* 「截取屏幕」按钮（反馈抽屉图片区，与上传入口并列） */
.yx-feedback-capture-btn {
  margin-top: var(--yx-spacing-x2);
}

.yx-feedback-float__btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--theme-primary, var(--yx-color-brand-primary));
  color: var(--yx-color-brand-on-primary);
  box-shadow: var(--yx-shadow-button);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s var(--yx-motion-easing-standard), box-shadow 0.2s var(--yx-motion-easing-standard);
}

.yx-feedback-float__btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--yx-shadow-card-hover);
}

.yx-feedback-float__btn svg {
  width: 24px;
  height: 24px;
}

.yx-feedback-form__fields {
  display: flex;
  flex-direction: column;
  gap: var(--yx-spacing-x4);
}

/* 反馈表单右侧滑出抽屉（复用 .yx-drawer 定位与动画） */
.yx-feedback-drawer {
  max-width: 420px;
  display: flex;
  flex-direction: column;
}

.yx-feedback-drawer .yx-modal__body {
  flex: 1;
  overflow-y: auto;
}

.yx-feedback-drawer__footer {
  margin-top: var(--yx-spacing-x5);
}

.yx-feedback-form__type-group {
  display: flex;
  gap: var(--yx-spacing-x3);
}

.yx-feedback-form__type-option {
  flex: 1;
  padding: var(--yx-spacing-x3);
  border: 1px solid var(--yx-color-border-default);
  border-radius: var(--yx-radius-button);
  text-align: center;
  cursor: pointer;
  color: var(--yx-color-text-secondary);
}

.yx-feedback-form__type-option.is-selected {
  border-color: var(--theme-primary, var(--yx-color-brand-primary));
  background: var(--theme-primary-subtle, var(--yx-color-brand-primary-subtle));
  color: var(--theme-primary, var(--yx-color-brand-primary));
  font-weight: var(--yx-font-weight-medium);
}

.yx-feedback-uploads {
  display: flex;
  flex-wrap: wrap;
  gap: var(--yx-spacing-x3);
}

.yx-feedback-upload__thumb {
  width: 80px;
  height: 80px;
  border-radius: var(--yx-radius-input);
  border: 1px dashed var(--yx-color-border-default);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  background: var(--yx-color-bg-card);
}

.yx-feedback-upload__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yx-feedback-upload__remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--yx-color-functional-danger-solid);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
}

.yx-feedback-upload__add {
  width: 80px;
  height: 80px;
  border-radius: var(--yx-radius-input);
  border: 1px dashed var(--yx-color-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--yx-color-text-tertiary);
  cursor: pointer;
}

.yx-feedback-upload__add:hover {
  border-color: var(--theme-primary, var(--yx-color-brand-primary));
  color: var(--theme-primary, var(--yx-color-brand-primary));
}

.yx-feedback-list__meta {
  display: flex;
  align-items: center;
  gap: var(--yx-spacing-x2);
  margin-top: var(--yx-spacing-x2);
  font-size: var(--yx-font-size-sm);
  color: var(--yx-color-text-tertiary);
}

.yx-feedback-status {
  display: inline-flex;
  align-items: center;
  gap: var(--yx-spacing-x1);
  padding: var(--yx-spacing-x1) var(--yx-spacing-x2);
  border-radius: 12px;
  font-size: var(--yx-font-size-xs);
  font-weight: var(--yx-font-weight-medium);
}

.yx-feedback-status--submitted { background: var(--yx-color-bg-subtle); color: var(--yx-color-text-secondary); }
.yx-feedback-status--collected { background: var(--yx-color-functional-info-subtle); color: var(--yx-color-functional-info-solid); }
.yx-feedback-status--planned { background: var(--yx-color-functional-warning-subtle); color: var(--yx-color-functional-warning-solid); }
.yx-feedback-status--pending_schedule { background: var(--yx-color-functional-warning-subtle); color: var(--yx-color-functional-warning-solid); }
.yx-feedback-status--scheduled { background: var(--yx-color-functional-success-subtle); color: var(--yx-color-functional-success-solid); }
.yx-feedback-status--released { background: var(--yx-color-functional-success-subtle); color: var(--yx-color-functional-success-solid); }
.yx-feedback-status--deferred { background: var(--yx-color-bg-subtle); color: var(--yx-color-text-tertiary); }
.yx-feedback-status--rejected { background: var(--yx-color-functional-danger-subtle); color: var(--yx-color-functional-danger-solid); }

.yx-feedback-admin__toolbar {
  display: flex;
  align-items: center;
  gap: var(--yx-spacing-x3);
  margin-bottom: var(--yx-spacing-x5);
  flex-wrap: wrap;
}

.yx-feedback-admin__toolbar .yx-input,
.yx-feedback-admin__toolbar .yx-select {
  width: 180px;
}

.yx-feedback-detail__remark {
  margin-top: var(--yx-spacing-x4);
  padding: var(--yx-spacing-x3);
  border-radius: var(--yx-radius-input);
  background: var(--yx-color-bg-subtle);
  font-size: var(--yx-font-size-sm);
  color: var(--yx-color-text-secondary);
}

.yx-feedback-detail__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--yx-spacing-x3);
  margin-top: var(--yx-spacing-x3);
}

.yx-feedback-detail__attachments img {
  width: 80px;
  height: 80px;
  border-radius: var(--yx-radius-input);
  object-fit: cover;
  border: 1px solid var(--yx-color-border-default);
}

.yx-feedback-detail__attachments a {
  display: inline-flex;
  align-items: center;
  gap: var(--yx-spacing-x1);
  padding: var(--yx-spacing-x2) var(--yx-spacing-x3);
  border-radius: var(--yx-radius-button);
  background: var(--yx-color-bg-subtle);
  font-size: var(--yx-font-size-sm);
  color: var(--yx-color-text-secondary);
}

.yx-feedback-detail__attachments a:hover {
  background: var(--yx-color-bg-card);
  color: var(--yx-color-text-primary);
}

/* 开发中菜单角标（status=dev，v0.3.1） */
.yx-nav__dev-badge {
  margin-left: auto;
  font-size: 10px;
  line-height: 1;
  filter: grayscale(20%);
  opacity: 0.85;
}

.yx-nav__dev-badge--pending {
  color: var(--yx-color-text-placeholder, #c0c4cc);
  opacity: 0.9;
}

/* ==========================================================================
 * 卡片面板（v0.3.0 交互重构：左侧菜单驱动右侧内容区）
 * ==========================================================================
 */
.yx-card-panel {
  padding: 4px 0 24px;
}

.yx-card-panel__title {
  margin: 8px 0 16px;
  font-size: 20px;
  font-weight: 600;
  color: var(--yx-color-text-primary, #1f2329);
}

.yx-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.yx-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 12px 18px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: var(--card-radius);
  text-decoration: none;
  color: var(--yx-color-text-primary, #1f2329);
  transition:
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

/* v0.7.0-dev2 走查修复（问题2.1/3.1）：本文件 .yx-card 的 display:flex
 * 属作者样式，会压过 UA 的 [hidden]{display:none}，导致日程三 Tab
 * 切换时带 hidden 的 .yx-card 视图不隐藏；显式补回 hidden 语义。 */
.yx-card[hidden] {
  display: none;
}

.yx-card:hover {
  box-shadow: var(--yx-shadow-card-hover);
  transform: translateY(-2px);
}

.yx-card__icon {
  color: var(--theme-primary);
  display: inline-flex;
}

.yx-card__icon .yx-nav__icon {
  width: 32px;
  height: 32px;
}

.yx-card__name {
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

/* 卡片 badge 角标（v0.7.0-dev5（5.2.10）：「已废弃」/版本标记） */
.yx-card__badge {
  margin-top: calc(-1 * var(--yx-spacing-x1));
}

.yx-card--disabled {
  opacity: 0.45;
  pointer-events: none;
  cursor: default;
}

.yx-card--disabled:hover {
  box-shadow: none;
  transform: none;
}