:root{--primary: #2563eb;--primary-dark: #1e40af;--accent: #f97316;--surface: #f8fafc;--surface-alt: #f1f5f9;--text: #0f172a;--muted: #64748b;--muted-dark: #475569;--border: #e2e8f0;--shadow: 0 12px 30px rgba(15, 23, 42, .08);--radius-lg: 20px;--radius-md: 14px;--container-width: 1400px}*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Microsoft YaHei,sans-serif;background:var(--surface);color:var(--text);line-height:1.6}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}button,input,textarea{font-family:inherit}.container{width:min(1400px,100%);margin:0 auto;padding:0 24px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.7rem 1.4rem;border-radius:999px;border:none;cursor:pointer;font-weight:600;transition:transform .2s ease,box-shadow .2s ease}.btn.primary{background:var(--primary);color:#fff;box-shadow:0 10px 20px #2563eb33}.btn.primary:hover{transform:translateY(-1px)}.text-link{color:var(--primary);font-weight:600}[v-cloak]{display:none}.article-detail-page{background:#fff;min-height:100vh;padding-bottom:8rem}.article-header{padding:6rem 0 2rem}.article-header .hero-content-inner{max-width:var(--container-width);margin:0 auto;padding:0 2rem;text-align:center}.article-header .article-category{margin-bottom:1.5rem}.article-header .article-category a{display:inline-block;font-family:Inter,sans-serif;font-size:.85rem;font-weight:700;color:#3b82f6;text-transform:uppercase;letter-spacing:.15em;text-decoration:none}.article-header .article-category a:hover{color:#2563eb}.article-header h1{font-size:clamp(2.2rem,5vw,3.2rem);font-weight:800;line-height:1.2;margin-bottom:2rem;letter-spacing:-.03em;color:#0f172a}.article-header .article-meta{display:flex;justify-content:center;align-items:center;gap:1.5rem;font-family:Inter,sans-serif;margin-bottom:4rem}.article-header .article-meta .author-info{display:flex;align-items:center;gap:.75rem}.article-header .article-meta .author-info .author-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover}.article-header .article-meta .author-info .author-name{font-weight:700;color:#1e293b;font-size:.95rem}.article-header .article-meta .meta-details{display:flex;align-items:center;gap:.75rem;color:#64748b;font-size:.9rem}.article-header .article-meta .meta-details .meta-dot{font-weight:700;opacity:.5}.article-header .hero-image{width:100%;aspect-ratio:16/9;background-size:cover;background-position:center;border-radius:12px;box-shadow:0 10px 30px -5px #0000001a;margin-bottom:2rem;max-height:300px}.content-wrapper{max-width:var(--container-width);margin:0 auto;padding:0 2rem}.article-content{font-size:1.15rem;line-height:1.85;color:#334155;font-family:Georgia,serif}.article-content>p:first-of-type:first-letter{float:left;font-size:3.5rem;line-height:.8;font-weight:700;margin-right:.6rem;margin-top:.2rem;color:#0f172a}.article-content p{margin-bottom:2rem}.article-content h1{font-size:clamp(1.8rem,4vw,2.5rem)}.article-content h2{font-family:Inter,sans-serif;font-size:1.8rem;font-weight:800;color:#0f172a;margin:4rem 0 1.5rem;letter-spacing:-.02em}.article-content h3{font-family:Inter,sans-serif;font-size:1.4rem;font-weight:700;color:#1e293b;margin:2.5rem 0 1rem}.article-content blockquote{font-size:1.4rem;font-style:italic;color:#475569;border-left:4px solid #3b82f6;padding-left:2rem;margin:3rem 0;line-height:1.6;background:#f8fafc;padding:2rem;border-radius:0 12px 12px 0}.article-content img{width:100%;border-radius:12px;margin:3rem 0}.article-content ul,.article-content ol{margin-bottom:2rem;padding-left:1.5rem;font-family:Inter,sans-serif}.article-content ul li,.article-content ol li{margin-bottom:.75rem;color:#475569}.article-sidebar{margin:4rem 0;border-top:1px solid #e2e8f0;padding-top:3rem}.article-sidebar .share-widget h3{text-align:center;font-family:Inter,sans-serif;font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;color:#94a3b8;margin-bottom:1.5rem}.article-sidebar .share-widget .share-buttons{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap}.article-sidebar .share-widget .share-buttons button{display:flex;align-items:center;gap:.6rem;padding:.75rem 1.5rem;background:#fff;border:1px solid #e2e8f0;border-radius:100px;color:#475569;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .2s}.article-sidebar .share-widget .share-buttons button:hover{background:#0f172a;border-color:#0f172a;color:#fff;transform:translateY(-2px);box-shadow:0 10px 15px -3px #0000001a}.comments-section{max-width:var(--container-width);margin:0 auto;padding:4rem 2rem 0;border-top:1px solid #f1f5f9;font-family:Inter,sans-serif}.comments-section h3{font-size:1.6rem;font-weight:800;color:#0f172a;margin-bottom:2.5rem}.comments-section .comment-form{margin-bottom:4rem}.comments-section .comment-form textarea{width:100%;min-height:120px;padding:1.25rem;border:1px solid #e2e8f0;border-radius:12px;font-family:inherit;background:#f8fafc;transition:all .2s;margin-bottom:1rem}.comments-section .comment-form textarea:focus{background:#fff;border-color:#0f172a;outline:none}.comments-section .comment-form button{float:right;background:#0f172a;color:#fff;padding:.8rem 2rem;border-radius:8px;font-weight:600;border:none;cursor:pointer;transition:background .2s}.comments-section .comment-form button:hover{background:#334155}.comments-section .comment-form button:disabled{background:#cbd5e1}.comments-section .comment-form:after{content:"";display:table;clear:both}.comments-section .comments-list{display:flex;flex-direction:column;gap:3rem}.comments-section .comment-item{display:flex;gap:1.5rem}.comments-section .comment-item .avatar-placeholder{width:48px;height:48px;border-radius:12px;background:#0f172a;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}.comments-section .comment-item .comment-body{flex:1}.comments-section .comment-item .comment-body .comment-header{display:flex;justify-content:space-between;margin-bottom:.5rem}.comments-section .comment-item .comment-body .comment-header .comment-user{font-weight:700;color:#0f172a}.comments-section .comment-item .comment-body .comment-header .comment-date{font-size:.85rem;color:#94a3b8}.comments-section .comment-item .comment-body .comment-text{color:#334155;line-height:1.6;margin-bottom:.75rem}.comments-section .comment-item .comment-body .comment-actions{display:flex;gap:1.5rem}.comments-section .comment-item .comment-body .comment-actions button{background:none;border:none;color:#94a3b8;font-size:.85rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:.4rem}.comments-section .comment-item .comment-body .comment-actions button:hover{color:#0f172a}.comments-section .comment-item .comment-body .comment-actions button.active{color:#ef4444}@media (max-width: 768px){.article-header{padding:4rem 0 1rem}.article-header h1{font-size:2.2rem}.content-wrapper,.comments-section{padding:0 1.5rem}}