*{box-sizing:border-box}:root{--brand:#00D1C7;--bg:#0f172a;--panel:#111827;--panel-2:#020617;--text:#f8fafc;--muted:#94a3b8;--border:rgba(148,163,184,.22);--danger:#ef4444;--ok:#22c55e;--warning:#f59e0b}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;overflow:hidden}.eva-page{height:100vh;display:flex;flex-direction:column}.eva-header{height:86px;padding:14px 22px;background:var(--panel-2);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:18px;flex-shrink:0}.brand-block{display:flex;align-items:center;gap:18px}.brand-logo{min-width:132px;padding:12px 14px;border:1px solid rgba(0,209,199,.55);border-radius:14px;color:var(--brand);font-weight:700;text-align:center}.course-code{color:var(--brand);font-size:16px;font-weight:700;margin-bottom:4px}.course-title{font-size:22px;font-weight:700}.status-block{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px;white-space:nowrap}.status-dot{width:10px;height:10px;border-radius:999px;display:inline-block}.status-idle{background:var(--warning)}.status-connected{background:var(--ok)}.status-error{background:var(--danger)}.service-bar{min-height:76px;padding:12px 22px;background:#07101f;border-bottom:1px solid var(--border);display:flex;align-items:flex-end;gap:12px;flex-shrink:0}.service-field{min-width:190px;display:flex;flex-direction:column;gap:5px}.service-main{min-width:250px}.compact-field{min-width:110px}.service-field label{color:var(--brand);font-size:12px;font-weight:700}.service-field select,.email-panel input,.chat-box input{border:1px solid var(--border);border-radius:11px;background:#0b1220;color:var(--text);outline:none}.service-field select{height:40px;padding:0 12px;font-size:14px}.service-field select:focus,.email-panel input:focus,.chat-box input:focus{border-color:var(--brand)}.primary-action-button{height:40px;border:0;border-radius:11px;background:var(--brand);color:#001312;font-weight:800;padding:0 22px;cursor:pointer}.service-hint{flex:1;min-width:220px;color:var(--muted);font-size:13px;line-height:1.35;padding-bottom:8px}.hidden{display:none!important}.eva-main{flex:1;display:grid;grid-template-columns:40% 60%;min-height:0;overflow:hidden}.blackboard-panel,.avatar-panel{min-width:0;min-height:0}.blackboard-panel{background:#0b1220;border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}.panel-header{min-height:58px;padding:10px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0}.panel-header h2{margin:0;font-size:19px}.panel-header span{color:var(--muted);font-size:13px}.history-controls{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}.email-panel{display:flex;gap:8px;padding:10px 18px;border-bottom:1px solid var(--border);background:rgba(2,6,23,.5);flex-shrink:0}.email-panel input{flex:1;min-width:0;height:34px;padding:0 10px}.blackboard-meta{padding:10px 18px;border-bottom:1px solid var(--border);color:#cbd5e1;font-size:13px;background:rgba(0,209,199,.04);display:none;flex-shrink:0}.blackboard-meta.visible{display:block}.blackboard-content{flex:1;padding:22px 24px;overflow-y:auto;overflow-x:hidden;line-height:1.68;font-size:16px;color:#e5edf7;min-height:0;scrollbar-width:thin;scrollbar-color:rgba(0,209,199,.65) rgba(15,23,42,.6)}.blackboard-content::-webkit-scrollbar,.dialogue-history::-webkit-scrollbar{width:10px}.blackboard-content::-webkit-scrollbar-track,.dialogue-history::-webkit-scrollbar-track{background:rgba(15,23,42,.6)}.blackboard-content::-webkit-scrollbar-thumb,.dialogue-history::-webkit-scrollbar-thumb{background:rgba(0,209,199,.6);border-radius:999px}.blackboard-content h1,.blackboard-content h2,.blackboard-content h3{color:var(--brand);margin:0 0 12px;line-height:1.25}.blackboard-content h1{font-size:26px;padding-bottom:10px;border-bottom:1px solid var(--border)}.blackboard-content h2{font-size:21px;margin-top:22px}.blackboard-content h3{font-size:18px;margin-top:18px}.blackboard-content p{margin:0 0 14px}.blackboard-content ul,.blackboard-content ol{padding-left:22px;margin:8px 0 18px}.blackboard-content li{margin-bottom:8px}.blackboard-content strong{color:#fff}.blackboard-content .source-list{border-top:1px solid var(--border);margin-top:22px;padding-top:14px;color:#cbd5e1;font-size:14px}.blackboard-content .info-card{border:1px solid var(--border);border-radius:14px;padding:14px 16px;background:rgba(2,6,23,.46);margin:14px 0}.avatar-panel{background:var(--panel);display:grid;grid-template-rows:minmax(0,1fr) 26% 72px;min-height:0;overflow:hidden}.avatar-video-area{min-height:0;padding:20px 22px 14px;display:flex;align-items:center;justify-content:center;position:relative}.avatar-frame{width:100%;height:100%;border:0;border-radius:18px;background:#000;box-shadow:0 18px 50px rgba(0,0,0,.38)}#realtimeAudio{display:none}.dialogue-area{border-top:1px solid var(--border);background:#050b18;padding:12px 22px;display:flex;flex-direction:column;min-height:0;overflow:hidden}.dialogue-header{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.caption-label{color:var(--brand);font-size:13px;font-weight:700}.student-identity{margin-top:3px;font-size:12px;color:var(--muted)}.caption-actions{display:flex;align-items:center;gap:8px}.dialogue-history{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:8px;scrollbar-width:thin;scrollbar-color:rgba(0,209,199,.65) rgba(15,23,42,.6)}.dialogue-message{margin-bottom:12px;padding:10px 12px;border-radius:14px;border:1px solid var(--border)}.student-message{background:rgba(0,209,199,.08);margin-left:32px}.eva-message{background:rgba(15,23,42,.78);margin-right:32px}.system-message{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.35)}.message-meta{color:var(--brand);font-size:12px;font-weight:700;margin-bottom:5px}.message-time{color:var(--muted);font-weight:400;margin-left:6px}.message-text{font-size:17px;line-height:1.42;color:var(--text);white-space:pre-wrap}.small-action-button{border:1px solid rgba(0,209,199,.55);background:transparent;color:var(--brand);border-radius:999px;padding:7px 12px;cursor:pointer;font-weight:700;font-size:12px}.small-action-button:hover{border-color:var(--brand)}.small-action-button:disabled{opacity:.45;cursor:not-allowed}.danger-action{border-color:rgba(239,68,68,.65);color:#fecaca}.ok-action{border-color:rgba(34,197,94,.75);color:#bbf7d0}.chat-box{border-top:1px solid var(--border);background:var(--panel-2);padding:12px 18px;display:flex;gap:12px;align-items:center;min-width:0}.student-name-badge{flex-shrink:0;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid rgba(0,209,199,.45);color:var(--brand);border-radius:999px;padding:10px 12px;font-size:13px;font-weight:700}.chat-box input{flex:1;min-width:0;height:44px;padding:0 14px;font-size:15px}.chat-box button{height:44px;border:0;border-radius:12px;background:var(--brand);color:#001312;font-weight:700;padding:0 22px;cursor:pointer}code{color:var(--brand)}@media(max-width:1100px){.service-bar{align-items:stretch;flex-wrap:wrap}.service-hint{flex-basis:100%;padding-bottom:0}}@media(max-width:900px){html,body{overflow:auto}.eva-page{min-height:100vh;height:auto}.eva-header{height:auto;align-items:flex-start;flex-direction:column}.eva-main{grid-template-columns:1fr;overflow:visible}.blackboard-panel{border-right:0;border-bottom:1px solid var(--border);min-height:520px}.avatar-panel{min-height:760px}.course-title{font-size:18px}.message-text{font-size:15px}.student-name-badge{display:none}}

/* Tutor development: show the backend websocket connection button */
#connectRealtimeBtn {
  display: inline-flex !important;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.logout-button {
  height: 36px;
  border: 1px solid rgba(239, 68, 68, 0.65);
  background: transparent;
  color: #fecaca;
  border-radius: 999px;
  padding: 0 14px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
}

.logout-button:hover {
  border-color: #ef4444;
  color: #ffffff;
  background: rgba(239, 68, 68, 0.12);
}

@media (max-width: 900px) {
  .header-actions {
    width: 100%;
    justify-content: space-between;
  }
}


.service-hero {
  flex-shrink: 0;
  padding: 22px 24px 18px;
  background: linear-gradient(180deg, #07101f 0%, #081426 100%);
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.service-hero h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.service-hero p {
  margin: 10px auto 0;
  width: 90%;
  max-width: 90vw;
  color: var(--muted);
  font-size: clamp(15px, 1.3vw, 20px);
  line-height: 1.45;
}

.service-bar {
  justify-content: center;
  background: #050b18;
}

.service-hint {
  max-width: 340px;
}


/* Step 16/17 - neutral learning prompt and personalized service selector */
.service-hero {
  display: none !important;
}

.study-prompt {
  flex-shrink: 0;
  padding: 18px 24px 14px;
  background: #07101f;
  border-bottom: 1px solid var(--border);
}

.study-prompt-text {
  max-width: 1200px;
  margin: 0;
  text-align: center;
}

.study-prompt h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(24px, 2.2vw, 36px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.study-prompt p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: clamp(14px, 1.15vw, 18px);
  line-height: 1.4;
  max-width: 90vw;
}

.service-bar {
  justify-content: center;
  align-items: flex-end;
  background: #050b18;
}

.service-main {
  min-width: 300px;
}

.service-hint {
  max-width: 520px;
}

@media (max-width: 900px) {
  .study-prompt {
    padding: 16px 18px 12px;
  }

  .service-bar {
    justify-content: stretch;
  }
}

/* Final top service selector layout */
.study-prompt-text {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.service-bar {
  display: flex;
  justify-content: center !important;
  align-items: center !important;
  gap: 18px;
  padding: 18px 22px;
  flex-wrap: wrap;
}

.service-main {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  min-width: 430px;
}

.service-main label {
  display: none;
}

.service-main select {
  width: 430px;
  height: 52px;
  font-size: 17px;
  padding: 0 18px;
}

.service-hint {
  display: none !important;
}

.primary-action-button {
  height: 52px;
  min-width: 120px;
  font-size: 17px;
  border-radius: 14px;
}

#liveAvatarFrame {
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#liveAvatarVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  display: block;
}

#liveAvatarAudio {
  display: none;
}

/* Hide technical button from students */
#connectRealtimeBtn {
  display: none !important;
}

#blackboardContent h1,
#blackboard h1,
#window2 h1 {
  font-size: 22px;
  margin: 14px 0 12px;
}

#blackboardContent h2,
#blackboard h2,
#window2 h2 {
  font-size: 18px;
  margin: 18px 0 8px;
}

#blackboardContent h3,
#blackboard h3,
#window2 h3 {
  font-size: 16px;
  margin: 16px 0 6px;
}

#blackboardContent p,
#blackboard p,
#window2 p {
  margin: 6px 0;
  line-height: 1.45;
}

#blackboardContent .bb-bullet,
#blackboard .bb-bullet,
#window2 .bb-bullet {
  margin: 5px 0 5px 14px;
  line-height: 1.45;
}

#blackboardContent hr,
#blackboard hr,
#window2 hr {
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.15);
  margin: 14px 0;
}
#blackboardContent code,
#blackboard code,
#window2 code {
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  font-family: monospace;
  color: #00D1C7;
}

#blackboardContent blockquote,
#blackboard blockquote,
#window2 blockquote {
  border-left: 3px solid #00D1C7;
  padding-left: 12px;
  margin: 12px 0;
  opacity: 0.92;
}

#blackboardContent a,
#blackboard a,
#window2 a {
  color: #00D1C7;
  text-decoration: underline;
}

#blackboardContent .bb-checklist,
#blackboard .bb-checklist,
#window2 .bb-checklist {
  margin: 6px 0 6px 14px;
  line-height: 1.45;
}

.bb-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 22px;
  font-size: 14px;
}

.bb-table th,
.bb-table td {
  border: 1px solid rgba(255,255,255,0.18);
  padding: 8px 10px;
  vertical-align: top;
}

.bb-table th {
  color: #00D1C7;
  font-weight: 700;
  background: rgba(255,255,255,0.04);
}

.bb-table td {
  color: #ffffff;
}

/* Local marked.js Blackboard rendering */
.blackboard-content .bb-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 14px 0 22px;
}

.blackboard-content table,
#blackboard table,
#window2 table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 22px;
  font-size: 14px;
}

.blackboard-content th,
.blackboard-content td,
#blackboard th,
#blackboard td,
#window2 th,
#window2 td {
  border: 1px solid rgba(255,255,255,0.18);
  padding: 8px 10px;
  vertical-align: top;
}

.blackboard-content th,
#blackboard th,
#window2 th {
  color: #00D1C7;
  font-weight: 700;
  background: rgba(255,255,255,0.04);
}

.blackboard-content td,
#blackboard td,
#window2 td {
  color: #ffffff;
}

.blackboard-content pre,
#blackboard pre,
#window2 pre {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  padding: 12px;
  overflow-x: auto;
}

.blackboard-content pre code,
#blackboard pre code,
#window2 pre code {
  background: transparent;
  padding: 0;
}

.blackboard-content blockquote,
#blackboard blockquote,
#window2 blockquote {
  border-left: 3px solid #00D1C7;
  padding-left: 12px;
  margin: 12px 0;
  opacity: 0.92;
}

/* Tutor development override: show backend websocket connection button */
#connectRealtimeBtn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* Temporary LiveAvatar audio debug control */
#liveAvatarAudio {
  display: block !important;
  position: absolute;
  left: 28px;
  bottom: 20px;
  width: 320px;
  height: 34px;
  opacity: 0.95;
  z-index: 20;
}

/* Controlled barge-in button */
#interruptEvaBtn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-color: rgba(239, 68, 68, 0.9) !important;
  color: #ffffff !important;
  background: rgba(239, 68, 68, 0.35) !important;
  font-weight: 800;
}

/* Hide LiveAvatar audio debug control after validation, but keep audio element alive */
#liveAvatarAudio {
  display: block !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  left: -9999px !important;
  bottom: auto !important;
}

/* Learner-facing mode: EVA connects automatically, so hide the technical connection button */
#connectRealtimeBtn {
  display: none !important;
}

/* Hide conversation controls until learner presses Start */
body.before-service-start .dialogue-area,
body.before-service-start .chat-box {
  display: none !important;
}

/* When conversation is hidden, avatar video uses the available space */
body.before-service-start .avatar-panel {
  grid-template-rows: minmax(0, 1fr);
}

/* Learner-facing mode: hide Clear conversation button */
#clearDialogueBtn {
  display: none !important;
}

/* Make the Start button attract attention before the learner starts */
#startServiceBtn.start-attention,
body.before-service-start #startServiceBtn {
  animation: evaStartPulse 1.25s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(0, 209, 199, 0.65);
}

@keyframes evaStartPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 209, 199, 0.65);
  }

  50% {
    transform: scale(1.045);
    box-shadow: 0 0 0 9px rgba(0, 209, 199, 0.12);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 209, 199, 0);
  }
}

/* Stop the pulse once the learning session has started */
body.service-started #startServiceBtn {
  animation: none !important;
  transform: none !important;
}

/* Stable Tutor service selector positioning */
.study-prompt,
.service-bar,
.service-field,
.service-main,
#serviceMode,
#serviceTargetField,
#serviceTarget,
#startServiceBtn {
  transform: none !important;
  translate: none !important;
  perspective: none !important;
  filter: none !important;
}

.service-bar {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 24px !important;
  width: 100% !important;
  padding: 18px 22px !important;
  flex-wrap: wrap !important;
}

.service-main {
  position: relative !important;
  width: min(680px, 55vw) !important;
  min-width: 430px !important;
  max-width: 760px !important;
  display: block !important;
}

.service-main select,
#serviceMode {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-width: 430px !important;
  max-width: 760px !important;
  height: 52px !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 10 !important;
}

#startServiceBtn {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 10 !important;
}

/* Add breathing room before Blackboard section headings */
.blackboard-content p + h2,
.blackboard-content ul + h2,
.blackboard-content ol + h2 {
  margin-top: 34px !important;
}

/* TEMP DEBUG: show LiveAvatar audio control */
#liveAvatarAudio {
  display: block !important;
  position: absolute !important;
  left: 28px !important;
  bottom: 20px !important;
  width: 360px !important;
  height: 38px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 9999 !important;
}

/* Final LiveAvatar audio handling:
   keep the audio element active in the page, but visually unobtrusive.
   Do NOT move it off-screen and do NOT use display:none, otherwise browser audio may stop. */
#liveAvatarAudio {
  display: block !important;
  position: absolute !important;
  left: 8px !important;
  bottom: 8px !important;
  width: 80px !important;
  height: 24px !important;
  opacity: 0.01 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Stable LiveAvatar audio playback:
   keep the audio control real and visible enough for browser playback. */
#liveAvatarAudio {
  display: block !important;
  position: absolute !important;
  left: 12px !important;
  bottom: 12px !important;
  width: 180px !important;
  height: 28px !important;
  opacity: 0.18 !important;
  pointer-events: auto !important;
  z-index: 9999 !important;
}

/* Hide Blackboard navigation and email tools before the learner presses Start.
   Keep the Blackboard content visible so the welcome page can appear. */
body.before-service-start .blackboard-history-tools,
body.before-service-start .blackboard-email-tools {
  display: none !important;
}

/* Tutor mic state: solid red while Eva is listening */
#micToggleBtn.mic-listening-active,
#micToggleBtn.mic-listening-active.small-action-button,
#micToggleBtn.mic-listening-active.ok-action,
#micToggleBtn.mic-listening-active.danger-action {
  background: #dc2626 !important;
  background-color: #dc2626 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 0 18px rgba(220, 38, 38, 0.55) !important;
}

#micToggleBtn.mic-listening-active:hover {
  background: #b91c1c !important;
  background-color: #b91c1c !important;
  border-color: #f87171 !important;
  color: #ffffff !important;
}


/* Final Tutor mic button states */
#micToggleBtn:not(.mic-listening-active),
#micToggleBtn.small-action-button:not(.mic-listening-active) {
  background: transparent !important;
  background-color: transparent !important;
  border-color: rgba(0, 209, 199, 0.55) !important;
  color: #00D1C7 !important;
  box-shadow: none !important;
}

#micToggleBtn.mic-listening-active,
#micToggleBtn.mic-listening-active.small-action-button {
  background: #dc2626 !important;
  background-color: #dc2626 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 0 18px rgba(220, 38, 38, 0.55) !important;
}

#micToggleBtn.mic-listening-active:hover {
  background: #b91c1c !important;
  background-color: #b91c1c !important;
  border-color: #f87171 !important;
  color: #ffffff !important;
}


/* Tutor mic button pictogram */
#micToggleBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

#micToggleBtn::before {
  content: "";
  width: 16px;
  height: 16px;
  display: inline-block;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 14q-1.25 0-2.125-.875T9 11V5q0-1.25.875-2.125T12 2q1.25 0 2.125.875T15 5v6q0 1.25-.875 2.125T12 14Zm-1 7v-3.075q-2.6-.35-4.3-2.325Q5 13.625 5 11h2q0 2.075 1.463 3.538Q9.925 16 12 16t3.538-1.462Q17 13.075 17 11h2q0 2.625-1.7 4.6q-1.7 1.975-4.3 2.325V21h-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 14q-1.25 0-2.125-.875T9 11V5q0-1.25.875-2.125T12 2q1.25 0 2.125.875T15 5v6q0 1.25-.875 2.125T12 14Zm-1 7v-3.075q-2.6-.35-4.3-2.325Q5 13.625 5 11h2q0 2.075 1.463 3.538Q9.925 16 12 16t3.538-1.462Q17 13.075 17 11h2q0 2.625-1.7 4.6q-1.7 1.975-4.3 2.325V21h-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* Tutor mic pictogram states:
   muted = mic off
   listening = mic on
*/
#micToggleBtn::before {
  content: "";
  width: 17px;
  height: 17px;
  display: inline-block;
  flex-shrink: 0;
  background-color: currentColor;

  /* Mic off icon */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19 11h-2q0 .85-.275 1.6l1.475 1.475Q19 12.75 19 11ZM4.275 3L21 19.725L19.725 21L3 4.275L4.275 3ZM12 14q.575 0 1.075-.213L9 9.712V11q0 1.25.875 2.125T12 14Zm3-3V5q0-1.25-.875-2.125T12 2Q10.75 2 9.875 2.875T9 5v.175l6 6ZM11 21v-3.075q-2.6-.35-4.3-2.325Q5 13.625 5 11h2q0 2.075 1.463 3.538Q9.925 16 12 16q.85 0 1.613-.263l1.5 1.5q-.925.45-2.113.688V21h-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19 11h-2q0 .85-.275 1.6l1.475 1.475Q19 12.75 19 11ZM4.275 3L21 19.725L19.725 21L3 4.275L4.275 3ZM12 14q.575 0 1.075-.213L9 9.712V11q0 1.25.875 2.125T12 14Zm3-3V5q0-1.25-.875-2.125T12 2Q10.75 2 9.875 2.875T9 5v.175l6 6ZM11 21v-3.075q-2.6-.35-4.3-2.325Q5 13.625 5 11h2q0 2.075 1.463 3.538Q9.925 16 12 16q.85 0 1.613-.263l1.5 1.5q-.925.45-2.113.688V21h-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

#micToggleBtn.mic-listening-active::before {
  /* Mic on icon */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 14q-1.25 0-2.125-.875T9 11V5q0-1.25.875-2.125T12 2q1.25 0 2.125.875T15 5v6q0 1.25-.875 2.125T12 14Zm-1 7v-3.075q-2.6-.35-4.3-2.325Q5 13.625 5 11h2q0 2.075 1.463 3.538Q9.925 16 12 16t3.538-1.462Q17 13.075 17 11h2q0 2.625-1.7 4.6q-1.7 1.975-4.3 2.325V21h-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 14q-1.25 0-2.125-.875T9 11V5q0-1.25.875-2.125T12 2q1.25 0 2.125.875T15 5v6q0 1.25-.875 2.125T12 14Zm-1 7v-3.075q-2.6-.35-4.3-2.325Q5 13.625 5 11h2q0 2.075 1.463 3.538Q9.925 16 12 16t3.538-1.462Q17 13.075 17 11h2q0 2.625-1.7 4.6q-1.7 1.975-4.3 2.325V21h-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Make My Day mode */
.make-my-day-panel {
  flex: 1;
  min-height: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  text-align: center;
}

body.make-my-day-active .make-my-day-panel {
  display: flex !important;
}

body.make-my-day-active .dialogue-history,
body.make-my-day-active .chat-box,
body.make-my-day-active .caption-actions {
  display: none !important;
}

body.make-my-day-active .avatar-panel {
  grid-template-rows: minmax(0, 1fr) 26%;
}

body.make-my-day-active .dialogue-header {
  justify-content: center;
  text-align: center;
}

.make-my-day-title {
  color: var(--brand);
  font-size: clamp(22px, 2.2vw, 34px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.make-my-day-subtitle {
  color: var(--muted);
  font-size: clamp(14px, 1.1vw, 18px);
  line-height: 1.45;
  max-width: 520px;
}

.make-my-day-buttons {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 18px;
  flex-wrap: wrap;
  width: 100%;
}

.make-my-day-button {
  min-width: 190px;
  min-height: 58px;
  border: 1px solid rgba(0, 209, 199, 0.65);
  border-radius: 18px;
  background: rgba(0, 209, 199, 0.12);
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  padding: 14px 22px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
}

.make-my-day-button:hover {
  border-color: var(--brand);
  background: rgba(0, 209, 199, 0.2);
  transform: translateY(-1px);
}

.make-my-day-button:active {
  transform: translateY(0);
}

@media (max-width: 900px) {
  body.make-my-day-active .avatar-panel {
    grid-template-rows: minmax(0, 1fr) 320px;
  }

  .make-my-day-buttons {
    flex-direction: column;
  }

  .make-my-day-button {
    width: 100%;
  }
}

/* Make My Day: hide redundant top conversation header.
   The main Make My Day title and buttons remain visible in the panel. */
body.make-my-day-active .dialogue-header {
  display: none !important;
}

body.make-my-day-active .make-my-day-panel {
  padding-top: 8px;
}

/* Practice Quiz mode */
.quiz-next-button {
  white-space: nowrap;
  border-color: rgba(0, 209, 199, 0.85) !important;
  background: rgba(0, 209, 199, 0.12) !important;
  color: #ffffff !important;
}

body:not(.practice-quiz-active) #askAnotherQuizBtn {
  display: none !important;
}

.quiz-card {
  border: 1px solid rgba(0, 209, 199, 0.35);
  border-radius: 18px;
  background: rgba(2, 6, 23, 0.42);
  padding: 18px;
  margin: 0 0 18px;
}

.quiz-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 12px;
}

.quiz-card-title {
  color: var(--brand);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
}

.quiz-card-chapter {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

.quiz-question-text {
  font-size: 18px;
  line-height: 1.5;
  color: #ffffff;
  margin: 12px 0 18px;
}

.quiz-answer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 14px 0 18px;
}

.quiz-answer-button {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.75);
  color: var(--text);
  cursor: pointer;
  padding: 14px 16px;
  font-size: 16px;
  line-height: 1.45;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.quiz-answer-button:hover:not(:disabled) {
  border-color: var(--brand);
  background: rgba(0, 209, 199, 0.1);
  transform: translateY(-1px);
}

.quiz-answer-button:disabled {
  cursor: default;
  opacity: 0.86;
}

.quiz-answer-letter {
  flex: 0 0 auto;
  min-width: 34px;
  min-height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 209, 199, 0.16);
  color: var(--brand);
  font-weight: 900;
}

.quiz-answer-text {
  flex: 1;
  min-width: 0;
}

.quiz-answer-button.correct {
  border-color: rgba(34, 197, 94, 0.85);
  background: rgba(34, 197, 94, 0.14);
}

.quiz-answer-button.correct .quiz-answer-letter {
  background: rgba(34, 197, 94, 0.22);
  color: #bbf7d0;
}

.quiz-answer-button.wrong {
  border-color: rgba(239, 68, 68, 0.9);
  background: rgba(239, 68, 68, 0.15);
}

.quiz-answer-button.wrong .quiz-answer-letter {
  background: rgba(239, 68, 68, 0.22);
  color: #fecaca;
}

.quiz-feedback-panel {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.045);
  margin-top: 16px;
}

.quiz-feedback-panel.correct {
  border-color: rgba(34, 197, 94, 0.65);
  background: rgba(34, 197, 94, 0.09);
}

.quiz-feedback-panel.wrong {
  border-color: rgba(239, 68, 68, 0.65);
  background: rgba(239, 68, 68, 0.09);
}

.quiz-feedback-title {
  color: var(--brand);
  font-weight: 900;
  margin-bottom: 8px;
}

.quiz-feedback-text {
  color: #e5edf7;
  line-height: 1.55;
  white-space: pre-wrap;
}

.quiz-next-inline-note {
  color: var(--muted);
  font-size: 14px;
  margin-top: 12px;
}

@media (max-width: 900px) {
  .quiz-card {
    padding: 14px;
  }

  .quiz-card-header {
    flex-direction: column;
  }

  .quiz-answer-button {
    font-size: 15px;
  }
}


/* Review my Knowledge mode */
.review-next-button {
  white-space: nowrap;
  border-color: rgba(0, 209, 199, 0.85) !important;
  background: rgba(0, 209, 199, 0.12) !important;
  color: #ffffff !important;
}

body:not(.review-knowledge-active) #askAnotherReviewBtn {
  display: none !important;
}

.review-card {
  min-height: 100%;
  border: 1px solid rgba(0, 209, 199, 0.35);
  border-radius: 20px;
  background: rgba(2, 6, 23, 0.42);
  padding: 22px;
  margin: 0 0 18px;
}

.review-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 12px;
}

.review-card-title {
  color: var(--brand);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.2;
}

.review-card-chapter {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

.review-concept-focus {
  color: #cbd5e1;
  font-size: 14px;
  margin-top: 8px;
}

.review-question-focus {
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px 18px;
  margin: 18px 0 22px;
  border: 1px solid rgba(0, 209, 199, 0.28);
  border-radius: 22px;
  background: radial-gradient(circle at center, rgba(0, 209, 199, 0.13), rgba(15, 23, 42, 0.72));
  color: #ffffff;
  font-size: clamp(26px, 2.4vw, 42px);
  font-weight: 850;
  line-height: 1.25;
}

.review-guidance-panel,
.review-feedback-panel,
.review-correct-panel {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.045);
  margin-top: 16px;
}

.review-guidance-title,
.review-feedback-title,
.review-correct-title {
  color: var(--brand);
  font-weight: 900;
  margin-bottom: 8px;
}

.review-guidance-list {
  margin: 0;
  padding-left: 20px;
  color: #e5edf7;
  line-height: 1.55;
}

.review-feedback-panel.correct,
.review-correct-panel {
  border-color: rgba(34, 197, 94, 0.65);
  background: rgba(34, 197, 94, 0.09);
}

.review-feedback-panel.partial,
.review-feedback-panel.unclear,
.review-feedback-panel.incorrect {
  border-color: rgba(245, 158, 11, 0.65);
  background: rgba(245, 158, 11, 0.08);
}

.review-feedback-text,
.review-correct-text {
  color: #e5edf7;
  line-height: 1.58;
}

.review-feedback-text p,
.review-correct-text p {
  margin: 6px 0;
}

.review-next-inline-note {
  color: var(--muted);
  font-size: 14px;
  margin-top: 12px;
}

@media (max-width: 900px) {
  .review-card {
    padding: 14px;
  }

  .review-card-header {
    flex-direction: column;
  }

  .review-question-focus {
    min-height: 150px;
    font-size: clamp(22px, 7vw, 34px);
    padding: 22px 14px;
  }
}

/* Step 12O Study Guide PDF download button */
#blackboardContent a[href*="/api/tutor/study-guide-pdf/"],
.blackboard-content a[href*="/api/tutor/study-guide-pdf/"],
.tutor-blackboard a[href*="/api/tutor/study-guide-pdf/"],
.blackboard-panel a[href*="/api/tutor/study-guide-pdf/"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin: 0.35rem 0 1.1rem 0;
  padding: 0.75rem 1.05rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 209, 199, 0.55);
  background: rgba(0, 209, 199, 0.14);
  color: inherit;
  font-weight: 700;
  text-decoration: none;
}

#blackboardContent a[href*="/api/tutor/study-guide-pdf/"]:hover,
.blackboard-content a[href*="/api/tutor/study-guide-pdf/"]:hover,
.tutor-blackboard a[href*="/api/tutor/study-guide-pdf/"]:hover,
.blackboard-panel a[href*="/api/tutor/study-guide-pdf/"]:hover {
  background: rgba(0, 209, 199, 0.24);
  text-decoration: none;
}


/* Step 12P Study Guide PDF download button */
.study-guide-download-button,
#blackboardContent .study-guide-download-button,
.blackboard-content .study-guide-download-button,
#blackboardContent a.study-guide-download-button,
.blackboard-content a.study-guide-download-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0.45rem 0 1.15rem 0 !important;
  padding: 0.78rem 1.1rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 209, 199, 0.65) !important;
  background: rgba(0, 209, 199, 0.16) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18) !important;
}

.study-guide-download-button:hover,
#blackboardContent .study-guide-download-button:hover,
.blackboard-content .study-guide-download-button:hover {
  border-color: #00D1C7 !important;
  background: rgba(0, 209, 199, 0.27) !important;
  text-decoration: none !important;
  transform: translateY(-1px);
}

.study-guide-download-button::before,
#blackboardContent .study-guide-download-button::before,
.blackboard-content .study-guide-download-button::before {
  content: "⬇";
  display: inline-block;
  margin-right: 0.5rem;
  color: #00D1C7;
}

/* Step 16D - Review my Progress readability and semester progress bars */
.blackboard-content h2,
#blackboardContent h2,
#blackboard h2,
#window2 h2 {
  margin-top: 42px !important;
  margin-bottom: 16px !important;
  padding-top: 8px !important;
}

.blackboard-content h3,
#blackboardContent h3,
#blackboard h3,
#window2 h3 {
  margin-top: 34px !important;
  margin-bottom: 12px !important;
}

.blackboard-content h2:first-child,
#blackboardContent h2:first-child,
#blackboard h2:first-child,
#window2 h2:first-child {
  margin-top: 18px !important;
}

.blackboard-content p,
#blackboardContent p,
#blackboard p,
#window2 p {
  margin-top: 10px !important;
  margin-bottom: 14px !important;
}

.blackboard-content blockquote,
#blackboardContent blockquote,
#blackboard blockquote,
#window2 blockquote {
  margin: 22px 0 26px !important;
  padding: 10px 0 10px 14px !important;
}

.blackboard-content table,
#blackboardContent table,
#blackboard table,
#window2 table {
  margin-top: 24px !important;
  margin-bottom: 36px !important;
}

.semester-progress-card {
  border: 1px solid rgba(0, 209, 199, 0.38);
  border-radius: 18px;
  background: rgba(2, 6, 23, 0.46);
  padding: 18px 18px 16px;
  margin: 18px 0 30px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.semester-progress-title {
  color: #00D1C7;
  font-weight: 900;
  font-size: 18px;
  margin-bottom: 12px;
}

.semester-progress-metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  color: #e5edf7;
  line-height: 1.45;
  margin-bottom: 16px;
}

.semester-progress-metrics strong {
  color: #ffffff;
}

.semester-progress-bars {
  display: grid;
  gap: 12px;
}

.semester-bar-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.semester-bar-label {
  color: #cbd5e1;
  font-weight: 800;
  font-size: 13px;
}

.semester-week-bar {
  display: grid;
  grid-template-columns: repeat(15, minmax(24px, 1fr));
  gap: 5px;
  width: 100%;
}

.week-cell {
  min-height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  background: rgba(148, 163, 184, 0.18);
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.week-cell.target-active {
  background: rgba(34, 197, 94, 0.82);
  border-color: rgba(34, 197, 94, 0.95);
  color: #03210f;
}

.week-cell.learner-behind {
  background: rgba(239, 68, 68, 0.88);
  border-color: rgba(248, 113, 113, 0.95);
  color: #ffffff;
}

.week-cell.learner-on-track {
  background: rgba(21, 128, 61, 0.95);
  border-color: rgba(34, 197, 94, 0.95);
  color: #ffffff;
}

.week-cell.current-week {
  outline: 3px solid #00D1C7;
  outline-offset: 2px;
}

.learner-behind-text {
  color: #fecaca;
  font-weight: 900;
}

.learner-on-track-text {
  color: #bbf7d0;
  font-weight: 900;
}

.semester-progress-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 14px;
  color: #cbd5e1;
  font-size: 12px;
}

.semester-progress-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-box {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.28);
}

.legend-box.target {
  background: rgba(34, 197, 94, 0.82);
}

.legend-box.learner-behind {
  background: rgba(239, 68, 68, 0.88);
}

.legend-box.learner-on-track {
  background: rgba(21, 128, 61, 0.95);
}

.legend-box.current {
  background: transparent;
  border: 3px solid #00D1C7;
}

@media (max-width: 900px) {
  .semester-bar-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .semester-week-bar {
    grid-template-columns: repeat(5, minmax(34px, 1fr));
  }
}

/* Step 16D3 - extra readability for markdown progress overview */
.blackboard-content h2,
#blackboardContent h2,
#blackboard h2,
#window2 h2 {
  margin-top: 46px !important;
  margin-bottom: 18px !important;
}

.blackboard-content h3,
#blackboardContent h3,
#blackboard h3,
#window2 h3 {
  margin-top: 38px !important;
  margin-bottom: 14px !important;
}

.blackboard-content h3 + p,
#blackboardContent h3 + p,
#blackboard h3 + p,
#window2 h3 + p {
  margin-top: 10px !important;
}

.blackboard-content table,
#blackboardContent table,
#blackboard table,
#window2 table {
  margin-top: 24px !important;
  margin-bottom: 38px !important;
}

.blackboard-content blockquote,
#blackboardContent blockquote,
#blackboard blockquote,
#window2 blockquote {
  margin-top: 26px !important;
  margin-bottom: 30px !important;
}

/* Step 16D4 - progress matrix and numeric table alignment */
.blackboard-content .bb-table th.bb-num-cell,
.blackboard-content .bb-table td.bb-num-cell,
#blackboard .bb-table th.bb-num-cell,
#blackboard .bb-table td.bb-num-cell,
#window2 .bb-table th.bb-num-cell,
#window2 .bb-table td.bb-num-cell {
  text-align: center !important;
  vertical-align: middle !important;
}

.blackboard-content .bb-table td:first-child,
#blackboard .bb-table td:first-child,
#window2 .bb-table td:first-child {
  font-weight: 800;
}

.blackboard-content .bb-table td.bb-num-cell,
#blackboard .bb-table td.bb-num-cell,
#window2 .bb-table td.bb-num-cell {
  white-space: nowrap;
}

.blackboard-content .bb-table th,
.blackboard-content .bb-table td,
#blackboard .bb-table th,
#blackboard .bb-table td,
#window2 .bb-table th,
#window2 .bb-table td {
  line-height: 1.45;
}

.blackboard-content h2,
#blackboardContent h2,
#blackboard h2,
#window2 h2 {
  margin-top: 50px !important;
  margin-bottom: 20px !important;
}

.blackboard-content h3,
#blackboardContent h3,
#blackboard h3,
#window2 h3 {
  margin-top: 42px !important;
  margin-bottom: 16px !important;
}

/* Step 16D5 - overall indicator, weekly coverage row, and table alignment */
.blackboard-content .bb-table th.bb-num-cell,
.blackboard-content .bb-table td.bb-num-cell,
#blackboard .bb-table th.bb-num-cell,
#blackboard .bb-table td.bb-num-cell,
#window2 .bb-table th.bb-num-cell,
#window2 .bb-table td.bb-num-cell {
  text-align: center !important;
  vertical-align: middle !important;
}

.blackboard-content .bb-table td.bb-num-cell,
#blackboard .bb-table td.bb-num-cell,
#window2 .bb-table td.bb-num-cell {
  white-space: nowrap;
}

.blackboard-content .bb-progress-indicator-table,
#blackboard .bb-progress-indicator-table,
#window2 .bb-progress-indicator-table {
  margin: 18px auto 34px !important;
  max-width: 900px !important;
  border: 1px solid rgba(0, 209, 199, 0.55) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
}

.blackboard-content .bb-progress-indicator-table th,
.blackboard-content .bb-progress-indicator-table td,
#blackboard .bb-progress-indicator-table th,
#blackboard .bb-progress-indicator-table td,
#window2 .bb-progress-indicator-table th,
#window2 .bb-progress-indicator-table td {
  text-align: center !important;
  vertical-align: middle !important;
  padding: 16px 18px !important;
}

.blackboard-content .bb-progress-indicator-table td,
#blackboard .bb-progress-indicator-table td,
#window2 .bb-progress-indicator-table td {
  font-size: 20px !important;
  font-weight: 900 !important;
}

.blackboard-content .bb-table th,
.blackboard-content .bb-table td,
#blackboard .bb-table th,
#blackboard .bb-table td,
#window2 .bb-table th,
#window2 .bb-table td {
  line-height: 1.45;
}

.blackboard-content h2,
#blackboardContent h2,
#blackboard h2,
#window2 h2 {
  margin-top: 52px !important;
  margin-bottom: 22px !important;
}

.blackboard-content h3,
#blackboardContent h3,
#blackboard h3,
#window2 h3 {
  margin-top: 44px !important;
  margin-bottom: 16px !important;
}

/* Step 16E2 - catch-up action plan readability */
.blackboard-content .bb-progress-indicator-table,
#blackboard .bb-progress-indicator-table,
#window2 .bb-progress-indicator-table {
  margin: 18px auto 38px !important;
  max-width: 940px !important;
  border: 1px solid rgba(0, 209, 199, 0.65) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

.blackboard-content .bb-progress-indicator-table th,
.blackboard-content .bb-progress-indicator-table td,
#blackboard .bb-progress-indicator-table th,
#blackboard .bb-progress-indicator-table td,
#window2 .bb-progress-indicator-table th,
#window2 .bb-progress-indicator-table td {
  text-align: center !important;
  vertical-align: middle !important;
  padding: 16px 18px !important;
}

.blackboard-content .bb-progress-indicator-table td,
#blackboard .bb-progress-indicator-table td,
#window2 .bb-progress-indicator-table td {
  font-size: 20px !important;
  font-weight: 900 !important;
}

.blackboard-content h3,
#blackboardContent h3,
#blackboard h3,
#window2 h3 {
  margin-top: 44px !important;
  margin-bottom: 16px !important;
}

/* Step 16E3 - progress flow, snapshot blocks, bullet table cells */
.blackboard-content .bb-progress-snapshot-table,
#blackboard .bb-progress-snapshot-table,
#window2 .bb-progress-snapshot-table {
  margin: 18px 0 34px !important;
  border: 1px solid rgba(0, 209, 199, 0.62) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.20);
}

.blackboard-content .bb-progress-snapshot-table th,
.blackboard-content .bb-progress-snapshot-table td,
#blackboard .bb-progress-snapshot-table th,
#blackboard .bb-progress-snapshot-table td,
#window2 .bb-progress-snapshot-table th,
#window2 .bb-progress-snapshot-table td {
  text-align: center !important;
  vertical-align: middle !important;
  padding: 16px 18px !important;
}

.blackboard-content .bb-progress-snapshot-table td,
#blackboard .bb-progress-snapshot-table td,
#window2 .bb-progress-snapshot-table td {
  font-size: 18px !important;
  font-weight: 900 !important;
}

.blackboard-content .bb-progress-indicator-table,
#blackboard .bb-progress-indicator-table,
#window2 .bb-progress-indicator-table {
  margin: 18px auto 38px !important;
  max-width: 940px !important;
  border: 1px solid rgba(0, 209, 199, 0.65) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

.blackboard-content .bb-progress-indicator-table th,
.blackboard-content .bb-progress-indicator-table td,
#blackboard .bb-progress-indicator-table th,
#blackboard .bb-progress-indicator-table td,
#window2 .bb-progress-indicator-table th,
#window2 .bb-progress-indicator-table td {
  text-align: center !important;
  vertical-align: middle !important;
  padding: 16px 18px !important;
}

.blackboard-content .bb-progress-indicator-table td,
#blackboard .bb-progress-indicator-table td,
#window2 .bb-progress-indicator-table td {
  font-size: 20px !important;
  font-weight: 900 !important;
}

.blackboard-content .bb-table th.bb-num-cell,
.blackboard-content .bb-table td.bb-num-cell,
#blackboard .bb-table th.bb-num-cell,
#blackboard .bb-table td.bb-num-cell,
#window2 .bb-table th.bb-num-cell,
#window2 .bb-table td.bb-num-cell {
  text-align: center !important;
  vertical-align: middle !important;
}

.blackboard-content .bb-table td br,
#blackboard .bb-table td br,
#window2 .bb-table td br {
  display: block;
  content: "";
  margin-top: 6px;
}

.blackboard-content h2,
#blackboardContent h2,
#blackboard h2,
#window2 h2 {
  margin-top: 52px !important;
  margin-bottom: 22px !important;
}

.blackboard-content h3,
#blackboardContent h3,
#blackboard h3,
#window2 h3 {
  margin-top: 44px !important;
  margin-bottom: 16px !important;
}

/* Step 16E4 - two-row snapshot and remove old work-plan emphasis */
.blackboard-content .bb-progress-snapshot-table td,
#blackboard .bb-progress-snapshot-table td,
#window2 .bb-progress-snapshot-table td {
  line-height: 1.45 !important;
}

.blackboard-content .bb-progress-snapshot-table tr:nth-child(2) td,
#blackboard .bb-progress-snapshot-table tr:nth-child(2) td,
#window2 .bb-progress-snapshot-table tr:nth-child(2) td {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #dbeafe !important;
}

/* Step 16E5 - turn the top progress snapshot into dashboard cards */
.blackboard-content .bb-progress-snapshot-card-grid,
#blackboard .bb-progress-snapshot-card-grid,
#window2 .bb-progress-snapshot-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 16px;
  margin: 22px 0 42px !important;
}

.blackboard-content .bb-progress-card,
#blackboard .bb-progress-card,
#window2 .bb-progress-card {
  min-height: 150px;
  border: 1px solid rgba(0, 209, 199, 0.48);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.78));
  padding: 18px 18px 16px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.blackboard-content .bb-progress-card-label,
#blackboard .bb-progress-card-label,
#window2 .bb-progress-card-label {
  color: #00D1C7;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.blackboard-content .bb-progress-card-value,
#blackboard .bb-progress-card-value,
#window2 .bb-progress-card-value {
  color: #ffffff;
  font-size: clamp(22px, 1.65vw, 32px);
  font-weight: 950;
  line-height: 1.12;
  margin-bottom: 14px;
}

.blackboard-content .bb-progress-card-detail,
#blackboard .bb-progress-card-detail,
#window2 .bb-progress-card-detail {
  color: #cbd5e1;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.38;
}

.blackboard-content .bb-progress-card-detail br,
#blackboard .bb-progress-card-detail br,
#window2 .bb-progress-card-detail br {
  display: block;
  margin-top: 6px;
  content: "";
}

.blackboard-content .bb-progress-card.status-behind,
#blackboard .bb-progress-card.status-behind,
#window2 .bb-progress-card.status-behind {
  border-color: rgba(248, 113, 113, 0.75);
  background:
    linear-gradient(180deg, rgba(69, 10, 10, 0.74), rgba(15, 23, 42, 0.86));
}

.blackboard-content .bb-progress-card.status-behind .bb-progress-card-label,
#blackboard .bb-progress-card.status-behind .bb-progress-card-label,
#window2 .bb-progress-card.status-behind .bb-progress-card-label {
  color: #fecaca;
}

.blackboard-content .bb-progress-card.status-ok,
#blackboard .bb-progress-card.status-ok,
#window2 .bb-progress-card.status-ok {
  border-color: rgba(34, 197, 94, 0.78);
  background:
    linear-gradient(180deg, rgba(20, 83, 45, 0.56), rgba(15, 23, 42, 0.86));
}

.blackboard-content .bb-progress-card strong,
#blackboard .bb-progress-card strong,
#window2 .bb-progress-card strong {
  color: inherit;
}

@media (max-width: 1400px) {
  .blackboard-content .bb-progress-snapshot-card-grid,
  #blackboard .bb-progress-snapshot-card-grid,
  #window2 .bb-progress-snapshot-card-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

@media (max-width: 760px) {
  .blackboard-content .bb-progress-snapshot-card-grid,
  #blackboard .bb-progress-snapshot-card-grid,
  #window2 .bb-progress-snapshot-card-grid {
    grid-template-columns: 1fr;
  }
}

/* Step 16E6 - Course Indicators and Overall Completion dashboard cards */
.blackboard-content .bb-course-indicators-card-grid,
#blackboard .bb-course-indicators-card-grid,
#window2 .bb-course-indicators-card-grid,
.blackboard-content .bb-overall-completion-card-grid,
#blackboard .bb-overall-completion-card-grid,
#window2 .bb-overall-completion-card-grid {
  display: grid;
  gap: 16px;
  margin: 22px 0 42px !important;
}

.blackboard-content .bb-course-indicators-card-grid,
#blackboard .bb-course-indicators-card-grid,
#window2 .bb-course-indicators-card-grid {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
}

.blackboard-content .bb-overall-completion-card-grid,
#blackboard .bb-overall-completion-card-grid,
#window2 .bb-overall-completion-card-grid {
  grid-template-columns: repeat(3, minmax(220px, 1fr));
}

.blackboard-content .bb-dashboard-card,
#blackboard .bb-dashboard-card,
#window2 .bb-dashboard-card {
  min-height: 132px;
  border: 1px solid rgba(0, 209, 199, 0.48);
  border-radius: 20px;
  background:
    radial-gradient(circle at top left, rgba(0, 209, 199, 0.13), transparent 38%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.82));
  padding: 18px 18px 16px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.blackboard-content .bb-dashboard-card-label,
#blackboard .bb-dashboard-card-label,
#window2 .bb-dashboard-card-label {
  color: #00D1C7;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 12px;
  line-height: 1.25;
}

.blackboard-content .bb-dashboard-card-value,
#blackboard .bb-dashboard-card-value,
#window2 .bb-dashboard-card-value {
  color: #ffffff;
  font-size: clamp(20px, 1.45vw, 30px);
  font-weight: 950;
  line-height: 1.18;
}

.blackboard-content .bb-dashboard-card-value strong,
#blackboard .bb-dashboard-card-value strong,
#window2 .bb-dashboard-card-value strong {
  color: inherit;
}

.blackboard-content .bb-dashboard-card.status-behind,
#blackboard .bb-dashboard-card.status-behind,
#window2 .bb-dashboard-card.status-behind {
  border-color: rgba(248, 113, 113, 0.75);
  background:
    radial-gradient(circle at top left, rgba(239, 68, 68, 0.24), transparent 40%),
    linear-gradient(180deg, rgba(69, 10, 10, 0.74), rgba(15, 23, 42, 0.88));
}

.blackboard-content .bb-dashboard-card.status-behind .bb-dashboard-card-label,
#blackboard .bb-dashboard-card.status-behind .bb-dashboard-card-label,
#window2 .bb-dashboard-card.status-behind .bb-dashboard-card-label {
  color: #fecaca;
}

.blackboard-content .bb-dashboard-card.status-ok,
#blackboard .bb-dashboard-card.status-ok,
#window2 .bb-dashboard-card.status-ok {
  border-color: rgba(34, 197, 94, 0.78);
  background:
    radial-gradient(circle at top left, rgba(34, 197, 94, 0.18), transparent 40%),
    linear-gradient(180deg, rgba(20, 83, 45, 0.56), rgba(15, 23, 42, 0.88));
}

@media (max-width: 1400px) {
  .blackboard-content .bb-course-indicators-card-grid,
  #blackboard .bb-course-indicators-card-grid,
  #window2 .bb-course-indicators-card-grid,
  .blackboard-content .bb-overall-completion-card-grid,
  #blackboard .bb-overall-completion-card-grid,
  #window2 .bb-overall-completion-card-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

@media (max-width: 760px) {
  .blackboard-content .bb-course-indicators-card-grid,
  #blackboard .bb-course-indicators-card-grid,
  #window2 .bb-course-indicators-card-grid,
  .blackboard-content .bb-overall-completion-card-grid,
  #blackboard .bb-overall-completion-card-grid,
  #window2 .bb-overall-completion-card-grid {
    grid-template-columns: 1fr;
  }
}

/* Step 12.4 — plain Make My Day result cards */

body.make-my-day-active #blackboardContent.make-my-day-result-card {
  margin: 14px;
  padding: 22px;
  border: 1px solid rgba(0, 209, 199, 0.35);
  border-radius: 20px;
  background: rgba(2, 6, 23, 0.42);
}

body.make-my-day-active #blackboardContent.make-my-day-result-card > h2 {
  color: var(--brand);
  font-size: clamp(22px, 2vw, 32px) !important;
  font-weight: 900;
  line-height: 1.2;
  margin: 0 0 18px !important;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

body.make-my-day-active #blackboardContent.make-my-day-result-card > p,
body.make-my-day-active #blackboardContent.make-my-day-result-card > blockquote {
  min-height: 180px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 18px 0 22px !important;
  padding: 28px 24px !important;
  border: 1px solid rgba(0, 209, 199, 0.28) !important;
  border-radius: 22px;
  background:
    radial-gradient(
      circle at center,
      rgba(0, 209, 199, 0.13),
      rgba(15, 23, 42, 0.72)
    );
  color: #ffffff;
  font-size: clamp(26px, 2.4vw, 42px) !important;
  font-weight: 850;
  line-height: 1.25;
  opacity: 1 !important;
}

body.make-my-day-active #blackboardContent.make-my-day-result-card > blockquote {
  border-left: 1px solid rgba(0, 209, 199, 0.28) !important;
}

body.make-my-day-active #blackboardContent.make-my-day-result-card > blockquote > p {
  margin: 0 !important;
  padding: 0 !important;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: inherit;
}

@media (max-width: 900px) {
  body.make-my-day-active #blackboardContent.make-my-day-result-card {
    margin: 10px;
    padding: 16px;
  }

  body.make-my-day-active #blackboardContent.make-my-day-result-card > p,
  body.make-my-day-active #blackboardContent.make-my-day-result-card > blockquote {
    min-height: 150px;
    padding: 24px 18px !important;
    font-size: clamp(23px, 6vw, 34px) !important;
  }
}

/* Step 16.5 — explicit logout session-resume choice */
.resume-session-dialog {
  width: min(620px, calc(100vw - 32px));
  max-width: 620px;
  padding: 0;
  border: 1px solid rgba(0, 209, 199, 0.58);
  border-radius: 22px;
  background: #07101f;
  color: var(--text);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.62);
}

.resume-session-dialog::backdrop {
  background: rgba(2, 6, 23, 0.82);
  backdrop-filter: blur(5px);
}

.resume-session-card {
  padding: 28px;
}

.resume-session-card h2 {
  margin: 0 0 14px;
  color: var(--brand);
  font-size: clamp(23px, 2.2vw, 32px);
  line-height: 1.2;
}

.resume-session-card p {
  margin: 0 0 14px;
  color: #dbe5f1;
  font-size: 16px;
  line-height: 1.55;
}

.resume-session-card .resume-session-safety {
  padding: 12px 14px;
  border-left: 3px solid var(--brand);
  background: rgba(0, 209, 199, 0.08);
  color: #cbd5e1;
}

.resume-session-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.resume-session-actions .primary-action-button,
.resume-session-actions .small-action-button {
  min-height: 46px;
  height: auto;
  padding: 11px 18px;
  font-size: 15px;
}

@media (max-width: 620px) {
  .resume-session-card {
    padding: 22px 18px;
  }

  .resume-session-actions {
    flex-direction: column;
  }

  .resume-session-actions button {
    width: 100%;
  }
}