/* LOP Streak React Experience Layer — presentation only. Activated only after React mounts. */
html.lop-react-app-mounted{--lop-react-radius:18px;--lop-react-radius-sm:12px;--lop-react-border:rgba(148,163,184,.28);--lop-react-shadow:0 12px 34px rgba(15,23,42,.07);--lop-react-shadow-hover:0 16px 40px rgba(15,23,42,.10);--lop-react-focus:0 0 0 3px rgba(59,130,246,.20);--lop-react-transition:160ms cubic-bezier(.2,.7,.2,1)}
html.lop-react-app-mounted body[data-lop-react-surface]{overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html.lop-react-app-mounted body[data-lop-react-surface] *,html.lop-react-app-mounted body[data-lop-react-surface] *::before,html.lop-react-app-mounted body[data-lop-react-surface] *::after{box-sizing:border-box}
html.lop-react-app-mounted body[data-lop-react-surface] :where(a,button,input,select,textarea,summary,[role="button"]){transition:border-color var(--lop-react-transition),background-color var(--lop-react-transition),box-shadow var(--lop-react-transition),transform var(--lop-react-transition),opacity var(--lop-react-transition)}
html.lop-react-app-mounted body[data-lop-react-surface] :where(a,button,input,select,textarea,summary,[role="button"]):focus-visible{outline:0!important;box-shadow:var(--lop-react-focus)!important}
html.lop-react-app-mounted body[data-lop-react-surface] :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea){border-radius:var(--lop-react-radius-sm)}
html.lop-react-app-mounted body[data-lop-react-surface] :where(button,.button,.lop-ui-btn,.lop-admin-btn,.lop-admin-mini-btn,.lopcw-btn,.loptw-btn,.lop-class-btn){border-radius:12px;touch-action:manipulation}
html.lop-react-app-mounted body[data-lop-react-surface] :where(button,.button,.lop-ui-btn,.lop-admin-btn,.lop-admin-mini-btn,.lopcw-btn,.loptw-btn,.lop-class-btn):active{transform:translateY(1px)}
html.lop-react-app-mounted body[data-lop-react-surface] [data-lop-react-card="1"]{border-radius:var(--lop-react-radius);box-shadow:var(--lop-react-shadow)}
html.lop-react-app-mounted body[data-lop-react-surface] [data-lop-react-card="1"]:hover{box-shadow:var(--lop-react-shadow-hover)}
html.lop-react-app-mounted body[data-lop-react-surface] [data-lop-react-table="1"]{max-width:100%;font-variant-numeric:tabular-nums}
html.lop-react-app-mounted body[data-lop-react-surface] [data-lop-react-table="1"] :where(th,td){vertical-align:middle}
html.lop-react-app-mounted body[data-lop-react-surface] :where(img,video,canvas,svg){max-width:100%}
html.lop-react-app-mounted body[data-lop-react-surface] :where(.lop-admin-content-shell,.lop-admin-main,.lopsp-info-main,.lopcw-main,.loptw-main,.lop-practice-shell,.lop-vocab-main){min-width:0;max-width:100%}
html.lop-react-app-mounted body[data-lop-react-surface] :where(.lop-admin-table-wrap,.lopsp-table-wrap,.lopcw-table-wrap,.loptw-table-wrap){max-width:100%;overscroll-behavior-inline:contain}

/* Workspace surfaces */
html.lop-react-surface-workspace body[data-lop-react-surface="workspace"] :where(.lopsp-info-main,.lopcw-main,.loptw-main){scroll-margin-top:84px}
html.lop-react-surface-workspace body[data-lop-react-surface="workspace"] :where(.lopsp-page-head,.lopcw-page-intro,.loptw-page-intro){border-radius:var(--lop-react-radius)}
html.lop-react-surface-workspace body[data-lop-react-surface="workspace"] :where(.lopsp-kpi,.lopcw-stats>article,.loptw-stats>article){box-shadow:0 8px 26px rgba(15,23,42,.055)}

/* Admin surfaces */
html.lop-react-surface-admin body[data-lop-react-surface="admin"] .lop-admin-workarea{min-width:0}
html.lop-react-surface-admin body[data-lop-react-surface="admin"] .lop-admin-main{scroll-behavior:smooth}
html.lop-react-surface-admin body[data-lop-react-surface="admin"] :where(.lop-admin-filter-actions,.lop-admin-actions,.lop-admin-row-actions){gap:8px}
html.lop-react-surface-admin body[data-lop-react-surface="admin"] :where(.lop-admin-panel,.lop-admin-card){border-color:var(--lop-react-border)}
html.lop-react-surface-admin body[data-lop-react-surface="admin"] .lop-admin-table tbody tr{transition:background-color var(--lop-react-transition),box-shadow var(--lop-react-transition)}

/* Learning surfaces */
html.lop-react-surface-learning body[data-lop-react-surface="learning"] :where(.lop-study-lesson-detail,.lop-study-quiz-runner,.lop-vocab-main,.lop-practice-shell){min-width:0}
html.lop-react-surface-learning body[data-lop-react-surface="learning"] :where(.lop-study-vocab-card,.lop-vocab-card,.lop-practice-panel,.lop-practice-public-stage-card){border-radius:var(--lop-react-radius);box-shadow:var(--lop-react-shadow)}
html.lop-react-surface-learning body[data-lop-react-surface="learning"] :where(.lop-vocab-card,.lop-practice-public-stage-card):hover{transform:translateY(-1px);box-shadow:var(--lop-react-shadow-hover)}

/* Public/member surfaces */
html.lop-react-surface-public body[data-lop-react-surface="public"] :where(.lopsp-info-main,.lopsp-contenthub-body,.lop-wj-public-main){min-width:0}

/* React-owned feedback layer. */
#lop-react-global-root{position:relative;z-index:2147483000}
.lop-react-experience{pointer-events:none;position:fixed;inset:0;z-index:2147483000}
.lop-react-route-progress{position:absolute;left:0;right:0;top:0;height:3px;overflow:hidden;opacity:0;transition:opacity .12s ease}
.lop-react-route-progress.is-active{opacity:1}
.lop-react-route-progress span{display:block;width:38%;height:100%;background:currentColor;color:#2563eb;transform:translateX(-120%);animation:lopReactRoute 1.05s ease-in-out infinite}
@keyframes lopReactRoute{0%{transform:translateX(-120%)}60%{transform:translateX(170%)}100%{transform:translateX(280%)}}
.lop-react-toast,.lop-react-offline{pointer-events:auto;position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));max-width:min(420px,calc(100vw - 32px));padding:11px 14px;border:1px solid rgba(255,255,255,.2);border-radius:14px;background:#0f172a;color:#fff;box-shadow:0 18px 44px rgba(15,23,42,.24);font:700 13px/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.lop-react-offline{bottom:auto;top:max(12px,env(safe-area-inset-top));background:#7c2d12}

@media (max-width:767px){
 html.lop-react-app-mounted body[data-lop-react-surface] :where(button,.button,.lop-ui-btn,.lop-admin-btn,.lop-admin-mini-btn,.lopcw-btn,.loptw-btn,.lop-class-btn,input:not([type="checkbox"]):not([type="radio"]),select){min-height:42px}
 html.lop-react-app-mounted body[data-lop-react-surface] :where(.lop-admin-form-row,.lop-admin-filter-actions,.lop-admin-actions){min-width:0}
 .lop-react-toast{left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));max-width:none}
}
@media (prefers-reduced-motion:reduce){html.lop-react-app-mounted body[data-lop-react-surface] *,html.lop-react-app-mounted body[data-lop-react-surface] *::before,html.lop-react-app-mounted body[data-lop-react-surface] *::after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}