:root {
      --xelra-bg:#0f0f0f; --xelra-card:#1a1a1a; --xelra-text:#e6e6e6; --xelra-muted:#a1a1a1;
    }
    body{background:var(--xelra-bg); color:var(--xelra-text)}
    body .text-muted{color:var(--xelra-muted)!important}
    .navbar{background:#111}
    .navbar-brand,.nav-link{color:var(--xelra-text)!important}

    .alert-arl{background:rgba(19,33,56,.85);color:#d5e6ff;border:1px solid rgba(49,86,140,.65);border-radius:12px;font-size:.95rem}
    .alert-arl strong{color:#fff}
    .alert-arl em{color:#f8f9ff;font-style:normal;font-weight:600}

    /* Primary recommendation */
    .layout-main{margin-top:8vh}
    .board{display:flex;flex-direction:column;align-items:center}

    /* New: Split Panel Layout */
    .app-layout{display:flex;min-height:calc(100vh - 56px);background:var(--xelra-bg)}

    /* OLM Panel (Right Side) */
    .olm-panel{width:360px;min-width:360px;background:#0d0d0d;border-left:1px solid #2a2a2a;overflow-y:auto;position:sticky;top:56px;height:calc(100vh - 56px)}
    .olm-panel-content{padding:1.5rem}

    /* Regulatory Mode Card (Section 4.6) */
    .regulatory-mode-card{background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid rgba(76,110,245,.35);border-radius:12px;padding:1.25rem}
    .mode-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;padding-bottom:0.75rem;border-bottom:1px solid rgba(255,255,255,.1)}
    .mode-prefix{font-size:0.85rem;font-weight:500;color:#6c757d;text-transform:uppercase;letter-spacing:0.08em}
    .mode-label{font-size:1.1rem;font-weight:600;color:#9ec5fe;text-transform:uppercase;letter-spacing:0.05em;transition:color 0.3s ease}
    .mode-label.mode-transition{animation:modeLabelPulse 1.5s ease}
    @keyframes modeLabelPulse{0%{color:#9ec5fe;transform:scale(1)}20%{color:#fff;transform:scale(1.08);text-shadow:0 0 12px rgba(158,197,255,.6)}60%{color:#a5d6ff;transform:scale(1.02)}100%{color:#9ec5fe;transform:scale(1)}}
    .mode-header{cursor:pointer;display:flex;align-items:center;justify-content:space-between}
    .mode-header:hover .mode-label{color:#fff}
    .mode-toggle-icon{color:#6c757d;transition:transform .2s ease}
    .mode-header[aria-expanded="true"] .mode-toggle-icon{transform:rotate(180deg)}

    /* System activity indicator */
    .system-activity{padding:.5rem .75rem;background:rgba(255,255,255,.03);border-radius:8px;border:1px solid rgba(255,255,255,.06)}
    .activity-dot{width:8px;height:8px;background:#28a745;border-radius:50%;animation:activityPulse 2s ease-in-out infinite}
    @keyframes activityPulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(40,167,69,.4)}50%{opacity:.7;box-shadow:0 0 0 4px rgba(40,167,69,0)}}
    /* Activity pulse flash when new activity is tracked */
    .activity-dot.activity-pulse{animation:activityFlash .6s ease-out;background:#00ff6a}
    @keyframes activityFlash{0%{transform:scale(1.8);box-shadow:0 0 12px rgba(0,255,106,.8)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(0,255,106,0)}}
    /* Activity text typing/update effect */
    .activity-typing{animation:activityFadeIn .3s ease-out}
    @keyframes activityFadeIn{0%{opacity:.5;transform:translateY(-2px)}100%{opacity:1;transform:translateY(0)}}
    .system-insight{font-size:.85rem;color:#a5d6ff;padding:.5rem;background:rgba(158,197,255,.08);border-radius:6px;border-left:3px solid #9ec5fe}
    /* Navbar activity indicator */
    .nav-activity{padding:.25rem .5rem;background:rgba(255,255,255,.05);border-radius:6px}
    .mode-info-icon{color:rgba(158,197,255,.5);font-size:0.9rem;cursor:help}
    .mode-body{color:#e6eaf8}
    .mode-section{line-height:1.5}
    .mode-section-title{font-size:0.7rem;text-transform:uppercase;letter-spacing:0.1em;color:#9ec5fe;margin-bottom:0.35rem;font-weight:600}
    .mode-section-text{font-size:0.9rem;color:#dce2f7;margin:0}

    /* Focus Card */
    .focus-card{background:#131313;border:1px solid #2a2a2a;border-radius:10px;padding:1rem}
    .focus-card .card-title{font-size:0.75rem;text-transform:uppercase;letter-spacing:0.08em;color:#a1a1a1;margin-bottom:0.75rem}
    .focus-card .focus-body{color:#e6e6e6}
    .goal-pill-small{display:inline-flex;align-items:center;gap:0.25rem;padding:0.2rem 0.6rem;border-radius:999px;border:1px solid rgba(158,197,255,.4);background:rgba(158,197,255,.08);color:#d9e5ff;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.05em;transition:all .18s ease}
    .goal-pill-small:hover{background:rgba(158,197,255,.18);border-color:rgba(158,197,255,.6);color:#fff}
    .goal-pill-small i{font-size:0.75rem}

    /* OLM Actions */
    .olm-actions{margin-top:1.5rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.06)}

    /* Learning Area (Left Side) */
    .learning-area{flex:1;overflow:hidden;padding:1.5rem;display:flex;flex-direction:column}
    .learning-header{margin-bottom:1rem;flex-shrink:0}
    .board-grid{display:flex;flex-direction:column;gap:1rem;width:100%;flex:1}
    .recommendation-card{width:100%;max-width:100%;background:linear-gradient(135deg,#1c1c1c,#161b2e);color:#f3f6ff;border:1px solid rgba(80,124,206,.45);border-radius:18px;box-shadow:0 16px 48px rgba(0,0,0,.45);transition:transform .18s ease, box-shadow .18s ease;padding:0;overflow:hidden}
    .recommendation-card:hover{transform:scale(1.01);box-shadow:0 28px 70px rgba(0,0,0,.55);z-index:2}
    .recommendation-card .card-header{background:transparent;border:0;padding:1.25rem 1.25rem .75rem}
    .recommendation-card .card-body{color:inherit;padding:0 1.25rem 1.5rem}
    .recommendation-card .card-title{color:#f8f9ff;margin-bottom:.25rem;font-size:clamp(1.2rem,2.5vw,1.5rem)}
    .recommendation-card .card-meta{font-size:.85rem;color:rgba(235,240,255,.7)}
    .recommendation-card .control-bar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:flex-end}
    .recommendation-card .rating-row{display:flex;flex-wrap:wrap;align-items:center;gap:.65rem;margin-top:.35rem}
    .recommendation-card .rating-row .stars{margin-right:.5rem}
    .recommendation-card .text-muted{color:rgba(235,240,255,.75)!important}
    .recommendation-card .btn{border-radius:999px;padding:0.4rem 1.1rem}
    .recommendation-card .btn-outline-light{border-color:rgba(255,255,255,.35);color:#f3f6ff}
    .recommendation-card .btn-outline-light:hover{background:rgba(255,255,255,.12);color:#fff}
    .recommendation-card .btn-outline-secondary{border-color:rgba(158,165,190,.6);color:#e6eaf8;background:rgba(255,255,255,.05)}
    .recommendation-card .btn-outline-secondary:hover{background:rgba(158,165,190,.18);color:#fff;border-color:rgba(158,165,190,.9)}
    .recommendation-card .btn-primary{background:#4c6ef5;border:none}
    .resource-frame{border-radius:16px;overflow:hidden;background:#000;height:calc(100vh - 280px);margin-top:.5rem}
    .resource-frame iframe{width:100%;height:100%;border:0;display:block;background:#000}
    .resource-frame[data-state="fallback"]{display:flex;align-items:center;justify-content:center;padding:3rem;text-align:center;color:rgba(235,240,255,.7);font-size:1rem}

    /* Login sheet */
    .login-sheet{max-width:520px;background:#fff;color:#111;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.35);transition:max-width .3s ease}
    .login-sheet.consent-active{max-width:900px;max-height:90vh;overflow-y:auto}
    .consent-iframe-wrapper{border:1px solid #dee2e6;border-radius:8px;overflow:hidden;background:#f8f9fa}
    .consent-iframe{width:100%;height:450px;border:none}
    @media (max-height:750px){.consent-iframe{height:300px}}

    .otp-wrap{display:flex;justify-content:space-between;gap:.5rem}
    .otp-input{text-align:center;font-size:1.5rem;width:3rem;height:3rem}
    .otp-input::-webkit-outer-spin-button,
    .otp-input::-webkit-inner-spin-button{appearance:none;margin:0}
    .otp-input[type=number]{-moz-appearance:textfield}

    /* Celebration state */
    .complete-wrap{min-height:55vh;display:flex;align-items:center;justify-content:center;text-align:center}
    .complete-title{font-size:clamp(2rem,5vw,3.25rem);line-height:1.15}
    .complete-sub{opacity:.8}

    .confetti{position:fixed;top:-10vh;z-index:1400;will-change:transform,opacity;animation:confettiFall 5.5s linear forwards;pointer-events:none}
    /* Same-size coloured confetti pieces */
    .confetti-piece{display:inline-block;width:10px;height:10px;border-radius:2px;background:rgba(255,255,255,.8)}

    @keyframes confettiFall{
      0%{transform:translateY(-10vh) rotate(0deg);opacity:1}
      100%{transform:translateY(110vh) rotate(540deg);opacity:.85}
    }
    @media (prefers-reduced-motion: reduce){
      .confetti{animation:none;display:none}
    }

    /* Big toast overlay */
    .big-toast-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1300;background:rgba(0,0,0,.35);backdrop-filter:blur(2px)}
    .big-toast{background:#1a1a1a;color:#fff;border:1px solid #333;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.5);padding:1.25rem 1.5rem;max-width:560px;width:calc(100% - 2rem);text-align:center;font-size:clamp(1.05rem,2.2vw,1.4rem)}

    /* Add: full-screen loading overlay */
    .loading-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1600;background:rgba(0,0,0,.45);backdrop-filter:blur(2px)}
    .loading-box{background:#1a1a1a;color:#fff;border:1px solid #333;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.45);padding:1.25rem 1.5rem;min-width:240px;display:flex;flex-direction:column;align-items:center}

    /* New: Feedback (stars + sentiment + note) */
    .stars{display:inline-flex;gap:6px;cursor:pointer;user-select:none}
    .stars i{font-size:1.1rem;line-height:1;color:#ffd166;opacity:.4;transition:transform .12s ease,opacity .12s ease}
    .stars i.bi-star-fill{opacity:1}
    .stars i:hover{transform:scale(1.08)}
    .feedback-panel{background:#121212;border:1px solid #2a2a2a;border-radius:8px;padding:.5rem}
    .feedback-panel textarea{background:#1c1c1c;border-color:#2f3746;color:#f1f4ff}
    .sentiment{display:inline-flex;gap:.35rem}
    .sentiment .btn.active{background:#233044;border-color:#35507a;color:#9ec5fe}
    #noteModal .sentiment .btn{border-color:#ced4da;color:#495057;background:#fff}
    #noteModal .sentiment .btn.active{background:#4c6ef5;border-color:#4c6ef5;color:#fff}
    #noteModal .note-modal-status{min-height:1.25rem}
    .note-preview{background:#111;border:1px dashed #2a2a2a;border-radius:6px;padding:.35rem .5rem}
    .note-preview .previewText{display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .token-attr{display:inline-block;line-height:1.6;padding:0 .15em;border-radius:.25rem;color:var(--xelra-text)}
    .sent-card{border:1px solid #2a2a2a;background:#121212;border-radius:8px;padding:.5rem .75rem;margin-bottom:.5rem}
    .arl-follow-up{display:flex;align-items:center;gap:.35rem;color:#e6e6e6;opacity:.85}
    .arl-follow-up i{color:#9ec5fe;font-size:1rem}
    .summary-card{background:#131313;border:1px solid #2a2a2a;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.35);padding:1.5rem;width:min(340px,92vw)}
.summary-card h6{font-size:1rem;margin-bottom:.5rem;color:#f5f5f5}
.summary-card .progress{height:6px;margin-bottom:.5rem}
.summary-card .small,.summary-card span,.summary-card strong{color:#e6e6e6}
.summary-card .action{margin-top:1rem}
.summary-card .goal-pill{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .75rem;border-radius:999px;border:1px solid rgba(158,197,255,.45);background:rgba(158,197,255,.08);color:#d9e5ff;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;transition:background .18s ease,border-color .18s ease,color .18s ease}
.summary-card .goal-pill i{font-size:.85rem}
.summary-card .goal-pill-active{background:rgba(76,110,245,.28);border-color:rgba(76,110,245,.55);color:#f3f7ff}
.summary-card .goal-pill-empty{background:transparent;border-color:rgba(158,197,255,.35);color:#b8cbf5}
.summary-card .goal-pill:hover,
.summary-card .goal-pill:focus-visible{outline:none;border-color:rgba(118,167,255,.85);background:rgba(118,167,255,.22);color:#fff}
.summary-card .goal-pill:focus-visible{box-shadow:0 0 0 3px rgba(118,167,255,.3)}
    .summary-card .goal-pill:active{transform:translateY(1px)}
    /* Lesson View */
    #lessonPanel{display:none}
    body.view-lesson #viewApp{display:none!important}
    body.view-lesson #lessonPanel{display:block!important}
    .lesson-view{min-height:calc(100vh - 56px)}
    .lesson-content{display:flex;flex-direction:column}
    .lesson-frame-wrapper{flex:1;background:#000;border-radius:8px;overflow:hidden}
    .lesson-iframe{width:100%;height:calc(100vh - 120px);border:0;background:#000}

    /* Explanation Drawer */
    .explanation-drawer .offcanvas-body{padding:0}
    .explanation-content{padding:1.5rem}
    .explain-section{margin-bottom:1.5rem}
    .explain-section-title{font-size:0.85rem;font-weight:600;color:#9ec5fe;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.75rem;display:flex;align-items:center}
    .explain-section-title i{color:#7ba7e3}
    .explain-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:0.75rem 1rem}
    .explain-item{padding:0.35rem 0;border-bottom:1px solid rgba(255,255,255,.05)}
    .explain-item:last-child{border-bottom:none}
    .explain-label{font-size:0.75rem;color:#a1a1a1;text-transform:uppercase;letter-spacing:0.05em}
    .explain-value{font-size:0.9rem;color:#e6eaf8;font-weight:500;margin-left:0.5rem}
    .explain-text{font-size:0.9rem;color:#dce2f7;line-height:1.5}
    .mode-label-large{font-size:1.5rem;font-weight:600;color:#9ec5fe;text-transform:uppercase;letter-spacing:0.08em;text-align:center}

    /* Routine Outcome Badges */
    .routine-outcome-badge{display:inline-block;padding:0.15rem 0.5rem;border-radius:4px;font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em}
    .routine-outcome-badge.skipped{background:rgba(158,165,190,.15);color:#9ea5be;border:1px solid rgba(158,165,190,.3)}
    .routine-outcome-badge.blocked{background:rgba(255,193,7,.15);color:#ffc107;border:1px solid rgba(255,193,7,.3)}
    .routine-outcome-badge.executed{background:rgba(40,167,69,.15);color:#28a745;border:1px solid rgba(40,167,69,.3)}

    /* Lesson loader */
    .lesson-loader{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(26,26,46,.95);z-index:5;transition:opacity .3s ease}
    .lesson-loader.hidden{opacity:0;pointer-events:none}

    /* Responsive Design */
    @media (max-width: 992px) {
      .app-layout{flex-direction:column}
      .olm-panel{width:100%;min-width:100%;position:static;height:auto;border-right:none;border-bottom:1px solid #2a2a2a}
      .learning-area{max-width:100%;padding:1rem}
      .lesson-iframe{height:60vh}
    }
.arl-loop{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:1rem}
.arl-loop-steps{display:flex;flex-direction:column;gap:.85rem;margin:0}
.arl-loop-step{color:#dce2f7;line-height:1.45}
.arl-loop-step strong{display:block;color:#cbe2ff;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.25rem}
.arl-loop-step:not(:last-child){border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:.65rem}
.arl-loop-step-text{display:inline-block;min-height:1.2em;font-size:.95rem;color:#eef3ff}
.arl-loop-step-text.typing::after{content:"▌";display:inline-block;margin-left:4px;color:#9ec5ff;animation:arlCaret .9s steps(2) infinite}
.text-highlight{color:#9ec5ff}
.arl-loop{position:relative;overflow:hidden}
.arl-loop.arl-loop-animate{animation:arlLoopGlow 1.1s ease forwards}
.arl-loop.arl-loop-flare::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at top left, rgba(158,197,255,.35), rgba(158,197,255,0));
  opacity:0;
  pointer-events:none;
}
.arl-loop.arl-loop-flare.arl-loop-animate::after{
  animation:arlLoopFlare 1.1s ease forwards;
}
@keyframes arlLoopGlow{
  0%{box-shadow:0 0 0 rgba(158,197,255,0);transform:scale(.98)}
  45%{box-shadow:0 0 20px rgba(158,197,255,.22);transform:scale(1.01)}
  100%{box-shadow:0 0 0 rgba(158,197,255,0);transform:scale(1)}
}
@keyframes arlLoopFlare{
  0%{opacity:.75;transform:translate(-10%, -10%) scale(.9)}
  60%{opacity:.3;transform:translate(0,0) scale(1.05)}
  100%{opacity:0;transform:translate(8%, 8%) scale(1.2)}
}
@keyframes arlCaret{
  0%,100%{opacity:0}
  50%{opacity:1}
}
@media (prefers-reduced-motion: reduce){
  .arl-loop.arl-loop-animate,
  .arl-loop-step-text.typing::after{animation:none!important}
}
.xai ul{color:#dfe5ff}
.badge{background:rgba(255,255,255,.08);color:#e6e9ff}
.badge.text-bg-info{background:rgba(76,110,245,.25)!important;color:#d9e4ff!important}
.btn-secondary{background:#2f3342;border-color:#454c60;color:#f1f4ff}
.btn-secondary:hover{background:#3c4254;border-color:#5a6580;color:#fff}

/* Reflect Modal - Clean, friendly design */
.reflect-modal{border-radius:16px;overflow:hidden}
.reflect-modal .modal-header{background:#f8f9fa}
.reflect-modal .modal-title{font-size:1.1rem;font-weight:600;color:#333}
.reflect-modal .modal-body{padding:1.25rem 1.5rem}
.reflect-modal .modal-footer{background:#f8f9fa;padding:.75rem 1.5rem}

/* Star rating in modal */
.reflect-stars{display:inline-flex;gap:8px}
.reflect-stars i{font-size:2rem;color:#ddd;cursor:pointer;transition:all .15s ease}
.reflect-stars i:hover{transform:scale(1.15)}
.reflect-stars i.bi-star-fill{color:#ffc107}
.reflect-stars i:focus{outline:2px solid #4c6ef5;outline-offset:2px;border-radius:4px}

/* Feeling pills */
.reflect-feelings{display:flex;gap:10px;justify-content:center}
.feeling-pill{display:flex;flex-direction:column;align-items:center;padding:10px 16px;border:2px solid #e9ecef;border-radius:12px;background:#fff;cursor:pointer;transition:all .15s ease;min-width:70px}
.feeling-pill:hover{border-color:#4c6ef5;background:#f8f9ff}
.feeling-pill.active{border-color:#4c6ef5;background:#eef2ff;box-shadow:0 0 0 3px rgba(76,110,245,.15)}
.feeling-emoji{font-size:1.5rem;line-height:1}
.feeling-text{font-size:.75rem;color:#666;margin-top:4px;font-weight:500}
.feeling-pill.active .feeling-text{color:#4c6ef5}

/* Comment section */
.reflect-comment-section{border-top:1px solid #eee;padding-top:.75rem;margin-top:.5rem}
#noteModalBody{resize:none;font-size:.9rem}

/* Sentiment / LIME Analysis Card */
.sent-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:.75rem}
.lime-tokens{line-height:1.7;word-wrap:break-word}
.lime-tokens .token-attr{border-radius:3px;padding:1px 3px;margin:0 1px}
.lime-legend{margin-top:.5rem;padding-top:.5rem;border-top:1px solid rgba(255,255,255,.08)}
.lime-swatch{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:4px;vertical-align:middle}
.lime-swatch.lime-pos{background:rgba(25,135,84,.7)}
.lime-swatch.lime-neg{background:rgba(220,53,69,.7)}

/* Survey Overlay */
.survey-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.9);z-index:9999;display:flex;align-items:center;justify-content:center;padding:1rem}
.survey-container{background:#fff;border-radius:16px;width:100%;max-width:900px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.survey-header{background:#f8f9fa;padding:1rem 1.5rem;display:flex;align-items:center;border-bottom:1px solid #e9ecef}
.survey-header h5{color:#333;font-weight:600}
.survey-intro{padding:1rem 1.5rem;background:#fff;border-bottom:1px solid #e9ecef}
.survey-intro p{color:#555}
.survey-frame-container{flex:1;min-height:400px;overflow:hidden}
.survey-iframe{width:100%;height:100%;min-height:400px;border:none}
.survey-footer{padding:1rem 1.5rem;background:#f8f9fa;display:flex;justify-content:flex-end;gap:.75rem;border-top:1px solid #e9ecef}

/* External Content Modal */
.external-content-iframe{width:100%;height:70vh;border:none;background:#fff}
#externalContentModal .modal-dialog{max-width:95vw}
#externalContentModal .modal-body{min-height:70vh}