/* 全局基础样式 */
body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	background: #f5f7fa;
	color: #222;
	margin: 0;
	/* 增加一点顶部间距，使页面组件整体下移 */
	padding: 0.75rem 0 0 0;
}

/* 顶部导航调整 */
.navbar-brand {
	font-weight: 300;
	letter-spacing: .2px;
}

/* 歌词页导航链接样式（保持一致但带下划线和蓝色） */
.navbar .navbar-title-link {
	color: #0d6efd;
	text-decoration: underline;
	font-weight: 300;
	cursor: pointer;
}
.navbar .navbar-title-link:hover {
	color: #0b5ed7;
	text-decoration: underline;
}

/* 结果列表条目 */
#resultsList .list-group-item {
	cursor: default;
	padding: 0.6rem 0.75rem;
}
#resultsList .list-group-item:hover {
	background: rgba(0,0,0,0.02);
}

/* 详情面板字段行 */
#fields .field-row {
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:0.35rem 0;
	border-bottom:1px solid rgba(0,0,0,0.04);
	/* 支持换行的键值布局 */
	gap: .5rem;
}
#fields .field-key {
	font-weight:600;
	margin-right:1rem;
	white-space: nowrap;
	flex: 0 0 auto;
}
#fields .field-value {
	flex:1 1 auto;
	word-break:break-word;
	padding-right:0.5rem;
	overflow: hidden;
}

/* 小按钮在字段行中的样式 */
#fields .copy-btn {
	flex: 0 0 auto;
}

/* 歌词显示样式（保留已有） */
#lyricContent {
	white-space: pre-wrap; /* 保留换行同时自动换行 */
	word-break: break-word;
	max-height: 60vh;
	overflow: auto;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Helvetica Neue", Arial;
	font-size: 0.95rem;
	padding: 0.75rem;
	background: #f8f9fa;
	border-radius: 4px;
}

/* 搜索按钮内部的 spinner 与文字对齐 */
#searchBtn {
	/* 保持按钮内部垂直居中 */
	align-items: center;
}
#searchBtn .spinner-border {
	margin-left: 0;
	margin-right: .5rem;
}

/* 搜索按钮圆形 spinner 美化（确保是规规矩矩的圆形） */
#searchSpinner.spinner-border {
	width: 1rem;
	height: 1rem;
	border-width: .15rem;
	border-radius: 50%;
	vertical-align: text-bottom;
}

/* 禁用态视觉提示（当搜索时禁用输入/选择等） */
[disabled] {
	opacity: 0.65;
	pointer-events: none;
}

/* 详情卡片头部右侧按钮布局（复制/查看歌词/其他） */
.card-header .btn {
	margin-left: .25rem;
}

/* 歌词按钮组：内部按钮紧凑排列，外部在 header 右侧 */
.card-header .lyric-btn-group {
	display: inline-flex;
	gap: .25rem; /* 内部紧凑间距 */
	align-items: center;
	margin-left: auto; /* 保证按钮组位于右侧 */
}

/* 保证单个按钮在组内不会因为外部布局被压缩换行 */
.card-header .lyric-btn-group .btn {
	white-space: nowrap;
}

/* 如需更精细对齐，可增加下面规则 */
.card-header .btn-group, .card-header .lyric-btn-group {
	margin-left: auto; /* 保证按钮组位于右侧 */
}

/* 使详情标题在窄屏下换行并保留省略效果 */
.card .card-title.text-truncate {
	max-width: calc(100% - 160px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Toast、Modal 微调 */
.toast {
	min-width: 160px;
}

/* 结果无数据提示 */
#resultsEmpty {
	padding: 1rem;
	text-align: center;
}

/* 详情蒙版，覆盖 card 内容并垂直居中显示一个圆形 spinner */
.loading-mask {
	position: absolute;
	inset: 0;
	background: rgba(255,255,255,0.72);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 20;
	transition: opacity 180ms ease;
}
.loading-mask.visually-hidden {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}
.loading-mask:not(.visually-hidden) {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* 使 card 内部保持相对定位以便 mask 覆盖 */
#detailCard.position-relative {
	position: relative;
}

/* 小屏幕下蒙版也能覆盖 */
@media (max-width: 575.98px) {
	.loading-mask { background: rgba(255,255,255,0.85); }
}

/* 响应式：在小屏幕上把左右栏垂直堆叠，保留间距 */
@media (max-width: 991.98px) {
	#fields .field-row {
		flex-direction: column;
		align-items: flex-start;
	}
	.card .card-title.text-truncate {
		max-width: 100%;
		white-space: normal;
	}
}

/* 小屏幕下搜索表单的控件间距优化 */
@media (max-width: 575.98px) {
	#searchForm .form-select {
		display: none; /* 或调整为更小的 UI，根据需要开启 */
	}
}

/* 可选：细化 list 中按钮大小 */
.list-group-item .btn {
	padding: .25rem .5rem;
	font-size: .85rem;
}

/* 额外：帮助区分键与值在浅背景下的对比 */
#fields .field-key {
	color: #333;
}
#fields .field-value {
	color: #555;
}

/* 专辑封面样式（详情页） */
#albumCover {
	display: block;
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* Bootstrap backdrop 兼容样式（回退创建的 #bs-backdrop） */
#bs-backdrop.modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.5);
	z-index: 1040;
}

/* 确保 modal 回退显示时内容可滚动 */
.modal.show {
	display: block;
	opacity: 1;
}

/* 保证 navbar 内容与主体 container 左右对齐（container 宽度居中） */
.navbar .container-fluid {
	max-width: 1140px;
	margin: 0 auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

/* 搜索表单在 navbar 中的对齐：使按钮和输入在一行，不换行 */
#searchForm {
	display: flex;
	align-items: center;
	gap: .5rem;
	width: 100%;
	max-width: 720px;
	flex-wrap: nowrap; /* 禁止换行，保证按钮不被挤到下一行 */
}

/* 控制搜索输入为可伸缩元素，避免它强制换行按钮 */
#qInput {
	flex: 1 1 auto; /* 可伸缩，优先占用剩余空间 */
	min-width: 0; /* 允许在父容器内正确收缩，防止溢出导致换行 */
	height: calc(1.5em + 0.5rem);
	padding-top: .25rem;
	padding-bottom: .25rem;
}

/* 搜索按钮调整：内联水平排列，防止竖排并禁止按钮文字换行 */
#searchBtn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: 0.375rem 0.6rem;
	flex: 0 0 auto; /* 固定大小，不被伸缩 */
	white-space: nowrap; /* 禁止按钮内文字换行 */
}

/* spinner 微调：规矩的圆形且居中 */
#searchSpinner.spinner-border {
	width: 1rem;
	height: 1rem;
	border-width: .15rem;
	border-radius: 50%;
	vertical-align: middle;
}

/* 限制搜索结果列表高度（恢复为原先样式） */
#resultsList {
	max-height: 60vh;
	overflow: auto;
}

/* 确保没有空的规则集（防止 linter 报 emptyRules） */

/* Footer 样式 */
.site-footer {
	padding: .75rem 1rem;
	text-align: center;
	color: #6c757d;
	font-size: 0.9rem;
	background: transparent;
}
.site-footer a {
	color: inherit;
}