offerpai_web/src/assets/styles/components/agreement-preview-dialog.scss

@use '../variables' as *;

// 协议预览弹窗样式
.agreement-preview-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.agreement-preview-dialog {
  width: 7rem;
  max-width: 90vw;
  height: 80vh;
  background: #fff;
  border-radius: 0.12rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  // 顶部标题栏
  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.16rem 0.24rem;
    border-bottom: 1px solid #e5e7eb;
  }

  &__title {
    font-size: 0.18rem;
    font-weight: 600;
    color: $text-dark;
    margin: 0;
  }

  &__close {
    font-size: 0.18rem;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.04rem;
    transition: color 0.2s;

    &:hover {
      color: #374151;
    }
  }

  // 内容区域
  &__body {
    flex: 1;
    overflow-y: auto;
    padding: 0.24rem;
  }

  &__loading {
    text-align: center;
    padding: 0.4rem 0;
    color: #999;
    font-size: 0.14rem;
  }

  // Markdown 渲染内容样式
  &__content {
    font-size: 0.13rem;
    color: #555;
    line-height: 1.8;

    h1, h2, h3, h4, h5, h6 {
      color: $text-dark;
      font-weight: 600;
      margin: 0.14rem 0 0.08rem;
    }
    h1 { font-size: 0.2rem; }
    h2 { font-size: 0.17rem; }
    h3 { font-size: 0.15rem; }
    h4 { font-size: 0.14rem; }

    p {
      margin: 0 0 0.08rem;
      text-align: justify;
      &:last-child { margin-bottom: 0; }
    }

    ul, ol {
      padding-left: 0.2rem;
      margin: 0.06rem 0;
    }

    li {
      margin-bottom: 0.04rem;
      line-height: 1.8;
    }

    strong {
      font-weight: 700;
      color: $text-dark;
    }

    a {
      color: #2563eb;
      text-decoration: underline;
    }

    blockquote {
      border-left: 3px solid #cbd5e1;
      padding-left: 0.1rem;
      margin: 0.08rem 0;
      color: #64748b;
    }

    table {
      border-collapse: collapse;
      width: 100%;
      margin: 0.1rem 0;
      font-size: 0.12rem;

      th, td {
        border: 1px solid #e5e7eb;
        padding: 0.06rem 0.1rem;
        text-align: left;
        line-height: 1.6;
      }

      th {
        background: #f8fafc;
        font-weight: 600;
        color: $text-dark;
      }

      tr:nth-child(even) {
        background: #fafbfc;
      }
    }

    hr {
      border: none;
      border-top: 1px solid #e5e7eb;
      margin: 0.1rem 0;
    }

    code {
      background: #f1f5f9;
      padding: 0.01rem 0.04rem;
      border-radius: 0.03rem;
      font-size: 0.12rem;
    }

    pre {
      background: #1e293b;
      color: #e2e8f0;
      padding: 0.1rem 0.12rem;
      border-radius: 0.06rem;
      overflow-x: auto;
      margin: 0.08rem 0;

      code {
        background: none;
        padding: 0;
        color: inherit;
      }
    }
  }
}