.articles-page{min-height:100vh;background-color:#fff;padding:40px 20px 80px}.articles-container{max-width:1200px;margin:0 auto}.articles-header{text-align:center;margin-bottom:64px;padding-top:20px}.articles-header h1{font-size:2.75rem;font-weight:700;color:#212529;margin-bottom:16px;letter-spacing:-.02em}.articles-subtitle{font-size:1.125rem;color:#6c757d;max-width:600px;margin:0 auto;line-height:1.6}.no-articles{text-align:center;padding:80px 20px;background:#fff;border-radius:12px;border:1px solid #e9ecef}.no-articles p{font-size:1.125rem;color:#6c757d;margin-bottom:12px}.no-articles .hint{font-size:.9375rem;color:#adb5bd}.articles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));grid-gap:40px;gap:40px}.article-card{background:#fff;border-radius:12px;overflow:hidden;border:1px solid #e9ecef;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}.article-card:hover{transform:translateY(-6px);box-shadow:0 12px 32px rgba(0,0,0,.12);border-color:#dee2e6}.article-link{text-decoration:none;color:inherit;display:block}.article-image{width:100%;height:180px;overflow:hidden;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;position:relative}.article-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.05))}.article-image img{width:100px;height:100px;object-fit:contain;position:relative;z-index:1}.article-content{padding:24px}.article-meta{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}.article-category{display:inline-block;padding:4px 10px;background:#f8f9fa;color:#495057;border-radius:4px;font-size:.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.article-date{font-size:.8125rem;color:#adb5bd}.article-title{font-size:1.375rem;font-weight:700;color:#212529;margin-bottom:12px;line-height:1.4;letter-spacing:-.01em}.article-description{font-size:.9375rem;color:#6c757d;line-height:1.6;margin-bottom:16px}.article-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.article-tag{display:inline-block;padding:4px 10px;background:#f1f3f5;color:#495057;border-radius:4px;font-size:.8125rem}.article-author{font-size:.875rem;color:#868e96;font-style:italic}@media (max-width:768px){.articles-header h1{font-size:2rem}.articles-subtitle{font-size:1rem}.articles-grid{grid-template-columns:1fr;gap:24px}.article-title{font-size:1.25rem}}@media (max-width:480px){.articles-page{padding:20px 16px}.articles-header{margin-bottom:40px;padding-top:20px}.articles-header h1{font-size:1.75rem}}