/* MRI Exam Prep — Anatomy Lab v3.0 */
.rr-v3-app{
  --v3-panel:#0b1526;
  --v3-panel-2:#101e33;
  --v3-line:rgba(130,166,220,.19);
  --v3-line-strong:rgba(130,166,220,.34);
  display:grid;
  gap:1rem;
  min-width:0;
}

.rr-v3-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}

.rr-v3-header h2{
  margin:.15rem 0;
  font-family:'Fraunces',serif;
  font-size:2rem;
  font-weight:500;
}

.rr-v3-header p{
  margin:0;
  color:var(--mute);
  font-size:.84rem;
}

.rr-v3-kicker{
  color:var(--cyan);
  font-size:.7rem;
  letter-spacing:2.2px;
  text-transform:uppercase;
}

.rr-v3-stats{
  display:flex;
  gap:.55rem;
  flex-wrap:wrap;
}

.rr-v3-stats span{
  border:1px solid var(--v3-line);
  border-radius:999px;
  background:var(--v3-panel);
  padding:.44rem .72rem;
  color:var(--mute);
  font-size:.75rem;
}

.rr-v3-stats b{color:var(--ink)}

.rr-v3-controls{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.75rem;
}

.rr-v3-controls fieldset{
  min-width:0;
  margin:0;
  padding:.7rem;
  border:1px solid var(--v3-line);
  border-radius:14px;
  background:var(--v3-panel);
}

.rr-v3-controls legend{
  padding:0;
  margin:0 0 .45rem;
  color:var(--dim);
  font-size:.67rem;
  letter-spacing:1px;
  text-transform:uppercase;
}

.rr-v3-segmented{
  display:flex;
  gap:.35rem;
}

.rr-v3-segmented button{
  flex:1;
  min-width:0;
  border:1px solid var(--v3-line);
  border-radius:8px;
  background:rgba(255,255,255,.025);
  color:var(--mute);
  padding:.48rem .5rem;
  font:500 .79rem Outfit,system-ui;
  cursor:pointer;
}

.rr-v3-segmented button.active{
  border-color:#2e9cf0;
  background:linear-gradient(135deg,#168ee2,#216cc6);
  color:#fff;
  box-shadow:0 0 18px rgba(45,155,240,.18);
}

/* Equal outer columns keep the center viewport fixed at the true center. */
.rr-v3-workspace{
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(440px,720px) minmax(240px,1fr);
  grid-template-areas:"structures viewer details";
  gap:1rem;
  align-items:start;
  min-width:0;
}

.rr-v3-view-column{
  grid-area:viewer;
  width:100%;
  min-width:0;
}

.rr-v3-panel,
.rr-v3-view-card{
  border:1px solid var(--v3-line);
  border-radius:16px;
  background:var(--v3-panel);
  overflow:hidden;
  min-width:0;
}

.rr-v3-structures{
  grid-area:structures;
  width:min(100%,300px);
  justify-self:end;
}

.rr-v3-details{
  grid-area:details;
  width:min(100%,340px);
  justify-self:start;
}

.rr-v3-panel-title{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  padding:.72rem .85rem;
  border-bottom:1px solid var(--v3-line);
  font-size:.75rem;
  letter-spacing:.85px;
  text-transform:uppercase;
}

.rr-v3-panel-title small{
  color:var(--dim);
  font-size:.64rem;
}

.rr-v3-structure-list{
  display:grid;
  gap:.25rem;
  max-height:650px;
  overflow:auto;
  padding:.5rem;
}

.rr-v3-structure{
  display:grid;
  grid-template-columns:25px minmax(0,1fr) auto;
  align-items:center;
  gap:.45rem;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:#dbe6f8;
  padding:.55rem .5rem;
  text-align:left;
  font:400 .78rem Outfit,system-ui;
  cursor:pointer;
}

.rr-v3-structure:hover,
.rr-v3-structure.selected{
  border-color:rgba(61,164,255,.24);
  background:rgba(61,164,255,.1);
}

.rr-v3-structure:disabled{
  cursor:default;
  opacity:.54;
}

.rr-v3-structure i{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#243a5a;
  color:#a8d6ff;
  font-size:.67rem;
  font-style:normal;
}

.rr-v3-structure b{color:var(--green)}

.rr-v3-panel-note{
  margin:0;
  padding:.65rem .85rem .8rem;
  border-top:1px solid var(--v3-line);
  color:var(--dim);
  font-size:.69rem;
  line-height:1.45;
}

.rr-v3-view-card{
  padding:.8rem;
}

.rr-v3-view-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  padding:.15rem .2rem .7rem;
}

.rr-v3-view-title strong{display:block}

.rr-v3-view-title small{
  display:block;
  margin-top:.12rem;
  color:var(--dim);
  font-size:.7rem;
}

.rr-v3-timer{
  flex:0 0 auto;
  border:1px solid var(--v3-line-strong);
  border-radius:10px;
  padding:.34rem .62rem;
  font-family:'Fraunces',serif;
  font-size:1.12rem;
}

.rr-v3-timer.danger{
  border-color:rgba(255,107,107,.55);
  color:var(--red);
}

/* Image and hotspots share this exact 768:768 coordinate surface. */
.rr-v3-stage{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;
  margin-inline:auto;
  overflow:hidden;
  border:1px solid var(--v3-line);
  border-radius:12px;
  background:#020611;
}

.rr-v3-stage > img,
.rr-v3-overlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.rr-v3-stage > img{
  display:block;
  object-fit:fill;
}

.rr-v3-overlay{
  pointer-events:none;
}

.rr-v3-hotspot{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  transform:translate(-50%,-50%);
  border:2px solid #44a8ff;
  border-radius:50%;
  background:rgba(4,16,34,.83);
  color:#fff;
  cursor:pointer;
  pointer-events:auto;
  box-shadow:0 0 0 4px rgba(68,168,255,.12);
  transition:transform .15s,border-color .15s,box-shadow .15s,background .15s;
}

.rr-v3-hotspot span{
  font:600 .72rem Outfit,system-ui;
}

.rr-v3-hotspot:hover,
.rr-v3-hotspot.selected{
  transform:translate(-50%,-50%) scale(1.14);
  border-color:#fff;
  box-shadow:0 0 18px #3da4ff;
}

.rr-v3-hotspot.mastered{border-color:var(--green)}
.rr-v3-hotspot.correct{border-color:var(--green);background:rgba(19,89,71,.92)}
.rr-v3-hotspot.incorrect{border-color:var(--red);background:rgba(99,27,39,.92)}

.rr-v3-disclaimer{
  position:absolute;
  z-index:3;
  left:.65rem;
  bottom:.55rem;
  border:1px solid var(--v3-line);
  border-radius:7px;
  background:rgba(2,6,17,.8);
  padding:.25rem .44rem;
  color:var(--dim);
  font-size:.63rem;
}

.rr-v3-level-note{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.75rem;
  align-items:start;
  padding:.72rem .2rem .15rem;
  font-size:.72rem;
  line-height:1.45;
}

.rr-v3-level-note strong{
  color:#dce9fb;
  white-space:nowrap;
}

.rr-v3-level-note span{
  color:var(--dim);
  text-align:right;
}

.rr-v3-view-actions{
  display:flex;
  justify-content:space-between;
  gap:.6rem;
  padding-top:.7rem;
}

.rr-v3-view-actions button:disabled{
  opacity:.55;
  cursor:default;
}

.rr-v3-plane-previews{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.65rem;
  margin-top:.8rem;
  padding:.65rem;
  border:1px solid var(--v3-line);
  border-radius:14px;
  background:var(--v3-panel);
}

.rr-v3-plane-previews button{
  display:grid;
  grid-template-columns:70px minmax(0,1fr);
  align-items:center;
  gap:.55rem;
  min-width:0;
  border:1px solid var(--v3-line);
  border-radius:10px;
  background:rgba(255,255,255,.02);
  color:var(--mute);
  padding:.34rem;
  text-align:left;
  text-transform:capitalize;
  cursor:pointer;
}

.rr-v3-plane-previews button.active{
  border-color:#39a8ff;
  color:#fff;
}

.rr-v3-plane-previews img{
  width:70px;
  height:54px;
  display:block;
  object-fit:cover;
  border-radius:7px;
  background:#020611;
}

.rr-v3-detail-content,
.rr-v3-identify{
  padding:1rem;
}

.rr-v3-detail-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.7rem;
  padding-bottom:.2rem;
}

.rr-v3-detail-heading span,
.rr-v3-identify span{
  color:#62b5ff;
  font-size:.67rem;
  letter-spacing:1px;
  text-transform:uppercase;
}

.rr-v3-detail-heading h3,
.rr-v3-identify h3{
  margin:.25rem 0 0;
  font-family:'Fraunces',serif;
  font-size:1.35rem;
  font-weight:500;
}

.rr-v3-bookmark{
  border:0;
  background:transparent;
  color:var(--mute);
  font-size:1rem;
  cursor:pointer;
}

.rr-v3-bookmark.active{color:var(--gold)}

.rr-v3-detail-content h4,
.rr-v3-related h4{
  margin:.9rem 0 .32rem;
  color:#d8e6fb;
  font-size:.7rem;
  letter-spacing:.75px;
  text-transform:uppercase;
}

.rr-v3-detail-content p,
.rr-v3-identify p,
.rr-v3-related p,
.rr-v3-feedback p{
  margin:0;
  color:var(--mute);
  font-size:.8rem;
  line-height:1.55;
}

.rr-v3-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.34rem;
}

.rr-v3-tags span{
  border:1px solid rgba(85,166,238,.23);
  border-radius:6px;
  background:#17385d;
  padding:.24rem .43rem;
  color:#b9dcff;
  font-size:.67rem;
}

.rr-v3-related{
  margin-top:1rem;
  padding-top:.15rem;
  border-top:1px solid var(--v3-line);
}

.rr-v3-related a{
  display:block;
  padding:.3rem 0;
  color:#58b4ff;
  font-size:.74rem;
  text-decoration:none;
}

.rr-v3-feedback{
  margin:1rem;
  border:1px solid var(--v3-line);
  border-radius:11px;
  padding:.85rem;
}

.rr-v3-feedback.good{
  border-color:rgba(52,224,181,.32);
  background:rgba(52,224,181,.09);
}

.rr-v3-feedback.bad{
  border-color:rgba(255,107,107,.34);
  background:rgba(255,107,107,.09);
}

.rr-v3-feedback.neutral{
  background:rgba(61,164,255,.08);
}

.rr-v3-feedback strong{
  display:block;
  margin-bottom:.22rem;
}

@media(max-width:1220px){
  .rr-v3-workspace{
    grid-template-columns:minmax(210px,.8fr) minmax(430px,700px);
    grid-template-areas:
      "structures viewer"
      "details viewer";
  }

  .rr-v3-structures,
  .rr-v3-details{
    width:100%;
    justify-self:stretch;
  }
}

@media(max-width:900px){
  .rr-v3-controls{
    grid-template-columns:1fr;
  }

  .rr-v3-workspace{
    grid-template-columns:1fr;
    grid-template-areas:
      "viewer"
      "structures"
      "details";
  }

  .rr-v3-view-column{
    width:min(100%,720px);
    justify-self:center;
  }

  .rr-v3-structures,
  .rr-v3-details{
    width:100%;
  }

  .rr-v3-structure-list{
    max-height:390px;
  }
}

@media(max-width:620px){
  .rr-v3-header h2{font-size:1.6rem}
  .rr-v3-view-card{padding:.55rem}
  .rr-v3-level-note{display:block}
  .rr-v3-level-note span{display:block;margin-top:.25rem;text-align:left}
  .rr-v3-plane-previews{grid-template-columns:1fr}
  .rr-v3-hotspot{width:28px;height:28px}
}


/* Anatomy Lab v3.1 — validation-only safeguards */
.rr-v3-validation-status span{
  border-color:rgba(255,181,71,.35);
  background:rgba(255,181,71,.07);
}

.rr-v3-validation-status b{
  color:#ffd18a;
}

.rr-v3-validation-control{
  border-color:rgba(255,181,71,.32) !important;
}

.rr-v3-validation-pill{
  min-height:35px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  border:1px solid rgba(255,181,71,.36);
  border-radius:8px;
  background:rgba(255,181,71,.09);
  color:#ffd18a;
  font-size:.77rem;
  font-weight:600;
}

.rr-v3-validation-actions{
  justify-content:center;
  border:1px solid rgba(255,181,71,.22);
  border-radius:9px;
  background:rgba(255,181,71,.06);
  padding:.65rem .8rem;
  color:#f0c57e;
  font-size:.73rem;
  line-height:1.45;
  text-align:center;
}

.rr-v3-disclaimer{
  border-color:rgba(255,107,107,.45);
  background:rgba(75,14,27,.88);
  color:#ffd6dc;
  font-weight:600;
}