/* PC result modal, also reused on tablet/iPad for a consistent completion experience.
   Mobile keeps its dedicated result styling. */
@media (min-width:768px){
  body.lesson-result-open{
    overflow:hidden!important;
  }

  #lesson-result-modal:not(.hidden){
    position:fixed!important;
    inset:0!important;
    z-index:100!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:18px!important;
    background:rgba(48,49,46,.62)!important;
    -webkit-backdrop-filter:blur(7px);
    backdrop-filter:blur(7px);
  }

  .lesson-result-dialog{
    width:min(1240px,calc(100vw - 36px))!important;
    height:min(94vh,960px)!important;
    max-height:94vh!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    background:#fff!important;
    border:1px solid rgba(255,255,255,.78)!important;
    border-radius:10px!important;
    box-shadow:0 20px 60px rgba(0,0,0,.25)!important;
  }

  .lesson-result-header{
    flex:0 0 auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:16px!important;
    padding:16px 18px!important;
    background:linear-gradient(90deg,#10b981 0%,#efeeea 58%,rgba(255,221,184,.72) 100%)!important;
    border-bottom:1px solid #e4e2de!important;
  }

  .lesson-result-header-main{
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
    min-width:0!important;
  }

  .lesson-result-trophy{
    width:54px!important;
    height:54px!important;
    flex:0 0 54px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:10px!important;
    background:#fea619!important;
    box-shadow:0 4px 0 #b45309!important;
    font-size:30px!important;
  }

  .lesson-result-heading-copy{min-width:0!important}

  #lesson-result-title{
    margin:0!important;
    font-size:18px!important;
    line-height:24px!important;
    font-weight:900!important;
    color:#00422b!important;
  }

  #lesson-result-subtitle{
    margin:3px 0 0!important;
    font-size:12px!important;
    line-height:17px!important;
    color:#3c4a42!important;
  }

  #lesson-result-status{
    display:inline-flex!important;
    align-items:center!important;
    padding:4px 8px!important;
    margin-left:6px!important;
    border-radius:10px!important;
    background:#fff!important;
    color:#006c49!important;
    font-size:11px!important;
    line-height:14px!important;
    font-weight:900!important;
    box-shadow:0 1px 4px rgba(0,0,0,.06)!important;
    white-space:nowrap!important;
  }

  .lesson-result-close{
    width:38px!important;
    height:38px!important;
    flex:0 0 38px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:10px!important;
    background:rgba(255,255,255,.82)!important;
    color:#3c4a42!important;
    box-shadow:0 1px 5px rgba(0,0,0,.08)!important;
  }

  .lesson-result-close:hover{
    background:#fff!important;
    color:#ba1a1a!important;
  }

  .lesson-result-summary{
    flex:0 0 auto!important;
    padding:12px 18px!important;
    background:#f5f3ef!important;
    border-bottom:1px solid #e4e2de!important;
  }

  .lesson-result-kpis{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
  }

  .lesson-result-kpi{
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    padding:11px 12px!important;
    border-radius:10px!important;
    background:#fff!important;
    box-shadow:0 2px 8px rgba(15,23,42,.05)!important;
  }

  .lesson-result-kpi-icon{
    width:42px!important;
    height:42px!important;
    flex:0 0 42px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:10px!important;
    font-size:23px!important;
  }

  .lesson-result-kpi-label{
    font-size:10px!important;
    line-height:13px!important;
    font-weight:900!important;
    letter-spacing:.04em!important;
    text-transform:uppercase!important;
    color:#6c7a71!important;
  }

  .lesson-result-kpi-value{
    margin-top:1px!important;
    font-size:18px!important;
    line-height:23px!important;
    font-weight:900!important;
    color:#1b1c1a!important;
  }

  .lesson-result-kpi-sub{
    margin-top:1px!important;
    font-size:10px!important;
    line-height:14px!important;
    color:#6c7a71!important;
  }

  .lesson-result-feedback{
    display:flex!important;
    align-items:flex-start!important;
    gap:10px!important;
    margin-top:10px!important;
    padding:10px 12px!important;
    border-radius:10px!important;
    background:#fff!important;
    box-shadow:0 2px 8px rgba(15,23,42,.05)!important;
  }

  .lesson-result-feedback-icon{
    width:40px!important;
    height:40px!important;
    flex:0 0 40px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:10px!important;
    background:rgba(111,251,190,.35)!important;
    font-size:23px!important;
  }

  .lesson-result-feedback-title{
    font-size:11px!important;
    line-height:15px!important;
    font-weight:900!important;
    color:#006c49!important;
  }

  #lesson-result-feedback-text{
    margin-top:2px!important;
    font-size:12px!important;
    line-height:17px!important;
    color:#1b1c1a!important;
  }

  .lesson-result-filterbar{
    flex:0 0 auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    padding:9px 18px!important;
    background:#efeeea!important;
    border-bottom:1px solid #e4e2de!important;
  }

  .lesson-result-filter-group{
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
    flex-wrap:wrap!important;
  }

  .lesson-result-filter-label{
    margin-right:2px!important;
    font-size:10px!important;
    line-height:13px!important;
    font-weight:900!important;
    text-transform:uppercase!important;
    color:#6c7a71!important;
  }

  .lesson-result-filter{
    min-height:30px!important;
    padding:6px 10px!important;
    border-radius:10px!important;
    background:#fff!important;
    color:#3c4a42!important;
    font-size:11px!important;
    line-height:14px!important;
    font-weight:800!important;
    box-shadow:0 1px 4px rgba(0,0,0,.05)!important;
  }

  .lesson-result-filter.is-active{
    background:#10b981!important;
    color:#fff!important;
    box-shadow:0 3px 0 #047857!important;
  }

  .lesson-result-body{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    padding:14px 18px!important;
    background:#fbf9f5!important;
    scrollbar-width:thin;
    scrollbar-color:#10b981 #f1f5f9;
  }

  .lesson-result-body::-webkit-scrollbar{width:8px!important;display:block!important}
  .lesson-result-body::-webkit-scrollbar-track{background:#f1f5f9!important;border-radius:10px!important}
  .lesson-result-body::-webkit-scrollbar-thumb{background:#10b981!important;border-radius:10px!important;border:2px solid #f1f5f9!important}

  .lesson-result-question-list{
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
  }

  .lesson-result-question-card{
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
    padding:14px!important;
    border:1px solid #e4e2de!important;
    border-radius:10px!important;
    background:#fff!important;
    box-shadow:0 2px 8px rgba(15,23,42,.05)!important;
  }

  .lesson-result-question-head{
    display:flex!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:12px!important;
    flex-wrap:wrap!important;
  }

  .lesson-result-question-title{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    min-width:0!important;
  }

  .lesson-result-question-number{
    flex:0 0 auto!important;
    padding:5px 8px!important;
    border-radius:10px!important;
    background:#006c49!important;
    color:#fff!important;
    font-size:11px!important;
    line-height:14px!important;
    font-weight:900!important;
  }

  .lesson-result-question-name{
    font-size:14px!important;
    line-height:19px!important;
    font-weight:900!important;
    color:#1b1c1a!important;
  }

  .lesson-result-status-chip{
    display:inline-flex!important;
    align-items:center!important;
    gap:4px!important;
    padding:5px 8px!important;
    border-radius:10px!important;
    font-size:10px!important;
    line-height:13px!important;
    font-weight:900!important;
  }

  .lesson-result-status-chip.independent{background:rgba(111,251,190,.42)!important;color:#00422b!important}
  .lesson-result-status-chip.supported{background:#e9ddff!important;color:#5516be!important}
  .lesson-result-status-chip.warning{background:#ffdad6!important;color:#93000a!important}
  .lesson-result-status-chip.skipped{background:#efeeea!important;color:#3c4a42!important}

  .lesson-result-prompt{
    padding:10px 12px!important;
    border-radius:10px!important;
    background:#f5f3ef!important;
    color:#1b1c1a!important;
    font-size:13px!important;
    line-height:19px!important;
    font-weight:700!important;
  }

  .lesson-result-answer-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }

  .lesson-result-answer{
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
    padding:9px 10px!important;
    border-radius:10px!important;
    border:1px solid #e4e2de!important;
    background:#f5f3ef!important;
    color:#3c4a42!important;
    font-size:12px!important;
    line-height:16px!important;
  }

  .lesson-result-answer.is-correct{
    background:rgba(111,251,190,.25)!important;
    border-color:#4edea3!important;
    color:#00422b!important;
  }

  .lesson-result-answer.is-selected-wrong{
    background:#ffdad6!important;
    border-color:#ffb4ab!important;
    color:#93000a!important;
  }

  .lesson-result-answer-label{
    width:28px!important;
    height:28px!important;
    flex:0 0 28px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:10px!important;
    background:#fff!important;
    font-weight:900!important;
  }

  .lesson-result-response-box,
  .lesson-result-solution{
    display:flex!important;
    align-items:flex-start!important;
    gap:9px!important;
    padding:10px 12px!important;
    border-radius:10px!important;
    background:rgba(255,221,184,.32)!important;
    font-size:12px!important;
    line-height:18px!important;
    color:#1b1c1a!important;
  }

  .lesson-result-response-box{background:rgba(111,251,190,.18)!important}

  .lesson-result-solution-icon{
    width:32px!important;
    height:32px!important;
    flex:0 0 32px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:10px!important;
    background:#fea619!important;
    font-size:17px!important;
  }

  .lesson-result-footer{
    flex:0 0 auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    padding:11px 18px!important;
    border-top:1px solid #e4e2de!important;
    background:#fff!important;
    box-shadow:0 -4px 16px rgba(0,0,0,.04)!important;
  }

  .lesson-result-footer-group{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    flex-wrap:wrap!important;
  }

  .lesson-result-action{
    min-height:38px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    padding:8px 11px!important;
    border-radius:10px!important;
    background:#f5f3ef!important;
    color:#3c4a42!important;
    font-size:11px!important;
    line-height:14px!important;
    font-weight:900!important;
    box-shadow:0 1px 5px rgba(0,0,0,.06)!important;
  }

  .lesson-result-action.primary{
    padding-left:15px!important;
    padding-right:15px!important;
    background:#10b981!important;
    color:#fff!important;
    box-shadow:0 4px 0 #047857!important;
  }

  .lesson-result-action.primary:active{
    transform:translateY(2px)!important;
    box-shadow:0 2px 0 #047857!important;
  }

  .lesson-result-empty{
    padding:32px!important;
    border-radius:10px!important;
    background:#fff!important;
    text-align:center!important;
    color:#6c7a71!important;
    font-size:13px!important;
  }
}