/* Desktop-only centered exam room modal.
   Mobile/tablet keep the existing view flow. */
.exam-desktop-modal-shell{display:contents}

@media (min-width:1024px){
  body.exam-desktop-modal-open{overflow:hidden!important}

  #view-exam:not(.hidden){
    position:fixed!important;
    inset:0!important;
    z-index:95!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:24px!important;
    background:rgba(15,23,42,.42)!important;
    -webkit-backdrop-filter:blur(5px);
    backdrop-filter:blur(5px);
  }

  .exam-desktop-modal-shell{
    display:flex!important;
    flex-direction:column!important;
    width:min(1180px,calc(100vw - 48px))!important;
    height:min(92vh,860px)!important;
    max-height:92vh!important;
    min-height:620px!important;
    background:#fff!important;
    border:1px solid rgba(255,255,255,.75)!important;
    border-radius:16px!important;
    overflow:hidden!important;
    box-shadow:0 24px 80px rgba(15,23,42,.30)!important;
  }

  .exam-desktop-modal-header{
    position:relative!important;
    top:auto!important;
    z-index:3!important;
    flex:0 0 auto!important;
    padding:12px 16px!important;
    border:0!important;
    border-bottom:1px solid #e4e2de!important;
    border-radius:0!important;
    box-shadow:0 2px 10px rgba(15,23,42,.05)!important;
    background:#fff!important;
    gap:14px!important;
  }

  .exam-desktop-modal-header button,
  .exam-desktop-modal-header [class*="rounded-"]{
    border-radius:10px!important;
  }

  .exam-desktop-room-grid{
    display:grid!important;
    grid-template-columns:290px minmax(0,1fr)!important;
    gap:0!important;
    align-items:stretch!important;
    flex:1 1 auto!important;
    min-height:0!important;
    overflow:hidden!important;
    background:#fbf9f5!important;
  }

  .exam-desktop-palette{
    grid-column:auto!important;
    width:290px!important;
    min-width:290px!important;
    height:100%!important;
    padding:16px!important;
    border:0!important;
    border-right:1px solid #e4e2de!important;
    border-radius:0!important;
    box-shadow:none!important;
    overflow-y:auto!important;
    background:#f5f3ef!important;
    gap:14px!important;
  }

  .exam-desktop-question{
    grid-column:auto!important;
    height:100%!important;
    padding:20px 24px!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    overflow-y:auto!important;
    background:#fff!important;
    gap:18px!important;
  }

  .exam-desktop-palette #question-palette-grid{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:8px!important;
  }

  .exam-desktop-palette .palette-btn{
    height:42px!important;
    border-radius:10px!important;
    font-size:13px!important;
  }

  .exam-desktop-question #q-prompt-text{
    font-size:24px!important;
    line-height:32px!important;
  }

  .exam-desktop-question #q-subprompt-text{
    font-size:14px!important;
    line-height:20px!important;
  }

  .exam-desktop-question #q-visual-container,
  .exam-desktop-question #q-interaction-area>button,
  .exam-desktop-question #q-interaction-area>div,
  .exam-desktop-question button{
    border-radius:10px!important;
  }

  .exam-desktop-question #q-interaction-area{
    gap:12px!important;
  }

  .exam-desktop-question #q-interaction-area .grid{
    gap:12px!important;
  }

  .exam-desktop-question #btn-prev-q,
  .exam-desktop-question #btn-next-q{
    min-width:130px!important;
    height:42px!important;
    border-radius:10px!important;
    font-size:12px!important;
  }

  .exam-desktop-modal-close{
    display:flex!important;
    width:36px!important;
    height:36px!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:10px!important;
    color:#3c4a42!important;
  }

  .exam-desktop-modal-close:hover{background:#efeeea!important}
}

@media (min-width:1024px) and (max-height:720px){
  #view-exam:not(.hidden){padding:14px!important}
  .exam-desktop-modal-shell{
    width:min(1160px,calc(100vw - 28px))!important;
    height:calc(100vh - 28px)!important;
    min-height:0!important;
  }
  .exam-desktop-question{padding:16px 20px!important;gap:14px!important}
  .exam-desktop-modal-header{padding:9px 14px!important}
}