:root {
  --lb-ink: #06164a;
  --lb-muted: #526184;
  --lb-line: #dce3f0;
  --lb-soft: #f7f9fd;
  --lb-primary: #4b18f4;
  --lb-primary-dark: #3000c9;
  --lb-green: #07994b;
  --lb-vip: #efe9ff;
  --lb-paper: #fbf5e8;
  --lb-shadow: 0 10px 26px rgba(19, 35, 82, .07);
}

/* BC2 · Práctica interactiva */
.lb-bc2-interactive {
  width: min(1180px, calc(100% - 32px));
  margin: 28px auto 72px;
  color: #35142b;
}

.lb-bc2-interactive__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  gap: 32px;
  align-items: center;
  padding: 38px 42px;
  border: 1px solid #efd7e3;
  border-radius: 28px;
  background: linear-gradient(135deg, #fffaf5 0%, #fff 54%, #f9edf3 100%);
  box-shadow: 0 20px 54px rgba(91, 30, 65, .1);
}

.lb-bc2-interactive__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  color: #8d315e;
  font-weight: 800;
}

.lb-bc2-interactive__eyebrow,
.lb-bc2-interactive-invite span {
  display: block;
  color: #a33f70;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
}

.lb-bc2-interactive__hero h1 {
  margin: 8px 0 10px;
  color: #3b1630;
  font-size: clamp(38px, 5vw, 68px);
  line-height: .98;
}

.lb-bc2-interactive__hero p {
  max-width: 720px;
  margin: 0;
  color: #71516a;
  font-size: 19px;
  line-height: 1.6;
}

.lb-bc2-interactive__hero-mark {
  display: grid;
  min-height: 160px;
  place-items: center;
  align-content: center;
  border-radius: 28px;
  color: #fff;
  background: linear-gradient(145deg, #7a204f, #b44577);
  box-shadow: 0 18px 36px rgba(122, 32, 79, .24);
}

.lb-bc2-interactive__hero-mark i { font-size: 30px; }
.lb-bc2-interactive__hero-mark strong { margin-top: 5px; font-size: 48px; line-height: 1; }
.lb-bc2-interactive__hero-mark small { font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }

.lb-bc2-interactive__status {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) minmax(240px, auto);
  gap: 20px;
  align-items: center;
  margin: 20px 0;
  padding: 18px 24px;
  border: 1px solid #eadce4;
  border-radius: 20px;
  background: #fff;
}

.lb-bc2-interactive__status > div:first-child { display: flex; gap: 9px; align-items: baseline; }
.lb-bc2-interactive__status span { color: #836579; font-size: 13px; font-weight: 800; text-transform: uppercase; }
.lb-bc2-interactive__status strong { color: #8d315e; font-size: 25px; }
.lb-bc2-interactive__status p { margin: 0; color: #71516a; font-weight: 700; text-align: right; }
.lb-bc2-interactive__status.is-complete { border-color: #9fe1c4; background: #f2fff8; }

.lb-bc2-interactive__bar { height: 9px; overflow: hidden; border-radius: 999px; background: #f0e6ec; }
.lb-bc2-interactive__bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8d315e, #e4719f); transition: width .35s ease; }

.lb-bc2-interactive__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.lb-bc2-interactive-card {
  position: relative;
  padding: 26px;
  overflow: hidden;
  border: 2px solid #eee4e9;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(67, 20, 48, .055);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.lb-bc2-interactive-card:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(67, 20, 48, .09); }
.lb-bc2-interactive-card.is-correct { border-color: #38bc7a; }
.lb-bc2-interactive-card.is-incorrect { border-color: #ee766f; }
.lb-bc2-interactive-card.is-missing { border-color: #e49b2f; animation: lb-bc2-card-nudge .32s ease 2; }

@keyframes lb-bc2-card-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}

.lb-bc2-interactive-card__number {
  position: absolute;
  top: 18px;
  right: 20px;
  color: #d5bdca;
  font-size: 26px;
  font-weight: 900;
}

.lb-bc2-interactive-card__sentence {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  max-width: calc(100% - 46px);
  min-height: 68px;
  margin-bottom: 18px;
  color: #3f2337;
  font-size: 20px;
  line-height: 1.55;
}

.lb-bc2-interactive-card__sentence strong { color: #9b2f63; border-bottom: 2px solid #e8b9cf; }
.lb-bc2-interactive-card fieldset { margin: 0; padding: 0; border: 0; }
.lb-bc2-interactive-card legend { margin-bottom: 8px; color: #806173; font-size: 13px; font-weight: 800; }

.lb-bc2-interactive-card__choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lb-bc2-interactive-card__choices label { cursor: pointer; }
.lb-bc2-interactive-card__choices input { position: absolute; opacity: 0; pointer-events: none; }
.lb-bc2-interactive-card__choices span {
  display: flex;
  justify-content: center;
  padding: 12px 14px;
  border: 1px solid #e5d8df;
  border-radius: 14px;
  color: #4a273d;
  background: #fffafc;
  font-weight: 800;
  transition: .18s ease;
}
.lb-bc2-interactive-card__choices input:checked + span { color: #fff; border-color: #8d315e; background: #8d315e; box-shadow: 0 8px 18px rgba(141, 49, 94, .2); }
.lb-bc2-interactive-card__choices input:focus-visible + span { outline: 3px solid rgba(180, 69, 119, .25); outline-offset: 2px; }

.lb-bc2-interactive-card__explanation { display: block; margin-top: 18px; }
.lb-bc2-interactive-card__explanation > span { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; color: #4d2d41; font-size: 13px; font-weight: 800; }
.lb-bc2-interactive-card__explanation small { color: #9c8191; font-weight: 600; }
.lb-bc2-interactive-card__explanation textarea { width: 100%; resize: vertical; min-height: 76px; padding: 12px 14px; border: 1px solid #e2d5dc; border-radius: 14px; color: #3f2337; background: #fff; font: inherit; }
.lb-bc2-interactive-card__explanation textarea:focus { border-color: #ad4b79; outline: 3px solid rgba(173, 75, 121, .12); }

.lb-bc2-interactive-card__feedback { display: flex; gap: 11px; align-items: flex-start; margin-top: 16px; padding: 13px 14px; border-radius: 14px; background: #fff2f1; color: #ad3029; }
.lb-bc2-interactive-card.is-correct .lb-bc2-interactive-card__feedback { background: #ebfff4; color: #12834e; }
.lb-bc2-interactive-card__feedback i { margin-top: 3px; }
.lb-bc2-interactive-card__feedback strong,
.lb-bc2-interactive-card__feedback span { display: block; }
.lb-bc2-interactive-card__feedback span { margin-top: 2px; color: #735568; font-size: 14px; }

.lb-bc2-interactive__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 22px;
  padding: 20px;
  border-radius: 20px;
  background: #f8f2f5;
}
.lb-bc2-interactive__actions [data-interactive-message] { flex: 1 1 100%; min-height: 24px; color: #705064; font-weight: 700; }
.lb-bc2-interactive__actions [data-interactive-message].is-success { color: #087443; }
.lb-bc2-interactive__actions [data-interactive-message].is-warning { color: #9c5b0d; }
.lb-bc2-interactive__actions [data-interactive-message].is-error { color: #b62d2d; }
.lb-bc2-interactive__actions .is-loading { opacity: .65; cursor: wait; }

.lb-bc2-interactive__tip,
.lb-bc2-interactive-invite {
  display: grid;
  gap: 18px;
  align-items: center;
  margin-top: 22px;
  border: 1px solid #ecdce5;
  border-radius: 22px;
  background: #fff;
}
.lb-bc2-interactive__tip { grid-template-columns: 46px 1fr; padding: 22px 24px; }
.lb-bc2-interactive__tip i { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 15px; color: #973361; background: #fae7f0; }
.lb-bc2-interactive__tip strong { color: #49243b; }
.lb-bc2-interactive__tip p { margin: 4px 0 0; color: #76586b; }

.lb-bc2-interactive-invite { grid-template-columns: 64px minmax(0, 1fr) auto; padding: 25px 28px; }
.lb-bc2-interactive-invite__icon { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 18px; color: #fff; background: linear-gradient(145deg, #7a204f, #bd4d82); font-size: 23px; }
.lb-bc2-interactive-invite h2 { margin: 4px 0; color: #401b33; font-size: 23px; }
.lb-bc2-interactive-invite p { margin: 0; color: #76586b; }

@media (max-width: 820px) {
  .lb-bc2-interactive { width: min(100% - 20px, 680px); margin-top: 16px; }
  .lb-bc2-interactive__hero { grid-template-columns: 1fr; padding: 26px 22px; }
  .lb-bc2-interactive__hero-mark { display: none; }
  .lb-bc2-interactive__hero h1 { font-size: 40px; }
  .lb-bc2-interactive__hero p { font-size: 16px; }
  .lb-bc2-interactive__status { grid-template-columns: 1fr; gap: 10px; }
  .lb-bc2-interactive__status p { text-align: left; }
  .lb-bc2-interactive__grid { grid-template-columns: 1fr; }
  .lb-bc2-interactive-invite { grid-template-columns: 52px 1fr; }
  .lb-bc2-interactive-invite .lb-btn { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .lb-bc2-interactive-card { padding: 22px 18px; }
  .lb-bc2-interactive-card__sentence { max-width: calc(100% - 34px); font-size: 18px; }
  .lb-bc2-interactive-card__choices { grid-template-columns: 1fr; }
  .lb-bc2-interactive-card__explanation > span { display: block; }
  .lb-bc2-interactive-card__explanation small { display: block; margin-top: 3px; }
  .lb-bc2-interactive__actions .lb-btn { width: 100%; justify-content: center; }
  .lb-bc2-interactive-invite { grid-template-columns: 1fr; padding: 22px; }
}

/* BC2 · Conexiones semánticas */
.lb-bc2-connections {
  width: min(1240px, calc(100% - 32px));
  margin: 28px auto 72px;
  color: #35142b;
}

.lb-bc2-connections__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 32px;
  align-items: center;
  padding: 38px 42px;
  border: 1px solid #ead8e1;
  border-radius: 28px;
  background: radial-gradient(circle at 82% 30%, rgba(203, 85, 139, .17), transparent 24%), linear-gradient(135deg, #fffaf5, #fff 60%, #f7eaf1);
  box-shadow: 0 20px 54px rgba(91, 30, 65, .1);
}

.lb-bc2-connections__hero h1 { margin: 8px 0 10px; color: #3b1630; font-size: clamp(38px, 5vw, 66px); line-height: 1; }
.lb-bc2-connections__hero p { max-width: 780px; margin: 0; color: #71516a; font-size: 18px; line-height: 1.6; }
.lb-bc2-connections__hero-mark { display: grid; min-height: 170px; place-items: center; align-content: center; border-radius: 30px; color: #fff; background: linear-gradient(145deg, #6f1948, #c25185); box-shadow: 0 18px 36px rgba(122, 32, 79, .25); }
.lb-bc2-connections__hero-mark i { font-size: 30px; }
.lb-bc2-connections__hero-mark strong { margin-top: 5px; font-size: 50px; line-height: 1; }
.lb-bc2-connections__hero-mark small { font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }

.lb-bc2-connections__status {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) minmax(260px, auto);
  gap: 20px;
  align-items: center;
  margin: 20px 0 14px;
  padding: 18px 24px;
  border: 1px solid #eadce4;
  border-radius: 20px;
  background: #fff;
}
.lb-bc2-connections__status > div:first-child { display: flex; gap: 9px; align-items: baseline; }
.lb-bc2-connections__status span { color: #836579; font-size: 13px; font-weight: 850; text-transform: uppercase; }
.lb-bc2-connections__status strong { color: #8d315e; font-size: 25px; }
.lb-bc2-connections__status p { margin: 0; color: #71516a; font-weight: 700; text-align: right; }
.lb-bc2-connections__status.is-complete { border-color: #92d9bb; background: #f1fff7; }

.lb-bc2-connections__instructions { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; padding: 13px 17px; border-radius: 16px; color: #69465b; background: #f9eff4; }
.lb-bc2-connections__instructions i { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 10px; color: #fff; background: #9a3867; }
.lb-bc2-connections__instructions p { margin: 0; line-height: 1.45; }

.lb-bc2-connections__bank { padding: 24px; border: 2px dashed #dcb9ca; border-radius: 24px; background: #fffafc; transition: border-color .2s ease, background .2s ease; }
.lb-bc2-connections__bank.is-missing { border-color: #e59524; background: #fff9e9; }
.lb-bc2-connections__bank > header { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 16px; }
.lb-bc2-connections__bank > header span { color: #a33f70; font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.lb-bc2-connections__bank > header h2 { margin: 2px 0 0; color: #49243b; font-size: 23px; }
.lb-bc2-connections__bank > header b { padding: 8px 12px; border-radius: 999px; color: #8d315e; background: #f6e5ed; font-size: 12px; }
.lb-bc2-connections__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

.lb-bc2-connection-card {
  position: relative;
  display: grid;
  gap: 5px;
  min-width: 0;
  min-height: 132px;
  padding: 17px 16px;
  border: 1px solid #e5d5dd;
  border-radius: 17px;
  color: #48243a;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: grab;
  box-shadow: 0 8px 20px rgba(74, 30, 56, .06);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.lb-bc2-connection-card:hover { transform: translateY(-2px); border-color: #bc6b91; box-shadow: 0 12px 24px rgba(74, 30, 56, .1); }
.lb-bc2-connection-card:focus-visible { outline: 3px solid rgba(181, 68, 120, .22); outline-offset: 2px; }
.lb-bc2-connection-card.is-selected { color: #fff; border-color: #8d315e; background: linear-gradient(145deg, #7c204e, #b9487b); box-shadow: 0 13px 26px rgba(125, 32, 79, .24); }
.lb-bc2-connection-card.is-dragging { opacity: .45; }
.lb-bc2-connection-card.is-correct { border-color: #33b575; background: #f2fff8; }
.lb-bc2-connection-card.is-incorrect { border-color: #e56760; background: #fff5f4; }
.lb-bc2-connection-card > span { position: absolute; top: 12px; right: 13px; color: #ccb5c1; font-size: 12px; font-weight: 900; }
.lb-bc2-connection-card strong { padding-right: 22px; font-size: 16px; line-height: 1.3; }
.lb-bc2-connection-card small { color: #7c6071; font-size: 11px; line-height: 1.45; }
.lb-bc2-connection-card em { align-self: end; margin-top: 5px; color: #a42e28; font-size: 10px; font-style: normal; font-weight: 850; }
.lb-bc2-connection-card.is-correct em { color: #11804c; }
.lb-bc2-connection-card.is-selected small,
.lb-bc2-connection-card.is-selected > span { color: #f1dce7; }

.lb-bc2-connections__empty { margin: 0; padding: 24px; color: #148253; text-align: center; font-weight: 800; }
.lb-bc2-connections__empty i { margin-right: 7px; }
.lb-bc2-connections__destinations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-top: 18px; }
.lb-bc2-connection-zone { min-height: 205px; padding: 18px; border: 2px solid #eadce4; border-radius: 22px; background: #fff; transition: border-color .18s ease, background .18s ease, transform .18s ease; cursor: pointer; }
.lb-bc2-connection-zone:hover { border-color: #c57a9c; }
.lb-bc2-connection-zone.is-drag-over { border-color: #8d315e; background: #fff3f8; transform: scale(1.015); }
.lb-bc2-connection-zone > header { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 11px; align-items: center; }
.lb-bc2-connection-zone > header i { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: #8d315e; background: #fae8f0; }
.lb-bc2-connection-zone > header strong,
.lb-bc2-connection-zone > header small { display: block; }
.lb-bc2-connection-zone > header strong { color: #48243a; font-size: 16px; }
.lb-bc2-connection-zone > header small { margin-top: 2px; color: #8a7080; font-size: 10px; line-height: 1.3; }
.lb-bc2-connection-zone > header b { display: grid; min-width: 27px; height: 27px; place-items: center; border-radius: 999px; color: #fff; background: #a84070; font-size: 11px; }
.lb-bc2-connection-zone__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 13px; }
.lb-bc2-connection-zone__cards .lb-bc2-connection-card { min-height: 112px; padding: 14px; }
.lb-bc2-connection-zone__cards .lb-bc2-connection-card small { display: none; }
.lb-bc2-connection-zone > p { margin: 28px 0 6px; color: #b59aa8; font-size: 12px; font-weight: 750; text-align: center; }
.lb-bc2-connection-zone__place { width: 100%; margin-top: 9px; padding: 9px 12px; border: 1px solid #dfcad4; border-radius: 11px; color: #82305a; background: #fff8fb; font: inherit; font-size: 11px; font-weight: 850; cursor: pointer; }
.lb-bc2-connection-zone__place:hover,
.lb-bc2-connection-zone__place:focus-visible { border-color: #9b3b68; outline: none; background: #fbeaf2; }

.lb-bc2-connections__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 20px; padding: 20px; border-radius: 20px; background: #f8f2f5; }
.lb-bc2-connections__actions [data-connections-message] { flex: 1 1 100%; min-height: 24px; color: #705064; font-weight: 750; }
.lb-bc2-connections__actions [data-connections-message].is-success { color: #087443; }
.lb-bc2-connections__actions [data-connections-message].is-warning { color: #9c5b0d; }
.lb-bc2-connections__actions [data-connections-message].is-error { color: #b62d2d; }
.lb-bc2-connections__actions .is-loading { opacity: .65; cursor: wait; }
.lb-bc2-connections__map-note { display: grid; grid-template-columns: 50px 1fr; gap: 15px; align-items: center; margin-top: 22px; padding: 22px 24px; border: 1px solid #d8e7df; border-radius: 20px; background: #f2fff8; }
.lb-bc2-connections__map-note i { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 15px; color: #fff; background: #16875a; }
.lb-bc2-connections__map-note strong { color: #285d49; }
.lb-bc2-connections__map-note p { margin: 3px 0 0; color: #527364; }
.lb-bc2-interactive-invite.is-connections .lb-bc2-interactive-invite__icon { background: linear-gradient(145deg, #8b355f, #df7ca6); }
.lb-bc2-map-node.is-previewing { border-color: var(--lb-primary); box-shadow: 0 8px 20px rgba(var(--lb-primary-rgb), .12); }

@media (max-width: 1000px) {
  .lb-bc2-connections__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lb-bc2-connections__destinations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .lb-bc2-connections { width: min(100% - 20px, 680px); margin-top: 16px; }
  .lb-bc2-connections__hero { grid-template-columns: 1fr; padding: 27px 22px; }
  .lb-bc2-connections__hero-mark { display: none; }
  .lb-bc2-connections__hero h1 { font-size: 40px; }
  .lb-bc2-connections__hero p { font-size: 15px; }
  .lb-bc2-connections__status { grid-template-columns: 1fr; gap: 10px; }
  .lb-bc2-connections__status p { text-align: left; }
  .lb-bc2-connections__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lb-bc2-connections__destinations { grid-template-columns: 1fr; }
  .lb-bc2-connection-zone { min-height: 150px; }
}

@media (max-width: 480px) {
  .lb-bc2-connections__instructions { align-items: flex-start; }
  .lb-bc2-connections__bank { padding: 18px; }
  .lb-bc2-connections__bank > header { align-items: flex-start; }
  .lb-bc2-connections__cards,
  .lb-bc2-connection-zone__cards { grid-template-columns: 1fr; }
  .lb-bc2-connection-card { min-height: 112px; }
  .lb-bc2-connections__actions .lb-btn { width: 100%; justify-content: center; }
  .lb-bc2-connections__map-note { grid-template-columns: 1fr; }
}

/* BC2 · El triángulo del significado */
.lb-bc2-triangle {
  width: min(1240px, calc(100% - 32px));
  margin: 28px auto 72px;
  color: #35142b;
}

.lb-bc2-triangle__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 34px;
  align-items: center;
  padding: 38px 42px;
  border: 1px solid #ead8e1;
  border-radius: 28px;
  background: radial-gradient(circle at 84% 22%, rgba(14, 132, 108, .13), transparent 24%), linear-gradient(135deg, #fffaf5, #fff 58%, #eefaf7);
  box-shadow: 0 20px 54px rgba(64, 45, 65, .1);
}
.lb-bc2-triangle__hero h1 { margin: 8px 0 10px; color: #3b1630; font-size: clamp(38px, 5vw, 64px); line-height: 1; }
.lb-bc2-triangle__hero p { max-width: 800px; margin: 0; color: #71516a; font-size: 18px; line-height: 1.6; }
.lb-bc2-triangle__hero-mark { position: relative; min-height: 180px; color: #fff; border-radius: 30px; background: linear-gradient(145deg, #174f50, #16876c); box-shadow: 0 18px 36px rgba(20, 112, 91, .24); }
.lb-bc2-triangle__hero-mark svg { position: absolute; inset: 14px 20px; width: calc(100% - 40px); height: calc(100% - 28px); }
.lb-bc2-triangle__hero-mark path { fill: rgba(255,255,255,.06); stroke: rgba(255,255,255,.56); stroke-width: 3; }
.lb-bc2-triangle__hero-mark > span { position: absolute; z-index: 1; display: grid; width: 43px; height: 43px; place-items: center; border-radius: 50%; color: #176353; background: #fff; box-shadow: 0 7px 16px rgba(0,0,0,.13); }
.lb-bc2-triangle__hero-mark > span:nth-child(1) { top: 18px; left: calc(50% - 21px); }
.lb-bc2-triangle__hero-mark > span:nth-child(2) { bottom: 14px; left: 18px; }
.lb-bc2-triangle__hero-mark > span:nth-child(3) { right: 18px; bottom: 14px; }

.lb-bc2-triangle__status {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) minmax(270px, auto);
  gap: 20px;
  align-items: center;
  margin: 20px 0 14px;
  padding: 18px 24px;
  border: 1px solid #eadce4;
  border-radius: 20px;
  background: #fff;
}
.lb-bc2-triangle__status > div:first-child { display: flex; gap: 9px; align-items: baseline; }
.lb-bc2-triangle__status span { color: #836579; font-size: 13px; font-weight: 850; text-transform: uppercase; }
.lb-bc2-triangle__status strong { color: #137b64; font-size: 25px; }
.lb-bc2-triangle__status p { margin: 0; color: #71516a; font-weight: 700; text-align: right; }
.lb-bc2-triangle__status.is-complete { border-color: #7dd1b1; background: #effff7; }
.lb-bc2-triangle__status .lb-bc2-interactive__bar span { background: linear-gradient(90deg, #16876c, #6bc9aa); }

.lb-bc2-triangle__legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.lb-bc2-triangle__legend article { display: flex; gap: 12px; align-items: center; padding: 15px 17px; border: 1px solid #dce9e4; border-radius: 17px; background: #fff; }
.lb-bc2-triangle__legend i { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: #16775f; background: #e5f8f1; }
.lb-bc2-triangle__legend strong,
.lb-bc2-triangle__legend small { display: block; }
.lb-bc2-triangle__legend strong { color: #31534a; }
.lb-bc2-triangle__legend small { color: #718980; font-size: 11px; }

.lb-bc2-triangle__instructions { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-bottom: 18px; padding: 14px 17px; border-radius: 17px; color: #5b665f; background: #edf9f5; }
.lb-bc2-triangle__instructions > i { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; color: #fff; background: #16876c; }
.lb-bc2-triangle__instructions p { margin: 0; line-height: 1.45; }
.lb-bc2-triangle__instructions b { padding: 8px 12px; border-radius: 999px; color: #176c58; background: #d8f2e8; font-size: 12px; white-space: nowrap; }

.lb-bc2-triangle__cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.lb-bc2-triangle-case { min-width: 0; padding: 22px; border: 1px solid #e1e9e6; border-radius: 25px; background: #fff; box-shadow: 0 12px 30px rgba(33, 79, 66, .06); }
.lb-bc2-triangle-case > header { display: flex; gap: 13px; align-items: center; margin-bottom: 15px; }
.lb-bc2-triangle-case > header > span { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 13px; color: #fff; background: #187a64; font-size: 12px; font-weight: 900; }
.lb-bc2-triangle-case h2 { margin: 0; color: #3e2a38; font-size: 23px; letter-spacing: .05em; }
.lb-bc2-triangle-case > header p { margin: 2px 0 0; color: #7d6976; font-size: 11px; }

.lb-bc2-triangle-case__bank { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-height: 118px; padding: 11px; border: 1px dashed #cbded7; border-radius: 16px; background: #f7fcfa; }
.lb-bc2-triangle-case__bank.is-complete { display: block; min-height: 54px; }
.lb-bc2-triangle-case__bank > p { margin: 6px; color: #16805f; font-size: 12px; font-weight: 850; text-align: center; }

.lb-bc2-triangle-piece { display: grid; align-content: space-between; gap: 7px; min-width: 0; min-height: 94px; padding: 12px; border: 1px solid #dbe7e3; border-radius: 13px; color: #3f4f49; background: #fff; font: inherit; text-align: left; cursor: grab; transition: transform .17s ease, border-color .17s ease, box-shadow .17s ease; }
.lb-bc2-triangle-piece:hover { transform: translateY(-2px); border-color: #63ad98; box-shadow: 0 8px 18px rgba(27, 104, 83, .1); }
.lb-bc2-triangle-piece:focus-visible { outline: 3px solid rgba(24, 135, 108, .2); outline-offset: 2px; }
.lb-bc2-triangle-piece.is-selected { color: #fff; border-color: #146b58; background: linear-gradient(145deg, #14594e, #16876c); box-shadow: 0 10px 22px rgba(20, 107, 88, .24); }
.lb-bc2-triangle-piece.is-dragging { opacity: .45; }
.lb-bc2-triangle-piece.is-correct { border-color: #31ad72; background: #f0fff7; }
.lb-bc2-triangle-piece.is-incorrect { border-color: #e56b64; background: #fff5f4; }
.lb-bc2-triangle-piece span { font-size: 10px; line-height: 1.45; }
.lb-bc2-triangle-piece em { color: #aa332e; font-size: 9px; font-style: normal; font-weight: 900; text-transform: uppercase; }
.lb-bc2-triangle-piece.is-correct em { color: #11804c; }

.lb-bc2-triangle-case__board { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; min-height: 325px; margin-top: 15px; padding: 20px; }
.lb-bc2-triangle-case__board > svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lb-bc2-triangle-case__board > svg path { fill: rgba(22, 135, 108, .035); stroke: rgba(22, 135, 108, .22); stroke-width: 3; stroke-dasharray: 8 7; }
.lb-bc2-triangle-zone { position: relative; z-index: 1; min-width: 0; min-height: 135px; padding: 13px; border: 2px solid #dbe9e4; border-radius: 17px; background: rgba(255,255,255,.95); transition: border-color .17s ease, background .17s ease, transform .17s ease; }
.lb-bc2-triangle-zone.is-referente { grid-column: 1 / -1; width: calc(50% - 7px); justify-self: center; }
.lb-bc2-triangle-zone.is-drag-over { border-color: #16876c; background: #effcf7; transform: scale(1.018); }
.lb-bc2-triangle-zone > header { display: flex; gap: 8px; align-items: center; }
.lb-bc2-triangle-zone > header i { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border-radius: 9px; color: #17715e; background: #e4f6ef; font-size: 12px; }
.lb-bc2-triangle-zone > header strong,
.lb-bc2-triangle-zone > header small { display: block; }
.lb-bc2-triangle-zone > header strong { color: #36584f; font-size: 12px; }
.lb-bc2-triangle-zone > header small { color: #82958e; font-size: 9px; }
.lb-bc2-triangle-zone [data-zone-piece] { margin-top: 8px; }
.lb-bc2-triangle-zone .lb-bc2-triangle-piece { min-height: 76px; padding: 9px; }
.lb-bc2-triangle-zone .lb-bc2-triangle-piece span { font-size: 9px; }
.lb-bc2-triangle-zone > button { width: 100%; margin-top: 8px; padding: 7px 9px; border: 1px solid #cfe0da; border-radius: 9px; color: #216f5d; background: #f5fcf9; font: inherit; font-size: 9px; font-weight: 850; cursor: pointer; }
.lb-bc2-triangle-zone > button:hover,
.lb-bc2-triangle-zone > button:focus-visible { border-color: #16876c; outline: none; background: #e8f8f2; }

.lb-bc2-triangle__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 21px; padding: 20px; border-radius: 20px; background: #eff8f5; }
.lb-bc2-triangle__actions [data-triangle-message] { flex: 1 1 100%; min-height: 24px; color: #557066; font-weight: 750; }
.lb-bc2-triangle__actions [data-triangle-message].is-success { color: #087443; }
.lb-bc2-triangle__actions [data-triangle-message].is-warning { color: #9c5b0d; }
.lb-bc2-triangle__actions [data-triangle-message].is-error { color: #b62d2d; }
.lb-bc2-triangle__actions .is-loading { opacity: .65; cursor: wait; }

.lb-bc2-triangle__reward { display: none; grid-template-columns: 58px 1fr; gap: 17px; align-items: center; margin-top: 22px; padding: 25px 28px; overflow: hidden; border: 1px solid #e2c678; border-radius: 22px; color: #58400a; background: radial-gradient(circle at 90% 15%, rgba(255, 210, 76, .34), transparent 30%), #fff9e7; box-shadow: 0 16px 34px rgba(126, 91, 16, .11); }
.lb-bc2-triangle__reward.is-visible { display: grid; animation: lb-bc2-reward-in .55s ease both; }
.lb-bc2-triangle__reward > i { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 18px; color: #fff; background: linear-gradient(145deg, #d99b12, #f0c449); font-size: 25px; }
.lb-bc2-triangle__reward span,
.lb-bc2-triangle__reward strong { display: block; }
.lb-bc2-triangle__reward span { color: #a06d08; font-size: 11px; font-weight: 900; letter-spacing: .1em; }
.lb-bc2-triangle__reward strong { margin-top: 3px; font-size: 20px; }
.lb-bc2-triangle__reward p { margin: 3px 0 0; }
.lb-bc2-interactive-invite.is-triangle .lb-bc2-interactive-invite__icon { background: linear-gradient(145deg, #176052, #1d9a77); }

.lb-bc2-map-complete { display: grid; grid-template-columns: 54px 1fr; gap: 15px; align-items: center; margin-top: 18px; padding: 20px; border: 1px solid #e2c678; border-radius: 18px; color: #5f470e; background: #fff9e7; }
.lb-bc2-map-complete > i { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 16px; color: #fff; background: #dca11c; font-size: 22px; }
.lb-bc2-map-complete span,
.lb-bc2-map-complete strong { display: block; }
.lb-bc2-map-complete span { color: #a6760d; font-size: 10px; font-weight: 950; letter-spacing: .12em; }
.lb-bc2-map-complete strong { font-size: 17px; }
.lb-bc2-map-complete p { margin: 3px 0 0; }
.lb-bc2-sense-map.is-complete { border-color: #e1c56f; box-shadow: 0 18px 44px rgba(157, 115, 21, .11); }

@keyframes lb-bc2-reward-in {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 1000px) {
  .lb-bc2-triangle__cases { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .lb-bc2-triangle { width: min(100% - 20px, 680px); margin-top: 16px; }
  .lb-bc2-triangle__hero { grid-template-columns: 1fr; padding: 27px 22px; }
  .lb-bc2-triangle__hero-mark { display: none; }
  .lb-bc2-triangle__hero h1 { font-size: 39px; }
  .lb-bc2-triangle__hero p { font-size: 15px; }
  .lb-bc2-triangle__status { grid-template-columns: 1fr; gap: 10px; }
  .lb-bc2-triangle__status p { text-align: left; }
  .lb-bc2-triangle__instructions { grid-template-columns: 38px 1fr; }
  .lb-bc2-triangle__instructions b { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 520px) {
  .lb-bc2-triangle__legend { grid-template-columns: 1fr; }
  .lb-bc2-triangle-case { padding: 17px; }
  .lb-bc2-triangle-case__bank { grid-template-columns: 1fr; }
  .lb-bc2-triangle-case__board { grid-template-columns: 1fr; min-height: 0; padding: 0; }
  .lb-bc2-triangle-case__board > svg { display: none; }
  .lb-bc2-triangle-zone.is-referente { grid-column: 1; width: 100%; }
  .lb-bc2-triangle__actions .lb-btn { width: 100%; justify-content: center; }
  .lb-bc2-triangle__reward,
  .lb-bc2-map-complete { grid-template-columns: 1fr; }
}

.lb-shell,
.lb-shell * {
  box-sizing: border-box;
}

/* BC2 · Test de Semántica */
.lb-bc2-test{max-width:1180px;margin:0 auto;padding:34px 24px 72px;color:#24173f}
.lb-bc2-test__hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:34px;align-items:center;overflow:hidden;margin-bottom:24px;padding:42px;border:1px solid #ead8df;border-radius:30px;background:radial-gradient(circle at 85% 15%,rgba(169,38,91,.15),transparent 34%),linear-gradient(135deg,#fffaf3,#fff 58%,#f7edf2)}
.lb-bc2-test__hero:after{content:"";position:absolute;right:128px;bottom:-80px;width:260px;height:260px;border:1px solid rgba(169,38,91,.12);border-radius:50%}
.lb-bc2-test__hero>div:first-child{position:relative;z-index:1}
.lb-bc2-test__hero>div:first-child>span,.lb-bc2-test-card__intro>span{display:block;margin:18px 0 7px;color:#a9265b;font-size:12px;font-weight:900;letter-spacing:.12em}
.lb-bc2-test__hero h1{margin:0;color:#20113c;font-size:clamp(36px,5vw,64px);line-height:1}
.lb-bc2-test__hero p{max-width:720px;margin:18px 0 0;color:#665774;font-size:18px;line-height:1.6}
.lb-bc2-test__mark{position:relative;z-index:1;display:grid;place-items:center;align-content:center;width:160px;height:160px;border:1px solid #e3c6d1;border-radius:50%;background:#fff;box-shadow:0 18px 45px rgba(107,28,63,.12)}
.lb-bc2-test__mark i{color:#a9265b;font-size:28px}.lb-bc2-test__mark strong{margin-top:4px;color:#281343;font-size:44px;line-height:1}.lb-bc2-test__mark small{color:#78657e;font-weight:800}
.lb-bc2-test-card{padding:30px;border:1px solid #e4dbe8;border-radius:26px;background:#fff;box-shadow:0 18px 55px rgba(43,24,65,.08)}
.lb-bc2-test-card__intro h2{margin:0;color:#24113e;font-size:32px}.lb-bc2-test-card__intro p{margin:8px 0 0;color:#6d6176;font-size:16px}
.lb-bc2-test-card__best{display:flex;gap:10px;align-items:center;margin-top:16px;color:#7a2851}.lb-bc2-test-card__best small{color:#7e7281}
.lb-bc2-test-card__facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:26px 0}
.lb-bc2-test-card__facts>div{display:grid;gap:3px;padding:18px;border:1px solid #eadde5;border-radius:16px;background:#fffafc;text-align:center}.lb-bc2-test-card__facts strong{color:#a9265b;font-size:28px}.lb-bc2-test-card__facts span{color:#746878;font-size:12px;font-weight:800}
.lb-bc2-test-card__path{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:18px;align-items:center;padding:22px;border-radius:20px;background:#f7f3f8}
.lb-bc2-test-card__path>div{display:grid;gap:5px}.lb-bc2-test-card__path small{color:#8b7d8f;font-size:10px;font-weight:900;letter-spacing:.09em}.lb-bc2-test-card__path strong{color:#332044}.lb-bc2-test-card__path span{color:#786b7b;font-size:12px}.lb-bc2-test-card__path em{color:#118052;font-size:12px;font-style:normal;font-weight:900}.lb-bc2-test-card__path>i{color:#b596a8}.lb-bc2-test-card__path .is-reward strong{color:#9d1e53}
.lb-bc2-test-card__topics{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.lb-bc2-test-card__topics span{padding:7px 11px;border:1px solid #e8d8e1;border-radius:999px;background:#fff;color:#674e65;font-size:12px;font-weight:800}
.lb-bc2-test-card__actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.lb-bc2-test-card__actions small{color:#776b7a}
.lb-bc2-test__note{display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding:16px 18px;border:1px solid #e4dbe8;border-radius:16px;background:#faf8fb;color:#675a6c}.lb-bc2-test__note i{margin-top:3px;color:#a9265b}.lb-bc2-test__note p{margin:0}
.lb-bc2-test-invite{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:center;margin-top:22px;padding:26px;border:1px solid #dfc7d1;border-radius:24px;background:linear-gradient(135deg,#fffaf4,#fff,#f8edf2)}
.lb-bc2-test-invite__seal{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:#a9265b;color:#fff;box-shadow:0 12px 28px rgba(169,38,91,.2)}.lb-bc2-test-invite__seal i{font-size:24px}.lb-bc2-test-invite__seal span{font-size:13px;font-weight:900}.lb-bc2-test-invite>div:nth-child(2)>span{color:#a9265b;font-size:11px;font-weight:900;letter-spacing:.11em}.lb-bc2-test-invite h2{margin:4px 0;color:#26143d}.lb-bc2-test-invite p{margin:0;color:#6f6175;line-height:1.5}
@media(max-width:820px){.lb-bc2-test__hero{grid-template-columns:1fr;padding:30px}.lb-bc2-test__mark{width:120px;height:120px}.lb-bc2-test-card__facts{grid-template-columns:repeat(2,minmax(0,1fr))}.lb-bc2-test-invite{grid-template-columns:auto minmax(0,1fr)}.lb-bc2-test-invite>a{grid-column:1/-1;width:100%}}
@media(max-width:560px){.lb-bc2-test{padding:20px 12px 54px}.lb-bc2-test__hero,.lb-bc2-test-card{padding:22px;border-radius:20px}.lb-bc2-test__hero p{font-size:16px}.lb-bc2-test-card__facts{gap:8px}.lb-bc2-test-card__facts>div{padding:14px 8px}.lb-bc2-test-card__path{grid-template-columns:1fr}.lb-bc2-test-card__path>i{transform:rotate(90deg);justify-self:center}.lb-bc2-test-card__actions .lb-btn{width:100%}.lb-bc2-test-invite{grid-template-columns:1fr;padding:22px}.lb-bc2-test-invite__seal{width:68px;height:68px}}

.lb-shell {
  min-height: 100vh;
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
  background: #fbfcff;
  color: var(--lb-ink);
  font-family: "Poppins", Arial, Helvetica, sans-serif;
  padding: 12px 20px 18px;
}

.lb-shell a {
  color: inherit;
  text-decoration: none;
}

.lb-header {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-bottom: 1px solid var(--lb-line);
}

.lb-collection-test-badges{display:grid;gap:16px;margin-top:24px}.lb-collection-test-badges>header h2{margin:4px 0;color:#16123f}.lb-collection-test-badges>header p{margin:0;color:#69627b}.lb-collection-test-badges>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.lb-test-badge-card h3{margin:7px 0;color:#22194f}.lb-test-badge-card:not(.is-locked) .lb-collection-badge{background:linear-gradient(145deg,#fff4c4,#d99c1d);color:#362400}.lb-test-badge-card.is-locked{filter:none;opacity:.68}@media(max-width:760px){.lb-collection-test-badges>div{grid-template-columns:1fr}}

/* BM8 tests by level */
.lb-tests{display:grid;gap:18px;max-width:1240px;margin:0 auto;padding:24px 20px 48px}.lb-tests-hero{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:30px;background:linear-gradient(135deg,#fff 0%,#f5f1ff 100%)}.lb-tests-eyebrow{display:block;margin-bottom:7px;color:#6638ed;font-size:12px;font-weight:900;letter-spacing:.1em}.lb-tests-hero h2{margin:0 0 8px;color:#17143b;font-size:clamp(28px,4vw,42px)}.lb-tests-hero p{max-width:720px;margin:0;color:#625f7b;line-height:1.55}.lb-tests-summary{display:grid;min-width:150px;padding:18px;text-align:center;border:1px solid #ddd4ff;border-radius:18px;background:#fff;box-shadow:0 10px 25px rgba(65,35,135,.08)}.lb-tests-summary strong{color:#5722df;font-size:38px;line-height:1}.lb-tests-summary span{margin-top:6px;color:#68617e;font-size:13px}.lb-tests-chapter{padding:26px}.lb-tests-chapter>header{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:20px}.lb-tests-chapter>header span{color:#6537ea;font-size:13px;font-weight:900}.lb-tests-chapter>header h3{margin:3px 0 0;color:#17143b;font-size:25px}.lb-tests-chapter>header small{max-width:460px;color:#777188;line-height:1.45;text-align:right}.lb-tests-levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.lb-test-level{display:flex;flex-direction:column;min-height:350px;padding:20px;border:1px solid #dfdce9;border-radius:18px;background:#fff}.lb-test-level.is-approved{border-color:#9ed9b9;background:linear-gradient(180deg,#f1fbf6,#fff)}.lb-test-level.is-realized{border-color:#d3c1ff}.lb-test-level.is-upcoming,.lb-test-level.is-locked{background:#f8f7fb}.lb-test-level-top{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start}.lb-test-number{display:grid;width:42px;height:42px;place-items:center;border-radius:13px;background:#5d27e7;color:#fff;font-size:20px;font-weight:900}.lb-test-level-top small{color:#78718c;font-size:10px;font-weight:900;letter-spacing:.06em}.lb-test-level-top h4{margin:4px 0 0;color:#1c193e;font-size:18px}.lb-test-level-top>b{padding:6px 8px;border-radius:999px;background:#ece8fb;color:#625a78;font-size:11px}.lb-test-level.is-approved .lb-test-level-top>b{background:#d9f4e5;color:#16623e}.lb-test-threshold{display:flex;align-items:baseline;gap:8px;margin:24px 0 10px}.lb-test-threshold strong{color:#251b53;font-size:30px}.lb-test-threshold span{color:#6e6880;font-size:13px}.lb-test-level ul{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px;padding:0;list-style:none}.lb-test-level li{padding:6px 9px;border-radius:8px;background:#f1eff8;color:#5f5970;font-size:12px}.lb-test-level>p{color:#676176;line-height:1.45}.lb-test-history{margin:2px 0 0!important;color:#4e3f80!important;font-size:13px}.lb-test-level .lb-btn,.lb-test-unavailable{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:auto}.lb-test-unavailable{border:1px solid #ddd9e8;border-radius:11px;background:#eeecf3;color:#7b7588;font-weight:800}.lb-test-required{display:block;margin-top:11px;color:#6f6683}.lb-tests-note,.lb-tests-empty{display:flex;align-items:center;gap:14px;padding:18px 22px}.lb-tests-note i,.lb-tests-empty>i{color:#6030e5;font-size:24px}.lb-tests-note p,.lb-tests-empty p{margin:0;color:#625d72}.lb-tests-empty h3{margin:0 0 4px;color:#211c45}
.lb-test-practice-progress{display:grid;gap:7px;margin:2px 0 16px}.lb-test-practice-progress>div{display:flex;align-items:baseline;justify-content:space-between;gap:10px;color:#625d72;font-size:12px}.lb-test-practice-progress strong{color:#3f2a85;font-size:15px}.lb-test-practice-progress i{height:7px;overflow:hidden;border-radius:999px;background:#e8e3f7}.lb-test-practice-progress b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#6030e5,#a879ff)}
.lb-test-rules{display:grid;gap:9px;margin:2px 0 14px}.lb-test-rule{display:grid;gap:4px;padding:11px 12px;border:1px solid #e5e0f2;border-radius:12px;background:#faf9fd}.lb-test-rule small{color:#746d86;font-size:9px;font-weight:900;letter-spacing:.08em}.lb-test-rule strong{color:#31275c;font-size:12px;line-height:1.4}.lb-test-rule span{color:#6c647d;font-size:11px}.lb-test-rule .is-met{color:#14754a;font-weight:800}.lb-test-reward{border-color:#eadba9;background:#fffaf0}.lb-test-reward span{color:#7a5b13}.lb-test-reward i{color:#c99011}
.lb-rendidor-progress{display:grid;grid-template-columns:70px minmax(0,1fr) auto;align-items:center;gap:16px;margin:-2px 0 20px;padding:15px 18px;border:1px solid #ded8f5;border-radius:16px;background:linear-gradient(135deg,#f7f4ff,#fff)}.lb-rendidor-progress>img{width:70px;height:70px;object-fit:contain;filter:grayscale(1);opacity:.58}.lb-rendidor-progress>div{display:grid;gap:3px}.lb-rendidor-progress>div>span{color:#6738e8;font-size:10px;font-weight:900;letter-spacing:.08em}.lb-rendidor-progress>div>strong{color:#21194b;font-size:18px}.lb-rendidor-progress>div>small{color:#6e687d;line-height:1.4}.lb-rendidor-progress>b{display:grid;width:62px;height:62px;place-items:center;border-radius:50%;background:#ece7ff;color:#5b26df;font-size:20px}.lb-rendidor-progress.is-earned{border-color:#e4c563;background:linear-gradient(135deg,#fff8da,#fff)}.lb-rendidor-progress.is-earned>img{filter:none;opacity:1}.lb-rendidor-progress.is-earned>b{background:#ffe9a3;color:#7f5900}
.lb-rendidor-progress.is-elite{border-color:#edc64e;background:radial-gradient(circle at 10% 20%,#fff0a4 0,transparent 28%),linear-gradient(120deg,#fff8d5,#fff,#f3ecff);box-shadow:0 11px 30px rgba(157,105,0,.15)}.lb-rendidor-progress.is-elite>img{animation:lb-elite-badge-glow 2.4s ease-in-out infinite}.lb-rendidor-progress.is-elite>div>span{color:#a56e00}.lb-rendidor-progress.is-elite>b{background:#f2c94c;color:#513500}
@media(max-width:900px){.lb-tests-levels{grid-template-columns:1fr}.lb-test-level{min-height:0}.lb-tests-chapter>header{align-items:flex-start;flex-direction:column}.lb-tests-chapter>header small{text-align:left}}
@media(max-width:640px){.lb-tests{padding:14px 12px 36px}.lb-tests-hero{align-items:stretch;flex-direction:column;padding:22px}.lb-tests-summary{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0}.lb-tests-summary strong{font-size:28px}.lb-tests-summary span{margin:0}.lb-tests-chapter{padding:18px}.lb-test-level{padding:16px}.lb-test-level-top{grid-template-columns:auto 1fr}.lb-test-level-top>b{grid-column:2;justify-self:start}.lb-rendidor-progress{grid-template-columns:54px minmax(0,1fr);padding:14px}.lb-rendidor-progress>img{width:54px;height:54px}.lb-rendidor-progress>b{grid-column:1/-1;width:auto;height:auto;padding:8px;border-radius:10px}.lb-tests-note{align-items:flex-start}}

/* BM00 puzzle ------------------------------------------------------------ */
.lb-problems-chapter-switcher {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid #ded7f7;
  border-radius: 16px;
  background: linear-gradient(120deg, #fff 0%, #f7f4ff 100%);
  box-shadow: 0 9px 25px rgba(48, 30, 105, .07);
}

.lb-problems-chapter-switcher-copy {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 230px;
}

.lb-problems-chapter-switcher-copy > span {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 13px;
  background: #ece7ff;
  color: #5b28df;
}

.lb-problems-chapter-switcher-copy > div {
  display: grid;
  gap: 3px;
}

.lb-problems-chapter-switcher-copy strong {
  color: #14275c;
  font-size: 14px;
}

.lb-problems-chapter-switcher-copy small {
  color: #71809e;
  font-size: 12px;
}

.lb-problems-chapter-switcher > nav {
  display: flex;
  flex: 1;
  gap: 10px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.lb-problems-chapter-option {
  display: grid;
  grid-template-columns: auto minmax(150px, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 260px;
  padding: 11px 13px;
  border: 1px solid #e1dded;
  border-radius: 13px;
  background: #fff;
  color: #152557;
}

.lb-problems-chapter-option:hover,
.lb-problems-chapter-option.is-active {
  border-color: #7950ed;
  background: linear-gradient(120deg, #f2edff, #fff);
  box-shadow: 0 8px 18px rgba(83, 45, 192, .1);
}

.lb-problems-chapter-option > span {
  padding: 7px 9px;
  border-radius: 9px;
  background: #eee9ff;
  color: #5c28e6;
  font-size: 12px;
  font-weight: 900;
}

.lb-problems-chapter-option > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.lb-problems-chapter-option strong,
.lb-problems-chapter-option small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-problems-chapter-option strong {
  font-size: 14px;
}

.lb-problems-chapter-option small {
  color: #71809e;
  font-size: 11px;
}

.lb-problems-chapter-option > i {
  color: #8f83ad;
  font-size: 11px;
}

.lb-problems-switcher {
  display: flex;
  gap: 26px;
  margin-top: 12px;
  padding: 0 18px;
  border-bottom: 1px solid var(--lb-line);
}

.lb-problems-switcher a {
  position: relative;
  padding: 14px 8px 13px;
  color: #71809e;
  font-size: 16px;
  font-weight: 850;
}

.lb-problems-switcher a:hover,
.lb-problems-switcher a.is-active {
  color: var(--lb-primary);
}

.lb-problems-switcher a.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, #a855f7, var(--lb-primary));
}

.lb-problems-switcher .lb-problems-collection-link {
  margin-left: auto;
  color: #5130a8;
}

.lb-problems-switcher .lb-problems-tests-link {
  color: #5130a8;
}

.lb-bm00-continue {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 14px;
  padding: 13px 16px;
  border: 1px solid #ded6f7;
  border-radius: 14px;
  background: linear-gradient(105deg, #fff, #f6f1ff);
  box-shadow: 0 8px 22px rgba(53, 31, 116, .07);
}

.lb-bm00-continue > div {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #5f6d89;
  font-size: 14px;
  font-weight: 700;
}

.lb-bm00-continue > div i {
  color: #7c3cff;
  font-size: 18px;
}

.lb-bm00-continue .lb-btn {
  min-width: 230px;
  justify-content: center;
}

.lb-problems-view-choice {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: clamp(26px, 5vw, 58px);
  border: 1px solid var(--lb-line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(139, 92, 246, .12), transparent 42%),
    #fff;
  box-shadow: var(--lb-shadow);
  text-align: center;
}

.lb-problems-view-choice h1 {
  margin: 0;
  color: #0a123e;
  font-size: clamp(27px, 4vw, 42px);
  line-height: 1.08;
}

.lb-problems-view-choice > p {
  margin: 0 0 20px;
  color: #657391;
  font-size: 16px;
}

.lb-problems-view-choice > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: min(100%, 820px);
}

.lb-problems-view-choice > div > a {
  display: grid;
  justify-items: start;
  gap: 10px;
  min-height: 230px;
  padding: 28px;
  border: 1px solid #ddd5f4;
  border-radius: 18px;
  background: linear-gradient(145deg, #fff, #f8f4ff);
  box-shadow: 0 12px 32px rgba(34, 22, 80, .08);
  color: #17204b;
  text-align: left;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.lb-problems-view-choice > div > a:hover,
.lb-problems-view-choice > div > a:focus-visible {
  transform: translateY(-3px);
  border-color: #8b5cf6;
  box-shadow: 0 18px 38px rgba(76, 36, 170, .16);
  outline: 3px solid rgba(139, 92, 246, .16);
}

.lb-problems-view-choice > div > a > i {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: linear-gradient(145deg, #6d28ff, #9b55f5);
  box-shadow: 0 10px 24px rgba(91, 33, 210, .24);
  color: #fff;
  font-size: 22px;
}

.lb-problems-view-choice > div > a:nth-child(2) > i {
  background: linear-gradient(145deg, #172554, #3856a8);
  box-shadow: 0 10px 24px rgba(23, 37, 84, .2);
}

.lb-problems-view-choice strong {
  font-size: 22px;
  line-height: 1.15;
}

.lb-problems-view-choice span {
  color: #63708d;
  font-size: 15px;
  line-height: 1.45;
}

.lb-problems-view-choice em {
  align-self: end;
  color: var(--lb-primary);
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
}

.lb-puzzle {
  display: grid;
  gap: 18px;
  margin-top: 18px;
  padding: 20px;
  border: 1px solid var(--lb-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--lb-shadow);
}

.lb-puzzle-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.lb-puzzle-kicker {
  display: block;
  margin-bottom: 5px;
  color: #66738f;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.lb-puzzle-head h1 {
  margin: 0 0 4px;
  color: #0a123e;
  font-size: clamp(25px, 2.5vw, 36px);
  line-height: 1.06;
}

.lb-puzzle-head p {
  margin: 0;
  color: #607091;
  font-size: 18px;
}

.lb-puzzle-reward {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 17px;
  border: 1px solid #dfd1ff;
  border-radius: 999px;
  background: linear-gradient(90deg, #f7f1ff, #eee7ff);
  color: var(--lb-primary);
  font-size: 14px;
  font-weight: 850;
  white-space: nowrap;
}

.lb-puzzle-reward.is-locked {
  color: #6d42db;
  cursor: default;
}

.lb-puzzle-board {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background-color: #1f145b;
  box-shadow: 0 18px 42px rgba(24, 21, 65, .2);
  touch-action: pan-y;
  user-select: none;
}

.lb-puzzle-stage {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.lb-puzzle-board.is-zoomed {
  cursor: grab;
}

.lb-puzzle-board.is-zoomed:active {
  cursor: grabbing;
}

.lb-puzzle-zoom-controls {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 8;
  display: flex;
  gap: 5px;
  padding: 5px;
  border-radius: 12px;
  background: rgba(13, 8, 45, .82);
  box-shadow: 0 8px 22px rgba(5, 3, 24, .35);
  backdrop-filter: blur(6px);
}

.lb-puzzle-zoom-controls button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 9px;
  background: rgba(255, 255, 255, .96);
  color: #321176;
  cursor: pointer;
}

.lb-puzzle-zoom-controls button:focus-visible {
  outline: 3px solid #ffd54d;
  outline-offset: 2px;
}

.lb-puzzle-zoom-level {
  position: absolute;
  right: 132px;
  bottom: 17px;
  z-index: 8;
  min-width: 54px;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(13, 8, 45, .82);
  color: #fff;
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}

.lb-puzzle-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.lb-puzzle-underlay,
.lb-puzzle-fragment,
.lb-puzzle-piece-cover,
.lb-puzzle-separators {
  pointer-events: none;
}

.lb-puzzle-piece {
  cursor: pointer;
  outline: none;
}

.lb-puzzle-piece-hit {
  fill: transparent;
  stroke: transparent;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
  pointer-events: all;
  transition: fill .16s ease, stroke .16s ease;
}

.lb-puzzle-piece:hover .lb-puzzle-piece-hit,
.lb-puzzle-piece:focus-visible .lb-puzzle-piece-hit {
  fill: rgba(255, 255, 255, .1);
  stroke: #fff;
}

.lb-puzzle-divider,
.lb-puzzle-outer {
  fill: none;
  stroke: rgba(255, 255, 255, .78);
  stroke-width: .85;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.lb-puzzle-outer {
  stroke-width: 1;
}

.lb-puzzle-labels {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(var(--lb-puzzle-columns, 10), minmax(0, 1fr));
  grid-template-rows: repeat(var(--lb-puzzle-rows, 5), minmax(0, 1fr));
  pointer-events: none;
}

.lb-puzzle-label {
  position: relative;
  min-width: 0;
  min-height: 0;
}

.lb-puzzle-label > b {
  position: absolute;
  top: 6px;
  left: 6px;
  display: grid;
  place-items: center;
  min-width: 23px;
  height: 23px;
  padding: 0 5px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 2px 6px rgba(15, 23, 42, .2);
  color: #171f45;
  font-size: 11px;
  font-weight: 950;
}

.lb-puzzle-label.is-pending > b {
  background: rgba(137, 92, 246, .92);
  color: #fff;
}

.lb-puzzle-label > i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: clamp(15px, 1.8vw, 27px);
  text-shadow: 0 3px 10px rgba(12, 6, 39, .45);
}

.lb-puzzle-progress {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto auto;
  gap: 18px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--lb-line);
  border-radius: 13px;
  background: linear-gradient(90deg, #fbfcff, #f5f2ff);
}

.lb-puzzle-percent {
  color: #0a123e;
  font-size: 27px;
  font-weight: 950;
}

.lb-puzzle-track-copy {
  min-width: 0;
}

.lb-puzzle-track {
  display: block;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #dfe4ee;
}

.lb-puzzle-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #743cff, #9b55f5);
}

.lb-puzzle-track-copy p {
  margin: 6px 0 0;
  color: #61708d;
  font-size: 13px;
}

.lb-puzzle-next {
  min-width: 210px;
  justify-content: center;
  white-space: nowrap;
}

.lb-puzzle-legend {
  display: flex;
  gap: 15px;
  padding: 12px;
  border-radius: 10px;
  background: #fff;
  color: #596784;
  font-size: 12px;
  white-space: nowrap;
}

.lb-puzzle-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.lb-puzzle-swatch {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 7px;
  background-image: var(--lb-puzzle-image);
  background-position: left bottom;
  background-size: 160px auto;
}

.lb-puzzle-swatch.is-pending {
  background: linear-gradient(145deg, #25145f, #48218f);
  color: #fff;
  font-style: normal;
}

body.lb-puzzle-reward-open {
  overflow: hidden;
}

.lb-piece-reward-layer {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  padding: 22px;
  overflow-y: auto;
  background: rgba(8, 10, 35, .66);
  backdrop-filter: blur(7px);
  opacity: 0;
  transition: opacity .18s ease;
}

.lb-piece-reward-layer.is-visible {
  opacity: 1;
}

.lb-piece-reward-card {
  position: relative;
  width: min(100%, 480px);
  padding: 28px 30px 30px;
  overflow: hidden;
  border: 1px solid rgba(196, 168, 255, .78);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% -10%, rgba(255, 216, 99, .18), transparent 42%),
    linear-gradient(155deg, #fff 0%, #fbf8ff 58%, #f0e9ff 100%);
  box-shadow: 0 28px 90px rgba(8, 7, 35, .48), 0 0 0 1px rgba(255, 255, 255, .55) inset;
  color: #0a123e;
  text-align: center;
  transform: scale(.88) translateY(16px);
  opacity: 0;
}

.lb-piece-reward-layer.is-visible .lb-piece-reward-card {
  animation: lb-piece-reward-pop .58s cubic-bezier(.2, 1.25, .38, 1) forwards;
}

.lb-piece-reward-layer.is-complete .lb-piece-reward-card {
  width: min(100%, 640px);
}

.lb-piece-reward-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #e3d9f8;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: #4b3977;
  cursor: pointer;
}

.lb-piece-reward-close:hover,
.lb-piece-reward-close:focus-visible {
  border-color: #7c3cff;
  color: #5b21d2;
  outline: 3px solid rgba(124, 60, 255, .2);
}

.lb-piece-reward-visual {
  position: relative;
  display: grid;
  place-items: center;
  width: min(78vw, 255px);
  height: min(78vw, 255px);
  margin: 0 auto 12px;
}

.lb-piece-reward-svg {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 16px 22px rgba(35, 18, 87, .28));
  transform: scale(.78) rotate(-2deg);
  animation: lb-piece-reward-piece .7s .12s cubic-bezier(.16, 1.18, .34, 1) forwards;
}

.lb-piece-reward-outline {
  fill: none;
  stroke: rgba(255, 255, 255, .96);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.lb-piece-reward-sparkle {
  position: absolute;
  z-index: 3;
  top: 13%;
  right: 11%;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff5ba;
  box-shadow: 0 0 0 9px rgba(255, 221, 87, .13), 0 0 34px rgba(255, 205, 40, .72);
  color: #d68c00;
  font-size: 21px;
  opacity: 0;
  animation: lb-piece-reward-flash .7s .28s ease-out forwards;
}

.lb-piece-reward-particles {
  position: absolute;
  inset: 50%;
  z-index: 3;
  pointer-events: none;
}

.lb-piece-reward-particles i {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  opacity: 0;
  animation: lb-piece-reward-particle .82s var(--particle-delay) ease-out forwards;
}

.lb-piece-reward-particles i.is-violet {
  background: #8b5cf6;
  box-shadow: 0 0 8px rgba(139, 92, 246, .75);
}

.lb-piece-reward-particles i.is-gold {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: #f5b922;
  box-shadow: 0 0 8px rgba(245, 185, 34, .78);
}

.lb-piece-reward-card h2 {
  position: relative;
  z-index: 2;
  margin: 0 0 7px;
  color: #111849;
  font-size: clamp(25px, 5vw, 34px);
  line-height: 1.05;
}

.lb-piece-reward-progress {
  position: relative;
  z-index: 2;
  margin: 0 0 22px;
  color: #655482;
  font-size: 17px;
  font-weight: 850;
}

.lb-piece-reward-milestone {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: -8px 0 20px;
  padding: 11px 14px;
  border: 1px solid #efd991;
  border-radius: 12px;
  background: #fff9dc;
  color: #5a3b00;
  font-size: 14px;
}

.lb-piece-reward-milestone i {
  color: #d68c00;
}

.lb-piece-reward-actions {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.lb-piece-reward-actions .lb-btn {
  min-height: 48px;
  justify-content: center;
  border-radius: 12px;
  font-size: 14px;
}

.lb-piece-reward-actions button.lb-btn {
  width: 100%;
  cursor: pointer;
}

/* BM00 collection ------------------------------------------------------- */
.lb-collection {
  display: grid;
  gap: 22px;
  padding: 28px 0 40px;
}

.lb-collection-head,
.lb-collection-share {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.lb-collection-head h1 {
  margin: 0 0 6px;
  font-size: clamp(30px, 4vw, 46px);
}

.lb-collection-head p {
  max-width: 760px;
  margin: 0;
  color: #62708d;
}

.lb-collection-layout {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  align-items: start;
  gap: 22px;
}

.lb-collection-index {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #dfe4f0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(25, 30, 74, .08);
}

.lb-collection-book-mark {
  display: grid;
  min-height: 150px;
  align-content: end;
  padding: 20px;
  border-radius: 15px;
  overflow: hidden;
  background: radial-gradient(circle at 82% 18%, rgba(130, 99, 255, .75), transparent 30%), linear-gradient(150deg, #4318c7, #11195c);
  color: #fff;
}

.lb-collection-book-mark small { font-size: 10px; font-weight: 900; letter-spacing: .12em; opacity: .8; }
.lb-collection-book-mark strong { margin: 4px 0 1px; font-size: 36px; line-height: 1; }
.lb-collection-book-mark span { font-size: 13px; opacity: .82; }
.lb-collection-index-title { display: flex; align-items: center; justify-content: space-between; padding: 4px 3px 0; color: #63708a; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.lb-collection-index-title strong { color: #4e20dc; }
.lb-collection-index > a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; padding: 12px; border: 1px solid #dcd4f4; border-radius: 13px; color: #252052; text-decoration: none; }
.lb-collection-index > a b { color: #5424df; font-size: 12px; }
.lb-collection-index > a span { font-size: 12px; font-weight: 800; line-height: 1.3; }
.lb-collection-index > a i { color: #7049e2; font-size: 10px; }
.lb-collection-index > a.is-active { background: #f3efff; }
.lb-collection-index > p { margin: 2px 4px 4px; color: #778198; font-size: 11px; line-height: 1.45; }
.lb-collection-chapters { min-width: 0; }
.lb-collection-chapter { display: grid; gap: 22px; scroll-margin-top: 18px; }
.lb-collection-chapter-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 22px; border: 1px solid #ded8f1; border-radius: 20px; background: linear-gradient(115deg, #fff, #f5f1ff); }
.lb-collection-chapter-head > div > span { color: #5b2ce0; font-size: 11px; font-weight: 950; letter-spacing: .1em; }
.lb-collection-chapter-head h2 { margin: 4px 0; color: #111944; font-size: clamp(23px, 3vw, 31px); }
.lb-collection-chapter-head p { margin: 0; color: #68748d; }
.lb-collection-chapter-head nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.lb-collection-chapter-head nav a { padding: 8px 11px; border: 1px solid #d9d2ee; border-radius: 999px; background: #fff; color: #4d28c7; font-size: 12px; font-weight: 850; text-decoration: none; }
.lb-collection-rewards { display: grid; gap: 16px; scroll-margin-top: 18px; }
.lb-collection-rewards > header h2 { margin: 4px 0; color: #17133f; font-size: 26px; }
.lb-collection-rewards > header p { margin: 0; color: #68728a; }

.lb-collection-progress {
  display: grid;
  grid-template-columns: minmax(230px, auto) 1fr;
  align-items: center;
  gap: 20px;
  padding: 18px 20px;
  border: 1px solid #dfd8f5;
  border-radius: 16px;
  background: linear-gradient(110deg, #fff, #f6f2ff);
}

.lb-collection-progress > div {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.lb-collection-progress strong {
  color: #4b18f4;
  font-size: 29px;
}

.lb-collection-progress span {
  color: #5e6d89;
  font-weight: 700;
}

.lb-collection-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.lb-collection-card {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 290px;
  padding: 20px;
  border: 1px solid #dfe4f0;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--lb-shadow);
}

.lb-collection-card.is-locked {
  background: #f4f5f9;
  color: #68748c;
}

.lb-collection-card small {
  color: #7a6b9c;
  font-size: 10px;
  overflow-wrap: anywhere;
}

.lb-collection-card h2,
.lb-collection-card p {
  margin: 0;
}

.lb-collection-card h2 {
  font-size: 20px;
}

.lb-collection-card p {
  color: #65728c;
  font-size: 14px;
  line-height: 1.5;
}

.lb-collection-card .is-pending-resource {
  color: #8a5900;
}

.lb-collection-illustration {
  grid-column: span 2;
}

.lb-collection-art {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #24145d;
}

.lb-collection-art img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: contain;
}

.lb-collection-card.is-locked .lb-collection-art img {
  filter: saturate(.15) brightness(.42) blur(2px);
}

.lb-collection-art > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(22, 11, 62, .62);
  color: #fff;
  font-weight: 800;
  text-align: center;
}

.lb-collection-badge,
.lb-collection-sticker-placeholder {
  display: grid;
  place-items: center;
  justify-self: center;
  width: 118px;
  height: 118px;
  margin-bottom: 8px;
  border: 6px solid #f4c94f;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #a980ff, #401399 70%);
  box-shadow: 0 12px 30px rgba(57, 18, 137, .25);
  color: #fff;
  font-size: 42px;
}

.lb-collection-badge b {
  font-size: 12px;
  letter-spacing: .08em;
}

.lb-collection-sticker-placeholder {
  border: 1px dashed #a99abb;
  background: #eeeaf3;
  box-shadow: none;
  color: #83768f;
}

.lb-collection-sticker-preview {
  display: grid;
  place-items: center;
  width: min(100%, 300px);
  aspect-ratio: 1;
  margin: 0 auto 8px;
  overflow: hidden;
  border: 1px solid #e2d9f2;
  border-radius: 18px;
  background-color: #f7f4fb;
  background-image:
    linear-gradient(45deg, #ece7f3 25%, transparent 25%),
    linear-gradient(-45deg, #ece7f3 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ece7f3 75%),
    linear-gradient(-45deg, transparent 75%, #ece7f3 75%);
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  background-size: 20px 20px;
}

.lb-collection-sticker-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lb-collection-sticker-preview > span {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: rgba(48, 31, 82, .88);
  color: #fff;
  font-size: 26px;
}

.lb-collection-static-sticker .lb-btn,
.lb-collection-animated-sticker .lb-btn {
  align-self: end;
  justify-self: stretch;
}

.lb-collection-share {
  padding: 18px 20px;
  border: 1px solid #ded4fa;
  border-radius: 16px;
  background: linear-gradient(110deg, #f8f3ff, #fff9df);
}

.lb-collection-share-preview {
  display: block;
  flex: 0 1 auto;
  width: min(100%, 420px);
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(29, 19, 69, .18);
}

.lb-collection-share-preview img {
  display: block;
  width: 100%;
  height: auto;
}

.lb-collection-share > div {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lb-collection-share > div > i {
  color: #6c28e8;
  font-size: 28px;
}

.lb-collection-share span {
  display: grid;
  color: #65718b;
  font-size: 13px;
}

.lb-collection-share strong {
  color: #17204b;
  font-size: 17px;
}

.lb-collection-next {
  justify-self: end;
}

.lb-special-badges {
  display: grid;
  gap: 16px;
  scroll-margin-top: 18px;
  padding: 22px;
  border: 1px solid #ddd5f5;
  border-radius: 20px;
  background: linear-gradient(145deg, #fff, #f8f5ff);
  box-shadow: var(--lb-shadow);
}

.lb-special-badges > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.lb-special-badges > header h2 { margin: 2px 0 5px; color: #14133c; font-size: 26px; }
.lb-special-badges > header p { margin: 0; color: #68728a; line-height: 1.45; }
.lb-special-badges > header > strong { display: grid; flex: 0 0 72px; width: 72px; height: 72px; place-items: center; border-radius: 18px; background: #ece7ff; color: #5424dc; font-size: 23px; }
.lb-special-badge-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; }
.lb-special-badge { display: grid; justify-items: center; align-content: start; gap: 9px; min-width: 0; padding: 16px 12px; border: 1px solid #e0dcec; border-radius: 16px; background: #fff; text-align: center; }
.lb-special-badge img { display: block; width: min(100%,112px); aspect-ratio: 1; object-fit: contain; }
.lb-special-badge.is-locked img { filter: grayscale(1); opacity: .52; }
.lb-special-badge span,.lb-special-final span { color: #817993; font-size: 9px; font-weight: 950; letter-spacing: .08em; }
.lb-special-badge.is-earned span,.lb-special-final.is-earned span { color: #9a6a00; }
.lb-special-badge h3,.lb-special-final h3 { margin: 2px 0 4px; color: #17133f; font-size: 16px; }
.lb-special-badge p,.lb-special-final p { margin: 0; color: #69728a; font-size: 12px; line-height: 1.45; }
.lb-special-badge.is-earned { border-color: #e4c664; background: linear-gradient(180deg,#fff9dd,#fff); }
.lb-special-badge.is-elite { border-color: #edc64e; background: radial-gradient(circle at 50% 0,#fff0a5 0,transparent 34%),linear-gradient(160deg,#fff9d9,#fff,#f4edff); box-shadow: 0 10px 28px rgba(157,105,0,.16); }
.lb-special-badge.is-elite img,
.lb-achievement-card.is-elite .lb-badge-icon.has-art img { animation: lb-elite-badge-glow 2.4s ease-in-out infinite; }
@keyframes lb-elite-badge-glow { 0%,100% { filter: drop-shadow(0 4px 6px rgba(119,72,0,.24)); transform: scale(1); } 50% { filter: drop-shadow(0 0 16px rgba(255,196,24,.95)); transform: scale(1.045); } }
@media (prefers-reduced-motion: reduce) { .lb-rendidor-progress.is-elite>img,.lb-special-badge.is-elite img,.lb-achievement-card.is-elite .lb-badge-icon.has-art img { animation: none; filter: drop-shadow(0 0 11px rgba(255,196,24,.7)); } }
.lb-special-final { display: grid; grid-template-columns: 92px minmax(0,1fr) auto; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid #d9d2ed; border-radius: 16px; background: #f7f5fb; }
.lb-special-final img { display: block; width: 92px; height: 92px; object-fit: contain; }
.lb-special-final.is-locked img { filter: grayscale(1); opacity: .62; }
.lb-special-final.is-earned { border-color: #e1bc45; background: linear-gradient(120deg,#fff4bf,#fff); }

@media (max-width: 980px) {
  .lb-collection-layout { grid-template-columns: 1fr; }
  .lb-collection-index { position: static; grid-template-columns: 120px minmax(0,1fr); align-items: center; }
  .lb-collection-book-mark { grid-row: span 3; min-height: 132px; }
  .lb-collection-index-title,
  .lb-collection-index > p { margin-inline: 2px; }
  .lb-special-badge-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 640px) {
  .lb-collection-index { grid-template-columns: 88px minmax(0,1fr); padding: 10px; border-radius: 16px; }
  .lb-collection-book-mark { min-height: 112px; padding: 13px; }
  .lb-collection-book-mark strong { font-size: 27px; }
  .lb-collection-index > p { grid-column: 1 / -1; }
  .lb-collection-chapter-head { align-items: stretch; flex-direction: column; padding: 17px; }
  .lb-collection-chapter-head nav { justify-content: flex-start; }
  .lb-special-badges { padding: 16px; }
  .lb-special-badges > header { align-items: flex-start; }
  .lb-special-badges > header > strong { flex-basis: 58px; width: 58px; height: 58px; border-radius: 14px; font-size: 19px; }
  .lb-special-badge-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .lb-special-badge:last-child { grid-column: 1 / -1; }
  .lb-special-final { grid-template-columns: 72px minmax(0,1fr); }
  .lb-special-final img { width: 72px; height: 72px; }
  .lb-special-final .lb-btn { grid-column: 1 / -1; width: 100%; }
}

.lb-piece-reward-full {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 16px 35px rgba(29, 19, 69, .25);
  overflow: hidden;
  transform: scale(.92);
  animation: lb-piece-reward-piece .7s .12s cubic-bezier(.16, 1.18, .34, 1) forwards;
}

.lb-piece-reward-full img {
  display: block;
  width: 100%;
  aspect-ratio: 1731 / 909;
  object-fit: contain;
}

.lb-piece-reward-layer.is-complete .lb-piece-reward-visual {
  width: 100%;
  height: auto;
  margin-top: 18px;
}

.lb-puzzle-piece.is-newly-unlocked .lb-puzzle-piece-hit {
  filter: drop-shadow(0 0 3px rgba(255, 213, 77, .95)) drop-shadow(0 0 9px rgba(255, 183, 0, .75));
  animation: lb-puzzle-piece-highlight 2.2s ease-out;
}

.lb-puzzle-label.is-newly-unlocked > b {
  animation: lb-puzzle-label-highlight 2.2s ease-out;
}

@keyframes lb-piece-reward-pop {
  0% { opacity: 0; transform: scale(.88) translateY(16px); }
  62% { opacity: 1; transform: scale(1.025) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes lb-piece-reward-piece {
  0% { opacity: 0; transform: scale(.78) rotate(-2deg); }
  68% { opacity: 1; transform: scale(1.045) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes lb-piece-reward-flash {
  0% { opacity: 0; transform: scale(.2) rotate(-30deg); }
  42% { opacity: 1; transform: scale(1.18) rotate(7deg); }
  100% { opacity: 0; transform: scale(1.7) rotate(22deg); }
}

@keyframes lb-piece-reward-particle {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--particle-x)), calc(-50% + var(--particle-y))) scale(.1) rotate(160deg); }
}

@keyframes lb-puzzle-piece-highlight {
  0%, 100% { fill: transparent; stroke: transparent; }
  16%, 72% { fill: rgba(255, 213, 73, .2); stroke: #ffd54d; stroke-width: 4; }
  38% { fill: rgba(139, 92, 246, .24); stroke: #fff4ad; stroke-width: 6; }
}

@keyframes lb-puzzle-label-highlight {
  0%, 100% { transform: scale(1); box-shadow: 0 2px 6px rgba(15, 23, 42, .2); }
  24%, 66% { transform: scale(1.32); box-shadow: 0 0 0 6px rgba(255, 213, 73, .28), 0 0 24px rgba(255, 213, 73, .85); }
}

@media (max-width: 980px) {
  .lb-puzzle-head,
  .lb-puzzle-progress {
    grid-template-columns: 1fr;
  }

  .lb-puzzle-head {
    display: grid;
  }

  .lb-puzzle-reward {
    width: fit-content;
    white-space: normal;
  }

  .lb-puzzle-progress {
    gap: 12px;
  }

  .lb-puzzle-next {
    width: 100%;
  }

  .lb-puzzle-legend {
    justify-content: center;
  }

  .lb-collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .lb-problems-chapter-switcher {
    display: grid;
    gap: 12px;
    margin-top: 10px;
    padding: 13px;
  }

  .lb-problems-chapter-switcher-copy {
    min-width: 0;
  }

  .lb-problems-chapter-switcher-copy small {
    display: none;
  }

  .lb-problems-chapter-switcher > nav {
    margin-inline: -2px;
    padding: 2px 2px 7px;
    scroll-snap-type: x proximity;
  }

  .lb-problems-chapter-option {
    grid-template-columns: auto minmax(120px, 1fr);
    min-width: 210px;
    padding: 10px;
    scroll-snap-align: start;
  }

  .lb-problems-chapter-option > i {
    display: none;
  }

  .lb-problems-switcher {
    margin-top: 4px;
    padding-inline: 6px;
  }

  .lb-problems-switcher .lb-problems-collection-link {
    margin-left: 0;
  }

  .lb-bm00-continue,
  .lb-collection-head,
  .lb-collection-share {
    align-items: stretch;
    flex-direction: column;
  }

  .lb-bm00-continue .lb-btn {
    width: 100%;
    min-width: 0;
  }

  .lb-problems-view-choice {
    margin-top: 12px;
    padding: 24px 14px;
  }

  .lb-problems-view-choice > p {
    margin-bottom: 10px;
    font-size: 14px;
  }

  .lb-problems-view-choice > div {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .lb-problems-view-choice > div > a {
    min-height: 0;
    padding: 19px;
  }

  .lb-puzzle {
    gap: 13px;
    margin-top: 12px;
    padding: 12px;
    border-radius: 12px;
  }

  .lb-puzzle-head h1 {
    font-size: 25px;
  }

  .lb-puzzle-head p {
    font-size: 15px;
  }

  .lb-puzzle-label > b {
    top: 2px;
    left: 2px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 4px;
    font-size: 8px;
  }

  .lb-puzzle-label > i {
    font-size: 12px;
  }

  .lb-puzzle-zoom-controls {
    right: 6px;
    bottom: 6px;
  }

  .lb-puzzle-zoom-controls button {
    width: 32px;
    height: 32px;
  }

  .lb-puzzle-zoom-level {
    right: 116px;
    bottom: 11px;
  }

  .lb-puzzle-progress {
    padding: 12px;
  }

  .lb-puzzle-legend {
    flex-wrap: wrap;
    white-space: normal;
  }

  .lb-piece-reward-layer {
    align-items: end;
    padding: 12px;
  }

  .lb-piece-reward-card {
    width: 100%;
    padding: 22px 18px 20px;
    border-radius: 21px;
  }

  .lb-piece-reward-visual {
    width: min(62vw, 220px);
    height: min(62vw, 220px);
    margin-bottom: 8px;
  }

  .lb-piece-reward-actions {
    grid-template-columns: 1fr;
  }

  .lb-piece-reward-layer.is-complete .lb-piece-reward-visual {
    margin-top: 22px;
  }

  .lb-collection {
    padding-top: 18px;
  }

  .lb-collection-progress,
  .lb-collection-grid {
    grid-template-columns: 1fr;
  }

  .lb-collection-progress > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .lb-collection-illustration {
    grid-column: auto;
  }

  .lb-collection-card {
    min-height: 0;
  }

  .lb-collection-next {
    justify-self: stretch;
  }
}

/* Archivo Secreto BM00: avisos, intento único y reloj de cinco minutos. */
body.lb-secret-modal-open { overflow: hidden; }
.lb-secret-notice,
.lb-secret-start-modal {
  position: fixed;
  z-index: 10050;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
}
.lb-secret-notice[hidden],
.lb-secret-start-modal[hidden] { display: none !important; }
.lb-secret-notice__backdrop,
.lb-secret-start-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 13, 46, .74);
  backdrop-filter: blur(8px);
}
.lb-secret-notice__panel,
.lb-secret-start-modal__panel {
  position: relative;
  width: min(620px, 100%);
  max-height: min(780px, calc(100vh - 32px));
  overflow-y: auto;
  padding: clamp(28px, 5vw, 48px);
  border: 1px solid #d9ccff;
  border-radius: 28px;
  background: radial-gradient(circle at 90% 4%, rgba(119, 68, 255, .16), transparent 32%), #fff;
  box-shadow: 0 30px 90px rgba(10, 20, 67, .32);
  text-align: center;
}
.lb-secret-notice__panel.is-legend { border-color: #e6be54; background: radial-gradient(circle at 50% 0, #fff5c9, transparent 38%), #fff; }
.lb-secret-notice__close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #dde2ef;
  border-radius: 50%;
  background: #fff;
  color: #10204b;
  cursor: pointer;
}
.lb-secret-notice__seal {
  display: grid;
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
  place-items: center;
  border: 5px solid #f3d978;
  border-radius: 24px;
  background: linear-gradient(145deg, #4420bd, #6d35f5);
  color: #fff1a9;
  box-shadow: 0 14px 32px rgba(75, 34, 183, .26);
  font-size: 30px;
  transform: rotate(-4deg);
}
.lb-secret-notice__eyebrow { color: #6534e5; font-size: 11px; font-weight: 950; letter-spacing: .09em; }
.lb-secret-notice__panel h2,
.lb-secret-start-modal__panel h2 { margin: 9px 0 12px; color: #071943; font-size: clamp(28px, 5vw, 42px); line-height: 1.05; letter-spacing: -.035em; }
.lb-secret-notice__panel > p,
.lb-secret-start-modal__panel > p { margin: 0 auto; max-width: 510px; color: #5c6987; font-size: 16px; line-height: 1.55; }
.lb-secret-notice__rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 24px 0; }
.lb-secret-notice__rules span { display: grid; min-height: 86px; place-content: center; gap: 2px; padding: 12px 8px; border: 1px solid #e1dcf2; border-radius: 15px; background: #f8f6ff; color: #52607f; font-size: 12px; font-weight: 850; }
.lb-secret-notice__rules strong { color: #5421dc; font-size: 28px; line-height: 1; }
.lb-secret-notice__rules i { color: #c78b00; font-size: 24px; }
.lb-secret-notice__actions { display: flex; justify-content: center; gap: 10px; }
.lb-secret-notice__actions .lb-btn { min-height: 50px; padding-inline: 22px; }
.lb-secret-start-modal__warning { padding: 12px 14px; border: 1px solid #fed7aa; border-radius: 13px; background: #fff7ed; color: #9a3412 !important; font-size: 13px !important; font-weight: 800; }
.lb-secret-start-modal__feedback { min-height: 20px; margin-top: 12px !important; color: #b42318 !important; font-size: 13px !important; font-weight: 800; }
.lb-secret-legend-badge { display: block; width: min(220px, 48vw); height: auto; margin: -18px auto 8px; filter: drop-shadow(0 16px 22px rgba(117, 75, 0, .22)); }

.lb-secret-attempt-timer { display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; align-items: center; margin: 0 0 22px; padding: 14px 18px; border: 1px solid #d9ccff; border-radius: 16px; background: #f8f6ff; }
.lb-secret-attempt-timer > div { display: flex; align-items: center; gap: 9px; color: #3f287e; font-size: 13px; font-weight: 900; }
.lb-secret-attempt-timer > strong { color: #5222db; font-size: 28px; font-variant-numeric: tabular-nums; }
.lb-secret-attempt-timer > i { grid-column: 1 / -1; display: block; height: 8px; overflow: hidden; border-radius: 999px; background: #e0daf2; }
.lb-secret-attempt-timer > i > b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6f37f3, #315eea); transition: width .25s linear; }
.lb-secret-attempt-timer.is-urgent { border-color: #fdba74; background: #fff7ed; }
.lb-secret-attempt-timer.is-urgent > strong { color: #c2410c; }
.lb-secret-attempt-timer.is-urgent > i > b { background: linear-gradient(90deg, #f97316, #dc2626); }
.lb-secret-attempt-locked { display: grid; place-items: center; min-height: 250px; padding: 34px; border: 1px dashed #cbbcf4; border-radius: 18px; background: linear-gradient(145deg, #faf9ff, #f2eeff); text-align: center; }
.lb-secret-attempt-locked > i { display: grid; width: 64px; height: 64px; place-items: center; border-radius: 20px; background: #e9e1ff; color: #5d2be0; font-size: 25px; }
.lb-secret-attempt-locked strong { margin-top: 15px; color: #0a1a48; font-size: 23px; }
.lb-secret-attempt-locked p { max-width: 560px; margin: 7px auto 0; color: #63708d; line-height: 1.5; }
.lb-secret-attempt-open { width: min(100%, 320px); margin: 0 auto; }

@media (max-width: 600px) {
  .lb-secret-notice,
  .lb-secret-start-modal { align-items: end; padding: 0; }
  .lb-secret-notice__panel,
  .lb-secret-start-modal__panel { width: 100%; max-height: 92vh; padding: 34px 20px 24px; border-radius: 24px 24px 0 0; }
  .lb-secret-notice__rules { gap: 6px; }
  .lb-secret-notice__rules span { min-height: 78px; padding-inline: 4px; font-size: 10px; }
  .lb-secret-notice__actions { display: grid; }
  .lb-secret-notice__actions .lb-btn { width: 100%; }
  .lb-secret-attempt-timer { margin-inline: -2px; padding: 12px 14px; }
  .lb-secret-attempt-locked { min-height: 220px; padding: 26px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .lb-piece-reward-layer,
  .lb-piece-reward-card,
  .lb-piece-reward-svg,
  .lb-piece-reward-full,
  .lb-piece-reward-sparkle,
  .lb-piece-reward-particles i,
  .lb-puzzle-piece.is-newly-unlocked .lb-puzzle-piece-hit,
  .lb-puzzle-label.is-newly-unlocked > b {
    animation: none !important;
    transition: none !important;
  }

  .lb-piece-reward-layer.is-visible,
  .lb-piece-reward-layer.is-visible .lb-piece-reward-card,
  .lb-piece-reward-svg,
  .lb-piece-reward-full {
    opacity: 1;
    transform: none;
  }

  .lb-piece-reward-particles,
  .lb-piece-reward-sparkle {
    display: none;
  }

  .lb-puzzle-piece.is-newly-unlocked .lb-puzzle-piece-hit {
    fill: rgba(255, 213, 73, .18);
    stroke: #ffd54d;
    stroke-width: 4;
    filter: drop-shadow(0 0 5px rgba(255, 183, 0, .8));
  }

  .lb-puzzle-label.is-newly-unlocked > b {
    box-shadow: 0 0 0 5px rgba(255, 213, 73, .32);
  }
}

/* BM8 classes: hierarchical book tree. Kept under the view-specific root so
 * no global header, home, problem or personal-page component is affected. */
.lb-classes[data-book-tree-layout] {
  grid-template-columns: 282px minmax(0, 1fr) 292px;
  gap: 22px;
}

.lb-shell:has(.lb-classes[data-book-tree-layout]) {
  overflow-x: clip;
}

.lb-classes[data-book-tree-layout] .lb-book-tree-launch,
.lb-classes[data-book-tree-layout] .lb-book-tree-backdrop,
.lb-classes[data-book-tree-layout] .lb-classes-sidebar-head button {
  display: none;
}

.lb-classes[data-book-tree-layout] .lb-classes-sidebar {
  max-height: calc(100vh - 106px);
  padding: 18px 14px 20px;
  overflow: auto;
  overscroll-behavior: contain;
}

.lb-classes[data-book-tree-layout] .lb-classes-sidebar-head {
  padding: 0 6px 12px;
  border-bottom: 1px solid var(--lb-line);
}

.lb-classes[data-book-tree-layout] .lb-classes-sidebar-head h2 {
  font-size: 19px;
}

.lb-classes[data-book-tree-layout] .lb-classes-unit {
  margin-top: 15px;
}

.lb-classes[data-book-tree-layout] .lb-classes-unit h3 {
  padding: 0 8px;
}

.lb-classes[data-book-tree-layout] .lb-book-tree-chapter {
  border-radius: 10px;
}

.lb-classes[data-book-tree-layout] .lb-class-chapter {
  width: 100%;
  min-height: 58px;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  align-items: center;
  padding: 9px 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--lb-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.lb-classes[data-book-tree-layout] .lb-class-chapter:hover,
.lb-classes[data-book-tree-layout] .lb-class-chapter:focus-visible,
.lb-classes[data-book-tree-layout] .lb-book-tree-chapter.is-current > .lb-class-chapter {
  border-color: rgba(85, 36, 245, .2);
  background: rgba(85, 36, 245, .06);
  outline: none;
}

.lb-classes[data-book-tree-layout] .lb-class-chapter:focus-visible,
.lb-classes[data-book-tree-layout] .lb-book-tree-topic:focus-visible,
.lb-classes[data-book-tree-layout] .lb-book-tree-launch:focus-visible,
.lb-classes[data-book-tree-layout] .lb-classes-sidebar-head button:focus-visible {
  box-shadow: 0 0 0 3px rgba(85, 36, 245, .28);
}

.lb-classes[data-book-tree-layout] .lb-class-chapter:disabled {
  cursor: default;
  opacity: 1;
}

.lb-classes[data-book-tree-layout] .lb-class-chapter > span:first-child {
  grid-row: auto;
}

.lb-classes[data-book-tree-layout] .lb-class-chapter-copy {
  display: grid;
  width: auto;
  height: auto;
  min-width: 0;
  gap: 3px;
  place-items: initial;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.lb-classes[data-book-tree-layout] .lb-class-chapter-copy strong {
  font-size: 14px;
  line-height: 1.25;
}

.lb-classes[data-book-tree-layout] .lb-class-chapter-copy small {
  font-size: 11px;
  line-height: 1.3;
}

.lb-classes[data-book-tree-layout] .lb-book-tree-chapter.is-upcoming .lb-class-chapter-copy small {
  color: #7f88a1;
  font-style: italic;
}

.lb-classes[data-book-tree-layout] .lb-class-chapter > i {
  width: auto;
  height: auto;
  overflow: visible;
  background: transparent;
  color: var(--lb-muted);
  font-size: 11px;
  transition: transform .18s ease;
}

.lb-classes[data-book-tree-layout] .lb-book-tree-chapter.is-open .lb-class-chapter > i {
  transform: rotate(180deg);
}

.lb-classes[data-book-tree-layout] .lb-book-tree-topics {
  position: relative;
  display: grid;
  gap: 3px;
  margin: 2px 5px 9px 28px;
  padding: 3px 0 3px 15px;
}

.lb-classes[data-book-tree-layout] .lb-book-tree-topics[hidden] {
  display: none;
}

.lb-classes[data-book-tree-layout] .lb-book-tree-topics::before {
  content: "";
  position: absolute;
  inset: 3px auto 3px 0;
  width: 1px;
  background: #dfe3ee;
}

.lb-classes[data-book-tree-layout] .lb-book-tree-topic {
  position: relative;
  display: grid;
  gap: 3px;
  min-height: 48px;
  align-content: center;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--lb-ink);
}

.lb-classes[data-book-tree-layout] .lb-book-tree-topic::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -16px;
  width: 3px;
  border-radius: 99px;
  background: transparent;
}

.lb-classes[data-book-tree-layout] .lb-book-tree-topic:hover {
  background: #f6f4ff;
}

.lb-classes[data-book-tree-layout] .lb-book-tree-topic.is-active {
  background: #eee9ff;
  color: #3516a8;
}

.lb-classes[data-book-tree-layout] .lb-book-tree-topic.is-active::before {
  background: var(--lb-primary);
}

.lb-classes[data-book-tree-layout] .lb-book-tree-topic span {
  font-size: 13px;
  font-weight: 900;
  line-height: 1.3;
}

.lb-classes[data-book-tree-layout] .lb-book-tree-topic small {
  color: var(--lb-muted);
  font-size: 11px;
  font-weight: 700;
}

.lb-classes[data-book-tree-layout] .lb-book-tree-topic.is-active small {
  color: #674fc2;
}

.lb-classes[data-book-tree-layout] .lb-book-tree-empty {
  margin: 0;
  padding: 9px 10px;
  color: var(--lb-muted);
  font-size: 12px;
  font-weight: 800;
  font-style: italic;
}

.lb-classes[data-book-tree-layout] .lb-written-class {
  display: block;
  padding: clamp(18px, 3vw, 30px);
}

.lb-classes[data-book-tree-layout] .lb-written-reader {
  width: min(100%, 780px);
  margin: 0 auto;
}

.lb-classes[data-book-tree-layout] .lb-written-content {
  width: 100%;
}

@media (max-width: 1180px) {
  .lb-classes[data-book-tree-layout] {
    grid-template-columns: minmax(0, 1fr) 280px;
  }

  .lb-classes[data-book-tree-layout] .lb-book-tree-launch {
    grid-column: 1 / -1;
    display: inline-flex;
    width: max-content;
    min-height: 46px;
    align-items: center;
    gap: 9px;
    padding: 0 16px;
    border: 1px solid rgba(85, 36, 245, .2);
    border-radius: 9px;
    background: #fff;
    color: var(--lb-primary);
    font-weight: 900;
  }

  .lb-classes[data-book-tree-layout] .lb-classes-sidebar {
    position: fixed;
    z-index: 10021;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(360px, 88vw);
    max-height: none;
    border-radius: 0 14px 14px 0;
    transform: translateX(-105%);
    transition: transform .2s ease;
  }

  .lb-classes[data-book-tree-layout].is-book-tree-open .lb-classes-sidebar {
    transform: translateX(0);
  }

.lb-classes[data-book-tree-layout] .lb-classes-sidebar-head button {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #f3f0ff;
    color: var(--lb-primary);
    font-size: 28px;
    line-height: 1;
  }

  .lb-classes[data-book-tree-layout] .lb-book-tree-backdrop {
    position: fixed;
    z-index: 10020;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(5, 13, 38, .48);
  }

  .lb-classes[data-book-tree-layout] .lb-book-tree-backdrop:not([hidden]) {
    display: block;
  }
}

@media (max-width: 760px) {
  .lb-classes[data-book-tree-layout] {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .lb-classes[data-book-tree-layout] .lb-book-tree-launch,
  .lb-classes[data-book-tree-layout] .lb-classes-main,
  .lb-classes[data-book-tree-layout] .lb-classes-rail {
    grid-column: 1;
    min-width: 0;
  }

  .lb-classes[data-book-tree-layout] .lb-book-tree-launch {
    width: 100%;
    justify-content: center;
  }

  .lb-classes[data-book-tree-layout] .lb-classes-rail {
    display: grid;
    position: static;
  }

  .lb-classes[data-book-tree-layout] .lb-written-class,
  .lb-classes[data-book-tree-layout] .lb-written-module {
    padding: 16px;
  }

  .lb-classes[data-book-tree-layout] .lb-written-head {
    align-items: flex-start;
  }
}

.lb-header-main {
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
}

.lb-logo {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;
  border-radius: 8px;
  background: linear-gradient(160deg, #2d198f 0%, #150a75 72%);
  color: #fff;
  box-shadow: 0 10px 22px rgba(41, 21, 152, .28);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.lb-logo::before {
  content: "";
  width: 18px;
  height: 8px;
  border-top: 2px solid #ffd54d;
  border-left: 2px solid #ffd54d;
  border-right: 2px solid #ffd54d;
  border-radius: 12px 12px 0 0;
  opacity: .95;
}

.lb-logo span {
  display: block;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.lb-logo strong {
  display: block;
  max-width: 45px;
  font-size: 10px;
  line-height: 1.05;
  text-transform: uppercase;
}

.lb-title h1 {
  margin: 0;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: 0;
  font-weight: 800;
  white-space: nowrap;
}

.lb-title span {
  font-size: 14px;
  font-weight: 700;
}

.lb-header-stats {
  flex: 0 1 620px;
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: flex-end;
  min-width: 0;
}

.lb-xp-pill {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--lb-line);
  border-radius: 8px;
  background: #fff;
  color: var(--lb-ink);
  box-shadow: 0 8px 18px rgba(19, 35, 82, .05);
  white-space: nowrap;
}

.lb-xp-pill i {
  color: var(--lb-primary);
}

.lb-xp-pill strong {
  font-weight: 900;
}

.lb-xp-pill span {
  font-size: 11px;
  color: var(--lb-muted);
  font-weight: 800;
}

.lb-topnav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
  min-height: 40px;
  border-top: 1px solid #edf1f8;
}

.lb-topnav a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  font-size: 13px;
  font-weight: 500;
  min-width: 0;
  white-space: nowrap;
}

.lb-title {
  min-width: 0;
  flex: 1 1 auto;
}

.lb-topnav a.is-active {
  color: var(--lb-primary);
  border-color: var(--lb-line);
  border-top: 2px solid var(--lb-primary);
  background: #fff;
  font-weight: 800;
}

.lb-icon {
  width: 20px;
  text-align: center;
  color: #173263;
  font-size: 16px;
}

.lb-topnav a.is-active .lb-icon {
  color: var(--lb-primary);
}

.lb-badge-side-access {
  position: fixed;
  top: 52%;
  right: 0;
  z-index: 1035;
  display: grid;
  width: 88px;
  min-height: 92px;
  place-items: center;
  gap: 6px;
  padding: 11px 8px;
  border: 1px solid #d7cdf5;
  border-right: 0;
  border-radius: 16px 0 0 16px;
  background: linear-gradient(145deg,#fff,#f1ebff);
  box-shadow: 0 12px 28px rgba(44,24,104,.18);
  color: #4a1bc8;
  text-align: center;
  transform: translateY(-50%);
  transition: width .18s ease, background .18s ease, box-shadow .18s ease;
}

.lb-badge-side-access i { font-size: 22px; }
.lb-badge-side-access span { display: grid; gap: 1px; }
.lb-badge-side-access small { color: #7b7096; font-size: 7px; font-weight: 900; letter-spacing: .06em; }
.lb-badge-side-access strong { font-size: 11px; line-height: 1.1; }
.lb-badge-side-access:hover,
.lb-badge-side-access:focus-visible,
.lb-badge-side-access.is-active { width: 96px; background: linear-gradient(145deg,#faf7ff,#e6dcff); box-shadow: 0 15px 34px rgba(55,26,134,.24); color: #35109e; }

.lb-community-side-access {
  position: fixed; top: calc(52% + 106px); right: 0; z-index: 1034; display: grid; width: 88px; min-height: 82px;
  place-items: center; gap: 5px; padding: 10px 8px; border: 1px solid #cde7dc; border-right: 0; border-radius: 16px 0 0 16px;
  background: linear-gradient(145deg,#fff,#eaf9f2); box-shadow: 0 12px 28px rgba(13,111,77,.14); color: #08724d; text-align: center;
  transition: width .18s ease,background .18s ease,box-shadow .18s ease;
}
.lb-community-side-access i{font-size:20px}.lb-community-side-access span{display:grid;gap:1px}.lb-community-side-access small{color:#568171;font-size:7px;font-weight:900;letter-spacing:.06em}.lb-community-side-access strong{font-size:10px;line-height:1.1}.lb-community-side-access:hover,.lb-community-side-access:focus-visible,.lb-community-side-access.is-active{width:98px;background:linear-gradient(145deg,#f6fffb,#d9f4e8);box-shadow:0 15px 34px rgba(13,111,77,.2);color:#045d3e}

/* Community highlights are social recognition only; they never share the XP ranking styles. */
.lb-community-highlights{max-width:1460px;margin:0 auto;padding:28px 28px 70px;color:#091b4d}.lb-highlights-hero{display:grid;grid-template-columns:minmax(0,1fr) 180px;align-items:center;gap:28px;padding:42px 48px;border:1px solid #d8e6df;border-radius:28px;background:radial-gradient(circle at 84% 12%,rgba(54,211,148,.18),transparent 26%),linear-gradient(135deg,#071b4b 0 49%,#0a6e51 130%);color:#fff;overflow:hidden}.lb-highlights-kicker{display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;color:#8ff0c7;font-size:13px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.lb-highlights-hero h1{max-width:760px;margin:0;font-size:clamp(34px,4.4vw,66px);line-height:.98;letter-spacing:-.045em}.lb-highlights-hero p{max-width:720px;margin:20px 0 0;color:#d9e6f3;font-size:18px;line-height:1.55}.lb-highlights-seal{display:grid;width:156px;height:156px;place-items:center;justify-self:end;border:1px solid rgba(255,255,255,.24);border-radius:50%;background:radial-gradient(circle,#19a874,#087052);box-shadow:0 0 0 14px rgba(255,255,255,.06),0 22px 55px rgba(0,0,0,.24);transform:rotate(5deg)}.lb-highlights-seal i{font-size:48px}.lb-highlights-seal strong{margin-top:-34px;color:#d7ffec;font-size:18px}.lb-highlights-rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0 24px}.lb-highlights-rules>div{display:flex;align-items:center;gap:13px;min-height:74px;padding:15px 18px;border:1px solid #dfe6ef;border-radius:16px;background:#fff;box-shadow:0 9px 25px rgba(14,35,78,.05)}.lb-highlights-rules i{display:grid;width:38px;height:38px;place-items:center;border-radius:12px;background:#eaf9f2;color:#08724d}.lb-highlights-rules span{color:#566482;font-size:14px;line-height:1.35}.lb-highlights-rules strong{color:#0b275e}.lb-highlights-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);gap:22px}.lb-highlights-panel{padding:24px;border:1px solid #dfe6ef;border-radius:24px;background:#fff;box-shadow:0 16px 42px rgba(16,38,84,.07)}.lb-highlights-panel>header{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}.lb-highlights-panel>header small{color:#7886a3;font-size:11px;font-weight:900;letter-spacing:.12em}.lb-highlights-panel>header h2{margin:2px 0 4px;font-size:27px;letter-spacing:-.025em}.lb-highlights-panel>header p{margin:0;color:#6c7892;font-size:14px}.lb-highlights-panel-icon{display:grid;flex:0 0 50px;width:50px;height:50px;place-items:center;border-radius:15px;font-size:20px}.lb-highlights-panel-icon.is-useful{background:#fff3c8;color:#a36500}.lb-highlights-panel-icon.is-collaborator{background:#def7eb;color:#08724d}.lb-useful-list,.lb-contributor-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}.lb-useful-list>li{display:grid;grid-template-columns:34px 50px minmax(0,1fr) auto;align-items:start;gap:12px;padding:16px;border:1px solid #e2e8f1;border-radius:17px;background:#fbfcff}.lb-useful-list>li.is-top{border-color:#d8c9ff;background:linear-gradient(135deg,#fff,#f8f4ff)}.lb-useful-list img,.lb-contributor-avatar img{border-radius:50%;object-fit:cover;background:#edf1f8}.lb-highlight-position{display:grid;width:30px;height:30px;place-items:center;border-radius:10px;background:#e9edf5;color:#52617f;font-size:13px;font-weight:900}.is-top>.lb-highlight-position{background:linear-gradient(145deg,#6b32ff,#4214d9);color:#fff}.lb-useful-copy>div{display:flex;align-items:center;justify-content:space-between;gap:10px}.lb-useful-copy>div strong{font-size:15px}.lb-useful-copy>div a{color:#5430d4;font-size:12px;font-weight:800}.lb-useful-copy p{margin:7px 0 10px;color:#51607c;font-size:14px;line-height:1.5}.lb-useful-copy>span{display:flex;flex-wrap:wrap;gap:7px}.lb-useful-copy>span b{padding:5px 8px;border-radius:8px;background:#edf4ff;color:#315786;font-size:11px}.lb-useful-copy>span b.is-professional{background:#e2f8ed;color:#08724d}.lb-highlight-score{display:grid;min-width:48px;color:#4d22d5;font-size:23px;text-align:right}.lb-highlight-score small{font-size:10px;text-transform:uppercase}.lb-contributor-list>li{position:relative;display:grid;grid-template-columns:34px 54px minmax(0,1fr);align-items:center;gap:12px;padding:14px;border:1px solid #e2e8f1;border-radius:17px}.lb-contributor-list>li.is-top{background:linear-gradient(135deg,#fff,#effbf6);border-color:#c8e9da}.lb-contributor-avatar{display:block;width:54px;height:54px}.lb-contributor-list>li>div{display:grid;gap:2px}.lb-contributor-list>li>div>strong{font-size:15px}.lb-contributor-list>li>div>span{color:#40506f;font-size:13px}.lb-contributor-list>li>div>span b{color:#08724d;font-size:17px}.lb-contributor-list>li>div>small{color:#7c88a0;font-size:11px}.lb-contributor-crown{position:absolute;right:15px;top:15px;color:#e2a512}.lb-highlights-empty{display:grid;justify-items:center;padding:54px 24px;border:1px dashed #cfd9e7;border-radius:22px;background:#f9fbfe;text-align:center}.lb-highlights-empty i{color:#6b32ff;font-size:30px}.lb-highlights-empty h2,.lb-highlights-empty h3{margin:12px 0 5px}.lb-highlights-empty p{max-width:530px;margin:0;color:#6c7892}.lb-highlights-empty.is-compact{padding:38px 20px}.lb-highlights-empty a{display:inline-flex;margin-top:15px;padding:10px 15px;border-radius:10px;background:#5122e6;color:#fff;font-weight:800}.lb-highlights-footer{display:flex;align-items:flex-start;gap:13px;margin-top:22px;padding:18px 20px;border-radius:16px;background:#eef5ff;color:#53627e}.lb-highlights-footer i{margin-top:2px;color:#315786}.lb-highlights-footer p{margin:0;font-size:13px;line-height:1.5}.lb-highlights-footer strong{color:#16366b}

@media(max-width:980px){.lb-highlights-hero{grid-template-columns:minmax(0,1fr) 120px;padding:34px}.lb-highlights-seal{width:112px;height:112px}.lb-highlights-seal i{font-size:34px}.lb-highlights-seal strong{margin-top:-25px;font-size:14px}.lb-highlights-grid{grid-template-columns:1fr}.lb-highlights-rules{grid-template-columns:1fr}}
@media(max-width:640px){.lb-community-highlights{padding:16px 12px 52px}.lb-highlights-hero{grid-template-columns:1fr;padding:27px 22px;border-radius:21px}.lb-highlights-hero h1{font-size:36px}.lb-highlights-hero p{font-size:15px}.lb-highlights-seal{display:none}.lb-highlights-rules>div{min-height:62px}.lb-highlights-panel{padding:17px;border-radius:19px}.lb-highlights-panel>header h2{font-size:23px}.lb-useful-list>li{position:relative;grid-template-columns:30px 42px minmax(0,1fr);gap:9px;padding:13px 58px 13px 13px}.lb-useful-list img{width:42px;height:42px}.lb-useful-copy{grid-column:3}.lb-useful-copy>div{align-items:flex-start;flex-direction:column;gap:2px}.lb-highlight-score{position:absolute;right:12px;top:12px}.lb-contributor-list>li{grid-template-columns:30px 46px minmax(0,1fr);gap:9px;padding:12px}.lb-contributor-avatar,.lb-contributor-avatar img{width:46px;height:46px}.lb-contributor-crown{display:none}}

.lb-btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.lb-btn-primary {
  background: linear-gradient(180deg, #5b25ff, var(--lb-primary));
  color: #fff;
  box-shadow: 0 10px 22px rgba(75, 24, 244, .22);
}

.lb-btn-primary:hover {
  background: var(--lb-primary-dark);
  color: #fff;
}

.lb-btn:disabled,
.lb-btn.is-disabled {
  cursor: default;
  opacity: .72;
  box-shadow: none;
  background: #eef2f8;
  border-color: var(--lb-line);
  color: #5d6a86;
}

.lb-btn-ghost {
  background: #fff;
  border-color: var(--lb-line);
  color: var(--lb-ink);
}

.lb-card {
  border: 1px solid var(--lb-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--lb-shadow);
}

.lb-progress {
  font-size: 14px;
  min-width: 0;
}

.lb-progress-inline {
  flex: 1 1 auto;
  max-width: 360px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  color: var(--lb-muted);
}

.lb-progress-count {
  flex: 0 0 auto;
  color: var(--lb-muted);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.lb-progress-count b {
  color: var(--lb-ink);
}

.lb-progress-count em {
  font-style: normal;
}

.lb-progress-inline strong {
  flex: 0 0 auto;
  color: var(--lb-ink);
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.lb-progress i,
.lb-choice-bars i {
  display: block;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: #e7eaf1;
  overflow: hidden;
}

.lb-progress-inline > i {
  width: clamp(140px, 15vw, 190px);
  flex: 0 0 auto;
}

.lb-progress i > b,
.lb-choice-bars i > b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--lb-primary);
}

.lb-progress-0 b {
  width: 0;
}

.lb-progress-42 b {
  width: 42%;
}

.lb-xp {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid var(--lb-line);
  border-radius: 8px;
  background: #fff;
  font-weight: 900;
}

.lb-xp span {
  color: var(--lb-primary);
  font-size: 20px;
}

.lb-chapter-route {
  display: grid;
  grid-template-columns: minmax(210px, .72fr) minmax(0, 3fr);
  gap: 18px;
  align-items: stretch;
  margin: 16px 0 14px;
  padding: 14px;
  border: 1px solid var(--lb-line);
  border-radius: 14px;
  background: linear-gradient(120deg, #f8f7ff 0%, #fff 58%);
}

.lb-chapter-route-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 4px 8px;
}

.lb-chapter-route-heading-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lb-chapter-route-heading-copy > span,
.lb-chapter-route-copy small {
  color: var(--lb-primary);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.lb-chapter-route-heading-copy strong {
  margin-top: 5px;
  color: var(--lb-ink);
  font-size: 17px;
  line-height: 1.25;
}

.lb-chapter-route-toggle {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #dce3f0;
  border-radius: 9px;
  background: #fff;
  color: var(--lb-primary);
  cursor: pointer;
}

.lb-chapter-route-toggle:hover,
.lb-chapter-route-toggle:focus-visible {
  border-color: rgba(75, 24, 244, .4);
  background: #f5f2ff;
}

.lb-chapter-route-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.lb-chapter-route-step {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 16px;
  gap: 11px;
  align-items: center;
  min-height: 82px;
  padding: 11px 12px;
  border: 1px solid #dce3f0;
  border-radius: 11px;
  background: #fff;
  color: var(--lb-ink);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.lb-chapter-route-step:hover,
.lb-chapter-route-step:focus-visible {
  border-color: rgba(75, 24, 244, .4);
  box-shadow: 0 10px 24px rgba(29, 20, 88, .09);
  color: var(--lb-ink);
  transform: translateY(-1px);
}

.lb-chapter-route-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #eeeaff;
  color: var(--lb-primary);
  font-size: 17px;
}

.lb-chapter-route-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lb-chapter-route-copy strong {
  margin-top: 1px;
  color: var(--lb-ink);
  font-size: 15px;
  line-height: 1.2;
}

.lb-chapter-route-copy em {
  margin-top: 4px;
  overflow: hidden;
  color: var(--lb-muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-chapter-route-arrow {
  color: #9aa5ba;
  font-size: 12px;
}

.lb-chapter-route-progress {
  height: 4px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7eaf2;
}

.lb-chapter-route-progress b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #723bff, #315ff4);
}

.lb-chapter-route.is-compact {
  grid-template-columns: minmax(180px, .65fr) minmax(0, 3fr);
  gap: 10px;
  margin-block: 10px;
  padding: 8px 10px;
}

.lb-chapter-route.is-compact .lb-chapter-route-heading-copy > span,
.lb-chapter-route.is-compact .lb-chapter-route-copy small,
.lb-chapter-route.is-compact .lb-chapter-route-progress,
.lb-chapter-route.is-compact .lb-chapter-route-arrow {
  display: none;
}

.lb-chapter-route.is-compact .lb-chapter-route-heading-copy strong {
  margin-top: 0;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-chapter-route.is-compact .lb-chapter-route-step {
  grid-template-columns: 34px minmax(0, 1fr);
  min-height: 52px;
  padding: 7px 9px;
}

.lb-chapter-route.is-compact .lb-chapter-route-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  font-size: 14px;
}

.lb-chapter-route.is-compact .lb-chapter-route-copy em {
  margin-top: 2px;
  font-size: 11px;
}

.lb-media-row {
  display: grid;
  grid-template-columns: 160px repeat(3, minmax(225px, 1fr)) 170px;
  gap: 16px;
  align-items: center;
  padding: 18px 0 12px;
}

.lb-media-row > p {
  margin: 0 0 0 10px;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 700;
}

.lb-media-card {
  min-height: 112px;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 14px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--lb-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--lb-shadow);
}

.lb-media-thumb {
  position: relative;
  height: 86px;
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(135deg, #dfe6f3, #f8fafc);
}

.lb-media-teacher {
  background:
    radial-gradient(circle at 38% 35%, #1f2738 0 10%, transparent 11%),
    radial-gradient(circle at 28% 54%, #5f7aa7 0 15%, transparent 16%),
    linear-gradient(90deg, #d6e4f5 0 44%, #f4f0e8 44% 100%);
}

.lb-media-formula {
  background:
    linear-gradient(90deg, rgba(75, 24, 244, .11), rgba(7, 153, 75, .06)),
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(6, 22, 74, .08) 19px 20px),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(75, 24, 244, .06) 39px 40px);
}

.lb-media-checklist {
  background:
    linear-gradient(135deg, rgba(236, 247, 241, .9), rgba(255, 255, 255, .9)),
    repeating-linear-gradient(0deg, transparent 0 20px, rgba(6, 22, 74, .08) 21px 22px);
}

.lb-play {
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(35, 49, 81, .86);
  color: #fff;
  cursor: pointer;
}

.lb-media-card h2 {
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
}

.lb-media-card small {
  display: block;
  margin-top: 8px;
  color: var(--lb-muted);
}

.lb-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 5px;
  background: var(--lb-vip);
  color: var(--lb-primary);
  padding: 0 7px;
  font-size: 11px;
  font-weight: 900;
}

.lb-theory-link {
  justify-self: end;
  color: var(--lb-primary);
  font-weight: 800;
}

.lb-workspace {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.lb-card {
  border: 1px solid var(--lb-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--lb-shadow);
}

.lb-widget-empty {
  margin: 0;
  color: var(--lb-muted);
  font-size: 14px;
  line-height: 1.45;
}

.lb-sidebar .lb-card {
  padding: 14px;
}

.lb-main {
  display: grid;
  min-width: 0;
}

.lb-live-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  min-width: 0;
}

.lb-problem-column {
  width: min(100%, 980px);
  min-width: 0;
  justify-self: center;
}

.lb-sidebar-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.lb-sidebar-title h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
}

.lb-sidebar-title button {
  border: 0;
  background: #fff;
  color: var(--lb-ink);
  cursor: pointer;
}

.lb-chapter-list {
  list-style: none;
  margin: 14px 0 16px;
  padding: 0;
}

.lb-chapter-list li {
  position: relative;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 9px;
  align-items: center;
  min-height: 58px;
  border-bottom: 1px solid #edf1f8;
}

.lb-chapter-list li.is-active {
  margin: 4px -6px;
  padding: 0 6px;
  border: 1px solid #e3ddff;
  border-radius: 8px;
  background: linear-gradient(90deg, #f8f6ff, #fff);
  color: var(--lb-primary);
}

.lb-step-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #cdd7e8;
  background: #fff;
  font-weight: 900;
}

.is-done .lb-step-icon {
  background: var(--lb-green);
  border-color: var(--lb-green);
  color: #fff;
}

.is-active .lb-step-icon {
  background: var(--lb-primary);
  color: #fff;
}

.lb-chapter-list strong {
  display: block;
  font-size: 13px;
  line-height: 1.2;
}

.lb-chapter-list small {
  color: var(--lb-muted);
  font-size: 11px;
}

.lb-chapter-list em {
  align-self: center;
  border-radius: 5px;
  background: var(--lb-vip);
  color: var(--lb-primary);
  padding: 4px 6px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.is-locked {
  opacity: .78;
}

.lb-problem-pager {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px;
  padding-top: 10px;
  border-top: 1px solid #edf1f8;
}

.lb-problem-pager a,
.lb-problem-pager span,
.lb-jump button {
  min-height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--lb-line);
  border-radius: 6px;
  background: #fff;
  font-weight: 800;
}

.lb-problem-pager span.is-disabled {
  opacity: .45;
  cursor: default;
}

.lb-problem-pager a.is-active,
.lb-jump button {
  background: var(--lb-primary);
  color: #fff;
  border-color: var(--lb-primary);
}

.lb-jump {
  margin-top: 18px;
}

.lb-jump label {
  display: block;
  margin-bottom: 8px;
  font-weight: 800;
}

.lb-jump div {
  display: grid;
  grid-template-columns: 1fr 58px;
  gap: 10px;
}

.lb-jump input {
  min-width: 0;
  border: 1px solid var(--lb-line);
  border-radius: 6px;
  padding: 0 14px;
}

.lb-problem {
  padding: 24px 28px;
  min-width: 0;
}

.lb-problem-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 16px;
  align-items: start;
}

.lb-problem h2 {
  margin: 0 0 14px;
  font-size: 27px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.lb-problem p {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
}

.lb-problem-statement {
  max-width: 100%;
  min-width: 0;
  width: 100%;
  margin-top: 14px;
  color: #33415f;
}

.lb-problem-statement p {
  margin: 0 0 12px;
}

.lb-problem-statement p:last-child {
  margin-bottom: 0;
}

.lb-problem-statement .lb-roman-list {
  display: grid;
  gap: 7px;
  margin: 12px 0 14px;
  padding-left: 34px;
  list-style-type: upper-roman;
}

.lb-problem-statement .lb-roman-list li {
  padding-left: 7px;
  line-height: 1.55;
}

.lb-problem-statement .lb-roman-list li::marker {
  color: #4c23db;
  font-weight: 850;
}

.lb-problem-statement .lb-problem-formula,
.lb-problem-statement .katex-display {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 0 8px;
}

.lb-problem-statement .katex-display {
  margin: 8px 0 0;
}

.lb-problem-statement .katex {
  font-size: 1.08em;
}

.lb-problem-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
}

.lb-problem-tools button {
  white-space: nowrap;
}

.lb-problem-tools button,
.lb-notebook-tools button,
.lb-notebook-head button,
.lb-tab-nav button {
  border: 0;
  background: transparent;
  color: var(--lb-ink);
  cursor: pointer;
}

.lb-options {
  display: grid;
  gap: 10px;
  margin: 18px 0 14px;
}

.lb-option {
  min-height: 50px;
  display: grid;
  grid-template-columns: 36px 1fr 28px;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--lb-line);
  border-radius: 6px;
  background: #fff;
  color: var(--lb-ink);
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.lb-option:hover {
  border-color: #b8c4db;
  box-shadow: 0 8px 18px rgba(19, 35, 82, .08);
}

.lb-option:not([data-bm8-symbol-option]) span,
#bm8-problem-page .lb-option[data-bm8-symbol-option] > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  margin-left: 10px;
  border-radius: 50%;
  background: #f3f6fb;
  font-weight: 800;
}

.lb-option strong {
  font-size: 18px;
}

.lb-option i {
  opacity: 0;
  font-style: normal;
  color: var(--lb-green);
  font-weight: 900;
}

.lb-option.is-selected {
  border-color: var(--lb-primary);
  box-shadow: 0 0 0 3px rgba(75, 24, 244, .08);
}

.lb-option:disabled {
  cursor: default;
}

.lb-option.is-correct {
  border-color: #20b760;
  background: #f0fff6;
  color: var(--lb-green);
}

.lb-option.is-wrong {
  border-color: #e85d5d;
  background: #fff6f6;
  color: #b82121;
}

.lb-option.is-correct i,
.lb-option.is-wrong i {
  opacity: 1;
}

.lb-answer-result {
  margin: 12px 0;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid #9eddb7;
  background: #effff6;
  color: var(--lb-green);
  font-size: 18px;
  font-weight: 900;
}

/* BM00 problem 5: accessible KaTeX symbol plus a separate text label. */
#bm8-problem-page .bm8-option-value {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 10px 0;
}

#bm8-problem-page .bm8-option-symbol {
  min-width: 0;
  text-align: center;
}

#bm8-problem-page .bm8-option-label {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

@media (max-width: 899px) {
  #bm8-problem-page .bm8-option-value {
    grid-template-columns: 2.1em minmax(0, 1fr);
    gap: 10px;
    font-size: 16px;
  }

  #bm8-problem-page .lb-option[data-bm8-symbol-option] {
    grid-template-columns: 36px minmax(0, 1fr) 18px;
    gap: 8px;
  }
}

.lb-answer-result strong,
.lb-answer-result span {
  display: block;
}

.lb-answer-result span {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
}

.lb-xp-rewards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.lb-xp-rewards em {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #fff7d6;
  color: #7c5400;
  padding: 7px 11px;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
  animation: lb-xp-pop .46s ease-out both;
}

.lb-xp-rewards em.is-bonus {
  background: #ede7ff;
  color: var(--lb-primary);
}

.lb-xp-rewards em.is-mastery {
  background: #fff0bd;
  color: #8a5200;
  box-shadow: inset 0 0 0 1px rgba(247, 144, 9, .22);
}

.lb-xp-rewards em.is-secret {
  background: #17122e;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 216, 121, .34);
}

.lb-mastery-unlocked,
.lb-secret-unlocked {
  display: grid;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin-top: 12px;
  border-radius: 12px;
  border: 1px solid #ffd879;
  background: linear-gradient(135deg, #fff7df, #ffffff);
  color: #7a4a00;
  padding: 11px 13px;
  box-shadow: 0 14px 28px rgba(247, 144, 9, .14);
  animation: lb-level-up-pop .56s ease-out both;
}

.lb-secret-unlocked {
  border-color: #2d2558;
  background: linear-gradient(135deg, #17122e, #2d2558);
  color: #fff;
}

.lb-mastery-unlocked b,
.lb-secret-unlocked b {
  font-size: 14px;
  font-weight: 950;
}

.lb-mastery-unlocked span,
.lb-secret-unlocked span {
  margin-top: 0;
}

.lb-mastery-unlocked span {
  color: #7a4a00;
}

.lb-secret-unlocked span {
  color: #e8e4ff;
}

.lb-level-up {
  display: inline-flex;
  width: fit-content;
  margin-top: 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #4f19f5, #8b5cf6);
  color: #fff;
  padding: 9px 13px;
  font-size: 14px;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(79, 25, 245, .22);
  animation: lb-level-up-pop .56s ease-out both;
}

.lb-result-next {
  display: inline-flex;
  width: fit-content;
  margin-top: 12px;
  color: var(--lb-primary);
  font-size: 14px;
  font-weight: 900;
}

@keyframes lb-xp-pop {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(.94);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes lb-level-up-pop {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(.9);
  }
  70% {
    transform: translateY(-2px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lb-xp-rewards em,
  .lb-level-up,
  .lb-mastery-unlocked,
  .lb-secret-unlocked,
  [data-livebook-level-card].is-level-up {
    animation: none;
  }
}

.lb-answer-result.is-wrong {
  border-color: #efb0b0;
  background: #fff6f6;
  color: #b82121;
}

.lb-problem-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: center;
}

.lb-btn-next {
  background: #f4f7fb;
  border-color: var(--lb-line);
}

.lb-btn-community {
  grid-column: span 3;
  border-color: var(--lb-primary);
  color: var(--lb-primary);
  background: #fff;
}

.lb-btn-community:hover,
.lb-btn-next:hover {
  background: #f7f4ff;
  color: var(--lb-primary);
}

.lb-community-counts {
  grid-column: span 3;
  justify-self: end;
  margin: -4px 0 0;
  color: var(--lb-muted);
  font-size: 12px;
}

.lb-notebook {
  overflow: hidden;
  min-width: 0;
}

.lb-notebook-head {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  border-bottom: 1px solid var(--lb-line);
}

.lb-notebook-head nav {
  display: flex;
  gap: 18px;
  align-items: stretch;
  height: 52px;
}

.lb-notebook-head button {
  font-weight: 700;
  font-size: 13px;
}

.lb-notebook-head button.is-active {
  color: var(--lb-primary);
  border-bottom: 3px solid var(--lb-primary);
}

.lb-notebook-head span {
  color: #08783b;
  font-size: 12px;
  white-space: nowrap;
}

.lb-notebook-tools {
  min-height: 46px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--lb-line);
}

.lb-notebook-tools button {
  min-height: 32px;
  padding: 0 7px;
  border-radius: 5px;
  font-size: 12px;
}

.lb-notebook-tools button:last-child {
  margin-left: auto;
  background: #f5f1ff;
  color: var(--lb-primary);
}

.lb-notebook-tools label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.lb-notebook textarea {
  width: 100%;
  min-height: 360px;
  display: block;
  resize: vertical;
  border: 0;
  outline: 0;
  padding: 28px 34px;
  color: var(--lb-ink);
  background:
    linear-gradient(90deg, transparent 0 36px, #ffb7b7 37px 38px, transparent 39px),
    repeating-linear-gradient(0deg, var(--lb-paper) 0 31px, #e7dac3 32px 33px);
  font-family: "Poppins", "Trebuchet MS", Arial, sans-serif;
  font-size: 16px;
  line-height: 2;
}

.lb-note-banner {
  padding: 10px 14px;
  border-top: 1px solid var(--lb-line);
  background: #f7f9ff;
  color: var(--lb-muted);
  font-weight: 800;
}

.lb-tabs {
  overflow: hidden;
}

.lb-problem-tabs {
  width: 100%;
  margin-top: 18px;
}

.lb-tab-nav {
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(125px, .8fr) minmax(170px, 1fr) minmax(165px, 1fr) minmax(170px, 1fr);
  border-bottom: 1px solid var(--lb-line);
}

.lb-tab-nav button {
  position: relative;
  padding: 0 10px;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}

.lb-tab-nav button.is-active {
  color: var(--lb-primary);
}

.lb-tab-nav button.is-active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 3px;
  background: var(--lb-primary);
}

.lb-tab-nav span {
  display: inline-flex;
  margin-left: 4px;
  border-radius: 4px;
  background: var(--lb-vip);
  color: var(--lb-primary);
  padding: 2px 4px;
  font-size: 10px;
}

.lb-tab-nav .lb-tab-label {
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
}

.lb-tab-label-short {
  display: none !important;
}

.lb-tab-count {
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  margin-left: 2px;
  padding: 0 5px;
  place-items: center;
  border-radius: 999px;
  background: #eef1f8;
  color: #52617d;
  font-size: 10px;
  line-height: 1;
}

.lb-tab-panel {
  display: none;
  padding: 14px 18px 16px;
}

.lb-tab-panel.is-active {
  display: block;
}

.lb-stats-grid {
  display: grid;
  grid-template-columns: minmax(360px, 2.4fr) repeat(4, minmax(120px, 1fr));
  gap: 12px;
  align-items: stretch;
}

.lb-stats-grid.is-muted {
  filter: blur(1px);
  opacity: .45;
  pointer-events: none;
}

.lb-choice-bars {
  display: grid;
  gap: 8px;
}

.lb-choice-bars > strong {
  font-size: 13px;
}

.lb-choice-bars div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  grid-template-areas:
    "label label"
    "bar percent";
  column-gap: 10px;
  row-gap: 4px;
  align-items: center;
  font-size: 13px;
}

.lb-choice-bars div > span {
  grid-area: label;
  min-width: 0;
  line-height: 1.35;
}

.lb-choice-bars div > i {
  grid-area: bar;
}

.lb-choice-bars div > em {
  grid-area: percent;
  font-style: normal;
  text-align: right;
  white-space: nowrap;
}

.lb-bar-12 b {
  width: 12%;
}

.lb-bar-13 b {
  width: 13%;
}

.lb-bar-18 b {
  width: 18%;
}

.lb-bar-57 b {
  width: 57%;
}

.lb-stat-tile {
  min-height: 104px;
  display: grid;
  place-items: center;
  align-content: center;
  border: 1px solid #a9e2bf;
  border-radius: 8px;
  background: #f5fff8;
  text-align: center;
}

.lb-stat-tile strong {
  display: block;
  font-size: 34px;
  color: var(--lb-green);
}

.lb-stat-tile span {
  color: var(--lb-ink);
}

.lb-stat-tile.is-neutral {
  background: #fff;
  border-color: var(--lb-line);
}

.lb-stat-tile.is-neutral strong {
  font-size: 20px;
  color: var(--lb-ink);
}

.lb-locked-panel {
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 8px;
  background: #fff8e8;
  border: 1px solid #f4d594;
}

.lb-locked-panel p,
.lb-premium-panel p,
.lb-community-preview p {
  margin: 6px 0 0;
  color: var(--lb-muted);
}

.lb-community-preview {
  display: grid;
  gap: 10px;
}

.lb-community-preview article {
  border: 1px solid var(--lb-line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcff;
}

.lb-community-preview span {
  color: var(--lb-primary);
}

.lb-community-preview.is-sample article:nth-child(n+2) {
  filter: blur(2px);
  opacity: .55;
}

.lb-community {
  display: grid;
  gap: 16px;
}

.lb-community-composer {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
  gap: 12px 16px;
  padding: 16px;
  border: 1px solid #d8dff0;
  border-radius: 12px;
  background: #f8f7ff;
}

.lb-community-composer label,
.lb-community-composer > div:first-child {
  display: grid;
  gap: 6px;
  color: var(--lb-ink);
  font-size: 13px;
  font-weight: 800;
}

.lb-community-composer select,
.lb-community-composer textarea,
.lb-community-reply-form textarea {
  width: 100%;
  border: 1px solid #cfd7e8;
  border-radius: 9px;
  background: #fff;
  color: var(--lb-ink);
  font: inherit;
  padding: 10px 12px;
  resize: vertical;
}

.lb-community-composer select:focus,
.lb-community-composer textarea:focus,
.lb-community-reply-form textarea:focus {
  border-color: var(--lb-primary);
  box-shadow: 0 0 0 3px rgba(90, 47, 255, .13);
  outline: none;
}

.lb-community-composer-body {
  grid-column: 2;
  grid-row: 1 / span 2;
  grid-template-rows: auto minmax(190px, 1fr);
  align-content: start;
}

.lb-community-composer-body textarea {
  min-height: 190px;
  height: 100%;
}

.lb-community-composer-actions {
  display: grid;
  gap: 10px;
  align-content: end;
}

.lb-community-composer-actions small {
  color: var(--lb-muted);
  font-size: 11px;
  font-weight: 600;
}

.lb-community-file {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px dashed #b9addf;
  border-radius: 9px;
  background: #fff;
  color: var(--lb-primary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.lb-community-file:hover,
.lb-community-file:focus-within {
  border-color: var(--lb-primary);
  background: #f4f0ff;
}

.lb-community-file input {
  display: none;
}

.lb-community-file.is-compact {
  width: auto;
  min-width: 84px;
  min-height: 44px;
  padding: 0;
  border-style: solid;
}

.lb-community-file-summary {
  color: var(--lb-muted);
  font-size: 11px;
  font-weight: 700;
}

.lb-community-file-summary.is-error {
  color: #b42318;
}

.lb-community-file-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lb-community-file-preview:empty {
  display: none;
}

.lb-community-file-preview-item {
  position: relative;
  width: 74px;
  height: 74px;
  overflow: hidden;
  border: 1px solid var(--lb-line);
  border-radius: 12px;
  background: #eef0f6;
}

.lb-community-file-preview-item img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
}

.lb-community-file-preview-item button {
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(10, 12, 28, .78);
  color: #fff;
  cursor: pointer;
  place-items: center;
}

.lb-community-status {
  grid-column: 1 / -1;
  min-height: 18px;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
}

.lb-community-status.is-error,
.lb-community-reply-form p.is-error {
  color: #b42318;
}

.lb-community-status.is-success,
.lb-community-reply-form p.is-success {
  color: #087443;
}

.lb-community-list {
  display: grid;
  gap: 12px;
}

.lb-community-thread {
  padding: 16px;
  border: 1px solid var(--lb-line);
  border-radius: 12px;
  background: #fff;
}

.lb-community-thread > header {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.lb-community-thread > header > img,
.lb-community-reply > img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: #ece9ff;
}

.lb-community-thread header div,
.lb-community-reply > div {
  display: grid;
  min-width: 0;
}

.lb-community-thread small,
.lb-community-reply small {
  color: var(--lb-muted);
  font-size: 11px;
}

.lb-community-kind {
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef3ff;
  color: #3155a6;
  font-size: 11px;
  font-weight: 800;
}

.lb-community-kind.is-solution {
  background: #e9fbf1;
  color: #087443;
}

.lb-community-validation {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin-top: 12px;
  padding: 8px 11px;
  border: 1px solid #bdebd0;
  border-radius: 10px;
  background: #effcf5;
  color: #087443;
}

.lb-community-validation > i {
  font-size: 18px;
}

.lb-community-validation > span {
  display: grid;
}

.lb-community-validation strong {
  font-size: 12px;
  line-height: 1.25;
}

.lb-community-validation small {
  color: #39755a;
  font-size: 10px;
}

.lb-special-badge-progress {
  display: inline-flex;
  margin-top: 8px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eef3ff;
  color: #3f2bd9;
  font-size: 12px;
}

.lb-community-thread h3 {
  margin: 12px 0 4px;
  font-size: 15px;
}

.lb-community-thread > p,
.lb-community-reply p {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.lb-community-media {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.lb-community-media a {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--lb-line);
  border-radius: 10px;
  background: #f2f3f8;
}

.lb-community-media.is-single {
  display: block;
  max-width: 620px;
}

.lb-community-media.is-single a {
  width: fit-content;
  max-width: 100%;
  aspect-ratio: auto;
  background: transparent;
}

.lb-community-media.is-single img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: contain;
}

.lb-community-media img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  transition: transform .18s ease;
}

.lb-community-media a:hover img {
  transform: scale(1.025);
}

.lb-community-media img.is-blurred {
  filter: blur(12px);
}

.lb-community-media.is-reply {
  max-width: 520px;
  margin: 8px 0;
}

.lb-community-like {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--lb-muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.lb-community-like:hover,
.lb-community-like.is-active {
  background: #f0ebff;
  color: var(--lb-primary);
}

.lb-community-like.is-small {
  padding: 5px 8px;
  font-size: 11px;
}

.lb-community-like:disabled {
  cursor: wait;
  opacity: .65;
}

.lb-community-approval {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid #d9d3ff;
  border-radius: 999px;
  background: #f7f5ff;
  color: #5132dc;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.lb-community-approval b {
  padding-left: 7px;
  border-left: 1px solid currentColor;
  font-size: 10px;
  opacity: .78;
}

.lb-community-approval:hover,
.lb-community-approval.is-active {
  border-color: #6b4eff;
  background: #eeeaff;
}

.lb-community-approval.is-validated {
  border-color: #9cdeba;
  background: #effcf5;
  color: #087443;
}

.lb-community-approval:disabled {
  cursor: default;
  opacity: .72;
}

.lb-community-item-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
  vertical-align: middle;
}

.lb-community-item-actions button {
  padding: 7px 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--lb-muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
}

.lb-community-item-actions button:hover,
.lb-community-item-actions button:focus-visible {
  background: #f2efff;
  color: var(--lb-primary);
  outline: none;
}

.lb-community-item-actions button[data-community-delete]:hover,
.lb-community-item-actions button[data-community-delete]:focus-visible {
  background: #fff0f0;
  color: #b42318;
}

.lb-community-item-actions button:disabled {
  cursor: wait;
  opacity: .55;
}

.lb-community-item-actions.is-small,
.lb-community-item-actions.is-reply {
  margin-left: 2px;
}

.lb-community-item-actions.is-small button,
.lb-community-item-actions.is-reply button {
  padding: 5px 7px;
  font-size: 11px;
}

.lb-community-inline-edit {
  display: grid;
  gap: 7px;
  margin: 8px 0;
}

.lb-community-inline-edit textarea {
  width: 100%;
  min-height: 96px;
  padding: 11px 12px;
  border: 1px solid #cfd7e6;
  border-radius: 10px;
  background: #fff;
  color: var(--lb-ink);
  font: inherit;
  line-height: 1.45;
  resize: vertical;
}

.lb-community-inline-edit textarea:focus {
  border-color: #9b82ff;
  box-shadow: 0 0 0 3px rgba(90, 47, 255, .09);
  outline: none;
}

.lb-community-inline-edit > div {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.lb-community-inline-edit button,
.lb-community-report-actions button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #d6ddeb;
  border-radius: 9px;
  background: #fff;
  color: var(--lb-ink);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
}

.lb-community-inline-edit button.is-primary,
.lb-community-report-actions button.is-primary {
  border-color: var(--lb-primary);
  background: var(--lb-primary);
  color: #fff;
}

.lb-community-inline-edit > p,
.lb-community-report-status {
  min-height: 17px;
  margin: 0;
  color: var(--lb-muted);
  font-size: 11px;
  font-weight: 700;
}

.lb-community-inline-edit > p.is-error,
.lb-community-report-status.is-error {
  color: #b42318;
}

.lb-community-report-layer {
  position: fixed;
  z-index: 10090;
  inset: 0;
  display: grid;
  padding: 22px;
  overflow-y: auto;
  background: rgba(7, 8, 18, .62);
  place-items: center;
}

.lb-community-report-layer > form {
  position: relative;
  box-sizing: border-box;
  display: grid;
  gap: 14px;
  width: min(480px, 100%);
  padding: 24px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(19, 16, 48, .28);
}

.lb-community-report-layer h3,
.lb-community-report-layer p {
  margin: 0;
}

.lb-community-report-layer > form > p:not(.lb-community-report-status) {
  padding-right: 32px;
  color: var(--lb-muted);
  font-size: 13px;
  line-height: 1.45;
}

.lb-community-report-layer label {
  display: grid;
  gap: 6px;
  color: var(--lb-ink);
  font-size: 12px;
  font-weight: 850;
}

.lb-community-report-layer select,
.lb-community-report-layer textarea {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid #cfd7e6;
  border-radius: 9px;
  background: #fff;
  color: var(--lb-ink);
  font: inherit;
  font-weight: 500;
}

.lb-community-report-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f1eff8;
  color: var(--lb-ink);
  cursor: pointer;
  place-items: center;
}

.lb-community-report-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

body.lb-community-report-open {
  overflow: hidden;
}

.lb-community-replies {
  display: grid;
  gap: 9px;
  margin-top: 12px;
  padding-left: 18px;
  border-left: 2px solid #eeeaff;
}

.lb-community-reply {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 9px;
  padding: 9px 0;
}

.lb-community-reply > img {
  width: 30px;
  height: 30px;
}

.lb-community-reply p {
  margin: 3px 0 0;
  color: var(--lb-ink);
}

.lb-community-reply-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px;
  align-items: center;
  margin-top: 12px;
  padding: 6px 7px 6px 14px;
  border: 1px solid #d8deea;
  border-radius: 24px;
  background: #f7f8fc;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.lb-community-reply-form:focus-within {
  border-color: #a991ff;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(90, 47, 255, .09);
}

.lb-community-reply-form > label:first-child {
  min-width: 0;
}

.lb-community-reply-form textarea {
  min-height: 28px;
  max-height: 120px;
  padding: 4px 0;
  overflow-y: auto;
  border: 0;
  background: transparent;
  line-height: 20px;
  resize: none;
  scrollbar-width: none;
}

.lb-community-reply-form textarea::-webkit-scrollbar {
  display: none;
}

.lb-community-reply-form textarea:focus {
  border: 0;
  box-shadow: none;
}

.lb-community-reply-form .lb-community-file.is-compact {
  min-width: 54px;
  width: 54px;
  min-height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--lb-primary);
  font-size: 12px;
  font-weight: 900;
}

.lb-community-reply-form .lb-community-file.is-compact span {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
}

.lb-community-send {
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 19px;
  background: transparent;
  color: var(--lb-primary);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
}

.lb-community-send:hover,
.lb-community-send:focus-visible {
  background: #eee9ff;
  outline: none;
}

.lb-community-send:disabled {
  cursor: wait;
  opacity: .5;
}

.lb-community-reply-form p {
  grid-column: 1 / -1;
  min-height: 16px;
  margin: 0;
  font-size: 11px;
  font-weight: 700;
}

.lb-community-reply-form p:empty {
  display: none;
}

.lb-community-reply-form .lb-community-file-preview {
  grid-column: 1 / -1;
  padding: 2px 0 4px;
}

.lb-community-media-viewer {
  position: fixed;
  z-index: 10080;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(7, 8, 18, .94);
}

.lb-community-media-viewer.is-open {
  display: flex;
}

.lb-community-media-viewer img {
  width: auto;
  max-width: min(1100px, 94vw);
  height: auto;
  max-height: 90vh;
  border-radius: 12px;
  object-fit: contain;
}

.lb-community-media-viewer button {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  background: rgba(0,0,0,.38);
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  place-items: center;
}

body.lb-community-media-open {
  overflow: hidden;
}

.lb-community-empty {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 26px 16px;
  border: 1px dashed #cdd5e6;
  border-radius: 12px;
  background: #fbfcff;
  text-align: center;
}

.lb-community-empty > i {
  color: var(--lb-primary);
  font-size: 26px;
}

.lb-community-empty p {
  margin: 0;
  color: var(--lb-muted);
}

.lb-community-empty.is-warning {
  border-color: #efd18b;
  background: #fffaf0;
}

.lb-official-solution {
  min-width: 0;
  max-width: 100%;
  margin-top: 10px;
  color: var(--lb-ink);
  line-height: 1.75;
}

.lb-official-solution > :last-child {
  margin-bottom: 0;
}

@font-face {
  font-family: "Patrick Hand";
  src: url("../fonts/patrick-hand/PatrickHand-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.lb-handwritten-solution {
  width: min(100%, 960px);
  margin: 16px auto 8px;
}

.lb-handwritten-solution svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.lb-handwritten-solution svg.is-mobile {
  display: none;
}

.lb-handwritten-solution figcaption {
  margin-top: 8px;
  color: var(--lb-muted);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.lb-handwritten-ink text {
  fill: #292245;
  font-family: "Patrick Hand", "Segoe Print", "Comic Sans MS", cursive;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: .2px;
}

.lb-handwritten-ink .lb-handwritten-title {
  fill: #45239a;
  font-size: 28px;
  font-weight: 700;
}

.lb-handwritten-ink .lb-handwritten-note {
  font-size: 23px;
  font-weight: 700;
}

.lb-handwritten-ink .lb-handwritten-equation {
  font-size: 29px;
}

.lb-handwritten-ink .lb-handwritten-result {
  fill: #167647;
  font-size: 48px;
  font-weight: 800;
}

.lb-handwritten-ink .lb-handwritten-answer {
  fill: #45239a;
  font-size: 28px;
  font-weight: 800;
}

.lb-handwritten-ink .lb-handwritten-mini {
  fill: #9f3064;
  font-size: 20px;
  font-weight: 800;
}

.lb-handwritten-ink .is-purple { fill: #6843cf; }
.lb-handwritten-ink .is-blue { fill: #1178b8; }

.lb-handwritten-stroke {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  opacity: .82;
}

.lb-handwritten-stroke.is-purple { stroke: #7651db; }
.lb-handwritten-stroke.is-pink { stroke: #ef8db4; }
.lb-handwritten-stroke.is-yellow { stroke: #f4c84e; }
.lb-handwritten-stroke.is-thick { stroke-width: 8; opacity: .62; }

.lb-official-solution-text {
  margin-top: 14px;
  border-top: 1px solid var(--lb-line);
  padding-top: 12px;
}

.lb-official-solution-text summary {
  width: fit-content;
  color: var(--lb-primary);
  cursor: pointer;
  font-weight: 800;
}

.lb-official-solution-text[open] summary {
  margin-bottom: 8px;
}

.lb-handwritten-template-gallery {
  display: grid;
  gap: 22px;
}

.lb-handwritten-template-card {
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--lb-line);
  border-radius: 18px;
  background: #fff;
  padding: 16px;
}

.lb-handwritten-template-card.is-embedded {
  border: 0;
  padding: 0;
  background: transparent;
}

.lb-handwritten-template-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 0 4px 8px;
}

.lb-handwritten-template-meta span {
  padding: 5px 9px;
  border-radius: 999px;
  background: #fff3d6;
  color: #8a5710;
  font-size: 11px;
  font-weight: 800;
}

.lb-handwritten-template-meta span.is-published {
  background: #e7f8ed;
  color: #167647;
}

.lb-handwritten-template {
  min-width: 0;
  max-width: 100%;
  margin-top: 4px;
}

.lb-handwritten-sheet-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  color: #292245;
  font-family: "Patrick Hand", "Segoe Print", "Comic Sans MS", cursive;
}

.lb-handwritten-sheet-content header {
  text-align: center;
}

.lb-handwritten-sheet-content header span {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  background: #f0eaff;
  color: #6843cf;
  font-size: 14px;
  font-weight: 800;
}

.lb-handwritten-sheet-content h2 {
  margin: 5px 0 0;
  color: #45239a;
  font-family: inherit;
  font-size: 28px;
}

.lb-handwritten-sheet-content header p {
  margin: 3px 0 10px;
  color: #6d6484;
  font-size: 15px;
  font-weight: 600;
}

.lb-handwritten-template-sections {
  display: grid;
  gap: 9px;
}

.lb-handwritten-template-sections section {
  border-radius: 13px;
  padding: 8px 12px 10px;
  background: rgba(255, 255, 255, .62);
}

.lb-handwritten-template-sections section.is-tone-1 { border-left: 5px solid #f4c84e; }
.lb-handwritten-template-sections section.is-tone-2 { border-left: 5px solid #ef8db4; }
.lb-handwritten-template-sections section.is-tone-3 { border-left: 5px solid #7651db; }

.lb-handwritten-template-sections h3 {
  margin: 0 0 4px;
  color: #6843cf;
  font-family: inherit;
  font-size: 19px;
}

.lb-handwritten-template-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px 18px;
  color: #1178b8;
  font-size: 18px;
  font-weight: 700;
}

.lb-calculator-guide {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.lb-calculator-guide-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 13px;
  background: #eee8ff;
  padding: 9px 12px;
  color: #45239a;
}

.lb-calculator-guide-title strong { font-size: 19px; }
.lb-calculator-guide-title span { color: #6d6484; font-family: Inter, Arial, sans-serif; font-size: 12px; font-weight: 700; text-align: right; }

.lb-calculator-step {
  border: 1px solid #ded5fb;
  border-radius: 13px;
  background: rgba(255, 255, 255, .86);
  padding: 8px 10px;
}

.lb-calculator-step-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  color: #45239a;
}

.lb-calculator-step-heading > b {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  background: #5c2df5;
  color: #fff;
  font-family: Inter, Arial, sans-serif;
  font-size: 13px;
}

.lb-calculator-step-heading > strong { font-size: 17px; }
.lb-calculator-lines { display: grid; gap: 3px; color: #1178b8; font-size: 16px; font-weight: 800; }
.lb-calculator-lines span { display: block; }
.lb-calculator-step p { margin: 5px 0 0; color: #655d79; font-family: Inter, Arial, sans-serif; font-size: 11px; font-weight: 650; }

.lb-handwritten-template-card.is-large-type .lb-handwritten-sheet-content {
  color: #211a3b;
}

.lb-handwritten-template-card.is-large-type .lb-handwritten-sheet-content header span {
  font-size: 15px;
}

.lb-handwritten-template-card.is-large-type .lb-handwritten-sheet-content h2 {
  color: #3f1f91;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
}

.lb-handwritten-template-card.is-large-type .lb-handwritten-sheet-content header p {
  margin: 5px 0 12px;
  color: #514767;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.lb-handwritten-template-card.is-large-type .lb-calculator-guide-title strong {
  font-size: 23px;
  line-height: 1.15;
}

.lb-handwritten-template-card.is-large-type .lb-calculator-guide-title span {
  color: #514767;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.35;
}

.lb-handwritten-template-card.is-large-type .lb-calculator-step-heading > strong {
  font-size: 21px;
  line-height: 1.2;
}

.lb-handwritten-template-card.is-large-type .lb-calculator-lines {
  color: #086fae;
  font-size: 21px;
  line-height: 1.3;
}

.lb-handwritten-template-card.is-large-type .lb-calculator-step p {
  margin-top: 6px;
  color: #4f4662;
  font-size: 14px;
  line-height: 1.4;
}

.lb-handwritten-sheet-content footer {
  margin-top: auto;
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
}

.lb-handwritten-template-card.is-extended .lb-handwritten-sheet-content footer {
  margin-top: 12px;
}

.lb-handwritten-sheet-content footer small {
  color: #6843cf;
  font-size: 16px;
  font-weight: 700;
}

.lb-handwritten-sheet-content footer strong {
  font-size: 23px;
}

.lb-handwritten-sheet-content footer b {
  min-width: 210px;
  padding: 7px 24px;
  transform: rotate(-1deg);
  border: 2px solid #83be58;
  border-radius: 45% 8% 42% 10%;
  background: #e8f8da;
  color: #167647;
  font-size: 34px;
}

.lb-handwritten-sheet-content footer em {
  color: #45239a;
  font-size: 19px;
  font-style: normal;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: #f4c84e;
  text-decoration-thickness: 5px;
}

@media (max-width: 640px) {
  .lb-handwritten-solution {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }

  .lb-handwritten-solution svg.is-desktop { display: none; }
  .lb-handwritten-solution svg.is-mobile { display: block; }
  .lb-handwritten-ink text { font-size: 22px; }
  .lb-handwritten-ink .lb-handwritten-note { font-size: 21px; }
  .lb-handwritten-ink .lb-handwritten-title { font-size: 21px; }
  .lb-handwritten-ink .lb-handwritten-equation { font-size: 25px; }
  .lb-handwritten-ink .lb-handwritten-result { font-size: 45px; }
  .lb-handwritten-ink .lb-handwritten-answer { font-size: 24px; }

  .lb-handwritten-template-card { padding: 10px; }
  .lb-handwritten-template-meta { padding: 0 1px 7px; }
  .lb-handwritten-sheet-content header span { font-size: 11px; }
  .lb-handwritten-sheet-content h2 { font-size: 21px; }
  .lb-handwritten-sheet-content header p { margin-bottom: 7px; font-size: 12px; line-height: 1.3; }
  .lb-handwritten-template-sections { gap: 7px; }
  .lb-handwritten-template-sections section { padding: 6px 8px 7px; }
  .lb-handwritten-template-sections h3 { font-size: 16px; }
  .lb-handwritten-template-items { grid-template-columns: 1fr; gap: 1px; font-size: 14px; line-height: 1.35; }
  .lb-calculator-guide { gap: 7px; margin-top: 8px; }
  .lb-calculator-guide-title { display: grid; gap: 2px; padding: 7px 9px; }
  .lb-calculator-guide-title strong { font-size: 16px; }
  .lb-calculator-guide-title span { font-size: 10px; text-align: left; }
  .lb-calculator-step { padding: 7px 8px; }
  .lb-calculator-step-heading { gap: 6px; margin-bottom: 5px; }
  .lb-calculator-step-heading > b { width: 22px; height: 22px; font-size: 11px; }
  .lb-calculator-step-heading > strong { font-size: 15px; }
  .lb-calculator-lines { gap: 2px; font-size: 13px; line-height: 1.38; }
  .lb-calculator-step p { font-size: 10px; line-height: 1.3; }
  .lb-handwritten-template-card.is-large-type .lb-handwritten-sheet-content header span { font-size: 12px; }
  .lb-handwritten-template-card.is-large-type .lb-handwritten-sheet-content h2 { font-size: 25px; }
  .lb-handwritten-template-card.is-large-type .lb-handwritten-sheet-content header p { margin-bottom: 8px; font-size: 14px; line-height: 1.32; }
  .lb-handwritten-template-card.is-large-type .lb-calculator-guide-title strong { font-size: 18px; }
  .lb-handwritten-template-card.is-large-type .lb-calculator-guide-title span { font-size: 12px; }
  .lb-handwritten-template-card.is-large-type .lb-calculator-step-heading > strong { font-size: 18px; }
  .lb-handwritten-template-card.is-large-type .lb-calculator-lines { font-size: 19px; }
  .lb-handwritten-template-card.is-large-type .lb-calculator-step p { font-size: 14px; line-height: 1.35; }
  .lb-handwritten-sheet-content footer small { font-size: 13px; }
  .lb-handwritten-sheet-content footer strong { font-size: 18px; }
  .lb-handwritten-sheet-content footer b { min-width: 170px; padding: 5px 18px; font-size: 28px; }
  .lb-handwritten-sheet-content footer em { font-size: 16px; }
}

.lb-premium-panel {
  min-width: 0;
  min-height: 120px;
  display: grid;
  align-content: center;
  border: 1px dashed #c5b8ff;
  border-radius: 8px;
  background: #faf8ff;
  padding: 18px;
}

.lb-bottom-status {
  min-height: 48px;
  display: flex;
  justify-content: center;
  gap: 18px;
  align-items: center;
  margin-top: 16px;
  border: 1px solid var(--lb-line);
  border-radius: 8px;
  background: #fff;
  color: var(--lb-muted);
  font-size: 13px;
}

.lb-home {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: start;
  padding-top: 22px;
}

.lb-home-main,
.lb-home-sidebar,
.lb-home-rail {
  min-width: 0;
}

.lb-home-sidebar {
  padding: 16px;
  text-align: center;
}

.lb-home-cover {
  width: 150px;
  aspect-ratio: 3 / 4;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  margin: 0 auto 14px;
  border-radius: 5px;
  background: radial-gradient(circle at 72% 18%, rgba(255, 255, 255, .28), transparent 20%), linear-gradient(145deg, #3214a8, #130364 74%);
  color: #fff;
  box-shadow: 0 18px 32px rgba(45, 18, 154, .28);
  position: relative;
  overflow: hidden;
}

.lb-home-cover::before,
.lb-home-cover::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .28);
  transform: rotate(-10deg);
}

.lb-home-cover::before {
  width: 120px;
  height: 60px;
  left: 16px;
  bottom: 30px;
}

.lb-home-cover::after {
  width: 92px;
  height: 92px;
  right: -38px;
  top: 54px;
  border-radius: 50%;
}

.lb-home-cover span,
.lb-home-cover strong,
.lb-home-cover em,
.lb-home-cover i {
  position: relative;
  z-index: 1;
}

.lb-home-cover span {
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.lb-home-cover strong {
  max-width: 118px;
  font-size: 18px;
  line-height: 1.12;
  text-transform: uppercase;
}

.lb-home-cover em,
.lb-home-cover i {
  font-style: normal;
  font-size: 12px;
}

.lb-home-sidebar h2 {
  margin: 0;
  font-size: 21px;
  line-height: 1.18;
  font-weight: 900;
}

.lb-home-sidebar > p {
  margin: 7px 0 9px;
  color: #1e3471;
  font-size: 13px;
}

.lb-home-access {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  background: var(--lb-primary);
  color: #fff;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.lb-home-students {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 14px 0;
  color: #223a7b;
  font-size: 14px;
}

.lb-home-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.lb-home-metrics div {
  min-height: 64px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 8px;
  align-items: center;
  text-align: left;
  padding: 10px;
  border: 1px solid var(--lb-line);
  border-radius: 7px;
  background: #fff;
}

.lb-home-metrics i {
  grid-row: span 2;
  color: var(--lb-primary);
  font-size: 20px;
}

.lb-home-metrics strong {
  font-size: 20px;
  line-height: 1;
}

.lb-home-metrics span {
  color: var(--lb-muted);
  font-size: 11px;
}

.lb-streak-summary {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: -2px 0 8px;
  padding: 10px 12px;
  border: 1px solid #eadfff;
  border-radius: 10px;
  background: #faf7ff;
}

.lb-streak-summary > i { color: #7a39e8; margin-top: 2px; }
.lb-streak-summary.is-complete { border-color: #f1d994; background: #fff9e8; }
.lb-streak-summary.is-complete > i { color: #d79512; }
.lb-streak-summary strong,
.lb-streak-summary span { display: block; font-size: 11px; line-height: 1.4; }
.lb-streak-summary span { margin-top: 2px; color: var(--lb-muted); }
.lb-ranking-summary { margin: 0 0 12px; color: var(--lb-muted); font-size: 11px; line-height: 1.4; }

.lb-level-card,
.lb-route-level {
  margin-top: 14px;
  border: 1px solid rgba(79, 25, 245, .14);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(79, 25, 245, .08), rgba(255, 255, 255, .94));
  padding: 14px;
  color: var(--lb-ink);
}

.lb-level-card.is-admin,
.lb-route-level.is-admin,
.lb-route-level.is-guest {
  background: #fff;
}

.lb-route-level.is-mastered {
  border-color: #ffd879;
  background: linear-gradient(135deg, #fff7df, #ffffff);
  color: #7a4a00;
}

.lb-route-level.is-mastered > i {
  color: #8a5200;
}

.lb-level-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lb-level-card-head span,
.lb-route-level strong,
.lb-level-compact strong {
  color: var(--lb-ink);
  font-size: 15px;
  font-weight: 950;
}

.lb-level-card-head strong {
  color: var(--lb-primary);
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
}

.lb-level-card p,
.lb-route-level p,
.lb-route-level em,
.lb-level-compact em {
  margin: 8px 0 0;
  color: var(--lb-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
  line-height: 1.35;
}

.lb-level-bar {
  display: block;
  width: 100%;
  height: 8px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(79, 25, 245, .12);
}

.lb-level-bar b {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4f19f5, #16a3c7);
  transition: width .32s ease;
}

.lb-route-level {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.lb-route-level > i {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  background: #ede7ff;
  color: var(--lb-primary);
  font-size: 18px;
}

.lb-route-level .lb-level-bar {
  max-width: 420px;
}

.lb-level-compact {
  display: grid;
  gap: 7px;
}

.lb-level-compact span {
  color: var(--lb-primary);
  font-size: 13px;
  font-weight: 900;
}

.lb-level-strip {
  display: grid;
  grid-template-columns: auto auto minmax(120px, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}

.lb-level-strip strong {
  color: var(--lb-ink);
  font-size: 14px;
  font-weight: 950;
}

.lb-level-strip span,
.lb-level-strip em {
  color: var(--lb-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.lb-level-strip > span {
  color: var(--lb-primary);
}

.lb-level-strip.is-mastered {
  grid-template-columns: auto minmax(0, 1fr);
  border-color: #ffd879;
  background: linear-gradient(135deg, #fff7df, #ffffff);
}

.lb-level-strip.is-mastered strong {
  color: #7a4a00;
}

.lb-level-strip .lb-level-bar {
  margin-top: 0;
}

.lb-level-strip.is-guest,
.lb-level-strip.is-admin {
  grid-template-columns: minmax(0, 1fr) auto;
}

[data-livebook-level-card].is-level-up {
  animation: lb-level-card-flash .7s ease-out both;
}

@keyframes lb-level-card-flash {
  0% {
    box-shadow: 0 0 0 rgba(79, 25, 245, 0);
  }
  35% {
    box-shadow: 0 0 0 5px rgba(79, 25, 245, .16), 0 18px 34px rgba(79, 25, 245, .18);
  }
  100% {
    box-shadow: 0 0 0 rgba(79, 25, 245, 0);
  }
}

.lb-home-invite {
  display: grid;
  gap: 12px;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid #e3ddff;
  border-radius: 8px;
  background: #f7f4ff;
  text-align: left;
}

.lb-home-invite strong {
  font-size: 13px;
  line-height: 1.35;
}

.lb-home-menu {
  display: grid;
  gap: 4px;
  text-align: left;
  margin-top: 10px;
}

.lb-home-menu a {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 7px;
  padding: 0 12px;
  color: #172b68;
  font-weight: 600;
}

.lb-home-menu a:hover,
.lb-home-menu a.is-active {
  background: linear-gradient(90deg, rgba(75, 24, 244, .14), rgba(75, 24, 244, .05));
  color: var(--lb-primary);
}

.lb-home-menu i {
  width: 20px;
  text-align: center;
  font-size: 17px;
}

.lb-home-download {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  border: 1px solid var(--lb-primary);
  border-radius: 7px;
  color: var(--lb-primary);
  font-weight: 800;
}

.lb-continue-card {
  display: grid;
  grid-template-columns: minmax(0, .98fr) minmax(300px, .9fr);
  gap: 18px;
  min-height: 250px;
  padding: 24px 28px;
  border-color: #cbc0ff;
  overflow: hidden;
}

.lb-focus-card {
  min-height: 330px;
  grid-template-columns: minmax(0, 1.08fr) minmax(290px, .72fr);
  align-items: stretch;
  border: 0;
  border-radius: 24px;
  background:
    radial-gradient(circle at 86% 12%, rgba(95, 220, 255, .28), transparent 26%),
    radial-gradient(circle at 58% 108%, rgba(142, 91, 255, .42), transparent 36%),
    linear-gradient(135deg, #15085d 0%, #3512a5 54%, #5823d8 100%);
  box-shadow: 0 22px 48px rgba(37, 18, 120, .24);
  color: #fff;
}

.lb-home .lb-focus-card.lb-chapter-hero--bm00 {
  background:
    radial-gradient(circle at 86% 12%, rgba(95, 220, 255, .2), transparent 24%),
    linear-gradient(100deg, rgba(21, 8, 93, .99) 0%, rgba(47, 16, 150, .96) 43%, rgba(55, 21, 153, .76) 68%, rgba(34, 10, 94, .52) 100%),
    url("../images/livebook/chapters/bm00-hero-refined-local.png");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}

.lb-focus-card .lb-continue-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: none;
  padding: 4px 0;
}

.lb-focus-card .lb-focus-eyebrow {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  background: rgba(255, 255, 255, .11);
  padding: 7px 11px;
  color: #dff7ff;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lb-focus-card .lb-continue-copy h2,
.lb-focus-card .lb-continue-copy p,
.lb-focus-card .lb-continue-copy strong,
.lb-focus-card .lb-continue-progress span {
  color: #fff;
  text-shadow: none;
}

.lb-focus-card .lb-continue-copy h2 {
  max-width: 560px;
  font-size: clamp(32px, 3vw, 47px);
  letter-spacing: -.035em;
}

.lb-focus-card .lb-focus-chapter {
  margin: 15px 0 5px;
  color: #c9c3ff;
  font-size: 14px;
  font-weight: 900;
}

.lb-focus-card .lb-continue-copy > strong {
  font-size: 19px;
}

.lb-focus-card .lb-continue-progress {
  margin: 19px 0;
}

.lb-focus-card .lb-continue-progress span {
  color: #e7e4ff;
  font-size: 14px;
  font-weight: 800;
}

.lb-focus-card .lb-continue-progress i {
  background: rgba(255, 255, 255, .17);
}

.lb-focus-card .lb-continue-progress b {
  background: linear-gradient(90deg, #77e4ff, #fff);
}

.lb-focus-card .lb-btn-primary {
  border-color: #fff;
  background: #fff;
  color: #3512a5;
  box-shadow: 0 12px 24px rgba(10, 4, 52, .24);
}

.lb-focus-card .lb-btn-primary:hover {
  background: #f4f1ff;
}

.lb-focus-card .lb-btn-ghost {
  border-color: rgba(255, 255, 255, .42);
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.lb-focus-card .lb-btn-ghost:hover {
  background: rgba(255, 255, 255, .16);
}

.lb-focus-dashboard {
  display: grid;
  align-content: center;
  gap: 12px;
  min-width: 0;
}

.lb-focus-problem {
  position: relative;
  min-height: 154px;
  display: grid;
  place-items: center;
  align-content: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(45, 19, 139, .78), rgba(16, 7, 65, .58));
  backdrop-filter: blur(5px);
  box-shadow: inset 0 1px rgba(255, 255, 255, .12);
  text-align: center;
}

.lb-focus-problem::after {
  content: "";
  position: absolute;
  width: 118px;
  height: 118px;
  right: -40px;
  bottom: -52px;
  border: 24px solid rgba(112, 229, 255, .16);
  border-radius: 50%;
}

.lb-focus-problem span {
  color: #d9d3ff;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.lb-focus-problem strong {
  margin: 3px 0;
  color: #fff;
  font-size: 58px;
  line-height: 1;
}

.lb-focus-problem small {
  max-width: 220px;
  color: #dff7ff;
  font-size: 12px;
  font-weight: 800;
}

.lb-focus-facts {
  display: grid;
  gap: 8px;
}

.lb-focus-facts > div {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 13px;
  background: rgba(13, 6, 68, .64);
  backdrop-filter: blur(5px);
  padding: 9px 11px;
}

.lb-focus-facts > div > i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, .12);
  color: #7fe6ff;
}

.lb-focus-facts > div.is-complete > i { color: #ffd85d; }
.lb-focus-facts span { min-width: 0; }
.lb-focus-facts strong,
.lb-focus-facts small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-focus-facts strong { color: #fff; font-size: 12px; }
.lb-focus-facts small { margin-top: 2px; color: #c7c1f2; font-size: 10px; }

.lb-refined-next-card {
  min-height: 360px;
  display: block;
  position: relative;
  border-color: #eadfc9;
  border-radius: 20px;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, .99) 0%, rgba(255, 255, 255, .96) 38%, rgba(255, 255, 255, .72) 53%, rgba(255, 255, 255, .08) 76%),
    url("../images/livebook/chapters/bm00-hero-refined-local.png");
  background-size: cover;
  background-position: center right;
  box-shadow: 0 18px 40px rgba(47, 31, 8, .13);
}

.lb-refined-next-card .lb-continue-copy {
  max-width: 54%;
  min-height: 308px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.lb-refined-kicker {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: #eee8ff;
  padding: 7px 11px;
  color: #4f19c9;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.lb-refined-next-card .lb-continue-copy h2 {
  color: #071a58;
  font-size: clamp(34px, 3.2vw, 49px);
  letter-spacing: -.035em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}

.lb-refined-next-card .lb-continue-copy p {
  margin: 13px 0 5px;
  color: #35446e;
  font-size: 15px;
  font-weight: 750;
}

.lb-refined-next-card .lb-continue-copy > strong {
  color: #08184d;
  font-size: 23px;
}

.lb-refined-progress {
  width: min(100%, 380px);
  display: grid;
  gap: 8px;
  margin: 20px 0;
}

.lb-refined-progress span {
  color: #22325f;
  font-size: 13px;
  font-weight: 850;
}

.lb-refined-progress span b { color: #4f19d8; font-size: 18px; }
.lb-refined-progress > i { height: 8px; overflow: hidden; border-radius: 999px; background: #e5e8f1; }
.lb-refined-progress > i > b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4f19f5, #8b53ff); }
.lb-refined-next-card .lb-btn-primary { box-shadow: 0 12px 25px rgba(79, 25, 245, .22); }

.lb-refined-next-card.is-test-guided {
  min-height: 430px;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, .995) 0%, rgba(255, 255, 255, .97) 44%, rgba(255, 255, 255, .68) 59%, rgba(255, 255, 255, .06) 79%),
    url("../images/livebook/chapters/bm00-hero-refined-local.png");
}

.lb-refined-next-card.is-test-guided .lb-continue-copy {
  max-width: 61%;
  min-height: 378px;
}

.lb-refined-next-card.is-test-guided .lb-continue-copy h2 {
  max-width: 650px;
  font-size: clamp(32px, 3vw, 46px);
  line-height: 1.02;
}

.lb-test-guided-metrics {
  width: min(100%, 520px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 18px;
}

.lb-test-guided-metrics > span {
  min-width: 0;
  border: 1px solid rgba(88, 51, 192, .14);
  border-radius: 13px;
  background: rgba(248, 246, 255, .92);
  padding: 10px 12px;
}

.lb-test-guided-metrics small,
.lb-test-guided-metrics b {
  display: block;
}

.lb-test-guided-metrics small {
  overflow: hidden;
  color: #65708f;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .02em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.lb-test-guided-metrics b {
  margin-top: 3px;
  color: #3210a6;
  font-size: 18px;
  line-height: 1.15;
}

.lb-test-guided-progress {
  width: min(100%, 520px);
  margin: 15px 0 17px;
}

.lb-test-guided-progress small {
  color: #65708f;
  font-size: 11px;
  font-weight: 750;
}

.lb-reinforcement {
  border: 1px solid #dcdff0;
  border-radius: 22px;
  background: #fff;
  padding: 24px;
  box-shadow: 0 14px 34px rgba(25, 35, 82, .07);
}

.lb-reinforcement-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.lb-reinforcement-head > div:first-child > span {
  color: #6130dc;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lb-reinforcement-head h2 { margin: 3px 0 5px; color: #0b194c; font-size: 27px; }
.lb-reinforcement-head p { margin: 0; color: #68738f; font-size: 13px; }
.lb-reinforcement-time { display: flex; align-items: center; gap: 7px; border-radius: 999px; background: #f0ebff; padding: 9px 12px; color: #5522cf; font-size: 12px; white-space: nowrap; }

.lb-reinforcement-list { display: grid; grid-template-columns: 1fr; gap: 10px; }

.lb-reinforcement-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px 40px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  position: relative;
  border: 1px solid #e0e4ef;
  border-radius: 16px;
  background: linear-gradient(155deg, #fff, #faf9ff);
  padding: 14px 12px;
}

.lb-reinforcement-item.is-retry { border-color: #f2c587; background: linear-gradient(155deg, #fff, #fff8ed); }
.lb-reinforcement-order { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: #eeebf8; color: #5a2bcf; font-size: 11px; font-weight: 950; }
.lb-reinforcement-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: #eee9ff; color: #5927d5; }
.lb-reinforcement-item.is-retry .lb-reinforcement-icon { background: #fff0d5; color: #b65b00; }
.lb-reinforcement-copy { min-width: 0; }
.lb-reinforcement-copy > small { color: #6a38db; font-size: 11px; font-weight: 950; letter-spacing: .05em; text-transform: uppercase; }
.lb-reinforcement-item.is-retry .lb-reinforcement-copy > small { color: #a85000; }
.lb-reinforcement-copy h3 { margin: 3px 0 5px; color: #101d4b; font-size: 17px; }
.lb-reinforcement-copy p { margin: 0 0 9px; color: #66718b; font-size: 13px; line-height: 1.48; }
.lb-reinforcement-copy > div { display: flex; flex-wrap: wrap; gap: 5px; }
.lb-reinforcement-copy > div span { border-radius: 999px; background: #f0f2f8; padding: 4px 7px; color: #56617c; font-size: 11px; font-weight: 800; }
.lb-reinforcement-action { display: flex; min-height: 44px; align-items: center; justify-content: center; gap: 7px; align-self: center; border: 0; border-radius: 10px; background: #5420dc; padding: 10px 12px; color: #fff; font-size: 13px; font-weight: 900; text-decoration: none; cursor: pointer; }
.lb-reinforcement-action:hover { background: #3910b5; color: #fff; transform: translateX(2px); }
.lb-reinforcement-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; color: #69738c; font-size: 13px; }
.lb-reinforcement-foot span i { margin-right: 5px; color: #6b36e6; }
.lb-reinforcement-foot a { min-height: 44px; display: inline-flex; align-items: center; color: #4d1ed0; font-weight: 900; }

.lb-bm00-journey {
  overflow: hidden;
  border: 1px solid #ded9f2;
  border-radius: 22px;
  background: linear-gradient(155deg, #fff 0%, #fbfaff 60%, #f4f0ff 100%);
  padding: 24px;
  box-shadow: 0 16px 36px rgba(32, 24, 91, .08);
}

.lb-journey-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.lb-journey-head > div:first-child > span {
  color: #6b36e6;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.lb-journey-head h2 { margin: 3px 0 5px; color: #0b194c; font-size: 28px; }
.lb-journey-head p { margin: 0; color: #697490; font-size: 13px; }

.lb-journey-total {
  min-width: 112px;
  display: grid;
  place-items: center;
  align-content: center;
  border: 1px solid #ded5fb;
  border-radius: 16px;
  background: #fff;
  padding: 10px 14px;
  color: #4f19d8;
  text-align: center;
}

.lb-journey-total strong { font-size: 25px; line-height: 1; }
.lb-journey-total strong small { color: #7b6f9d; font-size: 13px; }
.lb-journey-total > i { margin-bottom: 4px; font-size: 20px; }
.lb-journey-total span { margin-top: 3px; color: #6f7892; font-size: 12px; font-weight: 850; }

.lb-journey-track {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1fr);
  align-items: stretch;
}

.lb-journey-node {
  min-width: 0;
  min-height: 282px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
  position: relative;
  border: 1px solid #e0e4ef;
  border-radius: 18px;
  background: #fff;
  padding: 16px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.lb-journey-node.is-active,
.lb-journey-node.is-available {
  border-color: #7040ee;
  box-shadow: 0 14px 28px rgba(79, 25, 216, .14);
  transform: translateY(-3px);
}

.lb-journey-node.is-completed { border-color: #8ed9bd; background: linear-gradient(155deg, #fff, #f1fff9); }
.lb-journey-node.is-locked,
.lb-journey-node.is-upcoming { background: #f7f8fb; }
.lb-journey-node.is-review { border-style: dashed; border-color: #a997df; }

.lb-journey-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lb-journey-step > span {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  background: #ebe6fb;
  color: #5b2ad3;
  font-size: 11px;
  font-weight: 950;
}

.lb-journey-step > i {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  background: #eee9ff;
  color: #5a24dc;
  font-size: 18px;
}

.lb-journey-node.is-completed .lb-journey-step > span,
.lb-journey-node.is-completed .lb-journey-step > i { background: #dff8ed; color: #07875c; }
.lb-journey-node.is-locked .lb-journey-step > i,
.lb-journey-node.is-upcoming .lb-journey-step > i { background: #eceef4; color: #9299aa; }

.lb-journey-copy { min-width: 0; display: flex; flex-direction: column; }
.lb-journey-copy > small { color: #6b36e6; font-size: 12px; font-weight: 950; letter-spacing: .04em; text-transform: uppercase; }
.lb-journey-node.is-completed .lb-journey-copy > small { color: #07875c; }
.lb-journey-node.is-locked .lb-journey-copy > small,
.lb-journey-node.is-upcoming .lb-journey-copy > small { color: #858da1; }
.lb-journey-copy h3 { margin: 5px 0 6px; color: #0e1b4a; font-size: 17px; line-height: 1.18; }
.lb-journey-copy p { min-height: 52px; margin: 0; color: #6b748c; font-size: 13px; line-height: 1.5; }

.lb-journey-progress { display: grid; gap: 7px; margin-top: auto; padding-top: 14px; }
.lb-journey-progress span { color: #4c5876; font-size: 12px; font-weight: 800; }
.lb-journey-progress span b { color: #3812a4; font-size: 15px; }
.lb-journey-progress > i { height: 7px; overflow: hidden; border-radius: 999px; background: #e8eaf1; }
.lb-journey-progress > i > b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5a20e5, #9a64ff); }
.lb-journey-node.is-completed .lb-journey-progress > i > b { background: #10a874; }

.lb-journey-test-rule { display: flex; align-items: baseline; gap: 6px; margin-top: auto; padding-top: 14px; }
.lb-journey-test-rule b { color: #4f19d8; font-size: 24px; }
.lb-journey-test-rule span { color: #6b748c; font-size: 12px; font-weight: 800; }

.lb-journey-action {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  border: 0;
  border-radius: 11px;
  background: #4f19e5;
  min-height: 44px;
  padding: 10px 12px;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}

.lb-journey-action:hover { background: #3910ba; color: #fff; }
.lb-journey-connector { align-self: center; height: 3px; background: #ddd9eb; position: relative; }
.lb-journey-connector::after { content: ""; position: absolute; width: 7px; height: 7px; right: 0; top: -2px; border-top: 2px solid #aaa1c5; border-right: 2px solid #aaa1c5; transform: rotate(45deg); }

.lb-journey-note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  border-radius: 12px;
  background: #f2effb;
  padding: 10px 12px;
  color: #5e6680;
  font-size: 13px;
  font-weight: 750;
}

.lb-journey-note i { color: #6b36e6; }

.lb-chapter-hero {
  background: #fff;
}

.lb-chapter-hero--bm00 {
  min-height: 300px;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .95) 34%, rgba(255, 255, 255, .64) 52%, rgba(255, 255, 255, .08) 72%),
    url("../images/livebook/chapters/bm00-hero.webp");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  border-color: #e7dcc6;
}

.lb-home .lb-chapter-hero--bm00 {
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .95) 34%, rgba(255, 255, 255, .64) 52%, rgba(255, 255, 255, .08) 72%),
    url("../images/livebook/chapters/bm00-hero-refined-local.png");
}

.lb-chapter-hero--bm01 {
  min-height: 300px;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .95) 34%, rgba(255, 255, 255, .64) 52%, rgba(255, 255, 255, .08) 72%),
    url("../images/livebook/chapters/bm01-hero.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-color: #e7dcc6;
}

.lb-chapter-hero--bm00 .lb-continue-copy,
.lb-chapter-hero--bm01 .lb-continue-copy {
  position: relative;
  z-index: 1;
  max-width: 560px;
  padding: 4px 0;
}

.lb-chapter-hero--bm00 .lb-continue-copy h2,
.lb-chapter-hero--bm00 .lb-continue-copy strong,
.lb-chapter-hero--bm00 .lb-continue-copy p,
.lb-chapter-hero--bm00 .lb-continue-progress span,
.lb-chapter-hero--bm01 .lb-continue-copy h2,
.lb-chapter-hero--bm01 .lb-continue-copy strong,
.lb-chapter-hero--bm01 .lb-continue-copy p,
.lb-chapter-hero--bm01 .lb-continue-progress span {
  text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
}

.lb-chapter-hero--bm00 .lb-continue-art,
.lb-chapter-hero--bm01 .lb-continue-art {
  display: none;
}

.lb-continue-copy h2,
.lb-home-section h2,
.lb-side-widget h2 {
  margin: 0;
  font-weight: 900;
  letter-spacing: 0;
}

.lb-continue-copy h2 {
  font-size: 32px;
  line-height: 1.1;
}

.lb-continue-copy p {
  margin: 10px 0 8px;
  font-size: 18px;
  color: #071a58;
}

.lb-continue-copy strong {
  display: block;
  font-size: 17px;
  color: #071a58;
}

.lb-continue-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 20px;
}

.lb-continue-progress span {
  font-size: 18px;
  font-weight: 500;
}

.lb-continue-progress i,
.lb-feature-progress,
.lb-path-bar {
  height: 7px;
  display: block;
  border-radius: 999px;
  background: #e8ebf3;
  overflow: hidden;
}

.lb-continue-progress i {
  width: 230px;
}

.lb-continue-progress b,
.lb-feature-progress b,
.lb-path-bar b {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--lb-primary);
}

.lb-w-0 { width: 0; }
.lb-w-10 { width: 10%; }
.lb-w-20 { width: 20%; }
.lb-w-30 { width: 30%; }
.lb-w-31 { width: 31%; }
.lb-w-40 { width: 40%; }
.lb-w-42 { width: 42%; }
.lb-w-46 { width: 46%; }
.lb-w-50 { width: 50%; }
.lb-w-60 { width: 60%; }
.lb-w-70 { width: 70%; }
.lb-w-80 { width: 80%; }
.lb-w-90 { width: 90%; }
.lb-w-100 { width: 100%; }

.lb-continue-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.lb-home .lb-availability,
.lb-home .lb-student-progress {
  align-items: flex-start;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0 18px;
}

.lb-home .lb-availability span,
.lb-home .lb-student-progress span {
  display: block;
  line-height: 1.25;
  white-space: nowrap;
}

.lb-home .lb-availability span strong,
.lb-home .lb-student-progress span strong {
  display: inline;
  color: inherit;
  font-size: inherit;
}

.lb-home .lb-availability i,
.lb-home .lb-student-progress i {
  width: min(100%, 360px);
}

@media (max-width: 640px) {
  .lb-home .lb-availability,
  .lb-home .lb-student-progress {
    gap: 7px;
    margin: 14px 0 16px;
  }

  .lb-home .lb-availability span,
  .lb-home .lb-student-progress span {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.25;
  }

  .lb-home .lb-availability i,
  .lb-home .lb-student-progress i {
    width: 100%;
  }
}

.lb-continue-actions .lb-btn {
  min-width: 160px;
}

.lb-continue-progress--status {
  margin-bottom: 18px;
}

.lb-continue-progress--status span {
  display: inline-flex;
  width: fit-content;
  border: 1px solid #e7dcc6;
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  color: #071a58;
  padding: 8px 12px;
  font-size: 15px;
  font-weight: 800;
}

.lb-continue-link {
  color: var(--lb-primary);
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.lb-continue-link:hover {
  text-decoration: underline;
}

.lb-btn-ghost {
  background: #fff;
  border-color: #bbaeff;
  color: var(--lb-primary);
}

.lb-btn-ghost:hover {
  background: #f6f3ff;
}

.lb-continue-art {
  position: relative;
  min-height: 200px;
}

.lb-formula,
.lb-sequence {
  position: absolute;
  color: var(--lb-primary);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
}

.lb-formula {
  top: 8px;
  left: 28px;
  font-size: 26px;
}

.lb-sequence {
  top: 84px;
  left: 0;
  font-size: 24px;
}

.lb-book-shape {
  position: absolute;
  width: 230px;
  height: 84px;
  right: 56px;
  bottom: 6px;
  border-radius: 50% 50% 14px 14px;
  background: linear-gradient(168deg, rgba(255, 255, 255, .92) 0 48%, rgba(110, 76, 226, .3) 49% 52%, rgba(255, 255, 255, .9) 53%), linear-gradient(180deg, #fff, #ded7ff);
  box-shadow: 0 16px 24px rgba(45, 18, 154, .22);
  transform: perspective(260px) rotateX(18deg);
}

.lb-graph-shape {
  position: absolute;
  width: 150px;
  height: 130px;
  right: 0;
  top: 28px;
  background: linear-gradient(var(--lb-primary), var(--lb-primary)) 22px 20px / 1px 98px no-repeat, linear-gradient(90deg, var(--lb-primary), var(--lb-primary)) 0 98px / 122px 1px no-repeat;
}

.lb-graph-shape::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, var(--lb-primary) 0 3px, transparent 4px) 20px 96px / 100% 100% no-repeat, radial-gradient(circle, var(--lb-primary) 0 3px, transparent 4px) 55px 72px / 100% 100% no-repeat, radial-gradient(circle, var(--lb-primary) 0 3px, transparent 4px) 90px 52px / 100% 100% no-repeat, linear-gradient(150deg, transparent 41%, var(--lb-primary) 42% 43%, transparent 44%);
}

.lb-home-section {
  margin-top: 12px;
}

.lb-access-strip {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  border: 1px solid #e2e7f4;
  border-radius: 8px;
  background: #fff;
  padding: 8px 10px 8px 14px;
  box-shadow: 0 8px 18px rgba(19, 35, 82, .04);
}

.lb-access-strip div {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: #53627f;
  font-size: 13px;
  font-weight: 800;
}

.lb-access-strip strong {
  color: var(--lb-ink);
  font-weight: 950;
}

.lb-access-strip span::before {
  content: "\00b7";
  margin-right: 8px;
  color: #9aa4b8;
}

.lb-access-strip .lb-btn {
  min-height: 34px;
  padding-inline: 12px;
  font-size: 12px;
}

.lb-home-section h2 {
  margin: 0 0 8px 2px;
  font-size: 22px;
}

.lb-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.lb-feature-card {
  min-height: 130px;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 12px;
  align-items: start;
  padding: 16px;
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.lb-feature-card:hover {
  transform: translateY(-2px);
  border-color: #c9bfff;
  box-shadow: 0 18px 34px rgba(19, 35, 82, .11);
}

.lb-feature-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f1edff;
  color: var(--lb-primary);
  font-size: 22px;
}

.lb-feature-card:nth-child(3n) .lb-feature-icon,
.lb-feature-card:nth-child(4n) .lb-feature-icon {
  background: #edf9f1;
  color: var(--lb-green);
}

.lb-feature-card:nth-child(5n) .lb-feature-icon {
  background: #fff1e8;
  color: #d6561c;
}

.lb-feature-card h3 {
  margin: 2px 0 8px;
  font-size: 16px;
  line-height: 1.2;
}

.lb-feature-card h3 em {
  display: inline-flex;
  margin-left: 4px;
  border-radius: 5px;
  background: var(--lb-vip);
  color: var(--lb-primary);
  padding: 4px 6px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.lb-feature-card p {
  margin: 0;
  color: #2d4077;
  font-size: 13px;
}

.lb-feature-progress {
  grid-column: 1 / -1;
  width: 100%;
}

.lb-feature-card > strong {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--lb-primary);
  font-size: 14px;
}

.lb-feature-card.is-locked::after {
  content: "\f023";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  top: 14px;
  right: 14px;
  color: #7e6be8;
}

.lb-path-card {
  padding: 8px 14px 10px;
}

.lb-bm00-route {
  display: grid;
  gap: 14px;
}

.lb-route-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.lb-route-title span {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  background: #f0ecff;
  color: var(--lb-primary);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 800;
}

.lb-route-title h2 {
  margin: 8px 0 4px;
}

.lb-route-title p {
  margin: 0;
  color: #53627f;
}

.lb-route-ring {
  width: 92px;
  height: 92px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #fff 57%, transparent 58%),
    conic-gradient(var(--lb-primary) var(--value), #e9edf6 0);
  box-shadow: 0 14px 30px rgba(75, 24, 244, .11);
}

.lb-route-ring strong,
.lb-route-ring span {
  grid-area: 1 / 1;
}

.lb-route-ring strong {
  align-self: center;
  color: var(--lb-primary);
  font-size: 22px;
}

.lb-route-ring span {
  align-self: end;
  margin-bottom: 20px;
  color: #6d7790;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.lb-bm00-mission,
.lb-next-mission-compact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}

.lb-bm00-mission {
  padding: 20px;
}

.lb-next-mission-compact {
  margin-bottom: 14px;
  padding: 18px 20px;
}

.lb-mission-icon,
.lb-next-mission-compact > span {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #4b18f4, #7c3cff);
  color: #fff;
  box-shadow: 0 14px 24px rgba(75, 24, 244, .2);
}

.lb-bm00-mission span,
.lb-next-mission-compact small {
  color: var(--lb-primary);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.lb-bm00-mission h3,
.lb-next-mission-compact strong {
  display: block;
  margin: 3px 0;
  color: #101f4f;
  font-size: 18px;
}

.lb-bm00-mission p,
.lb-next-mission-compact p {
  margin: 0;
  color: #53627f;
}

.lb-next-mission-compact .lb-btn,
.lb-bm00-mission .lb-btn {
  justify-self: end;
  margin-right: 2px;
  white-space: nowrap;
}

.lb-route-map {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 32px minmax(120px, 1fr) 32px minmax(120px, 1fr) 32px minmax(120px, 1fr) 32px minmax(120px, 1fr);
  align-items: stretch;
  gap: 8px;
  padding: 18px;
  overflow: hidden;
}

.lb-route-node a {
  min-height: 150px;
  height: 100%;
  display: grid;
  align-content: start;
  gap: 7px;
  border: 1px solid #dfe5f2;
  border-radius: 12px;
  background: #fff;
  padding: 14px;
  color: #16204a;
  text-decoration: none;
}

.lb-route-node-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #edf2ff;
  color: #3554d1;
}

.lb-route-node small {
  color: #62708e;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.lb-route-node strong {
  font-size: 17px;
  line-height: 1.2;
}

.lb-route-node em {
  color: #53627f;
  font-size: 12px;
  font-style: normal;
}

.lb-route-node.is-in_progress a {
  border-color: #cfc3ff;
  background: #fbfaff;
  box-shadow: 0 14px 30px rgba(75, 24, 244, .1);
}

.lb-route-node.is-in_progress .lb-route-node-icon,
.lb-route-node.is-available .lb-route-node-icon {
  background: var(--lb-vip);
  color: var(--lb-primary);
}

.lb-route-node.is-completed .lb-route-node-icon,
.lb-route-node.is-dominated .lb-route-node-icon {
  background: #e8f8ef;
  color: var(--lb-green);
}

.lb-route-node.is-locked a {
  background: #f7f8fb;
  color: #778199;
}

.lb-route-link {
  align-self: center;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #d8def0, #b9c3dc);
}

.lb-route-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lb-route-facts span,
.lb-route-admin-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e0e5f1;
  border-radius: 999px;
  background: #fff;
  padding: 8px 12px;
  color: #39476a;
  font-size: 13px;
  font-weight: 700;
}

.lb-badge-gallery {
  display: grid;
  gap: 16px;
}

.lb-badges-guest {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
}

.lb-badges-guest > i {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 16px;
  background: #ede7ff;
  color: var(--lb-primary);
  font-size: 20px;
}

.lb-badges-guest strong {
  display: block;
  color: var(--lb-ink);
  font-size: 17px;
  font-weight: 950;
}

.lb-badges-guest p {
  margin: 4px 0 0;
  color: #53627f;
}

.lb-badge-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.lb-badge-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  min-height: 128px;
  padding: 16px;
  border: 1px solid #dfe5f2;
  border-radius: 14px;
  background: #fff;
  color: var(--lb-ink);
}

.lb-badge-card.is-earned {
  border-color: #c9f4dc;
  background: linear-gradient(135deg, #effff6, #ffffff);
}

.lb-badge-card.is-locked {
  background: #f7f8fb;
  color: #7a859b;
}

.lb-badge-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 16px;
  background: #edf2ff;
  color: #3554d1;
}

.lb-badge-card.is-earned .lb-badge-icon {
  background: #e8f8ef;
  color: var(--lb-green);
}

.lb-badge-card.is-legendaria.is-earned .lb-badge-icon {
  background: #fff0bd;
  color: #8a5200;
}

.lb-badge-card strong {
  display: block;
  font-size: 16px;
  font-weight: 950;
}

.lb-badge-card p {
  margin: 5px 0 8px;
  color: #53627f;
  font-size: 13px;
}

.lb-badge-card em {
  color: var(--lb-primary);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.lb-progress-page .lb-home-main,
.lb-achievements-page .lb-home-main {
  display: grid;
  gap: 18px;
}

.lb-progress-hero,
.lb-achievements-view {
  display: grid;
  gap: 18px;
}

.lb-progress-gate {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 20px;
}

.lb-progress-gate > i {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 16px;
  background: #ede7ff;
  color: var(--lb-primary);
  font-size: 21px;
}

.lb-progress-gate strong {
  display: block;
  color: var(--lb-ink);
  font-size: 18px;
  font-weight: 950;
}

.lb-progress-gate p {
  margin: 4px 0 0;
  color: #53627f;
}

.lb-progress-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.lb-progress-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  min-height: 136px;
  padding: 16px;
}

.lb-progress-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 15px;
  background: #edf2ff;
  color: #3554d1;
}

.lb-progress-card small,
.lb-campaign-card span {
  color: var(--lb-primary);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.lb-progress-card strong {
  display: block;
  margin: 3px 0;
  color: var(--lb-ink);
  font-size: 26px;
  line-height: 1;
}

.lb-progress-card p {
  margin: 0;
  color: #53627f;
  font-size: 13px;
}

.lb-campaign-card {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  gap: 18px;
  align-items: center;
  padding: 20px;
}

.lb-campaign-card h2,
.lb-progress-split h2 {
  margin: 4px 0;
  color: var(--lb-ink);
  font-size: 22px;
}

.lb-campaign-card p {
  margin: 0 0 12px;
  color: #53627f;
}

.lb-campaign-status {
  display: grid;
  gap: 8px;
}

.lb-campaign-status strong {
  color: var(--lb-green);
  font-size: 22px;
  font-weight: 950;
}

.lb-campaign-status span {
  color: #53627f;
  font-size: 13px;
  font-weight: 800;
  text-transform: none;
}

.lb-progress-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.lb-progress-split > .lb-card {
  align-self: start;
  padding: 22px;
}

.lb-progress-split > .lb-card > h2 {
  margin-bottom: 18px;
}

.lb-progress-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
}

.lb-progress-stats div {
  border: 1px solid #edf1f7;
  border-radius: 10px;
  background: #fbfcff;
  padding: 16px;
}

.lb-progress-stats dt {
  color: #64708a;
  font-size: 11px;
  font-weight: 800;
}

.lb-progress-stats dd {
  margin: 3px 0 0;
  color: var(--lb-ink);
  font-size: 20px;
  font-weight: 950;
}

.lb-progress-note {
  margin: 10px 0 0;
  color: #64708a;
  font-size: 12px;
  line-height: 1.45;
}

.lb-activity-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.lb-activity-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #edf1f7;
  padding: 9px 0;
}

.lb-activity-list span {
  color: var(--lb-ink);
  font-weight: 800;
}

.lb-activity-list strong {
  color: var(--lb-primary);
  white-space: nowrap;
}

.lb-activity-timeline {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 2px 4px 0;
  list-style: none;
}

.lb-activity-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  padding: 0 0 16px;
}

.lb-activity-timeline li:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 34px;
  bottom: 2px;
  left: 18px;
  width: 2px;
  background: #e7ecf8;
}

.lb-activity-dot {
  position: relative;
  z-index: 1;
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: #f1edff;
  color: var(--lb-primary);
  box-shadow: inset 0 0 0 1px rgba(82, 35, 255, .12);
}

.lb-activity-timeline a,
.lb-activity-timeline strong {
  display: inline-block;
  color: var(--lb-ink);
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
}

.lb-activity-timeline a:hover {
  color: var(--lb-primary);
}

.lb-activity-timeline p {
  margin: 3px 0 2px;
  color: #53627f;
  font-size: 13px;
  line-height: 1.35;
}

.lb-activity-timeline b {
  color: var(--lb-primary);
  font-weight: 950;
}

.lb-activity-timeline time {
  color: #8390a8;
  font-size: 12px;
  font-weight: 800;
}

.lb-empty-copy {
  margin: 12px 0 0;
  color: #64708a;
}

.lb-achievement-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.lb-achievement-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  min-height: 190px;
  border: 1px solid #dfe5f2;
  border-radius: 16px;
  background: #fff;
  padding: 18px;
}

.lb-achievement-card .lb-badge-icon.has-art {
  width: 92px;
  height: 92px;
  overflow: visible;
  border-radius: 0;
  background: transparent;
}

.lb-achievement-card .lb-badge-icon.has-art img {
  display: block;
  width: 92px;
  height: 92px;
  object-fit: contain;
}

.lb-achievement-card.is-locked .lb-badge-icon.has-art img {
  filter: grayscale(.62) brightness(.82);
  opacity: .72;
}

.lb-premium-panel > * {
  min-width: 0;
  max-width: 100%;
}

.lb-editorial-admin-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
}

.lb-editorial-admin-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid #cbbdff;
  border-radius: 10px;
  background: #fff;
  color: #5421d6;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.lb-editorial-admin-link:hover,
.lb-editorial-admin-link:focus-visible {
  border-color: #6b35ef;
  color: #4314bd;
  box-shadow: 0 0 0 3px rgba(107, 53, 239, .12);
  text-decoration: none;
}

@media (max-width: 640px) {
  .lb-editorial-admin-bar {
    align-items: flex-start;
    flex-direction: column;
  }
}

.lb-achievement-card.is-earned {
  border-color: #c9f4dc;
  background: linear-gradient(135deg, #effff6, #ffffff);
}

.lb-achievement-card.is-elite {
  border-color: #edc64e;
  background: radial-gradient(circle at 12% 12%, #fff0a5 0, transparent 28%), linear-gradient(135deg, #fff9d6, #fff, #f4eeff);
  box-shadow: 0 12px 30px rgba(157, 105, 0, .14);
}

.lb-achievement-card.is-locked {
  background: #f7f8fb;
  color: #7a859b;
}

.lb-achievement-card small {
  color: var(--lb-primary);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.lb-achievement-card h2 {
  margin: 4px 0 6px;
  color: var(--lb-ink);
  font-size: 21px;
}

.lb-achievement-card p {
  margin: 0 0 12px;
  color: #53627f;
}

.lb-achievement-card em,
.lb-achievement-card span {
  display: block;
  color: var(--lb-primary);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.lb-home-menu .is-disabled {
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: 7px;
  color: #99a3b7;
  padding: 10px 12px;
  cursor: not-allowed;
}

.lb-home-menu .is-disabled em {
  margin-left: auto;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.lb-progress-rail,
.lb-achievements-rail {
  display: grid;
  gap: 14px;
}

.lb-rail-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 16px;
}

.lb-rail-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  background: #edf2ff;
  color: #3554d1;
}

.lb-rail-card small {
  color: var(--lb-primary);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.lb-rail-card strong {
  display: block;
  margin: 3px 0;
  color: var(--lb-ink);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.15;
}

.lb-rail-card p {
  margin: 3px 0;
  color: #53627f;
  font-size: 13px;
}

.lb-rail-card a,
.lb-rail-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-top: 8px;
  border: 0;
  background: transparent;
  color: var(--lb-primary);
  padding: 0;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.lb-rail-actions {
  grid-template-columns: 1fr;
}

.lb-rail-actions small {
  margin-bottom: 2px;
}

.lb-rail-actions .lb-rail-link {
  width: 100%;
  border: 1px solid #e1e6f2;
  border-radius: 10px;
  background: #fff;
  padding: 10px 11px;
  color: var(--lb-ink);
}

.lb-chapter-landing-page .lb-home-main {
  display: grid;
  gap: 18px;
}

.lb-chapter-landing {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .65fr);
  gap: 22px;
  align-items: stretch;
  padding: 24px;
  overflow: hidden;
}

.lb-chapter-hero-figure {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0;
  border-radius: 18px;
  background: #f4f6fb;
  overflow: hidden;
}

.lb-chapter-copy {
  grid-column: 1;
  grid-row: 2;
}

.lb-chapter-hero-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.lb-chapter-hero-figure figcaption {
  display: grid;
  min-height: 260px;
  place-items: center;
  color: #8390a8;
  font-size: 36px;
  font-weight: 950;
}

.lb-chapter-kicker {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  background: #efe9ff;
  color: var(--lb-primary);
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.lb-chapter-copy h1 {
  margin: 14px 0 10px;
  color: var(--lb-ink);
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.02;
}

.lb-chapter-lead {
  max-width: 720px;
  margin: 0;
  color: #53627f;
  font-size: 16px;
  line-height: 1.65;
}

.lb-chapter-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0;
}

.lb-chapter-badges span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e2e7f4;
  border-radius: 999px;
  background: #fff;
  color: #43506c;
  padding: 8px 11px;
  font-size: 13px;
  font-weight: 900;
}

.lb-chapter-badges .is-open {
  border-color: #c8f2d7;
  background: #effff5;
  color: #16833f;
}

.lb-chapter-badges .is-admin {
  border-color: #ffe0ad;
  background: #fff8ea;
  color: #996000;
}

.lb-chapter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lb-chapter-offer {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  align-content: start;
  gap: 12px;
  border: 1px solid #e2e7f4;
  border-radius: 16px;
  background: #fbfcff;
  padding: 18px;
}

.lb-chapter-offer small {
  color: var(--lb-primary);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.lb-chapter-offer article {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid #e6ebf6;
  border-radius: 12px;
  background: #fff;
  padding: 14px;
}

.lb-chapter-offer strong {
  color: var(--lb-ink);
  font-weight: 950;
}

.lb-chapter-offer span {
  color: var(--lb-primary);
  font-weight: 950;
  white-space: nowrap;
}

.lb-chapter-offer p {
  margin: 0;
  color: #53627f;
  font-size: 13px;
  line-height: 1.5;
}

.lb-offer-link {
  display: inline-flex;
  justify-content: center;
  border: 1px solid #ddd5ff;
  border-radius: 10px;
  background: #f5f1ff;
  color: var(--lb-primary);
  padding: 11px 12px;
  font-weight: 950;
  cursor: pointer;
}

.lb-offer-link:disabled {
  opacity: .72;
  cursor: not-allowed;
}

.lb-chapter-empty {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  padding: 22px;
}

.lb-chapter-empty > span {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 15px;
  background: #edf2ff;
  color: #3554d1;
}

.lb-chapter-empty h2 {
  margin: 0 0 8px;
  color: var(--lb-ink);
}

.lb-chapter-empty p {
  margin: 0 0 10px;
  color: #53627f;
}

.lb-chapter-empty ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
  color: #53627f;
}

.lb-chapter-empty code {
  border-radius: 6px;
  background: #f4f6fb;
  padding: 2px 5px;
  color: var(--lb-ink);
}

.lb-chapter-note {
  border-left: 3px solid var(--lb-primary);
  padding-left: 10px;
}

.lb-chapter-commerce {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.lb-chapter-commerce-head {
  display: grid;
  gap: 4px;
}

.lb-chapter-commerce-head span {
  color: var(--lb-primary);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.lb-chapter-commerce-head h2 {
  margin: 0;
  color: var(--lb-ink);
  font-size: 22px;
}

.lb-chapter-commerce-head p {
  margin: 0;
  color: #53627f;
}

.lb-commerce-note {
  margin: 0;
  border: 1px solid #e8edf7;
  border-radius: 8px;
  background: #f8fafd;
  padding: 9px 12px;
  color: #53627f;
  font-size: 13px;
  font-weight: 700;
}

.lb-chapter-commerce-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.lb-chapter-commerce-grid article {
  position: relative;
  display: grid;
  gap: 6px;
  border: 1px solid #e2e7f4;
  border-radius: 8px;
  background: #fbfcff;
  padding: 14px;
}

.lb-chapter-commerce-grid article.is-recommended {
  border-color: #d8cdfd;
  background: linear-gradient(135deg, #f5f1ff, #ffffff);
  box-shadow: 0 14px 30px rgba(84, 42, 255, .08);
}

.lb-chapter-commerce-grid em {
  position: absolute;
  top: 12px;
  right: 12px;
  border-radius: 999px;
  background: var(--lb-primary);
  color: #fff;
  padding: 5px 8px;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
}

.lb-chapter-commerce-grid small {
  color: #64708a;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.lb-chapter-commerce-grid strong {
  color: var(--lb-ink);
  font-size: 16px;
  font-weight: 950;
}

.lb-chapter-commerce-grid span {
  color: var(--lb-primary);
  font-size: 18px;
  font-weight: 950;
}

.lb-beneficiary-box {
  display: grid;
  gap: 8px;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid var(--lb-line);
  border-radius: 8px;
  background: #f8fafc;
}

.lb-beneficiary-box legend {
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-weight: 900;
  color: var(--lb-muted);
  letter-spacing: 0;
}

.lb-beneficiary-box label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--lb-ink);
}

.lb-gift-fields {
  display: none;
  gap: 8px;
}

.lb-gift-fields.is-visible {
  display: grid;
}

@media (max-width: 1080px) {
  .lb-chapter-commerce-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lb-chapter-commerce-grid article.is-recommended {
    grid-column: span 2;
  }
}

.lb-chapter-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
}

.lb-chapter-nav a,
.lb-chapter-nav span {
  min-height: 42px;
}

.lb-chapter-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #e2e7f4;
  border-radius: 999px;
  background: #fff;
  color: var(--lb-ink);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.lb-chapter-nav a:first-child {
  justify-self: start;
}

.lb-chapter-nav a:last-child {
  justify-self: end;
}

.lb-chapter-nav a:hover {
  color: var(--lb-primary);
}

.lb-chapters-page .lb-home-main {
  display: grid;
  gap: 18px;
}

.lb-chapters-catalog {
  display: grid;
  gap: 18px;
}

.lb-chapter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.lb-chapter-card {
  display: grid;
  border: 1px solid #dfe5f2;
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
}

.lb-chapter-card.is-coming {
  opacity: .78;
}

.lb-chapter-card-media {
  display: block;
  min-width: 0;
  background: linear-gradient(135deg, #f2f5fb, #ffffff);
  text-decoration: none;
}

.lb-chapter-card-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}

.lb-chapter-card-media span {
  display: grid;
  min-height: 150px;
  place-items: center;
  color: #9aa5ba;
  font-size: 34px;
  font-weight: 950;
}

.lb-chapter-card-body {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.lb-chapter-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.lb-chapter-card-head span,
.lb-chapter-card-head em {
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
}

.lb-chapter-card-head span {
  background: #efe9ff;
  color: var(--lb-primary);
}

.lb-chapter-card-head em {
  background: #f4f6fb;
  color: #53627f;
}

.lb-chapter-card h2 {
  margin: 0;
  color: var(--lb-ink);
  font-size: 21px;
}

.lb-chapter-card p {
  margin: 0;
  color: #53627f;
  font-size: 13px;
}

.lb-chapter-card .lb-btn {
  width: 100%;
  justify-content: center;
}

.lb-chapter-card .lb-btn small {
  margin-left: 8px;
  color: inherit;
  font-size: 12px;
  font-weight: 900;
  opacity: .84;
}

.lb-route-facts i,
.lb-route-admin-note i {
  color: var(--lb-primary);
}

.lb-route-admin-note {
  width: fit-content;
  margin: 0;
}

.lb-path-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 98px 54px minmax(92px, .45fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 56px;
  border-bottom: 1px solid var(--lb-line);
}

.lb-path-row.is-active {
  margin: 0 -10px;
  padding: 0 10px;
  border: 1px solid #d6ceff;
  border-radius: 8px;
  background: #fbfaff;
  box-shadow: 0 12px 26px rgba(75, 24, 244, .08);
}

.lb-path-number {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #778199;
  color: #fff;
  font-weight: 900;
}

.lb-path-row.is-done .lb-path-number {
  background: var(--lb-green);
}

.lb-path-row.is-active .lb-path-number {
  background: var(--lb-primary);
}

.lb-path-row h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
}

.lb-path-row h3 span {
  color: var(--lb-primary);
}

.lb-path-row p {
  margin: 4px 0 0;
  color: #2d4077;
  font-size: 12px;
}

.lb-path-row em {
  justify-self: center;
  border-radius: 999px;
  background: #eef4ef;
  color: var(--lb-green);
  padding: 5px 12px;
  font-size: 11px;
  font-style: normal;
}

.lb-path-row.is-active em {
  background: var(--lb-vip);
  color: var(--lb-primary);
}

.lb-path-row strong {
  justify-self: end;
  color: var(--lb-primary);
}

.lb-path-row.is-done strong {
  color: var(--lb-green);
}

.lb-path-row.is-done .lb-path-bar b {
  background: var(--lb-green);
}

.lb-path-row .lb-btn {
  min-height: 34px;
  padding: 0 16px;
  font-size: 12px;
}

.lb-path-link {
  color: var(--lb-primary);
  font-size: 15px;
}

.lb-path-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--lb-primary);
  font-weight: 700;
  font-size: 13px;
}

.lb-week-summary {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 16px;
}

.lb-week-summary > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lb-primary);
  color: #fff;
}

.lb-week-summary p {
  margin: 0;
  flex: 1;
}

.lb-week-summary > i {
  color: var(--lb-primary);
}

.lb-home-rail {
  display: grid;
  gap: 12px;
}

.lb-side-widget {
  padding: 14px 16px;
}

.lb-side-widget header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.lb-side-widget h2 {
  font-size: 18px;
}

.lb-side-widget header span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lb-vip);
  color: var(--lb-primary);
}

.lb-plan-list {
  display: grid;
  gap: 12px;
}

.lb-plan-list article {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 8px;
  align-items: center;
}

.lb-plan-list article > i {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid #bfc8da;
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  font-style: normal;
}

.lb-plan-list .is-done > i {
  border-color: var(--lb-green);
  background: var(--lb-green);
}

.lb-plan-list .is-active > i {
  border: 3px solid var(--lb-primary);
}

.lb-plan-list strong {
  display: block;
  font-size: 13px;
}

.lb-plan-list em {
  display: block;
  color: var(--lb-primary);
  font-size: 13px;
  font-style: normal;
  text-align: right;
}

.lb-plan-xp {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--lb-line);
  color: #1d3270;
  font-size: 13px;
}

.lb-plan-empty {
  margin: 0;
  color: #2d4077;
  font-size: 13px;
  line-height: 1.45;
}

.lb-plan-xp i {
  color: var(--lb-primary);
  margin-right: 8px;
}

.lb-calendar-widget {
  --lb-calendar-cell: 34px;
}

.lb-calendar-nav {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  align-items: center;
  margin-bottom: 8px;
}

.lb-calendar-nav strong {
  color: #0c1946;
  font-size: 16px;
  text-align: center;
  text-transform: capitalize;
}

.lb-calendar-nav button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #111d4e;
  cursor: pointer;
}

.lb-calendar-nav button:hover,
.lb-calendar-nav button:focus-visible {
  background: #f1ebff;
  color: var(--lb-primary);
  outline: none;
}

.lb-calendar-weekdays,
.lb-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.lb-calendar-weekdays {
  padding-bottom: 5px;
  border-bottom: 1px solid var(--lb-line);
}

.lb-calendar-weekdays span {
  color: #526188;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.lb-calendar-grid {
  gap: 2px 0;
  padding-top: 5px;
}

.lb-calendar-day {
  position: relative;
  min-width: 0;
  width: var(--lb-calendar-cell);
  height: var(--lb-calendar-cell);
  justify-self: center;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #14214f;
  font-size: 12px;
  font-weight: 650;
}

button.lb-calendar-day {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
}

.lb-calendar-day.is-interactive { cursor: pointer; }

.lb-calendar-day.is-interactive:hover,
.lb-calendar-day.is-interactive:focus-visible,
.lb-calendar-day.is-selected {
  background: #efe7ff;
  color: #4215bd;
  outline: 3px solid rgba(109, 53, 245, .18);
  outline-offset: 1px;
}

.lb-calendar-day.is-today.is-interactive:hover,
.lb-calendar-day.is-today.is-interactive:focus-visible,
.lb-calendar-day.is-today.is-selected {
  background: #4f19d8;
  color: #fff;
}

.lb-calendar-day.is-empty {
  visibility: hidden;
}

.lb-calendar-day.is-today {
  background: var(--lb-primary);
  color: #fff;
  font-weight: 900;
}

.lb-calendar-day.has-activity::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 5px;
  height: 5px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #e8aa27;
  transform: translateX(-50%);
}

.lb-calendar-day.has-activity:not(.is-today) {
  background: #f4efff;
  color: #4314cc;
}

.lb-calendar-day.has-event {
  box-shadow: inset 0 0 0 2px #6d35f5;
  font-weight: 900;
}

.lb-calendar-day.has-event::before {
  content: '';
  position: absolute;
  top: 2px;
  right: 3px;
  width: 6px;
  height: 6px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #6d35f5;
}

.lb-calendar-caption {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--lb-line);
  color: #526188;
  font-size: 11px;
}

.lb-calendar-caption span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lb-calendar-caption a {
  color: var(--lb-primary);
  font-weight: 800;
}

.lb-calendar-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e8aa27;
}

.lb-calendar-event-dot {
  width: 7px;
  height: 7px;
  border: 2px solid #6d35f5;
  border-radius: 50%;
}

.lb-calendar-status,
.lb-calendar-empty {
  margin: 8px 0 0;
  color: #2d4077;
  font-size: 11px;
  line-height: 1.4;
}

.lb-calendar-empty {
  color: var(--lb-muted);
}

.lb-calendar-upcoming {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.lb-calendar-upcoming a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border-radius: 10px;
  background: #f6f2ff;
  color: #172456;
  font-size: 11px;
}

.lb-calendar-upcoming time {
  color: #5d25db;
  font-weight: 900;
}

.lb-calendar-page {
  width: min(1180px, calc(100% - 32px));
  margin: 26px auto 56px;
}

.lb-calendar-page-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 20px;
  padding: 28px 32px;
  border-radius: 24px;
  background: linear-gradient(135deg, #17104f 0%, #4b19b9 58%, #7a3cff 100%);
  color: #fff;
  box-shadow: 0 18px 45px rgba(45, 22, 112, .2);
}

.lb-calendar-page-hero span,
.lb-calendar-agenda header span {
  color: #e4d8ff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
}

.lb-calendar-page-hero h1 {
  margin: 4px 0 6px;
  color: #fff;
  font-size: clamp(28px, 4vw, 44px);
}

.lb-calendar-page-hero p { margin: 0; color: #efeaff; }
.lb-calendar-page-hero > i { font-size: 54px; color: #f3c94e; }

.lb-calendar-page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(310px, .8fr);
  gap: 20px;
  align-items: start;
}

.lb-calendar-widget--full {
  --lb-calendar-cell: 66px;
  padding: 24px;
}

.lb-calendar-widget--full .lb-calendar-nav { grid-template-columns: 46px 1fr 46px; }
.lb-calendar-widget--full .lb-calendar-nav button { width: 42px; height: 42px; }
.lb-calendar-widget--full .lb-calendar-nav strong { font-size: 22px; }
.lb-calendar-widget--full .lb-calendar-weekdays span { font-size: 12px; }
.lb-calendar-widget--full .lb-calendar-day { font-size: 15px; }

.lb-calendar-page-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--lb-line);
  color: #526188;
  font-size: 12px;
}

.lb-calendar-page-legend span { display: inline-flex; align-items: center; gap: 7px; }

.lb-calendar-agenda { padding: 24px; }
.lb-calendar-agenda header h2 { margin: 3px 0 16px; color: #0d1945; font-size: 24px; }
.lb-calendar-agenda header span { color: #6d35f5; }
.lb-calendar-agenda ol { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.lb-calendar-agenda li { display: grid; grid-template-columns: 54px 1fr; gap: 13px; padding-bottom: 14px; border-bottom: 1px solid var(--lb-line); }
.lb-calendar-agenda li:last-child { padding-bottom: 0; border-bottom: 0; }
.lb-calendar-agenda li > time { display: grid; align-content: center; min-height: 54px; border-radius: 13px; background: #f3edff; color: #4e1bc5; text-align: center; text-transform: uppercase; }
.lb-calendar-agenda li > time strong { font-size: 21px; line-height: 1; }
.lb-calendar-agenda li > time span { font-size: 10px; font-weight: 900; }
.lb-calendar-agenda small { color: #6d35f5; font-weight: 850; text-transform: uppercase; }
.lb-calendar-agenda h3 { margin: 3px 0; color: #111d4e; font-size: 15px; }
.lb-calendar-agenda p { margin: 0; color: #5a6687; font-size: 12px; line-height: 1.45; }
.lb-calendar-agenda a { display: inline-block; margin-top: 6px; color: #5d25db; font-size: 12px; font-weight: 850; }
.lb-calendar-agenda-open { display: block; width: 100%; margin: 3px 0; padding: 0; border: 0; background: transparent; color: #111d4e; font-size: 15px; font-weight: 850; line-height: 1.3; text-align: left; cursor: pointer; }
.lb-calendar-agenda-open:hover,
.lb-calendar-agenda-open:focus-visible { color: var(--lb-primary); outline: none; text-decoration: underline; }
.lb-calendar-agenda-empty { padding: 28px 10px; text-align: center; }
.lb-calendar-agenda-empty > i { color: #7b50df; font-size: 36px; }
.lb-calendar-agenda-empty h3 { margin: 12px 0 5px; }
.lb-calendar-agenda-empty p { margin: 0; }

.lb-calendar-detail { margin-top: 18px; padding: 18px; border: 1px solid #d9cdfc; border-radius: 16px; background: linear-gradient(145deg, #faf8ff, #f3efff); }
.lb-calendar-detail:focus { outline: 3px solid rgba(109, 53, 245, .16); outline-offset: 3px; }
.lb-calendar-detail[hidden] { display: none; }
.lb-calendar-detail > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.lb-calendar-detail > header span { color: #6d35f5; font-size: 12px; font-weight: 900; }
.lb-calendar-detail > header h2 { margin: 2px 0 0; color: #101c4c; font-size: 21px; }
.lb-calendar-detail > header button { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 10px; background: #e9e0ff; color: #4216b7; cursor: pointer; }
.lb-calendar-detail-list { display: grid; gap: 10px; }
.lb-calendar-detail-list article { padding: 14px; border: 1px solid #e2d9fa; border-radius: 13px; background: #fff; }
.lb-calendar-detail-list small { color: #6d35f5; font-weight: 850; text-transform: uppercase; }
.lb-calendar-detail-list h3 { margin: 3px 0 5px; color: #111d4e; font-size: 17px; }
.lb-calendar-detail-list p { margin: 4px 0 0; color: #566384; font-size: 13px; line-height: 1.45; }
.lb-calendar-detail-list .lb-calendar-detail-time { color: #273b72; font-weight: 800; }
.lb-calendar-detail-list a { display: inline-block; margin-top: 9px; color: var(--lb-primary); font-size: 13px; font-weight: 850; }
.lb-calendar-recurrence { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px !important; color: #6b4bb2 !important; font-size: 12px; font-weight: 800; }
.lb-calendar-reminder { display: inline-flex; align-items: center; gap: 6px; margin: 9px 8px 0 0; padding: 7px 10px; border: 1px solid #d9cdfc; border-radius: 10px; background: #fff; color: #5d25db; font-size: 12px; font-weight: 850; cursor: pointer; }
.lb-calendar-reminder:hover,
.lb-calendar-reminder:focus-visible { border-color: #7b50df; background: #f8f4ff; outline: none; }
.lb-calendar-reminder.is-active { border-color: #d8ae2d; background: #fff8dc; color: #765600; }
.lb-calendar-reminder.is-delivered { border-color: #bca45b; background: #fffaf0; color: #6d5a1b; }
.lb-calendar-reminder:disabled { cursor: wait; opacity: .65; }
.lb-calendar-reminder.is-delivered:disabled { cursor: default; opacity: 1; }

@media (max-width: 760px) {
  .lb-calendar-page { width: calc(100% - 20px); max-width: 620px; margin-top: 14px; overflow-x: hidden; }
  .lb-calendar-page-layout,
  .lb-calendar-widget--full,
  .lb-calendar-agenda { min-width: 0; max-width: 100%; }
  .lb-calendar-page-hero { padding: 22px 20px; border-radius: 18px; }
  .lb-calendar-page-hero > div { min-width: 0; }
  .lb-calendar-page-hero p { overflow-wrap: anywhere; }
  .lb-calendar-page-hero > i { font-size: 38px; }
  .lb-calendar-page-layout { grid-template-columns: 1fr; }
  .lb-calendar-widget--full { --lb-calendar-cell: min(42px, calc((100vw - 68px) / 7)); padding: 16px 12px; }
  .lb-calendar-widget--full .lb-calendar-grid,
  .lb-calendar-widget--full .lb-calendar-weekdays { width: 100%; grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .lb-calendar-widget--full .lb-calendar-nav strong { font-size: 18px; }
  .lb-calendar-agenda { padding: 18px; }
  .lb-calendar-detail { padding: 15px; }
}

.lb-ranking-widget article {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 10px;
  align-items: center;
  min-height: 40px;
}

.lb-ranking-widget article > span {
  font-weight: 900;
  color: #b35a10;
}

.lb-ranking-widget strong {
  font-size: 13px;
}

.lb-ranking-widget article small { display: block; color: var(--lb-muted); font-size: 10px; }
.lb-ranking-widget header a { color: var(--lb-primary); }

.lb-ranking-widget em {
  color: #243d8e;
  font-style: normal;
  font-size: 12px;
}

.lb-ranking-widget .is-me {
  margin: 6px -8px -4px;
  padding: 8px;
  border-radius: 8px;
  background: #f6f2ff;
}

.lb-mini-notebook p {
  margin: -4px 0 12px;
  color: #253d87;
}

.lb-mini-notebook div {
  padding-top: 10px;
  border-top: 1px solid var(--lb-line);
}

.lb-mini-notebook small,
.lb-mini-notebook em,
.lb-activity-widget small {
  display: block;
  color: var(--lb-muted);
  font-style: normal;
  font-size: 11px;
}

.lb-mini-notebook strong {
  display: block;
  margin: 4px 0 2px;
  font-size: 13px;
}

.lb-widget-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: var(--lb-primary);
  font-weight: 800;
  font-size: 14px;
}

button.lb-widget-link,
.lb-ranking-widget button,
button.lb-class-lock-link {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.lb-activity-widget article {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 9px;
  align-items: start;
  margin-bottom: 12px;
}

.lb-activity-widget article > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff9066, #5524f5);
  color: #fff;
  font-weight: 900;
}

.lb-activity-widget div {
  color: #203978;
  font-size: 12px;
  line-height: 1.35;
}

.lb-section-placeholder {
  max-width: 760px;
  margin: 28px auto 0;
  padding: 42px;
  text-align: center;
}

.lb-section-placeholder > span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--lb-vip);
  color: var(--lb-primary);
  font-size: 24px;
}

.lb-section-placeholder h2 {
  margin: 0 0 8px;
  font-size: 28px;
}

.lb-section-placeholder p {
  max-width: 520px;
  margin: 0 auto 18px;
  color: var(--lb-muted);
}

.lb-classes {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 292px;
  gap: 22px;
  align-items: start;
  padding-top: 20px;
}

.lb-classes-sidebar,
.lb-classes-rail {
  position: sticky;
  top: 86px;
}

.lb-classes-sidebar {
  padding: 20px;
}

.lb-classes-sidebar-head,
.lb-classes-head,
.lb-classes-panel-head,
.lb-classes-explore-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.lb-classes-sidebar-head h2,
.lb-classes-progress h2,
.lb-class-types h2,
.lb-class-vip h2 {
  margin: 0;
  font-size: 20px;
}

.lb-classes-sidebar-head a,
.lb-classes-explore-head span {
  color: var(--lb-primary);
  font-weight: 800;
  font-size: 13px;
}

.lb-classes-unit {
  margin-top: 18px;
}

.lb-classes-unit h3 {
  margin: 0 0 10px;
  color: var(--lb-muted);
  font-size: 13px;
  text-transform: uppercase;
}

.lb-classes-chapter-list {
  display: grid;
  gap: 8px;
}

.lb-class-chapter {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 4px 10px;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--lb-ink);
}

.lb-class-chapter:hover,
.lb-class-chapter.is-active {
  border-color: rgba(85, 36, 245, .22);
  background: linear-gradient(90deg, rgba(85, 36, 245, .12), rgba(255, 255, 255, .7));
}

.lb-class-chapter span {
  grid-row: span 3;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--lb-line);
  color: var(--lb-primary);
  font-weight: 900;
  font-size: 12px;
}

.lb-class-chapter strong,
.lb-class-info h4 {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.lb-class-chapter small {
  color: var(--lb-muted);
  font-weight: 700;
}

.lb-class-chapter i,
.lb-classes-progress i {
  height: 5px;
  display: block;
  overflow: hidden;
  border-radius: 999px;
  background: #e8ecf4;
}

.lb-class-chapter i b,
.lb-classes-progress i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--lb-primary);
}

.lb-classes-main {
  min-width: 0;
}

.lb-classes-head {
  margin-bottom: 18px;
}

.lb-classes-head h2 {
  margin: 0 0 4px;
  font-size: 31px;
}

.lb-classes-head p {
  margin: 0;
  color: var(--lb-muted);
}

.lb-classes-view-toggle,
.lb-classes-filters {
  display: flex;
  gap: 8px;
  align-items: center;
}

.lb-classes-view-toggle a,
.lb-classes-filters a {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border: 1px solid var(--lb-line);
  border-radius: 8px;
  background: #fff;
  color: var(--lb-ink);
  font-weight: 900;
  white-space: nowrap;
}

.lb-classes-view-toggle a.is-active,
.lb-classes-filters a.is-active {
  border-color: transparent;
  background: var(--lb-primary);
  color: #fff;
  box-shadow: 0 10px 22px rgba(85, 36, 245, .18);
}

.lb-classes-filters {
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.lb-class-continue {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  margin-bottom: 18px;
  padding: 18px;
  border-color: rgba(85, 36, 245, .24);
}

.lb-class-continue span {
  color: var(--lb-primary);
  font-weight: 900;
}

.lb-class-continue h3 {
  margin: 6px 0;
  font-size: 21px;
}

.lb-class-continue p {
  margin: 0 0 14px;
  color: var(--lb-muted);
}

.lb-classes-panel {
  overflow: hidden;
}

.lb-video-class {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-bottom: 18px;
  padding: 18px;
  align-items: start;
  min-width: 0;
  overflow: hidden;
}

.lb-video-hero {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #071434;
  aspect-ratio: 16 / 9;
}

.lb-video-hero iframe,
.lb-video-locked {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.lb-video-locked {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 24px;
  background: linear-gradient(135deg, #071434, #213d78);
  color: #fff;
  text-align: center;
}

.lb-video-locked i {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
}

.lb-video-locked p {
  max-width: 360px;
  margin: 0;
  color: rgba(255, 255, 255, .78);
}

.lb-video-copy {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;
}

.lb-video-demo {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #fff1c6;
  color: #9a6500;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.lb-video-copy h3 {
  margin: 0;
  color: var(--lb-ink);
  font-size: 24px;
  line-height: 1.25;
}

.lb-video-copy p {
  margin: 0;
  color: var(--lb-muted);
  line-height: 1.55;
}

.lb-video-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.lb-video-save-state {
  color: var(--lb-muted);
  font-size: 13px;
  font-weight: 800;
}

.lb-video-class.is-error-event-active .lb-video-hero::after {
  content: "Respondé el evento para volver al video";
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(7, 20, 52, .94);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  text-align: center;
}

[data-video-error-mount]:empty {
  display: none;
}

[data-video-error-mount] {
  grid-column: 1 / -1;
}

.lb-error-event {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 15px;
  border: 1px solid rgba(84, 36, 245, .24);
  border-radius: 16px;
  background: linear-gradient(135deg, #f5f2ff 0%, #fff 65%);
}

.lb-error-event > img {
  width: 82px;
  height: 82px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(41, 21, 101, .16));
}

.lb-error-event-copy {
  min-width: 0;
}

.lb-error-event-copy > span {
  color: var(--lb-primary);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.lb-error-event-copy strong {
  display: block;
  margin: 3px 0 4px;
  color: var(--lb-ink);
  font-size: 19px;
}

.lb-error-event-copy p {
  margin: 0 0 5px;
  color: var(--lb-muted);
  line-height: 1.45;
}

.lb-error-event-copy small {
  color: #4d5877;
  font-weight: 700;
}

.lb-error-event-earned {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 13px;
  border-radius: 999px;
  background: #e8fff2;
  color: #087742;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.lb-error-modal[hidden] {
  display: none !important;
}

.lb-error-modal {
  position: fixed;
  z-index: 1070;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
}

.lb-error-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(5, 12, 34, .78);
}

.lb-error-modal-card {
  position: relative;
  width: min(620px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 30px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 75px rgba(5, 12, 34, .36);
}

.lb-error-modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--lb-line);
  border-radius: 50%;
  background: #fff;
  color: var(--lb-ink);
}

.lb-error-modal-badge {
  display: grid;
  width: 58px;
  height: 58px;
  margin-bottom: 16px;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, #6537ff, #3511bd);
  color: #fff;
  font-size: 23px;
  box-shadow: 0 12px 28px rgba(84, 36, 245, .26);
}

.lb-error-modal-kicker {
  color: var(--lb-primary);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.lb-error-modal-card h3 {
  margin: 7px 48px 8px 0;
  color: var(--lb-ink);
  font-size: clamp(23px, 4vw, 31px);
  line-height: 1.18;
}

.lb-error-modal-help {
  margin: 0 0 18px;
  color: var(--lb-muted);
  line-height: 1.55;
}

.lb-error-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.lb-error-option {
  display: flex;
  min-height: 62px;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border: 1px solid var(--lb-line);
  border-radius: 14px;
  background: #fff;
  color: var(--lb-ink);
  text-align: left;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.lb-error-option:hover:not(:disabled),
.lb-error-option.is-selected {
  border-color: var(--lb-primary);
  background: #f4f1ff;
  transform: translateY(-1px);
}

.lb-error-option b {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 50%;
  background: #eef2ff;
  color: var(--lb-primary);
  text-transform: uppercase;
}

.lb-error-option span {
  font-size: 15px;
  font-weight: 800;
}

.lb-error-option.is-correct {
  border-color: #19a461;
  background: #eafff3;
}

.lb-error-option.is-wrong {
  border-color: #dc5c5c;
  background: #fff0f0;
}

.lb-error-feedback {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.lb-error-feedback.is-correct {
  background: #eafff3;
  color: #087742;
}

.lb-error-feedback.is-wrong {
  background: #fff2ea;
  color: #9b3c12;
}

.lb-error-submit {
  width: 100%;
}

.lb-written-class {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  margin-bottom: 18px;
  padding: 18px;
}

.lb-written-index {
  display: grid;
  align-content: start;
  gap: 8px;
  padding-right: 14px;
  border-right: 1px solid var(--lb-line);
}

.lb-written-index strong {
  margin-bottom: 4px;
  color: var(--lb-muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.lb-written-index a {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--lb-ink);
}

.lb-written-index a:hover,
.lb-written-index a.is-active {
  border-color: rgba(85, 36, 245, .22);
  background: rgba(85, 36, 245, .08);
}

.lb-written-index a.is-locked {
  color: var(--lb-muted);
}

.lb-written-index span {
  font-weight: 900;
  overflow-wrap: anywhere;
}

.lb-written-index small {
  color: var(--lb-muted);
  font-weight: 700;
}

.lb-written-reader {
  min-width: 0;
}

.lb-written-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.lb-written-head span {
  color: var(--lb-primary);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.lb-written-head h3 {
  margin: 4px 0 5px;
  font-size: 26px;
}

.lb-written-head p {
  margin: 0;
  color: var(--lb-muted);
}

.lb-written-head em,
.lb-written-draft {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  background: #fff7dd;
  color: #9a6500;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.lb-written-content {
  display: grid;
  gap: 14px;
}

.lb-written-module {
  position: relative;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--lb-line);
  border-radius: 8px;
  background: #fffdfa;
}

.lb-written-module.is-draft {
  border-style: dashed;
  background: #fffaf0;
}

.lb-written-draft {
  margin-bottom: 10px;
}

.lb-written-module h3,
.lb-written-module h4 {
  margin: 0 0 10px;
  font-size: 19px;
}

.lb-written-module p,
.lb-written-module li {
  color: #23345d;
  font-size: 16px;
  line-height: 1.75;
}

.lb-written-module p {
  margin: 0 0 10px;
}

.lb-written-module p:last-child,
.lb-written-module article:last-child {
  margin-bottom: 0;
}

.lb-written-module .lb-theory-formula,
.lb-written-module .lb-theory-example,
.lb-written-module .lb-theory-formula-grid {
  margin: 18px 0;
  border: 1px solid #dfe4ff;
  border-radius: 18px;
  background: linear-gradient(135deg, #f7f5ff 0%, #f2f7ff 100%);
  color: #09245b;
}

.lb-written-module .lb-theory-formula,
.lb-written-module .lb-theory-example {
  padding: 18px 20px;
}

.lb-written-module .lb-theory-formula-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}

.lb-written-module .lb-theory-formula-grid > span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: 12px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.84);
}

.lb-chapter-empty.is-ready > span {
  color: #0f9f6e;
  background: #e9fbf4;
}

.lb-chapter-ready-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

@media (max-width: 640px) {
  .lb-written-module .lb-theory-formula-grid {
    grid-template-columns: 1fr;
  }

  .lb-written-module .lb-theory-formula,
  .lb-written-module .lb-theory-example {
    padding: 14px;
  }

  .lb-chapter-ready-actions .lb-btn {
    width: 100%;
  }
}

.lb-written-module .lb-math,
.lb-written-module .katex-display {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
}

.lb-written-module details {
  padding: 12px 14px;
  border: 1px solid var(--lb-line);
  border-radius: 8px;
  background: #fff;
}

.lb-written-module summary {
  cursor: pointer;
  color: var(--lb-primary);
  font-weight: 900;
}

.lb-written-gate,
.lb-written-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 32px 20px;
  border: 1px dashed rgba(85, 36, 245, .32);
  border-radius: 8px;
  background: rgba(85, 36, 245, .05);
  text-align: center;
}

.lb-written-gate i,
.lb-written-empty i {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--lb-primary);
  box-shadow: var(--lb-shadow-soft);
}

.lb-written-gate h4,
.lb-written-empty h4 {
  margin: 0;
  font-size: 20px;
}

.lb-written-gate p,
.lb-written-empty p {
  max-width: 440px;
  margin: 0;
  color: var(--lb-muted);
}

.lb-written-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.lb-classes-panel-head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--lb-line);
}

.lb-classes-panel-head h3,
.lb-classes-explore-head h3 {
  margin: 0 0 4px;
  font-size: 20px;
}

.lb-classes-panel-head p {
  margin: 0;
  color: var(--lb-muted);
}

.lb-class-route-list {
  display: grid;
}

.lb-class-card {
  display: grid;
  align-items: center;
  gap: 16px;
  background: #fff;
}

.lb-class-card-route {
  grid-template-columns: 42px 160px minmax(0, 1fr) minmax(190px, auto);
  padding: 14px 18px;
  border-bottom: 1px solid var(--lb-line);
}

.lb-class-card-route:last-child {
  border-bottom: 0;
}

.lb-class-card-explore {
  grid-template-columns: 200px minmax(0, 1fr);
  padding: 16px;
  border: 1px solid var(--lb-line);
  border-radius: 8px;
  box-shadow: var(--lb-shadow-soft);
}

.lb-class-card:hover {
  box-shadow: 0 14px 32px rgba(9, 26, 82, .09);
}

.lb-class-order {
  color: var(--lb-primary);
  font-weight: 900;
  font-size: 18px;
  text-align: center;
}

.lb-class-thumb {
  position: relative;
  min-height: 92px;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(135deg, #071434, #1d3a77);
}

.lb-class-card-explore .lb-class-thumb {
  min-height: 118px;
}

.lb-class-thumb img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
}

.lb-class-thumb.is-placeholder::before {
  content: "a_n";
  position: absolute;
  top: 14px;
  left: 16px;
  color: rgba(255, 255, 255, .88);
  font: 900 22px Georgia, serif;
}

.lb-class-thumb.is-placeholder::after {
  content: "";
  position: absolute;
  inset: auto 18px 18px 18px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,.1), rgba(255,255,255,.9), rgba(255,255,255,.1));
}

.lb-class-thumb > i {
  position: absolute;
  inset: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin: auto;
  border-radius: 50%;
  background: #fff;
  color: var(--lb-primary);
}

.lb-class-info {
  min-width: 0;
}

.lb-class-info h4 {
  margin-bottom: 9px;
  font-size: 16px;
}

.lb-class-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.lb-class-tags span,
.lb-class-tags em,
.lb-class-tags small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 6px;
  padding: 5px 8px;
  font-style: normal;
  font-weight: 800;
  font-size: 12px;
}

.lb-class-tags span {
  background: var(--lb-vip);
  color: var(--lb-primary);
}

.lb-class-tags em {
  border: 1px solid #f4bd4f;
  background: #fff7dd;
  color: #9a6500;
}

.lb-class-tags small {
  color: var(--lb-muted);
  background: #f6f8fc;
}

.lb-class-status {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
}

.lb-class-status > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--lb-muted);
  font-weight: 800;
  white-space: nowrap;
}

.lb-class-status > span.is-done {
  color: #009c52;
}

.lb-class-status > span.is-progress {
  color: var(--lb-primary);
}

.lb-class-status > span.is-locked,
.lb-class-card.is-locked {
  color: #6f7b98;
}

.lb-class-lock-link {
  color: var(--lb-primary);
  font-weight: 900;
  white-space: nowrap;
}

.lb-classes-explore-head {
  margin: 4px 0 14px;
}

.lb-class-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.lb-class-card-explore .lb-class-status {
  grid-column: 1 / -1;
  justify-content: space-between;
}

.lb-classes-rail {
  display: grid;
  gap: 18px;
}

.lb-classes-progress,
.lb-class-types,
.lb-class-vip {
  padding: 22px;
}

.lb-classes-progress strong {
  display: block;
  margin-top: 16px;
  color: var(--lb-primary);
  font-size: 32px;
}

.lb-classes-progress span,
.lb-classes-progress p,
.lb-class-types p,
.lb-class-vip p,
.lb-classes-muted {
  color: var(--lb-muted);
}

.lb-classes-progress i {
  margin-top: 14px;
}

.lb-class-types {
  display: grid;
  gap: 18px;
}

.lb-class-types article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
}

.lb-class-types article > i,
.lb-class-vip > i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lb-vip);
  color: var(--lb-primary);
}

.lb-class-types strong {
  display: block;
  margin-bottom: 3px;
}

.lb-class-types p,
.lb-class-vip p {
  margin: 0;
}

.lb-class-vip > i {
  background: #fff1c6;
  color: #c98800;
  margin-bottom: 12px;
}

.lb-class-vip h2 {
  margin-bottom: 8px;
}

.lb-class-vip .lb-btn,
.lb-classes-progress .lb-btn {
  margin-top: 16px;
}

.lb-class-vip span {
  display: inline-flex;
  margin-top: 14px;
  color: #008f4c;
  font-weight: 900;
}

.lb-classes-empty {
  display: grid;
  place-items: center;
  padding: 48px 24px;
  text-align: center;
}

.lb-classes-empty span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--lb-vip);
  color: var(--lb-primary);
  font-size: 22px;
}

.lb-classes-empty h3 {
  margin: 0 0 8px;
  font-size: 22px;
}

.lb-classes-empty p {
  max-width: 420px;
  margin: 0;
  color: var(--lb-muted);
}

.lb-modal[hidden] {
  display: none;
}

.lb-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 20px;
}

.lb-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 22, 74, .56);
}

.lb-modal-card {
  position: relative;
  width: min(460px, 100%);
  border-radius: 10px;
  background: #fff;
  padding: 26px;
  box-shadow: 0 24px 70px rgba(6, 22, 74, .35);
  text-align: center;
}

.lb-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #f3f6fb;
  cursor: pointer;
}

.lb-modal-mark {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 8px;
  background: var(--lb-primary);
  color: #fff;
  font-weight: 900;
}

.lb-modal-card h2 {
  margin: 16px 0 8px;
}

.lb-modal-card p {
  color: var(--lb-muted);
}

.lb-modal-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

@media (max-width: 1420px) {
  .lb-classes {
    grid-template-columns: 230px minmax(0, 1fr) 250px;
    gap: 16px;
  }

  .lb-classes-sidebar,
  .lb-classes-progress,
  .lb-class-types,
  .lb-class-vip {
    padding: 18px;
  }

  .lb-classes-head h2 {
    font-size: 29px;
  }

  .lb-classes-view-toggle a,
  .lb-classes-filters a {
    padding-inline: 14px;
  }

  .lb-class-chapter {
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 10px;
  }

  .lb-class-chapter span {
    width: 30px;
    height: 30px;
  }

  .lb-home {
    grid-template-columns: 250px minmax(0, 1fr) 286px;
    gap: 18px;
  }

  .lb-continue-card {
    grid-template-columns: minmax(0, 1fr) 280px;
    padding: 22px 24px;
  }

  .lb-feature-card {
    padding: 14px;
  }

  .lb-path-row {
    grid-template-columns: 38px minmax(0, 1fr) 86px 46px minmax(78px, .35fr) auto;
    gap: 10px;
  }
}

@media (max-width: 1240px) {
  .lb-classes {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  .lb-classes-rail {
    grid-column: 2;
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lb-class-vip {
    grid-column: 1 / -1;
  }

  .lb-class-card-route {
    grid-template-columns: 36px 132px minmax(0, 1fr);
  }

  .lb-class-card-route .lb-class-status {
    grid-column: 3;
  }

  .lb-class-card-grid {
    grid-template-columns: 1fr;
  }

  .lb-home {
    grid-template-columns: 238px minmax(0, 1fr);
  }

  .lb-home-rail {
    grid-column: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lb-progress-grid,
  .lb-achievement-grid,
  .lb-chapter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lb-progress-rail,
  .lb-achievements-rail,
  .lb-chapter-rail {
    grid-column: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lb-rail-actions {
    grid-column: 1 / -1;
  }

  .lb-activity-widget {
    grid-column: 1 / -1;
  }

  .lb-continue-card {
    grid-template-columns: 1fr;
  }

  .lb-focus-card {
    grid-template-columns: minmax(0, 1fr) 260px;
  }

  .lb-journey-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .lb-journey-connector { display: none; }

  .lb-journey-node { min-height: 250px; }

  .lb-chapter-hero--bm00,
  .lb-chapter-hero--bm01 {
    min-height: 280px;
    background-image:
      linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .92) 52%, rgba(255, 255, 255, .28) 100%),
      url("../images/livebook/chapters/bm00-hero.webp");
    background-position: center right;
  }

  .lb-chapter-hero--bm01 {
    background-image:
      linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .92) 52%, rgba(255, 255, 255, .28) 100%),
      url("../images/livebook/chapters/bm01-hero.webp");
    background-position: center;
  }

  .lb-continue-art {
    min-height: 118px;
  }

  .lb-book-shape {
    right: 20px;
  }

  .lb-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .lb-classes {
    grid-template-columns: 1fr;
  }

  .lb-classes-sidebar,
  .lb-classes-rail {
    position: static;
  }

  .lb-classes-rail {
    grid-column: auto;
  }

  .lb-classes-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .lb-classes-view-toggle,
  .lb-classes-filters {
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 2px;
  }

  .lb-classes-chapter-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lb-written-class {
    grid-template-columns: 1fr;
  }

  .lb-video-class {
    grid-template-columns: 1fr;
  }

  .lb-written-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-right: 0;
    padding-bottom: 14px;
    border-right: 0;
    border-bottom: 1px solid var(--lb-line);
  }

  .lb-written-index strong {
    grid-column: 1 / -1;
  }

  .lb-home {
    grid-template-columns: 1fr;
  }

  .lb-home-rail {
    grid-column: auto;
  }

  .lb-progress-rail,
  .lb-achievements-rail,
  .lb-chapter-rail {
    grid-column: auto;
  }

  .lb-home-sidebar {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 12px 16px;
    text-align: left;
    align-items: start;
  }

  .lb-home-cover {
    width: 112px;
    grid-row: span 4;
    margin: 0;
  }

  .lb-home-students,
  .lb-home-menu,
  .lb-home-download,
  .lb-home-metrics,
  .lb-home-invite {
    grid-column: 1 / -1;
  }

  .lb-home-students {
    justify-content: flex-start;
  }

  .lb-home-menu {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .lb-classes {
    gap: 14px;
    padding-top: 14px;
  }

  .lb-classes-chapter-list,
  .lb-classes-rail {
    grid-template-columns: 1fr;
  }

  .lb-class-continue,
  .lb-class-card-route,
  .lb-class-card-explore {
    grid-template-columns: 1fr;
  }

  .lb-class-card-route .lb-class-status,
  .lb-class-card-explore .lb-class-status {
    grid-column: auto;
    justify-content: space-between;
  }

  .lb-written-class {
    padding: 14px;
  }

  .lb-written-index {
    grid-template-columns: 1fr;
  }

  .lb-written-head {
    flex-direction: column;
  }

  .lb-written-head h3 {
    font-size: 23px;
  }

  .lb-written-module {
    padding: 14px;
  }

  .lb-written-module p,
  .lb-written-module li {
    font-size: 15px;
  }

  .lb-written-nav {
    flex-direction: column;
  }

  .lb-written-nav .lb-btn {
    width: 100%;
  }

  .lb-video-class {
    padding: 14px;
  }

  .lb-video-copy h3 {
    font-size: 21px;
  }

  .lb-video-actions,
  .lb-video-actions .lb-btn {
    width: 100%;
  }

  .lb-error-event {
    grid-template-columns: 64px minmax(0, 1fr);
    padding: 13px;
  }

  .lb-error-event > img {
    width: 64px;
    height: 64px;
  }

  .lb-error-event .lb-btn,
  .lb-error-event-earned {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
  }

  .lb-error-modal {
    padding: 0;
  }

  .lb-error-modal-card {
    width: 100vw;
    max-height: 100vh;
    min-height: 100vh;
    padding: 22px 17px;
    border-radius: 0;
  }

  .lb-error-options {
    grid-template-columns: 1fr;
  }

  .lb-class-order {
    display: none;
  }

  .lb-classes-panel-head,
  .lb-classes-explore-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .lb-home {
    gap: 14px;
    padding-top: 14px;
  }

  .lb-home-sidebar,
  .lb-continue-card,
  .lb-path-card,
  .lb-side-widget {
    padding: 14px;
  }

  .lb-home-sidebar,
  .lb-home-rail,
  .lb-feature-grid {
    grid-template-columns: 1fr;
  }

  .lb-home-cover {
    width: 132px;
    grid-row: auto;
    justify-self: center;
  }

  .lb-home-sidebar {
    text-align: center;
  }

  .lb-home-students {
    justify-content: center;
  }

  .lb-home-menu {
    grid-template-columns: 1fr;
  }

  .lb-continue-copy h2 {
    font-size: 27px;
  }

  .lb-focus-card {
    min-height: 0;
    grid-template-columns: 1fr;
    padding: 22px 18px;
    border-radius: 20px;
  }

  .lb-home .lb-focus-card.lb-chapter-hero--bm00 {
    background:
      linear-gradient(180deg, rgba(23, 8, 91, .96) 0%, rgba(47, 17, 147, .91) 54%, rgba(37, 12, 105, .78) 100%),
      url("../images/livebook/chapters/bm00-hero-refined-local.png");
    background-size: auto 100%;
    background-position: 66% center;
  }

  .lb-focus-card .lb-continue-copy h2 {
    font-size: 32px;
  }

  .lb-focus-card .lb-focus-chapter {
    margin-top: 12px;
  }

  .lb-focus-dashboard {
    margin-top: 6px;
  }

  .lb-focus-problem {
    min-height: 128px;
  }

  .lb-focus-problem strong {
    font-size: 48px;
  }

  .lb-refined-next-card {
    min-height: 500px;
    padding: 20px 18px;
    background-image:
      linear-gradient(180deg, rgba(255, 255, 255, .99) 0%, rgba(255, 255, 255, .96) 48%, rgba(255, 255, 255, .54) 72%, rgba(255, 255, 255, .12) 100%),
      url("../images/livebook/chapters/bm00-hero-refined-local.png");
    background-size: auto 100%;
    background-position: 64% center;
  }

  .lb-refined-next-card .lb-continue-copy {
    min-height: 0;
    max-width: none;
  }

  .lb-refined-next-card .lb-continue-copy h2 { font-size: 35px; }
  .lb-refined-next-card .lb-continue-actions { width: 100%; }

  .lb-refined-next-card.is-test-guided {
    min-height: 620px;
    background-image:
      linear-gradient(180deg, rgba(255, 255, 255, .995) 0%, rgba(255, 255, 255, .97) 58%, rgba(255, 255, 255, .46) 78%, rgba(255, 255, 255, .08) 100%),
      url("../images/livebook/chapters/bm00-hero-refined-local.png");
    background-position: 64% center;
  }

  .lb-refined-next-card.is-test-guided .lb-continue-copy {
    min-height: 0;
    max-width: none;
  }

  .lb-refined-next-card.is-test-guided .lb-continue-copy h2 {
    font-size: 34px;
  }

  .lb-test-guided-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lb-test-guided-metrics > span:last-child {
    grid-column: 1 / -1;
  }

  .lb-bm00-journey { padding: 18px 14px; border-radius: 18px; }
  .lb-reinforcement { padding: 18px 14px; border-radius: 18px; }
  .lb-reinforcement-head { align-items: flex-start; }
  .lb-reinforcement-head h2 { font-size: 25px; }
  .lb-reinforcement-list { grid-template-columns: 1fr; }
  .lb-reinforcement-item {
    grid-template-columns: 28px 40px minmax(0, 1fr);
    gap: 10px;
    padding: 14px;
  }
  .lb-reinforcement-copy { grid-column: 3; }
  .lb-reinforcement-copy p { font-size: 14px; }
  .lb-reinforcement-copy > div span { font-size: 12px; }
  .lb-reinforcement-action {
    width: 100%;
    min-height: 46px;
    grid-column: 1 / -1;
    margin-top: 2px;
    font-size: 14px;
  }
  .lb-reinforcement-copy p { min-height: 0; }
  .lb-reinforcement-foot { align-items: flex-start; flex-direction: column; }
  .lb-journey-head { align-items: flex-start; }
  .lb-journey-head h2 { font-size: 25px; }
  .lb-journey-head p { max-width: 230px; }
  .lb-journey-total { min-width: 86px; padding: 9px; }
  .lb-journey-track { grid-template-columns: 1fr; }
  .lb-journey-node { min-height: 0; grid-template-columns: 46px minmax(0, 1fr); grid-template-rows: auto; gap: 12px; padding: 14px; }
  .lb-journey-step { align-content: start; flex-direction: column; gap: 8px; }
  .lb-journey-step > i { width: 38px; height: 38px; }
  .lb-journey-copy p { min-height: 0; font-size: 14px; }
  .lb-journey-action { min-height: 46px; font-size: 14px; }

  .lb-continue-progress {
    display: grid;
    gap: 8px;
  }

  .lb-continue-progress i {
    width: 100%;
  }

  .lb-continue-actions,
  .lb-continue-actions .lb-btn {
    width: 100%;
  }

  .lb-continue-art {
    min-height: 96px;
  }

  .lb-formula {
    left: 0;
    font-size: 22px;
  }

  .lb-sequence {
    top: 58px;
    font-size: 20px;
  }

  .lb-book-shape,
  .lb-graph-shape {
    display: none;
  }

  .lb-feature-card {
    min-height: 116px;
  }

  .lb-path-row {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 10px 0;
  }

  .lb-path-row em,
  .lb-path-row strong,
  .lb-path-bar,
  .lb-path-row .lb-btn,
  .lb-path-link {
    grid-column: 2 / -1;
    justify-self: stretch;
  }

  .lb-path-row em,
  .lb-path-row strong {
    justify-self: start;
  }

  .lb-week-summary {
    align-items: flex-start;
  }
}

@media (max-width: 1120px) {
  .lb-header-stats {
    justify-content: flex-start;
  }

  .lb-topnav {
    min-height: 44px;
  }

  .lb-chapter-route {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .lb-chapter-route.is-compact {
    grid-template-columns: minmax(170px, .55fr) minmax(0, 2.8fr);
  }

  .lb-chapter-route-head {
    padding: 0 2px;
  }

  .lb-media-row {
    grid-template-columns: repeat(3, minmax(220px, 1fr));
  }

  .lb-media-row > p,
  .lb-theory-link {
    grid-column: 1 / -1;
  }

  .lb-theory-link {
    justify-self: start;
  }
}

@media (max-width: 760px) {
  .lb-chapter-route {
    margin: 10px 0;
    padding: 10px;
    border-radius: 12px;
  }

  .lb-chapter-route-head strong {
    font-size: 15px;
  }

  .lb-chapter-route-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .lb-chapter-route.is-compact {
    grid-template-columns: 1fr;
    gap: 7px;
    margin-block: 8px;
    padding: 9px;
  }

  .lb-chapter-route-step,
  .lb-chapter-route.is-compact .lb-chapter-route-step {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    min-height: 66px;
    padding: 7px 5px;
    text-align: center;
  }

  .lb-chapter-route-icon,
  .lb-chapter-route.is-compact .lb-chapter-route-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: 14px;
  }

  .lb-chapter-route-copy small,
  .lb-chapter-route-copy em,
  .lb-chapter-route-arrow,
  .lb-chapter-route-progress {
    display: none;
  }

  .lb-chapter-route-copy strong {
    margin: 0;
    font-size: 12px;
  }
}

@media (max-width: 1320px) {
  .lb-workspace {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 14px;
  }

  .lb-live-top {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .lb-notebook textarea {
    min-height: 360px;
  }

  .lb-tab-nav {
    grid-template-columns: minmax(115px, .8fr) minmax(145px, 1fr) minmax(150px, 1fr) minmax(155px, 1fr);
  }

  .lb-tab-nav button {
    font-size: 12px;
    padding: 0 8px;
  }
}

@media (min-width: 1280px) and (max-height: 820px) {
  .lb-shell {
    padding-top: 8px;
  }

  .lb-media-row {
    padding: 12px 0 8px;
  }

  .lb-media-card {
    min-height: 96px;
    padding: 8px;
  }

  .lb-notebook textarea {
    min-height: 220px;
  }

  .lb-problem {
    padding: 20px 24px;
  }

  .lb-options {
    gap: 8px;
    margin: 12px 0;
  }

  .lb-option {
    min-height: 38px;
  }

  .lb-problem-actions {
    gap: 8px;
  }

  .lb-problem-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    position: static;
  }

  .lb-problem-tools {
    position: static;
    justify-content: flex-start;
  }

  .lb-problem-head p {
    max-width: 100%;
    padding-right: 0;
  }
}

@media (max-width: 1120px) {
  .lb-live-top {
    grid-template-columns: 1fr;
  }

  .lb-notebook textarea {
    min-height: 340px;
  }
}

@media (max-width: 899px) {
  .lb-shell {
    padding: 8px 10px 14px;
  }

  .lb-workspace,
  .lb-live-top,
  .lb-media-row,
  .lb-problem-head,
  .lb-stats-grid {
    grid-template-columns: 1fr;
  }

  .lb-logo {
    width: 50px;
    height: 50px;
  }

  .lb-title h1 {
    white-space: normal;
    font-size: 18px;
  }

  .lb-title span {
    font-size: 14px;
  }

  .lb-header-stats {
    width: 100%;
    gap: 8px;
  }

  .lb-topnav {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0;
    min-width: 0;
    scrollbar-width: thin;
  }

  .lb-topnav a {
    flex: 0 0 auto;
    min-width: 132px;
    padding-inline: 12px;
  }

  .lb-topnav a .lb-icon {
    flex: 0 0 auto;
  }

  .lb-media-card {
    grid-template-columns: 120px 1fr;
  }

  .lb-problem {
    padding: 18px;
  }

  .lb-problem-actions,
  .lb-tab-nav {
    grid-template-columns: 1fr;
  }

  .lb-tab-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lb-tab-nav button {
    white-space: normal;
    min-height: 48px;
    padding: 7px 8px;
    font-size: 13px;
  }

  .lb-tab-panel { padding: 12px; }

  .lb-btn-community,
  .lb-community-counts {
    grid-column: auto;
    justify-self: stretch;
  }

  .lb-notebook textarea {
    min-height: 320px;
    font-size: 16px;
  }

  .lb-bottom-status,
  .lb-modal-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 560px) {
  .lb-xp-pill {
    justify-content: center;
    min-height: 38px;
  }
}

.livebook-shell,
.livebook-shell * {
  box-sizing: border-box;
}

.livebook-shell {
  min-height: 100vh;
  background: #07111f;
  color: #eef6ff;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 18px;
  padding: 18px;
  font-family: Inter, Arial, sans-serif;
}

.livebook-shell a {
  text-decoration: none;
  color: inherit;
}

.livebook-index {
  position: sticky;
  top: 16px;
  height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.livebook-brand,
.livebook-index-card,
.livebook-reader,
.livebook-empty,
.livebook-page-frame {
  border: 1px solid rgba(143, 177, 220, .2);
  background: linear-gradient(180deg, rgba(20, 42, 70, .96), rgba(9, 20, 36, .98));
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .24);
}

.livebook-brand {
  padding: 16px;
  display: block;
}

.livebook-brand strong {
  display: block;
  font-size: 20px;
  line-height: 1.15;
}

.livebook-brand span,
.livebook-muted {
  display: block;
  color: #a9c0dc;
  margin-top: 6px;
}

.livebook-index-card {
  padding: 16px;
  overflow: auto;
}

.livebook-index-card h3 {
  margin: 0 0 12px;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: .05em;
}

.livebook-page-list {
  display: grid;
  gap: 8px;
}

.livebook-page-list a {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: center;
  padding: 9px;
  border-radius: 12px;
  background: #0d2038;
  border: 1px solid rgba(143, 177, 220, .14);
}

.livebook-page-list a.active,
.livebook-page-list a:hover {
  background: #163d66;
  border-color: #2e83d5;
}

.livebook-page-list span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #102a49;
  color: #fff;
  font-weight: 900;
}

.livebook-page-list em {
  font-style: normal;
  color: #dcecff;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.livebook-reader {
  padding: 18px;
  min-width: 0;
}

.livebook-reader-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.livebook-kicker {
  display: inline-block;
  color: #5ab5ff;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  margin-bottom: 6px;
}

.livebook-reader h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1.05;
}

.livebook-reader p {
  color: #b9cce3;
}

.livebook-reader-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.livebook-reader-actions a {
  background: #1888ff;
  color: #fff;
  border-radius: 12px;
  padding: 10px 13px;
  font-weight: 900;
}

.livebook-empty {
  padding: 34px;
  text-align: center;
}

.livebook-empty h2 {
  margin: 0 0 8px;
}

.livebook-page-frame {
  padding: 16px;
  background: linear-gradient(180deg, #132844, #08182c);
}

.livebook-page-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  color: #dcecff;
}

.livebook-page-toolbar span {
  font-size: 12px;
  text-transform: uppercase;
  color: #9fb5cf;
}

.livebook-page-canvas {
  position: relative;
  max-width: 980px;
  min-height: 520px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 14px;
  background: #f5ead3;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .34);
}

.livebook-page-canvas img {
  display: block;
  width: 100%;
  height: auto;
}

.livebook-page-canvas.is-empty {
  background: linear-gradient(135deg, #f7ead0, #e5c990);
}

.livebook-page-placeholder {
  padding: 40px;
  color: #4b3216;
  text-align: center;
}

.livebook-page-placeholder span {
  display: block;
  font-size: 38px;
  font-weight: 950;
}

.livebook-page-html {
  position: absolute;
  inset: 0;
  padding: 24px;
  color: #1d1309;
  pointer-events: none;
}

.livebook-modules-preview {
  max-width: 980px;
  margin: 16px auto 0;
  padding: 14px;
  border: 1px solid rgba(143, 177, 220, .18);
  border-radius: 14px;
  background: #0d2038;
}

.livebook-modules-preview h3 {
  margin: 0 0 10px;
}

.livebook-modules-preview div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.livebook-modules-preview span {
  border: 1px solid rgba(143, 177, 220, .18);
  border-radius: 999px;
  background: #15365b;
  color: #dcecff;
  padding: 7px 10px;
  font-size: 13px;
}

.lb-problems {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
  padding-top: 20px;
}

.lb-problems-chapters,
.lb-problems-side {
  position: sticky;
  top: 14px;
  align-self: start;
}

.lb-problems-chapters {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--lb-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--lb-shadow);
  max-height: calc(100vh - 28px);
  overflow: auto;
}

.lb-problems-chapters h2,
.lb-problems-side h2,
.lb-problems-map h2,
.lb-problems-recommended h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0;
}

.lb-problems-unit {
  display: grid;
  gap: 10px;
}

.lb-problems-unit summary {
  cursor: pointer;
  color: var(--lb-muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.lb-problems-chapter-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.lb-problems-chapter {
  min-height: 80px;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 8px;
}

.lb-problems-chapter:hover,
.lb-problems-chapter.is-active {
  border-color: #cbbcff;
  background: linear-gradient(90deg, rgba(75, 24, 244, .09), rgba(255, 255, 255, .8));
}

.lb-problems-chapter-code {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid #d9def0;
  border-radius: 999px;
  color: var(--lb-primary);
  font-size: 12px;
  font-weight: 900;
  background: #fff;
}

.lb-problems-chapter-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.lb-problems-chapter-copy strong {
  font-size: 15px;
  line-height: 1.25;
}

.lb-problems-chapter-copy em,
.lb-problems-head p,
.lb-problems-map p,
.lb-problems-progress p,
.lb-problem-badge p {
  margin: 0;
  color: var(--lb-muted);
  font-style: normal;
  font-size: 13px;
}

.lb-problems-map p small,
.lb-problems-bank-copy {
  display: block;
  margin-top: 4px;
  color: #64708a;
  font-size: 13px;
  font-weight: 700;
}

.lb-mini-track {
  display: block;
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: #e7ebf4;
  overflow: hidden;
}

.lb-mini-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--lb-primary);
}

.lb-empty-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #d4dae8;
}

.lb-problems-main {
  min-width: 0;
  display: grid;
  gap: 16px;
}

.lb-problems-head {
  display: grid;
  gap: 16px;
}

.lb-problems-head h1 {
  margin: 0 0 3px;
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: 0;
}

.lb-problems-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lb-problems-filters a {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 18px;
  border: 1px solid var(--lb-line);
  border-radius: 8px;
  background: #fff;
  color: var(--lb-ink);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.lb-problems-filters a.is-active,
.lb-problems-filters a:hover {
  border-color: var(--lb-primary);
  background: linear-gradient(180deg, #5b25ff, var(--lb-primary));
  color: #fff;
}

.lb-problems-empty {
  min-height: 320px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 48px 24px;
  text-align: center;
}

.lb-problems-empty span {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #f1edff;
  color: var(--lb-primary);
  font-size: 28px;
}

.lb-problems-empty h2 {
  margin: 0;
  font-size: 24px;
}

.lb-problems-empty p {
  max-width: 520px;
  margin: 0;
  color: var(--lb-muted);
}

.lb-problems-continue,
.lb-problems-map,
.lb-problems-progress,
.lb-problem-badge {
  padding: 20px;
}

.lb-problems-continue {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 18px;
  align-items: center;
}

.lb-problems-continue span,
.lb-problems-continue > div > span {
  color: var(--lb-primary);
  font-weight: 900;
}

.lb-problems-continue h2 {
  margin: 6px 0;
  font-size: 22px;
}

.lb-problems-continue em {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #d66a00;
  font-style: normal;
  font-weight: 800;
}

.lb-problems-continue-action {
  display: grid;
  gap: 10px;
}

.lb-problems-map header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.lb-problems-go {
  display: flex;
  align-items: end;
  gap: 8px;
}

.lb-problems-go label {
  display: grid;
  gap: 5px;
  color: var(--lb-muted);
  font-size: 12px;
  font-weight: 800;
}

.lb-problems-go input {
  width: 132px;
  height: 42px;
  border: 1px solid var(--lb-line);
  border-radius: 7px;
  padding: 0 12px;
  font: inherit;
}

.lb-problems-go button {
  width: 44px;
  height: 42px;
  border: 0;
  border-radius: 7px;
  background: var(--lb-primary);
  color: #fff;
}

.lb-form-note {
  padding: 10px 12px;
  border-radius: 7px;
  background: #f4f6fb;
}

.lb-form-note.is-error {
  color: #9f2b2b;
  background: #fff0f0;
}

.lb-problem-number-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 12px;
}

.lb-problem-number {
  min-height: 44px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px;
  padding: 0 11px;
  border: 1px solid var(--lb-line);
  border-radius: 8px;
  background: #f8fafc;
  color: #53617d;
  font-weight: 900;
}

.lb-problem-number.is-resolved {
  border-color: #8ddba8;
  background: #f0fff5;
  color: var(--lb-green);
}

.lb-problem-number.is-in_progress {
  border-color: #ffb766;
  background: #fff8ef;
  color: #d66a00;
}

.lb-problem-number.is-role-essential {
  border-color: rgba(91, 45, 255, .34);
  box-shadow: inset 0 0 0 1px rgba(91, 45, 255, .08);
}

.lb-problem-number.is-role-challenge {
  border-color: rgba(245, 158, 11, .42);
}

.lb-problem-number.is-role-secret {
  border-style: dashed;
  background: #f7f8fb;
}

.lb-problem-number em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  font-size: 10px;
  font-style: normal;
  color: var(--lb-primary);
  background: rgba(91, 45, 255, .09);
}

.lb-problem-number.is-role-challenge em {
  color: #b45309;
  background: rgba(245, 158, 11, .14);
}

.lb-problem-number.is-role-secret em {
  color: #64748b;
  background: rgba(100, 116, 139, .14);
}

.lb-problem-number:hover {
  border-color: var(--lb-primary);
  box-shadow: 0 8px 18px rgba(75, 24, 244, .12);
}

.lb-problem-number b {
  position: absolute;
  right: 6px;
  bottom: -1px;
  color: var(--lb-primary);
  font-size: 12px;
}

.lb-problems-filter-empty {
  padding: 28px;
  border: 1px dashed var(--lb-line);
  border-radius: 8px;
  background: var(--lb-soft);
}

.lb-problems-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--lb-line);
  color: var(--lb-muted);
  font-size: 13px;
}

.lb-problems-legend span,
.lb-problems-summary span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.lb-problems-recommended {
  display: grid;
  gap: 12px;
}

.lb-problems-recommended > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.lb-problem-rec {
  display: grid;
  gap: 8px;
  padding: 16px;
}

.lb-problem-rec > span {
  color: var(--lb-primary);
  font-size: 12px;
  font-weight: 900;
}

.lb-problem-rec strong {
  font-size: 16px;
}

.lb-problem-rec p {
  margin: 0;
  color: var(--lb-muted);
}

.lb-problem-rec a {
  color: var(--lb-primary);
  font-weight: 900;
}

.lb-difficulty {
  color: var(--lb-muted);
  font-style: normal;
  font-size: 12px;
}

.lb-problems-side {
  display: grid;
  gap: 18px;
}

.lb-problems-progress {
  display: grid;
  gap: 14px;
}

.lb-auth-copy {
  line-height: 1.45;
}

.lb-progress-ring {
  width: 128px;
  height: 128px;
  display: grid;
  place-items: center;
  margin-inline: auto;
  border-radius: 999px;
  background:
    radial-gradient(circle closest-side, #fff 72%, transparent 73%),
    conic-gradient(var(--lb-primary) var(--value), #e5e9f3 0);
}

.lb-progress-ring strong {
  font-size: 30px;
}

.lb-problems-summary {
  display: grid;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--lb-line);
}

.lb-problems-summary b {
  min-width: 28px;
  font-size: 17px;
}

.lb-problem-badge {
  display: grid;
  gap: 12px;
}

.lb-badge-empty {
  min-height: 140px;
  display: grid;
  place-items: center;
  border: 1px dashed #d7ddea;
  border-radius: 8px;
  background: linear-gradient(135deg, #fafbff, #f1edff);
  color: var(--lb-primary);
  font-size: 34px;
}

.lb-badge-mosaic {
  min-height: 180px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
}

@media (max-width: 1280px) {
  .lb-route-map {
    grid-template-columns: 1fr;
  }

  .lb-route-link {
    width: 3px;
    min-height: 22px;
    height: 22px;
    justify-self: center;
    background: linear-gradient(180deg, #d8def0, #b9c3dc);
  }

  .lb-problems {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .lb-problems-side {
    grid-column: 2;
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .lb-problems {
    grid-template-columns: 1fr;
  }

  .lb-problems-chapters,
  .lb-problems-side {
    position: static;
    max-height: none;
  }

  .lb-problems-side {
    grid-column: auto;
  }
}

@media (max-width: 720px) {
  .lb-chapter-hero--bm00,
  .lb-chapter-hero--bm01 {
    min-height: 0;
    background-image:
      linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .94) 64%, rgba(255, 255, 255, .58) 100%),
      url("../images/livebook/chapters/bm00-hero.webp");
    background-position: 64% center;
  }

  .lb-chapter-hero--bm01 {
    background-image:
      linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .94) 64%, rgba(255, 255, 255, .58) 100%),
      url("../images/livebook/chapters/bm01-hero.webp");
    background-position: center;
  }

  .lb-chapter-hero--bm00 .lb-continue-copy,
  .lb-chapter-hero--bm01 .lb-continue-copy {
    max-width: none;
  }

  .lb-route-title,
  .lb-bm00-mission,
  .lb-next-mission-compact,
  .lb-badges-guest,
  .lb-route-level,
  .lb-level-strip,
  .lb-level-strip.is-guest,
  .lb-level-strip.is-admin {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 14px;
  }

  .lb-route-title {
    display: grid;
  }

  .lb-route-ring {
    width: 82px;
    height: 82px;
  }

  .lb-bm00-mission .lb-btn,
  .lb-next-mission-compact .lb-btn,
  .lb-level-strip .lb-btn {
    width: 100%;
    justify-content: center;
    justify-self: stretch;
    margin-right: 0;
  }

  .lb-level-card-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .lb-route-map {
    padding: 12px;
  }

  .lb-badge-grid {
    grid-template-columns: 1fr;
  }

  .lb-progress-grid,
  .lb-progress-split,
  .lb-achievement-grid,
  .lb-chapter-grid,
  .lb-campaign-card,
  .lb-chapter-landing,
  .lb-chapter-empty {
    grid-template-columns: 1fr;
  }

  .lb-progress-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lb-progress-split > .lb-card {
    padding: 16px;
  }

  .lb-progress-split > .lb-card > h2 {
    margin-bottom: 16px;
  }

  .lb-progress-stats {
    gap: 12px;
  }

  .lb-progress-stats div {
    padding: 14px;
  }

  .lb-activity-timeline {
    padding: 2px 2px 0;
  }

  .lb-progress-gate {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .lb-progress-gate .lb-btn {
    width: 100%;
    justify-content: center;
  }

  .lb-chapter-landing {
    padding: 16px;
  }

  .lb-chapter-commerce {
    padding: 16px;
  }

  .lb-chapter-commerce-grid,
  .lb-chapter-commerce-grid article.is-recommended {
    grid-template-columns: 1fr;
    grid-column: auto;
  }

  .lb-chapter-copy,
  .lb-chapter-offer {
    grid-column: auto;
    grid-row: auto;
  }

  .lb-chapter-copy h1 {
    font-size: 34px;
  }

  .lb-chapter-actions .lb-btn,
  .lb-offer-link {
    width: 100%;
    justify-content: center;
  }

  .lb-chapter-offer article {
    flex-direction: column;
    gap: 6px;
  }

  .lb-chapter-nav {
    grid-template-columns: 1fr;
  }

  .lb-chapter-nav a,
  .lb-chapter-nav a:first-child,
  .lb-chapter-nav a:last-child {
    width: 100%;
    justify-self: stretch;
  }

  .lb-chapter-nav span {
    display: none;
  }

  .lb-chapter-card-media img {
    aspect-ratio: auto;
    object-fit: contain;
  }

  .lb-route-node a {
    min-height: 124px;
  }

  .lb-problems {
    gap: 14px;
  }

  .lb-problems-head h1 {
    font-size: 28px;
  }

  .lb-problems-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .lb-problems-continue,
  .lb-problems-map header,
  .lb-problems-side,
  .lb-problems-recommended > div {
    grid-template-columns: 1fr;
  }

  .lb-problems-map header {
    display: grid;
  }

  .lb-problems-go {
    align-items: end;
  }
}

@media (max-width: 900px) {
  .livebook-shell {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .livebook-index {
    position: relative;
    height: auto;
  }

  .livebook-reader-head {
    display: block;
  }

  .livebook-reader-actions {
    margin-top: 12px;
  }

  .livebook-reader h1 {
    font-size: 28px;
  }
}

.lb-notes-app {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) minmax(280px, 320px);
  gap: 24px;
  padding: 22px;
  background: #f7f9ff;
  min-height: calc(100vh - 80px);
  box-sizing: border-box;
}

.lb-notes-workspace {
  grid-template-columns: 260px 340px minmax(0, 1fr);
}

.lb-notes-workspace.is-shared-view {
  grid-template-columns: 260px minmax(0, 1fr);
}

.lb-notes-editor {
  grid-template-columns: 280px minmax(0, 1fr);
}

.lb-notes-sidebar,
.lb-notes-summary section,
.lb-notes-list,
.lb-note-reader,
.lb-note-editor,
.lb-notes-gate-card {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #dfe5f4;
  box-shadow: 0 12px 34px rgba(21, 35, 86, 0.08);
}

.lb-notes-sidebar {
  border-radius: 8px;
  min-height: 720px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.lb-notes-brand {
  padding: 22px;
}

.lb-notes-brand strong,
.lb-notes-header h1,
.lb-notes-summary h2,
.lb-note-reader-head h1,
.lb-note-editor h1 {
  color: #09194a;
}

.lb-notes-brand strong {
  display: block;
  font-size: 19px;
  margin-bottom: 14px;
}

.lb-notes-new,
.lb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-weight: 700;
  text-decoration: none;
  transition: 0.18s ease;
}

.lb-notes-new,
.lb-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #6a35ff, #3f10d8);
  box-shadow: 0 10px 22px rgba(82, 42, 222, 0.22);
}

.lb-notes-new {
  width: 100%;
  min-height: 46px;
}

.lb-btn {
  min-height: 44px;
  padding: 0 16px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lb-btn-secondary,
.lb-btn-ghost {
  color: #4b21df;
  background: #fff;
  border-color: #d9def1;
}

.lb-btn-danger {
  color: #ba1f45;
  background: #fff4f7;
  border-color: #ffd1dc;
}

.lb-notes-nav,
.lb-notes-chapters {
  padding: 0 16px 18px;
}

.lb-notes-nav a,
.lb-notes-chapters a,
.lb-notes-trash {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  color: #15245a;
  text-decoration: none;
}

.lb-notes-nav a.is-active,
.lb-notes-chapters a.is-active,
.lb-notes-trash.is-active,
.lb-notes-list a.is-active {
  color: #4b16e8;
  background: #efe9ff;
}

.lb-notes-nav b,
.lb-notes-chapters b,
.lb-notes-trash b {
  color: #4b16e8;
  font-size: 13px;
}

.lb-notes-chapters {
  border-top: 1px solid #edf0f7;
  padding-top: 18px;
}

.lb-notes-chapters h3 {
  margin: 0 0 10px;
  color: #5d6a91;
  font-size: 13px;
  text-transform: uppercase;
}

.lb-notes-chapters a {
  grid-template-columns: 54px minmax(0, 1fr) auto;
}

.lb-notes-chapters span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #dfe5f4;
  color: #4b16e8;
  font-weight: 800;
  background: #fff;
}

.lb-notes-chapters em {
  overflow: hidden;
  color: #15245a;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-notes-trash {
  margin: auto 16px 16px;
  border-top: 1px solid #edf0f7;
}

.lb-notes-main {
  min-width: 0;
}

.lb-notes-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 8px 0 18px;
}

.lb-notes-header h1 {
  margin: 0;
  font-size: 31px;
}

.lb-notes-header p,
.lb-notes-muted,
.lb-note-card p,
.lb-note-reader-head p,
.lb-note-reader-foot small {
  color: #607098;
}

.lb-notes-search {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 44px 44px;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  min-width: 0;
}

.lb-notes-search > label:first-child,
.lb-notes-search-box {
  grid-column: 1 / 4;
  grid-row: 1;
  min-width: 0;
}

.lb-notes-search select[name="chapter"] {
  grid-column: 1;
  grid-row: 2;
}

.lb-notes-search select[name="type"] {
  grid-column: 2;
  grid-row: 2;
}

.lb-notes-search select[name="date"] {
  grid-column: 3;
  grid-row: 2;
}

.lb-notes-search > button {
  display: none;
}

.lb-notes-search > .lb-notes-view:nth-last-child(2) {
  grid-column: 4;
  grid-row: 1;
  border-radius: 8px 0 0 8px;
}

.lb-notes-search > .lb-notes-view:last-child {
  grid-column: 5;
  grid-row: 1;
  border-radius: 0 8px 8px 0;
}

.lb-notes-search label,
.lb-notes-search select,
.lb-note-form-grid select,
.lb-note-title input,
.lb-notes-list form label {
  min-height: 44px;
  border: 1px solid #d9def1;
  border-radius: 8px;
  background: #fff;
}

.lb-notes-search label,
.lb-notes-list form label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
}

.lb-notes-search input,
.lb-notes-list input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
}

.lb-notes-search select,
.lb-note-form-grid select,
.lb-note-title input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 12px;
}

.lb-notes-search button,
.lb-notes-view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid #d9def1;
  border-radius: 8px;
  color: #4b16e8;
  background: #fff;
}

.lb-notes-search > .lb-notes-view {
  min-width: 44px;
  border-radius: 0;
}

.lb-notes-view.is-active,
.lb-notes-search button {
  background: #efe9ff;
}

.lb-notes-continue,
.lb-note-card {
  border: 1px solid #dfe5f4;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(21, 35, 86, 0.06);
}

.lb-notes-continue {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  margin-bottom: 16px;
}

.lb-notes-continue span {
  color: #4b16e8;
  font-weight: 800;
}

.lb-notes-continue h2,
.lb-notes-section h2 {
  margin: 4px 0;
  color: #09194a;
}

.lb-notes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.lb-notes-grid.is-list {
  grid-template-columns: 1fr;
}

.lb-note-card {
  padding: 16px;
}

.lb-note-card header,
.lb-note-card footer,
.lb-note-reader-head,
.lb-note-reader-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.lb-note-card h3 {
  margin: 0 0 5px;
  color: #09194a;
  font-size: 17px;
}

.lb-note-card p {
  margin: 0;
  font-size: 13px;
}

.lb-note-paper,
.lb-note-paper-large,
.lb-note-paper-editor textarea {
  color: #18305c;
  background-color: #fff9e9;
  background-image: linear-gradient(#e7dfc7 1px, transparent 1px), linear-gradient(90deg, rgba(237, 93, 96, 0.32) 1px, transparent 1px);
  background-size: 100% 28px, 100% 100%;
  background-position: 0 14px, 30px 0;
  border: 1px solid #eadfbd;
  border-radius: 8px;
}

.lb-note-paper {
  min-height: 88px;
  margin: 14px 0;
  padding: 14px 18px 14px 44px;
  line-height: 28px;
  white-space: pre-wrap;
}

.lb-note-card footer a,
.lb-note-card footer button,
.lb-note-reader-foot a {
  color: #4b16e8;
  font-weight: 800;
  text-decoration: none;
}

.lb-note-card footer form {
  margin: 0;
}

.lb-note-card footer button {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.lb-note-favorite-form {
  margin: 0;
}

.lb-note-favorite {
  border: 0;
  background: transparent;
  color: #7a86aa;
  cursor: pointer;
}

.lb-note-favorite.is-active,
.lb-note-favorite:hover {
  color: #e0a100;
}

.lb-note-reader-actions .lb-note-favorite {
  min-height: 42px;
  border: 1px solid #d9def1;
  background: #fff;
}

.lb-note-reader-actions .lb-note-favorite.is-active {
  border-color: #f1cf65;
  background: #fff9dc;
}

.lb-btn-danger-outline {
  color: #ba1f45;
  background: #fff;
  border-color: #ffd1dc;
}

.lb-btn-danger-outline:hover {
  background: #fff4f7;
}

.lb-notes-summary {
  position: sticky;
  top: 92px;
  align-self: start;
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
}

.lb-notes-summary section {
  border-radius: 8px;
  padding: 20px;
}

.lb-notes-summary h2 {
  margin: 0 0 14px;
  font-size: 19px;
}

.lb-notes-summary p {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 0;
  color: #607098;
}

.lb-notes-summary i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #4b16e8;
  background: #efe9ff;
}

.lb-notes-summary b {
  color: #09194a;
  font-size: 20px;
}

.lb-notes-gate {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 80px);
  padding: 24px;
  background: #f7f9ff;
}

.lb-notes-gate-card {
  width: min(520px, 100%);
  border-radius: 8px;
  padding: 34px;
  text-align: center;
}

.lb-notes-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  color: #4b16e8;
  background: #efe9ff;
  font-size: 24px;
}

.lb-notes-list,
.lb-note-reader,
.lb-note-editor {
  border-radius: 8px;
}

.lb-notes-list {
  overflow: hidden;
}

.lb-notes-list header {
  padding: 22px;
}

.lb-notes-list h2 {
  margin: 0 0 14px;
  color: #09194a;
}

.lb-notes-list nav {
  display: grid;
  gap: 8px;
  max-height: 640px;
  overflow: auto;
  padding: 0 12px 18px;
}

.lb-notes-list a {
  display: grid;
  gap: 5px;
  padding: 14px;
  border-radius: 8px;
  color: #15245a;
  text-decoration: none;
}

.lb-notes-list a strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-notes-list a span {
  color: #607098;
  font-size: 13px;
}

.lb-note-reader,
.lb-note-editor {
  padding: 24px;
  min-width: 0;
}

.lb-note-reader-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: start;
  gap: 16px;
  margin-bottom: 22px;
}

.lb-note-reader-info {
  min-width: 0;
}

.lb-note-reader-head h1 {
  margin: 6px 0 12px;
  font-size: 27px;
  overflow-wrap: anywhere;
}

.lb-note-reader-head p {
  margin: 0;
  font-weight: 800;
}

.lb-note-reader-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lb-note-reader-chips span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  color: #4b16e8;
  background: #efe9ff;
  font-weight: 800;
}

.lb-note-reader-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.lb-note-reader-actions form {
  margin: 0;
}

.lb-note-share-panel {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid #dfe5f4;
  border-radius: 8px;
  background: #f9fbff;
}

.lb-note-share-panel[hidden] {
  display: none;
}

.lb-note-share-panel > span {
  margin-right: auto;
  color: #0f9d63;
  font-weight: 800;
}

.lb-note-share-panel > span.is-error {
  color: #ba1f45;
}

.lb-note-share-panel input {
  flex: 1 1 260px;
  min-height: 42px;
  min-width: 0;
  border: 1px solid #d9def1;
  border-radius: 8px;
  padding: 0 12px;
}

.lb-note-saved {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 8px;
  color: #0f9d63 !important;
  background: #eafaf2 !important;
}

.lb-icon-btn,
.lb-note-reader-actions .lb-icon-btn {
  position: relative;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d9def1;
  border-radius: 8px;
  color: #4b21df;
  background: #fff;
  cursor: pointer;
  text-decoration: none;
}

.lb-icon-btn:hover,
.lb-icon-btn:focus-visible {
  border-color: #b9acf4;
  background: #f7f3ff;
  outline: 0;
}

.lb-icon-btn.is-active,
.lb-note-reader-actions .lb-note-favorite.is-active {
  border-color: #f1cf65;
  color: #e0a100;
  background: #fff9dc;
}

.lb-note-more {
  position: relative;
}

.lb-note-more-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  width: min(260px, calc(100vw - 32px));
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid #dfe5f4;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(21, 35, 86, 0.18);
}

.lb-note-more-menu[hidden] {
  display: none;
}

.lb-note-more-menu a,
.lb-note-more-menu button {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  color: #15245a;
  background: transparent;
  font: inherit;
  font-weight: 800;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.lb-note-more-menu a:hover,
.lb-note-more-menu button:hover,
.lb-note-more-menu a:focus-visible,
.lb-note-more-menu button:focus-visible {
  background: #f7f3ff;
  outline: 0;
}

.lb-note-more-menu form {
  margin: 6px 0 0;
  padding-top: 6px;
  border-top: 1px solid #edf0f7;
}

.lb-note-more-menu form button {
  color: #ba1f45;
}

.lb-note-paper-large {
  min-height: 460px;
  padding: 28px 32px 28px 58px;
  font-size: 18px;
  line-height: 28px;
  white-space: pre-wrap;
  text-align: left;
}

.lb-visual-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #dfe5f4;
  border-radius: 8px;
  background: #fff;
}

.lb-visual-toolbar span {
  color: #607098;
  font-weight: 700;
}

.lb-note-visual-editor {
  outline: 0;
  overflow: auto;
  cursor: text;
}

.lb-note-visual-editor:focus {
  border-color: #9b85ff;
  box-shadow: 0 0 0 3px rgba(75, 22, 232, 0.12);
}

.lb-formula-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 28px;
  margin: 0 4px;
  padding: 0 26px 0 8px;
  border: 1px solid rgba(75, 22, 232, 0.22);
  border-radius: 7px;
  color: #10275b;
  background: rgba(255, 255, 255, 0.78);
  vertical-align: middle;
  cursor: pointer;
}

.lb-formula-chip.is-display {
  display: flex;
  justify-content: center;
  width: calc(100% - 12px);
  margin: 8px 0;
  padding: 8px 30px 8px 10px;
}

.lb-formula-chip.has-error {
  border-color: #e25555;
  color: #b42318;
  background: #fff1f1;
}

.lb-formula-remove {
  position: absolute;
  top: 3px;
  right: 4px;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  color: #607098;
  background: transparent;
  line-height: 18px;
  cursor: pointer;
}

.lb-formula-remove:hover {
  color: #fff;
  background: #e25555;
}

.lb-note-advanced {
  border: 1px solid #dfe5f4;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.lb-note-advanced summary {
  color: #15245a;
  font-weight: 800;
  cursor: pointer;
}

.lb-note-advanced p {
  margin: 10px 0;
  color: #607098;
}

.lb-note-advanced textarea {
  width: 100%;
  border: 1px solid #d9def1;
  border-radius: 8px;
  padding: 12px;
  color: #15245a;
  font-family: Consolas, Monaco, monospace;
  resize: vertical;
}

.lb-formula-modal[hidden] {
  display: none;
}

.lb-formula-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(8, 16, 48, 0.48);
}

.lb-formula-dialog {
  display: grid;
  gap: 14px;
  width: min(760px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  border-radius: 8px;
  padding: 18px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(8, 16, 48, 0.28);
}

.lb-formula-dialog header,
.lb-formula-dialog footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lb-formula-dialog h2 {
  margin: 0;
  color: #09194a;
}

.lb-formula-dialog header button {
  width: 36px;
  height: 36px;
  border: 1px solid #d9def1;
  border-radius: 8px;
  color: #15245a;
  background: #fff;
  cursor: pointer;
}

.lb-formula-dialog math-field {
  min-height: 88px;
  border: 1px solid #d9def1;
  border-radius: 8px;
  padding: 12px;
  font-size: 24px;
}

.lb-formula-type {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lb-formula-type label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #d9def1;
  border-radius: 8px;
  color: #15245a;
  background: #f7f9ff;
}

.lb-formula-keypad {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.lb-formula-keypad button {
  min-height: 40px;
  border: 1px solid #d9def1;
  border-radius: 8px;
  color: #15245a;
  background: #fff;
  font-weight: 800;
  cursor: pointer;
}

.lb-formula-keypad button:hover {
  color: #4b16e8;
  border-color: #bfb2ff;
  background: #efe9ff;
}

.lb-note-files {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.lb-note-files a {
  padding: 10px 12px;
  border: 1px solid #d9def1;
  border-radius: 8px;
  color: #15245a;
  background: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}

.lb-note-alert {
  border: 1px solid #d8e0f2;
  border-radius: 8px;
  padding: 12px 14px;
  background: #f8fbff;
  color: #10275b;
  font-weight: 700;
}

.lb-note-alert.is-error {
  border-color: #fecaca;
  background: #fff1f2;
  color: #991b1b;
}

.lb-notes-muted.is-error {
  color: #b91c1c;
}

.lb-note-paper.has-photo {
  padding: 0;
  overflow: hidden;
  position: relative;
  min-height: 190px;
}

.lb-note-card-photo {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
  background: #fffefa;
}

.lb-note-page-count {
  position: absolute;
  right: 12px;
  bottom: 12px;
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(16, 39, 91, 0.86);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
}

.lb-note-photo-pages {
  display: grid;
  gap: 18px;
}

.lb-note-photo-page {
  margin: 0;
  border: 1px solid #dbe4f3;
  border-radius: 8px;
  overflow: hidden;
  background: #fffefa;
  box-shadow: 0 14px 34px rgba(16, 39, 91, 0.08);
}

.lb-note-photo-page a {
  display: block;
}

.lb-note-photo-page img {
  display: block;
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  background: #fffefa;
}

.lb-note-photo-page figcaption {
  border-top: 1px solid #e7dfc7;
  padding: 10px 14px;
  color: #586586;
  font-weight: 700;
}

.lb-note-reader-foot {
  margin-top: 16px;
  padding: 14px 0 0;
  border-top: 1px solid #edf0f7;
}

.lb-note-form {
  display: grid;
  gap: 16px;
}

.lb-note-start,
.lb-note-capture,
.lb-note-draw {
  display: grid;
  gap: 18px;
}

.lb-note-flow-panel[hidden] {
  display: none;
}

.lb-note-start-head p,
.lb-note-flow-head p {
  margin: 0 0 6px;
  color: #4b16e8;
  font-weight: 800;
}

.lb-note-start-head h2,
.lb-note-flow-head h2 {
  margin: 0;
  color: #09194a;
  font-size: 30px;
}

.lb-note-methods {
  display: grid;
  grid-template-columns: 1.18fr 1fr 1fr;
  gap: 14px;
}

.lb-note-method {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 210px;
  border: 1px solid #dfe5f4;
  border-radius: 8px;
  padding: 22px;
  color: #15245a;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.lb-note-method i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 8px;
  color: #4b16e8;
  background: #efe9ff;
  font-size: 23px;
}

.lb-note-method strong {
  font-size: 20px;
}

.lb-note-method span {
  color: #607098;
  line-height: 1.45;
}

.lb-note-method:hover,
.lb-note-method:focus {
  border-color: #bfb2ff;
  box-shadow: 0 14px 38px rgba(75, 22, 232, 0.12);
}

.lb-note-method.is-primary {
  color: #fff;
  border-color: #4b16e8;
  background: linear-gradient(135deg, #4b16e8, #6d39ff);
}

.lb-note-method.is-primary i {
  color: #4b16e8;
  background: #fff;
}

.lb-note-method.is-primary span {
  color: rgba(255, 255, 255, 0.86);
}

.lb-note-flow-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.lb-photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.lb-photo-empty {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 220px;
  border: 1px dashed #cbd3e8;
  border-radius: 8px;
  padding: 24px;
  color: #607098;
  background: #f7f9ff;
  text-align: center;
}

.lb-photo-empty i {
  color: #4b16e8;
  font-size: 36px;
}

.lb-photo-empty strong {
  color: #15245a;
}

.lb-photo-stage {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.lb-photo-page {
  border: 1px solid #dfe5f4;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.lb-photo-page figure {
  position: relative;
  aspect-ratio: 3 / 4;
  margin: 0;
  background: #eef2ff;
  overflow: hidden;
}

.lb-photo-page canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: zoom-in;
}

.lb-photo-page figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px;
  color: #15245a;
  font-weight: 800;
}

.lb-photo-page small {
  color: #4b16e8;
}

.lb-photo-tools {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 0 10px 10px;
}

.lb-photo-tools button {
  min-height: 34px;
  border: 1px solid #d9def1;
  border-radius: 7px;
  color: #15245a;
  background: #fff;
  cursor: pointer;
}

.lb-photo-viewer[hidden] {
  display: none;
}

.lb-photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(8, 16, 48, 0.72);
}

.lb-photo-viewer button {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  color: #15245a;
  background: #fff;
}

.lb-photo-viewer canvas {
  max-width: min(100%, 1100px);
  max-height: calc(100vh - 80px);
  border-radius: 8px;
  background: #fff;
  object-fit: contain;
}

.lb-photo-editor[hidden] {
  display: none;
}

.lb-photo-editor {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: 18px;
}

.lb-photo-editor-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 16, 48, .68);
  backdrop-filter: blur(4px);
}

.lb-photo-editor-dialog {
  position: relative;
  z-index: 1;
  width: min(1120px, 100%);
  max-height: calc(100dvh - 36px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid #dfe5f4;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 28px 90px rgba(8, 16, 48, .35);
}

.lb-photo-editor-dialog > header,
.lb-photo-editor-dialog > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  background: #fff;
}

.lb-photo-editor-dialog > header {
  border-bottom: 1px solid #e3e8f5;
}

.lb-photo-editor-dialog > footer {
  border-top: 1px solid #e3e8f5;
}

.lb-photo-editor-dialog header p,
.lb-photo-editor-dialog header h2 {
  margin: 0;
}

.lb-photo-editor-dialog header p {
  color: #4b16e8;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.lb-photo-editor-dialog header h2 {
  color: #09194a;
  font-size: 22px;
}

.lb-photo-editor-dialog header > button {
  width: 42px;
  height: 42px;
  border: 1px solid #d9def1;
  border-radius: 50%;
  color: #15245a;
  background: #fff;
  cursor: pointer;
}

.lb-photo-editor-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr);
  overflow: auto;
}

.lb-photo-editor-preview {
  min-height: 520px;
  display: grid;
  place-items: center;
  padding: 22px;
  overflow: auto;
  background: #e9edf7;
}

.lb-photo-editor-preview canvas {
  display: block;
  max-width: 100%;
  max-height: calc(100dvh - 190px);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(9, 25, 74, .18);
}

.lb-photo-editor-controls {
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 20px;
  overflow-y: auto;
}

.lb-photo-editor-controls fieldset {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.lb-photo-editor-controls legend {
  margin-bottom: 8px;
  color: #15245a;
  font-weight: 900;
}

.lb-photo-mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.lb-photo-mode-switch button {
  min-height: 48px;
  padding: 7px 10px;
  border: 1px solid #d9def1;
  border-radius: 9px;
  color: #15245a;
  background: #fff;
  font-weight: 850;
  cursor: pointer;
}

.lb-photo-mode-switch button.is-active {
  border-color: #4b16e8;
  color: #4b16e8;
  background: #efe9ff;
  box-shadow: 0 0 0 2px rgba(75, 22, 232, .12);
}

.lb-photo-crop-controls > p {
  margin: -3px 0 4px;
  color: #607098;
  font-size: 13px;
}

.lb-photo-crop-controls label {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 8px;
  color: #15245a;
  font-size: 13px;
  font-weight: 800;
}

.lb-photo-crop-controls input[type="range"] {
  width: 100%;
  accent-color: #4b16e8;
}

.lb-photo-crop-controls output {
  color: #4b16e8;
  font-weight: 900;
  text-align: right;
}

.lb-photo-editor-dialog footer > span {
  color: #607098;
  font-size: 13px;
  font-weight: 750;
}

.lb-photo-editor-dialog footer > span i {
  color: #4b16e8;
}

.lb-photo-editor-dialog footer > div {
  display: flex;
  gap: 8px;
}

.lb-draw-shell {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px;
  min-height: 620px;
}

.lb-draw-pages {
  display: grid;
  align-content: start;
  gap: 10px;
}

.lb-draw-page-tab {
  min-height: 92px;
  border: 1px solid #dfe5f4;
  border-radius: 8px;
  color: #15245a;
  background: #fff;
  font-weight: 800;
  cursor: pointer;
}

.lb-draw-page-tab.is-active {
  border-color: #4b16e8;
  background: #efe9ff;
}

.lb-draw-main {
  display: grid;
  gap: 12px;
}

.lb-notebook-note-data {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #e3e8f5;
  border-radius: 8px;
  background: #fff;
}

.lb-notebook-note-data h3 {
  margin: 0;
  color: #09194a;
  font-size: 18px;
}

.lb-notebook-note-data .lb-note-form-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
}

.lb-notebook-note-title {
  grid-column: 1 / -1;
}

.lb-notebook-note-data label {
  display: grid;
  gap: 8px;
  align-self: stretch;
  min-width: 0;
  color: #15245a;
  font-weight: 800;
}

.lb-notebook-note-data input,
.lb-notebook-note-data select {
  box-sizing: border-box;
  min-height: 46px;
  width: 100%;
  padding: 0 13px;
  border: 1px solid #d9def1;
  border-radius: 8px;
  background: #fff;
  color: #15245a;
  font: inherit;
}

.lb-notebook-note-data input:focus,
.lb-notebook-note-data select:focus {
  border-color: #4b16e8;
  box-shadow: 0 0 0 3px rgba(75, 22, 232, 0.12);
  outline: 0;
}

.lb-draw-toolbar,
.lb-draw-options,
.lb-draw-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.lb-draw-toolbar button {
  min-height: 38px;
  border: 1px solid #d9def1;
  border-radius: 8px;
  padding: 0 12px;
  color: #15245a;
  background: #fff;
  font-weight: 800;
  cursor: pointer;
}

.lb-draw-toolbar button.is-active {
  color: #fff;
  border-color: #4b16e8;
  background: #4b16e8;
}

.lb-draw-toolbar button:disabled,
.lb-draw-options button:disabled {
  opacity: .48;
  cursor: not-allowed;
}

.lb-draw-options {
  align-items: stretch;
  padding: 10px;
  border: 1px solid #e3e8f5;
  border-radius: 8px;
  background: #f9fbff;
}

.lb-draw-control-group {
  display: grid;
  gap: 7px;
  min-width: min(100%, 180px);
  margin: 0;
  padding: 0;
  border: 0;
}

.lb-draw-control-group legend {
  padding: 0;
  color: #607098;
  font-size: 12px;
  font-weight: 900;
}

.lb-draw-control-group.is-disabled {
  opacity: .56;
}

.lb-draw-segment,
.lb-draw-swatches,
.lb-draw-backgrounds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lb-draw-segment button,
.lb-draw-backgrounds button,
.lb-draw-swatches button {
  min-height: 44px;
  border: 1px solid #d9def1;
  border-radius: 8px;
  background: #fff;
  color: #15245a;
  font-weight: 800;
  cursor: pointer;
}

.lb-draw-segment button,
.lb-draw-backgrounds button {
  display: grid;
  gap: 4px;
  justify-items: center;
  min-width: 76px;
  padding: 7px 10px;
}

.lb-draw-segment button.is-active,
.lb-draw-backgrounds button.is-active,
.lb-draw-swatches button.is-active {
  border-color: #4b16e8;
  background: #efe9ff;
  box-shadow: 0 0 0 2px rgba(75, 22, 232, .14);
}

.lb-line-sample {
  width: 42px;
  border-radius: 999px;
  background: currentColor;
}

.lb-line-sample.is-thin {
  height: 2px;
}

.lb-line-sample.is-medium {
  height: 5px;
}

.lb-line-sample.is-thick {
  height: 9px;
}

.lb-draw-swatches button {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  padding: 0;
}

.lb-swatch {
  width: 24px;
  height: 24px;
  display: block;
  border: 2px solid rgba(9, 25, 74, .18);
  border-radius: 50%;
  background: var(--swatch);
}

.lb-draw-swatches button.is-active::after {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-size: 11px;
  font-weight: 900;
  position: absolute;
  right: 4px;
  bottom: 3px;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: #4b16e8;
}

.lb-bg-sample {
  width: 48px;
  height: 28px;
  display: block;
  border: 1px solid #d8deef;
  border-radius: 6px;
  background-color: #fffefa;
}

.lb-bg-sample.is-ruled {
  background-image: linear-gradient(#e7dfc7 1px, transparent 1px), linear-gradient(90deg, rgba(237, 93, 96, .32) 1px, transparent 1px);
  background-size: 100% 8px, 100% 100%;
  background-position: 0 6px, 12px 0;
}

.lb-bg-sample.is-grid {
  background-image: linear-gradient(#e4eaf5 1px, transparent 1px), linear-gradient(90deg, #e4eaf5 1px, transparent 1px);
  background-size: 9px 9px;
}

.lb-draw-status {
  justify-content: space-between;
  color: #607098;
  font-weight: 800;
}

.lb-draw-canvas-wrap {
  min-height: 520px;
  border: 1px solid #d9def1;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  touch-action: none;
}

.lb-draw-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 520px;
  touch-action: none;
  cursor: crosshair;
}

body.lb-draw-fullscreen-open {
  overflow: hidden;
}

.lb-note-draw.is-draw-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: block !important;
  overflow-y: auto;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: #f5f7ff;
}

.lb-note-draw.is-draw-fullscreen .lb-note-flow-head,
.lb-note-draw.is-draw-fullscreen .lb-notebook-note-data,
.lb-note-draw.is-draw-fullscreen > .lb-notes-muted,
.lb-note-draw.is-draw-fullscreen > .lb-note-form-actions {
  display: none;
}

.lb-note-draw.is-draw-fullscreen .lb-draw-shell {
  grid-template-columns: 112px minmax(0, 1fr);
  min-height: calc(100dvh - 24px);
}

.lb-note-draw.is-draw-fullscreen .lb-draw-main {
  grid-template-rows: auto auto auto minmax(560px, 1fr);
}

.lb-note-draw.is-draw-fullscreen .lb-draw-toolbar,
.lb-note-draw.is-draw-fullscreen .lb-draw-options,
.lb-note-draw.is-draw-fullscreen .lb-draw-status {
  position: sticky;
  z-index: 2;
  background: #fff;
}

.lb-note-draw.is-draw-fullscreen .lb-draw-toolbar {
  top: 0;
  padding: 8px;
  border: 1px solid #dfe5f4;
  border-radius: 8px;
}

.lb-note-draw.is-draw-fullscreen .lb-draw-canvas-wrap,
.lb-note-draw.is-draw-fullscreen .lb-draw-canvas-wrap canvas {
  min-height: max(620px, calc(100dvh - 245px));
}

.lb-note-autosave-state {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: auto;
  color: #607098;
  font-size: 14px;
  font-weight: 800;
}

.lb-note-autosave-state i {
  color: #16a34a;
}

.lb-note-autosave-state.is-saving {
  color: #4b16e8;
}

.lb-note-autosave-state.is-error {
  color: #c72525;
}

.lb-note-autosave-state.is-saved {
  color: #16804a;
}

.lb-notebook-confirm[hidden],
.lb-draw-confirm[hidden] {
  display: none;
}

.lb-notebook-confirm,
.lb-draw-confirm {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  padding: 18px;
}

.lb-notebook-confirm-backdrop,
.lb-draw-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 16, 48, .52);
}

.lb-notebook-confirm-card,
.lb-draw-confirm-card {
  position: relative;
  z-index: 1;
  width: min(100%, 390px);
  display: grid;
  gap: 14px;
  padding: 22px;
  border: 1px solid #dfe5f4;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(8, 16, 48, .24);
}

.lb-notebook-confirm-card h3,
.lb-draw-confirm-card h3 {
  margin: 0;
  color: #09194a;
  font-size: 22px;
}

.lb-notebook-confirm-card p,
.lb-draw-confirm-card p {
  margin: 0;
  color: #607098;
}

.lb-notebook-confirm-card > div,
.lb-draw-confirm-card > div {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.lb-modal-open {
  overflow: hidden;
}

.lb-note-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.lb-note-form label,
.lb-note-title {
  display: grid;
  gap: 8px;
  color: #15245a;
  font-weight: 800;
}

.lb-note-paper-editor textarea {
  width: 100%;
  min-height: 430px;
  padding: 28px 32px 28px 58px;
  border: 0;
  outline: 0;
  resize: vertical;
  font-size: 17px;
  line-height: 28px;
  text-align: left;
}

.lb-math-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  border: 1px solid #dfe5f4;
  border-radius: 8px;
  background: #fff;
}

.lb-math-panel button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #d9def1;
  border-radius: 7px;
  color: #15245a;
  background: #f7f9ff;
  font-weight: 700;
  cursor: pointer;
}

.lb-math-panel button:hover {
  color: #4b16e8;
  border-color: #bfb2ff;
  background: #efe9ff;
}

.lb-note-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 16px;
  align-items: start;
}

.lb-note-preview-panel {
  display: grid;
  gap: 8px;
  color: #15245a;
  font-weight: 800;
}

.lb-note-paper-preview {
  min-height: 430px;
  padding: 28px 32px 28px 58px;
  color: #18305c;
  background-color: #fff9e9;
  background-image: linear-gradient(#e7dfc7 1px, transparent 1px), linear-gradient(90deg, rgba(237, 93, 96, 0.32) 1px, transparent 1px);
  background-size: 100% 28px, 100% 100%;
  background-position: 0 14px, 30px 0;
  border: 1px solid #eadfbd;
  border-radius: 8px;
  line-height: 28px;
  white-space: pre-wrap;
  text-align: left;
}

.lb-note-form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 1180px) {
  .lb-notes-app,
  .lb-notes-workspace {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .lb-notes-summary,
  .lb-note-reader {
    grid-column: 2;
  }

  .lb-notes-list {
    grid-column: 2;
  }

  .lb-notes-workspace .lb-note-reader {
    grid-column: 1 / -1;
  }

  .lb-notes-search,
  .lb-note-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lb-notes-search {
    grid-template-columns: repeat(2, minmax(0, 1fr)) 44px 44px;
  }

  .lb-notes-search > label:first-child {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .lb-notes-search select[name="chapter"] {
    grid-column: 1;
    grid-row: 2;
  }

  .lb-notes-search select[name="type"] {
    grid-column: 2;
    grid-row: 2;
  }

  .lb-notes-search select[name="date"] {
    grid-column: 1 / 3;
    grid-row: 3;
  }

  .lb-notes-search > .lb-notes-view:nth-last-child(2) {
    grid-column: 3;
    grid-row: 2;
  }

  .lb-notes-search > .lb-notes-view:last-child {
    grid-column: 4;
    grid-row: 2;
  }

  .lb-note-reader-head {
    grid-template-columns: 1fr;
  }

  .lb-note-reader-actions,
  .lb-note-share-panel {
    justify-content: flex-start;
  }

  .lb-notebook-note-data .lb-note-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .lb-notes-app,
  .lb-notes-workspace,
  .lb-notes-editor {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .lb-notes-sidebar,
  .lb-notes-list,
  .lb-notes-summary,
  .lb-note-reader,
  .lb-note-editor {
    grid-column: auto;
  }

  .lb-notes-sidebar {
    min-height: auto;
  }

  .lb-notes-summary {
    position: static;
  }

  .lb-notes-search,
  .lb-note-form-grid,
  .lb-notebook-note-data .lb-note-form-grid,
  .lb-notes-grid {
    grid-template-columns: 1fr;
  }

  .lb-notes-filter-fields {
    grid-template-columns: 1fr;
  }

  .lb-notes-search {
    grid-template-columns: minmax(0, 1fr) 44px 44px;
  }

  .lb-notes-search > label:first-child {
    grid-column: 1 / 4;
    grid-row: 1;
  }

  .lb-notes-search select[name="chapter"],
  .lb-notes-search select[name="type"],
  .lb-notes-search select[name="date"] {
    grid-column: 1 / 4;
  }

  .lb-notes-search select[name="chapter"] {
    grid-row: 2;
  }

  .lb-notes-search select[name="type"] {
    grid-row: 3;
  }

  .lb-notes-search select[name="date"] {
    grid-row: 4;
  }

  .lb-notes-search > .lb-notes-view:nth-last-child(2) {
    grid-column: 2;
    grid-row: 5;
  }

  .lb-notes-search > .lb-notes-view:last-child {
    grid-column: 3;
    grid-row: 5;
  }

  .lb-notes-search > button,
  .lb-notes-search > .lb-notes-view {
    width: 100%;
  }

  .lb-notes-search > .lb-notes-view {
    border-radius: 8px;
  }

  .lb-notes-view-toggle {
    width: 100%;
  }

  .lb-notes-view-toggle .lb-notes-view {
    flex: 1 1 50%;
  }

  .lb-notes-continue,
  .lb-note-reader-head,
  .lb-note-reader-foot {
    align-items: stretch;
    flex-direction: column;
  }

  .lb-note-reader-actions {
    display: flex;
    justify-content: stretch;
    max-width: none;
  }

  .lb-note-reader-actions .lb-btn {
    width: 100%;
  }

  .lb-note-reader-actions form {
    width: auto;
  }

  .lb-note-saved {
    justify-content: center;
  }

  .lb-note-share-panel {
    justify-content: stretch;
  }

  .lb-note-share-panel .lb-btn,
  .lb-note-share-panel input {
    width: 100%;
  }

  .lb-note-paper-large,
  .lb-note-paper-editor textarea,
  .lb-note-paper-preview {
    min-height: 340px;
    padding-left: 42px;
  }

  .lb-note-editor-grid {
    grid-template-columns: 1fr;
  }

  .lb-note-methods,
  .lb-draw-shell {
    grid-template-columns: 1fr;
  }

  .lb-note-method {
    min-height: 150px;
  }

  .lb-photo-stage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lb-photo-editor {
    padding: 0;
  }

  .lb-photo-editor-dialog {
    width: 100%;
    max-height: 100dvh;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .lb-photo-editor-layout {
    grid-template-columns: 1fr;
  }

  .lb-photo-editor-preview {
    min-height: 42dvh;
    padding: 12px;
  }

  .lb-photo-editor-preview canvas {
    max-height: 42dvh;
  }

  .lb-photo-editor-controls {
    overflow: visible;
    padding: 16px;
  }

  .lb-photo-editor-dialog > footer {
    align-items: stretch;
    flex-direction: column;
  }

  .lb-photo-editor-dialog footer > div,
  .lb-photo-editor-dialog footer .lb-btn {
    width: 100%;
  }

  .lb-photo-editor-dialog footer .lb-btn {
    justify-content: center;
  }

  .lb-draw-pages {
    display: flex;
    overflow-x: auto;
  }

  .lb-draw-page-tab {
    min-width: 120px;
  }

  .lb-draw-toolbar {
    position: sticky;
    bottom: 0;
    z-index: 10;
    padding: 10px;
    border: 1px solid #dfe5f4;
    border-radius: 8px;
    background: #fff;
  }

  .lb-draw-toolbar button {
    flex: 1 1 calc(50% - 8px);
    min-height: 44px;
  }

  .lb-note-draw .lb-note-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 20;
    padding: 10px 0 0;
    background: #fff;
  }

  .lb-draw-options {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 12px;
  }

  .lb-draw-control-group {
    flex: 0 0 auto;
    min-width: 220px;
  }

  .lb-draw-canvas-wrap,
  .lb-draw-canvas-wrap canvas {
    min-height: 460px;
  }

  .lb-note-draw.is-draw-fullscreen {
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }

  .lb-note-draw.is-draw-fullscreen .lb-draw-shell {
    display: flex;
    min-height: calc(100dvh - 16px);
    flex-direction: column;
  }

  .lb-note-draw.is-draw-fullscreen .lb-draw-pages {
    order: 2;
  }

  .lb-note-draw.is-draw-fullscreen .lb-draw-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
  }

  .lb-note-draw.is-draw-fullscreen .lb-draw-toolbar {
    top: 0;
    bottom: auto;
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .lb-note-draw.is-draw-fullscreen .lb-draw-toolbar button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .lb-note-draw.is-draw-fullscreen .lb-draw-options {
    position: static;
  }

  .lb-note-draw.is-draw-fullscreen .lb-draw-canvas-wrap,
  .lb-note-draw.is-draw-fullscreen .lb-draw-canvas-wrap canvas {
    min-height: max(540px, calc(100dvh - 300px));
  }

  .lb-formula-keypad {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lb-formula-dialog footer,
  .lb-visual-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .lb-photo-stage {
    grid-template-columns: 1fr;
  }

  .lb-photo-editor-dialog header h2 {
    font-size: 18px;
  }

  .lb-photo-mode-switch {
    grid-template-columns: 1fr;
  }
}

.lb-btn-notebook {
  border-color: #d8d1ff;
  background: #f7f4ff;
  color: var(--lb-primary);
}

.lb-notebook-float {
  position: fixed;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  z-index: 1030;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(75, 24, 244, .28);
  border-radius: 999px;
  padding: 0 18px;
  background: var(--lb-primary);
  color: #fff;
  box-shadow: 0 18px 42px rgba(35, 20, 90, .24);
  font-weight: 800;
  cursor: pointer;
}

.lb-notebook-float:hover,
.lb-notebook-float:focus-visible,
.lb-btn-notebook:hover,
.lb-btn-notebook:focus-visible {
  box-shadow: 0 0 0 4px rgba(75, 24, 244, .12);
  outline: 0;
}

.lb-notebook-drawer[hidden] {
  display: none;
}

.lb-notebook-drawer {
  position: fixed;
  inset: 0;
  z-index: 1040;
  pointer-events: none;
}

.lb-notebook-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 15, 35, .18);
  opacity: 0;
  transition: opacity .18s ease;
}

.lb-notebook-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(620px, 62vw, 940px);
  height: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: -22px 0 46px rgba(17, 24, 39, .18);
  transform: translateX(100%);
  transition: transform .22s ease;
  pointer-events: auto;
}

.lb-notebook-drawer.is-open,
.lb-notebook-drawer.is-open .lb-notebook-drawer-backdrop {
  pointer-events: auto;
}

.lb-notebook-drawer.is-open .lb-notebook-drawer-backdrop {
  opacity: 1;
}

.lb-notebook-drawer.is-open .lb-notebook-drawer-panel {
  transform: translateX(0);
}

.lb-notebook-drawer-bar {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--lb-line);
  background: #fbfcff;
}

.lb-notebook-drawer-bar span {
  color: var(--lb-primary);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lb-notebook-drawer-bar h2 {
  margin: 2px 0 0;
  color: var(--lb-ink);
  font-size: 20px;
  font-weight: 900;
}

.lb-notebook-drawer-close,
.lb-notebook-inline-close {
  border: 1px solid var(--lb-line);
  border-radius: 8px;
  background: #fff;
  color: var(--lb-ink);
  cursor: pointer;
}

.lb-notebook-drawer-close {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  font-weight: 800;
}

.lb-notebook-inline-close {
  width: 34px;
  height: 34px;
  display: none;
  place-items: center;
  flex: 0 0 auto;
}

.lb-notebook-drawer .lb-notebook {
  flex: 1 1 auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.lb-notebook-full {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.lb-notebook-full-intro {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--lb-line);
  background: #f8f7ff;
}

.lb-notebook-full-intro span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #ddd7ff;
  border-radius: 999px;
  color: #3f22a5;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
}

.lb-notebook-full-intro i {
  color: var(--lb-primary);
}

.lb-notebook-embed-frame {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  border: 0;
  background: #fff;
}

/* The full notebook also runs inside the problem drawer. In embedded mode we
   keep the real upload, formula and drawing tools, but remove duplicate site
   chrome and the notebook library sidebar. */
body:has(.lb-shell.is-notebook-embed) .main-wrapper > *:not(.lb-shell) {
  display: none !important;
}

body:has(.lb-shell.is-notebook-embed),
body:has(.lb-shell.is-notebook-embed) .main-wrapper {
  min-height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
}

.lb-shell.is-notebook-embed {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  background: #fff;
}

.lb-shell.is-notebook-embed > .lb-header,
.lb-shell.is-notebook-embed > .lb-checkout-notice,
.lb-shell.is-notebook-embed .lb-notes-sidebar {
  display: none !important;
}

.lb-shell.is-notebook-embed .lb-notes-app,
.lb-shell.is-notebook-embed .lb-notes-editor {
  grid-template-columns: minmax(0, 1fr);
}

.lb-shell.is-notebook-embed .lb-notes-app {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0;
  background: #fff;
}

.lb-shell.is-notebook-embed .lb-note-editor {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 16px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.lb-shell.is-notebook-embed .lb-note-reader-head {
  display: none;
}

.lb-quick-note {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #fff;
}

.lb-quick-note .lb-notebook-head {
  flex: 0 0 auto;
}

.lb-quick-note-heading {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.lb-quick-note-heading strong {
  color: var(--lb-ink);
  font-size: 15px;
  font-weight: 900;
}

.lb-quick-note-heading strong i {
  margin-right: 6px;
  color: var(--lb-primary);
}

.lb-quick-note-heading span,
.lb-quick-note-footer > span {
  color: var(--lb-muted);
  font-size: 12px;
}

.lb-quick-note-label {
  flex: 0 0 auto;
  padding: 16px 20px 10px;
  color: var(--lb-ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
}

.lb-notebook-drawer .lb-quick-note textarea {
  flex: 1 1 auto;
  width: calc(100% - 28px);
  min-height: 220px;
  height: auto;
  margin: 0 14px 14px;
  resize: none;
  border: 1px solid #d9def0;
  border-radius: 14px;
  padding: 20px 20px 20px 36px;
  font-size: 17px;
  line-height: 1.9;
  box-shadow: inset 0 1px 0 rgba(16, 39, 91, .03);
}

.lb-notebook-drawer .lb-quick-note textarea:focus {
  border-color: rgba(75, 24, 244, .58);
  box-shadow: 0 0 0 4px rgba(75, 24, 244, .1);
}

.lb-quick-note-footer {
  flex: 0 0 auto;
  display: grid;
  gap: 10px;
  padding: 12px 14px max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--lb-line);
  background: #fbfcff;
}

.lb-quick-note-footer > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.lb-quick-note-footer .lb-btn {
  min-height: 46px;
  justify-content: center;
  text-align: center;
}

.lb-quick-note-footer button:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.lb-notebook-drawer .lb-notebook textarea {
  min-height: 0;
  height: calc(100vh - 190px);
}

.lb-notebook-drawer .lb-notebook-inline-close {
  display: grid;
}

.lb-notebook-drawer-open {
  overflow: hidden;
}

@media (min-width: 1180px) {
  .lb-notebook-drawer-open {
    overflow: auto;
  }
}

@media (max-width: 899px) {
  .lb-notebook-float {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    min-height: 46px;
    padding: 0 15px;
  }

  .lb-notebook-drawer-panel {
    width: 100%;
    max-width: none;
  }

  .lb-notebook-drawer-bar {
    padding-top: max(14px, env(safe-area-inset-top));
  }

  .lb-notebook-drawer .lb-notebook textarea {
    height: auto;
  }

  .lb-notebook-drawer .lb-quick-note textarea {
    min-height: 180px;
    margin-bottom: 10px;
    font-size: 17px;
  }

  .lb-quick-note-label {
    padding: 12px 14px 8px;
  }

  .lb-quick-note-footer {
    padding-top: 10px;
  }
}

@media (max-width: 430px) {
  .lb-notebook-drawer-bar {
    min-height: 62px;
  }

  .lb-notebook-drawer-bar h2 {
    font-size: 18px;
  }

  .lb-notebook-drawer-close span {
    display: none;
  }

  .lb-notebook-drawer-close {
    width: 42px;
    padding: 0;
    justify-content: center;
  }

  .lb-quick-note-footer > div {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 899px) and (max-height: 600px) {
  .lb-notebook-drawer-bar {
    min-height: 54px;
    padding-block: 7px;
  }

  .lb-notebook-drawer-bar h2 {
    font-size: 17px;
  }

  .lb-quick-note .lb-notebook-head {
    min-height: 44px;
  }

  .lb-quick-note-label {
    padding-block: 7px 5px;
    font-size: 13px;
  }

  .lb-notebook-drawer .lb-quick-note textarea {
    min-height: 104px;
  }

  .lb-quick-note-footer > div {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .lb-quick-note-footer .lb-btn {
    min-height: 42px;
    padding-inline: 8px;
    font-size: 12px;
  }
}

@media (max-width: 560px) {
  .lb-problem-actions {
    grid-template-columns: 1fr;
  }

  .lb-btn-community,
  .lb-community-counts {
    grid-column: auto;
  }
}

/* Problem contextual sidebar */
.lb-problem-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  width: 100%;
}

.lb-problem-primary {
  min-width: 0;
}

.lb-problem-context {
  min-width: 0;
}

.lb-problem-context-details {
  border: 1px solid rgba(94, 78, 255, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 38px rgba(20, 32, 72, 0.08);
  overflow: hidden;
}

.lb-problem-context-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  color: #111a4a;
  font-size: 0.92rem;
  font-weight: 800;
}

.lb-problem-context-details summary::-webkit-details-marker {
  display: none;
}

.lb-problem-context-details summary i {
  color: #5b2dff;
  font-size: 0.78rem;
  transition: transform 0.18s ease;
}

.lb-problem-context-details[open] summary i {
  transform: rotate(180deg);
}

.lb-problem-context-body {
  display: grid;
  gap: 12px;
  padding: 0 12px 12px;
}

.lb-context-card {
  border: 1px solid rgba(17, 26, 74, 0.08);
  border-radius: 14px;
  background: #fff;
  padding: 14px;
}

.lb-context-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.lb-context-card-head h3 {
  margin: 0;
  color: #111a4a;
  font-size: 0.9rem;
  font-weight: 850;
}

.lb-context-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  color: #5b2dff;
  background: rgba(91, 45, 255, 0.1);
  flex: 0 0 auto;
}

.lb-context-metrics {
  display: grid;
  gap: 9px;
  margin: 0;
}

.lb-context-metrics div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(17, 26, 74, 0.07);
}

.lb-context-metrics div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.lb-context-metrics dt {
  color: #697195;
  font-size: 0.78rem;
  font-weight: 700;
}

.lb-context-metrics dd {
  margin: 0;
  color: #101844;
  font-size: 0.9rem;
  font-weight: 850;
  text-align: right;
}

.lb-context-activity-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lb-context-activity-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #697195;
  font-size: 0.82rem;
}

.lb-context-activity-list strong {
  color: #5b2dff;
  font-size: 1rem;
}

.lb-context-empty,
.lb-context-note {
  margin: 0;
  color: #697195;
  font-size: 0.82rem;
  line-height: 1.45;
}

.lb-context-note {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(17, 26, 74, 0.07);
}

@media (min-width: 1500px) {
  .lb-problem-layout {
    grid-template-columns: minmax(0, 980px) 292px;
    justify-content: center;
    gap: 20px;
  }

  .lb-problem-column {
    width: 100%;
    max-width: 980px;
  }

  .lb-problem-context {
    position: sticky;
    top: 18px;
  }
}

@media (min-width: 1024px) and (max-width: 1499px) {
  .lb-problem-context-body {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lb-context-card {
    min-width: 0;
  }
}

@media (max-width: 767px) {
  .lb-problem-context-details {
    border-radius: 16px;
  }

  .lb-problem-context-details summary {
    padding: 13px 14px;
  }

  .lb-problem-context-body {
    padding: 0 10px 10px;
  }

  .lb-context-card {
    padding: 13px;
  }

  .lb-context-metrics div,
  .lb-context-activity-list li {
    align-items: flex-start;
  }
}

/* Problem action hierarchy refinements */
.lb-problem-title-wrap {
  min-width: 0;
  max-width: 100%;
}

.lb-problem-head {
  align-items: start;
  grid-template-columns: minmax(0, 1fr) auto;
}

.lb-problem h2 {
  margin-bottom: 0;
  overflow-wrap: anywhere;
}

.lb-problem-tools {
  align-items: center;
  align-self: start;
  gap: 8px;
  justify-content: flex-end;
}

.lb-problem-tools button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(17, 26, 74, 0.1);
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
  color: #26345f;
  font-size: 0.82rem;
  font-weight: 750;
}

.lb-problem-tools button:hover,
.lb-problem-tools button:focus-visible {
  border-color: rgba(91, 45, 255, 0.35);
  color: var(--lb-primary);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(91, 45, 255, 0.1);
}

.lb-problem-cta {
  margin-top: 16px;
}

.lb-problem-cta .lb-btn-primary {
  width: 100%;
  min-height: 50px;
  font-size: 1rem;
}

.lb-problem-social-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 16px 0 8px;
  padding: 12px 14px;
  border: 1px solid rgba(17, 26, 74, 0.08);
  border-radius: 12px;
  background: #f8f9ff;
  color: #475071;
  font-size: 0.88rem;
  line-height: 1.35;
}

.lb-problem-social-main,
.lb-problem-social-community {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.lb-problem-social-main strong {
  color: #111a4a;
  font-weight: 800;
}

.lb-problem-social-community {
  justify-content: flex-end;
  flex: 0 1 auto;
}

.lb-problem-social-community a {
  color: #5b2dff;
  font-weight: 800;
  text-decoration: none;
}

.lb-problem-social-community a:hover,
.lb-problem-social-community a:focus-visible {
  color: #3710ba;
  outline: 0;
  text-decoration: underline;
}

.lb-problem-nav-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.lb-problem-nav-actions .lb-btn {
  min-height: 44px;
  justify-content: center;
  text-align: center;
}

.lb-btn-nav,
.lb-btn-guide {
  background: #f7f8fc;
  border-color: var(--lb-line);
  color: #26345f;
}

.lb-btn-nav:hover,
.lb-btn-nav:focus-visible,
.lb-btn-guide:focus-visible {
  background: #f7f4ff;
  border-color: rgba(91, 45, 255, 0.28);
  color: var(--lb-primary);
  outline: 0;
}

.lb-btn-guide.is-disabled,
.lb-btn-nav.is-disabled {
  opacity: 0.58;
  cursor: not-allowed;
  pointer-events: none;
}

.lb-context-link {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  border-top: 1px solid rgba(17, 26, 74, 0.07);
  padding-top: 10px;
  color: var(--lb-primary);
  font-size: 0.84rem;
  font-weight: 850;
  text-decoration: none;
}

.lb-context-link:hover,
.lb-context-link:focus-visible {
  color: #3710ba;
  outline: 0;
}

@media (max-width: 899px) {
  .lb-problem-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .lb-problem-tools {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .lb-problem {
    padding: 20px 16px;
  }

  .lb-problem h2 {
    font-size: 24px;
  }

  .lb-problem-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin-top: 2px;
  }

  .lb-problem-tools button {
    justify-content: center;
    min-width: 0;
    white-space: normal;
  }

  .lb-problem-social-strip {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    padding: 11px 12px;
  }

  .lb-problem-social-community {
    justify-content: flex-start;
  }

  .lb-problem-nav-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lb-problem-nav-actions .lb-btn-guide {
    grid-column: 1 / -1;
    order: 2;
  }

  .lb-problem-nav-actions .lb-btn-next {
    order: 3;
  }

  .lb-notebook-float {
    bottom: max(18px, env(safe-area-inset-bottom));
    max-width: calc(100vw - 28px);
    min-height: 44px;
    padding: 0 14px;
  }
}

@media (max-width: 640px) {
  .lb-problem-nav-actions .lb-btn-nav:not(.lb-btn-next),
  .lb-problem-nav-actions .lb-btn-next {
    order: 1;
  }

  .lb-problem-nav-actions .lb-btn-guide {
    order: 2;
  }
}

/* Mobile overflow and problem readability refinements */
.lb-chapter-mobile-bar,
.lb-sidebar-backdrop {
  display: none;
}

.lb-problem-statement .lb-math {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 899px) {
  .lb-shell,
  .lb-workspace,
  .lb-main,
  .lb-problem-layout,
  .lb-problem-primary,
  .lb-live-top,
  .lb-problem-column,
  .lb-card,
  .lb-problem,
  .lb-tabs,
  .lb-problem-context {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .lb-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .lb-chapter-mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 0;
    border: 1px solid rgba(17, 26, 74, 0.08);
    border-radius: 14px;
    padding: 10px 12px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(20, 32, 72, 0.06);
  }

  .lb-chapter-mobile-bar div {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: #111a4a;
  }

  .lb-chapter-mobile-bar strong,
  .lb-chapter-mobile-bar span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .lb-chapter-mobile-bar strong {
    font-size: 0.9rem;
    font-weight: 900;
  }

  .lb-chapter-mobile-bar span {
    color: #697195;
    font-size: 0.82rem;
    font-weight: 750;
  }

  .lb-chapter-mobile-bar button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(91, 45, 255, 0.22);
    border-radius: 10px;
    padding: 0 11px;
    background: #f7f4ff;
    color: var(--lb-primary);
    font-weight: 850;
    cursor: pointer;
    flex: 0 0 auto;
  }

  .lb-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1045;
    width: min(88vw, 330px);
    max-width: calc(100vw - 26px);
    transform: translateX(-106%);
    transition: transform 0.22s ease;
    pointer-events: none;
  }

  .lb-sidebar.is-open {
    transform: translateX(0);
    pointer-events: auto;
  }

  .lb-sidebar .lb-card {
    height: 100%;
    border-radius: 0 18px 18px 0;
    overflow-y: auto;
    box-shadow: 18px 0 36px rgba(17, 24, 39, 0.2);
  }

  .lb-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1044;
    background: rgba(8, 15, 35, 0.22);
  }

  .lb-sidebar-backdrop.is-open {
    display: block;
  }

  .lb-sidebar-title .lb-sidebar-close {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--lb-line);
    border-radius: 8px;
    background: #fff;
    color: var(--lb-ink);
  }

  .lb-problem-context-details {
    box-shadow: none;
  }
}

@media (min-width: 900px) {
  .lb-sidebar-title .lb-sidebar-close {
    display: none;
  }
}

@media (max-width: 640px) {
  .lb-header-main {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto;
    gap: 8px 10px;
    padding: 8px 0;
  }

  .lb-header-stats {
    display: contents;
  }

  .lb-progress-inline {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
    justify-content: flex-start;
    gap: 8px;
  }

  .lb-xp-pill {
    grid-column: 3;
    grid-row: 1;
    justify-content: center;
    min-height: 32px;
    padding-inline: 8px;
  }

  .lb-xp-pill span { display: none; }

  .lb-title h1 {
    overflow: hidden;
    font-size: 15px;
    line-height: 1.2;
    text-overflow: ellipsis;
  }

  .lb-title h1 > span { display: none; }

  .lb-progress-inline > i {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  .lb-progress-count em {
    display: none;
  }

  .lb-access-strip {
    align-items: stretch;
    flex-direction: column;
  }

  .lb-access-strip .lb-btn {
    width: 100%;
  }

  .lb-topnav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: visible;
    min-height: 54px;
    width: 100%;
    border-top-color: #e7ebf4;
  }

  .lb-badge-side-access {
    top: 56%;
    width: 52px;
    min-height: 70px;
    gap: 4px;
    padding: 9px 5px;
    border-radius: 13px 0 0 13px;
  }

  .lb-badge-side-access:hover,
  .lb-badge-side-access:focus-visible,
  .lb-badge-side-access.is-active { width: 56px; }
  .lb-badge-side-access small { display: none; }
  .lb-badge-side-access strong { font-size: 8px; }

  .lb-community-side-access{top:calc(56% + 82px);width:52px;min-height:66px;gap:3px;padding:8px 4px;border-radius:13px 0 0 13px}.lb-community-side-access:hover,.lb-community-side-access:focus-visible,.lb-community-side-access.is-active{width:56px}.lb-community-side-access small{display:none}.lb-community-side-access strong{font-size:7px}

  .lb-topnav a {
    min-width: 0;
    min-height: 54px;
    gap: 0;
    padding: 5px 2px;
    border-right: 0;
    border-left: 0;
    font-size: 0;
  }

  .lb-topnav a .lb-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 12px;
    background: transparent;
    font-size: 19px;
    transition: color .18s ease, background .18s ease, transform .18s ease;
  }

  .lb-topnav-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .lb-topnav a.is-active {
    border-top-width: 2px;
    background: linear-gradient(180deg, rgba(91, 43, 231, .06), transparent 82%);
  }

  .lb-topnav a.is-active .lb-icon {
    background: #ede8ff;
    color: var(--lb-primary);
    transform: translateY(-1px);
  }

  .lb-chapter-mobile-bar {
    padding: 9px 10px;
  }

  .lb-chapter-mobile-bar div {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
  }

  .lb-chapter-mobile-bar button {
    min-height: 36px;
    padding-inline: 9px;
    font-size: 0.82rem;
  }
}

@media (max-width: 360px) {
  .lb-shell {
    padding-inline: 8px;
  }

  .lb-topnav a {
    min-height: 50px;
  }

  .lb-topnav a .lb-icon {
    width: 34px;
    height: 34px;
    font-size: 17px;
  }
}

/* Safe math overflow fallback: preserve original TeX */
.lb-problem-statement .lb-math,
.lb-problem-statement .lb-problem-formula {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}

.lb-problem-statement .lb-math .katex,
.lb-problem-statement .lb-problem-formula .katex {
  font-size: clamp(0.86rem, 1.8vw, 1.08em);
}

.lb-problem-statement .lb-math.has-math-overflow::after,
.lb-problem-statement .lb-problem-formula.has-math-overflow::after {
  content: attr(data-math-scroll-hint);
  display: none;
  margin-top: 4px;
  color: #697195;
  font-size: 0.72rem;
  font-weight: 750;
}

.lb-problem-access-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 6px 0 10px;
}

.lb-access-badge,
.lb-route-role-badge,
.lb-draft-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1;
}

.lb-access-badge {
  border: 1px solid rgba(26, 188, 156, 0.24);
  background: rgba(26, 188, 156, 0.09);
  color: #087b67;
}

.lb-access-badge.is-free {
  border-color: rgba(91, 45, 255, 0.2);
  background: rgba(91, 45, 255, 0.08);
  color: var(--lb-primary);
}

.lb-access-badge.is-premium {
  border-color: rgba(245, 158, 11, 0.26);
  background: rgba(255, 247, 237, 0.95);
  color: #9a5a00;
}

.lb-draft-badge {
  border: 1px solid rgba(239, 68, 68, 0.24);
  background: rgba(254, 242, 242, 0.95);
  color: #b91c1c;
}

.lb-route-role-badge {
  border: 1px solid rgba(91, 45, 255, 0.2);
  background: rgba(91, 45, 255, 0.08);
  color: var(--lb-primary);
}

.lb-route-role-badge.is-challenge {
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(255, 247, 237, 0.96);
  color: #9a5a00;
}

.lb-route-role-badge.is-secret {
  border-color: rgba(100, 116, 139, 0.26);
  background: rgba(248, 250, 252, 0.96);
  color: #475569;
}

.lb-access-panel {
  width: 100%;
  min-height: 190px;
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 24px;
  border: 1px dashed rgba(91, 45, 255, 0.28);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(91, 45, 255, 0.06), rgba(255, 255, 255, 0.92));
  color: var(--lb-ink);
  text-align: center;
}

.lb-access-panel strong {
  font-size: 1.05rem;
  font-weight: 900;
}

.lb-access-panel p {
  max-width: 520px;
  margin: 0;
  color: var(--lb-muted);
  line-height: 1.55;
}

.lb-access-panel small {
  color: var(--lb-muted);
  font-weight: 750;
}

@media (max-width: 640px) {
  .lb-problem-statement .lb-math .katex,
  .lb-problem-statement .lb-problem-formula .katex {
    font-size: clamp(0.78rem, 3.15vw, 0.95rem);
  }

  .lb-problem-statement .lb-math.has-math-overflow::after,
  .lb-problem-statement .lb-problem-formula.has-math-overflow::after {
    display: block;
  }
}
.lb-training {
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 18px 48px;
}

.lb-training-landing {
  display: grid;
  gap: 18px;
}

.lb-training-test-focus {
  display: grid;
  grid-template-columns: minmax(180px, .72fr) minmax(0, 1.8fr) auto;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  border: 1px solid #d8cbff;
  border-radius: 20px;
  background: linear-gradient(125deg, #f8f5ff, #fff 62%, #effaf7);
  box-shadow: 0 12px 30px rgba(64, 39, 143, .08);
}

.lb-training-test-focus > span {
  color: #6338de;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
}

.lb-training-test-focus > span i {
  margin-right: 7px;
}

.lb-training-test-focus h2,
.lb-training-test-focus p {
  margin: 0;
}

.lb-training-test-focus h2 {
  color: #16245f;
  font-size: clamp(21px, 2.3vw, 29px);
}

.lb-training-test-focus p {
  margin-top: 5px;
  color: #68718d;
  line-height: 1.45;
}

.lb-training-test-focus > strong {
  padding: 10px 14px;
  border-radius: 999px;
  background: #6539e5;
  color: #fff;
  white-space: nowrap;
}

.lb-training-test-comparison {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  max-width: 650px;
  margin: 22px auto;
  padding: 18px;
  border: 1px solid #d8cbff;
  border-radius: 18px;
  background: linear-gradient(135deg, #f7f4ff, #effbf6);
}

.lb-training-test-comparison[hidden] {
  display: none;
}

.lb-training-test-comparison > div {
  display: grid;
  gap: 3px;
  text-align: center;
}

.lb-training-test-comparison small {
  color: #717993;
  font-weight: 800;
}

.lb-training-test-comparison strong {
  color: #312271;
  font-size: 30px;
}

.lb-training-test-comparison > i {
  color: #6740e4;
}

.lb-training-test-comparison > p {
  grid-column: 1 / -1;
  margin: 0;
  color: #344064;
  text-align: center;
  font-weight: 800;
}

@media (max-width: 720px) {
  .lb-training-test-focus {
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 18px;
  }

  .lb-training-test-focus > span {
    grid-column: 1 / -1;
  }

  .lb-training-test-focus > strong {
    align-self: start;
  }
}

@media (max-width: 480px) {
  .lb-training-test-focus {
    grid-template-columns: 1fr;
  }

  .lb-training-test-focus > strong {
    justify-self: start;
  }

  .lb-training-test-comparison {
    grid-template-columns: 1fr auto 1fr;
    padding: 15px 12px;
  }

  .lb-training-test-comparison strong {
    font-size: 25px;
  }
}

.lb-training-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  gap: 24px;
  overflow: hidden;
  min-height: 390px;
  padding: 36px;
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 28px;
  background:
    radial-gradient(circle at 82% 18%, rgba(109, 40, 217, 0.24), transparent 26%),
    radial-gradient(circle at 12% 88%, rgba(37, 99, 235, 0.18), transparent 28%),
    linear-gradient(135deg, #f7f3ff 0%, #eef6ff 48%, #ffffff 100%);
  box-shadow: 0 22px 60px rgba(30, 41, 59, 0.12);
}

.lb-training-hero:before,
.lb-training-hero:after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.lb-training-hero:before {
  right: 28%;
  top: 34px;
  width: 92px;
  height: 92px;
  border: 1px solid rgba(99, 102, 241, 0.18);
}

.lb-training-hero:after {
  right: 46px;
  bottom: -52px;
  width: 180px;
  height: 180px;
  background: rgba(14, 165, 233, 0.12);
}

.lb-training-hero-copy,
.lb-training-hero-visual {
  position: relative;
  z-index: 1;
}

.lb-training-eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 7px 10px;
  border: 1px solid rgba(79, 70, 229, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #4f46e5;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
}

.lb-training-chapter {
  margin: 16px 0 6px;
  color: #475569;
  font-size: 15px;
  font-weight: 800;
}

.lb-training-hero h1 {
  max-width: 620px;
  margin: 0;
  color: #111827;
  font-size: 52px;
  line-height: 1.02;
  letter-spacing: 0;
}

.lb-training-lead {
  max-width: 590px;
  margin: 18px 0 0;
  color: #475569;
  font-size: 18px;
  line-height: 1.55;
}

.lb-training-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 26px;
}

.lb-training .lb-btn {
  min-height: 44px;
  border-radius: 12px;
}

.lb-training .lb-btn-primary {
  border: 0;
  background: linear-gradient(135deg, #5b21b6, #2563eb);
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.22);
}

.lb-training .lb-btn-soft {
  border: 1px solid rgba(79, 70, 229, 0.18);
  background: rgba(255, 255, 255, 0.72);
  color: #3730a3;
}

.lb-training .lb-btn-soft:disabled {
  opacity: 0.72;
  cursor: not-allowed;
}

.lb-training-hero-actions > a {
  color: #475569;
  font-weight: 800;
  text-decoration: none;
}

.lb-training-hero-visual {
  align-self: stretch;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-content: center;
  min-height: 310px;
  min-width: 0;
}

.lb-training-orbit {
  align-self: center;
  display: grid;
  place-items: center;
  width: min(100%, 214px);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #fff 0 58%, transparent 59%),
    conic-gradient(#5b21b6 var(--training-progress, 0%), #dbe7ff 0);
  box-shadow: inset 0 0 0 1px rgba(79, 70, 229, 0.14), 0 18px 40px rgba(91, 33, 182, 0.14);
}

.lb-training-orbit strong,
.lb-training-orbit i {
  color: #1e1b4b;
  font-size: 40px;
  line-height: 1;
}

.lb-training-orbit span {
  margin-top: -54px;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.lb-training-visual-card {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 14px 28px rgba(30, 41, 59, 0.08);
  backdrop-filter: blur(10px);
  min-width: 0;
}

.lb-training-visual-card small,
.lb-training-mode small,
.lb-training-section-head span,
.lb-training-stat-grid small {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.lb-training-visual-card b {
  display: block;
  margin-top: 5px;
  color: #111827;
  font-size: 16px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.lb-training-visual-card.is-session {
  align-self: auto;
}

.lb-training-hero-visual > p {
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px 14px;
  border: 1px dashed rgba(79, 70, 229, 0.25);
  border-radius: 16px;
  color: #64748b;
  background: rgba(255, 255, 255, 0.48);
  font-size: 13px;
}

.lb-training-modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.lb-training-mode,
.lb-training-progress-card,
.lb-training-topic-card,
.lb-training-login-card {
  border: 1px solid #e3e8f4;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(30, 41, 59, 0.08);
}

.lb-training-mode {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  min-height: 178px;
  padding: 18px;
}

.lb-training-mode > span:first-child {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: #eef2ff;
  color: #4f46e5;
  font-size: 18px;
}

.lb-training-mode h2 {
  margin: 4px 0 6px;
  color: #0f172a;
  font-size: 20px;
  letter-spacing: 0;
}

.lb-training-mode p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.45;
}

.lb-training-mode .lb-btn,
.lb-training-mode-state {
  grid-column: 2;
  align-self: end;
  width: fit-content;
}

.lb-training-mode.is-primary {
  border-color: rgba(79, 70, 229, 0.22);
  background: linear-gradient(180deg, #ffffff 0%, #f7f7ff 100%);
}

.lb-training-mode-state {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-weight: 900;
  font-size: 12px;
}

.lb-training-mode-state.is-coming {
  background: #f5f3ff;
  color: #6d28d9;
}

.lb-training-lower {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 14px;
}

.lb-training-progress-card,
.lb-training-topic-card,
.lb-training-login-card {
  padding: 20px;
}

.lb-training-section-head h2 {
  margin: 4px 0 0;
  color: #0f172a;
  font-size: 22px;
  letter-spacing: 0;
}

.lb-training-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.lb-training-stat-grid div {
  min-width: 0;
  padding: 12px;
  border-radius: 16px;
  background: #f8fafc;
}

.lb-training-stat-grid strong {
  display: block;
  margin-top: 5px;
  color: #111827;
  font-size: 22px;
  line-height: 1;
}

.lb-training-wide-meter,
.lb-training-topic-progress {
  overflow: hidden;
  height: 10px;
  border-radius: 999px;
  background: #e7edf7;
}

.lb-training-wide-meter {
  margin-top: 16px;
}

.lb-training-wide-meter span,
.lb-training-topic-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #5b21b6, #2563eb);
}

.lb-training-progress-card > p {
  margin: 14px 0 0;
  color: #64748b;
  line-height: 1.5;
}

.lb-training-topic-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.lb-training-topic-list article {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(110px, 0.45fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid #edf2fa;
  border-radius: 16px;
  background: #fbfdff;
}

.lb-training-topic-list strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  color: #0f172a;
  font-size: 14px;
}

.lb-training-topic-list small {
  color: #64748b;
  font-weight: 800;
}

.lb-training-topic-list button {
  border: 0;
  background: transparent;
  color: #4f46e5;
  font-weight: 900;
}

.lb-training-login-card {
  display: flex;
  gap: 14px;
  align-items: center;
}

.lb-training-login-card i {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: #eef2ff;
  color: #4f46e5;
}

.lb-training-login-card h2 {
  margin: 0 0 4px;
  color: #0f172a;
  font-size: 20px;
}

.lb-training-login-card p {
  margin: 0;
  color: #64748b;
}

.lb-training-actions,
.lb-training-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.lb-training-session {
  width: min(1120px, 100%);
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(18px, 2.5vw, 30px);
  border-radius: 22px;
}

.lb-training-session > header,
.lb-chapter-training-cta {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
}

.lb-training-session > header {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e7ebf4;
}

.lb-training-session > header span {
  display: block;
  margin-bottom: 4px;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
}

.lb-training-session h2,
.lb-training-summary h2,
.lb-chapter-training-cta h2 {
  margin: 6px 0 8px;
}

.lb-training-session > header h2 {
  margin: 0;
  color: #0b1f55;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.08;
}

.lb-training-problem {
  display: grid;
  gap: 20px;
  margin: 0;
}

.lb-training-statement {
  padding: 2px 2px 8px;
  font-size: 18px;
  line-height: 1.55;
}

.lb-training-origin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}

.lb-training-origin span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4f46e5;
  font-size: 12px;
  font-weight: 900;
}

.lb-training-origin strong {
  color: #10275b;
  font-size: 15px;
  font-weight: 850;
}

.lb-training-origin em {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.lb-training-statement p {
  margin: 0 0 10px;
}

.lb-training-statement .lb-problem-formula,
.lb-training-statement .katex-display {
  margin: 12px 0 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 0 6px;
}

.lb-training-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.lb-training-option {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 64px;
  padding: 10px 14px;
  border: 1px solid #d8e0ec;
  border-radius: 12px;
  background: #fff;
  color: #1f2937;
  text-align: left;
}

.lb-training-option span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #eef2ff;
  color: #1d4ed8;
  font-weight: 800;
}

.lb-training-option strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 700;
  font-size: 16px;
}

.lb-training-option.is-selected {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.13);
}

.lb-training-feedback {
  padding: 12px 14px;
  border-radius: 12px;
  background: #eff6ff;
  color: #1e3a8a;
}

.lb-training-controls {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #e7ebf4;
}

.lb-training-feedback.is-correct {
  background: #ecfdf5;
  color: #047857;
}

.lb-training-feedback.is-wrong {
  background: #fff7ed;
  color: #c2410c;
}

.lb-training-explanation {
  margin-top: 10px;
  color: #334155;
}

.lb-training-summary {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(26px, 4vw, 44px);
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 8%, rgba(124, 58, 237, 0.11), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  text-align: center;
}

.lb-training-summary-head {
  display: grid;
  justify-items: center;
}

.lb-training-summary-head > i {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5, #2563eb);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.24);
  color: #fff;
  font-size: 24px;
}

.lb-training-summary-head > span {
  margin-bottom: 7px;
  color: #5b21b6;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lb-training-summary-head h2 {
  margin: 0;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.08;
}

.lb-training-summary-head p {
  max-width: 720px;
  margin: 12px auto 0;
  color: #475569;
  font-size: 17px;
  line-height: 1.55;
}

.lb-training-summary dl {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 28px 0 0;
}

.lb-training-summary dl div {
  min-height: 94px;
  padding: 17px 12px;
  border: 1px solid #dfe6f2;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(35, 54, 94, 0.055);
}

.lb-training-summary dt {
  margin-bottom: 8px;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

.lb-training-summary dd {
  margin: 0;
  color: #10275b;
  font-size: 24px;
  font-weight: 900;
}

.lb-training-summary-review {
  max-width: 820px;
  margin: 22px auto 0;
  padding: 15px 18px;
  border: 1px solid #dbe6ff;
  border-radius: 14px;
  background: #eef4ff;
  color: #334155;
  font-size: 16px;
  line-height: 1.45;
}

.lb-training-summary .lb-training-actions {
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

@media (max-width: 980px) {
  .lb-training {
    padding: 8px 12px 38px;
  }

  .lb-training-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 26px;
  }

  .lb-training-hero h1 {
    font-size: 34px;
  }

  .lb-training-lead {
    font-size: 16px;
  }

  .lb-training-hero-visual {
    grid-template-columns: 1fr 1fr;
    min-height: 0;
  }

  .lb-training-orbit {
    width: min(220px, 100%);
  }

  .lb-training-modes,
  .lb-training-lower {
    grid-template-columns: 1fr;
  }

  .lb-training-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lb-training-topic-list article {
    grid-template-columns: 1fr;
  }

  .lb-training-topic-progress {
    width: 100%;
  }

  .lb-training-hero-actions .lb-btn,
  .lb-training-mode .lb-btn,
  .lb-training-actions .lb-btn,
  .lb-training-controls .lb-btn {
    width: 100%;
    justify-content: center;
  }

  .lb-training-hero-actions > a {
    width: 100%;
    text-align: center;
  }

  .lb-training-session > header,
  .lb-chapter-training-cta {
    align-items: stretch;
    flex-direction: column;
  }

  .lb-training-session > header .lb-btn {
    width: 100%;
    justify-content: center;
  }

  .lb-training-summary dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lb-training-summary dl div:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .lb-training-session {
    padding: 16px;
    border-radius: 18px;
  }

  .lb-training-session > header {
    gap: 12px;
    margin-bottom: 17px;
    padding-bottom: 15px;
  }

  .lb-training-session > header h2 {
    font-size: 27px;
  }

  .lb-training-statement {
    padding-inline: 0;
    font-size: 16px;
  }

  .lb-training-statement .lb-problem-formula,
  .lb-training-statement .katex-display {
    font-size: 1.04em;
  }

  .lb-training-options {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .lb-training-option {
    min-height: 58px;
    padding: 8px 10px;
  }

  .lb-training-controls {
    margin-top: 16px;
    padding-top: 14px;
  }
}

@media (max-width: 520px) {
  .lb-training {
    padding-left: 8px;
    padding-right: 8px;
  }

  .lb-training-summary {
    padding: 22px 14px;
    border-radius: 18px;
  }

  .lb-training-summary-head > i {
    width: 52px;
    height: 52px;
  }

  .lb-training-summary-head h2 {
    font-size: 30px;
  }

  .lb-training-summary-head p {
    font-size: 15px;
  }

  .lb-training-summary dl {
    gap: 8px;
    margin-top: 20px;
  }

  .lb-training-summary dl div {
    min-height: 84px;
    padding: 14px 8px;
  }

  .lb-training-summary dd {
    font-size: 21px;
  }

  .lb-training-summary-review {
    margin-top: 16px;
    padding: 13px;
    font-size: 14px;
  }

  .lb-training-hero {
    padding: 22px;
    border-radius: 22px;
  }

  .lb-training-hero h1 {
    font-size: 31px;
  }

  .lb-training-chapter,
  .lb-training-lead {
    overflow-wrap: anywhere;
  }

  .lb-training-hero-visual {
    grid-template-columns: 1fr;
  }

  .lb-training-orbit {
    width: 190px;
  }

  .lb-training-mode {
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 16px;
  }
}

/* BM8 report/share MVP. Keep every selector feature-scoped. */
.lb-shell .lb-problem-tools {
  flex-wrap: wrap;
}

.lb-bm8-modal[hidden] {
  display: none !important;
}

.lb-bm8-modal {
  position: fixed;
  z-index: 1600;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
}

.lb-bm8-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(3px);
}

.lb-bm8-modal-panel {
  position: relative;
  width: min(580px, 100%);
  max-height: min(760px, calc(100vh - 40px));
  overflow-y: auto;
  padding: 24px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
}

.lb-bm8-modal-panel > header,
.lb-bm8-modal-panel form > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.lb-bm8-modal-panel > header {
  margin-bottom: 18px;
}

.lb-bm8-modal-panel header span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lb-bm8-modal-panel h2 {
  margin: 2px 0 0;
  color: #0f172a;
  font-size: 24px;
}

.lb-bm8-modal-panel.is-video {
  width: min(960px, 100%);
}

.lb-bm8-modal-panel.is-original-problem {
  width: min(1040px, 100%);
  padding: 0;
  overflow: hidden;
}

.lb-bm8-modal-panel.is-original-problem > header {
  margin: 0;
  padding: 20px 22px;
  border-bottom: 1px solid #e2e8f0;
}

.lb-problem-original-button {
  border-color: #c4b5fd !important;
  background: #f5f3ff !important;
  color: #5b21b6 !important;
}

.lb-problem-original-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lb-problem-original-actions > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  color: #4338ca;
  font-size: 13px;
  font-weight: 800;
}

.lb-problem-original-figure {
  margin: 0;
  padding: 22px;
  overflow: auto;
  background: #f8fafc;
}

.lb-problem-original-image-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid #dbe4f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
}

.lb-problem-original-image {
  display: block;
  width: 100%;
  max-height: calc(100vh - 220px);
  object-fit: contain;
}

.lb-problem-original-watermark {
  position: absolute;
  right: 2%;
  bottom: 4%;
  display: block;
  width: 16%;
  min-width: 72px;
  max-width: 170px;
  height: auto;
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
}

.lb-problem-original-figure figcaption {
  margin-top: 12px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}

.lb-bm8-video-status {
  display: grid;
  min-height: 96px;
  place-items: center;
  color: #64748b;
  font-weight: 700;
}

.lb-bm8-video-status:empty {
  display: none;
}

.lb-bm8-video-status.is-error {
  color: #c62828;
}

.lb-bm8-video-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
  border-radius: 16px;
  background: #090b18;
}

.lb-bm8-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.lb-bm8-modal-close {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #f1f5f9;
  color: #334155;
}

.lb-bm8-modal-panel fieldset {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

.lb-bm8-modal-panel legend,
.lb-bm8-comment-label {
  margin-bottom: 9px;
  color: #1e293b;
  font-weight: 800;
}

.lb-bm8-modal-panel fieldset label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #dbe4f0;
  border-radius: 11px;
  cursor: pointer;
}

.lb-bm8-modal-panel textarea,
.lb-bm8-copy-fallback {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 11px;
  padding: 12px;
  color: #0f172a;
  resize: vertical;
}

.lb-bm8-form-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
  padding: 6px 2px 10px;
  color: #64748b;
  font-size: 13px;
}

.lb-bm8-form-meta .is-error,
.lb-bm8-share-status.is-error {
  color: #b91c1c;
}

.lb-bm8-form-meta .is-success,
.lb-bm8-share-status.is-success {
  color: #047857;
  font-weight: 700;
}

.lb-bm8-modal-panel form > footer {
  justify-content: flex-end;
}

.lb-bm8-share-message {
  padding: 14px;
  border-radius: 12px;
  background: #f8fafc;
  color: #0f172a;
  font-weight: 750;
}

.lb-bm8-share-privacy {
  color: #475569;
  font-size: 14px;
}

.lb-bm8-share-privacy i {
  color: #059669;
}

.lb-bm8-share-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 18px 0 12px;
}

.lb-bm8-share-actions .lb-btn {
  justify-content: center;
}

.lb-btn-whatsapp {
  background: #16a34a;
  color: #fff;
}

.lb-bm8-share-status {
  min-height: 26px;
  padding-top: 8px;
  font-size: 13px;
}

.lb-bm8-revoke {
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: #64748b;
  font-size: 12px;
  text-decoration: underline;
}

.lb-bm8-invite {
  min-height: calc(100vh - 70px);
  display: grid;
  place-items: center;
  padding: 96px 20px 48px;
  background: radial-gradient(circle at 50% 10%, #e0e7ff 0, #f8fafc 44%, #eef2ff 100%);
}

.lb-bm8-invite-card {
  box-sizing: border-box;
  width: min(560px, 100%);
  max-width: 100%;
  min-width: 0;
  padding: 38px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(30, 41, 59, 0.14);
  text-align: center;
}

.lb-bm8-invite-brand {
  color: #4f46e5;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lb-bm8-invite-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 22px auto 14px;
  border-radius: 50%;
  background: #eef2ff;
  color: #4f46e5;
  font-size: 25px;
}

.lb-bm8-invite-icon.is-muted {
  background: #f1f5f9;
  color: #64748b;
}

.lb-bm8-invite-card h1 {
  margin: 0 0 12px;
  color: #0f172a;
  overflow-wrap: anywhere;
}

.lb-bm8-invite-card p {
  color: #475569;
}

.lb-bm8-invite-safe {
  margin: 20px 0;
  padding: 12px;
  border-radius: 12px;
  background: #ecfdf5;
  color: #047857 !important;
  font-size: 14px;
}

.lb-bm8-invite-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

@media (max-width: 600px) {
  .lb-shell .lb-problem-head {
    align-items: stretch;
    flex-direction: column;
  }

  .lb-shell .lb-problem-tools {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    margin-top: 10px;
  }

  .lb-shell .lb-problem-tools button {
    min-width: 0;
    padding: 9px 5px;
    font-size: 11px;
    white-space: normal;
  }

  .lb-bm8-modal {
    align-items: end;
    padding: 0;
  }

  .lb-bm8-modal-panel {
    width: 100%;
    max-height: calc(100vh - 28px);
    padding: 20px 16px calc(18px + env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0;
  }

  .lb-bm8-modal-panel.is-video {
    padding: 18px 12px calc(14px + env(safe-area-inset-bottom));
  }

  .lb-bm8-modal-panel.is-original-problem {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .lb-bm8-modal-panel.is-original-problem > header {
    align-items: flex-start;
    padding: 16px;
  }

  .lb-bm8-modal-panel.is-original-problem h2 {
    font-size: 20px;
  }

  .lb-problem-original-actions > a {
    width: 40px;
    padding: 0;
    justify-content: center;
    font-size: 0;
  }

  .lb-problem-original-actions > a i {
    font-size: 14px;
  }

  .lb-problem-original-figure {
    padding: 12px;
  }

  .lb-problem-original-image {
    max-height: calc(100vh - 190px);
  }

  .lb-bm8-share-actions {
    grid-template-columns: 1fr;
  }

  .lb-bm8-invite {
    padding: 86px 12px 28px;
  }

  .lb-bm8-invite-card {
    padding: 28px 18px;
  }

  .lb-bm8-invite-actions {
    flex-direction: column;
  }

  .lb-bm8-invite-actions .lb-btn {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .lb-community-composer {
    grid-template-columns: 1fr;
    padding: 13px;
  }

  .lb-community-composer-body {
    grid-column: 1;
    grid-row: auto;
  }

  .lb-community-composer-actions .lb-btn,
  .lb-community-reply-form .lb-btn {
    width: 100%;
    justify-content: center;
  }

  .lb-community-reply-form {
    grid-template-columns: minmax(0, 1fr) 54px auto;
    padding-left: 12px;
  }

  .lb-community-reply-form > p {
    grid-column: 1 / -1;
  }

  .lb-community-reply-form > .lb-community-file-preview {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .lb-community-reply-form > p {
    grid-row: 3;
  }

  .lb-community-media {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lb-community-media.is-single {
    max-width: 100%;
  }

  .lb-community-media.is-single img {
    max-height: 70vh;
  }

  .lb-community-media-viewer {
    padding: 14px;
  }

  .lb-community-replies {
    padding-left: 10px;
  }

  .lb-community-thread {
    padding: 13px;
  }

  .lb-community-thread > header {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .lb-community-kind {
    grid-column: 2;
    justify-self: start;
  }

  .lb-community-item-actions {
    margin-left: 0;
  }

  .lb-community-report-layer {
    align-items: end;
    padding: 0;
  }

  .lb-community-report-layer > form {
    width: 100%;
    padding: 22px 16px max(20px, env(safe-area-inset-bottom));
    border-radius: 18px 18px 0 0;
  }

  .lb-community-report-actions button {
    flex: 1;
  }
}

/* BM8 mobile problem card: keep secondary actions compact and math readable. */
@media (max-width: 640px) {
  .lb-shell .lb-problem-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .lb-shell .lb-problem-access-row {
    margin: 6px 0 0;
  }

  .lb-shell .lb-problem-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    width: 100%;
    margin-top: 0;
  }

  .lb-shell .lb-problem-tools button {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 0.72rem;
    line-height: 1;
    white-space: nowrap;
  }

  .lb-shell .lb-problem-tools button i {
    flex: 0 0 auto;
  }

  .lb-shell .lb-problem-statement {
    margin-top: 16px;
  }

  .lb-shell .lb-problem-statement .lb-math,
  .lb-shell .lb-problem-statement .lb-problem-formula {
    margin: 8px 0 2px;
    padding: 8px 0 10px;
  }

  .lb-shell .lb-problem-statement .lb-math .katex,
  .lb-shell .lb-problem-statement .lb-problem-formula .katex,
  .lb-shell .lb-problem-statement > .katex-display .katex {
    font-size: 1.28rem;
  }
}

@media (max-width: 360px) {
  .lb-shell .lb-problem-tools {
    gap: 6px;
  }

  .lb-shell .lb-problem-tools button {
    min-height: 40px;
    padding-inline: 8px;
    font-size: 0.68rem;
  }
}

/* BM8 mobile problem tabs: compact, clear and content-first. */
@media (max-width: 640px) {
  .lb-problem-tabs {
    margin-top: 12px;
    border-radius: 16px;
  }

  .lb-problem-tabs .lb-tab-nav {
    display: flex;
    min-height: 0;
    gap: 5px;
    overflow-x: auto;
    padding: 7px;
    border-bottom: 0;
    background: #f5f3ff;
    scrollbar-width: none;
  }

  .lb-problem-tabs .lb-tab-nav::-webkit-scrollbar {
    display: none;
  }

  .lb-problem-tabs .lb-tab-nav button {
    flex: 1 0 auto;
    display: inline-flex;
    min-width: 70px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 9px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #53617c;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
  }

  .lb-problem-tabs .lb-tab-nav button.is-active {
    border-color: #5b28dc;
    background: linear-gradient(135deg, #6730ed, #4c18d5);
    color: #fff;
    box-shadow: 0 7px 15px rgba(82, 32, 214, .2);
  }

  .lb-problem-tabs .lb-tab-nav button.is-active::after {
    display: none;
  }

  .lb-problem-tabs .lb-tab-nav button > i:first-child {
    font-size: 13px;
  }

  .lb-problem-tabs .lb-tab-label-full {
    display: none !important;
  }

  .lb-problem-tabs .lb-tab-label-short {
    display: inline-flex !important;
  }

  .lb-problem-tabs .lb-tab-status,
  .lb-problem-tabs .lb-tab-lock {
    display: none;
  }

  .lb-problem-tabs .lb-tab-count {
    min-width: 17px;
    height: 17px;
    margin: 0;
    padding: 0 4px;
    background: #e7e9f3;
    color: #52617d;
    font-size: 9px;
  }

  .lb-problem-tabs .lb-tab-nav button.is-active .lb-tab-count {
    background: rgba(255, 255, 255, .22);
    color: #fff;
  }

  .lb-problem-tabs .lb-tab-panel {
    padding: 8px;
  }

  .lb-problem-tabs .lb-premium-panel {
    min-height: 0;
    align-content: start;
    padding: 11px 9px;
    border-radius: 13px;
  }

  .lb-problem-tabs .lb-tab-panel[data-panel="official"] {
    padding: 8px 6px 6px;
  }

  .lb-problem-tabs .lb-tab-panel[data-panel="official"] .lb-premium-panel {
    padding: 4px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .lb-problem-tabs .lb-editorial-admin-bar {
    gap: 8px;
    margin: 0 4px 2px;
  }

  .lb-problem-tabs .lb-editorial-admin-bar > strong,
  .lb-problem-tabs .lb-premium-panel > strong {
    font-size: 17px;
    line-height: 1.25;
  }

  .lb-problem-tabs .lb-handwritten-solution {
    margin-top: 8px;
    margin-bottom: 2px;
  }
}

@media (max-width: 370px) {
  .lb-problem-tabs .lb-tab-nav {
    gap: 4px;
    padding: 6px;
  }

  .lb-problem-tabs .lb-tab-nav button {
    min-width: 65px;
    padding-inline: 7px;
    font-size: 11px;
  }
}

/* Problem statistics: keep long alternatives readable and summaries compact. */
@media (max-width: 899px) {
  .lb-problem-tabs .lb-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .lb-problem-tabs .lb-choice-bars {
    grid-column: 1 / -1;
  }

  .lb-problem-tabs .lb-stat-tile {
    min-height: 92px;
    padding: 10px 6px;
  }

  .lb-problem-tabs .lb-stat-tile strong {
    font-size: 28px;
  }

  .lb-problem-tabs .lb-stat-tile.is-neutral strong {
    font-size: 18px;
  }
}

/* Mobile notebook launcher: discoverable on arrival, compact while reading. */
.lb-notebook-float,
.lb-notebook-float > span {
  transition: width .2s ease, max-width .2s ease, padding .2s ease, gap .2s ease, opacity .15s ease, transform .2s ease, box-shadow .2s ease;
}

.lb-notebook-float > span {
  max-width: 112px;
  overflow: hidden;
  white-space: nowrap;
}

@media (max-width: 899px) {
  .lb-notebook-float {
    right: max(12px, calc(env(safe-area-inset-right) + 8px));
    bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px));
    min-width: 48px;
    min-height: 48px;
  }

  .lb-notebook-float.is-compact {
    width: 48px;
    max-width: 48px;
    height: 48px;
    min-height: 48px;
    justify-content: center;
    gap: 0;
    padding: 0;
    border-radius: 50%;
    box-shadow: 0 10px 26px rgba(35, 20, 90, .22);
  }

  .lb-notebook-float.is-compact > span {
    max-width: 0;
    opacity: 0;
    transform: translateX(5px);
  }

  .lb-notebook-float > i {
    flex: 0 0 auto;
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lb-notebook-float,
  .lb-notebook-float > span {
    transition: none;
  }
}

/* BM8 book offer shown only on the ecosystem home. */
body.lb-book-offer-open {
  overflow: hidden;
}

.lb-book-offer[hidden] {
  display: none !important;
}

.lb-book-offer {
  position: fixed;
  z-index: 10090;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.lb-book-offer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 14, 42, .72);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.lb-book-offer__dialog {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 36%) minmax(0, 1fr);
  width: min(1020px, 100%);
  max-height: min(720px, calc(100vh - 48px));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 32px 90px rgba(7, 12, 43, .38);
  color: #0a245d;
  animation: lb-book-offer-in .32s cubic-bezier(.2, .8, .2, 1) both;
}

.lb-book-offer__close {
  position: absolute;
  z-index: 2;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid #dfe4f2;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 8px 24px rgba(16, 31, 75, .12);
  color: #172654;
  font-size: 17px;
  cursor: pointer;
}

.lb-book-offer__close:hover,
.lb-book-offer__close:focus-visible {
  border-color: #6d45f7;
  color: #5421eb;
  outline: none;
}

.lb-book-offer__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 520px;
  padding: 46px 30px 34px;
  overflow: hidden;
  background:
    radial-gradient(circle at 35% 18%, rgba(84, 216, 255, .52), transparent 31%),
    linear-gradient(155deg, #0b2e67 0%, #174c83 48%, #071c42 100%);
}

.lb-book-offer__visual::before,
.lb-book-offer__visual::after {
  content: '';
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 50%;
}

.lb-book-offer__visual::before {
  width: 240px;
  height: 240px;
  top: -110px;
  left: -90px;
}

.lb-book-offer__visual::after {
  width: 190px;
  height: 190px;
  right: -95px;
  bottom: -75px;
}

.lb-book-offer__visual img {
  position: relative;
  z-index: 1;
  display: block;
  width: min(270px, 100%);
  height: auto;
  max-height: 450px;
  object-fit: contain;
  border-radius: 12px;
  filter: drop-shadow(0 22px 24px rgba(0, 0, 0, .33));
  transform: rotate(-2deg);
}

.lb-book-offer__edition {
  position: absolute;
  z-index: 2;
  top: 24px;
  left: 24px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  background: rgba(7, 24, 58, .5);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.lb-book-offer__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 54px 54px 36px;
}

.lb-book-offer__eyebrow {
  margin-bottom: 12px;
  color: #6035f3;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .09em;
}

.lb-book-offer__content h2 {
  max-width: 520px;
  margin: 0;
  color: #0a245d;
  font-size: clamp(34px, 4vw, 49px);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -.045em;
}

.lb-book-offer__content > p {
  max-width: 555px;
  margin: 20px 0 0;
  color: #52617f;
  font-size: 17px;
  line-height: 1.55;
}

.lb-book-offer__benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 25px 0 0;
  padding: 0;
  list-style: none;
}

.lb-book-offer__benefits li {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  padding: 12px 10px;
  border: 1px solid #e3e6f2;
  border-radius: 14px;
  background: #fafaff;
}

.lb-book-offer__benefits i {
  flex: 0 0 auto;
  color: #5d2df4;
  font-size: 17px;
}

.lb-book-offer__benefits span {
  min-width: 0;
  color: #6a7590;
  font-size: 11px;
  line-height: 1.25;
}

.lb-book-offer__benefits strong {
  display: block;
  color: #142a5d;
  font-size: 12px;
  font-weight: 850;
}

.lb-book-offer__action-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-top: 24px;
}

.lb-book-offer__price {
  display: flex;
  min-width: 112px;
  flex-direction: column;
  justify-content: center;
  padding: 9px 14px;
  border: 1px solid #e3e6f2;
  border-radius: 14px;
  color: #172654;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.1;
}

.lb-book-offer__price small {
  margin-bottom: 4px;
  color: #7b86a0;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.lb-book-offer__primary {
  display: inline-flex;
  min-height: 57px;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: 15px;
  background: linear-gradient(135deg, #7145ff 0%, #4b12e9 100%);
  box-shadow: 0 14px 28px rgba(81, 30, 231, .24);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
}

.lb-book-offer__primary:hover,
.lb-book-offer__primary:focus-visible {
  background: linear-gradient(135deg, #6234f3 0%, #3e0bcf 100%);
  color: #fff;
  outline: none;
  transform: translateY(-1px);
}

.lb-book-offer__secondary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 23px;
  padding-top: 18px;
  border-top: 1px solid #e9ebf3;
}

.lb-book-offer__secondary > span {
  color: #77819a;
  font-size: 12px;
  font-weight: 700;
}

.lb-book-offer__secondary > div {
  display: flex;
  gap: 7px;
}

.lb-book-offer__secondary button {
  min-height: 40px;
  padding: 9px 13px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: #53617e;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.lb-book-offer__secondary button:first-child {
  border-color: #dfe3ef;
  background: #fff;
  color: #23345f;
}

.lb-book-offer__secondary button:hover,
.lb-book-offer__secondary button:focus-visible {
  background: #f1edff;
  color: #5120e7;
  outline: none;
}

@keyframes lb-book-offer-in {
  from { opacity: 0; transform: translateY(18px) scale(.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 720px) {
  .lb-book-offer {
    align-items: end;
    padding: 10px;
  }

  .lb-book-offer__dialog {
    display: block;
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
    border-radius: 24px;
  }

  .lb-book-offer__close {
    position: fixed;
    top: 21px;
    right: 21px;
  }

  .lb-book-offer__visual {
    min-height: 0;
    height: 205px;
    padding: 20px 22px;
  }

  .lb-book-offer__visual img {
    width: 118px;
    max-height: 174px;
    border-radius: 7px;
    transform: rotate(-2deg);
  }

  .lb-book-offer__edition {
    top: 20px;
    left: 20px;
    max-width: 92px;
    border: 0;
    background: rgba(7, 24, 58, .62);
    font-size: 10px;
    line-height: 1.3;
    text-align: center;
  }

  .lb-book-offer__content {
    padding: 25px 22px 20px;
  }

  .lb-book-offer__eyebrow {
    margin-bottom: 8px;
    font-size: 11px;
  }

  .lb-book-offer__content h2 {
    font-size: 31px;
    line-height: 1.02;
  }

  .lb-book-offer__content > p {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.45;
  }

  .lb-book-offer__benefits {
    gap: 6px;
    margin-top: 18px;
  }

  .lb-book-offer__benefits li {
    display: block;
    min-height: 77px;
    padding: 10px 8px;
    text-align: center;
  }

  .lb-book-offer__benefits i {
    display: block;
    margin-bottom: 5px;
  }

  .lb-book-offer__benefits span {
    font-size: 9px;
  }

  .lb-book-offer__benefits strong {
    font-size: 10px;
  }

  .lb-book-offer__action-row {
    flex-wrap: wrap;
    margin-top: 17px;
  }

  .lb-book-offer__price {
    min-width: 104px;
  }

  .lb-book-offer__primary {
    min-width: 190px;
  }

  .lb-book-offer__secondary {
    display: block;
    margin-top: 18px;
    padding-top: 14px;
  }

  .lb-book-offer__secondary > span {
    display: block;
    margin-bottom: 7px;
  }

  .lb-book-offer__secondary > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .lb-book-offer__secondary button {
    min-height: 44px;
    padding-inline: 8px;
  }
}

@media (max-width: 350px), (max-width: 720px) and (max-height: 700px) {
  .lb-book-offer__visual {
    height: 155px;
  }

  .lb-book-offer__visual img {
    width: 88px;
    max-height: 130px;
  }

  .lb-book-offer__content {
    padding-top: 19px;
  }

  .lb-book-offer__content h2 {
    font-size: 27px;
  }

  .lb-book-offer__benefits {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lb-book-offer__dialog {
    animation: none;
  }
}

.lb-test-recommendation {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 130px 205px;
  align-items: center;
  gap: 18px;
  border: 1px solid #dcd3ff;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff 0%, #fbf9ff 62%, #f0eaff 100%);
  padding: 18px 20px;
  box-shadow: 0 12px 28px rgba(55, 25, 131, .08);
}

.lb-test-recommendation-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(145deg, #6231f2, #4211c8);
  color: #fff;
  font-size: 22px;
  box-shadow: 0 10px 22px rgba(74, 24, 208, .22);
}

.lb-test-recommendation-copy { min-width: 0; }
.lb-test-recommendation-copy > span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #5a2dcc;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.lb-test-recommendation-copy h2 {
  margin: 4px 0 3px;
  color: #0a194e;
  font-size: 21px;
  line-height: 1.15;
}

.lb-test-recommendation-copy p {
  margin: 0;
  color: #68738f;
  font-size: 12px;
  line-height: 1.4;
}

.lb-test-recommendation-state > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 5px;
}

.lb-test-recommendation-state span,
.lb-test-recommendation-state small {
  color: #68738f;
  font-size: 9px;
  font-weight: 850;
}

.lb-test-recommendation-state strong { color: #4c19d3; font-size: 22px; }
.lb-test-recommendation-state > i {
  display: block;
  height: 7px;
  overflow: hidden;
  margin-top: 6px;
  border-radius: 999px;
  background: #e4e4ef;
}
.lb-test-recommendation-state > i > b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #5830f2, #9866ff);
}

.lb-test-recommendation-actions {
  display: grid;
  gap: 7px;
  text-align: center;
}
.lb-test-recommendation-actions .lb-btn {
  min-height: 43px;
  padding: 10px 13px;
  font-size: 12px;
  white-space: nowrap;
}
.lb-test-recommendation-actions > a:not(.lb-btn) {
  color: #5930c6;
  font-size: 11px;
  font-weight: 850;
}

@media (max-width: 980px) {
  .lb-test-recommendation {
    grid-template-columns: 48px minmax(0, 1fr) 125px;
  }
  .lb-test-recommendation-actions {
    grid-column: 2 / -1;
    grid-template-columns: minmax(0, 210px) auto;
    align-items: center;
    justify-content: start;
    text-align: left;
  }
}

@media (max-width: 600px) {
  .lb-test-recommendation {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
  }
  .lb-test-recommendation-icon { width: 44px; height: 44px; border-radius: 13px; font-size: 18px; }
  .lb-test-recommendation-copy h2 { font-size: 20px; }
  .lb-test-recommendation-state,
  .lb-test-recommendation-actions { grid-column: 1 / -1; }
  .lb-test-recommendation-state { padding: 0 2px; }
  .lb-test-recommendation-actions {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .lb-test-recommendation-actions .lb-btn { width: 100%; }
}
.lb-training-launch-feedback {
  margin-top: 14px;
  padding: 11px 14px;
  border: 1px solid #fecaca;
  border-radius: 12px;
  background: #fff1f2;
  color: #b42318;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.lb-training-launch-feedback[hidden] {
  display: none !important;
}

/* Caballo loco appears after the final lesson; postponing moves it to the rail. */
.lb-crazy-offer {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, .72fr) minmax(0, 1.45fr);
  min-height: 330px;
  overflow: hidden;
  border: 1px solid #d7c9ff;
  border-radius: 24px;
  background: linear-gradient(118deg, #17265b 0 34%, #fff 34.2% 100%);
  box-shadow: 0 18px 45px rgba(38, 31, 94, .14);
  transition: opacity .22s ease, transform .22s ease;
}

.lb-crazy-offer.is-hidden,
.lb-crazy-reminder.is-hidden { display: none !important; }
.lb-crazy-offer.is-leaving { opacity: 0; transform: translateY(8px); }
.lb-crazy-offer-art {
  position: relative;
  display: grid;
  place-items: center;
  padding: 28px 18px;
  background: radial-gradient(circle at 50% 45%, rgba(132,82,255,.5), transparent 46%), linear-gradient(145deg,#101d49,#35207b);
}
.lb-crazy-offer-art::after { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(255,255,255,.18); border-radius: 18px; pointer-events: none; }
.lb-crazy-offer-art > span { position: absolute; top: 24px; z-index: 1; padding: 7px 11px; border: 1px solid rgba(255,216,112,.55); border-radius: 99px; color: #ffe49a; font-size: 10px; font-weight: 950; letter-spacing: .07em; }
.lb-crazy-offer-art img { position: relative; z-index: 1; width: min(190px, 88%); height: auto; filter: grayscale(1) saturate(0) contrast(.86) brightness(1.12) drop-shadow(0 18px 22px rgba(0,0,0,.24)); opacity: .74; }
.lb-crazy-offer-copy { align-self: center; padding: clamp(28px, 4vw, 54px); }
.lb-crazy-kicker { margin: 0 0 9px !important; color: #6333e6 !important; font-size: 12px !important; font-weight: 950 !important; letter-spacing: .04em; text-transform: uppercase; }
.lb-crazy-offer-copy h2 { margin: 0 0 14px; color: #07183f; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.02; letter-spacing: -.035em; }
.lb-crazy-offer-copy > p:not(.lb-crazy-kicker):not(.lb-crazy-offer-feedback) { max-width: 620px; margin: 0; color: #586785; font-size: 17px; line-height: 1.55; }
.lb-crazy-offer-rules { display: flex; flex-wrap: wrap; gap: 9px; margin: 22px 0; }
.lb-crazy-offer-rules span { display: inline-flex; align-items: baseline; gap: 5px; padding: 9px 12px; border: 1px solid #e1dcf2; border-radius: 11px; background: #f8f6ff; color: #53607c; font-size: 12px; font-weight: 800; }
.lb-crazy-offer-rules strong { color: #4d1ed0; font-size: 18px; }
.lb-crazy-offer-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.lb-crazy-offer-actions .lb-btn { min-height: 48px; padding-inline: 20px; }
.lb-crazy-offer-feedback { margin: 12px 0 0; color: #b42318; font-size: 13px; font-weight: 800; }

.lb-crazy-reminder { overflow: hidden; padding: 18px; border-color: #dccfff !important; background: linear-gradient(145deg,#fff 20%,#f5f1ff 100%) !important; box-shadow: 0 12px 30px rgba(66,39,139,.12); }
.lb-crazy-reminder.is-arriving { animation: lbCrazyReminderIn .38s ease both; }
@keyframes lbCrazyReminderIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.lb-crazy-reminder-head { display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: center; }
.lb-crazy-reminder-head img { width: 58px; height: 58px; object-fit: contain; filter: grayscale(1) saturate(0) contrast(.86) brightness(1.12) drop-shadow(0 7px 8px rgba(41,25,85,.14)); opacity: .74; }
.lb-crazy-reminder-head span { color: #6a39df; font-size: 9px; font-weight: 950; letter-spacing: .06em; }
.lb-crazy-reminder-head h2 { margin: 2px 0 0; color: #101e49; font-size: 19px; }
.lb-crazy-reminder > p { margin: 14px 0 16px; color: #5e6b88; font-size: 13px; line-height: 1.5; }
.lb-crazy-reminder > .lb-btn { width: 100%; min-height: 44px; border-radius: 11px; color: #fff !important; font-size: 12px; }
.lb-crazy-reminder > .lb-btn:hover,
.lb-crazy-reminder > .lb-btn:focus-visible { color: #fff !important; }

@media (max-width: 820px) {
  .lb-crazy-offer { grid-template-columns: 150px minmax(0,1fr); min-height: 300px; }
  .lb-crazy-offer-copy { padding: 28px 24px; }
  .lb-crazy-offer-copy h2 { font-size: 32px; }
  .lb-crazy-offer-copy > p:not(.lb-crazy-kicker):not(.lb-crazy-offer-feedback) { font-size: 15px; }
}
@media (max-width: 600px) {
  .lb-crazy-offer { grid-template-columns: 1fr; border-radius: 18px; background: #fff; }
  .lb-crazy-offer-art { min-height: 184px; padding: 42px 18px 12px; }
  .lb-crazy-offer-art::after { inset: 10px; }
  .lb-crazy-offer-art > span { top: 18px; }
  .lb-crazy-offer-art img { width: 142px; }
  .lb-crazy-offer-copy { padding: 24px 20px 22px; }
  .lb-crazy-offer-copy h2 { font-size: 30px; }
  .lb-crazy-offer-rules { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 18px 0; }
  .lb-crazy-offer-rules span { display: grid; gap: 0; padding: 8px 5px; text-align: center; }
  .lb-crazy-offer-actions { display: grid; }
  .lb-crazy-offer-actions .lb-btn { width: 100%; }
}
/* BC2 system ------------------------------------------------------------- */
.lb-shell[data-livebook-book="BC2"] {
  --lb-accent: #8a245f;
  --lb-accent-dark: #5b173f;
  --lb-accent-soft: #f8eaf1;
}

.lb-shell[data-livebook-book="BC2"] .lb-topnav a.is-active,
.lb-shell[data-livebook-book="BC2"] .lb-home-menu a.is-active {
  color: #8a245f;
}

.lb-bc2-foundation {
  background: linear-gradient(135deg, #fff 0%, #fff8f4 58%, #f9edf3 100%);
  border-color: #ead2de;
}

.lb-bc2-system-page .lb-home-main { min-width: 0; }

.lb-bc2-system-empty {
  align-items: flex-start;
  background: linear-gradient(140deg, #fff 0%, #fff9f4 58%, #f8eaf1 100%);
  border-color: #ead2de;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 430px;
  padding: clamp(32px, 6vw, 76px);
}

.lb-bc2-system-icon {
  align-items: center;
  background: linear-gradient(135deg, #b43f5d, #67164b);
  border-radius: 20px;
  box-shadow: 0 18px 38px rgba(103, 22, 75, .18);
  color: #fff;
  display: inline-flex;
  font-size: 27px;
  height: 66px;
  justify-content: center;
  margin-bottom: 24px;
  width: 66px;
}

.lb-bc2-system-empty > small {
  color: #b33f5c;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
}

.lb-bc2-system-empty h1 {
  color: #4b1237;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.04;
  margin: 10px 0 14px;
}

.lb-bc2-system-empty > p {
  color: #695865;
  font-size: 18px;
  line-height: 1.65;
  margin: 0;
  max-width: 680px;
}

.lb-bc2-system-empty > div {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.lb-shell[data-livebook-book="BC2"] .lb-btn-primary {
  background: linear-gradient(135deg, #a82d60, #651548);
}

.lb-shell[data-livebook-book="BC2"] .lb-refined-next-card {
  background-image: linear-gradient(135deg, #fff 0%, #fff8f4 58%, #f6e4ed 100%);
  border-color: #ead2de;
  min-height: 360px;
}

@media (max-width: 760px) {
  .lb-shell[data-livebook-book="BC2"] .lb-refined-next-card {
    min-height: 0;
  }
}

/* BC2 launchpad (legacy fallback) --------------------------------------- */
.lb-bc2,
.lb-bc2 * {
  box-sizing: border-box;
}

.lb-bc2 {
  --bc2-ink: #14213d;
  --bc2-muted: #647089;
  --bc2-plum: #70275d;
  --bc2-plum-dark: #45163a;
  --bc2-coral: #ee765f;
  --bc2-cream: #fff8eb;
  width: min(1500px, calc(100% - 32px));
  min-height: calc(100vh - 90px);
  margin: 16px auto 44px;
  overflow: hidden;
  border: 1px solid #eadde6;
  border-radius: 28px;
  background: #fffdf9;
  color: var(--bc2-ink);
  box-shadow: 0 24px 70px rgba(48, 28, 51, .1);
  font-family: "Poppins", Arial, Helvetica, sans-serif;
}

.lb-bc2 a {
  color: inherit;
  text-decoration: none;
}

.lb-bc2-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 82px;
  padding: 14px clamp(20px, 4vw, 58px);
  border-bottom: 1px solid rgba(112, 39, 93, .12);
  background: rgba(255, 253, 249, .94);
}

.lb-bc2-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.lb-bc2-brand > span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 16px 16px 16px 5px;
  background: linear-gradient(145deg, var(--bc2-coral), var(--bc2-plum));
  color: #fff;
  box-shadow: 0 9px 20px rgba(112, 39, 93, .2);
}

.lb-bc2-brand > div {
  display: grid;
  line-height: 1.05;
}

.lb-bc2-brand strong {
  color: var(--bc2-plum-dark);
  font-size: 21px;
  letter-spacing: .04em;
}

.lb-bc2-brand small {
  margin-top: 4px;
  color: var(--bc2-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lb-bc2-nav nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lb-bc2-nav nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  color: #473d51;
  font-size: 13px;
  font-weight: 800;
}

.lb-bc2-nav-pending {
  align-items: center;
  color: #866f7c;
  cursor: default;
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  gap: 7px;
  padding: 10px 12px;
  white-space: nowrap;
}

.lb-bc2-nav nav a:hover {
  background: #f8edf3;
  color: var(--bc2-plum);
}

.lb-bc2-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  align-items: center;
  min-height: 590px;
  padding: clamp(48px, 7vw, 96px) clamp(24px, 7vw, 104px);
  overflow: hidden;
  background:
    radial-gradient(circle at 79% 20%, rgba(238, 118, 95, .16), transparent 26%),
    linear-gradient(115deg, #fffdf9 0 56%, #f8edf3 56% 100%);
}

.lb-bc2-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(112, 39, 93, .16) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(90deg, transparent 45%, #000);
}

.lb-bc2-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 710px;
}

.lb-bc2-eyebrow,
.lb-bc2-section-title > span,
.lb-bc2-next span {
  color: var(--bc2-coral);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
}

.lb-bc2-hero h1 {
  max-width: 700px;
  margin: 14px 0 10px;
  color: var(--bc2-plum-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(52px, 7vw, 94px);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: .94;
}

.lb-bc2-lead {
  margin: 0 0 18px !important;
  color: var(--bc2-plum) !important;
  font-size: clamp(20px, 2.2vw, 29px) !important;
  font-weight: 700;
}

.lb-bc2-hero-copy > p {
  max-width: 660px;
  margin: 0;
  color: var(--bc2-muted);
  font-size: 17px;
  line-height: 1.75;
}

.lb-bc2-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.lb-bc2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 12px 20px;
  border: 1px solid rgba(112, 39, 93, .2);
  border-radius: 14px;
  background: #fff;
  color: var(--bc2-plum-dark) !important;
  font-weight: 800;
}

.lb-bc2-btn.is-primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--bc2-plum), var(--bc2-plum-dark));
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(112, 39, 93, .24);
}

.lb-bc2-hero-art {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 390px;
  place-items: center;
}

.lb-bc2-book {
  position: relative;
  z-index: 2;
  display: grid;
  width: clamp(210px, 23vw, 315px);
  aspect-ratio: .76;
  place-content: center;
  justify-items: center;
  border: 8px solid #f7d9c0;
  border-left-width: 19px;
  border-radius: 8px 22px 22px 8px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.12), transparent 14%),
    linear-gradient(145deg, #87366f, #45163a);
  color: #fff9ec;
  box-shadow: -18px 22px 0 #e9b998, 0 34px 55px rgba(69, 22, 58, .28);
  transform: rotate(4deg);
}

.lb-bc2-book::after {
  content: "";
  position: absolute;
  inset: 15px;
  border: 1px solid rgba(255, 239, 214, .5);
  border-radius: 5px 14px 14px 5px;
}

.lb-bc2-book i {
  margin-bottom: 18px;
  color: #ffcaa3;
  font-size: clamp(46px, 6vw, 72px);
}

.lb-bc2-book strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(54px, 7vw, 88px);
  line-height: .85;
}

.lb-bc2-book small {
  margin-top: 16px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .24em;
}

.lb-bc2-orbit {
  position: absolute;
  inset: 10% 3%;
  border: 1px solid rgba(112, 39, 93, .18);
  border-radius: 50%;
  transform: rotate(-8deg);
}

.lb-bc2-orbit.is-two {
  inset: 21% -5%;
  transform: rotate(25deg);
}

.lb-bc2-orbit span {
  position: absolute;
  display: grid;
  min-width: 42px;
  height: 42px;
  padding: 0 10px;
  place-items: center;
  border: 1px solid #ecd8e3;
  border-radius: 14px;
  background: #fff;
  color: var(--bc2-plum);
  box-shadow: 0 9px 24px rgba(69, 22, 58, .1);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
}

.lb-bc2-orbit span:nth-child(1) { top: 7%; left: 8%; }
.lb-bc2-orbit span:nth-child(2) { right: 2%; bottom: 20%; }
.lb-bc2-orbit span:nth-child(3) { bottom: 0; left: 23%; }
.lb-bc2-orbit.is-two span:nth-child(1) { top: auto; right: 9%; bottom: 2%; }
.lb-bc2-orbit.is-two span:nth-child(2) { top: 5%; right: auto; bottom: auto; left: 3%; }

.lb-bc2-status {
  display: grid;
  grid-template-columns: auto auto minmax(250px, 1fr);
  align-items: center;
  gap: 18px;
  padding: 17px clamp(22px, 5vw, 72px);
  background: var(--bc2-plum-dark);
  color: #fff;
}

.lb-bc2-status span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffc4ad;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lb-bc2-status strong { font-size: 14px; }
.lb-bc2-status em { color: #dac5d2; font-size: 12px; font-style: normal; text-align: right; }

.lb-bc2-section,
.lb-bc2-roadmap {
  padding: clamp(54px, 7vw, 92px) clamp(24px, 7vw, 104px);
}

.lb-bc2-section-title {
  max-width: 790px;
  margin-bottom: 34px;
}

.lb-bc2-section-title h2,
.lb-bc2-next h2 {
  margin: 8px 0 10px;
  color: var(--bc2-plum-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(32px, 4vw, 52px);
  letter-spacing: -.03em;
  line-height: 1.08;
}

.lb-bc2-section-title p,
.lb-bc2-next p {
  margin: 0;
  color: var(--bc2-muted);
  line-height: 1.65;
}

.lb-bc2-area-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.lb-bc2-area-grid article {
  position: relative;
  min-height: 235px;
  padding: 25px;
  overflow: hidden;
  border: 1px solid #eadde6;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(49, 30, 49, .06);
}

.lb-bc2-area-grid article > i {
  display: grid;
  width: 50px;
  height: 50px;
  margin-bottom: 25px;
  place-items: center;
  border-radius: 15px;
  background: #f8edf3;
  color: var(--bc2-plum);
  font-size: 20px;
}

.lb-bc2-area-grid article > span {
  position: absolute;
  top: 25px;
  right: 20px;
  color: #9b7b90;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.lb-bc2-area-grid h3 { margin: 0 0 8px; color: var(--bc2-plum-dark); font-size: 19px; }
.lb-bc2-area-grid p { margin: 0; color: var(--bc2-muted); font-size: 13px; line-height: 1.6; }

.lb-bc2-roadmap {
  background: var(--bc2-cream);
}

.lb-bc2-roadmap ol {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lb-bc2-roadmap li {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  border: 1px solid #eadfd6;
  border-radius: 18px;
  background: rgba(255, 255, 255, .7);
}

.lb-bc2-roadmap li.is-current {
  border-color: rgba(112, 39, 93, .35);
  background: #fff;
  box-shadow: 0 13px 35px rgba(69, 22, 58, .08);
}

.lb-bc2-roadmap li > b {
  color: #c79a82;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 30px;
}

.lb-bc2-roadmap li > div > span {
  color: var(--bc2-coral);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.lb-bc2-roadmap h3 { margin: 3px 0; color: var(--bc2-plum-dark); font-size: 17px; }
.lb-bc2-roadmap p { margin: 0; color: var(--bc2-muted); font-size: 13px; }
.lb-bc2-roadmap li > i { color: #c9b5c2; }
.lb-bc2-roadmap li.is-current > i { color: var(--bc2-plum); }

.lb-bc2-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 30px;
  margin: clamp(38px, 6vw, 80px) clamp(24px, 7vw, 104px);
  padding: clamp(28px, 5vw, 52px);
  border-radius: 24px;
  background: linear-gradient(135deg, var(--bc2-plum), var(--bc2-plum-dark));
  color: #fff;
}

.lb-bc2-next h2 { color: #fff; font-size: clamp(28px, 3vw, 42px); }
.lb-bc2-next p { max-width: 850px; color: #eadce5; }
.lb-bc2-next > i { color: rgba(255,255,255,.18); font-size: clamp(64px, 9vw, 120px); }

@media (max-width: 1050px) {
  .lb-bc2-hero { grid-template-columns: minmax(0, 1fr) 330px; padding-inline: 44px; }
  .lb-bc2-area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .lb-bc2 { width: 100%; margin: 0; border: 0; border-radius: 0; }
  .lb-bc2-nav { min-height: 68px; padding: 10px 16px; }
  .lb-bc2-brand > span { width: 42px; height: 42px; }
  .lb-bc2-nav nav a:first-child { display: none; }
  .lb-bc2-nav nav a { padding: 9px; }
  .lb-bc2-nav nav a i { font-size: 17px; }
  .lb-bc2-nav-pending { font-size: 0; padding: 9px; }
  .lb-bc2-nav-pending i { font-size: 17px; }
  .lb-bc2-hero { grid-template-columns: 1fr; min-height: 0; padding: 46px 20px 60px; background: linear-gradient(160deg,#fffdf9 0 62%,#f8edf3 62%); }
  .lb-bc2-hero h1 { font-size: clamp(48px, 16vw, 70px); }
  .lb-bc2-hero-copy > p { font-size: 15px; }
  .lb-bc2-actions { display: grid; }
  .lb-bc2-hero-art { min-height: 380px; margin-top: 20px; }
  .lb-bc2-book { width: 220px; }
  .lb-bc2-status { grid-template-columns: 1fr; gap: 5px; }
  .lb-bc2-status em { margin-top: 5px; text-align: left; }
  .lb-bc2-section,.lb-bc2-roadmap { padding: 52px 18px; }
  .lb-bc2-area-grid { grid-template-columns: 1fr; }
  .lb-bc2-area-grid article { min-height: 205px; }
  .lb-bc2-roadmap li { grid-template-columns: 48px minmax(0,1fr); gap: 13px; padding: 17px; }
  .lb-bc2-roadmap li > i { display: none; }
  .lb-bc2-next { grid-template-columns: 1fr; margin: 28px 18px 52px; padding: 28px 22px; }
  .lb-bc2-next > i { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lb-bc2 * { scroll-behavior: auto !important; }
}

/* Per-book visual identity ---------------------------------------------- */
.lb-shell[data-livebook-book="BM8"] {
  --lb-ink: #081b4b;
  --lb-muted: #53627e;
  --lb-line: #d8e3f6;
  --lb-soft: #f4f7ff;
  --lb-primary: #173b8f;
  --lb-primary-dark: #0c286b;
  --lb-primary-rgb: 23, 59, 143;
  --lb-accent: #f2b632;
  --lb-accent-soft: #fff5d7;
  --lb-vip: #e8f0ff;
  background: #f4f7ff;
}

.lb-shell[data-livebook-book="BC2"] {
  --lb-ink: #3c1830;
  --lb-muted: #705b68;
  --lb-line: #ebd6df;
  --lb-soft: #fff8ee;
  --lb-primary: #8c234b;
  --lb-primary-dark: #641534;
  --lb-primary-rgb: 140, 35, 75;
  --lb-accent: #167c6b;
  --lb-accent-soft: #e4f4ef;
  --lb-vip: #fae9ef;
  background: #fff8ee;
}

.lb-shell[data-livebook-book] .lb-logo {
  background: linear-gradient(155deg, var(--lb-primary), var(--lb-primary-dark));
  box-shadow: 0 10px 22px rgba(var(--lb-primary-rgb), .25);
}

.lb-shell[data-livebook-book="BM8"] .lb-logo::before { border-color: #f2b632; }
.lb-shell[data-livebook-book="BC2"] .lb-logo::before { border-color: #ef9a82; }

.lb-shell[data-livebook-book="BM8"] .lb-home-cover {
  background: radial-gradient(circle at 72% 18%, rgba(242, 182, 50, .26), transparent 22%), linear-gradient(145deg, #2451aa, #081f61 76%);
  box-shadow: 0 18px 32px rgba(15, 49, 123, .25);
}

.lb-shell[data-livebook-book="BC2"] .lb-home-cover {
  background: radial-gradient(circle at 72% 18%, rgba(239, 154, 130, .28), transparent 22%), linear-gradient(145deg, #a52f55, #55132f 76%);
  box-shadow: 0 18px 32px rgba(100, 21, 52, .24);
}

.lb-shell[data-livebook-book] .lb-home-sidebar > p,
.lb-shell[data-livebook-book] .lb-feature-card p,
.lb-shell[data-livebook-book] .lb-refined-progress span {
  color: var(--lb-muted);
}

.lb-shell[data-livebook-book] .lb-btn-primary,
.lb-shell[data-livebook-book] .lb-notes-new {
  background: linear-gradient(135deg, var(--lb-primary), var(--lb-primary-dark));
  box-shadow: 0 10px 22px rgba(var(--lb-primary-rgb), .22);
}

.lb-shell[data-livebook-book] .lb-btn-primary:hover,
.lb-shell[data-livebook-book] .lb-notes-new:hover {
  background: var(--lb-primary-dark);
}

.lb-shell[data-livebook-book] .lb-topnav a.is-active {
  border-color: var(--lb-line);
  border-top-color: var(--lb-primary);
  color: var(--lb-primary);
}

.lb-shell[data-livebook-book] .lb-icon,
.lb-shell[data-livebook-book] .lb-topnav a.is-active .lb-icon,
.lb-shell[data-livebook-book] .lb-xp-pill i,
.lb-shell[data-livebook-book] .lb-widget-link,
.lb-shell[data-livebook-book] .lb-feature-card > strong {
  color: var(--lb-primary);
}

.lb-shell[data-livebook-book] .lb-home-menu a { color: var(--lb-ink); }
.lb-shell[data-livebook-book] .lb-home-menu a:hover,
.lb-shell[data-livebook-book] .lb-home-menu a.is-active {
  background: linear-gradient(90deg, rgba(var(--lb-primary-rgb), .14), rgba(var(--lb-primary-rgb), .045));
  color: var(--lb-primary);
}

.lb-shell[data-livebook-book] .lb-home-invite {
  border-color: var(--lb-line);
  background: var(--lb-soft);
}

.lb-shell[data-livebook-book] .lb-feature-card:hover { border-color: var(--lb-primary); }
.lb-shell[data-livebook-book] .lb-feature-icon,
.lb-shell[data-livebook-book] .lb-route-level > i {
  background: var(--lb-vip);
  color: var(--lb-primary);
}

.lb-shell[data-livebook-book] .lb-feature-card h3 em {
  background: var(--lb-vip);
  color: var(--lb-primary);
}

.lb-shell[data-livebook-book] .lb-level-bar,
.lb-shell[data-livebook-book] .lb-refined-progress > i {
  background: rgba(var(--lb-primary-rgb), .12);
}

.lb-shell[data-livebook-book] .lb-level-bar b,
.lb-shell[data-livebook-book] .lb-refined-progress > i > b {
  background: linear-gradient(90deg, var(--lb-primary), var(--lb-accent));
}

.lb-shell[data-livebook-book] .lb-refined-kicker {
  background: var(--lb-vip);
  color: var(--lb-primary);
}

.lb-shell[data-livebook-book] .lb-refined-next-card .lb-continue-copy h2,
.lb-shell[data-livebook-book] .lb-refined-next-card .lb-continue-copy > strong {
  color: var(--lb-ink);
}

.lb-shell[data-livebook-book] .lb-refined-next-card .lb-continue-copy p {
  color: var(--lb-muted);
}

.lb-shell[data-livebook-book] .lb-refined-progress span b { color: var(--lb-primary); }
.lb-shell[data-livebook-book] .lb-refined-next-card .lb-btn-primary { box-shadow: 0 12px 25px rgba(var(--lb-primary-rgb), .22); }

.lb-shell[data-livebook-book] .lb-calendar-day.is-interactive:hover,
.lb-shell[data-livebook-book] .lb-calendar-day.is-interactive:focus-visible,
.lb-shell[data-livebook-book] .lb-calendar-day.is-selected {
  background: var(--lb-vip);
  color: var(--lb-primary-dark);
  outline-color: rgba(var(--lb-primary-rgb), .18);
}

.lb-shell[data-livebook-book] .lb-calendar-day.is-today,
.lb-shell[data-livebook-book] .lb-calendar-day.is-today.is-interactive:hover,
.lb-shell[data-livebook-book] .lb-calendar-day.is-today.is-interactive:focus-visible,
.lb-shell[data-livebook-book] .lb-calendar-day.is-today.is-selected {
  background: var(--lb-primary);
  color: #fff;
}

.lb-shell[data-livebook-book] .lb-calendar-day.has-activity:not(.is-today) {
  background: var(--lb-accent-soft);
  color: var(--lb-accent);
}

.lb-shell[data-livebook-book] .lb-calendar-day.has-event { box-shadow: inset 0 0 0 2px var(--lb-accent); }

.lb-shell[data-livebook-book] .lb-badge-side-access {
  border-color: var(--lb-line);
  background: linear-gradient(145deg, #fff, var(--lb-soft));
  box-shadow: 0 12px 28px rgba(var(--lb-primary-rgb), .16);
  color: var(--lb-primary);
}

.lb-shell[data-livebook-book] .lb-badge-side-access small { color: var(--lb-muted); }
.lb-shell[data-livebook-book] .lb-badge-side-access:hover,
.lb-shell[data-livebook-book] .lb-badge-side-access:focus-visible,
.lb-shell[data-livebook-book] .lb-badge-side-access.is-active {
  background: linear-gradient(145deg, #fff, var(--lb-vip));
  box-shadow: 0 15px 34px rgba(var(--lb-primary-rgb), .22);
  color: var(--lb-primary-dark);
}

.lb-shell[data-livebook-book="BM8"] .lb-home-access {
  background: #173b8f;
  box-shadow: inset 0 -2px 0 rgba(242, 182, 50, .55);
}

.lb-shell[data-livebook-book="BC2"] .lb-home-access { background: #8c234b; }

/* BC01 · Semántica ------------------------------------------------------ */
.lb-bc2-chapter-page .lb-home-main,
.lb-bc2-classes-page .lb-home-main,
.lb-bc2-chapters-page .lb-home-main {
  display: grid;
  gap: 22px;
}

.lb-bc2-chapter-hero {
  min-height: 420px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
  align-items: center;
  gap: 34px;
  overflow: hidden;
  position: relative;
  border: 1px solid #e6cbd6;
  border-radius: 26px;
  background:
    radial-gradient(circle at 86% 18%, rgba(239, 154, 130, .28), transparent 27%),
    linear-gradient(135deg, #fffaf2 0 58%, #f7e7ed 58% 100%);
  padding: clamp(30px, 5vw, 64px);
  box-shadow: 0 22px 46px rgba(79, 29, 51, .11);
}

.lb-bc2-chapter-hero::after {
  content: "";
  width: 280px;
  height: 280px;
  position: absolute;
  right: -110px;
  bottom: -150px;
  border: 1px solid rgba(140, 35, 75, .16);
  border-radius: 50%;
  box-shadow: 0 0 0 32px rgba(140, 35, 75, .04), 0 0 0 68px rgba(140, 35, 75, .025);
}

.lb-bc2-chapter-copy { position: relative; z-index: 1; }
.lb-bc2-chapter-kicker,
.lb-bc2-classes-hero > div > span,
.lb-bc2-chapter-route > header > span {
  color: var(--lb-primary);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .13em;
}

.lb-bc2-chapter-copy h1 {
  margin: 10px 0 2px;
  color: var(--lb-ink);
  font-size: clamp(52px, 7vw, 90px);
  line-height: .94;
  letter-spacing: -.055em;
}

.lb-bc2-chapter-copy h2 {
  margin: 12px 0 0;
  color: var(--lb-primary);
  font-size: clamp(20px, 2.2vw, 29px);
  line-height: 1.16;
}

.lb-bc2-chapter-copy > p {
  max-width: 690px;
  margin: 18px 0 0;
  color: var(--lb-muted);
  font-size: 17px;
  line-height: 1.65;
}

.lb-bc2-chapter-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 27px; }
.lb-bc2-chapter-actions .lb-btn { gap: 9px; }

.lb-bc2-chapter-emblem {
  width: min(100%, 310px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  align-content: center;
  justify-self: center;
  gap: 9px;
  position: relative;
  z-index: 1;
  border: 1px solid rgba(140, 35, 75, .24);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 52%, #f5dfe7 53% 64%, #8c234b 65% 67%, transparent 68%);
  color: var(--lb-primary-dark);
  text-align: center;
}

.lb-bc2-chapter-emblem::before,
.lb-bc2-chapter-emblem::after {
  content: "";
  width: 9px;
  height: 9px;
  position: absolute;
  top: 50%;
  border-radius: 50%;
  background: var(--lb-accent);
  box-shadow: 0 0 0 8px var(--lb-accent-soft);
}

.lb-bc2-chapter-emblem::before { left: 4%; }
.lb-bc2-chapter-emblem::after { right: 4%; }
.lb-bc2-chapter-emblem > i { color: var(--lb-primary); font-size: 54px; transform: rotate(-8deg); }
.lb-bc2-chapter-emblem > span { font-size: 24px; font-weight: 950; letter-spacing: .08em; }
.lb-bc2-chapter-emblem > small { max-width: 150px; color: var(--lb-muted); font-size: 11px; font-weight: 800; }

.lb-bc2-chapter-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.lb-bc2-chapter-metrics article {
  min-width: 0;
  display: grid;
  gap: 4px;
  border: 1px solid var(--lb-line);
  border-radius: 17px;
  background: #fff;
  padding: 18px 20px;
}

.lb-bc2-chapter-metrics strong { color: var(--lb-primary); font-size: 30px; line-height: 1; }
.lb-bc2-chapter-metrics span { color: var(--lb-muted); font-size: 12px; font-weight: 800; }

.lb-bc2-sense-map,
.lb-bc2-chapter-route,
.lb-bc2-classes-hero,
.lb-bc2-practice-preview,
.lb-bc2-chapter-card {
  border: 1px solid var(--lb-line);
  border-radius: 24px;
  background: #fff;
}

.lb-bc2-sense-map { padding: clamp(24px, 4vw, 42px); }
.lb-bc2-sense-map > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.lb-bc2-sense-map > header > div:first-child { max-width: 760px; }
.lb-bc2-sense-map > header span { color: var(--lb-accent); font-size: 11px; font-weight: 950; letter-spacing: .12em; }
.lb-bc2-sense-map h2,
.lb-bc2-chapter-route h2,
.lb-bc2-classes-hero h1,
.lb-bc2-practice-preview h2,
.lb-bc2-chapter-card h2 { margin: 5px 0 7px; color: var(--lb-ink); }
.lb-bc2-sense-map h2 { font-size: clamp(30px, 4vw, 46px); }
.lb-bc2-sense-map header p,
.lb-bc2-chapter-route header p,
.lb-bc2-classes-hero p,
.lb-bc2-practice-preview p,
.lb-bc2-chapter-card p { margin: 0; color: var(--lb-muted); line-height: 1.55; }

.lb-bc2-map-status {
  min-width: 130px;
  display: grid;
  border-radius: 16px;
  background: var(--lb-accent-soft);
  padding: 15px 18px;
  text-align: center;
}
.lb-bc2-map-status b { color: var(--lb-accent); font-size: 25px; }
.lb-bc2-map-status small { color: var(--lb-muted); font-weight: 800; }

.lb-bc2-map-canvas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 30px;
  border: 1px solid #ead6df;
  border-radius: 22px;
  background:
    radial-gradient(circle at center, rgba(22, 124, 107, .09), transparent 22%),
    linear-gradient(rgba(140, 35, 75, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 35, 75, .035) 1px, transparent 1px),
    #fffbf5;
  background-size: auto, 26px 26px, 26px 26px, auto;
  padding: 22px;
}

.lb-bc2-map-core,
.lb-bc2-map-node {
  min-height: 138px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 7px;
  border-radius: 18px;
  text-align: center;
}

.lb-bc2-map-core {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  border: 2px solid var(--lb-primary);
  background: linear-gradient(145deg, var(--lb-primary), var(--lb-primary-dark));
  color: #fff;
  box-shadow: 0 16px 30px rgba(var(--lb-primary-rgb), .25);
}

.lb-bc2-map-core > i { color: #ffd8c9; font-size: 30px; }
.lb-bc2-map-core strong { font-size: 20px; letter-spacing: .08em; }
.lb-bc2-map-core small { color: #f8dfe8; font-weight: 750; }
.lb-bc2-map-node { border: 1px solid #e8d4dd; background: rgba(255, 255, 255, .92); padding: 15px; }
.lb-bc2-map-node { width: 100%; font: inherit; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.lb-bc2-map-node:hover,
.lb-bc2-map-node:focus-visible { border-color: var(--lb-primary); outline: none; transform: translateY(-2px); }
.lb-bc2-map-node.is-explored { border-color: var(--lb-accent); box-shadow: 0 10px 22px rgba(22, 124, 107, .12); }
.lb-bc2-map-node.is-explored > i { background: var(--lb-accent-soft); color: var(--lb-accent); }
.lb-bc2-map-node > i { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: var(--lb-vip); color: var(--lb-primary); }
.lb-bc2-map-node strong { color: var(--lb-ink); font-size: 16px; }
.lb-bc2-map-node small { color: var(--lb-muted); font-size: 11px; line-height: 1.35; }
.lb-bc2-map-node.is-node-1,
.lb-bc2-map-node.is-node-3 { grid-column: 1; }
.lb-bc2-map-node.is-node-2,
.lb-bc2-map-node.is-node-4 { grid-column: 3; }
.lb-bc2-map-node.is-node-5 { grid-column: 1; }
.lb-bc2-map-node.is-node-6 { grid-column: 3; }

.lb-bc2-map-examples { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.lb-bc2-map-examples article { min-width: 0; border: 1px solid var(--lb-line); border-radius: 14px; background: var(--lb-soft); padding: 14px; }
.lb-bc2-map-examples small { color: var(--lb-primary); font-size: 10px; font-weight: 950; text-transform: uppercase; }
.lb-bc2-map-examples p { min-height: 38px; margin: 7px 0; color: var(--lb-muted); font-size: 12px; }
.lb-bc2-map-examples strong { color: var(--lb-ink); font-size: 13px; }
.lb-bc2-map-examples article:not(.is-active) strong { display: none; }
.lb-bc2-map-examples article.is-active { border-color: var(--lb-accent); background: var(--lb-accent-soft); }
.lb-bc2-map-examples article.is-active strong { color: var(--lb-accent); }
.lb-bc2-map-note { display: flex; align-items: center; gap: 11px; margin-top: 16px; border-radius: 14px; background: var(--lb-accent-soft); padding: 13px 15px; }
.lb-bc2-map-note i { color: var(--lb-accent); }
.lb-bc2-map-note p { margin: 0; color: #35655c; font-size: 12px; line-height: 1.45; }

.lb-bc2-chapter-route { padding: clamp(24px, 4vw, 38px); }
.lb-bc2-chapter-route > header { max-width: 800px; }
.lb-bc2-chapter-route h2 { font-size: clamp(27px, 3vw, 38px); }
.lb-bc2-chapter-route > div { display: grid; gap: 9px; margin-top: 24px; }
.lb-bc2-chapter-route article { display: grid; grid-template-columns: 42px 42px minmax(0, 1fr); align-items: center; gap: 12px; border: 1px solid var(--lb-line); border-radius: 15px; padding: 13px 15px; }
.lb-bc2-chapter-route article > span { color: var(--lb-primary); font-size: 12px; font-weight: 950; }
.lb-bc2-chapter-route article > i { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; background: var(--lb-vip); color: var(--lb-primary); }
.lb-bc2-chapter-route article div { display: grid; gap: 3px; }
.lb-bc2-chapter-route article strong { color: var(--lb-ink); }
.lb-bc2-chapter-route article small { color: var(--lb-muted); }
.lb-bc2-chapter-footer { display: flex; justify-content: space-between; gap: 12px; }
.lb-bc2-chapter-footer .lb-btn { gap: 8px; }

.lb-bc2-classes-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(24px, 4vw, 38px); }
.lb-bc2-classes-hero h1 { font-size: clamp(31px, 4vw, 46px); }
.lb-bc2-class-index { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.lb-bc2-class-index a { min-width: 0; display: grid; gap: 6px; border: 1px solid var(--lb-line); border-radius: 13px; background: #fff; padding: 12px; color: var(--lb-ink); text-decoration: none; }
.lb-bc2-class-index a:hover { border-color: var(--lb-primary); background: var(--lb-vip); }
.lb-bc2-class-index b { color: var(--lb-primary); font-size: 11px; }
.lb-bc2-class-index span { overflow: hidden; font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.lb-bc2-theory-list { display: grid; gap: 10px; }
.lb-bc2-theory-list details { overflow: hidden; border: 1px solid var(--lb-line); border-radius: 17px; background: #fff; }
.lb-bc2-theory-list details[open] { border-color: #dcb6c6; box-shadow: 0 12px 28px rgba(88, 39, 59, .07); }
.lb-bc2-theory-list summary { display: grid; grid-template-columns: 35px 42px minmax(0, 1fr) 34px; align-items: center; gap: 12px; cursor: pointer; padding: 16px 18px; list-style: none; }
.lb-bc2-theory-list summary::-webkit-details-marker { display: none; }
.lb-bc2-theory-list summary > span { color: var(--lb-primary); font-size: 11px; font-weight: 950; }
.lb-bc2-theory-list summary > i { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; background: var(--lb-vip); color: var(--lb-primary); }
.lb-bc2-theory-list summary div { display: grid; gap: 3px; }
.lb-bc2-theory-list summary strong { color: var(--lb-ink); }
.lb-bc2-theory-list summary small { color: var(--lb-muted); }
.lb-bc2-theory-list summary > b { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; color: var(--lb-primary); }
.lb-bc2-theory-list details[open] summary > b { transform: rotate(180deg); }
.lb-bc2-theory-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; border-top: 1px solid var(--lb-line); background: #fffcf8; padding: 20px; }
.lb-bc2-theory-content article { border-radius: 14px; background: #fff; padding: 18px; }
.lb-bc2-theory-content h3 { margin: 0 0 8px; color: var(--lb-ink); font-size: 17px; }
.lb-bc2-theory-content p { margin: 0; color: var(--lb-muted); line-height: 1.65; }
.lb-bc2-theory-content aside { grid-column: 1 / -1; display: grid; grid-template-columns: 36px auto minmax(0, 1fr); align-items: center; gap: 10px; border-radius: 13px; background: var(--lb-accent-soft); padding: 13px 15px; }
.lb-bc2-theory-content aside i { color: var(--lb-accent); }
.lb-bc2-theory-content aside span { color: var(--lb-accent); font-size: 11px; font-weight: 950; text-transform: uppercase; }
.lb-bc2-theory-content aside p { color: #35655c; font-size: 12px; }
.lb-bc2-practice-preview { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 28px; }
.lb-bc2-practice-preview > div { max-width: 720px; }
.lb-bc2-practice-preview > div > span { color: var(--lb-primary); font-size: 11px; font-weight: 950; letter-spacing: .11em; }
.lb-bc2-coming { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; border-radius: 999px; background: var(--lb-vip); padding: 11px 15px; color: var(--lb-primary); font-size: 12px; font-weight: 900; }

.lb-bc2-semantic-route { display: flex; align-items: center; gap: 12px; margin: 2px 0 20px; border: 1px solid #e6cad6; border-radius: 16px; background: linear-gradient(135deg, #fff8f4, #fff); padding: 13px 15px; }
.lb-bc2-semantic-route > span { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 13px; background: var(--lb-vip); color: var(--lb-primary); }
.lb-bc2-semantic-route > div { display: grid; min-width: 0; gap: 2px; }
.lb-bc2-semantic-route small { color: var(--lb-muted); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.lb-bc2-semantic-route strong { color: var(--lb-ink); font-size: 16px; }
.lb-bc2-semantic-route a { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; color: var(--lb-primary); font-size: 12px; font-weight: 900; text-decoration: none; }
.lb-bc2-semantic-route a:hover { color: var(--lb-primary-dark); }

.lb-bc2-sample-video { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(260px, .95fr) minmax(260px, 1.05fr); gap: 22px; align-items: center; padding: 18px; border: 1px solid rgba(143, 31, 73, .18); border-radius: 20px; background: linear-gradient(135deg, #fffaf6 0%, #fff 62%); }
.lb-bc2-sample-video-stage { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 15px; background: #321126; box-shadow: 0 12px 28px rgba(61, 17, 43, .16); }
.lb-bc2-sample-video-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(43, 11, 31, .42), rgba(43, 11, 31, .05)); }
.lb-bc2-sample-video-stage.is-playing::after { display: none; }
.lb-bc2-sample-video-stage img,
.lb-bc2-sample-video-stage iframe { width: 100%; height: 100%; border: 0; object-fit: cover; }
.lb-bc2-sample-video-play { position: absolute; z-index: 1; inset: auto auto 18px 18px; display: inline-flex; align-items: center; gap: 10px; padding: 11px 15px; border: 0; border-radius: 999px; color: #fff; background: #8f1f49; font: inherit; font-weight: 800; cursor: pointer; box-shadow: 0 9px 22px rgba(74, 13, 43, .3); }
.lb-bc2-sample-video-play i { font-size: .8rem; }
.lb-bc2-sample-video-play:hover,
.lb-bc2-sample-video-play:focus-visible { transform: translateY(-2px); background: #711638; }
.lb-bc2-sample-video-copy > span { display: inline-flex; align-items: center; gap: 7px; color: #9b2451; font-size: .73rem; font-weight: 900; letter-spacing: .08em; }
.lb-bc2-sample-video-copy h3 { margin: 8px 0 7px; color: #351329; font-size: clamp(1.15rem, 2vw, 1.5rem); }
.lb-bc2-sample-video-copy p { margin: 0 0 10px; color: #685563; line-height: 1.55; }
.lb-bc2-sample-video-copy small { color: #8b7582; font-weight: 700; }

.lb-bc2-chapter-card { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 30px; padding: 24px; }
.lb-bc2-chapter-card-art { min-height: 285px; display: grid; place-items: center; align-content: center; gap: 12px; border-radius: 18px; background: radial-gradient(circle at 50% 25%, #d35d6e, #8c234b 58%, #55132f); color: #fff; }
.lb-bc2-chapter-card-art i { font-size: 68px; }
.lb-bc2-chapter-card-art b { font-size: 32px; }
.lb-bc2-chapter-card > div:last-child { align-self: center; }
.lb-bc2-chapter-card > div:last-child > span { color: var(--lb-accent); font-size: 11px; font-weight: 950; letter-spacing: .1em; }
.lb-bc2-chapter-card h2 { font-size: 38px; }
.lb-bc2-chapter-card ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; padding: 0; list-style: none; }
.lb-bc2-chapter-card li { border-radius: 999px; background: var(--lb-soft); padding: 8px 11px; color: var(--lb-muted); font-size: 12px; font-weight: 800; }

@media (max-width: 1050px) {
  .lb-bc2-chapter-hero { grid-template-columns: minmax(0, 1fr) 230px; }
  .lb-bc2-map-examples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lb-bc2-class-index { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .lb-bc2-chapter-hero { grid-template-columns: 1fr; min-height: 0; padding: 28px 20px; }
  .lb-bc2-chapter-copy h1 { font-size: clamp(48px, 17vw, 70px); }
  .lb-bc2-chapter-copy > p { font-size: 15px; }
  .lb-bc2-chapter-actions { display: grid; }
  .lb-bc2-chapter-emblem { width: 220px; }
  .lb-bc2-chapter-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lb-bc2-sense-map > header,
  .lb-bc2-classes-hero,
  .lb-bc2-practice-preview { align-items: stretch; flex-direction: column; }
  .lb-bc2-map-status { min-width: 0; }
  .lb-bc2-map-canvas { grid-template-columns: 1fr; }
  .lb-bc2-map-core,
  .lb-bc2-map-node,
  .lb-bc2-map-node.is-node-1,
  .lb-bc2-map-node.is-node-2,
  .lb-bc2-map-node.is-node-3,
  .lb-bc2-map-node.is-node-4,
  .lb-bc2-map-node.is-node-5,
  .lb-bc2-map-node.is-node-6 { grid-column: 1; grid-row: auto; }
  .lb-bc2-map-core { order: -1; }
  .lb-bc2-map-examples { grid-template-columns: 1fr; }
  .lb-bc2-map-examples p { min-height: 0; }
  .lb-bc2-chapter-footer { display: grid; }
  .lb-bc2-class-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lb-bc2-theory-list summary { grid-template-columns: 26px 36px minmax(0, 1fr); gap: 9px; padding: 14px; }
  .lb-bc2-theory-list summary > b { display: none; }
  .lb-bc2-theory-list summary > i { width: 34px; height: 34px; }
  .lb-bc2-theory-list summary small { font-size: 11px; }
  .lb-bc2-theory-content { grid-template-columns: 1fr; padding: 14px; }
  .lb-bc2-sample-video { grid-template-columns: 1fr; gap: 15px; padding: 12px; }
  .lb-bc2-sample-video-play { inset: auto 12px 12px 12px; justify-content: center; }
  .lb-bc2-theory-content aside { grid-template-columns: 28px minmax(0, 1fr); }
  .lb-bc2-theory-content aside p { grid-column: 1 / -1; }
  .lb-bc2-coming { justify-content: center; }
  .lb-bc2-chapter-card { grid-template-columns: 1fr; }
  .lb-bc2-chapter-card-art { min-height: 220px; }
  .lb-bc2-semantic-route { align-items: flex-start; }
  .lb-bc2-semantic-route a { align-self: center; font-size: 0; }
  .lb-bc2-semantic-route a i { font-size: 13px; }
}