/* ============================================================
   components/alert.css — 提示条（反馈信息）
   依赖：tokens.css
   变体：--info / --success / --warn / --danger
   结构：.alert > .alert__icon / .alert__body > .alert__title + .alert__msg
   用法：<div class="alert alert--success" role="status">…</div>
   ============================================================ */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: var(--r);
  background: var(--surface);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}
.alert__body { flex: 1; min-width: 0; }
.alert__title {
  font-weight: var(--fw-semibold);
  color: var(--text);
  margin-bottom: 2px;
}
.alert__msg { color: var(--text-muted); }

.alert--info   { border-left-color: var(--info); background: var(--info-tint); }
.alert--success{ border-left-color: var(--down); background: var(--down-tint); }
.alert--warn   { border-left-color: var(--warn); background: var(--warn-tint); }
.alert--danger { border-left-color: var(--up);   background: var(--up-tint); }

/* 可关闭按钮（语义色图标） */
.alert__close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-lg);
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.alert__close:hover { color: var(--text); }