.art-page { max-width: 760px; margin: 32px auto; padding: 0 16px 60px; }

.art-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #a78cc0;
    margin-bottom: 20px;
}
.art-breadcrumb a { color: #7e22ce; text-decoration: none; }
.art-breadcrumb a:hover { text-decoration: underline; }
[data-theme="dark"] .art-breadcrumb a { color:#c084fc; }

.art-header { margin-bottom: 24px; }
.art-cat-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    background: #f3e8ff;
    color: #7e22ce;
    text-decoration: none;
    margin-bottom: 12px;
}
[data-theme="dark"] .art-cat-tag { background:#3a1a50; color:#c084fc; }
.art-h1 {
    font-size: 28px;
    font-weight: 800;
    color: #1e0a2e;
    line-height: 1.3;
    margin-bottom: 14px;
    font-family: 'Playfair Display', serif;
}
[data-theme="dark"] .art-h1 { color:#f3e8ff; }

.art-author-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #7c4d99;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0e6f6;
    margin-bottom: 24px;
}
[data-theme="dark"] .art-author-row { border-color:#3a1a50; color:#b18ed4; }
.art-author-av {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg,#c060a0,#8B2635);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: #fff; font-weight: 700; overflow: hidden;
    flex-shrink: 0;
}
.art-author-av img { width:100%; height:100%; object-fit:cover; }
.art-official-badge {
    display: inline-flex; gap:3px; align-items:center;
    font-size:11px; font-weight:700; padding:2px 8px;
    border-radius:999px; background:#fef9c3; color:#854d0e;
}
[data-theme="dark"] .art-official-badge { background:#3d2a00; color:#fcd34d; }

.art-cover-img {
    width: 100%; border-radius: 18px; max-height: 360px;
    object-fit: cover; margin-bottom: 28px;
    border: 1px solid #f0e6f6;
}
[data-theme="dark"] .art-cover-img { border-color:#3a1a50; }

.art-content {
    font-size: 16px;
    line-height: 1.85;
    color: #2d1a3e;
}
[data-theme="dark"] .art-content { color:#e2c6f6; }
.art-content h2 { font-size:20px; font-weight:700; margin:28px 0 10px; color:#4a0e6e; }
[data-theme="dark"] .art-content h2 { color:#c084fc; }
.art-content h3 { font-size:17px; font-weight:700; margin:22px 0 8px; color:#6b21a8; }
[data-theme="dark"] .art-content h3 { color:#a855f7; }
.art-content p  { margin-bottom: 14px; }
.art-content ul, .art-content ol { margin: 0 0 14px 24px; }
.art-content li { margin-bottom: 6px; }
.art-content blockquote {
    border-left: 4px solid #c084fc;
    padding: 10px 16px;
    margin: 20px 0;
    background: #faf5ff;
    border-radius: 0 10px 10px 0;
    color: #6b21a8;
    font-style: italic;
}
[data-theme="dark"] .art-content blockquote { background:#2d1045; color:#c084fc; }
.art-content strong { color: #4a0e6e; font-weight: 700; }
[data-theme="dark"] .art-content strong { color:#e9d5ff; }
.art-content table {
    width:100%; border-collapse:collapse; margin:18px 0; font-size:14px;
}
.art-content th {
    background:#4a0e6e; color:#fff; padding:8px 12px; text-align:left;
}
.art-content td { padding:8px 12px; border-bottom:1px solid #f0e6f6; }
[data-theme="dark"] .art-content td { border-color:#3a1a50; }
.art-content tr:hover td { background:#faf5ff; }
[data-theme="dark"] .art-content tr:hover td { background:#2d1045; }

.art-views { font-size:13px; color:#a78cc0; margin-top:28px; padding-top:16px; border-top:1px solid #f0e6f6; }
[data-theme="dark"] .art-views { border-color:#3a1a50; }

.related-section { max-width:760px; margin:0 auto 60px; padding:0 16px; }
.related-title { font-size:18px; font-weight:700; color:#4a0e6e; margin-bottom:16px; }
[data-theme="dark"] .related-title { color:#c084fc; }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.rel-card {
    background:#fff; border-radius:14px; overflow:hidden;
    border:1px solid #f0e6f6; text-decoration:none; color:inherit;
    transition:transform 0.2s;
}
.rel-card:hover { transform:translateY(-3px); }
[data-theme="dark"] .rel-card { background:#1e0a2e; border-color:#3a1a50; }
.rel-cover {
    height:80px; background:linear-gradient(135deg,#4a0e6e,#9a3a8a);
    display:flex; align-items:center; justify-content:center; font-size:28px;
}
.rel-cover img { width:100%; height:100%; object-fit:cover; }
.rel-body { padding:10px 12px; }
.rel-title { font-size:13px; font-weight:600; color:#1e0a2e; line-height:1.3; }
[data-theme="dark"] .rel-title { color:#f3e8ff; }