.em_overlay{


  position:fixed;


  inset:0;


  display:none;


  align-items:center;


  justify-content:center;


  background:


    radial-gradient(


      ellipse at center,


      rgba(15,23,42,0.45),


      rgba(15,23,42,0.75)


    );


  backdrop-filter: blur(3px);


  z-index:10000;


  padding:14px;


}





.em_card{


  width:min(980px, calc(100vw - 28px));


  max-height:min(88vh, 920px);


  overflow:hidden;


  border-radius:20px;


  background:#f4f6f8;


  border:1px solid rgba(15,23,42,0.10);


  box-shadow:0 22px 70px rgba(0,0,0,0.30);


  padding:18px 18px 14px;


  font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;


  color:#0f172a;


  position:relative;


  display:flex;


  flex-direction:column;


  min-height:0;


}





.em_header{


  display:flex;


  justify-content:space-between;


  align-items:flex-start;


  gap:16px;


}





.em_title{


  margin:0;


  font-size:1.35rem;


  letter-spacing:-0.01em;


}





.em_sub{


  margin:6px 0 0;


  color:rgba(15,23,42,0.64);


  font-size:0.98rem;


}





.em_statusPill{


  flex:0 0 auto;


  white-space:nowrap;


  padding:9px 12px;


  border-radius:999px;


  border:1px solid rgba(15,23,42,0.10);


  background:#ffffff;


  font-weight:800;


  font-size:0.92rem;


  box-shadow:0 4px 12px rgba(0,0,0,0.04);


}





.em_layout{


  margin-top:16px;


  display:grid;


  grid-template-columns:220px minmax(0, 1fr);


  gap:22px;


  align-items:stretch;


  flex:1;


  min-height:0;


}





.em_side{


  display:flex;


  flex-direction:column;


  gap:14px;


  min-height:0;


  flex:1;


}





.em_side > .em_meterCard,


.em_side > .em_breakdownCard{


  flex:1;


  min-height:0;


}





.em_meterCard,


.em_answersCard{


  background:#ffffff;


  border:1px solid rgba(15,23,42,0.06);


  border-radius:18px;


  padding:14px;


  box-shadow:


    0 8px 24px rgba(0,0,0,0.08),


    0 2px 6px rgba(0,0,0,0.04);


}





.em_meterCard{


  overflow:hidden;


  display:flex;


  flex-direction:column;


  min-height:0;


  justify-content:center;


}





.em_breakdownCard{


  background:#ffffff;


  border:1px solid rgba(15,23,42,0.05);


  border-radius:18px;


  padding:14px;


  overflow-y:auto;


  box-shadow:none;


}





.em_meterWrap{


  display:flex;


  flex-direction:column;


  flex:1;


  min-height:0;


}





.em_meter{


  position:relative;


  flex:1;


  min-height:160px;


  height:auto;


  border-radius:16px;


  border:1px solid rgba(15,23,42,0.10);


  background:linear-gradient(


      180deg,


      rgba(55,65,81,0.95),


      rgba(31,41,55,0.98)


    );


  overflow:hidden;


}





.em_meterFill{


  position:absolute;


  left:0;


  right:0;


  bottom:0;


  height:0%;


  background:linear-gradient(


    180deg,


    rgba(96,165,250,0.95),


    rgba(37,99,235,0.92)


  );


  transition:height 220ms ease;


}





.em_meterLine{


  position:absolute;


  left:0;


  right:0;


  height:0;


  border-top:2px dashed rgba(15,23,42,0.22);


}





.em_meterLabel{


  position:absolute;


  left:8px;


  transform:translateY(-50%);


  font-size:0.78rem;


  font-weight:800;


  color:rgba(15,23,42,0.72);


  background:rgba(255,255,255,0.94);


  border:1px solid rgba(15,23,42,0.08);


  border-radius:999px;


  padding:3px 7px;


}





.em_meterTop,


.em_meterBottom{


  position:absolute;


  right:8px;


  font-size:0.75rem;


  font-weight:800;


  color:rgba(15,23,42,0.55);


}





.em_meterTop{ top:8px; }


.em_meterBottom{ bottom:8px; }





.em_breakdownTitle{


  margin:0 0 10px;


  font-size:0.92rem;


  color:rgba(15,23,42,0.72);


  font-weight:900;


  text-transform:uppercase;


  letter-spacing:0.04em;


}





.em_breakdownList{


  display:flex;


  flex-direction:column;


  gap:8px;


  min-width:0;


}





.em_breakdownRow{


  display:flex;


  align-items:center;


  justify-content:space-between;


  gap:10px;


  font-size:0.92rem;


}





.em_breakdownName{


  color:#0f172a;


  font-weight:700;


  min-width:0;


  overflow:hidden;


  text-overflow:ellipsis;


  white-space:nowrap;


}





.em_breakdownPts{


  color:rgba(15,23,42,0.68);


  font-weight:800;


  white-space:nowrap;


}





.em_main{


  display:flex;


  flex-direction:column;


  gap:14px;


  min-height:0;


}





.em_answersCard{


  display:flex;


  flex-direction:column;


  flex:1;


  min-height:0;


  position:relative;


}





.em_answersCard::before{


  content:"";


  position:absolute;


  inset:0;


  border-radius:18px;


  pointer-events:none;


  box-shadow: inset 0 0 0 1px rgba(15,23,42,0.04);


}





.em_answersHead{


  display:flex;


  align-items:center;


  justify-content:space-between;


  gap:12px;


  margin-bottom:10px;


  padding-bottom:8px;


  border-bottom:1px solid rgba(15,23,42,0.08);


}





.em_answersTitle{


  margin:0;


  font-size:1.05rem;


  font-weight:900;


  letter-spacing:-0.01em;


}





.em_answersMeta{


  font-size:0.9rem;


  color:rgba(15,23,42,0.66);


  font-weight:700;


}





.em_answerList{


  display:flex;


  flex-direction:column;


  gap:10px;


  overflow-y:auto;


  min-height:0;


  padding-right:2px;


}





.em_answerRow{


  position:relative;

  border:1px solid rgba(15,23,42,0.09);
  border-radius:14px;


  padding:10px 112px 10px 12px;
  box-shadow:0 2px 6px rgba(0,0,0,0.04);


  transition:transform 0.05s ease, box-shadow 0.05s ease;
  cursor:pointer;
}





.em_answerRow:hover{
  transform:translateY(-1px);


  box-shadow:0 6px 16px rgba(0,0,0,0.08);


}





.em_answerBadge{

  position:absolute;

  top:8px;

  right:10px;

  min-width:76px;

  height:34px;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  flex-direction:column;

  gap:2px;

  border-radius:999px;

  color:rgba(15,23,42,0.78);

  box-shadow:0 2px 6px rgba(15,23,42,0.07);

  font-weight:700;

  line-height:1;

  pointer-events:none;

}

.em_answerBadge_action{
  pointer-events:auto;
  cursor:pointer;
  font:inherit;
}

.em_answerBadge_action:hover{
  background:rgba(239,68,68,0.28);
  transform:translateY(-1px);
}

.em_answerBadge_action:focus-visible{
  outline:3px solid rgba(220,38,38,0.3);
  outline-offset:2px;
}

.em_answerRow:focus-visible{
  outline:3px solid rgba(99,102,241,0.35);
  outline-offset:2px;
}

.em_notes .em_value{
  white-space:pre-wrap;
}

.em_answerBadgeIcon{

  font-size:1.05rem;

}

.em_answerBadgeText{

  font-size:0.58rem;

  white-space:nowrap;

}

.em_answerBadge_perfect{

  background:rgba(34,197,94,0.16);

  border:1px solid rgba(21,128,61,0.22);

}

.em_answerBadge_good{

  background:rgba(250,204,21,0.20);

  border:1px solid rgba(202,138,4,0.24);

}

.em_answerBadge_tryAgain{

  background:rgba(239,68,68,0.16);

  border:1px solid rgba(220,38,38,0.22);

}

.em_answerRow_reviewed{
  background:rgba(168,85,247,0.13);
  border-color:rgba(147,51,234,0.34);
}

.em_answerBadge_reviewed{
  background:rgba(168,85,247,0.20);
  border:1px solid rgba(126,34,206,0.30);
  color:#6b21a8;
}



.em_answerRow_exact{
  background:rgba(34,197,94,0.12);


  border-color:rgba(34,197,94,0.28);


}





.em_answerRow_close{


  background:rgba(250,204,21,0.14);


  border-color:rgba(250,204,21,0.28);


}





.em_answerRow_wrong{


  background:rgba(239,68,68,0.12);


  border-color:rgba(239,68,68,0.28);


}





.em_answerRow_revealed{


  background:rgba(148,163,184,0.08);


  border-color:rgba(148,163,184,0.18);


}





.em_answerLangs{


  font-size:0.88rem;


  font-weight:800;


  color:rgba(15,23,42,0.60);


}





.em_answerGrid{


  display:grid;


  grid-template-columns:1fr 1fr 1fr;


  gap:8px;


}





.em_answerGrid_twoCol{

  grid-template-columns:1fr 1fr;

}

.em_cell{
  min-width:0;


}





.em_label{


  display:block;


  margin-bottom:6px;


  font-size:0.82rem;


  color:rgba(15,23,42,0.55);


  font-weight:700;


  letter-spacing:0.01em;


  text-transform:none; /* remove ALL CAPS */


}





.em_value{


  font-size:0.96rem;


  line-height:1.3;


  font-weight:800;


  color:#0f172a;


  overflow-wrap:anywhere;


}





.em_value_main{


  font-size:1.12rem;


  line-height:1.45;


  font-weight:600; /* was 900 */


  color:#0f172a;


}





.em_value_muted{


  color:rgba(15,23,42,0.55);


  font-weight:600;


}





.em_empty{


  padding:14px;


  border-radius:12px;


  border:1px dashed rgba(15,23,42,0.12);


  background:rgba(248,250,252,0.72);


  color:rgba(15,23,42,0.72);


}





.em_actions{


  display:flex;


  gap:10px;


  flex-wrap:wrap;


  justify-content:flex-end;


  align-items:center;


}





.em_btn{


  padding:10px 14px;


  border-radius:999px;


  border:1px solid rgba(15,23,42,0.14);


  background:rgba(255,255,255,0.90);


  cursor:pointer;


  font-weight:800;


  box-shadow:0 4px 10px rgba(0,0,0,0.04);


}





.em_btn:hover{


  background:#ffffff;


}





.em_btn_primary{


  border-color:rgba(37,99,235,0.30);


  background:rgba(37,99,235,0.10);


}





.em_notes{


  margin-top:4px;


  width: 100%;


  grid-column: 1 / -1;


}





.em_notesSummary{


  cursor:pointer;


  font-size:0.82rem;


  font-weight:900;


  color:rgba(15,23,42,0.70);


  text-transform:uppercase;


  letter-spacing:0.04em;


}





.em_notesSummary:hover{


  color:#0f172a;


}





.em_answersCard::after{


  content:"";


  position:absolute;


  left:0;


  right:0;


  bottom:0;


  height:20px;


  pointer-events:none;


  background:linear-gradient(to top, rgba(255,255,255,0.95), transparent);


  border-bottom-left-radius:18px;


  border-bottom-right-radius:18px;


}





@media (max-width: 860px){


  .em_layout{


    grid-template-columns:1fr;


    gap:18px;


    align-items:stretch;


  }





  .em_card_noBreakdown .em_header{

    display:grid;

    grid-template-columns:132px minmax(0, 1fr);

    align-items:start;

    column-gap:12px;

    row-gap:8px;

  }

  .em_card_noBreakdown .em_headText{

    display:contents;

  }

  .em_card_noBreakdown .em_title{

    grid-column:2;

    grid-row:1;

  }

  .em_card_noBreakdown .em_sub{

    grid-column:2;

    grid-row:2;

    margin:0;

    line-height:1.32;

  }

  .em_card_noBreakdown .em_statusPill{

    grid-column:2;

    grid-row:3;

    align-self:start;

    justify-self:start;

    margin-top:0;

    white-space:normal;

    max-width:150px;

    padding:8px 11px;

  }

  .em_card_noBreakdown .em_side{

    position:absolute;

    top:18px;

    left:18px;

    width:126px;

    margin-top:0;

    grid-template-columns:1fr;

  }

  .em_card_noBreakdown .em_meterCard{

    padding:8px;

    border-radius:16px;

  }

  .em_card_noBreakdown .em_meter{

    min-height:148px;

    border-radius:14px;

  }

  .em_card_noBreakdown .em_meterTop{

    top:22px;

    right:7px;

    font-size:0.7rem;

  }

  .em_card_noBreakdown .em_meterBottom{

    right:7px;

    font-size:0.7rem;

  }

  .em_card_noBreakdown .em_meterLabel{

    left:7px;

    font-size:0.72rem;

    padding:3px 6px;

  }

  .em_card_noBreakdown .em_layout{

    gap:10px;

  }

  .em_side{
    position:static;


    display:grid;


    grid-template-columns:1fr 1fr;


    gap:12px;


    align-items:stretch;


  }





  .em_side > .em_meterCard,


  .em_side > .em_breakdownCard{


    min-height:0;


  }





  .em_meter{


    min-height:160px;


  }


}





@media (max-width: 680px){


  .em_card{


    padding:14px 14px 12px;


  }





  .em_header{


    flex-direction:column;


    align-items:flex-start;


  }





  .em_side{


    grid-template-columns:1fr 1fr;


    gap:10px;


  }





  .em_answerGrid{


    grid-template-columns:1fr;


  }





  .em_answerRow{

    padding-right:48px;

  }

  .em_answerBadge{

    min-width:30px;

    width:30px;

    height:30px;

    flex-direction:row;

  }

  .em_answerBadgeText{

    display:none;

  }

  .em_actions{
    position:sticky;


    bottom:-12px;


    padding-top:10px;


    background:linear-gradient(


      to top,


      rgba(255,255,255,0.98),


      rgba(255,255,255,0.88)


    );


  }


}





@media (max-width: 680px){


  .em_card{


    padding:14px 14px 12px;


  }





  .em_header{


    flex-direction:column;


    align-items:flex-start;


  }





  .em_answerGrid{


    grid-template-columns:1fr;


  }





  .em_actions{


    position:sticky;


    bottom:-12px;


    padding-top:10px;


    background:linear-gradient(


      to top,


      rgba(255,255,255,0.98),


      rgba(255,255,255,0.88)


    );


  }


}





.em_cell_full{


  grid-column: 1 / -1;


}