/* 我的文章页样式 - 从 posts/my.html.j2 提取 */
/* 已修复: 2026-01-10 - 硬编码颜色替换为CSS变量 */

body { background: var(--color-gray-50); }
.page-shell { max-width: 68.75rem; margin: 0 auto; padding: 1.5rem 1rem 4.5rem; }
.hero { background: linear-gradient(135deg, var(--color-gray-900) 0%, var(--color-gray-800) 50%, var(--color-indigo-500) 100%); color: var(--color-gray-200); border-radius: var(--radius-lg); padding: 1.75rem 1.5rem; margin-bottom: 1.25rem; }
.hero h1 { margin: 0 0 0.625rem; font-size: 1.75rem; color: var(--color-gray-200); font-weight: 700; line-height: 1.2; }
.hero p { margin: 0.375rem 0 1rem; color: rgba(226,232,240,0.85); font-size: 0.9375rem; line-height: 1.5; }
.hero-actions { display: flex; gap: 0.625rem; flex-wrap: wrap; margin-top: 1rem; }
.btn { text-decoration: none; border: none; cursor: pointer; display: inline-block; text-align: center; font-weight: 700; transition: var(--transition-fast); }
.btn--primary { background: linear-gradient(135deg, var(--color-indigo-500) 0%, var(--color-indigo-500) 100%); color: var(--bg-card); padding: 0.625rem 1rem; border-radius: var(--radius-lg); }
.btn--primary:hover { box-shadow: 0 0.5rem 1.25rem rgba(79,70,229,0.3); transform: translateY(-1px); }
.btn--secondary { background: var(--color-indigo-50); color: var(--color-gray-900); border: 1px solid var(--color-gray-300); padding: 0.625rem 1rem; border-radius: var(--radius-lg); }
.btn--outline { background: var(--bg-card); color: var(--color-indigo-500); border: 1px solid var(--color-gray-300); padding: 0.5rem 0.875rem; border-radius: var(--radius-md); font-size: 0.875rem; }
.btn--link { background: transparent; color: var(--color-gray-500); border: none; padding: 0.5rem 0.875rem; border-radius: var(--radius-md); font-size: 0.875rem; }
.btn--link:hover { background: var(--color-gray-100); }

.quota-card { background: var(--bg-card); border-radius: var(--radius-lg); padding: 1.25rem; box-shadow: var(--shadow-sm); margin-bottom: 1.25rem; }
.quota-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; }
.quota-item { display: flex; flex-direction: column; gap: 0.25rem; }
.quota-label { font-size: 0.8125rem; color: var(--color-gray-500); font-weight: 600; }
.quota-value { font-size: 1.375rem; font-weight: 700; color: var(--color-gray-900); }

.section { margin-bottom: 1.75rem; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.875rem; }
.section-title { font-size: 1.25rem; font-weight: 700; color: var(--color-gray-900); margin: 0; }
.pill { font-size: 0.75rem; color: var(--color-gray-600); background: var(--color-gray-200); border-radius: var(--radius-full); padding: 0.25rem 0.625rem; display: inline-flex; align-items: center; gap: 0.375rem; }

.articles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); gap: 0.875rem; }
.article-card { background: var(--bg-card); border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); padding: 0.875rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 0.625rem; transition: var(--transition-fast); }
.article-card:hover { border-color: var(--color-gray-300); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.article-card h3 { margin: 0; font-size: 1.0625rem; line-height: 1.35; color: var(--color-gray-900); }
.article-card h3 a { text-decoration: none; color: inherit; }
.article-card h3 a:hover { color: var(--color-indigo-500); }
.article-meta { display: flex; gap: 0.75rem; font-size: 0.75rem; color: var(--color-gray-500); flex-wrap: wrap; }
.article-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.article-excerpt { font-size: 0.8125rem; color: var(--color-gray-600); margin: 0; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.draft-list { display: flex; flex-direction: column; gap: 0.75rem; }
.draft-card { background: var(--bg-card); border: 1px solid var(--color-gray-200); border-left: 4px solid var(--color-warning); border-radius: var(--radius-lg); padding: 1rem; box-shadow: var(--shadow-sm); display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.draft-content { flex: 1; }
.draft-content h3 { margin: 0 0 0.5rem; font-size: 1.0625rem; color: var(--color-gray-900); }
.draft-content p { margin: 0.25rem 0; font-size: 0.8125rem; color: var(--color-gray-500); }
.draft-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }

.empty-state { text-align: center; padding: 3rem 1.5rem; background: var(--bg-card); border-radius: var(--radius-lg); border: 1px dashed var(--color-gray-300); }
.empty-state p { color: var(--color-gray-500); font-size: 0.9375rem; margin: 0 0 1rem; }

/* 工具类 - 替代内联样式 */
.draft-meta { font-size: 0.75rem; color: var(--color-gray-400); margin-top: 0.5rem; }
.btn--danger { color: var(--color-error); }

@media (max-width: 48rem) {
  .hero { flex-direction: column; align-items: flex-start; padding: 1.25rem 1.125rem; }
  .hero-actions { margin-top: 0.875rem; width: 100%; }
  .articles-grid { grid-template-columns: 1fr; }
  .quota-grid { grid-template-columns: repeat(2, 1fr); }
  .draft-card { flex-direction: column; }
  .draft-actions { width: 100%; }
}