/* LOP Streak v2.8.877 — Unified Popup UI Contract
 * Presentation only. Standardizes popup/dialog visual language without changing
 * open/close handlers, validation, form names, submissions, permissions or data.
 */
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body){
  --lop-popup-ui-primary:var(--lopws-primary,var(--lop-admin-shell-primary,var(--lop-btn-primary,#2563eb)));
  --lop-popup-ui-primary-hover:var(--lopws-primary-2,var(--lop-admin-shell-primary-strong,var(--lop-btn-primary-hover,#1d4ed8)));
  --lop-popup-ui-text:#172033;
  --lop-popup-ui-muted:#667085;
  --lop-popup-ui-line:#e4e7ec;
  --lop-popup-ui-soft:#f8fafc;
  --lop-popup-ui-surface:#fff;
  --lop-popup-ui-danger:#b42318;
  --lop-popup-ui-radius:18px;
  --lop-popup-ui-control-radius:10px;
  --lop-popup-ui-close:36px;
  --lop-popup-ui-shadow:0 24px 70px rgba(15,23,42,.22);
  --lop-popup-ui-focus:rgba(37,99,235,.16);
}

/* One neutral overlay language for functional/form popups. */
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) :where(
  .lopsp-modal,
  .lopsp-settings-popup,
  .lop-progress-modal,
  .lop-class-modal,
  .lop-study-note-modal,
  .lop-study-lop-modal,
  .lopsp-reminder-modal,
  .lopsp-reminder-calendar-modal,
  .lopsp-event-register-modal,
  .lop-study-modal,
  .lop-admin-preview-modal,
  .lop-admin-ai-modal,
  .lop-ai-gen-modal,
  .lop-media-create-modal,
  .lop-lesson-picker-modal,
  .lop-vocab-modal,
  .lop-assessment-report-modal,
  .lop-vocab-set-learning-modal,
  .lop-content-feedback-modal
){
  background:rgba(15,23,42,.48)!important;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}

/* Backdrop children follow the same opacity when the shell itself is transparent. */
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) :where(
  .lopsp-modal-backdrop,
  .lopsp-settings-popup-backdrop,
  .lop-class-modal-backdrop,
  .lop-study-note-backdrop,
  .lop-study-lop-backdrop,
  .lopsp-reminder-modal-backdrop,
  .lopsp-event-register-backdrop,
  .lop-study-modal-backdrop,
  .lop-admin-preview-backdrop,
  .lop-admin-ai-backdrop,
  .lop-ai-gen-backdrop,
  .lop-media-create-backdrop,
  .lop-vocab-public-detail-modal-backdrop,
  .lop-content-feedback-backdrop
){
  background:rgba(15,23,42,.48)!important;
  -webkit-backdrop-filter:blur(4px)!important;
  backdrop-filter:blur(4px)!important;
}

/* Common popup surface. Width remains component-owned; only visual contract is unified. */
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) :where(
  .lopsp-modal-panel,
  .lopsp-settings-popup-dialog,
  .lop-progress-modal-dialog,
  .lop-class-modal-dialog,
  .lop-study-note-dialog,
  .lop-study-lop-dialog,
  .lopsp-reminder-modal-card,
  .lopsp-event-register-dialog,
  .lop-study-modal-panel,
  .lop-admin-preview-dialog,
  .lop-admin-ai-dialog,
  .lop-ai-gen-dialog,
  .lop-media-create-dialog,
  .lop-lesson-picker-dialog,
  .lop-vocab-dialog-shell,
  .lop-content-feedback-dialog,
  .lop-assessment-report-dialog,
  .lop-vocab-set-learning-dialog,
  .lop-vocab-public-detail-modal-card,
  .lop-admin-modal
){
  border:1px solid var(--lop-popup-ui-line)!important;
  border-radius:var(--lop-popup-ui-radius)!important;
  background:var(--lop-popup-ui-surface)!important;
  color:var(--lop-popup-ui-text)!important;
  box-shadow:var(--lop-popup-ui-shadow)!important;
  font-family:inherit!important;
  font-size:13px!important;
  line-height:1.55!important;
}

/* Common header: title block + close button. */
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) :where(
  .lopsp-modal-panel > .lopsp-panel-head,
  .lopsp-checkout-modal-head,
  .lopsp-rescue-modal-head,
  .lopsp-settings-popup-head,
  .lop-progress-modal-head,
  .lop-class-modal-head,
  .lop-study-note-head,
  .lop-study-lop-head,
  .lopsp-reminder-modal-head,
  .lopsp-study-question-modal-head,
  .lop-admin-modal-head,
  .lop-admin-ai-head,
  .lop-ai-gen-head,
  .lop-media-create-head,
  .lop-content-feedback-head,
  .lopsp-reminder-calendar-head,
  .lopsp-event-register-head,
  .lop-assessment-report-dialog-head,
  .lop-vocab-set-learning-modal-head,
  .lop-vocab-public-detail-modal-head,
  .lop-vocab-modal-head
){
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:start!important;
  gap:12px!important;
  min-height:0!important;
  margin:0!important;
  padding:15px 17px 13px!important;
  border:0!important;
  border-bottom:1px solid var(--lop-popup-ui-line)!important;
  border-radius:0!important;
  background:rgba(255,255,255,.985)!important;
  background-image:none!important;
  color:var(--lop-popup-ui-text)!important;
  box-shadow:none!important;
}

:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) :where(
  .lopsp-modal-panel > .lopsp-panel-head,
  .lopsp-checkout-modal-head,
  .lopsp-rescue-modal-head,
  .lopsp-settings-popup-head,
  .lop-progress-modal-head,
  .lop-class-modal-head,
  .lop-study-note-head,
  .lop-study-lop-head,
  .lopsp-reminder-modal-head,
  .lopsp-study-question-modal-head,
  .lop-admin-modal-head,
  .lop-admin-ai-head,
  .lop-ai-gen-head,
  .lop-media-create-head,
  .lop-content-feedback-head,
  .lopsp-reminder-calendar-head,
  .lopsp-event-register-head,
  .lop-assessment-report-dialog-head,
  .lop-vocab-set-learning-modal-head,
  .lop-vocab-public-detail-modal-head,
  .lop-vocab-modal-head
) > :first-child{
  min-width:0!important;
  padding:0!important;
  margin:0!important;
}

/* Kicker / title / description hierarchy: one scale across all popup families. */
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) :where(
  .lopsp-modal-panel > .lopsp-panel-head,
  .lopsp-checkout-modal-head,
  .lopsp-rescue-modal-head,
  .lopsp-settings-popup-head,
  .lop-progress-modal-head,
  .lop-class-modal-head,
  .lop-study-note-head,
  .lop-study-lop-head,
  .lopsp-reminder-modal-head,
  .lopsp-study-question-modal-head,
  .lop-admin-modal-head,
  .lop-admin-ai-head,
  .lop-ai-gen-head,
  .lop-media-create-head,
  .lop-content-feedback-head,
  .lopsp-reminder-calendar-head,
  .lopsp-event-register-head,
  .lop-assessment-report-dialog-head,
  .lop-vocab-set-learning-modal-head,
  .lop-vocab-public-detail-modal-head,
  .lop-vocab-modal-head
) :where(h1,h2,h3,h4){
  margin:2px 0 0!important;
  color:var(--lop-popup-ui-text)!important;
  font-family:inherit!important;
  font-size:18px!important;
  font-weight:850!important;
  line-height:1.25!important;
  letter-spacing:-.015em!important;
  text-transform:none!important;
}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) :where(
  .lopsp-modal-panel > .lopsp-panel-head,
  .lopsp-checkout-modal-head,
  .lopsp-rescue-modal-head,
  .lopsp-settings-popup-head,
  .lop-progress-modal-head,
  .lop-class-modal-head,
  .lop-study-note-head,
  .lop-study-lop-head,
  .lopsp-reminder-modal-head,
  .lopsp-study-question-modal-head,
  .lop-admin-modal-head,
  .lop-admin-ai-head,
  .lop-ai-gen-head,
  .lop-media-create-head,
  .lop-content-feedback-head,
  .lopsp-reminder-calendar-head,
  .lopsp-event-register-head,
  .lop-assessment-report-dialog-head,
  .lop-vocab-set-learning-modal-head,
  .lop-vocab-public-detail-modal-head,
  .lop-vocab-modal-head
) :where(p){
  margin:4px 0 0!important;
  color:var(--lop-popup-ui-muted)!important;
  font-family:inherit!important;
  font-size:12px!important;
  font-weight:500!important;
  line-height:1.45!important;
}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) :where(
  .lopsp-modal-panel > .lopsp-panel-head,
  .lopsp-checkout-modal-head,
  .lopsp-rescue-modal-head,
  .lopsp-settings-popup-head,
  .lop-progress-modal-head,
  .lop-class-modal-head,
  .lop-study-note-head,
  .lop-study-lop-head,
  .lopsp-reminder-modal-head,
  .lopsp-study-question-modal-head,
  .lop-admin-modal-head,
  .lop-admin-ai-head,
  .lop-ai-gen-head,
  .lop-media-create-head,
  .lop-content-feedback-head,
  .lopsp-reminder-calendar-head,
  .lopsp-event-register-head,
  .lop-assessment-report-dialog-head,
  .lop-vocab-set-learning-modal-head,
  .lop-vocab-public-detail-modal-head,
  .lop-vocab-modal-head
) :where(span,small,.lop-admin-kicker,.lopsp-study-question-modal-kicker){
  color:var(--lop-popup-ui-primary)!important;
  font-family:inherit!important;
  font-size:10px!important;
  font-weight:850!important;
  line-height:1.2!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
}

/* One close-button contract. Footer text buttons named "Đóng" are deliberately excluded. */
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) :where(
  .lopsp-modal-close,
  .lopsp-settings-popup-head > button[data-lop-settings-popup-close],
  .lop-progress-modal-close,
  .lop-class-modal-close,
  .lop-study-note-head > button[data-lop-note-close],
  .lop-study-lop-head > button[data-lop-lesson-report-close],
  .lopsp-reminder-modal-close,
  .lop-admin-modal-close,
  .lop-admin-preview-close,
  .lop-ai-gen-head > button[aria-label="Đóng"],
  .lop-media-create-close,
  .lop-content-feedback-head > button[data-lop-feedback-close],
  .lopsp-event-register-close,
  .lop-assessment-report-close,
  .lop-vocab-set-learning-close,
  .lop-vocab-public-detail-modal-head > .lop-vocab-modal-close,
  .lop-vocab-modal-head > button[aria-label="Đóng"],
  .lopsp-public-achievement-close,
  .lopsp-like-gift-close,
  .lop-ux3-command-close
){
  position:relative!important;
  inset:auto!important;
  float:none!important;
  display:inline-flex!important;
  flex:0 0 var(--lop-popup-ui-close)!important;
  align-items:center!important;
  justify-content:center!important;
  align-self:start!important;
  justify-self:end!important;
  width:var(--lop-popup-ui-close)!important;
  height:var(--lop-popup-ui-close)!important;
  min-width:var(--lop-popup-ui-close)!important;
  min-height:var(--lop-popup-ui-close)!important;
  max-width:var(--lop-popup-ui-close)!important;
  max-height:var(--lop-popup-ui-close)!important;
  margin:0!important;
  padding:0!important;
  border:1px solid var(--lop-popup-ui-line)!important;
  border-radius:10px!important;
  background:var(--lop-popup-ui-soft)!important;
  background-image:none!important;
  color:#475467!important;
  box-shadow:none!important;
  font-family:inherit!important;
  font-size:21px!important;
  font-weight:500!important;
  line-height:1!important;
  text-align:center!important;
  text-decoration:none!important;
  transform:none!important;
  cursor:pointer!important;
  transition:background-color .14s ease,border-color .14s ease,color .14s ease!important;
}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) :where(
  .lopsp-modal-close,
  .lopsp-settings-popup-head > button[data-lop-settings-popup-close],
  .lop-progress-modal-close,
  .lop-class-modal-close,
  .lop-study-note-head > button[data-lop-note-close],
  .lop-study-lop-head > button[data-lop-lesson-report-close],
  .lopsp-reminder-modal-close,
  .lop-admin-modal-close,
  .lop-admin-preview-close,
  .lop-ai-gen-head > button[aria-label="Đóng"],
  .lop-media-create-close,
  .lop-content-feedback-head > button[data-lop-feedback-close],
  .lopsp-event-register-close,
  .lop-assessment-report-close,
  .lop-vocab-set-learning-close,
  .lop-vocab-public-detail-modal-head > .lop-vocab-modal-close,
  .lop-vocab-modal-head > button[aria-label="Đóng"],
  .lopsp-public-achievement-close,
  .lopsp-like-gift-close,
  .lop-ux3-command-close
):hover{
  background:#eef2f6!important;
  border-color:#cfd6df!important;
  color:#101828!important;
  transform:none!important;
}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) :where(
  .lopsp-modal-close,
  .lopsp-settings-popup-head > button[data-lop-settings-popup-close],
  .lop-progress-modal-close,
  .lop-class-modal-close,
  .lop-study-note-head > button[data-lop-note-close],
  .lop-study-lop-head > button[data-lop-lesson-report-close],
  .lopsp-reminder-modal-close,
  .lop-admin-modal-close,
  .lop-admin-preview-close,
  .lop-ai-gen-head > button[aria-label="Đóng"],
  .lop-media-create-close,
  .lop-content-feedback-head > button[data-lop-feedback-close],
  .lopsp-event-register-close,
  .lop-assessment-report-close,
  .lop-vocab-set-learning-close,
  .lop-vocab-public-detail-modal-head > .lop-vocab-modal-close,
  .lop-vocab-modal-head > button[aria-label="Đóng"],
  .lopsp-public-achievement-close,
  .lopsp-like-gift-close,
  .lop-ux3-command-close
):focus-visible{
  outline:3px solid var(--lop-popup-ui-focus)!important;
  outline-offset:2px!important;
}

/* Functional popup forms use one field scale and one focus language. */
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) :where(
  .lopsp-modal-panel,
  .lopsp-settings-popup-dialog,
  .lop-progress-modal-dialog,
  .lop-class-modal-dialog,
  .lop-study-note-dialog,
  .lop-study-lop-dialog,
  .lopsp-reminder-modal-card,
  .lopsp-event-register-dialog,
  .lop-study-modal-panel,
  .lop-admin-ai-dialog,
  .lop-ai-gen-dialog,
  .lop-media-create-dialog,
  .lop-lesson-picker-dialog,
  .lop-vocab-dialog-shell,
  .lop-content-feedback-dialog,
  .lop-assessment-report-dialog,
  .lop-admin-modal
) form :where(label,.lop-admin-label){
  color:#344054!important;
  font-family:inherit!important;
  font-size:12.5px!important;
  font-weight:750!important;
  line-height:1.35!important;
}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) :where(
  .lopsp-modal-panel,
  .lopsp-settings-popup-dialog,
  .lop-progress-modal-dialog,
  .lop-class-modal-dialog,
  .lop-study-lop-dialog,
  .lopsp-reminder-modal-card,
  .lopsp-event-register-dialog,
  .lop-study-modal-panel,
  .lop-admin-ai-dialog,
  .lop-ai-gen-dialog,
  .lop-media-create-dialog,
  .lop-lesson-picker-dialog,
  .lop-vocab-dialog-shell,
  .lop-content-feedback-dialog,
  .lop-assessment-report-dialog,
  .lop-admin-modal
) form :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]),select,textarea){
  box-sizing:border-box!important;
  width:100%;
  min-height:40px!important;
  padding:8px 10px!important;
  border:1px solid #d0d5dd!important;
  border-radius:var(--lop-popup-ui-control-radius)!important;
  background:#fff!important;
  color:#101828!important;
  box-shadow:none!important;
  font-family:inherit!important;
  font-size:13px!important;
  font-weight:500!important;
  line-height:1.4!important;
  outline:0!important;
}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) :where(
  .lopsp-modal-panel,
  .lopsp-settings-popup-dialog,
  .lop-progress-modal-dialog,
  .lop-class-modal-dialog,
  .lop-study-lop-dialog,
  .lopsp-reminder-modal-card,
  .lopsp-event-register-dialog,
  .lop-study-modal-panel,
  .lop-admin-ai-dialog,
  .lop-ai-gen-dialog,
  .lop-media-create-dialog,
  .lop-lesson-picker-dialog,
  .lop-vocab-dialog-shell,
  .lop-content-feedback-dialog,
  .lop-assessment-report-dialog,
  .lop-admin-modal
) form textarea{min-height:94px!important;resize:vertical;}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) :where(
  .lopsp-modal-panel,
  .lopsp-settings-popup-dialog,
  .lop-progress-modal-dialog,
  .lop-class-modal-dialog,
  .lop-study-lop-dialog,
  .lopsp-reminder-modal-card,
  .lopsp-event-register-dialog,
  .lop-study-modal-panel,
  .lop-admin-ai-dialog,
  .lop-ai-gen-dialog,
  .lop-media-create-dialog,
  .lop-lesson-picker-dialog,
  .lop-vocab-dialog-shell,
  .lop-content-feedback-dialog,
  .lop-assessment-report-dialog,
  .lop-admin-modal
) form :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]),select,textarea):focus{
  border-color:var(--lop-popup-ui-primary)!important;
  box-shadow:0 0 0 3px var(--lop-popup-ui-focus)!important;
}

/* Shared footer/action row. Layout only; button handlers and form submits remain untouched. */
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) :where(
  .lopsp-settings-popup-foot,
  .lop-class-modal-actions,
  .lop-admin-modal-actions,
  .lop-ai-gen-actions,
  .lop-media-create-actions,
  .lop-content-feedback-actions,
  .lop-study-lop-actions,
  .lop-assessment-report-actions,
  .lopsp-event-register-actions,
  .lopsp-checkout-actions,
  .lop-progress-form-actions,
  .lop-vocab-modal-voice-actions,
  .lop-vocab-public-detail-actions,
  .lop-admin-preview-actions
){
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  flex-wrap:wrap!important;
  margin:0!important;
  padding:12px 16px!important;
  border-top:1px solid var(--lop-popup-ui-line)!important;
  background:#fff!important;
}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-study-note-foot{
  box-sizing:border-box!important;
  gap:10px!important;
  padding:12px 16px!important;
  border-top:1px solid var(--lop-popup-ui-line)!important;
  background:#fff!important;
  color:var(--lop-popup-ui-muted)!important;
  font-size:11.5px!important;
}

/* Buttons inside popup action rows share one geometry. Existing semantic classes choose color. */
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) :where(
  .lopsp-settings-popup-foot,
  .lop-class-modal-actions,
  .lop-admin-modal-actions,
  .lop-ai-gen-actions,
  .lop-media-create-actions,
  .lop-content-feedback-actions,
  .lop-study-lop-actions,
  .lop-assessment-report-actions,
  .lopsp-event-register-actions,
  .lopsp-checkout-actions,
  .lop-progress-form-actions,
  .lop-vocab-modal-voice-actions,
  .lop-vocab-public-detail-actions,
  .lop-admin-preview-actions,
  .lop-study-note-foot > div
) :where(button,a.lop-admin-btn,a.lop-ui-btn){
  box-sizing:border-box!important;
  min-height:38px!important;
  height:auto!important;
  padding:8px 13px!important;
  border:1px solid #d0d5dd!important;
  border-radius:9px!important;
  background:#fff!important;
  color:#344054!important;
  box-shadow:none!important;
  font-family:inherit!important;
  font-size:12.5px!important;
  font-weight:800!important;
  line-height:1.25!important;
  text-decoration:none!important;
  cursor:pointer;
}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) :where(
  .lopsp-settings-popup-foot,
  .lop-class-modal-actions,
  .lop-admin-modal-actions,
  .lop-ai-gen-actions,
  .lop-media-create-actions,
  .lop-content-feedback-actions,
  .lop-study-lop-actions,
  .lop-assessment-report-actions,
  .lopsp-event-register-actions,
  .lopsp-checkout-actions,
  .lop-progress-form-actions,
  .lop-vocab-modal-voice-actions,
  .lop-vocab-public-detail-actions,
  .lop-admin-preview-actions,
  .lop-study-note-foot > div
) :where(button[type="submit"],button.primary,.primary,.is-primary,[data-lop-btn-role="primary"],.lop-study-note-save){
  border-color:var(--lop-popup-ui-primary)!important;
  background:var(--lop-popup-ui-primary)!important;
  color:#fff!important;
}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) :where(
  .lopsp-settings-popup-foot,
  .lop-class-modal-actions,
  .lop-admin-modal-actions,
  .lop-ai-gen-actions,
  .lop-media-create-actions,
  .lop-content-feedback-actions,
  .lop-study-lop-actions,
  .lop-assessment-report-actions,
  .lopsp-event-register-actions,
  .lopsp-checkout-actions,
  .lop-progress-form-actions,
  .lop-vocab-modal-voice-actions,
  .lop-vocab-public-detail-actions,
  .lop-admin-preview-actions,
  .lop-study-note-foot > div
) :where(button[type="submit"],button.primary,.primary,.is-primary,[data-lop-btn-role="primary"],.lop-study-note-save):hover{
  border-color:var(--lop-popup-ui-primary-hover)!important;
  background:var(--lop-popup-ui-primary-hover)!important;
  color:#fff!important;
}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) :where(
  .lopsp-settings-popup-foot,
  .lop-class-modal-actions,
  .lop-admin-modal-actions,
  .lop-ai-gen-actions,
  .lop-media-create-actions,
  .lop-content-feedback-actions,
  .lop-study-lop-actions,
  .lop-assessment-report-actions,
  .lopsp-event-register-actions,
  .lopsp-checkout-actions,
  .lop-progress-form-actions,
  .lop-vocab-modal-voice-actions,
  .lop-vocab-public-detail-actions,
  .lop-admin-preview-actions,
  .lop-study-note-foot > div
) :where(.secondary,.is-secondary,[data-lop-btn-role="secondary"],.lop-study-note-secondary){
  border-color:#d0d5dd!important;
  background:#fff!important;
  color:#344054!important;
}

/* Standard body text inside functional dialog surfaces. */
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) :where(
  .lopsp-modal-panel,
  .lopsp-settings-popup-dialog,
  .lop-progress-modal-dialog,
  .lop-class-modal-dialog,
  .lop-study-note-dialog,
  .lop-study-lop-dialog,
  .lopsp-reminder-modal-card,
  .lopsp-event-register-dialog,
  .lop-study-modal-panel,
  .lop-admin-ai-dialog,
  .lop-ai-gen-dialog,
  .lop-media-create-dialog,
  .lop-lesson-picker-dialog,
  .lop-vocab-dialog-shell,
  .lop-content-feedback-dialog,
  .lop-assessment-report-dialog,
  .lop-admin-modal
) :where(.description,.help,.hint,.lop-admin-help,small){
  font-family:inherit;
}

/* Rich-content popup headers/close controls are normalized without flattening their content body. */
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) :where(
  .lopsp-public-achievement-dialog > header,
  .lopsp-like-gift-hero-topbar
){
  color:var(--lop-popup-ui-text)!important;
  font-family:inherit!important;
}

/* React Workspace Quick Search follows the same popup contract. */
:is(body.lopsp-public-body,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-ux3-command{
  border:1px solid var(--lop-popup-ui-line)!important;
  border-radius:var(--lop-popup-ui-radius)!important;
  background:#fff!important;
  box-shadow:var(--lop-popup-ui-shadow)!important;
  color:var(--lop-popup-ui-text)!important;
  font-family:inherit!important;
}
:is(body.lopsp-public-body,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-ux3-command>header{
  align-items:start!important;
  gap:12px!important;
  padding:15px 17px 13px!important;
  border-bottom:1px solid var(--lop-popup-ui-line)!important;
}
:is(body.lopsp-public-body,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-ux3-command>header strong{font-size:18px!important;line-height:1.25!important;color:var(--lop-popup-ui-text)!important;}
:is(body.lopsp-public-body,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-ux3-command>header small{font-size:12px!important;line-height:1.45!important;color:var(--lop-popup-ui-muted)!important;}
:is(body.lopsp-public-body,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-ux3-command-search{margin:12px 16px!important;border-color:#d0d5dd!important;border-radius:10px!important;background:#fff!important;}
:is(body.lopsp-public-body,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-ux3-command-search input{font-size:13px!important;}
:is(body.lopsp-public-body,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-ux3-command-results{padding:4px 10px 10px!important;}
:is(body.lopsp-public-body,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-ux3-command-results a{font-size:12.5px!important;border-radius:9px!important;}

@media(max-width:720px){
  :is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body){--lop-popup-ui-radius:16px;--lop-popup-ui-close:40px;}
  :is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) :where(
    .lopsp-modal-panel > .lopsp-panel-head,
    .lopsp-checkout-modal-head,
    .lopsp-rescue-modal-head,
    .lopsp-settings-popup-head,
    .lop-progress-modal-head,
    .lop-class-modal-head,
    .lop-study-note-head,
    .lop-study-lop-head,
    .lopsp-reminder-modal-head,
    .lopsp-study-question-modal-head,
    .lop-admin-modal-head,
    .lop-admin-ai-head,
    .lop-ai-gen-head,
    .lop-media-create-head,
    .lop-content-feedback-head,
    .lopsp-reminder-calendar-head,
    .lopsp-event-register-head,
    .lop-assessment-report-dialog-head,
    .lop-vocab-set-learning-modal-head,
    .lop-vocab-public-detail-modal-head,
    .lop-vocab-modal-head
  ){
    gap:9px!important;
    padding:13px 13px 11px!important;
  }
  :is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) :where(
    .lopsp-modal-panel > .lopsp-panel-head,
    .lopsp-checkout-modal-head,
    .lopsp-rescue-modal-head,
    .lopsp-settings-popup-head,
    .lop-progress-modal-head,
    .lop-class-modal-head,
    .lop-study-note-head,
    .lop-study-lop-head,
    .lopsp-reminder-modal-head,
    .lopsp-study-question-modal-head,
    .lop-admin-modal-head,
    .lop-admin-ai-head,
    .lop-ai-gen-head,
    .lop-media-create-head,
    .lop-content-feedback-head,
    .lopsp-reminder-calendar-head,
    .lopsp-event-register-head,
    .lop-assessment-report-dialog-head,
    .lop-vocab-set-learning-modal-head,
    .lop-vocab-public-detail-modal-head,
    .lop-vocab-modal-head
  ) :where(h1,h2,h3,h4){font-size:17px!important;}
  :is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) :where(
    .lopsp-settings-popup-foot,
    .lop-class-modal-actions,
    .lop-admin-modal-actions,
    .lop-ai-gen-actions,
    .lop-media-create-actions,
    .lop-content-feedback-actions,
    .lop-study-lop-actions,
    .lop-assessment-report-actions,
    .lopsp-event-register-actions,
    .lopsp-checkout-actions,
    .lop-progress-form-actions,
    .lop-vocab-modal-voice-actions,
    .lop-vocab-public-detail-actions,
    .lop-admin-preview-actions
  ){
    padding:10px 12px!important;
  }
  :is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) :where(
    .lopsp-settings-popup-foot,
    .lop-class-modal-actions,
    .lop-admin-modal-actions,
    .lop-ai-gen-actions,
    .lop-media-create-actions,
    .lop-content-feedback-actions,
    .lop-study-lop-actions,
    .lop-assessment-report-actions,
    .lopsp-event-register-actions,
    .lopsp-checkout-actions,
    .lop-progress-form-actions,
    .lop-vocab-modal-voice-actions,
    .lop-vocab-public-detail-actions,
    .lop-admin-preview-actions
  ) > :where(button,a){min-height:40px!important;}
}

@media(prefers-reduced-motion:reduce){
  :is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) :where(
    .lopsp-modal-close,
    .lop-progress-modal-close,
    .lop-class-modal-close,
    .lopsp-reminder-modal-close,
    .lop-admin-modal-close,
    .lop-admin-preview-close,
    .lop-media-create-close,
    .lopsp-event-register-close,
    .lop-assessment-report-close,
    .lop-vocab-set-learning-close,
    .lop-vocab-modal-close,
    .lop-ux3-command-close
  ){transition:none!important;}
}

/* Legacy dialog families whose close button lives outside the header keep it in the same top-right slot. */
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lopsp-event-register-dialog > .lopsp-event-register-close,
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lopsp-like-gift-dialog > .lopsp-like-gift-close,
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-admin-preview-dialog > .lop-admin-preview-close{
  position:absolute!important;
  top:12px!important;
  right:12px!important;
  left:auto!important;
  bottom:auto!important;
  margin:0!important;
  z-index:70!important;
}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lopsp-event-register-dialog > .lopsp-event-register-head{
  padding-right:calc(var(--lop-popup-ui-close) + 18px)!important;
}

/* Native <dialog> Vocabulary editor/preview uses the same contract in wp-admin. */
body.wp-admin .lop-vocab-admin-dialog{
  border:1px solid var(--lop-popup-ui-line)!important;
  border-radius:var(--lop-popup-ui-radius)!important;
  background:#fff!important;
  color:var(--lop-popup-ui-text)!important;
  box-shadow:var(--lop-popup-ui-shadow)!important;
  font-family:inherit!important;
  font-size:13px!important;
}
body.wp-admin .lop-vocab-admin-dialog::backdrop{
  background:rgba(15,23,42,.48)!important;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}
body.wp-admin .lop-vocab-dialog-shell>header{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:start!important;
  gap:12px!important;
  padding:15px 17px 13px!important;
  border-bottom:1px solid var(--lop-popup-ui-line)!important;
  background:#fff!important;
  background-image:none!important;
}
body.wp-admin .lop-vocab-dialog-shell>header :where(h1,h2,h3,h4){margin:2px 0 0!important;color:var(--lop-popup-ui-text)!important;font-size:18px!important;line-height:1.25!important;font-weight:850!important;letter-spacing:-.015em!important;}
body.wp-admin .lop-vocab-dialog-shell>header :where(span,small){color:var(--lop-popup-ui-primary)!important;font-size:10px!important;font-weight:850!important;letter-spacing:.06em!important;text-transform:uppercase!important;}
body.wp-admin .lop-vocab-dialog-shell>header button[data-vocab-dialog-close]{
  position:relative!important;inset:auto!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;width:var(--lop-popup-ui-close)!important;height:var(--lop-popup-ui-close)!important;min-width:var(--lop-popup-ui-close)!important;min-height:var(--lop-popup-ui-close)!important;padding:0!important;border:1px solid var(--lop-popup-ui-line)!important;border-radius:10px!important;background:var(--lop-popup-ui-soft)!important;color:#475467!important;box-shadow:none!important;font-size:21px!important;font-weight:500!important;line-height:1!important;cursor:pointer!important;
}
body.wp-admin .lop-vocab-modal-editor :where(label){color:#344054!important;font-size:12.5px!important;font-weight:750!important;}
body.wp-admin .lop-vocab-modal-editor :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea){min-height:40px!important;padding:8px 10px!important;border:1px solid #d0d5dd!important;border-radius:var(--lop-popup-ui-control-radius)!important;background:#fff!important;color:#101828!important;font-family:inherit!important;font-size:13px!important;box-shadow:none!important;}
body.wp-admin .lop-vocab-modal-editor :where(input,select,textarea):focus{border-color:var(--lop-popup-ui-primary)!important;box-shadow:0 0 0 3px var(--lop-popup-ui-focus)!important;outline:0!important;}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lopsp-event-register-dialog > .lopsp-event-register-head{
  display:block!important;
  min-height:var(--lop-popup-ui-close)!important;
}
body.lopsp-public-body .lop-vocab-set-learning-identity>span[aria-hidden="true"]{
  color:inherit!important;
  font-size:24px!important;
  font-weight:400!important;
  line-height:1!important;
  letter-spacing:0!important;
  text-transform:none!important;
}

/* Viewer/lightbox popups share the same surface and close geometry while preserving media layout. */
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) :where(.lop-study-lightbox-dialog,.lop-admin-image-lightbox-dialog,.lopstreak-lightbox__dialog){
  border:1px solid var(--lop-popup-ui-line)!important;
  border-radius:var(--lop-popup-ui-radius)!important;
  background:#fff!important;
  box-shadow:var(--lop-popup-ui-shadow)!important;
  color:var(--lop-popup-ui-text)!important;
  font-family:inherit!important;
}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) :where(.lop-study-lightbox-backdrop,.lop-admin-image-lightbox-backdrop,.lopstreak-lightbox__backdrop){background:rgba(15,23,42,.52)!important;-webkit-backdrop-filter:blur(4px)!important;backdrop-filter:blur(4px)!important;}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) :where(.lop-study-lightbox-close,.lop-admin-image-lightbox-close,.lopstreak-lightbox__close,.lopstreak-lightbox__head button){
  display:inline-flex!important;align-items:center!important;justify-content:center!important;width:var(--lop-popup-ui-close)!important;height:var(--lop-popup-ui-close)!important;min-width:var(--lop-popup-ui-close)!important;min-height:var(--lop-popup-ui-close)!important;padding:0!important;border:1px solid var(--lop-popup-ui-line)!important;border-radius:10px!important;background:var(--lop-popup-ui-soft)!important;color:#475467!important;box-shadow:none!important;font-size:21px!important;font-weight:500!important;line-height:1!important;cursor:pointer!important;
}
body.wp-admin .lopstreak-lightbox__head{padding:13px 15px!important;border-bottom:1px solid var(--lop-popup-ui-line)!important;background:#fff!important;}
body.wp-admin .lopstreak-lightbox__head strong{color:var(--lop-popup-ui-text)!important;font-size:16px!important;font-weight:850!important;}

/* ========================================================================== */
/* v2.8.878 — Modal Design System 2.0                                         */
/* Canonical semantic layer. Existing handlers/fields/data remain untouched.  */
/* ========================================================================== */
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body){
  --lop-modal-2-overlay:rgba(15,23,42,.46);
  --lop-modal-2-surface:#fff;
  --lop-modal-2-text:#172033;
  --lop-modal-2-muted:#667085;
  --lop-modal-2-line:#e4e7ec;
  --lop-modal-2-soft:#f8fafc;
  --lop-modal-2-soft-hover:#eef2f6;
  --lop-modal-2-danger:#b42318;
  --lop-modal-2-radius:18px;
  --lop-modal-2-control-radius:10px;
  --lop-modal-2-header-pad-y:17px;
  --lop-modal-2-header-pad-x:19px;
  --lop-modal-2-body-pad-y:16px;
  --lop-modal-2-body-pad-x:19px;
  --lop-modal-2-footer-pad-y:13px;
  --lop-modal-2-footer-pad-x:19px;
  --lop-modal-2-control-h:42px;
  --lop-modal-2-button-h:40px;
  --lop-modal-2-close:36px;
  --lop-modal-2-width-s:420px;
  --lop-modal-2-width-m:560px;
  --lop-modal-2-width-l:720px;
  --lop-modal-2-width-xl:920px;
  --lop-modal-2-shadow:0 28px 80px rgba(15,23,42,.24),0 2px 8px rgba(15,23,42,.05);
  --lop-modal-2-ease:cubic-bezier(.22,1,.36,1);
}

/* Preserve all existing visibility logic. The adapter only adds classes. */
.lop-modal-ui[hidden],.lop-modal-ui__dialog[hidden]{display:none!important;}

/* Overlay/backdrop: one visual language without forcing a popup open. */
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui{
  box-sizing:border-box!important;
  padding:24px 16px!important;
  overflow:auto!important;
  overscroll-behavior:contain;
  background:var(--lop-modal-2-overlay)!important;
  -webkit-backdrop-filter:blur(5px)!important;
  backdrop-filter:blur(5px)!important;
}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui.lop-modal-ui--has-backdrop{
  background:transparent!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__backdrop{
  background:var(--lop-modal-2-overlay)!important;
  -webkit-backdrop-filter:blur(5px)!important;
  backdrop-filter:blur(5px)!important;
}

/* Canonical dialog. The width tier is presentation-only and responsive. */
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__dialog{
  --lop-modal-2-width:var(--lop-modal-2-width-m);
  box-sizing:border-box!important;
  position:relative!important;
  width:min(var(--lop-modal-2-width),calc(100vw - 32px))!important;
  max-width:min(var(--lop-modal-2-width),calc(100vw - 32px))!important;
  max-height:calc(100dvh - 48px)!important;
  margin:auto!important;
  overflow:auto!important;
  overscroll-behavior:contain;
  border:1px solid var(--lop-modal-2-line)!important;
  border-radius:var(--lop-modal-2-radius)!important;
  background:var(--lop-modal-2-surface)!important;
  background-image:none!important;
  color:var(--lop-modal-2-text)!important;
  box-shadow:var(--lop-modal-2-shadow)!important;
  font-family:inherit!important;
  font-size:14px!important;
  line-height:1.55!important;
  scrollbar-gutter:stable;
  transform-origin:center center;
}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__dialog.lop-modal-ui--m{--lop-modal-2-width:var(--lop-modal-2-width-m);}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__dialog.lop-modal-ui--l{--lop-modal-2-width:var(--lop-modal-2-width-l);}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__dialog.lop-modal-ui--xl{--lop-modal-2-width:var(--lop-modal-2-width-xl);}

/* Smooth entry. No close-handler behavior is changed. */
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui:not([hidden]) .lop-modal-ui__dialog{
  animation:lop-modal-2-in .18s var(--lop-modal-2-ease) both;
}
@keyframes lop-modal-2-in{
  from{opacity:0;transform:translateY(8px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* Header stays visible on long forms and is identical across modal families. */
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__header{
  box-sizing:border-box!important;
  position:sticky!important;
  top:0!important;
  z-index:12!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:start!important;
  gap:14px!important;
  min-height:0!important;
  margin:0!important;
  padding:var(--lop-modal-2-header-pad-y) var(--lop-modal-2-header-pad-x)!important;
  border:0!important;
  border-bottom:1px solid var(--lop-modal-2-line)!important;
  border-radius:0!important;
  background:rgba(255,255,255,.98)!important;
  background-image:none!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__header > :first-child{min-width:0!important;margin:0!important;padding:0!important;}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__header :where(h1,h2,h3,h4){
  margin:0!important;
  color:var(--lop-modal-2-text)!important;
  font-family:inherit!important;
  font-size:18px!important;
  font-weight:800!important;
  line-height:1.3!important;
  letter-spacing:-.018em!important;
  text-transform:none!important;
}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__header :where(p){
  margin:5px 0 0!important;
  color:var(--lop-modal-2-muted)!important;
  font-family:inherit!important;
  font-size:12.5px!important;
  font-weight:500!important;
  line-height:1.45!important;
}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__header :where(span,small,.lop-admin-kicker,.lopsp-study-question-modal-kicker){
  color:var(--lop-popup-ui-primary)!important;
  font-family:inherit!important;
  font-size:10px!important;
  font-weight:800!important;
  line-height:1.2!important;
  letter-spacing:.065em!important;
  text-transform:uppercase!important;
}

/* One close control. Draw the X with CSS so glyph/font differences cannot shift it. */
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__close{
  position:relative!important;
  inset:auto!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 var(--lop-modal-2-close)!important;
  align-self:start!important;
  justify-self:end!important;
  width:var(--lop-modal-2-close)!important;
  height:var(--lop-modal-2-close)!important;
  min-width:var(--lop-modal-2-close)!important;
  min-height:var(--lop-modal-2-close)!important;
  max-width:var(--lop-modal-2-close)!important;
  max-height:var(--lop-modal-2-close)!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid var(--lop-modal-2-line)!important;
  border-radius:10px!important;
  background:var(--lop-modal-2-soft)!important;
  background-image:none!important;
  color:#475467!important;
  box-shadow:none!important;
  font-size:0!important;
  line-height:0!important;
  text-indent:-9999px!important;
  cursor:pointer!important;
  transform:none!important;
  transition:background-color .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease!important;
}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__close::before,
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__close::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:15px!important;
  height:1.8px!important;
  border-radius:999px!important;
  background:currentColor!important;
  transform-origin:center!important;
  pointer-events:none!important;
}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__close::before{transform:translate(-50%,-50%) rotate(45deg)!important;}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__close::after{transform:translate(-50%,-50%) rotate(-45deg)!important;}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__close:hover{background:var(--lop-modal-2-soft-hover)!important;border-color:#cbd5e1!important;color:#101828!important;}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__close:focus-visible{outline:0!important;box-shadow:0 0 0 3px var(--lop-popup-ui-focus)!important;}

/* Canonical body spacing. Rich media viewers can keep their own internal layout. */
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__body{
  box-sizing:border-box!important;
  margin:0!important;
  padding:var(--lop-modal-2-body-pad-y) var(--lop-modal-2-body-pad-x)!important;
  color:var(--lop-modal-2-text)!important;
  background:var(--lop-modal-2-surface)!important;
  font-family:inherit!important;
  font-size:14px!important;
  line-height:1.55!important;
}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__body :where(p,li,td,th){font-size:13.5px;line-height:1.55;}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__body :where(h2,h3,h4){color:var(--lop-modal-2-text);font-family:inherit;font-weight:800;line-height:1.35;}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__body :where(h2){font-size:16px;}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__body :where(h3,h4){font-size:14px;}

/* Forms: same label/control/help rhythm everywhere. */
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__dialog form :where(label,.lop-admin-label){
  color:#344054!important;
  font-family:inherit!important;
  font-size:12.5px!important;
  font-weight:700!important;
  line-height:1.35!important;
}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__dialog form :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]),select,textarea){
  box-sizing:border-box!important;
  width:100%!important;
  min-height:var(--lop-modal-2-control-h)!important;
  padding:9px 11px!important;
  border:1px solid #d0d5dd!important;
  border-radius:var(--lop-modal-2-control-radius)!important;
  background:#fff!important;
  color:#101828!important;
  box-shadow:none!important;
  font-family:inherit!important;
  font-size:13.5px!important;
  font-weight:500!important;
  line-height:1.4!important;
  outline:0!important;
  transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease!important;
}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__dialog form textarea{min-height:104px!important;resize:vertical;}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__dialog form :where(input,select,textarea):focus{
  border-color:var(--lop-popup-ui-primary)!important;
  box-shadow:0 0 0 3px var(--lop-popup-ui-focus)!important;
}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__dialog form :where(input,select,textarea):disabled{
  background:#f2f4f7!important;color:#98a2b3!important;cursor:not-allowed!important;
}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__dialog :where(.description,.help,.hint,.lop-admin-help,small){color:var(--lop-modal-2-muted);font-family:inherit;font-size:11.5px;line-height:1.45;}

/* Sticky footer/action bar: predictable order and geometry without changing handlers. */
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__footer{
  box-sizing:border-box!important;
  position:sticky!important;
  bottom:0!important;
  z-index:11!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  flex-wrap:wrap!important;
  margin:0!important;
  padding:var(--lop-modal-2-footer-pad-y) var(--lop-modal-2-footer-pad-x)!important;
  border:0!important;
  border-top:1px solid var(--lop-modal-2-line)!important;
  background:rgba(255,255,255,.985)!important;
  box-shadow:0 -8px 22px rgba(15,23,42,.035)!important;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__footer :where(button,a.lop-admin-btn,a.lop-ui-btn,.lop-class-btn){
  box-sizing:border-box!important;
  min-height:var(--lop-modal-2-button-h)!important;
  height:auto!important;
  padding:9px 14px!important;
  border:1px solid #d0d5dd!important;
  border-radius:10px!important;
  background:#fff!important;
  color:#344054!important;
  box-shadow:none!important;
  font-family:inherit!important;
  font-size:12.5px!important;
  font-weight:750!important;
  line-height:1.2!important;
  text-decoration:none!important;
  cursor:pointer!important;
  transition:background-color .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease!important;
}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__footer :where(button,a):hover{border-color:#bfc7d2!important;background:#f8fafc!important;color:#101828!important;}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__footer :where(button,a):focus-visible{outline:0!important;box-shadow:0 0 0 3px var(--lop-popup-ui-focus)!important;}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__footer :where(button[type="submit"],.primary,.is-primary,[data-lop-btn-role="primary"],.lop-study-note-save){
  border-color:var(--lop-popup-ui-primary)!important;
  background:var(--lop-popup-ui-primary)!important;
  color:#fff!important;
}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__footer :where(button[type="submit"],.primary,.is-primary,[data-lop-btn-role="primary"],.lop-study-note-save):hover{
  border-color:var(--lop-popup-ui-primary-hover)!important;
  background:var(--lop-popup-ui-primary-hover)!important;
  color:#fff!important;
}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__footer :where(.danger,.is-danger,[data-lop-btn-role="danger"]){
  border-color:#fda29b!important;background:#fff!important;color:var(--lop-modal-2-danger)!important;
}
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__footer :where(.danger,.is-danger,[data-lop-btn-role="danger"]):hover{
  border-color:#f04438!important;background:#fff5f4!important;color:#912018!important;
}

/* Avoid nested-card clutter inside forms: retain semantic grouping with a quieter surface. */
:is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__body :where(.lopsp-panel,.lopsp-settings-card,.lop-admin-panel,.lop-classroom-panel){
  box-shadow:none!important;
}

/* Quick Search participates in the same canonical shell even though React owns its markup. */
:is(body.lopsp-public-body,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-ux3-command{max-height:calc(100dvh - 48px)!important;overflow:auto!important;}
:is(body.lopsp-public-body,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-ux3-command>header{position:sticky!important;top:0!important;z-index:12!important;background:rgba(255,255,255,.98)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}

/* Native dialog gets the same final polish when the semantic adapter is not required. */
body.wp-admin dialog.lop-vocab-admin-dialog{max-height:calc(100dvh - 48px)!important;overflow:auto!important;}

@media(max-width:720px){
  :is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body){
    --lop-modal-2-radius:16px;
    --lop-modal-2-header-pad-y:14px;
    --lop-modal-2-header-pad-x:14px;
    --lop-modal-2-body-pad-y:14px;
    --lop-modal-2-body-pad-x:14px;
    --lop-modal-2-footer-pad-y:11px;
    --lop-modal-2-footer-pad-x:12px;
    --lop-modal-2-close:40px;
  }
  :is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui{padding:8px!important;}
  :is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__dialog{
    width:calc(100vw - 16px)!important;
    max-width:calc(100vw - 16px)!important;
    max-height:calc(100dvh - 16px)!important;
    border-radius:var(--lop-modal-2-radius)!important;
  }
  :is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__header{gap:10px!important;}
  :is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__header :where(h1,h2,h3,h4){font-size:17px!important;}
  :is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__header :where(p){font-size:12px!important;}
  :is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__footer{gap:7px!important;}
  :is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__footer :where(button,a.lop-admin-btn,a.lop-ui-btn,.lop-class-btn){min-height:42px!important;}
}

@media(max-width:430px){
  :is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__footer :where(button,a.lop-admin-btn,a.lop-ui-btn,.lop-class-btn){flex:1 1 auto;justify-content:center!important;text-align:center!important;}
  :is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__footer :where(button[type="submit"],.primary,.is-primary,[data-lop-btn-role="primary"]){flex:1 1 100%;order:10;}
}

@media(prefers-reduced-motion:reduce){
  :is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui:not([hidden]) .lop-modal-ui__dialog{animation:none!important;}
  :is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__close,
  :is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__dialog form :where(input,select,textarea),
  :is(body.lopsp-public-body,body.wp-admin,body.lop-teacher-workspace-body,body.lop-center-workspace-body,body.lop-companion-workspace-body) .lop-modal-ui__footer :where(button,a){transition:none!important;}
}