.academy {
  --ink: #003a70;
  --muted: #61778c;
  --line: #dce5ef;
  color: var(--ink);
  font:
    15px/1.6 Inter,
    system-ui,
    sans-serif;
  background: #f6f8fb;
  min-height: 100vh;
}
.academy * {
  box-sizing: border-box;
}
.academy-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  padding: 20px 5%;
  border-bottom: 1px solid var(--line);
}
.academy a {
  text-decoration: none;
  color: inherit;
}
.academy a:hover {
  text-decoration: underline;
}
.academy-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 25px;
  font-weight: 700;
}
.academy-brand small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}
.academy-main {
  max-width: 1200px;
  margin: auto;
  padding: 36px 28px 60px;
}
.academy h1 {
  font-size: clamp(27px, 4vw, 42px);
  line-height: 1.2;
  margin: 20px 0;
}
.academy h2 {
  font-size: 23px;
  line-height: 1.35;
  margin: 24px 0 14px;
}
.academy h3 {
  font-size: 18px;
  margin: 12px 0;
}
.academy p {
  margin: 12px 0;
}
.academy .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #003a70;
  color: white;
  border: 1px solid #003a70;
  border-radius: 10px;
  padding: 11px 18px;
  min-height: 44px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.academy .secondary {
  background: white;
  color: #003a70;
  border-color: #cedae7;
}
.academy .danger {
  background: white;
  color: #a53030;
  border-color: #e1b8b8;
}
.academy button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.academy .full {
  width: 100%;
  margin: 10px 0 0;
}
.academy-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.eyebrow {
  font-size: 12px;
  letter-spacing: 2px;
  color: #857028;
  font-weight: 700;
}
.academy .muted,
.byline,
.backlink {
  color: var(--muted);
}
.academy label {
  display: block;
  font-weight: 500;
}
.academy input:not([type="checkbox"]),
.academy textarea,
.academy select {
  font: inherit;
  padding: 11px 12px;
  background: white;
  color: var(--ink);
  border: 1px solid #bdcddd;
  border-radius: 8px;
  width: 100%;
}
.academy textarea {
  resize: vertical;
}
.academy input[type="checkbox"] {
  margin-right: 8px;
}
.academy :focus-visible {
  outline: 3px solid #d3b647;
  outline-offset: 3px;
}
.filters {
  display: flex;
  gap: 16px;
  align-items: end;
  margin: 26px 0;
  padding: 20px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.filters label {
  flex: 1;
}
.filters select {
  margin-top: 6px;
}
.course-tabs {
  display: flex;
  gap: 8px;
  margin: 8px 0 28px;
  border-bottom: 1px solid var(--line);
}
.academy .course-tabs a {
  padding: 11px 16px;
  margin-bottom: -1px;
  color: var(--muted);
  font-weight: 600;
  border-bottom: 3px solid transparent;
  text-decoration: none;
}
.academy .course-tabs a:hover {
  color: var(--ink);
}
.academy .course-tabs a.active {
  color: var(--ink);
  border-bottom-color: #ba9a27;
}
.course-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.course-card,
.panel {
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.panel {
  padding: 24px;
  align-self: start;
}
.course-art {
  height: 150px;
  background: linear-gradient(135deg, #003a70, #165e8b);
  color: #f2d679;
  font-size: 90px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.course-art span {
  font-size: 12px;
  color: white;
  background: #ffffff20;
  padding: 6px 10px;
  border-radius: 20px;
}
.course-card-body {
  padding: 22px;
}
.course-card h2 {
  font-size: 23px;
}
.course-card-body p {
  color: var(--muted);
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tags span,
.tag {
  font-size: 12px;
  padding: 4px 9px;
  background: #edf3f9;
  border-radius: 20px;
}
.card-footer,
.lesson-row {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
}
.card-footer {
  margin-top: 24px;
  font-size: 13px;
}
.learning-courses label {
  margin-top: 20px;
}
.learning-courses .learning-meta {
  min-height: 48px;
  font-size: 13px;
}
.empty.compact {
  padding: 36px 20px;
}
.empty {
  text-align: center;
  padding: 70px 20px;
  grid-column: 1/-1;
}
.empty > span {
  font-size: 64px;
}
.pagination {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin: 30px;
}
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 32px;
  margin: 24px 0;
}
.description {
  white-space: normal;
}
.academy progress {
  width: 100%;
  height: 12px;
  accent-color: #ba9a27;
  margin: 14px 0;
}
.syllabus {
  margin-top: 30px;
}
.lesson-row {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.lesson-row:last-child {
  border: 0;
}
.lesson-row > div,
.lesson-row > strong {
  flex: 1;
}
.lesson-row small {
  display: block;
  color: var(--muted);
}
.lesson-number {
  background: #eef4fa;
  border-radius: 10px;
  padding: 8px 14px;
}
.notice {
  background: #fff6d9;
  border: 1px solid #ead488;
  padding: 15px;
  border-radius: 10px;
}
.academy-form p {
  margin: 0 0 20px;
}
.academy-form label {
  margin-bottom: 6px;
}
.academy-form .errorlist {
  color: #ad2525;
}
.narrow {
  max-width: 650px;
}
.editor-top {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 16px;
}
.editor-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0;
}
.editor-block {
  margin: 18px 0;
  padding: 22px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.block-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.block-tools {
  display: flex;
  gap: 6px;
}
.academy .small-button {
  min-width: 40px;
  min-height: 40px;
  border: 1px solid var(--line);
  background: #f5f8fc;
  color: var(--ink);
  border-radius: 7px;
  cursor: pointer;
  font: inherit;
  padding: 5px 9px;
}
.rich-editor {
  min-height: 140px;
  border: 1px solid #bdcddd;
  padding: 14px;
  border-radius: 8px;
  margin-top: 8px;
  color: #17344f;
}
.rich-editor ul {
  list-style: disc;
  padding-left: 24px;
}
.rich-editor ol {
  list-style: decimal;
  padding-left: 24px;
}
.rich-editor p {
  margin: 10px 0;
}
.add-element {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 24px;
}
.add-element select {
  flex: 1;
  width: auto;
}
.delete-lesson {
  margin-top: 40px;
}
.upload-status {
  color: var(--muted);
  font-size: 13px;
}
.academy img,
.academy video {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}
.academy audio {
  width: 100%;
  margin: 12px 0;
}
.academy iframe.video-embed {
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
  border-radius: 12px;
}
.learning-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 32px;
  margin-top: 20px;
}
.learning-grid article {
  min-width: 0;
}
.learning-grid aside {
  position: sticky;
  top: 20px;
  align-self: start;
}
.learning-grid summary {
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
}
.syllabus-link {
  display: block;
  padding: 10px;
  border-radius: 8px;
}
.syllabus-link.current {
  background: #eaf2fc;
  font-weight: 600;
  box-shadow: inset 3px 0 #d2ae27;
}
.theory-content {
  margin: 22px 0;
}
.theory-content ul {
  list-style: disc;
  padding-left: 24px;
}
.theory-content ol {
  list-style: decimal;
  padding-left: 24px;
}
.theory-content h2 {
  margin-top: 24px;
}
.theory-content a {
  text-decoration: underline;
}
.theory-content blockquote {
  border-left: 3px solid #d2ae27;
  padding-left: 15px;
}
.exercise-message {
  min-height: 28px;
  font-weight: 500;
  margin: 10px 0;
}
.board-layout {
  display: grid;
  grid-template-columns: minmax(250px, 420px) minmax(180px, 1fr);
  gap: 18px;
}
.board-frame {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  grid-template-rows: auto 22px;
  width: 100%;
  max-width: 420px;
}
.board-ranks, .board-files {
  display: grid;
  color: #61778c;
  font: 12px/1 system-ui, sans-serif;
  user-select: none;
}
.board-ranks {
  grid-column: 1;
  grid-row: 1;
  grid-template-rows: repeat(8, minmax(0, 1fr));
}
.board-files {
  grid-column: 2;
  grid-row: 2;
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.board-ranks span, .board-files span {
  display: flex;
  align-items: center;
  justify-content: center;
}
.board-shell {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  touch-action: manipulation;
  user-select: none;
}
.chess-board {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  width: 100%;
  height: 100%;
  border: 2px solid #254c6d;
  border-radius: 4px;
  overflow: hidden;
}
.chess-square {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-family: "Segoe UI Symbol", "DejaVu Sans", serif;
  font-size: clamp(25px, 4vw, 43px);
  line-height: 1;
  cursor: pointer;
}
.chess-square.light {
  background: #edf1e7;
}
.chess-square.dark {
  background: #668b91;
}
.chess-square.selected {
  box-shadow: inset 0 0 0 4px #e1bb35;
}
.chess-square.marked {
  background: #d6c75b;
}
.chess-square.white-piece {
  color: #fff;
  text-shadow:
    0 1px 1px #142b40,
    1px 0 #142b40,
    -1px 0 #142b40,
    0 -1px #142b40;
}
.chess-square.black-piece {
  color: #102b40;
  text-shadow: 0 1px 0 #ffffff66;
}
.board-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.board-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}
.board-tools label {
  font-size: 13px;
  margin: 10px 0;
}
.piece-palette {
  container: piece-palette / inline-size;
  display: grid;
  gap: 10px;
  margin: 10px 0 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f7f9fc;
}
.piece-palette-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
}
.piece-palette-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.piece-palette-choices {
  display: grid;
  grid-template-columns: repeat(6, minmax(40px, 1fr));
  gap: 5px;
}
.academy .piece-palette-button,
.academy .setup-tool-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 44px;
  padding: 0;
  border: 1px solid #cfdbe7;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.academy .piece-palette-button {
  font: 30px/1 "Segoe UI Symbol", "DejaVu Sans", serif;
}
.academy .piece-palette-button:hover,
.academy .setup-tool-button:hover {
  border-color: #91a9bf;
  background: #eef4fa;
  transform: translateY(-1px);
}
.setup-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.academy .setup-tool-button {
  gap: 7px;
  width: auto;
  padding: 0 12px;
  font: 600 13px/1 system-ui, sans-serif;
}
.academy .setup-tool-button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.academy .setup-tool-delete {
  width: 44px;
  padding: 0;
  color: #9f3434;
}
.board-comment {
  min-height: 64px;
  padding: 12px;
  background: #f0f5fa;
  border-radius: 8px;
  white-space: pre-wrap;
}
.move-list {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  max-height: 180px;
  overflow: auto;
  margin: 12px 0;
}
.move-list button.current {
  background: #dce9f7;
}
.academy dialog {
  max-width: 350px;
  border: 0;
  border-radius: 12px;
  padding: 24px;
  color: #003a70;
}
.academy dialog::backdrop {
  background: #001b3d66;
}
.academy .board-tools details {
  margin: 12px 0;
}
.academy .board-tools summary {
  cursor: pointer;
  font-weight: 500;
}
.save-error {
  color: #a82727;
}
.locked-editor input,
.locked-editor textarea {
  pointer-events: none;
}
.academy .field-gap {
  margin: 14px 0;
}
.academy .media-caption {
  font-size: 13px;
  color: var(--muted);
}
@media (max-width: 1000px) {
  .course-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .board-layout {
    grid-template-columns: 1fr;
  }
  .learning-grid {
    grid-template-columns: minmax(0, 1fr) 220px;
  }
}
@media (max-width: 768px) {
  .academy-main {
    padding: 24px 16px 36px;
  }
  .academy-header {
    padding: 15px 18px;
  }
  .course-grid,
  .detail-grid,
  .learning-grid {
    grid-template-columns: 1fr;
  }
  .learning-grid aside {
    position: static;
    grid-row: 1;
  }
  .learning-grid details:not([open]) {
    padding: 16px;
  }
  .academy-heading {
    align-items: start;
    flex-direction: column;
    gap: 10px;
  }
  .filters {
    flex-wrap: wrap;
    padding: 14px;
    gap: 10px;
  }
  .filters label {
    min-width: 110px;
  }
  .filters .button {
    width: 100%;
  }
  .panel,
  .editor-block {
    padding: 18px;
  }
  .add-element {
    flex-wrap: wrap;
  }
  .add-element label {
    width: 100%;
  }
  .editor-actions {
    position: static;
  }
  .chess-square {
    font-size: clamp(28px, 8vw, 46px);
  }
  .board-layout {
    grid-template-columns: 1fr;
  }
  .board-shell {
    max-width: 420px;
  }
  .lesson-row {
    flex-wrap: wrap;
    gap: 10px;
  }
  .lesson-row a {
    font-size: 13px;
  }
  .academy h1 {
    overflow-wrap: anywhere;
  }
  .academy .button {
    padding: 10px 13px;
  }
  .course-art {
    height: 140px;
  }
  .editor-top {
    grid-template-columns: 1fr 85px;
  }
}

.academy .course-cover {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 0;
}
.academy .piece-palette button[aria-pressed="true"],
.academy .setup-tools button[aria-pressed="true"] {
  border-color: #b39625;
  background: #fff7cf;
  box-shadow: 0 0 0 2px #ead788;
}
.academy .setup-tool-delete[aria-pressed="true"] {
  border-color: #bd5c5c;
  background: #fff0f0;
  box-shadow: 0 0 0 2px #efc7c7;
}

.piece-palette .palette-white {
  color: white;
  text-shadow:
    1px 0 #17344f,
    -1px 0 #17344f,
    0 1px #17344f,
    0 -1px #17344f;
}
.piece-palette .palette-black {
  color: #17344f;
}
.academy progress {
  appearance: none;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #e8eef5;
}
.academy progress::-webkit-progress-bar {
  background: #e8eef5;
}
.academy progress::-webkit-progress-value {
  background: #bca138;
}
.academy progress::-moz-progress-bar {
  background: #bca138;
}

.chess-square.legal-move::after {
  content: "";
  position: absolute;
  width: 26%;
  height: 26%;
  border-radius: 50%;
  background: rgba(16, 43, 64, .38);
  pointer-events: none;
}
.chess-square.legal-capture::after {
  content: "";
  position: absolute;
  inset: 4%;
  border: 4px solid rgba(16, 43, 64, .45);
  border-radius: 50%;
  pointer-events: none;
}
#lesson-exercises .board-layout { grid-template-columns: minmax(0, 1fr); }
#lesson-exercises .board-frame { max-width: 520px; }
#lesson-exercises .board-tools:empty { display: none; }

.chess-square.last-move:not(.selected) { box-shadow: inset 0 0 0 4px #d4b63c99; }
.exercise-notation { margin: 12px 0; padding: 10px 14px; border-radius: 8px; background: #edf3f8; font-variant-numeric: tabular-nums; line-height: 1.8; }
.exercise-notation:empty { display: none; }

.icon-button { min-width: 38px; min-height: 38px; padding: 5px 10px; font: 600 20px/1.1 system-ui, sans-serif; }
.icon-button:focus-visible { outline: 3px solid #cead32; outline-offset: 2px; }
.board-navigation { justify-content: center; gap: 5px; margin-top: 8px; }
.text-format-toolbar { display:flex; flex-wrap:wrap; gap: 3px; padding: 5px; border:1px solid #dbe4ee; border-radius:8px 8px 0 0; background:#f4f7fa; }
.text-format-toolbar .icon-button { border:0; background:transparent; }
.text-format-toolbar .icon-button:hover { background:#e0e9f2; }
.position-settings { padding: 10px 0; border-bottom:1px solid #dbe4ee; margin-bottom:12px; }
.position-settings summary { cursor:pointer; font-weight:600; }
.position-settings[open] summary { margin-bottom:12px; }
.editor-top small { display:block; color:#61778c; font-weight:400; margin-top:4px; }
.pgn-editor textarea { min-height:150px; font-family:monospace; }

.block-menu { position:relative; }
.block-menu summary { list-style:none; cursor:pointer; min-width:44px; min-height:44px; text-align:center; font-size:26px; border-radius:8px; }
.block-menu summary::-webkit-details-marker {display:none;}
.block-menu-items { position:absolute; right:0; top:44px; z-index:5; min-width:210px; display:grid; gap:6px; padding:10px; background:white; border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 24px #12345618; }
.block-menu-items button {text-align:left;}
.variation-row { display:flex; align-items:center; flex-wrap:wrap; gap:4px; width:100%; padding:8px 0; border-bottom:1px solid var(--line); }
.variation-row small {flex-basis:100%; color:var(--muted);}
.move-tree, .move-tree ol {list-style:none; margin:0; padding:0;}
.move-tree ol {margin:5px 0 5px 18px; padding-left:12px; border-left:2px solid #dbe4ee;}
.move-tree li {position:relative; display:flex; align-items:flex-start; flex-wrap:wrap; gap:4px; margin:4px 0;}
.move-tree li > ol {flex-basis:100%;}
.tree-move {border:0; border-radius:6px; background:#edf3f8; color:#153b59; padding:6px 9px; cursor:pointer; font:600 14px/1.2 system-ui,sans-serif;}
.tree-move:hover, .tree-move.current {background:#d2ae27; color:#102b40;}
.side-branch > .tree-move {background:#f4f0e1;}
.move-context-menu {position:absolute; left:0; top:100%; z-index:20; min-width:220px; padding:6px; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 10px 28px #12345635;}
.move-context-menu[hidden] {display:none;}
.move-context-menu button {display:block; width:100%; text-align:left; white-space:nowrap; border:0; background:transparent; padding:8px 10px; border-radius:5px;}
.move-context-menu button:hover, .move-context-menu button:focus {background:#e5edf4;}
.empty-tree {color:var(--muted); font-size:13px; padding:10px 0;}
.setup-validation {font-weight:600; padding:8px 10px; border-radius:7px; background:#edf7ef;}
.setup-validation.save-error {background:#fff0f0;}
.board-history {margin-top:0;}
.board-step-title {margin:8px 0 4px;}
.ply-role {align-self:center; padding:3px 7px; border-radius:999px; font-size:11px; font-weight:700;}
.learner-role {background:#e3f2e7; color:#185d2b;}
.course-role {background:#fff3d1; color:#6d4d00;}
.exercise-turn {display:inline-flex; margin:0 0 10px; padding:6px 11px; border-radius:999px; background:#edf3f8; font-weight:700; font-size:13px;}
.learner-turn {background:#e3f2e7; color:#185d2b;}
.course-turn {background:#fff3d1; color:#6d4d00;}
.solved-turn {background:#dbeaf7; color:#164c77;}
.board-tools {min-width:0;}
.board-tools .move-list {display:block; max-height:280px;}
.board-tools .field-gap {margin:10px 0;}
.board-tools > .muted {font-size:13px;}
.board-layout {grid-template-columns:minmax(250px, 520px) minmax(220px, 1fr); align-items:start;}
.board-frame {max-width:520px;}
.exercise-help {margin-top:16px; padding:12px 0; border-top:1px solid var(--line);}
.exercise-help summary {cursor:pointer;font-weight:600;}
.order-controls {display:flex;gap:4px;}
.order-controls button {min-width:44px;min-height:44px;}
#lesson-order .lesson-row[draggable] {cursor:grab;}
.editor-top {grid-template-columns:minmax(0,1fr);}
.editor-actions {z-index:8; background:#f6f8fbf2; padding:12px 0; border-bottom:1px solid var(--line);}
@media(max-width:1000px) {
  .board-layout {grid-template-columns:minmax(0,1fr);}
}
@media(max-width:600px) {
  .academy-main {padding:16px 10px 90px;}
  .course-tabs {overflow-x:auto;}
  .managed-courses .lesson-row {align-items:flex-start;flex-direction:column;}
  .editor-block {padding:12px;}
  .icon-button {min-width:44px;min-height:44px;}
  .board-shell {max-width:none;}
  .board-frame {max-width:none;grid-template-columns:18px minmax(0,1fr);}
  .board-navigation {flex-wrap:nowrap;}
  .board-tools .move-list {max-height:200px;}
  .board-tools .small-button {min-height:40px;}
  .editor-actions {position:sticky;top:0;display:flex;flex-wrap:wrap;gap:8px;}
  .editor-actions .button {flex:1; padding:10px; font-size:13px;}
  #save-status {flex-basis:100%;font-size:12px;}
  .chess-square {font-size:clamp(20px,7vw,42px);}
  .academy .pgn-editor textarea {width:100%;min-width:0;}
  .piece-palette {padding:10px;}
  .academy .piece-palette-button {width:100%;min-width:0;}
}

.block-title {display:flex;align-items:center;gap:8px;}
.drag-handle {cursor:grab;color:var(--muted);padding:8px;font-size:22px;}

.chess-square .move-glyph {
  position: absolute;
  top: 1px;
  right: 1px;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 32%;
  min-height: 16px;
  padding: 1px 3px;
  border-radius: 6px;
  background: #26734b;
  color: #fff;
  font: 700 clamp(11px, 1.2vw, 15px)/1 system-ui, sans-serif;
  text-shadow: none;
  box-shadow: 0 1px 3px #102b4066;
  pointer-events: none;
}

/* Authoring workspace: compact like a chess study, branded for KazChess. */
.academy-main {max-width:1400px;}
#lesson-editor .editor-block {padding:18px; border-color:#cfdae5; box-shadow:0 10px 30px rgba(16,43,64,.06);}
#lesson-editor #lesson-exercises .board-layout {grid-template-columns:minmax(360px,560px) minmax(360px,1fr);}
#lesson-editor #lesson-exercises .board-frame {max-width:560px;}
.board-tools {border:1px solid #cfdae5; border-radius:12px; background:#fff; overflow:visible; box-shadow:0 8px 24px rgba(16,43,64,.08);}
.board-workspace-tabs {display:grid; grid-template-columns:.8fr .9fr 1.5fr; border-bottom:1px solid #cfdae5; background:#f2f6f9; border-radius:11px 11px 0 0; overflow:hidden;}
.academy .board-workspace-tab {min-height:48px; border:0; border-right:1px solid #dce5ef; border-radius:0; background:transparent; color:#536c80; font-weight:700; padding:8px 10px;}
.academy .board-workspace-tab:last-child {border-right:0;}
.academy .board-workspace-tab[aria-selected="true"] {background:#fff; color:#003a70; box-shadow:inset 0 -3px #d2ae27;}
.board-workspace-panel {padding:16px; min-height:330px;}
.board-workspace-panel[hidden] {display:none;}
.position-settings {border:0; margin:0; padding:0;}
.position-settings > summary {display:none;}
.notation-workspace .board-step-title {margin:0 0 10px; font-size:15px; text-transform:uppercase; letter-spacing:.045em; color:#536c80;}
.notation-help {margin:12px 0 8px; padding-top:12px; border-top:1px solid #e3eaf0;}
.notation-legend {display:flex; flex-wrap:wrap; gap:12px; margin:-4px 0 10px; color:#60778a; font-size:12px; font-weight:700;}
.legend-item {display:inline-flex; align-items:center; gap:6px;}
.legend-dot {display:inline-block; width:10px; height:10px; border-radius:50%;}
.legend-dot.course-role {border-radius:2px;}
.board-tools .move-list {min-height:150px; max-height:390px; margin:0; padding:10px; overflow:auto; border:1px solid #e0e7ed; border-radius:8px; background:#fbfcfd;}
.notation-tree {font-variant-numeric:tabular-nums; line-height:1.7;}
.notation-sequence {display:flex; align-items:center; flex-wrap:wrap; gap:1px 2px;}
.move-token {display:inline-flex; align-items:center; gap:1px; position:relative;}
.move-number {min-width:22px; color:#728496; font-size:12px; font-weight:700; text-align:right;}
.academy .tree-move {min-width:0; min-height:30px; padding:3px 5px; border:0; background:transparent; border-radius:5px; font-weight:700;}
.academy .tree-move:hover {background:#e5edf4;}
.academy .tree-move.current {background:#d2ae27; color:#17364e;}
.notation-branches {flex-basis:100%; display:grid; gap:5px; margin:5px 0 7px 28px; padding:7px 9px; border-left:3px solid #d2ae27; border-radius:0 7px 7px 0; background:#f5f7f9;}
.notation-branches .notation-branches {border-left-color:#9aafbf; background:#edf2f5;}
.variation-sequence {color:#38566d;}
.root-branches {margin-left:0; margin-top:8px;}
.chess-drag-ghost {position:fixed; left:-200px; top:-200px; z-index:99999; display:block; width:56px; height:56px; color:#102b40; font:52px/56px "Segoe UI Symbol","DejaVu Sans",serif; text-align:center; background:transparent; border:0; box-shadow:none; pointer-events:none;}
.chess-drag-ghost.white-piece {color:#fff; text-shadow:0 1px 1px #142b40,1px 0 #142b40,-1px 0 #142b40,0 -1px #142b40;}
.ply-role {width:12px; height:12px; padding:0; overflow:hidden; text-indent:-999px;}
.learner-role {background:#3a9b5f;}
.course-role {background:#d2ae27; transform:rotate(45deg) scale(.72);}
.annotation-workspace textarea {min-height:130px;}
.position-workspace .piece-palette {display:grid; grid-template-columns:minmax(0,1fr);}
.position-workspace .piece-palette-group {min-width:0;}
.position-workspace .piece-palette-choices {grid-template-columns:repeat(6,minmax(36px,1fr));}
.position-workspace .piece-palette button {min-height:48px;}

@media(max-width:1050px) {
  #lesson-editor #lesson-exercises .board-layout {grid-template-columns:minmax(0,1fr);}
  #lesson-editor #lesson-exercises .board-frame {max-width:620px; margin:auto;}
}
@media(max-width:600px) {
  .board-workspace-tabs {grid-template-columns:1fr 1fr 1.35fr;}
  .academy .board-workspace-tab {font-size:12px; padding:6px 4px;}
  .board-workspace-panel {padding:11px; min-height:260px;}
  .board-tools .move-list {max-height:300px;}
  .notation-branches {margin-left:12px; padding-left:7px;}
}
.chess-square .move-glyph.mistake { background: #b53040; }
.chess-square .move-glyph.interesting { background: #885b0b; }