/* LOP Streak Professional UI System — v2.8.626
 * Presentation-only layer. Scoped to LOP standalone frontend and LOP Admin Portal.
 * No template, handler, data, permission or business-logic changes.
 */

/* --------------------------------------------------------------------------
   Shared design tokens
   -------------------------------------------------------------------------- */
body.lopsp-public-body{
  --lop-ui-primary:#1769e0;
  --lop-ui-primary-hover:#0f57c7;
  --lop-ui-primary-strong:#0a4ba9;
  --lop-ui-primary-soft:#edf5ff;
  --lop-ui-navy:#0a3b67;
  --lop-ui-navy-strong:#062f54;
  --lop-ui-page:#f3f6fb;
  --lop-ui-page-2:#eef3f9;
  --lop-ui-surface:#ffffff;
  --lop-ui-surface-soft:#f8fafc;
  --lop-ui-surface-blue:#f4f8fd;
  --lop-ui-border:#dde6f1;
  --lop-ui-border-strong:#c9d7e8;
  --lop-ui-text:#14213a;
  --lop-ui-muted:#66758d;
  --lop-ui-success:#168a60;
  --lop-ui-success-soft:#ecfdf5;
  --lop-ui-warning:#c97908;
  --lop-ui-warning-soft:#fff8e8;
  --lop-ui-danger:#cf3651;
  --lop-ui-danger-soft:#fff1f3;
  --lop-ui-info:#1677c8;
  --lop-ui-radius-sm:10px;
  --lop-ui-radius:14px;
  --lop-ui-radius-lg:18px;
  --lop-ui-radius-xl:22px;
  --lop-ui-shadow-xs:0 1px 2px rgba(10,59,103,.035);
  --lop-ui-shadow-sm:0 5px 16px rgba(10,59,103,.055);
  --lop-ui-shadow:0 12px 32px rgba(10,59,103,.075);
  --lop-ui-shadow-lg:0 20px 50px rgba(10,59,103,.11);
  --lop-ui-focus:0 0 0 4px rgba(23,105,224,.14);
  --lop-ui-control-height:46px;
  --lop-ui-content-width:1280px;
  color:var(--lop-ui-text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.lopsp-public-body,
body.lopsp-public-body .lopsp-info-wrap,
body.lopsp-public-body .lopsp-private-page,
body.lopsp-public-body .lopsp-private-wrap,
body.lopsp-public-body .lopsp-standalone-wrap{
  background:var(--lop-ui-page);
}
body.lopsp-public-body *,
body.lopsp-public-body *::before,
body.lopsp-public-body *::after{box-sizing:border-box;}
body.lopsp-public-body :where(h1,h2,h3,h4,h5,h6){letter-spacing:-.018em;}
body.lopsp-public-body :where(p,li,dd,td){overflow-wrap:anywhere;}
body.lopsp-public-body :where(a){text-underline-offset:3px;}
body.lopsp-public-body :where(img,video,canvas,svg){max-width:100%;}

/* v2.8.733 — Dark-surface heading contrast contract.
 * Headings inherit each component's foreground instead of being globally forced dark.
 * Explicit dark hero/CTA surfaces are hardened for theme/load-order safety. */
body.lopsp-public-body:not(.lop-admin-portal-body) :where(
  .lopsp-home-final-v2730,
  .lopsp-landing-start-cta-v628,
  .loptw-welcome,
  .lopcw-welcome,
  .lop-editor-stats-hero
) :where(h1,h2,h3,h4,h5,h6){
  color:#fff!important;
}

/* Keep the existing Button Design System, but align its tokens with the new UI. */
body.lopsp-public-body:not(.lop-admin-portal-body){
  --lop-btn-primary:var(--lop-ui-primary);
  --lop-btn-primary-hover:var(--lop-ui-primary-hover);
  --lop-btn-primary-active:var(--lop-ui-primary-strong);
  --lop-btn-secondary-bg:#fff;
  --lop-btn-secondary-hover:var(--lop-ui-primary-soft);
  --lop-btn-secondary-text:var(--lop-ui-primary-strong);
  --lop-btn-secondary-border:#bcd4f2;
  --lop-btn-success:var(--lop-ui-success);
  --lop-btn-success-hover:#10744f;
  --lop-btn-success-active:#0c6242;
  --lop-btn-danger-bg:var(--lop-ui-danger-soft);
  --lop-btn-danger-hover:#ffe1e6;
  --lop-btn-danger-text:#b4233d;
  --lop-btn-danger-border:#f3a7b4;
  --lop-btn-ghost-hover:#edf2f7;
  --lop-btn-ghost-text:#52627a;
  --lop-btn-disabled-bg:#e5ebf3;
  --lop-btn-disabled-text:#8b99ad;
  --lop-btn-focus:rgba(23,105,224,.25);
  --lop-btn-radius:11px;
  --lop-btn-height:44px;
  --lop-btn-shadow:0 7px 17px rgba(23,105,224,.17);
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-ui-btn{
  font-weight:760!important;
  letter-spacing:-.005em!important;
}

/* --------------------------------------------------------------------------
   Frontend page canvas, navigation and page hierarchy
   -------------------------------------------------------------------------- */
body.lopsp-public-body:not(.lop-admin-portal-body) :where(
  .lopsp-info-main,
  .lopsp-wrap,
  .lopsp-private-main,
  .lop-progress-main,
  .lop-companion-main,
  .lop-support-main,
  .lop-assessment-main,
  .lop-study-main,
  .lop-classroom-main,
  .lopsp-report-main
){
  width:min(calc(100% - 32px),var(--lop-ui-content-width));
  max-width:var(--lop-ui-content-width);
  margin-inline:auto;
}
body.lopsp-public-body:not(.lop-admin-portal-body) :where(
  .lopsp-info-main,
  .lopsp-private-main,
  .lop-progress-main,
  .lop-companion-main,
  .lop-support-main,
  .lop-assessment-main,
  .lop-study-main,
  .lop-classroom-main,
  .lopsp-report-main
){padding-top:24px;padding-bottom:52px;}
body.lopsp-public-body:not(.lop-admin-portal-body) :where(
  .lopsp-info-main,
  .lopsp-private-main,
  .lop-progress-main,
  .lop-companion-main,
  .lop-support-main,
  .lop-assessment-main,
  .lop-study-main,
  .lop-classroom-main,
  .lopsp-report-main
) > :first-child{margin-top:0;}

/* Public fallback header. The more advanced unified header keeps its own behavior. */
body.lopsp-public-body:not(.lop-admin-portal-body) .lopsp-site-header:not(.lopsp-unified-site-header-v298){
  position:sticky;
  top:0;
  z-index:2147483200;
  border-bottom:1px solid rgba(201,215,232,.9);
  background:rgba(255,255,255,.94);
  box-shadow:0 7px 22px rgba(10,59,103,.055);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lopsp-site-header:not(.lopsp-unified-site-header-v298) .lopsp-main-nav{
  width:min(calc(100% - 28px),var(--lop-ui-content-width));
  min-height:66px;
  margin:auto;
  display:flex;
  align-items:center;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:none;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lopsp-site-header:not(.lopsp-unified-site-header-v298) .lopsp-main-nav::-webkit-scrollbar{display:none;}
body.lopsp-public-body:not(.lop-admin-portal-body) .lopsp-site-header:not(.lopsp-unified-site-header-v298) .lopsp-main-nav>a{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 13px;
  border:1px solid transparent;
  border-radius:11px;
  color:#33445d;
  font-size:13.5px;
  font-weight:720;
  text-decoration:none;
  transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lopsp-site-header:not(.lopsp-unified-site-header-v298) .lopsp-main-nav>a:hover,
body.lopsp-public-body:not(.lop-admin-portal-body) .lopsp-site-header:not(.lopsp-unified-site-header-v298) .lopsp-main-nav>a.active{
  border-color:#c9dcf4;
  background:var(--lop-ui-primary-soft);
  color:var(--lop-ui-primary-strong);
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lopsp-site-header:not(.lopsp-unified-site-header-v298) .lopsp-main-nav>a.lopsp-nav-upgrade-action{
  border-color:var(--lop-ui-primary);
  background:var(--lop-ui-primary);
  color:#fff;
  box-shadow:0 7px 16px rgba(23,105,224,.17);
}

/* Existing advanced student navigation: visual refinement only. */
body.lopsp-public-body:not(.lop-admin-portal-body) .lopsp-unified-site-header-v298{
  border-bottom-color:rgba(201,215,232,.92)!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 7px 24px rgba(10,59,103,.06)!important;
}
body.lopsp-public-body:not(.lop-admin-portal-body) :where(
  .lopsp-unified-main-nav-v297 > a,
  .lopsp-unified-main-nav-v297 .lopsp-nav-dropdown-toggle
){
  border-radius:11px!important;
  font-weight:720!important;
}
body.lopsp-public-body:not(.lop-admin-portal-body) :where(
  .lopsp-unified-main-nav-v297 > a.active,
  .lopsp-unified-main-nav-v297 > a:hover,
  .lopsp-unified-main-nav-v297 .lopsp-nav-dropdown[open]>.lopsp-nav-dropdown-toggle,
  .lopsp-unified-main-nav-v297 .lopsp-nav-dropdown.is-open>.lopsp-nav-dropdown-toggle,
  .lopsp-unified-main-nav-v297 .lopsp-nav-dropdown-toggle:hover
){
  box-shadow:0 6px 14px rgba(23,105,224,.10)!important;
}

/* Consistent page-title hierarchy without changing markup. */
body.lopsp-public-body:not(.lop-admin-portal-body) :where(
  .lopsp-info-main,
  .lopsp-private-main,
  .lop-progress-main,
  .lop-companion-main,
  .lop-support-main,
  .lop-assessment-main,
  .lop-study-main,
  .lop-classroom-main,
  .lopsp-report-main
) > :where(h1,.lop-page-title){
  margin:0 0 7px;
  font-size:clamp(25px,2.4vw,32px);
  line-height:1.18;
  font-weight:780;
  color:var(--lop-ui-text);
}
body.lopsp-public-body:not(.lop-admin-portal-body) :where(
  .lopsp-section-head,
  .lop-progress-section-head,
  .lop-classroom-section-head,
  .lop-assessment-section-head,
  .lop-study-section-head,
  .lopsp-report-panel-head,
  .lop-admin-section-head
){
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-width:0;
}
body.lopsp-public-body:not(.lop-admin-portal-body) :where(
  .lopsp-section-head,
  .lop-progress-section-head,
  .lop-classroom-section-head,
  .lop-assessment-section-head,
  .lop-study-section-head,
  .lopsp-report-panel-head
) :where(h2,h3){
  margin:0;
  color:var(--lop-ui-text);
  font-weight:760;
}

/* --------------------------------------------------------------------------
   Surfaces, cards, KPI blocks and tabs
   -------------------------------------------------------------------------- */
body.lopsp-public-body:not(.lop-admin-portal-body) :where(
  .lopsp-info-section,
  .lopsp-info-card,
  .lopsp-card,
  .lopsp-panel,
  .lop-card,
  .lop-panel,
  .lop-progress-card,
  .lop-progress-panel,
  .lop-assessment-panel,
  .lop-classroom-panel,
  .lop-class-section,
  .lopsp-report-panel,
  .lop-pathway-card,
  .lop-lesson-flow-section,
  .lop-study-vocab-card,
  .lop-companion-control-panel,
  .lop-companion-settings-panel,
  .lop-companion-link-card,
  .lop-companion-setup-card
){
  border-color:var(--lop-ui-border)!important;
  background:var(--lop-ui-surface)!important;
  box-shadow:var(--lop-ui-shadow-sm)!important;
}
body.lopsp-public-body:not(.lop-admin-portal-body) :where(
  .lopsp-info-section,
  .lopsp-panel,
  .lop-panel,
  .lop-progress-panel,
  .lop-assessment-panel,
  .lop-classroom-panel,
  .lop-class-section,
  .lopsp-report-panel
){border-radius:var(--lop-ui-radius-lg)!important;}
body.lopsp-public-body:not(.lop-admin-portal-body) :where(
  .lopsp-info-card,
  .lopsp-card,
  .lop-card,
  .lop-progress-card,
  .lop-pathway-card,
  .lop-study-vocab-card
){border-radius:var(--lop-ui-radius)!important;}
body.lopsp-public-body:not(.lop-admin-portal-body) :where(
  .lopsp-info-card,
  .lop-progress-card,
  .lop-pathway-card,
  .lop-study-vocab-card
){transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;}
body.lopsp-public-body:not(.lop-admin-portal-body) :where(
  .lopsp-info-card,
  .lop-progress-card,
  .lop-pathway-card,
  .lop-study-vocab-card
):hover{
  transform:translateY(-2px);
  border-color:#c4d6ec!important;
  box-shadow:var(--lop-ui-shadow)!important;
}

/* KPI/summary cards: restrained, dashboard-like hierarchy. */
body.lopsp-public-body:not(.lop-admin-portal-body) :where(
  .lopsp-stat-card,
  .lopsp-summary-card,
  .lop-progress-stat,
  .lop-progress-summary-card,
  .lop-study-hero-stat,
  .lopsp-report-stat,
  .lop-assessment-stat
){
  position:relative;
  overflow:hidden;
  border:1px solid var(--lop-ui-border)!important;
  border-radius:var(--lop-ui-radius)!important;
  background:var(--lop-ui-surface)!important;
  box-shadow:var(--lop-ui-shadow-xs)!important;
}
body.lopsp-public-body:not(.lop-admin-portal-body) :where(
  .lopsp-stat-card,
  .lopsp-summary-card,
  .lop-progress-stat,
  .lop-progress-summary-card,
  .lop-study-hero-stat,
  .lopsp-report-stat,
  .lop-assessment-stat
)::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:3px;
  background:linear-gradient(90deg,var(--lop-ui-primary),#53a8ff);
}
body.lopsp-public-body:not(.lop-admin-portal-body) :where(
  .lopsp-stat-card,
  .lopsp-summary-card,
  .lop-progress-stat,
  .lop-progress-summary-card,
  .lop-study-hero-stat,
  .lopsp-report-stat,
  .lop-assessment-stat
) :where(strong,b){color:#0d1e38;font-weight:790;}
body.lopsp-public-body:not(.lop-admin-portal-body) :where(
  .lopsp-stat-card,
  .lopsp-summary-card,
  .lop-progress-stat,
  .lop-progress-summary-card,
  .lop-study-hero-stat,
  .lopsp-report-stat,
  .lop-assessment-stat
) :where(small,span,p){color:var(--lop-ui-muted);}

body.lopsp-public-body:not(.lop-admin-portal-body) :where(
  .lop-tabs,
  .lopsp-tabs,
  .lop-progress-tabs,
  .lop-study-tabs,
  .lop-admin-filter-pills
){
  gap:5px;
  padding:4px;
  border:1px solid var(--lop-ui-border);
  border-radius:12px;
  background:#fff;
  box-shadow:var(--lop-ui-shadow-xs);
}
body.lopsp-public-body:not(.lop-admin-portal-body) :where(
  .lop-tabs,
  .lopsp-tabs,
  .lop-progress-tabs,
  .lop-study-tabs
) :where(a,button){
  min-height:38px;
  border-radius:9px;
  font-weight:720;
}

/* --------------------------------------------------------------------------
   Forms and controls
   -------------------------------------------------------------------------- */
body.lopsp-public-body:not(.lop-admin-portal-body) :where(
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="month"],
  input[type="week"],
  input[type="search"],
  select,
  textarea
):not(.wp-editor-area):not(.mce-textbox){
  width:100%;
  max-width:100%;
  min-width:0;
  border:1px solid var(--lop-ui-border-strong)!important;
  border-radius:11px!important;
  background:#fff!important;
  color:var(--lop-ui-text)!important;
  font:inherit!important;
  font-weight:560!important;
  outline:none!important;
  box-shadow:var(--lop-ui-shadow-xs)!important;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease!important;
}
body.lopsp-public-body:not(.lop-admin-portal-body) :where(
  input[type="text"],input[type="email"],input[type="tel"],input[type="url"],input[type="password"],input[type="number"],input[type="date"],input[type="time"],input[type="month"],input[type="week"],input[type="search"],select
):not(.wp-editor-area):not(.mce-textbox){
  min-height:var(--lop-ui-control-height)!important;
  padding:10px 13px!important;
}
body.lopsp-public-body:not(.lop-admin-portal-body) textarea:not(.wp-editor-area):not(.mce-textbox){
  min-height:112px;
  padding:12px 13px!important;
  resize:vertical;
}
body.lopsp-public-body:not(.lop-admin-portal-body) :where(
  input[type="text"],input[type="email"],input[type="tel"],input[type="url"],input[type="password"],input[type="number"],input[type="date"],input[type="time"],input[type="month"],input[type="week"],input[type="search"],select,textarea
):not(.wp-editor-area):not(.mce-textbox):hover{
  border-color:#9fb6d2!important;
}
body.lopsp-public-body:not(.lop-admin-portal-body) :where(
  input[type="text"],input[type="email"],input[type="tel"],input[type="url"],input[type="password"],input[type="number"],input[type="date"],input[type="time"],input[type="month"],input[type="week"],input[type="search"],select,textarea
):not(.wp-editor-area):not(.mce-textbox):focus{
  border-color:var(--lop-ui-primary)!important;
  box-shadow:var(--lop-ui-focus)!important;
}
body.lopsp-public-body:not(.lop-admin-portal-body) :where(input,select,textarea):disabled{
  border-color:#dfe6ef!important;
  background:#f1f4f8!important;
  color:#8795a9!important;
  cursor:not-allowed!important;
}
body.lopsp-public-body:not(.lop-admin-portal-body) :where(input,textarea)::placeholder{color:#93a1b4;opacity:1;}
body.lopsp-public-body:not(.lop-admin-portal-body) :where(label,.lop-field-label,.lopsp-field-label){
  color:#2c3b53;
  font-weight:700;
}
body.lopsp-public-body:not(.lop-admin-portal-body) :where(.description,.lopsp-help,.lop-field-help,.lopsp-muted,.lop-muted){
  color:var(--lop-ui-muted)!important;
}
body.lopsp-public-body:not(.lop-admin-portal-body) :where(input[type="checkbox"],input[type="radio"]){accent-color:var(--lop-ui-primary);}

/* --------------------------------------------------------------------------
   Tables, filters and data-heavy screens
   -------------------------------------------------------------------------- */
body.lopsp-public-body:not(.lop-admin-portal-body) :where(
  .lop-admin-table-wrap,
  .lopsp-history-table-wrap,
  .lop-class-status-table-wrap,
  .lopsp-benefit-table-wrap,
  .lop-progress-gradebook-wrap,
  .lop-table-wrap
){
  overflow:auto;
  border:1px solid var(--lop-ui-border);
  border-radius:14px;
  background:#fff;
  box-shadow:var(--lop-ui-shadow-xs);
  scrollbar-gutter:stable;
}
body.lopsp-public-body:not(.lop-admin-portal-body) table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  color:var(--lop-ui-text);
  font-variant-numeric:tabular-nums;
}
body.lopsp-public-body:not(.lop-admin-portal-body) table :where(th,td){
  padding:11px 13px;
  border-bottom:1px solid #e8eef5;
  vertical-align:middle;
}
body.lopsp-public-body:not(.lop-admin-portal-body) table thead th{
  position:relative;
  background:#edf3fa;
  color:#263b58;
  font-size:12px;
  font-weight:780;
  line-height:1.3;
  letter-spacing:.015em;
  text-align:left;
  white-space:nowrap;
}
body.lopsp-public-body:not(.lop-admin-portal-body) table tbody tr:last-child td{border-bottom:0;}
body.lopsp-public-body:not(.lop-admin-portal-body) table tbody tr{transition:background .14s ease;}
body.lopsp-public-body:not(.lop-admin-portal-body) table tbody tr:hover{background:#f7faff;}
body.lopsp-public-body:not(.lop-admin-portal-body) :where(
  .lop-progress-gradebook-table,
  .lopsp-report-table,
  .lop-class-performance-table,
  .lop-class-status-table
) thead th{
  border-bottom-color:#174d7d;
  background:var(--lop-ui-navy);
  color:#fff;
}
body.lopsp-public-body:not(.lop-admin-portal-body) :where(
  .lop-progress-gradebook-table,
  .lopsp-report-table,
  .lop-class-performance-table,
  .lop-class-status-table
) thead tr+tr th{background:#0d487a;}
body.lopsp-public-body:not(.lop-admin-portal-body) :where(
  .lopsp-filterbar,
  .lop-filterbar,
  .lop-progress-toolbar,
  .lop-study-toolbar,
  .lop-class-toolbar,
  .lopsp-report-filter
){
  display:flex;
  align-items:flex-end;
  gap:10px;
  flex-wrap:wrap;
  padding:12px;
  border:1px solid var(--lop-ui-border);
  border-radius:14px;
  background:#fff;
  box-shadow:var(--lop-ui-shadow-xs);
}

/* Status chips and notices. */
body.lopsp-public-body:not(.lop-admin-portal-body) :where(
  .lopstreak-status-badge,
  .lopsp-badge,
  .lop-badge,
  .lop-admin-status,
  .lopsp-status-pill,
  .lop-progress-badge
){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-height:26px;
  padding:4px 9px;
  border-radius:999px;
  font-size:12px;
  font-weight:760;
  line-height:1.2;
}
body.lopsp-public-body:not(.lop-admin-portal-body) :where(
  .lopsp-alert,
  .lop-alert,
  .lopsp-notice,
  .lop-notice,
  .lop-companion-notice,
  .lop-companion-inline-notice
){
  border-radius:12px!important;
  box-shadow:none!important;
}

/* --------------------------------------------------------------------------
   Popup visual finish — geometry remains controlled by popup-system.css
   -------------------------------------------------------------------------- */
body.lopsp-public-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,
  .lopsp-like-gift-dialog,
  .lop-study-unit-detail-dialog,
  .lop-study-vocabulary-card-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-admin-image-lightbox-dialog
){
  border:1px solid rgba(201,215,232,.96)!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 26px 70px rgba(6,47,84,.22)!important;
}
body.lopsp-public-body :where(
  .lopsp-modal-panel > .lopsp-panel-head,
  .lopsp-settings-popup-dialog > .lopsp-settings-popup-head,
  .lop-progress-modal-dialog > .lop-progress-modal-head,
  .lop-class-modal-dialog > .lop-class-modal-head,
  .lop-study-note-dialog > .lop-study-note-head,
  .lop-study-lop-dialog > .lop-study-lop-head,
  .lopsp-reminder-modal-card > .lopsp-reminder-modal-head,
  .lop-study-modal-panel > header,
  .lop-admin-modal > .lop-admin-modal-head,
  .lop-admin-ai-dialog > .lop-admin-ai-head,
  .lop-ai-gen-dialog > .lop-ai-gen-head,
  .lop-media-create-dialog > .lop-media-create-head,
  .lop-lesson-picker-dialog > .lop-ai-gen-head,
  .lop-vocab-dialog-shell > .lop-vocab-modal-head
){
  border-bottom:1px solid var(--lop-ui-border)!important;
  background:rgba(255,255,255,.985)!important;
  box-shadow:0 5px 14px rgba(10,59,103,.045)!important;
}
body.lopsp-public-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
){
  border:1px solid var(--lop-ui-border)!important;
  border-radius:11px!important;
  background:#f8fafc!important;
  color:#52627a!important;
  box-shadow:none!important;
}
body.lopsp-public-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
):hover{
  border-color:#b9cbe0!important;
  background:#eef4fa!important;
  color:#16233a!important;
}

/* --------------------------------------------------------------------------
   LOP Admin Portal — dense professional dashboard language
   -------------------------------------------------------------------------- */
body.lop-admin-portal-body{
  --lop-admin-bg:var(--lop-ui-page);
  --lop-admin-surface:#fff;
  --lop-admin-surface-2:#f7f9fc;
  --lop-admin-border:var(--lop-ui-border);
  --lop-admin-text:var(--lop-ui-text);
  --lop-admin-muted:var(--lop-ui-muted);
  --lop-admin-primary:var(--lop-ui-primary);
  --lop-admin-primary-soft:var(--lop-ui-primary-soft);
  --lop-admin-radius:14px;
  --lop-admin-shadow:var(--lop-ui-shadow-sm);
  background:var(--lop-admin-bg)!important;
}
body.lop-admin-portal-body .lop-admin-portal{
  grid-template-columns:248px minmax(0,1fr)!important;
  background:var(--lop-admin-bg)!important;
}
body.lop-admin-portal-body .lop-admin-side{
  width:248px!important;
  padding:18px 12px!important;
  background:linear-gradient(180deg,#0a3b67 0%,#07345c 54%,#062d50 100%)!important;
  box-shadow:8px 0 28px rgba(6,47,84,.11)!important;
}
body.lop-admin-portal-body .lop-admin-brand{
  min-height:60px!important;
  margin-bottom:12px!important;
  padding:5px 8px 17px!important;
  border-bottom:1px solid rgba(255,255,255,.12)!important;
}
body.lop-admin-portal-body .lop-admin-brand img{
  width:42px!important;
  height:42px!important;
  border-radius:12px!important;
  background:#fff!important;
  object-fit:cover!important;
  box-shadow:0 6px 16px rgba(0,0,0,.16)!important;
}
body.lop-admin-portal-body .lop-admin-brand strong{
  font-size:16px!important;
  font-weight:760!important;
}
body.lop-admin-portal-body .lop-admin-nav{gap:4px!important;}
body.lop-admin-portal-body .lop-admin-nav a{
  position:relative!important;
  min-height:42px!important;
  padding:10px 12px!important;
  border-radius:10px!important;
  color:#d7e3ef!important;
  font-size:13.5px!important;
  font-weight:650!important;
}
body.lop-admin-portal-body .lop-admin-nav a:hover{
  background:rgba(255,255,255,.09)!important;
  color:#fff!important;
}
body.lop-admin-portal-body .lop-admin-nav a.active{
  background:rgba(75,151,229,.25)!important;
  color:#fff!important;
  box-shadow:inset 0 0 0 1px rgba(132,192,250,.16)!important;
}
body.lop-admin-portal-body .lop-admin-nav a.active::before{
  content:"";
  position:absolute;
  left:-12px;
  top:10px;
  bottom:10px;
  width:4px;
  border-radius:0 6px 6px 0;
  background:#48a4ff;
  box-shadow:0 0 12px rgba(72,164,255,.5);
}
body.lop-admin-portal-body .lop-admin-main{
  width:100%!important;
  max-width:1600px!important;
  padding:24px 28px 48px!important;
}
body.lop-admin-portal-body .lop-admin-main>h1{
  margin:0 0 8px!important;
  font-size:26px!important;
  font-weight:780!important;
  color:#10213a!important;
}
body.lop-admin-portal-body :where(.lop-admin-panel,.lop-admin-card,.lop-task-admin-card,.lop-admin-quick-card,.lop-admin-ops-card,.lop-admin-rank-card){
  border-color:var(--lop-ui-border)!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:var(--lop-ui-shadow-sm)!important;
}
body.lop-admin-portal-body .lop-admin-panel{padding:18px!important;margin:14px 0 18px!important;}
body.lop-admin-portal-body .lop-admin-cards,
body.lop-admin-portal-body .lop-admin-dashboard-stat-grid{
  gap:14px!important;
}
body.lop-admin-portal-body :where(.lop-admin-card,.lop-admin-dashboard-stat){
  position:relative!important;
  overflow:hidden!important;
  min-height:112px!important;
  border:1px solid var(--lop-ui-border)!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:var(--lop-ui-shadow-xs)!important;
}
body.lop-admin-portal-body :where(.lop-admin-card,.lop-admin-dashboard-stat)::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:3px;
  background:linear-gradient(90deg,var(--lop-ui-primary),#4aa4ff);
}
body.lop-admin-portal-body :where(.lop-admin-card,.lop-admin-dashboard-stat) strong{
  color:#0e203a!important;
  font-variant-numeric:tabular-nums;
}
body.lop-admin-portal-body :where(.lop-admin-table-wrap,.lop-admin-table-scroll){
  overflow:auto!important;
  border:1px solid var(--lop-ui-border)!important;
  border-radius:12px!important;
  background:#fff!important;
  box-shadow:var(--lop-ui-shadow-xs)!important;
  scrollbar-gutter:stable;
}
body.lop-admin-portal-body .lop-admin-table{
  width:100%!important;
  border-collapse:separate!important;
  border-spacing:0!important;
  font-variant-numeric:tabular-nums;
}
body.lop-admin-portal-body .lop-admin-table th{
  position:sticky;
  top:0;
  z-index:2;
  padding:11px 12px!important;
  border-bottom:1px solid #174d7d!important;
  background:var(--lop-ui-navy)!important;
  color:#fff!important;
  font-size:11.5px!important;
  font-weight:760!important;
  letter-spacing:.02em!important;
  text-transform:none!important;
  white-space:nowrap;
}
body.lop-admin-portal-body .lop-admin-table td{
  padding:11px 12px!important;
  border-bottom:1px solid #e8eef5!important;
  background:#fff;
  color:#25364f!important;
}
body.lop-admin-portal-body .lop-admin-table tbody tr:hover td{background:#f5f9fe!important;}
body.lop-admin-portal-body .lop-admin-table tbody tr:last-child td{border-bottom:0!important;}
body.lop-admin-portal-body :where(
  .lop-admin-panel input[type="text"],.lop-admin-panel input[type="email"],.lop-admin-panel input[type="tel"],.lop-admin-panel input[type="url"],.lop-admin-panel input[type="password"],.lop-admin-panel input[type="number"],.lop-admin-panel input[type="date"],.lop-admin-panel input[type="time"],.lop-admin-panel input[type="month"],.lop-admin-panel input[type="search"],.lop-admin-panel select,.lop-admin-panel textarea,
  .lop-admin-filterbar input[type="text"],.lop-admin-filterbar input[type="search"],.lop-admin-filterbar select
):not(.wp-editor-area):not(.mce-textbox){
  border:1px solid var(--lop-ui-border-strong)!important;
  border-radius:10px!important;
  background:#fff!important;
  color:var(--lop-ui-text)!important;
  box-shadow:var(--lop-ui-shadow-xs)!important;
}
body.lop-admin-portal-body :where(
  .lop-admin-panel input[type="text"],.lop-admin-panel input[type="email"],.lop-admin-panel input[type="tel"],.lop-admin-panel input[type="url"],.lop-admin-panel input[type="password"],.lop-admin-panel input[type="number"],.lop-admin-panel input[type="date"],.lop-admin-panel input[type="time"],.lop-admin-panel input[type="month"],.lop-admin-panel input[type="search"],.lop-admin-panel select,
  .lop-admin-filterbar input[type="text"],.lop-admin-filterbar input[type="search"],.lop-admin-filterbar select
):not(.wp-editor-area):not(.mce-textbox){
  min-height:42px!important;
  padding:9px 11px!important;
}
body.lop-admin-portal-body :where(.lop-admin-panel textarea,.lop-admin-filterbar textarea):not(.wp-editor-area):not(.mce-textbox){padding:11px!important;}
body.lop-admin-portal-body :where(.lop-admin-panel input,.lop-admin-panel select,.lop-admin-panel textarea,.lop-admin-filterbar input,.lop-admin-filterbar select):focus{
  border-color:var(--lop-ui-primary)!important;
  box-shadow:var(--lop-ui-focus)!important;
  outline:none!important;
}
body.lop-admin-portal-body :where(.lop-admin-btn,.lop-admin-mini-btn){
  min-height:40px!important;
  padding:9px 14px!important;
  border:1px solid transparent!important;
  border-radius:10px!important;
  background:var(--lop-ui-primary)!important;
  color:#fff!important;
  font-weight:740!important;
  box-shadow:0 6px 15px rgba(23,105,224,.16)!important;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease!important;
}
body.lop-admin-portal-body .lop-admin-mini-btn{min-height:34px!important;padding:6px 10px!important;font-size:12px!important;box-shadow:none!important;}
body.lop-admin-portal-body :where(.lop-admin-btn,.lop-admin-mini-btn):hover{
  background:var(--lop-ui-primary-hover)!important;
  transform:translateY(-1px)!important;
}
body.lop-admin-portal-body :where(.lop-admin-btn.secondary,.lop-admin-mini-btn.secondary){
  border-color:#bfd1e6!important;
  background:#fff!important;
  color:var(--lop-ui-primary-strong)!important;
  box-shadow:none!important;
}
body.lop-admin-portal-body :where(.lop-admin-btn.danger,.lop-admin-mini-btn.danger){
  border-color:#f0adba!important;
  background:var(--lop-ui-danger-soft)!important;
  color:#b4233d!important;
  box-shadow:none!important;
}
body.lop-admin-portal-body :where(.lop-admin-filterbar,.lop-admin-page-toolbar,.lop-admin-searchline){
  border:1px solid var(--lop-ui-border)!important;
  border-radius:12px!important;
  background:#fff!important;
  box-shadow:var(--lop-ui-shadow-xs)!important;
}
body.lop-admin-portal-body .lop-admin-filterbar{padding:12px!important;}
body.lop-admin-portal-body .lop-admin-page-toolbar{padding:10px 12px!important;}

/* --------------------------------------------------------------------------
   Responsive behavior
   -------------------------------------------------------------------------- */
@media(max-width:980px){
  body.lopsp-public-body:not(.lop-admin-portal-body) :where(
    .lopsp-info-main,.lopsp-wrap,.lopsp-private-main,.lop-progress-main,.lop-companion-main,.lop-support-main,.lop-assessment-main,.lop-study-main,.lop-classroom-main,.lopsp-report-main
  ){width:min(calc(100% - 24px),var(--lop-ui-content-width));}
  body.lop-admin-portal-body .lop-admin-main{padding:20px 18px 42px!important;}
}
@media(max-width:760px){
  body.lopsp-public-body{--lop-ui-control-height:44px;}
  body.lopsp-public-body:not(.lop-admin-portal-body) :where(
    .lopsp-info-main,.lopsp-wrap,.lopsp-private-main,.lop-progress-main,.lop-companion-main,.lop-support-main,.lop-assessment-main,.lop-study-main,.lop-classroom-main,.lopsp-report-main
  ){
    width:min(calc(100% - 20px),var(--lop-ui-content-width));
    padding-top:16px;
    padding-bottom:38px;
  }
  body.lopsp-public-body:not(.lop-admin-portal-body) :where(
    .lopsp-info-main,.lopsp-private-main,.lop-progress-main,.lop-companion-main,.lop-support-main,.lop-assessment-main,.lop-study-main,.lop-classroom-main,.lopsp-report-main
  ) > :where(h1,.lop-page-title){font-size:24px;}
  body.lopsp-public-body:not(.lop-admin-portal-body) :where(
    .lopsp-section-head,.lop-progress-section-head,.lop-classroom-section-head,.lop-assessment-section-head,.lop-study-section-head,.lopsp-report-panel-head
  ){align-items:flex-start;flex-direction:column;}
  body.lopsp-public-body:not(.lop-admin-portal-body) :where(
    .lopsp-filterbar,.lop-filterbar,.lop-progress-toolbar,.lop-study-toolbar,.lop-class-toolbar,.lopsp-report-filter
  ){align-items:stretch;flex-direction:column;}
  body.lopsp-public-body:not(.lop-admin-portal-body) :where(
    .lopsp-filterbar,.lop-filterbar,.lop-progress-toolbar,.lop-study-toolbar,.lop-class-toolbar,.lopsp-report-filter
  )>*{width:100%;}
  body.lopsp-public-body:not(.lop-admin-portal-body) table :where(th,td){padding:10px 11px;}
  body.lop-admin-portal-body .lop-admin-main{padding:16px 12px 34px!important;}
  body.lop-admin-portal-body .lop-admin-main>h1{font-size:23px!important;}
  body.lop-admin-portal-body :where(.lop-admin-panel,.lop-admin-card,.lop-task-admin-card,.lop-admin-quick-card,.lop-admin-ops-card){border-radius:12px!important;}
}
@media(max-width:520px){
  body.lopsp-public-body:not(.lop-admin-portal-body) .lopsp-site-header:not(.lopsp-unified-site-header-v298) .lopsp-main-nav{width:calc(100% - 16px);min-height:58px;}
  body.lopsp-public-body:not(.lop-admin-portal-body) .lopsp-site-header:not(.lopsp-unified-site-header-v298) .lopsp-main-nav>a{min-height:36px;padding:7px 10px;font-size:12.5px;}
  body.lopsp-public-body:not(.lop-admin-portal-body) :where(.lopsp-info-section,.lopsp-panel,.lop-panel,.lop-progress-panel,.lop-assessment-panel,.lop-classroom-panel,.lop-class-section,.lopsp-report-panel){border-radius:14px!important;}
  body.lopsp-public-body:not(.lop-admin-portal-body) :where(.lopsp-info-card,.lopsp-card,.lop-card,.lop-progress-card,.lop-pathway-card,.lop-study-vocab-card){border-radius:12px!important;}
}
@media(prefers-reduced-motion:reduce){
  body.lopsp-public-body *,body.lopsp-public-body *::before,body.lopsp-public-body *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
  body.lopsp-public-body:not(.lop-admin-portal-body) :where(.lopsp-info-card,.lop-progress-card,.lop-pathway-card,.lop-study-vocab-card):hover,
  body.lop-admin-portal-body :where(.lop-admin-btn,.lop-admin-mini-btn):hover{transform:none!important;}
}
@media(forced-colors:active){
  body.lopsp-public-body :where(.lopsp-info-section,.lopsp-info-card,.lopsp-panel,.lop-progress-panel,.lop-admin-panel,.lop-admin-card){box-shadow:none!important;border:1px solid CanvasText!important;}
}

/* Preserve the portal's established on-demand drawer workspace and safe menu offset. */
body.lop-admin-fullscreen-body .lop-admin-portal{
  display:block!important;
  grid-template-columns:1fr!important;
}
body.lop-admin-fullscreen-body .lop-admin-main{
  width:100%!important;
  max-width:none!important;
  padding:64px 24px 48px!important;
}
body.lop-admin-fullscreen-body .lop-admin-side{
  width:280px!important;
  max-width:calc(100vw - 42px)!important;
  border-radius:0 18px 18px 0!important;
}
body.lop-admin-fullscreen-body .lop-admin-menu-toggle{
  min-height:40px!important;
  padding:8px 13px!important;
  border:1px solid #c7d8eb!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.97)!important;
  color:#17304f!important;
  font-weight:740!important;
  box-shadow:0 8px 22px rgba(10,59,103,.13)!important;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
body.lop-admin-fullscreen-body .lop-admin-menu-toggle-icon{
  background:var(--lop-ui-primary)!important;
}
@media(max-width:900px){
  body.lop-admin-fullscreen-body .lop-admin-main{padding:58px 12px 34px!important;}
  body.lop-admin-fullscreen-body .lop-admin-side{width:min(88vw,290px)!important;}
}

/* v2.8.627 - Học tập submenu: usage-first order with clear non-interactive groups. */
body.lopsp-public-body .lopsp-lop-dropdown > .lopsp-nav-submenu{
  width:min(370px,calc(100vw - 24px));
  max-height:min(72dvh,680px);
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  align-content:start;
}
body.lopsp-public-body .lopsp-nav-submenu-group{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:24px;
  margin:5px 4px -1px;
  padding:8px 7px 4px;
  border-top:1px solid #e7edf5;
  color:#6b7c93;
  font-size:10.5px;
  font-weight:850;
  line-height:1.2;
  letter-spacing:.075em;
  text-transform:uppercase;
  user-select:none;
}
body.lopsp-public-body .lopsp-nav-submenu-group:first-child{
  margin-top:0;
  padding-top:3px;
  border-top:0;
}
body.lopsp-public-body .lopsp-nav-submenu-group::after{
  content:"";
  flex:1 1 auto;
  height:1px;
  background:linear-gradient(90deg,#dbe5f0,transparent);
}
body.lopsp-public-body .lopsp-nav-submenu-group-frequent{color:#155e75;}
body.lopsp-public-body .lopsp-nav-submenu-group-tracking{color:#475569;}
body.lopsp-public-body .lopsp-nav-submenu-group-motivation{color:#8a4b08;}
@media(max-width:980px){
  body.lopsp-public-body .lopsp-lop-dropdown > .lopsp-nav-submenu{
    width:100%;
    max-height:min(64dvh,620px);
    padding:8px;
  }
  body.lopsp-public-body .lopsp-nav-submenu-group{
    margin-right:3px;
    margin-left:3px;
    padding-right:6px;
    padding-left:6px;
  }
}
body.lopsp-public-body .lopsp-nav-submenu-group-account{color:#64748b;}

/* --------------------------------------------------------------------------
   v2.8.628 - Navigation, landing CTA and Lesson/Quiz step accordion
   -------------------------------------------------------------------------- */

/* Logout must follow the exact geometry of the other top-level menu items. */
body.lopsp-public-body:not(.lop-admin-portal-body) .lopsp-member-main-nav-v442 > a.lopsp-nav-logout-action{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  width:auto!important;
  min-width:0!important;
  min-height:44px!important;
  height:auto!important;
  padding:9px 13px!important;
  border:1px solid #e1e8f1!important;
  border-radius:11px!important;
  background:#f8fafc!important;
  color:#52627a!important;
  font-size:14px!important;
  font-weight:720!important;
  line-height:1.2!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lopsp-member-main-nav-v442 > a.lopsp-nav-logout-action::before{
  content:"↪";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  line-height:1;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lopsp-member-main-nav-v442 > a.lopsp-nav-logout-action:hover,
body.lopsp-public-body:not(.lop-admin-portal-body) .lopsp-member-main-nav-v442 > a.lopsp-nav-logout-action:focus-visible{
  border-color:#f1a8b5!important;
  background:var(--lop-ui-danger-soft)!important;
  color:#b4233d!important;
  box-shadow:0 6px 14px rgba(207,54,81,.09)!important;
}

/* The low-friction start action appears immediately after the hero. */
body.lopsp-public-body:not(.lop-admin-portal-body) .lopsp-landing-start-cta-v628{
  margin-top:0!important;
  margin-bottom:18px!important;
  border:1px solid rgba(147,197,253,.28)!important;
  background:linear-gradient(135deg,#092f55 0%,#0f5fc3 58%,#2563eb 100%)!important;
  box-shadow:0 18px 42px rgba(9,47,85,.18)!important;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lopsp-landing-start-cta-v628 :where(h2,p){
  color:#fff!important;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lopsp-landing-start-cta-v628 h2{
  margin:8px 0 9px!important;
  font-size:clamp(23px,2.6vw,34px)!important;
  line-height:1.14!important;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lopsp-landing-start-cta-v628 p{
  max-width:760px;
  color:#dbeafe!important;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lopsp-landing-start-cta-v628 .lopsp-kicker{
  color:#dbeafe!important;
  background:rgba(255,255,255,.12)!important;
  border-color:rgba(255,255,255,.18)!important;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lopsp-landing-start-cta-v628 .lopsp-landing-free-note-v628{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  margin:8px 0 4px;
  padding:5px 10px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  background:rgba(255,255,255,.11);
  color:#fff;
  font-size:12px;
  font-weight:750;
  line-height:1.3;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lopsp-landing-start-cta-v628 .lopsp-info-cta .secondary{
  border-color:rgba(255,255,255,.72)!important;
  background:#fff!important;
  color:#0a4ba9!important;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lopsp-landing-start-cta-v628 .lopsp-info-cta .secondary:hover{
  background:#edf5ff!important;
  color:#073b76!important;
}

/* One clean card per learning step; the page shell itself is no longer another box. */
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-step-layout-v628.lopsp-info-section{
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-step-layout-v628 > .lop-admin-breadcrumb,
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-step-layout-v628 > .lop-editor-frontend-bar{
  margin-inline:2px!important;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-step-layout-v628 .lop-study-lesson-goal-flow{
  display:none!important;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-flow-step-wrap{
  display:block;
  margin:0 0 14px;
  border:1px solid var(--lop-ui-border)!important;
  border-radius:16px!important;
  background:var(--lop-ui-surface)!important;
  box-shadow:var(--lop-ui-shadow-xs)!important;
  overflow:clip;
  scroll-margin-top:104px;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-flow-step-wrap[open]{
  border-color:#bfd4ee!important;
  box-shadow:0 10px 28px rgba(10,59,103,.075)!important;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-flow-step-summary{
  display:grid!important;
  grid-template-columns:46px minmax(0,1fr) 24px;
  align-items:center;
  gap:12px;
  min-height:72px;
  margin:0!important;
  padding:11px 16px!important;
  list-style:none!important;
  cursor:pointer;
  user-select:none;
  background:linear-gradient(180deg,#fff,#f8fbff)!important;
  transition:background .16s ease,border-color .16s ease;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-flow-step-summary::-webkit-details-marker{display:none;}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-flow-step-summary:hover{
  background:#f3f8ff!important;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-flow-step-summary:focus-visible{
  outline:3px solid rgba(23,105,224,.2);
  outline-offset:-3px;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-flow-step-wrap[open] > .lop-study-flow-step-summary{
  border-bottom:1px solid var(--lop-ui-border)!important;
  background:#f5f9ff!important;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-flow-step-no{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:13px;
  background:var(--lop-ui-primary-soft);
  color:var(--lop-ui-primary-strong);
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-flow-step-no i{
  position:absolute;
  top:-5px;
  left:-5px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border:2px solid #fff;
  border-radius:999px;
  background:var(--lop-ui-primary);
  color:#fff;
  font-size:10px;
  font-style:normal;
  font-weight:850;
  box-shadow:0 3px 8px rgba(23,105,224,.22);
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-flow-step-no b{
  font-size:21px;
  line-height:1;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-flow-step-summary-copy{
  display:flex;
  flex-direction:column;
  min-width:0;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-flow-step-summary-copy small{
  margin:0 0 1px;
  color:var(--lop-ui-primary-strong);
  font-size:10.5px;
  font-weight:850;
  line-height:1.2;
  letter-spacing:.06em;
  text-transform:uppercase;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-flow-step-summary-copy strong{
  color:var(--lop-ui-text)!important;
  font-size:17px;
  font-weight:790;
  line-height:1.25;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-flow-step-summary-copy em{
  margin-top:2px;
  overflow:hidden;
  color:var(--lop-ui-muted);
  font-size:12.5px;
  font-style:normal;
  font-weight:560;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-flow-step-chevron{
  position:relative;
  width:22px;
  height:22px;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-flow-step-chevron::before,
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-flow-step-chevron::after{
  content:"";
  position:absolute;
  top:10px;
  left:5px;
  width:12px;
  height:2px;
  border-radius:99px;
  background:#52627a;
  transition:transform .16s ease;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-flow-step-chevron::after{transform:rotate(90deg);}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-flow-step-wrap[open] .lop-study-flow-step-chevron::after{transform:rotate(0);}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-flow-step-body{
  padding:16px 18px 18px;
  background:#fff;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-flow-step-body > :first-child{margin-top:0!important;}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-flow-step-body > :last-child{margin-bottom:0!important;}

/* Remove duplicated outer cards inside the new step card, while preserving question/unit cards. */
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-flow-step-body > :where(
  .lop-study-step-content-section,
  .lop-study-lesson-hero,
  .lop-study-quiz-hero,
  .lop-study-report-box,
  .lop-study-quiz,
  .lop-study-learning-flow-block
){
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-step-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(220px,34%);
  align-items:center;
  gap:22px;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-step-one-goal-content{
  display:grid;
  grid-template-columns:minmax(150px,190px) minmax(0,1fr);
  gap:15px;
  margin-top:16px;
  padding:14px 15px;
  border:1px solid #dce8f5;
  border-radius:12px;
  background:#f8fbff;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-step-one-goal-label{
  display:flex;
  align-items:center;
  gap:8px;
  color:#173c69;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-step-one-goal-label span{font-size:19px;}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-step-one-goal-label strong{font-size:14px;font-weight:790;}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-step-one-goal-copy :where(p,ul,ol){margin:0 0 8px;}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-step-one-goal-copy > :last-child{margin-bottom:0;}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-flow-step-body .lop-study-quiz-step2-card{
  border-radius:12px!important;
  box-shadow:none!important;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-step-empty{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:16px;
  border:1px dashed #bfd0e4;
  border-radius:12px;
  background:#f8fafc;
  color:var(--lop-ui-muted);
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-step-empty > span{font-size:24px;line-height:1;}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-step-empty strong{display:block;margin-bottom:3px;color:var(--lop-ui-text);font-size:14px;}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-step-empty p{margin:0;}

@media(max-width:980px){
  body.lopsp-public-body:not(.lop-admin-portal-body) .lopsp-member-main-nav-v442 > a.lopsp-nav-logout-action{
    justify-content:flex-start!important;
    width:100%!important;
    min-width:100%!important;
    min-height:44px!important;
    padding:10px 14px!important;
  }
  body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-flow-step-wrap{scroll-margin-top:88px;}
}
@media(max-width:720px){
  body.lopsp-public-body:not(.lop-admin-portal-body) .lopsp-landing-start-cta-v628{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:16px!important;
    margin-inline:0!important;
    padding:18px!important;
  }
  body.lopsp-public-body:not(.lop-admin-portal-body) .lopsp-landing-start-cta-v628 .lopsp-info-cta{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
  }
  body.lopsp-public-body:not(.lop-admin-portal-body) .lopsp-landing-start-cta-v628 .lopsp-info-cta > a{width:100%!important;}
  body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-flow-step-summary{
    grid-template-columns:42px minmax(0,1fr) 22px;
    min-height:66px;
    gap:10px;
    padding:10px 12px!important;
  }
  body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-flow-step-no{width:40px;height:40px;border-radius:12px;}
  body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-flow-step-summary-copy strong{font-size:15px;}
  body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-flow-step-summary-copy em{overflow:visible;font-size:11.5px;text-overflow:clip;white-space:normal;}
  body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-flow-step-body{padding:13px 12px 15px;}
  body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-step-hero{grid-template-columns:1fr;gap:14px;}
  body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-step-one-goal-content{grid-template-columns:1fr;gap:8px;padding:12px;}
}
@media(prefers-reduced-motion:reduce){
  body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-flow-step-chevron::before,
  body.lopsp-public-body:not(.lop-admin-portal-body) .lop-study-flow-step-chevron::after{transition:none!important;}
}


/* v2.8.629 - Keep all Lesson accordion steps flush-left and equal-width.
 * Some themes add inline padding/width to <details>/<summary>; reset only the
 * Lesson flow wrappers so Step 2/3 cannot appear indented. UI-only. */
html body.lopsp-public-body:not(.lop-admin-portal-body)
  .lop-study-lesson-detail:not(.lop-study-quiz-detail).lop-study-step-layout-v628
  > details.lop-study-flow-step-wrap.is-lesson-flow-step{
  position:relative!important;
  left:0!important;
  right:auto!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:0!important;
  padding-right:0!important;
  box-sizing:border-box!important;
  align-self:stretch!important;
  justify-self:stretch!important;
  transform:none!important;
}
html body.lopsp-public-body:not(.lop-admin-portal-body)
  .lop-study-lesson-detail:not(.lop-study-quiz-detail).lop-study-step-layout-v628
  > details.lop-study-flow-step-wrap.is-lesson-flow-step
  > summary.lop-study-flow-step-summary{
  position:relative!important;
  left:0!important;
  right:auto!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:16px!important;
  padding-right:16px!important;
  box-sizing:border-box!important;
  transform:none!important;
}
@media(max-width:720px){
  html body.lopsp-public-body:not(.lop-admin-portal-body)
    .lop-study-lesson-detail:not(.lop-study-quiz-detail).lop-study-step-layout-v628
    > details.lop-study-flow-step-wrap.is-lesson-flow-step
    > summary.lop-study-flow-step-summary{
    padding-left:12px!important;
    padding-right:12px!important;
  }
}


/* v2.8.630 - Fix the actual Lesson Step 2/3 indentation source.
 * Legacy rules target these IDs directly and add padding to the accordion
 * <details> wrappers. Reset those exact wrappers, not only generic classes. */
html body.lopsp-public-body.lop-support-body:not(.lop-admin-portal-body)
  .lop-study-lesson-detail:not(.lop-study-quiz-detail).lop-study-step-layout-v628
  > #lop-lesson-study-start.lop-study-flow-step-wrap.is-lesson-flow-step,
html body.lopsp-public-body.lop-support-body:not(.lop-admin-portal-body)
  .lop-study-lesson-detail:not(.lop-study-quiz-detail).lop-study-step-layout-v628
  > #lop-lesson-quiz.lop-study-flow-step-wrap.is-lesson-flow-step{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  padding:0!important;
  border-radius:16px!important;
  box-sizing:border-box!important;
  transform:none!important;
}
html body.lopsp-public-body.lop-support-body:not(.lop-admin-portal-body)
  .lop-study-lesson-detail:not(.lop-study-quiz-detail).lop-study-step-layout-v628
  > #lop-lesson-study-start.lop-study-flow-step-wrap.is-lesson-flow-step
  > summary.lop-study-flow-step-summary,
html body.lopsp-public-body.lop-support-body:not(.lop-admin-portal-body)
  .lop-study-lesson-detail:not(.lop-study-quiz-detail).lop-study-step-layout-v628
  > #lop-lesson-quiz.lop-study-flow-step-wrap.is-lesson-flow-step
  > summary.lop-study-flow-step-summary{
  width:100%!important;
  margin:0!important;
  box-sizing:border-box!important;
}

/* v2.8.634 - Quiz step alignment and responsive Progress gradebook.
 * UI-only: normalize the standalone Quiz accordion wrapper that still inherits
 * legacy padding from #lop-lesson-quiz, and keep the mobile gradebook readable
 * without sticky columns covering score cells. */
html body.lopsp-public-body.lop-support-body:not(.lop-admin-portal-body)
  .lop-study-quiz-detail.lop-study-step-layout-v628
  > details.lop-study-flow-step-wrap.is-quiz-flow-step{
  position:relative!important;
  left:0!important;
  right:auto!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  padding:0!important;
  box-sizing:border-box!important;
  align-self:stretch!important;
  justify-self:stretch!important;
  transform:none!important;
}
html body.lopsp-public-body.lop-support-body:not(.lop-admin-portal-body)
  .lop-study-quiz-detail.lop-study-step-layout-v628
  > details.lop-study-flow-step-wrap.is-quiz-flow-step
  > summary.lop-study-flow-step-summary{
  position:relative!important;
  left:0!important;
  right:auto!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  box-sizing:border-box!important;
  transform:none!important;
}

body.lopsp-public-body:not(.lop-admin-portal-body) .lop-progress-gradebook-scroll{
  position:relative;
  width:100%;
  max-width:100%;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  isolation:isolate;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-progress-gradebook-table{
  width:max-content!important;
  min-width:100%!important;
  table-layout:auto!important;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-progress-gradebook-table :where(th,td){
  box-sizing:border-box;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-progress-gradebook-table .is-subject{
  width:220px!important;
  min-width:220px!important;
  max-width:220px!important;
  overflow:hidden;
  text-align:left!important;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-progress-gradebook-table .lop-progress-grade-subject{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden;
  text-align:left!important;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-progress-gradebook-table .lop-progress-grade-subject > span:last-child{
  display:block;
  min-width:0;
  max-width:100%;
  overflow:hidden;
  text-align:left;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-progress-gradebook-table .lop-progress-grade-subject strong{
  display:block;
  max-width:100%;
  overflow-wrap:anywhere;
  white-space:normal;
  text-align:left;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-progress-gradebook-table .is-average{
  width:128px;
  min-width:128px!important;
  max-width:128px;
  text-align:center!important;
}

/* On compact screens only the subject column remains frozen. Keeping the
 * average column sticky from the opposite side leaves no room for score cells
 * and visually covers them, so it becomes a normal final column. */
@media(max-width:980px){
  body.lopsp-public-body:not(.lop-admin-portal-body) .lop-progress-gradebook-table .is-average{
    position:static!important;
    right:auto!important;
    z-index:1!important;
  }
  body.lopsp-public-body:not(.lop-admin-portal-body) .lop-progress-gradebook-table thead .is-average{
    position:sticky!important;
    top:0!important;
    z-index:4!important;
  }
}
@media(max-width:720px){
  html body.lopsp-public-body.lop-support-body:not(.lop-admin-portal-body)
    .lop-study-quiz-detail.lop-study-step-layout-v628
    > details.lop-study-flow-step-wrap.is-quiz-flow-step
    > summary.lop-study-flow-step-summary{
    padding-left:12px!important;
    padding-right:12px!important;
  }
  body.lopsp-public-body:not(.lop-admin-portal-body) .lop-progress-gradebook{
    padding:12px!important;
  }
  body.lopsp-public-body:not(.lop-admin-portal-body) .lop-progress-gradebook-scroll{
    border-radius:12px;
    scrollbar-gutter:auto;
  }
  body.lopsp-public-body:not(.lop-admin-portal-body) .lop-progress-gradebook-table .is-subject{
    width:154px!important;
    min-width:154px!important;
    max-width:154px!important;
    padding:7px!important;
  }
  body.lopsp-public-body:not(.lop-admin-portal-body) .lop-progress-gradebook-table :where(th,td):not(.is-subject):not(.is-average){
    width:104px!important;
    min-width:104px!important;
    max-width:104px!important;
    padding:6px!important;
  }
  body.lopsp-public-body:not(.lop-admin-portal-body) .lop-progress-gradebook-table .is-average{
    width:108px!important;
    min-width:108px!important;
    max-width:108px!important;
    padding:6px!important;
  }
  body.lopsp-public-body:not(.lop-admin-portal-body) .lop-progress-gradebook-table .is-subject .icon{
    width:34px!important;
    height:34px!important;
    flex-basis:34px!important;
    border-radius:10px!important;
    font-size:17px!important;
  }
  body.lopsp-public-body:not(.lop-admin-portal-body) .lop-progress-gradebook-table .lop-progress-grade-subject{
    gap:8px!important;
  }
  body.lopsp-public-body:not(.lop-admin-portal-body) .lop-progress-gradebook-table .lop-progress-grade-subject strong{
    font-size:13px!important;
    line-height:1.25!important;
  }
  body.lopsp-public-body:not(.lop-admin-portal-body) .lop-progress-gradebook-table .lop-progress-grade-subject small{
    font-size:9px!important;
  }
  body.lopsp-public-body:not(.lop-admin-portal-body) .lop-progress-grade-cell{
    min-height:62px;
    padding:5px!important;
  }
  body.lopsp-public-body:not(.lop-admin-portal-body) .lop-progress-grade-cell em{
    max-width:88px!important;
  }
}

/* v2.8.635 - Exact-ID fix for standalone Quiz Step 3 alignment.
 * Legacy compact-quiz rules use #lop-lesson-quiz and therefore outrank the
 * class-only v2.8.634 reset even though both are !important. Match the exact
 * ID on the standalone Quiz route so the open Step 3 summary remains flush
 * with Steps 1, 2 and 4 on desktop and mobile. UI-only. */
html body.lopsp-public-body.lop-support-body:not(.lop-admin-portal-body)
  .lop-study-quiz-detail.lop-study-step-layout-v628
  > #lop-lesson-quiz.lop-study-flow-step-wrap.is-quiz-flow-step{
  position:relative!important;
  left:0!important;
  right:auto!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0 0 14px!important;
  padding:0!important;
  box-sizing:border-box!important;
  align-self:stretch!important;
  justify-self:stretch!important;
  transform:none!important;
}
html body.lopsp-public-body.lop-support-body:not(.lop-admin-portal-body)
  .lop-study-quiz-detail.lop-study-step-layout-v628
  > #lop-lesson-quiz.lop-study-flow-step-wrap.is-quiz-flow-step
  > summary.lop-study-flow-step-summary{
  position:relative!important;
  left:0!important;
  right:auto!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  box-sizing:border-box!important;
  transform:none!important;
}


/* v2.8.683 — keep the day-grouped Progress overview bounded on wide and compact screens. */
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-progress-gradebook-table.is-day-grouped td.lop-progress-grade-day-cell{
  width:150px!important;
  min-width:150px!important;
  max-width:150px!important;
  height:auto!important;
  vertical-align:top!important;
}
@media(max-width:720px){
  body.lopsp-public-body:not(.lop-admin-portal-body) .lop-progress-gradebook-table.is-day-grouped td.lop-progress-grade-day-cell{
    width:118px!important;
    min-width:118px!important;
    max-width:118px!important;
  }
}


/* v2.8.731 — shared frontend typography contract.
 * Keep operational microcopy/KPI sizes component-owned; normalize the page-level reading hierarchy only.
 */
body.lopsp-public-body{
  --lop-ui-font-xs:12px;
  --lop-ui-font-sm:14px;
  --lop-ui-font-body:16px;
  --lop-ui-font-h3:18px;
  --lop-ui-font-h2:22px;
  --lop-ui-font-hero:30px;
  font-size:var(--lop-ui-font-body);
  line-height:1.6;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body.lopsp-public-body:not(.lop-admin-portal-body) :where(
  .lopsp-info-main,.lopsp-private-main,.lop-progress-main,.lop-companion-main,
  .lop-support-main,.lop-assessment-main,.lop-study-main,.lop-classroom-main,.lopsp-report-main
) > :where(h1,.lop-page-title){
  font-size:clamp(26px,2.4vw,var(--lop-ui-font-hero));
  line-height:1.2;
}
body.lopsp-public-body:not(.lop-admin-portal-body) :where(
  .lopsp-section-head,.lop-progress-section-head,.lop-classroom-section-head,
  .lop-assessment-section-head,.lop-study-section-head,.lopsp-report-panel-head
) h2{font-size:var(--lop-ui-font-h2);line-height:1.3;}
body.lopsp-public-body:not(.lop-admin-portal-body) :where(
  .lopsp-section-head,.lop-progress-section-head,.lop-classroom-section-head,
  .lop-assessment-section-head,.lop-study-section-head,.lopsp-report-panel-head
) h3{font-size:var(--lop-ui-font-h3);line-height:1.35;}

/* v2.8.777 — Progress gradebook: keep the frozen subject identity visible
 * without an opaque sticky cell covering scores while horizontally scrolling. */
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-progress-gradebook-table tbody th.is-subject,
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-progress-gradebook-table tbody tr:nth-child(even) th.is-subject,
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-progress-gradebook-table tbody tr:hover th.is-subject{
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-progress-gradebook-table tbody .lop-progress-grade-subject{
  background:transparent!important;
}
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-progress-gradebook-table tbody .lop-progress-grade-subject strong,
body.lopsp-public-body:not(.lop-admin-portal-body) .lop-progress-gradebook-table tbody .lop-progress-grade-subject small{
  text-shadow:0 1px 0 #fff,0 0 4px rgba(255,255,255,.96),0 0 8px rgba(255,255,255,.88);
}