SVE/src/styles/global.css

@import "tailwindcss";

@theme {
  --color-primary: #0f3460;
  --color-secondary: #1a73e8;
  --color-danger: #d93025;
  --color-warning: #f4b400;
  --color-success: #1e8e3e;
  --color-neutral: #5f6368;
  --color-light: #f8f9fa;
  --color-dark: #202124;
  --font-inter: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --animate-fade-in: fadeIn 0.3s ease-in-out;
  --animate-slide-up: slideUp 0.4s ease-out;

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes slideUp {
    from { transform: translateY(10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
}

body {
  @apply font-inter bg-gray-50 text-dark antialiased;
}

/* ===== 通用工具类 ===== */

.shadow-soft {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.text-balance {
  text-wrap: balance;
}

.bg-gradient-primary {
  background: linear-gradient(135deg, #0f3460 0%, #1a73e8 100%);
}

.lang-switch-btn {
  padding: 2px 8px;
  border-radius: 4px;
  transition: all 0.2s;
}
.lang-switch-btn.active {
  background-color: #1a73e8;
  color: white;
  font-weight: 500;
}
.lang-switch-btn.inactive {
  background-color: #f8f9fa;
  color: #5f6368;
}
.lang-switch-btn.inactive:hover {
  background-color: #e8f0fe;
  color: #1a73e8;
}

.pagination-btn {
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid #d1d5db;
  color: #5f6368;
  transition: all 0.2s;
}
.pagination-btn:hover:not(:disabled) {
  background-color: #f8f9fa;
}
.pagination-btn.active {
  background-color: #1a73e8;
  color: white;
  border-color: #1a73e8;
}
.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.severity-badge {
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}
.severity-badge.critical { background-color: rgba(217, 48, 37, 0.1); color: #d93025; }
.severity-badge.high { background-color: rgba(244, 180, 0, 0.15); color: #b06000; }
.severity-badge.medium { background-color: rgba(244, 180, 0, 0.1); color: #f4b400; }
.severity-badge.low { background-color: rgba(30, 142, 62, 0.1); color: #1e8e3e; }
.severity-badge.none { background-color: rgba(95, 99, 104, 0.1); color: #5f6368; }

.input-focus {
  outline: none;
}
.input-focus:focus {
  border-color: #1a73e8;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.5);
}

.filter-card {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  padding: 1rem;
}

/* ===== Markdown 编辑器 ===== */

.markdown-editor {
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: #fff;
}
.editor-tab {
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: all 0.2s;
  color: #5f6368;
}
.editor-tab.active {
  border-bottom: 2px solid #1a73e8;
  color: #1a73e8;
  font-weight: 500;
}
.editor-content {
  min-height: 200px;
  resize: vertical;
  border: 0;
  outline: none;
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  background-color: #fff;
}
.editor-content:focus {
  outline: none;
}
.preview-content {
  min-height: 200px;
  padding: 1rem;
  background-color: #fafafa;
  border-top: 1px solid #e5e7eb;
}

/* ===== Markdown 渲染样式 ===== */

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
  color: #202124;
  font-weight: 600;
}
.markdown-content h1 { font-size: 1.5rem; margin: 1.25rem 0 0.75rem; }
.markdown-content h2 { font-size: 1.35rem; margin: 1.5rem 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid #e5e7eb; }
.markdown-content h3 { font-size: 1.2rem; margin: 1.25rem 0 0.5rem; }
.markdown-content h4, .markdown-content h5, .markdown-content h6 { font-size: 1.05rem; margin: 1rem 0 0.5rem; }
.markdown-content p { color: #5f6368; margin: 0.5rem 0; line-height: 1.7; }
.markdown-content a { color: #0f3460; text-decoration: underline; }
.markdown-content ul { list-style: disc; margin: 0.5rem 0 0.5rem 1.5rem; }
.markdown-content ol { list-style: decimal; margin: 0.5rem 0 0.5rem 1.5rem; }
.markdown-content li { margin: 0.25rem 0; }
.markdown-content blockquote {
  border-left: 4px solid #0f3460;
  padding-left: 1rem;
  font-style: italic;
  margin: 1rem 0;
  color: #5f6368;
}
.markdown-content code {
  padding: 0.2rem 0.4rem;
  background-color: #181a1f;
  color: #fff;
  border-radius: 0.25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875rem;
}
.markdown-content pre {
  padding: 1rem;
  background-color: #181a1f;
  color: #fff;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 1rem 0;
  border: 1px solid #e5e7eb;
}
.markdown-content pre code {
  padding: 0;
  background-color: transparent;
  color: #fff;
}
.markdown-content table { border-collapse: collapse; width: 100%; margin: 1rem 0; }
.markdown-content th,
.markdown-content td {
  border: 1px solid #d1d5db;
  padding: 0.5rem;
}
.markdown-content th { background-color: #f8f9fa; font-weight: 600; }
.markdown-content img { max-width: 100%; }

/* ===== 404 渐变数字 ===== */

.error-number {
  font-size: clamp(6rem, 20vw, 12rem);
  line-height: 1;
  font-weight: 700;
  background: linear-gradient(135deg, #0f3460 0%, #1a73e8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.9;
}