/* ============================================================
   龙虾老师 · 基础组件样式 v1.0
   组件来源：shadcn/ui结构 + ArcoDesign交互 + TDesignToken
   用法：复制到HTML工具中，通过修改 tokens.css 变量即可切换风格
   ============================================================ */

/* ── 按钮 Button ─────────────────────────────────────────── */
.ld-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--ld-btn-radius);
  font-family: var(--ld-font-sans);
  font-size: var(--ld-btn-font-size);
  font-weight: var(--ld-weight-medium);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: all var(--ld-duration-normal) var(--ld-ease-default);
  text-decoration: none;
  outline: none;
}
.ld-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--ld-primary-ring);
}
.ld-btn:disabled, .ld-btn.ld-btn-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
/* 尺寸 */
.ld-btn-sm { height: var(--ld-btn-height-sm); padding: var(--ld-btn-padding-sm); font-size: 12px; }
.ld-btn-md { height: var(--ld-btn-height-md); padding: var(--ld-btn-padding-md); }
.ld-btn-lg { height: var(--ld-btn-height-lg); padding: var(--ld-btn-padding-lg); font-size: 16px; }
/* 变体 */
.ld-btn-primary {
  background: var(--ld-primary);
  color: var(--ld-text-inverse);
  border-color: var(--ld-primary);
}
.ld-btn-primary:hover { background: var(--ld-primary-hover); border-color: var(--ld-primary-hover); }
.ld-btn-primary:active { background: var(--ld-primary-active); }

.ld-btn-outline {
  background: transparent;
  color: var(--ld-text);
  border-color: var(--ld-border);
}
.ld-btn-outline:hover { background: var(--ld-bg-secondary); border-color: var(--ld-border-strong); }

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

.ld-btn-danger {
  background: var(--ld-error);
  color: var(--ld-text-inverse);
  border-color: var(--ld-error);
}
.ld-btn-danger:hover { background: var(--ld-error-6); }

/* ── 输入框 Input ────────────────────────────────────────── */
.ld-input {
  width: 100%;
  height: var(--ld-input-height);
  padding: var(--ld-input-padding);
  border: 1px solid var(--ld-input-border);
  border-radius: var(--ld-input-radius);
  background: var(--ld-input-bg);
  color: var(--ld-text);
  font-family: var(--ld-font-sans);
  font-size: var(--ld-input-font-size);
  outline: none;
  transition: border-color var(--ld-duration-normal) var(--ld-ease-default),
              box-shadow var(--ld-duration-normal) var(--ld-ease-default);
}
.ld-input::placeholder { color: var(--ld-input-placeholder); }
.ld-input:hover { border-color: var(--ld-border-strong); }
.ld-input:focus {
  border-color: var(--ld-input-border-focus);
  box-shadow: 0 0 0 3px var(--ld-primary-ring);
}
.ld-input:disabled {
  background: var(--ld-input-bg-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}

/* ── Textarea ────────────────────────────────────────────── */
.ld-textarea {
  width: 100%;
  min-height: 80px;
  padding: 8px 12px;
  border: 1px solid var(--ld-input-border);
  border-radius: var(--ld-input-radius);
  background: var(--ld-input-bg);
  color: var(--ld-text);
  font-family: var(--ld-font-sans);
  font-size: var(--ld-input-font-size);
  line-height: var(--ld-leading-normal);
  resize: vertical;
  outline: none;
  transition: border-color var(--ld-duration-normal) var(--ld-ease-default);
}
.ld-textarea::placeholder { color: var(--ld-input-placeholder); }
.ld-textarea:focus {
  border-color: var(--ld-input-border-focus);
  box-shadow: 0 0 0 3px var(--ld-primary-ring);
}

/* ── Select 下拉框 ──────────────────────────────────────── */
.ld-select {
  width: 100%;
  height: var(--ld-input-height);
  padding: 0 32px 0 12px;
  border: 1px solid var(--ld-input-border);
  border-radius: var(--ld-input-radius);
  background: var(--ld-input-bg);
  color: var(--ld-text);
  font-family: var(--ld-font-sans);
  font-size: var(--ld-input-font-size);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23777' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  outline: none;
  transition: border-color var(--ld-duration-normal) var(--ld-ease-default);
}
.ld-select:hover { border-color: var(--ld-border-strong); }
.ld-select:focus {
  border-color: var(--ld-input-border-focus);
  box-shadow: 0 0 0 3px var(--ld-primary-ring);
}

/* ── 卡片 Card ───────────────────────────────────────────── */
.ld-card {
  background: var(--ld-card-bg);
  border: var(--ld-card-border);
  border-radius: var(--ld-card-radius);
  padding: var(--ld-card-padding);
  box-shadow: var(--ld-card-shadow);
  transition: box-shadow var(--ld-duration-normal) var(--ld-ease-default);
}
.ld-card-hover:hover { box-shadow: var(--ld-card-shadow-hover); }

/* ── 标签 Tag / Badge ────────────────────────────────────── */
.ld-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--ld-tag-padding);
  border-radius: var(--ld-tag-radius);
  font-size: var(--ld-tag-font-size);
  font-weight: var(--ld-weight-medium);
  line-height: 1.4;
  white-space: nowrap;
}
.ld-tag-brand  { background: var(--ld-primary-light); color: var(--ld-primary); }
.ld-tag-success { background: var(--ld-success-1); color: var(--ld-success); }
.ld-tag-warning { background: var(--ld-warning-1); color: var(--ld-warning); }
.ld-tag-error   { background: var(--ld-error-1); color: var(--ld-error); }
.ld-tag-info    { background: var(--ld-info-1); color: var(--ld-info); }
.ld-tag-neutral { background: var(--ld-bg-muted); color: var(--ld-text-secondary); }

/* ── 表格 Table（ArcoDesign风格） ───────────────────────── */
.ld-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ld-text-body-md);
}
.ld-table th {
  background: var(--ld-table-header-bg);
  font-weight: var(--ld-weight-semibold);
  text-align: left;
  padding: var(--ld-table-cell-padding);
  border-bottom: var(--ld-table-border);
  white-space: nowrap;
}
.ld-table td {
  padding: var(--ld-table-cell-padding);
  border-bottom: var(--ld-table-border);
  color: var(--ld-text);
}
.ld-table tbody tr:hover { background: var(--ld-table-row-hover); }
.ld-table-striped tbody tr:nth-child(even) { background: var(--ld-table-row-stripe); }
.ld-table th:first-child, .ld-table td:first-child { padding-left: var(--ld-space-6); }
.ld-table th:last-child, .ld-table td:last-child { padding-right: var(--ld-space-6); }

/* ── 弹窗 Modal ──────────────────────────────────────────── */
.ld-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--ld-modal-mask);
  z-index: var(--ld-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ld-space-4);
  animation: ld-fadeIn var(--ld-duration-normal) var(--ld-ease-out);
}
.ld-modal {
  background: var(--ld-bg);
  border-radius: var(--ld-modal-radius);
  padding: var(--ld-modal-padding);
  box-shadow: var(--ld-modal-shadow);
  max-width: var(--ld-modal-width-md);
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  animation: ld-scaleIn var(--ld-duration-normal) var(--ld-ease-out);
}
.ld-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ld-space-4);
}
.ld-modal-title {
  font-family: var(--ld-font-heading);
  font-size: var(--ld-text-headline-sm);
  font-weight: var(--ld-weight-semibold);
  color: var(--ld-text);
}
.ld-modal-body { margin-bottom: var(--ld-space-6); }
.ld-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--ld-space-3);
}

@keyframes ld-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ld-scaleIn {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Toast 消息提示 ──────────────────────────────────────── */
.ld-toast {
  position: fixed;
  top: var(--ld-space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--ld-z-toast);
  min-width: 240px;
  max-width: var(--ld-toast-max-width);
  padding: 12px 16px;
  border-radius: var(--ld-toast-radius);
  box-shadow: var(--ld-toast-shadow);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--ld-text-body-md);
  animation: ld-toastIn var(--ld-duration-moderate) var(--ld-ease-out);
}
.ld-toast-success { background: var(--ld-success-1); color: var(--ld-success-6); border-left: 3px solid var(--ld-success); }
.ld-toast-warning { background: var(--ld-warning-1); color: var(--ld-warning-6); border-left: 3px solid var(--ld-warning); }
.ld-toast-error   { background: var(--ld-error-1); color: var(--ld-error-6); border-left: 3px solid var(--ld-error); }
.ld-toast-info    { background: var(--ld-info-1); color: var(--ld-info-6); border-left: 3px solid var(--ld-info); }

@keyframes ld-toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── 分割线 Divider ──────────────────────────────────────── */
.ld-divider {
  height: 1px;
  background: var(--ld-divider);
  border: none;
  margin: var(--ld-space-6) 0;
}
.ld-divider-text {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ld-text-muted);
  font-size: var(--ld-text-body-sm);
}
.ld-divider-text::before,
.ld-divider-text::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ld-divider);
}

/* ── 空状态 Empty State ──────────────────────────────────── */
.ld-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--ld-space-12) var(--ld-space-6);
  color: var(--ld-text-muted);
  text-align: center;
}
.ld-empty-icon { font-size: 48px; margin-bottom: var(--ld-space-4); opacity: 0.4; }
.ld-empty-title { font-size: var(--ld-text-title-md); font-weight: var(--ld-weight-medium); margin-bottom: var(--ld-space-2); color: var(--ld-text-secondary); }
.ld-empty-desc { font-size: var(--ld-text-body-sm); }

/* ── 加载中 Loading ──────────────────────────────────────── */
.ld-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ld-text-secondary);
  font-size: var(--ld-text-body-sm);
}
.ld-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--ld-border);
  border-top-color: var(--ld-primary);
  border-radius: 50%;
  animation: ld-spin 0.6s linear infinite;
}
@keyframes ld-spin { to { transform: rotate(360deg); } }

/* ── 面板/折叠 Accordion ─────────────────────────────────── */
.ld-accordion { border: 1px solid var(--ld-border); border-radius: var(--ld-radius-lg); overflow: hidden; }
.ld-accordion-item { border-bottom: 1px solid var(--ld-border); }
.ld-accordion-item:last-child { border-bottom: none; }
.ld-accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ld-space-4) var(--ld-space-6);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--ld-font-sans);
  font-size: var(--ld-text-title-sm);
  font-weight: var(--ld-weight-medium);
  color: var(--ld-text);
  transition: background var(--ld-duration-normal) var(--ld-ease-default);
}
.ld-accordion-trigger:hover { background: var(--ld-bg-secondary); }
.ld-accordion-content {
  padding: 0 var(--ld-space-6) var(--ld-space-4);
  font-size: var(--ld-text-body-md);
  color: var(--ld-text-secondary);
  line-height: var(--ld-leading-normal);
}