:root {
  --ll-bg: #e8edf4;
  --ll-surface: #f7f9fc;
  --ll-text: #1f2937;
  --ll-muted: #4b5563;
  --ll-border: #c7d2e5;
  --ll-primary: #0b6ec7;
  --ll-primary-hover: #095ca6;
  --ll-success: #2f855a;
  --ll-danger: #c0392b;
  --ll-radius: 14px;
  --ll-shadow: 0 14px 36px rgb(15 23 42 / 9%);
  --ll-shell: 56rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
  color: var(--ll-text);
  background:
    radial-gradient(120% 80% at 0% 0%, #f4f8ff 0%, transparent 60%),
    radial-gradient(80% 55% at 100% 12%, #dce8f8 0%, transparent 65%),
    linear-gradient(180deg, #ebf1f8 0%, #e3e9f2 100%);
  line-height: 1.5;
}

a {
  color: var(--ll-primary);
}

p {
  margin: 0;
}

.ll-page {
  padding: 1.5rem 1rem 2.5rem;
}

.ll-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--ll-border);
  background: rgb(244 248 255 / 92%);
  backdrop-filter: blur(8px);
}

.ll-topbar-inner {
  min-height: 3.7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding-inline: 1rem;
}

.ll-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ll-text);
  text-decoration: none;
  font-weight: 700;
}

.ll-brand-mark {
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  border: 1px solid #a5bad8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eff4fb;
}

.ll-user-menu {
  position: relative;
}

.ll-user-menu summary {
  list-style: none;
}

.ll-user-menu summary::-webkit-details-marker {
  display: none;
}

.ll-user-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  padding: 0.15rem 0;
}

.ll-user-menu-caret {
  color: #64748b;
  font-size: 0.8rem;
  transition: transform 0.18s ease;
}

.ll-user-menu[open] .ll-user-menu-caret {
  transform: rotate(180deg);
}

.ll-user-menu-label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ll-text);
}

.ll-user-menu-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  min-width: 13.5rem;
  border: 1px solid var(--ll-border);
  border-radius: 1rem;
  background: #fff;
  box-shadow: var(--ll-shadow);
  padding: 0.5rem;
}

.ll-user-menu-action-form {
  margin: 0;
}

.ll-user-menu-action-button {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.ll-user-menu-action {
  width: 100%;
  display: inline-flex;
  align-items: center;
  padding: 0.8rem 0.9rem;
  border-radius: 0.8rem;
  color: var(--ll-text);
  font-size: 0.9rem;
  font-weight: 500;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.ll-user-menu-action:hover,
.ll-user-menu-action-button:focus-visible .ll-user-menu-action {
  background: #f8fafc;
}

.ll-shell {
  width: min(100%, var(--ll-shell));
  margin-inline: auto;
}

.ll-shell--narrow {
  --ll-shell: 42rem;
}

.ll-shell--lesson {
  --ll-shell: 96rem;
}

.ll-stack > * + * {
  margin-top: 1.25rem;
}

.ll-hero {
  display: grid;
  gap: 0.45rem;
}

.ll-hero--split {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
}

.ll-hero--center {
  justify-items: center;
  text-align: center;
}

.ll-hero-action {
  justify-self: end;
}

.ll-title {
  margin: 0;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.ll-subtitle {
  color: var(--ll-muted);
  font-size: 1.15rem;
}

.ll-musical-abbreviation {
  font-family: "Cormorant Garamond", "Bodoni MT", "Times New Roman", serif;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.ll-musical-abbreviation--symbol {
  font-size: 1.5em;
  line-height: 0.95;
  letter-spacing: 0;
}

.ll-abbreviation-label {
  color: #6b7280;
  font-size: 0.95em;
}

.ll-panel {
  background: var(--ll-surface);
  border: 1px solid var(--ll-border);
  border-radius: var(--ll-radius);
  box-shadow: var(--ll-shadow);
  padding: 1.3rem;
}

.ll-panel--overview {
  padding: 0;
  overflow: hidden;
}

.ll-panel--section {
  padding: 0;
  overflow: hidden;
}

.ll-panel-title {
  margin: 0;
  padding: 1rem 1.3rem;
  border-bottom: 1px solid var(--ll-border);
  font-size: clamp(1.7rem, 2.7vw, 3rem);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.05;
  background: #f3f5f9;
}

.ll-panel-title--section {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ll-panel-title--with-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.ll-panel-title-meta {
  font-size: 1rem;
  font-weight: 500;
  color: var(--ll-muted);
  text-align: right;
}

.ll-panel-body {
  padding: 1.35rem 1.45rem 1.5rem;
}

.ll-panel-body--tight-top {
  padding-top: 0;
}

.ll-panel-body--compact-top {
  padding-top: 0.8rem;
}

.ll-panel-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.9rem;
}

.ll-form {
  width: 100%;
}

.ll-form-grid {
  display: grid;
  gap: 0.8rem;
  align-items: start;
}

.ll-form-grid--two-up {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ll-form-grid--three-up {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ll-field {
  display: grid;
  gap: 0.55rem;
}

.ll-field--full-width {
  grid-column: 1 / -1;
}

.ll-practice-config-grid {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: 1fr;
  align-items: start;
}

.ll-track-set-form {
  align-self: start;
}

.ll-track-set-fieldset {
  margin: 0;
  border: 0;
  padding: 0;
  min-width: 0;
}

.ll-track-set-options {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0.35rem;
}

.ll-track-set-options .ll-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--ll-border);
  border-radius: 0.7rem;
  background: #fff;
  padding: 0.5rem 0.6rem;
  min-height: 2.5rem;
}

.ll-track-set-options .ll-checkbox input[type="checkbox"] {
  margin: 0;
}

.ll-track-set-options .ll-checkbox span {
  line-height: 1.2;
}

.ll-label {
  font-weight: 650;
  font-size: 0.95rem;
}

.ll-input {
  width: 100%;
  border: 1px solid var(--ll-border);
  border-radius: 0.75rem;
  background: #fff;
  color: var(--ll-text);
  min-height: 2.95rem;
  padding: 0.65rem 0.8rem;
  font: inherit;
}

.ll-input:focus {
  outline: 2px solid #93c5fd;
  outline-offset: 1px;
  border-color: #9bb2d7;
}

.ll-button {
  appearance: none;
  border: 0;
  border-radius: 0.8rem;
  min-height: 2.95rem;
  padding: 0.65rem 1rem;
  font: inherit;
  font-weight: 650;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ll-button--inline {
  width: fit-content;
}

.ll-button--icon {
  width: 2.35rem;
  min-height: 2.35rem;
  padding: 0;
  justify-content: center;
  font-size: 1.2rem;
  line-height: 1;
}

.ll-button--small {
  min-height: 2.1rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.9rem;
}

.ll-button--primary {
  background: var(--ll-primary);
  color: #fff;
}

.ll-button--primary:hover {
  background: var(--ll-primary-hover);
}

.ll-button--secondary {
  background: #eef2f7;
  color: var(--ll-text);
  border: 1px solid var(--ll-border);
}

.ll-button--danger {
  background: #fef2f2;
  border: 1px solid #f4b4b4;
  color: #9f1d1d;
}

.ll-actions {
  display: flex;
  gap: 0.65rem;
}

.ll-inline-form {
  margin: 0;
}

.ll-actions--end {
  justify-content: flex-end;
}

.ll-actions--center {
  justify-content: center;
}

.ll-actions--wrap {
  flex-wrap: wrap;
}

.ll-copy-row {
  display: flex;
  gap: 0.65rem;
  align-items: center;
}

.ll-copy-row--compact .ll-input {
  min-height: 2.5rem;
  padding-block: 0.5rem;
  font-size: 0.92rem;
}

.ll-copy-row--compact .ll-button {
  min-height: 2.5rem;
  padding-block: 0.5rem;
}

.ll-copy-row-input {
  flex: 1;
}

.ll-note-body {
  margin: 0;
}

.ll-input--rich {
  min-height: 8rem;
}

.ll-note-body .lexxy-content p {
  margin: 0;
}

.ll-task-section {
  border: 1px solid var(--ll-border);
  border-radius: 0.75rem;
  background: #fbfcff;
  padding: 0.7rem 0.8rem;
}

.ll-task-list {
  margin-top: 0.2rem;
  padding-left: 0;
}

.ll-task-list li {
  list-style: none;
  margin-left: 0;
}

.ll-task-list-item {
  margin-left: 0;
}

.ll-task-list-item--practice {
  list-style: none;
  margin-left: 0;
}

.ll-task-list-item--practice + .ll-task-list-item--practice {
  margin-top: 0.2rem;
}

.ll-panel-body--tasks {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.ll-task-list .ll-inline-form {
  width: 100%;
}

.ll-task-toggle {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.ll-task-toggle input[type="checkbox"] {
  margin: 0;
}

.ll-task-toggle__content--done {
  text-decoration: line-through;
  color: var(--ll-muted);
}

.ll-task-toggle__points {
  margin-left: auto;
  font-size: 0.85rem;
  font-weight: 700;
  color: #2f855a;
}

.ll-practice-goal-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: end;
}

.ll-practice-item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.65rem;
}

.ll-practice-goal-table-wrap {
  overflow-x: auto;
}

.ll-practice-goal-group {
  gap: 0.45rem;
}

.ll-practice-goal-category-panel {
  background: #fff;
}

.ll-practice-goal-table {
  width: 100%;
  min-width: 26rem;
  border-collapse: collapse;
  table-layout: fixed;
}

.ll-practice-goal-table th,
.ll-practice-goal-table td {
  border-bottom: 1px solid var(--ll-border);
  padding: 0.6rem 0.45rem;
  text-align: left;
  vertical-align: middle;
}

.ll-practice-goal-table th:nth-child(2),
.ll-practice-goal-table td:nth-child(2) {
  width: 8.5rem;
  text-align: center;
}

.ll-practice-goal-table th:nth-child(3),
.ll-practice-goal-table td:nth-child(3) {
  width: 5.5rem;
  text-align: right;
}

.ll-practice-goal-table thead th {
  color: var(--ll-muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ll-practice-goal-table tbody tr:last-child td {
  border-bottom: 0;
}

.ll-students-table-wrap {
  overflow-x: auto;
}

.ll-students-table {
  width: 100%;
  min-width: 42rem;
  border-collapse: collapse;
  table-layout: fixed;
}

.ll-students-table th,
.ll-students-table td {
  border-bottom: 1px solid var(--ll-border);
  padding: 0.72rem 0.6rem;
  text-align: left;
  vertical-align: middle;
}

.ll-students-table thead th {
  color: var(--ll-muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ll-students-table tbody th {
  font-size: 1rem;
  font-weight: 650;
}

.ll-students-table tbody tr:last-child th,
.ll-students-table tbody tr:last-child td {
  border-bottom: 0;
}

.ll-practice-goal-description-row td {
  padding-top: 1rem;
  padding-bottom: 0.35rem;
  border-bottom: 0;
  color: var(--ll-muted);
  font-size: 0.95rem;
}

.ll-practice-goal-description-row:first-child td {
  padding-top: 0.15rem;
}

.ll-practice-goal-subgroup-row td {
  padding-top: 0.45rem;
  padding-bottom: 0.25rem;
  border-bottom: 0;
  color: var(--ll-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ll-practice-goal-name {
  display: block;
  font-weight: 650;
}

.ll-practice-goal-count {
  display: inline-flex;
  min-width: 2rem;
  min-height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #eef6ff;
  color: var(--ll-text);
  font-weight: 700;
  animation: ll-practice-count-pop 420ms ease-out;
}

.ll-practice-goal-action-cell {
  text-align: right;
}

.ll-practice-goal-action-form {
  display: inline-flex;
  justify-content: flex-end;
  margin: 0;
}

.ll-practice-goal-action {
  border-radius: 999px;
}

@keyframes ll-practice-count-pop {
  0% {
    background: #d1fae5;
    box-shadow: 0 0 0 0 rgb(16 185 129 / 32%);
    transform: scale(0.92);
  }

  70% {
    box-shadow: 0 0 0 0.45rem rgb(16 185 129 / 0%);
    transform: scale(1.08);
  }

  100% {
    background: #eef6ff;
    box-shadow: 0 0 0 0 rgb(16 185 129 / 0%);
    transform: scale(1);
  }
}

.ll-practice-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  border: 1px solid var(--ll-border);
  border-radius: 0.65rem;
  padding: 0.55rem 0.65rem;
  background: #fff;
}

.ll-practice-item .ll-label,
.ll-practice-item .ll-muted {
  margin: 0;
}

.ll-practice-homework-list {
  display: grid;
  gap: 0.3rem;
  width: 100%;
}

.ll-practice-homework-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.2rem 0;
  min-height: 3rem;
}

.ll-practice-homework-copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.55rem;
  gap: 0.18rem;
  min-width: 0;
  align-items: start;
}

.ll-practice-homework-name {
  font-weight: 650;
  line-height: 1.2;
  grid-column: 2;
}

.ll-practice-homework-description {
  color: var(--ll-muted);
  font-size: 0.92rem;
  line-height: 1.25;
  grid-column: 2;
}

.ll-task-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  min-width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.02rem;
  margin-right: 0.5em;
  color: var(--ll-muted);
  font-size: 1.8em;
  line-height: 1;
}

.ll-task-status-icon::before {
  content: "○";
}

.ll-task-status-icon--incomplete {
  color: var(--ll-muted);
}

.ll-task-status-icon--complete {
  color: #2f855a;
}

.ll-task-status-icon--complete::before {
  content: "☑";
}

.ll-task-status-icon--dismissed {
  color: #c53030;
}

.ll-task-status-icon--dismissed::before {
  content: "✕";
}

.ll-task-list-group-label,
.ll-task-list-subgroup-label,
.ll-task-list-description {
  list-style: none;
  margin-left: -1.1rem;
  padding-left: 0;
}

.ll-task-list-group-label::marker,
.ll-task-list-subgroup-label::marker,
.ll-task-list-description::marker {
  content: "";
}

.ll-task-list-group-label {
  margin-top: 0.5rem;
  padding: 0.55rem 0.25rem 0 0;
  color: var(--ll-text);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ll-border);
}

h3.ll-task-list-group-label {
  padding-left: 1.25rem !important;
}

.ll-task-list-subgroup-label {
  margin-top: 0.35rem;
  color: var(--ll-muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ll-task-list-description {
  color: var(--ll-muted);
  font-size: 0.92rem;
  line-height: 1.25;
}

.ll-practice-homework-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-left: auto;
  flex-shrink: 0;
}

.ll-practice-homework-points {
  color: var(--ll-muted);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

.ll-lesson-homework-status-stack {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.ll-practice-homework-points-burst {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 0.1rem);
  color: #2f855a;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
  animation: ll-points-burst 720ms ease-out forwards;
}

.ll-outstanding-subject-section {
  gap: 0.75rem;
}

.ll-outstanding-subject-heading {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
}

.ll-outstanding-lesson-card {
  gap: 0.75rem;
  padding-top: 0.1rem;
}

.ll-outstanding-lesson-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--ll-border);
}

.ll-outstanding-lesson-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}

.ll-outstanding-lesson-card .ll-task-list {
  margin-top: 0.35rem;
}

.ll-split-action {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--ll-border);
  border-radius: 999px;
  background: #fff;
  overflow: visible;
}

.ll-split-action__primary.ll-button,
.ll-split-action__toggle {
  border: 0;
  border-radius: 0;
  background: transparent;
  min-height: 2.45rem;
}

.ll-split-action__primary.ll-button {
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;
  border-right: 1px solid var(--ll-border);
  min-width: 2.6rem;
}

.ll-split-action__menu {
  position: relative;
}

.ll-split-action__menu summary {
  list-style: none;
}

.ll-split-action__menu summary::-webkit-details-marker {
  display: none;
}

.ll-split-action__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  cursor: pointer;
  color: var(--ll-muted);
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
}

.ll-split-action__toggle--disabled {
  cursor: default;
  opacity: 0.45;
}

.ll-split-action__menu[open] .ll-split-action__toggle {
  background: #f8fafc;
}

.ll-split-action__popover {
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  min-width: 12rem;
  border: 1px solid var(--ll-border);
  border-radius: 0.8rem;
  background: #fff;
  box-shadow: var(--ll-shadow);
  padding: 0.35rem;
  z-index: 20;
}

.ll-split-action__menu-form {
  margin: 0;
}

.ll-split-action__menu-button {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 0.55rem 0.65rem;
  border-radius: 0.55rem;
  color: var(--ll-text);
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.ll-split-action__menu-button:hover {
  background: #f8fafc;
}

.ll-split-action--staff {
  overflow: hidden;
}

.ll-split-action__staff-complete.ll-button,
.ll-split-action__staff-dismiss.ll-button {
  border: 0;
  border-radius: 0;
  background: transparent;
  min-height: 2.45rem;
  min-width: 2.3rem;
  padding-inline: 0.8rem;
}

.ll-split-action__staff-complete.ll-button {
  color: #2f855a;
  border-right: 1px solid var(--ll-border);
}

.ll-split-action__staff-dismiss.ll-button {
  color: #c53030;
}

.ll-split-action__undo.ll-button {
  white-space: nowrap;
}

.ll-repertoire-piece-card {
  background: #fff;
  border-radius: 1rem;
}

.ll-repertoire-piece-title {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.2;
}

.ll-repertoire-form-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
}

.ll-repertoire-page {
  gap: 1.1rem;
}

.ll-repertoire-set-builder .ll-panel-body,
.ll-repertoire-set-card > .ll-panel-body {
  padding-top: 1.1rem;
}

.ll-repertoire-set-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 0.95rem 1.2rem 0;
}

.ll-repertoire-set-heading {
  min-width: 0;
}

.ll-repertoire-set-title {
  padding: 0;
  border-bottom: 0;
  background: transparent;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
}

.ll-repertoire-set-subtitle {
  margin-top: 0.2rem;
}

.ll-repertoire-piece-meta,
.ll-repertoire-piece-status,
.ll-repertoire-piece-notes {
  font-size: 0.95rem;
}

.ll-repertoire-assets {
  border-top: 1px solid #edf2f8;
  padding-top: 0.85rem;
}

.ll-repertoire-asset-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.ll-repertoire-piece-card .ll-panel-body {
  padding: 1.1rem 1.15rem 1.15rem;
}

.ll-repertoire-piece-card .ll-form {
  border-top: 1px solid #edf2f8;
  padding-top: 0.95rem;
}

.ll-open-practice-form {
  gap: 0.85rem;
}

.ll-open-practice-form .ll-actions {
  margin-top: 0.5rem;
}

.ll-open-practice-form-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 11rem;
  gap: 0.8rem;
  align-items: end;
}

.ll-practice-homework-undo {
  min-height: 2rem;
  padding-inline: 0.65rem;
}

.ll-practice-homework-undo--icon {
  min-width: 2.35rem;
  padding-inline: 0;
}

.ll-lesson-homework-status {
  display: inline-flex;
  align-items: center;
}

.ll-lesson-homework-status-value {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
  background: #eef6ff;
  color: var(--ll-text);
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
}

.ll-lesson-homework-status-value--animated {
  animation: ll-practice-count-pop 420ms ease-out;
}

@keyframes ll-points-burst {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(0.35rem) scale(0.92);
  }

  20% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-0.9rem) scale(1);
  }
}

@media (max-width: 640px) {
  .ll-practice-homework-action-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .ll-practice-homework-controls {
    margin-left: 0;
  }

  .ll-lesson-homework-status {
    align-items: center;
  }

  .ll-open-practice-form-fields {
    grid-template-columns: 1fr;
  }

  .ll-form-grid--two-up,
  .ll-form-grid--three-up {
    grid-template-columns: 1fr;
  }

  .ll-repertoire-set-header,
  .ll-repertoire-asset-row,
  .ll-panel-title-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

.ll-lesson-practice-picker {
  gap: 0.8rem;
  padding-top: 0.2rem;
}

.ll-lesson-practice-picker-heading {
  padding-inline: 0.1rem;
  padding-bottom: 0.2rem;
}

.ll-lesson-panel .ll-lesson-practice-picker-heading .ll-label {
  font-size: 1.35rem;
  line-height: 1.2;
}

.ll-lesson-practice-picker-heading .ll-muted {
  margin-top: 0.15rem;
}

.ll-lesson-practice-milestone {
  gap: 0.7rem;
}

.ll-lesson-practice-milestone-title {
  margin: 0;
  padding-inline: 0.1rem;
  font-size: 1.15rem;
  line-height: 1.2;
}

.ll-practice-assignment-group {
  border: 1px solid var(--ll-border);
  border-radius: 0.8rem;
  background: #fff;
  overflow: hidden;
}

.ll-practice-assignment-group + .ll-practice-assignment-group {
  margin-top: 0.35rem;
}

.ll-practice-assignment-group-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  list-style: none;
  cursor: pointer;
  padding: 0.85rem 1rem;
}

.ll-practice-assignment-group-summary::-webkit-details-marker {
  display: none;
}

.ll-practice-assignment-group-summary::after {
  content: "▾";
  color: var(--ll-muted);
  font-size: 0.95rem;
}

.ll-practice-assignment-group:not([open]) .ll-practice-assignment-group-summary::after {
  content: "▸";
}

.ll-practice-assignment-group-title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ll-muted);
}

.ll-practice-assignment-group-meta {
  margin-left: auto;
  color: var(--ll-muted);
  font-size: 0.88rem;
  padding-right: 0.2rem;
}

.ll-practice-assignment-list {
  display: grid;
  gap: 0.55rem;
  padding: 0 1rem 1rem;
}

.ll-practice-assignment-block {
  display: grid;
  gap: 0.35rem;
}

.ll-practice-assignment-description {
  margin: 0;
  color: var(--ll-muted);
  font-size: 0.96rem;
  padding-top: 0.1rem;
}

.ll-practice-assignment-subgroup {
  margin: 0.25rem 0 0;
  color: var(--ll-muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ll-practice-assignment-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: end;
  border: 1px solid var(--ll-border);
  border-radius: 0.65rem;
  background: #fbfcff;
  padding: 0.6rem 0.75rem;
}

.ll-practice-assignment-main {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.ll-practice-assignment-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  cursor: pointer;
}

.ll-practice-assignment-choice input[type="checkbox"] {
  margin: 0.15rem 0 0;
}

.ll-practice-assignment-copy {
  display: grid;
  gap: 0.15rem;
}

.ll-practice-assignment-name {
  font-weight: 650;
}

.ll-practice-assignment-points {
  color: var(--ll-muted);
  font-size: 0.88rem;
}

.ll-practice-assignment-points-field {
  display: grid;
  gap: 0.35rem;
  justify-items: end;
  align-self: end;
}

.ll-practice-assignment-note-field {
  display: grid;
  gap: 0.25rem;
}

.ll-practice-assignment-note-label {
  color: var(--ll-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ll-practice-assignment-note-input {
  min-height: 2.5rem;
}

.ll-practice-assignment-target-label {
  color: var(--ll-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ll-practice-assignment-points-input {
  width: 5.5rem;
  min-width: 5.5rem;
  padding: 0.45rem 0.55rem;
  text-align: right;
}

.ll-repeatable-task-picker {
  gap: 0.8rem;
  padding-top: 0.2rem;
}

.ll-repeatable-task-picker-heading {
  padding-inline: 0.1rem;
  padding-bottom: 0.2rem;
}

.ll-lesson-panel .ll-repeatable-task-picker-heading .ll-label {
  font-size: 1.35rem;
  line-height: 1.2;
}

.ll-repeatable-task-picker-heading .ll-muted {
  margin-top: 0.15rem;
}

.ll-repeatable-task-list {
  display: grid;
  gap: 0.65rem;
}

.ll-repeatable-task-row {
  border: 1px solid var(--ll-border);
  border-radius: 0.65rem;
  background: #fbfcff;
  padding: 0.7rem 0.75rem;
}

.ll-lesson-sound-clips-section {
  gap: 0.8rem;
  padding-top: 0.95rem;
  margin-top: 0.95rem;
  border-top: 1px solid var(--ll-border);
}

.ll-lesson-sound-clips-heading {
  padding-inline: 0.1rem;
  padding-top: 0.15rem;
  padding-bottom: 0.2rem;
}

.ll-lesson-panel .ll-lesson-sound-clips-heading .ll-label {
  font-size: 1.35rem;
  line-height: 1.2;
  margin: 0;
}

.ll-lesson-sound-clips-form {
  border: 1px solid var(--ll-border);
  border-radius: 0.8rem;
  background: #fbfcff;
  padding: 0.85rem;
}

.ll-lesson-sound-clips-recorder {
  gap: 0.7rem;
}

.ll-lesson-sound-clips-live-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.ll-lesson-sound-clips-recorder-actions {
  margin-top: 0;
  align-items: center;
  flex-shrink: 0;
}

.ll-lesson-sound-clips-live {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex: 1 1 auto;
}

.ll-lesson-sound-clips-timer {
  margin: 0;
  min-width: 3.4rem;
  font-size: 0.95rem;
  font-weight: 700;
}

.ll-lesson-sound-clips-meter {
  position: relative;
  flex: 1 1 auto;
  height: 0.6rem;
  border: 1px solid var(--ll-border);
  border-radius: 999px;
  background: #eef2f7;
  overflow: hidden;
}

.ll-lesson-sound-clips-meter__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4f46e5 0%, #2563eb 45%, #10b981 100%);
  transition: width 120ms linear;
}

.ll-lesson-sound-clips-icon-button {
  min-width: 2.4rem;
  min-height: 2.4rem;
  padding-inline: 0;
}

.ll-lesson-sound-clips-icon-button span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 1rem;
  line-height: 1;
}

.ll-lesson-sound-clips-icon-button[data-audio-recorder-target="recordButton"] span {
  color: #c53030;
}

.ll-lesson-sound-clips-icon-button[data-audio-recorder-target="stopButton"] span {
  color: #1f2937;
}

.ll-lesson-sound-clips-icon-button[data-audio-recorder-target="clearButton"] span {
  color: #475569;
}

.ll-lesson-sound-clips-upload {
  border-top: 1px solid var(--ll-border);
  padding-top: 0.8rem;
}

.ll-lesson-sound-clips-upload__summary {
  list-style: none;
  cursor: pointer;
}

.ll-lesson-sound-clips-upload__summary::-webkit-details-marker {
  display: none;
}

.ll-lesson-sound-clips-upload__summary .ll-label {
  margin: 0;
}

.ll-lesson-sound-clips-upload[open] .ll-lesson-sound-clips-upload__summary {
  margin-bottom: 0.75rem;
}

.ll-lesson-sound-clips-status {
  margin: 0;
}

.ll-lesson-sound-clips-preview {
  border: 1px solid var(--ll-border);
  border-radius: 0.7rem;
  background: #fff;
  padding: 0.75rem;
}

.ll-lesson-sound-clips-preview .ll-label,
.ll-lesson-sound-clips-preview .ll-muted {
  margin: 0;
}

.ll-repeatable-task-row + .ll-repeatable-task-row {
  margin-top: 0;
}

.ll-repeatable-task-row-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: end;
}

.ll-repeatable-task-row-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: end;
  margin-top: 0.75rem;
}

.ll-repeatable-task-field,
.ll-repeatable-task-target-field {
  display: grid;
  gap: 0.25rem;
}

.ll-repeatable-task-field--name {
  min-width: 0;
}

.ll-repeatable-task-label {
  color: var(--ll-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ll-repeatable-task-target-field .ll-input {
  width: 5.5rem;
  min-width: 5.5rem;
  text-align: right;
}

.ll-repeatable-task-actions {
  display: flex;
  align-items: end;
}

.ll-repeatable-task-remove-button {
  min-width: 2.75rem;
  padding-inline: 0.85rem;
}

.ll-form > section + section {
  border-top: 1px solid var(--ll-border);
  padding-top: 1rem;
}

.ll-lesson-section-actions {
  margin-top: 1rem;
  border-top: 1px solid var(--ll-border);
  padding-top: 1rem;
}

@media (max-width: 640px) {
  .ll-hero--split {
    grid-template-columns: 1fr;
  }

  .ll-hero-action {
    justify-self: start;
  }

  .ll-practice-assignment-item {
    grid-template-columns: 1fr;
  }

  .ll-practice-assignment-points-field {
    justify-items: start;
  }

  .ll-practice-assignment-points-input {
    text-align: left;
  }

  .ll-repeatable-task-row-header,
  .ll-repeatable-task-row-body {
    grid-template-columns: 1fr;
  }

  .ll-repeatable-task-target-field .ll-input {
    text-align: left;
  }
}

.ll-reward-item {
  border: 1px solid var(--ll-border);
  border-radius: 0.8rem;
  padding: 0.7rem 0.8rem;
  background: #fbfcff;
}

.ll-scale-rewards-summary {
  gap: 0.85rem;
}

.ll-rewards-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(19rem, 1fr);
  gap: 0.9rem;
  border: 1px solid #cfd8ea;
  border-radius: 1.1rem;
  padding: 1rem;
  background:
    radial-gradient(circle at top left, rgba(103, 76, 255, 0.18), transparent 32%),
    radial-gradient(circle at bottom right, rgba(0, 179, 134, 0.12), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #f5f8ff 100%);
}

.ll-rewards-overview__copy,
.ll-rewards-overview__stats {
  min-width: 0;
}

.ll-rewards-overview__title {
  margin: 0;
  color: #1f2b3d;
  font-size: clamp(1.4rem, 2vw, 2rem);
  line-height: 1.05;
}

.ll-rewards-overview__body,
.ll-rewards-overview__meta {
  color: #536174;
}

.ll-rewards-overview__body {
  margin: 0;
  font-size: 1rem;
}

.ll-rewards-overview__track {
  width: 100%;
  height: 0.9rem;
  border: 1px solid #ced7ea;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  overflow: hidden;
}

.ll-rewards-overview__track--complete {
  border-color: #8fd3b7;
}

.ll-rewards-overview__fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6a4dff 0%, #4589ff 55%, #00a36c 100%);
}

.ll-rewards-overview__meta {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 0.9rem;
  font-weight: 600;
}

.ll-rewards-overview__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.ll-metric-card--feature {
  min-height: 9.2rem;
  background: rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(6px);
}

.ll-streak-journey {
  border: 1px solid var(--ll-border);
  border-radius: 1rem;
  background: #fbfcff;
  padding: 0.9rem 0.95rem;
}

.ll-streak-journey__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.ll-streak-journey__header .ll-label,
.ll-streak-journey__header .ll-muted {
  margin: 0;
}

.ll-streak-journey__subhead {
  margin: 0;
  color: #536174;
  font-size: 0.95rem;
  font-weight: 600;
}

.ll-streak-scale {
  position: relative;
  padding-top: 0.15rem;
  padding-bottom: 3.4rem;
}

.ll-streak-scale__track {
  position: relative;
  height: 1.1rem;
  border: 1px solid #c6d5ea;
  border-radius: 999px;
  background: #edf4ff;
  overflow: hidden;
}

.ll-streak-scale__fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4d4ee5 0%, #596df0 24%, #3c95f0 52%, #18a777 100%);
}

.ll-streak-scale__milestones {
  position: absolute;
  inset: 0 0 auto;
  top: 0.55rem;
  height: calc(100% - 0.55rem);
}

.ll-streak-scale__milestone {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.ll-streak-scale__milestone--end {
  transform: translateX(-100%);
  align-items: flex-end;
}

.ll-streak-scale__tick {
  width: 1px;
  height: 0.8rem;
  background: #bfd0e6;
}

.ll-streak-scale__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--ll-border);
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
  background: #fbfcff;
  color: var(--ll-muted);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.ll-streak-scale__pill strong {
  font-size: 0.78rem;
}

.ll-streak-scale__milestone--complete .ll-streak-scale__tick {
  background: #5bb38a;
}

.ll-streak-scale__milestone--complete .ll-streak-scale__pill {
  border-color: #8fd3b7;
  background: #e9f8f0;
  color: #226441;
}

.ll-streak-scale__milestone--next .ll-streak-scale__tick {
  background: #7d68ff;
}

.ll-streak-scale__milestone--next .ll-streak-scale__pill {
  border-color: #b7a6ff;
  background: #f3efff;
  color: #4931b5;
}

.ll-streak-journey__badge {
  margin: 0;
  white-space: nowrap;
  border: 1px solid #a8bad7;
  border-radius: 999px;
  background: #eef4ff;
  color: #2d4571;
  font-size: 0.84rem;
  font-weight: 700;
  padding: 0.28rem 0.7rem;
}

.ll-stack--compact > * + * {
  margin-top: 0.35rem;
}

.ll-streak-ladder {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.ll-streak-ladder--journey {
  justify-content: space-between;
}

.ll-streak-ladder__step {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--ll-border);
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
  background: #fbfcff;
  color: var(--ll-muted);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
}

.ll-streak-ladder__step strong {
  font-size: 0.78rem;
}

.ll-streak-ladder__step--complete {
  border-color: #8fd3b7;
  background: #e9f8f0;
  color: #226441;
}

.ll-streak-ladder__step--next {
  border-color: #b7a6ff;
  background: #f3efff;
  color: #4931b5;
}

.ll-achieved-rewards {
  border-top: 1px solid var(--ll-border);
  padding-top: 0.2rem;
}

.ll-achieved-rewards__summary {
  list-style: none;
  cursor: pointer;
  color: #5f6878;
  padding: 0.2rem 0;
}

.ll-achieved-rewards__summary::-webkit-details-marker {
  display: none;
}

.ll-achieved-rewards__summary .ll-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
}

.ll-achieved-rewards__summary .ll-label::before {
  content: "▸";
  color: #8a94a8;
  font-size: 0.85rem;
  transition: transform 140ms ease;
}

.ll-achieved-rewards[open] .ll-achieved-rewards__summary .ll-label::before {
  transform: rotate(90deg);
}

.ll-achieved-rewards[open] .ll-achieved-rewards__summary {
  margin-bottom: 0.55rem;
}

.ll-reward-item--achieved {
  background: #f8fbff;
}

.ll-open-practice-quick-log {
  border: 1px solid var(--ll-border);
  border-radius: 0.85rem;
  background: #fbfcff;
  padding: 0.15rem 0.75rem 0.75rem;
}

.ll-open-practice-quick-log__summary {
  list-style: none;
  cursor: pointer;
  padding: 0.45rem 0 0.2rem;
}

.ll-open-practice-quick-log__summary::-webkit-details-marker {
  display: none;
}

.ll-open-practice-quick-log__summary .ll-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
}

.ll-open-practice-quick-log__summary .ll-label::before {
  content: "▸";
  color: #8a94a8;
  font-size: 0.85rem;
  transition: transform 140ms ease;
}

.ll-open-practice-quick-log[open] .ll-open-practice-quick-log__summary .ll-label::before {
  transform: rotate(90deg);
}

.ll-open-practice-quick-log__list {
  display: grid;
  gap: 0.45rem;
  padding-top: 0.2rem;
}

.ll-open-practice-quick-log__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.ll-open-practice-quick-log__copy {
  font-size: 0.95rem;
  color: #2f3a4d;
}

.ll-open-practice-quick-log__button {
  min-width: 2.2rem;
}

.ll-referral-item {
  padding: 0.55rem 0.65rem;
  gap: 0.3rem;
}

.ll-referral-meta {
  font-size: 0.89rem;
  line-height: 1.25;
}

.ll-referral-table-wrap {
  overflow-x: auto;
}

.ll-referral-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 56rem;
}

.ll-referral-table th,
.ll-referral-table td {
  border-bottom: 1px solid var(--ll-border);
  padding: 0.5rem 0.45rem;
  text-align: left;
  vertical-align: top;
}

.ll-referral-table thead th {
  color: var(--ll-muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ll-referral-table tbody tr:last-child td {
  border-bottom: 0;
}

.ll-referral-table-primary {
  margin: 0;
}

.ll-referral-table-context {
  min-width: 10rem;
}

.ll-referral-table-subjects {
  min-width: 10.5rem;
}

.ll-referral-table-detail-row {
  margin: 0;
}

.ll-referral-table-detail-row + .ll-referral-table-detail-row {
  margin-top: 0.2rem;
}

.ll-referral-copy-button {
  white-space: nowrap;
}

.ll-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--ll-border);
  background: #eef2f7;
  color: #526174;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  white-space: nowrap;
}

.ll-status-badge[data-status="active"] {
  background: #e8f6ee;
  border-color: #9fd5b3;
  color: #226441;
}

.ll-status-badge[data-status="consumed"] {
  background: #eef2f7;
  border-color: #b8c4d6;
  color: #4f5f74;
}

.ll-status-badge[data-status="expired"] {
  background: #fff1f1;
  border-color: #e7b2b2;
  color: #9b2d2d;
}

.ll-reward-item__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}

.ll-reward-item__header .ll-label,
.ll-reward-item__header .ll-muted {
  margin: 0;
}

.ll-reward-item__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.ll-reward-item__footer .ll-muted {
  margin: 0;
}

.ll-audio-clip-card {
  border: 1px solid var(--ll-border);
  border-radius: 0.8rem;
  padding: 0.8rem 0.9rem;
  background: #fbfcff;
}

.ll-audio-clip-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.ll-audio-clip-card__header .ll-label,
.ll-audio-clip-card__header .ll-muted {
  margin: 0;
}

.ll-audio-clip-card--fresh {
  animation: ll-audio-clip-fade-in 720ms ease-out;
}

.ll-audio-clip-player {
  width: 100%;
}

.ll-audio-clip-card__delete {
  min-height: 1.85rem;
  padding-inline: 0.55rem;
  font-size: 0.88rem;
}

@keyframes ll-audio-clip-fade-in {
  0% {
    transform: translateY(0.35rem);
    background: #eefcf4;
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    background: #fbfcff;
    opacity: 1;
  }
}

.ll-progress-track {
  width: 100%;
  height: 0.65rem;
  border: 1px solid var(--ll-border);
  border-radius: 999px;
  background: #eef2f7;
  overflow: hidden;
}

.ll-progress-fill {
  height: 100%;
  background: #2f855a;
}

:root {
  --ll-drawing-height: 18rem;
}

.ll-drawing-pad {
  box-sizing: border-box;
  border: 1px solid var(--ll-border);
  border-radius: 0.75rem;
  background: #fff;
  padding: 0.35rem;
  height: var(--ll-drawing-height);
  min-height: var(--ll-drawing-height);
  display: flex;
  align-items: stretch;
}

.ll-drawing-pad-canvas {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0.55rem;
  background: #fff;
  touch-action: none;
  cursor: crosshair;
}

.ll-drawing-preview {
  width: 100%;
  height: auto;
  border: 1px solid var(--ll-border);
  border-radius: 0.65rem;
  background: #fff;
}

.ll-panel-body--drawing {
  min-height: var(--ll-drawing-height);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ll-panel-body--drawing .ll-drawing-preview {
  width: auto;
  max-width: 100%;
  max-height: var(--ll-drawing-height);
  object-fit: contain;
}

.ll-lesson-panel--current .ll-drawing-pad-canvas {
  height: 100%;
}

.ll-lesson-panel--current .ll-drawing-pad {
  height: var(--ll-drawing-height);
  min-height: var(--ll-drawing-height);
}

.ll-lesson-panel--previous .ll-panel-body--drawing {
  min-height: var(--ll-drawing-height);
}

.ll-lesson-panel--previous + .ll-lesson-panel--previous {
  margin-top: 0.4rem;
}

.ll-lesson-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.ll-subject-note-frame {
  display: block;
  width: 100%;
}

.ll-student-subject-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: minmax(0, 1fr);
}

.ll-subject-access-item {
  display: grid;
  grid-template-columns: minmax(8.5rem, max-content) minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
}

.ll-subject-access-label {
  font-weight: 650;
  text-align: right;
}

.ll-subject-access-links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

.ll-subject-access-links .ll-link {
  font-weight: 500;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
}

.ll-subject-access-separator {
  color: #94a3b8;
}

@media (width <= 640px) {
  .ll-subject-access-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }

  .ll-subject-access-label {
    text-align: left;
  }
}

.ll-lesson-panel {
  background: #f8fbff;
  border-color: #b9c8de;
}

.ll-lesson-panel .ll-panel-title {
  background: #f2f6fb;
  padding: 0.82rem 1rem;
}

.ll-lesson-panel .ll-panel-body {
  max-height: none;
  overflow: visible;
  padding: 1rem 1.05rem 1.15rem;
}

.ll-lesson-panel .ll-label {
  font-size: 0.9rem;
}

.ll-lesson-panel .ll-input {
  min-height: 2.75rem;
  border-radius: 0.65rem;
}

.ll-panel-title--lesson-nav {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 2rem;
  align-items: center;
  gap: 0.45rem;
  min-height: 3.85rem;
}

.ll-panel-arrow {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ll-border);
  border-radius: 0.55rem;
  background: #eef2f7;
  color: var(--ll-text);
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 650;
  line-height: 1;
}

.ll-panel-arrow--disabled {
  opacity: 0.45;
}

.ll-panel-nav-form {
  margin: 0;
  width: 100%;
}

.ll-lesson-editor-date-form {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ll-field--title-date {
  width: max-content;
  max-width: 100%;
  margin: 0;
  position: relative;
}

.ll-panel-title-date-display {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  border: 0;
  border-radius: 0.8rem;
  background: transparent;
  padding: 0.2rem 0.85rem;
  cursor: pointer;
}

.ll-panel-title-date-text {
  color: var(--ll-text);
  font: inherit;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}

.ll-panel-title-date-trigger {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0.55rem;
  background: transparent;
  color: var(--ll-text-muted);
  cursor: pointer;
}

.ll-panel-title-date-trigger svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ll-field--title-date:hover .ll-panel-title-date-display,
.ll-field--title-date:focus-within .ll-panel-title-date-display {
  background: rgba(238, 242, 247, 0.8);
}

.ll-field--title-date:focus-within .ll-panel-title-date-display {
  outline: 2px solid var(--ll-accent);
  outline-offset: 2px;
}

.ll-panel-title-date-input-native {
  position: absolute;
  inset: auto 0 0 auto;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ll-open-practice-session-group {
  gap: 0.9rem;
}

.ll-open-practice-session-group .ll-task-list-group-label {
  padding-inline: 0.5rem;
}

.ll-panel-title--open-practice-history {
  display: flex;
  align-items: center;
  min-height: 3.85rem;
}

.ll-panel-title--previous-support {
  font-size: clamp(1.05rem, 1.45vw, 1.28rem);
  line-height: 1.12;
}

.ll-panel-nav-select {
  width: 100%;
  min-height: 2rem;
  border: 1px solid transparent;
  border-radius: 0.45rem;
  background: transparent;
  color: var(--ll-text);
  font: inherit;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  padding: 0.15rem 0.25rem;
  text-align: center;
}

.ll-panel-nav-title {
  text-align: center;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.ll-panel-title--lesson-current {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.45rem;
}

.ll-lesson-header-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
}

.ll-lesson-panel-actions {
  display: flex;
  justify-content: flex-end;
  float: right;
  margin-bottom: 0.9rem;
}

.ll-lesson-panel-delete {
  min-height: 1.9rem;
  padding: 0.22rem 0.62rem;
  font-size: 0.92rem;
}

.ll-lesson-panel lexxy-editor {
  --lexxy-toolbar-spacing: 0.2ch;
  --lexxy-toolbar-gap: 1px;
  --lexxy-toolbar-button-size: 1.75lh;
  --lexxy-editor-padding: 0.75ch;
}

.ll-lesson-panel--current .ll-panel-body {
  padding: 0 0.8rem 1.15rem;
}

.ll-lesson-panel--current .ll-form.ll-stack > * + * {
  margin-top: 0.95rem;
}

.ll-lesson-panel--current lexxy-editor {
  --lexxy-toolbar-spacing: 0.1ch;
  --lexxy-toolbar-gap: 0;
  --lexxy-toolbar-button-size: 1.58lh;
  --lexxy-editor-padding: 0.62ch;
}

.ll-lesson-panel--current .ll-input--rich-main {
  min-height: 22rem;
}

.ll-autosave-indicator {
  justify-self: end;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  border: 1px solid #94a3b8;
  background: #cbd5e1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ll-autosave-indicator::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: #64748b;
}

.ll-autosave-indicator[data-state="saved"] {
  border-color: #4fa173;
  background: #d8f1e0;
}

.ll-autosave-indicator[data-state="saved"]::after {
  background: #2f855a;
}

.ll-autosave-indicator[data-state="dirty"],
.ll-autosave-indicator[data-state="saving"] {
  border-color: #98a6bc;
  background: #ecf1f7;
}

.ll-autosave-indicator[data-state="dirty"]::after,
.ll-autosave-indicator[data-state="saving"]::after {
  background: #8b98ac;
}

.ll-autosave-indicator[data-state="error"] {
  border-color: #d79292;
  background: #fde5e5;
}

.ll-autosave-indicator[data-state="error"]::after {
  background: #c0392b;
}

.ll-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;
}

.ll-hidden {
  display: none !important;
}

.ll-list--compact {
  margin-top: 0.35rem;
  padding-left: 0 !important;
}

.ll-metrics-grid--compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ll-metrics-grid--rewards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ll-answer-option {
  width: 100%;
  border: 2px solid transparent;
  transition: border-color 120ms ease;
}

.ll-answer-option--reveal-correct {
  border-color: #5aa85f;
}

.ll-answer-option--correct {
  border-color: #2f855a;
}

.ll-answer-option--incorrect {
  border-color: #c0392b;
}

.ll-answer-option--locked,
.ll-answer-option:disabled {
  cursor: not-allowed;
  opacity: 0.85;
}

.ll-section-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 650;
}

.ll-group-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5f6878;
}

.ll-muted {
  color: var(--ll-muted);
}

.ll-list {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.45rem;
}

.ll-list--plain {
  list-style: none;
  padding-left: 0;
}

.ll-list-row {
  border: 1px solid var(--ll-border);
  border-radius: 0.95rem;
  padding: 0.9rem 1rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  background: #fbfcff;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.ll-history-session[open] {
  border-radius: 0.7rem;
  background: #fff;
}

.ll-history-metrics {
  text-align: right;
  display: grid;
  justify-items: end;
  gap: 0.3rem;
}

.ll-history-time {
  font-variant-numeric: tabular-nums;
}

.ll-history-session {
  width: 100%;
}

.ll-history-summary {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.85rem 1rem;
  align-items: flex-start;
  cursor: pointer;
  position: relative;
  padding-right: 1.65rem;
}

.ll-history-primary {
  display: grid;
  justify-items: start;
  gap: 0.35rem;
}

.ll-history-summary p {
  margin: 0;
}

.ll-history-summary::-webkit-details-marker {
  display: none;
}

.ll-history-summary::after {
  content: "▾";
  position: absolute;
  right: 0;
  top: 0.1rem;
  color: #5f6878;
  font-size: 1rem;
  line-height: 1;
  transition: transform 120ms ease;
}

.ll-history-session[open] .ll-history-summary::after {
  transform: rotate(180deg);
}

.ll-accuracy-pill {
  display: inline-block;
  border-radius: 0.6rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.2;
  color: #1f2b3d;
}

.ll-mode-pill {
  display: inline-block;
  border-radius: 0.6rem;
  border: 1px solid var(--ll-border);
  background: #eef2f7;
  color: #1f2b3d;
  padding: 0.2rem 0.55rem;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.2;
}

.ll-mode-pill--easy {
  background: #d8f1d8;
  border-color: #9ad39a;
  color: #1f4d1f;
}

.ll-mode-pill--hard {
  background: #f8d8d8;
  border-color: #e2aaaa;
  color: #7a1f1f;
}

.ll-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.ll-metric-card {
  border: 1px solid var(--ll-border);
  border-radius: 1rem;
  background: #fbfcff;
  padding: 0.85rem 0.95rem;
  min-height: 7.8rem;
}

.ll-metric-label {
  color: #5f6878;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ll-metric-value {
  margin-top: 0.2rem;
  color: #1f2b3d;
  font-size: clamp(1.3rem, 1.55vw, 2rem);
  font-weight: 700;
  line-height: 1;
}

.ll-metric-value--compact {
  font-size: clamp(1.25rem, 1.45vw, 1.85rem);
  white-space: nowrap;
}

.ll-panel--overview .ll-muted {
  font-size: 0.95rem;
}

.ll-legend-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.ll-legend-row--center {
  justify-content: center;
}

.ll-heatmap-note {
  text-align: center;
}

.ll-answer-input {
  text-align: center;
  font-size: 1.35rem;
  font-weight: 700;
}

.ll-legend {
  border-radius: 0.6rem;
  border: 1px solid var(--ll-border);
  padding: 0.35rem 0.55rem;
  font-size: 0.9rem;
  font-weight: 650;
}

.ll-heatmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.75rem;
}

.ll-times-heatmap-wrap {
  overflow-x: auto;
}

.ll-times-heatmap {
  width: max(100%, 46rem);
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  border: 1px solid var(--ll-border);
  border-radius: 0.8rem;
  overflow: hidden;
}

.ll-times-heatmap th,
.ll-times-heatmap td {
  border: 1px solid #d7deea;
  padding: 0.45rem 0.3rem;
  text-align: center;
  vertical-align: middle;
}

.ll-times-heatmap thead th,
.ll-times-heatmap tbody th {
  background: #4b2574;
  color: #fff;
  font-weight: 700;
}

.ll-times-heatmap tbody th {
  width: 2.8rem;
}

.ll-times-cell {
  min-width: 5.25rem;
}

.ll-times-cell-label {
  display: block;
  font-weight: 700;
  font-size: 0.92rem;
  color: #102433;
  white-space: nowrap;
}

.ll-times-cell-meta {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: #1f2937;
  white-space: nowrap;
}

.ll-times-cell--none,
.ll-times-speed-legend--none {
  background: #d9dde6;
  color: #111827;
}

.ll-times-cell--s0_1,
.ll-times-speed-legend--s0_1 {
  background: #5eaf4d;
}

.ll-times-cell--s1_2,
.ll-times-speed-legend--s1_2 {
  background: #78b84a;
}

.ll-times-cell--s2_3,
.ll-times-speed-legend--s2_3 {
  background: #96c148;
}

.ll-times-cell--s3_4,
.ll-times-speed-legend--s3_4 {
  background: #b1c744;
}

.ll-times-cell--s4_5,
.ll-times-speed-legend--s4_5 {
  background: #c9c83d;
}

.ll-times-cell--s5_6,
.ll-times-speed-legend--s5_6 {
  background: #dfb63a;
}

.ll-times-cell--s6_7,
.ll-times-speed-legend--s6_7 {
  background: #e8a537;
}

.ll-times-cell--s7_8,
.ll-times-speed-legend--s7_8 {
  background: #ea9335;
}

.ll-times-cell--s8_9,
.ll-times-speed-legend--s8_9 {
  background: #ea7f32;
}

.ll-times-cell--s9_10,
.ll-times-speed-legend--s9_10 {
  background: #e86d2f;
}

.ll-times-cell--s_over_10,
.ll-times-speed-legend--s_over_10 {
  background: #d73d2f;
  color: #fff;
}

.ll-heatmap-card {
  border: 1px solid var(--ll-border);
  border-radius: 0.75rem;
  background: #fff;
  padding: 0.95rem 0.8rem 0.8rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.2rem;
}

.ll-heatmap-card--button {
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.ll-heatmap-card-head {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
}

.ll-heatmap-card-head .ll-accuracy-pill,
.ll-heatmap-card-head .ll-heatmap-no-data {
  margin-left: auto;
  text-align: right;
  flex-shrink: 0;
}

.ll-heatmap-card-head-right {
  margin-left: auto;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0.25rem;
  flex-shrink: 0;
}

.ll-attempts-pill {
  background: #eef2f7;
  border-color: #cfd8e6;
  color: #445066;
}

.ll-confidence-track {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.32rem;
  background: #e6ebf2;
}

.ll-confidence-fill {
  height: 100%;
  background: linear-gradient(90deg, #9bbdf0 0%, #1f6fd1 100%);
}

.ll-heatmap-no-data {
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ll-heatmap-strip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.5rem;
  margin: 0;
  border-radius: 0.75rem 0.75rem 0 0;
  background: #b5bfcd;
}

.ll-band-none,
.ll-legend--none {
  background: #e6ebf2;
  border-color: #c7d1df;
  color: #445066;
}

.ll-band-lt30,
.ll-legend--lt30 {
  background: #f8d8d8;
  border-color: #e2aaaa;
  color: #7a1f1f;
}

.ll-band-lt50,
.ll-legend--lt50 {
  background: #fbe6d1;
  border-color: #e8c299;
  color: #7a4a1f;
}

.ll-band-lt70,
.ll-legend--lt70 {
  background: #f7efd2;
  border-color: #e0cf9a;
  color: #6e5a1f;
}

.ll-band-lt90,
.ll-legend--lt90 {
  background: #e5f3d8;
  border-color: #b8d69a;
  color: #2f5a1f;
}

.ll-band-gte90,
.ll-legend--gte90 {
  background: #d8f1d8;
  border-color: #9ad39a;
  color: #1f4d1f;
}

.ll-flash-stack {
  display: grid;
  gap: 0.55rem;
  margin-bottom: 1rem;
}

.ll-flash {
  border-radius: 0.7rem;
  border: 1px solid transparent;
  padding: 0.6rem 0.85rem;
  background: #e5e7eb;
}

.ll-flash--notice {
  background: #e7f7ee;
  border-color: #b9e5ca;
  color: #19543a;
}

.ll-flash--alert {
  background: #fdeeee;
  border-color: #efc8c7;
  color: #8a2622;
}

.ll-auto-save--saving {
  outline: 2px solid #9db7df;
  outline-offset: 3px;
}

.ll-auto-save--saved {
  animation: ll-auto-save-saved 0.85s ease-out;
}

.ll-auto-save--removed {
  animation: ll-auto-save-removed 0.85s ease-out;
}

.ll-auto-save--error {
  animation: ll-auto-save-error 0.85s ease-out;
}

@keyframes ll-auto-save-saved {
  0% {
    box-shadow: 0 0 0 0 rgb(43 127 86 / 42%);
  }

  60% {
    box-shadow: 0 0 0 0.35rem rgb(43 127 86 / 18%);
  }

  100% {
    box-shadow: 0 0 0 0 rgb(43 127 86 / 0%);
  }
}

@keyframes ll-auto-save-removed {
  0% {
    box-shadow: 0 0 0 0 rgb(100 116 139 / 36%);
  }

  60% {
    box-shadow: 0 0 0 0.35rem rgb(100 116 139 / 16%);
  }

  100% {
    box-shadow: 0 0 0 0 rgb(100 116 139 / 0%);
  }
}

@keyframes ll-auto-save-error {
  0% {
    box-shadow: 0 0 0 0 rgb(173 56 49 / 38%);
  }

  60% {
    box-shadow: 0 0 0 0.35rem rgb(173 56 49 / 16%);
  }

  100% {
    box-shadow: 0 0 0 0 rgb(173 56 49 / 0%);
  }
}

body.ll-modal-open {
  overflow: hidden;
}

.ll-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgb(15 23 42 / 45%);
  display: grid;
  place-items: center;
  padding: 1rem;
  z-index: 50;
  animation: ll-backdrop-fade-in 160ms ease-out;
}

.ll-modal-backdrop[hidden] {
  display: none;
}

.ll-modal-card {
  width: min(100%, 72rem);
  background: #fff;
  border: 1px solid var(--ll-border);
  border-radius: 1.4rem;
  box-shadow: 0 22px 44px rgb(15 23 42 / 20%);
  padding: 1.1rem 1.35rem 1.25rem;
  display: grid;
  gap: 0.55rem;
  animation: ll-modal-pop-in 180ms ease-out;
}

.ll-modal-header {
  display: flex;
  justify-content: flex-end;
}

.ll-modal-tag {
  margin: 0;
  color: #7a828f;
  font-size: clamp(0.82rem, 1.4vw, 1.05rem);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@keyframes ll-backdrop-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes ll-modal-pop-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.ll-modal-title {
  margin: 0;
  text-align: center;
  font-size: clamp(2.4rem, 7vw, 4.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.ll-modal-definition {
  margin: 0;
  text-align: center;
  font-size: clamp(2rem, 5.8vw, 3.1rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ll-text);
}

.ll-modal-meta {
  display: grid;
  gap: 0.25rem;
  justify-items: center;
}

.ll-modal-abbreviation {
  font-size: 1.05rem;
}

.ll-summary-card {
  border: 1px solid var(--ll-border);
  border-left-width: 8px;
  border-radius: 0.9rem;
  background: #fbfcff;
  padding: 1rem 1rem 0.95rem;
}

.ll-summary-card--correct {
  border-left-color: #3c9a4a;
}

.ll-summary-card--incorrect {
  border-left-color: #d85a45;
}

.ll-summary-title {
  margin: 0 0 0.4rem;
  color: #0d66b5;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1.12;
}

.ll-summary-answer-line {
  margin: 0.45rem 0;
  font-size: clamp(1.05rem, 2.35vw, 1.3rem);
  line-height: 1.28;
}

.ll-summary-answer-line strong {
  font-weight: 700;
}

.ll-question-title {
  letter-spacing: 0.08em;
  text-align: center;
}

.ll-question-progress {
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ll-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.ll-summary-group {
  margin: 0;
  color: #7a828f;
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ll-history-detail-list {
  margin-top: 0.95rem;
  padding-top: 0.95rem;
  border-top: 1px solid var(--ll-border);
}

.ll-history-detail-list .ll-summary-title {
  font-size: clamp(1.08rem, 1.65vw, 1.25rem);
  margin-bottom: 0.22rem;
}

.ll-history-detail-list .ll-summary-answer-line {
  font-size: clamp(0.9rem, 1.35vw, 1rem);
  margin: 0.22rem 0;
}

.ll-history-detail-list .ll-summary-card {
  padding: 0.72rem 0.8rem 0.7rem;
}

.ll-history-detail-list .ll-summary-answer-line strong {
  font-size: inherit;
  font-weight: 650;
}

.ll-history-detail-list .ll-summary-card .ll-muted {
  font-size: 0.95rem;
}

.ll-panel--history-day {
  background: #f9fbff;
}

.ll-panel-title--history-day {
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  letter-spacing: -0.01em;
  color: #5f6878;
}

@media (width <= 1100px) {
  .ll-track-set-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ll-rewards-overview {
    grid-template-columns: 1fr;
  }
}

@media (width <= 640px) {
  .ll-page {
    padding-inline: 0.8rem;
  }

  .ll-panel {
    padding: 1rem;
  }

  .ll-panel--section,
  .ll-lesson-panel.ll-panel--section,
  .ll-panel--history-day.ll-panel--section {
    padding: 0;
  }

  .ll-button {
    width: 100%;
  }

  .ll-panel-title {
    padding-inline: 1rem;
    font-size: clamp(2rem, 12vw, 3.2rem);
  }

  .ll-panel-title--section {
    font-size: clamp(1.15rem, 6.2vw, 1.45rem);
  }

  .ll-panel-title--history-day {
    font-size: clamp(1.15rem, 6.4vw, 1.45rem);
    line-height: 1.12;
  }

  .ll-panel-body {
    padding: 1rem 1.05rem 1.1rem;
  }

  .ll-metrics-grid {
    padding: 1rem;
    grid-template-columns: 1fr;
  }

  .ll-metric-value {
    font-size: clamp(1.2rem, 6.1vw, 1.55rem);
  }

  .ll-metric-card {
    min-height: 8.2rem;
    padding: 0.9rem 0.95rem;
  }

  .ll-rewards-overview {
    padding: 0.9rem;
  }

  .ll-rewards-overview__stats {
    grid-template-columns: 1fr;
  }

  .ll-rewards-overview__meta,
  .ll-streak-journey__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .ll-streak-scale {
    padding-bottom: 4.7rem;
  }

  .ll-streak-scale__milestones {
    top: 0.4rem;
  }

  .ll-streak-scale__tick {
    height: 0.65rem;
  }

  .ll-streak-scale__pill {
    font-size: 0.72rem;
    gap: 0.25rem;
    padding-inline: 0.42rem;
  }

  .ll-streak-scale__pill strong {
    font-size: 0.71rem;
  }

  .ll-streak-ladder--journey {
    justify-content: flex-start;
  }

  .ll-metric-value--compact {
    font-size: clamp(1.15rem, 5.7vw, 1.45rem);
  }

  .ll-actions .ll-inline-form {
    width: 100%;
  }

  .ll-copy-row {
    flex-direction: column;
    align-items: stretch;
  }

  .ll-button--mobile-full {
    width: 100%;
  }

  .ll-modal-card {
    width: min(100%, 40rem);
    padding-inline: 1rem;
  }

  .ll-modal-tag {
    font-size: 1.2rem;
  }

  .ll-legend-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .ll-legend-row--center {
    justify-items: center;
  }

  .ll-legend {
    width: 100%;
    text-align: center;
    font-size: 0.84rem;
    padding: 0.34rem 0.45rem;
    border-radius: 0.7rem;
  }

  .ll-track-set-options {
    grid-template-columns: 1fr;
  }
}

@media (width >= 980px) {
  .ll-lesson-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (width <= 860px) {
  .ll-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ll-metric-card {
    min-height: 7rem;
  }

  .ll-metric-value {
    font-size: clamp(1.15rem, 4.2vw, 1.45rem);
  }

  .ll-metric-value--compact {
    font-size: clamp(1.1rem, 3.9vw, 1.35rem);
    white-space: normal;
    line-height: 1.05;
  }

  .ll-button--mobile-full {
    width: 100%;
  }
}