/* tooltip.css — extracted from tooltip.html */
/* Tooltip.css */
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip__content {
  position: absolute;
  z-index: var(--z-tooltip, 1000);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-text);
  color: var(--color-text-inverse);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-fast) var(--ease-default),
              visibility var(--duration-fast) var(--ease-default),
              transform var(--duration-fast) var(--ease-default);
  pointer-events: none;
}

/* 箭头 */
.tooltip__content::after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 6px;
}

/* 顶部方向 */
.tooltip--top .tooltip__content {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  margin-bottom: 8px;
}

.tooltip--top .tooltip__content::after {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-color: var(--color-text) transparent transparent transparent;
}

.tooltip--top:hover .tooltip__content,
.tooltip--top:focus-within .tooltip__content {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* 底部方向 */
.tooltip--bottom .tooltip__content {
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  margin-top: 8px;
}

.tooltip--bottom .tooltip__content::after {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-color: transparent transparent var(--color-text) transparent;
}

.tooltip--bottom:hover .tooltip__content,
.tooltip--bottom:focus-within .tooltip__content {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* 左侧方向 */
.tooltip--left .tooltip__content {
  right: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  margin-right: 8px;
}

.tooltip--left .tooltip__content::after {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-color: transparent transparent transparent var(--color-text);
}

.tooltip--left:hover .tooltip__content,
.tooltip--left:focus-within .tooltip__content {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* 右侧方向 */
.tooltip--right .tooltip__content {
  left: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(-8px);
  margin-left: 8px;
}

.tooltip--right .tooltip__content::after {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-color: transparent var(--color-text) transparent transparent;
}

.tooltip--right:hover .tooltip__content,
.tooltip--right:focus-within .tooltip__content {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* 触发元素 */
.tooltip__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* 不同颜色变体 */
.tooltip--success .tooltip__content {
  background-color: var(--color-success);
}

.tooltip--success .tooltip__content::after {
  border-color: var(--color-success) transparent transparent transparent;
}

.tooltip--warning .tooltip__content {
  background-color: var(--color-warning);
}

.tooltip--warning .tooltip__content::after {
  border-color: var(--color-warning) transparent transparent transparent;
}

.tooltip--danger .tooltip__content {
  background-color: var(--color-danger);
}

.tooltip--danger .tooltip__content::after {
  border-color: var(--color-danger) transparent transparent transparent;
}

/* 禁用状态 */
.tooltip--disabled {
  pointer-events: none;
}

.tooltip--disabled .tooltip__content {
  display: none;
}

/* 响应式 */
@media (max-width: 640px) {
  .tooltip__content {
    font-size: 10px;
    padding: var(--space-1) var(--space-2);
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}

.btn--md { padding: 10px 22px; font-size: var(--text-base); }

.btn--primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: 0 1px 3px rgba(99, 102, 241, 0.3);
}

.btn--primary:hover {
  background: var(--color-primary-dark);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
  transform: translateY(-1px);
}

.btn--secondary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn--secondary:hover {
  background: var(--color-primary-ghost);
  border-color: var(--color-primary-dark);
}

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

.btn--ghost:hover {
  background: var(--color-bg-muted);
  color: var(--color-text);
}