.materials-page .main { min-height:100dvh; background:#f6f7f9; }
.materials-page .topbar { height:80px; padding:24px 32px 0; }
.materials-page .nav-item[href="#materials"] { color:var(--red); background:#fff0f1; }
.materials-page .nav-item[href="#home"] { color:inherit; background:transparent; }
.materials-workspace { max-width:1600px; margin:auto; padding:12px 32px 48px; }
.materials-header { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.materials-header span { color:#9a9da5; font-size:12px; }
.materials-header h1 { margin:6px 0 7px; font:600 28px/1.4 SourceHan,'PingFang SC',sans-serif; }
.materials-header p { color:#969aa3; font-size:12px; }
.materials-workspace button,.materials-workspace select,.materials-workspace input { font:inherit; }
.materials-refresh { border:1px solid #e6e7eb; border-radius:8px; padding:8px 12px; background:#fff; color:#666; cursor:pointer; }
.materials-refresh:hover { color:var(--red); border-color:#ecc4c7; }
.materials-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:25px 0 8px; padding:13px; border:1px solid #e9eaee; border-radius:11px; background:#fff; }
.materials-toolbar input,.materials-toolbar select { min-height:34px; border:1px solid #e5e7ec; border-radius:7px; padding:7px 10px; background:#fafafb; color:#555; }
.materials-search { width:min(330px,100%); }
.materials-count { margin-left:auto; color:#9a9da5; font-size:11px; }
.materials-status { min-height:28px; color:#9398a2; font-size:11px; line-height:28px; }
.materials-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.material-card { min-width:0; border:1px solid #e9eaee; border-radius:13px; padding:12px; background:#fff; }
.material-card .agent-generated-image { width:100%; max-width:none; }
.material-card .agent-image-preview { border-radius:9px; }
.material-card .agent-generated-image figcaption { display:none; }
.material-details { padding:11px 2px 1px; }
.material-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.material-meta strong { font-size:12px; font-weight:500; }
.material-meta span { font-size:10px; color:#9a9da5; text-align:right; }
.material-prompt { margin-top:9px; height:39px; overflow:hidden; color:#777c85; font-size:11px; line-height:1.8; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.material-actions { display:flex; align-items:center; justify-content:flex-end; gap:6px; margin-top:12px; }
.material-actions a,.material-actions button { border:1px solid #e6e7eb; border-radius:6px; padding:6px 9px; background:#fff; color:#676c75; font-size:11px; cursor:pointer; }
.material-actions a:hover,.material-actions button:hover { background:#f6f6f8; }
.material-actions .material-delete { color:var(--red); border-color:#f0c9cc; }
.materials-empty { margin-top:30px; padding:90px 20px; border:1px solid #e9eaee; border-radius:14px; background:#fff; text-align:center; }
.materials-empty span { display:inline-flex; align-items:center; justify-content:center; width:60px; height:60px; border-radius:18px; background:#fff0f2; color:var(--red); font-size:27px; }
.materials-empty h2 { margin:16px 0 9px; font-size:18px; }
.materials-empty p,.materials-no-match { color:#989da6; font-size:12px; line-height:1.8; }
.materials-no-match { grid-column:1/-1; text-align:center; padding:60px; border:1px solid #e9eaee; border-radius:14px; background:#fff; }
@media(max-width:1200px) { .materials-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) {
  .materials-page .topbar { height:65px; padding:18px 20px 0; }
  .materials-workspace { padding:8px 16px 32px; }
  .materials-header h1 { font-size:24px; max-width:none; }
  .materials-toolbar { align-items:stretch; }
  .materials-search { width:100%; }
  .materials-count { margin-left:0; align-self:center; }
  .materials-grid { grid-template-columns:1fr; }
}