* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: ‘Segoe UI’, ‘Poppins’, system-ui, -apple-system, BlinkMacSystemFont, ‘Roboto’, sans-serif;
background-color: #f5f7fb;
color: #1e293b;
line-height: 1.6;
padding: 20px;
}

.article-container {
max-width: 880px;
margin: 0 auto;
background: white;
border-radius: 28px;
box-shadow: 0 20px 35px -12px rgba(0,0,0,0.1);
overflow: hidden;
padding: 30px 32px 48px;
}

.category-tag {
display: inline-block;
background: #1e40af;
color: white;
font-size: 0.75rem;
font-weight: 600;
padding: 4px 12px;
border-radius: 30px;
letter-spacing: 0.5px;
margin-bottom: 20px;
text-transform: uppercase;
}

h1 {
font-size: 2.2rem;
font-weight: 800;
line-height: 1.3;
margin-bottom: 16px;
color: #0f172a;
}

.meta {
display: flex;
gap: 20px;
color: #475569;
font-size: 0.85rem;
border-bottom: 1px solid #e2e8f0;
padding-bottom: 20px;
margin-bottom: 24px;
flex-wrap: wrap;
}

.meta span {
display: flex;
align-items: center;
gap: 6px;
}

.featured-img {
background: linear-gradient(135deg, #0f2b3d 0%, #1b4f3b 100%);
border-radius: 20px;
height: 240px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 28px;
color: white;
font-weight: bold;
font-size: 1.3rem;
text-align: center;
background-image: url(‘data:image/svg+xml;utf8,’);
background-repeat: no-repeat;
background-position: center 70px;
background-size: 50px;
}
.featured-img p {
margin-top: 100px;
background: rgba(0,0,0,0.6);
padding: 6px 14px;
border-radius: 40px;
font-size: 0.85rem;
}

h2 {
font-size: 1.6rem;
font-weight: 700;
margin: 28px 0 12px 0;
color: #0f172a;
border-left: 5px solid #eab308;
padding-left: 16px;
}

h3 {
font-size: 1.25rem;
font-weight: 600;
margin: 24px 0 10px 0;
color: #1e293b;
}

p {
margin-bottom: 18px;
font-size: 1.05rem;
color: #2d3a4b;
}

.highlight-box {
background: #e6f7ec;
border-left: 6px solid #10b981;
padding: 18px 24px;
border-radius: 20px;
margin: 28px 0;
}

table {
width: 100%;
border-collapse: collapse;
margin: 24px 0;
background: #f8fafc;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

th {
background-color: #0f3b2c;
color: white;
padding: 12px 15px;
font-weight: 600;
text-align: left;
}

td {
border-bottom: 1px solid #e2e8f0;
padding: 12px 15px;
vertical-align: top;
}

tr:last-child td {
border-bottom: none;
}

.quote {
font-size: 1.1rem;
font-style: italic;
background: #fef3c7;
padding: 20px 28px;
border-radius: 24px;
margin: 30px 0;
color: #92400e;
border-right: 4px solid #f59e0b;
}

.hashtags {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #e2e8f0;
font-size: 0.85rem;
color: #3b82f6;
word-spacing: 8px;
}

footer {
margin-top: 30px;
border-top: 1px solid #e2e8f0;
padding-top: 24px;
font-size: 0.8rem;
text-align: center;
color: #64748b;
}

@media (max-width: 640px) {
.article-container {
padding: 20px 18px;
}
h1 {
font-size: 1.7rem;
}
h2 {
font-size: 1.4rem;
}
table, thead, tbody, th, td, tr {
display: block;
}
th {
display: none;
}
td {
position: relative;
padding-left: 35%;
border-bottom: 1px solid #ddd;
}
td:before {
content: attr(data-label);
position: absolute;
left: 12px;
width: 30%;
font-weight: bold;
white-space: nowrap;
}
}