.study-navigation, .retina-layer-panel, .retina-info-panel, .study-overlay { --study-font: var(--font-ui); }
html[dir="rtl"] .study-navigation, html[dir="rtl"] .retina-layer-panel, html[dir="rtl"] .retina-info-panel, html[dir="rtl"] .study-overlay { --study-font: var(--font-ar); }
html[dir="rtl"] #studyLayerTitle, html[dir="rtl"] .study-specimen-title strong { font-family: var(--font-ar); }
.study-navigation { max-width: 1660px; margin: 0 auto 12px; padding: 15px 18px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.study-navigation-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.study-navigation-heading strong { color: var(--teal); font: 600 .66rem var(--font-mono); letter-spacing: .06em; }
.study-navigation-heading > span { color: var(--muted); font-size: .72rem; }
.study-mode-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.study-mode-list button { display: flex; align-items: center; gap: 9px; padding: 10px; min-height: 44px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); font: 500 .8rem var(--study-font); text-align: start; cursor: pointer; }
.study-mode-list small { color: var(--muted); font: .63rem var(--font-mono); }
.study-mode-list button[aria-pressed="true"] { border-color: var(--teal); background: var(--teal); color: white; }
.study-mode-list button[aria-pressed="true"] small { color: #cfdddd; }
.study-mode-list button:hover:not([aria-pressed="true"]) { background: var(--teal-soft); border-color: var(--teal-line); }
.study-navigation button:focus-visible, .retina-layer-panel :focus-visible, .retina-info-panel :focus-visible, .study-overlay button:focus-visible { outline: 3px solid #b47b36; outline-offset: 3px; }
@media (min-width: 981px) {
  html.app-embedded .study-navigation + .eye3d-workspace { min-height: calc(100dvh - 168px); }
  .eye3d-workspace.is-tissue-study { height: clamp(650px, calc(100dvh - 168px), 920px); min-height: 0 !important; }
  .retina-layer-panel, .retina-info-panel { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #b5c8c5 transparent; }
}
.eye3d-workspace > [hidden], .study-overlay[hidden], .study-overlay [hidden] { display: none !important; }
.retina-layer-panel { border-inline-end: 1px solid var(--line); }
.retina-info-panel { border-inline-start: 1px solid var(--line); }
.study-count { font: 500 1.2rem var(--font-display); color: var(--teal); }
.study-order, .study-adjacent { font: 500 .61rem var(--font-mono); color: var(--muted); letter-spacing: .04em; }
.study-order { margin: 0 0 12px; }
.study-adjacent { border-top: 1px solid var(--line); margin: 10px 0 4px; padding-top: 10px; }
.study-layer-list { display: grid; gap: 3px; }
.study-layer-list button { display: grid; grid-template-columns: 20px 1fr 26px; align-items: center; gap: 6px; width: 100%; min-height: 39px; padding: 6px; border: 1px solid transparent; border-inline-start: 3px solid var(--layer-color); border-radius: 5px; background: transparent; color: var(--ink); font: 500 .76rem/1.4 var(--study-font); text-align: start; cursor: pointer; }
.study-layer-list button small, .study-layer-list abbr { color: var(--muted); font: .58rem var(--font-mono); }
.study-layer-list button:hover { background: var(--panel-2); }
.study-layer-list button[aria-pressed="true"] { background: var(--teal-soft); border-color: var(--teal-line); border-inline-start-color: var(--layer-color); }
.study-layer-tools { display: grid; gap: 9px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .69rem; color: var(--muted); }
.study-layer-tools label { display: flex; align-items: center; gap: 7px; }
.study-layer-tools input { accent-color: var(--teal); }
#studySeparation { width: 100%; margin: 0 0 5px; }
.study-eyebrow { margin: 28px 0 12px; color: var(--teal); font: 500 .65rem/1.5 var(--font-mono); letter-spacing: .045em; }
#studyLayerTitle { margin: 0 0 13px; font: 500 1.5rem/1.18 var(--font-display); letter-spacing: -.025em; }
.study-definition { color: var(--muted); font-size: .81rem; line-height: 1.75; min-height: 100px; }
.study-feature { padding: 12px; background: var(--teal-soft); border-inline-start: 2px solid var(--teal); color: var(--teal); font-size: .74rem; line-height: 1.6; }
.study-step-buttons { display: flex; gap: 7px; margin: 16px 0 26px; }
.study-step-buttons button, .study-return, .study-viewport-actions button { padding: 9px 12px; min-height: 40px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--panel); color: var(--teal); font: 500 .75rem var(--study-font); cursor: pointer; }
.study-step-buttons button { flex: 1; padding-inline: 5px; }
.study-step-buttons button:disabled { opacity: .4; cursor: default; }
.study-reading { border-top: 1px solid var(--line); padding-top: 20px; }
.study-reading strong, .study-scale-note strong { font-size: .74rem; font-weight: 600; }
.study-reading p, .study-scale-note p { color: var(--muted); font-size: .74rem; line-height: 1.7; }
.study-scale-note { margin-top: 22px; padding: 12px; border: 1px solid #ddcbb1; border-radius: 8px; background: #fcf8ef; color: #73512a; }
.study-scale-note p { margin-bottom: 0; color: #735e42; font-size: .68rem; }
.study-source { display: block; margin: 18px 0; color: var(--teal); font-size: .7rem; text-underline-offset: 3px; }
.retina-info-panel > .study-return { width: 100%; background: var(--teal); color: white; border-color: var(--teal); }
.study-overlay { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.study-specimen-title { position: absolute; top: 100px; inset-inline-start: 26px; display: grid; gap: 6px; }
.study-specimen-title small { color: var(--teal); font: .59rem var(--font-mono); letter-spacing: .07em; }
.study-specimen-title strong { font: 500 1.65rem var(--font-display); color: var(--ink); }
.study-specimen-title > span { color: var(--muted); font-size: .67rem; }
.study-selected-tag { position: absolute; transform: translate(-75%, -140%); max-width: 220px; border-radius: 6px; background: rgba(255,255,255,.96); border: 1px solid var(--teal-line); padding: 7px 10px; font-size: .69rem; color: var(--teal); box-shadow: var(--shadow-sm); }
.study-bottom { position: absolute; bottom: 64px; inset-inline: 20px; display: grid; justify-items: center; gap: 13px; }
.study-direction-key { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 20px; padding: 7px 12px; border-radius: 6px; background: rgba(255,255,255,.88); font-size: .67rem; }
.study-direction-key span:first-child { color: #8b5b2b; }
.study-direction-key span:last-child { color: #27615f; }
.study-viewport-actions { display: flex; gap: 8px; pointer-events: auto; }
.is-tissue-study .view-presets, .is-tissue-study .orientation-widget, .is-tissue-study .atlas-labels, .is-tissue-study .atlas-quality, .is-tissue-study .viewport-atmosphere { display: none; }
.is-tissue-study .viewport-card { background: radial-gradient(ellipse at 50% 43%, #f1efe5, #dce4de 80%); }
@media (max-width: 1200px) { .study-mode-list button { gap: 6px; font-size: .68rem; padding-inline: 7px; } }
@media (max-width: 980px) {
  .study-mode-list { grid-template-columns: repeat(3, 1fr); }
  .retina-layer-panel { grid-column: 1; grid-row: 2; border-top: 1px solid var(--line); }
  .retina-info-panel { grid-column: 2; grid-row: 2; border-top: 1px solid var(--line); border-inline-start: 0; }
  .study-specimen-title { top: 78px; }
}
@media (max-width: 640px) {
  .study-navigation { padding: 12px; margin-bottom: 10px; }
  .study-navigation-heading { display: grid; gap: 5px; }
  .study-navigation-heading > span { font-size: .63rem; }
  .study-mode-list { gap: 5px; }
  .study-mode-list button { display: grid; gap: 3px; min-height: 57px; }
  .retina-layer-panel { order: 2; border-inline-end: 0; }
  .retina-info-panel { order: 3; }
  .study-layer-list button { min-height: 44px; font-size: .77rem; }
  .study-specimen-title { inset-inline-start: 16px; top: 75px; }
  .study-specimen-title strong { font-size: 1.35rem; }
  .study-specimen-title > span { font-size: .6rem; }
  .study-selected-tag { max-width: 160px; font-size: .6rem; }
  .study-bottom { inset-inline: 10px; bottom: 53px; gap: 6px; }
  .study-viewport-actions button { min-height: 44px; font-size: .63rem; }
  .study-direction-key { font-size: .59rem; }
  .study-definition { min-height: 0; }
}