.dp-magazine-nav {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--dp-white, #FFFFFF);
	border-bottom: 1px solid var(--dp-mist, #E7EFF8);
}

.dp-magazine-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1100px;
	margin: 0 auto;
	padding: 10px 40px;
	gap: 16px;
}

/* Back link */
.dp-magazine-nav__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	color: var(--dp-navy, #10254C);
	font-family: var(--dp-font-display, 'Plus Jakarta Sans', sans-serif);
	font-size: 0.82rem;
	font-weight: 600;
	transition: color 0.15s ease;
	flex-shrink: 1;
	min-width: 0;
}

.dp-magazine-nav__back:hover {
	color: var(--dp-primary, #0858D0);
}

.dp-magazine-nav__back-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 200px;
}

/* Position indicator */
.dp-magazine-nav__position {
	font-family: var(--dp-font-mono, 'JetBrains Mono', monospace);
	font-size: 0.7rem;
	color: var(--dp-slate, #64748B);
	letter-spacing: 0.04em;
	white-space: nowrap;
	flex-shrink: 0;
}

/* Arrow buttons */
.dp-magazine-nav__arrows {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

.dp-magazine-nav__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 6px;
	border: 1px solid var(--dp-steel, #C9D9EA);
	color: var(--dp-navy, #10254C);
	text-decoration: none;
	transition: all 0.15s ease;
}

a.dp-magazine-nav__arrow:hover {
	background: var(--dp-cloud, #F2F6FC);
	border-color: var(--dp-primary, #0858D0);
	color: var(--dp-primary, #0858D0);
}

.dp-magazine-nav__arrow--disabled {
	color: var(--dp-steel, #C9D9EA);
	border-color: var(--dp-mist, #E7EFF8);
	cursor: default;
	pointer-events: none;
}

/* Editor preview state */
.dp-magazine-nav--preview {
	border-bottom: 1px dashed var(--dp-steel, #C9D9EA);
}

.dp-magazine-nav--preview .dp-magazine-nav__inner {
	justify-content: center;
	padding: 16px 40px;
}

@media (max-width: 768px) {
	.dp-magazine-nav__inner {
		padding: 8px 20px;
	}

	.dp-magazine-nav__back-label {
		max-width: 120px;
	}
}

@media (max-width: 480px) {
	.dp-magazine-nav__back-label {
		display: none;
	}

	.dp-magazine-nav__back {
		flex-shrink: 0;
	}

	.dp-magazine-nav__position {
		font-size: 0.65rem;
	}
}