body {
            font-family: 'Segoe UI', Arial, sans-serif;
            background: #f5f6fa;
            margin: 0;
            padding: 0;
            color: #333;
        }
        .article-wrapper {
            max-width: 860px;
            margin: 40px auto;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            overflow: hidden;
        }
        .article-header {
            background: #003a6b;
            color: #fff;
            padding: 30px 40px 20px;
        }
        .article-header h1 {
            font-size: 1.9rem;
            font-weight: 700;
            margin: 0 0 12px;
            line-height: 1.3;
            color: #fff;
        }
        .article-meta {
            font-size: 0.85rem;
            color: rgba(255,255,255,0.8);
        }
        .badge {
            display: inline-block;
            background: rgba(255,255,255,0.2);
            border: 1px solid rgba(255,217,102,0.5);
            color: #ffd966;
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 11px;
            margin-right: 6px;
            margin-bottom: 10px;
        }
        .article-body {
            padding: 30px 40px 40px;
        }
        .article-body .content {
            font-size: 1rem;
            line-height: 1.85;
            color: #333;
        }
        .article-body .content img {
            max-width: 100%;
            height: auto;
        }
        hr { border: none; border-top: 1px solid #e8edf2; margin: 20px 0; }

        @media (max-width: 600px) {
            .article-header { padding: 20px; }
            .article-header h1 { font-size: 1.4rem; }
            .article-body { padding: 20px; }
        }