.article-detail-section {padding:40px 0;}
.article-detail-container {display:flex;gap:40px;align-items:flex-start;position:relative;}
.article-main {flex:1;background-color:var(--surface-color);border-radius:var(--radius);padding:25px 40px 35px;border:1px solid var(--border-color);}
.breadcrumb {margin-bottom:20px;font-size:14px;color:var(--text-muted);}
.breadcrumb a {color:var(--text-muted);transition:var(--transition);}
.breadcrumb a:hover {color:var(--primary-color);}
.breadcrumb span {color:var(--text-color);}
.article-category {display:inline-block;background-color:var(--primary-color);color:white;font-size:12px;font-weight:600;padding:4px 12px;border-radius:4px;margin-bottom:20px;text-transform:uppercase;letter-spacing:0.5px;}
.article-title {font-size:32px;font-weight:700;line-height:1.3;margin-bottom:20px;}
.article-meta {display:flex;align-items:center;justify-content:space-between;margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid var(--border-color);flex-wrap:wrap;gap:15px;}
.author-info-small {display:flex;align-items:center;gap:12px;}
.author-avatar-small {width:44px;height:44px;border-radius:50%;object-fit:cover;}
.author-details {display:flex;flex-direction:column;}
.author-name {font-weight:600;font-size:15px;}
.author-role {font-size:13px;color:var(--text-muted);}
.meta-info {display:flex;align-items:center;gap:20px;color:var(--text-muted);font-size:14px;}
.article-date,.article-reading-time {display:flex;align-items:center;gap:6px;}
.article-featured-image {width:100%;height:400px;object-fit:cover;border-radius:var(--radius);margin-bottom:30px;}
.article-content {font-size:17px;line-height:1.8;margin-bottom:40px;}
.article-content h2 {font-size:24px;margin:30px 0 15px;color:var(--text-color);font-weight:700;}
.article-content h3 {font-size:20px;margin:25px 0 12px;color:var(--text-color);font-weight:600;}
.article-content p {margin-bottom:20px;color:var(--text-muted);}
.article-content ul,.article-content ol {margin-bottom:20px;padding-left:20px;color:var(--text-muted);}
.article-content li {margin-bottom:8px;}
.article-content blockquote {border-left:4px solid var(--primary-color);padding-left:20px;margin:25px 0;font-style:italic;color:var(--text-color);background-color:var(--surface-light);padding:20px;border-radius:0 var(--radius) var(--radius) 0;}
.article-content code {background-color:var(--surface-light);padding:2px 6px;border-radius:4px;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:14px;color:var(--text-color);}
.author-section {display:flex;gap:20px;padding:25px;background-color:var(--surface-light);border-radius:var(--radius);margin-bottom:40px;border:1px solid var(--border-color);}
.author-avatar {width:80px;height:80px;border-radius:50%;object-fit:cover;}
.author-info {flex:1;}
.author-name-large {font-size:18px;font-weight:600;margin-bottom:8px;}
.author-bio {color:var(--text-muted);font-size:15px;line-height:1.6;}
.article-actions {display:flex;justify-content:space-between;align-items:center;padding:25px;background-color:var(--surface-light);border-radius:var(--radius);margin-bottom:40px;border:1px solid var(--border-color);}
.share-section h3,.comments-section h3 {font-size:20px;margin-bottom:20px;font-weight:600;}
.share-buttons {display:flex;gap:12px;}
.share-btn {cursor: pointer; display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background-color:var(--surface-color);color:var(--text-color);border:1px solid var(--border-color);transition:var(--transition);position:relative;}
.share-btn:hover {transform:translateY(-2px);border-color:var(--primary-color);}
.share-btn.twitter:hover {background-color:#1DA1F2;border-color:#1DA1F2;color:white;}
.share-btn.facebook:hover {background-color:#4267B2;border-color:#4267B2;color:white;}
.share-btn.linkedin:hover {background-color:#0077B5;border-color:#0077B5;color:white;}
.share-btn.copy:hover {background-color:var(--primary-color);border-color:var(--primary-color);color:white;}
.tooltip {position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background-color:var(--surface-color);color:var(--text-color);padding:6px 12px;border-radius:4px;font-size:12px;white-space:nowrap;opacity:0;visibility:hidden;transition:all 0.3s ease;margin-bottom:8px;border:1px solid var(--border-color);}
.tooltip:after {content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border-width:5px;border-style:solid;border-color:var(--surface-color) transparent transparent transparent;}
.share-btn:hover .tooltip {opacity:1;visibility:visible;}
.save-btn {display:flex;align-items:center;gap:8px;background-color:var(--primary-color);color:white;font-weight:600;padding:12px 24px;border-radius:20px;border:none;cursor:pointer;transition:var(--transition);position:relative;overflow:hidden;}
.save-btn:hover {transform:translateY(-2px);box-shadow:0 4px 12px rgba(255,51,102,0.3);}
.save-btn:active {transform:translateY(0);}
.save-btn.saved {background-color:#4CAF50;}
.save-btn.saving {pointer-events:none;opacity:0.8;}
.save-btn.saving:after {content:'';position:absolute;width:20px;height:20px;top:50%;left:50%;margin-left:-10px;margin-top:-10px;border:2px solid transparent;border-top-color:white;border-radius:50%;animation:button-spinner 0.6s linear infinite;}
@keyframes button-spinner {to {transform:rotate(360deg);}
;}
.comments-section {margin-bottom:60px;}
.comment-form {background-color:var(--surface-light);border-radius:var(--radius);padding:25px 25px 40px;margin-bottom:30px;border:1px solid var(--border-color);}
.form-group {margin-bottom:20px;}
.form-label {display:block;margin-bottom:8px;font-weight:600;}
.form-input,.form-textarea {width:100%;background-color:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius);padding:12px 15px;color:var(--text-color);font-size:15px;outline:none;transition:var(--transition);}
.form-input:focus,.form-textarea:focus {border-color:var(--primary-color);box-shadow:0 0 0 2px rgba(255,51,102,0.1);}
.form-textarea {min-height:120px;resize:vertical;}

.article-sidebar {width:320px;position:sticky;top:20px;align-self:flex-start;max-height:calc(100vh - 40px);overflow-y:auto;}
.sidebar-sticky {position:relative;}
.sidebar-title {font-size:20px;font-weight:700;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid var(--border-color);}
.trending-articles {display:flex;flex-direction:column;gap:20px;}
.trending-article {display:flex;gap:15px;padding:15px;background-color:var(--surface-color);border-radius:var(--radius);border:1px solid transparent;transition:var(--transition);}
.trending-article:hover {border-color:var(--primary-color);transform:translateY(-2px);}
.trending-image {width:80px;height:80px;border-radius:var(--radius);object-fit:cover;flex-shrink:0;}
.trending-content {flex:1;min-width:0;}
.trending-category {font-size:11px;color:var(--primary-color);font-weight:600;margin-bottom:5px;text-transform:uppercase;}
.trending-title {font-size:15px;font-weight:600;line-height:1.4;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;}
.trending-title:hover {color:var(--primary-color);}
@media (max-width:1024px) {.article-detail-container {flex-direction:column;}
.article-sidebar {width:100%;position:static;max-height:none;}
.trending-articles {display:grid;grid-template-columns:repeat(2,1fr);}
;}
@media (max-width:768px) {
  .article-main {
  padding: 0;
  border: none;
  background: transparent;
}
.article-title {font-size:26px;}
.article-featured-image {height:300px;}
.article-meta {flex-direction:column;align-items:flex-start;gap:15px;}
.author-section {flex-direction:column;text-align:center;}
.author-avatar {margin:0 auto;}
.article-actions {flex-direction:column;gap:20px;align-items:flex-start;}
.trending-articles {grid-template-columns:1fr;}
;}
@media (max-width:480px) {.article-title {font-size:22px;}
.article-featured-image {height:200px;}
.article-meta {gap:10px;}
.share-buttons {gap:8px;}
.share-btn {width:40px;height:40px;}
;}

.article-content iframe{display: none;}