#article-container{max-width:1200px;margin:0 auto;padding:2rem 1rem}#article-container .article-content{color:#2c3e50;background:#fff;border-radius:16px;margin-bottom:2rem;padding:3rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;line-height:1.8;transition:box-shadow .3s;box-shadow:0 2px 12px rgba(0,0,0,.08)}#article-container .article-content:hover{box-shadow:0 4px 24px rgba(0,0,0,.12)}#article-container .article-title{color:#1a202c;letter-spacing:-.02em;margin-bottom:1.5rem;font-size:2.5rem;font-weight:700;line-height:1.3}#article-container .article-meta{color:#718096;border-bottom:2px solid #f7fafc;flex-wrap:wrap;gap:2rem;margin-bottom:2.5rem;padding-bottom:1.5rem;font-size:.9rem;display:flex}#article-container .article-meta .meta-item{align-items:center;gap:.5rem;font-weight:500;display:flex}#article-container .article-meta .meta-item .meta-icon{color:#a0aec0;flex-shrink:0}#article-container .article-body{color:#374151;font-size:1.05rem}#article-container .article-body p{margin:1.5em 0;line-height:1.8}#article-container .article-body img{border-radius:12px;max-width:100%;height:auto;margin:2rem 0;box-shadow:0 4px 12px rgba(0,0,0,.1)}#article-container .article-body h1,#article-container .article-body h2,#article-container .article-body h3,#article-container .article-body h4,#article-container .article-body h5,#article-container .article-body h6{margin-top:2rem;margin-bottom:1rem;font-weight:600;line-height:1.3}#article-container .article-body code{background:#f3f4f6;border-radius:4px;padding:.2em .4em;font-size:.9em}#article-container .article-body pre{color:#f9fafb;background:#1f2937;border-radius:8px;margin:1.5rem 0;padding:1.5rem;overflow-x:auto}#article-container .article-actions{border-top:1px solid #e5e7eb;justify-content:center;margin-top:3rem;padding:2.5rem 0;display:flex}#article-container .article-actions .like-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:50px;align-items:center;gap:.75rem;padding:1rem 2.5rem;font-size:1rem;font-weight:600;transition:all .3s;display:inline-flex;box-shadow:0 4px 15px rgba(102,126,234,.4)}#article-container .article-actions .like-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(102,126,234,.5)}#article-container .article-actions .like-btn:active{transform:translateY(0)}#article-container .article-actions .like-btn.liked{background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);box-shadow:0 4px 15px rgba(245,87,108,.4)}#article-container .article-actions .like-btn.liked:hover{box-shadow:0 6px 20px rgba(245,87,108,.5)}#article-container .article-actions .like-btn.liked .like-icon{animation:.5s likeAnimation}#article-container .article-actions .like-btn .like-icon{width:20px;height:20px;transition:all .3s}#article-container .article-actions .like-btn .like-text{font-weight:600}#article-container .article-actions .like-btn .like-count{background:rgba(255,255,255,.2);border-radius:20px;padding:.25rem .75rem;font-weight:700}@keyframes likeAnimation{0%,to{transform:scale(1)}50%{transform:scale(1.3)}}#article-container .comments-section{background:#fff;border-radius:16px;margin-top:2rem;padding:3rem;box-shadow:0 2px 12px rgba(0,0,0,.08)}#article-container .comments-section .section-title{color:#1a202c;align-items:center;gap:.75rem;margin-bottom:2rem;font-size:1.75rem;font-weight:700;display:flex}#article-container .comments-section .section-title:before{content:"";background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:2px;width:4px;height:1.75rem;display:block}#article-container .comments-section .comment-form{background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;margin-bottom:3rem;padding:2rem}#article-container .comments-section .comment-form .form-title{color:#374151;margin-bottom:1.5rem;font-size:1.25rem;font-weight:600}#article-container .comments-section .comment-form .form-user-info{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin-bottom:1.5rem;display:grid}#article-container .comments-section .comment-form .form-group{flex-direction:column;gap:.5rem;display:flex}#article-container .comments-section .comment-form .form-group label{color:#4b5563;font-size:.9rem;font-weight:600}#article-container .comments-section .comment-form .form-group .form-input{background:#fff;border:2px solid #e5e7eb;border-radius:8px;padding:.75rem 1rem;font-size:.95rem;transition:all .3s}#article-container .comments-section .comment-form .form-group .form-input:focus{border-color:#667eea;outline:none;box-shadow:0 0 0 3px rgba(102,126,234,.1)}#article-container .comments-section .comment-form .form-group .form-input::placeholder{color:#9ca3af}#article-container .comments-section .comment-form .comment-input{resize:vertical;background:#fff;border:2px solid #e5e7eb;border-radius:8px;width:100%;min-height:120px;padding:1rem;font-family:inherit;font-size:.95rem;transition:all .3s}#article-container .comments-section .comment-form .comment-input:focus{border-color:#667eea;outline:none;box-shadow:0 0 0 3px rgba(102,126,234,.1)}#article-container .comments-section .comment-form .comment-input::placeholder{color:#9ca3af}#article-container .comments-section .comment-form .submit-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:8px;margin-top:1rem;padding:.875rem 2.5rem;font-size:1rem;font-weight:600;transition:all .3s;box-shadow:0 4px 12px rgba(102,126,234,.3)}#article-container .comments-section .comment-form .submit-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(102,126,234,.4)}#article-container .comments-section .comment-form .submit-btn:active{transform:translateY(0)}#article-container .comments-section .comments-list .empty-comments{text-align:center;color:#9ca3af;background:linear-gradient(135deg,#f9fafb 0%,#f3f4f6 100%);border:2px dashed #e5e7eb;border-radius:12px;padding:3rem 2rem;font-size:1rem}#article-container .comments-section .comments-list .comment-item{background:#fafbfc;border:1px solid #e5e7eb;border-radius:12px;gap:1rem;margin-bottom:1rem;padding:1.75rem;transition:all .3s;display:flex}#article-container .comments-section .comments-list .comment-item:hover{background:#f9fafb;border-color:#d1d5db;transform:translate(4px)}#article-container .comments-section .comments-list .comment-item:last-child{margin-bottom:0}#article-container .comments-section .comments-list .comment-item .comment-avatar{flex-shrink:0}#article-container .comments-section .comments-list .comment-item .comment-avatar img{object-fit:cover;border:2px solid #e5e7eb;border-radius:50%;width:48px;height:48px}#article-container .comments-section .comments-list .comment-item .comment-avatar .avatar-placeholder{color:#fff;text-transform:uppercase;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:2px solid #e5e7eb;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;font-size:1.25rem;font-weight:700;display:flex}#article-container .comments-section .comments-list .comment-item .comment-content{flex:1;min-width:0}#article-container .comments-section .comments-list .comment-item .comment-content .comment-header{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.75rem;display:flex}#article-container .comments-section .comments-list .comment-item .comment-content .comment-header .username{color:#1a202c;font-size:.95rem;font-weight:700}#article-container .comments-section .comments-list .comment-item .comment-content .comment-header .time{color:#9ca3af;white-space:nowrap;font-size:.85rem;font-weight:500}#article-container .comments-section .comments-list .comment-item .comment-content .text{color:#4b5563;word-wrap:break-word;margin:0;font-size:.95rem;line-height:1.7}#article-container .loading-spinner{text-align:center;color:#6b7280;padding:4rem 2rem}#article-container .loading-spinner .spinner{border:4px solid #f3f4f6;border-top-color:#667eea;border-radius:50%;width:3rem;height:3rem;margin-bottom:1.5rem;animation:1s cubic-bezier(.68,-.55,.265,1.55) infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}#article-container .error-message{color:#dc2626;text-align:center;background:linear-gradient(135deg,#fef2f2 0%,#fee2e2 100%);border:2px solid #fecaca;border-radius:12px;padding:2.5rem;font-size:1rem;font-weight:600}#article-container .toast-message{color:#fff;opacity:0;z-index:1000;backdrop-filter:blur(10px);background:linear-gradient(135deg,rgba(26,32,44,.95) 0%,rgba(45,55,72,.95) 100%);border-radius:12px;padding:1rem 2rem;font-size:.95rem;font-weight:600;transition:all .4s cubic-bezier(.68,-.55,.265,1.55);position:fixed;bottom:2rem;left:50%;transform:translate(-50%)translateY(100px);box-shadow:0 10px 40px rgba(0,0,0,.3)}#article-container .toast-message.show{opacity:1;transform:translate(-50%)translateY(0)}@media (width<=768px){#article-container{padding:1rem .5rem}#article-container .article-content{border-radius:12px;padding:2rem 1.5rem}#article-container .article-title{font-size:1.75rem}#article-container .article-meta{flex-direction:column;gap:.75rem}#article-container .article-body{font-size:1rem}#article-container .comments-section{border-radius:12px;padding:2rem 1.5rem}#article-container .comment-form{padding:1.5rem}#article-container .comment-form .form-user-info{grid-template-columns:1fr}#article-container .comment-item{padding:1.25rem}#article-container .comment-item .comment-avatar img,#article-container .comment-item .comment-avatar .avatar-placeholder{width:40px;height:40px}#article-container .like-btn{padding:.875rem 2rem!important;font-size:.9rem!important}}