.library-display,
.library-display *,
.library-display *::before,
.library-display *::after {
	box-sizing: border-box;
}

.library-display {
	--libd-color-text: #1a1a1a;
	--libd-color-text-muted: #555;
	--libd-color-text-soft: #888;
	--libd-color-bg: #fff;
	--libd-color-bg-hover: #efefed;
	--libd-color-bg-entry-hover: #f5f5f3;
	--libd-color-border: #d0cfc8;
	--libd-color-border-soft: #e0dfd8;
	--libd-color-box-outline: #e0dfd8;
	--libd-color-border-hover: #c8c7c0;
	--libd-color-dot: #bbb;
	--libd-color-active: #1a1a1a;
	--libd-color-active-text: #fff;

	color: var(--libd-color-text);
	max-width: 900px;
	margin: 0 auto;
}

.library-display .libd-search-bar {
	display: flex;
	gap: 8px;
	margin-bottom: 1.5rem;
}

.library-display .libd-search {
	flex: 1;
	padding: 9px 14px;
	font-size: 14px;
	border: 1px solid var(--libd-color-border);
	border-radius: 8px;
	background: var(--libd-color-bg);
	color: var(--libd-color-text);
	outline: none;
	transition: border-color 0.15s;
}

.library-display .libd-search:focus {
	border-color: var(--libd-color-text-soft);
}

.library-display .libd-clear {
	padding: 9px 16px;
	font-size: 13px;
	border: 1px solid var(--libd-color-border);
	border-radius: 8px;
	background: var(--libd-color-bg);
	color: var(--libd-color-text-muted);
	cursor: pointer;
	transition: background 0.1s;
}

.library-display .libd-clear:hover {
	background: var(--libd-color-bg-hover);
}

.library-display .libd-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 2rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--libd-color-border-soft);
}

.library-display .libd-nav-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 10px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--libd-color-text-muted);
	border: 1px solid var(--libd-color-border);
	cursor: pointer;
	text-decoration: none;
	background: var(--libd-color-bg);
	transition: background 0.1s, color 0.1s, border-color 0.1s;
	user-select: none;
}

.library-display .libd-nav-link:hover {
	background: var(--libd-color-bg-hover);
	color: var(--libd-color-text);
}

.library-display .libd-nav-link.libd-active {
	background: var(--libd-color-active);
	color: var(--libd-color-active-text);
	border-color: var(--libd-color-active);
}

.library-display .libd-nav-link.libd-empty {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.library-display .libd-result-count {
	font-size: 13px;
	color: var(--libd-color-text-soft);
	margin-bottom: 1.25rem;
}

.library-display .libd-section {
	margin-bottom: 2rem;
}

.library-display .libd-section-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 0.875rem;
}

.library-display .libd-section-letter {
	font-size: 22px;
	font-weight: 500;
	color: var(--libd-color-text);
	width: 36px;
	flex-shrink: 0;
}

.library-display .libd-section-line {
	flex: 1;
	height: 1px;
	background: var(--libd-color-border-soft);
}

.library-display .libd-entries {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 6px;
}

.library-display .libd-entry {
	padding: 9px 13px;
	border-radius: 8px;
	border: 1px solid var(--libd-color-box-outline);
	font-size: 14px;
	color: var(--libd-color-text);
	background: var(--libd-color-bg);
	display: flex;
	align-items: center;
	gap: 9px;
	cursor: pointer;
	transition: background 0.1s, border-color 0.1s;
	text-decoration: none;
}

.library-display .libd-entry:hover {
	background: var(--libd-color-bg-entry-hover);
	border-color: var(--libd-color-border-hover);
}

.library-display .libd-entry-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--libd-color-dot);
	flex-shrink: 0;
}

.library-display .libd-no-results {
	font-size: 14px;
	color: var(--libd-color-text-soft);
	padding: 1rem 0;
}