.material-wrap{ max-width:1240px;margin:0 auto}
		.material-head{ display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:20px}
		.material-head h1{ margin:0;font-size:28px;line-height:1.25;color:var(--c-ink);font-weight:700}
		.material-head p{ margin:9px 0 0;color:var(--c-muted);line-height:1.75;font-size:14px}
		.material-head-actions{ display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
		.material-search{ display:flex;align-items:center;gap:10px;background:var(--c-surface);border:1px solid var(--c-line);border-radius:14px;box-shadow:var(--sh-sm);padding:12px;margin-bottom:14px}
		.material-search .input{ flex:1;position:relative}
		.material-search .input .icon{ position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--c-faint)}
		.material-search input{ width:100%;height:42px;border:1px solid var(--c-line);border-radius:11px;background:var(--c-surface-2);padding:0 14px 0 40px;outline:0;font-size:14px}
		.material-search input:focus{ border-color:var(--c-red);box-shadow:0 0 0 3px rgba(200,16,46,.08)}
		.material-filter-box{ margin:0 0 18px;padding:9px 12px;background:var(--c-surface);border:1px solid var(--c-line);border-radius:14px;box-shadow:var(--sh-sm)}
		.material-filter{ display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:8px;margin:0}
		.material-filter+.material-filter{ margin-top:7px;padding-top:7px;border-top:1px solid var(--c-line-2)}
		.material-filter .filter-label{ color:var(--c-faint);font-size:12px;white-space:nowrap}
		.filter-track{ position:relative;min-width:0;display:grid;grid-template-columns:30px minmax(0,1fr) 30px;align-items:center;gap:4px}
		.filter-track:not(.has-overflow){ grid-template-columns:minmax(0,1fr)}
		.filter-track:not(.has-overflow) .filter-scroll{ grid-column:1}
		.filter-track:not(.has-overflow) .filter-arrow{ display:none!important}
		.filter-track:before,.filter-track:after{ content:"";position:absolute;top:0;bottom:0;width:28px;pointer-events:none;z-index:2;opacity:0;transition:.15s}
		.filter-track:before{ left:34px;background:linear-gradient(90deg,var(--c-surface),rgba(255,255,255,0))}
		.filter-track:after{ right:34px;background:linear-gradient(270deg,var(--c-surface),rgba(255,255,255,0))}
		.filter-track.can-left:before,.filter-track.can-right:after{ opacity:1}
		html[data-theme="dark"] .filter-track:before{ background:linear-gradient(90deg,var(--c-surface),rgba(29,29,32,0))}
		html[data-theme="dark"] .filter-track:after{ background:linear-gradient(270deg,var(--c-surface),rgba(29,29,32,0))}
		.filter-scroll{ display:flex;align-items:center;gap:7px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:none;padding:1px 2px;scroll-behavior:smooth}
		.filter-scroll::-webkit-scrollbar{ display:none}
		.filter-arrow{ width:30px;height:30px!important;border:0!important;border-radius:50%!important;background:var(--c-surface-2)!important;color:var(--c-muted)!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center;box-shadow:none;opacity:0;pointer-events:none;transition:.15s;z-index:3}
		.filter-track.has-overflow .filter-arrow{ opacity:1;pointer-events:auto}
		.filter-arrow:hover{ background:var(--c-red-soft)!important;color:var(--c-red)!important}
		.filter-arrow:disabled{ opacity:.26!important;pointer-events:none;color:var(--c-faint)!important;background:transparent!important}
		.filter-arrow .icon{ width:15px;height:15px}
		.filter-arrow.prev .icon{ transform:rotate(180deg)}
		.material-filter button{ flex:none;height:29px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--c-ink-2);padding:0 11px;cursor:pointer;font-size:12.5px;transition:.15s}
		.material-filter button:hover{ background:var(--c-line-2);color:var(--c-red)}
		.material-filter button.is-active{ background:var(--c-red-soft);border-color:var(--c-red-line);color:var(--c-red);font-weight:600}
		.material-filter button.is-hidden{ display:none}
		.material-grid{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
		.material-card{ min-height:218px;display:flex;flex-direction:column;background:var(--c-surface);border:1px solid var(--c-line);border-radius:14px;box-shadow:var(--sh-sm);padding:18px 18px 14px;transition:.15s}
		.material-card:hover{ transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--c-red-line)}
		.material-card .top{ display:flex;align-items:center;gap:8px;margin-bottom:8px;color:var(--c-faint)}
		.material-card .ic{ width:22px;height:22px;border-radius:7px;background:transparent;color:var(--c-red);display:flex;align-items:center;justify-content:center;opacity:.76}
		.material-card .ic .icon{ width:15px;height:15px}
		.material-card h2{ flex:1;min-width:0;margin:0;font-size:12.5px;line-height:1.5;color:var(--c-faint);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
		.material-card h2 a{ color:inherit;text-decoration:none}
		.material-card h2 a:hover{ color:var(--c-red)}
		.material-card .body{ flex:1;margin:7px 0 0;color:var(--c-ink);font-size:17px;line-height:1.9;letter-spacing:0;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
		.material-card .body a{ color:inherit;text-decoration:none}
		.material-card .body a:hover{ color:var(--c-red)}
		.material-card .meta{ display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:12px}
		.material-card .meta .ai-tag{ height:24px;padding:0 9px;border-radius:999px;font-size:11.5px;background:var(--c-line-2);border-color:transparent;color:var(--c-muted);font-weight:500}
		.material-card .meta .ai-tag:not(.gray){ background:var(--c-red-soft);border-color:transparent;color:var(--c-red)}
		.material-card .kw{ margin-top:8px;color:var(--c-faint);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
		.material-card .foot{ display:flex;align-items:center;gap:10px;margin-top:12px}
		.material-card .foot .kw{ flex:1;min-width:0;margin-top:0}
		.material-card .acts{ flex:none;display:flex;justify-content:flex-end;gap:4px;margin-left:auto}
		.material-card .acts button{ width:30px;height:30px;border-radius:9px;border:1px solid transparent;background:transparent;color:var(--c-faint);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:.15s}
		.material-card .acts button:hover{ background:var(--c-line-2);border-color:var(--c-line);color:var(--c-red)}
		.material-card .acts button.is-fav{ background:var(--c-red-soft);border-color:transparent;color:var(--c-red)}
		.material-card .acts .icon{ width:15px;height:15px}
		.material-more{ display:flex;justify-content:center;margin-top:22px}
		.material-empty{ display:none;background:var(--c-surface);border:1px solid var(--c-line);border-radius:14px;padding:60px 24px;text-align:center;color:var(--c-muted)}
		.material-empty.show{ display:block}
		.material-empty > .icon{ width:48px;height:48px;color:var(--c-faint);margin-bottom:12px}
		@media(max-width:1180px){ .material-grid{ grid-template-columns:repeat(2,minmax(0,1fr))}}
		@media(max-width:760px){ .material-head{ display:block}.material-head-actions{ justify-content:flex-start;margin-top:12px}.material-search{ display:block}.material-search .ai-btn{ width:100%;margin-top:10px}.material-filter-box{ padding:8px 10px}.material-filter{ grid-template-columns:34px minmax(0,1fr)}.filter-track{ grid-template-columns:28px minmax(0,1fr) 28px}.filter-track:not(.has-overflow){ grid-template-columns:minmax(0,1fr)}.filter-track:before{ left:32px}.filter-track:after{ right:32px}.filter-arrow{ width:28px;height:28px!important}.material-grid{ grid-template-columns:1fr}}