.materials-hub, .materials-hub * { box-sizing: border-box; }
.materials-hub {
  --ink:#1a2332; --muted:#5b6b7c; --line:#d9e1ea; --bg:#f7f9fc; --card:#fff;
  --accent:#0b6e4f; --warn:#8a1f1f; --soft:#eef6f2;
  margin:0; font:16px/1.55 system-ui,sans-serif; color:var(--ink); background:var(--bg);
}
.materials-hub header, .materials-hub main, .materials-hub footer {
  max-width:980px; margin:0 auto; padding:16px 20px;
}
.materials-hub .brand { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.materials-hub .brand img { height:36px; width:auto; max-width:160px; object-fit:contain; }
.materials-hub .brand-home { display:inline-flex; text-decoration:none; }
.materials-hub .slogan { color:var(--muted); font-size:14px; width:100%; margin:4px 0 0; }
.materials-hub .mh-title-row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:12px; }
.materials-hub .mh-title-row h1 { flex:1; font-size:1.45rem; margin:0; }
.materials-hub .mh-tabs, .materials-hub .mh-subtabs {
  display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 8px;
}
.materials-hub .mh-tabs button, .materials-hub .mh-subtabs button {
  background:#fff; color:var(--accent); border:1px solid var(--accent);
  border-radius:999px; padding:8px 16px; cursor:pointer; font:inherit;
}
.materials-hub .mh-tabs button[aria-selected="true"],
.materials-hub .mh-subtabs button.active {
  background:var(--accent); color:#fff;
}
.materials-hub .card {
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:16px; margin:12px 0;
}
.materials-hub .grid {
  display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.materials-hub .meta { color:var(--muted); font-size:13px; }
.materials-hub button, .materials-hub .btn {
  background:var(--accent); color:#fff; border:0; border-radius:8px;
  padding:8px 14px; cursor:pointer; text-decoration:none; display:inline-block;
  font:inherit;
}
.materials-hub button.secondary, .materials-hub .btn.secondary {
  background:#fff; color:var(--accent); border:1px solid var(--accent);
}
.materials-hub button:disabled { opacity:.55; cursor:not-allowed; }
.materials-hub .notice {
  background:var(--soft); border-left:4px solid var(--accent);
  padding:10px 12px; margin:12px 0; font-size:14px;
}
.materials-hub .deny { color:var(--warn); font-size:13px; }
.materials-hub .mh-search {
  display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;
}
.materials-hub .mh-search label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); }
.materials-hub .mh-search input, .materials-hub .mh-search select, .materials-hub textarea {
  font:inherit; padding:8px 10px; border:1px solid var(--line); border-radius:8px; min-width:140px;
}
.materials-hub textarea { width:100%; min-height:90px; resize:vertical; }
.materials-hub .item-card h3 { margin:6px 0; font-size:1.05rem; }
.materials-hub .item-card p { margin:0 0 8px; }
.materials-hub .mh-counts strong { color:var(--ink); font-size:1.1rem; }
.materials-hub .mh-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.materials-hub .study-player { margin:12px 0; background:#000; border-radius:10px; overflow:hidden; }
.materials-hub .study-player video { width:100%; max-height:420px; display:block; }
.materials-hub .note-list article {
  border-top:1px solid var(--line); padding:10px 0; margin:0;
}
.materials-hub .empty {
  grid-column:1/-1; padding:28px 16px; text-align:center; color:var(--muted);
  border:1px dashed var(--line); border-radius:12px; background:#fff;
}
.materials-hub .mh-footer { text-align:center; padding-bottom:32px; }
@media (max-width:420px) {
  .materials-hub .brand img { height:28px; }
  .materials-hub .mh-title-row h1 { font-size:1.2rem; }
}

.materials-hub [hidden] { display: none !important; }