body {
background: #000;
color: #fff;
margin: 0;
}

.doc {
max-width: 880px;
margin: 120px auto 80px;
padding: 32px 24px;
background: #0b0b0b;
border-radius: 18px;
box-shadow: 0 0 40px rgba(255,0,0,0.08);
}

.doc h1 {
color: #ff0000;
font-size: 28px;
margin-bottom: 12px;
}

.doc h2 {
margin-top: 28px;
margin-bottom: 10px;
font-size: 18px;
color: #ffffff;
}

.doc p {
font-size: 14px;
line-height: 1.7;
opacity: 0.9;
margin-bottom: 12px;
}

.date {
font-size: 12px;
opacity: 0.5;
margin-bottom: 24px;
}

@media (max-width: 600px) {
.doc {
margin: 96px 12px 60px;
padding: 24px 16px;
}
.doc h1 {
font-size: 22px;
}
}

.doc-wrapper {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: flex-start;
padding: 120px 16px 60px;
background: radial-gradient(circle at top, #120000, #000);
}

.doc {
max-width: 900px;
width: 100%;
background: #0b0b0b;
border-radius: 20px;
padding: 40px 32px;
box-shadow: 0 0 50px rgba(255,0,0,0.12);
animation: fadeUp 0.8s ease;
}

.doc h1 {
color: #ff0000;
font-size: 28px;
margin-bottom: 8px;
}

.doc .date {
font-size: 12px;
opacity: 0.5;
margin-bottom: 24px;
}

.doc h2 {
margin-top: 28px;
margin-bottom: 10px;
font-size: 18px;
}

.doc p {
font-size: 14px;
line-height: 1.7;
opacity: 0.9;
margin-bottom: 12px;
}

.back-btn {
display: inline-block;
margin-bottom: 24px;
padding: 10px 18px;
border-radius: 12px;
background: #1a1a1a;
color: #fff;
text-decoration: none;
font-size: 13px;
transition: 0.25s;
}

.back-btn:hover {
background: #ff0000;
color: #fff;
}

@media (max-width: 600px) {
.doc {
padding: 28px 20px;
}
.doc h1 {
font-size: 22px;
}
}