/*
 * 页面专属样式：library
 *
 * 由交付包样板的 <style> 提取，共用部分已经上移到 components.css。
 */

#nys-main .page {
	max-width:1080px;
	margin:0 auto;
	padding:44px 28px 90px;
}
.page-head {
	margin-bottom:28px;
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:20px;
	flex-wrap:wrap;
}
.page-head p {
	font-size:14px;
	color:var(--ink-soft);
	margin:0;
	max-width:480px;
	line-height:1.5;
}
.search-box {
	display:flex;
	align-items:center;
	gap:8px;
	border:1px solid var(--border);
	border-radius:999px;
	padding:9px 16px;
	min-width:260px;
	color:var(--ink-soft);
}
.search-box:focus-within { border-color:var(--ink); }
.search-box svg {
	width:15px;
	height:15px;
	flex-shrink:0;
}
.search-box input {
	border:none;
	outline:none;
	font-size:13.5px;
	font-family:'Inter',sans-serif;
	flex:1;
	color:var(--ink);
}
.filters {
	display:flex;
	gap:8px;
	flex-wrap:wrap;
	margin-bottom:32px;
}
.chip {
	border:1px solid var(--border);
	border-radius:999px;
	padding:7px 15px;
	font-size:13px;
	color:var(--ink-soft);
	cursor:pointer;
	font-weight:500;
}
.chip.active {
	background:var(--ink);
	border-color:var(--ink);
	color:#fff;
}
.chip:not(.active):hover { background:var(--bg-soft); }
.grid {
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:18px;
}
.card {
	border:1px solid var(--border);
	border-radius:var(--radius);
	overflow:hidden;
	background:#fff;
	box-shadow:var(--shadow);
	cursor:pointer;
	display:flex;
	flex-direction:column;
}
.card:hover { border-color:var(--ink); }
.c-img {
	width:100%;
	aspect-ratio:3/4;
	position:relative;
}
.c-img .cat {
	position:absolute;
	top:10px;
	left:10px;
	background:rgba(255,255,255,.88);
	font-size:10.5px;
	padding:4px 9px;
	border-radius:999px;
	color:var(--ink-soft);
	border:1px solid var(--border);
	font-weight:500;
}
.c-body { padding:14px 15px 16px; }
.c-title {
	font-size:13.8px;
	font-weight:600;
	margin-bottom:5px;
}
.c-prompt {
	font-size:12px;
	color:var(--ink-soft);
	line-height:1.4;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
	margin-bottom:12px;
}
.c-cta {
	display:flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	border:1px solid var(--border);
	border-radius:9px;
	padding:8px;
	font-size:12.5px;
	font-weight:600;
	color:var(--ink);
}
.card:hover .c-cta {
	background:var(--ink);
	color:#fff;
	border-color:var(--ink);
}
.c-cta svg {
	width:12px;
	height:12px;
}
.empty-state {
	text-align:center;
	padding:80px 20px;
	max-width:340px;
	margin:0 auto;
}
.es-icon {
	width:52px;
	height:52px;
	border-radius:14px;
	background:var(--bg-soft);
	color:var(--ink-soft);
	display:flex;
	align-items:center;
	justify-content:center;
	margin:0 auto 18px;
}
.es-icon svg {
	width:24px;
	height:24px;
}
.empty-state h3 {
	font-size:15px;
	font-weight:600;
	margin:0 0 8px;
	font-family:'Inter',sans-serif;
}
.empty-state p {
	font-size:12.8px;
	color:var(--ink-soft);
	margin:0;
	line-height:1.6;
}
.empty-state #clearFilters {
	color:var(--ink);
	text-decoration:underline;
	cursor:pointer;
	font-weight:500;
}
.load-more {
	text-align:center;
	margin-top:40px;
}
.load-more .btn {
	border:1px solid var(--border);
	border-radius:10px;
	padding:11px 26px;
	font-size:13.5px;
	font-weight:600;
	cursor:pointer;
	display:inline-block;
}
.load-more .btn:hover { background:var(--bg-soft); }
@media (max-width:960px) {
  .grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:720px) {
  .grid { grid-template-columns:repeat(2,1fr); }
  .page-head {
  	flex-direction:column;
  	align-items:flex-start;
  }
  .search-box { width:100%; }
}