@import '../../../styles/variables.scss';

.alert-card {
  border-radius: $r;
  padding: var(--tk-gap-lg);
  margin-bottom: var(--tk-gap-md);

  // 渐变型 — 智能提醒
  &--gradient {
    background: linear-gradient(135deg, var(--tk-pri) 0%, var(--tk-pri-d) 100%);
    color: $white;
  }

  // 左边框型 — AI 建议
  &--left-border {
    background: $acc-l;
    border-left: 4px solid $acc;
  }

  // 全边框型 — 温馨提示
  &--bordered {
    background: $wrn-l;
    border-radius: $r-sm;
  }

  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--tk-gap-xs);
  }

  &__title {
    font-size: var(--tk-font-body);
    font-weight: 600;
  }

  &--left-border &__title {
    color: $acc;
  }

  &__subtitle {
    font-size: var(--tk-font-micro);
    opacity: 0.7;
  }

  &__body {
    font-size: var(--tk-font-cap);
    color: $tx2;
    line-height: 1.6;
  }
}