/* ============================================================================
   共享组件层（Components）
   介绍页与工作台共用同一套组件规则：同一组 CSS 规则同时绑定
   中性名（.xy-*）与工作台历史名（.xywb-*），保证两套页面视觉完全一致，
   同时不必改动既有视图模板里的类名。
   ============================================================================ */

/* ---------------------------------------------------------------- 卡片 */
.xy-card,
.xywb-card {
  background: var(--xy-surface);
  border: 1px solid var(--xy-line);
  border-radius: var(--xy-r-md);
  padding: var(--xy-s5);
  box-shadow: var(--xy-shadow-1);
  margin-bottom: var(--xy-s4);
}
.xy-card > :last-child,
.xywb-card > :last-child { margin-bottom: 0; }
.xy-card > h2,
.xywb-card > h2 { font-size: var(--xy-fs-md); margin-bottom: var(--xy-s3); }
.xy-card > h3,
.xywb-card > h3 { font-size: var(--xy-fs-base); margin-bottom: var(--xy-s2); }

/* ---------------------------------------------------------------- 标题区 */
.xy-page-title,
.xywb-page-title {
  font-size: var(--xy-fs-xl);
  margin: 0 0 var(--xy-s2);
  color: var(--xy-blue-700);
  letter-spacing: 0.01em;
}
.xy-page-sub,
.xywb-page-sub {
  color: var(--xy-ink-3);
  font-size: var(--xy-fs-sm);
  margin: 0 0 var(--xy-s5);
  max-width: 78ch;
}

/* ---------------------------------------------------------------- 按钮 */
.xy-btn,
.xywb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--xy-s2);
  font-family: inherit;
  font-size: var(--xy-fs-sm);
  font-weight: 600;
  line-height: 1.4;
  min-height: 36px;
  padding: 7px 18px;
  border-radius: var(--xy-r-pill);
  border: 1px solid var(--xy-blue-600);
  background: var(--xy-blue-600);
  color: var(--xy-ink-inverse);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--xy-t-fast) var(--xy-ease),
              border-color var(--xy-t-fast) var(--xy-ease),
              color var(--xy-t-fast) var(--xy-ease),
              transform var(--xy-t-fast) var(--xy-ease);
}
.xy-btn:hover,
.xywb-btn:hover { background: var(--xy-blue-700); border-color: var(--xy-blue-700); color: var(--xy-ink-inverse); }
.xy-btn:active,
.xywb-btn:active { transform: translateY(1px); }

.xy-btn.xy-btn-ghost,
.xywb-btn.xywb-btn-ghost {
  background: transparent;
  border-color: var(--xy-line-strong);
  color: var(--xy-blue-700);
}
.xy-btn.xy-btn-ghost:hover,
.xywb-btn.xywb-btn-ghost:hover {
  background: var(--xy-blue-050);
  border-color: var(--xy-blue-200);
  color: var(--xy-blue-700);
}

.xy-btn.xy-btn-soft,
.xywb-btn.xywb-btn-soft {
  background: var(--xy-blue-050);
  border-color: var(--xy-blue-200);
  color: var(--xy-blue-700);
}
.xy-btn.xy-btn-soft:hover,
.xywb-btn.xywb-btn-soft:hover { background: var(--xy-blue-100); border-color: var(--xy-blue-400); }

.xy-btn.xy-btn-danger,
.xywb-btn.xywb-btn-danger {
  background: transparent;
  border-color: var(--xy-danger-line);
  color: var(--xy-danger);
}
.xy-btn.xy-btn-danger:hover,
.xywb-btn.xywb-btn-danger:hover { background: var(--xy-danger); border-color: var(--xy-danger); color: var(--xy-ink-inverse); }

.xy-btn.xy-btn-sm,
.xywb-btn.xywb-btn-sm {
  font-size: var(--xy-fs-xs);
  min-height: 30px;
  padding: 4px 13px;
}

.xy-btn[disabled],
.xywb-btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ---------------------------------------------------------------- 徽章 */
.xy-chip,
.xywb-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--xy-s1);
  font-size: var(--xy-fs-xs);
  font-weight: 600;
  line-height: 1.5;
  padding: 2px 10px;
  border-radius: var(--xy-r-pill);
  background: var(--xy-blue-050);
  color: var(--xy-blue-700);
  border: 1px solid var(--xy-blue-200);
  white-space: nowrap;
}
.xy-chip.xy-chip-ok,
.xywb-chip.xywb-chip-ok { background: var(--xy-ok-soft); color: var(--xy-ok); border-color: var(--xy-ok-line); }
.xy-chip.xy-chip-warn,
.xywb-chip.xywb-chip-warn { background: var(--xy-warn-soft); color: var(--xy-warn); border-color: var(--xy-warn-line); }
.xy-chip.xy-chip-danger,
.xywb-chip.xywb-chip-danger { background: var(--xy-danger-soft); color: var(--xy-danger); border-color: var(--xy-danger-line); }
.xy-chip.xy-chip-mute,
.xywb-chip.xywb-chip-mute {
  background: var(--xy-paper-deep);
  color: var(--xy-ink-3);
  border-color: var(--xy-line);
}

/* ---------------------------------------------------------------- 表单 */
.xy-form,
.xywb-form { display: grid; gap: var(--xy-s3); }

.xy-field,
.xywb-field { display: grid; gap: var(--xy-s1); }

.xy-field > label,
.xy-form label,
.xywb-form label {
  font-size: var(--xy-fs-sm);
  font-weight: 600;
  color: var(--xy-ink-2);
}

.xy-field > .hint,
.xywb-form .hint,
.xy-hint {
  font-size: var(--xy-fs-xs);
  color: var(--xy-ink-3);
  font-weight: 400;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="date"],
input[type="number"],
input[type="file"],
select,
textarea {
  font-family: inherit;
  font-size: var(--xy-fs-sm);
  color: var(--xy-ink);
  background: var(--xy-surface);
  border: 1px solid var(--xy-line-strong);
  border-radius: var(--xy-r-sm);
  padding: 9px 12px;
  width: 100%;
  min-height: 40px;
  transition: border-color var(--xy-t-fast) var(--xy-ease), box-shadow var(--xy-t-fast) var(--xy-ease);
}
input::placeholder,
textarea::placeholder { color: var(--xy-ink-3); opacity: 0.85; }
input:hover,
select:hover,
textarea:hover { border-color: var(--xy-blue-400); }
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--xy-blue-500);
  box-shadow: var(--xy-focus-ring);
}
textarea { min-height: 92px; resize: vertical; line-height: var(--xy-lh-normal); }
textarea.xy-mono,
textarea.xywb-mono { font-family: var(--xy-font-mono); font-size: var(--xy-fs-sm); }

/* 表单内联错误：可被读屏器即时播报 */
.xy-error {
  font-size: var(--xy-fs-xs);
  color: var(--xy-danger);
  min-height: 1.2em;
}
.xy-error:empty { display: none; }

/* ---------------------------------------------------------------- 标签页 */
.xy-tabs,
.xywb-tabs {
  display: flex;
  gap: var(--xy-s1);
  border-bottom: 1px solid var(--xy-line);
  margin-bottom: var(--xy-s5);
  overflow-x: auto;
  scrollbar-width: thin;
}
.xy-tabs button,
.xywb-tabs button {
  font-family: inherit;
  font-size: var(--xy-fs-sm);
  font-weight: 600;
  color: var(--xy-ink-3);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 10px 14px;
  cursor: pointer;
  white-space: nowrap;
  margin-bottom: -1px;
  transition: color var(--xy-t-fast) var(--xy-ease);
}
.xy-tabs button:hover,
.xywb-tabs button:hover { color: var(--xy-blue-700); background: var(--xy-blue-050); }
.xy-tabs button[aria-selected="true"],
.xywb-tabs button[aria-selected="true"] { color: var(--xy-blue-700); border-bottom-color: var(--xy-blue-500); }

/* ---------------------------------------------------------------- 列表 */
.xy-list,
.xywb-list { display: grid; gap: var(--xy-s3); }

.xy-list-item,
.xywb-list-item {
  border: 1px solid var(--xy-line);
  border-radius: var(--xy-r-sm);
  padding: var(--xy-s3) var(--xy-s4);
  background: var(--xy-surface);
  display: flex;
  gap: var(--xy-s3);
  align-items: flex-start;
  transition: border-color var(--xy-t-fast) var(--xy-ease), box-shadow var(--xy-t-fast) var(--xy-ease);
}
.xy-list-item:hover,
.xywb-list-item:hover { border-color: var(--xy-blue-200); box-shadow: var(--xy-shadow-1); }
.xy-list-item .grow,
.xywb-list-item .grow { flex: 1; min-width: 0; }
.xy-list-item h4,
.xywb-list-item h4 {
  margin: 0 0 var(--xy-s1);
  font-size: var(--xy-fs-base);
  color: var(--xy-ink);
  display: flex;
  flex-wrap: wrap;
  gap: var(--xy-s2);
  align-items: center;
}
.xy-list-item .meta,
.xywb-list-item .meta { font-size: var(--xy-fs-xs); color: var(--xy-ink-3); }
.xy-list-item .actions,
.xywb-list-item .actions { display: flex; gap: var(--xy-s2); flex-wrap: wrap; justify-content: flex-end; align-items: center; }

/* ---------------------------------------------------------------- 引用块 */
.xy-quote,
.xywb-quote {
  border-left: 3px solid var(--xy-blue-400);
  background: var(--xy-surface-cool);
  padding: var(--xy-s2) var(--xy-s3);
  border-radius: 0 var(--xy-r-xs) var(--xy-r-xs) 0;
  font-size: var(--xy-fs-sm);
  color: var(--xy-ink-2);
  margin: var(--xy-s2) 0;
}

/* ---------------------------------------------------------------- AI 提示条 */
.xy-note,
.xywb-ai-note {
  font-size: var(--xy-fs-xs);
  line-height: var(--xy-lh-normal);
  background: var(--xy-warn-soft);
  border: 1px solid var(--xy-warn-line);
  color: var(--xy-warn);
  border-radius: var(--xy-r-sm);
  padding: var(--xy-s2) var(--xy-s3);
  margin: var(--xy-s2) 0;
}

/* ---------------------------------------------------------------- 表格 */
.xy-table,
.xywb-table { width: 100%; border-collapse: collapse; font-size: var(--xy-fs-sm); }
.xy-table th,
.xy-table td,
.xywb-table th,
.xywb-table td {
  text-align: left;
  padding: var(--xy-s2) var(--xy-s3);
  border-bottom: 1px solid var(--xy-line);
  vertical-align: top;
}
.xy-table th,
.xywb-table th {
  color: var(--xy-ink-3);
  font-weight: 600;
  background: var(--xy-surface-cool);
  white-space: nowrap;
}
.xy-table tr:hover td,
.xywb-table tr:hover td { background: var(--xy-blue-050); }

/* ---------------------------------------------------------------- 空状态
   带小羽「邀请」姿态的空状态：明确「现在没有 → 下一步做什么」，
   不用装饰性插画替代真实操作入口。 */
.xy-empty,
.xywb-empty {
  display: grid;
  justify-items: center;
  gap: var(--xy-s2);
  text-align: center;
  color: var(--xy-ink-3);
  padding: var(--xy-s7) var(--xy-s4);
  border: 1.5px dashed var(--xy-line-strong);
  border-radius: var(--xy-r-md);
  background: var(--xy-surface);
}
.xy-empty strong,
.xywb-empty strong { color: var(--xy-ink); font-size: var(--xy-fs-base); }
.xy-empty p,
.xywb-empty p { margin: 0; font-size: var(--xy-fs-sm); max-width: 46ch; }
.xy-empty .xy-empty-actions { display: flex; gap: var(--xy-s2); flex-wrap: wrap; justify-content: center; margin-top: var(--xy-s2); }
/* 空状态形象同时约束宽与高：6 个姿态宽高比差异很大（393×426 到 253×529），
   只锁一边会把细长的姿态压成一条、或把扁的姿态撑爆，锁两边才能保证占位一致 */
.xy-empty-figure { width: auto; height: auto; max-width: 120px; max-height: 158px; margin-bottom: var(--xy-s1); }

/* ---------------------------------------------------------------- Toast */
.xy-toasts,
.xywb-toasts {
  position: fixed;
  top: calc(var(--xy-header-h) + var(--xy-s3));
  right: var(--xy-s4);
  z-index: var(--xy-z-toast);
  display: grid;
  gap: var(--xy-s2);
  max-width: min(360px, calc(100vw - 32px));
}
.xy-toast,
.xywb-toast {
  background: var(--xy-surface);
  border: 1px solid var(--xy-line);
  border-left: 4px solid var(--xy-blue-500);
  box-shadow: var(--xy-shadow-3);
  border-radius: var(--xy-r-sm);
  padding: var(--xy-s2) var(--xy-s4);
  font-size: var(--xy-fs-sm);
  color: var(--xy-ink);
  animation: xy-toast-in var(--xy-t-base) var(--xy-ease);
}
.xy-toast.xy-toast-ok,
.xywb-toast.xywb-toast-ok { border-left-color: var(--xy-ok); }
.xy-toast.xy-toast-warn,
.xywb-toast.xywb-toast-warn { border-left-color: var(--xy-warn); }
.xy-toast.xy-toast-danger,
.xywb-toast.xywb-toast-danger { border-left-color: var(--xy-danger); }

@keyframes xy-toast-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- 模态框 */
.xy-modal-mask,
.xywb-modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(27, 51, 80, 0.42);
  backdrop-filter: blur(2px);
  z-index: var(--xy-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--xy-s4);
}
.xy-modal,
.xywb-modal {
  background: var(--xy-surface);
  border-radius: var(--xy-r-lg);
  box-shadow: 0 18px 60px rgba(27, 51, 80, 0.28);
  width: 100%;
  max-width: 660px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  animation: xy-modal-in var(--xy-t-base) var(--xy-ease);
}
@keyframes xy-modal-in {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
  to { opacity: 1; transform: none; }
}
.xy-modal-head,
.xywb-modal-head {
  padding: var(--xy-s4) var(--xy-s5);
  border-bottom: 1px solid var(--xy-line);
  display: flex;
  align-items: center;
  gap: var(--xy-s3);
}
.xy-modal-head h3,
.xywb-modal-head h3 { margin: 0; font-size: var(--xy-fs-md); }
.xy-modal-head .close,
.xywb-modal-head .close { margin-left: auto; }
.xy-modal-body,
.xywb-modal-body { padding: var(--xy-s4) var(--xy-s5); overflow-y: auto; }
.xy-modal-foot,
.xywb-modal-foot {
  padding: var(--xy-s3) var(--xy-s5);
  border-top: 1px solid var(--xy-line);
  display: flex;
  justify-content: flex-end;
  gap: var(--xy-s2);
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------- 差异对比 */
.xy-diff,
.xywb-diff {
  font-family: var(--xy-font-mono);
  font-size: var(--xy-fs-xs);
  border: 1px solid var(--xy-line);
  border-radius: var(--xy-r-sm);
  overflow: hidden;
}
.xy-diff .del,
.xywb-diff .del { background: var(--xy-danger-soft); color: var(--xy-danger-ink); }
.xy-diff .add,
.xywb-diff .add { background: var(--xy-ok-soft); color: var(--xy-ok-ink); }
.xy-diff .same,
.xywb-diff .same { background: var(--xy-surface); color: var(--xy-ink-2); }
.xy-diff div,
.xywb-diff div { padding: 1px 10px; white-space: pre-wrap; word-break: break-word; }

/* ---------------------------------------------------------------- 栅格与工具条 */
.xy-grid-2,
.xywb-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--xy-s4); }

.xy-toolbar,
.xywb-toolbar {
  display: flex;
  align-items: center;
  gap: var(--xy-s2);
  flex-wrap: wrap;
  margin-bottom: var(--xy-s4);
}
.xy-toolbar .spacer,
.xywb-toolbar .spacer { flex: 1; }

@media (max-width: 780px) {
  .xy-grid-2,
  .xywb-grid-2 { grid-template-columns: 1fr; }
  :root { --xy-fs-xl: 22px; }
  .xy-card,
  .xywb-card { padding: var(--xy-s4); }
  .xy-list-item,
  .xywb-list-item { flex-direction: column; }
  .xy-list-item .actions,
  .xywb-list-item .actions { justify-content: flex-start; }
  .xy-toasts,
  .xywb-toasts { top: auto; bottom: calc(var(--xy-s8) + var(--xy-s6)); right: var(--xy-s3); left: var(--xy-s3); max-width: none; }
  .xy-empty-figure { max-width: 96px; max-height: 124px; }
}

/* 320px 极窄屏：保证按钮可点、文字不溢出 */
@media (max-width: 360px) {
  .xy-btn,
  .xywb-btn { padding: 7px 14px; }
  .xy-modal-mask,
  .xywb-modal-mask { padding: var(--xy-s2); }
  .xy-card,
  .xywb-card { padding: var(--xy-s3); }
}