/* Extracted from backend/blog/templates/blog/post_list.html */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }
        html, body { width: 100%; overflow-x: hidden; background-color: var(--bg-base); color: var(--text-primary); line-height: 1.6; -webkit-font-smoothing: antialiased; letter-spacing: -0.01em; }
        img { max-width: 100%; height: auto; display: block; }
        a { text-decoration: none; color: inherit; transition: color var(--transition-speed); }
        .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; position: relative; }
        h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; }
        .bg-subtle { background-color: var(--bg-subtle); }
        header { background-color: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-light); z-index: 100; position: sticky; top: 0; }
        .logo { font-size: 18px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.03em; }
        .logo span { color: var(--accent-blue); }
        .nav-links { display: flex; gap: 24px; }
        .nav-links a { font-weight: 500; color: var(--text-secondary); font-size: 14px; }
        .nav-links a:hover, .nav-links a.active { color: var(--text-primary); }
        .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; font-weight: 500; font-size: 14px; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-speed) ease; border: 1px solid transparent; }
        .btn-sm { padding: 6px 12px; font-size: 13px; }
        .btn-primary { background-color: var(--text-primary); color: var(--bg-base); }
        .btn-primary:hover { background-color: var(--btn-primary-hover-bg); color: var(--btn-primary-hover-fg); box-shadow: var(--shadow-micro); }
        .btn-outline { background-color: transparent; color: var(--text-primary); border: 1px solid var(--border-light); }
        .btn-outline:hover { border-color: var(--border-focus); background-color: var(--bg-subtle); }
        .input-field { padding: 10px 16px; font-size: 14px; border: 1px solid var(--border-light); border-radius: var(--radius-md); outline: none; width: 100%; transition: border-color var(--transition-speed); font-family: inherit; }
        .input-field:focus { border-color: var(--border-focus); box-shadow: 0 0 0 2px var(--mc-blue-bg); }
        .tag { font-size: 11px; font-weight: 600; text-transform: uppercase; padding: 4px 8px; border-radius: var(--radius-sm); letter-spacing: 0.05em; display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border-light); color: var(--text-secondary); background: var(--bg-subtle); transition: all var(--transition-speed); }
        a.tag { text-decoration: none; }
        a.tag:hover { color: var(--accent-blue); }
        .tag-blue { color: var(--mc-blue-text); border-color: var(--mc-blue-border); background: var(--mc-blue-bg); }
        .tag-featured { background: var(--text-primary); color: var(--bg-base); border-color: var(--text-primary); }
        .cover-blue { background: linear-gradient(135deg, var(--mc-blue-bg) 0%, var(--bg-subtle) 100%); color: var(--mc-blue-text); }
        .cover-purple { background: linear-gradient(135deg, var(--mc-purple-bg) 0%, var(--bg-subtle) 100%); color: var(--mc-purple-text); }
        .cover-teal { background: linear-gradient(135deg, var(--mc-teal-bg) 0%, var(--bg-subtle) 100%); color: var(--mc-teal-text); }
        .cover-orange { background: linear-gradient(135deg, var(--mc-orange-bg) 0%, var(--bg-subtle) 100%); color: var(--mc-orange-text); }
        .cover-grid { background-image: radial-gradient(var(--border-hover) 1px, transparent 1px); background-size: 20px 20px; background-color: var(--bg-subtle); color: var(--text-secondary); }
        .featured-section { padding: 48px 0; border-bottom: 1px solid var(--border-light); background-color: var(--bg-subtle); }
        .featured-card { display: flex; background: var(--bg-base); border: 1px solid var(--border-light); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-speed); }
        .featured-card:hover { box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05); }
        .featured-cover { width: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 80px; border-right: 1px solid var(--border-light); position: relative; overflow: hidden; }
        .featured-cover img { width: 100%; height: 100%; object-fit: cover; }
        .featured-content { padding: 48px; display: flex; flex-direction: column; justify-content: center; width: 50%; }
        .featured-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
        .featured-title { font-size: 32px; font-weight: 800; color: var(--text-primary); margin-bottom: 16px; line-height: 1.2; letter-spacing: -0.03em; }
        .featured-excerpt { font-size: 16px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 32px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
        .featured-author { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
        .author-info { display: flex; align-items: center; gap: 12px; }
        .author-info img { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-light); object-fit: cover; }
        .author-details { display: flex; flex-direction: column; }
        .author-name { font-size: 14px; font-weight: 600; color: var(--text-primary); text-decoration: none; transition: color var(--transition-speed); }
        .author-name:hover { color: var(--accent-blue); }
        .author-date { font-size: 12px; color: var(--text-tertiary); }
        .blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; padding: 64px 0; align-items: start; }
        main { min-width: 0; }
        .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; border-bottom: 1px solid var(--border-light); padding-bottom: 16px; }
        .section-title { font-size: 20px; display: flex; align-items: center; gap: 8px; margin: 0; }
        .text-tertiary { color: var(--text-tertiary); }
        .blog-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 32px; }
        .blog-card-h { display: flex; flex-direction: column; background: var(--bg-base); border: 1px solid var(--border-light); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow var(--transition-speed), border-color var(--transition-speed); }
        .blog-card-h:hover { box-shadow: var(--shadow-sm); border-color: var(--border-hover); }
        .blog-card-h-cover { width: 100%; aspect-ratio: 16 / 9; border-bottom: 1px solid var(--border-light); display: flex; align-items: center; justify-content: center; font-size: 40px; position: relative; overflow: hidden; }
        .blog-card-h-cover img { width: 100%; height: 100%; object-fit: cover; }
        .blog-card-h-content { padding: 32px; display: flex; flex-direction: column; flex-grow: 1; min-width: 0; }
        .blog-card-h-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; font-family: monospace; font-size: 12px; color: var(--text-tertiary); }
        .blog-card-h-meta span { text-transform: uppercase; letter-spacing: 0.05em; }
        .blog-card-h-title { font-size: 20px; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; line-height: 1.3; transition: color var(--transition-speed); }
        .blog-card-h-title a { color: inherit; text-decoration: none; }
        .blog-card-h:hover .blog-card-h-title { color: var(--accent-blue); }
        .featured-title a { color: inherit; text-decoration: none; transition: color var(--transition-speed); }
        .featured-card:hover .featured-title a, .featured-title a:hover { color: var(--accent-blue); }
        .blog-card-h-excerpt { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 24px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .blog-card-h-footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border-light); padding-top: 16px; }
        .blog-card-h-author { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-primary); text-decoration: none; transition: color var(--transition-speed); }
        .blog-card-h-author:hover { color: var(--accent-blue); }
        .blog-card-h-author img { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border-light); object-fit: cover; }
        .read-more { font-size: 13px; font-weight: 600; color: var(--accent-blue); display: flex; align-items: center; gap: 4px; }
        .pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 64px; flex-wrap: wrap; }
        .page-num { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); font-size: 14px; font-weight: 500; color: var(--text-secondary); border: 1px solid var(--border-light); background: var(--bg-base); cursor: pointer; transition: all var(--transition-speed); text-decoration: none; }
        .page-num:hover:not(.disabled) { background: var(--bg-subtle); color: var(--text-primary); border-color: var(--border-hover); }
        .page-num.active { background: var(--text-primary); color: var(--bg-base); border-color: var(--text-primary); }
        .page-num.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
        .sidebar { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
        .widget { background: var(--bg-base); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-micro); word-wrap: break-word; }
        .widget-title { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border-light); color: var(--text-primary); }
        .search-widget .input-group { position: relative; width: 100%; }
        .search-widget i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); }
        .search-widget input { padding-left: 40px; }
        .cat-list { list-style: none; display: flex; flex-direction: column; }
        .cat-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border-light); transition: all var(--transition-speed); }
        .cat-item:last-child { border-bottom: none; padding-bottom: 0; }
        .cat-item:first-child { padding-top: 0; }
        .cat-item a { font-size: 14px; color: var(--text-secondary); font-weight: 500; }
        .cat-item a:hover { color: var(--accent-blue); }
        .cat-count { font-size: 12px; font-weight: 600; color: var(--text-tertiary); background: var(--bg-surface); padding: 2px 8px; border-radius: 12px; }
        .popular-list { display: flex; flex-direction: column; gap: 16px; }
        .popular-item { display: flex; gap: 12px; align-items: flex-start; }
        .popular-num { font-size: 24px; font-weight: 800; color: var(--border-light); line-height: 1; width: 24px; flex-shrink: 0; }
        .popular-title { font-size: 13px; font-weight: 500; color: var(--text-primary); line-height: 1.4; transition: color var(--transition-speed); }
        .popular-item:hover .popular-title { color: var(--accent-blue); }
        .author-initials { width: 24px; height: 24px; border-radius: 50%; background: var(--bg-surface); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: bold; color: var(--text-secondary); border: 1px solid var(--border-light); }
        .newsletter-form-widget { display: flex; flex-direction: column; gap: 8px; }
        .newsletter-form-widget .btn { width: 100%; }
        .sidebar-empty-hint { font-size: 13px; color: var(--text-tertiary); margin: 0; }
        @media (max-width: 992px) {
            .blog-layout { grid-template-columns: minmax(0, 1fr); gap: 48px; padding-bottom: 48px; }
            .featured-card { flex-direction: column; }
            .featured-cover { width: 100%; height: 250px; border-right: none; border-bottom: 1px solid var(--border-light); }
            .featured-content { width: 100%; padding: 32px; }
        }
        @media (max-width: 768px) {
            .container { padding: 0 16px; width: 100%; }
            .featured-section { padding: 24px 0; }
            .featured-title { font-size: 24px; }
            .featured-content { padding: 24px; }
            .blog-card-h { flex-direction: column; }
            .blog-card-h-cover { width: 100%; height: 200px; border-right: none; border-bottom: 1px solid var(--border-light); }
            .blog-card-h-content { padding: 24px 20px; }
            .blog-card-h-title { font-size: 18px; }
            .pagination { flex-wrap: wrap; margin-top: 40px; }
            .blog-pagination-wrap { margin-top: 40px; }
        }

        .blog-pagination-wrap {
            margin-top: clamp(2rem, 5vw, 3rem);
            display: flex;
            justify-content: center;
        }