:root {
	--text-main: #0f172a;
	--text-muted: #64748b;
	--bg-soft: #f8fafc;
	--brand: #8b1f1f;
}

.doc-page {
	padding-bottom: 100px;
}

.doc-container {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 24px;
}

.doc-header {
	padding: 50px 0 30px;
	border-bottom: 1px solid var(--border);
}

.doc-breadcrumb {
	font-size: 13px;
	color: var(--text-muted);
	margin-bottom: 18px;
}

.doc-breadcrumb a {
	text-decoration: none;
	color: var(--text-main);
	font-weight: 600;
}

.doc-breadcrumb span {
	margin: 0 8px;
	color: var(--brand);
}

.doc-title {
	font-size: clamp(2rem, 3.5vw, 2.8rem);
	font-weight: 800;
	letter-spacing: -1px;
	color: var(--text);
	margin-bottom: 5px;
}

.doc-subtitle {
	font-size: 1.05rem;
	color: var(--text-muted);
	max-width: 600px;
}

.doc-content {
	padding-top: 50px;
}

.doc-entry {
	font-size: 1.05rem;
	line-height: 1.9;
	color: #1f2937;
}

.doc-entry p {
	margin-bottom: 5px;
}

.doc-entry h2 {
	font-size: 1.6rem;
	font-weight: 800;
	margin: 10px 0 8px;
	color: var(--text-main);
}

.doc-entry h3 {
	font-size: 1.3rem;
	font-weight: 700;
	margin: 10px 0 5px;
}

.doc-entry ul,
.doc-entry ol {
	margin: 8px 0;
	padding-left: 24px;
}

.doc-entry li {
	margin-bottom: 3px;
}

.doc-entry img {
	max-width: 100%;
	height: auto;
	border-radius: 5px;
	margin: 30px 0;
}

@media (max-width: 768px) {
	.doc-header {
		padding: 50px 0 40px;
	}

	.doc-title {
		font-size: 2.1rem;
	}

	.doc-entry {
		font-size: 1rem;
	}
}