:root {
  /* ═══════════════════════════════════════
     BRAND COLOR SYSTEM
     Primary:    #2563EB  活跃蓝
     Background: #F1F5F9  云母灰
     Text:       #0F172A  深海蓝黑
     Accent:     #8B5CF6  极光紫
     Success:    #10B981  薄荷绿
  ═══════════════════════════════════════ */

      /* Backgrounds */
  --bg-body:   #f5f5f4;
  --bg-sidebar:   #efefee;
  --sidebar-text-primary: #111111;
  --sidebar-text-secondary: #4a4a4a;
  --sidebar-text-muted: #8a8a8a;
  --sidebar-border: #dddddb;
  --sidebar-hover: rgba(0,0,0,0.03);
  --sidebar-active: #ffffff;
  --sidebar-accent: #111111;
  --bg-main:   #ffffff;
  --bg-panel:  #ffffff;
  --bg-input:  #ffffff;
  --bg-hover:  rgba(15,23,42,0.03);
  --bg-active: rgba(15,23,42,0.04);

  /* Borders */
  --border:        #dddddb;
  --border-strong: #c7c7c4;
  --border-focus:  #111111;

  /* Text */
  --text-primary:   #111111;
  --text-secondary: #4a4a4a;
  --text-muted:     #7a7a7a;

  /* Brand */
  --accent:      #111111;
  --text-accent: #111111;
  --success:     #10B981;
  --danger:      #EF4444;
  --purple:      #0ea5e9;

  /* Shadows - Lift everything to feel weightless */
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.06);
  --shadow-md: 0 4px 6px -1px rgba(15,23,42,0.05), 0 2px 4px -1px rgba(15,23,42,0.03);
  --shadow-input: 0 2px 10px rgba(15,23,42,0.04), 0 0 0 1px rgba(15,23,42,0.05) inset;
  --shadow-card: 0 12px 32px rgba(15,23,42,0.08);

  /* Dimensions & Radius */
  --radius-xl: 20px;
  --radius-pill: 999px;
  --sidebar-width-collapsed: 76px;
  --book-width: 400px;
  --header-height: 60px;
}

:root[data-theme="light"] {
  --bg-body: #f5f5f4;
  --bg-sidebar: #efefee;
  --sidebar-text-primary: #111111;
  --sidebar-text-secondary: #4a4a4a;
  --sidebar-text-muted: #8a8a8a;
  --sidebar-border: #dddddb;
  --sidebar-hover: rgba(15, 23, 42, 0.04);
  --sidebar-active: #ffffff;
  --sidebar-accent: #111111;
  --bg-main: #ffffff;
  --bg-panel: #ffffff;
  --bg-input: #ffffff;
  --bg-hover: rgba(15, 23, 42, 0.03);
  --bg-active: rgba(15, 23, 42, 0.04);
  --border: #dddddb;
  --border-strong: #c7c7c4;
  --border-focus: #111111;
  --text-primary: #111111;
  --text-secondary: #4a4a4a;
  --text-muted: #7a7a7a;
  --accent: #111111;
  --text-accent: #111111;
}

:root[data-theme="dark"] {
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.28);
  --shadow-md: 0 10px 20px rgba(0,0,0,0.24);
  --shadow-input: 0 1px 0 rgba(255,255,255,0.02) inset, 0 0 0 1px rgba(255,255,255,0.02) inset;
  --shadow-card: 0 18px 48px rgba(0,0,0,0.28);
  --shadow-float: 0 18px 44px rgba(0,0,0,0.24);
  --shadow-subtle: 0 3px 12px rgba(0,0,0,0.2);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Utilities */
.ghost { color: var(--text-muted); font-style: italic; }

body.app-booting .app,
body.app-booting .login-view {
  visibility: hidden !important;
}

body.auth-redirecting .app {
  display: none !important;
}

body.auth-redirecting .login-view {
  display: block !important;
}

/* Intro landing */
.intro-landing-new {
  font-family: 'Nunito', sans-serif;
  color: var(--ink);
  background-color: var(--paper) !important;
  background-image: radial-gradient(var(--dots) 2px, transparent 2px) !important;
  background-size: 32px 32px;
  position: fixed;
  inset: 0;
  z-index: 12000;
  overflow-y: auto;
  overflow-x: hidden;
  isolation: isolate;
}

body.intro-active .app {
  display: none !important;
}

body.intro-active .intro-landing-new:not(.hidden) {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  background-color: var(--paper) !important;
  background-image: radial-gradient(var(--dots) 2px, transparent 2px) !important;
}

.intro-landing-new *,
.intro-landing-new *::before,
.intro-landing-new *::after {
  box-sizing: border-box;
}

.intro-landing-new .nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.3;
  z-index: 0;
  pointer-events: none;
}

.intro-landing-new .nebula-1 {
  top: -10%;
  left: -10%;
  width: 50vw;
  height: 50vw;
  background: var(--blue);
}

.intro-landing-new .nebula-2 {
  top: 40%;
  right: -20%;
  width: 60vw;
  height: 60vw;
  background: #38bdf8;
  opacity: 0.18;
}

.intro-landing-new .nebula-3 {
  bottom: 10%;
  left: -10%;
  width: 40vw;
  height: 40vw;
  background: var(--pink);
  opacity: 0.2;
}

.intro-landing-new h1,
.intro-landing-new h2,
.intro-landing-new h3,
.intro-landing-new h4,
.intro-landing-new button,
.intro-landing-new .font-heading {
  font-family: 'Quicksand', sans-serif;
}

.intro-landing-new .handwriting {
  font-family: 'Caveat', cursive;
  color: #2563eb;
  font-size: 2.2rem;
  transform: rotate(-4deg);
  display: inline-block;
  line-height: 1;
}

.intro-landing-new .intro-nav {
  position: sticky;
  top: 0;
  width: 100%;
  padding: 1.5rem 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  background: linear-gradient(to bottom, rgba(248,250,252,0.95) 0%, rgba(248,250,252,0.76) 70%, rgba(248,250,252,0) 100%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.intro-landing-new .intro-nav.is-scrolled {
  border-bottom: 2px solid rgba(203, 213, 225, 0.7);
}

.intro-landing-new .intro-brand {
  font-size: 1.8rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.intro-landing-new .intro-brand-icon {
  width: 38px;
  height: 38px;
  background: #fff;
  border: var(--border-thick);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 3px 3px 0px var(--ink);
  font-size: 1.2rem;
  transform: rotate(-5deg);
}

.intro-landing-new .btn-brutal {
  background: var(--blue);
  color: #fff;
  border: var(--border-thick);
  padding: 0.8rem 2rem;
  border-radius: 99px;
  font-weight: 800;
  font-size: 1.1rem;
  box-shadow: var(--shadow-hard);
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Quicksand', sans-serif;
  text-decoration: none;
}

.intro-landing-new .btn-brutal:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hover);
  background: #0ea5e9;
}

.intro-landing-new .btn-brutal:active {
  transform: translate(6px, 6px);
  box-shadow: var(--shadow-pressed);
}

.intro-landing-new .btn-secondary {
  background: #fff;
  color: var(--ink);
}

.intro-landing-new .btn-secondary:hover {
  background: var(--paper-dark);
}

.intro-landing-new .card {
  background: #fff;
  border: var(--border-thick);
  border-radius: 24px;
  box-shadow: var(--shadow-hard);
  padding: 2.5rem;
  position: relative;
  z-index: 10;
  transition: transform 0.2s;
}

.intro-landing-new .card:hover {
  transform: translateY(-3px) rotate(-0.5deg);
  box-shadow: var(--shadow-hover);
}

.intro-landing-new .washi-tape {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 100px;
  height: 32px;
  border: 2px solid var(--ink);
  z-index: 20;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}

.intro-landing-new .tape-blue {
  background: repeating-linear-gradient(-45deg, rgba(56,189,248,0.9), rgba(56,189,248,0.9) 10px, rgba(255,255,255,0.8) 10px, rgba(255,255,255,0.8) 20px);
}

.intro-landing-new .tape-pink {
  background: rgba(252, 165, 165, 0.9);
  transform: rotate(4deg);
  left: auto;
  right: 30px;
}

.intro-landing-new .tape-yellow {
  background: rgba(253, 224, 71, 0.9);
  transform: rotate(-2deg);
  left: 30px;
}

.intro-landing-new .stamp {
  position: absolute;
  right: -15px;
  top: -15px;
  border: 3px solid var(--ink);
  color: var(--ink);
  background: var(--yellow);
  font-family: 'DM Mono', monospace;
  font-weight: 800;
  font-size: 0.9rem;
  padding: 4px 12px;
  border-radius: 8px;
  transform: rotate(12deg);
  box-shadow: 3px 3px 0 var(--ink);
  z-index: 20;
}

.intro-landing-new .hero {
  min-height: 100vh;
  padding: 120px 5% 60px;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 10;
}

.intro-landing-new .intro-hero-stamp {
  top: 100px;
  right: 10%;
  transform: rotate(15deg);
}

.intro-landing-new .intro-hero-handwriting {
  margin-bottom: -10px;
  margin-left: -200px;
}

.intro-landing-new .hero h1 {
  font-size: 5rem;
  line-height: 1.1;
  margin: 1rem 0;
  letter-spacing: -2px;
}

.intro-landing-new .hl {
  position: relative;
  z-index: 1;
  display: inline-block;
  white-space: nowrap;
}

.intro-landing-new .hl::after {
  content: '';
  position: absolute;
  bottom: 10px;
  left: -5px;
  right: -5px;
  height: 26px;
  background: var(--blue);
  opacity: 0.35;
  z-index: -1;
  border-radius: 8px;
  transform: rotate(-1.5deg);
}

.intro-landing-new .hero p.lead {
  font-size: 1.5rem;
  color: #475569;
  max-width: 700px;
  line-height: 1.6;
  font-weight: 600;
  margin-bottom: 2rem;
}

.intro-landing-new .hero p.sub-lead {
  font-size: 1.1rem;
  color: #64748b;
  max-width: 800px;
  font-weight: 500;
  margin-bottom: 3rem;
}

.intro-landing-new .intro-hero-actions {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.intro-landing-new .ui-mockup {
  width: 100%;
  max-width: 1200px;
  background: #fff;
  border: var(--border-thick);
  border-radius: 24px;
  box-shadow: 10px 12px 0px var(--ink);
  display: grid;
  grid-template-columns: 250px 1fr 300px;
  overflow: hidden;
  text-align: left;
  margin-top: 3rem;
  position: relative;
}

.intro-landing-new .ui-col {
  padding: 1.5rem;
  border-right: 3px solid var(--ink);
}

.intro-landing-new .ui-col:last-child {
  border-right: none;
  background: var(--paper);
}

.intro-landing-new .ui-header {
  font-family: 'DM Mono', monospace;
  font-size: 0.8rem;
  font-weight: 800;
  color: #94a3b8;
  text-transform: uppercase;
  margin-bottom: 1rem;
  border-bottom: 2px dashed var(--dots);
  padding-bottom: 0.5rem;
}

.intro-landing-new .ui-header-split {
  display: flex;
  justify-content: space-between;
}

.intro-landing-new .ui-header-accent {
  color: var(--blue);
}

.intro-landing-new .ui-item {
  background: var(--paper-dark);
  border: 2px solid var(--ink);
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 0.9rem;
}

.intro-landing-new .ui-item.active {
  background: var(--blue);
  color: #fff;
  box-shadow: 3px 3px 0 var(--ink);
  transform: translate(-2px,-2px);
}

.intro-landing-new .ui-item-muted {
  opacity: 0.5;
  border-style: dashed;
}

.intro-landing-new .ui-content h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.intro-landing-new .ui-content p {
  color: #475569;
  margin-bottom: 1rem;
  line-height: 1.7;
}

.intro-landing-new .math-box {
  background: #ecfeff;
  border: 2px dashed #0891b2;
  padding: 15px;
  border-radius: 12px;
  text-align: center;
  font-family: 'Caveat', cursive;
  font-size: 1.8rem;
  margin: 1.5rem 0;
  color: var(--ink);
}

.intro-landing-new .ui-progress-dots {
  display: flex;
  gap: 10px;
  margin-top: 2rem;
}

.intro-landing-new .ui-progress-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dots);
}

.intro-landing-new .ui-progress-dots span.is-active {
  background: var(--blue);
}

.intro-landing-new .ui-chat .chat-bubble {
  background: #fff;
  border: 2px solid var(--ink);
  padding: 12px;
  border-radius: 16px 16px 16px 4px;
  margin-bottom: 15px;
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: 2px 2px 0 var(--ink);
}

.intro-landing-new .ui-chat .chat-bubble.user {
  background: var(--yellow);
  border-radius: 16px 16px 4px 16px;
  margin-left: 20px;
}

.intro-landing-new .ui-upload-box {
  border: 2px dashed var(--dots);
  border-radius: 12px;
  padding: 10px;
  text-align: center;
  color: #94a3b8;
  font-weight: 700;
  margin-top: 20px;
}

.intro-landing-new .scrapbook-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 5%;
  display: flex;
  flex-direction: column;
  gap: 8rem;
  position: relative;
  z-index: 10;
}

.intro-landing-new .constellation {
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.intro-landing-new .constellation path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-dasharray: 8 8;
}

.intro-landing-new .constellation circle {
  fill: var(--yellow);
  stroke: var(--ink);
  stroke-width: 3;
}

.intro-landing-new .constellation-top {
  top: 10%;
  right: 5%;
  width: 250px;
}

.intro-landing-new .constellation-bottom {
  top: 20%;
  left: 10%;
  width: 150px;
}

.intro-landing-new .feature-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.intro-landing-new .feature-split.reverse {
  direction: rtl;
}

.intro-landing-new .feature-split.reverse > * {
  direction: ltr;
}

.intro-landing-new .feature-text h2 {
  font-size: 2.8rem;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.intro-landing-new .feature-text p {
  font-size: 1.2rem;
  color: #475569;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.intro-landing-new .feature-list {
  list-style: none;
  margin-top: 2rem;
}

.intro-landing-new .feature-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1rem;
  background: #fff;
  border: 2px solid var(--ink);
  padding: 10px 20px;
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--ink);
  width: max-content;
  max-width: 100%;
}

.intro-landing-new .intro-card-title {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.intro-landing-new .intro-card-title-blue {
  color: var(--blue);
}

.intro-landing-new .intro-compare {
  padding: 15px;
  border-radius: 12px;
  margin-bottom: 15px;
}

.intro-landing-new .intro-compare-bad {
  background: #fef2f2;
  border: 2px dashed #fca5a5;
}

.intro-landing-new .intro-compare-good {
  background: #f0fdf4;
  border: 2px solid var(--green);
  box-shadow: 3px 3px 0 var(--ink);
}

.intro-landing-new .intro-card-ghost {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.intro-landing-new .intro-agent-stamp {
  top: 20%;
  left: -20px;
  right: auto;
  transform: rotate(-15deg);
  background: var(--pink);
  color: #fff;
}

.intro-landing-new .card-agents {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.intro-landing-new .agent {
  flex: 1;
  border: 3px solid var(--ink);
  border-radius: 20px;
  padding: 20px;
  background: #fff;
  box-shadow: 4px 4px 0 var(--ink);
  position: relative;
}

.intro-landing-new .agent.a {
  background: #e0f2fe;
  transform: rotate(-3deg);
}

.intro-landing-new .agent.b {
  background: #fef9c3;
  transform: rotate(3deg);
  margin-top: 40px;
}

.intro-landing-new .agent-icon {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.intro-landing-new .agent h3 {
  font-size: 1.4rem;
  margin-bottom: 10px;
}

.intro-landing-new .agent p {
  font-size: 0.95rem;
  font-weight: 600;
}

.intro-landing-new .card-visuals {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

.intro-landing-new .visual-bar {
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 15px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.intro-landing-new .visual-bar.top {
  background: var(--green);
  color: #fff;
  box-shadow: 3px 3px 0 var(--ink);
  transform: translateX(-10px);
}

.intro-landing-new .visual-bar.mid {
  background: #fff;
  margin-left: 20px;
}

.intro-landing-new .visual-bar.low {
  background: var(--paper-dark);
  color: #64748b;
  border-style: dashed;
  margin-left: 40px;
}

.intro-landing-new .visual-card-note {
  margin-top: 15px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #64748b;
}

.intro-landing-new .card-memory {
  background: var(--yellow);
  border-radius: 0 0 40px 0;
  transform: rotate(2deg);
}

.intro-landing-new .card-memory::after {
  content: '';
  position: absolute;
  bottom: -3px;
  right: -3px;
  border-width: 25px;
  border-style: solid;
  border-color: transparent var(--ink) var(--ink) transparent;
}

.intro-landing-new .intro-pin {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  background: #ef4444;
  border-radius: 50%;
  border: 2px solid var(--ink);
  box-shadow: 2px 4px 0 rgba(0,0,0,0.2);
}

.intro-landing-new .intro-memory-handwriting {
  position: absolute;
  top: 30px;
  right: -20px;
  transform: rotate(15deg);
}

.intro-landing-new .intro-memory-title {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  margin-top: 20px;
}

.intro-landing-new .intro-memory-list {
  list-style: none;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.8;
}

.intro-landing-new .intro-memory-note {
  margin-top: 20px;
  font-size: 0.9rem;
  border-top: 2px dashed var(--ink);
  padding-top: 15px;
}

.intro-landing-new .footer-cta {
  text-align: center;
  padding: 120px 20px;
  position: relative;
  z-index: 10;
  background: #fff;
  border-top: var(--border-thick);
  background-image: radial-gradient(var(--dots) 2px, transparent 2px);
  background-size: 32px 32px;
}

.intro-landing-new .intro-footer-handwriting {
  margin-bottom: 10px;
}

.intro-landing-new .footer-cta h2 {
  font-size: 3.5rem;
  margin-bottom: 1.5rem;
}

.intro-landing-new .footer-cta p {
  font-size: 1.3rem;
  font-weight: 600;
  color: #475569;
  max-width: 600px;
  margin: 0 auto 3rem;
}

.intro-landing-new .intro-footer-btn {
  padding: 1.2rem 3rem;
  font-size: 1.4rem;
}

.intro-landing-new .intro-footer-meta {
  margin-top: 80px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #94a3b8;
  border-top: 2px dashed #cbd5e1;
  padding-top: 20px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1024px) {
  .intro-landing-new .hero h1 {
    font-size: 4rem;
  }

  .intro-landing-new .ui-mockup {
    grid-template-columns: 1fr;
  }

  .intro-landing-new .ui-col:nth-child(2),
  .intro-landing-new .ui-col:nth-child(4) {
    display: none;
  }

  .intro-landing-new .feature-split {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: center;
  }

  .intro-landing-new .feature-list li {
    margin: 0 auto 1rem;
  }

  .intro-landing-new .constellation {
    display: none;
  }
}

/* Edge tabs v3: refined drawer handles instead of floating pills. */


.learn-side-restore-explain {
  border-top-left-radius: 18px !important;
  border-bottom-left-radius: 18px !important;
}

.learn-side-restore-chat {
  border-top-right-radius: 18px !important;
  border-bottom-right-radius: 18px !important;
}


.learn-side-restore-explain:hover,

.learn-side-restore-chat:hover {
  box-shadow:
    0 10px 22px rgba(37, 99, 235, 0.12),
    0 2px 0 rgba(191, 219, 254, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* Edge tabs v6 final-final: study-journal paper tabs. Keep after drawer overrides. */


/* Edge tabs v5 final: study-journal paper tabs. */


/* Edge tabs v5: study-journal paper tabs. */


.learn-side-restore-explain {
  border-left: 1px solid rgba(186, 178, 162, 0.82) !important;
}

.learn-side-restore-chat {
  border-right: 1px solid rgba(186, 178, 162, 0.82) !important;
}


@media (max-width: 600px) {
  .intro-landing-new .intro-nav {
    padding: 1.1rem 1rem;
  }

  .intro-landing-new .intro-brand {
    font-size: 1.4rem;
  }

  .intro-landing-new .hero {
    padding: 112px 1rem 48px;
  }

  .intro-landing-new .hero h1 {
    font-size: 3rem;
  }

  .intro-landing-new .intro-hero-handwriting {
    margin-left: 0;
    font-size: 1.8rem;
  }

  .intro-landing-new .card-agents {
    flex-direction: column;
  }

  .intro-landing-new .agent.b {
    margin-top: 0;
    transform: rotate(-1deg);
  }

  .intro-landing-new .footer-cta h2 {
    font-size: 2.4rem;
  }
}

/* Shell Layout */

/* ──────────────────────────────────────────────────────────
   SIDEBAR
────────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}

.sidebar.collapsed {
  width: var(--sidebar-width-collapsed);
  transform: none;
  border-right: 1px solid var(--sidebar-border);
}

.sidebar-top {
  padding: 20px;
  border-bottom: 1px solid var(--border);
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--accent);
}

.logo-icon.logo-icon-brand {
  width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
  transform: rotate(-3deg);
}

.logo-icon.logo-icon-brand img,
.logo-icon.logo-icon-brand svg,
.aquarius-sticker-svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 999px;
  display: block;
  filter: drop-shadow(0 3px 0 rgba(30, 41, 59, 0.18));
}


.logo-text::after {
  content: '';
}

.logo-text.logo-text-brand {
  font-family: 'Quicksand', 'Nunito', sans-serif !important;
  font-style: normal !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  color: #1e293b !important;
  text-rendering: geometricPrecision;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
}

.sidebar .logo {
  width: 100%;
  max-width: 204px;
  box-sizing: border-box;
  padding: 7px 9px 7px 7px;
  border: 2px solid #1e293b;
  background: #fff;
  box-shadow: 4px 4px 0 #1e293b;
  transform: rotate(-2deg);
  transform-origin: left center;
  gap: 6px;
  transition: transform 0.15s ease;
}


.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--sidebar-text-muted);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  transition: all 0.2s;
  cursor: pointer;
}

.sidebar-link:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-text-primary);
}

.sidebar-link.active {
  background: var(--sidebar-active);
  color: var(--sidebar-accent);
}

.sidebar-link.active svg,
.sidebar-link.active span {
  color: inherit;
}

.sidebar-link-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-nav-shell {
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidebar-nav-group-label {
  padding: 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sidebar-text-muted);
}

.sidebar-recent-panel {
  margin-top: 8px;
}

.sidebar-syllabus-panel,
.sidebar-recent-panel {
  overflow: hidden;
  transition: max-height 0.24s ease, opacity 0.2s ease, margin-top 0.2s ease;
  max-height: 320px;
  opacity: 1;
}

.sidebar-syllabus-panel.hidden,
.sidebar-recent-panel.hidden {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}

.sidebar-syllabus-panel-inner,
.sidebar-recent-panel-inner {
  max-height: 280px;
  overflow-y: auto;
  padding: 2px 6px 2px 12px;
}

.sidebar-recent-list {
  display: grid;
  gap: 2px;
}

.sidebar-recent-empty {
  font-size: 12px;
  color: var(--sidebar-text-muted);
  font-style: italic;
  padding: 8px 4px;
}

.sidebar-recent-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 8px 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.sidebar-recent-item:hover {
  background: rgba(255,255,255,0.72);
}

.sidebar-recent-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.sidebar-recent-title {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--sidebar-text-primary);
}

.sidebar-recent-menu {
  border: none;
  background: transparent;
  color: var(--sidebar-text-muted);
  width: 18px;
  height: 18px;
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 13px;
  line-height: 18px;
}

.sidebar-recent-menu:hover {
  background: rgba(148, 163, 184, 0.14);
  color: var(--sidebar-text-secondary);
}

.sidebar-recent-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  color: var(--sidebar-text-muted);
  line-height: 1.3;
}

.sidebar-recent-section {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-recent-date {
  flex: 0 0 auto;
}

/* Syllabus */
.syllabus-header {
  padding: 14px 16px 6px;
  font-size: 12px;
  font-weight: 800;
  font-family: 'Source Serif 4', Georgia, serif;
  text-transform: none;
  letter-spacing: 0;
  color: var(--sidebar-text-primary);
}
.syllabus-header::after { content: 'Syllabus'; }

.syllabus {
  flex: 1;
  overflow-y: auto;
}


.syllabus-item { margin-bottom: 0; }
.syllabus > .syllabus-item + .syllabus-item { margin-top: 2px; }

.syllabus-chapter {
  width: 100%;
  display: flex;
  align-items: flex-start;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.syllabus-chapter:hover {
  color: var(--sidebar-text-primary);
}

.caret {
  font-size: 14px;
  font-weight: 700;
  transition: transform 0.2s;
  margin-top: -1px;
}
.caret.open { transform: rotate(90deg); }

.syllabus-sections {
  display: flex;
  flex-direction: column;
  padding-left: 16px;
  padding-top: 0;
  padding-bottom: 1px;
}


.syllabus-section-caret {
  padding: 4px 2px 4px 0;
  flex-shrink: 0;
  color: var(--sidebar-text-muted);
}

.syllabus-section-caret .caret {
  font-size: 11px;
  display: inline-block;
  transition: transform 0.2s;
}


.syllabus-section {
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
  flex: 1;
}

.syllabus-section.active {
  border-radius: var(--radius-sm);
}

.syllabus-subsections {
  display: flex;
  flex-direction: column;
  padding-bottom: 2px;
}


.sidebar-footer {
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

.sidebar-settings-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-start;
  padding: 8px 10px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: rgba(15, 23, 42, 0.58);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.16s ease, opacity 0.16s ease, background 0.16s ease;
  box-shadow: none;
}

.sidebar-settings-btn:hover {
  background: transparent;
  color: rgba(15, 23, 42, 0.86);
  transform: none;
}

.sidebar-settings-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  flex-shrink: 0;
  opacity: 1;
}

.sidebar-settings-icon svg {
  width: 18px;
  height: 18px;
  overflow: visible;
}

.sidebar-version-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 2px;
  font-size: 12px;
  color: rgba(15, 23, 42, 0.46);
}

.sidebar-version-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.65);
  display: inline-block;
}

.syllabus-section-wrap {
  display: flex;
  flex-direction: column;
}


.syllabus-section-caret,
.syllabus-section-caret-placeholder {
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.syllabus-section-caret {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  transition: transform 0.18s ease, color 0.18s ease, background 0.18s ease;
}


.syllabus-subsections {
  padding-left: 10px;
}

.syllabus-subsection {
  width: 100%;
  text-align: left;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.syllabus-subsection:hover {
  background: rgba(255, 255, 255, 0.72);
  color: var(--sidebar-text-primary);
  opacity: 1;
}

.syllabus-subsection.active {
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  font-weight: 600;
}

.model-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--sidebar-text-secondary);
}

/* Language toggle button */
.book-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--sidebar-border);
  background: transparent;
  color: var(--sidebar-text-secondary);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.book-toggle:hover {
  background: var(--surface-hover, rgba(255,255,255,0.06));
  color: var(--sidebar-text-primary);
  border-color: #f59e0b;
}
.book-toggle.book-new {
  background: rgba(245, 158, 11, 0.1);
  border-color: #f59e0b;
  color: #f59e0b;
}

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--sidebar-border);
  background: transparent;
  color: var(--sidebar-text-secondary);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.lang-toggle:hover {
  background: var(--surface-hover, rgba(255,255,255,0.06));
  color: var(--sidebar-text-primary);
  border-color: var(--sidebar-accent);
}
.lang-toggle.lang-active {
  background: rgba(99, 102, 241, 0.12);
  border-color: var(--sidebar-accent);
  color: var(--sidebar-accent);
}

.model-dot {
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--accent);
}

/* ──────────────────────────────────────────────────────────
   MAIN AREA
────────────────────────────────────────────────────────── */
/* ════════════════════════════════════════════════════════
   THREE-COLUMN LAYOUT
   left sidebar | main content | right TOC
   ════════════════════════════════════════════════════════ */

.workspace-account-bar {
  position: absolute;
  top: 24px;
  right: 28px;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}

.workspace-google-btn,
.workspace-account-avatar {
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.88);
  color: #202124;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.workspace-google-btn {
  height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 16px 0 13px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}

.workspace-google-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.workspace-account-avatar {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
}

.workspace-account-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.workspace-account-initial {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f8fafc, #e0f2fe);
  color: #0f172a;
  font-weight: 800;
  font-size: 15px;
}

.workspace-account-avatar.is-signed-in {
  border-color: rgba(56, 189, 248, 0.75);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.16), 0 10px 26px rgba(15, 23, 42, 0.1);
}

.workspace-account-avatar.is-guest .workspace-account-initial {
  background: #f1f5f9;
  color: #64748b;
}

.workspace-google-btn:hover,
.workspace-account-avatar:hover {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.2);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
  transform: translateY(-1px);
}

.workspace-google-btn:active,
.workspace-account-avatar:active {
  transform: translateY(0);
}

.workspace-google-btn.hidden {
  display: none;
}

/* ── Right TOC sidebar ── */
:root {
  --toc-width: 220px;
}

.toc-header {
  padding: 10px 12px 6px;
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}

.toc-nav {
  flex: 1;
  overflow-y: auto;
  padding: 6px 8px 10px;
}
.toc-nav::-webkit-scrollbar { width: 4px; }
.toc-nav::-webkit-scrollbar-thumb {
  border-radius: var(--radius-pill);
}

.toc-empty {
  padding: 24px 8px;
  text-align: center;
  font-size: 12px;
  line-height: 1.7;
}

/* TOC items generated by JS */
.toc-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  line-height: 1.45;
  transition: all 0.15s;
}

#tocSidebar {
  display: none !important;
}
.toc-item.depth-2 { padding-left: 16px; font-size: 11.5px; }
.toc-item.depth-3 { padding-left: 24px; font-size: 11px; opacity: 0.85; }
.toc-item.depth-4 { padding-left: 32px; font-size: 10.5px; opacity: 0.75; }

/* ── Topbar (shown in answer/learn mode) ── */
.topbar {
  height: 48px;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 12px;
}
.topbar-breadcrumb {
  font-size: 13px;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.attachment-compare-toggle {
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.attachment-compare-toggle:hover,
.attachment-compare-toggle.active {
  background: #eef7ff;
  border-color: rgba(14, 116, 144, 0.34);
  color: #0e7490;
}

.attachment-compare-toggle:active {
  transform: translateY(1px);
}

.attachment-compare-toggle-icon {
  font-family: 'DM Mono', monospace;
  font-size: 15px;
  line-height: 1;
}

.attachment-compare-toggle.hidden {
  display: none;
}

.feature-close-btn {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  box-shadow: var(--shadow-sm);
}

.feature-close-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.feature-close-btn-compact {
  width: 34px;
  height: 34px;
}


/* ── Learn View (inline, replaces answer/welcome) ── */
.learn-view.hidden { display: none !important; }

.learn-topbar {
  height: 52px;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.learn-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
}
.learn-title {
  color: var(--text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.learn-close {
  background: transparent;
  border: 1px solid var(--border);
  cursor: pointer;
  padding: 5px 14px;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  transition: all 0.15s;
}
.learn-close:hover { background: var(--bg-hover); color: var(--text-primary); }

.login-view {
  position: fixed;
  inset: 0;
  z-index: 11950;
  min-height: 100vh;
  height: 100vh;
  width: 100vw;
  background-color: #020617;
  color: #E2E8F0;
  overflow: hidden;
}

.login-webgl-container {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.login-topbar {
  position: fixed;
  top: 18px;
  left: 24px;
  right: 24px;
  z-index: 20;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.login-status-label {
  font-size: 11px;
  letter-spacing: 0.24em;
  color: rgba(226, 232, 240, 0.42);
  font-family: 'DM Mono', monospace;
}

.login-shell {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 18px;
}

.login-tilt-wrapper {
  width: 100%;
  max-width: 380px;
  perspective: 1200px;
  transform-style: preserve-3d;
}

.login-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  min-height: 0;
  padding: 16px 14px 10px;
  border-radius: 34px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(15, 23, 42, 0.5) 100%);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-top-color: rgba(255, 255, 255, 0.3);
  border-left-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 40px rgba(129, 140, 248, 0.15);
}

.tilt-element {
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out;
  animation: float-card 6s ease-in-out infinite;
}

.login-card-stage {
  min-height: 100%;
}

#loginCustomStage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}

#loginClerkStage {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

#loginClerkStage.hidden {
  display: none !important;
}

.login-card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.login-brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-brand-mark-aurora {
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 0 30px rgba(56, 189, 248, 0.2);
}


.login-clerk-mount {
  min-height: 12px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-form-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.login-status-message {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(248, 113, 113, 0.3);
  background: rgba(127, 29, 29, 0.2);
  color: #fecaca;
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}

.login-status-message.is-info {
  border-color: rgba(96, 165, 250, 0.28);
}

#clerkMountLogin > div {
  margin: 0 auto !important;
}

.login-sso-btn,
.login-input,
.login-submit-btn,
.login-guest-btn {
  font-family: 'Space Grotesk', 'Noto Sans SC', sans-serif;
}

.login-sso-btn,
.login-guest-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
  color: #E2E8F0;
  transition: all 0.3s ease;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.login-sso-btn:hover,
.login-guest-btn:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
}


.login-divider {
  display: flex;
  align-items: center;
}


.login-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.16));
}

.login-divider-line:last-child {
  background: linear-gradient(to left, transparent, rgba(255,255,255,0.16));
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-field {
  display: flex;
  flex-direction: column;
}


.login-field-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.login-link {
  transition: color 0.2s ease;
}


.login-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 15px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  color: #E2E8F0;
  font-size: 13px;
  transition: all 0.3s ease;
}


.login-input:focus {
  outline: none;
  border-bottom-color: #38BDF8;
}

.login-password-wrap {
  position: relative;
  display: flex;
  align-items: center;
}


.login-password-toggle {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}


.btn-shine {
  position: relative;
  overflow: hidden;
}

.btn-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg);
  animation: shine 4s infinite;
}

.login-submit-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}

.login-submit-btn:hover {
  border-color: rgba(56, 189, 248, 0.5);
  box-shadow: 0 0 25px rgba(56, 189, 248, 0.3);
}

.login-footnote,
.login-signup-copy {
  margin: 0;
  text-align: center;
}


@keyframes pulse-glow {
  0% { filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.4)); transform: scale(1); }
  100% { filter: drop-shadow(0 0 20px rgba(129, 140, 248, 0.8)); transform: scale(1.05); }
}

@keyframes shine {
  0% { left: -100%; }
  20% { left: 200%; }
  100% { left: 200%; }
}

@keyframes float-card {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

:root[data-theme="dark"] .feature-close-btn {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.08);
  color: var(--text-secondary);
}

:root[data-theme="dark"] .feature-close-btn:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text-primary);
  border-color: rgba(255,255,255,0.14);
}

:root[data-theme="dark"] .login-view {
  background-color: #020617;
}

@media (max-width: 1100px) {
  .login-topbar {
    left: 18px;
    right: 18px;
    top: 18px;
  }

  .login-status-label {
    display: none;
  }

  .login-shell {
    padding: 84px 18px 28px;
  }

  .login-card {
    padding: 32px 24px 26px;
  }
}


.learn-book-col {
  flex: 1;
}

.learn-book-pages {
  overflow-x: auto;
  position: relative;
  align-items: flex-start;
  justify-content: center;
  background: #F8FBFF;
  overflow-anchor: none;
  overscroll-behavior: contain;
  scroll-behavior: auto;
}

.textbook-pages-flow {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 18px 28px;
  overflow-anchor: none;
}

.textbook-page-card {
  width: 100%;
  display: flex;
  justify-content: center;
}

.textbook-page-card img {
  width: min(100%, 980px);
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  background: #fff;
  border: 1px solid var(--border);
  cursor: zoom-in;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.textbook-page-card img:hover {
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
}

#learnBookOverlay.zoomed .textbook-page-card img {
  width: min(160%, 1480px);
  max-width: none;
  cursor: zoom-out;
}

/* ── Textbook Focus Modal – full rewrite v2 (single-page viewer) ───────── */
#textbookFocusModal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  flex-direction: column;
}
#textbookFocusModal.hidden {
  display: none;
}

#textbookFocusDialog {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}

#textbookFocusDialog .learn-focus-header {
  position: fixed;
  top: 10px;
  left: 14px;
  right: 14px;
  z-index: 30;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 0;
  border-bottom: none;
  background: none;
  pointer-events: none;
}
#textbookFocusDialog .learn-focus-headings {
  max-width: min(50vw, 620px);
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(9, 14, 32, 0.46);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: auto;
}
#textbookFocusDialog .learn-focus-eyebrow {
  color: rgba(255,255,255,0.62);
}
#textbookFocusDialog .learn-focus-title {
  color: #fff;
  line-height: 1.08;
  white-space: normal;
  word-break: break-word;
}
#textbookFocusDialog .learn-focus-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
  pointer-events: auto;
}
#textbookFocusDialog .learn-focus-nav-btn,
#textbookFocusDialog .learn-focus-close {
  width: 52px;
  min-width: 52px;
  height: 52px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.24);
  color: #fff;
  font-size: 22px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#textbookFocusDialog .learn-focus-nav-btn:hover,
#textbookFocusDialog .learn-focus-close:hover {
  background: rgba(255,255,255,0.2);
}
#textbookFocusZoomResetBtn {
  width: 58px;
  min-width: 58px;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

#textbookFocusDialog .textbook-focus-content {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: transparent;
}

#textbookFocusDialog .textbook-focus-scroll {
  width: 100vw;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 0 18px;
  scroll-behavior: smooth;
  touch-action: pan-y pinch-zoom;
}

#textbookFocusDialog .textbook-focus-scroll-page {
  min-height: 100dvh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0 12px 12px;
}

@media (min-width: 1180px) {
  #textbookFocusDialog.textbook-focus-qa-open .textbook-focus-scroll-page {
    padding-right: 430px;
  }
}

#textbookFocusDialog .textbook-focus-single-page {
  display: block;
  width: auto !important;
  height: calc(100dvh - 12px) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100dvh - 12px) !important;
  object-fit: contain !important;
  transform-origin: top center;
  will-change: transform;
  transition: transform 0.12s ease;
  background: #fff !important;
  padding: 0 !important;
  margin: 0 auto !important;
  border-radius: 4px !important;
  box-shadow: 0 18px 46px rgba(0,0,0,0.42) !important;
  cursor: grab;
  user-select: none;
}
#textbookFocusDialog .textbook-focus-single-page.is-zoomed {
  cursor: grab;
}
#textbookFocusDialog .textbook-focus-single-page.is-dragging {
  cursor: grabbing;
  transition: none;
}

#textbookFocusDialog .textbook-focus-empty {
  color: rgba(255,255,255,0.8);
  font-size: 14px;
}

#textbookFocusPageIndicator {
  background: rgba(0,0,0,0.56);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
}

body.textbook-focus-active .learn-chat-fab,
body.textbook-focus-active .learn-chat-popover {
  display: none !important;
}

.textbook-focus-qa-toggle {
  position: fixed;
  right: 24px;
  bottom: 88px;
  z-index: 38;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.14);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: 0 16px 38px rgba(0,0,0,0.26);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
}

.textbook-focus-qa-toggle:hover,
.textbook-focus-qa-toggle.is-open {
  background: rgba(37, 99, 235, 0.92);
  border-color: rgba(147, 197, 253, 0.88);
}

.textbook-focus-qa-panel {
  position: fixed;
  top: 18px;
  right: 96px;
  bottom: 18px;
  z-index: 37;
  width: min(400px, calc(100vw - 132px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(203, 213, 225, 0.72);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.96);
  color: #0f172a;
  box-shadow: 0 24px 70px rgba(2, 6, 23, 0.34);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.textbook-focus-qa-panel.hidden {
  display: none;
}

.textbook-focus-qa-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(203, 213, 225, 0.68);
  cursor: move;
  user-select: none;
}

.textbook-focus-qa-eyebrow {
  font-size: 11px;
  line-height: 1.1;
  font-weight: 800;
  color: #2563eb;
  text-transform: uppercase;
}

.textbook-focus-qa-title {
  margin-top: 4px;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 850;
  color: #0f172a;
}

.textbook-focus-qa-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(148, 163, 184, 0.58);
  background: #fff;
  color: #334155;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.textbook-focus-qa-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 16px 16px 20px;
}

.textbook-focus-qa-scroll .followup-bubble {
  margin: 0 0 14px;
}

.textbook-focus-qa-scroll .fub-q {
  background: #dbeafe;
  color: #172554;
}

.textbook-focus-qa-scroll .fub-a {
  background: #fff;
  border: 1px solid rgba(203, 213, 225, 0.7);
}

.textbook-focus-qa-empty {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 14px;
  font-weight: 650;
  text-align: center;
}

.textbook-focus-qa-compose {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border-top: 1px solid rgba(203, 213, 225, 0.68);
  background: rgba(255,255,255,0.86);
}

.textbook-focus-qa-tools {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.textbook-focus-qa-select {
  min-width: 116px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  background: rgba(255,255,255,0.96);
  color: #334155;
  font-size: 13px;
  font-weight: 700;
  padding: 0 12px;
}

.textbook-focus-qa-web {
  height: 36px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  background: rgba(255,255,255,0.96);
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
}

.textbook-focus-qa-web.active {
  color: #2563eb;
  border-color: rgba(96, 165, 250, 0.72);
  background: rgba(219, 234, 254, 0.72);
}

.textbook-focus-qa-input {
  flex: 1 1 auto;
  min-height: 42px;
  max-height: 130px;
  resize: none;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.62);
  background: #fff;
  color: #0f172a;
  font-size: 14px;
  line-height: 1.45;
  padding: 10px 12px;
  outline: none;
}

.textbook-focus-qa-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.textbook-focus-qa-send {
  width: 42px;
  min-width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: #2563eb;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22);
}

.textbook-focus-qa-send:disabled {
  opacity: 0.44;
  cursor: not-allowed;
  box-shadow: none;
}

@media (max-width: 1179px) {
  .textbook-focus-qa-toggle {
    right: 18px;
    bottom: 84px;
    width: 58px;
    height: 58px;
  }

  .textbook-focus-qa-panel {
    top: 76px;
    left: 14px;
    right: 14px;
    bottom: 16px;
    width: auto;
  }
}

@media (max-width: 760px) {
  .textbook-focus-qa-compose {
    grid-template-columns: 1fr;
  }

  .textbook-focus-qa-send {
    justify-self: end;
  }

  .textbook-focus-qa-tools {
    flex-wrap: wrap;
  }
}
/* ── END Textbook Focus Modal ───────────────────────────────────────────── */

/* Learn Explain Col defaults to a 5.5:4.5 split */
.learn-explain-col {
  display: flex;
  flex-direction: column;
  background: var(--bg-main);
  position: relative;
}


.learn-body.chat-collapsed .learn-explain-col {
  border-right: none !important;
}

.learn-body.chat-collapsed .learn-chat-col,
.learn-body.chat-collapsed .learn-resizer {
  display: none !important;
}


.learn-body.explain-collapsed .learn-resizer {
  display: none !important;
}

.learn-body.explain-collapsed .learn-book-col {
  display: none !important;
}


.learn-body.explain-collapsed:not(.chat-collapsed) .learn-chat-col {
  min-width: 0 !important;
}

.learn-chat-scroll {
  display: flex;
  flex-direction: column;
}

.learn-chat-history {
  display: flex;
  flex-direction: column;
  gap: 16px;
}


.learn-body.chapter-overview-active .learn-book-col,
.learn-body.chapter-overview-active .learn-chat-col,
.learn-body.chapter-overview-active .learn-resizer,
.learn-body.chapter-overview-active .learn-explain-toolbar,
.learn-body.chapter-overview-active .learn-chat-fab{
  display: none !important;
}


/* Final split override: overview lessons keep both side buttons and a full-width Q&A composer. */


.learn-body.chapter-overview-split-active .learn-resizer {
  width: 6px !important;
  min-width: 6px !important;
  margin: 0 !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(148,163,184,0.18), rgba(255,255,255,0.08)) !important;
  opacity: 0.45 !important;
}

.learn-body.chapter-overview-split-active .learn-chat-col {
  background:
    radial-gradient(120% 62% at 52% 12%, rgba(125, 211, 252, 0.34), rgba(0, 0, 0, 0) 70%),
    radial-gradient(128% 66% at 58% 100%, rgba(110, 231, 183, 0.28), rgba(0, 0, 0, 0) 72%),
    linear-gradient(180deg, rgba(245, 249, 252, 0.98) 0%, rgba(238, 251, 246, 0.96) 100%) !important;
  background-attachment: scroll !important;
}


/* Final split override: overview lessons keep both side buttons and a full-width Q&A composer. */


/* Overview lesson pages still use the split Q&A workbench. */


/* Final final: overview lessons keep split Q&A controls active. */


.learn-body.chapter-overview-split-active .learn-followup-bar,
.learn-body[data-panel-focus="normal"] .learn-chat-col .learn-followup-bar {
  box-sizing: border-box !important;
  width: calc(100% - 32px) !important;
  max-width: calc(100% - 32px) !important;
  margin: 0 16px 18px !important;
}


.learn-body.chapter-overview-split-active .learn-followup-input,
.learn-body[data-panel-focus="normal"] .learn-chat-col .learn-followup-input {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}


.learn-body.chapter-overview-split-active .learn-explain-col {
  display: flex !important;
  min-width: 0 !important;
}

.learn-body.chapter-overview-split-active .learn-chat-col {
  display: flex !important;
  min-width: 0 !important;
}


.learn-body.chapter-overview-split-active .learn-followup-bar,
.learn-body:not(.chapter-overview-active) .learn-chat-col .learn-followup-bar {
  box-sizing: border-box !important;
  width: calc(100% - 32px) !important;
  max-width: calc(100% - 32px) !important;
  margin: 0 16px 18px !important;
}

.learn-body.chapter-overview-split-active .learn-followup-bar .followup-bar-row,
.learn-body:not(.chapter-overview-active) .learn-chat-col .learn-followup-bar .followup-bar-row {
  width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: 44px minmax(0, 1fr) 48px !important;
  grid-template-areas:
    "attach input send"
    ". mode web" !important;
}

.learn-body.chapter-overview-split-active .learn-followup-input,
.learn-body:not(.chapter-overview-active) .learn-chat-col .learn-followup-input {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}


.chapter-overview-shell {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 12px 0 34px;
}

/* Section overview option B: compact glass intro beside the study sequence. */
.chapter-overview-layout-b {
  display: grid !important;
  grid-template-columns: minmax(260px, .85fr) minmax(360px, 1.15fr) !important;
  gap: 36px !important;
  align-items: start !important;
  padding: 40px !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.42), rgba(218,246,242,.32), rgba(227,239,255,.38)) !important;
  box-shadow: 0 12px 30px rgba(42,76,92,.08) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
}
.chapter-overview-layout-b::before,
.chapter-overview-layout-b::after { display:none !important; }
.chapter-overview-layout-b .chapter-overview-hero,
.chapter-overview-layout-b .chapter-overview-list-block {
  min-height: 0 !important;
  padding: 8px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
.chapter-overview-layout-b .chapter-overview-title {
  max-width: 520px !important;
  font-size: clamp(30px, 4vw, 52px) !important;
  line-height: 1.08 !important;
}
.chapter-overview-layout-b .chapter-overview-summary { max-width: 560px !important; }
.chapter-overview-layout-b .chapter-overview-grid { display:grid !important; gap:12px !important; }
.chapter-overview-layout-b .chapter-overview-subcard {
  min-height: 72px !important;
  padding: 16px 18px !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.48) !important;
  box-shadow: 0 3px 12px rgba(42,76,92,.05) !important;
  transform:none !important;
}
.chapter-overview-layout-b .chapter-overview-subcard:hover { background:rgba(255,255,255,.78) !important; }
.chapter-overview-layout-b .chapter-overview-note-pin { display:none !important; }
@media (max-width: 820px) {
  .chapter-overview-layout-b { grid-template-columns: 1fr !important; padding: 24px !important; gap: 20px !important; }
}

.chapter-overview-map {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(360px, 1fr);
  gap: 28px;
  align-items: stretch;
  padding: 24px 28px 30px;
  border: 1px solid rgba(191, 219, 254, 0.9);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(248, 113, 113, 0.18) 0 2px, transparent 2px 100%),
    radial-gradient(circle, rgba(148, 163, 184, 0.22) 1px, transparent 1.25px),
    linear-gradient(115deg, rgba(255, 253, 244, 0.96), rgba(248, 252, 255, 0.9) 46%, rgba(240, 249, 255, 0.86));
  background-size: auto, 20px 20px, auto;
  background-position: 22px 0, 0 0, 0 0;
  box-shadow: 0 12px 0 rgba(203, 213, 225, 0.66), 0 18px 34px rgba(15, 23, 42, 0.06);
  position: relative;
  overflow: visible;
}

.chapter-overview-map::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 106px;
  height: 20px;
  transform: translateX(-50%) rotate(-1.8deg);
  border: 1px solid rgba(125, 211, 252, 0.72);
  border-radius: 4px;
  background:
    repeating-linear-gradient(-35deg, rgba(186, 230, 253, 0.82) 0 9px, rgba(219, 234, 254, 0.7) 9px 18px);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.08);
  pointer-events: none;
}

.chapter-overview-hero {
  background: rgba(255, 253, 244, 0.94);
  border: 1px solid rgba(253, 224, 71, 0.62);
  border-radius: 8px;
  min-height: 360px;
  padding: 42px 34px 34px;
  box-shadow: 0 7px 0 rgba(250, 204, 21, 0.2), 0 18px 40px rgba(15, 23, 42, 0.06);
  transform: rotate(-0.35deg);
  display: flex;
  align-items: center;
  position: relative;
}

.chapter-overview-hero::after {
  content: "";
  position: absolute;
  right: 24px;
  bottom: 22px;
  width: 86px;
  height: 12px;
  border-radius: 999px;
  background: repeating-linear-gradient(-35deg, rgba(253, 224, 71, 0.78) 0 9px, rgba(254, 240, 138, 0.48) 9px 18px);
  opacity: 0.8;
  transform: rotate(-2deg);
}

.chapter-overview-hero-main {
  min-width: 0;
}

.chapter-overview-meter {
  width: auto;
  min-width: 132px;
  padding: 11px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(191, 219, 254, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.chapter-overview-meter strong {
  display: block;
  font-size: 20px;
  line-height: 1.1;
  color: #0F172A;
}

.chapter-overview-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748B;
}

.chapter-overview-code {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 7px;
  background: rgba(219, 234, 254, 0.9);
  border: 1px dashed rgba(37, 99, 235, 0.5);
  color: #1D4ED8;
  font-weight: 800;
  transform: rotate(-2.5deg);
}

.chapter-overview-eyebrow,
.chapter-overview-list-eyebrow {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #64748B;
  font-family: 'DM Mono', monospace;
  margin-bottom: 7px;
}

.chapter-overview-title {
  margin: 0;
  width: fit-content;
  max-width: 100%;
  font-size: clamp(38px, 4vw, 60px);
  line-height: 1.06;
  color: #0F172A;
  letter-spacing: 0;
  background:
    linear-gradient(180deg, transparent 60%, rgba(253, 224, 71, 0.74) 60%);
  padding: 0 3px 1px;
}

.chapter-overview-title::after {
  display: none !important;
}

.chapter-overview-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f3f3f2;
  color: #111111;
  border: 1px solid #d6d6d3;
  font-size: 12px;
  font-weight: 600;
}

.chapter-overview-summary {
  display: none;
}

.chapter-overview-list-block {
  margin-top: 0;
  min-width: 0;
  padding: 0;
  align-self: center;
}

.chapter-overview-prelude {
  margin-top: 8px;
  padding: 22px 24px;
  border-radius: 22px;
  border: 1px solid rgba(203, 213, 225, 0.95);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
  color: #1E293B;
}

.chapter-overview-shell-with-prelude .chapter-overview-list-block {
  margin-top: 16px;
}

.chapter-overview-prelude h1,
.chapter-overview-prelude h2,
.chapter-overview-prelude h3 {
  color: #0F172A;
}

.chapter-overview-prelude p,
.chapter-overview-prelude li {
  font-size: 15px;
  line-height: 1.8;
}

.chapter-overview-prelude-loading,
.chapter-overview-prelude-missing {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748B;
}

.chapter-overview-list-title {
  margin: 0;
  width: fit-content;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.16;
  color: #0F172A;
  background:
    linear-gradient(180deg, transparent 58%, rgba(191, 219, 254, 0.8) 58%);
  padding: 0 4px 1px;
}

.chapter-overview-list-title::after {
  display: none !important;
}

.chapter-overview-list-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 6px;
  border-bottom: 2px dotted rgba(148, 163, 184, 0.44);
}

.chapter-overview-count {
  flex: 0 0 auto;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748B;
}

.chapter-overview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 13px;
  padding-top: 18px;
}

.chapter-overview-subcard {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(147, 197, 253, 0.82);
  border-radius: 8px;
  min-height: 68px;
  padding: 12px 14px 12px 12px;
  background:
    linear-gradient(90deg, rgba(219, 234, 254, 0.34) 0 8px, transparent 8px 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 255, 0.95));
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
  box-shadow: 0 5px 0 rgba(203, 213, 225, 0.58), 0 14px 26px rgba(15, 23, 42, 0.05);
  position: relative;
  overflow: visible;
  display: flex;
  align-items: center;
  gap: 14px;
  isolation: isolate;
}

.chapter-overview-subcard::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 34px;
  width: 56px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid rgba(191, 219, 254, 0.65);
  background: repeating-linear-gradient(-35deg, rgba(219, 234, 254, 0.72) 0 8px, rgba(240, 249, 255, 0.78) 8px 16px);
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.08);
  transform: rotate(-1.8deg);
  pointer-events: none;
  z-index: 1;
}

.chapter-overview-subcard::after {
  content: "";
  position: absolute;
  inset: 9px 10px auto auto;
  width: 18px;
  height: 18px;
  border-top: 1px solid rgba(251, 191, 36, 0.7);
  border-right: 1px solid rgba(251, 191, 36, 0.7);
  background: linear-gradient(45deg, transparent 50%, rgba(254, 240, 138, 0.55) 51%);
  border-radius: 0 5px 0 0;
  opacity: 0.72;
}

.chapter-overview-subcard:hover {
  transform: translateY(-3px) rotate(-0.28deg);
  border-color: rgba(96, 165, 250, 0.9);
  background:
    linear-gradient(90deg, rgba(254, 240, 138, 0.42) 0 8px, transparent 8px 100%),
    linear-gradient(180deg, rgba(255, 251, 235, 0.98), rgba(255, 255, 255, 0.96));
  box-shadow: 0 8px 0 rgba(191, 219, 254, 0.72), 0 18px 32px rgba(15, 23, 42, 0.08);
}

.chapter-overview-subcard-marker {
  flex: 0 0 auto;
  width: 46px;
  height: 40px;
  border-radius: 12px 10px 14px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(96, 165, 250, 0.78);
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 255, 255, 0.92) 0 4px, transparent 5px),
    linear-gradient(160deg, rgba(239, 246, 255, 0.96), rgba(219, 234, 254, 0.82));
  color: #1D4ED8;
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  box-shadow: inset 0 -4px 0 rgba(147, 197, 253, 0.24), 0 3px 0 rgba(191, 219, 254, 0.8);
  transform: rotate(-2.2deg);
  position: relative;
}

.chapter-overview-subcard-marker::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 10px;
  width: 25px;
  height: 9px;
  border-radius: 4px;
  background: repeating-linear-gradient(90deg, rgba(254, 240, 138, 0.82) 0 6px, rgba(253, 224, 71, 0.55) 6px 12px);
  border: 1px solid rgba(251, 191, 36, 0.44);
  opacity: 0.86;
  transform: rotate(3deg);
}

.chapter-overview-subcard-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}

.chapter-overview-subcard-title {
  display: block;
  min-width: 0;
  font-size: 15px;
  line-height: 1.24;
  color: #0F172A;
  font-weight: 800;
}

.chapter-overview-subcard-index {
  display: none;
}

.chapter-overview-open-cue {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.8);
  background: rgba(239, 246, 255, 0.9);
  color: #2563eb;
  font-size: 0;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 -3px 0 rgba(191, 219, 254, 0.56);
}

.chapter-overview-open-cue::after {
  content: "→";
  font-family: 'DM Mono', monospace;
  font-size: 17px;
  line-height: 1;
}

.chapter-overview-subcard-brief,
.chapter-overview-subcard-summary,
.chapter-overview-subcard-details,
.chapter-overview-open-btn {
  display: none !important;
}

@media (max-width: 980px) {
  .chapter-overview-map {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .chapter-overview-hero {
    min-height: 0;
    padding: 28px 24px;
  }
}

@media (max-width: 720px) {
  .chapter-overview-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1400px) {
  .chapter-overview-shell {
    width: min(1280px, calc(100% - 56px));
  }
}

.learn-chat-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}


@media (max-width: 900px) {
  .chapter-overview-hero {
    grid-template-columns: 1fr;
  }

  
  .learn-chat-empty-state {
    min-height: 190px;
    border-radius: 24px;
  }
}


.welcome-inner-override {
  width: 100%;
  max-width: 900px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.welcome-tag {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-accent);
  margin-bottom: 12px;
}
.welcome-tag::after { content: 'A Q U A R I U S   •   A I   T U T O R'; }

.welcome-h1 {
  margin: 0 0 12px;
  white-space: nowrap; /* 强制单行不换行 */
}
.welcome-h1::after {
  content: 'Signal Processing  &  Linear Systems';
}

.welcome-sub {
  margin: 0 0 40px;
}
.welcome-sub::after { content: ''; }

/* Big Search Box */
.search-box {
  margin-bottom: 24px;
}

.search-box-toolbar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.search-box-select {
  min-width: 112px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(255, 255, 255, 0.74);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
}

.search-box-web-toggle {
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(255, 255, 255, 0.74);
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.search-box-web-toggle.active {
  color: #2563eb;
}

.search-box-web-toggle:hover {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.22);
  background: rgba(255, 255, 255, 0.92);
}


.search-icon {
  color: var(--text-muted);
  padding-bottom: 6px;
  margin-right: 12px;
  display: flex;
  align-items: center;
}

.search-input {
  flex: 1;
  background: transparent;
  border: none;
  font-family: inherit;
  line-height: 1.5;
  color: var(--text-primary);
  resize: none;
  outline: none;
  max-height: 200px;
  padding: 4px 0;
}
.search-input::placeholder { color: var(--text-muted); }

.search-send {
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  margin-left: 12px;
  margin-bottom: 2px;
}

.search-send:not([disabled]) {
  background: var(--text-primary);
  color: #fff;
}

/* Quick Chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 640px;
}

.chip {
  cursor: pointer;
  transition: all 0.2s;
}

/* chip text is set by JS innerHTML, not ::after */


/* ──────────────────────────────────────────────────────────
   ANSWER SCREEN
────────────────────────────────────────────────────────── */
.answer {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Top Bar */
.answer-bar {
  height: var(--header-height);
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background: var(--bg-panel);
}

.back-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.back-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.question-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 400px;
}

.stop-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.15s;
}

.stop-btn:hover {
  background: rgba(220, 38, 38, 0.15);
  border-color: rgba(220, 38, 38, 0.4);
}

.stop-btn.hidden { display: none; }

.status-chip {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  text-transform: capitalize;
}

.status-chip.idle { display: none; }
.status-chip.working {
  background: rgba(37, 99, 235, 0.1);
}
.status-chip.done {
  color: var(--text-secondary);
  background: var(--bg-hover);
}
.status-chip.error {
  color: var(--danger);
  background: rgba(239, 68, 68, 0.1);
}

/* Answer Layout (Two Cols) */
.answer-cols {
  flex: 1;
  display: flex;
  overflow: hidden;
  --attachment-source-width: min(44vw, 520px);
}

.attachment-source-panel {
  flex: 0 0 var(--attachment-source-width);
  width: var(--attachment-source-width);
  min-width: 260px;
  max-width: 68%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f8fbff;
  border-right: 1px solid var(--border);
}

.attachment-source-panel.hidden {
  display: none;
}

.attachment-source-head {
  min-height: 66px;
  padding: 14px 16px 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(240,249,255,0.96));
}

.attachment-source-kicker {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #0e7490;
}

.attachment-source-title {
  max-width: 380px;
  margin-top: 4px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-source-close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: rgba(255,255,255,0.85);
  color: var(--text-muted);
  cursor: pointer;
  font-weight: 800;
}

.attachment-source-close:hover {
  color: var(--text-primary);
  border-color: rgba(15, 23, 42, 0.24);
}

.attachment-source-tabs {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  overflow-x: auto;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
  background: rgba(255,255,255,0.72);
}

.attachment-source-tabs:empty {
  display: none;
}

.attachment-source-tab {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  background: #fff;
  color: var(--text-secondary);
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.attachment-source-tab.active,
.attachment-source-tab:hover {
  border-color: rgba(14, 116, 144, 0.38);
  background: #e0f7ff;
  color: #0e7490;
}

.attachment-source-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 16px;
}

.attachment-source-figure {
  min-height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.attachment-source-image-btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: zoom-in;
  text-align: left;
}

.attachment-source-image-btn img {
  width: 100%;
  height: auto;
  max-height: none;
  display: block;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
}

.attachment-source-zoom-hint {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 11px;
  font-weight: 750;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  pointer-events: none;
}

.attachment-source-image-btn:hover .attachment-source-zoom-hint,
.attachment-source-image-btn:focus-visible .attachment-source-zoom-hint {
  opacity: 1;
  transform: translateY(0);
}

.attachment-source-image-btn:focus-visible {
  outline: 3px solid rgba(14, 165, 233, 0.35);
  outline-offset: 3px;
}

.attachment-source-figure figcaption {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
  word-break: break-word;
}

.attachment-source-pdf {
  height: 100%;
  min-height: 520px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
}

.attachment-source-pdf object,
.attachment-source-pdf iframe {
  width: 100%;
  height: 100%;
  min-height: 520px;
  border: 0;
}

.attachment-source-empty {
  height: 100%;
  min-height: 220px;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}

.attachment-source-file-icon {
  width: 72px;
  height: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: rgba(14, 116, 144, 0.1);
  color: #0e7490;
  font-family: 'DM Mono', monospace;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.attachment-source-file-name {
  max-width: 100%;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.35;
  word-break: break-word;
}

.attachment-source-file-meta {
  max-width: 100%;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
  word-break: break-word;
}

.attachment-source-word {
  min-height: 100%;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.attachment-source-word-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.95), rgba(255, 255, 255, 0.95));
}

.attachment-source-word .attachment-source-file-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  font-size: 13px;
}

.attachment-source-word-text {
  margin: 0;
  padding: 18px;
  color: var(--text-primary);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

.attachment-image-modal {
  position: fixed;
  inset: 0;
  z-index: 13000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.attachment-image-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.68);
  backdrop-filter: blur(8px);
}

.attachment-image-dialog {
  position: relative;
  z-index: 1;
  width: min(1120px, 94vw);
  height: min(90vh, 920px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(203, 213, 225, 0.72);
  border-radius: 14px;
  background: #f8fafc;
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.34);
}

.attachment-image-head {
  min-height: 62px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(203, 213, 225, 0.76);
  background: #ffffff;
}

.attachment-image-kicker {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #0e7490;
}

.attachment-image-title {
  max-width: min(760px, 70vw);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 850;
  color: #0f172a;
}

.attachment-image-close {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  border-radius: 9px;
  background: #ffffff;
  color: #475569;
  cursor: pointer;
  font-size: 17px;
  font-weight: 850;
}

.attachment-image-close:hover {
  border-color: rgba(14, 116, 144, 0.45);
  color: #0e7490;
}

.attachment-image-stage {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background:
    linear-gradient(90deg, rgba(148, 163, 184, 0.12) 1px, transparent 1px),
    linear-gradient(180deg, rgba(148, 163, 184, 0.12) 1px, transparent 1px),
    #f8fafc;
  background-size: 24px 24px, 24px 24px, auto;
}

.attachment-image-stage img {
  max-width: 100%;
  max-height: none;
  height: auto;
  display: block;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
}

.answer-compare-resizer {
  flex: 0 0 11px;
  width: 11px;
  position: relative;
  cursor: col-resize;
  background: linear-gradient(90deg, rgba(15,23,42,0.08), rgba(15,23,42,0.02));
}

.answer-compare-resizer::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 48px;
  border-radius: 99px;
  background: rgba(14, 116, 144, 0.42);
  transform: translate(-50%, -50%);
}

.answer-compare-resizer:hover::before,
.answer-compare-resizer:focus-visible::before {
  background: #0e7490;
}

.answer-compare-resizer.hidden {
  display: none;
}

body.answer-compare-resizing {
  cursor: col-resize;
  user-select: none;
}

@media (max-width: 820px) {
  .answer-cols {
    flex-direction: column;
  }

  .attachment-source-panel {
    flex: 0 0 42%;
    width: 100%;
    max-width: none;
    min-width: 0;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .answer-compare-resizer {
    display: none !important;
  }

  .attachment-source-body {
    padding: 12px;
  }

  .attachment-source-pdf,
  .attachment-source-pdf object,
  .attachment-source-pdf iframe {
    min-height: 300px;
  }

  .attachment-source-title {
    max-width: calc(100vw - 120px);
  }
}

/* Left: Book Panel (Hidden completely as requested to simulate d2l.ai clean view) */
.col-book,
.learn-book-col {
  display: none !important;
}

/* Make explanation area span everything and look like a beautiful document */
.col-explain,
.learn-explain-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--bg-main);
  align-items: center; /* Center the text container horizontally */
}

/* The scrolling container inside the col */
.explain-scroll,
.learn-explain-scroll {
  width: 100%;
  max-width: 900px; /* Wide, clean reading column like d2l.ai */
  margin: 0 auto;
  flex: 1;
  overflow-y: auto;
  padding: 40px 16px 140px; /* Pad bottom heavily so followup bar doesn't overlap text */
  scroll-behavior: smooth;
}

/* Hide scrollbars for cleaner Notion-like look */
.explain-scroll::-webkit-scrollbar,
.learn-explain-scroll::-webkit-scrollbar {
  width: 8px;
}
.explain-scroll::-webkit-scrollbar-thumb,
.learn-explain-scroll::-webkit-scrollbar-thumb {
  background: rgba(37,99,235,0.2);
  border-radius: 4px;
}

.explain-body,
.learn-explain-body {
  /* Bumped up for readability */
  width: 100%;
}

.col-title {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-panel);
}
.col-title::after { content: 'Content Reference'; margin-left: -5px; }

.col-count {
  font-size: 11px;
  background: var(--bg-hover);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
}

.book-pages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.book-pages::-webkit-scrollbar { width: 6px; }
.book-pages::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); }

.col-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  gap: 12px;
}
.col-empty p::after { content: 'No pages matched or waiting for search.'; font-size: 13px;}

.page-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.page-card-head {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.page-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(37, 99, 235, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.page-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}
.page-image {
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  margin-bottom: 12px;
  display: block;
}
.page-summary {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* Right: Explanation Panel */
.col-explain {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg-main);
  position: relative;
}

/* Progress Action Steps */
.steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding: 16px 32px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
}

.web-sources-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--accent);
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.15s;
}
.web-sources-toggle:hover { background: rgba(37, 99, 235, 0.14); }
.web-sources-toggle.open > span:first-child { display: inline-block; transform: rotate(-180deg); }
.web-sources-toggle.hidden { display: none; }

.web-sources-inline,
.search-live-sources,
.hyperknow-links-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px 0 0 0;
  max-height: 380px;
  overflow-y: auto;
}
.web-sources-inline.hidden,
.search-live-sources.hidden { display: none; }

.hyperknow-links-container {
  margin: 0 0 18px 0;
  padding: 0 0 2px 0;
}
.hyperknow-links-header,
.search-tree-title {
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  padding: 0 0 8px 0;
}

.web-source-inline-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 2px;
  border-radius: 10px;
  background: transparent;
  border: none;
  text-decoration: none;
  transition: background 0.15s ease;
}
.web-source-inline-card.compact {
  padding: 5px 2px;
}
.web-source-inline-card:hover {
  background: rgba(15, 23, 42, 0.04);
}
.wsic-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.wsic-type-badge {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
  background: #E2E8F0;
  color: #334155;
}
.wsic-fav {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px;
  min-height: 16px;
  border-radius: 4px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
  box-shadow: 0 0 0 1px rgba(15,23,42,0.06);
}
.hidden { display: none !important; }
.wsic-body { min-width: 0; flex: 1; }
.wsic-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}
.wsic-title {
  font-size: 14px;
  line-height: 1.35;
  font-weight: 500;
  color: #1f2937;
  min-width: 0;
  flex: 0 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(100%, 520px);
}
.wsic-domain-pill {
  font-size: 11px;
  color: #9ca3af;
  background: #f3f4f6;
  border: none;
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
}
.wsic-url,
.wsic-snippet,
.wsic-meta-row,
.wsic-type-label,
.wsic-group-header,
.wsic-arrow {
  display: none;
}
.search-live-more {
  font-size: 12px;
  color: var(--text-muted);
  padding-left: 26px;
  padding-top: 2px;
}

.step {
  display: flex;
  align-items: center;
  gap: 8px;
}

.step-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.step-dot.active {
  border-color: var(--accent);
}
.step-dot.active::after {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}

.step-dot.done {
  border-color: var(--success);
  background: var(--success);
}
.step-dot.done::after {
  content: '';
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-top: -2px;
}

.step-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}
.step:has(.active) .step-label { color: var(--text-primary); }
.step:has(.done) .step-label { color: var(--text-secondary); }

#step-1 .step-label::after { content: 'Extract concepts & formulas'; }
#step-2 .step-label::after { content: 'Search the web'; }
#step-3 .step-label::after { content: 'Synthesize answer'; }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

/* Explanation Content Area merged into the top declarations */

.explain-body p { margin-top: 0; margin-bottom: 1em; }
.explain-body p:last-child { margin-bottom: 0; }
.explain-body h1, .explain-body h2, .explain-body h3, .explain-body h4 {
  font-weight: 600;
  letter-spacing: -0.3px;
  margin: 1.5em 0 0.5em;
  color: var(--text-primary);
}
.explain-body h1:first-child, .explain-body h2:first-child { margin-top: 0; }

.explain-body strong { font-weight: 600; color: #000; }
.explain-body ul, .explain-body ol { margin: 0 0 1em; padding-left: 20px; }
.explain-body li { margin-bottom: 0.25em; }

.explain-body code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13.5px;
  background: rgba(139,92,246,0.08);
  padding: 0.2em 0.4em;
  border-radius: 4px;
  color: var(--purple);
}

.explain-body pre {
  background: var(--bg-body);
  border: 1px solid var(--border);
  padding: 16px;
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: 1.5em 0;
}
.explain-body pre code {
  background: none;
  padding: 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.explain-body mjx-container {
  color: var(--text-primary) !important;
}

.main-chat-thread {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 20px;
}

.main-chat-turn {
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

.main-chat-label {
  margin-bottom: 6px;
  font-family: 'DM Mono', monospace;
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.main-chat-turn-user {
  align-self: flex-end;
  width: min(74%, 680px);
  text-align: right;
  align-items: flex-end;
}

.main-chat-user-text {
  display: inline-block;
  max-width: 100%;
  padding: 13px 16px;
  border: 1px solid rgba(14, 116, 144, 0.2);
  border-radius: 18px 18px 5px 18px;
  background: #e9f8ff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 8px 18px rgba(14, 116, 144, 0.1);
  font-weight: 750;
  line-height: 1.55;
  text-align: left;
  word-break: break-word;
}

.main-chat-turn-assistant {
  align-self: flex-start;
  width: 100%;
  align-items: flex-start;
}

.main-chat-answer {
  width: min(100%, 980px);
  padding: 22px 24px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 18px 18px 18px 5px;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 10px 26px rgba(15, 23, 42, 0.07);
}

.main-chat-turn-pending .main-chat-answer {
  background: #fbfdff;
}

.main-chat-answer > :first-child {
  margin-top: 0;
}

.main-chat-answer > :last-child {
  margin-bottom: 0;
}

.main-chat-answer .search-progress-card {
  width: 100%;
  margin: 0;
}

:root[data-theme="dark"] .main-chat-label {
  color: #94a3b8;
}

:root[data-theme="dark"] .main-chat-user-text {
  border-color: rgba(56, 189, 248, 0.32);
  background: rgba(14, 116, 144, 0.35);
  box-shadow: 0 8px 18px rgba(8, 47, 73, 0.22);
  color: #e0f2fe;
}

:root[data-theme="dark"] .main-chat-answer {
  border-color: #2b3a50;
  background: rgba(21, 30, 43, 0.92);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
}

@media (max-width: 760px) {
  .main-chat-turn-user {
    width: min(92%, 560px);
  }

  .main-chat-answer {
    padding: 18px 16px;
    border-radius: 16px 16px 16px 5px;
  }
}

/* References */
.sources {
  width: 100%;
  max-width: 900px;
  margin: 0 auto 24px;
}

.references-header {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.92));
  color: var(--text-primary);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.references-header:hover {
  border-color: rgba(14, 116, 144, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 249, 255, 0.9));
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.references-chevron {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(14, 116, 144, 0.08);
  color: #0e7490;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  transform: rotate(-90deg);
  transition: transform 0.16s ease;
}

.sources:not(.references-collapsed) .references-chevron {
  transform: rotate(0deg);
}

.references-title {
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.01em;
}

.references-count {
  justify-self: end;
  color: var(--text-muted);
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.references-body {
  margin-top: 10px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
}

.sources.references-collapsed .references-body {
  display: none;
}

.sources-group {
  margin-bottom: 18px;
}

.sources-group:last-child {
  margin-bottom: 0;
}

.sources-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #64748b;
  margin-bottom: 10px;
  text-transform: uppercase;
}
#bookSourcesCount::before { content: '('; }
#bookSourcesCount::after { content: ')'; }
#webSourcesCount::before { content: '('; }
#webSourcesCount::after { content: ')'; }

.sources-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(190px, 240px);
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 10px;
}
.sources-rail::-webkit-scrollbar { height: 6px; }
.sources-rail::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.35); border-radius: var(--radius-pill); }

.source-empty {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
}

.source-card {
  min-height: 92px;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  padding: 12px;
  text-decoration: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
  display: flex;
  flex-direction: column;
}
.source-page-link {
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.source-page-link:hover,
.source-link:hover {
  border-color: rgba(14, 116, 144, 0.42);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.source-index {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 800;
  color: #0e7490;
  margin-bottom: 7px;
  text-transform: uppercase;
}

.source-title {
  font-size: 13px;
  font-weight: 760;
  color: var(--text-primary);
  margin-bottom: 7px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}

.source-meta {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}
.source-meta img {
  width: 14px;
  height: 14px;
  border-radius: 2px;
}

/* Follow-up Bar */
.followup-bar {
  position: absolute;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.source-page-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.source-page-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(8px);
}

.source-page-dialog {
  position: relative;
  z-index: 1;
  width: min(920px, 94vw);
  height: min(86vh, 980px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(203, 213, 225, 0.85);
  border-radius: 14px;
  background: #f8fafc;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
}

.source-page-head {
  min-height: 68px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(203, 213, 225, 0.85);
  background: #ffffff;
}

.source-page-kicker {
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2563eb;
}

.source-page-title {
  margin-top: 5px;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 800;
  color: #0f172a;
}

.source-page-meta {
  margin-top: 3px;
  font-size: 12px;
  color: #64748b;
}

.source-page-close {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  background: #fff;
  color: #475569;
  cursor: pointer;
  font-size: 16px;
}

.source-page-stage {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  justify-content: center;
  padding: 22px;
}

.source-page-stage img {
  width: min(100%, 780px);
  height: max-content;
  object-fit: contain;
  align-self: flex-start;
  background: #fff;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.14);
}

.followup-input {
  flex: 1;
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  font-family: inherit;
  line-height: 1.5;
  resize: none;
  outline: none;
  max-height: 150px;
  transition: border-color 0.2s;
}

.followup-input:focus {
  border-color: var(--border-focus);
}

.followup-send {
  background: var(--text-primary);
  color: #fff;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
  margin-bottom: 1px;
}

.followup-send[disabled] {
  background: var(--bg-hover);
  cursor: not-allowed;
}

.followup-send:not([disabled]):hover {
  background: #000;
  transform: translateY(-1px);
}

.error-box {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: var(--radius-md);
  padding: 16px;
  color: var(--danger);
  font-size: 14px;
}
.error-box strong { display: block; margin-bottom: 4px; }
.error-box p { margin: 0; font-size: 13px; }

/* ============================================================
   LEARN MODE OVERLAY
   ============================================================ */

/* Intro card */
.learn-intro-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex: 1;
  padding: 48px 60px;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}
.learn-intro-text {
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-secondary);
  text-align: center;
  white-space: pre-line;
}
.learn-start-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/* Body: left book + right explain */
.learn-body {
  display: flex;
  flex-direction: column;
}
.learn-body.hidden { display: none; }

/* Left: book pages */
.learn-book-col {
  width: 46%;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--bg-panel);
  overflow: hidden;
}

.learn-book-pages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.learn-empty { font-size: 13px; color: var(--text-muted); text-align: center; padding: 32px 0; }

.learn-web-toggle.hidden { display: none; }
.learn-web-sources.hidden { display: none; }

/* Right: explanation */
.learn-explain-toolbar {
  z-index: 12;
  -webkit-backdrop-filter: blur(10px);
  flex-shrink: 0;
}

.learn-kp-nav {
  display: none;
}


.learn-kp-btn {
  width: 34px;
  height: 34px;
  justify-self: center;
  border-radius: 999px;
  border: 1px solid #DBEAFE;
  background: #FFFFFF;
  color: #2563EB;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.learn-kp-btn:hover:not(:disabled) {
  background: #EFF6FF;
  border-color: #93C5FD;
  transform: translateY(-1px);
}
.learn-kp-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.learn-kp-meta {
  min-width: 0;
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.learn-kp-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94A3B8;
  font-family: 'DM Mono', monospace;
}
.learn-visual-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.learn-visual-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.03em;
  border: 1px solid transparent;
  font-family: 'DM Mono', monospace;
}
.learn-visual-pair-shell {
  margin: 22px 0 26px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(191, 219, 254, 0.95);
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.98) 0%, rgba(239, 246, 255, 0.94) 100%);
  box-shadow: 0 16px 40px rgba(37, 99, 235, 0.08);
}
.learn-visual-pair-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.learn-visual-pair-subtitle {
  margin: 0 0 14px;
  color: #334155;
  font-size: 13px;
  line-height: 1.65;
  max-width: 72ch;
}
.learn-visual-pair-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.learn-visual-pair-card {
  min-width: 0;
  padding: 14px 12px 16px;
  border-radius: 16px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(255, 255, 255, 0.82);
}
.learn-visual-pair-card-title {
  margin-bottom: 10px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #64748B;
  font-family: 'DM Mono', monospace;
}
.learn-visual-pair-card-book {
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.04);
}
.learn-visual-pair-card-generated {
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.05);
}
.learn-visual-pair-card .learn-visual-chip-row-inline {
  justify-content: flex-start;
  margin-top: 0;
}
.learn-visual-pair-card p:last-child {
  margin-bottom: 0;
}
.learn-kp-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #111;
  text-align: center;
  /* FIX: Allow wrapping and limit lines */
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  width: 100%;
}

.learn-edge-toggle-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.learn-edge-toggle-icon {
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.learn-side-restore {
  position: absolute;
  top: 20px;
  z-index: 18;
  min-width: 88px;
  height: 44px;
  padding: 0 14px;
  border-radius: 18px;
  border: 1px solid rgba(186, 178, 162, 0.82);
  background:
    linear-gradient(180deg, rgba(255, 250, 243, 0.98) 0%, rgba(247, 242, 234, 0.98) 100%);
  color: #31415f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow:
    0 12px 24px rgba(145, 156, 178, 0.14),
    0 3px 8px rgba(145, 156, 178, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.94);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.015em;
  overflow: hidden;
  transform: rotate(-1.2deg);
}

.learn-side-restore:hover {
  background:
    linear-gradient(180deg, rgba(255, 253, 249, 1) 0%, rgba(250, 246, 239, 1) 100%);
  border-color: rgba(164, 154, 138, 0.9);
  transform: translateY(-1px) rotate(-1.2deg);
}

.learn-side-restore.hidden {
  display: none !important;
}

.learn-side-restore.learn-side-restore-explain{
  min-width: 92px;
  height: 46px;
  padding: 0 16px;
  border-radius: 18px;
  border: 1px solid rgba(186, 178, 162, 0.82);
  background:
    linear-gradient(180deg, rgba(255, 250, 243, 0.98) 0%, rgba(247, 242, 234, 0.98) 100%);
  color: #31415f;
  box-shadow:
    0 12px 24px rgba(145, 156, 178, 0.14),
    0 3px 8px rgba(145, 156, 178, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.94);
  position: relative;
  overflow: hidden;
}

.learn-side-restore.learn-side-restore-explain::before{
  content: "";
  position: absolute;
  inset: 8px 10px;
  border: 1px dashed rgba(150, 161, 180, 0.34);
  border-radius: 13px;
  pointer-events: none;
}

.learn-side-restore.learn-side-restore-explain::after{
  content: "";
  position: absolute;
  top: -8px;
  right: 16px;
  width: 34px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(191, 221, 255, 0.58), rgba(161, 201, 255, 0.34));
  opacity: 0.75;
  transform: rotate(6deg);
  box-shadow: 0 2px 8px rgba(114, 150, 209, 0.18);
  pointer-events: none;
}

:root[data-theme="dark"] .learn-side-restore.learn-side-restore-chat{
  background:
    linear-gradient(180deg, rgba(42, 35, 30, 0.96) 0%, rgba(30, 25, 22, 0.98) 100%);
  border-color: rgba(131, 113, 94, 0.62);
  color: #f3e8d8;
  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

:root[data-theme="dark"] .learn-side-restore.learn-side-restore-chat::before{
  border-color: rgba(229, 205, 169, 0.18);
}

:root[data-theme="dark"] .learn-side-restore.learn-side-restore-chat::after{
  background: linear-gradient(180deg, rgba(127, 182, 255, 0.28), rgba(99, 150, 223, 0.12));
}

:root[data-theme="dark"] .learn-side-restore.learn-side-restore-explain{
  background:
    linear-gradient(180deg, rgba(42, 35, 30, 0.96) 0%, rgba(30, 25, 22, 0.98) 100%);
  border-color: rgba(131, 113, 94, 0.62);
  color: #f3e8d8;
  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

:root[data-theme="dark"] .learn-side-restore.learn-side-restore-explain::before{
  border-color: rgba(229, 205, 169, 0.18);
}

:root[data-theme="dark"] .learn-side-restore.learn-side-restore-explain::after{
  background: linear-gradient(180deg, rgba(127, 182, 255, 0.28), rgba(99, 150, 223, 0.12));
}


.learn-side-restore-chat {
  right: 14px;
}

.learn-chat-fab {
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 68px;
  height: 68px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.learn-chat-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 42px rgba(17, 17, 17, 0.22), 0 6px 16px rgba(17, 17, 17, 0.12);
}

.learn-chat-fab:active {
  cursor: grabbing;
}

.learn-chat-fab-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.learn-chat-popover {
  right: 28px;
  bottom: 110px;
  background: rgba(255, 255, 255, 0.98);
  z-index: 72;
  flex-direction: column;
  overflow: hidden;
}

.learn-chat-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.96);
  user-select: none;
}

.learn-chat-popover-title {
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

.learn-chat-popover-actions {
  display: inline-flex;
  align-items: center;
}


.learn-chat-popover-body {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.learn-chat-popover-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  background: #fcfcfb;
}

.learn-chat-popover-input {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--border);
  background: #fff;
}

.learn-chat-popover-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.learn-chat-popover-input .learn-followup-input {
  min-height: 42px;
  max-height: 110px;
  width: 100%;
}

.learn-chat-popover-select {
  min-width: 92px;
  font-size: 12px !important;
  padding: 4px 8px !important;
}

.learn-chat-popover-input .learn-followup-send {
  align-self: flex-end;
}

.lecture-overlay-btn {
  position: relative;
  z-index: 2;
  min-width: 58px;
  height: 54px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(147, 197, 253, 0.95);
  background: rgba(255, 255, 255, 0.98);
  color: #1D4ED8;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.16), 0 2px 8px rgba(15, 23, 42, 0.08);
  cursor: pointer;
  opacity: 0.96;
  transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.lecture-overlay-btn::before {
  content: '';
  position: absolute;
  inset: -28px;
}

.lecture-overlay-btn:hover {
  opacity: 1 !important;
  background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
  border-color: rgba(96, 165, 250, 0.98);
  box-shadow: 0 18px 38px rgba(37, 99, 235, 0.22), 0 4px 12px rgba(15, 23, 42, 0.10);
  transform: translateY(-1px);
}

.lecture-overlay-btn.hidden {
  display: none !important;
}

.lecture-overlay-btn:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}

.lecture-overlay-btn:disabled:hover {
  opacity: 0.32 !important;
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(147, 197, 253, 0.95);
  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.16), 0 2px 8px rgba(15, 23, 42, 0.08);
  transform: none;
}

.learn-view-selector {
  flex: 0 0 auto;
}

.learn-kp-nav {
  flex: 0 1 auto;
}

.learn-explain-overlay-rail .lecture-overlay-btn {
  pointer-events: auto;
}

.learn-focus-page-indicator {
  position: absolute;
  right: 18px;
  bottom: 18px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(219, 234, 254, 0.82);
  color: #2563EB;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.textbook-focus-page-indicator {
  z-index: 2;
}

.learn-explain-scroll.textbook-mode {
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.learn-explain-scroll.textbook-mode #learnBookOverlay {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: block !important;
  width: 100%;
  min-height: 100%;
  overflow: visible !important;
  z-index: 1 !important;
  background: #F8FBFF !important;
}

.learn-explain-scroll.textbook-mode #learnExplainContent {
  display: none !important;
}

.learn-explain-scroll.textbook-mode .lecture-overlay-btn {
  display: none !important;
}

.learn-explain-scroll.textbook-mode .learn-web-section {
  display: none !important;
}

.learn-explain-body {
  max-width: none !important;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-primary);
}
.learn-explain-body h1,.learn-explain-body h2,.learn-explain-body h3 {
  margin: 1.4em 0 0.5em;
  color: var(--text-primary);
}
.learn-explain-body p { margin: 0 0 1em; }
.learn-explain-body ul { padding-left: 1.4em; margin: 0 0 1em; }
.learn-explain-body li { margin-bottom: 0.3em; }
.learn-explain-body code {
  background: rgba(139,92,246,0.08);
  color: var(--purple);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}
.learn-explain-body pre {
  background: #F8FAFC;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  overflow-x: auto;
  margin: 0 0 1em;
}
.learn-explain-body pre code {
  background: none;
  color: #1E293B;
  padding: 0;
  font-size: 13px;
  line-height: 1.6;
}

/* Follow-up bar */
.learn-followup-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.learn-followup-input {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  resize: none;
  background: var(--bg-body);
  outline: none;
}
.learn-followup-send {
  width: 36px; height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.learn-followup-send:disabled { background: var(--bg-hover); color: var(--text-muted); cursor: default; }
.learn-followup-send:not([disabled]):hover { background: #1d4ed8; }

/* Loading bar (top of explain col, non-blocking) */
.learn-loading-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  flex-shrink: 0;
}
.learn-loading-bar.hidden { display: none; }
.learn-loading-bar-inner {
  width: 120px;
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.learn-loading-bar-inner::after {
  content: '';
  position: absolute;
  left: -40%;
  width: 40%;
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  animation: slide 1.2s ease-in-out infinite;
}
@keyframes slide {
  0%   { left: -40%; }
  100% { left: 100%; }
}
.learn-loading-bar-text { font-size: 12px; color: var(--text-muted); }

/* Focus mode */
.learn-focus-modal {
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.learn-focus-modal.hidden { display: none; }
.learn-focus-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(8px);
}
.learn-focus-dialog {
  position: relative;
  width: min(920px, calc(100vw - 48px));
  max-height: calc(100vh - 56px);
  border-radius: 24px;
  background: #FFFFFF;
  box-shadow: 0 28px 90px rgba(15, 23, 42, 0.28);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.learn-focus-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid #E2E8F0;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FBFF 100%);
}
.learn-focus-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #94A3B8;
  font-family: 'DM Mono', monospace;
}
.learn-focus-title {
  font-size: 18px;
  font-weight: 700;
  color: #0F172A;
  margin-top: 2px;
}
.learn-focus-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.learn-focus-nav-btn,
.learn-focus-close {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid #DBEAFE;
  background: #FFFFFF;
  color: #334155;
  cursor: pointer;
}
.learn-focus-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.learn-focus-content {
  overflow-y: auto;
  padding: 28px 32px 36px;
  max-width: none;
}



@media (max-width: 900px) {
  .learn-explain-toolbar {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }

  .learn-kp-nav {
    width: 100%;
  }

  .learn-focus-dialog {
    width: min(100vw - 24px, 920px);
    max-height: calc(100vh - 24px);
    border-radius: 18px;
  }

  .learn-focus-header {
    align-items: flex-start;
  }

  .learn-focus-actions {
    flex-shrink: 0;
  }

  .learn-focus-content {
    padding: 22px 20px 28px;
  }
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.lightbox.hidden { display: none; }
.lightbox-img {
  max-width: 92vw;
  max-height: 92vh;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  object-fit: contain;
  cursor: grab;
  transform-origin: center center;
  transition: transform 0.12s ease;
  user-select: none;
}
.lightbox-img.is-dragging { cursor: grabbing; }
.lightbox-close {
  position: absolute;
  top: 20px; right: 24px;
  background: rgba(255,255,255,0.1);
  border: none;
  border-radius: 50%;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
}
.lightbox-close:hover { background: rgba(255,255,255,0.22); }

/* Fix B.4 style section caret placeholder alignment */
.syllabus-section-caret-placeholder {
  width: 18px;
  flex-shrink: 0;
  display: inline-block;
}

/* Math block */
.math-block {
  display: block;
  overflow-x: visible;
  max-width: 100%;
  padding: 18px 0 20px;
  margin: 22px auto 24px;
  text-align: center;
}

.learn-explain-body .math-block,
.explain-body .math-block {
  color: #42506a;
}

.learn-explain-body .math-block mjx-container,
.explain-body .math-block mjx-container {
  display: inline-block !important;
  max-width: 100% !important;
  overflow: visible !important;
  font-size: 1.18em !important;
  line-height: 1.75 !important;
}

.learn-explain-body .math-block mjx-container[display="true"],
.explain-body .math-block mjx-container[display="true"] {
  margin: 0.15em auto !important;
}

/* ============================================================
   LEARN SPLASH — Full-screen loading overlay
   ============================================================ */
.learn-splash {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.learn-splash.hidden { display: none; }

.learn-splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  max-width: 480px;
  width: 100%;
  padding: 48px 32px;
}

/* Spinner */
.learn-spinner {
  border: 4px solid var(--border);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  flex-shrink: 0;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Stage items */
.learn-splash-stages {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.lss-item {
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0.4;
  transition: all 0.35s ease;
}

.lss-item.active {
  opacity: 1;
}

.lss-item.done {
  opacity: 0.7;
  border-color: var(--success);
  background: rgba(16,185,129,0.04);
}

.lss-icon { font-size: 20px; flex-shrink: 0; }

.lss-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.4;
}
.lss-item.active .lss-text { color: var(--text-primary); font-weight: 600; }
.lss-item.done .lss-text { color: var(--text-muted); text-decoration: line-through; }

.learn-splash-note {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  text-align: center;
}

/* ============================================================
   LEARN INTRO CARD — richer layout
   ============================================================ */
.learn-intro-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 4px;
}
.learn-intro-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgba(37,99,235,0.12);
  color: var(--accent);
  border: 1px solid rgba(37,99,235,0.3);
}

/* ============================================================
   WEB REFERENCES SECTION — inside learn explain col
   ============================================================ */
.learn-web-section {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 2px solid var(--border);
  padding-bottom: 40px;
}
.learn-web-section.hidden { display: none; }

.learn-web-section-count {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.learn-web-cards {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 900px) {
  .learn-web-cards { grid-template-columns: 1fr; }
}

.learn-web-card {
  flex-direction: column;
}
.learn-web-card:hover {
  transform: translateY(-2px);
}
.lwc-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lwc-fav {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  flex-shrink: 0;
}
.lwc-title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.lwc-domain {
  font-weight: 500;
}
.lwc-snippet {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ============================================================
   RICHER EXPLAIN BODY — code, images, math
   ============================================================ */
.learn-explain-body img {
  max-width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  margin: 12px 0;
  display: block;
  box-shadow: var(--shadow-card);
}

.learn-explain-body blockquote {
  margin: 0 0 1em;
  padding: 10px 16px;
  border-left: 3px solid var(--accent);
  background: rgba(37,99,235,0.06);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-secondary);
  font-size: 14px;
}

.learn-explain-body details {
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin: 12px 0;
}
.learn-explain-body summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--accent);
  font-size: 13px;
}
.learn-explain-body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 28px 0;
}

/* Follow-up bubble appended answers */
.followup-bubble {
  margin-top: 24px;
}
.followup-bubble .fub-q {
  margin-bottom: 12px;
  align-items: flex-start;
  gap: 8px;
}
.followup-bubble .fub-q::before {
  content: '';
  flex-shrink: 0;
}
.followup-bubble .fub-a h1,
.followup-bubble .fub-a h2,
.followup-bubble .fub-a h3,
.followup-bubble .fub-a h4 {
  font-weight: 700;
  margin: 18px 0 8px;
}
.followup-bubble .fub-a p { margin: 0 0 10px; }
.followup-bubble .fub-a code {
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 4px;
}
.followup-bubble .fub-a pre {
  background: #F8FAFC;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  overflow-x: auto;
  margin: 10px 0;
}
.followup-bubble .fub-a pre code {
  display: block;
  background: none;
  color: #1E293B;
  padding: 0;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
}
.followup-bubble .fub-a table {
  border-collapse: collapse;
  width: 100%;
  margin: 12px 0;
  font-size: 14px;
}
.followup-bubble .fub-a th,
.followup-bubble .fub-a td {
  border: 1px solid var(--border);
  padding: 8px 12px;
  text-align: left;
}
.followup-bubble .fub-a th {
  background: rgba(37,99,235,0.07);
  font-weight: 600;
}
.followup-bubble .fub-a blockquote {
  border-left: 3px solid var(--accent);
  margin: 10px 0;
  padding: 4px 0 4px 14px;
  color: var(--text-secondary);
  font-style: italic;
}
/* TOC divider between subsections and content headings */
.toc-divider {
  font-size: 11px;
  font-weight: 700;
  font-family: 'Source Serif 4', Georgia, serif;
  text-transform: none;
  letter-spacing: 0;
  color: var(--sidebar-text-primary);
  opacity: 0.75;
  padding: 14px 12px 6px;
  margin-top: 6px;
  border-top: 1px solid var(--sidebar-border);
}

/* ===== VISUAL OVERHAUL (now merged into :root above) ===== */

/* Typography Overrides */
.welcome-h1, .learn-title {
  font-family: 'Source Serif 4', Georgia, serif;
}

/* Left Sidebar — dark navy */
.sidebar {
  color: var(--sidebar-text-primary);
}
.sidebar .logo-text, .logo-text {
  color: #f1f5f9;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
}
.sidebar .sidebar-link {
  color: var(--sidebar-text-muted);
}
.sidebar .sidebar-link:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-text-primary);
}
.sidebar .sidebar-link.active {
  background: var(--sidebar-active);
  color: var(--sidebar-accent);
}
.sidebar .syllabus-header {
  color: var(--sidebar-text-primary);
}
.sidebar .syllabus-chapter, .syllabus-chapter {
  color: var(--sidebar-text-primary);
  font-size: 13px;
  padding: 4px 8px;
  margin-top: 0;
  margin-bottom: 0;
}
.sidebar .syllabus-chapter:hover, .syllabus-chapter:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-text-primary);
}
.sidebar .syllabus-sections, .syllabus-sections {
  border-left: none;
}
.sidebar .syllabus-section, .syllabus-section {
  color: var(--sidebar-text-primary);
  border-left-color: transparent;
  font-size: 12px;
  padding: 4px 8px 4px 10px;
  border-left: 2px solid transparent;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: all 0.2s ease;
}
.sidebar .syllabus-section-row:hover .syllabus-section,
.sidebar .syllabus-section:hover, .syllabus-section:hover {
  background: var(--sidebar-hover) !important;
  color: var(--sidebar-text-primary) !important;
  border-left-color: #93C5FD !important;
}
.sidebar .syllabus-section-row:hover .syllabus-section-caret,
.sidebar .syllabus-section-row:hover .syllabus-section-caret-placeholder {
  color: var(--sidebar-text-primary) !important;
}
.sidebar .syllabus-section.active, .syllabus-section.active {
  background: var(--sidebar-active) !important;
  border-left-color: var(--sidebar-accent) !important;
  color: var(--sidebar-text-primary) !important;
  font-weight: 600;
}
.sidebar-top {
  border-bottom-color: var(--sidebar-border);
}
.sidebar-footer {
  border-top-color: var(--sidebar-border);
}
.sidebar .model-badge {
  background: #F8FBFF;
  color: var(--sidebar-text-primary);
  border-color: var(--sidebar-border);
}
.sidebar .book-badge {
  background: #F8FBFF;
  color: var(--sidebar-text-primary);
  border-color: var(--sidebar-border);
}
.toc-header {
  border-bottom-color: var(--sidebar-border);
}
.toc-nav::-webkit-scrollbar-thumb {
  background: #2c1808;
}
.toc-empty {
  color: var(--sidebar-text-muted);
}
.toc-item {
  font-size: 12px;
  padding: 5px 8px;
  border-left: 2px solid transparent;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: 1px;
  color: var(--sidebar-text-primary) !important;
}
.toc-item:hover {
  background: var(--sidebar-hover) !important;
  color: var(--sidebar-text-primary) !important;
  border-left-color: #93C5FD !important;
}
.toc-item.active {
  background: var(--sidebar-active) !important;
  border-left-color: var(--sidebar-accent) !important;
  color: var(--sidebar-text-primary) !important;
  font-weight: 600;
}
.toc-divider {
  border-color: var(--sidebar-border);
}

/* Welcome Screen */
.welcome-h1 {
  font-size: 42px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.welcome-sub {
  font-size: 18px;
  color: var(--text-secondary);
  max-width: 500px;
  line-height: 1.5;
  margin-bottom: 48px;
}
.search-box:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-focus);
}
.search-input {
  font-size: 17px;
  font-weight: 400;
}
.search-send {
  width: 44px;
  height: 44px;
  color: white;
}

.chip {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
}
.chip:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Start Learning Button */
.learn-start-btn {
  padding: 14px 36px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Learn Title */
.learn-title {
  font-size: 20px;
  font-weight: 600;
}

/* Splash Loading Screen */
.learn-splash {
  background: rgba(255, 251, 245, 0.95);
  backdrop-filter: blur(12px);
}
.learn-spinner {
  width: 64px;
  height: 64px;
  border-width: 3px;
  border-color: var(--border-strong);
  border-top-color: var(--accent);
}
.lss-item {
  padding: 16px 24px;
  border-radius: var(--radius-lg);
  font-size: 15px;
  background: white;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}

/* ── Lesson images ─────────────────────────────────────────────────────── */
/* ============================================================
   ATTACHMENT UI
   ============================================================ */
.attach-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
  margin-right: 4px;
}
.attach-btn:hover {
  background: var(--bg-hover);
  color: var(--accent);
}

.attach-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
}
.attach-preview:empty { display: none; }
.attach-preview:not(:empty) { padding-bottom: 8px; }

.attach-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 12px;
  color: var(--text-secondary);
  max-width: 200px;
}
.attach-chip img {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}
.attach-chip-filetype {
  min-width: 30px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(14, 116, 144, 0.09);
  color: #0e7490;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 850;
  flex-shrink: 0;
}
.attach-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
}
.attach-chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.attach-chip-remove:hover { color: #ef4444; }

/* Drag-over highlight */
.search-box.drag-over,
.followup-bar.drag-over {
  background: rgba(37, 99, 235, 0.04);
}

/* Markdown tables rendered by markdownToHtml */
.md-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 13px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
}
.md-table th {
  background: var(--bg-panel);
  color: var(--text-primary);
  font-weight: 600;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 2px solid var(--border);
}
.md-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  vertical-align: middle;
}
.md-table tr:last-child td {
  border-bottom: none;
}
.md-table tr:hover td {
  background: var(--bg-hover);
}

.lesson-img,
.learn-explain-body .lesson-img,
.learn-explain-content .lesson-img,
.learn-focus-content .lesson-img {
  display: block;
  width: min(320px, 36vw) !important;
  max-width: min(320px, 36vw) !important;
  height: auto !important;
  margin: 16px auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  border: 1px solid rgba(226, 232, 240, 0.95);
  cursor: zoom-in;
  background: #fff;
}

/* Wrap standalone img paragraphs so they center properly */
.explain-body p:has(> img.lesson-img:only-child),
.learn-explain-body p:has(> img.lesson-img:only-child) {
  text-align: center;
  margin: 24px 0;
}
.learn-visual-pair-card p:has(> img.lesson-img:only-child) {
  margin: 12px 0 10px;
}

@media (max-width: 960px) {
  .learn-visual-pair-grid {
    grid-template-columns: 1fr;
  }
}

/* HIGH-END ACADEMIC OVERRIDES */
.welcome-h1, .learn-title, .logo-text {
  font-family: 'Playfair Display', Georgia, serif;
}
.welcome-tag, .step-label, code, pre{
  font-family: 'DM Mono', monospace;
}
.welcome-tag {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.learn-start-btn {
  background: #111111 !important;
  color: #ffffff;
  border-radius: 4px;
  box-shadow: none;
  font-family: 'Inter', sans-serif;
}
.learn-start-btn:hover {
  background: #2a2a2a !important;
  transform: none;
  box-shadow: none;
}
.search-send {
  background: #0F172A;
  border-radius: 4px;
}
.search-send:not([disabled]):hover {
  background: #2a2a2a;
  box-shadow: none;
  transform: none;
}
.chip {
  border-radius: 4px;
  border: 1px solid #111111;
  background: transparent;
}
.chip:hover {
  background: #111111;
  color: white;
}

.settings-drawer {
  position: fixed;
  inset: 0;
  z-index: 1200;
}

.settings-drawer.hidden {
  display: none;
}

.settings-primary-btn,
.settings-secondary-btn,
.settings-inline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.settings-primary-btn,
.settings-secondary-btn {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
}

.settings-primary-btn {
  border: none;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #fff;
  box-shadow: 0 14px 32px rgba(37, 99, 235, 0.26);
}

.settings-primary-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(37, 99, 235, 0.3);
}

.settings-secondary-btn {
  border: 1px solid rgba(203, 213, 225, 0.9);
  background: rgba(248, 250, 252, 0.96);
  color: var(--text-primary);
}

.settings-secondary-btn:hover {
  background: white;
  border-color: rgba(59, 130, 246, 0.28);
  transform: translateY(-1px);
}

.settings-inline-btn {
  margin-top: 14px;
  padding: 10px 14px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  background: rgba(248, 250, 252, 0.96);
  color: var(--text-primary);
}

.settings-inline-btn:hover {
  background: white;
  border-color: rgba(59, 130, 246, 0.28);
}

.settings-user-card {
  display: flex;
  border: 1px solid rgba(226, 232, 240, 0.95);
}

.settings-user-avatar,
.settings-user-avatar-img {
  flex-shrink: 0;
}

.settings-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
  font-size: 18px;
  font-weight: 700;
}

.settings-user-avatar-img {
  object-fit: cover;
  border: 1px solid rgba(226, 232, 240, 0.95);
}

.settings-user-body {
  min-width: 0;
  flex: 1;
}

.settings-user-name {
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.settings-user-meta {
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
}

.settings-user-actions {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.settings-user-link {
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: #2563eb;
  cursor: pointer;
}

.settings-user-link:hover {
  color: #1d4ed8;
}

.settings-user-danger {
  color: #dc2626;
}

.settings-user-danger:hover {
  color: #b91c1c;
}

@media (max-width: 900px) {
  .settings-page-shell {
    padding: 24px 16px 32px;
  }

  .settings-page-header {
    flex-direction: column;
    align-items: stretch;
  }

  .settings-page-title {
    font-size: 34px;
  }

  .settings-page-grid {
    grid-template-columns: 1fr;
  }

  .settings-page-nav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
  }

  .settings-page-actions .settings-primary-btn,
  .settings-page-actions .settings-secondary-btn {
    width: 100%;
    min-width: 0;
  }

  
  .settings-user-card {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .settings-user-actions {
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
  }
}

.settings-view {
  overflow: auto;
  background: linear-gradient(180deg, #f8fafc 0%, #f3f7fb 100%);
}


.settings-page-shell {
  max-width: 1320px;
}

.settings-page-header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

.settings-page-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 10px;
}

.settings-page-title {
  margin: 0;
  color: #0f172a;
}

.settings-page-subtitle {
  margin: 14px 0 0;
  color: #475569;
  line-height: 1.7;
}

.settings-page-back {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid rgba(203, 213, 225, 0.95);
  background: rgba(255, 255, 255, 0.94);
  color: #0f172a;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.settings-page-back:hover {
  transform: translateY(-1px);
  border-color: rgba(59, 130, 246, 0.28);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.settings-page-grid {
  align-items: start;
}

.settings-page-nav {
  top: 28px;
}

.settings-page-nav-item {
  background: transparent;
  cursor: pointer;
}


.settings-page-card {
  border: 1px solid rgba(226, 232, 240, 0.96);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
}

.settings-page-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.settings-page-card-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 8px;
}

.settings-page-card-title {
  margin: 0;
  line-height: 1.2;
  color: #0f172a;
}

.settings-page-copy {
  margin: 0;
  color: #475569;
}

.settings-page-actions {
  display: flex;
  flex-wrap: wrap;
  margin-top: 18px;
}

.theme-toggle-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(248, 250, 252, 0.95);
}

.theme-toggle-btn {
  padding: 0 16px;
  border: 1px solid transparent;
  background: transparent;
  color: #6b7280;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.theme-toggle-btn.active {
  background: #ffffff;
  color: #111827;
  border-color: rgba(226, 232, 240, 0.96);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.settings-page-actions .settings-primary-btn,
.settings-page-actions .settings-secondary-btn {
  width: auto;
  min-width: 220px;
  padding: 0 18px;
}

.settings-page-version {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(248, 250, 252, 0.92);
  border: 1px solid rgba(226, 232, 240, 0.96);
  color: #475569;
  font-size: 14px;
  font-weight: 600;
}

.settings-page-version span {
  color: #0f172a;
}
/* ══ Active state overrides (use brand accent) ══ */
.syllabus-section.active {
  border-left: 2px solid #2563EB !important;
}
.lss-item.active {
  border-color: #2563EB !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1) !important;
  background: rgba(37,99,235,0.05) !important;
}

/* ═══════════════════════════════════════════════════════
   EDITORIAL TYPOGRAPHY — Heading hierarchy overhaul
   Target: both Q&A (.explain-body) and Learn (.learn-explain-body)
═══════════════════════════════════════════════════════ */

.explain-body,
.learn-explain-body {
  --h1-color: #0F172A;
  --h2-color: #0F172A;
  --h3-color: #444444;
  --h4-color: #666666;
  --rule-color: #e0e0e0;
  --callout-bg: #f7f7f7;
  --callout-border: #222222;
}

/* H1 — Section opener, Playfair Display, large & authoritative */
.explain-body h1,
.learn-explain-body h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--h1-color);
  letter-spacing: -0.5px;
  margin: 2rem 0 0.75rem;
  line-height: 1.25;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #111;
}

/* H2 — Major subsection, Inter bold with left accent bar */
.explain-body h2,
.learn-explain-body h2 {
  font-family: 'Inter', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--h2-color);
  margin: 2rem 0 0.6rem;
  padding-left: 14px;
  border-left: 3px solid #111;
  letter-spacing: -0.2px;
  line-height: 1.4;
}

/* H3 — Sub-subsection, DM Mono uppercase label style */
.explain-body h3,
.learn-explain-body h3 {
  font-family: 'DM Mono', monospace;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--h3-color);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 1.8rem 0 0.5rem;
  padding: 0;
  border: none;
}

/* H4 — Inline label, Inter italic, muted */
.explain-body h4,
.learn-explain-body h4 {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  font-style: italic;
  color: var(--h4-color);
  margin: 1.4rem 0 0.35rem;
  letter-spacing: 0;
}

/* HR — elegant thin rule replacing ugly --- */
.explain-body hr,
.learn-explain-body hr {
  border: none;
  border-top: 1px solid var(--rule-color);
  margin: 2rem 0;
}

/* Blockquote — used for callout boxes / objectives */
.explain-body blockquote,
.learn-explain-body blockquote {
  background: var(--callout-bg);
  border-left: 3px solid var(--callout-border);
  margin: 1.5rem 0;
  padding: 14px 20px;
  border-radius: 0 6px 6px 0;
  color: #333;
  font-size: 0.97rem;
}
.explain-body blockquote p,
.learn-explain-body blockquote p {
  margin: 0;
}

/* Strong — make sure bold text is true black */
.explain-body strong,
.learn-explain-body strong {
  color: #111;
  font-weight: 700;
}

/* Remove first-child top margin for all headings */
.explain-body > h1:first-child,
.explain-body > h2:first-child,
.learn-explain-body > h1:first-child,
.learn-explain-body > h2:first-child {
  margin-top: 0;
}

/* --- ULTRA PREMIUM MINIMALIST VERCEL/LINEAR STYLE --- */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

/* ══ Vercel-style layout helpers (no color overrides — use top-level :root) ══ */
:root {
  /* Aliases for legacy Vercel-section selectors */
  --bg-app:            var(--bg-body);
  --color-accent:      var(--accent);
  --color-subtle-border: var(--border);
  --text-tertiary:     var(--text-muted);

  /* Layout */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;

  /* Shadows */
  --shadow-float:  0 10px 40px -10px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04);
  --shadow-subtle: 0 2px 8px -2px rgba(15,23,42,0.04);
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  background-color: var(--bg-app);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

:root[data-theme="dark"] body {
  background: #171513;
}

:root[data-theme="dark"] .main {
  border-left-color: rgba(255,255,255,0.04);
  border-top-color: rgba(255,255,255,0.04);
}

:root[data-theme="dark"] .welcome,
:root[data-theme="dark"] .answer,
:root[data-theme="dark"] .learn-view,
:root[data-theme="dark"] .settings-view {
  background: #171513 !important;
}

:root[data-theme="dark"] .search-box,
:root[data-theme="dark"] .followup-bar,
:root[data-theme="dark"] .learn-followup-bar,
:root[data-theme="dark"] .settings-page-card,
:root[data-theme="dark"] .settings-page-nav,
:root[data-theme="dark"] .settings-user-card,
:root[data-theme="dark"] .chip,
:root[data-theme="dark"] .learn-intro-card,
:root[data-theme="dark"] .lss-item {
  background: #211d1a !important;
  border-color: #332d28 !important;
  color: var(--text-primary);
  box-shadow: none;
}

:root[data-theme="dark"] .search-input,
:root[data-theme="dark"] .followup-input,
:root[data-theme="dark"] .learn-followup-input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] input,
:root[data-theme="dark"] select {
  color: var(--text-primary);
  background: transparent;
}

:root[data-theme="dark"] .search-input::placeholder,
:root[data-theme="dark"] .followup-input::placeholder,
:root[data-theme="dark"] .learn-followup-input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
  color: var(--text-muted);
}

:root[data-theme="dark"] .sidebar-settings-btn,
:root[data-theme="dark"] .sidebar-version-row,
:root[data-theme="dark"] .syllabus-chapter,
:root[data-theme="dark"] .syllabus-section,
:root[data-theme="dark"] .syllabus-subsection,
:root[data-theme="dark"] .learn-title,
:root[data-theme="dark"] .settings-page-title,
:root[data-theme="dark"] .settings-page-card-title,
:root[data-theme="dark"] .settings-page-copy,
:root[data-theme="dark"] .settings-page-subtitle,
:root[data-theme="dark"] .settings-page-version,
:root[data-theme="dark"] .settings-user-name,
:root[data-theme="dark"] .settings-user-meta,
:root[data-theme="dark"] .learn-kp-title,
:root[data-theme="dark"] .learn-kp-label,
:root[data-theme="dark"] .learn-web-section-title,
:root[data-theme="dark"] .welcome-sub,
:root[data-theme="dark"] .welcome-h1{
  color: var(--text-primary) !important;
}

:root[data-theme="dark"] .settings-page-copy,
:root[data-theme="dark"] .settings-page-subtitle,
:root[data-theme="dark"] .settings-user-meta,
:root[data-theme="dark"] .sidebar-version-row,
:root[data-theme="dark"] .syllabus-subsection,
:root[data-theme="dark"] .syllabus-section-caret,
:root[data-theme="dark"] .learn-kp-label,
:root[data-theme="dark"] .ghost {
  color: var(--text-secondary) !important;
}

:root[data-theme="dark"] .theme-toggle-group,
:root[data-theme="dark"] .settings-page-version,
:root[data-theme="dark"] .settings-inline-btn,
:root[data-theme="dark"] .settings-secondary-btn,
:root[data-theme="dark"] .settings-page-back {
  background: #211d1a !important;
  border-color: #332d28 !important;
  color: var(--text-primary) !important;
}

:root[data-theme="dark"] .theme-toggle-btn.active,
:root[data-theme="dark"] .settings-primary-btn {
  background: #f5efe6 !important;
  color: #171513 !important;
  border-color: #f5efe6 !important;
}

:root[data-theme="dark"] .theme-toggle-btn:not(.active) {
  color: var(--text-secondary);
}

:root[data-theme="dark"] .search-send,
:root[data-theme="dark"] .followup-send,
:root[data-theme="dark"] .learn-followup-send {
  background: #f5efe6;
  color: #171513;
}


:root[data-theme="light"] .lecture-overlay-btn {
  border-color: #d6d6d3;
  background: rgba(255, 255, 255, 0.98);
  color: #111111;
  box-shadow: 0 14px 34px rgba(17, 17, 17, 0.08), 0 2px 8px rgba(17, 17, 17, 0.04);
}

:root[data-theme="light"] .lecture-overlay-btn:hover {
  background: #f3f3f2;
  border-color: #bdbdb8;
}

:root[data-theme="light"] #learnViewSelector {
  background: #f3f3f2 !important;
  border-color: #d6d6d3 !important;
}

:root[data-theme="light"] #btnLectureView,
:root[data-theme="light"] #btnTextbookView {
  color: #666666 !important;
}

:root[data-theme="light"] #btnLectureView.active,
:root[data-theme="light"] #btnTextbookView.active,
:root[data-theme="light"] .syllabus-chapter.active,
:root[data-theme="light"] .syllabus-section.active,
:root[data-theme="light"] .syllabus-section-btn.active {
  color: #111111 !important;
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04) !important;
}

:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .learn-topbar,
:root[data-theme="dark"] .learn-explain-col,
:root[data-theme="dark"] .learn-chat-col,
:root[data-theme="dark"] .sources,
:root[data-theme="dark"] .md-table,
:root[data-theme="dark"] .md-table th,
:root[data-theme="dark"] .md-table td {
  border-color: #332d28 !important;
}

/* Typography refinements */
h1, h2, h3, h4, h5, h6, .welcome-h1, .learn-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em; /* Tighter tracking for modern premium feel */
  color: var(--text-primary);
}

.logo-text {
  font-family: 'Space Grotesk', 'Playfair Display', serif !important;
  font-style: normal !important;
}

/* Layout structural overrides */
.app {
  background-color: var(--bg-app);
}

.main {
  margin-top: 8px;
  margin-bottom: 8px;
  margin-right: 8px;
  border-left: 1px solid rgba(255,255,255,0.5); /* Glass edge */
  border-top: 1px solid rgba(255,255,255,0.5);
  transition: margin-left 0.4s cubic-bezier(0.16, 1, 0.3, 1), margin-right 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.4s ease;
  z-index: 20;
}

/* Sidebars - Remove harsh borders, use whitespace */
.sidebar{
  background-color: var(--bg-sidebar) !important;
  /* Kill the ugly lines */
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), margin 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

/* Collapse behavior */
.app.sidebar-collapsed .sidebar { width: 0 !important; transform: translateX(-100%); margin: 0; padding: 0; border: none; }
.app.sidebar-collapsed .main { border-radius: 0 !important; margin-left: 0 !important; margin-right: 0 !important; border: none !important; min-width: 0; min-height: 0; }

/* The left syllabus menu items - Vercel style */

.syllabus-item {
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all 0.2s ease;
  border: none;
}

.syllabus-item:hover {
  background-color: var(--sidebar-hover) !important;
  color: var(--sidebar-text-primary);
}

.syllabus-item.active {
  background-color: var(--sidebar-active) !important;
  color: var(--sidebar-accent) !important;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transform: translateY(-1px);
}

.syllabus-item.active * { color: var(--sidebar-accent) !important; }

/* Right TOC links */
.toc-nav a {
  border-left: 2px solid transparent !important;
  padding: 6px 0 6px 14px;
  margin-left: 2px;
  color: var(--sidebar-text-secondary);
  font-size: 0.85rem;
  font-weight: 400;
  transition: all 0.2s ease;
  position: relative;
}

.toc-nav a:hover {
  color: var(--sidebar-text-primary);
  border-left-color: var(--sidebar-text-muted) !important;
}


/* Inputs and Buttons - Premium tactile feel */
input, textarea, button {
  font-family: inherit;
}

button:focus, input:focus, textarea:focus {
  outline: none;
  box-shadow: none;
}

.search-box, .followup-bar {
  background: var(--bg-panel);
  transition: box-shadow 0.3s, border-color 0.3s;
}


/* Toggle Buttons */
.menu-toggle {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(241,245,249,0.98) 100%);
  border: 1.5px solid #d6e0eb;
  cursor: pointer;
  color: #475569;
  margin-right: 2px;
  padding: 0;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 8px 18px rgba(148, 163, 184, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.92);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.menu-toggle:hover {
  color: #0f172a;
  border-color: #bcd0e5;
  transform: translateY(-1px);
  box-shadow:
    0 12px 20px rgba(148, 163, 184, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.95);
}

.menu-toggle-icon {
  transform: translateX(-0.5px);
}

.sidebar-float-toggle {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 50;
  background: var(--bg-panel);
  border: 1px solid var(--color-subtle-border);
  box-shadow: var(--shadow-float);
  border-radius: var(--radius-sm);
  padding: 8px;
  cursor: pointer;
  color: var(--text-secondary);
  display: none;
  transition: all 0.2s ease;
}
.sidebar-float-toggle:hover {
  color: var(--text-primary);
  transform: translateY(-1px);
  box-shadow: 0 12px 20px -10px rgba(0,0,0,0.08);
}

/* Message Bubbles / Content spacing */
.explain-body, .learn-explain-body {
  font-size: 0.95rem;
  color: var(--text-primary);
  line-height: 1.7;
}

/* Scrollbars - MacOS style hidden until hover */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.1);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.2);
}

/* Resizer Handle */
.learn-resizer {
  width: 10px;
  background-color: transparent;
  cursor: col-resize;
  touch-action: none;
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
  margin-left: -5px;
  margin-right: -5px;
}

.learn-resizer::before {
  content: '';
  display: block;
  width: 2px;
  height: 48px;
  background-color: rgba(191, 219, 254, 0.55);
  border-radius: 4px;
  transition: height 0.2s ease, background-color 0.2s ease;
}

.learn-resizer:hover, .learn-resizer:active {
  background-color: rgba(69, 137, 247, 0.1);
}

.learn-resizer:hover::before, .learn-resizer:active::before {
  background-color: rgba(59, 130, 246, 0.55);
  height: 100%;
}

body.learn-resizing {
  user-select: none;
}

body.learn-resizing .learn-resizer::before {
  background-color: var(--primary);
  height: 100%;
}

@media (max-width: 900px) {
  .learn-body-inner[data-custom-split="true"] {
    grid-template-columns: 1fr !important;
  }
}

/* Ensure generated math/python diagram plots with transparent backgrounds don't render black on dark mode environments */
.lesson-img, .fub-a img, .learn-explain-content img {
  background-color: white !important;
  border-radius: 6px;
  padding: 8px; /* Extra padding looks better framing charts */
  box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Slight elevation */
}

.learn-explain-body img:not(.lesson-img),
.learn-explain-content img:not(.lesson-img),
.learn-focus-content img:not(.lesson-img) {
  width: min(320px, 36vw) !important;
  max-width: min(320px, 36vw) !important;
  height: auto !important;
  margin-left: auto;
  margin-right: auto;
}

.kc-interactive-demo {
  margin: 20px 0 28px;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.matrix-demo-shell {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,0.9);
  padding: 20px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.matrix-demo-head {
  margin-bottom: 12px;
}

.matrix-demo-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}

.matrix-demo-subtitle,
.matrix-demo-status,
.matrix-demo-formula,
.matrix-demo-task,
.matrix-demo-observe-item {
  color: var(--muted);
  line-height: 1.6;
}

.matrix-demo-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 12px 18px;
  margin-bottom: 16px;
}

.matrix-demo-control {
  display: grid;
  grid-template-columns: 96px 1fr 46px;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.matrix-demo-control-label {
  font-weight: 600;
  color: var(--text);
}

.matrix-demo-control-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.matrix-demo-stage {
  margin: 10px 0 14px;
  overflow-x: auto;
}

.interactive-demo-shell {
  border: 2px solid rgba(191, 219, 254, 0.95);
  border-radius: 16px;
  background:
    linear-gradient(rgba(226, 232, 240, 0.38) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226, 232, 240, 0.38) 1px, transparent 1px),
    #fffefa;
  background-size: 20px 20px;
  box-shadow: 4px 7px 0 #dbeafe;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 18px;
}

.interactive-demo-head {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.interactive-demo-title {
  color: var(--text);
  font-family: "Quicksand", "Nunito", sans-serif;
  font-size: 1.24rem;
  font-weight: 900;
  line-height: 1.25;
}

.interactive-demo-subtitle {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.interactive-demo-grid {
  display: grid;
  grid-template-columns: minmax(210px, 280px) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  min-width: 0;
}

.interactive-demo-shell.is-narrow .interactive-demo-grid,
.interactive-demo-shell--brief .interactive-demo-grid {
  grid-template-columns: 1fr;
}

.interactive-demo-controls,
.interactive-demo-stage,
.interactive-demo-readouts,
.interactive-demo-brief-card,
.interactive-demo-switch-row {
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid rgba(203, 213, 225, 0.9);
  border-radius: 12px;
  box-shadow: 0 2px 0 rgba(226, 232, 240, 0.85);
}

.interactive-demo-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
}

.interactive-demo-control {
  display: grid;
  gap: 7px;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
}

.interactive-demo-control-label {
  color: #475569;
}

.interactive-demo-slider-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  gap: 10px;
  align-items: center;
}

.interactive-demo-slider-row input {
  width: 100%;
  accent-color: #2563eb;
}

.interactive-demo-control-value {
  color: #1d4ed8;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.interactive-demo-select {
  appearance: none;
  background: #ffffff;
  border: 2px solid #cbd5e1;
  border-radius: 10px;
  color: #334155;
  font: inherit;
  min-height: 38px;
  padding: 7px 10px;
  width: 100%;
}

.interactive-demo-stage {
  min-width: 0;
  overflow: hidden;
  padding: 10px;
}

.interactive-demo-canvas {
  background: #ffffff;
  border: 1px solid rgba(203, 213, 225, 0.85);
  border-radius: 10px;
  display: block;
  max-width: 100%;
  width: 100%;
}

.interactive-demo-shell--lab .interactive-demo-grid {
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
}

.interactive-demo-shell--lab .interactive-demo-controls {
  align-self: stretch;
}

.interactive-demo-shell--lab .interactive-demo-stage {
  min-height: 300px;
}

.interactive-demo-shell--lab .interactive-demo-canvas {
  min-height: 260px;
}

.interactive-demo-grid--flow {
  align-items: center;
}

.interactive-demo-flow-stage {
  min-height: 260px;
}

.interactive-demo-flow {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(160px, 1fr) 56px minmax(180px, 1.15fr) 56px minmax(180px, 1fr);
  min-width: 0;
}

.interactive-demo-flow-card {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid rgba(191, 219, 254, 0.95);
  border-radius: 8px;
  box-sizing: border-box;
  color: #0f172a;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 14px;
}

.interactive-demo-flow-card strong,
.interactive-demo-flow-card em,
.interactive-demo-flow-card b,
.interactive-demo-flow-card small {
  display: block;
}

.interactive-demo-flow-card strong {
  font-size: 1.02rem;
  line-height: 1.35;
}

.interactive-demo-flow-card em {
  color: #2563eb;
  font-style: normal;
  font-weight: 800;
}

.interactive-demo-flow-card b {
  color: #7c3aed;
  font-size: 0.96rem;
  font-weight: 850;
}

.interactive-demo-flow-card small {
  color: #475569;
  line-height: 1.45;
}

.interactive-demo-flow-card--domain {
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(255, 255, 255, 0.97));
}

.interactive-demo-flow-kicker {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.interactive-demo-flow-arrow {
  align-items: center;
  color: #2563eb;
  display: flex;
  font-size: 1.1rem;
  font-weight: 900;
  justify-content: center;
}

.interactive-demo-flow-arrow span {
  align-items: center;
  border: 2px solid rgba(191, 219, 254, 0.95);
  border-radius: 999px;
  display: inline-flex;
  justify-content: center;
  min-height: 42px;
  min-width: 42px;
  background: rgba(239, 246, 255, 0.9);
}

.interactive-demo-flow-canvas {
  background: #fff;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 8px;
  display: block;
  margin-top: 4px;
  max-width: 100%;
  width: 100%;
}

.interactive-demo-readouts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
}

.interactive-demo-readout {
  color: #475569;
  font-size: 13px;
  line-height: 1.45;
}

.interactive-demo-readout strong {
  color: #0f172a;
}

.interactive-demo-brief-card {
  padding: 12px 14px;
}

.interactive-demo-brief-label {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.interactive-demo-brief-copy {
  color: #1e293b;
  font-size: 0.95rem;
  font-weight: 750;
  line-height: 1.55;
}

.interactive-demo-tabs,
.interactive-demo-switch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px;
}

.interactive-demo-tabs--inline {
  margin-bottom: 0;
}

.interactive-demo-tab,
.interactive-demo-switch {
  background: #f8fafc;
  border: 2px solid #cbd5e1;
  border-radius: 999px;
  color: #475569;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  min-height: 32px;
  padding: 6px 12px;
  text-transform: capitalize;
}

.interactive-demo-tab.is-active,
.interactive-demo-switch.is-active {
  background: #dbeafe;
  border-color: #60a5fa;
  color: #1e3a8a;
}

.interactive-demo-switch-group {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.interactive-demo-switch-label {
  color: #334155;
  font-size: 13px;
  font-weight: 900;
  margin-right: 2px;
}

@media (max-width: 760px) {
  .interactive-demo-grid,
  .interactive-demo-shell--lab .interactive-demo-grid,
  .interactive-demo-readouts,
  .interactive-demo-flow {
    grid-template-columns: 1fr;
  }
}

.geogebra-demo-shell {
  background: #fffefa;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-sizing: border-box;
  color: #172033;
  container-type: inline-size;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.geogebra-demo-shell [hidden] {
  display: none;
}

.geogebra-demo-head {
  align-items: start;
  border-bottom: 1px solid #dbe3ec;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 18px 20px 16px;
}

.geogebra-demo-kicker {
  color: #0f766e;
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.geogebra-demo-title {
  color: #172033;
  font-family: "Quicksand", "Nunito", sans-serif;
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.3;
}

.geogebra-demo-subtitle {
  color: #526176;
  font-size: 0.92rem;
  line-height: 1.5;
  margin-top: 5px;
}

.geogebra-demo-steps {
  background: #f3f6f8;
  border-bottom: 1px solid #dbe3ec;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.geogebra-demo-step {
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  color: #526176;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0;
  min-height: 46px;
  min-width: 0;
  padding: 8px 10px;
}

.geogebra-demo-step + .geogebra-demo-step {
  border-left: 1px solid #dbe3ec;
}

.geogebra-demo-step:hover {
  background: #ffffff;
  color: #172033;
}

.geogebra-demo-step.is-active {
  background: #ffffff;
  border-bottom-color: #0f766e;
  color: #0f5f59;
}

.geogebra-demo-toolbar {
  align-items: center;
  display: grid;
  gap: 14px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 14px 20px 8px;
}

.geogebra-demo-instruction {
  display: grid;
  gap: 2px;
  min-width: 0;
  text-align: center;
}

.geogebra-demo-instruction strong {
  color: #172033;
  font-size: 0.94rem;
  line-height: 1.35;
}

.geogebra-demo-instruction span {
  color: #526176;
  font-size: 0.82rem;
  line-height: 1.4;
}

.geogebra-demo-button {
  align-items: center;
  background: #ffffff;
  border: 1px solid #94a3b8;
  border-radius: 6px;
  color: #334155;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 850;
  justify-content: center;
  letter-spacing: 0;
  min-height: 44px;
  padding: 8px 14px;
}

.geogebra-demo-button:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #64748b;
}

.geogebra-demo-button--primary {
  background: #0f766e;
  border-color: #0f766e;
  color: #ffffff;
}

.geogebra-demo-button--primary:hover:not(:disabled) {
  background: #115e59;
  border-color: #115e59;
}

.geogebra-demo-button:disabled {
  cursor: default;
  opacity: 0.42;
}

.geogebra-demo-button:focus-visible,
.geogebra-demo-step:focus-visible,
.geogebra-demo-time-control input:focus-visible {
  outline: 3px solid rgba(14, 116, 144, 0.34);
  outline-offset: 2px;
}

.geogebra-demo-time-control {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 92px minmax(0, 1fr) 52px;
  padding: 8px 20px 14px;
}

.geogebra-demo-time-control span {
  color: #334155;
  font-size: 0.84rem;
  font-weight: 850;
}

.geogebra-demo-time-control input {
  accent-color: #7c3aed;
  margin: 0;
  min-height: 32px;
  width: 100%;
}

.geogebra-demo-time-control output {
  color: #6d28d9;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  text-align: right;
}

.geogebra-demo-legend {
  align-items: center;
  border-top: 1px solid #e5eaf0;
  color: #526176;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.76rem;
  gap: 8px 16px;
  min-height: 42px;
  padding: 8px 20px;
}

.geogebra-demo-legend span {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  white-space: nowrap;
}

.geogebra-demo-swatch {
  background: #64748b;
  border-radius: 2px;
  display: inline-block;
  height: 3px;
  width: 20px;
}

.geogebra-demo-swatch--input { background: #2563eb; }
.geogebra-demo-swatch--source { background: #0d9488; }
.geogebra-demo-swatch--moving { background: #7c3aed; }
.geogebra-demo-swatch--product { background: #d97706; }
.geogebra-demo-swatch--output { background: #b45309; }

.geogebra-demo-stage {
  background: #ffffff;
  border-block: 1px solid #dbe3ec;
  box-sizing: border-box;
  height: 620px;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

.geogebra-demo-mount {
  height: 620px;
  min-width: 320px;
  width: 100%;
}

.geogebra-demo-loading {
  align-items: center;
  background: #f8fafc;
  color: #526176;
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: absolute;
  text-align: center;
  z-index: 2;
}

.geogebra-demo-fallback {
  align-items: center;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.75fr);
  height: 100%;
  overflow: auto;
  padding: 20px;
}

.geogebra-demo-fallback img {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  display: block;
  height: auto;
  margin: 0 auto;
  max-height: 560px;
  max-width: 100%;
  object-fit: contain;
}

.geogebra-demo-fallback-copy {
  color: #526176;
  display: grid;
  gap: 12px;
  line-height: 1.5;
}

.geogebra-demo-fallback-copy strong {
  color: #9f1239;
  font-size: 1rem;
}

.geogebra-demo-fallback-copy code {
  background: #f8fafc;
  border-left: 3px solid #d97706;
  color: #172033;
  font-size: 0.82rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
  padding: 10px 12px;
  white-space: normal;
}

.geogebra-demo-fallback-copy .geogebra-demo-button {
  justify-self: start;
}

.geogebra-demo-feedback {
  background: #fff8e6;
  border-left: 4px solid #d97706;
  color: #713f12;
  font-size: 0.86rem;
  line-height: 1.45;
  min-height: 48px;
  padding: 13px 18px;
}

#learnExplainCol:has(.geogebra-demo-shell) #learnExplainPager {
  bottom: auto;
  flex: 0 0 auto;
  left: auto;
  margin: 8px auto 12px;
  position: relative;
  transform: none;
}

@container (max-width: 620px) {
  .geogebra-demo-fallback {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }

  .geogebra-demo-fallback img {
    max-height: 280px;
  }
}

@media (max-width: 620px) {
  .geogebra-demo-head {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }

  .geogebra-demo-reset {
    justify-self: start;
  }

  .geogebra-demo-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .geogebra-demo-step:nth-child(3) {
    border-left: 0;
  }

  .geogebra-demo-toolbar {
    grid-template-columns: 1fr 1fr;
    padding: 14px 16px 8px;
  }

  .geogebra-demo-instruction {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 66px;
  }

  .geogebra-demo-time-control {
    grid-template-columns: 78px minmax(0, 1fr) 46px;
    padding: 8px 16px 14px;
  }

  .geogebra-demo-legend {
    gap: 7px 12px;
    padding-inline: 16px;
  }

  .geogebra-demo-stage,
  .geogebra-demo-mount {
    height: 540px;
  }

  .geogebra-demo-fallback {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }

  .geogebra-demo-fallback img {
    max-height: 280px;
  }
}

.chapter-demo-shell {
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.92), rgba(255, 251, 235, 0.88));
  padding: 18px;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.07);
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}

.chapter-demo-head {
  margin-bottom: 14px;
}

.chapter-demo-title {
  color: #1e293b;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
}

.chapter-demo-subtitle {
  color: #475569;
  font-size: 14px;
  line-height: 1.55;
  margin-top: 4px;
}

.chapter-demo-grid {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.chapter-demo-shell.is-narrow .chapter-demo-grid {
  grid-template-columns: 1fr;
}

.chapter-demo-controls,
.chapter-demo-stage,
.chapter-demo-readouts {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(203, 213, 225, 0.92);
  border-radius: 10px;
}

.chapter-demo-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
}

.chapter-demo-control {
  display: grid;
  gap: 7px;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
}

.chapter-demo-slider-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  gap: 10px;
  align-items: center;
}

.chapter-demo-control input,
.chapter-demo-select {
  width: 100%;
}

.chapter-demo-control-value {
  color: #1e3a8a;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.chapter-demo-select {
  appearance: none;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.95);
  border-radius: 8px;
  color: #1e293b;
  font: inherit;
  padding: 8px 10px;
}

.chapter-demo-stage {
  min-width: 0;
  overflow: hidden;
  padding: 10px;
}

.chapter-demo-canvas {
  display: block;
  max-width: 100%;
  border-radius: 8px;
}

.chapter-demo-readouts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
}

.chapter-demo-shell.is-narrow .chapter-demo-readouts {
  grid-template-columns: 1fr;
}

.chapter-demo-readout {
  color: #475569;
  font-size: 13px;
  line-height: 1.45;
}

.chapter-demo-readout strong {
  color: #0f172a;
}

.phasor-demo-shell {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,0.9);
  padding: 20px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.phasor-demo-head {
  margin-bottom: 14px;
}

.phasor-demo-intro {
  margin-bottom: 16px;
  color: var(--text);
}

.phasor-demo-intro p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.phasor-demo-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}

.phasor-demo-subtitle {
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.6;
}

.phasor-demo-grid {
  display: grid;
  grid-template-columns: minmax(180px, 300px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  max-width: 100%;
  min-width: 0;
}

.phasor-demo-shell.is-narrow .phasor-demo-grid {
  grid-template-columns: 1fr;
}

.phasor-demo-left,
.phasor-demo-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.phasor-demo-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.phasor-demo-control,
.phasor-demo-readouts,
.phasor-demo-formula,
.phasor-demo-canvas-wrap {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(248,250,252,0.9);
}

.phasor-demo-control {
  padding: 12px 14px;
}

.phasor-demo-control-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--text);
}

.phasor-demo-slider-row {
  display: grid;
  grid-template-columns: 1fr 60px;
  gap: 12px;
  align-items: center;
}

.phasor-demo-slider-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.phasor-demo-select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  background: #fff;
  font: inherit;
  color: var(--text);
}

.phasor-demo-reset {
  border: 1px solid #0284c7;
  border-radius: 12px;
  padding: 10px 14px;
  background: #38bdf8;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 0 #0284c7;
}

.phasor-demo-readouts,
.phasor-demo-formula {
  padding: 14px 16px;
  color: var(--muted);
  line-height: 1.6;
}

.phasor-demo-readout + .phasor-demo-readout {
  margin-top: 8px;
}

.phasor-demo-formula-main {
  color: var(--text);
  font-weight: 600;
}

.phasor-demo-formula-sub {
  margin-top: 8px;
}

.phasor-demo-canvas-wrap {
  padding: 10px;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.phasor-demo-canvas {
  display: block;
  width: 100%;
  max-width: 100%;
}

.complex-demo-shell {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
  border: 3px solid #bfdbfe;
  border-radius: 20px;
  background:
    linear-gradient(rgba(226, 232, 240, 0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226, 232, 240, 0.4) 1px, transparent 1px),
    #fdfbf7;
  background-size: 20px 20px;
  padding: 18px;
  box-shadow: 4px 7px 0 #dbeafe;
}

.complex-demo-head {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.complex-demo-title {
  color: var(--text);
  font-family: "Quicksand", "Nunito", sans-serif;
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1.2;
}

.complex-demo-subtitle,
.complex-demo-intro {
  color: var(--muted);
  line-height: 1.55;
}

.complex-demo-intro p {
  margin: 0 0 12px;
}

.complex-demo-grid {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
}

.complex-demo-shell.is-narrow .complex-demo-grid {
  grid-template-columns: 1fr;
}

.complex-demo-left,
.complex-demo-right {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.complex-demo-controls {
  display: grid;
  gap: 12px;
}

.complex-demo-control,
.complex-demo-readouts,
.complex-demo-canvas-wrap,
.complex-demo-legend {
  border: 2px solid rgba(203, 213, 225, 0.9);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 2px 0 rgba(226, 232, 240, 0.9);
}

.complex-demo-control {
  display: grid;
  gap: 9px;
  padding: 12px;
}

.complex-demo-control-label {
  color: #475569;
  font-weight: 800;
}

.complex-demo-slider-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 12px;
  align-items: center;
}

.complex-demo-slider-row input {
  width: 100%;
  accent-color: #2563eb;
}

.complex-demo-slider-value {
  text-align: right;
  color: #2563eb;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.complex-demo-select {
  width: 100%;
  min-height: 38px;
  border: 2px solid #cbd5e1;
  border-radius: 12px;
  background: #ffffff;
  color: #475569;
  padding: 0 12px;
  font-weight: 700;
}

.complex-demo-reset {
  min-height: 44px;
  border: 2px solid #0284c7;
  border-radius: 12px;
  background: #38bdf8;
  color: #ffffff;
  cursor: pointer;
  font-weight: 900;
  box-shadow: 0 4px 0 #0284c7;
}

.complex-demo-readouts {
  display: grid;
  gap: 8px;
  padding: 14px;
  color: #475569;
}

.complex-demo-readout strong {
  color: var(--text);
}

.complex-demo-canvas-wrap {
  padding: 12px;
  min-width: 0;
}

.complex-demo-canvas {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 2px solid rgba(203, 213, 225, 0.85);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: inset 0 -3px 0 rgba(226, 232, 240, 0.7);
}

.complex-demo-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 10px 12px;
  color: #475569;
  font-size: 0.92rem;
  font-weight: 800;
}

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

.complex-demo-swatch {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  display: inline-block;
}

.complex-demo-swatch.real { background: #2563eb; }
.complex-demo-swatch.imag { background: #0f766e; }
.complex-demo-swatch.vector { background: #dc2626; }
.complex-demo-swatch.conjugate { background: #a855f7; }

.sinusoid-demo-shell {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
  border: 3px solid #7dd3fc;
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff 0%, #effaff 100%);
  padding: 18px;
  box-shadow: 4px 7px 0 #dbeafe;
}

.sinusoid-demo-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.sinusoid-demo-title {
  color: var(--text);
  font-family: "Quicksand", "Nunito", sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.25;
}

.sinusoid-demo-subtitle {
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.55;
}

.sinusoid-demo-play,
.sinusoid-demo-reset {
  border: 2px solid #0284c7;
  border-radius: 12px;
  background: #38bdf8;
  color: #ffffff;
  cursor: pointer;
  font-weight: 800;
  box-shadow: 0 4px 0 #0284c7;
}

.sinusoid-demo-play {
  flex: 0 0 auto;
  padding: 9px 14px;
}

.sinusoid-demo-grid {
  display: grid;
  grid-template-columns: minmax(190px, 260px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
}

.sinusoid-demo-controls {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.sinusoid-demo-control {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 10px;
  align-items: center;
  border: 2px solid rgba(125, 211, 252, 0.45);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.88);
  padding: 12px;
  color: var(--text);
  font-weight: 700;
}

.sinusoid-demo-control input {
  grid-column: 1 / -1;
  width: 100%;
  accent-color: #0ea5e9;
}

.sinusoid-demo-control strong {
  color: #0369a1;
  font-variant-numeric: tabular-nums;
}

.sinusoid-demo-reset {
  padding: 11px 14px;
}

.sinusoid-demo-stage {
  display: grid;
  grid-template-columns: minmax(360px, 1.55fr) minmax(240px, 0.72fr);
  gap: 14px;
  min-width: 0;
  align-items: stretch;
}

.sinusoid-demo-canvas {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 2px solid rgba(203, 213, 225, 0.85);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: inset 0 -3px 0 rgba(226, 232, 240, 0.7);
}

.sinusoid-demo-wave {
  min-width: 0;
}

.sinusoid-demo-phasor {
  aspect-ratio: 1 / 1;
  justify-self: stretch;
  align-self: start;
}

.sinusoid-demo-readout {
  margin-top: 14px;
  border: 2px solid rgba(125, 211, 252, 0.45);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  padding: 13px 15px;
  color: var(--muted);
  line-height: 1.55;
}

.sinusoid-demo-formula {
  color: var(--text);
  font-weight: 800;
  margin-bottom: 7px;
}

.sinusoid-demo-note {
  color: #526277;
}

@media (max-width: 980px) {
  .sinusoid-demo-grid,
  .sinusoid-demo-stage {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  .sinusoid-demo-stage {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .phasor-demo-grid {
    grid-template-columns: 1fr;
  }
}

.matrix-demo-canvas {
  width: 100%;
  min-width: 820px;
  background: white;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

.matrix-demo-observe {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.matrix-demo-status {
  margin: 8px 0 12px;
  font-size: 15px;
}

.matrix-demo-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  margin-right: 8px;
}

.matrix-demo-pill-good {
  background: rgba(20, 184, 166, 0.12);
  color: #0f766e;
}

.matrix-demo-pill-bad {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

.matrix-demo-formula {
  border: 1px solid rgba(148,163,184,0.25);
  border-radius: 12px;
  background: rgba(248,250,252,0.8);
  padding: 12px 14px;
  margin-bottom: 14px;
}

.matrix-demo-formula-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 6px;
}

.matrix-demo-formula-main {
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

.matrix-demo-formula-sub {
  color: var(--muted);
  font-size: 14px;
}

/* Fix for chat column width and wrapping */
.learn-chat-col {
  flex: 4.5;
  display: flex;
  flex-direction: column;
  position: relative;
}
.learn-explain-col {
  flex: 5.5;
  min-width: 0;
}
.fub-q, .fub-a, .learn-explain-content {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Web Sources List in chat */
@keyframes searchProgressSweep {
  0% {
    transform: translateX(-115%);
  }
  55% {
    transform: translateX(125%);
  }
  100% {
    transform: translateX(255%);
  }
}

.search-progress-card {
  position: relative;
}

.search-progress-card::before {
  content: "";
  position: absolute;
  pointer-events: none;
}

.search-progress-card::after {
  right: 26px;
  bottom: -16px;
  border-left: 2px dashed rgba(30, 41, 59, 0.18);
  border-right: 2px dashed rgba(30, 41, 59, 0.18);
}

.search-progress-tape {
  border-left: 2px dashed rgba(30, 41, 59, 0.16);
  border-right: 2px dashed rgba(30, 41, 59, 0.16);
  font-family: "DM Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.search-progress-pin {
  position: absolute;
  right: 42px;
  top: 20px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #ef4444;
  box-shadow: inset -2px -2px 4px rgba(0,0,0,0.22), 2px 4px 8px rgba(15, 23, 42, 0.22);
  z-index: 2;
}

.search-progress-pin::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
}

.search-progress-head {
  position: relative;
  z-index: 1;
}

.search-progress-kicker {
  display: inline-block;
  font-family: "DM Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.search-progress-title {
  margin: 14px 0 0;
  font-family: "Quicksand", "Nunito", sans-serif;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.15;
  font-weight: 900;
  background-repeat: no-repeat;
  background-size: 100% 34%;
  background-position: 0 88%;
}

.search-progress-summary {
  margin-top: 16px;
  max-width: 650px;
  font-size: 15px;
  line-height: 1.72;
  font-weight: 700;
}

.search-progress-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 22px;
  position: relative;
  z-index: 1;
}

.search-progress-card .search-step {
  display: grid;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  color: #1e293b;
  transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-progress-card .search-step:not(.is-muted) {
  box-shadow: 4px 4px 0 rgba(14, 165, 233, 0.24);
  transform: translate(-1px, -1px);
}


.search-progress-index,
.search-step-index {
  font-family: "DM Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 13px;
  line-height: 1;
  font-weight: 800;
}

.search-progress-card .search-step-label {
  font-size: 15px;
  line-height: 1.45;
  font-weight: 850;
}

.search-progress-card .search-live-sources {
  margin: 0 0 2px 68px;
  padding: 10px 0 0 14px;
  border-left: 1px solid rgba(203, 213, 225, 0.8);
  max-height: 260px;
  overflow: auto;
}

.search-progress-card .search-tree-title {
  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}

.search-progress-card .search-tree-list {
  margin-top: 8px;
}

.search-progress-card .search-tree-item {
  background: transparent;
}

.fub-a .search-progress-card,
.followup-loading .search-progress-card {
  width: 100%;
  margin: 0;
  padding: 25px 18px 18px;
  border-radius: 6px;
  box-shadow: 5px 5px 0 rgba(30, 41, 59, 0.18);
  transform: rotate(-0.25deg);
}

.fub-a .search-progress-head,
.followup-loading .search-progress-head {
  padding-bottom: 14px;
}

.fub-a .search-progress-title,
.followup-loading .search-progress-title {
  font-size: 16px;
}

.fub-a .search-progress-summary,
.followup-loading .search-progress-summary {
  font-size: 13px;
}

.fub-a .search-progress-list,
.followup-loading .search-progress-list {
  gap: 10px;
  padding-top: 14px;
}

.fub-a .search-progress-card .search-step,
.followup-loading .search-progress-card .search-step {
  grid-template-columns: 16px 34px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 12px;
  border-radius: 5px;
}

.fub-a .search-progress-card .search-live-sources,
.followup-loading .search-progress-card .search-live-sources {
  margin-left: 60px;
}

/* search-step spinner */
.step-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: middle;
  margin-right: 4px;
  flex-shrink: 0;
}
.step-spinner {
  border: 2px solid rgba(99,102,241,0.25);
  border-top-color: var(--primary, #6366f1);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.step-done {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--success, #22c55e);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  animation: none;
  border: none;
}

/* Fix learn-followup-bar layout to accommodate new toggles */
.followup-bar-row {
  display: flex !important;
  align-items: center;
  gap: 8px; /* space out components */
  width: 100%;
}
.learn-followup-send {
  flex-shrink: 0;
  position: static !important;
  margin-left: 0 !important;
}
#answerLengthToggleLearn {
  flex-shrink: 0;
}

/* ========================================================= */
/* STABLE LIGHT TUTOR LAYOUT OVERRIDES                       */
/* ========================================================= */
body,
.app {
  background: var(--bg-body) !important;
}

.app {
  height: 100vh !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  display: flex;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
}

.learn-view {
  background: var(--bg-main) !important;
  color: var(--text-primary) !important;
  display: flex;
  flex-direction: column;
}


.welcome {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-main);
  overflow: hidden;
  z-index: 5;
}

.welcome-inner,
.welcome-inner-override {
  width: 100%;
  max-width: 1100px;
  padding: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 64px;
  box-sizing: border-box;
}

.search-box {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04), 0 0 0 1px rgba(255, 255, 255, 0.5) inset !important;
  border-radius: 20px !important;
  padding: 16px 20px !important;
  width: 100%;
  max-width: 820px;
  min-height: 140px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  transition: all 0.3s ease;
}

.search-box-row {
  display: flex;
  width: 100%;
  align-items: flex-end;
  gap: 12px;
  flex: 1;
}

.search-box textarea {
  flex: 1;
  min-height: 90px;
  padding: 8px 4px !important;
  color: var(--text-primary) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6;
  background: transparent !important;
  resize: none;
  border: none;
  outline: none;
}

.search-box textarea,
.followup-input,
.learn-followup-input {
  color: var(--text-primary) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  background: transparent !important;
}

.search-box textarea::placeholder,
.followup-input::placeholder,
.learn-followup-input::placeholder {
  color: var(--text-muted) !important;
}

.search-box-toolbar {
  margin-top: 12px;
}

.search-send,
.followup-send,
.learn-followup-send {
  background: #2563EB !important;
  color: #fff !important;
  border-radius: 10px !important;
  width: 36px !important;
  height: 36px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3) !important;
  transition: all 0.2s ease !important;
}

.search-send:not(:disabled):hover,
.followup-send:not(:disabled):hover,
.learn-followup-send:not(:disabled):hover {
  transform: translateY(-1px) !important;
  background: #1D4ED8 !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4) !important;
}

.search-send:disabled,
.followup-send:disabled,
.learn-followup-send:disabled {
  background: #E2E8F0 !important;
  color: #94A3B8 !important;
  box-shadow: none !important;
}

.learn-explain-col,
.learn-chat-col,
.learn-book-col {
  background: transparent !important;
  border-color: var(--border) !important;
}

#learnViewSelector {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: #f3f4f6 !important;
  border: 1px solid #d7dce3 !important;
  border-radius: 18px !important;
  padding: 6px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 8px 18px rgba(15, 23, 42, 0.05) !important;
}

#btnLectureView,
#btnTextbookView {
  min-width: 122px;
  height: 42px;
  border: none !important;
  border-radius: 14px !important;
  padding: 0 16px !important;
  color: #64748B !important;
  font-weight: 700 !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
}

#btnLectureView.active,
#btnTextbookView.active {
  background: #FFFFFF !important;
  color: #0F172A !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06) !important;
  font-weight: 800 !important;
  transform: translateY(-1px);
}

.app h1,
.app h2,
.app h3,
.app h4,
.learn-title {
  color: var(--text-primary) !important;
  letter-spacing: -0.03em !important;
}

.app p,
.explain-body p,
.learn-explain-body p {
  color: #334155 !important;
  line-height: 1.75 !important;
  font-size: 15px !important;
}

.toc-nav a.active {
  color: #2563EB !important;
  font-weight: 600 !important;
  border-left-color: #2563EB !important;
}

.syllabus-chapter.active,
.syllabus-section.active,
.syllabus-section-btn.active {
  background: #FFFFFF !important;
  color: #0F172A !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
  font-weight: 600 !important;
}

.learn-explain-toolbar {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--border) !important;
}

.learn-followup-bar {
  border-top: none !important;
}

#userBadge span,
.syllabus-header{
  color: #0F172A !important;
}

/* --- Web references compact UI at right upper --- */
#learnWebSection {
  background: transparent;
  padding: 14px 16px 0;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  flex-shrink: 0;
  overflow-y: auto;
  max-height: max(220px, 20%);
}
#learnWebSection.expanded {
  max-height: max(400px, 40%);
}
.learn-web-section-title {
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}
#learnWebCards {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  grid-template-columns: none !important;
}
.learn-web-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: auto;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
}
.learn-web-card .lwc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.learn-web-card .lwc-fav {
  width: 16px;
  height: 16px;
  border-radius: 2px;
  flex-shrink: 0;
}
.learn-web-card .lwc-title {
  font-weight: 600;
  color: #0F172A;
  white-space: nowrap;
}
.learn-web-card .lwc-domain {
  font-size: 11px;
  color: #64748B;
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: 10px;
  background: rgba(0,0,0,0.03);
  padding: 2px 6px;
  border-radius: 4px;
}
.learn-web-card-hidden {
  display: none !important;
}
.web-expand-btn {
  cursor: pointer;
  text-align: center;
  width: 100%;
  transition: color 0.15s;
}
.web-expand-btn:hover {
  color: #0F172A;
}

/* --- Feature navigation shell --- */
.syllabus-view,
.recent-view {
  height: 100%;
  overflow: auto;
  background: linear-gradient(180deg, #f8fafc 0%, #f3f7fb 100%);
}

.welcome-cover-btn {
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 14px;
}

.welcome-cover-btn:hover {
  transform: translateY(-2px);
}

:root[data-theme="dark"] .syllabus-view,
:root[data-theme="dark"] .recent-view {
  background: #171513 !important;
}

@media (max-width: 900px) {
  .lecture-overlay-btn {
    min-width: 48px;
    height: 48px;
    padding: 0 12px;
  }}

/* ============================================================
   V5 CUTE STUDYGRAM / FLASHCARD STYLE (UI Overrides)
   ============================================================ */

.learn-explain-body, .explain-body {
  color: #475569 !important;
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.learn-explain-body p, .learn-explain-body li, .explain-body p, .explain-body li {
  color: #475569 !important; font-size: 1.1rem !important; line-height: 1.85 !important; margin-bottom: 1.25rem !important;
}

.learn-explain-body h1, .explain-body h1 {
  font-family: "Quicksand", "Nunito", sans-serif !important; color: #1e293b !important; font-size: 2.3rem !important;
  font-weight: 800 !important; line-height: 1.3 !important; margin: 1rem 0 1.8rem !important; padding: 0 0.5rem !important;
  border-bottom: none !important; position: relative !important; display: inline-block !important; z-index: 1 !important;
}

.learn-explain-body h1::after, .explain-body h1::after {
  content: '' !important; position: absolute !important; bottom: 8px !important; left: 0 !important; width: 100% !important;
  height: 14px !important; background-color: #fde047 !important; z-index: -1 !important; border-radius: 8px !important;
  transform: rotate(-1.5deg) !important;
}

.learn-explain-body h2, .explain-body h2, .app .learn-explain-body h2, .app .explain-body h2 {
  font-family: "Quicksand", "Nunito", sans-serif !important; color: #334155 !important; font-size: 1.6rem !important;
  font-weight: 700 !important; line-height: 1.4 !important; margin: 2.8rem 0 1.2rem !important; padding-bottom: 0.5rem !important;
  border: none !important; border-bottom: 3px dotted #cbd5e1 !important; display: block !important;
}

.learn-explain-body h3, .explain-body h3, .app .learn-explain-body h3, .app .explain-body h3 {
  font-family: "Quicksand", "Nunito", sans-serif !important; color: #334155 !important; font-size: 1.2rem !important;
  font-weight: 700 !important; margin: 2rem 0 1rem !important; padding: 0 !important; border: none !important; text-transform: none !important;
}

@keyframes lecture-card-wiggle {
  0%, 100% { transform: rotate(-12deg) scale(1.1); }
  50% { transform: rotate(12deg) scale(1.1); }
}

.learn-explain-body .lecture-note-card, .explain-body .lecture-note-card {
  margin: 2rem 0 !important; padding: 1.5rem 1.8rem !important; border-radius: 20px !important;
  border: 3px solid #cbd5e1 !important; background-color: #ffffff !important; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; position: relative !important;
}

.learn-explain-body .lecture-note-card:hover, .explain-body .lecture-note-card:hover { transform: translateY(-6px) scale(1.02) !important; }
.learn-explain-body .lecture-note-card:hover > :is(h3, h4):first-child::before,
.explain-body .lecture-note-card:hover > :is(h3, h4):first-child::before { display: inline-block !important; animation: lecture-card-wiggle 0.6s ease-in-out infinite !important; }

.learn-explain-body .lecture-note-card > :is(h3, h4):first-child,
.explain-body .lecture-note-card > :is(h3, h4):first-child {
  display: inline-flex !important; align-items: center !important; font-family: "Quicksand", "Nunito", sans-serif !important;
  font-size: 0.95rem !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important;
  margin: 0 0 1.2rem 0 !important; padding: 0.4rem 1rem !important; border-radius: 12px !important; line-height: 1 !important;
  gap: 0.5rem !important; border: 2px solid rgba(0,0,0,0.05) !important;
}

.learn-explain-body .lecture-note-card-example, .explain-body .lecture-note-card-example { background-color: #f0f9ff !important; border-color: #7dd3fc !important; box-shadow: 4px 6px 0px #bae6fd !important; }
.learn-explain-body .lecture-note-card-example:hover, .explain-body .lecture-note-card-example:hover { box-shadow: 6px 10px 0px #7dd3fc !important; }
.learn-explain-body .lecture-note-card-example > :is(h3, h4):first-child, .explain-body .lecture-note-card-example > :is(h3, h4):first-child { background-color: #38bdf8 !important; color: #ffffff !important; }
.learn-explain-body .lecture-note-card-example > :is(h3, h4):first-child::before, .explain-body .lecture-note-card-example > :is(h3, h4):first-child::before { content: "💡" !important; font-size: 1.2em !important; }

.learn-explain-body .lecture-note-card-warning, .explain-body .lecture-note-card-warning { background-color: #fff1f2 !important; border-color: #fca5a5 !important; box-shadow: 4px 6px 0px #fecdd3 !important; }
.learn-explain-body .lecture-note-card-warning:hover, .explain-body .lecture-note-card-warning:hover { box-shadow: 6px 10px 0px #fca5a5 !important; }
.learn-explain-body .lecture-note-card-warning > :is(h3, h4):first-child, .explain-body .lecture-note-card-warning > :is(h3, h4):first-child { background-color: #fb7185 !important; color: #ffffff !important; }
.learn-explain-body .lecture-note-card-warning > :is(h3, h4):first-child::before, .explain-body .lecture-note-card-warning > :is(h3, h4):first-child::before { content: "🚨" !important; font-size: 1.2em !important; }

.learn-explain-body .lecture-note-card-exam, .explain-body .lecture-note-card-exam { background-color: #fffbeb !important; border-color: #fcd34d !important; box-shadow: 4px 6px 0px #fde68a !important; }
.learn-explain-body .lecture-note-card-exam:hover, .explain-body .lecture-note-card-exam:hover { box-shadow: 6px 10px 0px #fcd34d !important; }
.learn-explain-body .lecture-note-card-exam > :is(h3, h4):first-child, .explain-body .lecture-note-card-exam > :is(h3, h4):first-child { background-color: #fbbf24 !important; color: #ffffff !important; }
.learn-explain-body .lecture-note-card-exam > :is(h3, h4):first-child::before, .explain-body .lecture-note-card-exam > :is(h3, h4):first-child::before { content: "🌟" !important; font-size: 1.2em !important; }

.learn-explain-body .lecture-note-card-rule, .explain-body .lecture-note-card-rule { background-color: #f0fdf4 !important; border-color: #6ee7b7 !important; box-shadow: 4px 6px 0px #a7f3d0 !important; }
.learn-explain-body .lecture-note-card-rule:hover, .explain-body .lecture-note-card-rule:hover { box-shadow: 6px 10px 0px #6ee7b7 !important; }
.learn-explain-body .lecture-note-card-rule > :is(h3, h4):first-child, .explain-body .lecture-note-card-rule > :is(h3, h4):first-child { background-color: #34d399 !important; color: #ffffff !important; }
.learn-explain-body .lecture-note-card-rule > :is(h3, h4):first-child::before, .explain-body .lecture-note-card-rule > :is(h3, h4):first-child::before { content: "🍀" !important; font-size: 1.2em !important; }

.learn-explain-body .lecture-note-card-formula, .explain-body .lecture-note-card-formula { background-color: #f5f3ff !important; border-color: #c4b5fd !important; box-shadow: 4px 6px 0px #ddd6fe !important; }
.learn-explain-body .lecture-note-card-formula:hover, .explain-body .lecture-note-card-formula:hover { box-shadow: 6px 10px 0px #c4b5fd !important; }
.learn-explain-body .lecture-note-card-formula > :is(h3, h4):first-child, .explain-body .lecture-note-card-formula > :is(h3, h4):first-child { background-color: #a78bfa !important; color: #ffffff !important; }
.learn-explain-body .lecture-note-card-formula > :is(h3, h4):first-child::before, .explain-body .lecture-note-card-formula > :is(h3, h4):first-child::before { content: "🔮" !important; font-size: 1.2em !important; }

.learn-explain-body .lecture-note-card-summary,
.explain-body .lecture-note-card-summary {
  background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%) !important;
  border-color: #7dd3fc !important;
  box-shadow: 4px 6px 0px #dbeafe !important;
}

.learn-explain-body .lecture-note-card-summary:hover,
.explain-body .lecture-note-card-summary:hover {
  box-shadow: 6px 10px 0px #bae6fd !important;
}

.learn-explain-body .lecture-note-card-summary > :is(h1, h2, h3):first-child,
.explain-body .lecture-note-card-summary > :is(h1, h2, h3):first-child {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  margin: 0 0 1.25rem !important;
  padding: 0.45rem 1.1rem !important;
  border: 2px solid rgba(14, 165, 233, 0.18) !important;
  border-radius: 12px !important;
  background: #38bdf8 !important;
  color: #ffffff !important;
  font-family: "Quicksand", "Nunito", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

.learn-explain-body .lecture-note-card-summary > :is(h1, h2, h3):first-child::after,
.explain-body .lecture-note-card-summary > :is(h1, h2, h3):first-child::after {
  content: none !important;
}

.learn-explain-body .learn-key-takeaways-list,
.explain-body .learn-key-takeaways-list {
  counter-reset: takeaway-item !important;
  display: grid !important;
  gap: 0.85rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.learn-explain-body .learn-key-takeaways-list > li,
.explain-body .learn-key-takeaways-list > li {
  counter-increment: takeaway-item !important;
  position: relative !important;
  min-height: 3.2rem !important;
  margin: 0 !important;
  padding: 0.95rem 1rem 0.95rem 4.1rem !important;
  border: 2px solid rgba(125, 211, 252, 0.55) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: inset 0 -3px 0 rgba(186, 230, 253, 0.75) !important;
  color: #475569 !important;
  line-height: 1.75 !important;
}

.learn-explain-body .learn-key-takeaways-list > li::before,
.explain-body .learn-key-takeaways-list > li::before {
  content: counter(takeaway-item) !important;
  position: absolute !important;
  left: 1rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: grid !important;
  place-items: center !important;
  width: 2.15rem !important;
  height: 2.15rem !important;
  border: 2px solid #0ea5e9 !important;
  border-radius: 999px !important;
  background: #dff6ff !important;
  color: #0369a1 !important;
  font-family: "Quicksand", "Nunito", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  box-shadow: 0 3px 0 #bae6fd !important;
}

.learn-explain-body .learn-key-takeaways-list > li p,
.explain-body .learn-key-takeaways-list > li p {
  margin: 0 !important;
}

/* ============================================================
   CUTE STUDYGRAM / FLASHCARD SHELL OVERRIDES
   ============================================================ */

:root,
:root[data-theme="light"] {
  --bg-body: #f8fafc !important;
  --bg-sidebar: rgba(255, 255, 255, 0.8) !important;
  --sidebar-text-primary: #1e293b !important;
  --sidebar-text-secondary: #475569 !important;
  --sidebar-text-muted: #64748b !important;
  --sidebar-border: #cbd5e1 !important;
  --sidebar-hover: rgba(56, 189, 248, 0.12) !important;
  --sidebar-active: #ffffff !important;
  --sidebar-accent: #1e293b !important;
  --bg-main: #ffffff !important;
  --bg-panel: #ffffff !important;
  --bg-input: #ffffff !important;
  --bg-hover: rgba(56, 189, 248, 0.12) !important;
  --bg-active: rgba(56, 189, 248, 0.16) !important;
  --border: #cbd5e1 !important;
  --border-strong: #94a3b8 !important;
  --border-focus: #38bdf8 !important;
  --text-primary: #1e293b !important;
  --text-secondary: #475569 !important;
  --text-muted: #64748b !important;
  --accent: #38bdf8 !important;
  --text-accent: #0284c7 !important;
  --shadow-sm: none !important;
  --shadow-md: none !important;
  --shadow-input: none !important;
  --shadow-card: none !important;
}

html,
body {
  font-family: "Nunito", -apple-system, sans-serif !important;
  background-image: radial-gradient(#cbd5e1 2px, transparent 2px) !important;
  background-size: 32px 32px !important;
  color: #1e293b !important;
}

body,
button,
input,
textarea,
select,
.search-input,
.followup-input,
.learn-followup-input,
.welcome-sub,
.learn-intro-text,
.settings-page-copy,
.sidebar-link,
.sidebar-version-row,
.topbar,
.status-chip {
  font-family: "Nunito", -apple-system, sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.title,
.logo-text,
.welcome-h1,
.learn-title,
.settings-page-title,
.settings-page-card-title,
.login-card-title,
.learn-kp-title {
  font-family: "Quicksand", "Nunito", sans-serif !important;
}

.intro-landing,
.intro-landing button,
.intro-landing input,
.intro-landing textarea {
  font-family: "Nunito", -apple-system, sans-serif !important;
}

.intro-landing h1,
.intro-landing h2,
.intro-landing h3,
.intro-landing h4,
.intro-landing .text-xl,
.intro-landing .text-2xl,
.intro-landing .text-3xl,
.intro-landing .text-4xl,
.intro-landing .text-5xl,
.intro-landing .text-6xl,
.intro-landing .text-7xl,
.intro-landing .text-8xl {
  font-family: "Quicksand", "Nunito", sans-serif !important;
}

.app {
  background-size: 44px 44px, 56px 56px, 56px 56px !important;
  padding: 0 !important;
  gap: 0 !important;
}

.main {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  backdrop-filter: none !important;
  overflow: hidden !important;
}

.sidebar{
  backdrop-filter: none;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-top: 0 !important;
}

.sidebar {
  border-right: 1px solid #cbd5e1 !important;
}

.sidebar-top,
.sidebar-footer {
  border-color: #dbe4ee !important;
}

.logo-icon {
  background: #ffffff !important;
  border: 2px solid #cbd5e1 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 0 #cbd5e1 !important;
}

.logo-text {
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: #1e293b !important;
}

.sidebar-link,
.sidebar-settings-btn,
.settings-page-nav-item,
.theme-toggle-btn,
.book-nav-btn,
.learn-kp-btn,
.back-btn,
.stop-btn,
.sidebar-float-toggle,
.learn-close,
.search-send,
.followup-send,
.learn-followup-send,
.learn-start-btn,
.feature-close-btn,
.feature-close-btn-compact,
.attach-btn,
.chip,
.login-sso-btn,
.login-submit-btn,
.login-guest-btn,
.settings-primary-btn,
.settings-secondary-btn,
.settings-inline-btn,
.sidebar-syllabus-panel,
.sidebar-recent-panel{
  transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.sidebar-link,
.sidebar-settings-btn,
.settings-page-nav-item {
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.sidebar-link:hover,
.sidebar-settings-btn:hover,
.settings-page-nav-item:hover {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
  transform: translateY(-1px) !important;
}

.sidebar-link.active,
.settings-page-nav-item.active {
  background: #ffffff !important;
  border: 2px solid #cbd5e1 !important;
  color: #1e293b !important;
  box-shadow: 0 4px 0 #cbd5e1 !important;
}

.search-box,
.followup-bar,
.learn-followup-bar,
.search-box-row,
.followup-input,
.learn-followup-input,
.search-input {
  background: #ffffff !important;
}

.search-box,
.followup-bar {
  border: 3px solid #cbd5e1 !important;
  border-radius: 20px !important;
  box-shadow: none !important;
}

.search-box:focus-within,
.followup-bar:focus-within {
  border-color: #38bdf8 !important;
  box-shadow: 4px 6px 0px #bae6fd !important;
  transform: translateY(-2px) !important;
}

.search-input,
.followup-input,
.learn-followup-input {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.search-send,
.followup-send,
.learn-followup-send,
.learn-start-btn,
.settings-primary-btn,
.login-submit-btn {
  background: #38bdf8 !important;
  color: #ffffff !important;
  border: 2px solid #0284c7 !important;
  box-shadow: 0 4px 0px #0284c7 !important;
  border-radius: 16px !important;
}

.search-send:not(:disabled):hover,
.followup-send:not(:disabled):hover,
.learn-followup-send:not(:disabled):hover,
.learn-start-btn:hover,
.settings-primary-btn:hover,
.login-submit-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 0px #0284c7 !important;
}

.search-send:not(:disabled):active,
.followup-send:not(:disabled):active,
.learn-followup-send:not(:disabled):active,
.learn-start-btn:active,
.settings-primary-btn:active,
.login-submit-btn:active {
  transform: translateY(4px) !important;
  box-shadow: 0 0 0 #0284c7 !important;
}

.feature-close-btn,
.feature-close-btn-compact,
.learn-close,
.book-nav-btn,
.sidebar-float-toggle,
.back-btn,
.chip,
.settings-secondary-btn,
.settings-inline-btn,
.login-guest-btn,
.login-sso-btn,
.attach-btn {
  background: #ffffff !important;
  color: #475569 !important;
  border: 2px solid #cbd5e1 !important;
  box-shadow: 0 4px 0px #cbd5e1 !important;
  border-radius: 16px !important;
}

.feature-close-btn:hover,
.feature-close-btn-compact:hover,
.learn-close:hover,
.book-nav-btn:hover,
.sidebar-float-toggle:hover,
.back-btn:hover,
.chip:hover,
.settings-secondary-btn:hover,
.settings-inline-btn:hover,
.login-guest-btn:hover,
.login-sso-btn:hover,
.attach-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 0px #cbd5e1 !important;
  color: #0f172a !important;
}

.feature-close-btn:active,
.feature-close-btn-compact:active,
.learn-close:active,
.book-nav-btn:active,
.sidebar-float-toggle:active,
.back-btn:active,
.chip:active,
.settings-secondary-btn:active,
.settings-inline-btn:active,
.login-guest-btn:active,
.login-sso-btn:active,
.attach-btn:active {
  transform: translateY(4px) !important;
  box-shadow: 0 0 0 #cbd5e1 !important;
}

.welcome,
.answer,
.learn-view,
.settings-view,
.settings-page-shell {
  background: transparent !important;
}

.settings-page-card,
.settings-page-nav,
.learn-intro-card,
.login-card,
.sources,
.search-box,
.followup-bar,
.learn-followup-bar,
.learn-chat-popover,
#kcModal,
#authOverlay > div {
  border: 3px solid #cbd5e1 !important;
  border-radius: 24px !important;
  box-shadow:
    0px 8px 0px -2px #f1f5f9,
    0px 8px 0px 1px #cbd5e1,
    0px 16px 0px -4px #f8fafc,
    0px 16px 0px 1px #94a3b8 !important;
  backdrop-filter: none !important;
}

#kcModalHeader {
  border-bottom: 3px dashed #cbd5e1 !important;
}

.topbar,
.learn-topbar {
  border-bottom: 2px solid #dbe4ee !important;
}

.main .status-chip,
.sidebar-nav-group-label,
.settings-page-eyebrow,
.settings-page-card-eyebrow {
  font-family: "Quicksand", "Nunito", sans-serif !important;
}

.search-box.drag-over,
.followup-bar.drag-over {
  border-color: #38bdf8 !important;
  box-shadow: 4px 6px 0px #bae6fd !important;
}

.welcome-cover-btn > div,
.settings-user-card,
.search-box,
.followup-bar,
.learn-followup-bar {
  box-shadow: inherit;
}

@media (max-width: 960px) {
  .app {
    padding: 10px !important;
    gap: 10px !important;
  }

  .main,
.sidebar{
    border-radius: 22px !important;
  }
}

:root[data-theme="dark"] {
  --bg-body: #0c111b !important;
  --bg-sidebar: rgba(14, 20, 31, 0.94) !important;
  --sidebar-text-primary: #e6edf7 !important;
  --sidebar-text-secondary: #9fb0c7 !important;
  --sidebar-text-muted: #6f819b !important;
  --sidebar-border: #243246 !important;
  --sidebar-hover: rgba(96, 165, 250, 0.12) !important;
  --sidebar-active: #172233 !important;
  --sidebar-accent: #f8fbff !important;
  --bg-main: #101722 !important;
  --bg-panel: #151e2b !important;
  --bg-input: #182334 !important;
  --bg-hover: rgba(96, 165, 250, 0.10) !important;
  --bg-active: rgba(96, 165, 250, 0.16) !important;
  --border: #243246 !important;
  --border-strong: #3b4d66 !important;
  --border-focus: #60a5fa !important;
  --text-primary: #e6edf7 !important;
  --text-secondary: #9fb0c7 !important;
  --text-muted: #6f819b !important;
  --accent: #60a5fa !important;
  --text-accent: #c9ddff !important;
}

:root[data-theme="dark"] html,
:root[data-theme="dark"] body {
  background-color: #0c111b !important;
  background-image: radial-gradient(rgba(96, 165, 250, 0.18) 1.5px, transparent 1.5px) !important;
  background-size: 32px 32px !important;
  color: #e6edf7 !important;
}

:root[data-theme="dark"] .app {
  background: transparent !important;
}

:root[data-theme="dark"] .main {
  background: linear-gradient(180deg, #101722 0%, #0f1621 100%) !important;
  border: 3px solid #2b3a50 !important;
  box-shadow:
    0px 8px 0px -2px #162131,
    0px 8px 0px 1px #2b3a50,
    0px 16px 0px -4px #0c131e,
    0px 16px 0px 1px #1b2738 !important;
}

:root[data-theme="dark"] .sidebar{
  background: linear-gradient(180deg, rgba(15, 21, 32, 0.96), rgba(12, 18, 28, 0.96)) !important;
  border: 3px solid #2b3a50 !important;
  box-shadow:
    0px 8px 0px -2px #162131,
    0px 8px 0px 1px #2b3a50 !important;
}

:root[data-theme="dark"] .sidebar-top,
:root[data-theme="dark"] .sidebar-footer,
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .learn-topbar {
  border-color: #223044 !important;
}

:root[data-theme="dark"] .logo-icon {
  background: linear-gradient(180deg, #172131 0%, #121a28 100%) !important;
  border-color: #31435b !important;
  box-shadow: 0 4px 0 #223247 !important;
  color: #dbe8ff !important;
}

:root[data-theme="dark"] .sidebar .logo {
  background: #fdfbf7 !important;
  border-color: #1e293b !important;
  box-shadow: 4px 4px 0 #1e293b !important;
}

:root[data-theme="dark"] .logo-icon.logo-icon-brand {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] .logo-text {
  color: #1e293b !important;
}

:root[data-theme="dark"] .sidebar-link,
:root[data-theme="dark"] .sidebar-settings-btn,
:root[data-theme="dark"] .settings-page-nav-item {
  color: #9fb0c7 !important;
}

:root[data-theme="dark"] .sidebar-link:hover,
:root[data-theme="dark"] .sidebar-settings-btn:hover,
:root[data-theme="dark"] .settings-page-nav-item:hover {
  background: #182334 !important;
  border-color: #31445e !important;
  color: #f8fbff !important;
}

:root[data-theme="dark"] .sidebar-link.active,
:root[data-theme="dark"] .settings-page-nav-item.active {
  background: #1b273a !important;
  border-color: #416086 !important;
  color: #f8fbff !important;
  box-shadow: 0 4px 0 #24364d !important;
}

:root[data-theme="dark"] .search-box,
:root[data-theme="dark"] .followup-bar,
:root[data-theme="dark"] .learn-followup-bar,
:root[data-theme="dark"] .settings-page-card,
:root[data-theme="dark"] .settings-page-nav,
:root[data-theme="dark"] .learn-intro-card,
:root[data-theme="dark"] .login-card,
:root[data-theme="dark"] .sources,
:root[data-theme="dark"] .learn-chat-popover,
:root[data-theme="dark"] #kcModal,
:root[data-theme="dark"] #authOverlay > div,
:root[data-theme="dark"] .settings-user-card {
  background: linear-gradient(180deg, #151e2b 0%, #121a26 100%) !important;
  border: 3px solid #2b3a50 !important;
  box-shadow:
    0px 8px 0px -2px #162131,
    0px 8px 0px 1px #2b3a50,
    0px 16px 0px -4px #0c131e,
    0px 16px 0px 1px #1b2738 !important;
}

:root[data-theme="dark"] .search-box-row,
:root[data-theme="dark"] .search-input,
:root[data-theme="dark"] .followup-input,
:root[data-theme="dark"] .learn-followup-input,
:root[data-theme="dark"] .search-box-toolbar {
  background: transparent !important;
}

:root[data-theme="dark"] .search-box:focus-within,
:root[data-theme="dark"] .followup-bar:focus-within {
  border-color: #60a5fa !important;
  box-shadow: 4px 6px 0px #1f3550 !important;
}

:root[data-theme="dark"] .search-send,
:root[data-theme="dark"] .followup-send,
:root[data-theme="dark"] .learn-followup-send,
:root[data-theme="dark"] .learn-start-btn,
:root[data-theme="dark"] .settings-primary-btn,
:root[data-theme="dark"] .login-submit-btn {
  background: #60a5fa !important;
  color: #08111d !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 4px 0px #2457a6 !important;
}

:root[data-theme="dark"] .search-send:not(:disabled):hover,
:root[data-theme="dark"] .followup-send:not(:disabled):hover,
:root[data-theme="dark"] .learn-followup-send:not(:disabled):hover,
:root[data-theme="dark"] .learn-start-btn:hover,
:root[data-theme="dark"] .settings-primary-btn:hover,
:root[data-theme="dark"] .login-submit-btn:hover {
  box-shadow: 0 6px 0px #2457a6 !important;
}

:root[data-theme="dark"] .feature-close-btn,
:root[data-theme="dark"] .feature-close-btn-compact,
:root[data-theme="dark"] .learn-close,
:root[data-theme="dark"] .book-nav-btn,
:root[data-theme="dark"] .sidebar-float-toggle,
:root[data-theme="dark"] .back-btn,
:root[data-theme="dark"] .chip,
:root[data-theme="dark"] .settings-secondary-btn,
:root[data-theme="dark"] .settings-inline-btn,
:root[data-theme="dark"] .login-guest-btn,
:root[data-theme="dark"] .login-sso-btn,
:root[data-theme="dark"] .attach-btn,
:root[data-theme="dark"] .learn-side-restore,
:root[data-theme="dark"] .search-box-select,
:root[data-theme="dark"] .search-box-web-toggle,
:root[data-theme="dark"] .theme-toggle-group,
:root[data-theme="dark"] .theme-toggle-btn,
:root[data-theme="dark"] .settings-page-back,
:root[data-theme="dark"] .settings-page-version{
  background: #182334 !important;
  color: #d8e5f8 !important;
  border-color: #31445e !important;
  box-shadow: 0 4px 0px #223247 !important;
}

:root[data-theme="dark"] .feature-close-btn:hover,
:root[data-theme="dark"] .feature-close-btn-compact:hover,
:root[data-theme="dark"] .learn-close:hover,
:root[data-theme="dark"] .book-nav-btn:hover,
:root[data-theme="dark"] .sidebar-float-toggle:hover,
:root[data-theme="dark"] .back-btn:hover,
:root[data-theme="dark"] .chip:hover,
:root[data-theme="dark"] .settings-secondary-btn:hover,
:root[data-theme="dark"] .settings-inline-btn:hover,
:root[data-theme="dark"] .login-guest-btn:hover,
:root[data-theme="dark"] .login-sso-btn:hover,
:root[data-theme="dark"] .attach-btn:hover,
:root[data-theme="dark"] .learn-side-restore:hover,
:root[data-theme="dark"] .search-box-web-toggle:hover{
  color: #f8fbff !important;
  border-color: #4b6b93 !important;
}

:root[data-theme="dark"] .theme-toggle-btn.active,
:root[data-theme="dark"] .settings-primary-btn,
:root[data-theme="dark"] .sidebar-version-dot,
:root[data-theme="dark"] .search-box-web-toggle.active {
  color: #08111d !important;
}

:root[data-theme="dark"] .theme-toggle-btn.active {
  background: #dbe8ff !important;
  border-color: #dbe8ff !important;
  box-shadow: 0 4px 0px #91add6 !important;
}

:root[data-theme="dark"] .sidebar-version-dot {
  background: #8ec5ff;
}

:root[data-theme="dark"] .settings-user-avatar {
  background: rgba(96, 165, 250, 0.18) !important;
  color: #bcd7ff !important;
}

:root[data-theme="dark"] .settings-user-avatar-img {
  border-color: #31445e !important;
}

:root[data-theme="dark"] .welcome-h1,
:root[data-theme="dark"] .learn-title,
:root[data-theme="dark"] .settings-page-title,
:root[data-theme="dark"] .settings-page-card-title,
:root[data-theme="dark"] .login-card-title,
:root[data-theme="dark"] .learn-kp-title,
:root[data-theme="dark"] .chapter-overview-title,
:root[data-theme="dark"] .chapter-overview-list-title,
:root[data-theme="dark"] .chapter-overview-subcard-title {
  color: #eaf2ff !important;
}

:root[data-theme="dark"] .welcome-sub,
:root[data-theme="dark"] .settings-page-copy,
:root[data-theme="dark"] .settings-page-subtitle,
:root[data-theme="dark"] .settings-user-meta,
:root[data-theme="dark"] .chapter-overview-summary,
:root[data-theme="dark"] .chapter-overview-subcard-summary,
:root[data-theme="dark"] .ghost {
  color: #9fb0c7 !important;
}

:root[data-theme="dark"] .learn-explain-body,
:root[data-theme="dark"] .explain-body,
:root[data-theme="dark"] .learn-explain-body p,
:root[data-theme="dark"] .learn-explain-body li,
:root[data-theme="dark"] .explain-body p,
:root[data-theme="dark"] .explain-body li {
  color: #bfd0e6 !important;
}

:root[data-theme="dark"] .learn-explain-body h1,
:root[data-theme="dark"] .explain-body h1 {
  color: #f4f8ff !important;
}

:root[data-theme="dark"] .learn-explain-body h1::after,
:root[data-theme="dark"] .explain-body h1::after {
  background-color: rgba(96, 165, 250, 0.28) !important;
}

:root[data-theme="dark"] .learn-explain-body h2,
:root[data-theme="dark"] .explain-body h2,
:root[data-theme="dark"] .app .learn-explain-body h2,
:root[data-theme="dark"] .app .explain-body h2,
:root[data-theme="dark"] .learn-explain-body h3,
:root[data-theme="dark"] .explain-body h3,
:root[data-theme="dark"] .app .learn-explain-body h3,
:root[data-theme="dark"] .app .explain-body h3 {
  color: #d9e7fb !important;
  border-bottom-color: rgba(148, 163, 184, 0.34) !important;
}

:root[data-theme="dark"] .learn-explain-body .lecture-note-card,
:root[data-theme="dark"] .explain-body .lecture-note-card {
  background-color: #162234 !important;
  border-color: #31445e !important;
}

:root[data-theme="dark"] .chapter-overview-badge,
:root[data-theme="dark"] .chapter-overview-subcard-index,
:root[data-theme="dark"] .learn-edge-toggle-icon {
  background: rgba(96, 165, 250, 0.12) !important;
  border-color: rgba(96, 165, 250, 0.24) !important;
  color: #cfe1ff !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] .chapter-overview-shell,
:root[data-theme="dark"] .chapter-overview-hero,
:root[data-theme="dark"] .chapter-overview-subcard {
  background: #151e2b !important;
  border-color: #2b3a50 !important;
  box-shadow: 0 8px 0 -2px #162131, 0 8px 0 1px #2b3a50 !important;
}

:root[data-theme="dark"] .chapter-overview-meter,
:root[data-theme="dark"] .learn-chat-empty-state {
  background: linear-gradient(180deg, rgba(21, 30, 43, 0.98), rgba(16, 24, 38, 0.98)) !important;
  border-color: #2b3a50 !important;
  box-shadow: 0 8px 0 -2px #162131, 0 8px 0 1px #2b3a50 !important;
}

:root[data-theme="dark"] .learn-chat-empty-title,
:root[data-theme="dark"] .chapter-overview-meter strong {
  color: #f4f8ff !important;
}

.login-view.hidden {
  display: none !important;
}

.login-view:not(.hidden) {
  display: block !important;
}

.login-view:not(.hidden) .login-shell {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  width: 100% !important;
  padding: 24px 18px !important;
  position: relative !important;
  z-index: 10 !important;
}

.login-view:not(.hidden) .login-tilt-wrapper {
  width: 100% !important;
  max-width: 380px !important;
  display: block !important;
  margin: 0 auto !important;
}

.login-view:not(.hidden) .login-card {
  display: block !important;
  width: 100% !important;
  max-width: 380px !important;
  min-height: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 11 !important;
}

.login-view:not(.hidden) .login-card-stage,
.login-view:not(.hidden) #loginCustomStage,
.login-view:not(.hidden) .login-form-actions,
.login-view:not(.hidden) .login-form {
  display: flex !important;
  flex-direction: column !important;
}

.login-view:not(.hidden) .login-topbar {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

:root[data-theme="dark"] .login-view:not(.hidden) {
  background-color: #08111d !important;
  background-image: radial-gradient(rgba(96, 165, 250, 0.18) 1.5px, transparent 1.5px) !important;
  background-size: 32px 32px !important;
}

:root[data-theme="dark"] .login-view:not(.hidden) .login-card {
  background: linear-gradient(180deg, rgba(22, 31, 46, 0.96) 0%, rgba(15, 22, 34, 0.98) 100%) !important;
  border: 2px solid rgba(76, 99, 128, 0.72) !important;
  box-shadow:
    0 22px 60px rgba(3, 8, 18, 0.58),
    0 0 0 1px rgba(157, 197, 255, 0.08) inset,
    0 18px 0 -10px rgba(20, 31, 46, 0.95) !important;
}

:root[data-theme="dark"] .login-view:not(.hidden) .login-sso-btn,
:root[data-theme="dark"] .login-view:not(.hidden) .login-guest-btn,
:root[data-theme="dark"] .login-view:not(.hidden) .login-input {
  background: rgba(9, 15, 25, 0.78) !important;
  border-color: rgba(74, 95, 123, 0.7) !important;
  color: #e6edf7 !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] .login-view:not(.hidden) .login-submit-btn {
  background: #60a5fa !important;
  color: #08111d !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 4px 0 #2457a6 !important;
}

/* Settings dashboard refresh: compact tabs + balanced card grid. */
.settings-view {
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

.settings-page-shell {
  width: min(100%, 1320px) !important;
  margin: 0 auto !important;
  padding: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 56px) 72px !important;
  min-height: 100% !important;
}

.settings-page-header {
  align-items: center !important;
  margin-bottom: 26px !important;
  padding: 0 4px !important;
}

.settings-page-title {
  max-width: 760px !important;
  font-size: clamp(40px, 5vw, 64px) !important;
  letter-spacing: -0.045em !important;
  line-height: 0.98 !important;
}

.settings-page-subtitle {
  max-width: 760px !important;
  margin-top: 14px !important;
  font-size: 17px !important;
}

.settings-page-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 22px !important;
}

.settings-page-nav {
  position: static !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  gap: 8px !important;
  padding: 8px !important;
  border-radius: 999px !important;
  background: rgba(248, 250, 252, 0.86) !important;
  border: 2px solid rgba(203, 213, 225, 0.82) !important;
  box-shadow: 0 6px 0 rgba(203, 213, 225, 0.82), 0 14px 28px rgba(15, 23, 42, 0.05) !important;
  overflow-x: auto !important;
}

.settings-page-nav-item {
  width: auto !important;
  min-width: 118px !important;
  height: 44px !important;
  padding: 0 20px !important;
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  text-align: center !important;
  font-family: "Quicksand", "Nunito", sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #66758c !important;
  box-shadow: none !important;
}

.settings-page-nav-item.active {
  background: #ffffff !important;
  color: #152033 !important;
  border-color: rgba(203, 213, 225, 0.9) !important;
  box-shadow: 0 3px 0 rgba(203, 213, 225, 0.96), inset 0 1px 0 rgba(255,255,255,0.92) !important;
}

.settings-page-content {
  display: grid !important;
  gap: 22px !important;
}

.settings-page-card {
  position: relative !important;
  min-height: 0 !important;
  padding: clamp(22px, 2.4vw, 32px) !important;
  border-radius: 30px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(250,252,255,0.96) 100%) !important;
  overflow: hidden !important;
}

.settings-page-card::after {
  content: "" !important;
  position: absolute !important;
  top: 18px !important;
  right: 22px !important;
  width: 48px !important;
  height: 14px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(186, 224, 255, 0.45), rgba(255, 230, 179, 0.42)) !important;
  transform: rotate(4deg) !important;
  pointer-events: none !important;
}


.settings-page-card:nth-child(4),
.settings-page-card:nth-child(5) {
  grid-column: 1 !important;
}


.settings-page-card-head {
  margin-bottom: 16px !important;
}

.settings-page-card-title {
  font-size: clamp(24px, 2.2vw, 32px) !important;
  letter-spacing: -0.035em !important;
}

.settings-page-copy {
  max-width: 780px !important;
  font-size: 16px !important;
  line-height: 1.72 !important;
}

.theme-toggle-group {
  margin-top: 24px !important;
  padding: 8px !important;
  border-radius: 22px !important;
  border: 2px solid rgba(203, 213, 225, 0.82) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 4px 0 rgba(226,232,240,0.85) !important;
}

.theme-toggle-btn {
  min-width: 104px !important;
  height: 46px !important;
  border-radius: 16px !important;
  font-family: "Quicksand", "Nunito", sans-serif !important;
  font-weight: 800 !important;
}

.settings-user-card {
  align-items: center !important;
  gap: 20px !important;
  padding: 22px !important;
  border-radius: 26px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(248,251,255,0.96) 100%) !important;
}

.settings-user-avatar,
.settings-user-avatar-img {
  width: 64px !important;
  height: 64px !important;
  border-radius: 22px !important;
  box-shadow: 0 4px 0 rgba(125, 155, 199, 0.25) !important;
}

.settings-user-name {
  font-size: 22px !important;
  letter-spacing: -0.02em !important;
}

.settings-user-meta {
  margin-top: 6px !important;
}

.settings-user-actions {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}

.settings-user-link {
  min-height: 38px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
}

.settings-page-actions {
  gap: 14px !important;
}

.settings-page-actions .settings-primary-btn,
.settings-page-actions .settings-secondary-btn,
.settings-inline-btn {
  min-height: 48px !important;
  border-radius: 16px !important;
}

.settings-page-version {
  margin-top: 4px !important;
  border-radius: 18px !important;
}

:root[data-theme="dark"] .settings-page-nav {
  background: rgba(18, 26, 38, 0.9) !important;
  border-color: #2b3a50 !important;
  box-shadow: 0 6px 0 #162131, 0 14px 28px rgba(0,0,0,0.24) !important;
}

:root[data-theme="dark"] .settings-page-card {
  background: linear-gradient(180deg, #151e2b 0%, #121a26 100%) !important;
}

:root[data-theme="dark"] .settings-page-card::after {
  background: linear-gradient(90deg, rgba(96, 165, 250, 0.24), rgba(245, 158, 11, 0.14)) !important;
}

:root[data-theme="dark"] .settings-page-nav-item.active {
  background: #1b273a !important;
  color: #f8fbff !important;
  border-color: #416086 !important;
  box-shadow: 0 3px 0 #24364d !important;
}

:root[data-theme="dark"] .settings-user-card {
  background: linear-gradient(135deg, #172234 0%, #121a26 100%) !important;
}

@media (max-width: 1120px) {
  .settings-page-content {
    grid-template-columns: 1fr !important;
  }


  .settings-page-card:nth-child(4) {
    margin-top: 0 !important;
  }
}

@media (max-width: 720px) {
  .settings-page-shell {
    padding: 24px 18px 56px !important;
  }

  .settings-page-header {
    align-items: flex-start !important;
  }

  .settings-page-nav {
    width: 100% !important;
  }

  .settings-page-nav-item {
    flex: 1 0 auto !important;
    min-width: 104px !important;
  }

  .settings-user-card {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .settings-user-actions {
    width: 100% !important;
    justify-content: flex-start !important;
  }
}

/* Stable edge controls: keep Hide/Show pinned to the study page edges. */
.learn-body {
  position: relative !important;
}

.learn-explain-toolbar {
  position: sticky !important;
  top: 0 !important;
  justify-content: center !important;
  gap: 16px !important;
}


  .learn-side-restore-explain,
  .learn-side-restore-chat {
    top: 20px !important;
  }

.learn-body.chat-collapsed .learn-side-restore-chat,
.learn-body.explain-collapsed .learn-side-restore-explain {
  display: inline-flex !important;
}

.learn-body.explain-collapsed .learn-side-restore-chat {
  display: none !important;
}


@media (max-width: 900px) {
  .learn-explain-toolbar {
    padding: 84px 18px 16px !important;
    flex-wrap: wrap !important;
  }

    .learn-side-restore-explain {
    left: 18px !important;
  }

  .learn-side-restore-chat {
    right: 14px !important;
  }
}

/* Syllabus sidebar polish: compact course-map rows with clear hierarchy. */
.sidebar-syllabus-panel {
  margin-top: 10px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.sidebar-syllabus-panel-inner {
  padding: 0 4px 8px 0 !important;
}

.syllabus {
  padding: 8px 8px 18px 2px !important;
  scrollbar-width: thin !important;
}

.syllabus::-webkit-scrollbar {
  width: 5px !important;
}

.syllabus::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.46) !important;
  border-radius: 999px !important;
}

.syllabus-item {
  margin: 0 0 10px !important;
}

.syllabus-chapter {
  min-height: 34px !important;
  padding: 7px 8px !important;
  gap: 8px !important;
  border-radius: 16px !important;
  font-family: "Quicksand", "Nunito", sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  color: #1f2a3d !important;
}

.syllabus-chapter:hover {
  background: rgba(255, 255, 255, 0.56) !important;
  box-shadow: inset 0 0 0 1px rgba(203, 213, 225, 0.48) !important;
}

.syllabus-chapter .caret {
  width: 18px !important;
  height: 18px !important;
  margin-top: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: #64748b !important;
  font-size: 15px !important;
  transform-origin: 50% 50% !important;
}

.syllabus-chapter .caret.open {
  transform: rotate(90deg) !important;
}

.syllabus-sections {
  position: relative !important;
  gap: 3px !important;
  margin: 2px 0 8px 18px !important;
  padding: 2px 0 2px 15px !important;
  border-left: 2px dashed rgba(148, 163, 184, 0.28) !important;
}

.syllabus-section-wrap {
  gap: 1px !important;
}

.syllabus-section-row {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
}

.syllabus-section-caret,
.syllabus-section-caret-placeholder {
  width: 24px !important;
  height: 30px !important;
  flex-basis: 24px !important;
  color: #6b7c94 !important;
  font-size: 17px !important;
}

.syllabus-section-caret {
  border-radius: 999px !important;
  transform-origin: 50% 50% !important;
}

.syllabus-section-caret:hover {
  background: rgba(224, 242, 254, 0.74) !important;
  color: #2563eb !important;
}

.syllabus-section-caret.open {
  transform: rotate(90deg) !important;
}

.syllabus-section {
  position: relative !important;
  min-height: 34px !important;
  padding: 7px 10px 7px 12px !important;
  border-radius: 14px !important;
  border: 1px solid transparent !important;
  font-family: "Quicksand", "Nunito", sans-serif !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  line-height: 1.28 !important;
  color: #40526d !important;
  background: transparent !important;
}

.syllabus-section:hover {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(100, 116, 139, 0.36) !important;
  color: #172033 !important;
  box-shadow: 0 3px 0 rgba(148, 163, 184, 0.42), 0 12px 22px rgba(15, 23, 42, 0.08) !important;
}

.syllabus-section.active {
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(246,250,252,0.94)) !important;
  border-color: rgba(185, 205, 219, 0.9) !important;
  color: #172033 !important;
  font-weight: 900 !important;
  box-shadow: 0 3px 0 rgba(203, 213, 225, 0.72), 0 8px 16px rgba(15, 23, 42, 0.045) !important;
}

.syllabus-section.active::before {
  content: none !important;
}

.syllabus-subsections {
  margin: 3px 0 6px 28px !important;
  padding: 4px 0 4px 12px !important;
  gap: 2px !important;
  border-left: 1px solid rgba(148, 163, 184, 0.26) !important;
}

.syllabus-subsection {
  min-height: 30px !important;
  padding: 6px 9px !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  font-family: "Quicksand", "Nunito", sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: #50647c !important;
  opacity: 1 !important;
}

.syllabus-subsection:hover,
.syllabus-subsection.active {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: rgba(100, 116, 139, 0.28) !important;
  color: #17384a !important;
  box-shadow: 0 2px 0 rgba(148, 163, 184, 0.26), 0 8px 16px rgba(15, 23, 42, 0.055) !important;
}

:root[data-theme="dark"] .syllabus-chapter {
  color: #e6edf7 !important;
}

:root[data-theme="dark"] .syllabus-chapter:hover,
:root[data-theme="dark"] .syllabus-section:hover {
  background: rgba(30, 42, 61, 0.78) !important;
  border-color: #31445e !important;
  color: #f8fbff !important;
}

:root[data-theme="dark"] .syllabus-sections,
:root[data-theme="dark"] .syllabus-subsections {
  border-color: rgba(96, 165, 250, 0.18) !important;
}

:root[data-theme="dark"] .syllabus-section {
  color: #9fb0c7 !important;
}

:root[data-theme="dark"] .syllabus-section.active {
  background: linear-gradient(180deg, #1b273a 0%, #172234 100%) !important;
  border-color: #416086 !important;
  color: #f8fbff !important;
  box-shadow: 0 3px 0 #24364d, 0 10px 18px rgba(0, 0, 0, 0.2) !important;
}

:root[data-theme="dark"] .syllabus-subsection {
  color: #9fb0c7 !important;
}

:root[data-theme="dark"] .syllabus-subsection:hover,
:root[data-theme="dark"] .syllabus-subsection.active {
  background: rgba(96, 165, 250, 0.16) !important;
  color: #dbeafe !important;
}

/* Login redesign: light neo-brutalist astrological studygram. */
.login-view,
:root[data-theme="dark"] .login-view,
.login-view:not(.hidden),
:root[data-theme="dark"] .login-view:not(.hidden) {
  --login-purple: #0ea5e9;
  overflow: hidden !important;
}

.login-view::before,
.login-view::after {
  content: "";
  position: fixed;
  pointer-events: none;
  width: 520px;
  height: 520px;
}


.login-doodle {
  position: fixed;
  pointer-events: none;
  z-index: 1;
}

.login-doodle-constellation {
  width: min(320px, 36vw);
  left: 6vw;
  top: 10vh;
  opacity: 0.7;
  animation: login-doodle-float 7s ease-in-out infinite alternate;
}

.login-doodle-star {
  animation: login-twinkle 3s ease-in-out infinite alternate;
  filter: drop-shadow(4px 4px 0 rgba(15, 23, 42, 0.12));
}

.login-doodle-star-a {
  width: 46px;
  right: 15vw;
  top: 16vh;
}

.login-doodle-star-b {
  width: 34px;
  left: 19vw;
  bottom: 12vh;
  animation-delay: 0.9s;
}

.login-doodle-star-c {
  width: 30px;
  right: 24vw;
  bottom: 25vh;
  animation-delay: 0.45s;
}

.login-topbar {
  display: none !important;
}

.login-shell,
.login-view:not(.hidden) .login-shell {
  position: relative !important;
  z-index: 5 !important;
  min-height: 100vh !important;
  width: 100% !important;
  display: flex !important;
}

.login-tilt-wrapper,
.login-view:not(.hidden) .login-tilt-wrapper {
  position: relative !important;
  width: 100% !important;
  perspective: none !important;
  transform-style: flat !important;
  margin: 0 auto !important;
}

.login-handwriting {
  position: absolute;
  z-index: 15;
  font-family: "Caveat", cursive !important;
  font-weight: 700;
  transform: rotate(-10deg);
  pointer-events: none;
}

.login-card,
:root[data-theme="dark"] .login-card,
.login-view:not(.hidden) .login-card,
:root[data-theme="dark"] .login-view:not(.hidden) .login-card {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  color: var(--login-ink) !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.tilt-element,
.login-view:not(.hidden) .login-card {
  transform-style: flat !important;
  animation: login-card-pop 0.58s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}

.login-status-dot,
:root[data-theme="dark"] .login-view:not(.hidden) .login-status-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: var(--login-ink) !important;
  box-shadow: none !important;
  animation: login-blink 2s ease-in-out infinite !important;
}

.login-card-stage,
.login-view:not(.hidden) .login-card-stage,
.login-view:not(.hidden) #loginCustomStage {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}


.login-brand-mark {
  width: 72px !important;
  height: 72px !important;
  margin-bottom: 12px !important;
  border-radius: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: rotate(-3deg);
  color: var(--login-ink) !important;
}

.login-brand-mark-aurora {
  background: transparent !important;
  border-color: transparent !important;
}

.aquarius-glow {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  border-radius: 999px !important;
  filter: drop-shadow(0 4px 0 rgba(30, 41, 59, 0.2)) !important;
  animation: none !important;
}

.login-card-title {
  margin: 0 0 6px !important;
  font-family: "Quicksand", "Nunito", sans-serif !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
}

.text-gradient-aurora {
  position: relative;
  z-index: 1;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}

.text-gradient-aurora::after {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: 4px;
  z-index: -1;
  height: 11px;
  border-radius: 5px;
  transform: rotate(-1deg);
}

.login-card-subtitle {
  margin: 0 !important;
  font-family: "Nunito", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: #64748b !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}

.login-form-actions,
.login-view:not(.hidden) .login-form-actions,
.login-form {
  gap: 12px !important;
}

.login-sso-btn,
.login-guest-btn,
.login-submit-btn {
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  border: 3px solid var(--login-ink) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  color: var(--login-ink) !important;
  font-family: "Quicksand", "Nunito", sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}

.login-sso-btn:hover,
.login-guest-btn:hover,
.login-submit-btn:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0 var(--login-ink) !important;
}


.login-submit-btn,
:root[data-theme="dark"] .login-view:not(.hidden) .login-submit-btn {
  margin-top: 2px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
}

.login-submit-btn:hover,
:root[data-theme="dark"] .login-view:not(.hidden) .login-submit-btn:hover {
  background: #0ea5e9 !important;
  box-shadow: 8px 8px 0 var(--login-ink) !important;
}


.login-sso-btn:disabled,
.login-submit-btn:disabled,
.login-guest-btn:disabled {
  opacity: 0.56 !important;
  cursor: wait !important;
  transform: none !important;
  box-shadow: 2px 2px 0 var(--login-ink) !important;
}

.login-divider {
  gap: 10px !important;
}

.login-divider span {
  font-family: "Quicksand", "Nunito", sans-serif !important;
  color: #94a3b8 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
}

.login-divider-line,
.login-divider-line:last-child {
  height: 0 !important;
  background: none !important;
  border-bottom: 2px dashed #cbd5e1 !important;
}

.login-field {
  gap: 7px !important;
}

.login-field label {
  padding-left: 0 !important;
  font-family: "Nunito", sans-serif !important;
  color: var(--login-ink) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.login-field-row {
  padding: 0 !important;
  align-items: flex-end !important;
}

.login-link {
  font-family: "Nunito", sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
}

.login-link:hover {
  color: var(--login-purple) !important;
  text-decoration: underline !important;
  text-decoration-style: wavy !important;
}

.login-input,
:root[data-theme="dark"] .login-view:not(.hidden) .login-input {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 13px 15px !important;
  border: 3px solid var(--login-ink) !important;
  border-radius: 14px !important;
  background: var(--login-paper) !important;
  color: var(--login-ink) !important;
  box-shadow: none !important;
  font-family: "Nunito", sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  outline: none !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease !important;
}

.login-input::placeholder {
  color: #94a3b8 !important;
}

.login-input:focus {
  background: #ffffff !important;
  border-color: var(--login-purple) !important;
  box-shadow: 4px 4px 0 var(--login-purple) !important;
  transform: translate(-2px, -2px) !important;
}

.login-input-password {
  padding-right: 52px !important;
  letter-spacing: 0.14em !important;
}

.login-password-toggle {
  right: 9px !important;
  width: 36px !important;
  height: 36px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.login-password-toggle:hover {
  color: var(--login-purple) !important;
  background: rgba(14, 165, 233, 0.1) !important;
}

.login-status-message,
.login-status-message.is-info {
  border: 3px solid var(--login-ink) !important;
  border-radius: 14px !important;
  background: #fef2f2 !important;
  color: #991b1b !important;
  box-shadow: 3px 3px 0 var(--login-ink) !important;
  font-family: "Nunito", sans-serif !important;
  font-weight: 800 !important;
}

.login-status-message.is-info {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
}

.login-footnote,
.login-signup-copy {
  color: #64748b !important;
  font-family: "Nunito", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
}

.login-footnote {
  margin-top: 14px !important;
}

.login-signup-copy {
  margin-top: 4px !important;
}

.login-link-strong {
  color: var(--login-ink) !important;
}

#clerkMountLogin > div {
  width: min(100%, 370px) !important;
}

@keyframes login-card-pop {
  from {
    opacity: 0;
    transform: translateY(34px) rotate(-1deg) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

@keyframes login-doodle-float {
  0% { transform: translateY(0) rotate(-2deg); }
  100% { transform: translateY(-18px) rotate(2deg); }
}

@keyframes login-twinkle {
  0% { opacity: 0.35; transform: scale(0.86) rotate(-6deg); }
  100% { opacity: 1; transform: scale(1.16) rotate(4deg); }
}

@keyframes login-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (max-width: 560px) {
  .login-shell,
  .login-view:not(.hidden) .login-shell {
    padding: 64px 16px 28px !important;
    align-items: flex-start !important;
  }


  .login-doodle-constellation {
    width: 220px;
    left: -22px;
    top: 28px;
  }
}

/* Preference workspace: one user-authored teaching instruction. */
.sidebar-link-preference {
  margin-top: 8px !important;
}

.preference-sidebar-kicker {
  font-family: "Quicksand", "Nunito", sans-serif;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #94a3b8;
  margin-bottom: 6px;
}

.preference-sidebar-text {
  font-family: "Nunito", sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: #475569;
}

.preference-view.hidden {
  display: none !important;
}

.preference-view {
  height: 100%;
  min-height: 0;
}

.preference-page-shell {
  width: min(100%, 1360px);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 56px);
  overflow-y: auto;
  height: 100%;
  min-height: 100%;
}

.preference-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.preference-page-eyebrow,
.preference-card-eyebrow {
  font-family: "Quicksand", "Nunito", sans-serif;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #64748b;
  margin-bottom: 8px;
}

.preference-page-title {
  margin: 0 0 10px;
  font-family: "Quicksand", "Nunito", sans-serif;
  font-size: clamp(40px, 5vw, 60px);
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: #1e293b;
}

.preference-page-subtitle,
.preference-page-copy,
.preference-profile-note {
  margin: 0;
  font-family: "Nunito", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #475569;
}

.preference-card-tape {
  position: absolute;
  top: -21px;
  left: 50%;
  width: 38px;
  height: 38px;
  border: 3px solid #7f1d1d;
  border-radius: 999px;
  background:
    radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.86) 0 5px, transparent 6px),
    radial-gradient(circle at 64% 66%, rgba(127, 29, 29, 0.38) 0 10px, transparent 11px),
    linear-gradient(135deg, #fb7185 0%, #ef4444 48%, #b91c1c 100%);
  box-shadow:
    0 5px 0 #7f1d1d,
    0 14px 24px rgba(127, 29, 29, 0.24),
    inset -5px -6px 9px rgba(127, 29, 29, 0.32);
  transform: translateX(-50%) rotate(-8deg);
  z-index: 3;
  pointer-events: none;
}

.preference-card-tape::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -19px;
  width: 4px;
  height: 20px;
  border-radius: 999px;
  background: linear-gradient(180deg, #7f1d1d 0%, rgba(127, 29, 29, 0.22) 100%);
  box-shadow: 3px 4px 6px rgba(127, 29, 29, 0.18);
  transform: translateX(-50%) rotate(5deg);
  z-index: -1;
}

.preference-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.preference-card-title {
  margin: 0;
  font-family: "Quicksand", "Nunito", sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #1e293b;
}

.preference-save-state {
  align-self: flex-start;
  padding: 7px 12px;
  border-radius: 999px;
  border: 2px solid #cbd5e1;
  background: #fff;
  font-family: "Quicksand", "Nunito", sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: #64748b;
}

.preference-profile-editor {
  width: 100%;
  border: 3px solid #cbd5e1;
  border-radius: 22px;
  background: #ffffff;
  color: #1e293b;
  font-family: "Nunito", sans-serif;
  font-size: 15px;
  line-height: 1.72;
  padding: 18px 18px 20px;
  resize: vertical;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.preference-profile-editor {
  min-height: 430px;
}

.preference-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.preference-primary-btn,
.preference-secondary-btn {
  border: 2px solid #94a3b8;
  border-radius: 14px;
  padding: 11px 18px;
  font-family: "Quicksand", "Nunito", sans-serif;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.preference-primary-btn {
  background: #38bdf8;
  color: #fff;
  border-color: #0284c7;
  box-shadow: 0 4px 0 #0284c7;
}

.preference-secondary-btn {
  background: #fff;
  color: #475569;
  box-shadow: 0 4px 0 #cbd5e1;
}

.preference-primary-btn:hover {
  box-shadow: 0 6px 0 #0284c7;
}

.preference-secondary-btn:hover {
  box-shadow: 0 6px 0 #cbd5e1;
}

.preference-primary-btn:disabled,
.preference-secondary-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* Course Tracker: syllabus-derived progress and grading dashboard. */
.course-tracker-view.hidden {
  display: none !important;
}

.course-tracker-view {
  height: 100%;
  min-height: 0;
}

.course-tracker-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.course-tracker-eyebrow,
.course-tracker-card-kicker,
.course-tracker-stat-label {
  font-family: "Quicksand", "Nunito", sans-serif;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #64748b;
  margin-bottom: 8px;
}

.course-tracker-subtitle {
  margin: 0;
  max-width: 760px;
  font-family: "Nunito", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #475569;
}

.course-tracker-progress-bar {
  height: 14px;
  margin-top: 18px;
  border: 2px solid #cbd5e1;
  border-radius: 999px;
  background: #f8fafc;
  overflow: hidden;
}

.course-tracker-progress-bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: repeating-linear-gradient(-45deg, #38bdf8, #38bdf8 10px, #10b981 10px, #10b981 20px);
  transition: width 0.24s ease;
}

.course-tracker-stat-main {
  font-family: "Quicksand", "Nunito", sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 8px;
}

.course-tracker-stat-note {
  color: #475569;
  line-height: 1.55;
  font-weight: 650;
}

.course-tracker-milestones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.course-tracker-milestones span,
.course-tracker-source-chip,
.course-milestone-chip {
  display: inline-flex;
  align-items: center;
  border: 2px solid #cbd5e1;
  border-radius: 999px;
  background: #ffffff;
  color: #475569;
  font-family: "Quicksand", "Nunito", sans-serif;
  font-size: 13px;
  font-weight: 800;
}

.course-tracker-milestones span,
.course-tracker-source-chip,
.course-milestone-chip {
  padding: 7px 11px;
}

.course-calendar-card {
  min-width: 0;
}

.course-tracker-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.course-tracker-card h2 {
  margin: 0;
  font-family: "Quicksand", "Nunito", sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #1e293b;
}

.course-grade-list {
  display: grid;
  gap: 12px;
}

.course-grade-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  border: 2px solid #dbe4ee;
  border-radius: 18px;
  background: #ffffff;
}

.course-grade-label {
  font-family: "Quicksand", "Nunito", sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #1e293b;
}

.course-grade-detail {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
}

.course-grade-weight {
  min-width: 64px;
  text-align: center;
  padding: 9px 10px;
  border-radius: 16px;
  background: #e0f2fe;
  border: 2px solid #7dd3fc;
  color: #0369a1;
  font-family: "Quicksand", "Nunito", sans-serif;
  font-size: 20px;
  font-weight: 800;
}

.course-tracker-reset-btn {
  flex-shrink: 0;
  padding: 10px 14px;
  border: 2px solid #cbd5e1;
  border-radius: 14px;
  background: #ffffff;
  color: #475569;
  box-shadow: 0 4px 0 #cbd5e1;
  font-family: "Quicksand", "Nunito", sans-serif;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.course-tracker-reset-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #cbd5e1;
}

/* Mistake Notebook: image-based problem review with AI notes. */
.mistake-notebook-view.hidden {
  display: none !important;
}

.mistake-notebook-view {
  height: 100%;
  min-height: 0;
}

.mistake-notebook-header,
.mistake-notebook-toolbar,
.mistake-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
}

.mistake-notebook-toolbar {
  align-items: center;
  margin-bottom: 22px;
  padding: 16px;
  border: 3px solid #cbd5e1;
  border-radius: 26px;
  background: rgba(255,255,255,0.86);
  box-shadow: 0 10px 0 -5px #f8fafc, 0 10px 0 1px #bfd0e2;
}

.mistake-upload-btn,
.mistake-primary-btn,
.mistake-secondary-btn,
.mistake-danger-btn,
.mistake-mini-btn {
  border: 2px solid #94a3b8;
  border-radius: 14px;
  font-family: "Quicksand", "Nunito", sans-serif;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.mistake-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: #38bdf8;
  color: #fff;
  border-color: #0284c7;
  box-shadow: 0 4px 0 #0284c7;
  white-space: nowrap;
}

.mistake-search-wrap {
  flex: 1;
  min-width: 260px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 2px solid #cbd5e1;
  border-radius: 16px;
  background: #fff;
  color: #64748b;
}

.mistake-search-wrap input {
  width: 100%;
  min-height: 44px;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: "Nunito", sans-serif;
  font-size: 15px;
  color: #1e293b;
}

.mistake-count-pill {
  padding: 10px 14px;
  border: 2px solid #cbd5e1;
  border-radius: 999px;
  background: #fff;
  color: #475569;
  font-family: "Quicksand", "Nunito", sans-serif;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.mistake-notebook-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.28fr) minmax(0, 0.72fr);
  gap: 24px;
  align-items: start;
}

.mistake-list-card,
.mistake-detail-card,
.mistake-ai-answer-panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,251,255,0.98));
  border: 3px solid #cbd5e1;
  border-radius: 28px;
  box-shadow: 0 12px 0 -5px #f8fafc, 0 12px 0 1px #bfd0e2, 0 28px 34px rgba(15, 23, 42, 0.08);
}

.mistake-list-card,
.mistake-detail-card {
  padding: 22px;
}

.mistake-list {
  display: grid;
  gap: 12px;
  max-height: min(68vh, 760px);
  overflow: auto;
}

.mistake-list-item {
  width: 100%;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  text-align: left;
  padding: 10px;
  border: 2px solid #dbe4ee;
  border-radius: 18px;
  background: #fff;
  color: #334155;
  cursor: pointer;
}

.mistake-list-item.active {
  border-color: #38bdf8;
  box-shadow: 0 4px 0 #bae6fd;
}

.mistake-list-thumb {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
}

.mistake-list-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mistake-list-meta {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.mistake-list-meta strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1e293b;
  font-family: "Quicksand", "Nunito", sans-serif;
  font-size: 15px;
}

.mistake-list-meta small,
.mistake-list-empty {
  color: #64748b;
  font-size: 13px;
  line-height: 1.4;
}

.mistake-empty-panel {
  min-height: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  padding: 42px;
}

.mistake-empty-icon {
  width: 72px;
  height: 72px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  background: #e0f2fe;
  border: 2px solid #7dd3fc;
  color: #0284c7;
  font-size: 30px;
  box-shadow: 0 8px 0 #bae6fd;
}

.mistake-empty-panel h2 {
  margin: 10px 0 0;
  font-family: "Quicksand", "Nunito", sans-serif;
  font-size: 34px;
  color: #1e293b;
}

.mistake-empty-panel p {
  max-width: 440px;
  margin: 0;
  color: #475569;
  line-height: 1.7;
}

.mistake-title-input {
  width: min(640px, 100%);
  border: 0;
  border-bottom: 2px dashed #cbd5e1;
  outline: 0;
  background: transparent;
  color: #1e293b;
  font-family: "Quicksand", "Nunito", sans-serif;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  padding: 2px 0 8px;
}

.mistake-page-controls {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #64748b;
  font-family: "Quicksand", "Nunito", sans-serif;
  font-weight: 800;
}

.mistake-mini-btn {
  padding: 8px 12px;
  background: #fff;
  color: #475569;
  box-shadow: 0 3px 0 #cbd5e1;
}

.mistake-mini-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.mistake-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.05fr);
  gap: 22px;
  margin-top: 22px;
}

.mistake-image-frame {
  margin: 0;
  min-height: 460px;
  border: 2px dashed #bfdbfe;
  border-radius: 24px;
  background: #f8fbff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mistake-image-frame img {
  width: 100%;
  height: 100%;
  max-height: 640px;
  object-fit: contain;
}

.mistake-text-preview {
  width: 100%;
  min-height: 100%;
  padding: 24px;
  color: #334155;
  font-family: "Nunito", sans-serif;
  font-size: 15px;
  line-height: 1.75;
  overflow: auto;
}

.mistake-text-preview h2,
.mistake-text-preview h3 {
  margin: 0 0 12px;
  color: #1e293b;
  font-family: "Quicksand", "Nunito", sans-serif;
}

.mistake-notes-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mistake-tags-input,
.mistake-notes-input,
.mistake-ai-instruction {
  width: 100%;
  border: 2px solid #cbd5e1;
  border-radius: 18px;
  background: #fff;
  color: #1e293b;
  font-family: "Nunito", sans-serif;
  font-size: 15px;
  line-height: 1.65;
  outline: 0;
  padding: 13px 15px;
}

.mistake-tags-input {
  margin-bottom: 14px;
}

.mistake-notes-input {
  min-height: 220px;
  resize: vertical;
  margin-bottom: 14px;
}

.mistake-ai-instruction {
  min-height: 82px;
  resize: vertical;
}

.mistake-tags-input:focus,
.mistake-notes-input:focus,
.mistake-ai-instruction:focus,
.mistake-title-input:focus {
  border-color: #38bdf8;
  box-shadow: 0 4px 0 #bae6fd;
}

.mistake-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.mistake-primary-btn,
.mistake-secondary-btn,
.mistake-danger-btn {
  padding: 11px 16px;
}

.mistake-primary-btn {
  background: #38bdf8;
  color: #fff;
  border-color: #0284c7;
  box-shadow: 0 4px 0 #0284c7;
}

.mistake-secondary-btn {
  background: #fff;
  color: #475569;
  box-shadow: 0 4px 0 #cbd5e1;
}

.mistake-danger-btn {
  margin-left: auto;
  background: #fff1f2;
  color: #be123c;
  border-color: #fda4af;
  box-shadow: 0 4px 0 #fda4af;
}

.mistake-upload-btn:hover,
.mistake-primary-btn:hover,
.mistake-secondary-btn:hover,
.mistake-danger-btn:hover,
.mistake-mini-btn:hover {
  transform: translateY(-2px);
}

.mistake-primary-btn:disabled,
.mistake-secondary-btn:disabled {
  opacity: 0.62;
  cursor: wait;
}

.mistake-ai-answer-panel {
  margin-top: 22px;
  padding: 20px;
}

.mistake-ai-answer {
  color: #334155;
  font-family: "Nunito", sans-serif;
  font-size: 15px;
  line-height: 1.78;
}

.mistake-ai-answer h1,
.mistake-ai-answer h2,
.mistake-ai-answer h3 {
  font-family: "Quicksand", "Nunito", sans-serif;
  color: #1e293b;
}

@media (max-width: 1120px) {
  .mistake-notebook-grid,
  .mistake-workspace {
    grid-template-columns: 1fr;
  }

  .mistake-detail-head,
  .mistake-notebook-toolbar {
    flex-wrap: wrap;
  }
}

.course-date-pill {
  display: inline-flex;
  min-width: 54px;
  justify-content: center;
  padding: 6px 8px;
  border-radius: 999px;
  background: #ecfeff;
  border: 2px solid #a5f3fc;
  color: #0e7490;
  font-family: "DM Mono", monospace;
  font-size: 12px;
  font-weight: 800;
}

.course-milestone-chip {
  border-color: #fcd34d;
  background: #fef9c3;
  color: #92400e;
  white-space: nowrap;
}

.course-muted {
  color: #94a3b8;
}

.course-status-select {
  width: 132px;
  padding: 8px 10px;
  border: 2px solid #cbd5e1;
  border-radius: 14px;
  background: #ffffff;
  color: #334155;
  font-family: "Quicksand", "Nunito", sans-serif;
  font-size: 13px;
  font-weight: 800;
  outline: none;
}

.course-status-select[data-status="Done"] {
  border-color: #86efac;
  background: #f0fdf4;
  color: #15803d;
}

.course-status-select[data-status="In progress"] {
  border-color: #7dd3fc;
  background: #f0f9ff;
  color: #0284c7;
}

.course-status-select[data-status="Review"] {
  border-color: #fcd34d;
  background: #fffbeb;
  color: #b45309;
}

:root[data-theme="dark"] .preference-sidebar-kicker,
:root[data-theme="dark"] .preference-page-eyebrow,
:root[data-theme="dark"] .preference-card-eyebrow {
  color: #9fb0c7;
}

:root[data-theme="dark"] .preference-sidebar-text,
:root[data-theme="dark"] .preference-page-subtitle,
:root[data-theme="dark"] .preference-page-copy,
:root[data-theme="dark"] .preference-profile-note {
  color: #cfe1ff;
}

:root[data-theme="dark"] .preference-page-title,
:root[data-theme="dark"] .preference-card-title {
  color: #f8fbff;
}

:root[data-theme="dark"] .preference-profile-card {
  background: linear-gradient(180deg, #182335 0%, #141d2b 100%);
  border-color: #40597c;
  box-shadow: 0 14px 0 -6px #162233, 0 14px 0 1px #334862, 0 24px 34px rgba(0,0,0,0.26);
}

:root[data-theme="dark"] .preference-profile-editor {
  background: #0f1724;
  border-color: #324963;
  color: #e6edf7;
}

:root[data-theme="dark"] .preference-secondary-btn {
  background: #152131;
  color: #d7e6fb;
  border-color: #3d5878;
  box-shadow: 0 4px 0 #24364d;
}

:root[data-theme="dark"] .mistake-notebook-title,
:root[data-theme="dark"] .mistake-title-input,
:root[data-theme="dark"] .mistake-empty-panel h2,
:root[data-theme="dark"] .mistake-list-meta strong,
:root[data-theme="dark"] .mistake-ai-answer h1,
:root[data-theme="dark"] .mistake-ai-answer h2,
:root[data-theme="dark"] .mistake-ai-answer h3 {
  color: #f4f8ff !important;
}

:root[data-theme="dark"] .mistake-notebook-subtitle,
:root[data-theme="dark"] .mistake-empty-panel p,
:root[data-theme="dark"] .mistake-ai-answer,
:root[data-theme="dark"] .mistake-list-meta small {
  color: #bfd0e6 !important;
}

:root[data-theme="dark"] .mistake-notebook-toolbar,
:root[data-theme="dark"] .mistake-list-card,
:root[data-theme="dark"] .mistake-detail-card,
:root[data-theme="dark"] .mistake-ai-answer-panel,
:root[data-theme="dark"] .mistake-list-item,
:root[data-theme="dark"] .mistake-search-wrap,
:root[data-theme="dark"] .mistake-tags-input,
:root[data-theme="dark"] .mistake-notes-input,
:root[data-theme="dark"] .mistake-ai-instruction,
:root[data-theme="dark"] .mistake-count-pill {
  background: #151e2b !important;
  border-color: #2b3a50 !important;
  color: #bfd0e6 !important;
  box-shadow: 0 8px 0 -2px #162131, 0 8px 0 1px #2b3a50 !important;
}

:root[data-theme="dark"] .mistake-image-frame,
:root[data-theme="dark"] .mistake-list-thumb {
  background: #101826 !important;
  border-color: #2b3a50 !important;
}

:root[data-theme="dark"] .mistake-text-preview,
:root[data-theme="dark"] .mistake-text-preview h2,
:root[data-theme="dark"] .mistake-text-preview h3 {
  color: #bfd0e6 !important;
}

.kc-add-mistake-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 14px;
  padding: 9px 14px;
  border: 2px solid #facc15;
  border-radius: 999px;
  background: #fef9c3;
  color: #854d0e;
  box-shadow: 0 3px 0 #fde68a;
  font-family: "Quicksand", "Nunito", sans-serif;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.kc-add-mistake-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #fde68a;
}

.kc-add-mistake-btn.is-added {
  border-color: #86efac;
  background: #dcfce7;
  color: #166534;
  box-shadow: 0 3px 0 #bbf7d0;
}

/* Final sidebar workspace scrolling: keep logo/footer fixed while the Workspace list scrolls. */
.sidebar {
  min-height: 0 !important;
}

.sidebar-top,
.sidebar-footer {
  flex: 0 0 auto !important;
}

.sidebar-nav-shell {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(148, 163, 184, 0.58) transparent;
  padding-right: 10px !important;
}

.sidebar-nav-shell::-webkit-scrollbar {
  width: 7px !important;
}

.sidebar-nav-shell::-webkit-scrollbar-track {
  background: transparent !important;
}

.sidebar-nav-shell::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.5) !important;
  border: 2px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 999px !important;
}

.sidebar-nav-shell::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.68) !important;
}

:root[data-theme="dark"] .sidebar-nav-shell {
  scrollbar-color: rgba(96, 165, 250, 0.42) transparent;
}

:root[data-theme="dark"] .sidebar-nav-shell::-webkit-scrollbar-thumb {
  background: rgba(96, 165, 250, 0.38) !important;
  border-color: rgba(14, 20, 31, 0.94) !important;
}

.lesson-figure-description {
  margin: -2px 0 18px;
  padding: 10px 14px;
  border-left: 3px solid rgba(56, 189, 248, 0.72);
  border-radius: 0 14px 14px 0;
  background: rgba(239, 246, 255, 0.72);
  color: #475569;
  font-size: 13px;
  line-height: 1.55;
}

:root[data-theme="dark"] .lesson-figure-description {
  background: rgba(20, 35, 54, 0.78);
  border-left-color: rgba(96, 165, 250, 0.65);
  color: #bfd0e6;
}

/* Final non-overlap lesson toolbar grid: keep Hide/Previous, view switcher, and Next in their own lanes. */
.learn-explain-toolbar {
  justify-items: center !important;
}

.learn-explain-col,
.learn-explain-toolbar > * {
  min-width: 0 !important;
}


.learn-body:not(.chat-collapsed):not(.explain-collapsed) .learn-explain-col,
.learn-body:not(.chat-collapsed):not(.explain-collapsed) .learn-chat-col {
  flex: initial !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}

.learn-body:not(.chat-collapsed):not(.explain-collapsed) .learn-resizer {
  width: 10px !important;
  min-width: 10px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.learn-explain-toolbar .lecture-overlay-btn::before {
  inset: 0 !important;
}

.learn-toolbar-center {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  min-width: 0 !important;
  max-width: 100% !important;
}


@media (max-width: 1180px) {
  .learn-explain-toolbar {
    grid-template-areas:
      "left right"
      "center center" !important;
    padding: 14px 18px 16px !important;
  }

  .learn-toolbar-center {
    grid-area: center !important;
  }
}

@media (max-width: 720px) {
  .learn-explain-toolbar {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "center"
      "left"
      "right" !important;
    justify-items: stretch !important;
  }
  .learn-toolbar-center {
    justify-self: center !important;
  }
}

/* Final lesson toolbar stabilization: no overflow into the Q&A column. */
.learn-explain-toolbar {
  display: grid !important;
  grid-template-columns: minmax(108px, auto) minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 18px !important;
  row-gap: 12px !important;
  padding: 14px 22px !important;
  min-height: 92px !important;
  overflow: hidden !important;
}

.learn-explain-toolbar .learn-toolbar-center{
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  transform: none !important;
}

.learn-explain-toolbar .learn-toolbar-center {
  grid-column: 2 !important;
  justify-self: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.learn-explain-toolbar .learn-view-selector {
  order: 2 !important;
  flex: 0 1 auto !important;
  min-width: 260px !important;
  max-width: min(100%, 360px) !important;
}

.learn-explain-toolbar .learn-kp-nav {
  display: none !important;
}

.learn-body:not(.chat-collapsed):not(.explain-collapsed) .learn-body-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 10px minmax(320px, 34%) !important;
  width: 100% !important;
  min-width: 0 !important;
}

.learn-body:not(.chat-collapsed):not(.explain-collapsed) .learn-explain-col {
  min-width: 0 !important;
}

.learn-body:not(.chat-collapsed):not(.explain-collapsed) .learn-chat-col {
  min-width: 320px !important;
}

@media (max-width: 1320px) {
  .learn-explain-toolbar .learn-toolbar-center {
    justify-content: flex-start !important;
  }}

@media (max-width: 1180px) {
  .learn-explain-toolbar {
    grid-template-columns: minmax(108px, auto) 1fr !important;
  }

  .learn-explain-toolbar .learn-toolbar-center {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
}

@media (max-width: 820px) {
  .learn-explain-toolbar {
    grid-template-columns: 1fr !important;
    padding: 14px 16px !important;
  }

    .learn-explain-toolbar .learn-toolbar-center {
    grid-column: 1 !important;
    justify-self: stretch !important;
  }

  .learn-explain-toolbar .learn-toolbar-center {
    justify-content: center !important;
  }

  .learn-explain-toolbar .learn-view-selector {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Settings page card order: keep learning setup parallel with sign-in. */
.settings-page-content {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr) !important;
  align-items: start !important;
}

.settings-page-card:nth-child(1) {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.settings-page-card:nth-child(2) {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

.settings-page-card:nth-child(3) {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

.settings-page-card:nth-child(4) {
  grid-column: 1 !important;
  grid-row: 2 !important;
  margin-top: 0 !important;
}

.settings-page-card:nth-child(5) {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  margin-top: 0 !important;
}

@media (max-width: 1120px) {
  .settings-page-card:nth-child(n) {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

/* Restore lesson scrolling after toolbar/grid stabilization. */
.learn-view {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.learn-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
}

.learn-body-inner {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

.learn-explain-col,
.learn-chat-col {
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

.learn-explain-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

.learn-chat-scroll {
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

/* True lesson pagination: render one framed page at a time. */
.learn-explain-scroll {
  padding: 28px 34px 34px !important;
  max-width: none !important;
}

.learn-explain-body {
  min-height: 100% !important;
  display: block !important;
  width: 100% !important;
}

.lesson-page-frame {
  width: 100% !important;
  max-width: none !important;
  min-height: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.learn-body.chat-collapsed .learn-body-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

.learn-body.chat-collapsed .learn-explain-col {
  min-width: 0 !important;
}

.learn-body.chat-collapsed .learn-explain-scroll {
  padding-left: clamp(28px, 5vw, 72px) !important;
  padding-right: clamp(28px, 5vw, 72px) !important;
}

.learn-body.chat-collapsed .lesson-page-frame,
.app.sidebar-collapsed .learn-body:not(.explain-collapsed) .lesson-page-frame {
  width: min(100%, 1600px) !important;
  max-width: 1600px !important;
}

.learn-body.chat-collapsed .lesson-page-heading,
.app.sidebar-collapsed .learn-body:not(.explain-collapsed) .lesson-page-heading {
  width: min(100%, 1200px) !important;
}

.lesson-page-heading {
  flex: 0 0 auto !important;
  margin: 6px auto 34px !important;
  width: min(100%, 850px) !important;
}

.lesson-page-heading h2 {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 0 22px !important;
  border: none !important;
  border-bottom: 5px dotted #cbd5e1 !important;
  color: #334155 !important;
  font-family: "Quicksand", "Nunito", sans-serif !important;
  font-size: clamp(2rem, 3.4vw, 3.1rem) !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
}

.lesson-page-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
}

.lesson-page-extra {
  flex: 0 0 auto !important;
  margin-top: 30px !important;
}

.lesson-page-extra .chapter-overview-list-block-inline {
  margin-top: 0 !important;
}

.lesson-page-extra .chapter-overview-list-title {
  font-size: 22px !important;
}

.lesson-page-content > :first-child,
.lesson-page-content > .kc-visual-plan:first-child + :not(script) {
  margin-top: 0 !important;
}

.lesson-page-content > .kc-visual-plan:first-child + .math-block,
.lesson-page-content > .math-block:first-child {
  margin-top: 0 !important;
}

@media (max-width: 900px) {
  .learn-explain-scroll {
    padding: 18px 16px 24px !important;
  }

  .lesson-page-frame {
    padding: 28px 22px 22px !important;
    border-radius: 22px !important;
  }
}

/* Answer view polish: keep the follow-up composer visible above the frame edge. */


/* Home scrapbook layer */
.welcome {
  isolation: isolate !important;
}

.welcome::before {
  content: "";
  position: absolute;
  inset: 24px 28px 26px;
  border-radius: 22px;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(148, 163, 184, 0.1) 1px, transparent 1px),
    linear-gradient(180deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  opacity: 0.46;
}

.welcome::after {
  content: "";
  position: absolute;
  right: 46px;
  top: 40px;
  width: 78px;
  height: 78px;
  border-radius: 0 22px 0 18px;
  background: linear-gradient(135deg, rgba(254, 249, 195, 0.95), rgba(255, 255, 255, 0.05) 52%);
  border-top: 1px solid rgba(234, 179, 8, 0.35);
  border-right: 1px solid rgba(234, 179, 8, 0.2);
  box-shadow: -8px 10px 22px rgba(148, 163, 184, 0.12);
  opacity: 0.9;
}

.journal-doodle,
.journal-sticker,
.journal-index-tabs,
.journal-tape,
.journal-note,
.journal-formula-strip,
.journal-side-note,
.journal-mini-label {
  pointer-events: none;
  user-select: none;
}

.journal-doodle {
  position: absolute;
  z-index: 7;
}

.journal-index-tabs {
  position: absolute;
  z-index: 8;
  top: 98px;
  right: 44px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.journal-index-tabs span {
  min-width: 58px;
  padding: 8px 11px;
  border: 2px solid rgba(125, 211, 252, 0.75);
  border-right-width: 4px;
  border-radius: 10px 0 0 10px;
  background: rgba(224, 242, 254, 0.88);
  color: #075985;
  font-family: "DM Mono", monospace;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 4px 0 rgba(186, 230, 253, 0.9);
}

.journal-tape {
  position: absolute;
  z-index: 13;
  height: 34px;
  border: 1px solid rgba(251, 191, 36, 0.42);
  border-radius: 8px;
  background:
    repeating-linear-gradient(-45deg, rgba(254, 240, 138, 0.92) 0 10px, rgba(253, 224, 71, 0.76) 10px 20px);
  box-shadow: 0 8px 18px rgba(180, 83, 9, 0.08);
}

.journal-mini-label {
  margin-bottom: 12px;
  padding: 7px 12px;
  border: 2px dashed rgba(56, 189, 248, 0.42);
  border-radius: 999px;
  background: rgba(240, 249, 255, 0.82);
  color: #0369a1;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.journal-formula-strip {
  margin: -22px 0 18px 8px;
  padding: 9px 14px;
  border: 2px solid rgba(203, 213, 225, 0.88);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.86);
  color: #475569;
  font-family: "DM Mono", monospace;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 5px 0 rgba(203, 213, 225, 0.7);
  transform: rotate(-1deg);
}

.search-box {
  position: relative !important;
}

.journal-side-note {
  margin-top: 18px;
  margin-left: auto;
  max-width: 340px;
  padding: 12px 16px;
  border-left: 4px solid #38bdf8;
  border-radius: 10px;
  background: rgba(240, 249, 255, 0.88);
  color: #475569;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 800;
  transform: rotate(1deg);
}

@media (max-width: 1050px) {
  .journal-index-tabs,
  .journal-doodle {
    display: none;
  }

  .welcome-inner {
    gap: 34px !important;
  }
}

@media (max-width: 760px) {
  .welcome-inner {
    flex-direction: column !important;
    padding: 28px 18px !important;
    overflow-y: auto;
  }

  
  .journal-formula-strip,
  .journal-side-note,
  .journal-mini-label {
    display: none;
  }
}

/* Study-journal Q&A panel refresh */
.learn-chat-col {
  border-left: 2px solid rgba(203, 213, 225, 0.9) !important;
}

.learn-chat-col::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  right: 10px;
  width: 10px;
  border-radius: 999px;
  background:
    linear-gradient(#cbd5e1 0 0) center / 2px 100% no-repeat,
    repeating-linear-gradient(180deg, transparent 0 34px, rgba(148, 163, 184, 0.55) 34px 40px);
  pointer-events: none;
  z-index: 2;
}


.learn-chat-scroll {
  gap: 16px !important;
}

.learn-chat-empty-state {
  position: relative !important;
  flex: 1 1 auto !important;
  justify-content: center !important;
  background-size: 24px 24px, 24px 24px, auto, auto !important;
  color: #475569 !important;
}

.learn-chat-empty-state::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 34px;
  width: 126px;
  height: 30px;
  border-radius: 8px;
  background:
    repeating-linear-gradient(-45deg, rgba(254, 240, 138, 0.92) 0 10px, rgba(253, 224, 71, 0.68) 10px 20px);
  border: 1px solid rgba(234, 179, 8, 0.36);
  box-shadow: 0 8px 18px rgba(180, 83, 9, 0.08);
  transform: rotate(-4deg);
}

.learn-chat-empty-state::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(203, 213, 225, 0.75) 0 10px, transparent 10px 18px);
  opacity: 0.75;
}

.learn-chat-paper-clip {
  position: absolute;
  top: -28px;
  right: 44px;
  width: 54px;
  height: 84px;
  border: 6px solid rgba(147, 197, 253, 0.82);
  border-left-color: transparent;
  border-radius: 28px 28px 24px 24px;
  transform: rotate(8deg);
  opacity: 0.78;
}

.learn-chat-paper-clip::after {
  content: "";
  position: absolute;
  inset: 12px 10px 12px 8px;
  border: 4px solid rgba(203, 213, 225, 0.9);
  border-left-color: transparent;
  border-radius: 22px;
}

.learn-chat-empty-kicker {
  position: absolute;
  top: 24px;
  left: 30px;
  padding: 6px 11px;
  border: 2px dashed rgba(56, 189, 248, 0.36);
  border-radius: 999px;
  background: rgba(240, 249, 255, 0.86);
  color: #0369a1;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.learn-chat-empty-title {
  font-family: "Quicksand", "Nunito", sans-serif !important;
  letter-spacing: 0 !important;
  color: #0f172a !important;
}

.learn-followup-bar {
  position: relative !important;
  background-size: 22px 22px, 22px 22px, auto !important;
}

.learn-followup-bar::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 38px;
  width: 92px;
  height: 24px;
  border-radius: 7px;
  background:
    repeating-linear-gradient(-45deg, rgba(186, 230, 253, 0.88) 0 9px, rgba(240, 249, 255, 0.78) 9px 18px);
  border: 1px solid rgba(125, 211, 252, 0.36);
  transform: rotate(-3deg);
  pointer-events: none;
}


.learn-followup-input {
  font-family: "Nunito", "Inter", sans-serif !important;
  font-weight: 700 !important;
  color: #1e293b !important;
}

.learn-followup-input::placeholder {
  color: #94a3b8 !important;
}


.learn-followup-bar .attach-btn {
  background: #ffffff !important;
  box-shadow: 0 5px 0 #e2e8f0 !important;
}

#answerLengthToggleLearn {
  font-family: "Quicksand", "Nunito", sans-serif !important;
}

#webSearchToggleBtnLearn {
  border: 2px solid #93c5fd !important;
  background: #eff6ff !important;
  color: #2563eb !important;
  box-shadow: 0 5px 0 #bfdbfe !important;
}

.learn-followup-send {
  background: #e0f2fe !important;
  color: #0284c7 !important;
  border: 2px solid #0ea5e9 !important;
  box-shadow: 0 5px 0 #bae6fd !important;
}

.learn-followup-send:not(:disabled) {
  background: #38bdf8 !important;
  color: #ffffff !important;
  box-shadow: 0 5px 0 #0284c7 !important;
}

:root[data-theme="dark"] .learn-chat-col {
  background-size: 26px 26px, 26px 26px, auto !important;
}

:root[data-theme="dark"] .learn-chat-empty-state,
:root[data-theme="dark"] .learn-followup-bar {
  background-size: 24px 24px, 24px 24px, auto !important;
}

:root[data-theme="dark"] .learn-chat-empty-title,
:root[data-theme="dark"] .learn-followup-input {
  color: #e6edf7 !important;
}

/* Answer composer visibility guard: keep the follow-up box fully inside the framed view. */
.answer {
  min-height: 0 !important;
}

.answer .answer-cols,
.answer .col-explain {
  min-height: 0 !important;
}

.answer .col-explain {
  padding-bottom: 0 !important;
}

.answer .explain-scroll {
  max-height: none !important;
  min-height: 0 !important;
}

.answer .followup-bar {
  position: absolute !important;
  box-sizing: border-box !important;
  z-index: 60 !important;
}


@media (max-width: 900px) {
  .answer {
    --answer-composer-height: 112px;
  }

  .answer .followup-bar {
    left: 14px !important;
    right: 14px !important;
    bottom: 24px !important;
    padding: 12px 18px 16px !important;
  }
}

/* Learn Q&A cleanup: keep the composer visible and tone down the empty state. */
.learn-chat-col {
  min-height: 0 !important;
  overflow: hidden !important;
}


.learn-chat-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

.learn-chat-empty-state {
  height: auto !important;
}


.learn-followup-bar {
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
}

.learn-followup-bar::before {
  display: none !important;
}

.learn-followup-bar .followup-bar-row {
  flex-wrap: wrap !important;
  min-width: 0 !important;
}

.learn-followup-input {
  flex: 1 1 210px !important;
}


#answerLengthToggleLearn {
  flex: 0 0 112px !important;
}

@media (max-width: 980px) {


  .learn-chat-empty-state {
    min-height: min(460px, calc(100vh - 230px)) !important;
    padding: 34px 18px 28px !important;
  }
}

:root[data-theme="dark"] .learn-chat-empty-state {
  background:
    radial-gradient(circle at 50% 18%, rgba(96, 165, 250, 0.16), transparent 38%),
    rgba(21, 30, 43, 0.38) !important;
  box-shadow: none !important;
}

/* Stable Q&A floating mode: draggable, but click and drag stay separate. */
.learn-chat-popover {
  position: fixed !important;
  display: flex !important;
}

.learn-chat-popover.hidden {
  display: none !important;
}

.learn-chat-popover-head {
  cursor: grab !important;
}

.learn-chat-fab {
  cursor: grab !important;
}

.learn-body.chat-collapsed .learn-chat-fab {
  position: fixed !important;
  left: auto !important;
  top: auto !important;
  right: 28px !important;
  bottom: 28px !important;
  width: 68px !important;
  height: 68px !important;
  z-index: 90 !important;
}

.learn-body.chat-collapsed .learn-side-restore-chat {
  position: absolute !important;
  left: auto !important;
  right: 20px !important;
  top: 20px !important;
}

.learn-chat-fab:active,
.learn-chat-popover-head:active {
  cursor: grabbing !important;
}

/* Learn Q&A journal answer polish: keep sources only in the top panel. */
.learn-chat-scroll {
  padding-top: 56px !important;
}

.learn-web-section {
  position: relative !important;
  margin: 22px 12px 18px !important;
  padding: 18px 16px 16px !important;
  border: 2px solid rgba(203, 213, 225, 0.88) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(90deg, rgba(148, 163, 184, 0.10) 1px, transparent 1px),
    linear-gradient(180deg, rgba(148, 163, 184, 0.09) 1px, transparent 1px),
    rgba(255, 255, 255, 0.78) !important;
  background-size: 24px 24px, 24px 24px, auto !important;
  box-shadow: 0 6px 0 rgba(226, 232, 240, 0.9) !important;
}

.learn-web-section::before {
  content: "";
  position: absolute;
  top: -13px;
  left: 32px;
  width: 102px;
  height: 22px;
  border: 1px solid rgba(125, 211, 252, 0.38);
  border-radius: 7px;
  background: repeating-linear-gradient(-45deg, rgba(186, 230, 253, 0.84) 0 9px, rgba(240, 249, 255, 0.76) 9px 18px);
  transform: rotate(-3deg);
}

.learn-web-section-title {
  margin-bottom: 12px !important;
  color: #64748b !important;
  font-family: "DM Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
}

.learn-web-section-count {
  min-width: 30px !important;
  text-align: center !important;
  background: #e0f2fe !important;
  border: 1px solid #bae6fd !important;
  color: #0369a1 !important;
  font-family: "DM Mono", monospace !important;
}

.learn-web-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.learn-web-card {
  position: relative !important;
  min-width: 0 !important;
  padding: 10px 12px 10px 14px !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: none !important;
  transform: none !important;
}

.learn-web-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 0 999px 999px 0;
  background: #38bdf8;
}

.learn-web-card:hover {
  border-color: #93c5fd !important;
  background: rgba(240, 249, 255, 0.86) !important;
  box-shadow: 0 4px 0 rgba(191, 219, 254, 0.9) !important;
}

.lwc-title {
  font-family: "Nunito", "Inter", sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  color: #172033 !important;
}

.lwc-domain {
  align-self: flex-start !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  background: rgba(226, 232, 240, 0.76) !important;
  color: #64748b !important;
  font-family: "DM Mono", monospace !important;
  font-size: 10px !important;
}

.web-expand-btn {
  align-self: flex-start !important;
  margin-top: 3px !important;
  padding: 7px 11px !important;
  border: 2px dashed rgba(147, 197, 253, 0.8) !important;
  border-radius: 999px !important;
  background: rgba(239, 246, 255, 0.8) !important;
  color: #2563eb !important;
  font-family: "DM Mono", monospace !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

.followup-bubble {
  position: relative !important;
  margin: 18px 10px 20px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.followup-bubble::before {
  content: "";
  position: absolute;
  top: 48px;
  left: 18px;
  width: 72px;
  height: 18px;
  border-radius: 6px;
  background: rgba(253, 224, 71, 0.42);
  transform: rotate(-2deg);
  pointer-events: none;
}

.followup-bubble .fub-q {
  display: inline-flex !important;
  max-width: min(92%, 440px) !important;
  margin: 0 0 12px auto !important;
  padding: 10px 14px !important;
  border: 2px solid #7dd3fc !important;
  border-radius: 18px 18px 6px 18px !important;
  background: #e0f2fe !important;
  box-shadow: 0 4px 0 #bae6fd !important;
  color: #075985 !important;
  font-family: "Quicksand", "Nunito", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
}

.followup-bubble .fub-a {
  position: relative !important;
  padding: 24px 22px 22px !important;
  border: 2px solid rgba(203, 213, 225, 0.92) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 253, 248, 0.94)),
    linear-gradient(90deg, rgba(148, 163, 184, 0.10) 1px, transparent 1px),
    linear-gradient(180deg, rgba(148, 163, 184, 0.10) 1px, transparent 1px) !important;
  background-size: auto, 24px 24px, 24px 24px !important;
  box-shadow: 0 7px 0 #e2e8f0, 0 16px 28px rgba(15, 23, 42, 0.07) !important;
  color: #24324a !important;
  font-family: "Nunito", "Inter", sans-serif !important;
  font-size: 15.5px !important;
  line-height: 1.72 !important;
  font-weight: 650 !important;
}

.followup-bubble .fub-a::before {
  content: "answer note";
  position: absolute;
  top: -12px;
  right: 22px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #fef3c7;
  border: 1px solid rgba(245, 158, 11, 0.28);
  color: #92400e;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.followup-bubble .fub-a.ghost::before {
  content: none;
}

.followup-bubble .fub-a h1,
.followup-bubble .fub-a h2,
.followup-bubble .fub-a h3,
.followup-bubble .fub-a h4 {
  font-family: "Quicksand", "Nunito", sans-serif !important;
  color: #172033 !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
}

.followup-bubble .fub-a p,
.followup-bubble .fub-a ul,
.followup-bubble .fub-a ol {
  margin-bottom: 12px !important;
}

.followup-bubble .fub-a li {
  margin: 6px 0 !important;
}

.followup-bubble .fub-a strong {
  color: #0f172a !important;
  background: linear-gradient(180deg, transparent 58%, rgba(253, 224, 71, 0.42) 58%) !important;
  border-radius: 4px !important;
}

.followup-bubble .fub-a code {
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #1d4ed8 !important;
  font-family: "DM Mono", monospace !important;
  font-weight: 700 !important;
}

.followup-bubble .fub-a .hyperknow-links-container,
.followup-bubble .search-progress-card .search-live-sources {
  display: none !important;
}

:root[data-theme="dark"] .learn-web-section,
:root[data-theme="dark"] .followup-bubble .fub-a {
  background:
    linear-gradient(90deg, rgba(96, 165, 250, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(96, 165, 250, 0.07) 1px, transparent 1px),
    rgba(21, 30, 43, 0.92) !important;
  border-color: #2b3a50 !important;
  box-shadow: 0 7px 0 rgba(43, 58, 80, 0.9) !important;
}

:root[data-theme="dark"] .learn-web-card {
  background: rgba(16, 23, 34, 0.7) !important;
  border-color: #2b3a50 !important;
}

:root[data-theme="dark"] .lwc-title,
:root[data-theme="dark"] .followup-bubble .fub-a,
:root[data-theme="dark"] .followup-bubble .fub-a h1,
:root[data-theme="dark"] .followup-bubble .fub-a h2,
:root[data-theme="dark"] .followup-bubble .fub-a h3,
:root[data-theme="dark"] .followup-bubble .fub-a h4 {
  color: #e6edf7 !important;
}

:root[data-theme="dark"] .followup-bubble .fub-a strong {
  color: #f8fafc !important;
  background: linear-gradient(180deg, transparent 58%, rgba(96, 165, 250, 0.24) 58%) !important;
}

/* Web reference overflow guard: long titles stay inside the paper card. */
.learn-web-card,
.learn-web-card .lwc-head,
.learn-web-card .lwc-title {
  min-width: 0 !important;
  max-width: 100% !important;
}

.learn-web-card .lwc-head {
  overflow: hidden !important;
}

.learn-web-card .lwc-title {
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  hyphens: auto !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  text-overflow: ellipsis !important;
}

.learn-web-card .lwc-fav {
  flex: 0 0 auto !important;
}


























































































/* Compact skill-call state for the lesson Q&A panel. */
.learn-chat-scroll {
  padding: 52px 24px 12px !important;
}

.learn-chat-empty-state {
  min-height: 0 !important;
  width: min(100%, 360px) !important;
  max-width: 360px !important;
  margin: auto !important;
  padding: 18px 16px !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}

.learn-chat-empty-state::before,
.learn-chat-empty-state::after,
.learn-chat-paper-clip,
.learn-chat-empty-kicker {
  display: none !important;
}

.learn-chat-empty-title {
  max-width: 100% !important;
  font-size: 22px !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
}

.learn-followup-bar {
  width: calc(100% - 32px) !important;
  max-width: calc(100% - 32px) !important;
  margin: 0 16px 18px !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08) !important;
}


.learn-followup-input {
  max-height: 92px !important;
  min-width: 0 !important;
  width: 100% !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

.learn-followup-bar .attach-btn,
.learn-followup-bar .icon-toggle-btn,
.learn-followup-bar .learn-followup-send {
  flex: none !important;
  border-radius: 13px !important;
  box-shadow: none !important;
}

.learn-followup-bar .attach-btn {
  grid-area: attach !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
}


#webSearchToggleBtnLearn {
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
}

#webSearchToggleBtnLearn::after {
  content: none !important;
}


#webSearchToggleBtnLearn,
.learn-followup-send {
  border-width: 1px !important;
  box-shadow: none !important;
}

@media (max-width: 980px) {
  .learn-chat-scroll {
    padding: 50px 16px 10px !important;
  }

  .learn-followup-bar {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin: 0 12px 16px !important;
  }

  .learn-followup-bar .followup-bar-row {
    grid-template-columns: 38px minmax(0, 1fr) 38px !important;
  }
}

:root[data-theme="dark"] .learn-chat-empty-state,
:root[data-theme="dark"] .learn-followup-bar {
  background: rgba(21, 30, 43, 0.76) !important;
  border-color: #2b3a50 !important;
}

/* Q&A panel refinement: plain paper, cleaner mark, compact controls. */
.learn-chat-col {
  background: linear-gradient(180deg, #fffefd 0%, #f8fbff 100%) !important;
  background-size: auto !important;
}

.learn-chat-col::before {
  opacity: 0.18 !important;
}

.learn-chat-empty-state {
  border: 1px solid rgba(203, 213, 225, 0.62) !important;
  background: rgba(255, 255, 255, 0.7) !important;
}

.learn-followup-bar {
  container-type: inline-size;
  padding: 8px !important;
}

.learn-followup-bar .followup-bar-row {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) 92px 38px 38px !important;
  grid-template-areas: "attach input mode web send" !important;
  align-items: center !important;
  gap: 7px !important;
}

.learn-followup-input {
  grid-area: input !important;
  min-height: 38px !important;
  padding: 8px 6px !important;
}

#answerLengthToggleLearn {
  grid-area: mode !important;
  width: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
  height: 38px !important;
  padding: 0 24px 0 11px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(203, 213, 225, 0.86) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92)) !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

#webSearchToggleBtnLearn {
  grid-area: web !important;
}

.learn-followup-send {
  grid-area: send !important;
}

.learn-followup-bar .attach-btn,
.learn-followup-bar .icon-toggle-btn,
.learn-followup-bar .learn-followup-send {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
}

@media (max-width: 1120px) {
  .learn-followup-bar .followup-bar-row {
    grid-template-columns: 38px minmax(0, 1fr) 82px 38px 38px !important;
  }

  #answerLengthToggleLearn {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    padding-left: 9px !important;
    padding-right: 18px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 760px) {
  .learn-followup-bar .followup-bar-row {
    grid-template-columns: 38px minmax(0, 1fr) 38px !important;
    grid-template-areas:
      "attach input send"
      "mode mode web" !important;
  }

  #answerLengthToggleLearn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

:root[data-theme="dark"] .learn-chat-col {
  background: linear-gradient(180deg, #101827 0%, #121c2b 100%) !important;
}

@container (max-width: 430px) {
  .learn-followup-bar .followup-bar-row {
    grid-template-columns: 38px minmax(0, 1fr) 38px !important;
    grid-template-areas:
      "attach input send"
      ". mode web" !important;
  }

  #answerLengthToggleLearn {
    justify-self: end !important;
    width: 94px !important;
    min-width: 94px !important;
    max-width: 94px !important;
  }

  #webSearchToggleBtnLearn {
    justify-self: stretch !important;
  }
}

.learn-chat-empty-state {
  gap: 10px !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) .learn-chat-col {
  background-size: 28px 28px, 28px 28px, auto, auto, auto !important;
}


.learn-body.explain-collapsed:not(.chat-collapsed) .learn-chat-empty-state::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) .learn-chat-empty-state::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
}


.learn-chat-empty-bubble .bubble-shadow {
  fill: rgba(15, 23, 42, 0.14);
  transform: translate(2px, 3px);
}

.learn-chat-empty-bubble .bubble-face {
  fill: #fffaf0;
  stroke: rgba(15, 23, 42, 0.2);
  stroke-width: 1.2;
}


.learn-body.explain-collapsed:not(.chat-collapsed) #answerLengthToggleLearn {
  padding-left: 26px !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) #webSearchToggleBtnLearn {
  border: 3px solid #e2e8f0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}


@media (max-width: 820px) {

  .learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-bar .attach-btn,
  .learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-bar .icon-toggle-btn,
  .learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-bar .learn-followup-send {
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
  }


  .learn-body.explain-collapsed:not(.chat-collapsed) #webSearchToggleBtnLearn {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Lesson overview should read like a classroom tool, not an AI sticker sheet. */
.learn-explain-body .lecture-note-card-example > :is(h3, h4):first-child::before,
.explain-body .lecture-note-card-example > :is(h3, h4):first-child::before,
.learn-explain-body .lecture-note-card-rule > :is(h3, h4):first-child::before,
.explain-body .lecture-note-card-rule > :is(h3, h4):first-child::before {
  content: none !important;
}

/* Q&A layout v2: aligned edge tabs and quieter focused asking surface. */
.learn-body {
  --learn-edge-tab-top: 22px;
}

.learn-side-restore-explain,

.learn-side-restore-chat {
  position: absolute !important;
  top: var(--learn-edge-tab-top) !important;
  z-index: 34 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
}

.learn-side-restore-explain {
  left: 22px !important;
  right: auto !important;
}

.learn-side-restore-chat {
  left: auto !important;
  right: 22px !important;
}

.learn-side-restore-explain::before,

.learn-side-restore-explain::after,

.learn-side-restore-chat::before,

.learn-side-restore-chat::after {
  content: none !important;
  display: none !important;
}


.learn-side-restore-explain:hover,

.learn-side-restore-chat:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(96, 165, 250, 0.78) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(240, 247, 255, 0.96)) !important;
  color: #1e3a8a !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) {
  --learn-edge-tab-top: 22px;
}


.learn-body.explain-collapsed:not(.chat-collapsed) .learn-chat-empty-state {
  border: 1px solid rgba(191, 205, 222, 0.86) !important;
  border-radius: 28px !important;
  background-size: 24px 24px, 24px 24px, auto, auto !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 18px 48px rgba(15, 23, 42, 0.08) !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) .learn-chat-empty-state::before {
  top: -14px !important;
  left: clamp(34px, 7vw, 82px) !important;
  width: 112px !important;
  height: 26px !important;
  border-radius: 999px !important;
  background:
    repeating-linear-gradient(-45deg, rgba(186, 230, 253, 0.82) 0 10px, rgba(240, 249, 255, 0.82) 10px 20px) !important;
  border: 1px solid rgba(125, 211, 252, 0.46) !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.08) !important;
  transform: rotate(-2deg) !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) .learn-chat-empty-state::after {
  left: clamp(40px, 7vw, 98px) !important;
  right: clamp(40px, 7vw, 98px) !important;
  bottom: 30px !important;
  height: 1px !important;
  background: repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.5) 0 10px, transparent 10px 20px) !important;
}


.learn-body.explain-collapsed:not(.chat-collapsed) .learn-chat-empty-title {
  color: #111827 !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) .learn-chat-empty-copy {
  max-width: 420px !important;
  color: #64748b !important;
}


.learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-bar .attach-btn,
.learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-bar .icon-toggle-btn,
.learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-bar .learn-followup-send {
  width: 52px !important;
  min-width: 52px !important;
  height: 52px !important;
  border: 1px solid rgba(203, 213, 225, 0.92) !important;
  border-radius: 17px !important;
  box-shadow: none !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-bar .attach-btn svg,
.learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-bar .learn-followup-send svg,
.learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-bar .icon-toggle-btn svg {
  width: 22px !important;
  height: 22px !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) #answerLengthToggleLearn {
  height: 52px !important;
  border: 1px solid rgba(203, 213, 225, 0.92) !important;
  border-radius: 17px !important;
  background: #ffffff !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) #webSearchToggleBtnLearn {
  height: 52px !important;
  border-radius: 17px !important;
}


@media (max-width: 820px) {
  .learn-body {
    --learn-edge-tab-top: 14px;
  }

    .learn-side-restore-explain {
    left: 14px !important;
  }

  .learn-side-restore-chat {
    right: 14px !important;
  }

  .learn-body.explain-collapsed:not(.chat-collapsed) .learn-chat-scroll {
    padding: 72px 16px 14px !important;
  }

  .learn-body.explain-collapsed:not(.chat-collapsed) .learn-chat-empty-state,
  .learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-bar {
    width: calc(100% - 24px) !important;
  }


  .learn-body.explain-collapsed:not(.chat-collapsed) #answerLengthToggleLearn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* Q&A layout v3: speech badge + framed composer inspired by chat tools. */
.learn-body.explain-collapsed:not(.chat-collapsed) .learn-chat-empty-state {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) .learn-chat-empty-bubble {
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  margin: 0 auto 2px !important;
  border: 4px solid #172033 !important;
  background: #dbeafe !important;
  transform: rotate(-1.5deg) !important;
  overflow: visible !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) .learn-chat-empty-bubble::after {
  content: "" !important;
  position: absolute !important;
  right: -7px !important;
  bottom: -7px !important;
  width: 38% !important;
  height: 38% !important;
  border-right: 4px solid #172033 !important;
  border-bottom: 4px solid #172033 !important;
  border-radius: 0 0 22px 0 !important;
  pointer-events: none !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) .learn-chat-empty-bubble svg {
  overflow: visible !important;
  filter: drop-shadow(2px 3px 3px rgba(15, 23, 42, 0.18)) !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) .learn-chat-empty-bubble .bubble-shadow {
  fill: rgba(15, 23, 42, 0.15) !important;
  transform: translate(2px, 3px) !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) .learn-chat-empty-bubble .bubble-face {
  fill: #ffffff !important;
  stroke: rgba(15, 23, 42, 0.22) !important;
  stroke-width: 1.25 !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) .learn-chat-empty-bubble circle {
  fill: #172033 !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) .learn-chat-empty-title {
  margin-top: 2px !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-bar {
  border: 4px solid #172033 !important;
  background: #ffffff !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-bar .followup-bar-row {
  display: grid !important;
  align-items: center !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-input {
  background: #ffffff !important;
  color: #172033 !important;
  font-weight: 650 !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-input::placeholder {
  color: rgba(100, 116, 139, 0.62) !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-bar .attach-btn,
.learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-bar .learn-followup-send {
  border: 4px solid #172033 !important;
}


.learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-bar .attach-btn {
  background: #ffffff !important;
  color: #172033 !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-send {
  background: #60a5fa !important;
  color: #ffffff !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-bar .attach-btn svg,
.learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-bar .learn-followup-send svg {
  stroke-width: 2.5 !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) #answerLengthToggleLearn,
.learn-body.explain-collapsed:not(.chat-collapsed) #webSearchToggleBtnLearn {
  border: 3px solid #e2e8f0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) #answerLengthToggleLearn {
  padding: 0 24px !important;
  color: #475569 !important;
  font-size: 17px !important;
  font-weight: 850 !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) #webSearchToggleBtnLearn {
  color: #2563eb !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) #webSearchToggleBtnLearn::after {
  content: "Web" !important;
  margin-left: 10px !important;
  color: #2563eb !important;
  font-family: "Quicksand", "Nunito", sans-serif !important;
  font-size: 18px !important;
  font-weight: 850 !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-bar .icon-toggle-btn svg {
  width: 28px !important;
  height: 28px !important;
}

@media (max-width: 820px) {
  .learn-body.explain-collapsed:not(.chat-collapsed) .learn-chat-empty-bubble {
    width: 72px !important;
    height: 72px !important;
    border-width: 3px !important;
    box-shadow: 6px 7px 0 #172033 !important;
  }

  .learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-bar {
    padding: 14px !important;
    border-width: 3px !important;
  }

  .learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-bar .followup-bar-row {
    grid-template-columns: 56px minmax(0, 1fr) 56px !important;
    grid-template-areas:
      "attach input send"
      "mode mode web" !important;
    gap: 10px !important;
  }

  .learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-bar .attach-btn,
  .learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-bar .learn-followup-send {
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
    border-radius: 18px !important;
    box-shadow: 5px 5px 0 #172033 !important;
  }

  .learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-input {
    min-height: 58px !important;
    padding: 13px 16px !important;
    border-width: 3px !important;
    border-radius: 18px !important;
    font-size: 16px !important;
    box-shadow: 5px 5px 0 #bfdbfe !important;
  }

  .learn-body.explain-collapsed:not(.chat-collapsed) #answerLengthToggleLearn,
  .learn-body.explain-collapsed:not(.chat-collapsed) #webSearchToggleBtnLearn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 44px !important;
    font-size: 14px !important;
  }
}

/* Edge tabs final: study-journal paper tabs. */
.learn-body {
  --learn-edge-tab-height: 44px;
}

.learn-side-restore-explain,

.learn-side-restore-chat {
  height: var(--learn-edge-tab-height) !important;
  min-width: 92px !important;
  padding: 0 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(186, 178, 162, 0.82) !important;
  background:
    linear-gradient(180deg, rgba(255, 253, 247, 0.99), rgba(248, 242, 232, 0.97)) !important;
  color: #31415f !important;
  box-shadow:
    0 12px 24px rgba(145, 156, 178, 0.14),
    0 3px 8px rgba(145, 156, 178, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
  gap: 8px !important;
  font-family: "Quicksand", "Nunito", sans-serif !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  letter-spacing: 0.01em !important;
  overflow: hidden !important;
}

.learn-side-restore-explain {
  transform: rotate(-1.2deg) !important;
}

.learn-side-restore-chat {
  transform: rotate(1.1deg) !important;
}

.learn-side-restore-explain::before,

.learn-side-restore-chat::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 8px 10px !important;
  border: 1px dashed rgba(150, 161, 180, 0.34) !important;
  border-radius: 13px !important;
  pointer-events: none !important;
}

.learn-side-restore-explain::after,

.learn-side-restore-chat::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: -8px !important;
  right: 14px !important;
  width: 34px !important;
  height: 14px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(191, 221, 255, 0.62), rgba(161, 201, 255, 0.34)) !important;
  opacity: 0.8 !important;
  transform: rotate(6deg) !important;
  box-shadow: 0 2px 8px rgba(114, 150, 209, 0.16) !important;
  pointer-events: none !important;
}

.learn-edge-toggle-icon {
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  border: 1px solid rgba(147, 197, 253, 0.82) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
  position: relative !important;
  z-index: 1 !important;
}

.learn-edge-toggle-icon svg {
  display: block !important;
}

.learn-edge-toggle-label {
  position: relative !important;
  z-index: 1 !important;
  color: #31415f !important;
  transform: none !important;
  line-height: 1 !important;
}

.learn-side-restore-explain:hover {
  transform: translateY(-1px) rotate(-1.2deg) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 252, 1), rgba(251, 247, 239, 1)) !important;
  border-color: rgba(164, 154, 138, 0.9) !important;
}

.learn-side-restore-chat:hover {
  transform: translateY(-1px) rotate(1.1deg) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 252, 1), rgba(251, 247, 239, 1)) !important;
  border-color: rgba(164, 154, 138, 0.9) !important;
}

/* Q&A surface final: make focused + side panel use the same journal layout. */
.learn-body.explain-collapsed:not(.chat-collapsed) .learn-chat-scroll {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}


.learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-bar .followup-bar-row {
  grid-template-areas:
    "attach input input input send"
    ". . mode web ." !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-send {
  justify-self: end !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) #answerLengthToggleLearn {
  justify-self: end !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) #webSearchToggleBtnLearn {
  justify-self: start !important;
}

/* Same visual language for the regular narrow Q&A side panel. */
.learn-body:not(.explain-collapsed):not(.chat-collapsed) .learn-chat-scroll {
  padding: 64px 16px 10px !important;
  display: flex !important;
  flex-direction: column !important;
}

.learn-body:not(.explain-collapsed):not(.chat-collapsed) .learn-chat-empty-state {
  display: flex !important;
  flex: 1 1 auto !important;
  width: calc(100% - 8px) !important;
  max-width: none !important;
  margin: 0 auto 10px !important;
  padding: 28px 18px !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid rgba(203, 213, 225, 0.78) !important;
  border-radius: 28px !important;
  background-size: 24px 24px, 24px 24px, auto !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06) !important;
}

.learn-body:not(.explain-collapsed):not(.chat-collapsed) .learn-chat-empty-state::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: -13px !important;
  left: 30px !important;
  width: 106px !important;
  height: 24px !important;
  border-radius: 999px !important;
  background: repeating-linear-gradient(-45deg, rgba(186, 230, 253, 0.88) 0 10px, rgba(240, 249, 255, 0.78) 10px 20px) !important;
  border: 1px solid rgba(125, 211, 252, 0.42) !important;
  transform: rotate(-3deg) !important;
}

.learn-body:not(.explain-collapsed):not(.chat-collapsed) .learn-chat-empty-state::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 34px !important;
  right: 34px !important;
  bottom: 28px !important;
  height: 1px !important;
  background: repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.48) 0 10px, transparent 10px 20px) !important;
}

.learn-body:not(.explain-collapsed):not(.chat-collapsed) .learn-chat-empty-bubble {
  display: grid !important;
  place-items: center !important;
  margin: 0 auto 2px !important;
  border: 3px solid #172033 !important;
  border-radius: 20px 20px 26px 20px !important;
  background: #dbeafe !important;
  transform: rotate(-1.5deg) !important;
}


.learn-body:not(.explain-collapsed):not(.chat-collapsed) .learn-chat-empty-title {
  font-size: clamp(26px, 3vw, 36px) !important;
  line-height: 1.05 !important;
}

.learn-body:not(.explain-collapsed):not(.chat-collapsed) .learn-chat-empty-copy {
  max-width: 280px !important;
  font-size: 14px !important;
}

.learn-body:not(.explain-collapsed):not(.chat-collapsed) .learn-followup-bar {
  border: 2px solid #172033 !important;
  background: #ffffff !important;
  box-shadow: 0 7px 0 #172033, 0 14px 28px rgba(15, 23, 42, 0.08) !important;
}


.learn-body:not(.explain-collapsed):not(.chat-collapsed) .learn-followup-input {
  border: 3px solid #60a5fa !important;
  background: #ffffff !important;
}

.learn-body:not(.explain-collapsed):not(.chat-collapsed) .learn-followup-bar .attach-btn,
.learn-body:not(.explain-collapsed):not(.chat-collapsed) .learn-followup-bar .learn-followup-send {
  border: 3px solid #172033 !important;
}

.learn-body:not(.explain-collapsed):not(.chat-collapsed) .learn-followup-send {
  background: #60a5fa !important;
  color: #ffffff !important;
}

.learn-body:not(.explain-collapsed):not(.chat-collapsed) #answerLengthToggleLearn {
  border: 2px solid #e2e8f0 !important;
  border-radius: 15px !important;
  background: #ffffff !important;
  font-weight: 850 !important;
}

.learn-body:not(.explain-collapsed):not(.chat-collapsed) #webSearchToggleBtnLearn {
  border: 2px solid #93c5fd !important;
  border-radius: 15px !important;
  background: #eff6ff !important;
  color: #2563eb !important;
}

.learn-body:not(.explain-collapsed):not(.chat-collapsed) #webSearchToggleBtnLearn::after {
  content: none !important;
}

@media (max-width: 900px) {
  .learn-body.explain-collapsed:not(.chat-collapsed) .learn-chat-empty-state,
  .learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-bar {
    width: calc(100% - 24px) !important;
  }

  .learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-bar .followup-bar-row {
    grid-template-columns: 56px minmax(0, 1fr) 56px !important;
    grid-template-areas:
      "attach input send"
      "mode mode web" !important;
  }
}

/* Q&A proportion + smooth drawer polish. */
.learn-body-inner {
  display: flex !important;
  grid-template-columns: none !important;
}

.learn-explain-col,
.learn-chat-col,
.learn-resizer {
  transition:
    flex-basis 0.38s cubic-bezier(0.2, 0.8, 0.2, 1),
    width 0.38s cubic-bezier(0.2, 0.8, 0.2, 1),
    max-width 0.38s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.24s ease,
    transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  will-change: flex-basis, width, max-width, opacity, transform !important;
}

.learn-body:not(.chat-collapsed):not(.explain-collapsed) .learn-explain-col {
  flex: 0 0 55% !important;
  width: 55% !important;
  max-width: 55% !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
}

.learn-body:not(.chat-collapsed):not(.explain-collapsed) .learn-chat-col {
  flex: 0 0 45% !important;
  width: 45% !important;
  max-width: 45% !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
}

.learn-body.chat-collapsed .learn-chat-col {
  display: flex !important;
  flex: 0 0 0 !important;
  width: 0 !important;
  max-width: 0 !important;
  min-width: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(18px) !important;
  border-left: 0 !important;
  overflow: hidden !important;
}

.learn-body.chat-collapsed .learn-resizer,
.learn-body.explain-collapsed .learn-resizer {
  display: block !important;
  flex: 0 0 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.learn-body.chat-collapsed .learn-explain-col {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* LEARN_QA_COLLAPSED_VISIBILITY_LOCK: bubble visible, sidebar truly gone. */
.learn-body.chat-collapsed .learn-chat-col,
#learnBody.chat-collapsed .learn-chat-col {
  display: none !important;
}

.learn-body.chat-collapsed .learn-resizer,
#learnBody.chat-collapsed .learn-resizer {
  display: none !important;
}

.learn-body.chat-collapsed .learn-chat-fab.hidden,
.learn-body.chat-collapsed .learn-chat-fab,
#learnBody.chat-collapsed .learn-chat-fab.hidden,
#learnBody.chat-collapsed .learn-chat-fab {
  display: inline-flex !important;
}

.learn-body.explain-collapsed .learn-body-inner {
  display: flex !important;
  grid-template-columns: none !important;
}

.learn-body.explain-collapsed .learn-explain-col {
  display: flex !important;
  flex: 0 0 0 !important;
  width: 0 !important;
  max-width: 0 !important;
  min-width: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-18px) !important;
  border-right: 0 !important;
  overflow: hidden !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) .learn-chat-col {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) .learn-chat-scroll {
  padding: 42px clamp(22px, 4vw, 58px) 8px !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) .learn-chat-empty-state {
  margin: 0 auto 8px !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) .learn-chat-empty-state::before,
.learn-body:not(.explain-collapsed):not(.chat-collapsed) .learn-chat-empty-state::before {
  content: none !important;
  display: none !important;
}


.learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-input {
  border: 3px solid #172033 !important;
  box-shadow: 5px 5px 0 rgba(23, 32, 51, 0.9) !important;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease,
    background-color 0.18s ease !important;
}

.learn-followup-input:focus {
  border-color: #60a5fa !important;
  box-shadow: 5px 5px 0 #bfdbfe, 0 0 0 3px rgba(96, 165, 250, 0.14) !important;
  transform: translate(-1px, -1px) !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-bar .attach-btn,
.learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-bar .learn-followup-send {
  border-width: 3px !important;
  box-shadow: 5px 5px 0 #172033 !important;
}


.learn-body.explain-collapsed:not(.chat-collapsed) #answerLengthToggleLearn,
.learn-body.explain-collapsed:not(.chat-collapsed) #webSearchToggleBtnLearn {
  border-width: 2px !important;
}


.learn-body:not(.explain-collapsed):not(.chat-collapsed) .learn-chat-empty-state {
  min-height: clamp(360px, calc(100vh - 360px), 620px) !important;
}

.learn-body:not(.explain-collapsed):not(.chat-collapsed) .learn-chat-empty-bubble {
  width: 54px !important;
  height: 52px !important;
  box-shadow: 5px 6px 0 #172033 !important;
}

.learn-body:not(.explain-collapsed):not(.chat-collapsed) .learn-chat-empty-bubble svg {
  width: 38px !important;
  height: 38px !important;
}

.learn-body:not(.explain-collapsed):not(.chat-collapsed) .learn-followup-input {
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease,
    background-color 0.18s ease !important;
}

.learn-body:not(.explain-collapsed):not(.chat-collapsed) .learn-followup-input:focus {
  border-color: #60a5fa !important;
  box-shadow: 4px 4px 0 #bfdbfe, 0 0 0 3px rgba(96, 165, 250, 0.14) !important;
}

/* Q&A composer compact pass: less banner, better narrow-panel fit. */
.learn-followup-bar {
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease,
    background-color 0.18s ease !important;
}

.learn-followup-bar:focus-within {
  border-color: #60a5fa !important;
  box-shadow: 0 6px 0 #bfdbfe, 0 14px 28px rgba(96, 165, 250, 0.12) !important;
}


.learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-bar {
  width: min(74%, 1060px) !important;
  max-width: 1060px !important;
  margin: 0 auto 18px !important;
  padding: 12px 14px 14px !important;
  border-width: 3px !important;
  border-radius: 22px !important;
  box-shadow: 0 6px 0 #172033, 0 14px 26px rgba(15, 23, 42, 0.08) !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-bar:focus-within {
  box-shadow: 0 6px 0 #bfdbfe, 0 14px 28px rgba(96, 165, 250, 0.13) !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-bar .followup-bar-row {
  grid-template-columns: 48px minmax(260px, 1fr) 120px 100px 48px !important;
  gap: 10px !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-input {
  min-height: 48px !important;
  height: 48px !important;
  max-height: 48px !important;
  padding: 11px 16px !important;
  border-radius: 17px !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-bar .attach-btn,
.learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-bar .learn-followup-send {
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-bar .attach-btn svg,
.learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-bar .learn-followup-send svg {
  width: 22px !important;
  height: 22px !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) #answerLengthToggleLearn,
.learn-body.explain-collapsed:not(.chat-collapsed) #webSearchToggleBtnLearn {
  height: 38px !important;
  border-radius: 13px !important;
  font-size: 12px !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) #answerLengthToggleLearn {
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) #webSearchToggleBtnLearn {
  width: 100px !important;
  min-width: 100px !important;
}


.learn-body:not(.explain-collapsed):not(.chat-collapsed) .learn-followup-bar:focus-within {
  box-shadow: 0 6px 0 #bfdbfe, 0 14px 28px rgba(96, 165, 250, 0.12) !important;
}


.learn-body:not(.explain-collapsed):not(.chat-collapsed) .learn-followup-input {
  min-height: 44px !important;
  height: 44px !important;
  max-height: 44px !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.learn-body:not(.explain-collapsed):not(.chat-collapsed) .learn-followup-bar .attach-btn,
.learn-body:not(.explain-collapsed):not(.chat-collapsed) .learn-followup-bar .learn-followup-send {
  border-radius: 15px !important;
  box-shadow: 4px 4px 0 #172033 !important;
}

.learn-body:not(.explain-collapsed):not(.chat-collapsed) #answerLengthToggleLearn {
  height: 40px !important;
  font-size: 13px !important;
}

.learn-body:not(.explain-collapsed):not(.chat-collapsed) #webSearchToggleBtnLearn {
  height: 40px !important;
}

@media (max-width: 700px) {
  .learn-body:not(.explain-collapsed):not(.chat-collapsed) .learn-followup-bar .followup-bar-row {
    grid-template-columns: 38px minmax(145px, 1fr) 42px !important;
    gap: 7px !important;
  }

  .learn-body:not(.explain-collapsed):not(.chat-collapsed) .learn-followup-input {
    font-size: 13px !important;
    padding-inline: 10px !important;
  }
}

/* Q&A blank-card typography pass. */
.learn-body.explain-collapsed:not(.chat-collapsed) .learn-chat-col {
  background: #ffffff !important;
  background-image: none !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) .learn-chat-scroll {
  background: #ffffff !important;
  background-image: none !important;
  padding-top: 38px !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) .learn-chat-empty-state {
  width: min(76%, 1040px) !important;
  max-width: 1040px !important;
  min-height: clamp(310px, calc(100vh - 500px), 455px) !important;
  padding: 20px 28px !important;
  gap: 7px !important;
  background: #ffffff !important;
  background-image: none !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) .learn-chat-empty-state::after {
  opacity: 0.38 !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) .learn-chat-empty-bubble {
  width: 52px !important;
  height: 49px !important;
  margin-bottom: 0 !important;
  border-width: 2.5px !important;
  border-radius: 16px 16px 21px 16px !important;
  box-shadow: 4px 5px 0 #172033 !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) .learn-chat-empty-bubble svg {
  width: 36px !important;
  height: 36px !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) .learn-chat-empty-title {
  font-size: clamp(28px, 3.5vw, 46px) !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
}

.learn-body.explain-collapsed:not(.chat-collapsed) .learn-chat-empty-copy {
  font-size: clamp(12px, 1.08vw, 15px) !important;
  line-height: 1.3 !important;
  margin-top: 0 !important;
}

.learn-body:not(.explain-collapsed):not(.chat-collapsed) .learn-chat-empty-state {
  background: #ffffff !important;
  background-image: none !important;
}

/* Progressive panel focus: original buttons grow their own side. */
.learn-body[data-panel-focus] .learn-body-inner {
  display: flex !important;
  grid-template-columns: none !important;
}

.learn-body[data-panel-focus] .learn-explain-col,
.learn-body[data-panel-focus] .learn-chat-col,
.learn-body[data-panel-focus] .learn-resizer {
  display: flex !important;
  transition:
    flex-basis 0.42s cubic-bezier(0.2, 0.8, 0.2, 1),
    width 0.42s cubic-bezier(0.2, 0.8, 0.2, 1),
    max-width 0.42s cubic-bezier(0.2, 0.8, 0.2, 1),
    min-width 0.42s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.24s ease,
    transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.learn-body[data-panel-focus="normal"] .learn-explain-col {
  flex: 0 0 55% !important;
  width: 55% !important;
  max-width: 55% !important;
  min-width: 0 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}

.learn-body[data-panel-focus="normal"] .learn-chat-col {
  flex: 0 0 45% !important;
  width: 45% !important;
  max-width: 45% !important;
  min-width: 0 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}

.learn-body[data-panel-focus="lecture-wide"] .learn-explain-col {
  flex: 0 0 70% !important;
  width: 70% !important;
  max-width: 70% !important;
}

.learn-body[data-panel-focus="lecture-wide"] .learn-chat-col {
  flex: 0 0 30% !important;
  width: 30% !important;
  max-width: 30% !important;
  min-width: 260px !important;
}

.learn-body[data-panel-focus="qa-wide"] .learn-explain-col {
  flex: 0 0 30% !important;
  width: 30% !important;
  max-width: 30% !important;
  min-width: 300px !important;
}

.learn-body[data-panel-focus="qa-wide"] .learn-chat-col {
  flex: 0 0 70% !important;
  width: 70% !important;
  max-width: 70% !important;
}

.learn-body[data-panel-focus="lecture-full"] .learn-explain-col,
.learn-body[data-panel-focus="qa-full"] .learn-chat-col {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}

.learn-body[data-panel-focus="lecture-full"] .learn-chat-col {
  flex: 0 0 0 !important;
  width: 0 !important;
  max-width: 0 !important;
  min-width: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(18px) !important;
  overflow: hidden !important;
}

.learn-body[data-panel-focus="qa-full"] .learn-explain-col {
  flex: 0 0 0 !important;
  width: 0 !important;
  max-width: 0 !important;
  min-width: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-18px) !important;
  overflow: hidden !important;
}

.learn-body[data-panel-focus="lecture-full"] .learn-resizer,
.learn-body[data-panel-focus="qa-full"] .learn-resizer {
  flex: 0 0 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.learn-body[data-panel-focus] .learn-side-restore-explain,
.learn-body[data-panel-focus] .learn-side-restore-chat,
.learn-body[data-panel-focus] .learn-chat-fab {
  display: none !important;
}

/* Cleaner double-chevron edge arrows. */
.learn-edge-toggle-icon {
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.96) 58%, rgba(219, 234, 254, 0.96)) !important;
  border-color: rgba(125, 184, 255, 0.88) !important;
  color: #2563eb !important;
}

.learn-edge-toggle-icon svg {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 2.45 !important;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.92)) !important;
}

.learn-side-restore-explain .learn-edge-toggle-icon svg {
  transform: translateX(1px) !important;
}

.learn-side-restore-chat .learn-edge-toggle-icon svg {
  transform: translateX(-1px) !important;
}

@media (max-width: 900px) {
  .learn-body[data-panel-focus] .learn-body-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .learn-body[data-panel-focus] .learn-explain-col,
  .learn-body[data-panel-focus] .learn-chat-col {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* Composer containment + input-only focus polish. */
.learn-followup-bar,
.learn-followup-bar:focus-within,
.learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-bar,
.learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-bar:focus-within,
.learn-body:not(.explain-collapsed):not(.chat-collapsed) .learn-followup-bar,
.learn-body:not(.explain-collapsed):not(.chat-collapsed) .learn-followup-bar:focus-within {
  border-color: #172033 !important;
  box-shadow: 0 6px 0 #172033, 0 14px 26px rgba(15, 23, 42, 0.08) !important;
  transform: none !important;
}

.learn-body:not(.explain-collapsed):not(.chat-collapsed) .learn-followup-bar {
  box-sizing: border-box !important;
  width: calc(100% - 32px) !important;
  max-width: calc(100% - 32px) !important;
  margin: 0 16px 16px !important;
  padding: 10px 12px 12px !important;
  overflow: hidden !important;
  border-radius: 22px !important;
}

.learn-body:not(.explain-collapsed):not(.chat-collapsed) .learn-followup-bar .followup-bar-row {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 48px !important;
  grid-template-areas:
    "attach input send"
    ". mode web" !important;
  gap: 8px !important;
  align-items: center !important;
}

.learn-body:not(.explain-collapsed):not(.chat-collapsed) .learn-followup-input {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  grid-area: input !important;
  border-color: #172033 !important;
  box-shadow: 4px 4px 0 rgba(23, 32, 51, 0.88) !important;
}

.learn-body:not(.explain-collapsed):not(.chat-collapsed) .learn-followup-input:focus,
.learn-body.explain-collapsed:not(.chat-collapsed) .learn-followup-input:focus,
.learn-followup-input:focus {
  border-color: #60a5fa !important;
  box-shadow: 4px 4px 0 #bfdbfe, 0 0 0 3px rgba(96, 165, 250, 0.14) !important;
  transform: translate(-1px, -1px) !important;
}

.learn-body:not(.explain-collapsed):not(.chat-collapsed) .learn-followup-bar .attach-btn {
  grid-area: attach !important;
}

.learn-body:not(.explain-collapsed):not(.chat-collapsed) .learn-followup-bar .learn-followup-send {
  grid-area: send !important;
}

.learn-body:not(.explain-collapsed):not(.chat-collapsed) .learn-followup-bar .attach-btn,
.learn-body:not(.explain-collapsed):not(.chat-collapsed) .learn-followup-bar .learn-followup-send {
  box-sizing: border-box !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  justify-self: center !important;
}

.learn-body:not(.explain-collapsed):not(.chat-collapsed) #answerLengthToggleLearn {
  grid-area: mode !important;
  width: min(100%, 116px) !important;
  min-width: 0 !important;
  max-width: 116px !important;
  justify-self: end !important;
}

.learn-body:not(.explain-collapsed):not(.chat-collapsed) #webSearchToggleBtnLearn {
  grid-area: web !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  justify-self: start !important;
}

.learn-body[data-panel-focus="qa-wide"] .learn-followup-bar,
.learn-body[data-panel-focus="qa-full"] .learn-followup-bar {
  width: min(74%, 1060px) !important;
  max-width: 1060px !important;
  margin-inline: auto !important;
}


/* Final override: chapter maps are single-column notebook pages,
 never split panels. */

.learn-body.chapter-overview-active .learn-book-col,

.learn-body.chapter-overview-active .learn-chat-col,

.learn-body.chapter-overview-active .learn-resizer,

.learn-body.chapter-overview-active .learn-explain-toolbar,

.learn-body.chapter-overview-active .learn-chat-fab{
  display: none !important;
}


.learn-body.chapter-overview-active .learn-explain-scroll,
.learn-body.chapter-overview-active .learn-explain-content {
  width: 100% !important;
  max-width: none !important;
}

/* Final split override: overview lessons keep both side buttons and a full-width Q&A composer. */
.learn-body.chapter-overview-split-active {
  position: relative !important;
}

.learn-body.chapter-overview-split-active .learn-body-inner {
  display: flex !important;
  grid-template-columns: none !important;
}

.learn-body.chapter-overview-split-active .learn-book-col {
  display: none !important;
}

.learn-body.chapter-overview-split-active .learn-explain-toolbar{
  display: block !important;
  position: static !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 100 !important;
}

.learn-body.chapter-overview-split-active .learn-explain-col,
.learn-body.chapter-overview-split-active .learn-chat-col {
  display: flex !important;
  min-width: 0 !important;
}

.learn-body.chapter-overview-split-active .learn-explain-col {
  border-right: 1px solid var(--border) !important;
}

.learn-body.chapter-overview-split-active .learn-resizer {
  display: block !important;
}

.learn-body.chapter-overview-split-active .learn-chat-col {
  align-items: stretch !important;
}

.learn-body.chapter-overview-split-active .learn-chat-scroll {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.learn-body.chapter-overview-split-active .learn-chat-empty-state {
  box-sizing: border-box !important;
  width: calc(100% - 30px) !important;
  max-width: none !important;
  margin-inline: 15px !important;
}

.learn-body.chapter-overview-split-active .learn-followup-bar,
.learn-body[data-panel-focus="normal"] .learn-chat-col .learn-followup-bar,
.learn-body[data-panel-focus="qa-wide"] .learn-followup-bar,
.learn-body[data-panel-focus="qa-full"] .learn-followup-bar {
  box-sizing: border-box !important;
  width: calc(100% - 24px) !important;
  max-width: calc(100% - 24px) !important;
  margin: 0 12px 16px !important;
}

.learn-body.chapter-overview-split-active .learn-followup-bar .followup-bar-row,
.learn-body[data-panel-focus="normal"] .learn-chat-col .learn-followup-bar .followup-bar-row {
  width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: 44px minmax(0, 1fr) 48px !important;
  grid-template-areas:
    "attach input send"
    ". mode web" !important;
}

.learn-body[data-panel-focus="qa-wide"] .learn-followup-bar .followup-bar-row,
.learn-body[data-panel-focus="qa-full"] .learn-followup-bar .followup-bar-row {
  width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: 48px minmax(0, 1fr) 118px 100px 48px !important;
  grid-template-areas:
    "attach input input input send"
    ". . mode web ." !important;
}

.learn-body.chapter-overview-split-active .learn-followup-input,
.learn-body[data-panel-focus="normal"] .learn-chat-col .learn-followup-input,
.learn-body[data-panel-focus="qa-wide"] .learn-followup-input,
.learn-body[data-panel-focus="qa-full"] .learn-followup-input {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* FINAL CHAPTER OVERVIEW FULL-WIDTH OVERRIDE */
.learn-body.chapter-overview-active,
.learn-body.chapter-overview-active .learn-body-inner,
.learn-body.chapter-overview-active .learn-explain-col,
.learn-body.chapter-overview-active .learn-explain-scroll,
.learn-body.chapter-overview-active .learn-explain-body,
.learn-body.chapter-overview-active .chapter-overview-shell,
.learn-body.chapter-overview-active .chapter-overview-map {
  box-sizing: border-box !important;
}

.learn-body.chapter-overview-active .learn-body-inner {
  display: block !important;
  grid-template-columns: none !important;
  width: 100% !important;
}

.learn-body.chapter-overview-active .learn-book-col,

.learn-body.chapter-overview-active .learn-chat-col,

.learn-body.chapter-overview-active .learn-resizer,

.learn-body.chapter-overview-active .learn-explain-toolbar,

.learn-body.chapter-overview-active .learn-chat-fab,

.learn-body.chapter-overview-active .learn-followup-bar {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.learn-body.chapter-overview-active .learn-explain-col {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 100% !important;
  border-right: 0 !important;
  transform: none !important;
  opacity: 1 !important;
}

.learn-body.chapter-overview-active .learn-explain-scroll {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(26px, 3vw, 42px) clamp(30px, 5vw, 72px) 48px !important;
  overflow-x: hidden !important;
}

.learn-body.chapter-overview-active .learn-explain-body {
  width: 100% !important;
  max-width: none !important;
  min-height: 100% !important;
  display: block !important;
}

.learn-body.chapter-overview-active .chapter-overview-shell {
  width: min(100%, 1480px) !important;
  max-width: 1480px !important;
  margin: 0 auto !important;
  padding: 4px 0 44px !important;
}

.learn-body.chapter-overview-active .chapter-overview-map {
  width: 100% !important;
  min-height: clamp(520px, calc(100vh - 210px), 760px) !important;
  display: grid !important;
  grid-template-columns: minmax(360px, 0.88fr) minmax(420px, 1.12fr) !important;
  gap: clamp(34px, 5vw, 70px) !important;
  padding: clamp(30px, 4vw, 56px) clamp(34px, 5vw, 72px) !important;
  align-items: center !important;
}

.learn-body.chapter-overview-active .chapter-overview-hero {
  min-height: clamp(390px, 48vh, 560px) !important;
}

.learn-body.chapter-overview-active .chapter-overview-list-block {
  width: 100% !important;
  max-width: 680px !important;
  justify-self: stretch !important;
}

.learn-body.chapter-overview-active .chapter-overview-grid {
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}

.learn-body.chapter-overview-active .chapter-overview-subcard {
  min-height: 76px !important;
  padding: 14px 18px 14px 14px !important;
}

.learn-body.chapter-overview-active .chapter-overview-subcard-title {
  font-size: 17px !important;
}

@media (max-width: 980px) {
  .learn-body.chapter-overview-active .chapter-overview-map {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
}

/* FINAL ID-LEVEL CHAPTER OVERVIEW WIDTH LOCK */
#learnBody.chapter-overview-active .learn-body-inner {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: none !important;
}

#learnBody.chapter-overview-active #learnExplainCol {
  display: flex !important;
  flex: 1 1 100% !important;
  flex-basis: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  border-right: 0 !important;
  transform: none !important;
  opacity: 1 !important;
}

#learnBody.chapter-overview-active #learnBookCol,

#learnBody.chapter-overview-active #learnChatCol,

#learnBody.chapter-overview-active #learnResizer,

#learnBody.chapter-overview-active #learnExplainToolbar,

#learnBody.chapter-overview-active .learn-followup-bar{
  display: none !important;
  visibility: hidden !important;
  flex: 0 0 0 !important;
  width: 0 !important;
  max-width: 0 !important;
  min-width: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

#learnBody.chapter-overview-active #learnExplainScroll {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(26px, 3vw, 42px) clamp(30px, 5vw, 72px) 48px !important;
}

#learnBody.chapter-overview-active #learnExplainContent {
  width: 100% !important;
  max-width: none !important;
  min-height: 100% !important;
}

#learnBody.chapter-overview-active .chapter-overview-shell {
  width: min(100%, 1480px) !important;
  max-width: 1480px !important;
  margin: 0 auto !important;
  padding: 4px 0 44px !important;
}

#learnBody.chapter-overview-active .chapter-overview-map {
  width: 100% !important;
  min-height: clamp(520px, calc(100vh - 210px), 760px) !important;
  display: grid !important;
  grid-template-columns: minmax(360px, 0.88fr) minmax(420px, 1.12fr) !important;
  gap: clamp(34px, 5vw, 70px) !important;
  padding: clamp(30px, 4vw, 56px) clamp(34px, 5vw, 72px) !important;
  align-items: center !important;
}

#learnBody.chapter-overview-active .chapter-overview-hero {
  min-height: clamp(390px, 48vh, 560px) !important;
}

#learnBody.chapter-overview-active .chapter-overview-list-block {
  width: 100% !important;
  max-width: 680px !important;
  justify-self: stretch !important;
}

#learnBody.chapter-overview-active .chapter-overview-subcard {
  min-height: 76px !important;
}

@media (max-width: 980px) {
  #learnBody.chapter-overview-active .chapter-overview-map {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
}

/* FINAL MORE LECTURE TAB PARITY TRUE EOF LOCK
   Match the left progressive control to the compact right-side More Q&A tab. */
#learnBody:not(.chapter-overview-active) #learnExplainCol {
  position: relative !important;
}


#learnBody:not(.chapter-overview-active) #learnExplainToolbar .learn-toolbar-center {
  grid-column: 1 !important;
  max-width: 100% !important;
}

@container lecture-panel (max-width: 820px) {
  #learnBody:not(.chapter-overview-active) #learnExplainToolbar {
    padding: 72px 18px 14px !important;
  }
}

/* TRUE EOF CHAPTER OVERVIEW SUBSECTIONS: Gemini-planned scrapbook journal buttons. */
#learnBody.chapter-overview-active .chapter-overview-list-block-side,
#learnBody.chapter-overview-active .chapter-overview-list-block {
  min-height: 0 !important;
}

#learnBody.chapter-overview-active .chapter-overview-list-block-side {
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  max-height: min(720px, calc(100vh - 220px)) !important;
  padding: 4px 4px 8px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#learnBody.chapter-overview-active .chapter-overview-list-head {
  flex: 0 0 auto !important;
  margin-bottom: 16px !important;
  padding: 0 2px 10px !important;
  border-bottom: 1px dashed rgba(148, 163, 184, 0.42) !important;
}

#learnBody.chapter-overview-active .chapter-overview-list-title {
  display: inline-block !important;
  margin: 0 !important;
  font-family: "Bricolage Grotesque", "Quicksand", sans-serif !important;
  font-size: 30px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  color: #1e293b !important;
  background: linear-gradient(180deg, transparent 54%, rgba(125, 211, 252, 0.48) 54%) !important;
  padding: 0 6px 2px !important;
}

#learnBody.chapter-overview-active .chapter-overview-list-eyebrow,
#learnBody.chapter-overview-active .chapter-overview-count {
  font-family: "DM Mono", monospace !important;
  color: rgba(71, 85, 105, 0.72) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

#learnBody.chapter-overview-active .chapter-overview-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 13px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding: 9px 12px 14px 4px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(125, 211, 252, 0.7) transparent !important;
}

#learnBody.chapter-overview-active .chapter-overview-grid::-webkit-scrollbar {
  width: 8px !important;
}

#learnBody.chapter-overview-active .chapter-overview-grid::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: rgba(125, 211, 252, 0.66) !important;
  border: 2px solid rgba(253, 251, 247, 0.92) !important;
}

#learnBody.chapter-overview-active .chapter-overview-subcard.chapter-overview-subrow {
  position: relative !important;
  width: 100% !important;
  min-height: 74px !important;
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) 32px !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px 11px 14px !important;
  border: 2px solid rgba(30, 41, 59, 0.76) !important;
  border-radius: 12px 16px 12px 15px !important;
  background:
    linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(148, 163, 184, 0.07) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(253, 251, 247, 0.96)) !important;
  background-size: 22px 22px, 22px 22px, auto !important;
  box-shadow: 3px 3px 0 rgba(30, 41, 59, 0.72), 0 12px 24px rgba(15, 23, 42, 0.06) !important;
  color: #1e293b !important;
  cursor: pointer !important;
  overflow: visible !important;
  transform: rotate(-0.45deg) !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background-color 0.16s ease !important;
}

#learnBody.chapter-overview-active .chapter-overview-subcard.chapter-overview-subrow:nth-child(even) {
  transform: rotate(0.42deg) !important;
}

#learnBody.chapter-overview-active .chapter-overview-subcard.chapter-overview-subrow:nth-child(3n) {
  transform: rotate(-0.18deg) !important;
}

#learnBody.chapter-overview-active .chapter-overview-subcard.chapter-overview-subrow::before {
  content: none !important;
}

#learnBody.chapter-overview-active .chapter-overview-subcard.chapter-overview-subrow::after {
  content: none !important;
  display: none !important;
}

#learnBody.chapter-overview-active .chapter-overview-subcard.chapter-overview-subrow:hover,
#learnBody.chapter-overview-active .chapter-overview-subcard.chapter-overview-subrow:focus-visible {
  border-color: #2563eb !important;
  box-shadow: 4px 4px 0 rgba(30, 41, 59, 0.86), 0 16px 30px rgba(37, 99, 235, 0.12) !important;
  transform: translate(-2px, -2px) rotate(0deg) !important;
  outline: none !important;
}

#learnBody.chapter-overview-active .chapter-overview-subcard-marker {
  position: relative !important;
  z-index: 1 !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  justify-self: start !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  color: #0f172a !important;
  font-family: "Quicksand", "Nunito", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  box-shadow: none !important;
  transform: none !important;
}

#learnBody.chapter-overview-active .chapter-overview-subcard-marker::before {
  content: none !important;
  display: none !important;
}

#learnBody.chapter-overview-active .chapter-overview-subcard-copy {
  position: relative !important;
  z-index: 1 !important;
  min-width: 0 !important;
  display: block !important;
}

#learnBody.chapter-overview-active .chapter-overview-subcard-title {
  position: relative !important;
  z-index: 1 !important;
  display: inline !important;
  font-family: "Quicksand", "Nunito", sans-serif !important;
  font-size: 16px !important;
  line-height: 1.26 !important;
  font-weight: 850 !important;
  color: #0f172a !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere !important;
}

#learnBody.chapter-overview-active .chapter-overview-open-cue {
  position: relative !important;
  z-index: 1 !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 2px solid rgba(30, 41, 59, 0.9) !important;
  background: #fdfbf7 !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow: 2px 2px 0 rgba(30, 41, 59, 0.84) !important;
}

#learnBody.chapter-overview-active .chapter-overview-open-cue::after {
  content: "→" !important;
  color: #1e293b !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 900px) {
  #learnBody.chapter-overview-active .chapter-overview-list-block-side {
    max-height: none !important;
  }

  #learnBody.chapter-overview-active .chapter-overview-grid {
    max-height: min(520px, 62vh) !important;
    padding-right: 8px !important;
  }

  #learnBody.chapter-overview-active .chapter-overview-subcard.chapter-overview-subrow {
    grid-template-columns: 68px minmax(0, 1fr) 30px !important;
    min-height: 78px !important;
    padding: 13px 13px 12px 11px !important;
  }

  #learnBody.chapter-overview-active .chapter-overview-subcard-marker {
    width: 58px !important;
    min-width: 58px !important;
    height: 44px !important;
    font-size: 11px !important;
  }

  #learnBody.chapter-overview-active .chapter-overview-subcard-title {
    font-size: 15px !important;
  }
}

/* FINAL LEFT LECTURE TOOLBAR JOURNAL ROW
   Keep More Lecture, page arrows, and Lecture/Textbook in one hand-journal row. */
#learnBody:not(.chapter-overview-active) #learnExplainToolbar {
  align-items: center !important;
  justify-content: center !important;
}

#learnBody:not(.chapter-overview-active) #learnExplainToolbar .learn-view-selector {
  justify-self: stretch !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}


@container lecture-panel (max-width: 720px) {
  #learnBody:not(.chapter-overview-active) #learnExplainToolbar {
    grid-template-columns: minmax(104px, 112px) 38px minmax(132px, 1fr) 38px !important;
    column-gap: 6px !important;
    padding-inline: 10px !important;
  }

  #learnBody:not(.chapter-overview-active) #learnExplainToolbar .learn-view-btn {
    padding-inline: 9px !important;
    font-size: 13px !important;
  }
}

@container lecture-panel (max-width: 520px) {
  #learnBody:not(.chapter-overview-active) #learnExplainToolbar {
    grid-template-columns: 38px 34px minmax(116px, 1fr) 34px !important;
    column-gap: 5px !important;
    padding-inline: 8px !important;
  }

  #learnBody:not(.chapter-overview-active) #learnExplainToolbar .learn-view-btn {
    padding-inline: 7px !important;
    font-size: 12px !important;
  }
}

/* FINAL LEFT TOOLBAR CONTAINER + TIGHT FIT PATCH */
#learnBody:not(.chapter-overview-active) #learnExplainCol {
  container-type: inline-size !important;
  container-name: lecture-panel !important;
}

#learnBody:not(.chapter-overview-active) #learnExplainToolbar {
  padding-inline: 10px !important;
}


@container lecture-panel (max-width: 620px) {

  #learnBody:not(.chapter-overview-active) #learnExplainToolbar .learn-view-btn {
    padding-inline: 7px !important;
    font-size: 12px !important;
  }
}

/* FINAL LESSON SPLIT FILL LOCK */
#learnBody:not(.chapter-overview-active) #learnBookCol {
  display: none !important;
  flex: 0 0 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

#learnBody:not(.chapter-overview-active) .learn-body-inner {
  display: flex !important;
  grid-template-columns: none !important;
  width: 100% !important;
  max-width: none !important;
}

#learnBody:not(.chapter-overview-active) #learnExplainCol,
#learnBody:not(.chapter-overview-active) #learnChatCol {
  min-width: 0 !important;
  max-width: none !important;
}


#learnBody[data-panel-focus="lecture-wide"]:not(.chapter-overview-active) #learnExplainCol {
  flex: 0 0 calc(72% - 11px) !important;
  width: calc(72% - 11px) !important;
  max-width: calc(72% - 11px) !important;
}

#learnBody[data-panel-focus="lecture-wide"]:not(.chapter-overview-active) #learnChatCol {
  flex: 0 0 calc(28% - 11px) !important;
  width: calc(28% - 11px) !important;
  max-width: calc(28% - 11px) !important;
  min-width: 260px !important;
}

#learnBody[data-panel-focus="qa-wide"]:not(.chapter-overview-active) #learnExplainCol {
  flex: 0 0 calc(30% - 11px) !important;
  width: calc(30% - 11px) !important;
  max-width: calc(30% - 11px) !important;
  min-width: 300px !important;
}

#learnBody[data-panel-focus="qa-wide"]:not(.chapter-overview-active) #learnChatCol {
  flex: 0 0 calc(70% - 11px) !important;
  width: calc(70% - 11px) !important;
  max-width: calc(70% - 11px) !important;
}

#learnBody[data-panel-focus="lecture-full"]:not(.chapter-overview-active) #learnExplainCol,
#learnBody[data-panel-focus="qa-full"]:not(.chapter-overview-active) #learnChatCol {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}

#learnBody[data-panel-focus="lecture-full"]:not(.chapter-overview-active) #learnChatCol,
#learnBody[data-panel-focus="qa-full"]:not(.chapter-overview-active) #learnExplainCol {
  flex: 0 0 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* FINAL LEFT PROGRESSIVE BUTTON TEXT LOCK */
#learnBody:not(.chapter-overview-active) #learnExplainToolbar {
  column-gap: 8px !important;
}

@container lecture-panel (max-width: 620px) {
  #learnBody:not(.chapter-overview-active) #learnExplainToolbar {
    grid-template-columns: minmax(126px, 148px) 34px minmax(136px, 1fr) 34px !important;
    column-gap: 5px !important;
  }
}

/* FINAL CHAPTER CODE AS TITLE LINE */
#learnBody.chapter-overview-active .chapter-overview-kicker {
  display: block !important;
  margin: 0 0 12px !important;
  font-family: inherit !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#learnBody.chapter-overview-active .chapter-overview-code {
  display: block !important;
  width: fit-content !important;
  min-height: 0 !important;
  padding: 0 3px 1px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: #0F172A !important;
  font-family: "Quicksand", "Nunito", sans-serif !important;
  font-size: clamp(38px, 4vw, 60px) !important;
  font-weight: 900 !important;
  line-height: 1.06 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* FINAL EDGE CONTROLS + PRELUDE SUBSECTION PARITY
   Keep progressive controls pinned to their panel edges, clean up page arrows,
   and make parent-prelude subsections match the full overview card language. */
#learnBody:not(.chapter-overview-active) .learn-body-inner {
  gap: 0 !important;
}

#learnBody[data-panel-focus="normal"]:not(.chapter-overview-active) #learnExplainCol {
  flex: 0 0 calc(var(--learn-explain-basis, 55%) - 11px) !important;
  width: calc(var(--learn-explain-basis, 55%) - 11px) !important;
  max-width: calc(var(--learn-explain-basis, 55%) - 11px) !important;
}

#learnBody[data-panel-focus="normal"]:not(.chapter-overview-active) #learnChatCol {
  flex: 0 0 calc(var(--learn-chat-basis, 45%) - 11px) !important;
  width: calc(var(--learn-chat-basis, 45%) - 11px) !important;
  max-width: calc(var(--learn-chat-basis, 45%) - 11px) !important;
}

#learnBody:not(.chapter-overview-active) #learnExplainCol,
#learnBody:not(.chapter-overview-active) #learnChatCol {
  position: relative !important;
}

#learnBody:not(.chapter-overview-active) #learnExplainToolbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 24 !important;
  left: 0 !important;
  right: 0 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: 88px !important;
  padding: 16px clamp(74px, 8vw, 118px) 16px !important;
  overflow: visible !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.9)) !important;
  backdrop-filter: blur(8px) !important;
  border-bottom: 1px solid rgba(203, 213, 225, 0.72) !important;
}

#learnBody:not(.chapter-overview-active) #learnExplainToolbar .learn-toolbar-center {
  display: grid !important;
  grid-template-columns: 42px minmax(170px, 260px) 42px !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: center !important;
  gap: 12px !important;
  width: min(100%, 390px) !important;
}

#learnBody:not(.chapter-overview-active) .learn-edge-toggle-label {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  max-width: none !important;
  color: inherit !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

#learnBody:not(.chapter-overview-active) .learn-edge-toggle-icon {
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  border: 2px solid #60a5fa !important;
  background: #eff6ff !important;
  color: #2563eb !important;
  box-shadow: none !important;
}#learnBody:not(.chapter-overview-active) #learnExplainToolbar .learn-view-selector {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  border-radius: 22px !important;
}

#learnBody:not(.chapter-overview-active) #learnExplainToolbar .learn-view-btn {
  min-width: 0 !important;
  padding-inline: 12px !important;
  font-size: 14px !important;
  white-space: nowrap !important;
}

#learnBody.chapter-overview-split-active .chapter-overview-list-block-side,
#learnBody.chapter-overview-split-active .chapter-overview-list-block {
  min-height: 0 !important;
  padding: 4px 4px 8px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#learnBody.chapter-overview-split-active .chapter-overview-list-block-side {
  display: flex !important;
  flex-direction: column !important;
  max-height: min(560px, calc(100vh - 360px)) !important;
}

#learnBody.chapter-overview-split-active .chapter-overview-list-head {
  flex: 0 0 auto !important;
  margin-bottom: 16px !important;
  padding: 0 2px 10px !important;
  border-bottom: 1px dashed rgba(148, 163, 184, 0.42) !important;
}

#learnBody.chapter-overview-split-active .chapter-overview-list-title {
  display: inline-block !important;
  margin: 0 !important;
  font-family: "Bricolage Grotesque", "Quicksand", sans-serif !important;
  font-size: 30px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  color: #1e293b !important;
  background: linear-gradient(180deg, transparent 54%, rgba(125, 211, 252, 0.48) 54%) !important;
  padding: 0 6px 2px !important;
}

#learnBody.chapter-overview-split-active .chapter-overview-list-eyebrow {
  font-family: "DM Mono", monospace !important;
  color: rgba(71, 85, 105, 0.72) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

#learnBody.chapter-overview-split-active .chapter-overview-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 13px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding: 9px 12px 14px 4px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(125, 211, 252, 0.7) transparent !important;
}

#learnBody.chapter-overview-split-active .chapter-overview-subcard.chapter-overview-subrow {
  position: relative !important;
  width: 100% !important;
  min-height: 74px !important;
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) 32px !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px 11px !important;
  border: 2px solid rgba(30, 41, 59, 0.76) !important;
  border-radius: 12px 16px 12px 15px !important;
  background:
    linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(148, 163, 184, 0.07) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(253, 251, 247, 0.96)) !important;
  background-size: 22px 22px, 22px 22px, auto !important;
  box-shadow: 3px 3px 0 rgba(30, 41, 59, 0.72), 0 12px 24px rgba(15, 23, 42, 0.06) !important;
  color: #1e293b !important;
  cursor: pointer !important;
  overflow: visible !important;
  transform: rotate(-0.45deg) !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease !important;
}

#learnBody.chapter-overview-split-active .chapter-overview-subcard.chapter-overview-subrow:nth-child(even) {
  transform: rotate(0.42deg) !important;
}

#learnBody.chapter-overview-split-active .chapter-overview-subcard.chapter-overview-subrow::before,
#learnBody.chapter-overview-split-active .chapter-overview-subcard.chapter-overview-subrow::after {
  content: none !important;
  display: none !important;
}

#learnBody.chapter-overview-split-active .chapter-overview-subcard.chapter-overview-subrow:hover,
#learnBody.chapter-overview-split-active .chapter-overview-subcard.chapter-overview-subrow:focus-visible {
  border-color: #2563eb !important;
  box-shadow: 4px 4px 0 rgba(30, 41, 59, 0.86), 0 16px 30px rgba(37, 99, 235, 0.12) !important;
  transform: translate(-2px, -2px) rotate(0deg) !important;
  outline: none !important;
}

#learnBody.chapter-overview-split-active .chapter-overview-subcard-marker {
  position: relative !important;
  z-index: 1 !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  justify-self: start !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #0f172a !important;
  font-family: "Quicksand", "Nunito", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  box-shadow: none !important;
  transform: none !important;
}

#learnBody.chapter-overview-split-active .chapter-overview-subcard-copy {
  position: relative !important;
  z-index: 1 !important;
  min-width: 0 !important;
  display: block !important;
}

#learnBody.chapter-overview-split-active .chapter-overview-subcard-title {
  position: relative !important;
  z-index: 1 !important;
  display: inline !important;
  font-family: "Quicksand", "Nunito", sans-serif !important;
  font-size: 16px !important;
  line-height: 1.26 !important;
  font-weight: 850 !important;
  color: #0f172a !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere !important;
}

#learnBody.chapter-overview-split-active .chapter-overview-open-cue {
  position: relative !important;
  z-index: 1 !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 2px solid rgba(30, 41, 59, 0.9) !important;
  background: #fdfbf7 !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow: 2px 2px 0 rgba(30, 41, 59, 0.84) !important;
}

#learnBody.chapter-overview-split-active .chapter-overview-open-cue::after {
  content: "→" !important;
  color: #1e293b !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  transform: translateY(-1px) !important;
}

@container lecture-panel (max-width: 620px) {
  #learnBody:not(.chapter-overview-active) #learnExplainToolbar {
    padding-inline: 58px !important;
  }

  #learnBody:not(.chapter-overview-active) #learnExplainToolbar .learn-toolbar-center {
    grid-template-columns: 38px minmax(128px, 1fr) 38px !important;
    gap: 7px !important;
  }
}

/* FINAL NARROW TOOLBAR FIT
   Keep the edge toggle readable while the center controls avoid it. */
@container lecture-panel (max-width: 760px) {
  #learnBody:not(.chapter-overview-active) #learnExplainToolbar {
    padding-left: 158px !important;
    padding-right: 18px !important;
  }

  #learnBody:not(.chapter-overview-active) #learnExplainToolbar .learn-toolbar-center {
    justify-self: end !important;
    width: min(100%, 286px) !important;
    grid-template-columns: 34px minmax(148px, 210px) 34px !important;
    gap: 9px !important;
  }
}

/* ABSOLUTE EOF NARROW TOOLBAR COLLISION FIX. */
#learnView #learnExplainCol {
  container-type: inline-size !important;
  container-name: lecture-panel !important;
}



@container lecture-panel (max-width: 560px) {
  #learnBody:not(.chapter-overview-active) #learnExplainToolbar {
    padding-left: 150px !important;
    padding-right: 10px !important;
  }

  #learnBody:not(.chapter-overview-active) #learnExplainToolbar .learn-toolbar-center {
    width: min(100%, 244px) !important;
    grid-template-columns: 32px minmax(118px, 172px) 32px !important;
    gap: 6px !important;
  }
}

@container lecture-panel (max-width: 440px) {
  #learnBody:not(.chapter-overview-active) #learnExplainToolbar {
    padding-left: 58px !important;
  }
}

#learnBody:not(.chapter-overview-active) #learnExplainToolbar .learn-view-selector {
  grid-column: 2 !important;
  grid-row: 1 !important;
}
/* FINAL GEMINI LOGIN SCRAPBOOK COLLAGE */
.login-view,
:root[data-theme="dark"] .login-view,
.login-view:not(.hidden),
:root[data-theme="dark"] .login-view:not(.hidden) {
  --login-ink: #111827;
  --login-paper: #fdfbf7;
  --login-paper-soft: #f4f8fb;
  --login-blue: #38bdf8;
  --login-green: #6ee7b7;
  --login-yellow: #fde047;
  --login-pink: #f9a8d4;
}

.login-view::before,
.login-view::after {
  border-radius: 0 !important;
  z-index: 1 !important;
  mix-blend-mode: multiply !important;
}

.login-view::before {
  width: 340px !important;
  height: 88px !important;
  left: -66px !important;
  top: 31vh !important;
  border: 2px solid rgba(17, 24, 39, 0.18) !important;
  transform: rotate(-13deg) !important;
}

.login-view::after {
  width: 310px !important;
  height: 104px !important;
  right: -58px !important;
  bottom: 20vh !important;
  border: 2px solid rgba(17, 24, 39, 0.18) !important;
  transform: rotate(11deg) !important;
}

.login-shell,
.login-view:not(.hidden) .login-shell {
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(34px, 5vh, 58px) clamp(28px, 7vw, 92px) !important;
  isolation: isolate !important;
}

.login-desk-collage {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.login-desk-collage-left {
  top: clamp(135px, 27vh, 310px);
}

.login-desk-collage-right {
  top: clamp(150px, 24vh, 285px);
}

.login-map-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1.45;
  border: 3px solid var(--login-ink);
  border-radius: 18px;
  background:
    linear-gradient(rgba(125, 211, 252, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 211, 252, 0.08) 1px, transparent 1px),
    rgba(255, 255, 255, 0.78);
  background-size: 22px 22px;
  box-shadow: 7px 7px 0 rgba(17, 24, 39, 0.84);
}

.login-map-card::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -15px;
  width: 112px;
  height: 28px;
  border: 2px solid var(--login-ink);
  border-radius: 4px;
  background: repeating-linear-gradient(
    -45deg,
    rgba(56, 189, 248, 0.72) 0 12px,
    rgba(110, 231, 183, 0.66) 12px 24px
  );
  transform: translateX(-50%) rotate(3deg);
}

.login-map-line {
  position: absolute;
  inset: 18px;
  color: rgba(56, 189, 248, 0.85);
  filter: drop-shadow(0 2px 0 rgba(17, 24, 39, 0.2));
}

.login-map-pin {
  position: absolute;
  z-index: 2;
  width: 27px;
  height: 27px;
  border: 4px solid #334155;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 2px 2px 0 rgba(17, 24, 39, 0.18);
}

.login-map-pin.pin-a { left: 14%; top: 24%; background: #bae6fd; }
.login-map-pin.pin-b { left: 40%; top: 55%; background: #fde68a; }
.login-map-pin.pin-c { left: 62%; top: 34%; background: #a7f3d0; }
.login-map-pin.pin-d { left: 80%; top: 66%; background: #fbcfe8; }

.login-map-caption,
.login-scrap-note,
.login-sticky-note,
.login-mini-ticket {
  font-family: "Caveat", cursive !important;
}

.login-map-caption {
  position: absolute;
  left: 24px;
  bottom: 15px;
  color: #0f172a;
  font-size: 25px;
  font-weight: 800;
  transform: rotate(-3deg);
}

.login-scrap-note {
  position: absolute;
  padding: 9px 16px;
  border: 2px solid var(--login-ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--login-ink);
  color: #0f172a;
  font-size: 22px;
  font-weight: 800;
  transform: rotate(7deg);
}

.login-sticky-note {
  position: relative;
  width: min(100%, 260px);
  min-height: 168px;
  margin-left: auto;
  padding: 26px 24px 22px;
  border: 3px solid var(--login-ink);
  border-radius: 14px;
  box-shadow: 8px 8px 0 var(--login-ink);
}

.login-sticky-note::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 58px;
  width: 118px;
  height: 28px;
  border: 2px solid var(--login-ink);
  border-radius: 4px;
  background: rgba(249, 168, 212, 0.64);
  transform: rotate(-5deg);
}

.login-sticky-note span,
.login-sticky-note strong,
.login-sticky-note em {
  display: block;
}

.login-sticky-note span {
  font-family: "Quicksand", "Nunito", sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.login-sticky-note strong {
  margin-top: 14px;
  color: #111827;
  font-size: 34px;
  line-height: 0.95;
  font-weight: 900;
}

.login-sticky-note em {
  margin-top: 12px;
  color: #334155;
  font-size: 25px;
  font-style: normal;
  font-weight: 800;
  transform: rotate(-2deg);
}

.login-mini-ticket {
  width: min(100%, 230px);
  margin: 32px auto 0 12px;
  padding: 15px 18px;
  border: 3px solid var(--login-ink);
  border-radius: 18px;
  background-size: 18px 18px;
  box-shadow: 6px 6px 0 var(--login-ink);
}

.login-mini-ticket span {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-right: 8px;
  border: 2px solid var(--login-ink);
  border-radius: 999px;
  background: #bae6fd;
  font-family: "Quicksand", "Nunito", sans-serif;
  font-size: 12px;
  font-weight: 900;
}

.login-mini-ticket b {
  display: inline-block;
  margin: 4px 6px 0 0;
  font-size: 22px;
  line-height: 1;
  color: #111827;
}

.login-tilt-wrapper,
.login-view:not(.hidden) .login-tilt-wrapper {
  max-width: 436px !important;
}

.login-tilt-wrapper::before,
.login-tilt-wrapper::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  border: 3px solid var(--login-ink);
  box-shadow: 6px 6px 0 rgba(17, 24, 39, 0.84);
}

.login-tilt-wrapper::before {
  width: 150px;
  height: 116px;
  left: -92px;
  top: 86px;
  border-radius: 12px;
  background:
    linear-gradient(rgba(56, 189, 248, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.1) 1px, transparent 1px),
    #ffffff;
  background-size: 16px 16px;
  transform: rotate(-9deg);
}

.login-tilt-wrapper::after {
  width: 128px;
  height: 92px;
  right: -78px;
  bottom: 130px;
  border-radius: 12px;
  background: #fbcfe8;
  transform: rotate(8deg);
}

.login-handwriting {
  top: -44px !important;
  left: -28px !important;
  color: #0ea5e9 !important;
  font-size: clamp(31px, 4.2vw, 43px) !important;
  text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.92) !important;
}

.login-card,
:root[data-theme="dark"] .login-card,
.login-view:not(.hidden) .login-card,
:root[data-theme="dark"] .login-view:not(.hidden) .login-card {
  background-size: 24px 24px !important;
}


.login-card::after {
  content: "member pass";
  position: absolute;
  left: 22px;
  top: 17px;
  padding: 4px 11px;
  border: 2px solid var(--login-ink);
  border-radius: 999px;
  background: rgba(110, 231, 183, 0.74);
  color: #111827;
  font-family: "Caveat", cursive;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  transform: rotate(-5deg);
}

.login-card-header {
  position: relative;
  margin-bottom: 22px !important;
  padding-top: 8px !important;
}

.login-brand-mark {
  margin: 3px auto 12px !important;
}

.login-card-title {
  font-size: 30px !important;
}

.login-card-subtitle {
  display: inline-block !important;
  padding: 2px 8px !important;
  background: linear-gradient(180deg, transparent 54%, rgba(253, 224, 71, 0.5) 54%) !important;
  transform: rotate(-0.6deg);
}

.login-sso-btn,
.login-guest-btn,
.login-submit-btn,
.login-input,
:root[data-theme="dark"] .login-view:not(.hidden) .login-input {
  border-width: 4px !important;
}

.login-sso-btn,
.login-guest-btn,
.login-submit-btn {
  min-height: 54px !important;
  box-shadow: 5px 5px 0 var(--login-ink) !important;
}

.login-submit-btn {
  background: #38bdf8 !important;
  position: relative !important;
  overflow: hidden !important;
}

.login-submit-btn::after {
  content: "";
  position: absolute;
  inset: 8px 16px auto auto;
  width: 68px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.38);
  transform: rotate(-8deg);
}

.login-divider {
  position: relative;
  margin: 8px 0 !important;
}

.login-divider span {
  padding: 0 12px !important;
  background: #ffffff !important;
  border: 2px dashed rgba(148, 163, 184, 0.52) !important;
  border-radius: 999px !important;
}

.login-footnote {
  margin: 16px auto 0 !important;
  max-width: 300px !important;
}

@media (max-width: 1180px) {
  .login-desk-collage-left,
  .login-desk-collage-right {
    opacity: 0.55;
    transform: scale(0.86);
  }

  .login-desk-collage-left {
    left: 24px;
  }

  .login-desk-collage-right {
    right: 20px;
  }
}

@media (max-width: 880px) {
  .login-desk-collage,
  .login-tilt-wrapper::before,
  .login-tilt-wrapper::after {
    display: none !important;
  }

  .login-view::before,
  .login-view::after {
    opacity: 0.48 !important;
  }

  .login-shell,
  .login-view:not(.hidden) .login-shell {
    padding-inline: 16px !important;
  }
}

@media (max-width: 560px) {
  .login-card,
  .login-view:not(.hidden) .login-card {
    padding: 42px 18px 20px !important;
    border-radius: 22px !important;
  }

  .login-card::after {
    left: 18px;
    top: 15px;
    font-size: 18px;
  }

  .login-handwriting {
    left: 4px !important;
    top: -36px !important;
    font-size: 29px !important;
  }
}

/* FINAL GEMINI LOGIN VIEWPORT SAFETY */
.login-view,
.login-view:not(.hidden) {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

@media (max-height: 850px) and (min-width: 881px) {
  .login-shell,
  .login-view:not(.hidden) .login-shell {
    align-items: flex-start !important;
    min-height: 100vh !important;
    padding-top: 56px !important;
    padding-bottom: 44px !important;
  }

  .login-tilt-wrapper,
  .login-view:not(.hidden) .login-tilt-wrapper {
    max-width: 414px !important;
  }

  .login-card,
  .login-view:not(.hidden) .login-card {
    max-width: 414px !important;
    padding: 38px 24px 20px !important;
    border-radius: 24px !important;
  }

  .login-card-header {
    margin-bottom: 16px !important;
  }

  .login-brand-mark {
    width: 58px !important;
    height: 58px !important;
    margin-bottom: 8px !important;
  }

  .login-card-title {
    font-size: 26px !important;
  }

  .login-card-subtitle {
    font-size: 13px !important;
  }

  .login-form-actions,
  .login-form {
    gap: 9px !important;
  }

  .login-sso-btn,
  .login-guest-btn,
  .login-submit-btn {
    min-height: 46px !important;
    padding-block: 9px !important;
    font-size: 14px !important;
  }

  .login-input,
  :root[data-theme="dark"] .login-view:not(.hidden) .login-input {
    padding-block: 10px !important;
    font-size: 14px !important;
  }

  .login-field {
    gap: 5px !important;
  }

  .login-divider {
    margin: 4px 0 !important;
  }

  .login-footnote {
    margin-top: 10px !important;
    font-size: 11px !important;
    line-height: 1.42 !important;
  }

  .login-signup-copy {
    font-size: 11px !important;
  }

  .login-desk-collage-left {
    top: 25vh !important;
    transform: scale(0.9);
  }

  .login-desk-collage-right {
    top: 21vh !important;
    transform: scale(0.9);
  }

  .login-handwriting {
    top: -36px !important;
  }
}

/* FINAL LOGIN COLLAGE NO-OVERLAP LOCK */
.login-desk-collage-left {
  left: max(24px, calc(50vw - 650px)) !important;
  width: clamp(250px, 21vw, 330px) !important;
  transform: rotate(-1deg) !important;
}

.login-desk-collage-right {
  right: max(24px, calc(50vw - 650px)) !important;
  width: clamp(230px, 20vw, 310px) !important;
  transform: rotate(1deg) !important;
}

.login-map-card {
  transform: rotate(-5deg) translateX(-20px) !important;
}

.login-sticky-note {
  transform: rotate(5deg) translateX(18px) !important;
}

.login-mini-ticket {
  transform: rotate(-6deg) translateX(24px) !important;
}

.login-scrap-note {
  right: -4px !important;
  bottom: -32px !important;
}

.login-tilt-wrapper::before,
.login-tilt-wrapper::after {
  display: none !important;
}

.login-tilt-wrapper,
.login-view:not(.hidden) .login-tilt-wrapper {
  z-index: 20 !important;
}

@media (max-width: 1280px) and (min-width: 881px) {
  .login-desk-collage-left {
    left: 18px !important;
    width: clamp(220px, 20vw, 280px) !important;
    opacity: 0.72 !important;
  }

  .login-desk-collage-right {
    right: 18px !important;
    width: clamp(210px, 19vw, 270px) !important;
    opacity: 0.72 !important;
  }

  .login-map-card {
    transform: rotate(-5deg) translateX(-42px) !important;
  }

  .login-sticky-note {
    transform: rotate(5deg) translateX(42px) !important;
  }

  .login-mini-ticket {
    transform: rotate(-6deg) translateX(58px) !important;
  }
}

@media (max-width: 1040px) and (min-width: 881px) {
  .login-desk-collage-left,
  .login-desk-collage-right {
    display: none !important;
  }
}

/* FINAL LOGIN LEFT-BOTTOM BALANCE SCRAP */
.login-practice-log {
  position: absolute;
  left: clamp(28px, 9vw, 116px);
  top: clamp(330px, 43vh, 520px);
  width: clamp(150px, 13vw, 210px);
  min-height: 112px;
  padding: 18px 18px 16px;
  border: 3px solid var(--login-ink);
  border-radius: 16px;
  background:
    linear-gradient(rgba(56, 189, 248, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.08) 1px, transparent 1px),
    rgba(255, 255, 255, 0.78);
  background-size: 16px 16px;
  box-shadow: 6px 6px 0 var(--login-ink);
  transform: rotate(5deg);
  opacity: 0.92;
}

.login-practice-log::before {
  content: "";
  position: absolute;
  left: 24px;
  top: -14px;
  width: 92px;
  height: 25px;
  border: 2px solid var(--login-ink);
  border-radius: 4px;
  background: repeating-linear-gradient(
    -45deg,
    rgba(249, 168, 212, 0.58) 0 12px,
    rgba(253, 224, 71, 0.42) 12px 24px
  );
  transform: rotate(-4deg);
}

.login-practice-log span {
  display: block;
  margin-bottom: 13px;
  color: #111827;
  font-family: "Caveat", cursive !important;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}

.login-practice-log i {
  display: block;
  height: 7px;
  margin: 10px 0;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.48);
}

.login-practice-log i:nth-of-type(2) {
  width: 76%;
  background: rgba(110, 231, 183, 0.5);
}

.login-practice-log i:nth-of-type(3) {
  width: 52%;
  background: rgba(253, 224, 71, 0.72);
}

@media (max-width: 1280px) and (min-width: 881px) {
  .login-practice-log {
    left: clamp(22px, 7vw, 88px);
    top: clamp(305px, 44vh, 500px);
    width: clamp(136px, 12vw, 180px);
    min-height: 98px;
    opacity: 0.82;
  }
}

/* FINAL LECTURE HEADER COMPOSITION
   More Lecture belongs under the section title; view/page controls stay centered
   over the lecture pane. */
#learnView .learn-topbar {
  position: relative !important;
  overflow: visible !important;
  z-index: 45 !important;
}

#learnView #learnBody:not(.chapter-overview-active) #learnExplainToolbar {
  justify-items: center !important;
}


/* FINAL SINGLE-LINE LEARN TOOLBAR
   User direction: More Lecture, lecture/textbook pager, and More Q&A should sit
   on one shared row. Keep the center controls compact and redraw page arrows. */
#learnView #learnBody:not(.chapter-overview-active) #learnExplainToolbar{
  min-height: 78px !important;
  height: 78px !important;
  padding: 12px 18px !important;
  box-sizing: border-box !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.91)) !important;
  border-bottom: 1px solid rgba(203, 213, 225, 0.72) !important;
  overflow: visible !important;
}

#learnView #learnBody:not(.chapter-overview-active) #learnExplainToolbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 32 !important;
  display: grid !important;
  grid-template-columns: 150px minmax(220px, 360px) 150px !important;
  align-items: center !important;
  justify-content: stretch !important;
  column-gap: 12px !important;
  width: 100% !important;
  max-width: none !important;
}

#learnView #learnBody:not(.chapter-overview-active) #learnExplainToolbar .learn-toolbar-center {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  width: min(100%, 340px) !important;
  display: grid !important;
  grid-template-columns: 42px minmax(190px, 240px) 42px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

#learnView #learnBody:not(.chapter-overview-active) #learnExplainToolbar .learn-view-selector {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 240px !important;
  height: 46px !important;
  border-radius: 18px !important;
}

#learnView #learnBody:not(.chapter-overview-active) #learnExplainToolbar .learn-view-btn {
  min-width: 0 !important;
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

@container lecture-panel (max-width: 610px) {
  #learnView #learnBody:not(.chapter-overview-active) #learnExplainToolbar {
    grid-template-columns: 44px minmax(178px, 1fr) 44px !important;
    column-gap: 8px !important;
    padding-inline: 10px !important;
  }

  #learnView #learnBody:not(.chapter-overview-active) #learnExplainToolbar .learn-toolbar-center {
    width: min(100%, 264px) !important;
    grid-template-columns: 36px minmax(142px, 180px) 36px !important;
    gap: 7px !important;
  }
}

/* FINAL Q&A CENTERLINE EMPTY STATE
   Match the requested second reference: the Q&A empty card and composer sit on
   the same centered axis inside the right panel. */
#learnView #learnBody:not(.chapter-overview-active) #learnChatCol {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

#learnView #learnBody:not(.chapter-overview-active) #learnChatCol .learn-chat-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(18px, 3vh, 28px) 0 clamp(18px, 3vh, 28px) !important;
  overflow-y: auto !important;
}

#learnView #learnBody:not(.chapter-overview-active) #learnChatCol .learn-chat-empty-state {
  width: min(82%, 560px) !important;
  max-width: 560px !important;
  min-height: clamp(420px, 58vh, 640px) !important;
  margin: 0 auto !important;
  align-self: center !important;
  justify-self: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

#learnView #learnBody:not(.chapter-overview-active) #learnChatCol .learn-chat-empty-title,
#learnView #learnBody:not(.chapter-overview-active) #learnChatCol .learn-chat-empty-copy{
  align-self: center !important;
  text-align: center !important;
}

#learnView #learnBody:not(.chapter-overview-active) #learnChatCol .learn-followup-bar {
  width: min(86%, 590px) !important;
  max-width: 590px !important;
  margin: 14px auto 20px !important;
  align-self: center !important;
  box-sizing: border-box !important;
}

#learnView #learnBody:not(.chapter-overview-active) #learnChatCol .learn-followup-bar .followup-bar-row {
  width: 100% !important;
  grid-template-columns: 56px minmax(0, 1fr) 62px !important;
  justify-content: center !important;
  align-items: center !important;
}

#learnView #learnBody:not(.chapter-overview-active) #learnChatCol .learn-followup-input {
  min-width: 0 !important;
  width: 100% !important;
}

#learnView #learnBody:not(.chapter-overview-active) #learnChatCol #answerLengthToggleLearn {
  justify-self: end !important;
}

#learnView #learnBody:not(.chapter-overview-active) #learnChatCol #webSearchToggleBtnLearn {
  justify-self: start !important;
}

@container (max-width: 430px) {
  #learnView #learnBody:not(.chapter-overview-active) #learnChatCol .learn-chat-empty-state,
  #learnView #learnBody:not(.chapter-overview-active) #learnChatCol .learn-followup-bar {
    width: calc(100% - 28px) !important;
  }
}#learnView .learn-kp-btn,
#learnView .learn-focus-nav-btn {
  position: relative !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: #fde047 !important;
  border: 3px solid #1e293b !important;
  color: #1e293b !important;
  box-shadow: 4px 4px 0 #1e293b !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  transform: none !important;
  z-index: 10 !important;
  overflow: visible !important;
  opacity: 1 !important;
  filter: none !important;
}
#learnView .learn-kp-btn::before,
#learnView .learn-focus-nav-btn::before {
  content: "" !important;
  position: absolute !important;
  inset: 3px !important;
  width: auto !important;
  height: auto !important;
  left: 3px !important;
  top: 3px !important;
  border: 2px dashed #1e293b !important;
  border-radius: 50% !important;
  background: transparent !important;
  opacity: 0.3 !important;
  transform: none !important;
  transition: transform 0.3s ease !important;
  pointer-events: none !important;
}
#learnView .learn-kp-btn::after,
#learnView .learn-focus-nav-btn::after {
  content: none !important;
  display: none !important;
}#learnView .learn-kp-btn,
#learnView .learn-focus-nav-btn {
  font-size: 24px !important;
  font-weight: 950 !important;
}
#learnView .learn-kp-btn:hover:not(:disabled),
#learnView .learn-focus-nav-btn:hover:not(:disabled) {
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0 #1e293b !important;
  background: #fdf08a !important;
}
#learnView .learn-kp-btn:hover:not(:disabled)::before,
#learnView .learn-focus-nav-btn:hover:not(:disabled)::before {
  transform: rotate(15deg) !important;
}
#learnView .learn-kp-btn:active:not(:disabled),
#learnView .learn-focus-nav-btn:active:not(:disabled) {
  transform: translate(4px, 4px) !important;
  box-shadow: 0 0 0 #1e293b !important;
}
#learnView .learn-kp-btn:disabled,
#learnView .learn-focus-nav-btn:disabled {
  background: #f1f5f9 !important;
  color: #94a3b8 !important;
  border-color: #cbd5e1 !important;
  box-shadow: 3px 3px 0 #e2e8f0 !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  filter: none !important;
}
#learnView .learn-kp-btn:disabled::before,
#learnView .learn-focus-nav-btn:disabled::before {
  border-color: #cbd5e1 !important;
}/* STAMP PAGINATION LAYOUT FIX
   The stamp shadow and hover travel are part of the control, so the toolbar
   needs larger tracks and visible overflow instead of clipping the button. */
#learnView #learnBody:not(.chapter-overview-active) #learnExplainToolbar,
#learnView #learnBody.chapter-overview-split-active #learnExplainToolbar,
#learnView #learnBody:not(.chapter-overview-active) #learnExplainToolbar .learn-toolbar-center,
#learnView #learnBody.chapter-overview-split-active #learnExplainToolbar .learn-toolbar-center {
  overflow: visible !important;
}


#learnView #learnBody:not(.chapter-overview-active) #learnExplainToolbar .stamp-page-btn:hover:not(:disabled),
#learnView #learnBody.chapter-overview-split-active #learnExplainToolbar .stamp-page-btn:hover:not(:disabled){
  background: #fff38a !important;
}

/* FINAL COMPACT LECTURE PAGER GROUP: keep stamp arrows clear of More Lecture. */
#learnView #learnBody:not(.chapter-overview-active) #learnExplainToolbar,
#learnView #learnBody.chapter-overview-split-active #learnExplainToolbar {
  display: block !important;
  position: relative !important;
  padding: 14px 24px !important;
  min-height: 104px !important;
  overflow: visible !important;
}

#learnView #learnBody:not(.chapter-overview-active) #learnExplainToolbar .learn-toolbar-center,
#learnView #learnBody.chapter-overview-split-active #learnExplainToolbar .learn-toolbar-center {
  display: grid !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 320px !important;
  max-width: 100% !important;
  grid-template-columns: 42px 220px 42px !important;
  gap: 8px !important;
  padding: 8px 8px 12px 4px !important;
  overflow: visible !important;
  align-items: center !important;
  justify-content: center !important;
  justify-items: center !important;
  z-index: 40 !important;
}

#learnView #learnBody:not(.chapter-overview-active) #learnExplainToolbar .learn-view-selector,
#learnView #learnBody.chapter-overview-split-active #learnExplainToolbar .learn-view-selector {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 224px !important;
  flex: 0 0 220px !important;
  box-sizing: border-box !important;
  justify-self: center !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}

#learnView #learnBody:not(.chapter-overview-active) #learnExplainToolbar .learn-view-btn,
#learnView #learnBody.chapter-overview-split-active #learnExplainToolbar .learn-view-btn {
  min-width: 0 !important;
  padding: 0 18px !important;
  font-size: 15px !important;
}
#learnView #learnBody:not(.chapter-overview-active) #learnExplainToolbar .stamp-page-btn:hover:not(:disabled),
#learnView #learnBody.chapter-overview-split-active #learnExplainToolbar .stamp-page-btn:hover:not(:disabled){
  transform: translate(-2px, -2px) scale(1.04) !important;
  box-shadow: 5px 5px 0 #1e293b !important;
}

#learnView #learnExplainToolbar .stamp-page-btn.is-flipping{
  transform: translate(2px, 2px) scale(0.96) !important;
  box-shadow: 1px 1px 0 #1e293b !important;
  background: #fff38a !important;
}

/* FINAL SUBSECTION CARD CLEANUP: remove the little yellow tape above B.x-y labels. */
#learnView #learnBody.chapter-overview-active .chapter-overview-subcard.chapter-overview-subrow .chapter-overview-subcard-marker::before,
#learnView #learnBody.chapter-overview-active .chapter-overview-subcard.chapter-overview-subrow .chapter-overview-subcard-marker::after,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-subcard.chapter-overview-subrow .chapter-overview-subcard-marker::before,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-subcard.chapter-overview-subrow .chapter-overview-subcard-marker::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* FINAL SUBSECTION CARD TONE: keep the selected-row border soft blue, not saturated cobalt. */
#learnView #learnBody.chapter-overview-active .chapter-overview-subcard.chapter-overview-subrow,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-subcard.chapter-overview-subrow {
  border-color: rgba(147, 197, 253, 0.95) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 252, 255, 0.96)) !important;
  background-size: auto !important;
  background-repeat: no-repeat !important;
  box-shadow: 3px 3px 0 rgba(191, 219, 254, 0.88), 0 12px 24px rgba(15, 23, 42, 0.055) !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-subcard.chapter-overview-subrow:hover,
#learnView #learnBody.chapter-overview-active .chapter-overview-subcard.chapter-overview-subrow:focus-visible,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-subcard.chapter-overview-subrow:hover,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-subcard.chapter-overview-subrow:focus-visible {
  border-color: rgba(125, 211, 252, 0.98) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(240, 249, 255, 0.97)) !important;
  background-size: auto !important;
  background-repeat: no-repeat !important;
  box-shadow: 4px 4px 0 rgba(186, 230, 253, 0.95), 0 16px 30px rgba(14, 165, 233, 0.11) !important;
}

/* FINAL TOOLBAR HITBOX ROUTING: keep B.2 tabs and pager buttons clickable. */
#learnView #learnBody:not(.chapter-overview-active) #learnExplainToolbar .learn-toolbar-center,
#learnView #learnBody.chapter-overview-split-active #learnExplainToolbar .learn-toolbar-center {
  pointer-events: none !important;
}

#learnView #learnExplainToolbar {
  position: relative !important;
  z-index: 120 !important;
  pointer-events: none !important;
  isolation: isolate !important;
}

#learnView #learnBody:not(.chapter-overview-active) #learnExplainToolbar .learn-view-selector,
#learnView #learnBody.chapter-overview-split-active #learnExplainToolbar .learn-view-selector,
#learnView #learnExplainToolbar .learn-view-selector {
  position: relative !important;
  z-index: 90 !important;
  pointer-events: auto !important;
  isolation: isolate !important;
}

#learnView #learnBody:not(.chapter-overview-active) #learnExplainToolbar .learn-view-btn,
#learnView #learnBody.chapter-overview-split-active #learnExplainToolbar .learn-view-btn,
#learnView #learnExplainToolbar .learn-view-btn {
  position: relative !important;
  z-index: 91 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* FINAL CHAPTER OVERVIEW RED PUSH PIN: replace blue tape on the map sheet. */
#learnView #learnBody.chapter-overview-active .chapter-overview-map::before,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-map::before,
.learn-body.chapter-overview-active .chapter-overview-map::before,
.learn-body.chapter-overview-split-active .chapter-overview-map::before,
.chapter-overview-map::before {
  content: "" !important;
  position: absolute !important;
  top: -18px !important;
  left: 50% !important;
  width: 34px !important;
  height: 34px !important;
  transform: translateX(-50%) rotate(-8deg) !important;
  border-radius: 50% !important;
  border: 3px solid #7f1d1d !important;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.82) 0 4px, transparent 5px),
    radial-gradient(circle at 62% 68%, rgba(127, 29, 29, 0.42) 0 9px, transparent 10px),
    linear-gradient(135deg, #fb7185 0%, #ef4444 48%, #b91c1c 100%) !important;
  box-shadow:
    0 4px 0 #7f1d1d,
    0 13px 22px rgba(127, 29, 29, 0.24),
    inset -4px -5px 8px rgba(127, 29, 29, 0.32) !important;
  pointer-events: none !important;
  z-index: 8 !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-map::after,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-map::after,
.learn-body.chapter-overview-active .chapter-overview-map::after,
.learn-body.chapter-overview-split-active .chapter-overview-map::after,
.chapter-overview-map::after {
  content: "" !important;
  position: absolute !important;
  top: 12px !important;
  left: 50% !important;
  width: 3px !important;
  height: 18px !important;
  transform: translateX(-50%) rotate(-8deg) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #7f1d1d 0%, rgba(127, 29, 29, 0.08) 100%) !important;
  box-shadow: 5px 10px 12px rgba(15, 23, 42, 0.14) !important;
  pointer-events: none !important;
  z-index: 7 !important;
}

.learn-focus-page-indicator,
.textbook-focus-page-indicator{
  min-width: 78px !important;
  padding: 9px 18px 8px !important;
  border-radius: 7px 10px 8px 6px !important;
  border: 1.5px dashed rgba(120, 81, 40, 0.58) !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.34) 0 1px, transparent 1px 13px),
    linear-gradient(180deg, #fff8d8 0%, #fff1bc 100%) !important;
  color: #7c4a12 !important;
  font-family: 'DM Mono', 'SFMono-Regular', monospace !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  box-shadow:
    0 2px 0 rgba(120, 81, 40, 0.16),
    0 13px 24px rgba(120, 81, 40, 0.13) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: rotate(-1deg) !important;
  isolation: isolate !important;
}

.learn-focus-page-indicator,
.textbook-focus-page-indicator {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.learn-focus-page-indicator::before,
.textbook-focus-page-indicator::before{
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  top: -8px !important;
  height: 11px !important;
  border-radius: 3px !important;
  background:
    linear-gradient(90deg, rgba(139, 92, 46, 0.12) 0 1px, transparent 1px 8px),
    rgba(255, 222, 143, 0.78) !important;
  box-shadow: 0 1px 3px rgba(120, 81, 40, 0.14) !important;
  transform: rotate(2deg) !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

.learn-focus-page-indicator::after,
.textbook-focus-page-indicator::after{
  content: "" !important;
  position: absolute !important;
  right: 8px !important;
  bottom: 5px !important;
  width: 10px !important;
  height: 10px !important;
  border-right: 1px solid rgba(120, 81, 40, 0.2) !important;
  border-bottom: 1px solid rgba(120, 81, 40, 0.2) !important;
  border-radius: 0 0 4px 0 !important;
  background: rgba(255, 255, 255, 0.2) !important;
  pointer-events: none !important;
}

/* FINAL JOURNAL PAGE TAG FIX: cover all page counters,

#textbookFocusPageIndicator,

#mistakePageIndicator,

#bookPageIndicator,

#quizPageIndicator {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 82px !important;
  min-height: 34px !important;
  padding: 9px 18px 8px !important;
  border-radius: 7px 10px 8px 6px !important;
  border: 1.5px dashed rgba(120, 81, 40, 0.64) !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.34) 0 1px, transparent 1px 13px),
    linear-gradient(180deg, #fff8d8 0%, #fff1bc 100%) !important;
  color: #7c4a12 !important;
  font-family: 'DM Mono', 'SFMono-Regular', monospace !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  box-shadow:
    0 2px 0 rgba(120, 81, 40, 0.16),
    0 13px 24px rgba(120, 81, 40, 0.13) !important;
  transform: rotate(-1deg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate !important;
}

#textbookFocusPageIndicator::before,

#mistakePageIndicator::before,

#bookPageIndicator::before {
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  top: -8px !important;
  height: 11px !important;
  border-radius: 3px !important;
  background:
    linear-gradient(90deg, rgba(139, 92, 46, 0.12) 0 1px, transparent 1px 8px),
    rgba(255, 222, 143, 0.78) !important;
  box-shadow: 0 1px 3px rgba(120, 81, 40, 0.14) !important;
  transform: rotate(2deg) !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

#textbookFocusPageIndicator::after,

#mistakePageIndicator::after,

#bookPageIndicator::after {
  content: "" !important;
  position: absolute !important;
  right: 8px !important;
  bottom: 5px !important;
  width: 10px !important;
  height: 10px !important;
  border-right: 1px solid rgba(120, 81, 40, 0.2) !important;
  border-bottom: 1px solid rgba(120, 81, 40, 0.2) !important;
  border-radius: 0 0 4px 0 !important;
  background: rgba(255, 255, 255, 0.2) !important;
  pointer-events: none !important;
}

/* FINAL SMOOTH WORKSPACE SIDEBAR: width glides instead of snapping open. */

.app .sidebar {
  will-change: width, flex-basis, max-width, transform, opacity;
}

.app.sidebar-collapsed .sidebar,
.app .sidebar.collapsed {
  flex-basis: 0 !important;
}

.app .sidebar-top,
.app .sidebar-nav-shell,
.app .sidebar-footer,
.app .sidebar-journal-decor {
  will-change: transform, opacity, filter;
}


.app .main {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
  transition:
    margin var(--workspace-sidebar-duration) var(--workspace-sidebar-ease),
    border-radius var(--workspace-sidebar-duration) var(--workspace-sidebar-ease),
    width var(--workspace-sidebar-duration) var(--workspace-sidebar-ease) !important;
}


@media (prefers-reduced-motion: reduce) {
  .app .sidebar,
.app .sidebar-top,
.app .sidebar-nav-shell,
.app .sidebar-footer,
.app .sidebar-journal-decor,
.app .main{
    transition-duration: 1ms !important;
  }
}

/* FINAL PAGE COUNTER STABILIZER: keep each counter's original placement,

#textbookFocusPageIndicator,

#mistakePageIndicator,

#bookPageIndicator {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-width: 74px !important;
  min-height: 32px !important;
  padding: 8px 15px 7px !important;
  border-radius: 10px 8px 11px 8px !important;
  border: 1.5px solid rgba(132, 94, 48, 0.42) !important;
  background:
    linear-gradient(90deg, rgba(132, 94, 48, 0.08) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, #fff8dd 0%, #fff0bd 100%) !important;
  color: #7c4a12 !important;
  font-family: 'DM Mono', 'SFMono-Regular', monospace !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.82) inset,
    0 2px 0 rgba(132, 94, 48, 0.16),
    0 9px 18px rgba(132, 94, 48, 0.12) !important;
  transform: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: auto !important;
}

#textbookFocusPageIndicator {
  position: fixed !important;
  right: 24px !important;
  bottom: 24px !important;
  z-index: 38 !important;
}

#mistakePageIndicator,
#bookPageIndicator {
  position: relative !important;
}

#quizPageIndicator {
  position: relative !important;
}

#textbookFocusPageIndicator::before,

#textbookFocusPageIndicator::after,

#mistakePageIndicator::before,

#mistakePageIndicator::after,

#bookPageIndicator::before,

#bookPageIndicator::after,

#quizPageIndicator::before,

#quizPageIndicator::after {
  content: none !important;
  display: none !important;
}

/* FINAL WORKSPACE SIDEBAR STABILIZER: animate one layout axis, no transform tug-of-war. */
.app {
  --workspace-sidebar-duration: 420ms;
  --workspace-sidebar-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

.app .sidebar {
  width: var(--sidebar-width) !important;
  max-width: var(--sidebar-width) !important;
  min-width: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: auto;
  overflow: hidden !important;
  transition:
    flex-basis var(--workspace-sidebar-duration) var(--workspace-sidebar-ease),
    width var(--workspace-sidebar-duration) var(--workspace-sidebar-ease),
    max-width var(--workspace-sidebar-duration) var(--workspace-sidebar-ease),
    opacity 180ms ease,
    border-color 180ms ease !important;
}

.app.sidebar-collapsed .sidebar,
.app .sidebar.collapsed {
  width: var(--sidebar-width-collapsed) !important;
  flex: 0 0 var(--sidebar-width-collapsed) !important;
  max-width: var(--sidebar-width-collapsed) !important;
  transform: none !important;
  opacity: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-right-color: var(--sidebar-border) !important;
  pointer-events: auto;
}

.app .sidebar-top,
.app .sidebar-nav-shell,
.app .sidebar-footer,
.app .sidebar-journal-decor {
  opacity: 1 !important;
  transform: translateX(0) !important;
  filter: none;
  transition:
    opacity 180ms ease 110ms,
    transform 260ms var(--workspace-sidebar-ease) 80ms !important;
}

.app.sidebar-collapsed .sidebar .sidebar-top,
.app.sidebar-collapsed .sidebar .sidebar-nav-shell,
.app.sidebar-collapsed .sidebar .sidebar-footer,
.app.sidebar-collapsed .sidebar .sidebar-journal-decor,
.app .sidebar.collapsed .sidebar-top,
.app .sidebar.collapsed .sidebar-nav-shell,
.app .sidebar.collapsed .sidebar-footer,
.app .sidebar.collapsed .sidebar-journal-decor {
  opacity: 1 !important;
  transform: none !important;
  filter: none;
  transition:
    opacity 120ms ease,
    transform 180ms var(--workspace-sidebar-ease) !important;
}

.app.sidebar-collapsed .main {
  width: auto !important;
  max-width: none !important;
  flex: 1 1 auto !important;
}

.app.sidebar-collapsed .sidebar-float-toggle,
.sidebar.collapsed ~ .main .sidebar-float-toggle {
  display: none !important;
}

/* FINAL SIDEBAR CONTENT WIDTH LOCK: reveal a full-size panel through a clipping shell. */
.app .sidebar-top,
.app .sidebar-nav-shell,
.app .sidebar-footer {
  width: var(--sidebar-width) !important;
  max-width: var(--sidebar-width) !important;
  min-width: var(--sidebar-width) !important;
  box-sizing: border-box !important;
}


.app.sidebar-collapsed .sidebar,
.app .sidebar.collapsed {
  overflow: visible !important;
  box-shadow: 10px 0 22px rgba(15, 23, 42, 0.06) !important;
}

.app.sidebar-collapsed .sidebar::after,
.app .sidebar.collapsed::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: -8px !important;
  width: 8px !important;
  height: 72px !important;
  border-radius: 0 0 8px 0 !important;
  background: #38bdf8 !important;
  box-shadow: 4px 0 16px rgba(37, 99, 235, 0.22) !important;
  pointer-events: none;
}

.app.sidebar-collapsed .sidebar .sidebar-top,
.app.sidebar-collapsed .sidebar .sidebar-nav-shell,
.app.sidebar-collapsed .sidebar .sidebar-footer,
.app .sidebar.collapsed .sidebar-top,
.app .sidebar.collapsed .sidebar-nav-shell,
.app .sidebar.collapsed .sidebar-footer {
  width: var(--sidebar-width-collapsed) !important;
  max-width: var(--sidebar-width-collapsed) !important;
  min-width: var(--sidebar-width-collapsed) !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}


.app.sidebar-collapsed .sidebar .sidebar-nav-shell,
.app .sidebar.collapsed .sidebar-nav-shell {
  align-items: center !important;
  gap: 14px !important;
  overflow: visible !important;
}

.app.sidebar-collapsed .sidebar .sidebar-footer,
.app .sidebar.collapsed .sidebar-footer {
  align-items: center !important;
  padding-bottom: 18px !important;
}

.app.sidebar-collapsed .sidebar .logo,
.app .sidebar.collapsed .logo {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.app.sidebar-collapsed .sidebar .menu-toggle,
.app .sidebar.collapsed .menu-toggle {
  order: 2;
  position: absolute !important;
  margin: 0 !important;
  border-color: #dbe6f6 !important;
}

.app.sidebar-collapsed .sidebar .menu-toggle-icon,
.app .sidebar.collapsed .menu-toggle-icon {
  transform: rotate(180deg) !important;
}


.app.sidebar-collapsed .sidebar .logo-text,
.app.sidebar-collapsed .sidebar .sidebar-nav-group-label,
.app.sidebar-collapsed .sidebar .sidebar-link > span:not(.sidebar-link-icon),
.app.sidebar-collapsed .sidebar .sidebar-settings-btn > span:not(.sidebar-settings-icon),
.app.sidebar-collapsed .sidebar .sidebar-version-row,
.app.sidebar-collapsed .sidebar .sidebar-syllabus-panel,
.app.sidebar-collapsed .sidebar .sidebar-recent-panel,
.app .sidebar.collapsed .logo-text,
.app .sidebar.collapsed .sidebar-nav-group-label,
.app .sidebar.collapsed .sidebar-link > span:not(.sidebar-link-icon),
.app .sidebar.collapsed .sidebar-settings-btn > span:not(.sidebar-settings-icon),
.app .sidebar.collapsed .sidebar-version-row,
.app .sidebar.collapsed .sidebar-syllabus-panel,
.app .sidebar.collapsed .sidebar-recent-panel {
  display: none !important;
}

.app.sidebar-collapsed .sidebar .sidebar-nav,
.app .sidebar.collapsed .sidebar-nav {
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
}

.app.sidebar-collapsed .sidebar .sidebar-link,
.app.sidebar-collapsed .sidebar .sidebar-settings-btn,
.app .sidebar.collapsed .sidebar-link,
.app .sidebar.collapsed .sidebar-settings-btn {
  width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  justify-content: center !important;
  padding: 0 !important;
  gap: 0 !important;
}

.app.sidebar-collapsed .sidebar .sidebar-settings-btn,
.app .sidebar.collapsed .sidebar-settings-btn {
  background: rgba(255, 255, 255, 0.74) !important;
}

.app.sidebar-collapsed .sidebar .sidebar-link-icon,
.app.sidebar-collapsed .sidebar .sidebar-settings-icon,
.app .sidebar.collapsed .sidebar-link-icon,
.app .sidebar.collapsed .sidebar-settings-icon {
  width: 22px !important;
  height: 22px !important;
}

.app.sidebar-collapsed .sidebar .sidebar-link-icon svg,
.app.sidebar-collapsed .sidebar .sidebar-settings-icon svg,
.app .sidebar.collapsed .sidebar-link-icon svg,
.app .sidebar.collapsed .sidebar-settings-icon svg {
  width: 20px !important;
  height: 20px !important;
}

.app.sidebar-collapsed .sidebar .sidebar-top,
.app.sidebar-collapsed .sidebar .sidebar-nav-shell,
.app.sidebar-collapsed .sidebar .sidebar-footer,
.app .sidebar.collapsed .sidebar-top,
.app .sidebar.collapsed .sidebar-nav-shell,
.app .sidebar.collapsed .sidebar-footer {
  transform: none !important;
}

.app.sidebar-collapsed .sidebar .sidebar-journal-decor,
.app .sidebar.collapsed .sidebar-journal-decor {
  opacity: 0 !important;
  transform: none !important;
}

/* FINAL SIDEBAR MOTION OVERRIDE: keep Workspace expansion smooth despite older reduced-motion overrides. */
@media (prefers-reduced-motion: reduce) {
  .app .sidebar {
    transition:
      flex-basis var(--workspace-sidebar-duration) var(--workspace-sidebar-ease),
      width var(--workspace-sidebar-duration) var(--workspace-sidebar-ease),
      max-width var(--workspace-sidebar-duration) var(--workspace-sidebar-ease),
      opacity 180ms ease,
      border-color 180ms ease !important;
  }

  .app .sidebar-top,
  .app .sidebar-nav-shell,
  .app .sidebar-footer,
  .app .sidebar-journal-decor {
    transition:
      opacity 180ms ease 110ms,
      transform 260ms var(--workspace-sidebar-ease) 80ms !important;
  }
}

/* FINAL LOGIN DECOR CLEANUP: remove requested handwriting,
pass tag,
online tag,
and tape. */
.login-handwriting,
.login-card::after{
  content: none !important;
  display: none !important;
}

/* FINAL SIDEBAR MINIMAL NAV: no hover pills, no yellow marks, only gray to black. */
.sidebar .sidebar-link,
.sidebar .sidebar-settings-btn {
  transform: none !important;
}

.sidebar .sidebar-link:hover,
.sidebar .sidebar-settings-btn:hover,
.sidebar .sidebar-link.active,
.sidebar .sidebar-settings-btn.active {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #111827 !important;
  transform: none !important;
}

.sidebar .sidebar-link::before,
.sidebar .sidebar-link::after,
.sidebar .sidebar-settings-btn::before,
.sidebar .sidebar-settings-btn::after {
  content: none !important;
  display: none !important;
}

.sidebar .sidebar-link svg,
.sidebar .sidebar-settings-btn svg,
.sidebar .sidebar-link span,
.sidebar .sidebar-settings-btn span {
  color: inherit !important;
}

.sidebar .sidebar-nav-group-label {
  border: 0 !important;
  border-radius: 0 !important;
}

.app.sidebar-collapsed .sidebar .sidebar-link,
.app.sidebar-collapsed .sidebar .sidebar-settings-btn,
.app .sidebar.collapsed .sidebar-link,
.app .sidebar.collapsed .sidebar-settings-btn {
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* FINAL AQUARIUS MARK SCALE: keep logo containers steady, shrink the mark to 83%. */
.intro-landing-new .scrap-logo-mark,
.aquarius-sticker-svg,
.aquarius-glow {
  transform: translateY(3px) scale(0.83) !important;
  transform-origin: center center !important;
}

/* FINAL AQUARIUS LOGO CLEANUP: show the supplied JPG without extra CSS shadow. */
.intro-landing-new .scrap-logo-mark,
.aquarius-sticker-svg,
.aquarius-glow,
.logo-icon.logo-icon-brand img {
  filter: none !important;
  box-shadow: none !important;
}

/* FINAL WELCOME DECOR CLEANUP: remove requested folded corner, study tag, and tip note. */
.welcome::after,
.journal-mini-label,
.journal-side-note {
  content: none !important;
  display: none !important;
}

/* FINAL SIDEBAR ACCORDIONS: Syllabus/Recent and nested course rows open by height, not display jumps. */
.sidebar-syllabus-panel,
.sidebar-recent-panel,
.syllabus-sections,
.syllabus-subsections {
  overflow: hidden !important;
  will-change: max-height, opacity, transform !important;
  transition:
    max-height 380ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 220ms ease,
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    margin 320ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.sidebar-syllabus-panel:not(.hidden),
.sidebar-recent-panel:not(.hidden) {
  display: block !important;
}

.syllabus-sections:not(.hidden),
.syllabus-subsections:not(.hidden) {
  display: flex !important;
}

.sidebar-syllabus-panel.is-animating,
.sidebar-recent-panel.is-animating,
.syllabus-sections.is-animating,
.syllabus-subsections.is-animating {
  max-height: var(--accordion-target-height, 0px);
}

/* LECTURE TOOLBAR CENTER: keep the view selector at a stable width. */
#learnView #learnExplainToolbar .learn-toolbar-center {
  grid-template-columns: minmax(170px, 252px) !important;
}

/* FINAL LEARN QA FLATTENING: last rule wins over all older panel chrome. */
#learnView #learnBody:not(.chapter-overview-active) #learnChatCol,
#learnView #learnBody.chapter-overview-split-active #learnChatCol,
#learnView #learnBody[data-panel-focus="normal"] #learnChatCol,
#learnView #learnBody[data-panel-focus="qa-wide"] #learnChatCol,
#learnView #learnBody[data-panel-focus="qa-full"] #learnChatCol,
#learnView #learnChatCol {
  background:
    radial-gradient(circle at 38% 20%, rgba(125, 211, 252, 0.5), transparent 38%),
    radial-gradient(circle at 58% 92%, rgba(110, 231, 183, 0.42), transparent 42%),
    linear-gradient(180deg, #f4f7f9 0%, #eefbf6 100%) !important;
  border: 0 !important;
  border-left: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

#learnView #learnChatCol .ambient-background {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

#learnView #learnChatCol .orb-edu-blue {
  top: -14% !important;
  left: -20% !important;
  width: 105% !important;
  height: 62% !important;
}

#learnView #learnChatCol .orb-edu-green {
  right: -22% !important;
  bottom: -18% !important;
  width: 105% !important;
  height: 58% !important;
}


/* FINAL NO-FRAME QA LOCK: everything in the right panel becomes one continuous surface. */
#learnView #learnChatCol,
#learnView #learnBody:not(.chapter-overview-active) #learnChatCol,
#learnView #learnBody.chapter-overview-split-active #learnChatCol,
#learnView #learnBody[data-panel-focus="qa-wide"] #learnChatCol,
#learnView #learnBody[data-panel-focus="qa-full"] #learnChatCol {
  background: linear-gradient(180deg, rgba(244, 247, 249, 0.98) 0%, rgba(238, 251, 246, 0.98) 100%) !important;
  background-image: none !important;
  border: 0 !important;
  border-left: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

#learnView #learnChatCol::before,
#learnView #learnChatCol::after,
#learnView #learnBody:not(.chapter-overview-active) #learnChatCol::before,
#learnView #learnBody.chapter-overview-split-active #learnChatCol::before {
  content: none !important;
  display: none !important;
}


#learnView #learnChatCol .edu-tutor-empty-inner {
  width: 100% !important;
}


/* FINAL FRAMELESS QA SURFACE: remove outer boxes and keep one continuous glass panel. */


#learnView #learnChatCol .learn-chat-empty-state,
#learnView #learnChatCol .edu-tutor-empty,
#learnView #learnChatCol .edu-tutor-empty-inner {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#learnView #learnChatCol .learn-chat-empty-state {
  padding-top: 56px !important;
  padding-bottom: 28px !important;
}


#learnView #learnChatCol .edu-tutor-actions {
  box-shadow: none !important;
}

#learnView #learnChatCol .edu-tutor-native-select,
#learnView #learnChatCol .action-chip,
#learnView #learnChatCol .edu-mode-toggle,
#learnView #learnChatCol .network-on,
#learnView #learnChatCol .network-off {
  border-radius: 999px !important;
  box-shadow: none !important;
}

/* FINAL SURFACE FLATTENING: remove the last remaining panel boxes so top-to-bottom feels continuous. */
#learnView #learnChatCol::before,
#learnView #learnChatCol::after {
  content: none !important;
  display: none !important;
}

#learnView #learnChatCol {
  border: 0 !important;
}

#learnView #learnChatScroll {
  flex: 1 1 auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 18px 10px !important;
  margin: 0 !important;
}

#learnView #learnChatCol .learn-web-section {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  margin: 0 0 18px !important;
}

#learnView #learnChatCol #learnChatEmptyState,
#learnView #learnChatCol .edu-tutor-empty-inner,
#learnView #learnChatCol .widget-icon {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}


#learnView #learnChatCol .edu-tutor-empty-inner {
  padding: 0 !important;
}

#learnView #learnChatCol .learn-followup-bar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#learnView #learnChatCol .glass-panel,
#learnView #learnChatCol .edu-tutor-composer {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}


#learnView #learnChatCol .edu-tutor-actions {
  margin-top: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}


/* =========================================================
   TUTOR AGENT GLASSMORPHISM UI OVERRIDES
   ========================================================= */

/* 设置聊天列的底层背景为浅通透色，以衬托氛围光球 */
#learnView #learnChatCol {
  background: #F4F7F9 !important;
  background-image: none !important;
  border-left: 1px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: -10px 0 30px rgba(0,0,0,0.02) !important;
  position: relative !important;
  overflow: hidden !important;
}
#learnView #learnChatCol::before { display: none !important; }

#learnView #learnChatCol > * {
  position: relative;
  z-index: 1;
}

/* 彻底重置 Empty State 样式 */
#learnView #learnChatEmptyState {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  min-height: auto !important;
  padding: 40px !important;
}

#learnView #learnChatEmptyState::before,
#learnView #learnChatEmptyState::after {
  display: none !important;
}

/* 导师徽章图标 */
#learnView .widget-icon {
  width: 58px; height: 58px; margin: 0 auto 16px auto; border-radius: 18px;
  background: linear-gradient(135deg, #E0F2FE, #BAE6FD); border: 1px solid #FFFFFF;
  box-shadow: 0 8px 16px -4px rgba(2, 132, 199, 0.15), inset 0 2px 4px rgba(255,255,255,0.8);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; color: #0284C7;
}

#learnView .empty-title {
  font-size: 26px !important; font-weight: 700 !important; margin-bottom: 8px !important;
  color: #0F172A !important; font-family: 'Quicksand', 'Nunito', sans-serif !important; border: none !important;
}

#learnView .empty-subtitle {
  font-size: 14px !important; color: #64748B !important; font-weight: 500 !important; margin-top: 0 !important;
}

/* 荧光笔标签 */
#learnView .tag-group {
  display: flex; justify-content: center; gap: 10px; margin-top: 20px; flex-wrap: wrap;
}
#learnView .edu-tag {
  font-size: 12px !important; font-weight: 600 !important; padding: 6px 14px !important; border-radius: 12px !important;
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important; font-family: 'Inter', sans-serif !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important; text-transform: none !important; letter-spacing: 0 !important;
}
#learnView .tag-formula { background: #E0F2FE !important; color: #0369A1 !important; }
#learnView .tag-screenshot { background: #F3E8FF !important; color: #6B21A8 !important; }
#learnView .tag-trap { background: #FFEDD5 !important; color: #C2410C !important; }

/* 玻璃拟态输入面板重构 */
#learnView #learnFollowupBar {
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(30px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(150%) !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 20px 40px -10px rgba(2, 132, 199, 0.08), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  border-radius: 24px !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin: 0 24px 24px !important;
  width: auto !important;
  max-width: none !important;
}

#learnView #learnFollowupBar::before,
#learnView #learnFollowupBar::after {
  display: none !important;
}

/* 打字输入区 */
#learnView .input-wrapper {
  display: flex; align-items: flex-end; gap: 10px;
  background: rgba(255, 255, 255, 0.85); border: 1px solid #E2E8F0;
  border-radius: 16px; padding: 6px 6px 6px 12px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.02), 0 4px 6px -1px rgba(0,0,0,0.02);
  transition: 0.3s ease;
}
#learnView .input-wrapper:focus-within {
  background: #FFFFFF; border-color: #7DD3FC;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.01), 0 0 0 4px rgba(2, 132, 199, 0.1);
}

#learnView .btn-clip {
  color: #94A3B8 !important; font-size: 22px !important; padding: 8px !important; border-radius: 10px !important;
  transition: 0.2s !important; border: none !important; background: transparent !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  height: 40px !important; width: 40px !important; box-shadow: none !important; margin-bottom: 2px !important;
}
#learnView .btn-clip:hover { color: #0284C7 !important; background: #E0F2FE !important; }

#learnView .input-field {
  flex: 1 !important; border: none !important; background: transparent !important; outline: none !important;
  color: #0F172A !important; font-size: 15px !important; font-weight: 500 !important; box-shadow: none !important;
  padding: 10px 0 !important; min-height: 44px !important; max-height: 120px !important; overflow-y: auto !important;
}

#learnView .btn-send {
  width: 40px !important; height: 40px !important; min-width: 40px !important; border-radius: 12px !important;
  background: #0284C7 !important; color: #FFFFFF !important; font-size: 20px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  box-shadow: 0 4px 10px rgba(2, 132, 199, 0.25) !important; transition: 0.2s !important; border: none !important;
  margin-bottom: 2px !important;
}
#learnView .btn-send:hover { background: #0369A1 !important; transform: translateY(-1px) !important; box-shadow: 0 6px 14px rgba(2, 132, 199, 0.35) !important; }
#learnView .btn-send:disabled { opacity: 0.5 !important; background: #94A3B8 !important; box-shadow: none !important; cursor: not-allowed !important; transform: none !important;}

/* 底部功能栏 (Model & Web) */
#learnView .bottom-actions { display: flex; justify-content: flex-end; gap: 8px; position: relative; }

#learnView .action-chip {
  border: 1px solid #E2E8F0 !important; background: rgba(255, 255, 255, 0.8) !important; color: #475569 !important;
  font-size: 13px !important; font-weight: 600 !important; padding: 0 16px !important; border-radius: 12px !important;
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important; height: 36px !important;
}
#learnView .action-chip:hover { background: #FFFFFF !important; color: #0284C7 !important; border-color: #BAE6FD !important; box-shadow: 0 4px 8px rgba(2, 132, 199, 0.08) !important; }

#learnView .network-on { background: #E0F2FE !important; border-color: #BAE6FD !important; color: #0284C7 !important; padding: 0 10px !important;}
#learnView .network-off { background: rgba(255, 255, 255, 0.4) !important; border-color: transparent !important; color: #94A3B8 !important; box-shadow: none !important; padding: 0 10px !important;}

/* 下拉菜单 */
#learnView .edu-mode-menu {
  position: absolute !important; bottom: calc(100% + 8px) !important; right: 46px !important; width: 220px !important;
  border: 1px solid rgba(255,255,255,1) !important; border-radius: 16px !important; background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(24px) !important; box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.02) !important;
  padding: 6px !important; opacity: 0; pointer-events: none; transform: translateY(10px) scale(0.96); transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); z-index: 100;
}
#learnView .edu-mode-menu.show { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }

#learnView .edu-mode-option {
  width: 100% !important; display: grid !important; grid-template-columns: 28px minmax(0, 1fr) !important; align-items: center !important; gap: 10px !important; padding: 10px 11px !important; border: 0 !important; border-radius: 11px !important; background: transparent !important; color: #0f172a !important; text-align: left !important; cursor: pointer !important;
}
#learnView .edu-mode-option:hover { background: rgba(15, 23, 42, 0.045) !important; }
#learnView .edu-mode-option.selected { background: #f0f9ff !important; }
#learnView .edu-mode-icon { font-size: 19px !important; text-align: center !important; }
#learnView .edu-mode-option strong { display: block !important; color: #0f172a !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1.2 !important; }
#learnView .edu-mode-option small { display: block !important; margin-top: 2px !important; color: #64748b !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1.2 !important; }

/* FINAL SIDEBAR BRAND CLEANUP: Hyperknow-style plain brand row, no card frame. */
.app .sidebar .sidebar-journal-decor {
  display: none !important;
}

.app .sidebar-top {
  padding: 24px 16px 12px !important;
  border-bottom: 0 !important;
}

.app .sidebar .logo {
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: color 0.16s ease !important;
}


.app .sidebar .menu-toggle {
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #111111 !important;
  box-shadow: none !important;
}

.app .sidebar .menu-toggle:hover {
  background: rgba(15, 23, 42, 0.055) !important;
  transform: none !important;
  box-shadow: none !important;
}

.app .sidebar .logo-icon-brand {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  transform: none !important;
  cursor: default;
}

.app .sidebar .logo-icon-brand img,
.app .sidebar .aquarius-sticker-svg {
  filter: none;
  border-radius: 50% !important;
}

.app.sidebar-collapsed .sidebar .logo-icon-brand,
.app .sidebar.collapsed .logo-icon-brand {
  cursor: pointer;
}

.app.sidebar-collapsed .sidebar .logo-icon-brand:hover,
.app .sidebar.collapsed .logo-icon-brand:hover {
  transform: translateY(-1px) !important;
}

.app .sidebar .logo-icon-brand:focus-visible {
  outline: 2px solid rgba(14, 165, 233, 0.7) !important;
  outline-offset: 4px;
}

.app .sidebar .logo-text-brand {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 23px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  color: #202124 !important;
}

.app .sidebar-nav-shell {
  gap: 0 !important;
}

.app .sidebar-nav-group-label {
  display: none !important;
}

.app .sidebar-nav {
  gap: 6px !important;
}

.app.sidebar-collapsed .sidebar .sidebar-top,
.app .sidebar.collapsed .sidebar-top {
  padding-top: 14px !important;
  padding-bottom: 10px !important;
}

.app.sidebar-collapsed .sidebar .logo,
.app .sidebar.collapsed .logo {
  width: 56px !important;
  max-width: 56px !important;
  height: 48px !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 auto !important;
  gap: 0 !important;
}

.app.sidebar-collapsed .sidebar .logo-icon-brand,
.app .sidebar.collapsed .logo-icon-brand {
  width: 40px !important;
  height: 40px !important;
}

.app.sidebar-collapsed .sidebar .menu-toggle,
.app .sidebar.collapsed .menu-toggle {
  left: 23px !important;
  bottom: 9px !important;
  width: 30px !important;
  height: 30px !important;
  border: 0 !important;
  background: transparent !important;
  color: #111111 !important;
  box-shadow: none !important;
}

/* EDU TUTOR Q&A PANEL: right-side Ask your Tutor composer, replacing the old Learn Q&A chrome. */
#learnView #learnBody:not(.chapter-overview-active) #learnChatCol,
#learnView #learnBody.chapter-overview-split-active #learnChatCol,
#learnView #learnBody[data-panel-focus="qa-wide"] #learnChatCol,
#learnView #learnBody[data-panel-focus="qa-full"] #learnChatCol {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 360px !important;
  padding: 56px clamp(22px, 3.4vw, 54px) 34px !important;
  background: #ffffff !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  font-family: "Inter", "Nunito", -apple-system, BlinkMacSystemFont, sans-serif !important;
}

#learnView #learnBody:not(.chapter-overview-active) #learnChatCol::before,
#learnView #learnBody.chapter-overview-split-active #learnChatCol::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 16% 12%, rgba(125, 211, 252, 0.22), transparent 34%),
    radial-gradient(circle at 95% 86%, rgba(110, 231, 183, 0.18), transparent 30%),
    linear-gradient(180deg, rgba(244, 247, 249, 0.3), rgba(255, 255, 255, 0.82)) !important;
  opacity: 0.86 !important;
}

#learnView #learnChatCol .qa-hero-icon,
#learnView #learnChatCol .qa-inline-icon,
#learnView #learnChatCol .qa-button-icon,
#learnView #learnChatCol .qa-caret-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  color: currentColor !important;
  line-height: 1 !important;
}


#learnView #learnChatCol .qa-inline-icon,
#learnView #learnChatCol .qa-inline-icon svg {
  width: 18px !important;
  height: 18px !important;
}

#learnView #learnChatCol .qa-button-icon {
  width: 22px !important;
  height: 22px !important;
}

#learnView #learnChatCol .qa-caret-icon {
  margin-left: 2px !important;
}

#learnView #learnChatCol .edu-tag .qa-inline-icon {
  width: 15px !important;
  height: 15px !important;
  margin-right: 6px !important;
}

#learnView #learnChatCol .learn-chat-scroll {
  position: relative !important;
  z-index: 2 !important;
  border: 1.5px solid #d2deea !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.68) !important;
  backdrop-filter: blur(30px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(150%) !important;
  box-shadow: 0 20px 40px -18px rgba(2, 132, 199, 0.14), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

#learnView #learnChatCol .learn-chat-empty-state.edu-tutor-empty {
  position: absolute !important;
  inset: 92px 34px 38px !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 0 !important;
  padding: 32px 22px !important;
  text-align: center !important;
  color: #0f172a !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

#learnView #learnChatCol .learn-chat-empty-state.edu-tutor-empty.hidden {
  display: none !important;
}

#learnView #learnChatCol .edu-tutor-empty-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 360px !important;
}

#learnView #learnChatCol .edu-tutor-icon .bubble-shadow {
  fill: #10223e !important;
}

#learnView #learnChatCol .edu-tutor-icon .bubble-face {
  fill: #f8fafc !important;
  stroke: #1e293b !important;
  stroke-width: 3px !important;
}

#learnView #learnChatCol .edu-tutor-empty h3 {
  margin: 0 0 8px !important;
  color: #0f172a !important;
  font-family: "Bricolage Grotesque", "Inter", sans-serif !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

#learnView #learnChatCol .edu-tutor-empty p {
  margin: 0 0 24px !important;
  color: #64748b !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

#learnView #learnChatCol .learn-chat-history {
  position: relative !important;
  z-index: 3 !important;
}

#learnView #learnChatCol .followup-bubble {
  border: 1px solid rgba(203, 213, 225, 0.72) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07) !important;
}

#learnView #learnChatCol .edu-tutor-composer {
  position: relative !important;
  z-index: 8 !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  border: 2px solid #38bdf8 !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(30px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(150%) !important;
  box-shadow: 0 7px 0 #93c5fd, 0 20px 40px -10px rgba(2, 132, 199, 0.12), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

#learnView #learnChatCol .edu-tutor-composer:focus-within {
  border-color: #0ea5e9 !important;
  box-shadow: 0 7px 0 #7dd3fc, 0 0 0 4px rgba(2, 132, 199, 0.1), 0 20px 40px -10px rgba(2, 132, 199, 0.16) !important;
}

#learnView #learnChatCol .edu-tutor-composer .attach-preview {
  margin: 0 0 8px !important;
}

#learnView #learnChatCol #learnFollowupInput.learn-followup-input {
  width: 100% !important;
  min-height: 48px !important;
  max-height: 112px !important;
  padding: 13px 16px !important;
  border: 2px solid #1e293b !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 4px 0 #1e293b !important;
  outline: none !important;
  resize: none !important;
  overflow-y: auto !important;
  font-family: "Inter", "Nunito", sans-serif !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
  white-space: pre-wrap !important;
}

#learnView #learnChatCol #learnFollowupInput::placeholder {
  color: #94a3b8 !important;
  font-weight: 700 !important;
}

#learnView #learnChatCol .edu-tutor-actions {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 52px !important;
  gap: 10px !important;
  margin: 12px 0 0 62px !important;
}

#learnView #learnChatCol .edu-tutor-native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#learnView #learnChatCol .edu-mode-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#learnView #learnChatCol .edu-network-toggle.network-on {
  background: #e0f2fe !important;
  color: #0284c7 !important;
}

#learnView #learnChatCol .edu-network-toggle.network-off {
  background: rgba(255, 255, 255, 0.48) !important;
  border-color: transparent !important;
  color: #94a3b8 !important;
  box-shadow: 0 3px 0 rgba(203, 213, 225, 0.75) !important;
}

#learnView #learnChatCol .edu-mode-menu {
  position: absolute !important;
  z-index: 80 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(10px) scale(0.96) !important;
  transition: opacity 0.18s ease, transform 0.18s ease !important;
}

#learnView #learnChatCol .edu-mode-menu.show {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

#learnView #learnChatCol .edu-mode-option {
  width: 100% !important;
  color: #0f172a !important;
  text-align: left !important;
  cursor: pointer !important;
}


#learnView #learnChatCol .edu-mode-icon {
  text-align: center !important;
}

#learnView #learnChatCol .edu-mode-option strong {
  display: block !important;
  color: #0f172a !important;
}

#learnView #learnChatCol .edu-mode-option small {
  display: block !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

@media (max-width: 980px) {
  #learnView #learnChatCol .learn-chat-scroll {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  #learnView #learnChatCol .learn-chat-empty-state.edu-tutor-empty {
    left: 20px !important;
    right: 20px !important;
  }

  #learnView #learnChatCol .edu-tutor-actions {
    margin-left: 0 !important;
  }
}

/* FINAL LESSON OUTER FRAME REMOVAL: keep the generated cards full-size. */
#learnView .lesson-page-frame,
#learnView #learnBody .lesson-page-frame,
#learnView #learnBody.chat-collapsed .lesson-page-frame,
.app.sidebar-collapsed #learnView #learnBody.chat-collapsed .lesson-page-frame,
.app.sidebar-collapsed #learnView #learnBody:not(.explain-collapsed) .lesson-page-frame {
  width: 100% !important;
  max-width: none !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#learnView .lesson-page-content {
  width: 100% !important;
}

/* FINAL BACKGROUND CLEANUP: remove notebook grid and dot textures from the workspace. */
html,
body,
.app,
.main,
.sidebar,
.topbar,
.welcome,
.learn-view,
.learn-body,
.learn-body-inner,
.learn-explain-col,
.learn-chat-col,
.learn-explain-scroll,
.learn-explain-body,
.settings-view,
.course-tracker-view,
.mistake-notebook-view,
.preference-view,
.answer,
.col-explain,
.col-book {
  background-image: none !important;
}

html,
body {
  background-color: #ffffff !important;
}

.app,
.main,
.learn-view,
.learn-body,
.learn-body-inner,
.learn-explain-col,
.learn-explain-scroll,
.learn-explain-body,
.welcome,
.answer {
  background: #ffffff !important;
}

.sidebar{
  background: rgba(255, 255, 255, 0.96) !important;
}

.topbar {
  background: rgba(255, 255, 255, 0.94) !important;
}

:root[data-theme="dark"] html,
:root[data-theme="dark"] body,
:root[data-theme="dark"] .app,
:root[data-theme="dark"] .main,
:root[data-theme="dark"] .sidebar,
:root[data-theme="dark"] .learn-view,
:root[data-theme="dark"] .learn-body,
:root[data-theme="dark"] .learn-body-inner,
:root[data-theme="dark"] .learn-explain-col,
:root[data-theme="dark"] .learn-explain-scroll,
:root[data-theme="dark"] .learn-explain-body{
  background-image: none !important;
}

/* LEARN_QA_DEFAULT_BUBBLE_LOCK: lecture fills the page until Q&A is opened. */
#learnBody.chat-collapsed .learn-body-inner {
  grid-template-columns: minmax(0, 1fr) !important;
}

#learnBody.chat-collapsed .learn-explain-col {
  width: 100% !important;
  max-width: none !important;
  border-right: 0 !important;
}

#learnBody.chat-collapsed .learn-chat-col,
#learnBody.chat-collapsed .learn-resizer,
#learnBody.chat-collapsed .learn-side-restore-chat {
  display: none !important;
}

#learnBody.chat-collapsed .lesson-page-frame,
.app.sidebar-collapsed #learnBody.chat-collapsed .lesson-page-frame {
  max-width: none !important;
  width: 100% !important;
}

.learn-chat-popover-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 42px !important;
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border: 2px solid #cbd5e1 !important;
  border-radius: 14px !important;
  background: #f8fafc !important;
  color: #1e293b !important;
  box-shadow: 0 4px 0 #aebacc !important;
  font-size: 22px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.learn-chat-popover-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 0 #94a3b8 !important;
}

.learn-chat-popover-actions {
  gap: 10px !important;
}

.learn-chat-popover {
  width: min(430px, calc(100vw - 32px)) !important;
  height: min(560px, calc(100vh - 150px)) !important;
  border: 3px solid #cbd5e1 !important;
  border-radius: 24px !important;
  box-shadow: 0 8px 0 #94a3b8, 0 28px 64px rgba(17, 24, 39, 0.18) !important;
}

.learn-chat-popover-head {
  min-height: 72px !important;
  padding: 14px 18px !important;
}

.learn-chat-popover-title {
  font-size: 18px !important;
  font-weight: 950 !important;
}

.learn-chat-fab {
  border: 3px solid #1e293b !important;
  background: #38bdf8 !important;
  color: #ffffff !important;
  box-shadow: 0 7px 0 #0f78aa, 0 16px 32px rgba(14, 116, 144, 0.28) !important;
  z-index: 95 !important;
}

/* LECTURE TOOLBAR CENTER: center Lecture/Textbook on the visible panel axis. */
#learnView #learnExplainCol {
  overflow: visible !important;
}

#learnView #learnBody:not(.chapter-overview-active) #learnExplainToolbar,
#learnView #learnBody.chapter-overview-split-active #learnExplainToolbar,
#learnView #learnExplainToolbar {
  pointer-events: none !important;
}

#learnView #learnBody:not(.chapter-overview-active) #learnExplainToolbar .learn-toolbar-center,
#learnView #learnBody.chapter-overview-split-active #learnExplainToolbar .learn-toolbar-center,
#learnView #learnExplainToolbar .learn-toolbar-center {
  right: auto !important;
  bottom: auto !important;
  justify-items: center !important;
  min-width: 0 !important;
}

#learnView #learnViewSelector {
  pointer-events: auto !important;
}












@container lecture-panel (max-width: 720px) {
  #learnView #learnBody:not(.chapter-overview-active) #learnExplainToolbar .learn-toolbar-center,
  #learnView #learnBody.chapter-overview-split-active #learnExplainToolbar .learn-toolbar-center,
  #learnView #learnExplainToolbar .learn-toolbar-center {
    grid-template-columns: 72px clamp(188px, 48cqi, 260px) 72px !important;
    gap: 10px !important;
    max-width: calc(100% - 112px) !important;
  }



  #learnView #learnViewSelector {
    width: clamp(188px, 48cqi, 260px) !important;
    min-width: 188px !important;
    max-width: 260px !important;
  }
}/* ABSOLUTE EOF TINY RECT PAGER LOCK: smaller black/white previous-next tabs. */
#learnView #learnExplainToolbar .learn-toolbar-center,
#learnView #learnBody:not(.chapter-overview-active) #learnExplainToolbar .learn-toolbar-center,
#learnView #learnBody.chapter-overview-split-active #learnExplainToolbar .learn-toolbar-center {
  grid-template-columns: 64px clamp(216px, 24vw, 300px) 64px !important;
}

#learnView #learnViewSelector {
  width: clamp(216px, 24vw, 300px) !important;
  min-width: 216px !important;
  max-width: 300px !important;
}






@container lecture-panel (max-width: 760px) {
  #learnView #learnExplainToolbar .learn-toolbar-center,
  #learnView #learnBody:not(.chapter-overview-active) #learnExplainToolbar .learn-toolbar-center,
  #learnView #learnBody.chapter-overview-split-active #learnExplainToolbar .learn-toolbar-center {
    grid-template-columns: 58px clamp(188px, 47cqi, 244px) 58px !important;
    gap: 9px !important;
    max-width: calc(100% - 84px) !important;
  }

  #learnView #learnViewSelector {
    width: clamp(188px, 47cqi, 244px) !important;
    min-width: 188px !important;
    max-width: 244px !important;
  }

  }
#learnView .stamp-page-btn::before {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: transparent !important;
  opacity: 0 !important;
}/* FINAL SCRAPBOOK TOOLBAR FLIP: Prev and Next flank the Lecture/Textbook tabs. */
#learnView #learnBody:not(.chapter-overview-active) #learnExplainToolbar,
#learnView #learnBody.chapter-overview-split-active #learnExplainToolbar,
#learnView #learnExplainToolbar {
  position: relative !important;
  display: grid !important;
  align-items: center !important;
  padding: 24px 28px !important;
  min-height: 112px !important;
  overflow: visible !important;
}


#learnView #learnViewSelector {
  justify-self: center !important;
  position: relative !important;
  z-index: 6 !important;
}

#learnView #learnExplainToolbar .learn-kp-nav,
#learnView #learnExplainToolbar #learnKpPrevBtn,
#learnView #learnExplainToolbar #learnKpNextBtn,
#learnView #learnExplainToolbar .stamp-page-btn#learnKpPrevBtn,
#learnView #learnExplainToolbar .stamp-page-btn#learnKpNextBtn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}















/* FINAL SCRAPBOOK TOOLBAR TIGHT LOCK: keep Prev/Next directly on both sides of the tabs. */
#learnView #learnBody:not(.chapter-overview-active) #learnExplainToolbar,
#learnView #learnBody.chapter-overview-split-active #learnExplainToolbar,
#learnView #learnExplainToolbar {
  grid-template-columns: 1fr auto auto auto 1fr !important;
  column-gap: 14px !important;
}






/* FINAL SCRAPBOOK TOOLBAR DIRECT DOM: buttons sit immediately beside the tab switcher. */
#learnView #learnBody:not(.chapter-overview-active) #learnExplainToolbar .learn-toolbar-center,
#learnView #learnBody.chapter-overview-split-active #learnExplainToolbar .learn-toolbar-center,
#learnView #learnExplainToolbar .learn-toolbar-center {
  position: absolute !important;
  left: calc(50% + 36px) !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  z-index: 70 !important;
  pointer-events: auto !important;
}

#learnView #learnViewSelector {
  grid-column: auto !important;
}






/* FINAL TOOLBAR PAGINATION ROW: place pager beside the Lecture/Textbook tabs. */
#learnView #learnExplainToolbar .learn-toolbar-center {
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  width: auto !important;
  max-width: none !important;
  padding: 6px 10px !important;
  overflow: visible !important;
}

/* FINAL FINAL TOOLBAR PAGER LOCK: override older high-specificity toolbar grids. */
#learnView #learnBody:not(.chapter-overview-active) #learnExplainToolbar .learn-toolbar-center,
#learnView #learnBody.chapter-overview-split-active #learnExplainToolbar .learn-toolbar-center,
#learnView #learnExplainToolbar .learn-toolbar-center {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  width: min(100%, 640px) !important;
  max-width: 640px !important;
  padding: 6px 10px !important;
  overflow: visible !important;
}

#learnView #learnViewSelector {
  order: 1 !important;
  flex: 0 0 auto !important;
}

/* FINAL SPLIT PAGER: page tag bottom-right, flip buttons in the tab row. */
#learnView .learn-kp-nav,
#learnView #learnKpPrevBtn,
#learnView #learnKpNextBtn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* FINAL FIXED LECTURE PAGE TAG LOCK: keep the page tag pinned to the visible lecture panel. */

#learnView #learnExplainScroll.learn-explain-scroll,
#learnView #learnExplainScroll {
  position: relative !important;
  padding-bottom: 92px !important;
}

/* LECTURE TOOLBAR CENTER: preserve spacing around the Lecture/Textbook selector. */
#learnView #learnExplainToolbar .learn-toolbar-center,
#learnView #learnBody:not(.chapter-overview-active) #learnExplainToolbar .learn-toolbar-center,
#learnView #learnBody.chapter-overview-split-active #learnExplainToolbar .learn-toolbar-center {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(12px, 1.4vw, 18px) !important;
  width: auto !important;
  max-width: calc(100% - 96px) !important;
  overflow: visible !important;
}







/* CODEx_FINAL_QA_FUSED_SURFACE_FIX: one continuous tutor surface, no stacked outer boxes. */
#learnView #learnChatCol,
#learnView #learnBody:not(.chapter-overview-active) #learnChatCol,
#learnView #learnBody.chapter-overview-split-active #learnChatCol,
#learnView #learnBody[data-panel-focus="normal"] #learnChatCol,
#learnView #learnBody[data-panel-focus="qa-wide"] #learnChatCol,
#learnView #learnBody[data-panel-focus="qa-full"] #learnChatCol {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 24px 20px 18px !important;
  background:
    radial-gradient(ellipse 120% 62% at 52% 12%, rgba(125, 211, 252, 0.42), transparent 68%),
    radial-gradient(ellipse 128% 66% at 58% 100%, rgba(110, 231, 183, 0.34), transparent 70%),
    linear-gradient(180deg, #f4f7f9 0%, #eefbf6 100%) !important;
  border: 0 !important;
  border-left: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

#learnView #learnChatCol .ambient-background {
  display: none !important;
}
#learnView #learnChatCol .learn-chat-scroll,
#learnView #learnChatCol .learn-web-section,
#learnView #learnChatCol #learnChatEmptyState,
#learnView #learnChatCol .edu-tutor-empty-inner,
#learnView #learnChatCol .learn-followup-bar,
#learnView #learnChatCol .glass-panel,
#learnView #learnChatCol .edu-tutor-composer,
#learnView #learnChatCol .followup-bubble {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#learnView #learnChatCol .learn-chat-scroll::before,
#learnView #learnChatCol .learn-chat-scroll::after,
#learnView #learnChatCol #learnChatEmptyState::before,
#learnView #learnChatCol #learnChatEmptyState::after,
#learnView #learnChatCol .learn-followup-bar::before,
#learnView #learnChatCol .learn-followup-bar::after,
#learnView #learnChatCol .edu-tutor-composer::before,
#learnView #learnChatCol .edu-tutor-composer::after,
#learnView #learnChatCol .glass-panel::before,
#learnView #learnChatCol .glass-panel::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#learnView #learnChatCol .learn-chat-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 18px 14px 8px !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

#learnView #learnChatCol #learnChatEmptyState {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 42px 0 12px !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
}

#learnView #learnChatCol .learn-followup-bar {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 14px 6px !important;
  overflow: visible !important;
}

#learnView #learnChatCol .edu-tutor-composer {
  margin-top: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

#learnView #learnChatCol .input-wrapper {
  margin: 0 !important;
  border: 1px solid rgba(226, 232, 240, 0.78) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.84) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 8px 20px rgba(15,23,42,0.045) !important;
}

#learnView #learnChatCol .bottom-actions,
#learnView #learnChatCol .edu-tutor-actions {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-top: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

#learnView #learnChatCol .action-chip,
#learnView #learnChatCol .edu-mode-toggle,
#learnView #learnChatCol .network-on,
#learnView #learnChatCol .network-off,
#learnView #learnChatCol .edu-tutor-native-select {
  box-shadow: none !important;
}

#learnView #learnChatCol .edu-mode-toggle,
#learnView #learnChatCol #webSearchToggleBtnLearn {
  height: 40px !important;
  min-height: 40px !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}


#learnView #learnChatCol #webSearchToggleBtnLearn {
  display: inline-flex !important;
}


#learnView #learnChatCol #webSearchToggleBtnLearn .qa-inline-icon {
  transform: translateY(-1px) !important;
}

#learnView #learnChatCol .edu-mode-menu {
  transform-origin: bottom right !important;
  overflow: visible !important;
}


/* CODEx_FINAL_QA_CONTROLS_MATCH_REFERENCE: remove composer focus shell and use reference dropdown/network controls. */
#learnView #learnChatCol #learnFollowupBar,
#learnView #learnChatCol #learnFollowupBar:focus,
#learnView #learnChatCol #learnFollowupBar:focus-within,
#learnView #learnChatCol .learn-followup-bar,
#learnView #learnChatCol .learn-followup-bar:focus,
#learnView #learnChatCol .learn-followup-bar:focus-within,
#learnView #learnChatCol .glass-panel,
#learnView #learnChatCol .glass-panel:focus,
#learnView #learnChatCol .glass-panel:focus-within,
#learnView #learnChatCol .edu-tutor-composer,
#learnView #learnChatCol .edu-tutor-composer:focus,
#learnView #learnChatCol .edu-tutor-composer:focus-within {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#learnView #learnChatCol .input-wrapper:focus-within {
  background: #ffffff !important;
  border-color: #7dd3fc !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.01), 0 0 0 4px rgba(2,132,199,0.1) !important;
}

#learnView #learnChatCol .edu-mode-menu {
  width: 200px !important;
  right: 48px !important;
  bottom: calc(100% + 8px) !important;
  padding: 6px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,1) !important;
  box-shadow: 0 10px 30px -5px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.02) !important;
}

#learnView #learnChatCol .edu-mode-option {
  display: flex !important;
  align-items: center !important;
  grid-template-columns: none !important;
}

#learnView #learnChatCol .edu-mode-option:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}


#learnView #learnChatCol .edu-mode-icon {
  width: 24px !important;
  min-width: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

#learnView #learnChatCol .edu-mode-option strong {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

#learnView #learnChatCol .edu-mode-option small {
  font-size: 11px !important;
  margin-top: 2px !important;
  color: #64748b !important;
}

#learnView #learnChatCol .action-chip {
  border: 1px solid transparent !important;
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#learnView #learnChatCol .edu-mode-toggle {
  background: rgba(255, 255, 255, 0.8) !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
}

#learnView #learnChatCol .edu-mode-toggle:hover {
  background: #ffffff !important;
  color: #0284c7 !important;
  border-color: #bae6fd !important;
  box-shadow: 0 4px 8px rgba(2, 132, 199, 0.08) !important;
}

#learnView #learnChatCol #webSearchToggleBtnLearn {
  width: auto !important;
  min-width: 44px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 8px 12px !important;
  border-radius: 12px !important;
}

#learnView #learnChatCol #webSearchToggleBtnLearn.network-on,
#learnView #learnChatCol .network-on {
  background: #e0f2fe !important;
  border-color: #bae6fd !important;
  color: #0284c7 !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.15) !important;
}

#learnView #learnChatCol #webSearchToggleBtnLearn.network-on:hover,
#learnView #learnChatCol .network-on:hover {
  background: #bae6fd !important;
}

#learnView #learnChatCol #webSearchToggleBtnLearn.network-off,
#learnView #learnChatCol .network-off {
  background: rgba(255, 255, 255, 0.4) !important;
  border-color: transparent !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
}

#learnView #learnChatCol #webSearchToggleBtnLearn.network-off:hover,
#learnView #learnChatCol .network-off:hover {
  background: rgba(255, 255, 255, 0.7) !important;
  color: #64748b !important;
}

#learnView #learnChatCol #webSearchToggleBtnLearn .qa-inline-icon,
#learnView #learnChatCol #learnModeCurrentIcon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  transform: none !important;
}

/* CODEx_ABSOLUTE_QA_FOCUS_FRAME_KILL: beat legacy long selectors that redraw the blue composer shell on click. */
#learnView #learnBody #learnChatCol #learnFollowupBar,
#learnView #learnBody #learnChatCol #learnFollowupBar:focus,
#learnView #learnBody #learnChatCol #learnFollowupBar:focus-within,
#learnView #learnBody:not(.explain-collapsed):not(.chat-collapsed) #learnChatCol #learnFollowupBar,
#learnView #learnBody:not(.explain-collapsed):not(.chat-collapsed) #learnChatCol #learnFollowupBar:focus-within,
#learnView #learnBody.explain-collapsed:not(.chat-collapsed) #learnChatCol #learnFollowupBar,
#learnView #learnBody.explain-collapsed:not(.chat-collapsed) #learnChatCol #learnFollowupBar:focus-within,
#learnView #learnBody[data-panel-focus="normal"] #learnChatCol #learnFollowupBar,
#learnView #learnBody[data-panel-focus="normal"] #learnChatCol #learnFollowupBar:focus-within,
#learnView #learnBody[data-panel-focus="qa-wide"] #learnChatCol #learnFollowupBar,
#learnView #learnBody[data-panel-focus="qa-wide"] #learnChatCol #learnFollowupBar:focus-within,
#learnView #learnBody[data-panel-focus="qa-full"] #learnChatCol #learnFollowupBar,
#learnView #learnBody[data-panel-focus="qa-full"] #learnChatCol #learnFollowupBar:focus-within {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* HOME_ASK_FULLSCREEN: make the entry page a full-screen tutor question workspace. */
.welcome.home-ask-workspace {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  padding: 0 !important;
}


.welcome.home-ask-workspace::before,
.welcome.home-ask-workspace::after {
  display: none !important;
}

.home-ask-ambient {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
}

.home-ask-stage {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.home-ask-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(920px, 100%) !important;
  min-height: 0 !important;
  text-align: center !important;
  color: #0f172a !important;
}

.home-ask-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 0 22px !important;
  color: #0284c7 !important;
}


.home-ask-empty h1 {
  margin: 0 !important;
  color: #0f172a !important;
  letter-spacing: 0 !important;
}

.home-ask-empty p {
  margin: 14px 0 0 !important;
  max-width: 880px !important;
  color: #64748b !important;
  letter-spacing: 0 !important;
}

.home-ask-tags {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}

.home-ask-tag {
  display: inline-flex !important;
  align-items: center !important;
  border: 2px solid rgba(255, 255, 255, 0.92) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.home-ask-tag svg {
  flex: 0 0 auto !important;
}

.home-ask-tag-formula {
  color: #0369a1 !important;
  background: rgba(239, 248, 255, 0.86) !important;
}

.home-ask-tag-screenshot {
  color: #7e22ce !important;
  background: rgba(250, 232, 255, 0.8) !important;
}

.home-ask-tag-trap {
  color: #c2410c !important;
  background: rgba(255, 237, 213, 0.82) !important;
}

.welcome.home-ask-workspace .home-ask-composer,
.welcome.home-ask-workspace #searchBox.home-ask-composer {
  align-items: stretch !important;
}

.welcome.home-ask-workspace .home-ask-input-row {
  width: 100% !important;
  flex: 0 0 auto !important;
}

.welcome.home-ask-workspace .home-ask-attach,
.welcome.home-ask-workspace .home-ask-send {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.welcome.home-ask-workspace .home-ask-attach {
  color: #94a3b8 !important;
}

.welcome.home-ask-workspace .home-ask-attach:hover {
  color: #2563eb !important;
  background: rgba(219, 234, 254, 0.6) !important;
}

.welcome.home-ask-workspace .home-ask-send {
  color: #ffffff !important;
}


.welcome.home-ask-workspace .home-ask-attach svg,
.welcome.home-ask-workspace .home-ask-send svg,
.welcome.home-ask-workspace .home-ask-web-toggle svg {
  width: 19px !important;
  height: 19px !important;
}

.welcome.home-ask-workspace #userInput.search-input {
  width: 100% !important;
  max-height: 120px !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  resize: none !important;
  overflow-y: auto !important;
  white-space: pre-wrap !important;
}


.home-ask-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  margin: 8px 0 0 !important;
}

.home-ask-select,
.home-ask-web-toggle {
  height: 34px !important;
  min-height: 34px !important;
  border: 1px solid rgba(226, 232, 240, 0.92) !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, 0.78) !important;
  color: #475569 !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}

.home-ask-select {
  min-width: 126px !important;
  padding: 0 30px 0 16px !important;
}

.home-ask-web-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 64px !important;
  padding: 0 12px !important;
}

.home-ask-web-toggle.active {
  color: #2563eb !important;
  background: rgba(239, 246, 255, 0.86) !important;
  border-color: rgba(191, 219, 254, 0.95) !important;
}

.home-ask-chips {
  display: none !important;
}

.welcome.home-ask-workspace .attach-preview {
  margin: 0 0 10px !important;
}

@media (max-width: 900px) {


  .home-ask-tags {
    gap: 10px !important;
  }

  .home-ask-tag {
    border-radius: 14px !important;
  }


  .welcome.home-ask-workspace .home-ask-input-row {
    grid-template-columns: 46px minmax(0, 1fr) 52px !important;
    gap: 10px !important;
  }


  .welcome.home-ask-workspace #userInput.search-input {
    font-size: 18px !important;
  }

  .home-ask-toolbar {
    gap: 10px !important;
  }

  .home-ask-select {
    min-width: 160px !important;
    height: 48px !important;
    min-height: 48px !important;
    font-size: 15px !important;
  }

  .home-ask-web-toggle {
    height: 48px !important;
    min-height: 48px !important;
    font-size: 15px !important;
  }
}

/* HOME_DASHBOARD_ASK_CENTER: compact center module with room for future home widgets. */

.welcome.home-ask-workspace.hidden {
  display: none !important;
}

.home-ask-ambient {
  background-size: 42px 42px !important;
}

.home-ask-stage {
  display: grid !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) !important;
  align-content: start !important;
  justify-items: center !important;
  padding: clamp(112px, 17vh, 160px) clamp(42px, 8vw, 130px) 48px !important;
}


.home-ask-empty h1 {
  font-family: "Source Serif 4", "Bricolage Grotesque", "Inter", sans-serif !important;
  font-size: clamp(26px, 2.1vw, 34px) !important;
  line-height: 1.14 !important;
  font-weight: 650 !important;
}

.home-ask-empty p {
  margin-top: 12px !important;
  font-size: clamp(13px, 0.92vw, 16px) !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
}

.home-ask-tags {
  gap: 10px !important;
  margin-top: 22px !important;
  margin-bottom: 30px !important;
}

.home-ask-tag {
  min-height: 30px !important;
  gap: 6px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  font-size: clamp(12px, 0.82vw, 14px) !important;
  font-weight: 700 !important;
}

.home-ask-tag svg {
  width: 14px !important;
  height: 14px !important;
}


.home-ask-toolbar {
  margin-top: 6px !important;
}

.home-feature-actions {
  width: min(820px, 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 12px 14px !important;
  margin-top: 26px !important;
}

.home-feature-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: 13px !important;
  background: #ffffff !important;
  color: #475569 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important;
  font-family: "Inter", "Nunito", sans-serif !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease !important;
}

.home-feature-chip:hover {
  color: #1d4ed8 !important;
  border-color: rgba(191, 219, 254, 0.95) !important;
  box-shadow: 0 7px 18px rgba(37, 99, 235, 0.08) !important;
  transform: translateY(-1px) !important;
}

.home-feature-chip svg {
  width: 17px !important;
  height: 17px !important;
  color: #3b82f6 !important;
  flex: 0 0 auto !important;
}

/* HOME_DASHBOARD_POSITION_TUNE: slightly lower composition and stronger tutor icon. */
.home-ask-stage {
  padding-top: clamp(172px, 24vh, 232px) !important;
}

.home-ask-icon {
  width: 34px !important;
  height: 34px !important;
  margin-bottom: 18px !important;
}

.home-ask-icon svg {
  width: 34px !important;
  height: 34px !important;
}

@media (max-width: 900px) {
  .home-ask-stage {
    padding: 86px 24px 36px !important;
  }

  .home-ask-empty h1 {
    font-size: 30px !important;
  }

  .home-ask-empty p {
    font-size: 14px !important;
  }

  .home-ask-tags {
    margin-top: 18px !important;
    margin-bottom: 22px !important;
  }

  .home-ask-tag {
    min-height: 30px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
  }

  .welcome.home-ask-workspace .home-ask-composer {
    border-radius: 16px !important;
    padding: 12px !important;
  }

  .welcome.home-ask-workspace .home-ask-attach,
  .welcome.home-ask-workspace .home-ask-send {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  .home-ask-select,
  .home-ask-web-toggle {
    height: 34px !important;
    min-height: 34px !important;
    font-size: 13px !important;
  }
}

/* LEARN_QA_RECTANGLE_FRAME_REMOVAL: remove the visible pale rectangle behind Ask your Tutor. */
#learnView #learnChatCol,
#learnView #learnBody #learnChatCol {
  background:
    radial-gradient(ellipse 120% 62% at 52% 12%, rgba(125, 211, 252, 0.42), transparent 68%),
    radial-gradient(ellipse 128% 66% at 58% 100%, rgba(110, 231, 183, 0.34), transparent 70%),
    linear-gradient(180deg, #f4f7f9 0%, #eefbf6 100%) !important;
}

#learnView #learnChatCol::before,
#learnView #learnChatCol::after,
#learnView #learnBody #learnChatCol::before,
#learnView #learnBody #learnChatCol::after,
#learnView #learnChatCol .learn-chat-scroll,
#learnView #learnChatCol .learn-chat-scroll::before,
#learnView #learnChatCol .learn-chat-scroll::after,
#learnView #learnChatCol #learnChatEmptyState,
#learnView #learnChatCol #learnChatEmptyState::before,
#learnView #learnChatCol #learnChatEmptyState::after,
#learnView #learnChatCol .learn-chat-empty-state,
#learnView #learnChatCol .learn-chat-empty-state::before,
#learnView #learnChatCol .learn-chat-empty-state::after,
#learnView #learnChatCol .edu-tutor-empty,
#learnView #learnChatCol .edu-tutor-empty::before,
#learnView #learnChatCol .edu-tutor-empty::after,
#learnView #learnChatCol .edu-tutor-empty-inner,
#learnView #learnChatCol .edu-tutor-empty-inner::before,
#learnView #learnChatCol .edu-tutor-empty-inner::after {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

#learnView #learnChatCol::before,
#learnView #learnChatCol::after,
#learnView #learnBody #learnChatCol::before,
#learnView #learnBody #learnChatCol::after,
#learnView #learnChatCol .learn-chat-scroll::before,
#learnView #learnChatCol .learn-chat-scroll::after,
#learnView #learnChatCol #learnChatEmptyState::before,
#learnView #learnChatCol #learnChatEmptyState::after,
#learnView #learnChatCol .learn-chat-empty-state::before,
#learnView #learnChatCol .learn-chat-empty-state::after,
#learnView #learnChatCol .edu-tutor-empty::before,
#learnView #learnChatCol .edu-tutor-empty::after,
#learnView #learnChatCol .edu-tutor-empty-inner::before,
#learnView #learnChatCol .edu-tutor-empty-inner::after {
  content: none !important;
  display: none !important;
}

/* POPOVER MENU: ULTIMATE GLASSMORPHISM (FAST/BALANCED/DETAILED) */
#learnView .edu-mode-menu,
#learnView #learnChatCol .edu-mode-menu {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}


#learnView .edu-mode-option,
#learnView #learnChatCol .edu-mode-option {
  width: 100% !important;
  display: flex !important;
  align-items: flex-start !important;
  grid-template-columns: none !important;
  border: none !important;
  background: transparent !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#learnView .edu-mode-option:hover:not(.selected),
#learnView #learnChatCol .edu-mode-option:hover:not(.selected) {
  background: rgba(241, 245, 249, 0.8) !important;
}

#learnView .edu-mode-option.selected,
#learnView #learnChatCol .edu-mode-option.selected {
  background: #f0f9ff !important;
}

#learnView .edu-mode-icon,
#learnView #learnChatCol .edu-mode-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

#learnView .edu-mode-icon i,
#learnView #learnChatCol .edu-mode-icon i {
  display: block !important;
  line-height: 1 !important;
}

#learnView .icon-fast,
#learnView #learnChatCol .icon-fast {
  color: #f59e0b !important;
}

#learnView .icon-balanced,
#learnView #learnChatCol .icon-balanced {
  color: #0284c7 !important;
}

#learnView .icon-detailed,
#learnView #learnChatCol .icon-detailed {
  color: #8b5cf6 !important;
}

#learnView .edu-mode-text,
#learnView #learnChatCol .edu-mode-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
}

#learnView .edu-mode-text strong,
#learnView #learnChatCol .edu-mode-text strong {
  color: #0f172a !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

#learnView .edu-mode-text small,
#learnView #learnChatCol .edu-mode-text small {
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

/* =========================================================
   SIDEBAR: ULTRA LIGHT GLASSMORPHISM OVERRIDE
   ========================================================= */

/* 1. 核心底板：透明渐变与高斯模糊 */
.app .sidebar{
    border-radius: 0 !important;
}

/* 2. Logo 区域优化：去除黑粗框 */
.sidebar .logo, .sidebar-top {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}
.sidebar .logo:hover {
    transform: none !important;
}
.sidebar .logo-icon.logo-icon-brand {
    background: linear-gradient(135deg, #FFFFFF, rgba(255,255,255,0.7)) !important;
    border: 1px solid rgba(255,255,255,1) !important;
    box-shadow: 0 4px 10px rgba(2, 132, 199, 0.12) !important;
    border-radius: 10px !important;
}
.sidebar .logo-text.logo-text-brand {
    font-family: 'Quicksand', sans-serif !important;
    color: #0F172A !important;
    font-size: 22px !important;
    letter-spacing: -0.5px !important;
}

/* 3. 导航菜单项 (Nav Items) 净化 */
.sidebar .sidebar-nav-group-label {
    background: transparent !important;
    color: #94A3B8 !important;
    font-family: 'Inter', sans-serif !important;
    letter-spacing: 0.1em !important;
}
.sidebar .sidebar-link, .sidebar .sidebar-settings-btn {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: #475569 !important;
    font-weight: 600;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    border-radius: 12px !important;
}
.sidebar .sidebar-link:hover, .sidebar .sidebar-settings-btn:hover {
    background: rgba(255, 255, 255, 0.5) !important;
    color: #0F172A !important;
    transform: none !important;
    box-shadow: none !important;
}
.sidebar .sidebar-link i, .sidebar .sidebar-settings-btn i,
.sidebar .sidebar-link svg, .sidebar .sidebar-settings-btn svg {
    color: #64748B !important;
    transition: color 0.2s ease !important;
}
.sidebar .sidebar-link:hover i, .sidebar .sidebar-settings-btn:hover i,
.sidebar .sidebar-link:hover svg, .sidebar .sidebar-settings-btn:hover svg {
    color: #0284C7 !important;
}

/* 一级激活状态：悬浮白玉瓷片 */
.sidebar .sidebar-link.active, .sidebar .sidebar-settings-btn.active {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #0F172A !important;
    font-weight: 800 !important;
    border: 1px solid rgba(255, 255, 255, 1) !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.05), inset 0 1px 0 #FFFFFF !important;
    transform: none !important;
}
.sidebar .sidebar-link.active i, .sidebar .sidebar-link.active svg {
    color: #0284C7 !important;
}

/* 4. 课程大纲 (Syllabus Accordion) */
.sidebar .syllabus-chapter {
    color: #1E293B !important;
    font-weight: 800;
    background: transparent !important;
    border-radius: 8px !important;
}
.sidebar .syllabus-chapter:hover {
    background: rgba(255, 255, 255, 0.5) !important;
}
.sidebar .syllabus-sections {
    border-left: 2px dotted rgba(148, 163, 184, 0.4) !important;
}
.sidebar .syllabus-section {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: #475569 !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
}
.sidebar .syllabus-section:hover {
    background: rgba(255, 255, 255, 0.6) !important;
    color: #0F172A !important;
}

/* 二级激活状态：悬浮白玉瓷片 */
.sidebar .syllabus-section.active {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #0F172A !important;
    font-weight: 800 !important;
    border: 1px solid rgba(255, 255, 255, 1) !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.05), inset 0 1px 0 #FFFFFF !important;
}
.sidebar .syllabus-section.active::before {
    color: #0284C7 !important;
    font-size: 16px !important;
}

/* LEARN_QA_TOP_WINDOW_CONTROLS_REMOVED: hard-hide stale cached controls. */
#learnChatShrinkBtn,
#learnChatMinimizeBtn,
#learnView #learnChatCol #learnChatShrinkBtn,
#learnView #learnChatCol #learnChatMinimizeBtn,
#learnView #learnChatCol .learn-chat-window-actions,
#learnView #learnChatCol .learn-chat-window-btn,
.learn-chat-window-actions,
.learn-chat-window-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* LEARN_QA_ACTIVE_THREAD: hide empty hero and center active Q&A/progress content. */
#learnView #learnChatCol.is-chat-active #learnChatEmptyState,
#learnView #learnChatCol.is-chat-active .learn-chat-empty-state,
#learnView #learnChatScroll.is-chat-active #learnChatEmptyState,
#learnView #learnChatScroll.is-chat-active .learn-chat-empty-state,
#learnView #learnChatContent.is-chat-active + #learnChatEmptyState {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

#learnView #learnChatScroll.is-chat-active,
#learnView #learnChatCol.is-chat-active #learnChatScroll {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    overflow-y: auto !important;
    padding: 0 0 18px !important;
}

#learnView #learnChatContent.is-chat-active,
#learnView #learnChatCol.is-chat-active #learnChatContent {
    display: flex !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    align-self: stretch !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 18px !important;
}

#learnView #learnChatContent.is-chat-active .followup-bubble,
#learnView #learnChatCol.is-chat-active #learnChatContent .followup-bubble {
    width: 100% !important;
    margin: 0 !important;
}

/* LEARN_QA_FULLBLEED_THREAD: active answers should fill the Q&A pane, not sit inside a clipped card. */
#learnView #learnChatCol.is-chat-active {
    padding: 0 0 18px !important;
    overflow: hidden !important;
}

#learnView #learnChatCol.is-chat-active #learnChatScroll {
    padding-inline: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

#learnView #learnChatCol.is-chat-active #learnChatContent {
    box-sizing: border-box !important;
    min-height: 0 !important;
}

#learnView #learnChatCol.is-chat-active .followup-bubble::before,
#learnView #learnChatCol.is-chat-active .followup-bubble .fub-a::before {
    content: none !important;
    display: none !important;
}

#learnView #learnChatCol.is-chat-active .followup-bubble .fub-a {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/* =========================================================
   SIDEBAR: GLASS BACKDROP RESTORE
   The glass needs a living backdrop behind it; otherwise blur on white
   reads as a flat white panel.
   ========================================================= */
.app {
    position: relative !important;
    isolation: isolate !important;
}


.app .sidebar{
    position: relative !important;
    z-index: 2;
}

.app .main {
    position: relative !important;
    z-index: 1 !important;
}

.app .sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.34) !important;
}

/* SIDEBAR ICON SET: match the Phosphor icon language from the glass mockup. */
.app .sidebar .logo-icon-brand {
    color: #0284c7 !important;
    font-size: 24px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.app .sidebar .aquarius-brand-planet {
    display: block !important;
    line-height: 1 !important;
    color: inherit !important;
}

.app .sidebar .logo-icon-brand img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 12px !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.app .sidebar .sidebar-link-icon,
.app .sidebar .sidebar-settings-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    color: #64748b !important;
}

.app .sidebar .sidebar-link-icon i,
.app .sidebar .sidebar-settings-icon i {
    display: block !important;
    font-size: 22px !important;
    line-height: 1 !important;
    color: currentColor !important;
}

.app .sidebar .sidebar-link:hover .sidebar-link-icon,
.app .sidebar .sidebar-settings-btn:hover .sidebar-settings-icon,
.app .sidebar .sidebar-link.active .sidebar-link-icon,
.app .sidebar .sidebar-settings-btn.active .sidebar-settings-icon {
    color: #0284c7 !important;
}

#navSyllabusBtn .sidebar-link-icon i {
    font-size: 21px !important;
    transform: translateY(1px) !important;
}

/* SIDEBAR LAYOUT PARITY: keep syllabus rows on one line like the glass mockup. */


.app .sidebar .sidebar-link,
.app .sidebar .sidebar-settings-btn {
    min-width: 0 !important;
    white-space: nowrap;
}


.app .sidebar .syllabus-section-row {
    align-items: center !important;
    gap: 8px !important;
}

.app .sidebar .syllabus-section-caret,
.app .sidebar .syllabus-section-caret-placeholder {
    flex: 0 0 14px !important;
}

.app .sidebar .syllabus-section {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.app .sidebar .syllabus-section.active {
    white-space: nowrap;
}

/* SIDEBAR SYLLABUS MOCKUP PARITY: arrow hugs dotted rail, active item is the white tile. */
.app .sidebar .syllabus-item {
    margin: 2px 0 4px !important;
}

.app .sidebar .syllabus-chapter {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 10px !important;
    color: #1e293b !important;
    font-family: "Quicksand", sans-serif !important;
    font-size: 14px !important;
    font-weight: 800;
    line-height: 1.2 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.app .sidebar .syllabus-chapter .caret {
    width: 14px !important;
    min-width: 14px !important;
    color: #94a3b8 !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

.app .sidebar .syllabus-sections {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    margin: 4px 0 7px 20px !important;
    padding: 0 0 0 14px !important;
    border-left: 2px dotted rgba(148, 163, 184, 0.4) !important;
}

.app .sidebar .syllabus-section-wrap {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.app .sidebar .syllabus-section-row {
    position: relative !important;
    display: block !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.app .sidebar .syllabus-section-caret,
.app .sidebar .syllabus-section-caret-placeholder {
    position: absolute !important;
    left: -15px !important;
    top: 50% !important;
    z-index: 2;
    width: 14px !important;
    min-width: 14px !important;
    height: 22px !important;
    min-height: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #94a3b8 !important;
    font-family: "Quicksand", sans-serif !important;
    font-size: 16px !important;
    font-weight: 800;
    line-height: 1 !important;
    transform: translateY(-50%) !important;
}

.app .sidebar .syllabus-section-caret-placeholder::before {
    content: "›" !important;
}

.app .sidebar .syllabus-section-caret.open {
    transform: translateY(-50%) !important;
}

.app .sidebar .syllabus-section-row:hover .syllabus-section-caret,
.app .sidebar .syllabus-section-row:hover .syllabus-section-caret-placeholder,
.app .sidebar .syllabus-section.active ~ .syllabus-section-caret,
.app .sidebar .syllabus-section-row:has(.syllabus-section.active) .syllabus-section-caret,
.app .sidebar .syllabus-section-row:has(.syllabus-section.active) .syllabus-section-caret-placeholder {
    color: #0284c7 !important;
    background: transparent !important;
}

.app .sidebar .syllabus-section {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 7px 14px 7px 8px !important;
    border-radius: 12px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #475569 !important;
    font-family: "Quicksand", sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.16 !important;
    white-space: normal;
    overflow: visible !important;
    text-overflow: clip;
    overflow-wrap: anywhere;
}

.app .sidebar .syllabus-section:hover {
    background: rgba(255, 255, 255, 0.6) !important;
    color: #0f172a !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.app .sidebar .syllabus-section.active {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #0f172a !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    border: 1px solid rgba(255, 255, 255, 1) !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.05), inset 0 1px 0 #ffffff !important;
}

/* SIDEBAR ACCORDION STATE FIX: keep glass layout, but let hidden actually collapse. */
.app .sidebar .syllabus-sections.hidden,
.app .sidebar .syllabus-subsections.hidden {
    display: none !important;
}

.app .sidebar .syllabus-sections:not(.hidden),
.app .sidebar .syllabus-subsections:not(.hidden),
.app .sidebar .syllabus-sections.is-animating,
.app .sidebar .syllabus-subsections.is-animating {
    display: flex !important;
}

/* SIDEBAR COLLAPSED WIDTH LOCK: expanded glass width must not leak into icon rail. */
.app.sidebar-collapsed #leftSidebar,
.app #leftSidebar.sidebar.collapsed {
    width: var(--sidebar-width-collapsed) !important;
    flex: 0 0 var(--sidebar-width-collapsed) !important;
    flex-basis: var(--sidebar-width-collapsed) !important;
    max-width: var(--sidebar-width-collapsed) !important;
    min-width: var(--sidebar-width-collapsed) !important;
}

.app.sidebar-collapsed #leftSidebar .sidebar-top,
.app.sidebar-collapsed #leftSidebar .sidebar-nav-shell,
.app.sidebar-collapsed #leftSidebar .sidebar-footer,
.app #leftSidebar.sidebar.collapsed .sidebar-top,
.app #leftSidebar.sidebar.collapsed .sidebar-nav-shell,
.app #leftSidebar.sidebar.collapsed .sidebar-footer {
    width: var(--sidebar-width-collapsed) !important;
    max-width: var(--sidebar-width-collapsed) !important;
    min-width: var(--sidebar-width-collapsed) !important;
}

/* LEARN Q&A MODE PICKER COMPACT PASS */

#learnView .edu-mode-option,
#learnView #learnChatCol .edu-mode-option {
    gap: 10px !important;
    padding: 9px 11px !important;
    border-radius: 12px !important;
}

#learnView .edu-mode-icon,
#learnView #learnChatCol .edu-mode-icon {
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    font-size: 20px !important;
}

#learnView .edu-mode-icon i,
#learnView #learnChatCol .edu-mode-icon i {
    font-size: 20px !important;
}

#learnView .edu-mode-text strong,
#learnView #learnChatCol .edu-mode-text strong,
#learnView .edu-mode-option strong,
#learnView #learnChatCol .edu-mode-option strong {
    font-size: 14px !important;
    line-height: 1.16 !important;
}

#learnView .edu-mode-text small,
#learnView #learnChatCol .edu-mode-text small,
#learnView .edu-mode-option small,
#learnView #learnChatCol .edu-mode-option small {
    font-size: 12px !important;
    line-height: 1.3 !important;
}

#learnView #learnChatCol .edu-mode-toggle {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 13px !important;
    gap: 6px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
}

#learnView #learnChatCol .edu-mode-toggle .edu-mode-icon,
#learnView #learnChatCol #learnModeCurrentIcon {
    width: 19px !important;
    min-width: 19px !important;
    height: 19px !important;
    min-height: 19px !important;
    font-size: 19px !important;
}

#learnView #learnChatCol .edu-mode-toggle .edu-mode-icon i,
#learnView #learnChatCol #learnModeCurrentIcon i {
    font-size: 19px !important;
}

#learnView #learnChatCol .edu-mode-toggle #learnModeCurrentText {
    font-size: 13px !important;
    line-height: 1 !important;
}

#learnView #learnChatCol .qa-caret-icon {
    width: 10px !important;
    height: 10px !important;
}

/* LEARN Q&A COMPOSER CARD: match the wide white dialog with controls inside. */
#learnView #learnChatCol #learnFollowupBar,
#learnView #learnChatCol #learnFollowupBar:focus,
#learnView #learnChatCol #learnFollowupBar:focus-within,
#learnView #learnBody #learnChatCol #learnFollowupBar,
#learnView #learnBody #learnChatCol #learnFollowupBar:focus,
#learnView #learnBody #learnChatCol #learnFollowupBar:focus-within,
#learnView #learnBody:not(.explain-collapsed):not(.chat-collapsed) #learnChatCol #learnFollowupBar,
#learnView #learnBody:not(.explain-collapsed):not(.chat-collapsed) #learnChatCol #learnFollowupBar:focus-within,
#learnView #learnBody.explain-collapsed:not(.chat-collapsed) #learnChatCol #learnFollowupBar,
#learnView #learnBody.explain-collapsed:not(.chat-collapsed) #learnChatCol #learnFollowupBar:focus-within,
#learnView #learnBody[data-panel-focus="normal"] #learnChatCol #learnFollowupBar,
#learnView #learnBody[data-panel-focus="normal"] #learnChatCol #learnFollowupBar:focus-within,
#learnView #learnBody[data-panel-focus="qa-wide"] #learnChatCol #learnFollowupBar,
#learnView #learnBody[data-panel-focus="qa-wide"] #learnChatCol #learnFollowupBar:focus-within,
#learnView #learnBody[data-panel-focus="qa-full"] #learnChatCol #learnFollowupBar,
#learnView #learnBody[data-panel-focus="qa-full"] #learnChatCol #learnFollowupBar:focus-within {
    position: relative !important;
    width: min(900px, calc(100% - 28px)) !important;
    max-width: 900px !important;
    min-height: 132px !important;
    margin: 0 auto 8px !important;
    padding: 18px !important;
    display: block !important;
    overflow: visible !important;
    background: rgba(255, 255, 255, 0.94) !important;
    background-image: none !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 18px !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(24px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
}


#learnView #learnChatCol #learnFollowupBar .edu-mode-toggle {
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05) !important;
}

#learnView #learnChatCol #learnFollowupBar #webSearchToggleBtnLearn {
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 14px !important;
}

/* HOME ASK SPACING TIGHTEN: feature-chip letter-spacing lock (every other prop here is shadowed by later .welcome.home-ask-workspace !important rules). */
.home-feature-chip {
    height: 34px !important;
    gap: 5px !important;
    padding: 0 11px !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
}

.home-feature-chip span {
    letter-spacing: 0 !important;
}

/* HOME ASK MODE BUTTON PARITY: use the same button language as chapter Q&A. */
.welcome.home-ask-workspace .home-mode-toggle {
    height: 38px !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 14px !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05) !important;
}

.welcome.home-ask-workspace .home-mode-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.welcome.home-ask-workspace .home-mode-icon i {
    line-height: 1 !important;
}

























































































































































/* HOME ASK FINAL POSITION: keep the homepage question module slightly lower. */
.home-ask-stage > .home-ask-empty,
.home-ask-stage > .home-ask-composer,
.home-ask-stage > .home-feature-actions {
  transform: translateY(56px) !important;
}

/* HOME GLASS TEST: subtle glass panels over a very quiet light field. */

.app::before {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background-size: 36px 36px !important;
  opacity: 0.32 !important;
}

.welcome.home-ask-workspace {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.38)) !important;
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.38)) !important;
  backdrop-filter: blur(18px) saturate(128%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(128%) !important;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.42) !important;
}

.home-ask-ambient {
  content: "" !important;
  display: none !important;
  background: transparent !important;
  background-image: none !important;
  opacity: 0 !important;
}

.app .sidebar{
  background-image:
    radial-gradient(520px 420px at 64% 0%, rgba(186, 230, 253, 0.76), transparent 72%),
    linear-gradient(180deg, #d9f3ff 0%, #eaf9f4 56%, #d5f8e8 100%) !important;
}

/* HYPERKNOW-STYLE SIDEBAR PROPORTION TEST: narrower cool-gray rail. */
:root {
  --sidebar-width: 240px !important;
}

.app .sidebar,
.app .sidebar-top,
.app .sidebar-nav-shell,
.app .sidebar-footer {
  width: var(--sidebar-width) !important;
  min-width: var(--sidebar-width) !important;
  max-width: var(--sidebar-width) !important;
}

.app .sidebar {
  flex: 0 0 var(--sidebar-width) !important;
}

.app .sidebar .logo {
  width: calc(var(--sidebar-width) - 28px) !important;
}

.app .sidebar-nav-shell {
  padding: 10px 12px 14px !important;
}

.app .sidebar .sidebar-link,
.app .sidebar .sidebar-settings-btn {
  gap: 12px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.app .sidebar .syllabus-sections {
  margin-left: 14px !important;
  padding-left: 10px !important;
}

/* HOME MAIN SUNSET TEST: soft dusk gradient on the right workspace. */
.app,
.app .main,
.welcome.home-ask-workspace {
  background:
    radial-gradient(760px 540px at 70% 8%, rgba(239, 68, 68, 0.34), transparent 72%),
    radial-gradient(900px 640px at 48% 84%, rgba(244, 63, 94, 0.30), transparent 74%),
    radial-gradient(720px 520px at 22% 18%, rgba(251, 113, 133, 0.22), transparent 70%),
    linear-gradient(180deg, #ffe3dc 0%, #ffd1cc 36%, #ffe0e8 70%, #fff5f2 100%) !important;
  background-image:
    radial-gradient(760px 540px at 70% 8%, rgba(239, 68, 68, 0.34), transparent 72%),
    radial-gradient(900px 640px at 48% 84%, rgba(244, 63, 94, 0.30), transparent 74%),
    radial-gradient(720px 520px at 22% 18%, rgba(251, 113, 133, 0.22), transparent 70%),
    linear-gradient(180deg, #ffe3dc 0%, #ffd1cc 36%, #ffe0e8 70%, #fff5f2 100%) !important;
}

.app::before {
  content: none !important;
  display: none !important;
  background: transparent !important;
  background-image: none !important;
}

/* HOME ASK LIQUID GLASS TEST: iPhone-style translucent composer over the sunset field. */
.welcome.home-ask-workspace .home-ask-composer,
.welcome.home-ask-workspace #searchBox.home-ask-composer {
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.18)) !important;
  will-change: transform !important;
}

.welcome.home-ask-workspace .home-ask-composer::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.10) 42%, rgba(255, 255, 255, 0.34) 100%) !important;
  opacity: 0.46 !important;
  mix-blend-mode: screen !important;
}

.welcome.home-ask-workspace .home-ask-composer::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background:
    radial-gradient(520px 120px at 18% 0%, rgba(255, 255, 255, 0.48), transparent 70%),
    radial-gradient(420px 120px at 92% 100%, rgba(255, 255, 255, 0.22), transparent 72%) !important;
  opacity: 0.72 !important;
}

.welcome.home-ask-workspace .home-ask-input-row,
.welcome.home-ask-workspace .home-ask-toolbar,
.welcome.home-ask-workspace .attach-preview {
  position: relative !important;
  z-index: 1 !important;
}

.welcome.home-ask-workspace .home-ask-input-row,
.welcome.home-ask-workspace .search-box-row.home-ask-input-row,
.welcome.home-ask-workspace #userInput.search-input {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.welcome.home-ask-workspace .home-ask-input-row {
  border-radius: 0 !important;
}


@keyframes home-ask-focus-bounce {
  0% {
    translate: 0 0;
  }

  38% {
    translate: 0 -6px;
  }

  72% {
    translate: 0 2px;
  }

  100% {
    translate: 0 0;
  }
}

.welcome.home-ask-workspace .home-ask-tag,
.welcome.home-ask-workspace .home-mode-toggle,
.welcome.home-ask-workspace .home-ask-web-toggle,
.welcome.home-ask-workspace .home-feature-chip {
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.22)) !important;
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.22)) !important;
  box-shadow:
    0 14px 34px rgba(148, 47, 62, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(22px) saturate(175%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(175%) !important;
}

.welcome.home-ask-workspace .home-ask-send {
  border: 1px solid rgba(255, 255, 255, 0.46) !important;
  background:
    linear-gradient(135deg, rgba(14, 165, 233, 0.78), rgba(37, 99, 235, 0.58)) !important;
  box-shadow:
    0 14px 28px rgba(14, 165, 233, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
}

.welcome.home-ask-workspace .home-ask-send:disabled {
  color: rgba(255, 255, 255, 0.90) !important;
  background:
    linear-gradient(135deg, rgba(148, 163, 184, 0.36), rgba(148, 163, 184, 0.20)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(255, 255, 255, 0.14) !important;
  opacity: 1 !important;
}

/* INTRO LANDING MOTION PASS: light paper-slide animation after stamp removal. */
.intro-landing-new:not(.hidden) #introNavbar {
  animation: intro-nav-slide-down 0.72s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.intro-landing-new:not(.hidden) .scrap-hero-title,
.intro-landing-new:not(.hidden) .scrap-hero-copy p,
.intro-landing-new:not(.hidden) .scrap-hero-actions {
  will-change: transform, opacity;
}

.intro-landing-new:not(.hidden) .scrap-hero-title {
  animation: intro-title-slide 0.82s cubic-bezier(0.16, 1, 0.3, 1) 0.06s both !important;
}

.intro-landing-new:not(.hidden) .scrap-hero-copy p {
  animation: intro-title-slide 0.82s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both !important;
}

.intro-landing-new:not(.hidden) .scrap-hero-actions {
  animation: intro-title-slide 0.82s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both !important;
}

.intro-landing-new:not(.hidden) .scrap-polaroid {
  --scrap-rotate: 6deg;
  animation: intro-card-slide-right 0.92s cubic-bezier(0.16, 1, 0.3, 1) 0.20s both, float 6.8s ease-in-out 1.15s infinite !important;
}

.intro-landing-new:not(.hidden) .scrap-window {
  animation: intro-card-slide-right 0.92s cubic-bezier(0.16, 1, 0.3, 1) 0.32s both, float-window 6.2s ease-in-out 1.25s infinite !important;
}

.intro-landing-new:not(.hidden) .scrap-sticky {
  --scrap-rotate: -6deg;
  animation: intro-card-slide-up 0.92s cubic-bezier(0.16, 1, 0.3, 1) 0.44s both, float 5.8s ease-in-out 1.30s infinite !important;
}

.intro-landing-new:not(.hidden) .scrap-proof-section,
.intro-landing-new:not(.hidden) .scrap-pipeline,
.intro-landing-new:not(.hidden) .scrap-footer-inner {
  animation: intro-scroll-reveal linear both !important;
  animation-timeline: view() !important;
  animation-range: entry 0% cover 28% !important;
}

.intro-landing-new:not(.hidden) .intro-hero-copy {
  animation: intro-slide-left 0.86s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.intro-landing-new:not(.hidden) .intro-hero-collage {
  animation: intro-slide-right 0.96s cubic-bezier(0.16, 1, 0.3, 1) 0.10s both !important;
}

.intro-landing-new:not(.hidden) .intro-hero-title,
.intro-landing-new:not(.hidden) .intro-hero-subtitle,
.intro-landing-new:not(.hidden) .intro-hero-actions {
  will-change: transform, opacity;
}

.intro-landing-new:not(.hidden) .intro-hero-title {
  animation: intro-title-slide 0.82s cubic-bezier(0.16, 1, 0.3, 1) 0.06s both !important;
}

.intro-landing-new:not(.hidden) .intro-hero-subtitle {
  animation: intro-title-slide 0.82s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both !important;
}

.intro-landing-new:not(.hidden) .intro-hero-actions {
  animation: intro-title-slide 0.82s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both !important;
}

.intro-landing-new:not(.hidden) .intro-polaroid-card {
  --scrap-rotate: 6deg;
  animation: intro-card-slide-right 0.92s cubic-bezier(0.16, 1, 0.3, 1) 0.20s both, float 6.8s ease-in-out 1.15s infinite !important;
}

.intro-landing-new:not(.hidden) .intro-window-card {
  animation: intro-card-slide-right 0.92s cubic-bezier(0.16, 1, 0.3, 1) 0.32s both, float-window 6.2s ease-in-out 1.25s infinite !important;
}

.intro-landing-new:not(.hidden) .intro-sticky-card {
  --scrap-rotate: -6deg;
  animation: intro-card-slide-up 0.92s cubic-bezier(0.16, 1, 0.3, 1) 0.44s both, float 5.8s ease-in-out 1.30s infinite !important;
}

@keyframes intro-nav-slide-down {
  from {
    opacity: 0;
    transform: translateY(-18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes intro-slide-left {
  from {
    opacity: 0;
    transform: translateX(-28px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes intro-slide-right {
  from {
    opacity: 0;
    transform: translateX(34px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes intro-title-slide {
  from {
    opacity: 0;
    transform: translateX(-22px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes intro-card-slide-right {
  from {
    opacity: 0;
    transform: translateX(44px) translateY(10px) rotate(var(--scrap-rotate, 0deg));
  }
  to {
    opacity: 1;
    transform: translateX(0) translateY(0) rotate(var(--scrap-rotate, 0deg));
  }
}

@keyframes intro-card-slide-up {
  from {
    opacity: 0;
    transform: translateY(42px) rotate(var(--scrap-rotate, 0deg));
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(var(--scrap-rotate, 0deg));
  }
}

@keyframes intro-scroll-reveal {
  from {
    opacity: 0;
    transform: translateY(34px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-landing-new:not(.hidden) #introNavbar,
  .intro-landing-new:not(.hidden) .scrap-hero-copy,
  .intro-landing-new:not(.hidden) .scrap-collage,
  .intro-landing-new:not(.hidden) .scrap-hero-title,
  .intro-landing-new:not(.hidden) .scrap-hero-copy p,
  .intro-landing-new:not(.hidden) .scrap-hero-actions,
  .intro-landing-new:not(.hidden) .scrap-polaroid,
  .intro-landing-new:not(.hidden) .scrap-window,
  .intro-landing-new:not(.hidden) .scrap-sticky,
  .intro-landing-new:not(.hidden) .scrap-proof-section,
  .intro-landing-new:not(.hidden) .scrap-pipeline,
  .intro-landing-new:not(.hidden) .scrap-footer-inner {
    animation: none !important;
  }
}
/* =========================================================
   CHAPTER OVERVIEW: INDEX CARD & SCRAPBOOK FIX
   ========================================================= */

/* 1. 修复子章节卡片布局：解除挤压，变身实体纸卡 */
#learnView .chapter-overview-subcard.chapter-overview-subrow {
    display: grid !important;
    /* 核心修复：使用 auto 1fr auto，保证文字有充足空间自由伸展 */
    grid-template-columns: auto 1fr 30px !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 20px 24px !important; /* 增加内边距让信息透气 */
    min-height: 80px !important; height: auto !important;

    /* 材质：纯白纸张 + 实体黑框 + 粗野阴影 */
    background: #FFFFFF !important;
    border: 2px solid #1E293B !important;
    border-radius: 8px !important; /* 降低圆角，更像纸片 */
    box-shadow: 4px 4px 0 rgba(30, 41, 59, 0.15) !important;

    transform: none !important;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    position: relative !important;
    overflow: visible !important; /* 必须 visible，否则胶带会被切掉 */
    text-decoration: none !important;
    margin-bottom: 8px !important;
}

#learnView .chapter-overview-subcard.chapter-overview-subrow:hover {
    transform: translate(-2px, -2px) rotate(0.5deg) !important;
    box-shadow: 6px 6px 0 rgba(30, 41, 59, 0.2) !important;
    border-color: #0284C7 !important;
}

/* 2. 修复顶部的胶带：逼真、半透明且不挡字 */
#learnView .chapter-overview-subcard.chapter-overview-subrow::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: -12px !important; /* 贴在最顶部边缘 */
    left: 50% !important;
    transform: translateX(-50%) rotate(-2deg) !important;
    width: 64px !important;
    height: 24px !important;
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
    backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important;
    z-index: 5 !important;
    border-radius: 2px !important;
}
/* 给偶数行的胶带换个角度，增加随机手账感 */
#learnView .chapter-overview-subcard.chapter-overview-subrow:nth-child(even)::after {
    transform: translateX(-50%) rotate(3deg) !important;
    background: rgba(253, 224, 71, 0.3) !important; /* 黄色胶带 */
}

/* 3. 修复内部标号：改为荧光笔高亮风格 */
#learnView .chapter-overview-subcard-marker {
    font-family: 'DM Mono', monospace !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    /* 模拟荧光笔画了一半的效果 */
    background: linear-gradient(180deg, transparent 50%, rgba(110, 231, 183, 0.6) 50%) !important;
    border: none !important; box-shadow: none !important; border-radius: 0 !important;
    padding: 0 4px !important; height: auto !important; width: auto !important;
    transform: none !important; transition: background 0.3s !important;
}
#learnView .chapter-overview-subcard.chapter-overview-subrow:nth-child(even) .chapter-overview-subcard-marker {
    background: linear-gradient(180deg, transparent 50%, rgba(253, 224, 71, 0.8) 50%) !important;
}
#learnView .chapter-overview-subcard.chapter-overview-subrow:hover .chapter-overview-subcard-marker {
    background: linear-gradient(180deg, transparent 30%, rgba(56, 189, 248, 0.6) 30%) !important;
}

/* 4. 修复标题文字排版 */
#learnView .chapter-overview-subcard-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #1E293B !important;
    line-height: 1.4 !important;
    white-space: normal !important; /* 允许自然换行，不挤压 */
    word-break: break-word !important;
}

/* 5. 修复右侧箭头 */
#learnView .chapter-overview-open-cue {
    width: auto !important; height: auto !important; border-radius: 0 !important;
    background: transparent !important; border: none !important; box-shadow: none !important;
    color: #1E293B !important; font-size: 24px !important; transition: 0.2s !important;
    display: flex !important; align-items: center !important; justify-content: flex-end !important;
}
#learnView .chapter-overview-open-cue::after {
    content: "→" !important; font-family: 'Inter', sans-serif !important; font-size: 24px !important; font-weight: bold !important; transform: none !important;
}
#learnView .chapter-overview-subcard.chapter-overview-subrow:hover .chapter-overview-open-cue {
    color: #0284C7 !important; background: transparent !important; border: none !important; transform: translateX(4px) scale(1.1) !important;
}

/* =========================================================
   CHAPTER OVERVIEW: FINAL INDEX CARD PRIORITY LOCK
   Matches the stronger #learnBody overview selectors already used above.
   ========================================================= */

#learnView #learnBody.chapter-overview-active .chapter-overview-grid > .chapter-overview-subcard.chapter-overview-subrow,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-grid > .chapter-overview-subcard.chapter-overview-subrow {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) 30px !important;
  align-items: center !important;
  justify-items: stretch !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 80px !important;
  height: auto !important;
  padding: 20px 24px !important;
  margin: 0 0 8px !important;
  overflow: visible !important;
  position: relative !important;
  text-align: left !important;
  text-decoration: none !important;
  background: #ffffff !important;
  background-image: none !important;
  background-size: auto !important;
  border: 2px solid #1e293b !important;
  border-radius: 8px !important;
  box-shadow: 4px 4px 0 rgba(30, 41, 59, 0.15) !important;
  transform: none !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-grid > .chapter-overview-subcard.chapter-overview-subrow:hover,
#learnView #learnBody.chapter-overview-active .chapter-overview-grid > .chapter-overview-subcard.chapter-overview-subrow:focus-visible,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-grid > .chapter-overview-subcard.chapter-overview-subrow:hover,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-grid > .chapter-overview-subcard.chapter-overview-subrow:focus-visible {
  transform: translate(-2px, -2px) rotate(0.5deg) !important;
  box-shadow: 6px 6px 0 rgba(30, 41, 59, 0.2) !important;
  border-color: #0284c7 !important;
  background: #ffffff !important;
  background-image: none !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-grid > .chapter-overview-subcard.chapter-overview-subrow::before,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-grid > .chapter-overview-subcard.chapter-overview-subrow::before {
  content: none !important;
  display: none !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-grid > .chapter-overview-subcard.chapter-overview-subrow::after,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-grid > .chapter-overview-subcard.chapter-overview-subrow::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: -12px !important;
  left: 50% !important;
  width: 64px !important;
  height: 24px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 2px !important;
  background: rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
  transform: translateX(-50%) rotate(-2deg) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-grid > .chapter-overview-subcard.chapter-overview-subrow:nth-child(even)::after,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-grid > .chapter-overview-subcard.chapter-overview-subrow:nth-child(even)::after {
  background: rgba(253, 224, 71, 0.3) !important;
  transform: translateX(-50%) rotate(3deg) !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-subcard-marker,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-subcard-marker {
  display: inline-block !important;
  width: auto !important;
  min-width: max-content !important;
  height: auto !important;
  padding: 0 4px !important;
  border: none !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, transparent 50%, rgba(110, 231, 183, 0.6) 50%) !important;
  box-shadow: none !important;
  color: #0f172a !important;
  font-family: "DM Mono", monospace !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  transform: none !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-grid > .chapter-overview-subcard.chapter-overview-subrow:nth-child(even) .chapter-overview-subcard-marker,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-grid > .chapter-overview-subcard.chapter-overview-subrow:nth-child(even) .chapter-overview-subcard-marker {
  background: linear-gradient(180deg, transparent 50%, rgba(253, 224, 71, 0.8) 50%) !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-grid > .chapter-overview-subcard.chapter-overview-subrow:hover .chapter-overview-subcard-marker,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-grid > .chapter-overview-subcard.chapter-overview-subrow:hover .chapter-overview-subcard-marker {
  background: linear-gradient(180deg, transparent 30%, rgba(56, 189, 248, 0.6) 30%) !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-subcard-copy,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-subcard-copy {
  min-width: 0 !important;
  width: auto !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-subcard-title,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-subcard-title {
  display: block !important;
  color: #1e293b !important;
  font-family: "Inter", sans-serif !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-open-cue,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-open-cue {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 30px !important;
  min-width: 30px !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
  transform: none !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-open-cue::before,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-open-cue::before {
  content: none !important;
  display: none !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-open-cue::after,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-open-cue::after {
  content: "→" !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #1e293b !important;
  font-family: "Inter", sans-serif !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  transform: none !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-grid > .chapter-overview-subcard.chapter-overview-subrow:hover .chapter-overview-open-cue,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-grid > .chapter-overview-subcard.chapter-overview-subrow:hover .chapter-overview-open-cue {
  transform: translateX(4px) scale(1.1) !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-grid > .chapter-overview-subcard.chapter-overview-subrow:hover .chapter-overview-open-cue::after,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-grid > .chapter-overview-subcard.chapter-overview-subrow:hover .chapter-overview-open-cue::after {
  color: #0284c7 !important;
}

/* LEARN_QA_FULLBLEED_FINAL_LOCK: active Q&A fills the right pane with no inner clipping frame. */
#learnView #learnChatCol.is-chat-active,
#learnView #learnBody #learnChatCol.is-chat-active,
#learnView #learnBody[data-panel-focus] #learnChatCol.is-chat-active {
  padding: 0 0 18px !important;
  overflow: hidden !important;
}

#learnView #learnChatCol.is-chat-active #learnChatScroll,
#learnView #learnChatScroll.is-chat-active,
#learnView #learnBody #learnChatCol.is-chat-active #learnChatScroll,
#learnView #learnBody[data-panel-focus] #learnChatCol.is-chat-active #learnChatScroll {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 24px 0 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#learnView #learnChatCol.is-chat-active #learnChatContent,
#learnView #learnChatContent.is-chat-active,
#learnView #learnBody #learnChatCol.is-chat-active #learnChatContent,
#learnView #learnBody[data-panel-focus] #learnChatCol.is-chat-active #learnChatContent {
  box-sizing: border-box !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 32px 18px !important;
  gap: 18px !important;
  overflow: visible !important;
}

#learnView #learnChatCol.is-chat-active .followup-bubble,
#learnView #learnChatContent.is-chat-active .followup-bubble,
#learnView #learnBody #learnChatCol.is-chat-active .followup-bubble {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#learnView #learnChatCol.is-chat-active .followup-bubble::before,
#learnView #learnChatContent.is-chat-active .followup-bubble::before,
#learnView #learnChatCol.is-chat-active .followup-bubble .fub-a::before,
#learnView #learnChatContent.is-chat-active .followup-bubble .fub-a::before {
  content: none !important;
  display: none !important;
}

#learnView #learnChatCol.is-chat-active .followup-bubble .fub-a,
#learnView #learnChatContent.is-chat-active .followup-bubble .fub-a,
#learnView #learnBody #learnChatCol.is-chat-active .followup-bubble .fub-a {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* LEARN_QA_HOME_REBUILD_FINAL: rebuild lesson Q&A with the homepage Ask visual system. */
#learnView #learnChatCol,
#learnView #learnBody #learnChatCol,
#learnView #learnBody[data-panel-focus] #learnChatCol {
  position: relative !important;
  isolation: isolate !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#learnView #learnChatCol::before,
#learnView #learnChatCol::after,
#learnView #learnChatCol .ambient-background,
#learnView #learnChatCol .orb{
  content: none !important;
  display: none !important;
}

#learnView #learnChatCol .learn-chat-scroll,
#learnView #learnChatCol.is-chat-active #learnChatScroll,
#learnView #learnChatScroll.is-chat-active {
  position: relative !important;
  z-index: 1 !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#learnView #learnChatCol .learn-chat-empty-state,
#learnView #learnChatCol #learnChatEmptyState,
#learnView #learnChatCol .edu-tutor-empty {
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  margin: auto 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  text-align: center !important;
  color: #0f172a !important;
  pointer-events: none !important;
}

#learnView #learnChatCol .learn-chat-empty-state::before,
#learnView #learnChatCol .learn-chat-empty-state::after,
#learnView #learnChatCol #learnChatEmptyState::before,
#learnView #learnChatCol #learnChatEmptyState::after,
#learnView #learnChatCol .edu-tutor-empty::before,
#learnView #learnChatCol .edu-tutor-empty::after {
  content: none !important;
  display: none !important;
}

#learnView #learnChatCol #learnChatEmptyState.hidden,
#learnView #learnChatCol.is-chat-active #learnChatEmptyState,
#learnView #learnChatCol.is-chat-active .learn-chat-empty-state {
  display: none !important;
}

#learnView #learnChatCol .widget-icon {
  width: 34px !important;
  height: 34px !important;
  margin: 0 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #0284c7 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#learnView #learnChatCol .qa-hero-icon,
#learnView #learnChatCol .qa-hero-icon svg {
  width: 34px !important;
  height: 34px !important;
  display: block !important;
}

#learnView #learnChatCol .empty-title {
  margin: 0 !important;
  color: #0f172a !important;
  font-family: "Source Serif 4", "Bricolage Grotesque", "Inter", sans-serif !important;
  font-size: clamp(30px, 4vw, 44px) !important;
  line-height: 1.12 !important;
  font-weight: 680 !important;
  letter-spacing: 0 !important;
}

#learnView #learnChatCol .empty-subtitle {
  margin: 14px 0 0 !important;
  max-width: 560px !important;
  color: #64748b !important;
  font-size: clamp(14px, 1.35vw, 18px) !important;
  line-height: 1.45 !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

#learnView #learnChatCol .tag-group {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: clamp(14px, 2vh, 18px) !important;
}

#learnView #learnChatCol .edu-tag {
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.22)) !important;
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.22)) !important;
  box-shadow:
    0 14px 34px rgba(148, 47, 62, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(22px) saturate(175%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(175%) !important;
  font-size: clamp(12px, 1vw, 14px) !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#learnView #learnChatCol .tag-formula { color: #0369a1 !important; }
#learnView #learnChatCol .tag-screenshot { color: #7e22ce !important; }
#learnView #learnChatCol .tag-trap { color: #c2410c !important; }

#learnView #learnChatCol .edu-tag .qa-inline-icon,
#learnView #learnChatCol .edu-tag .qa-inline-icon svg {
  width: 15px !important;
  height: 15px !important;
  margin: 0 !important;
}

#learnView #learnChatCol #learnFollowupBar,
#learnView #learnBody #learnChatCol #learnFollowupBar,
#learnView #learnBody[data-panel-focus] #learnChatCol #learnFollowupBar,
#learnView #learnChatCol #learnFollowupBar:focus-within {
  display: block !important;
}

#learnView #learnChatCol #learnFollowupBar::before,
#learnView #learnChatCol #learnFollowupBar::after {
  content: none !important;
  display: none !important;
}

#learnView #learnChatCol #learnFollowupBar .input-wrapper,
#learnView #learnChatCol #learnFollowupBar .input-wrapper:focus-within {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 48px !important;
  align-items: start !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
}

#learnView #learnChatCol #learnFollowupBar .btn-clip {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin-top: 3px !important;
  padding: 0 !important;
  color: #94a3b8 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

#learnView #learnChatCol #learnFollowupBar .input-field {
  min-height: 44px !important;
  max-height: 96px !important;
  padding: 8px 6px !important;
  color: #0f172a !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  resize: none !important;
}

#learnView #learnChatCol #learnFollowupBar .input-field::placeholder {
  color: #94a3b8 !important;
  font-weight: 750 !important;
}

#learnView #learnChatCol #learnFollowupBar .btn-send {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.46) !important;
  border-radius: 13px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  background:
    linear-gradient(135deg, rgba(148, 163, 184, 0.36), rgba(148, 163, 184, 0.20)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(255, 255, 255, 0.14) !important;
  transform: none !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
}

#learnView #learnChatCol #learnFollowupBar .bottom-actions {
  position: absolute !important;
  right: 18px !important;
  bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#learnView #learnChatCol #learnFollowupBar .edu-mode-toggle,
#learnView #learnChatCol #learnFollowupBar #webSearchToggleBtnLearn {
  height: 38px !important;
  min-height: 38px !important;
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.22)) !important;
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.22)) !important;
  box-shadow:
    0 14px 34px rgba(148, 47, 62, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(22px) saturate(175%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(175%) !important;
}

#learnView #learnChatCol #learnFollowupBar .edu-mode-toggle {
  padding: 0 15px !important;
}

#learnView #learnChatCol #learnFollowupBar #webSearchToggleBtnLearn {
  width: 44px !important;
  min-width: 44px !important;
  padding: 0 !important;
}

#learnView #learnChatCol.is-chat-active #learnChatScroll {
  justify-content: flex-start !important;
  padding-top: 24px !important;
}

#learnView #learnChatCol.is-chat-active #learnChatContent {
  width: 100% !important;
  max-width: none !important;
  padding: 0 clamp(24px, 4vw, 48px) 18px !important;
}

/* LEARN QA EMPTY STATE LOWER + COMPOSER BOUNCE */

#learnView #learnChatCol #learnFollowupBar,
#learnView #learnBody #learnChatCol #learnFollowupBar,
#learnView #learnBody[data-panel-focus] #learnChatCol #learnFollowupBar {
  transform: none !important;
  will-change: translate, box-shadow, border-color !important;
}

#learnView #learnChatCol #learnFollowupBar:focus-within,
#learnView #learnBody #learnChatCol #learnFollowupBar:focus-within,
#learnView #learnBody[data-panel-focus] #learnChatCol #learnFollowupBar:focus-within {
  border-color: rgba(255, 255, 255, 0.78) !important;
  box-shadow:
    0 30px 74px rgba(148, 47, 62, 0.20),
    0 12px 30px rgba(15, 23, 42, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.90),
    inset 0 -1px 0 rgba(255, 255, 255, 0.26) !important;
  animation: learn-qa-composer-focus-bounce 360ms cubic-bezier(0.2, 0.9, 0.22, 1.18) both !important;
}

@keyframes learn-qa-composer-focus-bounce {
  0% {
    translate: 0 0;
  }

  38% {
    translate: 0 -5px;
  }

  72% {
    translate: 0 1.5px;
  }

  100% {
    translate: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #learnView #learnChatCol #learnFollowupBar:focus-within,
  #learnView #learnBody #learnChatCol #learnFollowupBar:focus-within,
  #learnView #learnBody[data-panel-focus] #learnChatCol #learnFollowupBar:focus-within {
    animation: none !important;
  }
}

/* CHAPTER OVERVIEW OPEN BOOK REDESIGN */

#learnView #learnBody.chapter-overview-active .chapter-overview-map,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-map {
  background-image: none !important;
  overflow: visible !important;
}


#learnView .chapter-overview-book-spread {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) !important;
}


#learnView .chapter-overview-book-spread::after {
  inset: auto 34px -17px !important;
  height: 28px !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-book-page,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-book-page,
#learnView #learnBody.chapter-overview-active .chapter-overview-hero,
#learnView #learnBody.chapter-overview-active .chapter-overview-list-block-side,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-hero,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-list-block-side {
  padding: clamp(46px, 5.6vh, 72px) clamp(42px, 4.8vw, 78px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  background:
    linear-gradient(90deg, rgba(117, 88, 55, 0.055) 0 1px, transparent 1px),
    linear-gradient(180deg, rgba(117, 88, 55, 0.04) 0 1px, transparent 1px),
    radial-gradient(1000px 720px at 46% 8%, rgba(255, 255, 255, 0.92), transparent 62%),
    linear-gradient(135deg, #fffaf0 0%, #fffdf7 46%, #f7efd8 100%) !important;
}

#learnView .chapter-overview-book-page-left {
  border-radius: 18px 4px 4px 18px !important;
  transform-origin: right center !important;
  box-shadow:
    inset -28px 0 34px rgba(83, 64, 45, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 10px 0 rgba(150, 121, 82, 0.10) !important;
}

#learnView .chapter-overview-book-page-right {
  border-radius: 4px 18px 18px 4px !important;
  transform-origin: left center !important;
  box-shadow:
    inset 28px 0 34px rgba(83, 64, 45, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 10px 0 rgba(150, 121, 82, 0.10) !important;
}

#learnView .chapter-overview-page-rule {
  position: absolute !important;
  inset: 26px auto 26px 32px !important;
  width: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, transparent, rgba(244, 114, 182, 0.36), transparent) !important;
  pointer-events: none !important;
}

#learnView .chapter-overview-book-page-right .chapter-overview-page-rule {
  left: auto !important;
  right: 32px !important;
  background: linear-gradient(180deg, transparent, rgba(96, 165, 250, 0.30), transparent) !important;
}

#learnView .chapter-overview-hero-main {
  min-width: 0 !important;
  margin-inline: auto !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-kicker,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-kicker {
  display: block !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-code,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-code {
  width: fit-content !important;
  margin: 0 0 clamp(28px, 4vh, 44px) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #0f172a !important;
  font-family: "Bricolage Grotesque", "Inter", sans-serif !important;
  font-size: clamp(64px, 7.2vw, 112px) !important;
  font-weight: 820 !important;
  line-height: 0.92 !important;
  letter-spacing: 0 !important;
  transform: none !important;
}


#learnView #learnBody.chapter-overview-active .chapter-overview-title::after,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-title::after {
  width: min(92%, 460px) !important;
  height: 0.42em !important;
  margin-top: -0.34em !important;
  margin-left: -0.04em !important;
  border-radius: 4px !important;
  background: linear-gradient(90deg, rgba(253, 224, 71, 0.82), rgba(250, 204, 21, 0.48)) !important;
  transform: rotate(-0.5deg) !important;
  opacity: 0.94 !important;
  position: relative !important;
  z-index: -1 !important;
}


#learnView #learnBody.chapter-overview-active .chapter-overview-list-head,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-list-head {
  position: relative !important;
  z-index: 2 !important;
}


#learnView #learnBody.chapter-overview-active .chapter-overview-list-title,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-list-title {
  margin: 0 !important;
  padding: 0 !important;
  width: fit-content !important;
  color: #111827 !important;
  background: transparent !important;
  background-image: none !important;
  font-family: "Bricolage Grotesque", "Source Serif 4", "Inter", sans-serif !important;
  font-size: clamp(38px, 4vw, 58px) !important;
  font-weight: 820 !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-list-title::after,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-list-title::after {
  content: "" !important;
  display: block !important;
  height: 0.36em !important;
  margin-top: -0.3em !important;
  border-radius: 4px !important;
  background: linear-gradient(90deg, rgba(186, 230, 253, 0.92), rgba(125, 211, 252, 0.38)) !important;
  position: relative !important;
  z-index: -1 !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-grid,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-grid {
  position: relative !important;
  z-index: 2 !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  align-items: stretch !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-grid > .chapter-overview-subcard.chapter-overview-note,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-grid > .chapter-overview-subcard.chapter-overview-note,
#learnView .chapter-overview-subcard.chapter-overview-note {
  --note-bg: #fff3a7;
  --note-edge: #facc15;
  --note-shadow: rgba(161, 98, 7, 0.18);
  flex-direction: column !important;
  justify-content: space-between !important;
}

#learnView .chapter-overview-note:nth-child(2n) {
  --note-rotate: 1.1deg;
}

#learnView .chapter-overview-note:nth-child(3n) {
  --note-rotate: -0.35deg;
}

#learnView .chapter-overview-note-lemon {
  --note-bg: #fff2a6;
  --note-edge: #facc15;
  --note-shadow: rgba(161, 98, 7, 0.18);
}

#learnView .chapter-overview-note-sky {
  --note-bg: #c7ecff;
  --note-edge: #7dd3fc;
  --note-shadow: rgba(3, 105, 161, 0.16);
}

#learnView .chapter-overview-note-mint {
  --note-bg: #c8f7dc;
  --note-edge: #6ee7b7;
  --note-shadow: rgba(5, 150, 105, 0.15);
}

#learnView .chapter-overview-note-rose {
  --note-bg: #ffd6df;
  --note-edge: #fda4af;
  --note-shadow: rgba(190, 18, 60, 0.14);
}

#learnView #learnBody.chapter-overview-active .chapter-overview-grid > .chapter-overview-note.chapter-overview-note-lemon,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-grid > .chapter-overview-note.chapter-overview-note-lemon {
  --note-bg: #fff2a6 !important;
  --note-edge: #facc15 !important;
  --note-shadow: rgba(161, 98, 7, 0.18) !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-grid > .chapter-overview-note.chapter-overview-note-sky,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-grid > .chapter-overview-note.chapter-overview-note-sky {
  --note-bg: #c7ecff !important;
  --note-edge: #7dd3fc !important;
  --note-shadow: rgba(3, 105, 161, 0.16) !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-grid > .chapter-overview-note.chapter-overview-note-mint,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-grid > .chapter-overview-note.chapter-overview-note-mint {
  --note-bg: #c8f7dc !important;
  --note-edge: #6ee7b7 !important;
  --note-shadow: rgba(5, 150, 105, 0.15) !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-grid > .chapter-overview-note.chapter-overview-note-rose,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-grid > .chapter-overview-note.chapter-overview-note-rose {
  --note-bg: #ffd6df !important;
  --note-edge: #fda4af !important;
  --note-shadow: rgba(190, 18, 60, 0.14) !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-grid > .chapter-overview-note:hover,
#learnView #learnBody.chapter-overview-active .chapter-overview-grid > .chapter-overview-note:focus-visible,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-grid > .chapter-overview-note:hover,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-grid > .chapter-overview-note:focus-visible {
  filter: saturate(1.04) !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-note::before,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-note::before,
#learnView #learnBody.chapter-overview-active .chapter-overview-note::after,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-note::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  pointer-events: none !important;
}


#learnView #learnBody.chapter-overview-active .chapter-overview-note::after,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-note::after {
  right: 0 !important;
  bottom: 0 !important;
  width: 30px !important;
  height: 30px !important;
  z-index: 2 !important;
  border: 0 !important;
  border-radius: 12px 0 16px 0 !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.52) 0 48%, rgba(120, 93, 42, 0.14) 50%, rgba(255, 255, 255, 0.10) 100%) !important;
  box-shadow: -3px -3px 8px rgba(120, 93, 42, 0.08) !important;
  opacity: 0.84 !important;
  transform: none !important;
}

#learnView .chapter-overview-note-pin {
  display: none !important;
}


#learnView #learnBody.chapter-overview-active .chapter-overview-note .chapter-overview-subcard-copy,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-note .chapter-overview-subcard-copy {
  flex: 0 1 auto !important;
}


#learnView #learnBody.chapter-overview-active .chapter-overview-note .chapter-overview-open-cue,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-note .chapter-overview-open-cue {
  margin-top: auto !important;
}


@media (max-width: 1120px) {
  #learnView .chapter-overview-book-spread {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  #learnView .chapter-overview-book-spread::before {
    display: none !important;
  }


  #learnView .chapter-overview-book-page-left {
    border-bottom-left-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
  }

  #learnView .chapter-overview-book-page-right {
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;
  }
}

@media (max-width: 760px) {

  #learnView #learnBody.chapter-overview-active .chapter-overview-book-page,
  #learnView #learnBody.chapter-overview-split-active .chapter-overview-book-page {
    padding: 34px 24px !important;
  }

  #learnView #learnBody.chapter-overview-active .chapter-overview-grid,
  #learnView #learnBody.chapter-overview-split-active .chapter-overview-grid {
    grid-template-columns: 1fr !important;
  }
}

/* LEARN QA TAG ROW HARD LIFT */
#learnView #learnBody #learnChatCol #learnChatEmptyState .tag-group,
#learnView #learnBody #learnChatCol .learn-chat-empty-state.edu-tutor-empty .tag-group,
#learnView #learnChatCol #learnChatEmptyState .tag-group,
#learnView #learnChatCol .edu-tutor-empty .tag-group {
  margin-top: 12px !important;
  transform: translateY(-22px) !important;
}

#learnView #learnBody #learnChatCol #learnChatEmptyState .edu-tag,
#learnView #learnBody #learnChatCol .learn-chat-empty-state.edu-tutor-empty .edu-tag,
#learnView #learnChatCol #learnChatEmptyState .edu-tag,
#learnView #learnChatCol .edu-tutor-empty .edu-tag {
  transform: none !important;
}

/* CHAPTER OVERVIEW TACTICAL NOTEBOOK STYLE */

#learnView #learnBody.chapter-overview-active .chapter-overview-map,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-map {
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-map::before,
#learnView #learnBody.chapter-overview-active .chapter-overview-map::after,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-map::before,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-map::after {
  content: none !important;
  display: none !important;
}

#learnView .chapter-overview-book-spread {
  position: relative !important;
  display: flex !important;
  overflow: hidden !important;
  border: 1px solid rgba(15, 23, 42, 0.05) !important;
  background-color: #fefcf8 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E") !important;
  filter: none !important;
  perspective: none !important;
  isolation: isolate !important;
}

#learnView .chapter-overview-book-spread::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 40px !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important;
  pointer-events: none !important;
  border-radius: 0 !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.02) 20%,
    rgba(0, 0, 0, 0.08) 45%,
    rgba(0, 0, 0, 0.12) 50%,
    rgba(0, 0, 0, 0.05) 55%,
    transparent 100%
  ) !important;
  box-shadow: none !important;
}

#learnView .chapter-overview-book-spread::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 1px !important;
  transform: translateX(-50%) !important;
  z-index: 11 !important;
  pointer-events: none !important;
  background: rgba(0, 0, 0, 0.10) !important;
  border-radius: 0 !important;
  filter: none !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-book-page,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-book-page,
#learnView #learnBody.chapter-overview-active .chapter-overview-hero,
#learnView #learnBody.chapter-overview-active .chapter-overview-list-block-side,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-hero,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-list-block-side {
  position: relative !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
  background-size: 100% 40px !important;
  background-position: 0 0 !important;
  transform: none !important;
  overflow: hidden !important;
}

#learnView .chapter-overview-book-page-left {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  padding: 40px 50px 40px 110px !important;
  background-image:
    linear-gradient(90deg, transparent 78px, rgba(239, 68, 68, 0.40) 78px, rgba(239, 68, 68, 0.40) 80px, transparent 80px),
    repeating-linear-gradient(transparent 0, transparent 39px, rgba(148, 163, 184, 0.35) 39px, rgba(148, 163, 184, 0.35) 40px) !important;
}

#learnView .chapter-overview-book-page-right {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  padding: 64px 48px 40px 60px !important;
  background-image:
    repeating-linear-gradient(transparent 0, transparent 39px, rgba(148, 163, 184, 0.35) 39px, rgba(148, 163, 184, 0.35) 40px) !important;
}

#learnView .chapter-overview-page-rule {
  display: none !important;
}

#learnView .chapter-overview-hero-main {
  max-width: 100% !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-kicker,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-kicker {
  margin: 34px 0 22px !important;
  color: #8b7356 !important;
  font-family: "DM Mono", monospace !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-code,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-code {
  display: none !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-title,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-title {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  color: #0f172a !important;
  background: transparent !important;
  background-image: none !important;
  font-family: "Playfair Display", Georgia, serif !important;
  font-size: clamp(54px, 5vw, 76px) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -1px !important;
  text-wrap: balance !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-title::after,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-title::after {
  content: none !important;
  display: none !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-summary,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-summary {
  display: block !important;
  max-width: 100% !important;
  margin: 4px 0 0 !important;
  color: #334155 !important;
  font-family: "Caveat", cursive !important;
  font-size: clamp(24px, 2.35vw, 32px) !important;
  font-weight: 600 !important;
  line-height: 40px !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-list-head,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-list-head {
  display: block !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  border: 0 !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-list-eyebrow,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-list-eyebrow {
  display: inline-block !important;
  margin: 0 !important;
  color: #64748b !important;
  font-family: "DM Mono", monospace !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-list-title,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-list-title {
  display: none !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-grid,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-grid {
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-grid > .chapter-overview-subcard.chapter-overview-note,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-grid > .chapter-overview-subcard.chapter-overview-note,
#learnView .chapter-overview-subcard.chapter-overview-note {
  position: relative !important;
  z-index: 5 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) 32px !important;
  align-items: center !important;
  gap: 16px !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 20px 24px !important;
  margin: 0 !important;
  overflow: visible !important;
  text-align: left !important;
  text-decoration: none !important;
  border: 0 !important;
  border-radius: 2px 2px 20px 2px !important;
  background: var(--sticky-bg, #fef9c3) !important;
  background-image: none !important;
  box-shadow:
    2px 6px 15px rgba(0, 0, 0, 0.06),
    inset -2px -2px 10px rgba(0, 0, 0, 0.02) !important;
  cursor: pointer !important;
  transform: rotate(var(--sticky-rotate, -1.5deg)) translateX(var(--sticky-x, 0)) !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  isolation: isolate !important;
}

#learnView .chapter-overview-note:nth-child(1) {
  --sticky-bg: #fef9c3;
  --sticky-rotate: -1.5deg;
  --sticky-x: 0;
}

#learnView .chapter-overview-note:nth-child(2) {
  --sticky-bg: #e0f2fe;
  --sticky-rotate: 1deg;
  --sticky-x: 20px;
}

#learnView .chapter-overview-note:nth-child(3) {
  --sticky-bg: #fce7f3;
  --sticky-rotate: -0.5deg;
  --sticky-x: -10px;
}

#learnView .chapter-overview-note:nth-child(4n) {
  --sticky-bg: #dcfce7;
  --sticky-rotate: 0.8deg;
  --sticky-x: 12px;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-grid > .chapter-overview-note:hover,
#learnView #learnBody.chapter-overview-active .chapter-overview-grid > .chapter-overview-note:focus-visible,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-grid > .chapter-overview-note:hover,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-grid > .chapter-overview-note:focus-visible {
  transform: translateY(-4px) scale(1.02) rotate(0deg) !important;
  box-shadow: 6px 12px 20px rgba(15, 23, 42, 0.10), inset -2px -2px 10px rgba(0, 0, 0, 0.02) !important;
  z-index: 10 !important;
  outline: none !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-note::before,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-note::before {
  content: "" !important;
  position: absolute !important;
  top: -10px !important;
  left: 50% !important;
  width: 70px !important;
  height: 24px !important;
  z-index: 4 !important;
  pointer-events: none !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 2px !important;
  background: rgba(255, 255, 255, 0.65) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  transform: translateX(-50%) rotate(-2deg) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-note::after,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-note::after,
#learnView #learnBody.chapter-overview-active .chapter-overview-grid > .chapter-overview-subcard.chapter-overview-note::after,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-grid > .chapter-overview-subcard.chapter-overview-note::after,
#learnView .chapter-overview-subcard.chapter-overview-note::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-note .chapter-overview-subcard-marker,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-note .chapter-overview-subcard-marker {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.80) !important;
  box-shadow: none !important;
  color: #0f172a !important;
  font-family: "DM Mono", monospace !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  transform: none !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-note .chapter-overview-subcard-copy,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-note .chapter-overview-subcard-copy {
  display: block !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-note .chapter-overview-subcard-title,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-note .chapter-overview-subcard-title {
  display: block !important;
  color: #0f172a !important;
  font-family: "Inter", sans-serif !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-note .chapter-overview-open-cue,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-note .chapter-overview-open-cue {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
  transform: none !important;
  transition: 0.2s !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-note .chapter-overview-open-cue::before,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-note .chapter-overview-open-cue::before {
  content: none !important;
  display: none !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-note .chapter-overview-open-cue::after,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-note .chapter-overview-open-cue::after {
  content: "→" !important;
  display: block !important;
  color: #1e293b !important;
  font-family: "Inter", sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-note:hover .chapter-overview-open-cue,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-note:hover .chapter-overview-open-cue {
  transform: translateX(4px) !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-note:hover .chapter-overview-open-cue::after,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-note:hover .chapter-overview-open-cue::after {
  color: #0284c7 !important;
}

@media (max-width: 1120px) {
  #learnView .chapter-overview-book-spread {
    aspect-ratio: auto !important;
    max-height: none !important;
    flex-direction: column !important;
    overflow: visible !important;
  }

  #learnView .chapter-overview-book-spread::before,
  #learnView .chapter-overview-book-spread::after {
    display: none !important;
  }

  #learnView .chapter-overview-book-page-left,
  #learnView .chapter-overview-book-page-right {
    min-height: 420px !important;
  }
}

@media (max-width: 760px) {
  #learnView #learnBody.chapter-overview-active .chapter-overview-shell,
  #learnView #learnBody.chapter-overview-split-active .chapter-overview-shell {
    width: min(100%, calc(100% - 24px)) !important;
  }

  #learnView .chapter-overview-book-page-left {
    padding: 34px 28px 34px 78px !important;
  }

  #learnView .chapter-overview-book-page-right {
    padding: 42px 26px 34px !important;
  }
}

/* GLOBAL TWO-THEME SURFACE: Morning and Dusk are the only user-facing themes. */
:root,
:root[data-theme="dawn"],
:root[data-theme="light"] {
  --theme-page-surface:
    radial-gradient(520px 420px at 64% 0%, rgba(186, 230, 253, 0.76), transparent 72%),
    linear-gradient(180deg, #d9f3ff 0%, #eaf9f4 56%, #d5f8e8 100%);
  --theme-page-surface-soft:
    radial-gradient(760px 520px at 10% 0%, rgba(186, 230, 253, 0.56), transparent 74%),
    radial-gradient(820px 620px at 86% 88%, rgba(187, 247, 208, 0.42), transparent 76%),
    linear-gradient(180deg, #d9f3ff 0%, #eaf9f4 54%, #d5f8e8 100%);
  --theme-pane-surface: rgba(255, 255, 255, 0.34);
  --theme-pane-border: rgba(255, 255, 255, 0.48);
  --theme-pane-shadow: 18px 0 44px rgba(14, 165, 233, 0.06);
  --theme-composer-shadow: 0 28px 70px rgba(20, 118, 156, 0.12), 0 12px 30px rgba(15, 23, 42, 0.06);
  --theme-topbar-surface: rgba(255, 255, 255, 0.58);
}

:root[data-theme="dusk"],
:root[data-theme="dark"] {
  --theme-page-surface:
    radial-gradient(760px 540px at 70% 8%, rgba(239, 68, 68, 0.34), transparent 72%),
    radial-gradient(900px 640px at 48% 84%, rgba(244, 63, 94, 0.30), transparent 74%),
    radial-gradient(720px 520px at 22% 18%, rgba(251, 113, 133, 0.22), transparent 70%),
    linear-gradient(180deg, #ffe3dc 0%, #ffd1cc 36%, #ffe0e8 70%, #fff5f2 100%);
  --theme-page-surface-soft:
    radial-gradient(760px 540px at 70% 8%, rgba(239, 68, 68, 0.34), transparent 72%),
    radial-gradient(900px 640px at 48% 84%, rgba(244, 63, 94, 0.30), transparent 74%),
    radial-gradient(720px 520px at 22% 18%, rgba(251, 113, 133, 0.22), transparent 70%),
    linear-gradient(180deg, #ffe3dc 0%, #ffd1cc 36%, #ffe0e8 70%, #fff5f2 100%);
  --theme-pane-surface: rgba(255, 255, 255, 0.24);
  --theme-pane-border: rgba(255, 255, 255, 0.42);
  --theme-pane-shadow: 18px 0 48px rgba(148, 47, 62, 0.08);
  --theme-composer-shadow: 0 28px 70px rgba(148, 47, 62, 0.18), 0 12px 30px rgba(15, 23, 42, 0.08);
  --theme-topbar-surface: rgba(255, 255, 255, 0.50);
}

html,
body,
.app,
.main,
.welcome,
.answer,
.learn-view,
.learn-body,
.learn-body-inner,
.settings-view,
.syllabus-view,
.recent-view,
.mistake-notebook-view,
.preference-view {
  background-color: transparent !important;
  background-image: var(--theme-page-surface-soft) !important;
  color-scheme: light !important;
}

body {
  min-height: 100vh !important;
}

.app {
  background: var(--theme-page-surface-soft) !important;
  background-image: var(--theme-page-surface-soft) !important;
}

.app::before,
.home-ask-ambient {
  content: none !important;
  display: none !important;
  background: transparent !important;
  background-image: none !important;
}

.app .sidebar,
.sidebar{
  background: var(--theme-page-surface) !important;
  background-image: var(--theme-page-surface) !important;
  border-right: 1px solid var(--theme-pane-border) !important;
  box-shadow: var(--theme-pane-shadow) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.topbar,
.learn-topbar,
.learn-explain-col,
.learn-chat-col,
.learn-explain-scroll,
.learn-chat-scroll,
.settings-page-shell,
.recent-shell,
.mistake-notebook-shell,
.preference-page-shell {
  background: transparent !important;
  background-image: none !important;
}

.app .main,
.main,
#mainContent {
  background: var(--theme-page-surface-soft) !important;
  background-image: var(--theme-page-surface-soft) !important;
}

.topbar,
.learn-topbar {
  background: var(--theme-topbar-surface) !important;
  border-color: var(--theme-pane-border) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
}

.welcome.home-ask-workspace,
.learn-chat-col {
  background: var(--theme-page-surface-soft) !important;
  background-image: var(--theme-page-surface-soft) !important;
}

.learn-chat-empty-state,
.learn-followup-bar,
.welcome.home-ask-workspace .home-ask-composer,
.welcome.home-ask-workspace #searchBox.home-ask-composer {
  border-color: var(--theme-pane-border) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.18)) !important;
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.18)) !important;
  box-shadow:
    var(--theme-composer-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -1px 0 rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(34px) saturate(190%) brightness(1.06) !important;
  -webkit-backdrop-filter: blur(34px) saturate(190%) brightness(1.06) !important;
}

.theme-toggle-group {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.theme-toggle-btn {
  white-space: nowrap !important;
}

/* OVERVIEW BOOK POLISH: fill the page, round both outer edges, show margin line, scroll notes. */


#learnView .chapter-overview-book-spread {
  aspect-ratio: auto !important;
}


#learnView .chapter-overview-book-page-left::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 78px !important;
  z-index: 3 !important;
  width: 2px !important;
  pointer-events: none !important;
  background: rgba(239, 68, 68, 0.58) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.26) !important;
}

#learnView .chapter-overview-book-page-right {
  overflow: hidden !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-list-block,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-list-block {
  min-height: 0 !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-list-head,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-list-head {
  flex: 0 0 auto !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-grid,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-grid {
  max-height: none !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  gap: 30px !important;
  padding: 18px 32px 28px 6px !important;
  margin: 0 -32px 0 0 !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-grid::-webkit-scrollbar,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-grid::-webkit-scrollbar {
  width: 8px !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-grid::-webkit-scrollbar-track,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-grid::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.04) !important;
  border-radius: 999px !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-grid::-webkit-scrollbar-thumb,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-grid::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.28) !important;
  border-radius: 999px !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-grid > .chapter-overview-subcard.chapter-overview-note,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-grid > .chapter-overview-subcard.chapter-overview-note {
  min-height: 88px !important;
  padding: 22px 24px !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-note:nth-child(2),
#learnView #learnBody.chapter-overview-split-active .chapter-overview-note:nth-child(2) {
  --sticky-x: 18px;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-note:nth-child(3),
#learnView #learnBody.chapter-overview-split-active .chapter-overview-note:nth-child(3) {
  --sticky-x: -8px;
}

@media (max-width: 1120px) {
  #learnView #learnBody.chapter-overview-active .chapter-overview-shell,
  #learnView #learnBody.chapter-overview-split-active .chapter-overview-shell {
    height: auto !important;
    min-height: 0 !important;
    padding: 16px 0 24px !important;
  }

  #learnView .chapter-overview-book-spread {
    height: auto !important;
    border-radius: 18px !important;
  }

  #learnView .chapter-overview-book-page-left,
  #learnView .chapter-overview-book-page-right {
    border-radius: 18px !important;
  }

  #learnView #learnBody.chapter-overview-active .chapter-overview-grid,
  #learnView #learnBody.chapter-overview-split-active .chapter-overview-grid {
    max-height: 520px !important;
    padding-right: 20px !important;
    margin-right: -20px !important;
  }
}

/* OVERVIEW BOOK EDGE-TO-EDGE PASS: remove stickers, add right margin line, fill viewport. */
#learnView #learnBody.chapter-overview-active #learnExplainCol,
#learnView #learnBody.chapter-overview-split-active #learnExplainCol,
#learnView #learnBody.chapter-overview-active .learn-explain-col,
#learnView #learnBody.chapter-overview-split-active .learn-explain-col {
  align-items: stretch !important;
  overflow: hidden !important;
}

#learnView #learnBody.chapter-overview-active #learnExplainScroll,
#learnView #learnBody.chapter-overview-split-active #learnExplainScroll,
#learnView #learnBody.chapter-overview-active .learn-explain-scroll,
#learnView #learnBody.chapter-overview-split-active .learn-explain-scroll {
  width: 100% !important;
  max-width: none !important;
  height: calc(100dvh - var(--header-height, 60px)) !important;
  margin: 0 !important;
  overflow: hidden !important;
}

#learnView #learnBody.chapter-overview-active #learnExplainContent,
#learnView #learnBody.chapter-overview-split-active #learnExplainContent,
#learnView #learnBody.chapter-overview-active .learn-explain-body,
#learnView #learnBody.chapter-overview-split-active .learn-explain-body {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-shell,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-shell {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-map,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-map {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

#learnView .chapter-overview-book-spread {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  border-radius: 22px !important;
  box-shadow:
    -2px 0 5px rgba(0, 0, 0, 0.05),
    18px 26px 54px rgba(15, 23, 42, 0.14),
    0 0 0 1px rgba(15, 23, 42, 0.06) !important;
}


#learnView #learnBody.chapter-overview-active .chapter-overview-book-page-left::before,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-book-page-left::before,
#learnView #learnBody.chapter-overview-active .chapter-overview-book-page-right::before,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-book-page-right::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 3 !important;
  width: 2px !important;
  pointer-events: none !important;
  background: rgba(239, 68, 68, 0.58) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.26) !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-book-page-left::before,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-book-page-left::before {
  left: 78px !important;
}


#learnView #learnBody.chapter-overview-active .chapter-overview-book-page-left::after,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-book-page-left::after,
#learnView #learnBody.chapter-overview-active .chapter-overview-book-page-right::after,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-book-page-right::after,
#learnView #learnBody.chapter-overview-active .chapter-overview-hero::after,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-hero::after,
#learnView #learnBody.chapter-overview-active .chapter-overview-list-block::after,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-list-block::after {
  content: none !important;
  display: none !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-note::after,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-note::after {
  content: none !important;
  display: none !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-book-page-left,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-book-page-left {
  padding-left: 112px !important;
}


/* OVERVIEW BOOK TRUE OVAL AND FULL-PAGE PASS */
#learnView #learnBody.chapter-overview-active #learnExplainScroll,
#learnView #learnBody.chapter-overview-split-active #learnExplainScroll,
#learnView #learnBody.chapter-overview-active .learn-explain-scroll,
#learnView #learnBody.chapter-overview-split-active .learn-explain-scroll {
  padding: 0 !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-book-spread,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-book-spread,
#learnView .chapter-overview-book-spread {
  display: flex !important;
  align-items: stretch !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 36px !important;
  clip-path: inset(0 round 36px) !important;
  background-color: #fefcf8 !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-book-page,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-book-page,
#learnView #learnBody.chapter-overview-active .chapter-overview-hero,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-hero,
#learnView #learnBody.chapter-overview-active .chapter-overview-list-block-side,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-list-block-side {
  flex: 1 1 0 !important;
  height: 100% !important;
  min-height: 100% !important;
  align-self: stretch !important;
  border: 0 !important;
  border-radius: 0 !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-book-page-left,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-book-page-left,
#learnView .chapter-overview-book-page-left {
  border-radius: 36px 0 0 36px !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-book-page-right,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-book-page-right,
#learnView .chapter-overview-book-page-right {
  border-radius: 0 36px 36px 0 !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-book-page-right::before,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-book-page-right::before {
  left: auto !important;
  right: 78px !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-book-page-right,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-book-page-right {
  padding-left: 70px !important;
  padding-right: 112px !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-list-block,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-list-block {
  justify-content: flex-start !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-grid,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* PAGE TURN EXPERIENCE: overview notes and lesson pages behave like paper. */
#learnView #learnExplainScroll,
#learnView #learnExplainContent,
#learnView .chapter-overview-map,
#learnView .chapter-overview-book-spread,
#learnView .lesson-page-frame {
  transform-style: preserve-3d !important;
  perspective: 1800px !important;
}

#learnView #learnExplainContent {
  position: relative !important;
  isolation: isolate !important;
}

#learnView #learnExplainContent.learn-page-turn-active {
  pointer-events: none !important;
}

#learnView #learnExplainContent.learn-page-turn-active::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 80 !important;
  pointer-events: none !important;
  border-radius: 34px !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.03), rgba(241,228,202,0.92) 44%, rgba(255,255,255,0.98) 57%, rgba(183,158,121,0.16)),
    repeating-linear-gradient(0deg, rgba(15,23,42,0.035) 0 1px, transparent 1px 32px),
    #fffdf7 !important;
  box-shadow:
    0 26px 60px rgba(15,23,42,0.22),
    inset 18px 0 34px rgba(88,63,35,0.13),
    inset -14px 0 28px rgba(255,255,255,0.7) !important;
  transform-origin: left center !important;
  backface-visibility: hidden !important;
}

#learnView #learnExplainContent.learn-page-turn-next::before {
  animation: learnPageTurnForward 640ms cubic-bezier(.2,.74,.2,1) both !important;
}

#learnView #learnExplainContent.learn-page-turn-prev::before {
  transform-origin: right center !important;
  animation: learnPageTurnBackward 640ms cubic-bezier(.2,.74,.2,1) both !important;
}

#learnView #learnExplainContent.learn-page-turn-next > *,
#learnView #learnExplainContent.learn-page-turn-prev > * {
  animation: learnPageTurnContentExit 255ms ease-out both !important;
}

#learnView #learnExplainContent.learn-page-turn-reveal > * {
  animation: learnPageTurnContentReveal 330ms cubic-bezier(.22,.78,.25,1) both !important;
}

@keyframes learnPageTurnForward {
  0% {
    opacity: 0;
    transform: rotateY(0deg) translateX(0) skewY(0deg);
  }
  8% {
    opacity: 1;
  }
  48% {
    opacity: 1;
    transform: rotateY(-72deg) translateX(2.2%) skewY(-1.8deg);
  }
  100% {
    opacity: 0;
    transform: rotateY(-168deg) translateX(7%) skewY(-3deg);
  }
}

@keyframes learnPageTurnBackward {
  0% {
    opacity: 0;
    transform: rotateY(0deg) translateX(0) skewY(0deg);
  }
  8% {
    opacity: 1;
  }
  48% {
    opacity: 1;
    transform: rotateY(72deg) translateX(-2.2%) skewY(1.8deg);
  }
  100% {
    opacity: 0;
    transform: rotateY(168deg) translateX(-7%) skewY(3deg);
  }
}

@keyframes learnPageTurnContentExit {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
  to {
    opacity: 0.32;
    transform: translateX(-12px) scale(.992);
    filter: blur(1.5px);
  }
}

@keyframes learnPageTurnContentReveal {
  from {
    opacity: 0;
    transform: translateX(18px) scale(.992);
    filter: blur(1.5px);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

#learnView .chapter-overview-subcard.is-launching {
  transform: translate3d(var(--sticky-x, 0px), -4px, 28px) rotate(var(--sticky-rot, 0deg)) scale(1.025) !important;
  box-shadow: 0 24px 34px rgba(15,23,42,0.18) !important;
}

/* Lesson page background: clean book paper, no red margin rules. */
#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) #learnExplainScroll,
#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .learn-explain-scroll {
  background-image:
    radial-gradient(circle at 20% 8%, rgba(255,255,255,0.86), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(244,232,205,0.22), transparent 34%),
    var(--theme-page-surface-soft) !important;
}

#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .learn-explain-body {
  background: transparent !important;
}

#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-frame {
  padding: clamp(42px, 5vw, 76px) clamp(46px, 6vw, 96px) clamp(34px, 4vw, 58px) !important;
  border-radius: 34px !important;
  overflow: hidden !important;
  background-color: #fffdf8 !important;
}

#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-frame::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 50% 0 0 !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, rgba(255,255,255,0.18), rgba(106,80,48,0.055) 100%) !important;
  opacity: .75 !important;
}

#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-frame::after {
  content: none !important;
  display: none !important;
}

#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-heading,
#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-content,
#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-extra {
  position: relative !important;
  z-index: 1 !important;
}

#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-heading {
  width: min(100%, 1120px) !important;
  margin-top: 0 !important;
}

#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-heading h2 {
  border-bottom-color: rgba(148, 163, 184, 0.32) !important;
}

@media (max-width: 900px) {
  #learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) #learnExplainScroll,
  #learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .learn-explain-scroll {
    padding: 16px !important;
  }

  #learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-frame {
    border-radius: 24px !important;
  }

  #learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-frame::after {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #learnView #learnExplainContent.learn-page-turn-active::before,
  #learnView #learnExplainContent.learn-page-turn-next > *,
  #learnView #learnExplainContent.learn-page-turn-prev > *,
  #learnView #learnExplainContent.learn-page-turn-reveal > * {
    animation: none !important;
  }
}

/* SETTINGS LIQUID GLASS: match the home Ask surface while keeping controls intact. */
#settingsView.settings-view,
#settingsView .settings-page-shell {
  background: transparent !important;
  background-image: none !important;
}

#settingsView .settings-page-shell {
  width: min(100%, 1380px);
  padding: clamp(32px, 4.8vw, 68px) clamp(28px, 5vw, 72px) 78px !important;
}

#settingsView .settings-page-header {
  position: relative;
  z-index: 1;
  margin-bottom: 30px !important;
}

#settingsView .settings-page-eyebrow,
#settingsView .settings-page-card-eyebrow {
  color: rgba(51, 65, 85, 0.62);
  letter-spacing: .18em;
}

#settingsView .settings-page-title {
  color: rgba(15, 23, 42, 0.88) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.55);
  letter-spacing: 0 !important;
}

#settingsView .settings-page-subtitle,
#settingsView .settings-page-copy {
  color: rgba(51, 65, 85, 0.78) !important;
}

#settingsView .settings-page-back,
#settingsView .feature-close-btn {
  border: 1px solid rgba(255, 255, 255, 0.64) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.48), rgba(255,255,255,0.20)) !important;
  box-shadow:
    0 14px 28px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.86),
    inset 0 -1px 0 rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}

#settingsView .settings-page-nav,
#settingsView .theme-toggle-group {
  border: 1px solid rgba(255, 255, 255, 0.56) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.38), rgba(255,255,255,0.16)) !important;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,0.38), rgba(255,255,255,0.16)) !important;
  box-shadow:
    0 20px 52px rgba(20, 118, 156, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.78),
    inset 0 -1px 0 rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(30px) saturate(185%) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(30px) saturate(185%) brightness(1.04);
}

#settingsView .settings-page-nav-item,
#settingsView .theme-toggle-btn {
  color: rgba(51, 65, 85, 0.68) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

#settingsView .settings-page-nav-item.active,
#settingsView .theme-toggle-btn.active {
  color: rgba(15, 23, 42, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.62), rgba(255,255,255,0.30)) !important;
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.88),
    inset 0 -1px 0 rgba(255,255,255,0.20) !important;
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
}

#settingsView .settings-page-content {
  gap: clamp(22px, 2.4vw, 34px) !important;
}

#settingsView .settings-page-card {
  border: 1px solid rgba(255, 255, 255, 0.58) !important;
  border-radius: 32px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.42), rgba(255,255,255,0.18)) !important;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,0.42), rgba(255,255,255,0.18)) !important;
  box-shadow:
    0 28px 72px rgba(20, 118, 156, 0.12),
    0 12px 30px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255,255,255,0.82),
    inset 0 -1px 0 rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(34px) saturate(190%) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(34px) saturate(190%) brightness(1.05);
}

#settingsView .settings-page-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background:
    radial-gradient(520px 160px at 16% 0%, rgba(255,255,255,0.54), transparent 70%),
    radial-gradient(460px 140px at 94% 100%, rgba(255,255,255,0.20), transparent 74%) !important;
  opacity: .72 !important;
  mix-blend-mode: screen !important;
}

#settingsView .settings-page-card::after {
  opacity: .34 !important;
  background:
    linear-gradient(90deg, rgba(125, 211, 252, 0.32), rgba(253, 224, 71, 0.24)) !important;
}

#settingsView .settings-page-card > * {
  position: relative;
  z-index: 1;
}

#settingsView .settings-page-card-title {
  color: rgba(15, 23, 42, 0.88) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.48);
}

#settingsView .settings-user-card,
#settingsView #settingsUserCard .settings-user-card {
  border: 1px solid rgba(255,255,255,0.60) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.40), rgba(255,255,255,0.16)) !important;
  box-shadow:
    0 18px 44px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.78),
    inset 0 -1px 0 rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(26px) saturate(185%);
  -webkit-backdrop-filter: blur(26px) saturate(185%);
}

#settingsView .settings-user-avatar,
#settingsView .settings-user-avatar-img {
  border: 1px solid rgba(255,255,255,0.74) !important;
  box-shadow:
    0 12px 26px rgba(14, 165, 233, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.68) !important;
}

#settingsView .settings-user-name {
  color: rgba(15, 23, 42, 0.90) !important;
}

#settingsView .settings-user-meta,
#settingsView .settings-page-version {
  color: rgba(51, 65, 85, 0.62) !important;
}

#settingsView .settings-page-actions .settings-primary-btn,
#settingsView .settings-page-actions .settings-secondary-btn,
#settingsView .settings-inline-btn,
#settingsView .settings-user-link {
  border: 1px solid rgba(255,255,255,0.58) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.44), rgba(255,255,255,0.18)) !important;
  color: rgba(15, 23, 42, 0.78) !important;
  box-shadow:
    0 12px 26px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.76) !important;
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
}

#settingsView .settings-page-actions .settings-primary-btn {
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.46) !important;
  background:
    linear-gradient(135deg, rgba(14,165,233,0.78), rgba(37,99,235,0.58)) !important;
  box-shadow:
    0 14px 28px rgba(14,165,233,0.20),
    inset 0 1px 0 rgba(255,255,255,0.42) !important;
}

#settingsView .settings-user-danger {
  color: rgba(225, 29, 72, 0.92) !important;
  border-color: rgba(255,255,255,0.58) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.42), rgba(255,228,230,0.28)) !important;
}

#settingsView .settings-page-version {
  border: 1px solid rgba(255,255,255,0.52) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.34), rgba(255,255,255,0.14)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.74) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

:root[data-theme="dusk"] #settingsView .settings-page-card,
:root[data-theme="dark"] #settingsView .settings-page-card {
  box-shadow:
    0 28px 72px rgba(148, 47, 62, 0.16),
    0 12px 30px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.78),
    inset 0 -1px 0 rgba(255,255,255,0.18) !important;
}

@media (max-width: 720px) {
  #settingsView .settings-page-shell {
    padding: 24px 16px 56px !important;
  }

  #settingsView .settings-page-card {
    border-radius: 24px !important;
  }
}

/* LESSON SINGLE-PAGE LOCK: no center spine, just one large sheet. */
#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-frame {
  background-image:
    repeating-linear-gradient(0deg, rgba(15,23,42,0.045) 0 1px, transparent 1px 34px),
    radial-gradient(circle at 52% 10%, rgba(255,255,255,0.92), transparent 44%),
    radial-gradient(circle at 12% 18%, rgba(244,232,205,0.22), transparent 34%),
    radial-gradient(circle at 88% 82%, rgba(244,232,205,0.18), transparent 36%),
    linear-gradient(180deg, #fffefb 0%, #fbf5e9 100%) !important;
  box-shadow:
    0 26px 60px rgba(15,23,42,0.16),
    0 0 0 1px rgba(120, 94, 61, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 0 36px rgba(88,63,35,0.035) !important;
}

#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-frame::before,
#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-frame::after {
  content: none !important;
  display: none !important;
}

/* LESSON FULL-BLEED PAGE LOCK: lecture paper fills the whole explanation pane. */
#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) #learnExplainCol,
#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .learn-explain-col {
  align-items: stretch !important;
  overflow: hidden !important;
}

#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) #learnExplainScroll,
#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .learn-explain-scroll {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) #learnExplainContent,
#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .learn-explain-body {
  width: 100% !important;
  max-width: none !important;
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-frame {
  width: 100% !important;
  max-width: none !important;
  min-height: 100% !important;
  height: auto !important;
  flex: 1 0 auto !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

@media (max-width: 900px) {
  #learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-frame {
    padding: 34px 22px 30px !important;
  }
}

/* LEARN Q&A GLASS LOCK: one calm tutor surface, no stacked frames. */
#learnView #learnChatCol,
#learnView #learnBody #learnChatCol,
#learnView #learnBody[data-panel-focus] #learnChatCol {
  overflow: hidden !important;
  background:
    radial-gradient(720px 520px at 70% 14%, rgba(125, 211, 252, 0.28), transparent 72%),
    radial-gradient(760px 560px at 35% 90%, rgba(110, 231, 183, 0.28), transparent 74%),
    linear-gradient(180deg, rgba(226, 246, 255, 0.84) 0%, rgba(211, 252, 232, 0.72) 100%) !important;
  background-image:
    radial-gradient(720px 520px at 70% 14%, rgba(125, 211, 252, 0.28), transparent 72%),
    radial-gradient(760px 560px at 35% 90%, rgba(110, 231, 183, 0.28), transparent 74%),
    linear-gradient(180deg, rgba(226, 246, 255, 0.84) 0%, rgba(211, 252, 232, 0.72) 100%) !important;
}

#learnView #learnChatCol .learn-chat-scroll,
#learnView #learnChatCol.is-chat-active #learnChatScroll,
#learnView #learnChatScroll.is-chat-active {
  padding: clamp(34px, 7vh, 88px) clamp(22px, 4.4vw, 62px) 160px !important;
  overflow-y: auto !important;
  overflow-x: visible !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

#learnView #learnChatCol .learn-chat-empty-state,
#learnView #learnChatCol #learnChatEmptyState,
#learnView #learnChatCol .edu-tutor-empty {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

#learnView #learnBody:not(.chat-collapsed) #learnChatCol:not(.is-chat-active) #learnChatEmptyState,
#learnView #learnBody:not(.chat-collapsed) #learnChatCol:not(.is-chat-active) .learn-chat-empty-state.edu-tutor-empty {
  transform: translateY(clamp(-24px, -2vh, -12px)) !important;
}

#learnView #learnChatCol #learnFollowupBar,
#learnView #learnBody #learnChatCol #learnFollowupBar,
#learnView #learnBody[data-panel-focus] #learnChatCol #learnFollowupBar,
#learnView #learnChatCol #learnFollowupBar:focus-within {
  position: relative !important;
  z-index: 40 !important;
  isolation: isolate !important;
  width: min(820px, calc(100% - 36px)) !important;
  max-width: 820px !important;
  min-height: 112px !important;
  margin: 0 auto clamp(16px, 2.6vh, 30px) !important;
  padding: 14px 18px 16px !important;
  overflow: visible !important;
  border: 1px solid rgba(255, 255, 255, 0.66) !important;
  border-radius: 20px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.18)) !important;
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.18)) !important;
  box-shadow:
    0 30px 78px rgba(20, 118, 156, 0.16),
    0 14px 34px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 -1px 0 rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(34px) saturate(190%) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(34px) saturate(190%) brightness(1.05) !important;
}

#learnView #learnChatCol #learnFollowupBar .input-wrapper,
#learnView #learnChatCol #learnFollowupBar .input-wrapper:focus-within {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

#learnView #learnChatCol #learnFollowupBar .bottom-actions {
  z-index: 90 !important;
  overflow: visible !important;
}

#learnView .edu-mode-menu,
#learnView #learnChatCol .edu-mode-menu {
  position: absolute !important;
  right: 66px !important;
  bottom: calc(100% + 16px) !important;
  z-index: 300 !important;
  width: min(292px, calc(100vw - 48px)) !important;
  min-width: 256px !important;
  max-height: none !important;
  padding: 10px !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  border: 1px solid rgba(255, 255, 255, 0.68) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.24)) !important;
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.24)) !important;
  box-shadow:
    0 26px 62px rgba(20, 118, 156, 0.18),
    0 10px 26px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 -1px 0 rgba(255, 255, 255, 0.20) !important;
  backdrop-filter: blur(30px) saturate(190%) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(30px) saturate(190%) brightness(1.05) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(8px) scale(0.98) !important;
  transform-origin: bottom right !important;
}

#learnView .edu-mode-menu.show,
#learnView #learnChatCol .edu-mode-menu.show {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

#learnView #learnChatCol .edu-mode-option {
  min-height: 66px !important;
  padding: 12px 14px !important;
  gap: 13px !important;
  border: 1px solid transparent !important;
  border-radius: 16px !important;
  background: transparent !important;
}

#learnView #learnChatCol .edu-mode-option:hover:not(.selected) {
  border-color: rgba(255, 255, 255, 0.42) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.14)) !important;
}

#learnView #learnChatCol .edu-mode-option.selected {
  border-color: rgba(255, 255, 255, 0.58) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.54), rgba(224, 242, 254, 0.36)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 10px 24px rgba(14, 165, 233, 0.10) !important;
}

#learnView #learnChatCol .edu-mode-text {
  min-width: 0 !important;
}

#learnView #learnChatCol .edu-mode-text strong,
#learnView #learnChatCol .edu-mode-option strong {
  white-space: nowrap !important;
}

#learnView #learnChatCol .edu-mode-text small,
#learnView #learnChatCol .edu-mode-option small {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

@media (max-width: 1180px) {
  #learnView .edu-mode-menu,
  #learnView #learnChatCol .edu-mode-menu {
    right: 0 !important;
  }
}

/* LEARN Q&A RUNTIME INJECTION OVERRIDE: outrank late app.js style tags. */

#learnView#learnView #learnBody#learnBody #learnChatCol#learnChatCol #learnChatEmptyState#learnChatEmptyState,
#learnView#learnView #learnBody#learnBody #learnChatCol#learnChatCol .learn-chat-empty-state.edu-tutor-empty {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#learnView#learnView #learnBody#learnBody #learnChatCol#learnChatCol #learnFollowupBar#learnFollowupBar,
#learnView#learnView #learnBody#learnBody #learnChatCol#learnChatCol #learnFollowupBar#learnFollowupBar:focus,
#learnView#learnView #learnBody#learnBody #learnChatCol#learnChatCol #learnFollowupBar#learnFollowupBar:focus-within,
#learnView#learnView #learnBody#learnBody[data-panel-focus] #learnChatCol#learnChatCol #learnFollowupBar#learnFollowupBar {
  z-index: 40 !important;
  overflow: visible !important;
  border: 1px solid rgba(255, 255, 255, 0.66) !important;
}

#learnView#learnView #learnBody#learnBody #learnChatCol#learnChatCol #learnFollowupBar#learnFollowupBar .bottom-actions {
  z-index: 90 !important;
  overflow: visible !important;
}

#learnView#learnView #learnBody#learnBody #learnChatCol#learnChatCol #learnModeMenu#learnModeMenu.edu-mode-menu {
  right: 66px !important;
  bottom: calc(100% + 16px) !important;
  z-index: 300 !important;
  width: min(292px, calc(100vw - 48px)) !important;
  min-width: 256px !important;
  max-height: none !important;
  padding: 10px !important;
  overflow: visible !important;
  gap: 7px !important;
  border: 1px solid rgba(255, 255, 255, 0.68) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.24)) !important;
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.24)) !important;
  box-shadow:
    0 26px 62px rgba(20, 118, 156, 0.18),
    0 10px 26px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 -1px 0 rgba(255, 255, 255, 0.20) !important;
  backdrop-filter: blur(30px) saturate(190%) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(30px) saturate(190%) brightness(1.05) !important;
}

#learnView#learnView #learnBody#learnBody #learnChatCol#learnChatCol #learnModeMenu#learnModeMenu .edu-mode-option {
  min-height: 66px !important;
  border: 1px solid transparent !important;
  border-radius: 16px !important;
  overflow-x: hidden !important;
}

#learnView#learnView #learnBody#learnBody #learnChatCol#learnChatCol #learnModeMenu#learnModeMenu .edu-mode-option.selected {
  border-color: rgba(255, 255, 255, 0.58) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.54), rgba(224, 242, 254, 0.36)) !important;
}

@media (max-width: 1180px) {
  #learnView#learnView #learnBody#learnBody #learnChatCol#learnChatCol #learnModeMenu#learnModeMenu.edu-mode-menu {
    right: 0 !important;
  }
}

/* BOOK SURFACE + CORNER NAV FINAL: themed corners, denser reading, real page-curl controls. */
#learnView #learnBody.chapter-overview-active #learnExplainScroll,
#learnView #learnBody.chapter-overview-split-active #learnExplainScroll,
#learnView #learnBody.chapter-overview-active .learn-explain-scroll,
#learnView #learnBody.chapter-overview-split-active .learn-explain-scroll {
  background:
    radial-gradient(780px 520px at 8% 0%, rgba(186, 230, 253, 0.56), transparent 74%),
    radial-gradient(840px 620px at 86% 90%, rgba(187, 247, 208, 0.42), transparent 76%),
    linear-gradient(180deg, #d9f3ff 0%, #eaf9f4 54%, #d5f8e8 100%) !important;
  background-image:
    radial-gradient(780px 520px at 8% 0%, rgba(186, 230, 253, 0.56), transparent 74%),
    radial-gradient(840px 620px at 86% 90%, rgba(187, 247, 208, 0.42), transparent 76%),
    linear-gradient(180deg, #d9f3ff 0%, #eaf9f4 54%, #d5f8e8 100%) !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-book-spread,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-book-spread,
#learnView .chapter-overview-book-spread {
  background:
    radial-gradient(780px 520px at 8% 0%, rgba(186, 230, 253, 0.56), transparent 74%),
    radial-gradient(840px 620px at 86% 90%, rgba(187, 247, 208, 0.42), transparent 76%),
    linear-gradient(180deg, #d9f3ff 0%, #eaf9f4 54%, #d5f8e8 100%) !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-book-page,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-book-page {
  background-clip: padding-box !important;
}

#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) #learnExplainScroll,
#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .learn-explain-scroll {
  padding: 0 !important;
  background:
    radial-gradient(circle at 20% 8%, rgba(255,255,255,0.86), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(244,232,205,0.22), transparent 34%),
    var(--theme-page-surface-soft) !important;
}

#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-content p {
  margin-bottom: 1.18em !important;
}

#learnView .learn-explain-scroll {
  position: relative !important;
}

#learnView #learnExplainCol {
  position: relative !important;
}































/* Q&A DEFAULT DOCKED LOCK: no floating Q&A bubble, overview also opens docked. */
#learnView #learnChatFab,
#learnView .learn-chat-fab,
#learnBody #learnChatFab,
#learnBody .learn-chat-fab,
#learnBody.chat-collapsed #learnChatFab,
#learnBody.chat-collapsed .learn-chat-fab {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#learnView #learnBody.chapter-overview-active #learnBodyInner,
#learnView #learnBody.chapter-overview-active .learn-body-inner,
#learnView #learnBody.chapter-overview-split-active #learnBodyInner,
#learnView #learnBody.chapter-overview-split-active .learn-body-inner,
#learnView #learnBody:not(.chat-collapsed):not(.explain-collapsed) .learn-body-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 12px minmax(360px, 45%) !important;
}

#learnView #learnBody.chapter-overview-active #learnExplainCol,
#learnView #learnBody.chapter-overview-active .learn-explain-col,
#learnView #learnBody.chapter-overview-split-active #learnExplainCol,
#learnView #learnBody.chapter-overview-split-active .learn-explain-col {
  display: flex !important;
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  border-right: 1px solid var(--border) !important;
  container-type: inline-size !important;
  container-name: overview-book-pane !important;
}

#learnView #learnBody.chapter-overview-active #learnChatCol,
#learnView #learnBody.chapter-overview-active .learn-chat-col,
#learnView #learnBody.chapter-overview-split-active #learnChatCol,
#learnView #learnBody.chapter-overview-split-active .learn-chat-col {
  display: flex !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 360px !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#learnView #learnBody.chapter-overview-active #learnChatScroll,
#learnView #learnBody.chapter-overview-active .learn-chat-scroll,
#learnView #learnBody.chapter-overview-split-active #learnChatScroll,
#learnView #learnBody.chapter-overview-split-active .learn-chat-scroll {
  width: 100% !important;
  max-width: none !important;
}

#learnView #learnBody.chapter-overview-active #learnResizer,
#learnView #learnBody.chapter-overview-active .learn-resizer,
#learnView #learnBody.chapter-overview-split-active #learnResizer,
#learnView #learnBody.chapter-overview-split-active .learn-resizer {
  display: block !important;
}

/* OVERVIEW DOCKED-QA READABILITY LOCK: keep notes readable when the Q&A pane narrows the book. */
#learnView #learnBody.chapter-overview-active .chapter-overview-grid > .chapter-overview-subcard.chapter-overview-note,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-grid > .chapter-overview-subcard.chapter-overview-note {
  grid-template-columns: minmax(0, 1fr) 32px !important;
  grid-template-areas:
    "marker cue"
    "title cue" !important;
  align-items: start !important;
  row-gap: 10px !important;
  column-gap: 16px !important;
  min-width: 0 !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-note .chapter-overview-subcard-marker,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-note .chapter-overview-subcard-marker {
  grid-area: marker !important;
  justify-self: start !important;
  max-width: 100% !important;
  white-space: nowrap !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-note .chapter-overview-subcard-copy,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-note .chapter-overview-subcard-copy {
  grid-area: title !important;
  width: 100% !important;
  min-width: 0 !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-note .chapter-overview-subcard-title,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-note .chapter-overview-subcard-title {
  max-width: 100% !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
}

#learnView #learnBody.chapter-overview-active .chapter-overview-note .chapter-overview-open-cue,
#learnView #learnBody.chapter-overview-split-active .chapter-overview-note .chapter-overview-open-cue {
  grid-area: cue !important;
  align-self: center !important;
}

@container overview-book-pane (max-width: 1040px) {
  #learnView #learnBody.chapter-overview-active .chapter-overview-book-spread,
  #learnView #learnBody.chapter-overview-split-active .chapter-overview-book-spread {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    overflow: hidden !important;
    background-color: #fefcf8 !important;
    background-image:
      url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.028'/%3E%3C/svg%3E") !important;
  }

  #learnView #learnBody.chapter-overview-active .chapter-overview-book-spread::before,
  #learnView #learnBody.chapter-overview-split-active .chapter-overview-book-spread::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    width: 36px !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
    pointer-events: none !important;
    background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.04) 28%, rgba(0,0,0,0.13) 50%, rgba(0,0,0,0.04) 72%, transparent 100%) !important;
  }

  #learnView #learnBody.chapter-overview-active .chapter-overview-book-spread::after,
  #learnView #learnBody.chapter-overview-split-active .chapter-overview-book-spread::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    width: 1px !important;
    transform: translateX(-50%) !important;
    z-index: 11 !important;
    pointer-events: none !important;
    background: rgba(15, 23, 42, 0.11) !important;
  }

  #learnView #learnBody.chapter-overview-active .chapter-overview-book-page,
  #learnView #learnBody.chapter-overview-split-active .chapter-overview-book-page,
  #learnView #learnBody.chapter-overview-active .chapter-overview-hero,
  #learnView #learnBody.chapter-overview-split-active .chapter-overview-hero,
  #learnView #learnBody.chapter-overview-active .chapter-overview-list-block-side,
  #learnView #learnBody.chapter-overview-split-active .chapter-overview-list-block-side {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    min-width: 0 !important;
    width: auto !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-size: 100% 40px !important;
    background-position: 0 0 !important;
    box-shadow: none !important;
  }

  #learnView #learnBody.chapter-overview-active .chapter-overview-book-page-left,
  #learnView #learnBody.chapter-overview-split-active .chapter-overview-book-page-left {
    flex-basis: 50% !important;
    display: flex !important;
    justify-content: flex-start !important;
    border-radius: 36px 0 0 36px !important;
    padding: clamp(34px, 4.2cqi, 46px) clamp(26px, 3.8cqi, 38px) clamp(34px, 4.2cqi, 46px) clamp(76px, 8.4cqi, 88px) !important;
    overflow: hidden !important;
    background-image:
      linear-gradient(90deg, transparent 62px, rgba(239, 68, 68, 0.56) 62px, rgba(239, 68, 68, 0.56) 64px, transparent 64px),
      repeating-linear-gradient(transparent 0, transparent 39px, rgba(148, 163, 184, 0.28) 39px, rgba(148, 163, 184, 0.28) 40px) !important;
  }

  #learnView #learnBody.chapter-overview-active .chapter-overview-book-page-right,
  #learnView #learnBody.chapter-overview-split-active .chapter-overview-book-page-right {
    flex-basis: 50% !important;
    display: flex !important;
    justify-content: flex-start !important;
    min-height: 0 !important;
    height: 100% !important;
    border-radius: 0 36px 36px 0 !important;
    padding: clamp(40px, 5cqi, 54px) clamp(32px, 4.4cqi, 46px) clamp(34px, 4.4cqi, 48px) clamp(48px, 5.4cqi, 58px) !important;
    overflow: hidden !important;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 64px), rgba(239, 68, 68, 0.56) calc(100% - 64px), rgba(239, 68, 68, 0.56) calc(100% - 62px), transparent calc(100% - 62px)),
      repeating-linear-gradient(transparent 0, transparent 39px, rgba(148, 163, 184, 0.28) 39px, rgba(148, 163, 184, 0.28) 40px) !important;
  }

  #learnView #learnBody.chapter-overview-active .chapter-overview-book-page-left::before,
  #learnView #learnBody.chapter-overview-split-active .chapter-overview-book-page-left::before,
  #learnView #learnBody.chapter-overview-active .chapter-overview-book-page-right::before,
  #learnView #learnBody.chapter-overview-split-active .chapter-overview-book-page-right::before {
    content: none !important;
    display: none !important;
  }

  #learnView #learnBody.chapter-overview-active .chapter-overview-hero-main,
  #learnView #learnBody.chapter-overview-split-active .chapter-overview-hero-main {
    max-width: 100% !important;
  }

  #learnView #learnBody.chapter-overview-active .chapter-overview-kicker,
  #learnView #learnBody.chapter-overview-split-active .chapter-overview-kicker {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
  }

  #learnView #learnBody.chapter-overview-active .chapter-overview-title,
  #learnView #learnBody.chapter-overview-split-active .chapter-overview-title {
    font-size: clamp(44px, 6.15cqi, 60px) !important;
    line-height: 1.02 !important;
    margin-bottom: clamp(14px, 2.2cqi, 22px) !important;
  }

  #learnView #learnBody.chapter-overview-active .chapter-overview-summary,
  #learnView #learnBody.chapter-overview-split-active .chapter-overview-summary {
    position: relative !important;
    max-height: 9lh !important;
    overflow: hidden !important;
    font-size: clamp(22px, 2.75cqi, 28px) !important;
    line-height: 40px !important;
  }

  #learnView #learnBody.chapter-overview-active .chapter-overview-summary::after,
  #learnView #learnBody.chapter-overview-split-active .chapter-overview-summary::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 82px !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(254, 252, 248, 0), rgba(254, 252, 248, 0.95)) !important;
  }

  #learnView #learnBody.chapter-overview-active .chapter-overview-list-head,
  #learnView #learnBody.chapter-overview-split-active .chapter-overview-list-head {
    margin: 0 0 clamp(18px, 2.4cqi, 28px) !important;
  }

  #learnView #learnBody.chapter-overview-active .chapter-overview-grid,
  #learnView #learnBody.chapter-overview-split-active .chapter-overview-grid {
    gap: clamp(20px, 2.6cqi, 28px) !important;
    padding: 14px 16px 30px 4px !important;
    margin: 0 -16px 0 0 !important;
  }

  #learnView #learnBody.chapter-overview-active .chapter-overview-grid > .chapter-overview-subcard.chapter-overview-note,
  #learnView #learnBody.chapter-overview-split-active .chapter-overview-grid > .chapter-overview-subcard.chapter-overview-note {
    min-height: 102px !important;
    padding: 18px 20px !important;
  }

  #learnView #learnBody.chapter-overview-active .chapter-overview-note:nth-child(2),
  #learnView #learnBody.chapter-overview-split-active .chapter-overview-note:nth-child(2),
  #learnView #learnBody.chapter-overview-active .chapter-overview-note:nth-child(3),
  #learnView #learnBody.chapter-overview-split-active .chapter-overview-note:nth-child(3),
  #learnView #learnBody.chapter-overview-active .chapter-overview-note:nth-child(4n),
  #learnView #learnBody.chapter-overview-split-active .chapter-overview-note:nth-child(4n) {
    --sticky-x: 0;
  }
}

/* Final override: lecture editorial type and Aquarius-style page curl */
#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-frame,
#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) #learnExplainContent {
  font-family: "Zilla Slab", Georgia, serif !important;
  color: #1E1A1D !important;
}

#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-heading h2 {
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.08 !important;
}

#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-content {
  font-size: clamp(1.1rem, 1.32vw, 1.45rem) !important;
  line-height: 1.62 !important;
}













/* True tail lesson title scale lock: keep large headings readable but calmer. */


/* Absolute EOF overview textbook scroll lock: chapter-level textbook pages must scroll. */
#learnView#learnView #learnBody#learnBody.chapter-overview-active.learn-textbook-active #learnExplainScroll#learnExplainScroll,
#learnView#learnView #learnBody#learnBody.chapter-overview-active.learn-textbook-active #learnExplainScroll#learnExplainScroll.textbook-mode {
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

#learnView#learnView #learnBody#learnBody.chapter-overview-active.learn-textbook-active #learnBookOverlay#learnBookOverlay {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  min-height: 100% !important;
  height: auto !important;
  overflow: visible !important;
  background: transparent !important;
}

#learnView#learnView #learnBody#learnBody.chapter-overview-active.learn-textbook-active #learnBookOverlay#learnBookOverlay .textbook-pages-flow {
  min-height: 100% !important;
  padding: clamp(12px, 2vh, 18px) clamp(24px, 4vw, 58px) clamp(48px, 8vh, 86px) !important;
}

#learnView#learnView #learnBody#learnBody.chapter-overview-active.learn-textbook-active #learnExplainContent#learnExplainContent {
  display: none !important;
}

#learnView#learnView #learnBody#learnBody.chapter-overview-active.learn-textbook-active #learnChatCol#learnChatCol,
#learnView#learnView #learnBody#learnBody.chapter-overview-active.learn-textbook-active #learnResizer#learnResizer {
  display: none !important;
}

/* Absolute EOF lesson title scale lock: lecture titles stay readable, not billboard-sized. */
#learnView#learnView #learnBody#learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-frame .lesson-page-heading {
  width: min(100%, 920px) !important;
  margin: 4px auto clamp(22px, 3vh, 34px) !important;
}

#learnView#learnView #learnBody#learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-frame .lesson-page-heading h2 {
  width: 100% !important;
  max-width: 920px !important;
  padding-bottom: clamp(14px, 1.7vw, 20px) !important;
  font-size: clamp(2.05rem, 3.15vw, 3.55rem) !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

@media (max-width: 760px) {
  #learnView#learnView #learnBody#learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-frame .lesson-page-heading h2 {
    font-size: clamp(1.85rem, 8vw, 2.7rem) !important;
  }
}

/* Sidebar Home active-state fix: Home only looks selected on the actual Home page. */
.app .sidebar .sidebar-home-link#navHomeBtn:not(.active) {
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  color: #6b778a !important;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.app .sidebar .sidebar-home-link#navHomeBtn:not(.active)::after {
  content: none !important;
  display: none !important;
}

.app .sidebar .sidebar-home-link#navHomeBtn:not(.active):hover {
  border: 0 !important;
  background: rgba(255,255,255,0.34) !important;
  color: #0f172a !important;
  box-shadow: none !important;
}

.app .sidebar .sidebar-home-link#navHomeBtn.active {
  border: 1px solid rgba(255,255,255,1) !important;
  background: rgba(255,255,255,0.95) !important;
  color: #0f172a !important;
  box-shadow:
    0 4px 12px rgba(2,132,199,0.05),
    inset 0 1px 0 #ffffff !important;
}

.app .sidebar .sidebar-home-link#navHomeBtn .sidebar-link-icon {
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: 0 !important;
  color: #0284c7 !important;
  transform: none !important;
}

.app .sidebar .sidebar-home-link#navHomeBtn:hover .sidebar-link-icon,
.app .sidebar .sidebar-home-link#navHomeBtn.active .sidebar-link-icon {
  color: #0ea5e9 !important;
  transform: translateY(-1px) !important;
}

/* Page close controls removal: Home is now the global return path. */
#learnView#learnView #learnClose.learn-close,
#topbarCloseBtn#topbarCloseBtn.feature-close-btn,
#settingsView#settingsView #settingsPageBackBtn.feature-close-btn,
#preferenceView#preferenceView #preferencePageBackBtn.feature-close-btn,
#courseTrackerView#courseTrackerView #courseTrackerCloseBtn.feature-close-btn,
#mistakeNotebookView#mistakeNotebookView #mistakeNotebookCloseBtn.feature-close-btn {
  display: none;
  visibility: hidden;
  width: 0;
  min-width: 0;
  max-width: 0;
  height: 0;
  min-height: 0;
  max-height: 0;
  padding: 0;
  margin: 0;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

#learnView .learn-topbar-actions:has(#learnClose.learn-close) {
  gap: 0 !important;
}

/* Sidebar Home icon cleanup: keep the glass nav pill, remove the extra box around the house icon. */
.app .sidebar .sidebar-home-link#navHomeBtn .sidebar-link-icon::before,
.app .sidebar .sidebar-home-link#navHomeBtn .sidebar-link-icon::after {
  content: none !important;
  display: none !important;
}

.app .sidebar .sidebar-home-link#navHomeBtn .sidebar-link-icon i {
  display: block !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 25px !important;
  line-height: 1 !important;
}

/* Lecture/Textbook topbar glass relocation: keep controls in the title rail and give the freed space to content. */
#learnView .learn-topbar {
  min-height: 62px !important;
  height: auto !important;
  padding: 10px clamp(14px, 1.8vw, 24px) !important;
  gap: 16px !important;
  background:
    radial-gradient(520px 150px at 12% 0%, rgba(255,255,255,0.38), transparent 70%),
    linear-gradient(135deg, rgba(255,255,255,0.34), rgba(255,255,255,0.13)) !important;
  border-bottom: 1px solid rgba(255,255,255,0.52) !important;
  box-shadow:
    0 14px 30px rgba(15,23,42,0.08),
    inset 0 1px 0 rgba(255,255,255,0.72),
    inset 0 -1px 0 rgba(255,255,255,0.16) !important;
  backdrop-filter: blur(30px) saturate(185%) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(30px) saturate(185%) brightness(1.04) !important;
}

#learnView .learn-topbar-left {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 11px !important;
}

#learnView .learn-title {
  min-width: 0 !important;
  color: rgba(15,23,42,0.88) !important;
  font-family: "Zilla Slab", Georgia, serif !important;
  font-size: clamp(18px, 1.35vw, 24px) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

#learnView .learn-topbar-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

#learnView#learnView #learnExplainToolbar,
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) #learnExplainToolbar,
#learnView#learnView #learnBody.chapter-overview-split-active #learnExplainToolbar {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

#learnView #learnExplainToolbar .learn-toolbar-center {
  display: none !important;
}

#learnView#learnView .learn-topbar-actions #learnViewSelector,
#learnView#learnView #learnViewSelector {
  position: static !important;
  order: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 38px !important;
  padding: 4px !important;
  margin: 0 !important;
  border: 1px solid rgba(255,255,255,0.62) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.44), rgba(255,255,255,0.17)) !important;
  box-shadow:
    0 12px 24px rgba(15,23,42,0.08),
    inset 0 1px 0 rgba(255,255,255,0.82),
    inset 0 -1px 0 rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(22px) saturate(180%) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%) brightness(1.05) !important;
  pointer-events: auto !important;
}

#learnView #btnLectureView,
#learnView #btnTextbookView {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 86px !important;
  width: auto !important;
  height: 30px !important;
  padding: 0 13px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(71,85,105,0.82) !important;
  font-family: "Quicksand", "Nunito", sans-serif !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transform: none !important;
}

#learnView #btnLectureView.active,
#learnView #btnTextbookView.active {
  color: rgba(15,23,42,0.92) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.82), rgba(255,255,255,0.48)) !important;
  box-shadow:
    0 8px 16px rgba(15,23,42,0.08),
    inset 0 1px 0 rgba(255,255,255,0.92) !important;
}

#learnView .learn-close {
  order: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 38px !important;
  min-width: 72px !important;
  padding: 0 17px !important;
  border: 1px solid rgba(255,255,255,0.64) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.50), rgba(255,255,255,0.18)) !important;
  color: rgba(30,41,59,0.78) !important;
  box-shadow:
    0 12px 24px rgba(15,23,42,0.08),
    inset 0 1px 0 rgba(255,255,255,0.84),
    inset 0 -1px 0 rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(22px) saturate(180%) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%) brightness(1.05) !important;
  font-family: "Quicksand", "Nunito", sans-serif !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

#learnView#learnView .learn-close:hover {
  color: rgba(15,23,42,0.94) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.68), rgba(255,255,255,0.26)) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 16px 30px rgba(15,23,42,0.10),
    inset 0 1px 0 rgba(255,255,255,0.90) !important;
}

#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) #learnExplainScroll {
  padding-top: 0 !important;
}

#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) #learnExplainContent {
  padding-top: 0 !important;
}

@media (max-width: 820px) {
  #learnView#learnView .learn-topbar {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }

  #learnView#learnView .learn-topbar-left,
  #learnView#learnView .learn-topbar-actions {
    width: 100% !important;
  }

  #learnView#learnView .learn-topbar-actions {
    justify-content: space-between !important;
  }

  #learnView#learnView #learnViewSelector {
    flex: 1 1 auto !important;
  }
}

/* Home answer-style menu: match the lesson Q&A glass selector. */

.welcome.home-ask-workspace #homeModeMenu.home-mode-menu {
  position: absolute !important;
  min-width: 256px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.welcome.home-ask-workspace #homeModeMenu.home-mode-menu.show {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.welcome.home-ask-workspace #homeModeMenu .home-mode-option {
  width: 100% !important;
  display: flex !important;
  align-items: flex-start !important;
  color: #0f172a !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important;
}


.welcome.home-ask-workspace #homeModeMenu .home-mode-menu-icon {
  min-height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 24px !important;
  line-height: 1 !important;
}

.welcome.home-ask-workspace #homeModeMenu .icon-fast { color: #f59e0b !important; }
.welcome.home-ask-workspace #homeModeMenu .icon-balanced { color: #0284c7 !important; }
.welcome.home-ask-workspace #homeModeMenu .icon-detailed { color: #8b5cf6 !important; }

.welcome.home-ask-workspace #homeModeMenu .home-mode-menu-text {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.welcome.home-ask-workspace #homeModeMenu .home-mode-menu-text strong {
  white-space: nowrap !important;
}

.welcome.home-ask-workspace #homeModeMenu .home-mode-menu-text small {
  white-space: normal !important;
}











/* Dot-marker chrome for left/right replies. Provides position:absolute +
   content for the .is-left::before / .is-right::before offset rules below
   (left:-5px / right:-5px). Deleting this group leaves those offsets with
   no positioned pseudo-element to push. */



















/* Sidebar Home entry: a quiet glass shortcut above Syllabus. */
.app .sidebar .sidebar-home-link#navHomeBtn {
  margin-bottom: 8px !important;
  border: 1px solid rgba(255,255,255,0.62) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.58), rgba(255,255,255,0.24)) !important;
  color: rgba(15,23,42,0.82) !important;
  box-shadow:
    0 10px 24px rgba(14,165,233,0.08),
    inset 0 1px 0 rgba(255,255,255,0.78) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

.app .sidebar .sidebar-home-link#navHomeBtn::after {
  content: "" !important;
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: -8px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(14,165,233,0.22), transparent) !important;
  pointer-events: none;
}

.app .sidebar .sidebar-home-link#navHomeBtn:hover,
.app .sidebar .sidebar-home-link#navHomeBtn.active {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.92), rgba(224,242,254,0.68)) !important;
  border-color: rgba(255,255,255,0.9) !important;
  color: #0f172a !important;
  box-shadow:
    0 12px 28px rgba(14,165,233,0.12),
    inset 0 1px 0 rgba(255,255,255,0.94) !important;
}

.app.sidebar-collapsed #leftSidebar .sidebar-home-link#navHomeBtn,
.app #leftSidebar.sidebar.collapsed .sidebar-home-link#navHomeBtn {
  margin-bottom: 10px !important;
}

/* Textbook mode lock: start at the book page and remove lecture-only pagination. */
#learnView#learnView #learnBody#learnBody.learn-textbook-active #learnExplainScroll#learnExplainScroll,
#learnView#learnView #learnBody#learnBody.learn-textbook-active #learnExplainScroll#learnExplainScroll.textbook-mode {
  padding: 0 !important;
  scroll-padding-top: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background-image:
    radial-gradient(circle at 18% 6%, rgba(255,255,255,0.82), transparent 34%),
    radial-gradient(circle at 82% 16%, rgba(255,255,255,0.44), transparent 36%),
    var(--theme-page-surface-soft) !important;
}

#learnView#learnView #learnBody#learnBody.learn-textbook-active #learnBookOverlay#learnBookOverlay {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

#learnView#learnView #learnBody#learnBody.learn-textbook-active #learnBookOverlay#learnBookOverlay .textbook-pages-flow {
  padding: clamp(12px, 2vh, 18px) clamp(24px, 4vw, 58px) clamp(32px, 5vh, 58px) !important;
  gap: clamp(18px, 3vh, 28px) !important;
}

#learnView#learnView #learnBody#learnBody.learn-textbook-active #learnExplainContent#learnExplainContent {
  display: none !important;
}






















/* True EOF Mistake Notebook layout lock: horizontal case rail + full-width review desk. */
#mistakeNotebookView#mistakeNotebookView .mistake-notebook-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  gap: 18px !important;
  align-items: stretch;
}

#mistakeNotebookView .mistake-list-card,
#mistakeNotebookView .mistake-detail-card {
  width: 100% !important;
  max-width: none !important;
}

#mistakeNotebookView#mistakeNotebookView .mistake-list {
  display: grid;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(260px, 320px) !important;
  grid-template-columns: none !important;
  gap: 12px !important;
  max-height: none !important;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 4px 8px 2px !important;
  scroll-snap-type: x proximity;
}

#mistakeNotebookView .mistake-list-item {
  min-height: 64px !important;
  scroll-snap-align: start;
}

#mistakeNotebookView .mistake-detail-content {
  display: grid;
  grid-template-rows: auto auto auto !important;
  gap: 20px !important;
}

#mistakeNotebookView .mistake-workspace {
  display: grid;
  grid-template-columns: minmax(420px, 1.18fr) minmax(360px, 0.82fr) !important;
  gap: clamp(18px, 2.2vw, 28px) !important;
  margin-top: 0 !important;
  align-items: stretch;
}

#mistakeNotebookView#mistakeNotebookView .mistake-image-frame {
  min-height: clamp(460px, 48vh, 660px) !important;
}

#mistakeNotebookView#mistakeNotebookView .mistake-notes-panel {
  display: grid;
  grid-template-rows: auto auto auto minmax(220px, 1fr) auto auto auto !important;
  align-content: start;
}

#mistakeNotebookView#mistakeNotebookView .mistake-actions {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto !important;
  align-items: center;
}

#mistakeNotebookView#mistakeNotebookView .mistake-ai-answer-panel {
  margin-top: 0 !important;
  max-height: min(34vh, 360px) !important;
  overflow: auto;
}

@media (max-width: 1180px) {
  #mistakeNotebookView .mistake-workspace {
    grid-template-columns: 1fr !important;
  }

  #mistakeNotebookView#mistakeNotebookView .mistake-ai-answer-panel {
    max-height: none !important;
  }
}

@media (max-width: 820px) {
  #mistakeNotebookView#mistakeNotebookView .mistake-notebook-toolbar,
  #mistakeNotebookView#mistakeNotebookView .mistake-actions {
    grid-template-columns: 1fr !important;
  }

  #mistakeNotebookView#mistakeNotebookView .mistake-list {
    grid-auto-columns: minmax(230px, 82vw) !important;
  }
}

/* Mistake Notebook toolbar + list-card layout. */
#mistakeNotebookView .mistake-notebook-toolbar {
  margin-bottom: 18px !important;
}


#mistakeNotebookView .mistake-list-card .mistake-card-kicker {
  margin-bottom: 12px !important;
}


#mistakeNotebookView .mistake-detail-head {
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(255,255,255,0.36) !important;
}


#mistakeNotebookView .mistake-danger-btn {
  min-width: 94px !important;
}


/* Preference page liquid glass redesign: compact memory cockpit over the theme surface. */
#preferenceView.preference-view {
  background: var(--theme-page-surface-soft);
  background-image: var(--theme-page-surface-soft);
  overflow: hidden;
}

#preferenceView .preference-page-shell {
  width: min(100%, 1480px);
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  padding: clamp(22px, 3vw, 42px) clamp(24px, 4.2vw, 64px) 54px;
  overflow-y: auto;
  background: transparent;
  background-image: none;
}

#preferenceView .preference-page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 20px;
  margin: 0 0 clamp(18px, 2.2vw, 28px);
}

#preferenceView .preference-page-header > div:first-child {
  max-width: 980px;
}

#preferenceView .preference-page-eyebrow,
#preferenceView .preference-card-eyebrow {
  margin-bottom: 8px;
  color: rgba(51,65,85,0.66);
  font-family: "DM Mono", "SFMono-Regular", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

#preferenceView .preference-page-title {
  max-width: 920px;
  margin: 0 0 12px;
  color: rgba(15,23,42,0.92) !important;
  font-family: "Quicksand", "Nunito", sans-serif;
  font-size: clamp(48px, 5.8vw, 82px);
  line-height: 0.92;
  letter-spacing: 0 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.56);
}

#preferenceView .preference-page-subtitle,
#preferenceView .preference-page-copy,
#preferenceView .preference-profile-note {
  max-width: 920px;
  margin: 0;
  color: rgba(51,65,85,0.72) !important;
  font-family: "Nunito", sans-serif;
  font-size: 17px !important;
  line-height: 1.62 !important;
}

#preferenceView .feature-close-btn {
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255,255,255,0.62) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.52), rgba(255,255,255,0.20)) !important;
  color: rgba(15,23,42,0.74) !important;
  box-shadow:
    0 18px 38px rgba(15,23,42,0.10),
    inset 0 1px 0 rgba(255,255,255,0.78),
    inset 0 -1px 0 rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}

#preferenceView .preference-page-grid {
  display: grid;
  gap: clamp(18px, 2vw, 26px);
  align-items: stretch;
}

#preferenceView .preference-profile-card {
  position: relative;
  min-height: 0;
  border: 1px solid rgba(255,255,255,0.58);
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.44), rgba(255,255,255,0.16));
  box-shadow:
    var(--theme-composer-shadow),
    inset 0 1px 0 rgba(255,255,255,0.82),
    inset 0 -1px 0 rgba(255,255,255,0.18);
  backdrop-filter: blur(34px) saturate(190%) brightness(1.05);
  -webkit-backdrop-filter: blur(34px) saturate(190%) brightness(1.05);
  overflow: hidden;
}

#preferenceView .preference-profile-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background:
    radial-gradient(520px 180px at 14% 0%, rgba(255,255,255,0.56), transparent 72%),
    radial-gradient(440px 160px at 98% 100%, rgba(255,255,255,0.18), transparent 74%) !important;
  opacity: .78 !important;
  mix-blend-mode: screen !important;
}

#preferenceView .preference-profile-card > * {
  position: relative;
  z-index: 1;
}

#preferenceView .preference-profile-card {
  display: grid;
  grid-template-rows: auto minmax(420px, 1fr) auto auto !important;
  padding: clamp(24px, 2.6vw, 36px);
}

#preferenceView .preference-card-tape,
#preferenceView .preference-card-tape::after {
  content: none;
  display: none;
}

#preferenceView .preference-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: clamp(16px, 1.8vw, 22px);
}

#preferenceView .preference-card-title {
  margin: 0;
  color: rgba(15,23,42,0.90) !important;
  font-family: "Quicksand", "Nunito", sans-serif;
  font-size: clamp(28px, 2.8vw, 44px);
  line-height: 1.08;
  letter-spacing: 0 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.52);
}

#preferenceView .preference-save-state {
  flex: 0 0 auto;
  max-width: 170px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,0.64);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.54), rgba(255,255,255,0.18));
  color: rgba(51,65,85,0.76);
  font-family: "DM Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  box-shadow:
    0 12px 24px rgba(15,23,42,0.08),
    inset 0 1px 0 rgba(255,255,255,0.78);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
}

#preferenceView .preference-save-state[data-tone="working"] {
  border-color: rgba(125,211,252,0.66);
  color: #0369a1;
}

#preferenceView .preference-save-state[data-tone="saved"] {
  border-color: rgba(110,231,183,0.70);
  color: #047857;
}

#preferenceView .preference-save-state[data-tone="error"] {
  border-color: rgba(251,113,133,0.74);
  color: #be123c;
}

#preferenceView .preference-profile-editor {
  border: 1px solid rgba(255,255,255,0.56);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.34), rgba(255,255,255,0.12));
  color: rgba(15,23,42,0.86);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.70),
    0 12px 28px rgba(15,23,42,0.055);
  backdrop-filter: blur(18px) saturate(165%);
  -webkit-backdrop-filter: blur(18px) saturate(165%);
}

#preferenceView .preference-profile-editor {
  font-family: "Nunito", sans-serif !important;
  font-size: 15px;
  line-height: 1.7;
  padding: 18px 20px;
  resize: vertical;
}

#preferenceView .preference-profile-editor {
  min-height: 420px;
  height: 100% !important;
}

#preferenceView .preference-profile-editor:focus {
  border-color: rgba(125,211,252,0.76);
  box-shadow:
    0 0 0 4px rgba(125,211,252,0.18),
    0 18px 38px rgba(14,165,233,0.12),
    inset 0 1px 0 rgba(255,255,255,0.82);
  transform: none;
}

#preferenceView .preference-profile-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

#preferenceView .preference-primary-btn,
#preferenceView .preference-secondary-btn {
  min-height: 50px;
  border: 1px solid rgba(255,255,255,0.62);
  border-radius: 16px;
  padding: 0 18px;
  font-family: "Quicksand", "Nunito", sans-serif !important;
  font-size: 14px;
  font-weight: 800;
  box-shadow:
    0 16px 30px rgba(15,23,42,0.09),
    inset 0 1px 0 rgba(255,255,255,0.78),
    inset 0 -1px 0 rgba(255,255,255,0.18);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
}

#preferenceView .preference-primary-btn {
  background:
    linear-gradient(135deg, rgba(14,165,233,0.78), rgba(16,185,129,0.62));
  color: #fff;
}

#preferenceView .preference-secondary-btn {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.48), rgba(255,255,255,0.18));
  color: rgba(30,41,59,0.78);
}

#preferenceView .preference-primary-btn:hover,
#preferenceView .preference-secondary-btn:hover {
  transform: translateY(-1px);
}

#preferenceView .preference-primary-btn:active,
#preferenceView .preference-secondary-btn:active {
  transform: translateY(1px) !important;
  box-shadow:
    0 8px 18px rgba(15,23,42,0.08),
    inset 0 1px 0 rgba(255,255,255,0.62) !important;
}

#preferenceView .preference-profile-note {
  margin-top: 14px;
  font-size: 13px !important;
  color: rgba(71,85,105,0.62) !important;
}

@media (max-width: 1180px) {
  #preferenceView .preference-profile-card {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 760px) {
  #preferenceView .preference-page-shell {
    padding: 24px 16px 46px;
  }

  #preferenceView .preference-page-header,
  #preferenceView .preference-card-head {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  #preferenceView .preference-profile-actions {
    grid-template-columns: 1fr;
  }
}

/* Mistake Notebook liquid glass redesign: review cockpit aligned with the theme. */
#mistakeNotebookView.mistake-notebook-view {
  background: var(--theme-page-surface-soft);
  background-image: var(--theme-page-surface-soft);
  overflow: hidden;
}

#mistakeNotebookView .mistake-notebook-shell {
  width: min(100%, 1500px);
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  padding: clamp(22px, 3vw, 42px) clamp(24px, 4.2vw, 64px) 54px;
  overflow-y: auto;
  background: transparent;
  background-image: none;
}

#mistakeNotebookView .mistake-notebook-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start;
  gap: 20px !important;
  margin: 0 0 clamp(18px, 2.2vw, 26px) !important;
}

#mistakeNotebookView .mistake-notebook-header > div:first-child {
  max-width: 980px !important;
}

#mistakeNotebookView .mistake-notebook-eyebrow,
#mistakeNotebookView .mistake-card-kicker,
#mistakeNotebookView .mistake-field-label {
  margin-bottom: 8px !important;
  color: rgba(51,65,85,0.66);
  font-family: "DM Mono", "SFMono-Regular", monospace;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

#mistakeNotebookView .mistake-notebook-title {
  max-width: 920px !important;
  margin: 0 0 12px !important;
  color: rgba(15,23,42,0.92) !important;
  font-family: "Quicksand", "Nunito", sans-serif;
  font-size: clamp(48px, 5.8vw, 82px) !important;
  line-height: 0.92 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.56);
}

#mistakeNotebookView .mistake-notebook-subtitle {
  max-width: 940px !important;
  margin: 0 !important;
  color: rgba(51,65,85,0.72) !important;
  font-family: "Nunito", sans-serif;
  font-size: 17px !important;
  line-height: 1.62 !important;
}

#mistakeNotebookView .feature-close-btn {
  width: 52px !important;
  height: 52px !important;
  border: 1px solid rgba(255,255,255,0.62) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.52), rgba(255,255,255,0.20)) !important;
  color: rgba(15,23,42,0.74) !important;
  box-shadow:
    0 18px 38px rgba(15,23,42,0.10),
    inset 0 1px 0 rgba(255,255,255,0.78),
    inset 0 -1px 0 rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}

#mistakeNotebookView .mistake-notebook-toolbar,
#mistakeNotebookView .mistake-list-card,
#mistakeNotebookView .mistake-detail-card,
#mistakeNotebookView .mistake-ai-answer-panel {
  position: relative;
  border: 1px solid rgba(255,255,255,0.58) !important;
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.44), rgba(255,255,255,0.16)) !important;
  box-shadow:
    var(--theme-composer-shadow),
    inset 0 1px 0 rgba(255,255,255,0.82),
    inset 0 -1px 0 rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(34px) saturate(190%) brightness(1.05);
  -webkit-backdrop-filter: blur(34px) saturate(190%) brightness(1.05);
  overflow: hidden;
}

#mistakeNotebookView .mistake-notebook-toolbar::before,
#mistakeNotebookView .mistake-list-card::before,
#mistakeNotebookView .mistake-detail-card::before,
#mistakeNotebookView .mistake-ai-answer-panel::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background:
    radial-gradient(540px 180px at 14% 0%, rgba(255,255,255,0.56), transparent 72%),
    radial-gradient(460px 160px at 98% 100%, rgba(255,255,255,0.18), transparent 74%) !important;
  opacity: .78 !important;
  mix-blend-mode: screen !important;
}

#mistakeNotebookView .mistake-notebook-toolbar > *,
#mistakeNotebookView .mistake-list-card > *,
#mistakeNotebookView .mistake-detail-card > *,
#mistakeNotebookView .mistake-ai-answer-panel > * {
  position: relative;
  z-index: 1;
}

#mistakeNotebookView .mistake-notebook-toolbar {
  display: grid;
  grid-template-columns: auto minmax(280px, 1fr) auto !important;
  align-items: center;
  gap: 16px !important;
  margin: 0 0 clamp(18px, 2.1vw, 26px) !important;
  padding: 16px !important;
}

#mistakeNotebookView .mistake-upload-btn,
#mistakeNotebookView .mistake-primary-btn,
#mistakeNotebookView .mistake-secondary-btn,
#mistakeNotebookView .mistake-danger-btn,
#mistakeNotebookView .mistake-mini-btn {
  border: 1px solid rgba(255,255,255,0.62) !important;
  border-radius: 16px;
  font-family: "Quicksand", "Nunito", sans-serif !important;
  font-weight: 800;
  box-shadow:
    0 16px 30px rgba(15,23,42,0.09),
    inset 0 1px 0 rgba(255,255,255,0.78),
    inset 0 -1px 0 rgba(255,255,255,0.18);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
}

#mistakeNotebookView .mistake-upload-btn,
#mistakeNotebookView .mistake-primary-btn {
  background:
    linear-gradient(135deg, rgba(14,165,233,0.82), rgba(16,185,129,0.64));
  color: #fff;
}

#mistakeNotebookView .mistake-secondary-btn,
#mistakeNotebookView .mistake-mini-btn {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.50), rgba(255,255,255,0.18));
  color: rgba(30,41,59,0.78);
}

#mistakeNotebookView .mistake-danger-btn {
  background:
    linear-gradient(135deg, rgba(255,241,242,0.64), rgba(255,255,255,0.18));
  color: #be123c;
}

#mistakeNotebookView .mistake-upload-btn {
  min-height: 58px !important;
  padding: 0 22px !important;
  gap: 10px !important;
}

#mistakeNotebookView .mistake-upload-btn small {
  display: inline-flex;
  align-items: center;
  min-height: 26px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.20) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.38) !important;
  color: rgba(255,255,255,0.86) !important;
  font-size: 12px !important;
  font-weight: 800;
  letter-spacing: 0 !important;
  white-space: nowrap;
}

#mistakeNotebookView .mistake-search-wrap,
#mistakeNotebookView .mistake-count-pill,
#mistakeNotebookView .mistake-list-item,
#mistakeNotebookView .mistake-list-thumb,
#mistakeNotebookView .mistake-image-frame,
#mistakeNotebookView .mistake-text-preview,
#mistakeNotebookView .mistake-tags-input,
#mistakeNotebookView .mistake-notes-input,
#mistakeNotebookView .mistake-ai-instruction,
#mistakeNotebookView #mistakePageIndicator {
  border: 1px solid rgba(255,255,255,0.56) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.34), rgba(255,255,255,0.12)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.70),
    0 12px 28px rgba(15,23,42,0.055) !important;
  backdrop-filter: blur(18px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(165%);
}

#mistakeNotebookView .mistake-search-wrap {
  min-width: 0 !important;
  min-height: 58px !important;
  border-radius: 18px;
  padding: 0 18px !important;
  color: rgba(71,85,105,0.70) !important;
}

#mistakeNotebookView .mistake-search-wrap input {
  min-height: 56px !important;
  color: rgba(15,23,42,0.86) !important;
  font-size: 15px !important;
}

#mistakeNotebookView .mistake-count-pill {
  min-height: 58px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 20px !important;
  color: rgba(30,41,59,0.76) !important;
  font-family: "DM Mono", monospace;
  font-size: 13px !important;
  font-weight: 700;
}

#mistakeNotebookView .mistake-notebook-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.30fr) minmax(0, 0.70fr) !important;
  gap: clamp(18px, 2vw, 26px) !important;
  align-items: start;
}

#mistakeNotebookView .mistake-list-card {
  padding: clamp(20px, 2vw, 28px) !important;
}

#mistakeNotebookView .mistake-detail-card {
  padding: clamp(22px, 2.4vw, 34px) !important;
}

#mistakeNotebookView .mistake-list {
  display: grid;
  gap: 12px !important;
  max-height: min(66vh, 760px) !important;
  overflow: auto;
  padding-right: 2px !important;
}

#mistakeNotebookView .mistake-list-item {
  grid-template-columns: 58px minmax(0, 1fr) !important;
  gap: 14px !important;
  padding: 12px !important;
  border-radius: 20px;
  color: rgba(51,65,85,0.78) !important;
}

#mistakeNotebookView .mistake-list-item.active {
  border-color: rgba(125,211,252,0.78) !important;
  box-shadow:
    0 0 0 4px rgba(125,211,252,0.16),
    0 16px 34px rgba(14,165,233,0.10),
    inset 0 1px 0 rgba(255,255,255,0.78) !important;
}

#mistakeNotebookView .mistake-list-thumb {
  width: 58px !important;
  height: 58px !important;
  border-radius: 18px;
  color: rgba(51,65,85,0.52);
}

#mistakeNotebookView .mistake-list-meta strong {
  color: rgba(15,23,42,0.88) !important;
  font-size: 15px !important;
  letter-spacing: 0 !important;
}

#mistakeNotebookView .mistake-list-meta small,
#mistakeNotebookView .mistake-list-empty {
  color: rgba(71,85,105,0.66) !important;
}

#mistakeNotebookView .mistake-detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start;
  gap: 18px !important;
}

#mistakeNotebookView .mistake-title-input {
  width: 100% !important;
  max-width: none !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.44) !important;
  background: transparent;
  box-shadow: none;
  color: rgba(15,23,42,0.92) !important;
  font-size: clamp(30px, 3.2vw, 46px) !important;
  line-height: 1.08 !important;
  letter-spacing: 0;
  padding: 2px 0 12px !important;
}

#mistakeNotebookView .mistake-page-controls {
  gap: 10px !important;
}

#mistakeNotebookView #mistakePageIndicator {
  min-width: 82px !important;
  min-height: 42px !important;
  border-radius: 15px !important;
  color: rgba(15,23,42,0.78) !important;
  font-family: "Fira Code", "DM Mono", monospace !important;
  font-size: 14px !important;
  transform: none;
}

#mistakeNotebookView #mistakePageIndicator::before,
#mistakeNotebookView #mistakePageIndicator::after {
  content: none !important;
  display: none !important;
}

#mistakeNotebookView .mistake-image-frame {
  min-height: 520px !important;
  border-radius: 26px;
  overflow: hidden;
}

#mistakeNotebookView .mistake-text-preview {
  width: 100% !important;
  min-height: 100% !important;
  padding: 28px !important;
  color: rgba(30,41,59,0.84) !important;
  font-size: 15px !important;
  line-height: 1.76 !important;
  overflow: auto;
}

#mistakeNotebookView .mistake-notes-panel {
  min-width: 0 !important;
}

#mistakeNotebookView .mistake-tags-input,
#mistakeNotebookView .mistake-notes-input,
#mistakeNotebookView .mistake-ai-instruction {
  border-radius: 18px;
  color: rgba(15,23,42,0.86) !important;
  font-family: "Nunito", sans-serif !important;
  font-size: 15px !important;
  line-height: 1.66 !important;
  padding: 14px 16px !important;
}

#mistakeNotebookView .mistake-tags-input {
  min-height: 54px !important;
  margin-bottom: 16px !important;
}

#mistakeNotebookView .mistake-notes-input {
  margin-bottom: 16px !important;
}

#mistakeNotebookView .mistake-tags-input:focus,
#mistakeNotebookView .mistake-notes-input:focus,
#mistakeNotebookView .mistake-ai-instruction:focus,
#mistakeNotebookView .mistake-title-input:focus {
  border-color: rgba(125,211,252,0.76) !important;
  box-shadow:
    0 0 0 4px rgba(125,211,252,0.18),
    0 18px 38px rgba(14,165,233,0.12),
    inset 0 1px 0 rgba(255,255,255,0.82) !important;
}

#mistakeNotebookView .mistake-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

#mistakeNotebookView .mistake-primary-btn,
#mistakeNotebookView .mistake-secondary-btn,
#mistakeNotebookView .mistake-danger-btn {
  min-height: 50px !important;
  margin-left: 0 !important;
  padding: 0 14px !important;
}

#mistakeNotebookView .mistake-ai-answer-panel {
  margin-top: 24px !important;
  padding: clamp(18px, 2vw, 26px) !important;
}

#mistakeNotebookView .mistake-ai-answer {
  color: rgba(30,41,59,0.82) !important;
  font-size: 15px !important;
  line-height: 1.74 !important;
}

#mistakeNotebookView .mistake-empty-panel {
  min-height: 560px;
  color: rgba(30,41,59,0.78);
}

#mistakeNotebookView .mistake-empty-icon {
  border: 1px solid rgba(255,255,255,0.58);
  background:
    linear-gradient(135deg, rgba(14,165,233,0.24), rgba(16,185,129,0.20));
  box-shadow:
    0 18px 34px rgba(14,165,233,0.14),
    inset 0 1px 0 rgba(255,255,255,0.74);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
}

@media (max-width: 1180px) {
  #mistakeNotebookView .mistake-notebook-grid,
  #mistakeNotebookView .mistake-workspace {
    grid-template-columns: 1fr !important;
  }

  #mistakeNotebookView .mistake-detail-head {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 820px) {
  #mistakeNotebookView .mistake-notebook-shell {
    padding: 24px 16px 46px;
  }

  #mistakeNotebookView .mistake-notebook-toolbar,
  #mistakeNotebookView .mistake-actions {
    grid-template-columns: 1fr !important;
  }
}

/* Preference overlap fix: right column summarizes signals instead of duplicating the editor. */
#preferenceView .preference-page-grid {
  grid-template-columns: minmax(0, 920px);
  grid-template-rows: auto !important;
  justify-content: center;
}

#preferenceView .preference-profile-card {
  grid-row: auto;
}

#preferenceView .preference-field-meta {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  color: rgba(71,85,105,0.66);
  font-family: "DM Mono", monospace;
  font-size: 12px;
  font-weight: 700;
}

#preferenceView .preference-field-meta [data-over-limit="true"] {
  color: #be123c;
}

@media (max-width: 1180px) {
  #preferenceView .preference-page-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto !important;
  }

  #preferenceView .preference-profile-card {
    grid-column: 1;
    grid-row: auto;
  }
}

#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-content p,
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-content li {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* True tail lock 2: normalize lecture-page frame padding + reset content width. */

#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-heading,
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-heading h2,
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-content,
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-extra {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-content > *,
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-content p,
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-content li,
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-content blockquote,
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-content .kc-container,
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-content .math-block {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Strict 55:45 lesson split and full-width lecture content. */

#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) #learnExplainScroll,
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .learn-explain-scroll {
  padding: 0 !important;
}

#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) #learnExplainContent,
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .learn-explain-body,
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-frame {
  width: 100% !important;
  max-width: none !important;
}

#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-frame {
  border-radius: 0 !important;
}

#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-heading,
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-content,
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-extra,
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-content > *,
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-content p,
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-content li,
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-content blockquote,
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-content .math-block {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-heading {
  margin-bottom: clamp(20px, 2.6vw, 34px) !important;
}

#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-heading h2 {
  width: 100% !important;
  max-width: none !important;
  font-size: clamp(2.1rem, 4.1vw, 4.8rem) !important;
  line-height: 1.04 !important;
}

#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-content {
  font-size: var(--lesson-page-content-font-size, clamp(1.08rem, 1.55vw, 1.65rem)) !important;
  line-height: 1.62 !important;
}

/* Lesson split lock: grid items must fill their assigned columns. */
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active):not(.chat-collapsed) .learn-body-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 12px minmax(360px, 45%) !important;
  gap: 0 !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}

#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active):not(.chat-collapsed) #learnExplainCol,
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active):not(.chat-collapsed) .learn-explain-col {
  grid-column: 1 !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  display: flex !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active):not(.chat-collapsed) #learnResizer,
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active):not(.chat-collapsed) .learn-resizer {
  grid-column: 2 !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  width: 12px !important;
  min-width: 12px !important;
  max-width: 12px !important;
}

#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active):not(.chat-collapsed) #learnChatCol,
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active):not(.chat-collapsed) .learn-chat-col {
  grid-column: 3 !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  display: flex !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active):not(.chat-collapsed) #learnExplainToolbar,
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active):not(.chat-collapsed) #learnExplainScroll,
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active):not(.chat-collapsed) #learnExplainContent,
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active):not(.chat-collapsed) #learnChatScroll {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* Overview pre-entry lock: full-width book, no Q&A until a subsection opens. */
#learnView #learnBody.chapter-overview-active #learnBodyInner,
#learnView #learnBody.chapter-overview-active .learn-body-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

#learnView #learnBody.chapter-overview-active #learnExplainCol,
#learnView #learnBody.chapter-overview-active .learn-explain-col {
  grid-column: 1 / -1 !important;
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  flex: 1 1 auto !important;
  border-right: 0 !important;
}

#learnView #learnBody.chapter-overview-active #learnChatCol,
#learnView #learnBody.chapter-overview-active .learn-chat-col,
#learnView #learnBody.chapter-overview-active #learnResizer,
#learnView #learnBody.chapter-overview-active .learn-resizer,
#learnView #learnBody.chapter-overview-active #learnChatFab,
#learnView #learnBody.chapter-overview-active .learn-chat-fab,
#learnView #learnBody.chapter-overview-active #learnChatPopover,
#learnView #learnBody.chapter-overview-active .learn-chat-popover {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active):not(.chat-collapsed) #learnBodyInner,
#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active):not(.chat-collapsed) .learn-body-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 12px minmax(360px, 45%) !important;
}

#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active):not(.chat-collapsed) #learnChatCol,
#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active):not(.chat-collapsed) .learn-chat-col {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active):not(.chat-collapsed) #learnResizer,
#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active):not(.chat-collapsed) .learn-resizer {
  display: block !important;
}



/* COURSE TRACKER LIQUID GLASS REDESIGN: calmer command center, no box maze. */
#courseTrackerView.course-tracker-view {
  background: transparent;
  background-image: none;
  padding: 0;
  overflow: hidden;
}

#courseTrackerView .course-tracker-shell {
  width: min(100%, 1540px);
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 58px) clamp(28px, 4.6vw, 72px) 62px;
  overflow-y: auto;
}

#courseTrackerView .course-tracker-header {
  align-items: flex-start;
  margin-bottom: clamp(22px, 3vw, 34px);
}

#courseTrackerView .course-tracker-eyebrow,
#courseTrackerView .course-tracker-card-kicker,
#courseTrackerView .course-tracker-stat-label {
  margin-bottom: 10px;
  color: rgba(51, 65, 85, 0.62);
  font-family: "DM Mono", "SFMono-Regular", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
}

#courseTrackerView .course-tracker-title {
  margin: 0 0 12px;
  color: rgba(15, 23, 42, 0.90) !important;
  font-family: "Quicksand", "Nunito", sans-serif;
  font-size: clamp(46px, 5.8vw, 82px);
  line-height: 0.92;
  letter-spacing: 0 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.58);
}

#courseTrackerView .course-tracker-subtitle {
  max-width: 820px;
  color: rgba(51, 65, 85, 0.72) !important;
  font-size: 17px !important;
  line-height: 1.62 !important;
}

#courseTrackerView .feature-close-btn,
#courseTrackerView .course-tracker-reset-btn,
#courseTrackerView .course-status-select {
  border: 1px solid rgba(255,255,255,0.62) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.46), rgba(255,255,255,0.18)) !important;
  color: rgba(15, 23, 42, 0.78) !important;
  box-shadow:
    0 14px 28px rgba(15, 23, 42, 0.09),
    inset 0 1px 0 rgba(255,255,255,0.78),
    inset 0 -1px 0 rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
}

#courseTrackerView .course-tracker-command {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(360px, 0.85fr);
  gap: clamp(18px, 2.2vw, 28px);
  margin-bottom: clamp(22px, 3vw, 34px);
}

#courseTrackerView .course-tracker-hero-card,
#courseTrackerView .course-tracker-now-card,
#courseTrackerView .course-tracker-card {
  position: relative;
  border: 1px solid rgba(255,255,255,0.58);
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.44), rgba(255,255,255,0.17));
  box-shadow:
    var(--theme-composer-shadow),
    inset 0 1px 0 rgba(255,255,255,0.82),
    inset 0 -1px 0 rgba(255,255,255,0.18);
  backdrop-filter: blur(34px) saturate(190%) brightness(1.05);
  -webkit-backdrop-filter: blur(34px) saturate(190%) brightness(1.05);
  overflow: hidden;
}

#courseTrackerView .course-tracker-hero-card::before,
#courseTrackerView .course-tracker-now-card::before,
#courseTrackerView .course-tracker-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background:
    radial-gradient(540px 180px at 14% 0%, rgba(255,255,255,0.56), transparent 72%),
    radial-gradient(460px 160px at 98% 100%, rgba(255,255,255,0.20), transparent 74%) !important;
  opacity: .76 !important;
  mix-blend-mode: screen !important;
}

#courseTrackerView .course-tracker-hero-card > *,
#courseTrackerView .course-tracker-now-card > *,
#courseTrackerView .course-tracker-card > * {
  position: relative;
  z-index: 1;
}

#courseTrackerView .course-tracker-hero-card {
  display: grid;
  grid-template-columns: minmax(128px, 0.20fr) minmax(0, 1fr);
  gap: clamp(16px, 2.2vw, 28px);
  align-items: center;
  min-height: 244px;
  padding: clamp(24px, 3vw, 38px);
}

#courseTrackerView .course-tracker-ring {
  --course-progress-deg: 0deg;
  display: grid;
  place-items: center;
  width: clamp(132px, 12vw, 176px);
  aspect-ratio: 1;
  justify-self: start;
  margin-left: clamp(-18px, -1.3vw, -8px);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.68);
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.72) 0 47%, transparent 48%),
    conic-gradient(from -90deg,
      rgba(14,165,233,0.78) 0deg,
      rgba(16,185,129,0.62) var(--course-progress-deg),
      rgba(255,255,255,0.38) var(--course-progress-deg),
      rgba(255,255,255,0.24) 360deg);
  box-shadow:
    0 22px 46px rgba(14, 165, 233, 0.15),
    inset 0 1px 0 rgba(255,255,255,0.84);
  transition: background 0.28s ease, margin-left 0.2s ease !important;
}

#courseTrackerView .course-tracker-ring span {
  color: rgba(15,23,42,0.90) !important;
  font-family: "Quicksand", "Nunito", sans-serif !important;
  font-size: clamp(44px, 5vw, 68px) !important;
  font-weight: 800;
  line-height: 0.9 !important;
}

#courseTrackerView .course-tracker-ring small {
  margin-top: -22px;
  color: rgba(51,65,85,0.56) !important;
  font-family: "DM Mono", monospace !important;
  font-size: 14px !important;
  font-weight: 700;
}

#courseTrackerView .course-tracker-hero-copy h2 {
  margin: 0 0 10px;
  color: rgba(15,23,42,0.88) !important;
  font-family: "Quicksand", "Nunito", sans-serif !important;
  font-size: clamp(28px, 3vw, 42px) !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
}

#courseTrackerView .course-tracker-hero-copy p,
#courseTrackerView .course-tracker-stat-note {
  color: rgba(51,65,85,0.72) !important;
  font-size: 16px !important;
  line-height: 1.58 !important;
}

#courseTrackerView .course-tracker-progress-bar {
  height: 12px;
  margin-top: 22px;
  border: 1px solid rgba(255,255,255,0.64);
  border-radius: 999px;
  background: rgba(255,255,255,0.30);
  box-shadow: inset 0 1px 6px rgba(15,23,42,0.08);
}

#courseTrackerView .course-tracker-progress-bar span {
  background: linear-gradient(90deg, rgba(14,165,233,0.86), rgba(16,185,129,0.72)) !important;
  box-shadow: 0 0 18px rgba(14,165,233,0.22) !important;
}

#courseTrackerView .course-tracker-now-card {
  min-height: 244px;
  padding: clamp(24px, 3vw, 36px);
}

#courseTrackerView .course-tracker-stat-main {
  margin: 0 0 12px;
  color: rgba(15,23,42,0.90);
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.08;
  letter-spacing: 0;
}

#courseTrackerView .course-tracker-milestones {
  margin-top: 26px;
  gap: 10px;
}

#courseTrackerView .course-tracker-milestones span,
#courseTrackerView .course-tracker-source-chip,
#courseTrackerView .course-milestone-chip {
  border: 1px solid rgba(255,255,255,0.62) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.48), rgba(255,255,255,0.20)) !important;
  color: rgba(30,41,59,0.76) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.76) !important;
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}

#courseTrackerView .course-tracker-layout {
  display: grid;
  grid-template-columns: minmax(270px, 0.30fr) minmax(0, 0.70fr);
  gap: clamp(20px, 2.6vw, 32px);
  align-items: start;
}

#courseTrackerView .course-tracker-side-rail {
  display: grid;
  gap: 18px;
  min-width: 0;
}

#courseTrackerView .course-tracker-card {
  padding: clamp(22px, 2.4vw, 32px);
}

#courseTrackerView .course-tracker-card-head {
  align-items: flex-start;
  margin-bottom: 22px;
}

#courseTrackerView .course-tracker-card h2 {
  margin: 0;
  color: rgba(15,23,42,0.88) !important;
  font-size: clamp(25px, 2.4vw, 34px) !important;
  letter-spacing: 0 !important;
}

#courseTrackerView .course-grade-list {
  gap: 12px;
}

#courseTrackerView .course-grade-row {
  border: 1px solid rgba(255,255,255,0.54);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.40), rgba(255,255,255,0.15));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.72),
    0 10px 24px rgba(15,23,42,0.055);
}

#courseTrackerView .course-grade-label {
  color: rgba(15,23,42,0.86);
  font-size: 17px;
}

#courseTrackerView .course-grade-detail {
  color: rgba(71,85,105,0.66);
}

#courseTrackerView .course-grade-weight {
  min-width: 62px;
  border: 1px solid rgba(125,211,252,0.62);
  border-radius: 18px;
  background: rgba(224,242,254,0.50);
  color: #0369a1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.70);
}

#courseTrackerView .course-calendar-card {
  min-width: 0;
}

#courseTrackerView .course-tracker-timeline {
  position: relative;
  display: grid;
  gap: 12px;
  max-height: min(58vh, 720px);
  min-height: 520px;
  overflow: auto;
  padding: 4px 8px 4px 4px;
  scrollbar-gutter: stable;
}

#courseTrackerView .course-month-marker {
  position: sticky;
  top: 0;
  z-index: 4;
  width: max-content;
  margin: 8px 0 2px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,0.58);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.58), rgba(255,255,255,0.26));
  color: rgba(51,65,85,0.68);
  font-family: "DM Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

#courseTrackerView .course-timeline-item {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 150px;
  gap: 18px;
  align-items: center;
  padding: 18px 18px;
  border: 1px solid rgba(255,255,255,0.50);
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.34), rgba(255,255,255,0.12));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.66),
    0 12px 28px rgba(15,23,42,0.055);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease !important;
}

#courseTrackerView .course-timeline-item:hover {
  transform: translateY(-2px);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.46), rgba(255,255,255,0.18));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.78),
    0 18px 36px rgba(15,23,42,0.08);
}

#courseTrackerView .course-timeline-item.is-milestone {
  background:
    linear-gradient(135deg, rgba(255,247,237,0.56), rgba(255,255,255,0.18));
}

#courseTrackerView .course-date-pill {
  min-width: 58px;
  padding: 9px 10px;
  border: 1px solid rgba(125,211,252,0.66);
  border-radius: 999px;
  background: rgba(236,254,255,0.48);
  color: #0e7490;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}

#courseTrackerView .course-timeline-topline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

#courseTrackerView .course-lecture-label,
#courseTrackerView .course-section-line {
  color: rgba(71,85,105,0.66);
  font-family: "DM Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}

#courseTrackerView .course-timeline-body h3 {
  margin: 0;
  color: rgba(15,23,42,0.86) !important;
  font-family: "Quicksand", "Nunito", sans-serif !important;
  font-size: clamp(17px, 1.35vw, 21px) !important;
  line-height: 1.28 !important;
  letter-spacing: 0 !important;
}

#courseTrackerView .course-section-line {
  margin-top: 8px;
}

#courseTrackerView .course-timeline-status {
  justify-self: end;
}

#courseTrackerView .course-status-select {
  width: 142px;
  padding: 9px 12px;
  border-radius: 16px;
  font-size: 13px;
  outline: none;
}

#courseTrackerView .course-status-select[data-status="Done"] {
  border-color: rgba(134,239,172,0.78);
  background: rgba(240,253,244,0.58);
  color: #15803d;
}

#courseTrackerView .course-status-select[data-status="In progress"] {
  border-color: rgba(125,211,252,0.80) !important;
  background: rgba(240,249,255,0.60) !important;
  color: #0284c7 !important;
}

#courseTrackerView .course-status-select[data-status="Review"] {
  border-color: rgba(252,211,77,0.80);
  background: rgba(255,251,235,0.62);
  color: #b45309;
}

:root[data-theme="dusk"] #courseTrackerView .course-tracker-hero-card,
:root[data-theme="dusk"] #courseTrackerView .course-tracker-now-card,
:root[data-theme="dusk"] #courseTrackerView .course-tracker-card,
:root[data-theme="dark"] #courseTrackerView .course-tracker-hero-card,
:root[data-theme="dark"] #courseTrackerView .course-tracker-now-card,
:root[data-theme="dark"] #courseTrackerView .course-tracker-card {
  box-shadow:
    0 28px 70px rgba(148, 47, 62, 0.15),
    0 12px 30px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.78),
    inset 0 -1px 0 rgba(255,255,255,0.18);
}

@media (max-width: 1180px) {
  #courseTrackerView .course-tracker-command,
  #courseTrackerView .course-tracker-layout {
    grid-template-columns: 1fr;
  }

  #courseTrackerView .course-tracker-side-rail {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  #courseTrackerView .course-timeline-item {
    grid-template-columns: 68px minmax(0, 1fr);
    align-items: start;
  }

  #courseTrackerView .course-timeline-status {
    grid-column: 2;
    justify-self: stretch;
    margin-top: 8px;
  }

  #courseTrackerView .course-status-select {
    width: 100%;
  }
}

@media (max-width: 760px) {
  #courseTrackerView .course-tracker-shell {
    padding: 24px 16px 46px;
  }

  #courseTrackerView .course-tracker-header {
    gap: 16px;
  }

  #courseTrackerView .course-tracker-hero-card {
    grid-template-columns: 1fr;
  }

  #courseTrackerView .course-tracker-ring {
    width: 132px;
  }

  #courseTrackerView .course-timeline-item {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  #courseTrackerView .course-timeline-status {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  #courseTrackerView .course-status-select {
    width: 100%;
  }
}





























































































































































































/* Learn final layout/theme lock: strict 55:45, full lecture page, themed Q&A, glass page number. */
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active):not(.chat-collapsed) .learn-body-inner:not([data-custom-split="true"]) {
  grid-template-columns: minmax(0, 55fr) 12px minmax(360px, 45fr) !important;
}

#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-frame {
  padding: 22px 24px 64px !important;
}

#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-heading,
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-heading h2,
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-content,
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-extra,
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-content > *,
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-content p,
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-content li,
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-content blockquote,
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-content .lecture-note-card,
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-content .kc-container,
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-content .math-block {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-content .lecture-note-card,
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-content .kc-container {
  padding-left: clamp(16px, 2vw, 26px) !important;
  padding-right: clamp(16px, 2vw, 26px) !important;
}

#learnView#learnView #learnBody#learnBody #learnChatCol#learnChatCol,
#learnView#learnView #learnBody#learnBody[data-panel-focus] #learnChatCol#learnChatCol {
  background: var(--theme-page-surface-soft) !important;
  background-image: var(--theme-page-surface-soft) !important;
  border-left: 1px solid var(--theme-pane-border) !important;
  box-shadow: inset 1px 0 0 rgba(255,255,255,0.32), var(--theme-pane-shadow) !important;
}

#learnView#learnView #learnBody#learnBody #learnChatCol#learnChatCol #learnFollowupBar#learnFollowupBar,
#learnView#learnView #learnBody#learnBody #learnChatCol#learnChatCol #learnFollowupBar#learnFollowupBar:focus,
#learnView#learnView #learnBody#learnBody #learnChatCol#learnChatCol #learnFollowupBar#learnFollowupBar:focus-within,
#learnView#learnView #learnBody#learnBody[data-panel-focus] #learnChatCol#learnChatCol #learnFollowupBar#learnFollowupBar {
  border-color: var(--theme-pane-border) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.46), rgba(255,255,255,0.16)) !important;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,0.46), rgba(255,255,255,0.16)) !important;
  box-shadow:
    var(--theme-composer-shadow),
    inset 0 1px 0 rgba(255,255,255,0.78),
    inset 0 -1px 0 rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(34px) saturate(190%) brightness(1.06) !important;
  -webkit-backdrop-filter: blur(34px) saturate(190%) brightness(1.06) !important;
}

/* True tail lock: keep the requested lecture typography and page curl as the last word. */
#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-frame,
#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) #learnExplainContent,
#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-heading h2,
#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-content,
#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-content p,
#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lecture-explain-text,
#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lecture-block-text {
  font-family: "Zilla Slab", Georgia, serif !important;
}

#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) code,
#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) pre,
#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) kbd,
#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-kicker{
  font-family: "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace !important;
}































/* MISTAKE NOTE OWNERSHIP LOCK: user notes stay primary, AI drafts stay separate. */
#mistakeNotebookView .mistake-notes-panel {
  display: flex;
  flex-direction: column;
  gap: 14px !important;
}


#mistakeNotebookView .mistake-notes-input,
#mistakeNotebookView .mistake-ai-instruction,
#mistakeNotebookView .mistake-draft-notes-output {
  width: 100% !important;
  border: 1px solid rgba(255,255,255,0.56) !important;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.38), rgba(255,255,255,0.14)) !important;
  color: rgba(15,23,42,0.84) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.72),
    0 10px 22px rgba(15,23,42,0.045) !important;
  font-family: "Nunito", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.62 !important;
}

#mistakeNotebookView .mistake-notes-input {
  min-height: 260px !important;
}

#mistakeNotebookView .mistake-ai-instruction {
  min-height: 96px;
  margin-bottom: 12px;
  resize: vertical;
}

#mistakeNotebookView .mistake-draft-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px !important;
}

#mistakeNotebookView .mistake-draft-notes-output {
  padding: 14px 16px !important;
  background:
    radial-gradient(280px 100px at 0% 0%, rgba(125,211,252,0.14), transparent 72%),
    linear-gradient(135deg, rgba(255,255,255,0.38), rgba(255,255,255,0.13));
}


#mistakeNotebookView .mistake-note-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px !important;
  margin-bottom: 8px !important;
}

#mistakeNotebookView .mistake-note-image-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: "Quicksand", "Nunito", sans-serif;
  font-size: 12px !important;
  font-weight: 850;
}


#mistakeNotebookView .mistake-note-image-empty {
  display: flex;
  align-items: center;
  font-size: 12px !important;
  font-weight: 760;
}

#mistakeNotebookView .mistake-note-image-chip {
  position: relative;
  margin: 0;
  overflow: hidden;
}

#mistakeNotebookView .mistake-note-image-chip img {
  display: block;
  width: 100% !important;
  object-fit: cover;
}

#mistakeNotebookView .mistake-note-image-chip button {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px !important;
  height: 24px !important;
  border: 1px solid rgba(255,255,255,0.72) !important;
  border-radius: 999px !important;
  background: rgba(15,23,42,0.52) !important;
  color: #fff !important;
  cursor: pointer;
  line-height: 1 !important;
}


#mistakeNotebookView .mistake-draft-head {
  margin: 0 0 8px !important;
}

#mistakeNotebookView .mistake-draft-notes-output {
  min-height: 260px !important;
}

@media (max-width: 980px) {
  #mistakeNotebookView .mistake-note-columns {
    grid-template-columns: 1fr !important;
  }
}

/* HOME ASK CONTROL GLASS LOCK: unclipped menu plus thicker frosted mode/web controls. */


.welcome.home-ask-workspace .home-ask-toolbar {
  display: none !important;
  position: relative !important;
  overflow: visible !important;
}

.welcome.home-ask-workspace #homeModePicker.home-mode-picker {
  overflow: visible !important;
}

.welcome.home-ask-workspace .home-mode-toggle,
.welcome.home-ask-workspace #webSearchToggleBtnMain.home-ask-web-toggle {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease,
    background 160ms ease !important;
}

.welcome.home-ask-workspace .home-mode-toggle {
  justify-content: center !important;
  font-family: "Quicksand", "Nunito", sans-serif !important;
  letter-spacing: 0 !important;
}

.welcome.home-ask-workspace #webSearchToggleBtnMain.home-ask-web-toggle {
  justify-content: center !important;
}

.welcome.home-ask-workspace .home-mode-toggle::before,
.welcome.home-ask-workspace #webSearchToggleBtnMain.home-ask-web-toggle::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  z-index: -1 !important;
  border-radius: inherit !important;
  background:
    linear-gradient(125deg, rgba(255,255,255,0.60), rgba(255,255,255,0.08) 44%, transparent 68%) !important;
  pointer-events: none !important;
}

.welcome.home-ask-workspace .home-mode-toggle:hover,
.welcome.home-ask-workspace #webSearchToggleBtnMain.home-ask-web-toggle:hover {
  transform: translateY(-1px) !important;
}

.welcome.home-ask-workspace .home-mode-icon {
  color: #0284c7 !important;
}


.welcome.home-ask-workspace #webSearchToggleBtnMain.home-ask-web-toggle.active {
  color: #2563eb !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.62), rgba(219,234,254,0.28) 58%, rgba(255,255,255,0.13)),
    radial-gradient(110px 70px at 45% 0%, rgba(147,197,253,0.26), transparent 74%) !important;
}

.welcome.home-ask-workspace #webSearchToggleBtnMain.home-ask-web-toggle:not(.active) {
  color: rgba(100,116,139,0.78) !important;
}

.welcome.home-ask-workspace #homeModeMenu.home-mode-menu {
  overflow: hidden !important;
}


/* HOME ASK CONTROL MOTION TUNE: smaller icons, keep glass, restore a light pop. */
.welcome.home-ask-workspace #homeModeMenu.home-mode-menu {
  transition:
    opacity 180ms ease,
    transform 240ms cubic-bezier(0.18, 1.28, 0.28, 1) !important;
}

@media (prefers-reduced-motion: reduce) {
  .welcome.home-ask-workspace .home-ask-composer:focus-within,
  .welcome.home-ask-workspace #searchBox.home-ask-composer:focus-within,
  .welcome.home-ask-workspace #homeModeMenu.home-mode-menu {
    animation: none !important;
    transition: none !important;
  }
}

/* 2.4-2 reading structure: numbered content islands and precise teaching diagrams. */
.lesson-page-frame[data-lesson-section="2.4-2"] {
  --lesson-page-content-font-size: 1.32rem;
  --convolution-environment: #eaf1f2;
  --convolution-surface: #fbfcfc;
  --convolution-tool-surface: #f5f7f8;
  --convolution-nav-fallback: #f5f9fa;
  --convolution-nav-glass: rgba(245, 249, 250, 0.84);
  --convolution-input: #1f64d7;
  --convolution-response: #7042b8;
  --convolution-action: #167b64;
  --convolution-overlap: #167b64;
  --convolution-output: #167b64;
  --convolution-integral: #b6531d;
  --convolution-warning: #b6531d;
  --convolution-ink: var(--convolution-input);
  --convolution-line: #d9e1e5;
  --convolution-copy: #172033;
  --convolution-muted: #58687e;
}

#learnView .lesson-page-frame[data-lesson-section="2.4-2"] .lesson-page-content {
  color: var(--convolution-copy);
}

#learnView .lesson-page-frame[data-lesson-section="2.4-2"] .lesson-page-content > p {
  max-width: 72ch !important;
  margin: 0 0 16px !important;
  color: var(--convolution-muted);
  font-weight: 560;
}

.convolution-island {
  --convolution-island-accent: var(--convolution-input);
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  width: 100%;
  margin: 16px 0;
  padding: 18px 20px;
  overflow: hidden;
  border: 1px solid var(--convolution-line);
  border-left: 4px solid var(--convolution-island-accent);
  border-radius: 7px;
  background: #fbfdff;
  box-shadow: none;
}

.convolution-island-input {
  --convolution-island-accent: var(--convolution-input);
  background: #f7faff;
}

.convolution-island-response {
  --convolution-island-accent: var(--convolution-response);
  background: #fbf9ff;
}

.convolution-island-action {
  --convolution-island-accent: var(--convolution-action);
  background: #f7fcfa;
}

.convolution-island-output {
  --convolution-island-accent: var(--convolution-output);
  background: #fffaf3;
}

.convolution-island-warning {
  --convolution-island-accent: var(--convolution-warning);
  border-color: #fecaca;
  background: #fff7f7;
}

.convolution-island-number {
  color: var(--convolution-island-accent);
  font-size: 2rem;
  font-weight: 820;
  line-height: 1;
  letter-spacing: 0;
}

.convolution-island-body,
.convolution-analogy-copy {
  min-width: 0;
}

#learnView .convolution-island h3 {
  margin: 0 0 10px;
  color: #172033;
  font-size: 1.02em;
  font-weight: 780;
  line-height: 1.25;
  letter-spacing: 0;
}

#learnView .convolution-island ul {
  margin: 0;
  padding-left: 1.2em;
}

#learnView .convolution-island li {
  margin: 0 0 7px !important;
  line-height: 1.48 !important;
}

#learnView .convolution-island li:last-child,
.convolution-island-body > :last-child,
.convolution-analogy-copy > :last-child {
  margin-bottom: 0 !important;
}

.convolution-island-kicker,
.convolution-analogy-kicker {
  margin: 0 0 6px !important;
  color: var(--convolution-island-accent) !important;
  font-size: 0.72em !important;
  font-weight: 780;
  line-height: 1.2 !important;
  letter-spacing: 0;
  text-transform: uppercase;
}

.convolution-key {
  font-weight: 780;
}

.convolution-key-input { color: var(--convolution-input); }
.convolution-key-response { color: var(--convolution-response); }
.convolution-key-action { color: var(--convolution-action); }
.convolution-key-output { color: var(--convolution-output); }
.convolution-key-warning { color: var(--convolution-warning); }

.convolution-equation {
  width: 100%;
  margin: 8px 0 12px;
  padding: 10px 0;
  overflow-x: auto;
  color: #172033;
  font-size: 1.08em;
  line-height: 1.6;
  scrollbar-width: thin;
}

.convolution-analogy-block {
  --convolution-island-accent: var(--convolution-ink);
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
}

.convolution-analogy-block-sprinkler {
  --convolution-island-accent: var(--convolution-action);
}

.convolution-analogy-figure {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: min(100%, 210px);
  margin: 0 auto;
}

#learnView .convolution-analogy-image {
  display: block;
  width: auto !important;
  max-width: 100% !important;
  height: 360px !important;
  max-height: 360px !important;
  aspect-ratio: 1153 / 2048;
  object-fit: contain;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 1px solid #e5e0d6;
  border-radius: 6px;
  background: #faf8f2 !important;
  box-shadow: none;
}

#learnView #learnBody.chat-collapsed .convolution-analogy-block {
  grid-template-columns: 58px minmax(0, 1fr) minmax(180px, 26%);
  gap: 18px;
}

#learnView #learnBody.chat-collapsed .convolution-analogy-figure {
  grid-column: 3;
}

.convolution-island-visual-split {
  grid-template-columns: 58px minmax(0, 1fr);
}

.convolution-island-visual-split .convolution-visual {
  grid-column: 2;
}

#learnView #learnBody.chat-collapsed .convolution-island-visual-split {
  grid-template-columns: 58px minmax(220px, 0.72fr) minmax(360px, 1.28fr);
  align-items: center;
}

#learnView #learnBody.chat-collapsed .convolution-island-visual-split .convolution-visual {
  grid-column: 3;
}

.convolution-visual {
  min-width: 0;
  margin: 0;
}

.convolution-diagram {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  overflow: visible;
}

.convolution-tau-scan {
  padding-left: 16px;
  border-left: 1px solid var(--convolution-line);
}

.convolution-svg-input,
.convolution-svg-response,
.convolution-svg-action,
.convolution-svg-output,
.convolution-svg-fixed {
  stroke-width: 2;
}

.convolution-svg-input { fill: #eaf2ff; stroke: var(--convolution-input); }
.convolution-svg-response { fill: #f2edff; stroke: var(--convolution-response); }
.convolution-svg-action { fill: #eaf8f3; stroke: var(--convolution-action); }
.convolution-svg-output { fill: #fff2dd; stroke: var(--convolution-output); }
.convolution-svg-fixed { fill: #fff8e9; stroke: var(--convolution-output); }

.convolution-svg-label,
.convolution-svg-fixed-text,
.convolution-book-plus-text {
  fill: #172033;
  font-size: 18px;
  font-weight: 760;
  letter-spacing: 0;
}

.convolution-svg-note {
  fill: #526077;
  font-size: 13px;
  font-weight: 620;
  letter-spacing: 0;
}

.convolution-svg-fixed-text {
  fill: var(--convolution-output);
  font-size: 16px;
}

.convolution-svg-connector,
.convolution-svg-axis,
.convolution-book-arrow {
  fill: none;
  stroke: #8793a6;
  stroke-width: 2;
  stroke-linecap: round;
}

.convolution-svg-axis {
  fill: #8793a6;
}

.convolution-svg-cursor {
  stroke: var(--convolution-action);
  stroke-width: 3;
}

.convolution-svg-cursor-dot {
  fill: var(--convolution-action);
}

.convolution-svg-action-text {
  fill: var(--convolution-action);
  font-size: 15px;
  font-weight: 760;
  letter-spacing: 0;
}

.convolution-island-timeline {
  align-items: stretch;
}

.convolution-step-timeline {
  display: grid;
  grid-template-columns: minmax(150px, 26%) minmax(0, 1fr);
  align-items: stretch;
  gap: 18px;
  margin-top: 8px;
}

.convolution-step-signals {
  width: 100%;
  height: 100%;
  min-height: 500px;
}

.convolution-timeline-rail,
.convolution-mini-axis {
  stroke: #c2cad6;
  stroke-width: 2;
}

.convolution-timeline-dot {
  fill: #ffffff;
  stroke: var(--convolution-action);
  stroke-width: 3;
}

.convolution-mini-input,
.convolution-mini-response,
.convolution-mini-action,
.convolution-mini-output {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.convolution-mini-input { stroke: var(--convolution-input); }
.convolution-mini-response { stroke: var(--convolution-response); }
.convolution-mini-action { stroke: var(--convolution-action); }
.convolution-mini-output { stroke: var(--convolution-output); }
.convolution-mini-overlap { fill: #f6d79b; stroke: var(--convolution-output); stroke-width: 2; }
.convolution-mini-output-dot { fill: var(--convolution-output); stroke: #ffffff; stroke-width: 2; }

#learnView .convolution-step-list {
  display: grid;
  grid-template-rows: repeat(5, minmax(92px, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

#learnView .convolution-step-list li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  margin: 0 !important;
  padding: 10px 0;
  border-bottom: 1px solid #dce7e2;
}

#learnView .convolution-step-list li:last-child {
  border-bottom: 0;
}

.convolution-step-list strong {
  color: #172033;
  font-size: 0.92em;
  line-height: 1.25;
}

.convolution-step-list strong span {
  display: inline-block;
  min-width: 2.3em;
  color: var(--convolution-action);
}

#learnView .convolution-step-list p {
  margin: 4px 0 0 !important;
  color: #526077;
  font-size: 0.82em;
  line-height: 1.4 !important;
}

.convolution-book-map {
  width: min(100%, 430px) !important;
  margin: 8px auto 18px;
}

.convolution-book-arrow {
  stroke: var(--convolution-action);
  stroke-width: 3;
}

.convolution-book-plus {
  fill: #ffffff;
  stroke: var(--convolution-action);
  stroke-width: 2;
}

.convolution-book-plus-text {
  fill: var(--convolution-action);
  font-size: 21px;
}

.convolution-book-flow {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: stretch;
  gap: 6px;
  width: min(100%, 520px);
  margin: 14px auto 2px;
}

.convolution-flow-node {
  padding: 10px 14px;
  border: 1px solid var(--convolution-line);
  border-left-width: 4px;
  border-radius: 4px;
  background: #ffffff;
  color: #273449;
  font-size: 0.84em;
  font-weight: 720;
  line-height: 1.3;
  text-align: center;
}

.convolution-flow-input { border-left-color: var(--convolution-input); }
.convolution-flow-system { border-left-color: var(--convolution-response); }
.convolution-flow-output { border-left-color: var(--convolution-output); }

.convolution-flow-arrow {
  color: var(--convolution-action);
  font-size: 1.25em;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.convolution-island-takeaway {
  border-color: #f4d6a7;
  background: #fff8e9;
}

:root[data-theme="dark"] .lesson-page-frame[data-lesson-section="2.4-2"] {
  --convolution-line: #405066;
  --convolution-copy: #e5edf7;
  --convolution-muted: #b4c0d0;
}

:root[data-theme="dark"] .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-island {
  background: #172233;
}

:root[data-theme="dark"] .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-island h3,
:root[data-theme="dark"] .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-step-list strong {
  color: #f1f5f9;
}

@media (max-width: 760px) {
  .lesson-page-frame[data-lesson-section="2.4-2"] {
    --lesson-page-content-font-size: 1.16rem;
  }

  .convolution-island {
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 13px 0;
    padding: 14px;
  }

  #learnView #learnBody.chat-collapsed .convolution-analogy-block,
  #learnView #learnBody.chat-collapsed .convolution-island-visual-split,
  .convolution-analogy-block,
  .convolution-island-visual-split {
    grid-template-columns: 1fr;
  }

  .convolution-island-number {
    font-size: 1.85rem;
  }

  .convolution-analogy-figure,
  #learnView #learnBody.chat-collapsed .convolution-analogy-figure,
  .convolution-island-visual-split .convolution-visual,
  #learnView #learnBody.chat-collapsed .convolution-island-visual-split .convolution-visual {
    grid-column: 1;
  }

  .convolution-analogy-figure {
    width: min(100%, 200px);
  }

  #learnView .convolution-analogy-image {
    height: 320px !important;
    max-height: 320px !important;
  }

  .convolution-tau-scan {
    padding: 10px 0 0;
    border-top: 1px solid var(--convolution-line);
    border-left: 0;
  }

  .convolution-step-timeline {
    grid-template-columns: minmax(118px, 42%) minmax(0, 1fr);
    gap: 10px;
  }

  .convolution-step-signals {
    min-height: 450px;
  }

  #learnView .convolution-step-list {
    grid-template-rows: repeat(5, minmax(84px, 1fr));
  }

  #learnView .convolution-step-list li {
    padding: 7px 0;
  }

  #learnView .convolution-step-list p {
    font-size: 0.78em;
  }

  .convolution-book-map {
    width: min(100%, 340px) !important;
  }

  .convolution-book-flow {
    grid-template-columns: 1fr;
  }
}

/* 2.4-2 guided flow v4: stage navigation, editorial markers and true process timelines. */
.lesson-page-frame[data-lesson-section="2.4-2"] {
  --convolution-stage-surface: var(--convolution-nav-fallback);
  --convolution-stage-active: var(--convolution-surface);
  --convolution-block-accent: var(--convolution-input);
}

.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-stage-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
  min-width: 0;
  margin: 0 0 28px;
  padding: 4px;
  border: 1px solid #dce3ec;
  border-radius: 7px;
  background: var(--convolution-stage-surface);
}

.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-stage-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--convolution-muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 760;
  letter-spacing: 0;
  line-height: 1.25;
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-stage-tab:hover {
  color: var(--convolution-copy);
  background: rgba(251, 252, 252, 0.68);
}

.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-stage-tab.is-active {
  border-color: var(--convolution-line);
  background: var(--convolution-stage-active);
  color: var(--convolution-copy);
  box-shadow: 0 2px 8px rgba(27, 39, 58, 0.08);
}

.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-stage-tab:focus-visible,
.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-intro-start:focus-visible {
  outline: 3px solid rgba(31, 100, 215, 0.3);
  outline-offset: 2px;
}

.convolution-stage-tab-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 820;
  line-height: 1;
}

.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-stage-intro {
  width: min(100%, 900px);
  margin: 0 auto;
  padding: 8px 0 30px;
}

.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-stage-kicker,
.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-practice-kicker {
  margin: 0 0 8px !important;
  color: var(--convolution-action) !important;
  font-size: 0.72rem !important;
  font-weight: 820;
  letter-spacing: 0;
  line-height: 1.2 !important;
}

#learnView .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-stage-intro > h2 {
  margin: 0 0 28px;
  color: var(--convolution-copy);
  font-size: 2.45rem;
  font-weight: 820;
  letter-spacing: 0;
  line-height: 1.08;
}

.convolution-intro-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.convolution-intro-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  padding: 16px 0 20px;
  border-top: 3px solid #d8e0eb;
}

.convolution-intro-item:nth-child(1) { border-top-color: var(--convolution-input); }
.convolution-intro-item:nth-child(2) { border-top-color: var(--convolution-response); }
.convolution-intro-item:nth-child(3) { border-top-color: var(--convolution-action); }

.convolution-intro-number {
  color: #78869a;
  font-size: 0.76rem;
  font-weight: 820;
  line-height: 1.35;
}

#learnView .convolution-intro-item h3,
#learnView .convolution-practice-heading h2 {
  margin: 0 0 8px;
  color: #172033;
  font-size: 1rem;
  font-weight: 790;
  letter-spacing: 0;
  line-height: 1.3;
}

#learnView .convolution-intro-item p {
  margin: 0 !important;
  color: #4e5c71;
  font-size: 0.88em;
  line-height: 1.55 !important;
}

.convolution-intro-reasons {
  margin: 16px 0 24px;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--convolution-output);
}

#learnView .convolution-intro-reasons > p {
  margin: 0 0 8px !important;
  color: #394960;
  font-weight: 760;
}

#learnView .convolution-intro-reasons ul {
  margin: 0;
  padding-left: 1.2em;
}

#learnView .convolution-intro-reasons li {
  margin: 0 0 5px !important;
  color: #59677a;
  line-height: 1.48 !important;
}

.convolution-intro-start {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid #174fae;
  border-radius: 6px;
  background: var(--convolution-input);
  color: #ffffff;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 780;
  letter-spacing: 0;
  cursor: pointer;
  transition: background-color 150ms ease, transform 150ms ease;
}

.convolution-intro-start:hover {
  background: #174fae;
  transform: translateY(-1px);
}

.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-editorial-block,
.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-process-timeline {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 22px 0;
  overflow: visible;
  border: 0;
  border-top: 1px solid var(--convolution-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-editorial-block:first-of-type,
.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-process-timeline:first-of-type {
  border-top-color: #cbd5e1;
}

.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-block-input {
  --convolution-block-accent: var(--convolution-input);
}

.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-block-response {
  --convolution-block-accent: var(--convolution-response);
}

.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-block-action {
  --convolution-block-accent: var(--convolution-action);
}

.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-block-output {
  --convolution-block-accent: var(--convolution-output);
}

.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-page-marker {
  display: block;
  padding-top: 4px;
  color: var(--convolution-block-accent);
  font-size: 0.78rem;
  font-weight: 840;
  letter-spacing: 0;
  line-height: 1;
}

.convolution-block-body,
.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-analogy-copy {
  min-width: 0;
}

#learnView .lesson-page-frame[data-lesson-section="2.4-2"] :is(.convolution-editorial-block, .convolution-process-timeline) h3 {
  margin: 0 0 10px;
  color: #172033;
  font-size: 1.02em;
  font-weight: 790;
  letter-spacing: 0;
  line-height: 1.3;
}

#learnView .lesson-page-frame[data-lesson-section="2.4-2"] :is(.convolution-editorial-block, .convolution-process-timeline) ul {
  margin: 0;
  padding-left: 1.2em;
}

#learnView .lesson-page-frame[data-lesson-section="2.4-2"] :is(.convolution-editorial-block, .convolution-process-timeline) li {
  margin: 0 0 7px !important;
  line-height: 1.52 !important;
}

.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-editorial-block.convolution-analogy-block {
  grid-template-columns: 40px minmax(0, 1fr) minmax(170px, 220px);
  align-items: center;
}

.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-editorial-block.convolution-analogy-block .convolution-analogy-figure {
  grid-column: 3;
  width: 100%;
}

.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-editorial-visual {
  grid-template-columns: 40px minmax(180px, 0.8fr) minmax(250px, 1.2fr);
  align-items: center;
}

.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-editorial-visual .convolution-visual {
  grid-column: 3;
}

.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-tau-scan {
  padding: 0 0 0 16px;
  border-top: 0;
  border-left: 1px solid var(--convolution-line);
}

.convolution-process-list {
  position: relative;
  display: grid;
  gap: 18px;
  margin-top: 14px;
  padding-left: 2px;
}

.convolution-process-list::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 15px;
  width: 2px;
  background: #b9d8cf;
}

.convolution-process-step {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.convolution-process-node {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--convolution-action);
  border-radius: 50%;
  background: #ffffff;
  color: var(--convolution-action);
  font-size: 0.76rem;
  font-weight: 820;
  line-height: 1;
}

.convolution-process-step strong {
  color: #172033;
  font-size: 0.9em;
}

#learnView .convolution-process-step p {
  margin: 4px 0 0 !important;
  color: #536176;
  line-height: 1.48 !important;
}

#learnView .convolution-process-result {
  margin: 18px 0 0 !important;
  padding: 12px 0 0;
  border-top: 1px dashed #b9c5d3;
  color: #46556c;
  line-height: 1.5 !important;
}

.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-editorial-takeaway {
  border-top-color: #e3bd7c;
}

.convolution-practice-stage {
  width: min(100%, 760px);
  margin: 0 auto !important;
  padding: 8px 0 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
  font-family: inherit !important;
}

.convolution-practice-heading {
  margin-bottom: 22px;
}

#learnView .convolution-practice-heading h2 {
  font-size: 1.75rem;
}

#learnView .convolution-practice-heading > p:last-child {
  margin: 0 !important;
  color: var(--convolution-muted);
}

#learnView .convolution-practice-list {
  display: grid;
  gap: 0;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

#learnView .convolution-practice-list li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 62px;
  margin: 0 !important;
  padding: 12px 0;
  border-top: 1px solid var(--convolution-line);
}

.convolution-practice-list li > span {
  color: var(--convolution-action);
  font-size: 0.76rem;
  font-weight: 820;
}

.convolution-practice-list li > strong {
  min-width: 0;
  color: #273449;
  font-size: 0.92em;
  line-height: 1.42;
}

#learnView .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-quick-check {
  margin: 0 !important;
  padding: 22px !important;
  border: 1px solid #d6dee9 !important;
  border-radius: 7px !important;
  background: #f8fafc !important;
  box-shadow: none !important;
}

#learnView .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-practice-stage #startTestBtn {
  min-height: 44px !important;
  padding: 0 18px !important;
  border: 1px solid #1958cf !important;
  border-radius: 6px !important;
  background: #2563eb !important;
  box-shadow: none !important;
  font-size: 0.8rem !important;
  letter-spacing: 0 !important;
}

#learnView #learnBody.convolution-guided-flow-active #learnExplainContent,
#learnView #learnBody.convolution-guided-flow-active #learnExplainScroll,
#learnView #learnBody.convolution-guided-flow-active .lesson-page-frame {
  transform-style: flat !important;
  perspective: none !important;
}

#learnView #learnBody.convolution-guided-flow-active #learnExplainContent.learn-page-turn-active::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}

#learnView #learnBody.convolution-guided-flow-active #learnExplainContent.learn-page-turn-next > * {
  animation: convolutionGuidedExitNext 70ms ease-out both !important;
}

#learnView #learnBody.convolution-guided-flow-active #learnExplainContent.learn-page-turn-prev > * {
  animation: convolutionGuidedExitPrev 70ms ease-out both !important;
}

#learnView #learnBody.convolution-guided-flow-active #learnExplainContent.learn-page-turn-reveal > * {
  animation: convolutionGuidedReveal 110ms ease-out both !important;
}

@keyframes convolutionGuidedExitNext {
  to { opacity: 0; transform: translateX(-6px); }
}

@keyframes convolutionGuidedExitPrev {
  to { opacity: 0; transform: translateX(6px); }
}

@keyframes convolutionGuidedReveal {
  from { opacity: 0; transform: translateX(6px); }
  to { opacity: 1; transform: translateX(0); }
}

:root[data-theme="dark"] .lesson-page-frame[data-lesson-section="2.4-2"] {
  --convolution-environment: #0d1622;
  --convolution-surface: #131e2c;
  --convolution-tool-surface: #192638;
  --convolution-nav-fallback: #172434;
  --convolution-nav-glass: rgba(23, 36, 52, 0.88);
  --convolution-stage-surface: var(--convolution-nav-fallback);
  --convolution-stage-active: #24354b;
  --convolution-copy: #edf3f8;
  --convolution-muted: #b7c4d2;
  --convolution-line: #35485d;
  --convolution-input: #78a7ff;
  --convolution-response: #c09cff;
  --convolution-action: #62c8ab;
  --convolution-overlap: #62c8ab;
  --convolution-output: #62c8ab;
  --convolution-integral: #f0a173;
  --convolution-warning: #f0a173;
}

:root[data-theme="dark"] .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-stage-nav {
  border-color: #405066;
}

:root[data-theme="dark"] .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-stage-tab {
  color: #aebacc;
}

:root[data-theme="dark"] .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-stage-tab:hover,
:root[data-theme="dark"] .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-stage-tab.is-active,
:root[data-theme="dark"] .lesson-page-frame[data-lesson-section="2.4-2"] :is(.convolution-stage-intro, .convolution-editorial-block, .convolution-process-timeline, .convolution-practice-stage) h2,
:root[data-theme="dark"] #learnView .lesson-page-frame[data-lesson-section="2.4-2"] :is(.convolution-stage-intro, .convolution-editorial-block, .convolution-process-timeline, .convolution-practice-stage) h3,
:root[data-theme="dark"] .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-process-step strong,
:root[data-theme="dark"] .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-practice-list li > strong {
  color: #f1f5f9;
}

:root[data-theme="dark"] .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-process-node {
  background: #172233;
}

:root[data-theme="dark"] #learnView .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-quick-check {
  border-color: #405066 !important;
  background: #172233 !important;
}

@media (max-width: 980px) {
  .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-editorial-visual {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-editorial-visual .convolution-visual {
    grid-column: 2;
    margin-top: 14px;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-tau-scan {
    padding: 14px 0 0;
    border-top: 1px solid var(--convolution-line);
    border-left: 0;
  }
}

@media (min-width: 1000px) {
  #learnView #learnBody.chat-collapsed .convolution-intro-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }
}

@media (max-width: 760px) {
  #learnView #learnBody.convolution-guided-flow-active.chat-collapsed .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-stage-nav {
    margin-top: 52px;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-stage-nav {
    gap: 2px;
    margin-bottom: 20px;
    padding: 3px;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-stage-tab {
    flex-direction: column;
    gap: 4px;
    min-height: 58px;
    padding: 6px 3px;
    font-size: 0.68rem;
    white-space: normal;
  }

  .convolution-stage-tab-number {
    width: 19px;
    height: 19px;
    font-size: 0.6rem;
  }

  .convolution-intro-item {
    padding: 14px 0 16px;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-editorial-block,
  .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-process-timeline,
  .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-editorial-visual {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    padding: 18px 0;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-editorial-block.convolution-analogy-block {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-editorial-block.convolution-analogy-block .convolution-analogy-figure,
  .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-editorial-visual .convolution-visual {
    grid-column: 2;
    width: min(100%, 210px);
    margin: 14px auto 0;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-editorial-visual .convolution-visual {
    width: 100%;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-page-marker {
    font-size: 0.72rem;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-step-timeline {
    grid-template-columns: 1fr;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-step-signals {
    width: min(100%, 180px);
    min-height: 0;
    height: 520px;
    margin: 0 auto;
  }

  #learnView .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-step-list {
    grid-template-rows: none;
  }

  .convolution-practice-stage {
    padding-top: 2px;
  }
}

@media (max-width: 430px) {
  .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-stage-tab {
    font-size: 0.64rem;
  }

  .convolution-intro-reasons {
    padding-left: 14px;
  }

  #learnView .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-quick-check {
    padding: 18px 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-stage-tab,
  .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-intro-start,
  #learnView #learnBody.convolution-guided-flow-active #learnExplainContent > * {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* 2.4-2 learning-first surface: quiet reading planes with glass reserved for navigation. */
.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-stage-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  margin-bottom: 16px;
  border-color: rgba(115, 132, 151, 0.24);
  background: var(--convolution-nav-fallback);
  box-shadow:
    0 10px 24px rgba(23, 32, 51, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-stage-nav {
    background: var(--convolution-nav-glass);
    -webkit-backdrop-filter: blur(20px) saturate(112%);
    backdrop-filter: blur(20px) saturate(112%);
  }
}

#learnView #learnBody.convolution-guided-flow-active .lesson-page-frame[data-lesson-section="2.4-2"] {
  overflow: visible !important;
  background: var(--convolution-environment) !important;
  background-image: none !important;
  box-shadow: none !important;
}

@media (max-width: 760px) {
  #learnView #learnBody.convolution-guided-flow-active.chat-collapsed .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-stage-nav {
    top: 64px;
  }
}

#learnView .lesson-page-frame[data-lesson-section="2.4-2"] .lesson-page-content {
  box-sizing: border-box;
  width: 100%;
  max-width: 72ch;
  margin-inline: auto;
  padding: 30px 32px;
  border: 1px solid var(--convolution-line);
  border-radius: 8px;
  background: var(--convolution-surface) !important;
  background-image: none !important;
  color: var(--convolution-copy);
  box-shadow: 0 14px 36px rgba(23, 32, 51, 0.07);
  font-size: 18px !important;
  line-height: 1.68 !important;
}

.convolution-lesson-progress {
  width: min(100%, 72ch);
  margin: 0 auto 8px !important;
  color: var(--convolution-muted) !important;
  font-size: 0.78rem !important;
  font-weight: 800;
  text-align: right;
}

.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-overview-objective {
  max-width: 48ch;
  margin: 0 0 20px !important;
  color: var(--convolution-muted) !important;
  font-size: 1.08rem !important;
  font-weight: 650;
  line-height: 1.55 !important;
}

.lesson-page-frame[data-lesson-section="2.4-2"] :is(.convolution-overview-formula, .convolution-equation) {
  min-width: 0;
  margin: 16px 0;
  padding: 14px 16px;
  overflow-x: auto;
  border-left: 4px solid var(--convolution-integral);
  background: var(--convolution-tool-surface);
  color: var(--convolution-copy);
  font-size: 1.02em;
  line-height: 1.55;
}

.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-core-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0 0 24px;
  border-block: 1px solid var(--convolution-line);
}

.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-core-actions > div {
  display: grid;
  grid-template-columns: 48px minmax(130px, 0.34fr) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-width: 0;
  min-height: 64px;
  padding: 13px 2px;
  border: 0;
  border-bottom: 1px solid var(--convolution-line);
  border-radius: 0;
  background: transparent;
}

.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-core-actions > div:last-child {
  border-bottom: 0;
}

.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-core-action-index {
  color: var(--convolution-response);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1;
}

.lesson-page-frame[data-lesson-section="2.4-2"] [data-convolution-core-action="multiply"] .convolution-core-action-index {
  color: var(--convolution-overlap);
}

.lesson-page-frame[data-lesson-section="2.4-2"] [data-convolution-core-action="integrate"] .convolution-core-action-index {
  color: var(--convolution-integral);
}

.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-core-actions strong {
  color: var(--convolution-copy);
  font-size: 1rem;
}

.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-core-actions span:not(.convolution-core-action-index) {
  color: var(--convolution-muted);
  font-size: 1rem;
  line-height: 1.5;
}

.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-teaching-block {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-page-question {
  margin: 0 0 16px !important;
  color: #172033 !important;
  font-size: 1.08em !important;
  font-weight: 800;
  line-height: 1.45 !important;
}

#learnView .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-teaching-block ul,
#learnView .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-teaching-block ol {
  margin: 12px 0;
  padding-left: 1.3em;
}

#learnView .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-teaching-block li {
  margin: 0 0 8px !important;
  line-height: 1.65 !important;
}

.convolution-analogy-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 210px);
  gap: 22px;
  align-items: center;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--convolution-line);
}

#learnView .convolution-analogy-layout h3 {
  margin: 0 0 8px;
  color: #172033;
  font-size: 1em;
}

.convolution-analogy-layout .convolution-analogy-figure {
  width: 100%;
  margin: 0;
}

#learnView .convolution-analogy-layout .convolution-analogy-image {
  width: 100% !important;
  height: 300px !important;
  max-height: 300px !important;
  object-fit: cover;
  object-position: center;
  border-radius: 6px;
}

.convolution-past-weighting {
  width: 100%;
  margin: 20px 0 0;
  padding: 14px;
  border: 1px solid var(--convolution-line);
  border-radius: 6px;
  background: var(--convolution-tool-surface);
}

.convolution-past-weighting figcaption {
  margin-bottom: 8px;
  color: var(--convolution-muted);
  font-size: 0.8em;
  font-weight: 700;
}

.convolution-past-weighting svg {
  display: block;
  width: 100%;
  aspect-ratio: 720 / 250;
}

#learnView .convolution-past-weighting .convolution-past-effects-image {
  display: block;
  width: min(100%, 520px) !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto;
  object-fit: contain;
  object-position: center;
  border-radius: 4px;
}

.convolution-weight-bars line {
  stroke: var(--convolution-input);
  stroke-width: 8;
  stroke-linecap: round;
}

.convolution-svg-response-line {
  fill: none;
  stroke: var(--convolution-response);
  stroke-width: 4;
}

.convolution-role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.convolution-role-grid > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  padding: 16px;
  border: 1px solid var(--convolution-line);
  border-radius: 6px;
  background: var(--convolution-tool-surface);
}

.convolution-role-symbol {
  grid-row: 1 / 3;
  color: var(--convolution-action);
  font-size: 1.45em;
  font-weight: 800;
}

.convolution-role-grid strong { color: var(--convolution-copy); }
#learnView .convolution-role-grid p { margin: 0 !important; color: var(--convolution-muted); font-size: 0.86em; }

.convolution-five-steps {
  display: grid;
  gap: 8px;
  margin: 16px 0;
}

.convolution-five-steps > div {
  display: grid;
  grid-template-columns: minmax(100px, 0.28fr) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 54px;
  padding: 10px 14px;
  border-left: 4px solid var(--convolution-action);
  background: var(--convolution-tool-surface);
}

.convolution-five-steps strong { color: var(--convolution-overlap); }
.convolution-five-steps span { color: var(--convolution-muted); }

.convolution-takeaway {
  margin: 18px 0 0 !important;
  padding: 12px 14px;
  border-left: 4px solid var(--convolution-integral);
  background: #fbf1ea;
  color: #6b3018 !important;
}

.convolution-interval-line {
  display: grid;
  grid-template-columns: auto minmax(50px, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin: 18px 0;
  color: var(--convolution-muted);
  font-size: 0.84em;
}

.convolution-interval-line i {
  height: 4px;
  background: var(--convolution-action);
}

.convolution-piecewise {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1px;
  margin: 16px 0;
  overflow: hidden;
  border: 1px solid var(--convolution-line);
  border-radius: 6px;
  background: var(--convolution-line);
}

.convolution-piecewise > * {
  min-width: 0;
  padding: 11px 13px;
  background: var(--convolution-surface);
}

.convolution-piecewise span { color: var(--convolution-muted); }
.convolution-piecewise strong { color: var(--convolution-output); overflow-wrap: anywhere; }
.convolution-piecewise-wide { grid-template-columns: minmax(100px, auto) minmax(0, 1fr); }
.convolution-answer { border-left-color: var(--convolution-output); font-weight: 750; }

.convolution-demo-stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border-block: 1px solid #dbe3ec;
  background: #dbe3ec;
}

.convolution-demo-panel {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 10px 14px;
  background: var(--convolution-tool-surface);
}

.convolution-demo-panel strong { color: var(--convolution-copy); font-size: 0.82rem; }
.convolution-demo-panel span { color: var(--convolution-muted); font-size: 0.72rem; overflow-wrap: anywhere; }
.convolution-demo-panel[data-convolution-demo-layer="signals"] { border-top: 3px solid var(--convolution-input); }
.convolution-demo-panel[data-convolution-demo-layer="product"] { border-top: 3px solid var(--convolution-overlap); }
.convolution-demo-panel[data-convolution-demo-layer="output"] { border-top: 3px solid var(--convolution-output); }

.lesson-page-frame[data-lesson-section="2.4-2"] .kc-interactive-demo {
  margin-top: 18px;
}

.lesson-page-frame[data-lesson-section="2.4-2"] .geogebra-demo-instruction {
  padding: 13px 20px;
  text-align: left;
}

.convolution-practice-builder {
  display: grid;
  grid-template-columns: minmax(170px, 0.32fr) minmax(0, 1fr);
  gap: 20px;
  width: 100%;
}

.convolution-practice-drills {
  display: grid;
  align-content: start;
  gap: 6px;
}

.convolution-practice-drills button {
  display: grid;
  gap: 2px;
  min-height: 56px;
  padding: 10px 12px;
  border: 1px solid var(--convolution-line);
  border-radius: 6px;
  background: var(--convolution-surface);
  color: var(--convolution-copy);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.convolution-practice-drills button.is-active {
  border-color: var(--convolution-action);
  background: #edf7f3;
}

.convolution-practice-drills strong {
  color: var(--convolution-muted);
  font-size: 0.7em;
}

.convolution-practice-workspace {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--convolution-line);
  border-radius: 7px;
  background: var(--convolution-surface);
}

.convolution-practice-prompt {
  margin-bottom: 16px;
  color: var(--convolution-copy);
  font-weight: 800;
}

.convolution-practice-fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  min-width: 0;
  margin: 0;
  padding: 14px 0;
  border: 0;
  border-top: 1px solid var(--convolution-line);
}

.convolution-practice-fieldset legend {
  width: 100%;
  margin-bottom: 8px;
  color: var(--convolution-copy);
  font-weight: 760;
}

.convolution-practice-fieldset label {
  min-width: 0;
  color: var(--convolution-muted);
}

.convolution-practice-fieldset input[type="text"],
.convolution-practice-fieldset select {
  box-sizing: border-box;
  max-width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid #94a3b8;
  border-radius: 5px;
  background: var(--convolution-surface);
  color: var(--convolution-copy);
  font: inherit;
}

.convolution-practice-support label {
  display: grid;
  gap: 5px;
  flex: 1 1 170px;
}

.convolution-breakpoint,
.convolution-practice-actions button {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid #94a3b8;
  border-radius: 6px;
  background: var(--convolution-surface);
  color: var(--convolution-copy);
  font: inherit;
  font-weight: 760;
  cursor: pointer;
}

.convolution-breakpoint[aria-pressed="true"],
.convolution-practice-actions .convolution-practice-submit {
  border-color: var(--convolution-action);
  background: var(--convolution-action);
  color: #ffffff;
}

.convolution-curve-segment {
  flex: 1 1 170px;
  min-width: 0;
}

.convolution-curve-segment label {
  display: grid;
  gap: 5px;
}

.convolution-practice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.convolution-practice-actions button:disabled {
  cursor: default;
  opacity: 0.45;
}

.convolution-practice-feedback {
  min-height: 50px;
  margin: 14px 0 0 !important;
  padding: 12px 14px;
  border-left: 4px solid var(--convolution-integral);
  background: #fbf1ea;
  color: #6b3018 !important;
}

:root[data-theme="dark"] .lesson-page-frame[data-lesson-section="2.4-2"] :is(
  .convolution-role-grid > div,
  .convolution-piecewise > *,
  .convolution-practice-drills button,
  .convolution-practice-workspace,
  .convolution-demo-panel
) {
  border-color: var(--convolution-line);
  background: var(--convolution-tool-surface);
  color: var(--convolution-copy);
}

:root[data-theme="dark"] .lesson-page-frame[data-lesson-section="2.4-2"] :is(
  .convolution-overview-objective,
  .convolution-page-question,
  .convolution-core-actions strong,
  .convolution-role-grid strong,
  .convolution-demo-panel strong,
  .convolution-practice-prompt
) {
  color: #f1f5f9 !important;
}

:root[data-theme="dark"] .lesson-page-frame[data-lesson-section="2.4-2"] :is(
  .convolution-overview-formula,
  .convolution-equation,
  .convolution-past-weighting,
  .convolution-five-steps > div
) {
  background: var(--convolution-tool-surface);
  color: var(--convolution-copy);
}

@media (max-width: 760px) {
  #learnView .lesson-page-frame[data-lesson-section="2.4-2"] .lesson-page-content {
    padding: 22px 16px;
    font-size: 16px !important;
    line-height: 1.68 !important;
  }

  .convolution-core-actions,
  .convolution-role-grid,
  .convolution-practice-builder {
    grid-template-columns: 1fr;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-teaching-block {
    padding: 0;
  }

  #learnView .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-stage-intro > h2 {
    font-size: 1.8rem;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-core-actions > div {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 5px 10px;
    align-items: start;
    padding-block: 14px;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-core-action-index {
    grid-row: 1 / 3;
    padding-top: 4px;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-core-actions span:not(.convolution-core-action-index) {
    grid-column: 2;
  }

  .convolution-analogy-layout {
    grid-template-columns: 1fr;
  }

  .convolution-analogy-layout .convolution-analogy-figure {
    width: min(100%, 210px);
    margin-inline: auto;
  }

  #learnView .convolution-past-weighting .convolution-past-effects-image {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }

  .convolution-five-steps > div {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
    padding-inline: 10px;
  }

  .convolution-demo-stack {
    grid-template-columns: 1fr;
  }

  .convolution-demo-panel {
    grid-template-columns: 74px minmax(0, 1fr);
    align-items: center;
  }

  .convolution-piecewise,
  .convolution-piecewise-wide {
    grid-template-columns: minmax(90px, 0.42fr) minmax(0, 1fr);
  }

  .convolution-practice-drills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .convolution-practice-workspace {
    padding: 14px;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-stage-tab {
    font-size: 12px;
  }
}

@media (max-width: 430px) {
  .convolution-core-actions { gap: 0; }
  .convolution-practice-drills { grid-template-columns: 1fr; }
  .convolution-interval-line { grid-template-columns: 1fr; }
  .convolution-interval-line i { width: 100%; }
}

@media (max-width: 820px) {
  #learnView#learnView .learn-topbar-left {
    overflow: visible !important;
  }

  #learnView#learnView .learn-title {
    overflow: visible !important;
    font-size: 16px !important;
    line-height: 1.24 !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }
}

/* MISTAKE NOTE GLASS STACK LOCK: stacked frosted notes, user-owned first. */

#mistakeNotebookView .mistake-user-note-card,
#mistakeNotebookView .mistake-ai-draft-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0 !important;
  border: 1px solid rgba(255,255,255,0.72) !important;
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.52), rgba(255,255,255,0.18) 52%, rgba(255,255,255,0.10)),
    radial-gradient(520px 260px at 0% 0%, rgba(125,211,252,0.20), transparent 68%),
    radial-gradient(420px 240px at 100% 12%, rgba(167,139,250,0.13), transparent 70%);
  box-shadow:
    0 26px 60px rgba(15,23,42,0.12),
    0 8px 22px rgba(14,165,233,0.08),
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -1px 0 rgba(255,255,255,0.24);
  backdrop-filter: blur(34px) saturate(190%) brightness(1.06);
  -webkit-backdrop-filter: blur(34px) saturate(190%) brightness(1.06);
}

#mistakeNotebookView .mistake-ai-draft-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.50), rgba(255,255,255,0.17) 54%, rgba(255,255,255,0.10)),
    radial-gradient(520px 260px at 8% 0%, rgba(147,197,253,0.22), transparent 68%),
    radial-gradient(460px 240px at 100% 0%, rgba(196,181,253,0.15), transparent 72%);
}

#mistakeNotebookView .mistake-user-note-card::before,
#mistakeNotebookView .mistake-ai-draft-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: 29px;
  background:
    linear-gradient(125deg, rgba(255,255,255,0.58), rgba(255,255,255,0.08) 34%, transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.18), transparent 44%);
  pointer-events: none;
}

#mistakeNotebookView .mistake-user-note-card {
  display: grid;
}

#mistakeNotebookView .mistake-ai-draft-card {
  display: grid;
}

#mistakeNotebookView .mistake-note-card-head,
#mistakeNotebookView .mistake-draft-head {
  margin: 0 0 12px !important;
}

#mistakeNotebookView .mistake-user-note-card .mistake-field-label {
  color: rgba(13,112,105,0.86);
  text-shadow: 0 1px 0 rgba(255,255,255,0.70);
}

#mistakeNotebookView .mistake-ai-draft-card .mistake-field-label {
  color: rgba(79,110,226,0.88);
  text-shadow: 0 1px 0 rgba(255,255,255,0.70);
}

#mistakeNotebookView .mistake-note-image-btn {
  min-height: 38px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(255,255,255,0.74) !important;
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.58), rgba(255,255,255,0.18)),
    radial-gradient(120px 58px at 12% 0%, rgba(103,232,249,0.18), transparent 70%);
  color: rgba(15,118,110,0.86);
  box-shadow:
    0 12px 24px rgba(15,23,42,0.08),
    inset 0 1px 0 rgba(255,255,255,0.94),
    inset 0 -1px 0 rgba(255,255,255,0.22);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

#mistakeNotebookView .mistake-notes-input,
#mistakeNotebookView .mistake-draft-notes-output {
  width: 100% !important;
  padding: 20px 22px !important;
  border: 1px solid rgba(255,255,255,0.70) !important;
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.44), rgba(255,255,255,0.14) 64%, rgba(255,255,255,0.08)),
    radial-gradient(420px 220px at 0% 0%, rgba(255,255,255,0.30), transparent 65%) !important;
  color: rgba(30,41,59,0.88) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.82),
    inset 0 0 0 1px rgba(255,255,255,0.12),
    0 14px 30px rgba(15,23,42,0.07) !important;
  backdrop-filter: blur(24px) saturate(180%) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(1.05);
}


#mistakeNotebookView .mistake-notes-input::placeholder {
  color: rgba(71,85,105,0.48) !important;
}


#mistakeNotebookView .mistake-draft-notes-output :is(ul, ol),
#mistakeNotebookView .mistake-ai-answer :is(ul, ol) {
  margin: 10px 0 12px 1.3em !important;
  padding-left: 1.1em !important;
}

#mistakeNotebookView .mistake-draft-notes-output li,
#mistakeNotebookView .mistake-ai-answer li {
  margin: 7px 0 !important;
  padding-left: 0.2em !important;
  line-height: 1.65 !important;
}

#mistakeNotebookView .mistake-draft-notes-output p,
#mistakeNotebookView .mistake-ai-answer p {
  margin: 8px 0 !important;
}

#mistakeNotebookView .mistake-draft-notes-output .math-block,
#mistakeNotebookView .mistake-ai-answer .math-block {
  margin: 14px 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.46);
  overflow-x: auto;
}

#mistakeNotebookView .mistake-note-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)) !important;
  gap: 12px !important;
}

#mistakeNotebookView .mistake-note-image-empty {
  grid-column: 1 / -1;
  padding: 0 16px !important;
  border: 1px dashed rgba(94,116,138,0.34) !important;
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.28), rgba(255,255,255,0.08));
  color: rgba(71,85,105,0.58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.58);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

#mistakeNotebookView .mistake-note-image-chip {
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.40), rgba(255,255,255,0.12));
  box-shadow:
    0 16px 30px rgba(15,23,42,0.10),
    inset 0 1px 0 rgba(255,255,255,0.88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

#mistakeNotebookView .mistake-note-image-chip img {
  aspect-ratio: 4 / 3;
}

#mistakeNotebookView .mistake-actions {
  margin-top: 0 !important;
}

/* True EOF lesson title scale lock: chapter headings stay strong without swallowing the page. */
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-heading#learnPageHeading,
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-heading {
  margin-bottom: clamp(20px, 2.6vw, 34px) !important;
}

#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-heading#learnPageHeading h2,
#learnView#learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-heading h2 {
  max-width: min(100%, 1080px) !important;
  font-size: clamp(2.3rem, 4.6vw, 4.95rem) !important;
  line-height: 1.08 !important;
}

/* ABSOLUTE EOF HOME ASK DEBUG LOCK: composer focus animation + carryover sizing. */
.welcome.home-ask-workspace #homeModePicker.home-mode-picker {
  flex: 0 0 auto !important;
}

.welcome.home-ask-workspace .home-mode-toggle {
  line-height: 1 !important;
}

.welcome.home-ask-workspace .home-mode-toggle #homeModeCurrentText {
  white-space: nowrap !important;
}

.welcome.home-ask-workspace .home-mode-toggle .qa-caret-icon {
  margin-left: 1px !important;
}

.welcome.home-ask-workspace #homeModeMenu .home-mode-menu-text strong {
  line-height: 1.1 !important;
}

@media (max-width: 760px) {
  .welcome.home-ask-workspace .home-ask-toolbar {
    gap: 8px !important;
    padding-inline: 10px !important;
  }

  .welcome.home-ask-workspace .home-mode-toggle {
    height: 42px !important;
  }

  .welcome.home-ask-workspace #webSearchToggleBtnMain.home-ask-web-toggle {
    height: 42px !important;
  }

  .welcome.home-ask-workspace #homeModeMenu.home-mode-menu {
    width: min(300px, calc(100vw - 28px)) !important;
  }
}

/* ABSOLUTE EOF KEY TAKEAWAYS GLASS LOCK: replace the hard blue flashcard look. */
#learnView#learnView .learn-explain-body .lecture-note-card-summary,
#learnView#learnView .explain-body .lecture-note-card-summary,
.learn-explain-body .lecture-note-card-summary,
.explain-body .lecture-note-card-summary {
  position: relative !important;
  isolation: isolate !important;
  padding: clamp(22px, 2.4vw, 32px) !important;
  color: rgba(30,41,59,0.88) !important;
}

#learnView#learnView .learn-explain-body .lecture-note-card-summary::before,
#learnView#learnView .explain-body .lecture-note-card-summary::before,
.learn-explain-body .lecture-note-card-summary::before,
.explain-body .lecture-note-card-summary::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  z-index: -1 !important;
  border-radius: 29px !important;
  background:
    linear-gradient(125deg, rgba(255,255,255,0.62), rgba(255,255,255,0.08) 38%, transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,0.20), transparent 48%) !important;
  pointer-events: none !important;
}

#learnView#learnView .learn-explain-body .lecture-note-card-summary:hover,
#learnView#learnView .explain-body .lecture-note-card-summary:hover,
.learn-explain-body .lecture-note-card-summary:hover,
.explain-body .lecture-note-card-summary:hover {
  transform: translateY(-2px) scale(1.003) !important;
  box-shadow:
    0 30px 70px rgba(15,23,42,0.13),
    0 12px 32px rgba(14,165,233,0.10),
    inset 0 1px 0 rgba(255,255,255,0.94),
    inset 0 -1px 0 rgba(255,255,255,0.24) !important;
}

#learnView#learnView .learn-explain-body .lecture-note-card-summary > :is(h1, h2, h3):first-child,
#learnView#learnView .explain-body .lecture-note-card-summary > :is(h1, h2, h3):first-child,
.learn-explain-body .lecture-note-card-summary > :is(h1, h2, h3):first-child,
.explain-body .lecture-note-card-summary > :is(h1, h2, h3):first-child {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  width: auto !important;
  margin: 0 0 1.15rem !important;
  padding: 0.58rem 1.05rem !important;
  border: 1px solid rgba(255,255,255,0.72) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.64), rgba(255,255,255,0.24)),
    radial-gradient(120px 54px at 18% 0%, rgba(125,211,252,0.28), transparent 72%) !important;
  color: rgba(15,23,42,0.88) !important;
  box-shadow:
    0 12px 26px rgba(15,23,42,0.08),
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -1px 0 rgba(255,255,255,0.20) !important;
  backdrop-filter: blur(22px) saturate(180%) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%) brightness(1.05) !important;
  font-family: "Quicksand", "Nunito", sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

#learnView#learnView .learn-explain-body .lecture-note-card-summary > :is(h1, h2, h3):first-child::before,
#learnView#learnView .explain-body .lecture-note-card-summary > :is(h1, h2, h3):first-child::before,
.learn-explain-body .lecture-note-card-summary > :is(h1, h2, h3):first-child::before,
.explain-body .lecture-note-card-summary > :is(h1, h2, h3):first-child::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: #0ea5e9 !important;
  box-shadow: 0 0 0 5px rgba(14,165,233,0.13) !important;
}

#learnView#learnView .learn-explain-body .lecture-note-card-summary > :is(h1, h2, h3):first-child::after,
#learnView#learnView .explain-body .lecture-note-card-summary > :is(h1, h2, h3):first-child::after,
.learn-explain-body .lecture-note-card-summary > :is(h1, h2, h3):first-child::after,
.explain-body .lecture-note-card-summary > :is(h1, h2, h3):first-child::after {
  content: none !important;
}

#learnView#learnView .learn-explain-body .learn-key-takeaways-list,
#learnView#learnView .explain-body .learn-key-takeaways-list,
.learn-explain-body .learn-key-takeaways-list,
.explain-body .learn-key-takeaways-list {
  counter-reset: takeaway-item !important;
}

#learnView#learnView .learn-explain-body .learn-key-takeaways-list > li,
#learnView#learnView .explain-body .learn-key-takeaways-list > li,
.learn-explain-body .learn-key-takeaways-list > li,
.explain-body .learn-key-takeaways-list > li {
  counter-increment: takeaway-item !important;
  position: relative !important;
}

#learnView#learnView .learn-explain-body .learn-key-takeaways-list > li::before,
#learnView#learnView .explain-body .learn-key-takeaways-list > li::before,
.learn-explain-body .learn-key-takeaways-list > li::before,
.explain-body .learn-key-takeaways-list > li::before {
  transform: none !important;
  place-items: center !important;
  border: 1px solid rgba(255,255,255,0.76) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.72), rgba(186,230,253,0.34)) !important;
  color: #0284c7 !important;
  font-family: "Quicksand", "Nunito", sans-serif !important;
  font-size: 0.86rem !important;
  font-weight: 900 !important;
  box-shadow:
    0 10px 18px rgba(14,165,233,0.13),
    inset 0 1px 0 rgba(255,255,255,0.96) !important;
  backdrop-filter: blur(18px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
}

#learnView#learnView .learn-explain-body .learn-key-takeaways-list > li p,
#learnView#learnView .explain-body .learn-key-takeaways-list > li p,
.learn-explain-body .learn-key-takeaways-list > li p,
.explain-body .learn-key-takeaways-list > li p {
  margin: 0 !important;
}

#learnView#learnView .learn-explain-body .learn-key-takeaways-list > li strong,
#learnView#learnView .explain-body .learn-key-takeaways-list > li strong,
.learn-explain-body .learn-key-takeaways-list > li strong,
.explain-body .learn-key-takeaways-list > li strong {
  color: rgba(15,23,42,0.94) !important;
  font-weight: 850 !important;
}

@media (max-width: 760px) {
  #learnView#learnView .learn-explain-body .lecture-note-card-summary,
  #learnView#learnView .explain-body .lecture-note-card-summary,
  .learn-explain-body .lecture-note-card-summary,
  .explain-body .lecture-note-card-summary {
    padding: 18px !important;
    border-radius: 24px !important;
  }

}

/* ABSOLUTE EOF QUICK CHECK GLASS LOCK: adaptive quiz banner matches the glass lesson cards. */
#learnView#learnView .lesson-test-banner#testBannerCard,
#learnView#learnView .lesson-test-banner,
.learn-explain-body .lesson-test-banner#testBannerCard,
.learn-explain-body .lesson-test-banner,
.explain-body .lesson-test-banner#testBannerCard,
.explain-body .lesson-test-banner {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  width: min(100%, 880px) !important;
  margin: clamp(28px, 4vh, 42px) auto !important;
  padding: clamp(28px, 4.2vw, 46px) clamp(24px, 5vw, 58px) !important;
  border: 1px solid rgba(255,255,255,0.72) !important;
  border-radius: 30px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.56), rgba(255,255,255,0.20) 58%, rgba(255,255,255,0.12)),
    radial-gradient(560px 220px at 0% 0%, rgba(125,211,252,0.20), transparent 70%),
    radial-gradient(520px 240px at 100% 15%, rgba(251,207,232,0.20), transparent 72%) !important;
  box-shadow:
    0 28px 68px rgba(15,23,42,0.12),
    0 12px 30px rgba(14,165,233,0.08),
    inset 0 1px 0 rgba(255,255,255,0.94),
    inset 0 -1px 0 rgba(255,255,255,0.22) !important;
  backdrop-filter: blur(34px) saturate(190%) brightness(1.06) !important;
  -webkit-backdrop-filter: blur(34px) saturate(190%) brightness(1.06) !important;
  text-align: center !important;
  color: rgba(30,41,59,0.88) !important;
}

#learnView#learnView .lesson-test-banner#testBannerCard::before,
#learnView#learnView .lesson-test-banner::before,
.learn-explain-body .lesson-test-banner#testBannerCard::before,
.learn-explain-body .lesson-test-banner::before,
.explain-body .lesson-test-banner#testBannerCard::before,
.explain-body .lesson-test-banner::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  z-index: -1 !important;
  border-radius: 29px !important;
  background:
    linear-gradient(125deg, rgba(255,255,255,0.62), rgba(255,255,255,0.08) 42%, transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.18), transparent 48%) !important;
  pointer-events: none !important;
}

#learnView#learnView .lesson-test-banner#testBannerCard::after,
#learnView#learnView .lesson-test-banner::after,
.learn-explain-body .lesson-test-banner#testBannerCard::after,
.learn-explain-body .lesson-test-banner::after,
.explain-body .lesson-test-banner#testBannerCard::after,
.explain-body .lesson-test-banner::after {
  position: absolute !important;
  left: 50% !important;
  top: 16px !important;
  width: 66px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: rgba(14,165,233,0.28) !important;
  transform: translateX(-50%) !important;
  box-shadow: 0 0 22px rgba(14,165,233,0.20) !important;
  pointer-events: none !important;
}

#learnView#learnView .lesson-test-banner h3,
#learnView#learnView .lesson-test-banner#testBannerCard h3,
.learn-explain-body .lesson-test-banner h3,
.learn-explain-body .lesson-test-banner#testBannerCard h3,
.explain-body .lesson-test-banner h3,
.explain-body .lesson-test-banner#testBannerCard h3 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 0 0 18px !important;
  padding: 10px 16px !important;
  border: 1px solid rgba(255,255,255,0.68) !important;
  border-radius: 19px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.58), rgba(255,255,255,0.22)),
    radial-gradient(120px 54px at 18% 0%, rgba(125,211,252,0.24), transparent 72%) !important;
  box-shadow:
    0 14px 28px rgba(15,23,42,0.08),
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -1px 0 rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(22px) saturate(180%) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%) brightness(1.05) !important;
  color: rgba(15,23,42,0.88) !important;
  font-family: "Quicksand", "Nunito", sans-serif !important;
  font-size: clamp(1rem, 1.8vw, 1.22rem) !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
}

#learnView#learnView .lesson-test-banner h3 svg,
#learnView#learnView .lesson-test-banner#testBannerCard h3 svg,
.learn-explain-body .lesson-test-banner h3 svg,
.learn-explain-body .lesson-test-banner#testBannerCard h3 svg,
.explain-body .lesson-test-banner h3 svg,
.explain-body .lesson-test-banner#testBannerCard h3 svg {
  width: 22px !important;
  height: 22px !important;
  padding: 4px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.50) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.86) !important;
  stroke: #0284c7 !important;
}

#learnView#learnView .lesson-test-banner p,
#learnView#learnView .lesson-test-banner#testBannerCard p,
.learn-explain-body .lesson-test-banner p,
.learn-explain-body .lesson-test-banner#testBannerCard p,
.explain-body .lesson-test-banner p,
.explain-body .lesson-test-banner#testBannerCard p {
  max-width: 620px !important;
  margin: 0 auto 24px !important;
  color: rgba(71,85,105,0.86) !important;
  font-size: clamp(0.98rem, 1.35vw, 1.08rem) !important;
  font-weight: 760 !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
}

#learnView#learnView #startTestBtn,
#learnView#learnView .lesson-test-banner #startTestBtn,
.learn-explain-body #startTestBtn,
.learn-explain-body .lesson-test-banner #startTestBtn,
.explain-body #startTestBtn,
.explain-body .lesson-test-banner #startTestBtn {
  position: relative !important;
  min-width: min(100%, 330px) !important;
  min-height: 50px !important;
  padding: 0 28px !important;
  border: 1px solid rgba(255,255,255,0.76) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.64), rgba(125,211,252,0.30) 54%, rgba(255,255,255,0.18)),
    radial-gradient(180px 66px at 20% 0%, rgba(255,255,255,0.54), transparent 72%) !important;
  color: rgba(7,89,133,0.92) !important;
  box-shadow:
    0 16px 32px rgba(14,165,233,0.14),
    0 7px 14px rgba(15,23,42,0.06),
    inset 0 1px 0 rgba(255,255,255,0.94),
    inset 0 -1px 0 rgba(255,255,255,0.22) !important;
  backdrop-filter: blur(24px) saturate(185%) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(24px) saturate(185%) brightness(1.05) !important;
  cursor: pointer !important;
  font-family: "Quicksand", "Nunito", sans-serif !important;
  font-size: 0.98rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  transition:
    transform 180ms cubic-bezier(0.18, 1.25, 0.28, 1),
    box-shadow 180ms ease,
    border-color 180ms ease !important;
}

#learnView#learnView #startTestBtn:hover:not(:disabled),
#learnView#learnView .lesson-test-banner #startTestBtn:hover:not(:disabled),
.learn-explain-body #startTestBtn:hover:not(:disabled),
.learn-explain-body .lesson-test-banner #startTestBtn:hover:not(:disabled),
.explain-body #startTestBtn:hover:not(:disabled),
.explain-body .lesson-test-banner #startTestBtn:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  border-color: rgba(255,255,255,0.88) !important;
  box-shadow:
    0 20px 38px rgba(14,165,233,0.18),
    0 8px 18px rgba(15,23,42,0.08),
    inset 0 1px 0 rgba(255,255,255,0.96),
    inset 0 -1px 0 rgba(255,255,255,0.24) !important;
}

#learnView#learnView #startTestBtn:disabled,
#learnView#learnView .lesson-test-banner #startTestBtn:disabled,
.learn-explain-body #startTestBtn:disabled,
.learn-explain-body .lesson-test-banner #startTestBtn:disabled,
.explain-body #startTestBtn:disabled,
.explain-body .lesson-test-banner #startTestBtn:disabled {
  cursor: progress !important;
  opacity: 0.78 !important;
  transform: none !important;
}

@media (max-width: 760px) {
  #learnView#learnView .lesson-test-banner#testBannerCard,
  #learnView#learnView .lesson-test-banner,
  .learn-explain-body .lesson-test-banner#testBannerCard,
  .learn-explain-body .lesson-test-banner,
  .explain-body .lesson-test-banner#testBannerCard,
  .explain-body .lesson-test-banner {
    padding: 26px 18px !important;
    border-radius: 24px !important;
  }

  #learnView#learnView #startTestBtn,
  #learnView#learnView .lesson-test-banner #startTestBtn,
  .learn-explain-body #startTestBtn,
  .learn-explain-body .lesson-test-banner #startTestBtn,
  .explain-body #startTestBtn,
  .explain-body .lesson-test-banner #startTestBtn {
    min-width: 0 !important;
    width: min(100%, 320px) !important;
  }
}

/* Absolute EOF brand mark scale: make the supplied transparent logo read larger. */
.app .sidebar .logo {
  gap: 11px !important;
}

.app .sidebar .logo-icon.logo-icon-brand,
.app .sidebar .logo-icon-brand {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  flex: 0 0 42px !important;
  overflow: visible !important;
}

.app .sidebar .logo-icon.logo-icon-brand img,
.app .sidebar .logo-icon-brand img {
  width: 42px !important;
  height: 42px !important;
  object-fit: contain;
  border-radius: 0 !important;
  transform: none !important;
}

.intro-landing-new .scrap-logo-mark {
  width: 48px !important;
  height: 48px !important;
  transform: none !important;
  object-fit: contain !important;
}

.login-brand-mark .aquarius-glow,
.login-brand-mark-aurora .aquarius-glow,
.aquarius-glow {
  transform: none !important;
  width: 76px !important;
  height: 76px !important;
  object-fit: contain !important;
}

/* ABSOLUTE EOF POLISH: remove quiz top rule. */
#learnView#learnView .lesson-test-banner#testBannerCard::after,
#learnView#learnView .lesson-test-banner::after,
.learn-explain-body .lesson-test-banner#testBannerCard::after,
.learn-explain-body .lesson-test-banner::after,
.explain-body .lesson-test-banner#testBannerCard::after,
.explain-body .lesson-test-banner::after {
  content: none !important;
  display: none !important;
}

/* ABSOLUTE EOF KEY TAKEAWAYS COUNTER GRID LOCK: reserve a real number column. */
#learnView#learnView .learn-explain-body .learn-key-takeaways-list > li::before,
#learnView#learnView .explain-body .learn-key-takeaways-list > li::before,
.learn-explain-body .learn-key-takeaways-list > li::before,
.explain-body .learn-key-takeaways-list > li::before {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: start !important;
  justify-self: center !important;
  width: 30px !important;
  height: 30px !important;
  margin-top: 2px !important;
  z-index: 0 !important;
}

#learnView#learnView .learn-explain-body .learn-key-takeaways-list > li > *,
#learnView#learnView .explain-body .learn-key-takeaways-list > li > *,
.learn-explain-body .learn-key-takeaways-list > li > *,
.explain-body .learn-key-takeaways-list > li > * {
  grid-column: 2 !important;
  min-width: 0 !important;
  margin-left: 0 !important;
}

#learnView#learnView .learn-explain-body .learn-key-takeaways-list > li > :first-child,
#learnView#learnView .explain-body .learn-key-takeaways-list > li > :first-child,
.learn-explain-body .learn-key-takeaways-list > li > :first-child,
.explain-body .learn-key-takeaways-list > li > :first-child {
  margin-top: 0 !important;
}

/* ABSOLUTE EOF KEY TAKEAWAYS FROSTED LAYOUT LOCK: explicit marker + copy structure. */
#learnView#learnView .learn-explain-body .lecture-note-card-summary,
#learnView#learnView .explain-body .lecture-note-card-summary,
.learn-explain-body .lecture-note-card-summary,
.explain-body .lecture-note-card-summary {
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,0.74) !important;
  border-radius: 30px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.56), rgba(255,255,255,0.20) 62%, rgba(255,255,255,0.12)),
    radial-gradient(560px 220px at 0% 0%, rgba(125,211,252,0.18), transparent 72%),
    radial-gradient(520px 240px at 100% 8%, rgba(251,207,232,0.16), transparent 76%) !important;
  box-shadow:
    0 30px 72px rgba(15,23,42,0.11),
    0 10px 24px rgba(14,165,233,0.07),
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -1px 0 rgba(255,255,255,0.22) !important;
  backdrop-filter: blur(34px) saturate(190%) brightness(1.06) !important;
  -webkit-backdrop-filter: blur(34px) saturate(190%) brightness(1.06) !important;
}

#learnView#learnView .learn-explain-body .learn-key-takeaways-list,
#learnView#learnView .explain-body .learn-key-takeaways-list,
.learn-explain-body .learn-key-takeaways-list,
.explain-body .learn-key-takeaways-list {
  display: grid !important;
  gap: 14px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#learnView#learnView .learn-explain-body .learn-key-takeaways-list > li,
#learnView#learnView .explain-body .learn-key-takeaways-list > li,
.learn-explain-body .learn-key-takeaways-list > li,
.explain-body .learn-key-takeaways-list > li {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  column-gap: 18px !important;
  align-items: start !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 18px 22px !important;
  border: 1px solid rgba(255,255,255,0.70) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.48), rgba(255,255,255,0.18)),
    radial-gradient(280px 120px at 0% 0%, rgba(224,242,254,0.30), transparent 74%) !important;
  box-shadow:
    0 15px 34px rgba(15,23,42,0.075),
    inset 0 1px 0 rgba(255,255,255,0.90),
    inset 0 -1px 0 rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(24px) saturate(185%) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(24px) saturate(185%) brightness(1.05) !important;
  color: rgba(51,65,85,0.92) !important;
  font-size: 1.03rem !important;
  line-height: 1.62 !important;
}

#learnView#learnView .learn-explain-body .learn-key-takeaways-list > li::before,
#learnView#learnView .explain-body .learn-key-takeaways-list > li::before,
.learn-explain-body .learn-key-takeaways-list > li::before,
.explain-body .learn-key-takeaways-list > li::before {
  content: none !important;
  display: none !important;
}

#learnView#learnView .learn-explain-body .learn-key-takeaways-list .takeaway-index,
#learnView#learnView .explain-body .learn-key-takeaways-list .takeaway-index,
.learn-explain-body .learn-key-takeaways-list .takeaway-index,
.explain-body .learn-key-takeaways-list .takeaway-index {
  grid-column: 1 !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  margin-top: 2px !important;
  border: 1px solid rgba(255,255,255,0.78) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.78), rgba(186,230,253,0.36)),
    radial-gradient(38px 26px at 25% 15%, rgba(255,255,255,0.76), transparent 72%) !important;
  color: #0284c7 !important;
  box-shadow:
    0 10px 20px rgba(14,165,233,0.14),
    inset 0 1px 0 rgba(255,255,255,0.96) !important;
  backdrop-filter: blur(18px) saturate(180%) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) brightness(1.04) !important;
  font-family: "Quicksand", "Nunito", sans-serif !important;
  font-size: 0.86rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

#learnView#learnView .learn-explain-body .learn-key-takeaways-list .takeaway-copy,
#learnView#learnView .explain-body .learn-key-takeaways-list .takeaway-copy,
.learn-explain-body .learn-key-takeaways-list .takeaway-copy,
.explain-body .learn-key-takeaways-list .takeaway-copy {
  grid-column: 2 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

#learnView#learnView .learn-explain-body .learn-key-takeaways-list .takeaway-copy > *,
#learnView#learnView .explain-body .learn-key-takeaways-list .takeaway-copy > *,
.learn-explain-body .learn-key-takeaways-list .takeaway-copy > *,
.explain-body .learn-key-takeaways-list .takeaway-copy > * {
  margin-left: 0 !important;
}

#learnView#learnView .learn-explain-body .learn-key-takeaways-list .takeaway-copy > :first-child,
#learnView#learnView .explain-body .learn-key-takeaways-list .takeaway-copy > :first-child,
.learn-explain-body .learn-key-takeaways-list .takeaway-copy > :first-child,
.explain-body .learn-key-takeaways-list .takeaway-copy > :first-child {
  margin-top: 0 !important;
}

#learnView#learnView .learn-explain-body .learn-key-takeaways-list .takeaway-copy > :last-child,
#learnView#learnView .explain-body .learn-key-takeaways-list .takeaway-copy > :last-child,
.learn-explain-body .learn-key-takeaways-list .takeaway-copy > :last-child,
.explain-body .learn-key-takeaways-list .takeaway-copy > :last-child {
  margin-bottom: 0 !important;
}

#learnView#learnView .learn-explain-body .learn-key-takeaways-list .takeaway-copy p,
#learnView#learnView .explain-body .learn-key-takeaways-list .takeaway-copy p,
.learn-explain-body .learn-key-takeaways-list .takeaway-copy p,
.explain-body .learn-key-takeaways-list .takeaway-copy p {
  margin: 0 !important;
  max-width: none !important;
}

@media (max-width: 760px) {
  #learnView#learnView .learn-explain-body .learn-key-takeaways-list > li,
  #learnView#learnView .explain-body .learn-key-takeaways-list > li,
  .learn-explain-body .learn-key-takeaways-list > li,
  .explain-body .learn-key-takeaways-list > li {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    column-gap: 13px !important;
    padding: 16px !important;
    border-radius: 20px !important;
  }

  #learnView#learnView .learn-explain-body .learn-key-takeaways-list .takeaway-index,
  #learnView#learnView .explain-body .learn-key-takeaways-list .takeaway-index,
  .learn-explain-body .learn-key-takeaways-list .takeaway-index,
  .explain-body .learn-key-takeaways-list .takeaway-index {
    width: 30px !important;
    height: 30px !important;
  }
}

/* ABSOLUTE EOF KEY TAKEAWAYS STRUCTURE CLEANUP: override older broad grid-child locks. */
#learnView#learnView .learn-explain-body .learn-key-takeaways-list > li > .takeaway-index,
#learnView#learnView .explain-body .learn-key-takeaways-list > li > .takeaway-index,
.learn-explain-body .learn-key-takeaways-list > li > .takeaway-index,
.explain-body .learn-key-takeaways-list > li > .takeaway-index {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 32px !important;
  max-width: 32px !important;
  margin-left: 0 !important;
}

#learnView#learnView .learn-explain-body .learn-key-takeaways-list > li > .takeaway-copy,
#learnView#learnView .explain-body .learn-key-takeaways-list > li > .takeaway-copy,
.learn-explain-body .learn-key-takeaways-list > li > .takeaway-copy,
.explain-body .learn-key-takeaways-list > li > .takeaway-copy {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
  text-align: left !important;
}

#learnView#learnView .learn-explain-body .learn-key-takeaways-list > li > :not(.takeaway-index):not(.takeaway-copy),
#learnView#learnView .explain-body .learn-key-takeaways-list > li > :not(.takeaway-index):not(.takeaway-copy),
.learn-explain-body .learn-key-takeaways-list > li > :not(.takeaway-index):not(.takeaway-copy),
.explain-body .learn-key-takeaways-list > li > :not(.takeaway-index):not(.takeaway-copy) {
  grid-column: 2 !important;
}

/* TRUE EOF HOME ASK INTERACTION LOCK: menu opens below, composer pops in place, controls stay compact. */

.welcome.home-ask-workspace .home-ask-empty,
.welcome.home-ask-workspace .home-ask-tags {
  position: relative !important;
  z-index: 8 !important;
}


@keyframes home-ask-in-place-pop {
  0% {
    transform: translateY(0) scale(1);
  }

  48% {
    transform: translateY(0) scale(1.012);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

.welcome.home-ask-workspace .home-ask-toolbar {
  z-index: 40 !important;
}

.welcome.home-ask-workspace .home-mode-toggle {
  gap: 6px !important;
}

.welcome.home-ask-workspace .home-mode-icon {
  min-width: 19px !important;
  min-height: 19px !important;
  font-size: 19px !important;
}

.welcome.home-ask-workspace .home-mode-icon i {
  font-size: 19px !important;
}

.welcome.home-ask-workspace .home-mode-toggle .qa-caret-icon {
  width: 9px !important;
  height: 9px !important;
}


@media (max-width: 760px) {
  .welcome.home-ask-workspace .home-mode-toggle {
    width: 124px !important;
    min-width: 124px !important;
  }

  .welcome.home-ask-workspace #webSearchToggleBtnMain.home-ask-web-toggle {
    width: 38px !important;
    min-width: 38px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .welcome.home-ask-workspace .home-ask-composer:focus-within,
  .welcome.home-ask-workspace #searchBox.home-ask-composer:focus-within {
    animation: none !important;
    transform: translateY(0) scale(1) !important;
  }
}

/* TRUE EOF HOME ASK POLISH LOCK: visible in-place pop and no dropdown/tool-chip collision. */
.welcome.home-ask-workspace .home-ask-tags {
  position: relative !important;
}


@keyframes home-ask-visible-pop {
  0% {
    transform: translateY(0) scale(1);
    box-shadow:
      0 30px 72px rgba(148,47,62,0.16),
      0 12px 28px rgba(15,23,42,0.08),
      inset 0 1px 0 rgba(255,255,255,0.88),
      inset 0 -1px 0 rgba(255,255,255,0.20);
  }

  45% {
    transform: translateY(0) scale(1.024);
    box-shadow:
      0 36px 84px rgba(148,47,62,0.19),
      0 15px 34px rgba(15,23,42,0.10),
      inset 0 1px 0 rgba(255,255,255,0.94),
      inset 0 -1px 0 rgba(255,255,255,0.24);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

.welcome.home-ask-workspace:has(#homeModeMenu.home-mode-menu.show) .home-feature-actions {
  transition: transform 220ms cubic-bezier(0.18, 1.08, 0.28, 1) !important;
}

@media (max-width: 760px) {
  .welcome.home-ask-workspace:has(#homeModeMenu.home-mode-menu.show) .home-feature-actions {
    transform: translateY(120px) !important;
  }
}

/* TRUE EOF HOME ASK UPWARD MENU FIX: keep tool chips visible, open style menu above. */


.welcome.home-ask-workspace .home-ask-composer,
.welcome.home-ask-workspace #searchBox.home-ask-composer {
  margin-bottom: 0 !important;
  overflow: visible !important;
}


@keyframes home-ask-upward-menu-pop {
  0% {
    transform: translateY(34px) scale(1);
    box-shadow:
      0 30px 72px rgba(148,47,62,0.16),
      0 12px 28px rgba(15,23,42,0.08),
      inset 0 1px 0 rgba(255,255,255,0.88),
      inset 0 -1px 0 rgba(255,255,255,0.20);
  }

  42% {
    transform: translateY(34px) scale(1.024);
    box-shadow:
      0 40px 88px rgba(148,47,62,0.22),
      0 16px 36px rgba(15,23,42,0.11),
      0 0 0 2px rgba(255,255,255,0.48),
      inset 0 1px 0 rgba(255,255,255,0.96),
      inset 0 -1px 0 rgba(255,255,255,0.25);
  }

  100% {
    transform: translateY(34px) scale(1);
  }
}

.welcome.home-ask-workspace .home-feature-actions {
  transition: none !important;
}


.welcome.home-ask-workspace #homeModePicker.home-mode-picker {
  z-index: 80 !important;
}

.welcome.home-ask-workspace #homeModeMenu.home-mode-menu {
  overflow-y: auto !important;
  transform: translateY(8px) scale(0.975) !important;
}

.welcome.home-ask-workspace #homeModeMenu.home-mode-menu.show {
  transform: translateY(0) scale(1) !important;
}

@media (max-width: 760px) {
  .welcome.home-ask-workspace .home-ask-stage {
    padding-top: 58px !important;
    gap: 10px !important;
  }

  .welcome.home-ask-workspace .home-ask-empty {
    transform: translateY(12px) !important;
  }

  .welcome.home-ask-workspace .home-ask-composer,
  .welcome.home-ask-workspace #searchBox.home-ask-composer {
    transform: translateY(22px) scale(1) !important;
  }

  .welcome.home-ask-workspace .home-ask-composer:focus-within,
  .welcome.home-ask-workspace #searchBox.home-ask-composer:focus-within {
    transform: translateY(22px) scale(1) !important;
  }

  .welcome.home-ask-workspace .home-feature-actions {
    margin-top: 40px !important;
  }
}

/* TRUE EOF HOME ASK SIZE RESTORE: restore wide hero proportions while keeping upward menu. */
.welcome.home-ask-workspace .home-ask-stage {
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
  gap: 0 !important;
  padding-left: clamp(46px, 7vw, 118px) !important;
  padding-right: clamp(46px, 7vw, 118px) !important;
  padding-bottom: 54px !important;
}

.welcome.home-ask-workspace .home-ask-empty {
  justify-self: center !important;
}

.welcome.home-ask-workspace .home-ask-icon svg {
  width: 34px !important;
  height: 34px !important;
}

.welcome.home-ask-workspace .home-ask-tags {
  justify-self: center !important;
  margin-bottom: 0 !important;
}

.welcome.home-ask-workspace .home-ask-composer,
.welcome.home-ask-workspace #searchBox.home-ask-composer {
  justify-self: center !important;
}


@keyframes home-ask-size-restore-pop {
  0% { transform: translateY(0) scale(1); }
  44% { transform: translateY(0) scale(1.018); }
  100% { transform: translateY(0) scale(1); }
}

.welcome.home-ask-workspace #homeModeMenu.home-mode-menu {
  transform-origin: bottom right !important;
}

.welcome.home-ask-workspace #homeModeMenu .home-mode-option {
  gap: 9px !important;
}

.welcome.home-ask-workspace #homeModeMenu .home-mode-menu-icon {
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  font-size: 22px !important;
}

.welcome.home-ask-workspace #homeModeMenu .home-mode-menu-icon i {
  font-size: 22px !important;
}

.welcome.home-ask-workspace #homeModeMenu .home-mode-menu-text strong {
  font-size: 14px !important;
}

.welcome.home-ask-workspace #homeModeMenu .home-mode-menu-text small {
  margin-top: 1px !important;
  font-size: 11.5px !important;
  line-height: 1.1 !important;
}

.welcome.home-ask-workspace .home-feature-actions {
  justify-self: center !important;
}


@media (max-width: 900px) {
  .welcome.home-ask-workspace .home-ask-stage {
    padding-top: 118px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .welcome.home-ask-workspace .home-ask-composer,
  .welcome.home-ask-workspace #searchBox.home-ask-composer {
    width: min(100%, calc(100vw - 40px)) !important;
    margin-top: 116px !important;
    min-height: 132px !important;
  }

  .welcome.home-ask-workspace .home-ask-tag {
    min-height: 38px !important;
    padding: 0 18px !important;
    font-size: 15px !important;
  }
}

/* TRUE EOF HOME ASK LEARN-QA MATCH: mirror the Learn Q&A page rhythm. */

.welcome.home-ask-workspace .home-ask-empty {
  z-index: 18 !important;
}


.welcome.home-ask-workspace .home-ask-tags {
  transform: none !important;
  z-index: 18 !important;
}


@keyframes home-ask-learn-qa-pop {
  0% { transform: scale(1); }
  46% { transform: scale(1.012); }
  100% { transform: scale(1); }
}

.welcome.home-ask-workspace .home-ask-input-row {
  display: grid !important;
  align-items: start !important;
}


@media (max-width: 1100px) {
  .welcome.home-ask-workspace .home-ask-stage {
    padding: 96px 22px 32px !important;
  }

  .welcome.home-ask-workspace .home-ask-tags {
    margin-top: 28px !important;
    gap: 12px !important;
  }

  .welcome.home-ask-workspace .home-ask-tag {
    min-height: 42px !important;
    padding: 0 18px !important;
    font-size: 16px !important;
  }

  .welcome.home-ask-workspace .home-ask-composer,
  .welcome.home-ask-workspace #searchBox.home-ask-composer {
    min-height: 170px !important;
    padding: 22px 20px 20px !important;
  }

  .welcome.home-ask-workspace .home-feature-chip {
    min-width: 0 !important;
    height: 46px !important;
    font-size: 15px !important;
  }
}

/* TRUE EOF HOME ASK SCALE CORRECTION: match Learn Q&A proportions, not a giant hero. */


.welcome.home-ask-workspace .home-ask-input-row {
  grid-template-columns: 42px minmax(0, 1fr) 50px !important;
  min-height: 58px !important;
  gap: 14px !important;
}


@media (max-width: 1100px) {
  .welcome.home-ask-workspace .home-feature-actions {
    flex-wrap: wrap !important;
  }
}

/* TRUE EOF HOME ASK RIGHT-QA REDESIGN: make Home Ask feel like the lesson-side Q&A panel. */
.welcome.home-ask-workspace {
  overflow: hidden !important;
}

.welcome.home-ask-workspace .home-ask-ambient {
  opacity: 0.74 !important;
  filter: blur(4px) saturate(1.08) !important;
}

.welcome.home-ask-workspace .home-ask-stage {
  position: relative !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  justify-items: center !important;
}

.welcome.home-ask-workspace .home-ask-empty {
  align-self: center !important;
}

.welcome.home-ask-workspace .home-ask-tags {
  pointer-events: auto !important;
}

.welcome.home-ask-workspace .home-ask-composer,
.welcome.home-ask-workspace #searchBox.home-ask-composer {
  align-self: end !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  z-index: 30 !important;
}

.welcome.home-ask-workspace .home-ask-composer:focus-within,
.welcome.home-ask-workspace #searchBox.home-ask-composer:focus-within {
  border-color: rgba(255, 255, 255, 0.78) !important;
  box-shadow:
    0 34px 82px rgba(148, 47, 62, 0.18),
    0 0 0 4px rgba(255, 255, 255, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

@keyframes home-ask-right-qa-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.01); }
  100% { transform: scale(1); }
}

.welcome.home-ask-workspace .home-ask-input-row,
.welcome.home-ask-workspace .search-box-row.home-ask-input-row {
  display: grid !important;
  align-items: start !important;
}

.welcome.home-ask-workspace #userInput.search-input {
  overflow: hidden !important;
  color: #27324a !important;
  letter-spacing: 0 !important;
}

.welcome.home-ask-workspace #userInput::placeholder {
  color: rgba(103, 126, 158, 0.62) !important;
  font-weight: 820 !important;
}

.welcome.home-ask-workspace .home-ask-toolbar {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
}

.welcome.home-ask-workspace #homeModePicker.home-mode-picker {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  min-width: 0 !important;
}

.welcome.home-ask-workspace .home-mode-toggle,
.welcome.home-ask-workspace #webSearchToggleBtnMain.home-ask-web-toggle {
  color: #39445b !important;
}

.welcome.home-ask-workspace .home-mode-toggle {
  padding: 0 13px !important;
  font-weight: 850 !important;
}

.welcome.home-ask-workspace .home-mode-toggle #homeModeCurrentText {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.welcome.home-ask-workspace #webSearchToggleBtnMain.home-ask-web-toggle {
  padding: 0 !important;
}

.welcome.home-ask-workspace #homeModeMenu.home-mode-menu {
  left: auto !important;
  top: auto !important;
  max-height: none !important;
  z-index: 1300 !important;
}

@media (max-width: 1180px) {

  .welcome.home-ask-workspace .home-ask-empty {
    transform: translateY(-2vh) !important;
  }

  .welcome.home-ask-workspace .home-ask-tags {
    flex-wrap: wrap !important;
  }

  .welcome.home-ask-workspace .home-ask-composer,
  .welcome.home-ask-workspace #searchBox.home-ask-composer {
    width: min(100%, 760px) !important;
  }

  .welcome.home-ask-workspace .home-feature-actions {
    display: none !important;
  }

  .welcome.home-ask-workspace:has(#homeModeMenu.home-mode-menu.show) .home-feature-actions {
    display: none !important;
  }
}

@media (max-width: 720px) {
  .app {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  .app .sidebar {
    width: 0 !important;
    min-width: 0 !important;
    flex-basis: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    transform: translateX(-100%) !important;
    pointer-events: none;
  }

  .app .main {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    flex: 1 1 100vw !important;
    margin: 0 !important;
  }

  .welcome.home-ask-workspace .home-ask-stage {
    grid-template-rows: minmax(0, 1fr) auto auto !important;
  }


  .welcome.home-ask-workspace .home-ask-empty p {
    font-size: 15px !important;
  }

  .welcome.home-ask-workspace .home-ask-tag {
    min-height: 32px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
  }

  .welcome.home-ask-workspace .home-ask-composer,
  .welcome.home-ask-workspace #searchBox.home-ask-composer {
    padding: 18px 16px 16px !important;
    border-radius: 22px !important;
  }

  .welcome.home-ask-workspace .home-ask-input-row,
  .welcome.home-ask-workspace .search-box-row.home-ask-input-row {
    grid-template-columns: 36px minmax(0, 1fr) 42px !important;
    gap: 10px !important;
  }

  .welcome.home-ask-workspace .home-ask-attach,
  .welcome.home-ask-workspace .home-ask-send {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  .welcome.home-ask-workspace .home-ask-toolbar {
    gap: 8px !important;
  }

  .welcome.home-ask-workspace .home-mode-toggle {
    width: 132px !important;
    min-width: 132px !important;
  }

  .welcome.home-ask-workspace #homeModeMenu.home-mode-menu {
    width: min(276px, calc(100vw - 34px)) !important;
  }
}

/* TRUE EOF HOME ASK SCREENSHOT MATCH: compact centered stack matching Harrison's reference. */
.welcome.home-ask-workspace .home-ask-stage {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: clamp(136px, 15vh, 168px) clamp(48px, 6vw, 96px) 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.welcome.home-ask-workspace .home-ask-empty {
  width: min(620px, 100%) !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  transform: none !important;
  pointer-events: auto !important;
}

.welcome.home-ask-workspace .home-ask-icon {
  margin: 0 0 19px !important;
  color: #0b83c9 !important;
}

.welcome.home-ask-workspace .home-ask-empty h1 {
  margin: 0 !important;
  color: #121827 !important;
  font-family: "Nunito", "Inter", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  overflow: visible !important;
}

.welcome.home-ask-workspace .home-ask-empty p {
  width: min(540px, 100%) !important;
  margin: 12px auto 0 !important;
  color: rgba(48, 92, 125, 0.76) !important;
  font-family: "Nunito", "Inter", sans-serif !important;
  font-weight: 800 !important;
  overflow: visible !important;
}

.welcome.home-ask-workspace .home-ask-tags {
  margin: 34px auto 0 !important;
  display: flex !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
}

.welcome.home-ask-workspace .home-ask-tag {
  border: 2px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    0 10px 26px rgba(151, 62, 82, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
  font-family: "Nunito", "Inter", sans-serif !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.welcome.home-ask-workspace .home-ask-composer,
.welcome.home-ask-workspace #searchBox.home-ask-composer {
  margin: 46px auto 0 !important;
  border: 2px solid rgba(255, 255, 255, 0.58) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.16)),
    radial-gradient(520px 150px at 18% 0%, rgba(255, 255, 255, 0.38), transparent 72%) !important;
  box-shadow:
    0 22px 58px rgba(151, 62, 82, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(30px) saturate(170%) brightness(1.03) !important;
  -webkit-backdrop-filter: blur(30px) saturate(170%) brightness(1.03) !important;
  transform: none !important;
}

.welcome.home-ask-workspace .home-ask-composer:focus-within,
.welcome.home-ask-workspace #searchBox.home-ask-composer:focus-within {
  transform: none !important;
  animation: home-ask-screenshot-match-pop 280ms cubic-bezier(0.18, 1.18, 0.28, 1) both !important;
}

@keyframes home-ask-screenshot-match-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.008); }
  100% { transform: scale(1); }
}

.welcome.home-ask-workspace .home-ask-attach,
.welcome.home-ask-workspace .home-ask-send {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 14px !important;
}

.welcome.home-ask-workspace .home-ask-attach {
  background: transparent !important;
  box-shadow: none !important;
}

.welcome.home-ask-workspace #userInput.search-input {
  padding: 5px 0 0 !important;
  font-family: "Nunito", "Inter", sans-serif !important;
  font-weight: 800 !important;
}

.welcome.home-ask-workspace .home-ask-toolbar {
  margin-top: auto !important;
  padding: 0 0 5px !important;
}


.welcome.home-ask-workspace .home-feature-actions {
  margin: 38px auto 0 !important;
  display: flex !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  transform: none !important;
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 22 !important;
}

.welcome.home-ask-workspace:has(#homeModeMenu.home-mode-menu.show) .home-feature-actions {
  display: flex !important;
  transform: none !important;
}

.welcome.home-ask-workspace .home-feature-chip {
  flex: 0 0 auto !important;
  min-width: max-content !important;
  border: 2px solid rgba(255, 255, 255, 0.54) !important;
  background: rgba(255, 255, 255, 0.18) !important;
  color: #3d4960 !important;
  box-shadow:
    0 10px 24px rgba(151, 62, 82, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
  font-family: "Nunito", "Inter", sans-serif !important;
  font-weight: 820 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.welcome.home-ask-workspace .home-feature-chip span {
  min-width: max-content !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.welcome.home-ask-workspace .home-feature-chip svg {
  flex: 0 0 15px !important;
}

@media (max-width: 1180px) {
  .welcome.home-ask-workspace .home-ask-stage {
    padding: 112px 24px 0 !important;
  }


  .welcome.home-ask-workspace .home-feature-actions {
    flex-wrap: wrap !important;
  }
}

@media (max-width: 720px) {
  .welcome.home-ask-workspace .home-ask-stage {
    padding: 86px 16px 24px !important;
  }

  .welcome.home-ask-workspace .home-ask-empty h1 {
    font-size: 32px !important;
  }

  .welcome.home-ask-workspace .home-ask-tags {
    width: min(340px, 100%) !important;
    flex-wrap: wrap !important;
    margin-top: 24px !important;
  }

  .welcome.home-ask-workspace .home-ask-composer,
  .welcome.home-ask-workspace #searchBox.home-ask-composer {
    width: min(100%, 360px) !important;
    min-height: 156px !important;
    margin-top: 34px !important;
  }

  .welcome.home-ask-workspace .home-feature-actions {
    width: min(100%, 360px) !important;
    margin-top: 22px !important;
    flex-wrap: wrap !important;
  }

  .welcome.home-ask-workspace .home-feature-chip {
    flex-basis: calc(50% - 6px) !important;
    height: 38px !important;
    font-size: 12px !important;
  }
}

/* TRUE EOF HOME ASK GLOBAL SHRINK: make Harrison's compact layout one size smaller. */
.welcome.home-ask-workspace .home-ask-stage {
  padding-top: clamp(168px, 18vh, 206px) !important;
}

.welcome.home-ask-workspace .home-ask-icon {
  width: 25px !important;
  height: 25px !important;
  margin-bottom: 16px !important;
}

.welcome.home-ask-workspace .home-ask-empty h1 {
  font-size: clamp(28px, 1.9vw, 34px) !important;
  line-height: 1.08 !important;
}

.welcome.home-ask-workspace .home-ask-empty p {
  margin-top: 10px !important;
  font-size: clamp(13px, 0.86vw, 16px) !important;
  line-height: 1.22 !important;
}

.welcome.home-ask-workspace .home-ask-tags {
  width: min(384px, 100%) !important;
  margin-top: 28px !important;
  gap: 8px !important;
}

.welcome.home-ask-workspace .home-ask-tag {
  min-height: 30px !important;
  padding: 0 15px !important;
  border-width: 2px !important;
  font-size: 13px !important;
  gap: 7px !important;
}

.welcome.home-ask-workspace .home-ask-tag svg {
  width: 13px !important;
  height: 13px !important;
}

.welcome.home-ask-workspace .home-ask-composer,
.welcome.home-ask-workspace #searchBox.home-ask-composer {
  width: min(680px, 56vw) !important;
  max-width: 680px !important;
  min-height: 96px !important;
  margin-top: 30px !important;
  padding: 10px 12px 10px 20px !important;
  border-radius: 16px !important;
}

.welcome.home-ask-workspace .home-ask-input-row,
.welcome.home-ask-workspace .search-box-row.home-ask-input-row {
  grid-template-columns: 30px minmax(0, 1fr) 40px !important;
  min-height: 40px !important;
  gap: 10px !important;
}

.welcome.home-ask-workspace .home-ask-attach {
  width: 30px !important;
  min-width: 30px !important;
  height: 34px !important;
  min-height: 34px !important;
}

.welcome.home-ask-workspace .home-ask-send {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 12px !important;
}

.welcome.home-ask-workspace #userInput.search-input {
  min-height: 38px !important;
  padding-top: 2px !important;
  font-size: 16px !important;
  line-height: 1.28 !important;
}

#welcomeScreen #searchBox .home-ask-toolbar {
  display: none !important;
}

#welcomeScreen #searchBox.home-ask-composer {
  min-height: 96px !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 16px 20px !important;
}

#welcomeScreen #searchBox .home-ask-input-row {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) 40px !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

#welcomeScreen #searchBox :is(.home-ask-attach, .home-ask-send) {
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  align-self: center !important;
}

#welcomeScreen #searchBox #userInput {
  min-height: 40px !important;
  line-height: 24px !important;
  padding: 8px 0 !important;
  margin: 0 !important;
}

.welcome.home-ask-workspace .home-mode-toggle,
.welcome.home-ask-workspace #webSearchToggleBtnMain.home-ask-web-toggle {
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 14px !important;
}

.welcome.home-ask-workspace .home-mode-toggle {
  width: 150px !important;
  min-width: 150px !important;
  font-size: 13px !important;
}

.welcome.home-ask-workspace .home-mode-icon {
  width: 19px !important;
  height: 19px !important;
}

.welcome.home-ask-workspace .home-mode-toggle #homeModeCurrentText {
  max-width: 86px !important;
}

.welcome.home-ask-workspace #webSearchToggleBtnMain.home-ask-web-toggle {
  width: 46px !important;
  min-width: 46px !important;
}

.welcome.home-ask-workspace #webSearchToggleBtnMain.home-ask-web-toggle svg {
  width: 18px !important;
  height: 18px !important;
}

.welcome.home-ask-workspace #homeModeMenu.home-mode-menu {
  right: -184px !important;
  bottom: calc(100% + 82px) !important;
  width: 250px !important;
}

.welcome.home-ask-workspace .home-feature-actions {
  width: min(700px, 58vw) !important;
  margin-top: 32px !important;
  gap: 8px !important;
}

.welcome.home-ask-workspace .home-feature-chip {
  height: 37px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  font-size: 12.5px !important;
  gap: 7px !important;
}

.welcome.home-ask-workspace .home-feature-chip svg {
  width: 13px !important;
  height: 13px !important;
  flex-basis: 13px !important;
}

@media (max-width: 1180px) {
  .welcome.home-ask-workspace .home-ask-composer,
  .welcome.home-ask-workspace #searchBox.home-ask-composer,
  .welcome.home-ask-workspace .home-feature-actions {
    width: min(680px, 100%) !important;
  }
}

/* TRUE EOF HOME ASK MODE GLASS: frosted style for modes and web search. */
.welcome.home-ask-workspace .home-mode-toggle,
.welcome.home-ask-workspace #webSearchToggleBtnMain.home-ask-web-toggle {
  border: 1.5px solid rgba(255, 255, 255, 0.72) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.18)),
    radial-gradient(circle at 24% 0%, rgba(255, 255, 255, 0.62), transparent 58%) !important;
  box-shadow:
    0 16px 34px rgba(148, 47, 62, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset 0 -1px 0 rgba(255, 255, 255, 0.28) !important;
  backdrop-filter: blur(24px) saturate(180%) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(1.04) !important;
}

.welcome.home-ask-workspace .home-mode-toggle:hover,
.welcome.home-ask-workspace #webSearchToggleBtnMain.home-ask-web-toggle:hover {
  border-color: rgba(255, 255, 255, 0.9) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.24)),
    radial-gradient(circle at 24% 0%, rgba(255, 255, 255, 0.76), transparent 60%) !important;
  box-shadow:
    0 18px 38px rgba(148, 47, 62, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
}

.welcome.home-ask-workspace .home-mode-toggle {
  color: #1f2a44 !important;
}

.welcome.home-ask-workspace .home-mode-toggle .qa-caret-icon {
  color: #0284c7 !important;
}

.welcome.home-ask-workspace #webSearchToggleBtnMain.home-ask-web-toggle {
  color: #0a82d8 !important;
}

.welcome.home-ask-workspace #homeModeMenu.home-mode-menu {
  padding: 9px !important;
  border: 2px solid rgba(255, 255, 255, 0.58) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.18)),
    radial-gradient(360px 180px at 24% 0%, rgba(255, 255, 255, 0.44), transparent 70%) !important;
  box-shadow:
    0 30px 74px rgba(148, 47, 62, 0.20),
    0 10px 24px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset 0 -1px 0 rgba(255, 255, 255, 0.24) !important;
  backdrop-filter: blur(34px) saturate(185%) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(34px) saturate(185%) brightness(1.05) !important;
}

.welcome.home-ask-workspace #homeModeMenu .home-mode-option {
  min-height: 50px !important;
  padding: 8px 11px !important;
  border: 1.5px solid transparent !important;
  border-radius: 14px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.welcome.home-ask-workspace #homeModeMenu .home-mode-option:hover:not(.selected) {
  border-color: rgba(255, 255, 255, 0.42) !important;
  background: rgba(255, 255, 255, 0.20) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

.welcome.home-ask-workspace #homeModeMenu .home-mode-option.selected {
  border-color: rgba(255, 255, 255, 0.70) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0.14)),
    radial-gradient(220px 90px at 20% 0%, rgba(255, 255, 255, 0.42), transparent 72%) !important;
  box-shadow:
    0 12px 26px rgba(148, 47, 62, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.90),
    inset 0 0 0 1px rgba(255, 255, 255, 0.20) !important;
  backdrop-filter: blur(18px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(155%) !important;
}

.welcome.home-ask-workspace #homeModeMenu .home-mode-menu-text strong {
  color: #111827 !important;
  font-weight: 900 !important;
}

.welcome.home-ask-workspace #homeModeMenu .home-mode-menu-text small {
  color: rgba(52, 82, 116, 0.74) !important;
  font-weight: 760 !important;
}

/* ANSWER WORKSPACE LIQUID GLASS: unify the active Q&A/loading surface with the glass system. */
:root {
  --answer-glass-surface: rgba(255, 255, 255, 0.38);
  --answer-glass-surface-strong: rgba(255, 255, 255, 0.56);
  --answer-glass-border: rgba(255, 255, 255, 0.58);
  --answer-glass-border-strong: rgba(255, 255, 255, 0.78);
  --answer-glass-shadow: 0 28px 80px rgba(148, 47, 62, 0.16), 0 10px 28px rgba(15, 23, 42, 0.08);
  --answer-glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 -1px 0 rgba(255, 255, 255, 0.22);
  --answer-ink: #172036;
  --answer-muted: rgba(54, 72, 101, 0.76);
  --answer-blue: #0ea5e9;
  --answer-mint: #10b981;
  --answer-rose: #fb7185;
  --answer-lilac: #a78bfa;
}

.app .sidebar {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.12)),
    linear-gradient(180deg, rgba(255, 183, 197, 0.52), rgba(255, 219, 224, 0.34) 48%, rgba(224, 242, 254, 0.26)) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.50) !important;
  box-shadow:
    18px 0 54px rgba(148, 47, 62, 0.12),
    inset -1px 0 0 rgba(255, 255, 255, 0.42) !important;
  backdrop-filter: blur(30px) saturate(185%) brightness(1.04);
  -webkit-backdrop-filter: blur(30px) saturate(185%) brightness(1.04);
}

.app .sidebar::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.30), transparent 36%, rgba(255, 255, 255, 0.14) 72%, transparent),
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 42%) !important;
  opacity: 0.82 !important;
}

.app .sidebar > * {
  position: relative !important;
  z-index: 1;
}

.app .sidebar .logo {
  border: 1px solid rgba(255, 255, 255, 0.68) !important;
  border-radius: 20px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.18)) !important;
  box-shadow:
    0 18px 40px rgba(148, 47, 62, 0.12),
    var(--answer-glass-inset) !important;
  backdrop-filter: blur(24px) saturate(165%);
  -webkit-backdrop-filter: blur(24px) saturate(165%);
  transform: none !important;
}

.app .sidebar .logo:hover {
  transform: translateY(-1px) !important;
}

.app .sidebar .sidebar-link,
.app .sidebar .sidebar-settings-btn {
  min-height: 44px !important;
  border: 1px solid transparent !important;
  border-radius: 16px !important;
  color: rgba(40, 62, 93, 0.78) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.app .sidebar .sidebar-link:hover,
.app .sidebar .sidebar-settings-btn:hover,
.app .sidebar .sidebar-link.active,
.app .sidebar .sidebar-settings-btn.active {
  color: #0f2740 !important;
  border-color: rgba(255, 255, 255, 0.56) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.16)) !important;
  box-shadow:
    0 14px 32px rgba(148, 47, 62, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(22px) saturate(155%);
  -webkit-backdrop-filter: blur(22px) saturate(155%);
}

.app .sidebar-link-icon,
.app .sidebar-settings-icon {
  color: #1884b7 !important;
}

.topbar,
.answer .steps {
  border-color: rgba(255, 255, 255, 0.50) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.18)) !important;
  box-shadow:
    0 16px 38px rgba(148, 47, 62, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.80) !important;
  backdrop-filter: blur(26px) saturate(170%) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(26px) saturate(170%) brightness(1.04) !important;
}

.topbar-breadcrumb {
  color: rgba(31, 42, 68, 0.74) !important;
  font-weight: 800 !important;
}

.stop-btn,
.status-chip.working {
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0.16)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
}

.stop-btn {
  color: #ef4444 !important;
}

.status-chip.working {
  color: var(--answer-blue) !important;
}

.answer {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02) 34%, rgba(255, 255, 255, 0.12)),
    var(--theme-page-surface-soft, linear-gradient(180deg, #fff5f2, #ffe3e6)) !important;
}

.answer-cols,
.col-explain,
.explain-scroll {
  background: transparent !important;
}

.answer .steps {
  gap: 24px !important;
  padding: 16px 34px !important;
}

.answer .step {
  min-height: 32px !important;
  padding: 0 12px 0 0 !important;
}

.answer .step-dot {
  width: 17px !important;
  height: 17px !important;
  border-width: 2px !important;
  border-color: rgba(92, 116, 145, 0.42) !important;
  background: rgba(255, 255, 255, 0.36) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.70) !important;
}

.answer .step-dot.active {
  border-color: rgba(14, 165, 233, 0.95) !important;
}

.answer .step-dot.done {
  border-color: rgba(16, 185, 129, 0.92) !important;
  background: linear-gradient(145deg, #34d399, #10b981) !important;
}

.answer .step-label {
  color: rgba(40, 58, 88, 0.70) !important;
  font-family: "DM Mono", "SFMono-Regular", Consolas, monospace !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  letter-spacing: 0.04em !important;
}

.main-chat-label {
  color: rgba(55, 73, 104, 0.72) !important;
}

.main-chat-user-text,
.main-chat-answer,
.references-header,
.references-body,
.source-card {
  border: 1px solid var(--answer-glass-border) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.20)) !important;
  box-shadow:
    0 20px 52px rgba(148, 47, 62, 0.10),
    var(--answer-glass-inset) !important;
  backdrop-filter: blur(28px) saturate(175%) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(28px) saturate(175%) brightness(1.04) !important;
}

.main-chat-user-text {
  color: #083b55 !important;
  border-color: rgba(125, 211, 252, 0.62) !important;
}

.main-chat-answer {
  color: var(--answer-ink) !important;
}

.search-progress-card {
  width: min(760px, calc(100% - 48px)) !important;
  margin: 62px auto 0 !important;
  padding: 34px 34px 28px !important;
  border: 1px solid var(--answer-glass-border-strong) !important;
  border-radius: 30px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.20)),
    linear-gradient(100deg, rgba(125, 211, 252, 0.12), rgba(167, 139, 250, 0.10) 48%, rgba(251, 113, 133, 0.11)) !important;
  background-size: auto !important;
  box-shadow: var(--answer-glass-shadow), var(--answer-glass-inset) !important;
  overflow: hidden !important;
  transform: none !important;
  backdrop-filter: blur(34px) saturate(190%) brightness(1.06) !important;
  -webkit-backdrop-filter: blur(34px) saturate(190%) brightness(1.06) !important;
}

.search-progress-card::before {
  inset: 1px !important;
  border: 0 !important;
  border-radius: inherit !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.08) 42%, rgba(255, 255, 255, 0.34)) !important;
  opacity: 0.48 !important;
  mix-blend-mode: screen !important;
}

.search-progress-card::after {
  content: "" !important;
  position: absolute !important;
  inset: auto -15% -42% 34% !important;
  width: 72% !important;
  height: 72% !important;
  border: 0 !important;
  background:
    linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.42) 40%, rgba(255, 255, 255, 0.12) 58%, transparent 100%) !important;
  box-shadow: none !important;
  transform: rotate(-12deg) !important;
  opacity: 0.58 !important;
}

.search-progress-tape {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
  height: 28px !important;
  margin-bottom: 16px !important;
  padding: 0 13px !important;
  border: 1px solid rgba(255, 255, 255, 0.66) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.16)) !important;
  color: rgba(36, 55, 85, 0.66) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
  transform: none !important;
}

.search-progress-pin {
  display: none !important;
}

.search-progress-head {
  padding: 0 0 22px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.50) !important;
}

.search-progress-kicker {
  padding: 6px 11px !important;
  border: 1px solid rgba(244, 63, 94, 0.38) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.30) !important;
  color: #e11d48 !important;
  transform: none !important;
}

.search-progress-title {
  display: block !important;
  margin-top: 12px !important;
  padding: 0 !important;
  color: var(--answer-ink) !important;
  background: none !important;
  letter-spacing: 0 !important;
}

.search-progress-summary {
  color: var(--answer-muted) !important;
}

.search-progress-card .search-step {
  grid-template-columns: 18px 48px minmax(0, 1fr) !important;
  border: 1px solid rgba(255, 255, 255, 0.54) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.14)) !important;
  box-shadow:
    0 12px 28px rgba(148, 47, 62, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
  backdrop-filter: blur(18px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(155%) !important;
  transform: none !important;
}

.search-progress-card .search-step:not(.is-muted) {
  border-color: rgba(125, 211, 252, 0.74) !important;
  background:
    linear-gradient(145deg, rgba(240, 249, 255, 0.56), rgba(255, 255, 255, 0.18)) !important;
}

.search-progress-card .search-step.is-muted {
  opacity: 0.62 !important;
}

.search-progress-index,
.search-step-index {
  color: rgba(50, 68, 100, 0.70) !important;
}

.search-progress-card .search-step-label {
  color: var(--answer-ink) !important;
}

.followup-bar {
  left: clamp(18px, 3vw, 42px) !important;
  right: clamp(18px, 3vw, 42px) !important;
  bottom: 20px !important;
  padding: 14px 18px 18px !important;
  border: 1px solid var(--answer-glass-border-strong) !important;
  border-radius: 26px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.22)) !important;
  box-shadow:
    0 24px 70px rgba(148, 47, 62, 0.16),
    0 10px 28px rgba(15, 23, 42, 0.08),
    var(--answer-glass-inset) !important;
  backdrop-filter: blur(34px) saturate(190%) brightness(1.06) !important;
  -webkit-backdrop-filter: blur(34px) saturate(190%) brightness(1.06) !important;
}

.followup-input {
  min-height: 58px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--answer-ink) !important;
  font-size: 16px !important;
  font-weight: 650 !important;
}

.followup-input::placeholder {
  color: rgba(69, 88, 119, 0.66) !important;
}

.followup-input:focus {
  box-shadow: none !important;
}

.attach-btn,
.followup-send {
  width: 48px !important;
  height: 48px !important;
  border: 1px solid rgba(255, 255, 255, 0.64) !important;
  border-radius: 17px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.18)) !important;
  color: #178ac2 !important;
  box-shadow:
    0 12px 28px rgba(14, 116, 144, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
}

.followup-send:not([disabled]) {
  color: #ffffff !important;
  border-color: rgba(14, 165, 233, 0.70) !important;
  background:
    linear-gradient(145deg, rgba(14, 165, 233, 0.95), rgba(2, 132, 199, 0.86)) !important;
}

.followup-send[disabled] {
  color: rgba(71, 85, 105, 0.52) !important;
}

.attach-btn:hover,
.followup-send:not([disabled]):hover {
  transform: translateY(-1px) !important;
}

@media (max-width: 760px) {
  .search-progress-card {
    width: calc(100% - 24px) !important;
    margin-top: 34px !important;
    padding: 24px 18px 20px !important;
    border-radius: 24px !important;
  }

  .followup-bar {
    left: 12px !important;
    right: 12px !important;
    border-radius: 22px !important;
  }
}

/* LEARN RIGHT Q&A COMPOSER LIQUID GLASS LOCK: match the main answer composer. */
#learnView #learnBody #learnChatCol #learnFollowupBar,
#learnView #learnBody #learnChatCol #learnFollowupBar.glass-panel,
#learnView #learnBody #learnChatCol #learnFollowupBar.edu-tutor-composer,
#learnView #learnBody[data-panel-focus] #learnChatCol #learnFollowupBar {
  position: relative !important;
  z-index: 20 !important;
  width: calc(100% - 36px) !important;
  max-width: none !important;
  min-height: 152px !important;
  margin: 0 18px 18px !important;
  padding: 18px 18px 16px !important;
  overflow: visible !important;
  border: 1px solid rgba(255, 255, 255, 0.74) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.18)),
    radial-gradient(520px 180px at 18% 0%, rgba(255, 255, 255, 0.54), transparent 72%),
    linear-gradient(105deg, rgba(125, 211, 252, 0.10), rgba(251, 113, 133, 0.12) 62%, rgba(167, 139, 250, 0.08)) !important;
  background-image:
    linear-gradient(145deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.18)),
    radial-gradient(520px 180px at 18% 0%, rgba(255, 255, 255, 0.54), transparent 72%),
    linear-gradient(105deg, rgba(125, 211, 252, 0.10), rgba(251, 113, 133, 0.12) 62%, rgba(167, 139, 250, 0.08)) !important;
  box-shadow:
    0 30px 82px rgba(148, 47, 62, 0.18),
    0 12px 30px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -1px 0 rgba(255, 255, 255, 0.24) !important;
  backdrop-filter: blur(36px) saturate(195%) brightness(1.06) !important;
  -webkit-backdrop-filter: blur(36px) saturate(195%) brightness(1.06) !important;
  filter: none !important;
}

#learnView #learnBody #learnChatCol #learnFollowupBar::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 1px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.06) 44%, rgba(255, 255, 255, 0.32)) !important;
  opacity: 0.50 !important;
  box-shadow: none !important;
  mix-blend-mode: screen !important;
}

#learnView #learnBody #learnChatCol #learnFollowupBar::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  right: -14% !important;
  bottom: -46% !important;
  z-index: 0 !important;
  width: 68% !important;
  height: 72% !important;
  pointer-events: none !important;
  border: 0 !important;
  background:
    linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.42) 42%, rgba(255, 255, 255, 0.12) 58%, transparent 100%) !important;
  box-shadow: none !important;
  opacity: 0.56 !important;
  transform: rotate(-12deg) !important;
}

#learnView #learnBody #learnChatCol #learnFollowupBar .attach-preview,
#learnView #learnBody #learnChatCol #learnFollowupBar .input-wrapper,
#learnView #learnBody #learnChatCol #learnFollowupBar .bottom-actions {
  position: relative !important;
  z-index: 1 !important;
}

#learnView #learnBody #learnChatCol #learnFollowupBar .input-wrapper,
#learnView #learnBody #learnChatCol #learnFollowupBar .input-wrapper:focus-within {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 52px !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 66px !important;
  margin: 0 !important;
  padding: 0 0 0 2px !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: transparent !important;
  box-shadow: none !important;
}

#learnView #learnBody #learnChatCol #learnFollowupBar .input-field,
#learnView #learnBody #learnChatCol #learnFollowupBar #learnFollowupInput {
  min-width: 0 !important;
  width: 100% !important;
  min-height: 58px !important;
  max-height: 150px !important;
  padding: 14px 4px !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #172036 !important;
  box-shadow: none !important;
  font-family: "Nunito", "Quicksand", system-ui, sans-serif !important;
  font-size: 17px !important;
  line-height: 1.45 !important;
  font-weight: 680 !important;
  resize: none !important;
}

#learnView #learnBody #learnChatCol #learnFollowupBar .input-field::placeholder,
#learnView #learnBody #learnChatCol #learnFollowupBar #learnFollowupInput::placeholder {
  color: rgba(69, 88, 119, 0.58) !important;
}

#learnView #learnBody #learnChatCol #learnFollowupBar .btn-clip,
#learnView #learnBody #learnChatCol #learnFollowupBar .btn-send,
#learnView #learnBody #learnChatCol #learnFollowupBar .action-chip,
#learnView #learnBody #learnChatCol #learnFollowupBar .edu-mode-toggle,
#learnView #learnBody #learnChatCol #learnFollowupBar #webSearchToggleBtnLearn {
  border: 1px solid rgba(255, 255, 255, 0.66) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.16)) !important;
  box-shadow:
    0 12px 28px rgba(14, 116, 144, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  color: #168ac2 !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}

#learnView #learnBody #learnChatCol #learnFollowupBar .btn-clip,
#learnView #learnBody #learnChatCol #learnFollowupBar .btn-send {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  padding: 0 !important;
  border-radius: 17px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#learnView #learnBody #learnChatCol #learnFollowupBar .btn-send:not(:disabled) {
  color: #ffffff !important;
  border-color: rgba(14, 165, 233, 0.72) !important;
  background:
    linear-gradient(145deg, rgba(14, 165, 233, 0.96), rgba(2, 132, 199, 0.86)) !important;
}

#learnView #learnBody #learnChatCol #learnFollowupBar .btn-send:disabled {
  color: rgba(72, 84, 111, 0.52) !important;
  border-color: rgba(255, 255, 255, 0.54) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.12)) !important;
}

#learnView #learnBody #learnChatCol #learnFollowupBar .btn-clip:hover,
#learnView #learnBody #learnChatCol #learnFollowupBar .btn-send:not(:disabled):hover,
#learnView #learnBody #learnChatCol #learnFollowupBar .action-chip:hover,
#learnView #learnBody #learnChatCol #learnFollowupBar .edu-mode-toggle:hover,
#learnView #learnBody #learnChatCol #learnFollowupBar #webSearchToggleBtnLearn:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(255, 255, 255, 0.86) !important;
  box-shadow:
    0 16px 34px rgba(14, 116, 144, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
}

#learnView #learnBody #learnChatCol #learnFollowupBar .bottom-actions {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 14px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#learnView #learnBody #learnChatCol #learnFollowupBar .edu-mode-toggle {
  width: auto !important;
  min-width: 146px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 15px !important;
  border-radius: 16px !important;
  gap: 8px !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  color: #1f3651 !important;
}

#learnView #learnBody #learnChatCol #learnFollowupBar #webSearchToggleBtnLearn {
  width: 48px !important;
  min-width: 48px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border-radius: 16px !important;
}

#learnView #learnBody #learnChatCol #learnFollowupBar #webSearchToggleBtnLearn.network-on {
  color: #0284c7 !important;
}

#learnView #learnBody #learnChatCol #learnFollowupBar #webSearchToggleBtnLearn.network-off {
  color: rgba(71, 85, 105, 0.55) !important;
}

#learnView #learnBody #learnChatCol #learnFollowupBar .edu-mode-menu {
  right: 0 !important;
  bottom: calc(100% + 12px) !important;
  width: min(252px, calc(100vw - 42px)) !important;
  padding: 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  border-radius: 20px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.20)) !important;
  box-shadow:
    0 28px 72px rgba(148, 47, 62, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(30px) saturate(180%) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(1.05) !important;
}

#learnView #learnBody #learnChatCol #learnFollowupBar .edu-mode-option {
  min-height: 50px !important;
  border-radius: 15px !important;
}

@media (max-width: 860px) {
  #learnView #learnBody #learnChatCol #learnFollowupBar,
  #learnView #learnBody #learnChatCol #learnFollowupBar.glass-panel {
    width: calc(100% - 24px) !important;
    min-height: 142px !important;
    margin: 0 12px 12px !important;
    padding: 14px !important;
    border-radius: 24px !important;
  }

  #learnView #learnBody #learnChatCol #learnFollowupBar .bottom-actions {
    gap: 8px !important;
  }

  #learnView #learnBody #learnChatCol #learnFollowupBar .edu-mode-toggle {
    min-width: 132px !important;
  }
}

/* RUNTIME-INJECTED CSS OVERRIDE: beat the duplicated-ID learn composer rules from app.js. */
#learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnFollowupBar#learnFollowupBar#learnFollowupBar {
  width: calc(100% - 36px) !important;
  min-height: 152px !important;
  margin: 0 18px 18px !important;
  padding: 18px 18px 16px !important;
  overflow: visible !important;
  border: 1px solid rgba(255, 255, 255, 0.74) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.18)),
    radial-gradient(520px 180px at 18% 0%, rgba(255, 255, 255, 0.54), transparent 72%),
    linear-gradient(105deg, rgba(125, 211, 252, 0.10), rgba(251, 113, 133, 0.12) 62%, rgba(167, 139, 250, 0.08)) !important;
  box-shadow:
    0 30px 82px rgba(148, 47, 62, 0.18),
    0 12px 30px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -1px 0 rgba(255, 255, 255, 0.24) !important;
  backdrop-filter: blur(36px) saturate(195%) brightness(1.06) !important;
  -webkit-backdrop-filter: blur(36px) saturate(195%) brightness(1.06) !important;
}

#learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnFollowupBar#learnFollowupBar#learnFollowupBar::before,
#learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnFollowupBar#learnFollowupBar#learnFollowupBar::after {
  content: "" !important;
  display: block !important;
}

#learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnFollowupBar#learnFollowupBar#learnFollowupBar::before {
  position: absolute !important;
  inset: 1px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.06) 44%, rgba(255, 255, 255, 0.32)) !important;
  opacity: 0.50 !important;
  box-shadow: none !important;
}

#learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnFollowupBar#learnFollowupBar#learnFollowupBar::after {
  position: absolute !important;
  right: -14% !important;
  bottom: -46% !important;
  z-index: 0 !important;
  width: 68% !important;
  height: 72% !important;
  pointer-events: none !important;
  border: 0 !important;
  background:
    linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.42) 42%, rgba(255, 255, 255, 0.12) 58%, transparent 100%) !important;
  opacity: 0.56 !important;
  transform: rotate(-12deg) !important;
}

#learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnFollowupBar#learnFollowupBar#learnFollowupBar .input-wrapper,
#learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnFollowupBar#learnFollowupBar#learnFollowupBar .input-wrapper:focus-within {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 52px !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 66px !important;
  margin: 0 !important;
  padding: 0 0 0 2px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnFollowupBar#learnFollowupBar#learnFollowupBar .input-field {
  min-height: 58px !important;
  padding: 14px 4px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #172036 !important;
  font-size: 17px !important;
  font-weight: 680 !important;
}

#learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnFollowupBar#learnFollowupBar#learnFollowupBar .btn-clip,
#learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnFollowupBar#learnFollowupBar#learnFollowupBar .btn-send,
#learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnFollowupBar#learnFollowupBar#learnFollowupBar .edu-mode-toggle,
#learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnFollowupBar#learnFollowupBar#learnFollowupBar #webSearchToggleBtnLearn {
  border: 1px solid rgba(255, 255, 255, 0.66) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.16)) !important;
  box-shadow:
    0 12px 28px rgba(14, 116, 144, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  color: #168ac2 !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
}

/* LESSON CARDS HIGH-TRANSPARENCY GLASS PASS: key takeaways + quick check. */
#learnView#learnView#learnView .learn-explain-body .lecture-note-card-summary,
#learnView#learnView#learnView .explain-body .lecture-note-card-summary,
.learn-explain-body .lecture-note-card-summary,
.explain-body .lecture-note-card-summary {
  border: 1px solid rgba(255, 255, 255, 0.52) !important;
  border-radius: 32px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.075) 58%, rgba(255, 255, 255, 0.04)),
    radial-gradient(700px 300px at 4% 0%, rgba(125, 211, 252, 0.105), transparent 72%),
    radial-gradient(620px 300px at 100% 12%, rgba(251, 207, 232, 0.085), transparent 74%) !important;
  box-shadow:
    0 24px 72px rgba(15, 23, 42, 0.085),
    0 10px 26px rgba(14, 165, 233, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(42px) saturate(205%) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(42px) saturate(205%) brightness(1.04) !important;
}

#learnView#learnView#learnView .learn-explain-body .lecture-note-card-summary::before,
#learnView#learnView#learnView .explain-body .lecture-note-card-summary::before,
.learn-explain-body .lecture-note-card-summary::before,
.explain-body .lecture-note-card-summary::before {
  background:
    linear-gradient(128deg, rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0.035) 42%, transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.105), transparent 50%) !important;
  opacity: 0.72 !important;
}

#learnView#learnView#learnView .learn-explain-body .lecture-note-card-summary > :is(h1, h2, h3):first-child,
#learnView#learnView#learnView .explain-body .lecture-note-card-summary > :is(h1, h2, h3):first-child,
.learn-explain-body .lecture-note-card-summary > :is(h1, h2, h3):first-child,
.explain-body .lecture-note-card-summary > :is(h1, h2, h3):first-child {
  border: 1px solid rgba(255, 255, 255, 0.58) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.11)),
    radial-gradient(120px 54px at 18% 0%, rgba(125, 211, 252, 0.13), transparent 72%) !important;
  box-shadow:
    0 12px 30px rgba(15, 23, 42, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(30px) saturate(190%) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(30px) saturate(190%) brightness(1.04) !important;
}

#learnView#learnView#learnView .learn-explain-body .learn-key-takeaways-list > li,
#learnView#learnView#learnView .explain-body .learn-key-takeaways-list > li,
.learn-explain-body .learn-key-takeaways-list > li,
.explain-body .learn-key-takeaways-list > li {
  border: 1px solid rgba(255, 255, 255, 0.46) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.205), rgba(255, 255, 255, 0.055)),
    radial-gradient(280px 130px at 0% 0%, rgba(224, 242, 254, 0.13), transparent 76%) !important;
  box-shadow:
    0 14px 38px rgba(15, 23, 42, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.64),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(34px) saturate(195%) brightness(1.03) !important;
  -webkit-backdrop-filter: blur(34px) saturate(195%) brightness(1.03) !important;
}

#learnView#learnView#learnView .learn-explain-body .learn-key-takeaways-list .takeaway-index,
#learnView#learnView#learnView .explain-body .learn-key-takeaways-list .takeaway-index,
.learn-explain-body .learn-key-takeaways-list .takeaway-index,
.explain-body .learn-key-takeaways-list .takeaway-index,
#learnView#learnView#learnView .learn-explain-body .learn-key-takeaways-list > li::before,
#learnView#learnView#learnView .explain-body .learn-key-takeaways-list > li::before,
.learn-explain-body .learn-key-takeaways-list > li::before,
.explain-body .learn-key-takeaways-list > li::before {
  border: 1px solid rgba(255, 255, 255, 0.54) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.36), rgba(186, 230, 253, 0.12)) !important;
  box-shadow:
    0 10px 24px rgba(14, 165, 233, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
}

#learnView#learnView#learnView .lesson-test-banner#testBannerCard,
#learnView#learnView#learnView .lesson-test-banner,
.learn-explain-body .lesson-test-banner#testBannerCard,
.learn-explain-body .lesson-test-banner,
.explain-body .lesson-test-banner#testBannerCard,
.explain-body .lesson-test-banner {
  border: 1px solid rgba(255, 255, 255, 0.54) !important;
  border-radius: 32px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.245), rgba(255, 255, 255, 0.075) 58%, rgba(255, 255, 255, 0.035)),
    radial-gradient(640px 250px at 0% 0%, rgba(125, 211, 252, 0.10), transparent 72%),
    radial-gradient(560px 260px at 100% 15%, rgba(251, 207, 232, 0.095), transparent 74%) !important;
  box-shadow:
    0 24px 74px rgba(15, 23, 42, 0.085),
    0 10px 28px rgba(14, 165, 233, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(44px) saturate(205%) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(44px) saturate(205%) brightness(1.04) !important;
}

#learnView#learnView#learnView .lesson-test-banner#testBannerCard::before,
#learnView#learnView#learnView .lesson-test-banner::before,
.learn-explain-body .lesson-test-banner#testBannerCard::before,
.learn-explain-body .lesson-test-banner::before,
.explain-body .lesson-test-banner#testBannerCard::before,
.explain-body .lesson-test-banner::before {
  background:
    linear-gradient(128deg, rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0.035) 44%, transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), transparent 50%) !important;
  opacity: 0.74 !important;
}

#learnView#learnView#learnView .lesson-test-banner#testBannerCard::after,
#learnView#learnView#learnView .lesson-test-banner::after,
.learn-explain-body .lesson-test-banner#testBannerCard::after,
.learn-explain-body .lesson-test-banner::after,
.explain-body .lesson-test-banner#testBannerCard::after,
.explain-body .lesson-test-banner::after {
  opacity: 0.46 !important;
}

#learnView#learnView#learnView .lesson-test-banner h3,
#learnView#learnView#learnView .lesson-test-banner#testBannerCard h3,
.learn-explain-body .lesson-test-banner h3,
.learn-explain-body .lesson-test-banner#testBannerCard h3,
.explain-body .lesson-test-banner h3,
.explain-body .lesson-test-banner#testBannerCard h3 {
  border: 1px solid rgba(255, 255, 255, 0.56) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.10)),
    radial-gradient(120px 54px at 18% 0%, rgba(125, 211, 252, 0.12), transparent 74%) !important;
  box-shadow:
    0 12px 30px rgba(15, 23, 42, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10) !important;
}

#learnView#learnView#learnView #startTestBtn,
#learnView#learnView#learnView .lesson-test-banner #startTestBtn,
.learn-explain-body #startTestBtn,
.learn-explain-body .lesson-test-banner #startTestBtn,
.explain-body #startTestBtn,
.explain-body .lesson-test-banner #startTestBtn {
  border: 1px solid rgba(255, 255, 255, 0.58) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.32), rgba(125, 211, 252, 0.13) 54%, rgba(255, 255, 255, 0.08)),
    radial-gradient(180px 66px at 20% 0%, rgba(255, 255, 255, 0.28), transparent 72%) !important;
  box-shadow:
    0 16px 38px rgba(14, 165, 233, 0.10),
    0 7px 18px rgba(15, 23, 42, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(30px) saturate(195%) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(30px) saturate(195%) brightness(1.04) !important;
}

/* LEARN RIGHT CHAT MESSAGE GLASS LOCK: user, answer, and error states. */
#learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnChatContent#learnChatContent .followup-bubble,
#learnView#learnView#learnView #learnChatCol#learnChatCol#learnChatCol #learnChatContent#learnChatContent .followup-bubble {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  margin: 18px 0 28px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#learnView#learnView#learnView #learnChatContent#learnChatContent .followup-bubble::before {
  content: none !important;
  display: none !important;
}

#learnView#learnView#learnView #learnChatContent#learnChatContent .followup-bubble .fub-q {
  display: inline-flex !important;
  width: auto !important;
  max-width: min(78%, 460px) !important;
  margin: 0 0 16px auto !important;
  padding: 13px 18px !important;
  border: 1px solid rgba(125, 211, 252, 0.76) !important;
  border-radius: 22px 22px 8px 22px !important;
  background:
    linear-gradient(145deg, rgba(240, 249, 255, 0.48), rgba(255, 255, 255, 0.16)),
    radial-gradient(160px 70px at 20% 0%, rgba(125, 211, 252, 0.18), transparent 74%) !important;
  box-shadow:
    0 14px 34px rgba(14, 116, 144, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12) !important;
  color: #075985 !important;
  backdrop-filter: blur(28px) saturate(190%) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) brightness(1.04) !important;
}

#learnView#learnView#learnView #learnChatContent#learnChatContent .followup-bubble .fub-a,
#learnView#learnView#learnView #learnChatContent#learnChatContent .followup-bubble .fub-a.learn-explain-content,
#learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol .followup-bubble .fub-a {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 22px 24px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.52) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.07)),
    radial-gradient(420px 180px at 0% 0%, rgba(125, 211, 252, 0.10), transparent 74%),
    radial-gradient(360px 170px at 100% 10%, rgba(251, 207, 232, 0.08), transparent 76%) !important;
  background-size: auto !important;
  box-shadow:
    0 18px 54px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.70),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10) !important;
  color: #24324a !important;
  backdrop-filter: blur(38px) saturate(200%) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(38px) saturate(200%) brightness(1.04) !important;
}

#learnView#learnView#learnView #learnChatContent#learnChatContent .followup-bubble .fub-a::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 1px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background:
    linear-gradient(128deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.04) 42%, transparent 72%) !important;
  opacity: 0.72 !important;
  box-shadow: none !important;
}

#learnView#learnView#learnView #learnChatContent#learnChatContent .followup-bubble .fub-a > * {
  position: relative !important;
  z-index: 1 !important;
}

#learnView#learnView#learnView #learnChatContent#learnChatContent .followup-bubble .fub-a.ghost::before {
  content: "" !important;
  display: block !important;
}

#learnView#learnView#learnView #learnChatContent#learnChatContent .followup-bubble .fub-a .error-box,
#learnView#learnView#learnView #learnChatContent#learnChatContent .error-box,
#learnView#learnView#learnView #learnChatCol#learnChatCol#learnChatCol .error-box {
  position: relative !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 20px 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.54) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.07)),
    radial-gradient(320px 140px at 0% 0%, rgba(254, 205, 211, 0.18), transparent 74%) !important;
  box-shadow:
    0 16px 42px rgba(148, 47, 62, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.70),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10) !important;
  color: #172036 !important;
  backdrop-filter: blur(36px) saturate(195%) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(36px) saturate(195%) brightness(1.04) !important;
}

#learnView#learnView#learnView #learnChatContent#learnChatContent .error-box strong {
  display: inline-block !important;
  margin: 0 0 10px !important;
  color: #0f172a !important;
  font-family: "Quicksand", "Nunito", sans-serif !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  background:
    linear-gradient(180deg, transparent 58%, rgba(253, 224, 71, 0.48) 58%) !important;
  border-radius: 5px !important;
}

#learnView#learnView#learnView #learnChatContent#learnChatContent .error-box p {
  margin: 0 !important;
  color: rgba(36, 50, 74, 0.88) !important;
  font-family: "Nunito", "Quicksand", system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  font-weight: 720 !important;
}

/* TEXTBOOK FOCUS GLASS LOCK: overlay Q&A panel, Q&A fab, and page counter. */
#textbookFocusModal {
  background:
    radial-gradient(900px 680px at 72% 18%, rgba(96, 165, 250, 0.13), transparent 68%),
    radial-gradient(760px 560px at 22% 88%, rgba(244, 114, 182, 0.08), transparent 72%),
    rgba(9, 15, 31, 0.94) !important;
}

#textbookFocusModal #textbookFocusDialog .learn-focus-headings {
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.055)),
    radial-gradient(260px 92px at 0% 0%, rgba(125, 211, 252, 0.12), transparent 72%) !important;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
  backdrop-filter: blur(30px) saturate(180%) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(1.05) !important;
}

#textbookFocusModal #textbookFocusQaPanel {
  border: 1px solid rgba(255, 255, 255, 0.34) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08)),
    radial-gradient(560px 260px at 0% 0%, rgba(125, 211, 252, 0.14), transparent 72%),
    radial-gradient(520px 260px at 100% 18%, rgba(244, 114, 182, 0.10), transparent 74%) !important;
  box-shadow:
    0 30px 90px rgba(2, 6, 23, 0.38),
    0 10px 26px rgba(14, 165, 233, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12) !important;
  color: #111827 !important;
  backdrop-filter: blur(42px) saturate(205%) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(42px) saturate(205%) brightness(1.04) !important;
}

#textbookFocusModal #textbookFocusQaPanel::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background:
    linear-gradient(128deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.035) 44%, transparent 74%) !important;
  opacity: 0.72 !important;
}

#textbookFocusModal #textbookFocusQaPanel > * {
  position: relative !important;
  z-index: 1 !important;
}

#textbookFocusModal .textbook-focus-qa-head {
  padding: 20px 22px 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.24) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.035)) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
}

#textbookFocusModal .textbook-focus-qa-eyebrow {
  color: #2563eb !important;
  letter-spacing: 0.08em !important;
}

#textbookFocusModal .textbook-focus-qa-title {
  color: #0f172a !important;
}

#textbookFocusModal .textbook-focus-qa-close {
  border: 1px solid rgba(255, 255, 255, 0.50) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.10)) !important;
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
  color: #334155 !important;
  backdrop-filter: blur(20px) saturate(185%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(185%) !important;
}

#textbookFocusModal .textbook-focus-qa-scroll {
  padding: 20px 20px 22px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)) !important;
}

#textbookFocusModal .textbook-focus-qa-empty {
  margin: auto !important;
  min-height: 120px !important;
  padding: 18px 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.26) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.055)) !important;
  color: rgba(71, 85, 105, 0.84) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 16px 40px rgba(15, 23, 42, 0.07) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
}

#textbookFocusModal .textbook-focus-qa-scroll .followup-bubble {
  padding: 0 !important;
  margin: 0 0 18px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#textbookFocusModal .textbook-focus-qa-scroll .followup-bubble .fub-q {
  border: 1px solid rgba(125, 211, 252, 0.70) !important;
  border-radius: 20px 20px 8px 20px !important;
  background:
    linear-gradient(145deg, rgba(240, 249, 255, 0.46), rgba(255, 255, 255, 0.14)),
    radial-gradient(160px 70px at 20% 0%, rgba(125, 211, 252, 0.16), transparent 74%) !important;
  box-shadow:
    0 14px 32px rgba(14, 116, 144, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
  color: #075985 !important;
  backdrop-filter: blur(28px) saturate(190%) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) brightness(1.04) !important;
}

#textbookFocusModal .textbook-focus-qa-scroll .followup-bubble .fub-a {
  border: 1px solid rgba(255, 255, 255, 0.42) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.065)),
    radial-gradient(360px 160px at 0% 0%, rgba(125, 211, 252, 0.09), transparent 74%) !important;
  box-shadow:
    0 16px 46px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
  color: #24324a !important;
  backdrop-filter: blur(36px) saturate(195%) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(36px) saturate(195%) brightness(1.04) !important;
}

#textbookFocusModal .textbook-focus-qa-compose {
  grid-template-columns: 1fr auto !important;
  gap: 12px !important;
  padding: 16px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.26) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.065)),
    radial-gradient(420px 160px at 18% 100%, rgba(125, 211, 252, 0.10), transparent 76%) !important;
  backdrop-filter: blur(34px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(34px) saturate(200%) !important;
}

#textbookFocusModal .textbook-focus-qa-select,
#textbookFocusModal .textbook-focus-qa-web,
#textbookFocusModal .textbook-focus-qa-input,
#textbookFocusModal .textbook-focus-qa-send {
  border: 1px solid rgba(255, 255, 255, 0.48) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.10)) !important;
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  color: #334155 !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
}

#textbookFocusModal .textbook-focus-qa-input {
  min-height: 48px !important;
  border-radius: 18px !important;
  color: #111827 !important;
}

#textbookFocusModal .textbook-focus-qa-input:focus {
  border-color: rgba(96, 165, 250, 0.78) !important;
  box-shadow:
    0 0 0 4px rgba(96, 165, 250, 0.14),
    0 12px 28px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

#textbookFocusModal .textbook-focus-qa-web.active,
#textbookFocusModal .textbook-focus-qa-send:not(:disabled) {
  color: #0369a1 !important;
  border-color: rgba(125, 211, 252, 0.62) !important;
  background:
    linear-gradient(145deg, rgba(240, 249, 255, 0.42), rgba(125, 211, 252, 0.14)) !important;
}

#textbookFocusModal .textbook-focus-qa-send {
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  border-radius: 18px !important;
  font-size: 22px !important;
}

#textbookFocusModal #textbookFocusQaToggle {
  width: 74px !important;
  height: 74px !important;
  border: 1px solid rgba(255, 255, 255, 0.36) !important;
  background:
    linear-gradient(145deg, rgba(96, 165, 250, 0.36), rgba(255, 255, 255, 0.10)),
    radial-gradient(90px 70px at 24% 0%, rgba(255, 255, 255, 0.42), transparent 72%) !important;
  color: #f8fbff !important;
  box-shadow:
    0 24px 60px rgba(2, 6, 23, 0.34),
    0 0 0 1px rgba(147, 197, 253, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(34px) saturate(210%) brightness(1.08) !important;
  -webkit-backdrop-filter: blur(34px) saturate(210%) brightness(1.08) !important;
}

#textbookFocusModal #textbookFocusQaToggle:hover,
#textbookFocusModal #textbookFocusQaToggle.is-open {
  transform: translateY(-2px) !important;
  background:
    linear-gradient(145deg, rgba(59, 130, 246, 0.46), rgba(255, 255, 255, 0.13)),
    radial-gradient(90px 70px at 24% 0%, rgba(255, 255, 255, 0.48), transparent 72%) !important;
}

#textbookFocusModal #textbookFocusPageIndicator {
  min-width: 80px !important;
  min-height: 38px !important;
  padding: 9px 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.085)),
    radial-gradient(120px 56px at 18% 0%, rgba(253, 224, 71, 0.18), transparent 74%) !important;
  color: #713f12 !important;
  box-shadow:
    0 18px 44px rgba(2, 6, 23, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.70),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10) !important;
  transform: none !important;
  backdrop-filter: blur(30px) saturate(205%) brightness(1.06) !important;
  -webkit-backdrop-filter: blur(30px) saturate(205%) brightness(1.06) !important;
}

#textbookFocusModal #textbookFocusPageIndicator::before,
#textbookFocusModal #textbookFocusPageIndicator::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 1179px) {
  #textbookFocusModal #textbookFocusQaPanel {
    border-radius: 22px !important;
  }

  #textbookFocusModal #textbookFocusQaToggle {
    width: 62px !important;
    height: 62px !important;
  }
}

/* FINAL COLLAPSED SIDEBAR GLASS FIX: keep the icon rail clean, no tab or hamburger overlap. */
.app.sidebar-collapsed #leftSidebar,
.app #leftSidebar.sidebar.collapsed {
  overflow: hidden !important;
}

.app.sidebar-collapsed #leftSidebar::after,
.app #leftSidebar.sidebar.collapsed::after {
  content: none !important;
  display: none !important;
}

.app.sidebar-collapsed #leftSidebar .sidebar-top,
.app #leftSidebar.sidebar.collapsed .sidebar-top {
  height: 92px !important;
  min-height: 92px !important;
  padding: 18px 10px 10px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
}

.app.sidebar-collapsed #leftSidebar .logo,
.app #leftSidebar.sidebar.collapsed .logo {
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  height: 54px !important;
  min-height: 54px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, 0.52) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.14)) !important;
  box-shadow:
    0 18px 38px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    inset 0 -1px 0 rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  overflow: hidden !important;
}

.app.sidebar-collapsed #leftSidebar .menu-toggle,
.app #leftSidebar.sidebar.collapsed .menu-toggle {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none;
}

.app.sidebar-collapsed #leftSidebar .logo-icon-brand,
.app #leftSidebar.sidebar.collapsed .logo-icon-brand {
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  flex: 0 0 48px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.app.sidebar-collapsed #leftSidebar .logo-icon-brand img,
.app #leftSidebar.sidebar.collapsed .logo-icon-brand img {
  width: 42px !important;
  height: 42px !important;
  display: block !important;
  object-fit: contain;
  transform: none !important;
}

/* FINAL LOGIN LIQUID GLASS: soften the auth screen into frosted translucent panels. */
.login-view,
:root[data-theme="dark"] .login-view,
.login-view:not(.hidden),
:root[data-theme="dark"] .login-view:not(.hidden) {
  --login-glass-ink: #142033;
  --login-glass-muted: rgba(47, 64, 91, 0.70);
  --login-glass-line: rgba(255, 255, 255, 0.54);
  --login-glass-fill: rgba(255, 255, 255, 0.32);
  --login-glass-fill-strong: rgba(255, 255, 255, 0.54);
  background-color: #f8fbff !important;
  background-image:
    radial-gradient(circle at 22% 20%, rgba(125, 211, 252, 0.22), transparent 30%),
    radial-gradient(circle at 78% 72%, rgba(167, 243, 208, 0.24), transparent 34%),
    radial-gradient(circle at 52% 42%, rgba(251, 207, 232, 0.16), transparent 38%),
    radial-gradient(rgba(148, 163, 184, 0.35) 2px, transparent 2px),
    linear-gradient(135deg, rgba(255, 251, 235, 0.54), rgba(240, 249, 255, 0.46) 48%, rgba(236, 253, 245, 0.46)) !important;
  background-size: auto, auto, auto, 46px 46px, auto !important;
  color: var(--login-glass-ink) !important;
}

.login-view::before,
.login-view::after {
  opacity: 0.22 !important;
  filter: blur(86px) !important;
}

.login-view::before {
  background: #7dd3fc !important;
}

.login-view::after {
  background: #a7f3d0 !important;
}

.login-card,
:root[data-theme="dark"] .login-card,
.login-view:not(.hidden) .login-card,
:root[data-theme="dark"] .login-view:not(.hidden) .login-card {
  max-width: 460px !important;
  padding: 42px 30px 26px !important;
  border: 1px solid rgba(255, 255, 255, 0.66) !important;
  border-radius: 30px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.22)),
    radial-gradient(440px 220px at 50% 0%, rgba(255, 255, 255, 0.46), transparent 72%) !important;
  box-shadow:
    0 34px 90px rgba(15, 23, 42, 0.16),
    0 12px 32px rgba(14, 165, 233, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(34px) saturate(185%) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(34px) saturate(185%) brightness(1.04) !important;
  overflow: hidden !important;
}

.login-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 24px !important;
  border: 1px dashed rgba(148, 163, 184, 0.34) !important;
  border-radius: 24px !important;
  pointer-events: none !important;
}

.login-card-header,
.login-form-actions,
.login-footnote,
.login-signup-copy {
  position: relative !important;
  z-index: 1 !important;
}

.login-card-title {
  color: var(--login-glass-ink) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58) !important;
}

.login-card-subtitle,
.login-footnote,
.login-signup-copy {
  color: var(--login-glass-muted) !important;
}

.text-gradient-aurora {
  color: #0ea5e9 !important;
}

.text-gradient-aurora::after {
  background: rgba(125, 211, 252, 0.34) !important;
}

.login-sso-btn,
.login-guest-btn,
.login-submit-btn,
.login-input,
:root[data-theme="dark"] .login-view:not(.hidden) .login-input {
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.20)) !important;
  color: var(--login-glass-ink) !important;
  box-shadow:
    0 14px 32px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -1px 0 rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(22px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(165%) !important;
}

.login-sso-btn:hover,
.login-guest-btn:hover,
.login-submit-btn:hover,
.login-input:focus {
  transform: translateY(-1px) !important;
  border-color: rgba(255, 255, 255, 0.78) !important;
  box-shadow:
    0 18px 42px rgba(14, 165, 233, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 0 0 4px rgba(125, 211, 252, 0.13) !important;
}

.login-sso-btn:active,
.login-guest-btn:active,
.login-submit-btn:active {
  transform: translateY(1px) !important;
  box-shadow:
    0 8px 22px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

.login-submit-btn,
:root[data-theme="dark"] .login-view:not(.hidden) .login-submit-btn {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.66) !important;
  background:
    linear-gradient(135deg, rgba(56, 189, 248, 0.88), rgba(14, 165, 233, 0.68)),
    radial-gradient(120px 80px at 30% 0%, rgba(255, 255, 255, 0.36), transparent 78%) !important;
  text-shadow: 0 1px 0 rgba(15, 23, 42, 0.18) !important;
}

.login-guest-btn {
  background:
    linear-gradient(145deg, rgba(248, 250, 252, 0.62), rgba(255, 255, 255, 0.20)) !important;
}

.login-divider-line,
.login-divider-line:last-child {
  border-bottom-color: rgba(148, 163, 184, 0.36) !important;
}

.login-divider span,
.login-field label {
  color: rgba(20, 32, 51, 0.72) !important;
}

.login-link {
  color: #0284c7 !important;
}

.login-password-toggle {
  color: rgba(71, 85, 105, 0.76) !important;
}

.login-map-card,
.login-practice-log,
.login-sticky-note,
.login-mini-ticket,
.login-scrap-note {
  border: 1px solid rgba(255, 255, 255, 0.52) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.12)) !important;
  box-shadow:
    0 24px 64px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
  backdrop-filter: blur(26px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(170%) !important;
}

.login-sticky-note {
  background:
    linear-gradient(145deg, rgba(253, 224, 71, 0.58), rgba(255, 255, 255, 0.18)) !important;
}

.login-mini-ticket {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.48), rgba(240, 249, 255, 0.18)) !important;
}

.login-scrap-note {
  background:
    linear-gradient(145deg, rgba(224, 242, 254, 0.56), rgba(255, 255, 255, 0.16)) !important;
}

/* Final login brand mark alignment: keep the logo upright and optically centered. */
.login-card .login-brand-mark,
.login-card .login-brand-mark-aurora {
  transform: none !important;
  transform-origin: center center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.login-card .login-brand-mark .aquarius-glow,
.login-card .login-brand-mark-aurora .aquarius-glow {
  transform: none !important;
  transform-origin: center center !important;
  object-position: center center !important;
}

#mistakeNotebookView .mistake-note-resizer {
  border: 0 !important;
  opacity: 0.58;
  transition: opacity 160ms ease, background 160ms ease, transform 160ms ease !important;
}

#mistakeNotebookView .mistake-note-resizer:hover,
#mistakeNotebookView .mistake-note-resizer:focus-visible,
#mistakeNotebookView .mistake-note-resizer.is-dragging {
  opacity: 1;
  outline: none;
}


#mistakeNotebookView .mistake-notes-input {
  height: clamp(180px, 26vh, 300px) !important;
  max-height: 360px !important;
  resize: vertical;
}

#mistakeNotebookView .mistake-draft-notes-output {
  max-height: clamp(210px, 32vh, 380px) !important;
  overflow: auto;
}

@media (max-width: 760px) {
  #mistakeNotebookView .mistake-note-columns {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    min-height: 0 !important;
  }

  #mistakeNotebookView .mistake-note-resizer {
    display: none;
  }
}

/* Final references glass: remove the stacked paper shadow and make the bar translucent. */
.answer .sources,
.sources#sourcesSection {
  border: 1px solid rgba(255, 255, 255, 0.58) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.12)),
    radial-gradient(620px 180px at 18% 0%, rgba(125, 211, 252, 0.20), transparent 70%),
    radial-gradient(520px 180px at 96% 18%, rgba(167, 243, 208, 0.14), transparent 72%) !important;
  box-shadow:
    0 26px 68px rgba(15, 23, 42, 0.12),
    0 10px 28px rgba(14, 165, 233, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(28px) saturate(180%) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) brightness(1.05) !important;
  overflow: hidden !important;
}

.answer .references-header,
.sources#sourcesSection .references-header {
  min-height: 58px !important;
  padding: 12px 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.18)),
    linear-gradient(90deg, rgba(207, 250, 254, 0.18), rgba(240, 253, 250, 0.12)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    inset 0 -1px 0 rgba(255, 255, 255, 0.20) !important;
  backdrop-filter: blur(24px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(170%) !important;
}

.answer .references-header:hover,
.sources#sourcesSection .references-header:hover {
  border-color: rgba(255, 255, 255, 0.78) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.22)),
    linear-gradient(90deg, rgba(186, 230, 253, 0.24), rgba(209, 250, 229, 0.18)) !important;
  box-shadow:
    0 14px 32px rgba(14, 165, 233, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -1px 0 rgba(255, 255, 255, 0.22) !important;
}

.answer .references-chevron,
.sources#sourcesSection .references-chevron {
  width: 34px !important;
  height: 34px !important;
  border: 1px solid rgba(255, 255, 255, 0.56) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.22) !important;
  color: #0e7490 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 10px 22px rgba(14, 165, 233, 0.08) !important;
  backdrop-filter: blur(18px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(165%) !important;
}

.answer .references-title,
.sources#sourcesSection .references-title {
  color: rgba(15, 23, 42, 0.88) !important;
  font-size: 16px !important;
  font-weight: 850 !important;
}

.answer .references-count,
.sources#sourcesSection .references-count {
  color: rgba(71, 85, 105, 0.78) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.answer .references-body,
.sources#sourcesSection .references-body {
  margin: 12px 0 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.54) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    0 18px 44px rgba(15, 23, 42, 0.08) !important;
  backdrop-filter: blur(22px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%) !important;
}

.answer .source-card,
.sources#sourcesSection .source-card {
  border: 1px solid rgba(255, 255, 255, 0.56) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.14)) !important;
  box-shadow:
    0 16px 34px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
}

/* Final answer page measure: centered like Hyperknow, with intentional side breathing room. */
.answer {
  --answer-measure: min(1180px, calc(100vw - 520px));
  --answer-measure-floor: calc(100% - clamp(48px, 8vw, 180px));
}

.answer .col-explain {
  align-items: center !important;
}

.answer .explain-scroll {
  width: min(var(--answer-measure), var(--answer-measure-floor)) !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

.answer .main-chat-thread,
.answer .explain-body,
.answer .sources,
.answer .search-progress-card {
  width: 100% !important;
  max-width: none !important;
}

.answer .main-chat-turn-assistant {
  width: 100% !important;
}

.answer .main-chat-answer {
  width: 100% !important;
  max-width: none !important;
}

.answer .main-chat-turn-user {
  width: min(58%, 520px) !important;
  margin-left: auto !important;
}

.answer .followup-bar {
  left: 50% !important;
  right: auto !important;
  width: min(var(--answer-measure), var(--answer-measure-floor)) !important;
  max-width: none !important;
  margin-inline: 0 !important;
  transform: translateX(-50%) !important;
}

.answer .followup-bar:focus-within {
  left: 50% !important;
  right: auto !important;
  width: min(var(--answer-measure), var(--answer-measure-floor)) !important;
  transform: translateX(-50%) !important;
}

@media (max-width: 1100px) {
  .answer {
    --answer-measure: calc(100vw - 360px);
    --answer-measure-floor: calc(100% - 40px);
  }

  .answer .main-chat-turn-user {
    width: min(72%, 520px) !important;
  }
}

@media (max-width: 820px) {
  .answer {
    --answer-measure: calc(100vw - 32px);
    --answer-measure-floor: calc(100% - 28px);
  }

  .answer .explain-scroll {
    width: var(--answer-measure-floor) !important;
  }

  .answer .followup-bar {
    width: var(--answer-measure-floor) !important;
  }

  .answer .main-chat-turn-user {
    width: min(84%, 520px) !important;
  }
}

/* Final compact answer composer: Hyperknow-like short capsule with visible tools. */
.answer {
  --answer-composer-height: 76px !important;
}

.answer .explain-scroll {
  padding-bottom: 136px !important;
}

.answer .followup-bar {
  min-height: 56px !important;
  max-height: 76px !important;
  bottom: 24px !important;
  padding: 8px 10px !important;
  border-radius: 22px !important;
  overflow: visible !important;
}

.answer .followup-bar-row {
  min-height: 48px !important;
  height: 48px !important;
  display: grid !important;
  grid-template-columns: auto auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
}

.answer .attach-btn,
.answer .followup-send,
.answer .followup-web-toggle,
.answer .followup-mode-toggle {
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 18px !important;
}

.answer .attach-btn,
.answer .followup-send,
.answer .followup-web-toggle {
  width: 44px !important;
  min-width: 44px !important;
}

.answer .followup-inline-tools {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: max-content !important;
}

.answer .followup-mode-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 106px !important;
  padding: 0 13px !important;
  border: 1px solid rgba(255, 255, 255, 0.64) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.18)) !important;
  color: rgba(20, 32, 51, 0.78) !important;
  font-family: "Nunito", sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow:
    0 10px 24px rgba(14, 116, 144, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
}

.answer .followup-mode-icon,
.answer .followup-mode-menu-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #0284c7 !important;
}

.answer .followup-web-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.64) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.18)) !important;
  color: rgba(100, 116, 139, 0.76) !important;
  box-shadow:
    0 10px 24px rgba(14, 116, 144, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  cursor: pointer !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
}

.answer .followup-web-toggle.active {
  color: #0284c7 !important;
  border-color: rgba(56, 189, 248, 0.54) !important;
}

.answer .followup-web-toggle svg {
  width: 20px !important;
  height: 20px !important;
}

.answer .followup-mode-menu {
  position: absolute !important;
  left: 0 !important;
  bottom: calc(100% + 10px) !important;
  z-index: 90 !important;
  display: none !important;
  min-width: 150px !important;
  padding: 7px !important;
  border: 1px solid rgba(255, 255, 255, 0.68) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.30)) !important;
  box-shadow:
    0 20px 44px rgba(15, 23, 42, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
}

.answer .followup-mode-menu.show {
  display: grid !important;
  gap: 4px !important;
}

.answer .followup-mode-option {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 34px !important;
  padding: 0 9px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: rgba(30, 41, 59, 0.76) !important;
  font: 800 13px "Nunito", sans-serif !important;
  cursor: pointer !important;
  text-align: left !important;
}

.answer .followup-mode-option:hover,
.answer .followup-mode-option.selected {
  background: rgba(14, 165, 233, 0.12) !important;
  color: #075985 !important;
}

.answer .followup-input {
  min-height: 44px !important;
  height: 44px !important;
  max-height: 44px !important;
  padding: 10px 8px !important;
  line-height: 24px !important;
  resize: none !important;
  overflow-y: hidden !important;
}

@media (max-width: 760px) {
  .answer .followup-bar {
    bottom: 18px !important;
  }

  .answer .followup-mode-toggle {
    min-width: 44px !important;
    width: 44px !important;
    padding: 0 !important;
    justify-content: center !important;
  }

  .answer .followup-mode-toggle #followupModeCurrentText {
    display: none !important;
  }
}

/* Final Mistake Notebook notes stack: Your Notes / AI Notes are vertical 50:50 by default. */
#mistakeNotebookView .mistake-notes-panel {
  min-height: 0 !important;
}

#mistakeNotebookView .mistake-note-columns {
  --mistake-note-top: 0.5fr;
  --mistake-note-bottom: 0.5fr;
  display: grid;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  align-items: stretch;
}

#mistakeNotebookView .mistake-note-resizer {
  width: 100% !important;
  min-height: 12px !important;
  height: 12px !important;
  align-self: center;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.34), transparent),
    linear-gradient(180deg, transparent 4px, rgba(255, 255, 255, 0.82) 4px 8px, transparent 8px);
  cursor: row-resize;
}

#mistakeNotebookView .mistake-note-resizer:hover,
#mistakeNotebookView .mistake-note-resizer:focus-visible,
#mistakeNotebookView .mistake-note-resizer.is-dragging {
  transform: scaleY(1.18);
  background:
    linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.52), transparent),
    linear-gradient(180deg, transparent 4px, rgba(255, 255, 255, 0.94) 4px 8px, transparent 8px);
}

#mistakeNotebookView .mistake-user-note-card,
#mistakeNotebookView .mistake-ai-draft-card {
  height: 100% !important;
  min-height: 0 !important;
  align-self: stretch;
}

#mistakeNotebookView .mistake-user-note-card {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}

#mistakeNotebookView .mistake-ai-draft-card {
  grid-template-rows: auto minmax(0, 1fr) !important;
}

#mistakeNotebookView .mistake-notes-input,
#mistakeNotebookView .mistake-draft-notes-output {
  height: 100% !important;
  max-height: none !important;
  overflow: auto;
}

@media (max-width: 980px) {

  #mistakeNotebookView .mistake-notes-input,
  #mistakeNotebookView .mistake-draft-notes-output {
    min-height: 190px !important;
    height: auto !important;
    max-height: 360px !important;
  }
}

/* Trial intro glass skin: transparent frosted scrapbook elements, easy to remove if needed. */
.intro-landing-new {
  --intro-glass-border: rgba(255, 255, 255, 0.58);
  --intro-glass-border-strong: rgba(255, 255, 255, 0.72);
  --intro-glass-fill: rgba(255, 255, 255, 0.30);
  --intro-glass-fill-strong: rgba(255, 255, 255, 0.46);
  --intro-glass-shadow:
    0 28px 72px rgba(15, 23, 42, 0.14),
    0 10px 28px rgba(14, 165, 233, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18);
}

.intro-landing-new #introNavbar .max-w-7xl > div:first-child,
.intro-landing-new #introGetStartedBtn,
.intro-landing-new #introHeroExploreBtn,
.intro-landing-new .intro-window-card,
.intro-landing-new .intro-sticky-card,
.intro-landing-new .intro-polaroid-card,
.intro-landing-new .scrap-window,
.intro-landing-new .scrap-sticky,
.intro-landing-new .scrap-polaroid,
.intro-landing-new .scrap-paper,
.intro-landing-new .proof-card,
.intro-landing-new .scrap-agent-card,
.intro-landing-new .scrap-footer-inner {
  border-color: var(--intro-glass-border-strong) !important;
  background:
    linear-gradient(145deg, var(--intro-glass-fill-strong), rgba(255, 255, 255, 0.16)),
    radial-gradient(420px 180px at 18% 0%, rgba(255, 255, 255, 0.44), transparent 70%) !important;
  box-shadow: var(--intro-glass-shadow) !important;
  backdrop-filter: blur(26px) saturate(175%) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(26px) saturate(175%) brightness(1.04) !important;
}

.intro-landing-new #introNavbar .max-w-7xl > div:first-child {
  border-radius: 10px !important;
  transform: rotate(-1deg) !important;
}

.intro-landing-new #introGetStartedBtn {
  color: #172033 !important;
  border-color: rgba(255, 255, 255, 0.70) !important;
  background:
    linear-gradient(145deg, rgba(253, 224, 71, 0.56), rgba(255, 255, 255, 0.18)),
    radial-gradient(160px 80px at 30% 0%, rgba(255, 255, 255, 0.44), transparent 78%) !important;
}

.intro-landing-new #introHeroExploreBtn {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.48) !important;
  background:
    linear-gradient(145deg, rgba(23, 32, 51, 0.76), rgba(23, 32, 51, 0.52)),
    radial-gradient(240px 110px at 28% 0%, rgba(255, 255, 255, 0.24), transparent 76%) !important;
  text-shadow: 0 1px 0 rgba(15, 23, 42, 0.22) !important;
}

.intro-landing-new .intro-window-card,
.intro-landing-new .scrap-window {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.13)),
    radial-gradient(360px 160px at 18% 0%, rgba(224, 242, 254, 0.28), transparent 72%) !important;
}

.intro-landing-new .intro-polaroid-card,
.intro-landing-new .scrap-polaroid {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.24)),
    radial-gradient(340px 160px at 20% 0%, rgba(255, 255, 255, 0.50), transparent 74%) !important;
}

.intro-landing-new .intro-polaroid-card img,
.intro-landing-new .scrap-polaroid-photo {
  opacity: 0.88 !important;
  filter: saturate(0.92) contrast(0.96) !important;
}

.intro-landing-new .intro-sticky-card,
.intro-landing-new .scrap-sticky {
  background:
    linear-gradient(145deg, rgba(253, 224, 71, 0.54), rgba(255, 255, 255, 0.16)),
    radial-gradient(220px 120px at 12% 0%, rgba(255, 255, 255, 0.46), transparent 76%) !important;
}

.intro-landing-new .tape,
.intro-landing-new .scrap-tape,
.intro-landing-new .scrap-tape-blue,
.intro-landing-new .scrap-tape-pink {
  opacity: 0.72 !important;
  border-color: rgba(255, 255, 255, 0.46) !important;
  box-shadow:
    0 12px 26px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
  backdrop-filter: blur(10px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(150%) !important;
}

.intro-landing-new .highlight {
  background: rgba(253, 224, 71, 0.68) !important;
  box-shadow:
    0 10px 24px rgba(234, 179, 8, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.50) !important;
  backdrop-filter: blur(8px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(150%) !important;
}

.intro-landing-new .scrap-bubble,
.intro-landing-new .proof-question,
.intro-landing-new .proof-answer-ghost,
.intro-landing-new .proof-context-box,
.intro-landing-new .proof-response,
.intro-landing-new .proof-margin-note,
.intro-landing-new .proof-red-note {
  border-color: rgba(255, 255, 255, 0.56) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.16)) !important;
  box-shadow:
    0 16px 36px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(20px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(165%) !important;
}

.intro-landing-new .scrap-window-dots span {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}

.intro-landing-new #introGetStartedBtn:hover,
.intro-landing-new #introHeroExploreBtn:hover {
  border-color: rgba(255, 255, 255, 0.82) !important;
  box-shadow:
    0 32px 78px rgba(15, 23, 42, 0.16),
    0 14px 34px rgba(14, 165, 233, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

/* Mistake Notebook note cards length tune: keep the vertical split, give notes more writing room. */
#mistakeNotebookView .mistake-user-note-card,
#mistakeNotebookView .mistake-ai-draft-card {
  padding: 18px 20px !important;
}

#mistakeNotebookView .mistake-note-images {
  min-height: 46px !important;
  margin-top: 10px !important;
}

#mistakeNotebookView .mistake-note-image-empty {
  min-height: 46px !important;
}

/* Mistake Notebook note cards length tune 2: a bit more room for generated notes. */
#mistakeNotebookView .mistake-note-columns {
  min-height: clamp(620px, 70vh, 840px) !important;
  height: clamp(620px, 70vh, 840px) !important;
  grid-template-rows:
    minmax(295px, var(--mistake-note-top))
    12px
    minmax(295px, var(--mistake-note-bottom)) !important;
}

#mistakeNotebookView .mistake-notes-input,
#mistakeNotebookView .mistake-draft-notes-output {
  min-height: 210px !important;
}

@media (max-width: 980px) {
  #mistakeNotebookView .mistake-note-columns {
    min-height: auto !important;
    height: auto !important;
    grid-template-rows: auto 12px auto !important;
  }
}

/* 移动端课程使用讲义/问答互斥单面板，章节概览继续沿用原布局。 */
@media (max-width: 900px) {
  #learnView#learnView #learnBody#learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .learn-body-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #learnView#learnView #learnBody#learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) #learnExplainCol#learnExplainCol,
  #learnView#learnView #learnBody#learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) #learnChatCol#learnChatCol {
    flex: 1 1 100% !important;
    flex-basis: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    opacity: 1 !important;
    transform: none !important;
  }

  #learnView#learnView #learnBody#learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) #learnResizer#learnResizer {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    pointer-events: none !important;
  }

  #learnView#learnView #learnBody#learnBody.chat-collapsed:not(.chapter-overview-active):not(.chapter-overview-split-active) #learnExplainCol#learnExplainCol {
    display: flex !important;
    border-right: 0 !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }

  #learnView#learnView #learnBody#learnBody.chat-collapsed:not(.chapter-overview-active):not(.chapter-overview-split-active) #learnChatCol#learnChatCol {
    display: none !important;
  }

  #learnView#learnView #learnBody#learnBody.explain-collapsed:not(.chapter-overview-active):not(.chapter-overview-split-active) #learnExplainCol#learnExplainCol {
    display: none !important;
  }

  #learnView#learnView #learnBody#learnBody.explain-collapsed:not(.chapter-overview-active):not(.chapter-overview-split-active) #learnChatCol#learnChatCol {
    display: flex !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }

  #learnView#learnView #learnBody#learnBody.chat-collapsed:not(.chapter-overview-active):not(.chapter-overview-split-active) #learnChatRestoreBtn#learnChatRestoreBtn,
  #learnView#learnView #learnBody#learnBody.explain-collapsed:not(.chapter-overview-active):not(.chapter-overview-split-active) #learnExplainRestoreBtn#learnExplainRestoreBtn {
    display: inline-flex !important;
    min-height: 44px !important;
    height: 44px !important;
    letter-spacing: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  #learnView#learnView #learnBody#learnBody.chat-collapsed:not(.chapter-overview-active):not(.chapter-overview-split-active) #learnExplainRestoreBtn#learnExplainRestoreBtn,
  #learnView#learnView #learnBody#learnBody.explain-collapsed:not(.chapter-overview-active):not(.chapter-overview-split-active) #learnChatRestoreBtn#learnChatRestoreBtn {
    display: none !important;
  }

  #learnView#learnView #learnBody#learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) :is(#learnChatRestoreBtn#learnChatRestoreBtn, #learnExplainRestoreBtn#learnExplainRestoreBtn) {
    border: 1px solid rgba(255, 255, 255, 0.68) !important;
    border-radius: 18px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.18)) !important;
    color: #31415f !important;
    box-shadow:
      0 14px 34px rgba(15, 23, 42, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.88),
      inset 0 -1px 0 rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(18px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
    transform: none !important;
    letter-spacing: 0 !important;
  }

  #learnView#learnView #learnBody#learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) :is(#learnChatRestoreBtn#learnChatRestoreBtn, #learnExplainRestoreBtn#learnExplainRestoreBtn)::before,
  #learnView#learnView #learnBody#learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) :is(#learnChatRestoreBtn#learnChatRestoreBtn, #learnExplainRestoreBtn#learnExplainRestoreBtn)::after {
    content: none !important;
    display: none !important;
  }

  #learnView#learnView #learnBody#learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) :is(#learnChatRestoreBtn#learnChatRestoreBtn, #learnExplainRestoreBtn#learnExplainRestoreBtn) .learn-edge-toggle-icon {
    border-color: rgba(125, 184, 255, 0.72) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(219, 234, 254, 0.24)) !important;
    color: #2563eb !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.88),
      0 3px 10px rgba(37, 99, 235, 0.10) !important;
  }

  #learnView#learnView #learnBody#learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) :is(#learnChatRestoreBtn#learnChatRestoreBtn, #learnExplainRestoreBtn#learnExplainRestoreBtn):hover {
    border-color: rgba(255, 255, 255, 0.84) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.24)) !important;
    box-shadow:
      0 16px 36px rgba(15, 23, 42, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      inset 0 -1px 0 rgba(255, 255, 255, 0.22) !important;
    transform: translateY(-1px) !important;
  }

  #learnView#learnView #learnBody#learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) :is(#learnChatRestoreBtn#learnChatRestoreBtn, #learnExplainRestoreBtn#learnExplainRestoreBtn):active {
    box-shadow:
      0 8px 18px rgba(15, 23, 42, 0.11),
      inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
    transform: none !important;
  }

  #learnView #learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .learn-side-restore:focus-visible {
    outline: 3px solid #0ea5e9 !important;
    outline-offset: 3px !important;
  }
}

/* Learn split drag tune: honor the user's custom Q&A ratio after late layout locks. */
#learnView#learnView #learnBody#learnBody.panel-normal:not(.chapter-overview-active):not(.chapter-overview-split-active):not(.chat-collapsed):not(.explain-collapsed) .learn-body-inner[data-custom-split="true"],
#learnView#learnView #learnBody#learnBody:not([data-panel-focus]):not(.chapter-overview-active):not(.chapter-overview-split-active):not(.chat-collapsed):not(.explain-collapsed) .learn-body-inner[data-custom-split="true"] {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}

#learnView#learnView #learnBody#learnBody.panel-normal:not(.chapter-overview-active):not(.chapter-overview-split-active):not(.chat-collapsed):not(.explain-collapsed) .learn-body-inner[data-custom-split="true"] #learnExplainCol,
#learnView#learnView #learnBody#learnBody:not([data-panel-focus]):not(.chapter-overview-active):not(.chapter-overview-split-active):not(.chat-collapsed):not(.explain-collapsed) .learn-body-inner[data-custom-split="true"] #learnExplainCol {
  flex: 0 0 var(--learn-explain-basis, 55%) !important;
  flex-basis: var(--learn-explain-basis, 55%) !important;
  width: var(--learn-explain-basis, 55%) !important;
  min-width: 0 !important;
  max-width: var(--learn-explain-basis, 55%) !important;
}

#learnView#learnView #learnBody#learnBody.panel-normal:not(.chapter-overview-active):not(.chapter-overview-split-active):not(.chat-collapsed):not(.explain-collapsed) .learn-body-inner[data-custom-split="true"] #learnChatCol,
#learnView#learnView #learnBody#learnBody:not([data-panel-focus]):not(.chapter-overview-active):not(.chapter-overview-split-active):not(.chat-collapsed):not(.explain-collapsed) .learn-body-inner[data-custom-split="true"] #learnChatCol {
  flex: 0 0 var(--learn-chat-basis, 45%) !important;
  flex-basis: var(--learn-chat-basis, 45%) !important;
  width: var(--learn-chat-basis, 45%) !important;
  min-width: 0 !important;
  max-width: var(--learn-chat-basis, 45%) !important;
}

body.learn-resizing #learnView #learnBody .learn-body-inner,
body.learn-resizing #learnView #learnBody #learnExplainCol,
body.learn-resizing #learnView #learnBody #learnChatCol {
  transition: none !important;
}

/* Optional per-turn teaching-path guidance. */
.guidance-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  min-width: 44px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.62);
  color: #64748b;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.guidance-toggle i {
  font-size: 19px;
  line-height: 1;
}

.guidance-toggle:hover {
  color: #0f766e;
  border-color: rgba(13, 148, 136, 0.46);
  background: rgba(240, 253, 250, 0.88);
}

.guidance-toggle.active {
  color: #0f766e !important;
  border-color: rgba(13, 148, 136, 0.52) !important;
  background: rgba(204, 251, 241, 0.72) !important;
}

.guidance-toggle.has-selection {
  box-shadow: inset 0 -3px 0 rgba(13, 148, 136, 0.78) !important;
}

.guidance-toggle:focus-visible,
.guidance-option:focus-visible,
.guidance-action:focus-visible,
.guidance-path-chip-clear:focus-visible {
  outline: 3px solid rgba(13, 148, 136, 0.3);
  outline-offset: 2px;
}

.welcome.home-ask-workspace #guidanceToggleBtnMain {
  width: 46px !important;
  min-width: 46px !important;
  height: 42px !important;
  min-height: 42px !important;
}

.answer .followup-inline-tools .guidance-toggle {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
}

#learnView #learnBody #learnChatCol #learnFollowupBar #guidanceToggleBtnLearn {
  width: 48px !important;
  min-width: 48px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border-radius: 16px !important;
}

.learn-chat-popover-toolbar .guidance-toggle,
.textbook-focus-qa-tools .guidance-toggle {
  width: 38px;
  min-width: 38px;
  height: 36px;
  min-height: 36px;
  border-radius: 12px;
}

.guidance-path-chip {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 126px;
  height: 32px;
  padding: 0 4px 0 9px;
  border: 1px solid rgba(13, 148, 136, 0.34);
  border-radius: 8px;
  background: rgba(240, 253, 250, 0.92);
  color: #115e59;
  font-size: 12px;
  font-weight: 750;
}

.guidance-path-chip-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guidance-path-chip-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-left: 2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: currentColor;
  font-size: 17px;
  cursor: pointer;
}

.guidance-path-chip-clear:hover {
  background: rgba(13, 148, 136, 0.12);
}

.guidance-mount {
  width: 100%;
  min-width: 0;
}

.guidance-panel {
  width: 100%;
  min-width: 0;
  padding: 4px 0 0;
  color: #1e293b;
}

.guidance-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 28px;
  font-size: 15px;
}

.guidance-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(13, 148, 136, 0.22);
  border-top-color: #0f766e;
  border-radius: 50%;
  animation: guidance-spin 760ms linear infinite;
}

@keyframes guidance-spin {
  to { transform: rotate(360deg); }
}

.guidance-copy,
.guidance-empty-note,
.guidance-cancelled {
  margin: 7px 0 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
}

.guidance-title {
  margin: 0;
  color: #0f172a;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: 0;
}

.guidance-empty-note {
  padding-left: 10px;
  border-left: 3px solid #d97706;
  color: #92400e;
}

.guidance-option-list {
  margin-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.28);
}

.guidance-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 12px;
  width: 100%;
  min-height: 66px;
  padding: 11px 4px;
  border: 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.28);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.guidance-option:hover {
  background: rgba(240, 253, 250, 0.68);
}

.guidance-option-title {
  min-width: 0;
  color: #134e4a;
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  background: none !important;
  border-radius: 0 !important;
}

.guidance-option-description {
  grid-column: 1;
  min-width: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.guidance-option-arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: #0f766e;
  font-size: 18px;
}

.guidance-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.guidance-action {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 7px;
  background: transparent;
  color: #475569;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.guidance-action:hover {
  background: rgba(241, 245, 249, 0.9);
}

.guidance-action-primary {
  color: #0f766e;
  border-color: rgba(13, 148, 136, 0.42);
}

.guidance-error {
  padding-left: 12px;
  border-left: 3px solid #dc2626;
}

.guidance-error-meta {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 9px;
  margin: 10px 0 0;
  font-size: 12px;
}

.guidance-error-meta dt {
  color: #64748b;
}

.guidance-error-meta dd {
  min-width: 0;
  margin: 0;
  color: #991b1b;
  overflow-wrap: anywhere;
}

:root[data-theme="dark"] .guidance-toggle {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.72);
  color: #94a3b8;
}

:root[data-theme="dark"] .guidance-toggle.active,
:root[data-theme="dark"] .guidance-path-chip {
  border-color: rgba(45, 212, 191, 0.4) !important;
  background: rgba(19, 78, 74, 0.72) !important;
  color: #99f6e4 !important;
}

:root[data-theme="dark"] .guidance-panel,
:root[data-theme="dark"] .guidance-title {
  color: #e2e8f0;
}

:root[data-theme="dark"] .guidance-copy,
:root[data-theme="dark"] .guidance-option-description,
:root[data-theme="dark"] .guidance-cancelled {
  color: #94a3b8;
}

:root[data-theme="dark"] .guidance-option-title,
:root[data-theme="dark"] .guidance-option-arrow {
  color: #5eead4;
}

:root[data-theme="dark"] .guidance-option:hover {
  background: rgba(19, 78, 74, 0.3);
}

@media (max-width: 760px) {
  .guidance-path-chip {
    max-width: 92px;
  }

  #learnView #learnBody #learnChatCol #learnFollowupBar .bottom-actions,
  .learn-chat-popover-toolbar,
  .textbook-focus-qa-tools {
    flex-wrap: wrap !important;
  }

  .guidance-option {
    min-height: 72px;
  }

  .answer {
    --answer-composer-height: 128px !important;
  }

  .answer .explain-scroll {
    padding-bottom: 178px !important;
  }

  .answer .followup-bar {
    min-height: 108px !important;
    max-height: 128px !important;
    height: auto !important;
    padding: 8px 10px 10px !important;
  }

  .answer .followup-bar-row {
    height: auto !important;
    min-height: 90px !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    grid-template-rows: 44px 38px !important;
    grid-template-areas:
      "attach input send"
      "tools tools tools" !important;
    row-gap: 8px !important;
  }

  .answer .followup-bar-row > .attach-btn {
    grid-area: attach !important;
  }

  .answer .followup-bar-row > .followup-input {
    grid-area: input !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .answer .followup-bar-row > .followup-send {
    grid-area: send !important;
  }

  .answer .followup-inline-tools {
    grid-area: tools !important;
    width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
  }

  .answer .followup-mode-toggle {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    justify-content: center !important;
  }

  .answer #followupModeCurrentText {
    display: none !important;
  }

  .answer .followup-inline-tools .guidance-toggle,
  .answer .followup-inline-tools .followup-web-toggle {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  /* Keep lesson Q&A on two mobile rows so guidance state cannot squeeze the input. */
  #learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnFollowupBar#learnFollowupBar#learnFollowupBar {
    width: calc(100% - 24px) !important;
    min-height: 142px !important;
    height: auto !important;
    margin: 0 12px 12px !important;
    padding: 12px !important;
    border-radius: 24px !important;
  }

  #learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnFollowupBar#learnFollowupBar#learnFollowupBar .input-wrapper,
  #learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnFollowupBar#learnFollowupBar#learnFollowupBar .input-wrapper:focus-within {
    grid-template-columns: 48px minmax(0, 1fr) 48px !important;
    gap: 8px !important;
    min-height: 52px !important;
    padding: 0 !important;
  }

  #learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnFollowupBar#learnFollowupBar#learnFollowupBar .input-field,
  #learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnFollowupBar#learnFollowupBar#learnFollowupBar #learnFollowupInput {
    min-height: 48px !important;
    height: 48px !important;
    max-height: 48px !important;
    padding: 11px 2px !important;
    font-size: 16px !important;
    line-height: 26px !important;
    overflow: hidden !important;
  }

  #learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnFollowupBar#learnFollowupBar#learnFollowupBar .bottom-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 40px 40px !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    margin-top: 8px !important;
    inset: auto !important;
  }

  #learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnFollowupBar#learnFollowupBar#learnFollowupBar .bottom-actions:has(.guidance-path-chip) {
    grid-template-columns: minmax(104px, 1fr) 40px 84px 40px !important;
  }

  #learnView #learnBody #learnChatCol #learnFollowupBar #learnModeToggleBtn {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    width: min(100%, 138px) !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 10px !important;
  }

  #learnView #learnBody #learnChatCol #learnFollowupBar #guidanceToggleBtnLearn {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 14px !important;
  }

  #learnView #learnBody #learnChatCol #learnFollowupBar .guidance-path-chip {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 92px !important;
    justify-self: stretch !important;
  }

  #learnView #learnBody #learnChatCol #learnFollowupBar #webSearchToggleBtnLearn {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 14px !important;
  }

  #learnView #learnBody #learnChatCol #learnFollowupBar .bottom-actions:has(.guidance-path-chip) #webSearchToggleBtnLearn {
    grid-column: 4 !important;
  }

  #learnView #learnBody #learnChatCol #learnFollowupBar #webSearchToggleBtnLearn::after {
    content: none !important;
    display: none !important;
    margin: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .guidance-toggle,
  .guidance-option {
    transition: none;
  }

  .guidance-spinner {
    animation-duration: 1.8s;
  }
}

/* Loop 06: 2.4-2 focus workspace. The existing sidebar, Tutor, and Demo stay authoritative. */
.app.convolution-focus-workspace-active {
  display: grid !important;
  grid-template-columns: 68px minmax(0, 1fr) !important;
}

.app.convolution-focus-workspace-active > .main,
.app.convolution-focus-workspace-active #mainContent {
  grid-column: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

.app.convolution-focus-workspace-active #leftSidebar {
  position: relative !important;
  inset: auto !important;
  grid-column: 1 !important;
  z-index: 140 !important;
  display: flex !important;
  width: 68px !important;
  min-width: 68px !important;
  max-width: 68px !important;
  flex: 0 0 68px !important;
  height: 100dvh !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-right: 1px solid rgba(109, 128, 145, 0.24) !important;
  background: rgba(249, 251, 251, 0.94) !important;
  background-image: none !important;
  box-shadow: 8px 0 22px rgba(23, 32, 51, 0.07) !important;
  transform: none !important;
  transition: none !important;
  will-change: auto;
  backdrop-filter: blur(18px) saturate(112%);
  -webkit-backdrop-filter: blur(18px) saturate(112%);
}

.app.convolution-focus-workspace-active #leftSidebar:hover,
.app.convolution-focus-workspace-active #leftSidebar:focus-within,
.app.convolution-focus-workspace-active.convolution-focus-nav-touch-open #leftSidebar {
  transform: translateX(0) !important;
}

.app.convolution-focus-workspace-active #leftSidebar :is(
  .sidebar-journal-decor,
  .sidebar-nav-group-label,
  .sidebar-version-row,
  .sidebar-syllabus-panel,
  .sidebar-recent-panel,
  .logo-text-brand,
  .menu-toggle
) {
  display: none !important;
}

.app.convolution-focus-workspace-active #leftSidebar .sidebar-link > span:not(.sidebar-link-icon),
.app.convolution-focus-workspace-active #leftSidebar .sidebar-settings-btn > span:not(.sidebar-settings-icon) {
  display: none !important;
}

.app.convolution-focus-workspace-active #leftSidebar .sidebar-top {
  display: flex !important;
  flex: 0 0 78px !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 78px !important;
  min-height: 78px !important;
  padding: 12px 8px 8px !important;
  align-items: center !important;
  justify-content: center !important;
}

.app.convolution-focus-workspace-active #leftSidebar .logo {
  display: flex !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.app.convolution-focus-workspace-active #leftSidebar .logo-icon-brand {
  display: inline-flex !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
}

.app.convolution-focus-workspace-active #leftSidebar .logo-icon-brand img {
  width: 36px !important;
  height: 36px !important;
  object-fit: contain;
}

.app.convolution-focus-workspace-active #leftSidebar .sidebar-nav-shell {
  display: block !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  padding: 6px 8px !important;
  overflow: auto !important;
}

.app.convolution-focus-workspace-active #leftSidebar .sidebar-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
}

.app.convolution-focus-workspace-active #leftSidebar :is(.sidebar-link, .sidebar-settings-btn) {
  display: inline-flex !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.app.convolution-focus-workspace-active #leftSidebar :is(.sidebar-link, .sidebar-settings-btn):is(:hover, :focus-visible, .active) {
  background: rgba(226, 235, 235, 0.92) !important;
  color: #172033 !important;
}

.app.convolution-focus-workspace-active #leftSidebar :is(.sidebar-link-icon, .sidebar-settings-icon) {
  display: inline-flex !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.app.convolution-focus-workspace-active #leftSidebar :is(.sidebar-link, .sidebar-settings-btn)::before,
.app.convolution-focus-workspace-active #leftSidebar :is(.sidebar-link, .sidebar-settings-btn)::after,
.app.convolution-focus-workspace-active #leftSidebar .sidebar-link-icon::before,
.app.convolution-focus-workspace-active #leftSidebar .sidebar-link-icon::after {
  content: none !important;
  display: none !important;
}

.app.convolution-focus-workspace-active #leftSidebar .sidebar-footer {
  display: flex !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  padding: 10px 10px 16px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  background: transparent !important;
}

#learnView #learnBody.convolution-focus-workspace-active #learnExplainCol {
  container-name: lecture-panel convolution-lesson !important;
  container-type: inline-size !important;
}

.app.convolution-focus-workspace-active #mainContent #learnView #learnBody.convolution-focus-workspace-active[data-convolution-focus="true"] .learn-body-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr) !important;
  gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  transition: grid-template-columns 220ms cubic-bezier(0.23, 1, 0.32, 1) !important;
}

.app.convolution-focus-workspace-active #mainContent #learnView #learnBody.convolution-focus-workspace-active[data-convolution-focus="true"].chat-collapsed .learn-body-inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0fr) !important;
}

.app.convolution-focus-workspace-active #mainContent #learnView #learnBody.convolution-focus-workspace-active[data-convolution-focus="true"] #learnExplainCol {
  grid-column: 1 !important;
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  border-right: 0 !important;
}

.app.convolution-focus-workspace-active #mainContent #learnView #learnBody.convolution-focus-workspace-active[data-convolution-focus="true"] #learnResizer {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  pointer-events: none !important;
}

.app.convolution-focus-workspace-active #mainContent #learnView #learnBody.convolution-focus-workspace-active[data-convolution-focus="true"]:not(.chat-collapsed) #learnChatCol {
  position: relative !important;
  grid-column: 2 !important;
  display: flex !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 320px !important;
  max-width: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  border-left: 1px solid rgba(109, 128, 145, 0.2) !important;
  transition: opacity 180ms cubic-bezier(0.23, 1, 0.32, 1) !important;
}

.app.convolution-focus-workspace-active #mainContent #learnView #learnBody.convolution-focus-workspace-active[data-convolution-focus="true"].chat-collapsed #learnChatCol {
  grid-column: 2 !important;
  display: flex !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
  border-left-color: transparent !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 140ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 220ms !important;
}

.learn-tutor-minimize {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 60;
  display: inline-flex;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(109, 128, 145, 0.28);
  border-radius: 8px;
  background: rgba(251, 252, 252, 0.9);
  color: #334155;
  box-shadow: 0 8px 20px rgba(23, 32, 51, 0.08);
  cursor: pointer;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.learn-tutor-minimize:is(:hover, :focus-visible) {
  border-color: rgba(37, 99, 235, 0.38);
  background: #ffffff;
  color: #2563eb;
}

.learn-tutor-minimize:focus-visible,
.app.convolution-focus-workspace-active #learnChatFab:focus-visible,
.app.learn-browser-fullscreen #learnChatFab:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.38) !important;
  outline-offset: 3px !important;
}

.app.convolution-focus-workspace-active #mainContent #learnView #learnBody.convolution-focus-workspace-active[data-convolution-focus="true"].chat-collapsed #learnChatFab,
.app.convolution-focus-workspace-active #mainContent #learnView #learnBody.convolution-focus-workspace-active[data-convolution-focus="true"].chat-collapsed .learn-chat-fab,
.app.learn-browser-fullscreen.app.learn-browser-fullscreen #mainContent #learnView #learnBody.chat-collapsed #learnChatFab,
.app.learn-browser-fullscreen.app.learn-browser-fullscreen #mainContent #learnView #learnBody.chat-collapsed .learn-chat-fab {
  position: absolute !important;
  inset: 14px 14px auto auto !important;
  z-index: 130 !important;
  display: inline-flex !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: 1px solid #accfbe !important;
  border-radius: 8px !important;
  background: #e5f3ee !important;
  background-image: none !important;
  color: #327158 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  box-shadow: 0 2px 7px #21493912 !important;
  cursor: pointer !important;
}

#learnChatFab .tutor-capsule-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  font-size: 21px;
  line-height: 1;
}

#learnChatFab .tutor-capsule-label {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.app.convolution-focus-workspace-active #learnChatFab .tutor-agent-mark,
.app.learn-browser-fullscreen #learnChatFab .tutor-agent-mark {
  position: relative;
  display: inline-flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
}

.app.convolution-focus-workspace-active #learnChatFab .tutor-agent-main-icon,
.app.learn-browser-fullscreen #learnChatFab .tutor-agent-main-icon {
  font-size: 35px;
  line-height: 1;
}

.app.convolution-focus-workspace-active #learnChatFab .tutor-agent-ai-badge,
.app.learn-browser-fullscreen #learnChatFab .tutor-agent-ai-badge {
  position: absolute;
  right: -4px;
  bottom: -2px;
  display: inline-flex;
  min-width: 23px;
  height: 18px;
  padding: 0 4px;
  align-items: center;
  justify-content: center;
  border: 2px solid #b9e3f5;
  border-radius: 8px;
  background: #fde047;
  color: #172033;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

.app.convolution-focus-workspace-active #learnChatFab .tutor-agent-tooltip,
.app.learn-browser-fullscreen #learnChatFab .tutor-agent-tooltip {
  position: absolute;
  right: 74px;
  top: 50%;
  z-index: 2;
  padding: 7px 10px;
  border: 1px solid rgba(109, 128, 145, 0.28);
  border-radius: 6px;
  background: rgba(23, 32, 51, 0.94);
  color: #ffffff;
  font-family: "Quicksand", "Nunito", sans-serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(4px, -50%);
  transition: opacity 140ms ease, transform 140ms ease;
}

.app.convolution-focus-workspace-active #learnChatFab:is(:hover, :focus-visible),
.app.learn-browser-fullscreen #learnChatFab:is(:hover, :focus-visible) {
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 16px #243a5024 !important;
}

.app.convolution-focus-workspace-active #learnChatFab:is(:hover, :focus-visible) .tutor-agent-tooltip,
.app.learn-browser-fullscreen #learnChatFab:is(:hover, :focus-visible) .tutor-agent-tooltip {
  opacity: 1;
  transform: translate(0, -50%);
}

#learnView .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .lesson-page-content {
  width: min(100%, 1160px) !important;
  max-width: 1160px !important;
}

@container convolution-lesson (min-width: 840px) {
  #learnView#learnView #learnBody#learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page {
    padding: 10px 16px 64px !important;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .convolution-stage-nav {
    margin-bottom: 6px;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .convolution-lesson-progress {
    display: none;
  }

  #learnView#learnView #learnBody#learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .lesson-page-heading {
    display: block !important;
    width: min(100%, 1160px) !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    margin: 0 auto 8px !important;
    padding: 0 !important;
  }

  #learnView#learnView #learnBody#learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .lesson-page-heading h2 {
    position: static !important;
    max-width: 1160px !important;
    margin: 0 !important;
    padding-bottom: 8px !important;
    border-bottom-width: 3px !important;
    font-size: clamp(1.65rem, 2.2vw, 2rem) !important;
    line-height: 1.15 !important;
    transform: none !important;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .lesson-page-content {
    display: grid !important;
    grid-template-columns: minmax(0, 43fr) minmax(0, 57fr) !important;
    gap: 24px !important;
    align-items: start !important;
    padding: 24px !important;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .convolution-teaching-card {
    grid-column: 1 !important;
    align-self: start !important;
    min-width: 0 !important;
    padding: 0 !important;
    font-size: 17px;
    line-height: 1.45;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .convolution-teaching-card > :first-child {
    margin-top: 0 !important;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .convolution-teaching-card > :last-child {
    margin-bottom: 0 !important;
  }

  #learnView .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .convolution-teaching-card p {
    margin: 0 0 8px !important;
    line-height: 1.42 !important;
  }

  #learnView .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .convolution-teaching-card :is(ul, ol) {
    margin: 6px 0 8px;
    padding-left: 1.15rem;
  }

  #learnView .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .convolution-teaching-card li {
    margin: 0 0 3px !important;
    line-height: 1.38 !important;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .convolution-teaching-card :is(.convolution-learning-goal, .convolution-can-now) {
    padding: 7px 9px;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .convolution-teaching-card .convolution-equation {
    margin: 6px 0 8px;
    padding: 8px 10px;
    line-height: 1.35;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .kc-interactive-demo {
    grid-column: 2 !important;
    align-self: start !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-left: 24px !important;
    border-left: 1px solid var(--convolution-line) !important;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .geogebra-demo-head {
    min-height: 44px;
    padding: 4px 8px;
    align-items: center;
    gap: 6px;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page :is(.geogebra-demo-kicker, .geogebra-demo-subtitle) {
    display: none;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .geogebra-demo-title {
    font-size: 0.94rem;
    line-height: 1.2;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .geogebra-demo-button {
    min-height: 36px;
    padding: 5px 10px;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .geogebra-demo-instruction {
    min-height: 30px;
    padding: 5px 8px;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .geogebra-demo-instruction span {
    display: none;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .geogebra-demo-time-control {
    min-height: 36px;
    padding: 2px 8px;
    grid-template-columns: 78px minmax(0, 1fr) 40px;
    gap: 6px;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .convolution-demo-panel {
    min-height: 32px;
    gap: 1px;
    padding: 3px 7px;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .convolution-demo-panel strong {
    font-size: 0.78rem;
    line-height: 1.15;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .convolution-demo-panel span {
    font-size: 0.68rem;
    line-height: 1.15;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .geogebra-demo-legend {
    min-height: 24px;
    padding: 2px 8px;
    gap: 3px 9px;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page :is(.geogebra-demo-stage, .geogebra-demo-mount) {
    height: min(560px, max(360px, 100cqw));
    min-height: 360px;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .geogebra-demo-feedback {
    min-height: 34px;
    padding: 6px 10px;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .geogebra-guided-sequence {
    margin: 4px 0;
    padding: 6px;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .geogebra-guided-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .geogebra-guided-steps button {
    min-height: 46px;
    padding: 4px;
    font-size: 0.7rem;
    line-height: 1.15;
    text-align: center;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .geogebra-guided-steps button span {
    display: grid;
    width: 20px;
    height: 20px;
    margin: 0 auto 3px;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .geogebra-guided-panel {
    gap: 5px;
    margin-top: 5px;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .geogebra-guided-panel > p {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.3;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page :is(.geogebra-guided-panel, .geogebra-guided-checkpoints) .geogebra-demo-button,
  .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .geogebra-guided-checkpoints button {
    min-height: 32px;
    padding: 4px 7px;
    font-size: 0.72rem;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .geogebra-guided-checkpoints {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .geogebra-guided-prediction {
    gap: 5px;
    padding: 6px;
    font-size: 0.72rem;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .geogebra-guided-prediction :is(input, select) {
    min-height: 32px;
    padding: 4px 6px;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .geogebra-demo-fallback {
    grid-template-columns: minmax(0, 1.35fr) minmax(180px, 0.65fr);
    gap: 8px;
    padding: 8px;
    overflow: hidden;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .geogebra-demo-fallback img {
    max-height: 184px;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .geogebra-demo-fallback-copy {
    gap: 4px;
    min-width: 0;
    font-size: 0.68rem;
    line-height: 1.2;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .geogebra-demo-fallback-copy strong {
    font-size: 0.78rem;
    line-height: 1.2;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .geogebra-demo-fallback-copy code {
    max-height: 48px;
    padding: 4px 6px;
    overflow: auto;
    font-size: 0.58rem;
    line-height: 1.2;
  }

  .lesson-page-frame[data-lesson-section="2.4-2"].convolution-demo-page .geogebra-demo-fallback-copy .geogebra-demo-button {
    min-height: 32px;
    padding: 4px 9px;
  }
}

:root[data-theme="dark"] .app.convolution-focus-workspace-active #leftSidebar {
  border-color: rgba(148, 163, 184, 0.22) !important;
  background: rgba(19, 30, 44, 0.94) !important;
  color: #e2e8f0 !important;
}

:root[data-theme="dark"] .app.convolution-focus-workspace-active #leftSidebar :is(.sidebar-link, .sidebar-settings-btn):is(:hover, :focus-visible, .active),
:root[data-theme="dark"] .learn-tutor-minimize {
  border-color: rgba(148, 163, 184, 0.28) !important;
  background: rgba(25, 38, 56, 0.94) !important;
  color: #e2e8f0 !important;
}

@media (max-width: 900px) {
  .app.convolution-focus-workspace-active {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .app.convolution-focus-workspace-active > .main,
  .app.convolution-focus-workspace-active #mainContent {
    grid-column: 1 !important;
  }

  .app.convolution-focus-workspace-active #learnView .learn-topbar-left {
    padding-left: 52px !important;
  }

  .app.convolution-focus-workspace-active #leftSidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    transform: translateX(-100%) !important;
    transition-delay: 0ms !important;
  }

  .app.convolution-focus-workspace-active.convolution-focus-nav-touch-open #leftSidebar {
    transform: translateX(0) !important;
  }

  .app.convolution-focus-workspace-active.convolution-focus-nav-touch-open #leftSidebar .menu-toggle {
    position: absolute !important;
    top: 16px !important;
    right: 18px !important;
    z-index: 4 !important;
    display: inline-flex !important;
    width: 44px !important;
    height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .app.convolution-focus-workspace-active.convolution-focus-nav-touch-open #leftSidebar .logo-icon-brand {
    display: none !important;
  }

  .app.convolution-focus-workspace-active #floatToggleBtn {
    position: fixed !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 138 !important;
    display: inline-flex !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(109, 128, 145, 0.28) !important;
    border-radius: 8px !important;
    background: rgba(251, 252, 252, 0.94) !important;
    color: #334155 !important;
    box-shadow: 0 8px 20px rgba(23, 32, 51, 0.08) !important;
  }

  .app.convolution-focus-workspace-active.convolution-focus-nav-touch-open #floatToggleBtn,
  .app.convolution-focus-workspace-active #mainContent #learnView #learnBody.convolution-focus-workspace-active[data-convolution-focus="true"].chat-collapsed #learnChatFab,
  .app.convolution-focus-workspace-active #mainContent #learnView #learnBody.convolution-focus-workspace-active[data-convolution-focus="true"] .learn-tutor-minimize {
    display: none !important;
  }

  .app.convolution-focus-workspace-active #mainContent #learnView #learnBody.convolution-focus-workspace-active[data-convolution-focus="true"] .learn-body-inner {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app.convolution-focus-workspace-active #leftSidebar,
  .app.convolution-focus-workspace-active #learnChatFab,
  .app.learn-browser-fullscreen #learnChatFab,
  .app.convolution-focus-workspace-active :is(.learn-explain-col, .learn-chat-col, .learn-resizer) {
    transition: none !important;
  }
}

/* Loop 07 restored shell: one stable reading plane, glass reserved for tools. */
.lesson-page-frame[data-lesson-section="2.4-2"] {
  --convolution-glass: rgba(251, 252, 252, 0.78);
  --convolution-glass-strong: rgba(245, 249, 250, 0.9);
  color: var(--convolution-copy, #172033);
}
#learnView .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-reading-surface {
  box-sizing: border-box;
  width: 100% !important;
  margin-inline: auto;
  padding: 30px 32px;
  border: 1px solid var(--convolution-line);
  border-radius: 8px;
  background: var(--convolution-surface) !important;
  background-image: none !important;
  color: var(--convolution-copy);
  box-shadow: 0 14px 36px rgba(23, 32, 51, 0.07);
  font-size: 18px !important;
  line-height: 1.62 !important;
}
#learnView#learnView #learnBody#learnBody .lesson-page-frame[data-lesson-section="2.4-2"]:is(
  [data-convolution-template="overview"],
  [data-convolution-template="reading"],
  [data-convolution-template="finish"]
) .convolution-reading-surface {
  max-width: 72ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#learnView .lesson-page-frame[data-lesson-section="2.4-2"][data-convolution-template="demo"] .convolution-reading-surface {
  max-width: 1160px !important;
}
#learnView .lesson-page-frame[data-lesson-section="2.4-2"][data-convolution-template="practice"] .convolution-reading-surface {
  max-width: 1160px !important;
}
.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-stage-nav {
  position: sticky;
  top: 8px;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0 0 20px;
  padding: 4px;
  border: 1px solid rgba(109, 128, 145, 0.24);
  border-radius: 7px;
  background: var(--convolution-nav-glass, rgba(245, 249, 250, 0.84));
  box-shadow: 0 8px 20px rgba(23, 32, 51, 0.07);
  backdrop-filter: blur(20px) saturate(112%);
  -webkit-backdrop-filter: blur(20px) saturate(112%);
}
.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-phase-progress {
  position: static;
  z-index: auto;
  display: flex;
  flex: 0 0 auto;
  gap: 12px;
  align-items: center;
  width: auto;
  max-width: 100%;
  margin: 0 0 4px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.convolution-stage-tab,
.convolution-phase-chip {
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--convolution-muted, #58687e);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0;
}
.convolution-stage-tab { cursor: pointer; }
.convolution-stage-tab.is-active {
  border-color: rgba(22, 123, 100, 0.36);
  background: rgba(22, 123, 100, 0.12);
  color: #0f6a58;
}
.convolution-phase-chip {
  min-height: 0;
  padding: 4px 0;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  font-size: 0.74rem;
}
.convolution-phase-chip.is-active {
  border-bottom-color: var(--convolution-action, #167b64);
  background: transparent;
  color: #0f6a58;
}
#learnView#learnView #learnBody#learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-frame[data-lesson-section="2.4-2"] .lesson-page-heading {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 18px !important;
  align-items: end !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
.lesson-page-frame[data-lesson-section="2.4-2"] :is(.convolution-overlap-preview, .convolution-contact-explorer) {
  box-sizing: border-box;
  border: 1px solid var(--convolution-line, #d9e1e5);
  border-radius: 8px;
  background: var(--convolution-tool-surface, #f5f7f8);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.lesson-page-frame[data-lesson-section="2.4-2"] :is(
  .convolution-teaching-card,
  .convolution-exit-check,
  .geogebra-demo-shell,
  .convolution-practice-stage
) {
  box-sizing: border-box;
  min-width: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.convolution-teaching-card { padding: 0; }
.convolution-teaching-card ul,
.convolution-exit-check ul,
.convolution-practice-handoff ul { padding-left: 1.25rem; }
.convolution-teaching-card li,
.convolution-exit-check li,
.convolution-practice-handoff li { margin: 0.35rem 0; }
.convolution-learning-goal,
.convolution-can-now { margin: 16px 0 0; padding: 12px 14px; border-left: 4px solid var(--convolution-action); background: rgba(22, 123, 100, 0.08); }
.convolution-time-choices,
.convolution-contact-choices,
.convolution-analogy-choices,
.convolution-practice-step-row,
.geogebra-guided-steps { display: flex; flex-wrap: wrap; gap: 8px; }
.convolution-time-choices button,
.convolution-contact-choices button,
.convolution-analogy-choices button,
.geogebra-guided-steps button,
.geogebra-guided-checkpoints button,
.geogebra-task-control button {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #9aaaba;
  border-radius: 7px;
  background: var(--convolution-surface, #fbfcfc);
  color: var(--convolution-copy, #172033);
  font: inherit;
  font-weight: 760;
  cursor: pointer;
}
.convolution-time-choices button[aria-pressed="true"],
.convolution-contact-choices button[aria-pressed="true"],
.convolution-analogy-choices button[aria-pressed="true"],
.geogebra-guided-steps button.is-active,
.geogebra-guided-checkpoints button.is-complete {
  border-color: var(--convolution-action, #167b64);
  background: rgba(22, 123, 100, 0.12);
  color: #0f6a58;
}
.convolution-time-preview,
.convolution-contact-diagram { min-height: 170px; margin-top: 14px; border: 1px solid var(--convolution-line, #d9e1e5); border-radius: 8px; background: var(--convolution-tool-surface, #f5f7f8); }
.convolution-analogy-panel[hidden] { display: none; }
.convolution-analogy-image { display: block; width: min(100%, 300px); height: auto; margin: 12px auto; border-radius: 8px; }
.geogebra-guided-sequence { margin: 10px 0; padding: 10px; border: 1px solid var(--convolution-line, #d9e1e5); border-radius: 8px; background: var(--convolution-glass-strong, rgba(245, 249, 250, 0.9)); }
.geogebra-guided-steps button { flex: 1 1 130px; text-align: left; }
.geogebra-guided-steps button span { display: inline-grid; width: 24px; height: 24px; margin-right: 6px; place-items: center; border-radius: 50%; background: rgba(22, 123, 100, 0.12); }
.geogebra-guided-panel { display: grid; gap: 10px; margin-top: 10px; }
.geogebra-guided-panel label,
.geogebra-task-control { display: grid; gap: 5px; color: var(--convolution-muted, #58687e); font-weight: 700; }
.geogebra-guided-panel input,
.geogebra-guided-panel select,
.geogebra-task-control input { min-height: 38px; padding: 7px 9px; border: 1px solid #9aaaba; border-radius: 6px; background: var(--convolution-surface, #fbfcfc); color: var(--convolution-copy, #172033); font: inherit; }
.geogebra-guided-prediction { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px; border: 1px dashed var(--convolution-line, #d9e1e5); border-radius: 8px; }
.geogebra-guided-prediction strong,
.geogebra-guided-prediction button { grid-column: 1 / -1; }
.geogebra-guided-checkpoints { display: flex; flex-wrap: wrap; gap: 8px; }
.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-practice-stage {
  display: block;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-practice-heading { margin-bottom: 18px; }
.convolution-practice-formulas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.convolution-practice-formulas code { padding: 8px 10px; border: 1px solid var(--convolution-line, #d9e1e5); border-radius: 6px; background: var(--convolution-tool-surface, #f5f7f8); }
.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-practice-step-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
  margin: 18px 0;
}
.convolution-practice-step-row span { display: grid; min-height: 42px; padding: 8px 6px; place-items: center; border-radius: 7px; background: rgba(109, 128, 145, 0.1); color: var(--convolution-muted, #58687e); font-size: 0.76rem; font-weight: 800; text-align: center; }
.convolution-practice-step-row span[aria-current="step"] { background: rgba(22, 123, 100, 0.14); color: #0f6a58; }
.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-practice-columns { display: grid; grid-template-columns: minmax(0, 43fr) minmax(0, 57fr); gap: 24px; align-items: start; width: 100%; }
.lesson-page-frame[data-lesson-section="2.4-2"] .convolution-practice-builder { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.convolution-practice-panel { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--convolution-line, #d9e1e5); border-radius: 8px; background: var(--convolution-tool-surface, #f5f7f8); }
.convolution-practice-panel label { display: grid; gap: 5px; color: var(--convolution-muted, #58687e); font-weight: 700; }
.convolution-practice-panel input,
.convolution-practice-panel select { min-height: 40px; padding: 7px 9px; border: 1px solid #9aaaba; border-radius: 6px; background: var(--convolution-surface, #fbfcfc); color: var(--convolution-copy, #172033); font: inherit; }
.convolution-practice-demo { min-width: 0; }
.convolution-practice-handoff { margin-top: 16px; padding: 16px; border-left: 4px solid var(--convolution-output, #167b64); background: rgba(22, 123, 100, 0.08); }
.convolution-exit-check { padding: 0; }
.convolution-exit-progress { display: flex; gap: 8px; margin: 12px 0; }
.convolution-exit-progress span { width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; }
.convolution-exit-progress span[aria-current="step"] { background: var(--convolution-action, #167b64); box-shadow: 0 0 0 4px rgba(22, 123, 100, 0.14); }
.convolution-exit-check fieldset { display: grid; gap: 10px; border: 0; padding: 0; }
.convolution-exit-check input,
.convolution-exit-check select { min-height: 40px; padding: 7px 9px; border: 1px solid #9aaaba; border-radius: 6px; background: var(--convolution-surface, #fbfcfc); color: var(--convolution-copy, #172033); font: inherit; }
.convolution-exit-order { display: grid; gap: 7px; }
.convolution-exit-order button { min-height: 40px; padding: 8px 10px; border: 1px solid #9aaaba; border-radius: 6px; background: var(--convolution-surface, #fbfcfc); color: var(--convolution-copy, #172033); font: inherit; text-align: left; }
.convolution-exit-feedback { min-height: 44px; margin-top: 12px; padding: 10px 12px; border-left: 4px solid var(--convolution-integral, #b6531d); background: rgba(182, 83, 29, 0.08); }
.convolution-exit-check[data-convolution-task-ready="true"] .convolution-exit-feedback { border-left-color: var(--convolution-action, #167b64); background: rgba(22, 123, 100, 0.08); }
.lesson-page-frame[data-lesson-section="2.4-2"] :is(button, input, select):focus-visible { outline: 3px solid rgba(37, 100, 235, 0.34); outline-offset: 2px; }

@media (max-width: 760px) {
  #learnView#learnView #learnBody#learnBody:not(.chapter-overview-active):not(.chapter-overview-split-active) .lesson-page-frame[data-lesson-section="2.4-2"] .lesson-page-heading {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
  }
  .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-phase-progress {
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 0;
  }
  #learnView .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-reading-surface {
    padding: 22px 16px;
  }
  .geogebra-guided-prediction,
  .convolution-practice-columns { grid-template-columns: 1fr; }
  .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-practice-columns { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-practice-step-row { gap: 4px; }
  .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-practice-step-row span { min-height: 48px; padding-inline: 3px; font-size: 0.68rem; overflow-wrap: anywhere; }
  .convolution-exit-check,
  .convolution-teaching-card { padding: 0; }
  .convolution-practice-panel { padding: 14px; }
}

:root[data-theme="dark"] .lesson-page-frame[data-lesson-section="2.4-2"] :is(.convolution-teaching-card, .convolution-practice-stage, .convolution-exit-check, .geogebra-demo-shell, .geogebra-guided-sequence) {
  --convolution-glass: rgba(22, 34, 49, 0.86);
  --convolution-glass-strong: rgba(25, 38, 56, 0.94);
  border-color: rgba(148, 163, 184, 0.28);
  color: #e2e8f0;
}

:root[data-theme="dark"] .lesson-page-frame[data-lesson-section="2.4-2"] :is(
  .convolution-stage-tab.is-active,
  .convolution-phase-chip.is-active,
  .convolution-practice-step-row span[aria-current="step"]
) {
  color: #8de1c7;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lesson-page-frame[data-lesson-section="2.4-2"] .convolution-stage-nav {
    background: var(--convolution-nav-fallback, #f5f9fa);
  }
}

/* Clear, compact control states for Guided and Web Search. */
.guidance-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: auto !important;
  min-width: 96px !important;
  padding: 0 10px !important;
  white-space: nowrap !important;
}

.guidance-toggle-label {
  display: inline-block !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.guidance-toggle-switch {
  position: relative !important;
  display: inline-block !important;
  flex: 0 0 auto !important;
  width: 32px !important;
  height: 19px !important;
  border-radius: 999px !important;
  background: #cbd5e1 !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.12) !important;
  transition: background-color 160ms ease, box-shadow 160ms ease !important;
}

.guidance-toggle-switch > span {
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 13px !important;
  height: 13px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.22) !important;
  transition: left 160ms ease !important;
}

.guidance-toggle.guidance-on,
.guidance-toggle.guidance-on.active {
  color: #075985 !important;
  border-color: rgba(56, 189, 248, 0.62) !important;
  background: rgba(224, 242, 254, 0.9) !important;
}

.guidance-toggle.guidance-on .guidance-toggle-switch {
  background: #0ea5e9 !important;
  box-shadow: inset 0 1px 2px rgba(3, 105, 161, 0.24), 0 0 0 3px rgba(14, 165, 233, 0.12) !important;
}

.guidance-toggle.guidance-on .guidance-toggle-switch > span {
  left: 16px !important;
}

.welcome.home-ask-workspace #guidanceToggleBtnMain,
.answer .followup-inline-tools .guidance-toggle,
#guidanceToggleBtnFollowup,
#guidanceToggleBtnLearn,
#guidanceToggleBtnLearnPopover,
#guidanceToggleBtnTextbookFocus {
  width: auto !important;
  min-width: 96px !important;
  padding: 0 10px !important;
}

.learn-chat-popover-toolbar .guidance-toggle,
.textbook-focus-qa-tools .guidance-toggle {
  min-width: 88px !important;
}

:root[data-theme="dark"] .guidance-toggle {
  color: #cbd5e1 !important;
  border-color: rgba(148, 163, 184, 0.34) !important;
  background: rgba(15, 23, 42, 0.76) !important;
}

:root[data-theme="dark"] .guidance-toggle.guidance-on,
:root[data-theme="dark"] .guidance-toggle.guidance-on.active {
  color: #bae6fd !important;
  border-color: rgba(56, 189, 248, 0.54) !important;
  background: rgba(7, 89, 133, 0.42) !important;
}

@media (max-width: 760px) {
  .answer .followup-inline-tools .guidance-toggle,
  #guidanceToggleBtnFollowup,
  #guidanceToggleBtnLearn,
  #guidanceToggleBtnTextbookFocus {
    min-width: 84px !important;
    padding: 0 8px !important;
  }

  .answer .followup-inline-tools .guidance-toggle .guidance-toggle-label,
  #guidanceToggleBtnFollowup .guidance-toggle-label,
  #guidanceToggleBtnLearn .guidance-toggle-label,
  #guidanceToggleBtnTextbookFocus .guidance-toggle-label {
    font-size: 11px !important;
  }

  #learnView #learnBody #learnChatCol #learnFollowupBar .bottom-actions {
    grid-template-columns: minmax(0, 1fr) 84px 40px !important;
  }

  #learnView #learnBody #learnChatCol #learnFollowupBar .bottom-actions:has(.guidance-path-chip) {
    grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr) 40px !important;
  }
}

/* Keep the lesson toolbar label and switch inside the control on narrow screens. */
#learnView#learnView #learnBody#learnBody #learnChatCol#learnChatCol #learnFollowupBar#learnFollowupBar #guidanceToggleBtnLearn#guidanceToggleBtnLearn {
  width: 96px !important;
  min-width: 96px !important;
  flex: 0 0 96px !important;
  box-sizing: border-box !important;
  padding: 0 8px !important;
}

/* Mirror Web Search state across every Q&A surface. */
#webSearchToggleBtnMain[data-web-search-state="on"],
#webSearchToggleBtnFollowup[data-web-search-state="on"],
#webSearchToggleBtnLearn[data-web-search-state="on"],
#webSearchToggleBtnLearnPopover[data-web-search-state="on"],
#webSearchToggleBtnTextbookFocus[data-web-search-state="on"] {
  color: #2563eb !important;
}

#webSearchToggleBtnMain[data-web-search-state="off"],
#webSearchToggleBtnFollowup[data-web-search-state="off"],
#webSearchToggleBtnLearn[data-web-search-state="off"],
#webSearchToggleBtnLearnPopover[data-web-search-state="off"],
#webSearchToggleBtnTextbookFocus[data-web-search-state="off"] {
  color: #64748b !important;
}

:root[data-theme="dark"] #webSearchToggleBtnMain[data-web-search-state="on"],
:root[data-theme="dark"] #webSearchToggleBtnFollowup[data-web-search-state="on"],
:root[data-theme="dark"] #webSearchToggleBtnLearn[data-web-search-state="on"],
:root[data-theme="dark"] #webSearchToggleBtnLearnPopover[data-web-search-state="on"],
:root[data-theme="dark"] #webSearchToggleBtnTextbookFocus[data-web-search-state="on"] {
  color: #bae6fd !important;
}

:root[data-theme="dark"] #webSearchToggleBtnMain[data-web-search-state="off"],
:root[data-theme="dark"] #webSearchToggleBtnFollowup[data-web-search-state="off"],
:root[data-theme="dark"] #webSearchToggleBtnLearn[data-web-search-state="off"],
:root[data-theme="dark"] #webSearchToggleBtnLearnPopover[data-web-search-state="off"],
:root[data-theme="dark"] #webSearchToggleBtnTextbookFocus[data-web-search-state="off"] {
  color: #94a3b8 !important;
}

/* Mint completion indicators, matching preview option A. */
#learnChatCol .tutor-toolbar { position: relative; z-index: 20; display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex: 0 0 62px; padding: 14px 54px 14px 14px; border-bottom: 0; }
#learnChatCol:has(#learnTutorMinimizeBtn.hidden) .tutor-toolbar { padding-right: 14px; }
#learnChatCol #learnTutorMinimizeBtn { position: absolute !important; inset: 14px 14px auto auto !important; width: 34px !important; min-width: 34px !important; height: 34px !important; padding: 0 !important; border: 0 !important; border-radius: 6px !important; background: transparent !important; color: inherit; box-shadow: none !important; backdrop-filter: none; }
.tutor-panel-icon { display: inline-block; font-size: 20px; line-height: 1; transform: rotate(180deg); }
.tutor-panel-direction { position: absolute; left: 8px; top: 12px; font-size: 10px; line-height: 1; }
#learnChatFab .tutor-panel-direction { left: 12px; top: 16px; }
#learnBody #learnChatFab { color: #327158 !important; }
#learnChatCol .tutor-toolbar button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 34px; height: 34px; padding: 6px; border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; font-size: 20px; }
#learnChatCol .tutor-toolbar button:hover { background: rgba(130,180,160,.15); }
#tutorMoreMenu { position: absolute; right: 12px; top: 50px; width: 185px; padding: 6px; border: 1px solid #dce5e2; border-radius: 8px; background: #fff; color: #24313c; box-shadow: 0 8px 25px #203a3014; }
#learnChatCol #tutorMoreMenu button { width: 100%; justify-content: flex-start; font-size: 14px; }
#tutorRecentList { position: absolute; z-index: 19; top: 56px; left: 0; right: 0; max-height: 65%; overflow: auto; padding: 16px; background: #f2faf7; color: #24313c; border-bottom: 1px solid #dce5e2; }
#tutorRecentList button { display: block; width: 100%; padding: 14px 0; border: 0; border-bottom: 1px solid #dce5e2; background: transparent; color: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
#tutorRecentList small { display: block; margin-top: 6px; color: #65776e; }
#tutorMoreMenu[hidden], #tutorRecentList[hidden] { display: none !important; }
#courseSyllabus .syllabus-chapter .chapter-progress {
  color: #318764;
  background: #e5f6ed;
  border: 0;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 25px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#courseSyllabus .syllabus-chapter .chapter-progress.is-done {
  color: #318764;
  background: #e5f6ed;
}

#courseSyllabus :is(.syllabus-subsection, .syllabus-section, .syllabus-chapter).is-completed::before {
  background: #dcf2e6;
  color: #318764;
  border: 0;
  width: 20px;
  height: 20px;
  font-size: 13px;
  font-weight: 700;
  box-sizing: border-box;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.embedded-lesson-frame {
  display: block;
  width: 100%;
  height: 100% !important;
  min-height: 100% !important;
  flex: 1 1 auto !important;
  box-sizing: border-box;
  border: 0;
  background: #fff;
}

/* Final Q&A composer contract: compact at rest, grows upward, then scrolls. */
#learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnFollowupBar#learnFollowupBar#learnFollowupBar {
  transform: none !important;
  translate: none !important;
  transition: border-color .15s, box-shadow .15s !important;
  min-height: 64px !important;
  height: auto !important;
  max-height: 220px !important;
  margin: 0 12px 12px !important;
  padding: 8px 12px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

#learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnFollowupBar#learnFollowupBar#learnFollowupBar .input-wrapper,
#learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnFollowupBar#learnFollowupBar#learnFollowupBar .input-wrapper:focus-within {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 42px !important;
  align-items: center !important;
  padding: 0 !important;
  min-height: 44px !important;
  height: auto !important;
  max-height: 196px !important;
  gap: 10px !important;
  overflow: visible !important;
}

#learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnFollowupBar#learnFollowupBar#learnFollowupBar .input-field,
#learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnFollowupBar#learnFollowupBar#learnFollowupBar #learnFollowupInput {
  min-width: 0 !important;
  min-height: 44px !important;
  height: 44px !important;
  max-height: 180px !important;
  padding: 10px 2px !important;
  overflow-y: hidden !important;
  overflow-x: hidden !important;
  resize: none !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  box-sizing: border-box !important;
  align-self: end !important;
}

#learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnFollowupBar#learnFollowupBar#learnFollowupBar .btn-clip,
#learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnFollowupBar#learnFollowupBar#learnFollowupBar .btn-send {
  align-self: center !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
}

#learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnChatEmptyState#learnChatEmptyState.hidden,
#learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol.is-chat-active #learnChatEmptyState#learnChatEmptyState {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol:not(.is-chat-active) #learnChatEmptyState#learnChatEmptyState:not(.hidden) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

/* Browser-native fullscreen lesson workspace. The duplicated app token keeps
   the confirmed fullscreen state ahead of the older focus-workspace rules. */
.app.learn-browser-fullscreen.app.learn-browser-fullscreen {
  display: block !important;
  width: 100vw !important;
  min-width: 0 !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
}

.app.learn-browser-fullscreen.app.learn-browser-fullscreen #leftSidebar,
.app.learn-browser-fullscreen.app.learn-browser-fullscreen #tocSidebar {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  pointer-events: none !important;
}

.app.learn-browser-fullscreen.app.learn-browser-fullscreen > .main,
.app.learn-browser-fullscreen.app.learn-browser-fullscreen #mainContent,
.app.learn-browser-fullscreen.app.learn-browser-fullscreen #learnView,
.app.learn-browser-fullscreen.app.learn-browser-fullscreen #learnBody {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
}

.app.learn-browser-fullscreen.app.learn-browser-fullscreen #mainContent {
  height: 100dvh !important;
  grid-column: 1 !important;
  overflow: hidden !important;
}

.app.learn-browser-fullscreen.app.learn-browser-fullscreen #learnView {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;
}

.app.learn-browser-fullscreen.app.learn-browser-fullscreen #learnBody {
  flex: 1 1 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
}

.app.learn-browser-fullscreen.app.learn-browser-fullscreen .learn-topbar {
  flex: 0 0 auto !important;
}

.app .sidebar-top {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.learn-fullscreen-btn {
  display: inline-flex;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0 0 10px !important;
  border: 1px solid rgba(109, 128, 145, 0.28);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.74);
  color: #334155;
  line-height: 1;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.learn-fullscreen-icon {
  width: 18px;
  height: 18px;
  display: block;
  flex: 0 0 18px;
}

.learn-fullscreen-icon-exit,
.learn-fullscreen-btn[aria-pressed="false"] .learn-fullscreen-icon-exit {
  display: none;
}

.learn-fullscreen-btn[aria-pressed="true"] .learn-fullscreen-icon-enter {
  display: none;
}

.learn-fullscreen-btn[aria-pressed="true"] .learn-fullscreen-icon-exit {
  display: block;
}

.learn-fullscreen-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.learn-fullscreen-btn:hover:not(:disabled),
.learn-fullscreen-btn:focus-visible,
.app.learn-browser-fullscreen .learn-fullscreen-btn {
  border-color: rgba(37, 99, 235, 0.38);
  background: rgba(239, 246, 255, 0.94);
  color: #1d4ed8;
}

.learn-fullscreen-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.learn-fullscreen-btn:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.28);
  outline-offset: 3px;
}

.learn-fullscreen-btn:disabled {
  cursor: default;
  opacity: 0.58;
}

.app.sidebar-collapsed .sidebar-top .learn-fullscreen-btn,
.app .sidebar.collapsed .sidebar-top .learn-fullscreen-btn {
  align-self: center !important;
  margin-bottom: 9px !important;
}

:root[data-theme="dark"] .learn-fullscreen-btn {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(25, 38, 56, 0.82);
  color: #dbeafe;
}

html:fullscreen,
html:fullscreen body {
  width: 100%;
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
}

@media (max-width: 900px) {
  .learn-fullscreen-btn {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  .app.learn-browser-fullscreen.app.learn-browser-fullscreen #learnBody {
    height: auto !important;
    max-height: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .learn-fullscreen-btn {
    transition: none;
  }
}
/* TUTOR PANEL SIMPLIFICATION LOCK: keep questions compact and let answers use the full reading width. */
#learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnChatContent#learnChatContent .followup-bubble .fub-a,
#learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnChatContent#learnChatContent .followup-bubble .fub-a.learn-explain-content,
#learnView #learnChatPopoverScroll .followup-bubble .fub-a,
#textbookFocusModal #textbookFocusQaScroll .followup-bubble .fub-a {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 4px 0 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnChatContent#learnChatContent .followup-bubble .fub-a::before,
#learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnChatContent#learnChatContent .followup-bubble .fub-a::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

#learnView#learnView#learnView #learnChatContent#learnChatContent .followup-bubble .fub-a::before,
#learnView #learnChatPopoverScroll .followup-bubble .fub-a::before,
#textbookFocusModal #textbookFocusQaScroll .followup-bubble .fub-a::before {
  content: none !important;
  display: none !important;
}

#learnView .guidance-path-chip,
#learnView #learnFollowupBar .bottom-actions {
  display: none !important;
}

/* TUTOR COMPACT CHAT LOCK: edge-aligned messages and a one-line thinking state. */
#learnView#learnView #learnChatCol#learnChatCol .learn-chat-scroll,
#learnView#learnView #learnChatCol#learnChatCol #learnChatContent,
#learnView #learnChatPopoverScroll,
#textbookFocusModal #textbookFocusQaScroll {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

#learnView#learnView#learnView #learnChatContent#learnChatContent .followup-bubble,
#learnView #learnChatPopoverScroll .followup-bubble,
#textbookFocusModal #textbookFocusQaScroll .followup-bubble {
  display: flow-root !important;
  width: 100% !important;
  margin: 12px 0 20px !important;
  padding: 0 !important;
}

#learnView#learnView#learnView #learnChatContent#learnChatContent .followup-bubble .fub-q,
#learnView #learnChatPopoverScroll .followup-bubble .fub-q,
#textbookFocusModal #textbookFocusQaScroll .followup-bubble .fub-q {
  display: block !important;
  float: right !important;
  clear: both !important;
  width: fit-content !important;
  min-width: 0 !important;
  max-width: calc(100% - 20px) !important;
  margin: 0 0 12px auto !important;
  padding: 8px 12px !important;
  border-radius: 15px 15px 5px 15px !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}

#learnView#learnView#learnView #learnChatContent#learnChatContent .followup-bubble .fub-a,
#learnView #learnChatPopoverScroll .followup-bubble .fub-a,
#textbookFocusModal #textbookFocusQaScroll .followup-bubble .fub-a {
  clear: both !important;
  padding: 2px 0 0 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

.tutor-thinking {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 28px;
  color: #22314d;
  font-size: 15px;
  font-weight: 650;
}

.tutor-thinking-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 18px;
}

.tutor-thinking-dots i {
  display: block;
  width: 4px;
  height: 9px;
  border-radius: 999px;
  background: #5b9df9;
  transform-origin: center;
  animation: tutor-thinking-float 780ms ease-in-out infinite;
}

.tutor-thinking-dots i:nth-child(2) {
  animation-delay: 110ms;
}

.tutor-thinking-dots i:nth-child(3) {
  animation-delay: 220ms;
}

@keyframes tutor-thinking-float {
  0%, 100% { transform: translateY(2px) scaleY(0.65); opacity: 0.45; }
  50% { transform: translateY(-2px) scaleY(1.15); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .tutor-thinking-dots i {
    animation: none;
    opacity: 0.72;
  }
}

/* TUTOR LIGHT READING SURFACE: remove the legacy thinking frame and ambient tint. */
:root:not([data-theme="dark"]) #learnView #learnBody #learnChatCol,
:root:not([data-theme="dark"]) #learnView #learnBody #learnChatCol .learn-chat-scroll,
:root:not([data-theme="dark"]) #learnView #learnBody #learnChatCol #learnChatContent,
:root:not([data-theme="dark"]) #learnView #learnBody #learnChatCol #learnChatEmptyState {
  background: transparent !important;
  background-image: none !important;
}

:root:not([data-theme="dark"]) #learnView #learnBody #learnChatCol #learnFollowupBar {
  background: rgba(224, 255, 247, 0.26) !important;
  background-image: linear-gradient(135deg, rgba(255,255,255,.34), rgba(173,246,222,.22)) !important;
  border: 1px solid rgba(255,255,255,.48) !important;
  box-shadow: 0 8px 24px rgba(45, 115, 110, .08), inset 0 1px 0 rgba(255,255,255,.42) !important;
  backdrop-filter: blur(18px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
}

/* Restored Tutor conversation treatment: compact question bubble and open answer text. */
:root:not([data-theme="dark"]) #learnView #learnChatContent .followup-bubble .fub-q {
  align-self: flex-end !important;
  width: fit-content !important;
  max-width: 82% !important;
  padding: 9px 14px !important;
  border: 0 !important;
  border-radius: 16px 16px 0 16px !important;
  background: #eff6ff !important;
  color: #111827 !important;
  box-shadow: none !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}
:root:not([data-theme="dark"]) #learnView #learnChatContent .followup-bubble .fub-a,
:root:not([data-theme="dark"]) #learnView #learnChatContent .followup-bubble .fub-a.ghost {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
:root:not([data-theme="dark"]) #learnView #learnChatContent .followup-bubble .tutor-thinking {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

:root:not([data-theme="dark"]) #learnView #learnBody #learnChatCol .ambient-background {
  display: none !important;
}

:root:not([data-theme="dark"]) #learnView #learnBody #learnChatCol::before,
:root:not([data-theme="dark"]) #learnView #learnBody #learnChatCol::after,
:root:not([data-theme="dark"]) #learnView #learnBody #learnChatCol .learn-chat-scroll::before,
:root:not([data-theme="dark"]) #learnView #learnBody #learnChatCol .learn-chat-scroll::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

:root:not([data-theme="dark"]) #learnView #learnBody #learnChatCol #learnChatContent .followup-bubble,
:root:not([data-theme="dark"]) #learnView #learnBody #learnChatCol #learnChatContent .followup-bubble .fub-a,
:root:not([data-theme="dark"]) #learnView #learnBody #learnChatCol #learnChatContent .followup-bubble .fub-a.ghost {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

:root:not([data-theme="dark"]) #learnView #learnBody #learnChatCol #learnChatContent .followup-bubble .tutor-thinking {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#learnView:has(.embedded-lesson-frame) #learnFullscreenBtn{display:none!important}
/* The embedded lesson owns these controls; its scroll state updates them. */
#learnView .learn-topbar:has(.embedded-lesson-controls){display:flex!important;flex-wrap:wrap!important;gap:12px 20px!important;height:auto!important;min-height:62px!important;padding:14px 24px!important}
#learnView .learn-topbar:has(.embedded-lesson-controls) .learn-topbar-left{flex:1 1 420px!important;min-width:0!important}
#learnView .learn-topbar:has(.embedded-lesson-controls) #learnTitle{white-space:normal!important;overflow-wrap:anywhere;font-size:20px!important;line-height:1.3!important}
#learnView .embedded-lesson-controls{position:static;flex:0 1 260px;min-width:200px;margin:0;padding:0;background:none;border:0}
#learnView .embedded-lesson-controls .progress-title{display:none}
#learnView .embedded-lesson-controls .progress-inner{display:grid;grid-template-columns:minmax(110px,1fr) 76px;align-items:center;gap:5px 12px}
#learnView .embedded-lesson-controls .progress-meta{display:contents}
#learnView .embedded-lesson-controls .progress-text{grid-column:1;grid-row:1;display:flex;gap:5px;font-size:12px;line-height:18px;color:inherit}
#learnView .embedded-lesson-controls .lesson-tools{grid-column:2;grid-row:1 / 3;display:flex;gap:8px}
#learnView .embedded-lesson-controls .theme-toggle{display:grid;place-items:center;width:34px;height:34px;min-width:34px;padding:6px;border:1px solid #cbd5e1;border-radius:8px;background:#f8fafc;color:#475569;cursor:pointer}
#learnView .embedded-lesson-controls .theme-toggle svg{display:block;grid-area:1/1;width:20px;height:20px;margin:0;transform:none}
#learnView .embedded-lesson-controls .sun{display:none!important}
#learnView .embedded-lesson-controls[data-theme=dark] .sun{display:block!important}
#learnView .embedded-lesson-controls[data-theme=dark] .moon{display:none!important}
#learnView .embedded-lesson-controls .track{grid-column:1;grid-row:2;height:5px;overflow:hidden;border-radius:4px;background:#dce3eb}
#learnView .embedded-lesson-controls .bar{height:100%;background:#5285e5;transition:width .16s}


/* Restored latest Tutor UI from Fourier-tier-3 local version. */

/* Final reference treatment: match the compact pale-blue question bubble and
   emphasize teaching keywords in the answer with blue bold text. */
#learnView #learnChatContent {
  padding-left: 8px !important;
  padding-right: 8px !important;
}
#learnView #learnChatContent .followup-bubble .fub-q {
  display: inline-flex !important;
  width: auto !important;
  max-width: min(78%, 460px) !important;
  margin: 0 0 16px auto !important;
  padding: 9px 14px !important;
  border: 0 !important;
  border-radius: 16px 16px 0 16px !important;
  background: #eff6ff !important;
  color: #111 !important;
  box-shadow: none !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
}
#learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnChatContent#learnChatContent .followup-bubble .fub-q {
  display: inline-block !important;
  width: auto !important;
  max-width: 78% !important;
  margin: 0 0 16px auto !important;
  padding: 8px 14px !important;
  border: 0 !important;
  border-radius: 16px 16px 0 16px !important;
  background: #eff6ff !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #111 !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  backdrop-filter: none !important;
}
#learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnChatContent#learnChatContent .followup-bubble:has(.tutor-thinking),
#learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnChatContent#learnChatContent .followup-bubble:has(.tutor-thinking)::before,
#learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnChatContent#learnChatContent .followup-bubble:has(.tutor-thinking) .fub-a {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
#learnView #learnChatContent .followup-bubble .fub-a,
#learnView #learnChatContent .followup-bubble .fub-a * {
  font-family: inherit !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
}
#learnView #learnChatContent .followup-bubble .fub-a {
  font-weight: 400 !important;
  color: #111 !important;
}
#learnView #learnChatContent .followup-bubble .fub-a strong,
#learnView #learnChatContent .followup-bubble .fub-a mark {
  color: #0b57d0 !important;
  font-weight: 800 !important;
}
#learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnChatContent#learnChatContent .followup-bubble {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnChatContent#learnChatContent .followup-bubble .fub-a,
#learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnChatContent#learnChatContent .followup-bubble .fub-a.learn-explain-content {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#learnView #learnChatContent .followup-bubble .fub-q {
  margin-right: 8px !important;
}
#learnView #learnChatContent .followup-bubble .fub-a {
  padding-left: 8px !important;
  padding-right: 8px !important;
}
#learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnChatContent#learnChatContent .followup-bubble .fub-a > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#learnView #learnChatContent .followup-bubble .tutor-thinking,
#learnView #learnChatContent .followup-bubble .tutor-thinking::before,
#learnView #learnChatContent .followup-bubble .tutor-thinking::after {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#learnView #learnChatContent .followup-bubble .fub-a strong,
#learnView #learnChatContent .followup-bubble .fub-a mark {
  color: #0b57d0 !important;
  font-weight: 800 !important;
  background: transparent !important;
}
/* LEARN RIGHT CHAT MESSAGE GLASS LOCK: user, answer, and error states. */
#learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol #learnChatContent#learnChatContent .followup-bubble,
#learnView#learnView#learnView #learnChatCol#learnChatCol#learnChatCol #learnChatContent#learnChatContent .followup-bubble {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  margin: 18px 0 28px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#learnView#learnView#learnView #learnChatContent#learnChatContent .followup-bubble::before {
  content: none !important;
  display: none !important;
}

#learnView#learnView#learnView #learnChatContent#learnChatContent .followup-bubble .fub-q {
  display: inline-flex !important;
  width: auto !important;
  max-width: min(78%, 460px) !important;
  margin: 0 0 16px auto !important;
  padding: 13px 18px !important;
  border: 1px solid rgba(125, 211, 252, 0.76) !important;
  border-radius: 22px 22px 8px 22px !important;
  background:
    linear-gradient(145deg, rgba(240, 249, 255, 0.48), rgba(255, 255, 255, 0.16)),
    radial-gradient(160px 70px at 20% 0%, rgba(125, 211, 252, 0.18), transparent 74%) !important;
  box-shadow:
    0 14px 34px rgba(14, 116, 144, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12) !important;
  color: #075985 !important;
  backdrop-filter: blur(28px) saturate(190%) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) brightness(1.04) !important;
}

#learnView#learnView#learnView #learnChatContent#learnChatContent .followup-bubble .fub-a,
#learnView#learnView#learnView #learnChatContent#learnChatContent .followup-bubble .fub-a.learn-explain-content,
#learnView#learnView#learnView #learnBody#learnBody#learnBody #learnChatCol#learnChatCol#learnChatCol .followup-bubble .fub-a {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 22px 24px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.52) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.07)),
    radial-gradient(420px 180px at 0% 0%, rgba(125, 211, 252, 0.10), transparent 74%),
    radial-gradient(360px 170px at 100% 10%, rgba(251, 207, 232, 0.08), transparent 76%) !important;
  background-size: auto !important;
  box-shadow:
    0 18px 54px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.70),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10) !important;
  color: #24324a !important;
  backdrop-filter: blur(38px) saturate(200%) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(38px) saturate(200%) brightness(1.04) !important;
}

#learnView#learnView#learnView #learnChatContent#learnChatContent .followup-bubble .fub-a::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 1px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background:
    linear-gradient(128deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.04) 42%, transparent 72%) !important;
  opacity: 0.72 !important;
  box-shadow: none !important;
}

#learnView#learnView#learnView #learnChatContent#learnChatContent .followup-bubble .fub-a > * {
  position: relative !important;
  z-index: 1 !important;
}

#learnView#learnView#learnView #learnChatContent#learnChatContent .followup-bubble .fub-a.ghost::before {
  content: "" !important;
  display: block !important;
}

#learnView#learnView#learnView #learnChatContent#learnChatContent .followup-bubble .fub-a .error-box,
#learnView#learnView#learnView #learnChatContent#learnChatContent .error-box,
#learnView#learnView#learnView #learnChatCol#learnChatCol#learnChatCol .error-box {
  position: relative !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 20px 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.54) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.07)),
    radial-gradient(320px 140px at 0% 0%, rgba(254, 205, 211, 0.18), transparent 74%) !important;
  box-shadow:
    0 16px 42px rgba(148, 47, 62, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.70),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10) !important;
  color: #172036 !important;
  backdrop-filter: blur(36px) saturate(195%) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(36px) saturate(195%) brightness(1.04) !important;
}

#learnView#learnView#learnView #learnChatContent#learnChatContent .error-box strong {
  display: inline-block !important;
  margin: 0 0 10px !important;
  color: #0f172a !important;
  font-family: "Quicksand", "Nunito", sans-serif !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  background:
    linear-gradient(180deg, transparent 58%, rgba(253, 224, 71, 0.48) 58%) !important;
  border-radius: 5px !important;
}

#learnView#learnView#learnView #learnChatContent#learnChatContent .error-box p {
  margin: 0 !important;
  color: rgba(36, 50, 74, 0.88) !important;
  font-family: "Nunito", "Quicksand", system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  font-weight: 720 !important;
}