.detail-page-back-nav{margin-top:2rem;margin-bottom:1rem;padding-bottom:1rem}.detail-back-button{color:#667eea;cursor:pointer;background:0 0;border:none;align-items:center;gap:.5rem;padding:0;font-family:inherit;font-size:1rem;font-weight:600;text-decoration:none;transition:color .2s;display:inline-flex}.detail-back-button:hover{color:#764ba2;text-decoration:underline}.detail-back-button:before{content:"←";font-size:1.2rem}.article-detail{background:#fff;border-radius:12px;margin-bottom:2rem;padding:2.5rem;position:relative;box-shadow:0 2px 8px #0000001a}.bookmark-container{z-index:10;pointer-events:none;position:absolute;top:2.5rem;right:2.5rem}.bookmark-container>*,.bookmark-container *{pointer-events:auto}.bookmark-button-wrapper{z-index:11;pointer-events:auto;position:relative}.bookmark-button{cursor:pointer;z-index:11;pointer-events:auto;background:#fff;border:2px solid #e0e0e0;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;padding:0;transition:all .2s;display:flex;position:relative}.bookmark-button:hover{background:#f8f9fa;border-color:#667eea;transform:scale(1.05)}.bookmark-button.bookmarked{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-color:#667eea}.bookmark-button.bookmarked:hover{background:linear-gradient(135deg,#764ba2 0%,#667eea 100%);border-color:#764ba2}.bookmark-button:disabled{opacity:.6;cursor:not-allowed}.bookmark-button svg{pointer-events:none;width:20px;height:20px}.bookmark-message{color:#666;white-space:nowrap;pointer-events:none;z-index:11;padding:.25rem .5rem;font-size:.75rem;animation:.3s fadeInOut;position:absolute;top:calc(100% + .5rem);left:50%}@keyframes fadeInOut{0%{opacity:0;transform:translate(-50%,-4px)}to{opacity:1;transform:translate(-50%)}}.article-detail-header{z-index:1;border-bottom:2px solid #f0f0f0;margin-bottom:3rem;padding-bottom:2rem;position:relative}.article-tags-list{flex-wrap:wrap;gap:.5rem;display:flex}.article-tag{color:#666;background:#f0f0f0;border-radius:12px;padding:.3rem .8rem;font-size:.75rem;font-weight:500;display:inline-block}.article-detail-title{color:#333;max-width:900px;margin:0 1.5rem 1.5rem;padding-right:60px;font-size:3rem;font-weight:700;line-height:1.2}.article-detail-author{color:#666;align-items:center;gap:.5rem;margin-left:1.5rem;font-size:1rem;display:flex}.author-label{color:#999}.author-name{color:#667eea;font-weight:600}.article-detail-date{color:#999}.article-detail-content{color:#333;max-width:750px;margin:0 auto;font-size:1rem;line-height:1.7}.article-detail-content h1,.article-detail-content h2,.article-detail-content h3,.article-detail-content h4,.article-detail-content h5,.article-detail-content h6{color:#333;margin-top:2rem;margin-bottom:1rem;font-weight:700}.article-detail-content h1{border-bottom:2px solid #eee;padding-bottom:.5rem;font-size:2rem}.article-detail-content h2{margin-top:2.5rem;font-size:1.75rem}.article-detail-content h3{font-size:1.5rem}.article-detail-content h4{font-size:1.25rem}.article-detail-content p{margin-bottom:1.5rem}.article-detail-content ul,.article-detail-content ol{margin-bottom:1.5rem;padding-left:2rem}.article-detail-content li{margin-bottom:.5rem}.article-detail-content blockquote{color:#666;background:#f8f9fa;border-left:4px solid #667eea;border-radius:4px;margin:1.5rem 0;padding:1rem 1rem 1rem 1.5rem;font-style:italic}.article-detail-content code{color:#e83e8c;background:#f4f4f4;border-radius:4px;padding:.2rem .4rem;font-family:Courier New,monospace;font-size:.9em}.article-detail-content pre{background:#f8f9fa;border:1px solid #e9ecef;border-radius:6px;margin-bottom:1.5rem;padding:1rem;overflow-x:auto}.article-detail-content pre code{color:#333;background:0 0;padding:0}.article-detail-content a{color:#667eea;border-bottom:1px solid #0000;text-decoration:none;transition:border-color .2s}.article-detail-content a:hover{border-bottom-color:#667eea}.article-detail-content strong{color:#333;font-weight:700}.article-detail-content em{font-style:italic}.article-detail-content hr{border:none;border-top:2px solid #eee;margin:2rem 0}.article-keywords-section{border-top:2px solid #f0f0f0;margin-top:3rem;padding-top:2rem}.article-keywords-label{color:#666;margin-bottom:1rem;font-size:.875rem;font-weight:600}.article-detail-footer{border-top:2px solid #f0f0f0;margin-top:2rem;padding-top:2rem}.back-to-list-link,.header-back-link{color:#fff;margin-bottom:1rem;font-weight:600;text-decoration:none;transition:opacity .2s;display:inline-block}.back-to-list-link{color:#667eea;margin-bottom:0}.back-to-list-link:hover,.header-back-link:hover{opacity:.8}.header-back-link{display:block}.back-link{color:#667eea;margin-top:1rem;font-weight:600;text-decoration:none;display:inline-block}.back-link:hover{text-decoration:underline}.latest-articles-section{margin-top:2rem}.latest-articles-section .section-title{color:#212529;border-bottom:2px solid #e9ecef;margin:0 0 1.5rem;padding-bottom:.75rem;font-size:1.5rem;font-weight:600}.articles-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;display:grid}.article-card{color:inherit;background:#fff;border:1px solid #e9ecef;border-radius:8px;flex-direction:column;padding:1.5rem;text-decoration:none;transition:all .2s;display:flex;box-shadow:0 1px 3px #0000001a}.article-card:hover{border-color:#667eea}.article-card-title{color:#333;margin:0 0 .75rem;font-size:1.25rem;font-weight:600;line-height:1.4}.article-card-excerpt{color:#666;flex:1;margin:0 0 1rem;font-size:.95rem;line-height:1.6}.article-card-footer{color:#999;border-top:1px solid #f0f0f0;justify-content:space-between;align-items:center;margin-top:auto;padding-top:1rem;font-size:.875rem;display:flex}.article-author{font-weight:500}.article-date{color:#999}@media (max-width:768px){.article-detail{padding:2rem 1.5rem}.bookmark-container{top:1.5rem;right:1.5rem}.bookmark-button{width:40px;height:40px}.bookmark-button svg{width:18px;height:18px}.bookmark-message{padding:.2rem .4rem;font-size:.7rem}.article-detail-title{font-size:1.875rem}.article-detail-content{font-size:1rem}.article-detail-content h1{font-size:1.75rem}.article-detail-content h2{font-size:1.5rem}.article-detail-content h3{font-size:1.25rem}.articles-grid{grid-template-columns:1fr}}
