/* ScrubHub reusable visual-learning system */
:root {
  --system-respiratory: #277da1;
  --system-cardiac: #b84a62;
  --system-neuro: #7357b5;
  --system-renal: #2d7d70;
  --system-endocrine: #b26822;
  --visual-primary: #6f52ed;
  --visual-secondary: #1a7c88;
  --visual-monitor: #a46413;
  --visual-canvas: #f9fafd;
}

.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
:where(button, a, select, input, textarea, [tabindex]):focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 55%, white); outline-offset: 3px; }

.vl-lab-shell { max-width: 1380px; margin: 0 auto; padding-bottom: 35px; }
.vl-lab-head { display: flex; align-items: end; justify-content: space-between; gap: 22px; margin-bottom: 14px; }
.vl-lab-head h1 { margin: 2px 0 5px; font: 600 clamp(32px,4vw,48px)/1.05 var(--display); letter-spacing: -.035em; }
.vl-lab-head p:last-child { max-width: 760px; margin: 0; color: var(--ink-soft); line-height: 1.55; }
.vl-top-tabs { display: inline-flex; width: auto; margin: 14px 0; border-radius: 14px; }
.vl-top-tabs button { min-height: 44px; }

.vl-workspace { display: grid; grid-template-columns: 230px minmax(420px,1fr) 320px; grid-template-areas: "controls canvas info" "timeline timeline timeline"; gap: 12px; align-items: stretch; }
.vl-controls, .vl-canvas-panel, .vl-info, .vl-timeline { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 1px 2px rgba(36,24,70,.04),0 8px 24px rgba(36,24,70,.05); }
.vl-controls { grid-area: controls; padding: 15px; display: flex; flex-direction: column; gap: 17px; }
.vl-canvas-panel { grid-area: canvas; min-width: 0; overflow: hidden; display: flex; flex-direction: column; }
.vl-info { grid-area: info; min-width: 0; overflow: hidden; display: flex; flex-direction: column; }
.vl-timeline { grid-area: timeline; overflow: hidden; }

.vl-field, .vl-control-group { display: grid; gap: 7px; }
.vl-field > span, .vl-control-label { color: var(--ink-soft); font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.vl-field select, .vl-settings select, .vl-section-head select { width: 100%; min-height: 44px; padding: 8px 10px; border: 1.5px solid var(--border-strong); border-radius: 10px; background: var(--surface-2); color: var(--ink); font: 600 12.5px var(--font); }
.vl-segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; }
.vl-segmented button { min-width: 0; min-height: 38px; padding: 7px 5px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-soft); font: 700 11.5px var(--font); cursor: pointer; }
.vl-segmented button.active { background: var(--surface); color: var(--primary-700); box-shadow: 0 2px 8px rgba(60,45,120,.12); }
.vl-control-stack { display: grid; gap: 6px; }
.vl-toggle { width: 100%; min-height: 42px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 10px; padding: 8px 9px; background: transparent; color: var(--ink-soft); text-align: left; font: 600 11.5px var(--font); cursor: pointer; }
.vl-toggle:hover, .vl-toggle.active { border-color: var(--primary); background: var(--primary-050); color: var(--primary-700); }
.vl-breadcrumb { display: grid; gap: 5px; padding: 10px; border-left: 3px solid var(--primary); border-radius: 3px 9px 9px 3px; background: var(--surface-2); }
.vl-breadcrumb span { font-size: 9.5px; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }
.vl-breadcrumb strong { font-size: 11.5px; line-height: 1.45; }
.vl-legend { display: grid; gap: 7px; font-size: 10.5px; color: var(--ink-soft); }
.vl-legend strong { color: var(--ink); }
.vl-legend span, .mastery-legend span { display: flex; align-items: center; gap: 7px; }
.vl-legend i, .mastery-legend i { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }
.legend-primary { background: rgba(111,82,237,.18); border: 2px solid var(--visual-primary); }
.legend-secondary { background: repeating-linear-gradient(45deg,rgba(26,124,136,.22) 0 2px,transparent 2px 5px); border: 2px dashed var(--visual-secondary); }
.legend-selected { background: #fff; border: 3px double #d06a15; }
.legend-outline { background: transparent; border: 2px solid var(--border-strong); }

.vl-state-toggle { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; padding: 8px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.vl-state-toggle button { min-height: 44px; display: flex; justify-content: center; align-items: center; gap: 7px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--ink-soft); text-transform: capitalize; font: 700 12px var(--font); cursor: pointer; }
.vl-state-toggle button span { font-size: 16px; }
.vl-state-toggle button.active { color: var(--primary-700); border-color: var(--primary); background: var(--surface); box-shadow: 0 3px 10px rgba(70,45,130,.10); }
.vl-canvas-toolbar { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 12px; border-bottom: 1px solid var(--border); font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }
.vl-canvas-toolbar > div { display: flex; gap: 4px; }
.vl-canvas-toolbar button { min-width: 38px; min-height: 34px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); cursor: pointer; }
.vl-canvas-wrap { flex: 1; min-height: 510px; display: grid; place-items: center; position: relative; overflow: auto; padding: 18px; background: radial-gradient(circle at 50% 46%,#fff 0,#f8f9fd 54%,#f0eff8 100%); }
.visual-block { width: 100%; max-width: 760px; }
.visual-canvas { width: 100%; transform-origin: center; transition: transform .2s ease; }
.visual-description { margin: 10px auto 0; max-width: 680px; color: var(--ink-soft); font-size: 12px; line-height: 1.5; text-align: center; }
.vl-canvas-caption { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-top: 1px solid var(--border); color: var(--ink-soft); font-size: 10.5px; }
.vl-canvas-caption span:first-child { display: flex; align-items: center; gap: 6px; color: var(--primary-700); font-weight: 700; }
.visual-fallback-note { display: flex; align-items: center; gap: 10px; margin: 0 auto 10px; max-width: 620px; padding: 9px 11px; border: 1px solid #d3c9ff; border-radius: 10px; background: #f5f2ff; font-size: 10.5px; color: var(--ink-soft); }
.visual-fallback-note strong { color: var(--primary-700); white-space: nowrap; }

/* Anatomy viewer */
.anatomy-map { display: block; width: min(100%,520px); height: auto; margin: auto; overflow: visible; }
.body-silhouette { fill: #eef0f6; stroke: #8990a6; stroke-width: 2; }
.body-centerline { fill: none; stroke: #c8ccd8; stroke-width: 1; stroke-dasharray: 4 5; }
.anatomy-organ { color: var(--visual-secondary); fill: #d8e0ec; stroke: #596176; stroke-width: 2.2; cursor: pointer; transition: opacity .2s, transform .2s, filter .2s; transform-box: fill-box; transform-origin: center; }
.anatomy-organ:hover, .anatomy-organ:focus-visible { transform: scale(1.06); filter: drop-shadow(0 4px 6px rgba(35,27,70,.22)); }
.anatomy-organ.is-primary { fill: rgba(111,82,237,.28); stroke: var(--visual-primary); stroke-width: 4; }
.anatomy-organ.is-secondary { fill: url(#secondaryPattern); stroke: var(--visual-secondary); stroke-width: 3; stroke-dasharray: 6 4; }
.anatomy-organ.is-selected { stroke: #d06a15; stroke-width: 5; filter: drop-shadow(0 0 6px rgba(208,106,21,.45)); }
.anatomy-organ.is-muted { opacity: .12; pointer-events: none; }
.anatomy-organ .organ-line { fill: none; stroke: inherit; stroke-width: 2; }
.anatomy-label line { stroke: #8b90a3; stroke-width: 1; }
.anatomy-label text { fill: var(--ink); font: 600 9.5px var(--font); text-transform: capitalize; }
.body-back { transform: scaleX(-1); }
.body-back .anatomy-label text { transform: scaleX(-1); transform-origin: center; }
.visual-high-contrast .anatomy-organ { stroke-width: 4; }

/* 2D mechanism diagrams */
.mechanism-diagram { width: 100%; height: auto; display: block; color: var(--primary); }
.diagram-kicker { fill: var(--primary-700); font: 800 12px var(--font); letter-spacing: .09em; }
.diagram-title { fill: var(--ink); font: 600 18px var(--display); }
.diagram-label { fill: var(--ink); font: 700 13px var(--font); }
.diagram-big-label { fill: var(--ink); font: 800 10px var(--font); letter-spacing: .08em; }
.diagram-small { font: 600 10px var(--font); }
.diagram-note { fill: var(--ink-soft); font: 500 10px var(--font); }
.airway-outer { fill: #f8dede; stroke: #9f5362; stroke-width: 5; }
.airway-muscle { fill: #dc9ca6; stroke: #9f5362; stroke-width: 10; transition: r .7s ease; }
.airway-muscle.contracted { stroke-width: 18; }
.airway-muscle.relaxing { stroke: var(--visual-secondary); }
.airway-lumen { fill: #eefbff; stroke: #247a9c; stroke-width: 4; transition: r .7s ease; }
.airway-mucus { fill: #f0c14e; stroke: #8d6711; stroke-width: 2; }
.airflow-lines path { fill: none; stroke: #247a9c; stroke-width: 3; marker-end: url(#airArrow); stroke-dasharray: 10 8; animation: dash-flow 1.5s linear infinite; }
.legend-muscle { fill: #dc9ca6; stroke: #9f5362; }.legend-inflammation { fill: #f8dede; stroke: #9f5362; }.legend-mucus { stroke: #c29320; stroke-width: 5; }
.diagram-legend text { fill: var(--ink-soft); font: 600 11px var(--font); }
.cell-membrane { fill: none; stroke: #7a8197; stroke-width: 8; stroke-linecap: round; }
.receptor-shape { fill: #efeaff; stroke: var(--visual-primary); stroke-width: 5; }
.drug-particle circle { fill: var(--visual-primary); }.drug-particle text { fill: white; font: 800 12px var(--font); }
.signal-arrow { fill: none; stroke: var(--visual-secondary); stroke-width: 3; marker-end: url(#airArrow); }
.signal-node { fill: #e1f6f5; stroke: var(--visual-secondary); stroke-width: 3; }.signal-node + text,.effect-node + text { fill: var(--ink); font: 700 10px var(--font); }
.effect-node { fill: #effaf6; stroke: #32816e; stroke-width: 2; }
.nephron-tube { fill: none; stroke: #768198; stroke-width: 18; stroke-linecap: round; }
.nephron-highlight { fill: none; stroke: var(--visual-primary); stroke-width: 20; stroke-linecap: round; }
.transporter-block rect { fill: #f1edff; stroke: var(--visual-primary); stroke-width: 3; }.transporter-block text { fill: var(--ink); font: 800 12px var(--font); }.transporter-block path { stroke: #bd3d55; stroke-width: 8; }
.urine-particles circle { fill: #2d8daa; animation: particle-pulse 1.3s ease-in-out infinite alternate; }
.blood-vessel { fill: #fbe5e7; stroke: #b45466; stroke-width: 4; }
.glucose-particle polygon { fill: #f6ce5f; stroke: #9c7410; stroke-width: 2; }.glucose-particle text { fill: #57400a; font: 800 8px var(--font); }
.muscle-cell { fill: #e6edff; stroke: #526fa5; stroke-width: 3; }
.insulin-signals circle { fill: var(--visual-primary); }.insulin-signals text { fill: white; font: 800 10px var(--font); }.insulin-signals path,.uptake-arrows path { fill: none; stroke: var(--visual-secondary); stroke-width: 4; marker-end: url(#airArrow); }
.journey-node circle { fill: var(--surface); stroke: #7c8295; stroke-width: 3; }.journey-node.target circle { fill: #f1edff; stroke: var(--visual-primary); stroke-width: 5; }.journey-node text { fill: var(--ink); font: 800 12px var(--font); }
.journey-path { fill: none; stroke: var(--visual-secondary); stroke-width: 4; marker-end: url(#journeyArrow); }
.route-particle circle { fill: var(--visual-primary); animation: route-travel 2.8s ease-in-out infinite; }
.journey-diagram.route-hidden .journey-path,.journey-diagram.route-hidden .route-particle { display: none; }
@keyframes dash-flow { to { stroke-dashoffset: -36; } }
@keyframes particle-pulse { to { transform: translateY(8px); opacity: .55; } }
@keyframes route-travel { 0%{transform:translateX(0)}45%{transform:translateX(150px)}100%{transform:translateX(365px)} }

.visual-text-fallback { max-width: 620px; margin: auto; padding: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; }
.visual-text-fallback h3 { margin: 4px 0 8px; font: 600 26px var(--display); }
.visual-text-fallback p { color: var(--ink-soft); line-height: 1.6; }
.visual-text-fallback dl { display: grid; grid-template-columns: 110px 1fr; gap: 8px; font-size: 12px; }
.visual-text-fallback dt { font-weight: 800; color: var(--primary-700); }.visual-text-fallback dd { margin: 0; }
.visual-compare-three { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.visual-compare-three section { min-width: 0; padding: 10px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); text-align: center; }
.visual-compare-three section > strong { display: inline-block; padding: 3px 8px; border-radius: 99px; background: var(--surface-2); color: var(--primary-700); font-size: 9px; text-transform: uppercase; letter-spacing: .07em; }
.visual-compare-three svg { margin-top: 6px; max-height: 240px; }
.visual-compare-three p { margin: 6px 0 0; color: var(--ink-soft); font-size: 10px; line-height: 1.4; }
.compare-state-icon .anatomy-map { max-height: 215px; }

/* Explanation panel */
.vl-info-head { padding: 18px 17px 13px; border-bottom: 1px solid var(--border); }
.vl-info-head h2 { margin: 3px 0 4px; font: 600 26px/1.1 var(--display); }
.vl-info-head > p:last-child { margin: 0; color: var(--ink-soft); font-size: 11.5px; }
.vl-info-tabs { display: flex; gap: 4px; padding: 7px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.vl-info-tabs button { flex: 1; min-width: max-content; min-height: 38px; border: 0; border-radius: 8px; padding: 6px 8px; background: transparent; color: var(--ink-soft); font: 700 10.5px var(--font); cursor: pointer; }
.vl-info-tabs button.active { background: var(--primary-050); color: var(--primary-700); }
.vl-info-body { flex: 1; padding: 15px 17px 18px; overflow-y: auto; max-height: 570px; }
.vl-plain { margin: 0 0 14px; color: var(--ink); font-size: 16px; line-height: 1.55; }
.vl-info details { border-top: 1px solid var(--border); padding: 11px 0; }
.vl-info summary { cursor: pointer; color: var(--primary-700); font-size: 12px; font-weight: 800; }
.vl-info details p,.vl-info details li { color: var(--ink-soft); font-size: 12px; line-height: 1.55; }
.vl-explanation dl { display: grid; grid-template-columns: 88px 1fr; gap: 8px; margin-top: 13px; font-size: 11.5px; }
.vl-explanation dt { color: var(--ink-soft); font-weight: 700; }.vl-explanation dd { margin: 0; line-height: 1.45; }
.vl-why { padding: 12px; border-left: 4px solid var(--visual-secondary); background: #eef9f7; border-radius: 4px 11px 11px 4px; }
.vl-why span,.vl-quick-recall span { color: #176b68; font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.vl-why p { margin: 5px 0 0; font-size: 12.5px; line-height: 1.5; }
.vl-quick-recall,.vl-recall-card { margin-top: 15px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.vl-quick-recall p,.vl-recall-card p { margin: 6px 0 9px; font-size: 11.5px; line-height: 1.45; }
.vl-quick-recall button,.vl-recall-card button { min-height: 38px; border: 1px solid var(--border-strong); border-radius: 8px; padding: 7px 9px; background: var(--surface); color: var(--primary-700); font: 700 10.5px var(--font); cursor: pointer; }
.vl-recall-card > div { display: grid; gap: 5px; }.vl-recall-card > div button { text-align: left; }
.vl-recall-card p.correct { color: var(--green); font-weight: 700; }.vl-recall-card p.incorrect { color: var(--red); font-weight: 700; }
.vl-sources ul { padding-left: 17px; }.vl-sources li { margin-bottom: 8px; font-size: 11.5px; }.vl-sources a { color: var(--primary-700); line-height: 1.4; }
.review-status { display: inline-flex; padding: 4px 8px; border-radius: 99px; background: #fff4d9; color: #825408; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.vl-sources p { color: var(--ink-soft); font-size: 11px; line-height: 1.5; }.vl-disclaimer { padding-top: 10px; border-top: 1px solid var(--border); }

/* Timeline */
.vl-playback { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 11px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.vl-playback button { min-height: 40px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); border-radius: 9px; padding: 7px 10px; background: var(--surface); color: var(--ink); font: 700 10.5px var(--font); cursor: pointer; }
.vl-playback button.primary { border-color: var(--primary); background: var(--primary); color: #fff; min-width: 78px; justify-content: center; }
.vl-playback button:disabled { opacity: .4; cursor: default; }
.vl-playback #vl-next .ic { transform: none; }.vl-playback #vl-prev .ic { transform: rotate(180deg); }
.vl-playback label { display: flex; align-items: center; gap: 5px; color: var(--ink-soft); font: 700 10px var(--font); }
.vl-playback select { min-height: 38px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; }
.vl-step-track { position: relative; display: flex; gap: 7px; overflow-x: auto; padding: 10px 11px 13px; scroll-snap-type: x proximity; }
.vl-step-track::before { content: ''; position: absolute; left: 11px; right: 11px; top: 28px; height: 3px; background: linear-gradient(90deg,var(--primary) var(--step-progress),var(--border) var(--step-progress)); border-radius: 99px; }
.vl-step { position: relative; flex: 0 0 132px; min-height: 74px; display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; gap: 3px 7px; align-content: start; padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--ink); text-align: left; font-family: var(--font); cursor: pointer; scroll-snap-align: start; }
.vl-step > span { grid-row: 1/3; width: 26px; height: 26px; display: grid; place-items: center; z-index: 1; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--border-strong); font-size: 9px; font-weight: 800; }
.vl-step strong { font-size: 10.5px; line-height: 1.25; }.vl-step small { color: var(--ink-soft); font-size: 8.5px; line-height: 1.3; }
.vl-step.complete > span { background: var(--primary-050); border-color: var(--primary); color: var(--primary-700); }.vl-step.active { border-color: var(--primary); box-shadow: 0 3px 10px rgba(90,60,170,.15); }.vl-step.active > span { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Dashboard body-system mastery */
.mastery-map { display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; align-items: center; padding: 22px; margin-bottom: 18px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-sm); }
.mastery-map-copy h2 { margin: 3px 0 5px; font: 600 28px var(--display); }.mastery-map-copy > p { color: var(--ink-soft); font-size: 12px; line-height: 1.5; }
.mastery-system-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-top: 15px; }
.mastery-system-list button { min-height: 58px; display: grid; grid-template-columns: 32px 1fr; gap: 8px; align-items: center; position: relative; overflow: hidden; padding: 8px 9px 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); color: var(--ink); text-align: left; font-family: var(--font); cursor: pointer; }
.mastery-system-list button:hover { border-color: var(--primary); transform: translateY(-1px); }.mastery-system-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--primary-050); color: var(--primary-700); font-weight: 800; }
.mastery-system-list button > span:nth-child(2) { display: grid; gap: 2px; }.mastery-system-list strong { font-size: 11.5px; }.mastery-system-list small { color: var(--ink-soft); font-size: 9px; }
.mastery-system-list i { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--border); }.mastery-system-list i b { display: block; width: var(--system-progress); height: 100%; background: var(--primary); }
.mastery-body-wrap { display: grid; place-items: center; }.mastery-body-wrap .anatomy-map { max-height: 360px; }.mastery-legend { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; color: var(--ink-soft); font-size: 9px; }
.mastery-map.compact { grid-template-columns: 1fr .55fr; margin-bottom: 20px; }.mastery-map.compact .mastery-system-list { grid-template-columns: repeat(4,minmax(0,1fr)); }.mastery-map.compact .mastery-system-list button { grid-template-columns: 1fr; }.mastery-map.compact .mastery-system-icon { display: none; }.mastery-map.compact .mastery-body-wrap .anatomy-map { max-height: 270px; }

/* Compare, settings, inline blocks, visual quiz */
.vl-compare-page,.vl-settings { max-width: 1180px; margin: 0 auto; padding: 22px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); }
.vl-section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }.vl-section-head h2,.vl-settings h2 { margin: 3px 0 5px; font: 600 30px var(--display); }.vl-section-head p,.vl-settings p { margin: 0; color: var(--ink-soft); }.vl-section-head label { width: min(320px,100%); font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--ink-soft); }
.vl-clinical-compare { margin-top: 16px; }.vl-clinical-compare a { color: var(--primary-700); }
.vl-settings { display: grid; gap: 20px; max-width: 850px; }.vl-settings-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }.vl-settings-grid > label { display: grid; gap: 6px; }.vl-settings-grid > label > span:first-child { font-size: 11px; font-weight: 800; color: var(--ink-soft); }
.vl-setting-check { grid-template-columns: 22px 1fr !important; align-items: start; padding: 12px; border: 1px solid var(--border); border-radius: 12px; }.vl-setting-check input { margin-top: 4px; }.vl-setting-check span { display: grid; gap: 3px; }.vl-setting-check strong { font-size: 12.5px; }.vl-setting-check small { color: var(--ink-soft); line-height: 1.4; }
.inline-visual-block { margin: 4px 0 14px; padding: 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }.inline-visual-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }.inline-visual-head h3 { margin: 0; font: 600 17px var(--display); }.inline-visual-block .visual-canvas { max-height: 270px; overflow: hidden; }.inline-visual-block .mechanism-diagram,.inline-visual-block .anatomy-map { max-height: 250px; }
.visual-quiz-map { margin: 0 auto 14px; max-width: 480px; padding: 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--visual-canvas); }.visual-quiz-map .anatomy-map { max-height: 310px; }.visual-quiz-instruction { margin: 4px 0 0; color: var(--ink-soft); font-size: 11px; text-align: center; }
.dashboard-visual-continue { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding: 16px 18px; border: 1px solid #d8cffb; border-radius: 17px; background: #f7f4ff; }.dashboard-visual-continue h3 { margin: 2px 0 4px; font: 600 19px var(--display); }.dashboard-visual-continue p { margin: 0; color: var(--ink-soft); font-size: 12px; }
.nadi-head-actions { display: flex; align-items: center; gap: 7px; }.nadi-show-select { display: grid; gap: 2px; }.nadi-show-select span { color: var(--ink-soft); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }.nadi-show-select select { max-width: 190px; min-height: 32px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--ink); font: 600 10px var(--font); }

/* Accessibility modes */
.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
.visual-high-contrast { --border:#626575; --border-strong:#393c49; --ink-soft:#414450; --visual-primary:#4020c4; --visual-secondary:#005f66; }
@media (prefers-reduced-motion: reduce) { .visual-canvas * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }
@media (forced-colors: active) { .anatomy-organ,.vl-step,.vl-toggle,.vl-state-toggle button { forced-color-adjust: none; stroke: CanvasText; border-color: CanvasText; }.anatomy-organ.is-primary { stroke: Highlight; }.anatomy-organ.is-secondary { stroke-dasharray: 6 4; }.anatomy-organ.is-selected { stroke: LinkText; } }

@media (max-width: 1360px) {
  .vl-workspace { grid-template-columns: 190px minmax(360px,1fr); grid-template-areas: "controls canvas" "info info" "timeline timeline"; }
  .vl-info { min-height: 320px; }.vl-info-body { max-height: none; }
}
@media (max-width: 760px) {
  .vl-lab-head { display: grid; align-items: start; }.vl-top-tabs { display: flex; max-width: 100%; overflow-x: auto; }
  .vl-workspace { grid-template-columns: 1fr; grid-template-areas: "canvas" "controls" "info" "timeline"; }
  .vl-canvas-wrap { min-height: 390px; padding: 10px; }.vl-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }.vl-controls .vl-field,.vl-controls .vl-breadcrumb,.vl-controls .vl-legend { grid-column: 1/-1; }
  .vl-state-toggle { position: sticky; top: 0; z-index: 5; }.vl-timeline { position: relative; }.vl-step-track { padding-bottom: 16px; }.vl-playback { justify-content: flex-start; overflow-x: auto; }.vl-playback button span { display: none; }
  .visual-compare-three { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }.visual-compare-three section { flex: 0 0 86%; scroll-snap-align: center; }
  .mastery-map { grid-template-columns: 1fr; }.mastery-body-wrap { order: -1; }.mastery-body-wrap .anatomy-map { max-height: 260px; }.vl-section-head { display: grid; }.vl-settings-grid { grid-template-columns: 1fr; }
  .mastery-map.compact { grid-template-columns: 1fr; }.mastery-map.compact .mastery-system-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .nadi-head-actions { flex-wrap: wrap; justify-content: flex-end; }.nadi-show-select select { max-width: 150px; }
}
@media (max-width: 480px) {
  .vl-controls { grid-template-columns: 1fr; }.vl-controls > * { grid-column: 1/-1; }.vl-canvas-wrap { min-height: 340px; }.vl-canvas-caption { display: grid; }.vl-state-toggle button { font-size: 10.5px; padding: 4px; }.mastery-system-list { grid-template-columns: 1fr; }.mastery-map { padding: 16px; }.vl-info-head h2 { font-size: 23px; }.inline-visual-head { align-items: start; }.inline-visual-head .btn { white-space: nowrap; }
  .dashboard-visual-continue { align-items: flex-start; flex-direction: column; }.nadi-show-select { display: none; }
}