library-picturebook-activity/frontend/src/assets/styles/aicreate.scss

// AI 创作专用样式（隔离在 .ai-create-shell 容器内）
// 紫粉风格，与 PublicLayout 设计语言保持一致
// 所有 CSS 变量使用 --ai- 前缀，避免与主前端冲突

.ai-create-shell {
  --ai-primary: #6366f1;
  --ai-primary-light: #eef0ff;
  --ai-secondary: #ec4899;
  --ai-accent: #a78bfa;
  --ai-success: #10b981;
  --ai-bg: #f8f7fc;
  --ai-card: #ffffff;
  --ai-text: #1e1b4b;
  --ai-text-sub: #6b7280;
  --ai-border: #e5e7eb;
  --ai-radius: 20px;
  --ai-radius-sm: 14px;
  --ai-shadow: 0 8px 28px rgba(99, 102, 241, 0.22);
  --ai-shadow-soft: 0 4px 20px rgba(99, 102, 241, 0.06);
  --ai-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  --ai-gradient-purple: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
  --ai-font: 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', -apple-system, sans-serif;

  font-family: var(--ai-font);
  background: var(--ai-bg);
  color: var(--ai-text);
  -webkit-font-smoothing: antialiased;
  max-width: 430px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  height: 100%;

  // 通用按钮
  .btn-primary {
    display: block;
    width: 100%;
    padding: 16px 0;
    border: none;
    border-radius: 50px;
    background: var(--ai-gradient);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: var(--ai-shadow);
    transition: all 0.3s ease;

    &:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    &:active:not(:disabled) {
      transform: scale(0.97);
    }
  }

  .btn-ghost {
    @extend .btn-primary;
    background: var(--ai-primary-light);
    color: var(--ai-primary);
    box-shadow: none;
  }

  // 通用卡片
  .card {
    background: var(--ai-card);
    border-radius: var(--ai-radius);
    box-shadow: var(--ai-shadow-soft);
  }

  // 安全区底部
  .safe-bottom {
    padding-bottom: env(safe-area-inset-bottom, 20px);
  }

  // 全屏自适应布局框架
  // 嵌入 PublicLayout 后，使用 100% 而非 100dvh，以适配头部和底栏
  .page-fullscreen {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0 !important;
    overflow: hidden;

    > .page-content {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    > .page-bottom {
      flex-shrink: 0;
      padding: 12px 20px;
      padding-bottom: max(12px, env(safe-area-inset-bottom));
      background: var(--ai-bg, #FFFDF7);
    }
  }

  // 动画
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
  }

  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }
}