/* Shared profile article cards — mirrors masli-lofi.css article styles */
.article-card,.article-compact-card{background:var(--profile-surface);border:1px solid var(--profile-border);border-radius:var(--profile-radius);overflow:hidden;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease;display:flex;flex-direction:column}
.article-card:hover,.article-compact-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.25)}
.article-card-img{width:100%;height:180px;object-fit:cover;display:block;transform-origin:center;will-change:transform;animation:profilePanZoom 20s ease-in-out infinite alternate}
.article-card-body{padding:16px;flex:1;display:flex;flex-direction:column}
.article-card-date{font-size:12px;color:var(--profile-muted);margin-bottom:6px}
.article-card-title{font-size:16px;font-weight:700;color:var(--profile-text);line-height:1.3;margin-bottom:8px}
.article-card-excerpt{font-size:13px;color:var(--profile-muted);line-height:1.5;flex:1}
.article-card-footer{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-top:1px solid var(--profile-border);font-size:13px;color:var(--profile-muted)}
.article-byline-label{font-size:11px;color:var(--profile-muted)}
.article-read-more{color:var(--profile-accent);font-weight:600;display:inline-flex;align-items:center;gap:4px}
.article-read-more-arrow{transition:transform .2s}
.article-card:hover .article-read-more-arrow{transform:translateX(4px)}
.article-youtube-badge{display:inline-block;padding:2px 8px;border-radius:4px;background:#ff0000;color:#fff;font-size:10px;font-weight:700;margin-left:6px;vertical-align:middle}
.article-compact-card{flex-direction:row}
.article-compact-body{display:flex;gap:12px;padding:12px;flex:1}
.article-small-img{width:80px;height:80px;object-fit:cover;border-radius:8px;flex-shrink:0;transform-origin:center;will-change:transform;animation:profilePanZoom 20s ease-in-out infinite alternate}
.article-compact-text{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.article-compact-title{font-size:14px;font-weight:600;color:var(--profile-text);line-height:1.3;margin-bottom:4px}
.article-title-row{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:8px;cursor:pointer;transition:background .2s}
.article-title-row:hover{background:var(--profile-surface);border:1px solid var(--profile-border)}
.article-title-row-text{flex:1;min-width:0;font-size:14px;color:var(--profile-text)}
.article-title-row-arrow{color:var(--profile-muted);font-size:14px}
.articles-row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:20px}
.articles-row-title{display:flex;flex-direction:column;gap:4px}
.articles-section{padding:40px 20px;max-width:1200px;margin:0 auto}
.articles-section .section-title{font-size:24px;font-weight:700;margin-bottom:24px;color:var(--profile-text)}
.articles-actions{margin-bottom:20px}
.add-article-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:var(--profile-surface);border:1px solid var(--profile-border);border-radius:8px;color:var(--profile-muted);text-decoration:none;font-size:13px;transition:all .3s}
.add-article-btn:hover{background:var(--profile-accent);color:#fff;border-color:transparent}
.articles-readmore-wrap{text-align:center;margin:24px 0}
.articles-readmore-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;background:var(--profile-surface);border:1px solid var(--profile-border);border-radius:999px;color:var(--profile-text);font-size:14px;font-weight:600;cursor:pointer;transition:all .3s}
.articles-readmore-btn:hover{background:var(--profile-accent);color:#fff;border-color:transparent}
.articles-readmore-badge{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;border-radius:12px;background:var(--profile-accent);color:#fff;font-size:12px;font-weight:700;padding:0 8px}
.articles-readmore-arrow{transition:transform .2s}
.articles-readmore-btn:hover .articles-readmore-arrow{transform:translateX(4px)}
.articles-pagination{text-align:center;margin:24px 0}
.pagination-status{font-size:13px;color:var(--profile-muted);margin-bottom:12px}
.pagination-controls{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.pagination-btn{padding:8px 16px;background:var(--profile-surface);border:1px solid var(--profile-border);border-radius:8px;color:var(--profile-text);font-size:13px;cursor:pointer;transition:all .2s}
.pagination-btn:hover:not(:disabled){background:var(--profile-accent);color:#fff;border-color:transparent}
.pagination-btn:disabled{opacity:.4;cursor:not-allowed}
.pagination-page-btn{width:36px;height:36px;border-radius:8px;border:1px solid var(--profile-border);background:var(--profile-surface);color:var(--profile-text);font-size:13px;cursor:pointer;transition:all .2s}
.pagination-page-btn.active{background:var(--profile-accent);color:#fff;border-color:transparent}
.pagination-page-btn:hover:not(.active){background:var(--profile-accent);color:#fff;border-color:transparent;opacity:.8}
.pagination-per-page{margin-top:12px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;color:var(--profile-muted)}
.pagination-select{padding:6px 10px;background:var(--profile-surface);border:1px solid var(--profile-border);border-radius:6px;color:var(--profile-text);font-size:13px}
.article-engagement{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 10px}
.article-engagement--compact{gap:8px;margin-top:4px}
.article-engagement--inline{gap:10px;margin-left:auto;margin-right:8px}
.article-stat-views{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--profile-muted)}
.article-stat-like{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--profile-border);background:var(--profile-surface);color:var(--profile-muted);font-size:13px;cursor:pointer;transition:all .2s;min-height:36px}
.article-stat-like:hover{transform:translateY(-1px);border-color:var(--profile-accent);color:var(--profile-text)}
.article-stat-like.is-liked{border-color:#ff6b9d;color:#ff6b9d}
.article-stat-like.is-loading{opacity:.7;pointer-events:none}
.stat-ico{font-size:14px}
.stat-suffix{font-size:12px;opacity:.85}
.hero-articles{padding:60px 0;position:relative;z-index:2}
.hero-articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1200px;margin:0 auto;padding:0 20px}
@media(max-width:768px){.hero-articles-grid{grid-template-columns:1fr;gap:16px}.hero-articles{padding:40px 0}.articles-row-3{grid-template-columns:1fr}.article-card-img{height:140px}.article-card-title{font-size:15px}}
@keyframes profilePanZoom{0%{transform:scale(1) translate3d(0,0,0)}50%{transform:scale(1.08) translate3d(-1%,0.5%,0)}100%{transform:scale(1.14) translate3d(1%,-0.5%,0)}}
@media(prefers-reduced-motion:reduce){.article-card-img,.article-small-img{animation:none!important;transform:none!important}}