[data-materials-browser] { margin: 0 0 2.5rem; padding: clamp(1rem, 3vw, 2rem); border: 1px solid var(--border-color, #cbd5e1); border-radius: 20px; background: var(--bg-surface, #fff); color: var(--text-main, #0f172a); min-width: 0; scroll-margin-top: 6rem; }
.materials-heading h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.25; margin: .3rem 0 .7rem; }
.materials-eyebrow { color: var(--primary, #2563eb); font-weight: 700; font-size: .85rem; }
.learning-route { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; list-style: none; counter-reset: route; padding: 0; margin: 1.4rem 0; }
.learning-route li { counter-increment: route; border-left: 3px solid var(--primary, #2563eb); padding: .3rem .8rem; }
.learning-route strong { display: block; margin-bottom: .35rem; }
.learning-route strong::before { content: counter(route) ' · '; color: var(--primary, #2563eb); }
.learning-route span, .materials-note, .materials-meta, .materials-status { font-size: .9rem; line-height: 1.55; }
.materials-controls { display: flex; flex-wrap: wrap; align-items: end; gap: .8rem; margin: 1.5rem 0 1rem; }
.materials-controls > div { flex: 1 1 145px; min-width: 0; }
.materials-controls .materials-query { flex: 3 1 250px; }
.materials-controls label { display: block; font-size: .85rem; font-weight: 700; margin-bottom: .35rem; }
.materials-controls input, .materials-controls select, .materials-reset, .materials-more { width: 100%; min-height: 44px; padding: .65rem .75rem; font: inherit; font-size: .9rem; border: 1px solid var(--border-color, #94a3b8); border-radius: 10px; background: var(--bg-main, #f8fafc); color: inherit; }
.materials-controls input::placeholder { color: inherit; opacity: .65; }
.materials-reset, .materials-more { cursor: pointer; width: auto; font-weight: 600; }
.materials-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 1rem 0; }
.materials-result { min-width: 0; padding: 1rem; border: 1px solid var(--border-color, #cbd5e1); border-radius: 12px; overflow-wrap: anywhere; }
.materials-result h3 { font-size: 1rem; line-height: 1.5; margin: .4rem 0; }
.materials-result a { color: var(--primary, #2563eb); text-decoration: underline; text-underline-offset: 3px; }
.materials-result > p:last-child { font-size: .9rem; margin: 0; }
.materials-note { margin-top: 1rem; }
[data-materials-browser] :focus-visible { outline: 3px solid var(--primary, #2563eb); outline-offset: 3px; }
[data-materials-browser] [hidden] { display: none !important; }
[data-theme="dark"] [data-materials-browser] { background: var(--bg-surface, #111827); color: var(--text-main, #f8fafc); border-color: #475569; }
[data-theme="dark"] .materials-result a, [data-theme="dark"] .materials-eyebrow, [data-theme="dark"] .learning-route strong::before { color: #67e8f9; }
[data-theme="dark"] .materials-controls input, [data-theme="dark"] .materials-controls select, [data-theme="dark"] .materials-reset, [data-theme="dark"] .materials-more { background: var(--bg-main, #0f172a); color: #f8fafc; border-color: #64748b; }
.materials-portal .portal-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
@media (max-width: 900px) {
  .materials-portal > header, .materials-portal .navbar-container { flex-wrap: wrap; gap: .7rem; }
  .materials-portal > header > .brand { font-size: 1rem; }
  .materials-portal header .nav-right { flex-wrap: wrap; min-width: 0; gap: .5rem; }
  .materials-portal .nav-breadcrumb { flex-wrap: wrap; min-width: 0; }
  .materials-portal .navbar { position: static; }
}
@media (max-width: 640px) { .learning-route, .materials-results { grid-template-columns: 1fr; } .materials-controls > div, .materials-controls .materials-query { flex-basis: 100%; } .materials-reset { width: 100%; } }
@media print { .materials-controls, .materials-results, .materials-more, .materials-status, .materials-note { display: none !important; } [data-materials-browser] { break-inside: avoid; background: white !important; color: black !important; } .learning-route { grid-template-columns: repeat(3, minmax(0, 1fr)); } }