.materials-intro { padding-top: 42px; padding-bottom: 30px; }
.materials-intro .breadcrumbs { margin-bottom: 26px; color: var(--muted); }
.materials-intro .breadcrumbs a { color: var(--ink); }
.materials-intro .breadcrumbs a:hover { color: var(--red); }
.materials-intro h1 { font-size: 48px; line-height: 1.15; }
.materials-intro-copy { max-width: 700px; font-size: 16px; line-height: 1.75; margin-top: 20px; }
.materials-library { padding-top: 0; }
.materials-controls { border-block: 1px solid var(--line); padding-block: 24px; }
.materials-discovery { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; align-items: end; gap: 24px; }
.materials-discovery label, .materials-search { display: grid; gap: 8px; font-size: 12px; color: var(--muted); min-width: 0; }
.materials-controls select, .materials-search input { width: 100%; height: 44px; min-width: 0; padding: 0 12px; font: inherit; font-size: 14px; color: var(--ink); background: #fff; border: 1px solid #bcc0c4; border-radius: 4px; }
.materials-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-top: 24px; }
.materials-search { flex: 0 1 320px; }
.materials-filters { display: flex; flex-wrap: wrap; gap: 0; }
.materials-filters button { padding: 10px 16px; min-height: 44px; background: #fff; border: 1px solid var(--line); color: var(--muted); font: inherit; font-size: 13px; }
.materials-filters button + button { border-left: 0; }
.materials-filters button[aria-pressed="true"] { color: var(--red); background: #fff3f2; box-shadow: inset 0 -2px var(--red); }
.materials-filters span { margin-left: 8px; font-size: 11px; }
.library-reset { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; }
.library-icon { display: inline-block; width: 20px; height: 20px; flex: 0 0 20px; }
.materials-results { margin-block: 20px; font-size: 12px; }
.materials-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.materials-card { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.materials-cover { position: relative; display: block; aspect-ratio: 16/9; background: #eceeef; border-bottom: 1px solid var(--line); }
.materials-cover img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.materials-copy { display: flex; flex-direction: column; flex: 1; padding: 24px; }
.material-type-badge { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; color: var(--red); line-height: 1.5; }
.materials-copy h2 { font-size: 23px; line-height: 1.3; margin-top: 18px; overflow-wrap: anywhere; }
.materials-copy h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.materials-description { font-size: 13px; line-height: 1.75; margin-top: 16px; }
.materials-topics { padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 20px 0 24px; font-size: 11px; color: var(--muted); }
.materials-topics li + li::before { content: '/'; margin-right: 10px; color: #aaa; }
.materials-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.materials-actions { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.material-language-row { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.material-language-row label, .viewer-language { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 12px; color: var(--muted); }
.material-language-row select, .viewer-language select { min-height: 44px; width: 180px; max-width: 100%; padding: 8px 10px; border: 1px solid #bcc0c4; border-radius: 4px; background: #fff; color: var(--ink); font: inherit; font-size: 16px; }
.material-language-row small { padding-bottom: 12px; font-size: 11px; color: var(--muted); }
.material-language-fallback { margin-top: 16px; font-size: 13px; text-decoration: underline; }
.viewer-language { font-size: 10px; }
.viewer-language select { width: 180px; height: 42px; min-height: 42px; font-size: 14px; }
.material-language-row[hidden], .viewer-language[hidden] { display: none; }
.materials-actions .button { justify-content: space-between; font-size: 13px; }
.materials-actions .button::after, .materials-next .button::after, .materials-empty .button::after { display: none; }
.materials-library .button .library-icon { filter: invert(1); }
.material-download { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; font-size: 13px; color: var(--ink); }
.material-download:hover { text-decoration: underline; text-underline-offset: 4px; }
.materials-empty { padding: 48px 0; text-align: center; }
.materials-empty h2 { font-size: 26px; }
.materials-empty p { margin: 16px 0 24px; }
.materials-start { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; padding-block: 24px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.materials-start h2 { font-size: 24px; margin-bottom: 12px; }
.materials-start p { font-size: 13px; }
.materials-start ol { padding-left: 22px; display: grid; gap: 14px; }
.materials-start a { font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.materials-start small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.materials-next { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 48px; padding-block: 32px; border-block: 1px solid var(--line); }
.materials-next h2 { font-size: 28px; }
.materials-next p { margin-top: 12px; font-size: 14px; max-width: 650px; }
.materials-notice { max-width: 980px; font-size: 12px; line-height: 1.8; margin-top: 24px; }
.materials-library :is(a,button,input,select):focus-visible, .media-viewer :is(a,button,select):focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.media-open { overflow: hidden; }
.media-viewer { position: fixed; inset: 0; margin: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; padding: 0; border: 0; border-radius: 0; background: #fff; color: var(--ink); overflow: hidden; }
.media-viewer[open] { display: flex; flex-direction: column; }
.media-viewer::backdrop { background: #101112; }
.viewer-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 24px; border-bottom: 1px solid var(--line); flex: none; }
.viewer-header > div:first-child { min-width: 0; }
.viewer-header h2 { font-size: 18px; line-height: 1.4; margin-top: 4px; overflow-wrap: anywhere; }
.viewer-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.library-icon-button { display: inline-flex; align-items: center; justify-content: center; padding: 8px; width: 42px; height: 42px; flex: 0 0 42px; background: #fff; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); }
.library-icon-button:hover, .library-icon-button[aria-pressed="true"], .library-icon-button[aria-expanded="true"] { background: #fff3f2; border-color: var(--red); }
.library-icon-button:disabled { opacity: .4; cursor: default; }
.viewer-body { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; background: #eef0f1; }
.viewer-stage { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 0; padding: 20px; touch-action: pan-y pinch-zoom; }
.viewer-slide { width: 100%; height: 100%; object-fit: contain; user-select: none; }
.viewer-caption { flex: none; padding: 0 20px 12px; margin: 0; text-align: center; font-size: 12px; }
.viewer-navigation { display: flex; justify-content: center; align-items: center; gap: 14px; padding: 12px 20px; border-top: 1px solid var(--line); flex: none; }
.viewer-navigation label { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.viewer-navigation select { height: 42px; padding: 6px; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 4px; font: inherit; font-size: 16px; }
.viewer-thumbs { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 12px; flex: none; max-height: 220px; overflow: auto; padding: 16px; border-top: 1px solid var(--line); }
.viewer-thumbs button { background: #fff; border: 1px solid var(--line); padding: 6px; border-radius: 4px; color: var(--ink); text-align: left; }
.viewer-thumbs button[aria-current="true"] { border-color: var(--red); }
.viewer-thumbs img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: contain; }
.viewer-thumbs span { display: block; margin-top: 8px; font-size: 11px; line-height: 1.5; }
.viewer-stage.scroll-mode { display: block; overflow: auto; scroll-padding-top: 16px; }
.viewer-stage.scroll-mode figure { margin: 0 auto 24px; max-width: 1400px; }
.viewer-stage.scroll-mode img { display: block; width: 100%; height: auto; }
.viewer-stage.scroll-mode figcaption { text-align: center; font-size: 12px; margin-top: 10px; }
@media(max-width:1100px) { .materials-list { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:680px) {
  .materials-intro { padding-top: 28px; padding-bottom: 24px; }
  .materials-intro h1 { font-size: 34px; }
  .materials-intro-copy { font-size: 14px; }
  .materials-discovery, .materials-start { grid-template-columns: 1fr; gap: 16px; }
  .materials-controls select, .materials-search input { font-size: 16px; }
  .materials-toolbar { display: grid; gap: 20px; }
  .materials-filters button { font-size: 12px; padding-inline: 9px; }
  .materials-filters span { margin-left: 4px; }
  .materials-list { grid-template-columns: 1fr; }
  .materials-copy { padding: 22px; }
  .materials-copy h2 { font-size: 24px; }
  .materials-next { flex-direction: column; align-items: start; gap: 24px; }
  .materials-next h2 { font-size: 26px; }
  .viewer-header { align-items: start; padding: 12px; gap: 12px; }
  .viewer-header h2 { font-size: 15px; }
  .viewer-actions { gap: 6px; flex-wrap: wrap; justify-content: end; width: 96px; }
  .viewer-actions .material-download { font-size: 11px; gap: 4px; white-space: nowrap; }
  .viewer-actions .material-download img { width: 16px; height: 16px; flex-basis: 16px; }
  .viewer-stage { padding: 8px; }
  .viewer-caption { font-size: 11px; padding: 0 10px 10px; }
  .viewer-navigation { gap: 8px; flex-wrap: wrap; padding: 10px 8px; }
  .viewer-navigation label { gap: 5px; }
  .viewer-thumbs { grid-template-columns: repeat(3,minmax(0,1fr)); max-height: 190px; padding: 10px; gap: 8px; }
}
@media(max-width:374px) { .materials-filters button { padding-inline: 7px; font-size: 11px; } .viewer-navigation { gap: 6px; } .viewer-navigation .library-icon-button { width: 36px; flex-basis: 36px; } }
@media(max-width:680px) {
  .viewer-header { position: relative; flex-wrap: wrap; }
  .viewer-header > div:first-child { width: 100%; padding-right: 46px; }
  .viewer-header .viewer-actions { width: 100%; flex-wrap: nowrap; align-items: end; gap: 8px; }
  .viewer-header #viewer-close { position: absolute; right: 12px; top: 12px; width: 38px; height: 38px; }
  .viewer-language { margin-right: auto; }
  .viewer-language select { width: 180px; font-size: 16px; }
  .viewer-actions .material-download { min-height: 42px; }
  .viewer-header #viewer-fullscreen { width: 36px; flex-basis: 36px; }
}
@media(max-width:374px) {
  .viewer-header .viewer-actions { display: grid; grid-template-columns: minmax(0,1fr) 36px; gap: 6px; }
  .viewer-language { grid-column: 1 / -1; margin: 0; width: 100%; }
  .viewer-language select { width: 100%; }
  .viewer-header .material-download { justify-self: start; }
}
.material-language-fallback { display: flex; flex-wrap: wrap; gap: 12px; }
.viewer-caption[dir="rtl"], .viewer-thumbs span[dir="rtl"] { text-align: right; }
@media(max-height:500px) and (orientation:landscape) { .viewer-header { padding: 8px 16px; } .viewer-header h2 { font-size: 14px; } .viewer-header .material-type-badge, .viewer-caption { display: none; } .viewer-navigation { padding: 6px; } .viewer-stage { padding: 5px; } .viewer-thumbs { max-height: 110px; } }