.about-panel {
	overflow: auto;
}

.about-header {
	position: sticky;
	top: 0;
	z-index: 5;
	background: linear-gradient(180deg, rgba(11,15,26,0.98), rgba(11,15,26,0.92));
}

.about-hero {
	margin: 14px 16px 12px;
	border-radius: 14px;
	background: linear-gradient(120deg, rgba(63,93,255,0.16), rgba(114,92,255,0.08));
	border: 1px solid rgba(120,140,255,0.35);
}

.about-hero h1 {
	margin-bottom: 10px;
	font-size: 2rem;
}

.about-meta {
	margin: 0 16px 10px;
	font-size: 12px;
	color: var(--ops-v2-muted, #9ca3af);
}

.about-content {
	margin: 0 16px 16px;
	padding: 16px 18px;
	border-radius: 14px;
	background: rgba(17,24,39,0.62);
	border: 1px solid rgba(148,163,184,0.2);
	line-height: 1.55;
}

.about-content h1,
.about-content h2,
.about-content h3,
.about-content h4 {
	margin-top: 1.25rem;
}

.about-content p,
.about-content li {
	color: #e5e7eb;
}

.about-content code {
	background: rgba(15,23,42,0.9);
	padding: 2px 5px;
	border-radius: 4px;
	color: #c4b5fd;
}

.about-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 10px 0;
}

.about-content table th,
.about-content table td {
	border: 1px solid rgba(148,163,184,0.25);
	padding: 8px;
}

.about-doc-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.about-doc-btn {
	width: 100%;
	text-align: left;
	padding: 9px 10px;
	border-radius: 10px;
	border: 1px solid rgba(148,163,184,0.22);
	background: rgba(17,24,39,0.55);
	color: #e5e7eb;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.about-doc-btn small {
	color: #9ca3af;
	font-size: 11px;
}

.about-doc-btn.active {
	border-color: rgba(99,102,241,0.8);
	background: rgba(55,65,211,0.28);
}

.about-doc-btn:hover {
	background: rgba(30,41,59,0.8);
}