:root {
  --bg: #262421;
  --panel: rgba(49, 46, 43, 0.94);
  --panel-border: rgba(96, 92, 87, 0.82);
  --text: #d7d7d6;
  --muted: #a8a6a2;
  --accent: #a44a3f;
  --accent-dark: #7b3028;
  --green: #2f6f4f;
  --shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
  --light-square: #f0d9b5;
  --dark-square: #b58863;
  --board-frame: #2f2c29;
  --board-frame-border: #4d4945;
}

* {
  box-sizing: border-box;
  scrollbar-width: none;
}

[hidden] {
  display: none !important;
}

*:hover {
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 0;
  height: 0;
}

*:hover::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-thumb {
  background: rgba(130, 126, 121, 0.6);
  border-radius: 999px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(92, 86, 80, 0.18), transparent 30%),
    linear-gradient(160deg, #1f1d1b 0%, #262421 42%, #181715 100%);
  font-size: 14px;
}

body.app-booting #authStartPage,
body.app-booting #mainApp {
  display: none !important;
}

.auth-start-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 16px;
}

.auth-card {
  width: min(100%, 420px);
  display: grid;
  gap: 10px;
  padding: 18px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 22px;
  box-shadow: var(--shadow);
}

.auth-title {
  margin: 0;
  text-align: center;
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  letter-spacing: 0.08em;
}

.auth-subtitle {
  margin: 0;
  color: var(--muted);
  text-align: center;
}

.auth-field {
  grid-template-columns: 1fr;
}

.auth-error {
  margin: 0;
  color: #e29a9a;
  font-size: 0.78rem;
}

.auth-lichess-row {
  display: grid;
  gap: 6px;
}

.auth-lichess-row .secondary-button {
  width: 100%;
}

.auth-lichess-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.25;
}

button,
input,
select,
textarea {
  font: inherit;
}

.app-shell {
  width: min(528px, calc(100% - 18px));
  margin: 0 auto;
  padding: 10px 0 14px;
}

.hero,
.dashboard {
  display: grid;
  gap: 14px;
}

.hero {
  grid-template-columns: 1fr;
  margin-bottom: 0;
}

.dashboard {
  grid-template-columns: minmax(340px, 1fr);
  align-items: start;
}

.left-column {
  display: grid;
  gap: 10px;
}

.panel,
.hero-copy,
.hero-actions,
.hero-menu,
.tree-picker-panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 24px;
  box-shadow: var(--shadow);
}

.hero-copy,
.hero-actions,
.hero-menu,
.panel {
  padding: 16px;
}

.hero-copy {
  padding: 10px 12px;
  align-self: start;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}

.logout-button {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 88px;
  padding: 6px 10px;
  font-size: 0.7rem;
  line-height: 1.1;
}

.eyebrow,
.panel-kicker,
.meta-label,
.prompt-label {
  margin: 0 0 5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.68rem;
  color: var(--muted);
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  line-height: 1;
  margin-bottom: 10px;
}

.hero-title-inline {
  width: 100%;
  font-size: clamp(0.92rem, 1.5vw, 1.18rem);
  line-height: 1.15;
  margin-bottom: 0;
  font-weight: 700;
  letter-spacing: 0.08em;
}

h2 {
  margin-bottom: 0;
}

.hero-text,
.sidebar-value,
#promptText {
  color: var(--muted);
  line-height: 1.4;
}

.header-task {
  margin: 6px 0 0;
  font-size: 0.86rem;
}


.hero-copy .hero-text {
  font-size: 0.8rem;
  line-height: 1.35;
  margin-bottom: 0;
}

.hero-menu {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: start;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: flex-start;
  min-width: 0;
}

.hero-button-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.hero-button-row button {
  width: 100%;
  min-height: 34px;
  padding: 6px 8px;
  font-size: 0.7rem;
  line-height: 1.2;
  white-space: nowrap;
}

#repertoireAnalysisButton {
  grid-column: auto;
  white-space: normal;
  min-height: 34px;
}

.library-open-button {
  width: 100%;
  padding: 8px 10px;
  font-size: 0.78rem;
  line-height: 1.2;
}

.config-grid {
  display: grid;
  gap: 8px;
}

.min-move-stepper-buttons,
#minOpponentMoveUpButton,
#minOpponentMoveDownButton {
  display: none !important;
}

.min-move-stepper #minOpponentMoveInput {
  width: 100%;
}

.launch-text {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.35;
  font-size: 0.78rem;
}

.primary-field select {
  font-size: 0.88rem;
  padding: 9px 10px;
  border-width: 2px;
  background: #3c3836;
}

.subdued-config {
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(58, 54, 50, 0.88);
  border: 1px solid rgba(96, 92, 87, 0.4);
}

.tree-preview-shell {
  display: flex;
  justify-content: center;
  align-items: start;
}

.tree-preview-frame {
  width: min(100%, calc(100dvh - 215px), 1080px);
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.tree-preview-frame.board-expanded {
  width: min(100%, calc(100dvh - 215px), 1080px);
}

.tree-picker {
  display: grid;
  gap: 6px;
  min-height: 0;
  height: 100%;
  align-content: start;
  overflow: hidden;
}

.tree-content-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.46fr);
  gap: 12px;
  align-items: start;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.tree-current-path,
.tree-next-section {
  display: grid;
  gap: 6px;
}

.tree-current-path {
  margin-top: 6px;
}

.tree-next-section {
  padding-right: 0;
}

.tree-current-path-text {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.28;
}

.tree-current-path-segment {
  white-space: nowrap;
}

.tree-board-column {
  display: grid;
  grid-template-rows: auto auto;
  gap: 2px;
  align-content: stretch;
  min-height: 0;
}

.tree-board-column .tree-preview-frame {
  justify-self: center;
  align-self: start;
}

.tree-right-column {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 10px;
  align-content: start;
  min-height: 0;
  min-width: 0;
}

.tree-picker-modal-card {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  min-height: 0;
  max-height: 100dvh;
  border-radius: 0;
  padding: 10px;
  gap: 10px;
  overflow: hidden;
  grid-template-rows: auto auto minmax(0, 1fr);
}

#treePickerPanel {
  width: 100vw;
  max-width: 100vw;
  height: calc(100dvh - 20px);
  min-height: 0;
  max-height: calc(100dvh - 20px);
  margin: 0;
  border-radius: 0;
  overflow: hidden;
}

.tree-picker-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: none;
  overflow: hidden;
  padding-right: 0;
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
  align-content: start;
}

.tree-node-row {
  display: flex;
  align-items: center;
  gap: 4px;
  width: auto;
  min-width: 0;
  max-width: 100%;
}

.tree-node-button {
  flex: 0 0 auto;
  width: auto;
  text-align: left;
  background: var(--green);
  color: #fff;
  border: none;
  padding: 5px 6px;
  font-size: 0.68rem;
  transform: none;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-overflow: clip;
  line-height: 1.15;
  max-width: 100%;
}

.tree-node-button:hover {
  transform: none;
  background: var(--green);
}

.tree-node-button.active {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.22);
  background: var(--green);
}

.tree-action-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.tree-action-row .tree-action-button {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 7px 6px;
  font-size: 0.72rem;
  line-height: 1.18;
  white-space: nowrap;
}

.tree-picker-lichess-box {
  min-width: 0;
  min-height: 236px;
  max-height: 236px;
  height: 236px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.tree-picker-lichess-box .line-editor-explorer-table-wrap {
  min-height: 176px;
  max-height: 176px;
  height: 176px;
  overflow: hidden;
}

.tree-node-badge,
.tree-node-count {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 0.64rem;
  color: var(--muted);
  background: rgba(96, 92, 87, 0.2);
}

.config-field {
  display: grid;
  grid-template-columns: minmax(118px, auto) minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 0.8rem;
}

.config-field span {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.6rem;
  line-height: 1.2;
}

.config-field select,
.config-field input {
  width: 100%;
}

.primary-field {
  grid-template-columns: minmax(150px, auto) minmax(0, 1fr);
}

.hero-menu .config-grid .config-field {
  grid-template-columns: minmax(150px, 1fr) auto;
}

.hero-menu .config-grid .config-field select,
.hero-menu .config-grid .config-field input[type="number"] {
  width: 240px;
  justify-self: end;
  text-align: right;
}

.hero-menu .config-grid .config-field select {
  text-align-last: right;
}

.upload-card,
button,
select {
  border-radius: 16px;
  border: none;
  padding: 8px 10px;
}

input[type="number"] {
  border-radius: 16px;
  border: 1px solid rgba(96, 92, 87, 0.42);
  padding: 8px 10px;
  background: #3c3836;
  color: var(--text);
  font: inherit;
}

.upload-card {
  background: var(--green);
  color: #fff;
  cursor: pointer;
  font-weight: 400;
  font-size: 0.78rem;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.upload-card input {
  display: none;
}

button {
  background: var(--green);
  color: white;
  cursor: pointer;
  transition: transform 150ms ease, opacity 150ms ease;
  font-size: 0.78rem;
  line-height: 1.2;
}

select {
  background: #3c3836;
  color: var(--text);
  border: 1px solid rgba(96, 92, 87, 0.42);
}

button:hover {
  transform: translateY(-1px);
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.secondary-button {
  background: var(--green);
  color: #fff;
}

.panel-header,
.board-layout,
.controls,
.stats-list li {
  display: flex;
  gap: 10px;
}

.panel-header {
  justify-content: space-between;
  align-items: start;
}

.panel-header-button {
  flex: 0 0 auto;
  white-space: nowrap;
  align-self: start;
}

.panel-header-actions {
  display: flex;
  gap: 8px;
  align-items: start;
}

#toggleBoardSizeButton {
  display: none !important;
}

.session-stats-compact {
  display: flex;
  gap: 6px;
  align-items: center;
}

.session-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.session-stat-icon {
  font-size: 0.8rem;
  line-height: 1;
}

.session-stat-good {
  color: #8fd39a;
  background: rgba(57, 124, 79, 0.22);
}

.session-stat-bad {
  color: #e29a9a;
  background: rgba(150, 61, 61, 0.22);
}

.status-pill {
  padding: 8px 10px;
  background: rgba(47, 111, 79, 0.12);
  color: var(--green);
  border-radius: 999px;
  font-size: 0.82rem;
  white-space: nowrap;
}

.board-layout {
  display: flex;
  align-items: start;
  margin: 14px 0;
  gap: 12px;
}

.board-main {
  display: grid;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  align-content: start;
}

.board-side {
  display: grid;
  gap: 10px;
  min-width: 260px;
  width: 280px;
  align-content: start;
}

.board-main .board-frame {
  justify-self: start;
}

.board-frame {
  width: min(100%, 448px);
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.board-frame.board-expanded {
  width: min(100%, 582px);
}

.board-frame-middle {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}

.board-files {
  display: none;
  grid-template-columns: repeat(8, 1fr);
  padding: 0 20px;
}

.board-ranks {
  display: none;
  grid-template-rows: repeat(8, 1fr);
}

.board-coordinate {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

.chessboard {
  width: 100%;
  aspect-ratio: 1;
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  border-radius: 0;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(24, 33, 38, 0.2);
}

.square {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  width: 100%;
  height: 100%;
  position: relative;
  user-select: none;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  appearance: none;
}

.square-coordinate-label {
  position: absolute;
  z-index: 2;
  font-size: 0.52rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  pointer-events: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.14);
  user-select: none;
}

.square.light .square-coordinate-label {
  color: rgba(50, 48, 45, 0.62);
}

.square.dark .square-coordinate-label {
  color: rgba(245, 242, 236, 0.62);
}

.square-coordinate-file {
  left: 4px;
  bottom: 3px;
}

.square-coordinate-rank {
  right: 4px;
  top: 3px;
}

.square.light {
  background: var(--light-square);
}

.square.dark {
  background: var(--dark-square);
}

.square.selectable {
  cursor: pointer;
}

.chessboard .square:hover,
.chessboard .square:focus-visible {
  transform: none;
}

.square.selectable:active .piece-image {
  cursor: grabbing;
}

.piece-image {
  width: 88%;
  height: 88%;
  object-fit: contain;
  pointer-events: auto;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.08));
}

.square.incoming-hidden .piece-image {
  opacity: 0;
}

.board-auto-move-piece {
  position: absolute;
  width: 11%;
  height: 11%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 24;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.14));
  transition: left 380ms ease-out, top 380ms ease-out;
}

.square.drag-origin .piece-image {
  opacity: 0;
}

.square.selectable .piece-image {
  cursor: grab;
}

.square.selectable .piece-image:active {
  cursor: grabbing;
}

.square.selected::after,
.square.hint::after,
.square.success::after,
.square.neutral::after,
.square.error::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 14px;
  border: 3px solid transparent;
  pointer-events: none;
  z-index: 2;
}

.square.selected::after {
  border-color: rgba(15, 57, 123, 0.8);
}

.square.hint::after {
  border-color: rgba(47, 111, 79, 0.9);
}

.square.error::after {
  border-color: rgba(164, 74, 63, 0.95);
}

.square.success::after,
.square.neutral::after,
.square.error::after {
  inset: 12px;
  border-radius: 999px;
}

.square.success::after {
  border-width: 4px;
  border-color: rgba(47, 111, 79, 0.98);
  background: rgba(104, 211, 145, 0.24);
  box-shadow: 0 0 0 4px rgba(47, 111, 79, 0.14);
}

.square.neutral::after {
  border-width: 4px;
  border-color: rgba(59, 130, 246, 0.98);
  background: rgba(96, 165, 250, 0.24);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14);
}

.last-move-arrow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 3;
}

.last-move-arrow-line {
  stroke: rgba(245, 196, 67, 0.42);
  stroke-width: 2.7;
  stroke-linecap: round;
}

.last-move-arrow-compact .last-move-arrow-line {
  stroke-width: 2.3;
}

.board-meta {
  display: grid;
  gap: 12px;
  min-width: 180px;
}

.moves-box {
  min-width: 0;
}

.moves-box-header {
  display: grid;
  gap: 2px;
  margin-bottom: 8px;
}

.moves-box-title {
  margin-bottom: 0;
  font-size: 0.78rem;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--text);
}

.moves-box-subtitle {
  font-size: 0.72rem;
}

.spaced-progress {
  display: grid;
  gap: 2px;
  margin: 2px 0 6px;
}

.spaced-progress-box {
  padding-top: 10px;
  padding-bottom: 10px;
}

.spaced-progress-row {
  margin: 0;
  font-size: 0.68rem;
  color: var(--muted);
  line-height: 1.3;
}

.engine-box {
  min-width: 0;
}

.engine-box-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.engine-box-header .prompt-label {
  margin-bottom: 0;
}

.engine-box-header-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.engine-box-button {
  flex: 0 0 auto;
  white-space: nowrap;
  align-self: start;
}

.explorer-button-row {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
}

.explorer-button-row button {
  flex: 1 1 0;
  min-width: 0;
  white-space: normal;
  line-height: 1.15;
  padding: 6px 6px;
  font-size: 0.69rem;
}

.engine-stats {
  margin-top: 12px;
}

.meta-card,
.answer-box,
.sidebar-section {
  background: rgba(58, 54, 50, 0.9);
  border: 1px solid rgba(96, 92, 87, 0.36);
  border-radius: 18px;
  padding: 10px;
}

.meta-value {
  margin: 0;
  font-size: 1.08rem;
}

.controls {
  flex-wrap: nowrap;
  margin-bottom: 12px;
}

.controls button {
  flex: 1 1 0;
  min-width: 0;
  padding: 7px 6px;
  font-size: 0.74rem;
  white-space: nowrap;
}

.sidebar-panel {
  display: grid;
  gap: 10px;
}

.candidate-moves {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
}

.variant-progress {
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

.variant-column {
  display: grid;
  gap: 8px;
}

.variant-title {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.66rem;
  color: var(--muted);
}

.variant-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.candidate-chip {
  background: rgba(47, 111, 79, 0.1);
  color: var(--green);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.84rem;
}

.candidate-chip.solved {
  background: rgba(47, 111, 79, 0.18);
}

.candidate-chip.remaining {
  background: rgba(164, 74, 63, 0.12);
  color: var(--accent-dark);
}

.expected-move-slot {
  min-width: 42px;
  padding: 8px 6px;
  border-radius: 12px;
  border: 1px solid rgba(96, 92, 87, 0.34);
  background: rgba(63, 59, 55, 0.82);
  color: transparent;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.2;
  white-space: nowrap;
}

.expected-move-slot.hidden {
  color: transparent;
}

.expected-move-slot.solved {
  color: #7fe39f;
  border-color: rgba(47, 111, 79, 0.62);
  background: rgba(47, 111, 79, 0.18);
}

.expected-move-slot.revealed {
  color: #f08e83;
  border-color: rgba(164, 74, 63, 0.62);
  background: rgba(164, 74, 63, 0.16);
}

.move-history {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  color: var(--muted);
  max-height: none;
  overflow: auto;
  font-size: 0.78rem;
}

.move-history li {
  white-space: nowrap;
}

.explorer-table {
  width: 100%;
  margin-top: 8px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.74rem;
  color: var(--muted);
}

.explorer-table-wrap {
  min-height: 184px;
  max-height: 184px;
  overflow: auto;
}

.explorer-table th,
.explorer-table td {
  padding: 6px 6px;
  text-align: left;
  border-bottom: 1px solid rgba(96, 92, 87, 0.22);
  white-space: nowrap;
}

.explorer-table th {
  color: var(--text);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.explorer-table th:nth-child(1),
.explorer-table td:nth-child(1) {
  width: 20%;
}

.explorer-table th:nth-child(2),
.explorer-table td:nth-child(2) {
  width: 14%;
}

.explorer-table th:nth-child(n+3),
.explorer-table td:nth-child(n+3) {
  width: 16.5%;
}

.explorer-table td:first-child {
  color: var(--text);
  font-weight: 700;
}

.explorer-table td.explorer-eval-cell {
  font-variant-numeric: tabular-nums;
}

.explorer-table td.explorer-alert {
  color: #d65d5d;
  font-weight: 700;
}

.explorer-table td.explorer-covered {
  color: #7fcb97;
  font-weight: 700;
}

.explorer-table td.explorer-placeholder-cell {
  color: rgba(168, 166, 162, 0.5);
}

.explorer-clickable-row {
  cursor: pointer;
}

.explorer-clickable-row:hover td,
.explorer-clickable-row:focus-visible td {
  background: rgba(58, 130, 96, 0.16);
}

.explorer-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.explorer-request-info {
  margin-top: 2px;
  font-size: 0.68rem;
  line-height: 1.3;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(10, 10, 10, 0.55);
  z-index: 50;
  overflow: auto;
}

#treePickerModal,
#lineEditorModal,
#createRepertoireModal {
  padding: 0;
  place-items: stretch;
  align-items: stretch;
}

#treePickerModal {
  overflow: hidden;
}

.training-modal-overlay {
  padding: 0;
  place-items: stretch;
  align-items: stretch;
  overflow: auto;
}

.training-modal-card {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  border-radius: 0;
  margin: 0;
  overflow: auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 10px;
}

.training-modal-card .board-layout {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 32vw);
  gap: clamp(8px, 0.8vw, 12px);
  align-items: start;
  min-height: 0;
  padding-bottom: 8px;
  overflow: hidden;
}

.training-modal-card .board-main {
  display: grid;
  gap: 4px;
  align-content: start;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.training-modal-card .moves-box {
  width: auto;
  min-height: 146px;
  max-height: 172px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.training-modal-card .board-side {
  display: grid;
  gap: 6px;
  grid-template-rows: auto minmax(146px, 172px) auto auto auto;
  min-width: 0;
  width: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 6px;
}

.training-modal-card .board-side > .engine-box-lichess {
  order: 1;
}

.training-modal-card .board-side > .moves-box {
  order: 2;
}

.training-modal-card .board-side > .engine-box-stockfish {
  order: 3;
}

.training-modal-card .board-side > .spaced-progress-box {
  order: 4;
}

.training-modal-card .board-side > #expectedMovesPanel {
  order: 5;
}

.training-modal-card .board-side .engine-box-stockfish {
  min-height: 0;
  max-height: none;
  height: auto;
  padding: 4px 8px;
  display: grid;
  grid-template-rows: auto auto;
  gap: 3px;
  align-content: start;
}

.training-modal-card .board-side .engine-box-lichess {
  min-height: 0;
  max-height: none;
  height: auto;
  display: grid;
  grid-template-rows: auto auto auto auto;
  overflow: hidden;
  align-content: start;
}

.training-modal-card .board-side .spaced-progress-box {
  min-height: 0;
  max-height: none;
  height: auto;
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 4px 8px;
  overflow: hidden;
}

@media (max-width: 1500px) {
  .training-modal-card .board-layout {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 34vw);
  }
}

.training-modal-card .board-side .spaced-progress-box .spaced-progress-row {
  font-size: 0.74rem;
  line-height: 1.1;
  margin: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.training-modal-card .board-side .spaced-progress-box .spaced-progress-row strong {
  margin-left: auto;
  flex: 0 0 30%;
  text-align: right;
}

.training-modal-card .explorer-table-wrap {
  min-height: 0;
  max-height: none;
  height: auto;
  overflow: hidden;
}

.training-modal-card .explorer-table th:nth-child(1),
.training-modal-card .explorer-table td:nth-child(1) {
  width: 20%;
}

.training-modal-card .explorer-table th:nth-child(2),
.training-modal-card .explorer-table td:nth-child(2) {
  width: 13%;
}

.training-modal-card .explorer-table th:nth-child(n+3),
.training-modal-card .explorer-table td:nth-child(n+3) {
  width: 16.75%;
}

.training-modal-card .panel-header-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  justify-items: end;
}

.training-modal-card .panel-header .panel-header-actions {
  display: none !important;
}

.training-modal-card .panel-header-actions .panel-header-button {
  width: 150px;
}

.training-modal-card .controls {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  flex-wrap: nowrap;
  margin: 0;
}

.training-modal-card > .controls {
  display: none !important;
}

.training-modal-card .controls button {
  width: 100%;
  justify-self: stretch;
  min-height: 34px;
  min-width: 0;
  padding: 7px 6px;
  font-size: 0.72rem;
  line-height: 1.18;
  white-space: nowrap;
}

.training-modal-card .moves-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.training-modal-card .moves-box-title {
  margin-bottom: 0;
}

.training-modal-card .moves-box .session-stats-compact {
  margin-left: auto;
  flex: 0 0 auto;
}

.training-modal-card .move-history {
  max-height: 110px;
  overflow: auto;
  align-content: start;
}

.training-modal-card .board-side .engine-box-stockfish .engine-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-top: 0;
  width: 100%;
  justify-self: stretch;
  padding-left: 10px;
  align-items: center;
}

.training-modal-card .board-side .engine-box-stockfish .engine-stats li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  white-space: nowrap;
}

.training-modal-card .board-side .engine-box-stockfish .engine-stats li span,
.training-modal-card .board-side .engine-box-stockfish .engine-stats li strong {
  display: inline;
}

.training-modal-card .board-side .engine-box-stockfish .engine-stats li span::after {
  content: ":";
  margin-left: 1px;
}

.training-modal-card .board-side .engine-box-stockfish #engineStatus {
  display: none;
}

.training-modal-card .board-side .engine-box-lichess.line-editor-lichess-box {
  min-height: 0;
  max-height: none;
  height: auto;
  grid-template-rows: auto auto auto auto;
  align-content: start;
}

.training-modal-card .board-side .engine-box-lichess.line-editor-lichess-box .line-editor-explorer-table-wrap {
  min-height: 0;
  max-height: none;
  height: auto;
  overflow: hidden;
}

.training-modal-card .board-side .engine-box-lichess .explorer-table {
  margin-top: 2px;
}

.training-modal-card .board-side .engine-box-lichess .explorer-table th,
.training-modal-card .board-side .engine-box-lichess .explorer-table td {
  padding: 3px 6px;
  line-height: 1.1;
}

.training-modal-card .board-main .board-frame {
  width: min(100%, calc(100dvh - 250px), 960px);
  justify-self: center;
}

.training-modal-card .board-main .board-frame.board-expanded {
  width: min(100%, calc(100dvh - 250px), 960px);
}

.training-modal-card .board-side .spaced-progress-box {
  grid-template-columns: 1fr;
  column-gap: 0;
  row-gap: 3px;
}

.training-modal-card #expectedMovesPanel {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.training-modal-card #expectedMovesPanel .prompt-label {
  margin: 0;
  flex: 0 0 auto;
}

.training-modal-card #expectedMovesPanel .candidate-moves {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
}

.training-modal-card #expectedMovesPanel .variant-progress {
  margin-top: 0;
}

.training-modal-card #expectedMovesPanel .variant-progress:empty {
  display: none;
}

.training-modal-card .board-side #expectedMovesPanel {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 6px;
  padding: 6px 8px;
}

.training-modal-card .board-side #expectedMovesPanel .prompt-label {
  margin: 0;
}

.training-modal-card .board-side #expectedMovesPanel .candidate-moves {
  flex-wrap: wrap;
  gap: 6px;
  overflow: hidden;
}

.training-modal-card .board-side #expectedMovesPanel .variant-progress {
  margin-top: 0;
}

#treePickerModal {
  padding: 0;
  place-items: stretch;
  align-items: stretch;
  overflow: hidden;
}

#treePickerModal,
#treePickerPanel,
.tree-picker-modal-card,
.tree-picker,
.tree-content-row,
.tree-right-column,
.tree-picker-list,
.tree-picker-lichess-box .line-editor-explorer-table-wrap {
  overflow: hidden !important;
}

#treePickerModal *,
#treePickerModal *:hover {
  scrollbar-width: none !important;
}

#treePickerModal *::-webkit-scrollbar,
#treePickerModal *:hover::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

.tree-picker-lichess-box,
.tree-picker-lichess-box:hover {
  transform: none !important;
}

.tree-picker-lichess-box button:hover {
  transform: none !important;
}

.modal-card {
  width: min(100%, 560px);
  max-height: calc(100vh - 48px);
  background: rgba(58, 54, 50, 0.97);
  border: 1px solid rgba(96, 92, 87, 0.5);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.42);
  padding: 16px;
  display: grid;
  gap: 12px;
  overflow: auto;
}

.library-modal-card {
  width: min(560px, calc(100vw - 24px));
  max-width: min(560px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  height: auto;
  overflow: auto;
  padding: 12px;
  gap: 8px;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: start;
}

.library-modal-card .sidebar-value {
  margin-bottom: 0;
}

.library-modal-card .repertoire-list {
  gap: 6px;
}

.library-modal-card .repertoire-list li {
  padding: 6px 8px;
  gap: 8px;
  border-radius: 10px;
}

.library-modal-card .repertoire-details {
  gap: 1px;
}

.library-modal-card .library-delete-button {
  min-height: 30px;
  padding: 4px 8px;
  line-height: 1.05;
  white-space: nowrap;
}

.line-editor-modal-card {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  overflow: auto;
  border-radius: 0;
  padding: 10px;
  gap: 10px;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.create-repertoire-modal-card {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  overflow: auto;
  border-radius: 0;
  padding: 10px;
  gap: 10px;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  align-content: start;
}

.create-repertoire-setup-modal-card {
  width: min(760px, calc(100vw - 24px));
  max-width: min(760px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.create-repertoire-setup {
  display: grid;
  gap: 8px;
  align-content: start;
}

.create-repertoire-setup-grid {
  gap: 8px;
}

.create-repertoire-option-box {
  gap: 6px;
  padding: 8px;
  border-radius: 10px;
}

.create-repertoire-setup-actions {
  margin-top: 0;
}

.create-repertoire-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(400px, 0.42fr);
  gap: 12px;
  min-height: 0;
}

#criticalPositionModal .modal-card,
#lineTagModal .modal-card {
  width: min(520px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
}

#explorerSettingsModal .modal-card,
#spacedSettingsModal .modal-card {
  width: min(760px, calc(100vw - 24px));
  max-width: min(760px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

#spacedSettingsModal .modal-card {
  height: auto;
  grid-template-rows: auto;
  align-content: start;
  gap: 8px;
  padding: 12px;
}

#spacedSettingsModal .modal-grid {
  gap: 8px;
}

#spacedSettingsModal .modal-section {
  gap: 6px;
  padding: 8px;
  border-radius: 10px;
}

#spacedSettingsModal .modal-option {
  gap: 6px;
  font-size: 0.78rem;
  line-height: 1.2;
}

#spacedSettingsModal .modal-actions {
  margin-top: 0;
  row-gap: 4px;
}

#spacedSettingsModal .modal-actions button {
  min-height: 34px;
  padding: 6px 8px;
  font-size: 0.7rem;
  line-height: 1.15;
}

.repertoire-analysis-modal-card {
  width: min(760px, calc(100vw - 24px));
  max-width: min(760px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  grid-template-rows: auto;
  align-content: start;
  gap: 8px;
}

.repertoire-analysis-settings-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.repertoire-analysis-settings-grid input[type="number"] {
  width: 40%;
  min-width: 78px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.training-modal-card .modal-main-header,
.line-editor-modal-card .modal-main-header,
.create-repertoire-modal-card .modal-main-header,
.tree-picker-modal-card .modal-main-header,
#treePickerPanel .modal-main-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 8px;
  row-gap: 4px;
  margin: 0;
  padding: 0;
}

.training-modal-card .modal-main-title,
.line-editor-modal-card .modal-main-title,
.create-repertoire-modal-card .modal-main-title,
.tree-picker-modal-card .modal-main-title,
#treePickerPanel .modal-main-title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.15;
  color: var(--text);
}

.training-modal-card .modal-main-summary,
.line-editor-modal-card .modal-main-summary,
.create-repertoire-modal-card .modal-main-summary,
#treePickerPanel .modal-main-summary {
  margin: 6px 0 0;
  font-size: 0.86rem;
  line-height: 1.34;
  color: var(--muted);
}

.modal-header h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--text);
}

.modal-close-button {
  flex: 0 0 auto;
  min-width: 0;
}

.modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#explorerSettingsModal .modal-grid {
  min-height: 0;
  overflow: auto;
  align-content: start;
}

#spacedSettingsModal .modal-grid {
  min-height: 0;
  overflow: visible;
  align-content: start;
}

.modal-section {
  display: grid;
  gap: 8px;
  padding: 10px;
  background: rgba(63, 59, 55, 0.8);
  border: 1px solid rgba(96, 92, 87, 0.28);
  border-radius: 14px;
}

.modal-section-heading {
  grid-column: 1 / -1;
  padding: 6px 8px;
  background: rgba(63, 59, 55, 0.45);
}

.modal-section-heading .prompt-label {
  margin: 0;
  font-size: 0.7rem;
}

.modal-option {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 0.82rem;
}

.modal-actions {
  margin-top: 4px;
}

.repertoire-analysis-modal-card .modal-actions button {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  width: 100% !important;
  min-width: 0;
  max-width: 100%;
  padding: 6px 10px;
  font-size: 0.7rem;
  line-height: 1.2;
  white-space: nowrap;
  justify-self: stretch;
}

.repertoire-analysis-modal-card .modal-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  row-gap: 6px;
  column-gap: 8px;
  align-items: start;
  justify-items: stretch;
}

.repertoire-analysis-modal-card .modal-actions > :nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}

.repertoire-analysis-modal-card .modal-actions > :nth-child(2) {
  grid-column: 1;
  grid-row: 2;
}

.repertoire-analysis-modal-card .modal-actions > :nth-child(3) {
  grid-column: 1;
  grid-row: 3;
}

.repertoire-analysis-modal-card .modal-actions > :nth-child(4) {
  grid-column: 2;
  grid-row: 1;
}

.repertoire-analysis-modal-card .modal-actions > :nth-child(5) {
  grid-column: 2;
  grid-row: 2;
}

.repertoire-analysis-modal-card .modal-actions > :nth-child(6) {
  grid-column: 2;
  grid-row: 3;
}

.modal-text-field {
  grid-template-columns: 1fr;
  gap: 8px;
}

.modal-text-field span {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.6rem;
  line-height: 1.2;
}

.modal-button-row {
  margin-top: 4px;
}

.line-editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(400px, 0.42fr);
  gap: 12px;
  min-height: 0;
  height: 100%;
  align-items: start;
}

.line-editor-board-column,
.line-editor-side-column {
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 0;
}

.line-editor-board-column {
  overflow-y: hidden;
  overflow-x: hidden;
  padding-right: 0;
  gap: 0;
}

.line-editor-side-column {
  grid-template-rows: repeat(4, auto);
}

.line-editor-side-column .answer-box {
  min-height: 0;
  overflow: auto;
}

.line-editor-board-frame {
  width: min(100%, calc(100dvh - 190px), 1120px);
  justify-self: center;
}

.line-editor-nav {
  display: flex;
  gap: 8px;
}

.line-editor-nav button {
  flex: 1 1 0;
}

.line-editor-lichess-box {
  min-width: 0;
  min-height: 320px;
  display: grid;
  grid-template-rows: auto auto minmax(220px, 1fr);
}

.line-editor-lichess-box .prompt-label,
.line-editor-lichess-box .sidebar-value {
  margin-bottom: 0;
}

.line-editor-explorer-table-wrap {
  min-height: 0;
  max-height: none;
  overflow-y: hidden;
  overflow-x: hidden;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: none;
}

.line-editor-explorer-table-wrap:hover {
  scrollbar-width: none;
}

.line-editor-explorer-table-wrap::-webkit-scrollbar {
  width: 0;
}

.line-editor-explorer-table-wrap:hover::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.line-editor-lichess-box .explorer-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed !important;
}

.line-editor-lichess-box .explorer-table th,
.line-editor-lichess-box .explorer-table td {
  white-space: nowrap !important;
  overflow-wrap: anywhere;
  font-size: 0.66rem;
  padding: 4px 5px;
}

.line-editor-lichess-box .explorer-table th:nth-child(1),
.line-editor-lichess-box .explorer-table td:nth-child(1) {
  width: 20% !important;
  min-width: 0;
  font-weight: 700;
}

.line-editor-lichess-box .explorer-table th:nth-child(2),
.line-editor-lichess-box .explorer-table td:nth-child(2) {
  width: 12% !important;
  min-width: 0;
}

.line-editor-lichess-box .explorer-table th:nth-child(n+3),
.line-editor-lichess-box .explorer-table td:nth-child(n+3) {
  width: 17% !important;
  min-width: 0;
}

.tree-picker-lichess-box.line-editor-lichess-box {
  min-height: 0;
  max-height: none;
  height: auto;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
}

.tree-picker-lichess-box.line-editor-lichess-box .line-editor-explorer-table-wrap {
  min-height: 0;
  max-height: none;
  height: auto;
  overflow: hidden;
}

.line-editor-move-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
}

.line-editor-move-button {
  flex: 0 0 auto;
  min-width: 0;
  padding: 6px 10px;
  font-size: 0.76rem;
}

.line-editor-move-button.active {
  background: rgba(47, 111, 79, 0.28);
  border-color: rgba(47, 111, 79, 0.85);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.line-editor-modal-card .line-editor-move-list {
  gap: 4px;
}

.line-editor-modal-card .line-editor-move-button {
  padding: 3px 6px;
  font-size: 0.66rem;
  line-height: 1.1;
  min-height: 20px;
}

.line-editor-modal-card .line-editor-explorer-table-wrap {
  overflow: hidden;
  scrollbar-gutter: auto;
  scrollbar-width: none;
}

#lineEditorModal .line-editor-explorer-table-wrap,
#lineEditorModal .line-editor-explorer-table-wrap:hover {
  overflow: hidden !important;
  scrollbar-width: none !important;
  scrollbar-gutter: stable both-edges !important;
}

#lineEditorModal .line-editor-explorer-table-wrap::-webkit-scrollbar,
#lineEditorModal .line-editor-explorer-table-wrap:hover::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

#lineEditorModal .line-editor-lichess-box *,
#lineEditorModal .line-editor-explorer-table-wrap *,
#lineEditorModal .line-editor-explorer-table-wrap *:hover {
  scrollbar-width: none !important;
}

#lineEditorModal *:hover {
  scrollbar-width: none !important;
}

#lineEditorModal .line-editor-lichess-box *::-webkit-scrollbar,
#lineEditorModal .line-editor-explorer-table-wrap *::-webkit-scrollbar,
#lineEditorModal .line-editor-explorer-table-wrap *:hover::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

#lineEditorModal *:hover::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

#lineEditorModal .line-editor-lichess-box,
#lineEditorModal .line-editor-lichess-box:hover {
  transform: none !important;
  overflow: hidden !important;
  contain: layout paint;
}

#lineEditorModal .line-editor-lichess-box button:hover {
  transform: none !important;
}

.line-editor-action-group {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.line-editor-action-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.line-editor-action-row-all {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

.line-editor-action-row-all button {
  min-width: 0;
  white-space: nowrap;
  min-height: 34px;
  padding: 7px 6px;
  font-size: 0.72rem;
  line-height: 1.18;
}

.line-editor-action-row-all #lineEditorPrevButton,
.line-editor-action-row-all #lineEditorNextButton {
  flex: initial;
}

.line-editor-action-row-all #lineEditorSaveButton,
.line-editor-action-row-all #lineEditorExportButton,
.line-editor-action-row-all #lineEditorRemoveButton {
  flex: initial;
}

.line-editor-action-row-all .line-editor-close-button {
  flex: initial;
  margin-left: 0;
}

.line-editor-footer-actions {
  margin-top: 0;
}

.create-repertoire-footer-actions {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.create-repertoire-footer-actions button {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 7px 6px;
  font-size: 0.72rem;
  line-height: 1.18;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.create-repertoire-suggestion-details {
  margin-top: 4px;
  font-size: 0.66rem;
  line-height: 1.25;
  color: rgba(214, 212, 208, 0.92);
}

.line-editor-note {
  margin-top: 8px;
  font-size: 0.7rem;
}

.line-editor-analysis-findings {
  display: grid;
  gap: 10px;
  max-height: 280px;
  overflow: auto;
}

.line-editor-analysis-item {
  display: grid;
  gap: 6px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(40, 36, 33, 0.7);
  border: 1px solid rgba(96, 92, 87, 0.3);
}

.line-editor-analysis-item p {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
}

.line-editor-analysis-item textarea {
  width: 100%;
  min-height: 62px;
  resize: vertical;
}

.repertoire-analysis-findings {
  min-height: 0;
  max-height: min(42vh, 420px);
  overflow: auto;
  display: grid;
  gap: 10px;
  padding-right: 4px;
}

.repertoire-analysis-item {
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(96, 92, 87, 0.34);
  background: rgba(40, 36, 33, 0.72);
  display: grid;
  gap: 4px;
}

.repertoire-analysis-item h4 {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text);
}

.repertoire-analysis-item p {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--muted);
}

.repertoire-analysis-item-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.repertoire-analysis-item-actions .secondary-button {
  min-height: 30px;
  padding: 4px 8px;
  font-size: 0.68rem;
  line-height: 1.1;
}

.stats-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.repertoire-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  min-height: 0;
  overflow: auto;
}

.repertoire-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(63, 59, 55, 0.88);
}

.repertoire-list li.active {
  outline: 2px solid rgba(47, 111, 79, 0.28);
}

.repertoire-details {
  display: grid;
  gap: 2px;
}

.repertoire-name {
  font-weight: 700;
}

.repertoire-side {
  color: var(--muted);
  font-size: 0.74rem;
}

.library-delete-button {
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: 0.72rem;
}

.stats-list li {
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 920px) {
  .hero,
  .dashboard,
  .hero-menu {
    grid-template-columns: 1fr;
    display: grid;
  }

  .modal-grid {
    grid-template-columns: 1fr;
  }

  .line-editor-layout {
    grid-template-columns: 1fr;
  }

  .create-repertoire-layout {
    grid-template-columns: 1fr;
  }

  .modal-overlay {
    padding: 10px;
  }

  .tree-content-row {
    grid-template-columns: 1fr;
  }

  .tree-right-column {
    grid-template-rows: auto auto;
  }

  .tree-action-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .left-column {
    display: contents;
  }

  .board-layout {
    display: grid;
    grid-template-columns: 1fr;
  }

  .board-side {
    width: 100%;
    min-width: 0;
  }

  .board-frame {
    width: 100%;
  }

  .board-meta {
    grid-template-columns: repeat(3, 1fr);
  }

  .training-modal-overlay {
    padding: 0;
  }

  .training-modal-card {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    padding: 10px;
    gap: 10px;
    overflow: auto;
  }

  .training-modal-card .panel-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(49, 46, 43, 0.97);
    border-radius: 12px;
    padding: 8px 6px;
  }

  .training-modal-card .board-layout {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-bottom: 76px;
  }

  .training-modal-card .board-main,
  .training-modal-card .board-side,
  .training-modal-card .moves-box {
    width: 100%;
    min-width: 0;
  }

  .training-modal-card .board-frame {
    width: min(100%, 560px);
    justify-self: center;
  }

  .training-modal-card .moves-box {
    min-height: 148px;
    max-height: 148px;
  }

  .training-modal-card .board-side {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .training-modal-card .board-side .engine-box-stockfish {
    min-height: 142px;
  }

  .training-modal-card .board-side .engine-box-lichess {
    min-height: 322px;
    max-height: 322px;
  }

  .training-modal-card .board-side .spaced-progress-box {
    margin-top: 0;
    min-height: auto;
    max-height: none;
  }

  .training-modal-card .controls {
    position: static;
    bottom: auto;
    z-index: auto;
    background: transparent;
    border-radius: 0;
    padding: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .training-modal-card .controls button {
    min-height: 44px;
    font-size: 0.78rem;
    white-space: normal;
  }

  .training-modal-card .explorer-table-wrap {
    overflow: auto;
  }

  .training-modal-card .explorer-table {
    min-width: 440px;
  }

  .line-editor-modal-card,
  .create-repertoire-setup-modal-card,
  .create-repertoire-modal-card,
  #treePickerPanel,
  .library-modal-card,
  #explorerSettingsModal .modal-card,
  #spacedSettingsModal .modal-card {
    width: min(100%, calc(100vw - 12px));
    max-width: min(100%, calc(100vw - 12px));
  }

  .line-editor-modal-card,
  .create-repertoire-modal-card,
  #treePickerPanel {
    height: min(100dvh, calc(100vh - 12px));
    max-height: min(100dvh, calc(100vh - 12px));
  }
}

/* Mobile minimal mode */
@media (max-width: 920px) {
  /* 3) Create Repertoire komplett ausblenden */
  #createRepertoireButton,
  #createRepertoireModal,
  #createRepertoireSetupModal {
    display: none !important;
  }

  /* 1) Training minimal */
  .training-modal-card .board-side,
  .training-modal-card .moves-box,
  .training-modal-card #criticalPositionButton,
  .training-modal-card #lineTagButton,
  .training-modal-card #editLineButton,
  .training-modal-card #resetSessionButton {
    display: none !important;
  }

  .training-modal-card .board-layout {
    grid-template-columns: 1fr !important;
    padding-bottom: 0 !important;
  }

  .training-modal-card .controls {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .training-modal-card .controls button {
    min-height: 38px !important;
    font-size: 0.74rem !important;
    line-height: 1.12 !important;
    white-space: nowrap !important;
  }

  .training-modal-card #expectedMovesPanel {
    margin-top: 0;
  }

  /* 2) Browse Tree minimal */
  #treePickerModal .modal-header .modal-close-button {
    display: none !important;
  }

  #treePickerModal .tree-picker-lichess-box,
  #treePickerModal .tree-current-path,
  #treePickerModal #treePickerStatus,
  #treePickerModal #treeResetButton,
  #treePickerModal #treeTrainPositionButton {
    display: none !important;
  }

  #treePickerModal .tree-content-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  #treePickerModal .tree-right-column {
    grid-template-rows: auto !important;
  }

  #treePickerModal .tree-action-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
}

/* Final mobile hard-fit overrides */
@media (max-width: 920px) {
  html,
  body {
    width: 100%;
    height: 100dvh;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  body {
    position: fixed;
    inset: 0;
    touch-action: none;
  }

  button,
  select,
  input,
  textarea,
  .piece-image {
    touch-action: manipulation;
  }

  #mainApp,
  .app-shell,
  .hero,
  .dashboard,
  .left-column {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    overflow: hidden !important;
  }

  .app-shell {
    padding: 8px !important;
    margin: 0 !important;
  }

  #trainingModal,
  #treePickerModal {
    inset: 0;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .training-modal-card,
  #treePickerPanel {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  .training-modal-card {
    grid-template-rows: auto minmax(0, 1fr) auto auto !important;
  }

  .training-modal-card #expectedMovesPanel {
    display: grid !important;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 8px;
    padding: 6px 8px !important;
    min-height: 0;
    overflow: hidden !important;
  }

  .training-modal-card #expectedMovesPanel[hidden] {
    display: none !important;
  }

  .training-modal-card #expectedMovesPanel .prompt-label {
    margin: 0 !important;
    white-space: nowrap;
  }

  .training-modal-card #expectedMovesPanel .candidate-moves {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    white-space: normal !important;
    overflow: hidden !important;
  }

  .training-modal-card #expectedMovesPanel .variant-progress {
    grid-column: 1 / -1;
    margin-top: 0 !important;
  }

  .hero-menu .config-grid .config-field {
    grid-template-columns: 1fr !important;
    gap: 4px;
  }

  .hero-menu .config-grid .config-field select,
  .hero-menu .config-grid .config-field input[type="number"] {
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch !important;
    text-align: right;
    font-size: 0.82rem;
    padding: 7px 8px;
  }

  .hero-menu .config-grid .config-field select {
    text-align-last: right;
  }
}

@media (max-width: 640px) {
  .training-modal-card,
  .training-modal-card * {
    box-sizing: border-box;
  }

  .training-modal-card {
    overflow-x: hidden;
  }

  .training-modal-card .board-main {
    display: grid;
    justify-items: center;
  }

  .training-modal-overlay {
    place-items: stretch;
    align-items: start;
  }

  .app-shell {
    width: min(100% - 20px, 100%);
    padding-top: 14px;
  }

  .hero-copy,
  .hero-actions,
  .panel {
    padding: 14px;
  }

  .logout-button {
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    min-width: 68px;
    height: 22px;
    min-height: 22px;
    padding: 2px 7px;
    font-size: 0.62rem;
    line-height: 1;
  }

  .hero-button-row,
  .controls {
    grid-template-columns: 1fr;
  }

  .hero-button-row button,
  .controls button,
  .secondary-button,
  button {
    min-height: 44px;
  }

  .hero-copy .logout-button {
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    min-width: 68px;
    height: 22px;
    min-height: 22px !important;
    padding: 2px 7px;
    font-size: 0.62rem;
    line-height: 1;
  }

  .board-frame {
    padding: 0;
    gap: 0;
  }

  .board-frame-middle {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .board-files {
    display: none;
  }

  .board-coordinate {
    font-size: 0.74rem;
  }

  .board-meta {
    grid-template-columns: 1fr;
  }

  .board-layout {
    gap: 10px;
  }

  .board-side .engine-box-lichess {
    min-height: 278px;
    max-height: 278px;
    overflow: hidden;
  }

  .training-modal-card {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 100%;
    max-height: none;
    padding: 8px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
  }

  .training-modal-card .panel-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 8px;
    align-items: start;
    position: static;
    top: auto;
    z-index: auto;
    background: transparent;
    border-radius: 0;
    padding: 0;
  }

  .training-modal-card .modal-main-title,
  .line-editor-modal-card .modal-main-title,
  .create-repertoire-modal-card .modal-main-title,
  .tree-picker-modal-card .modal-main-title,
  #treePickerPanel .modal-main-title {
    font-size: clamp(1.1rem, 6vw, 1.5rem);
    line-height: 1.1;
    margin-bottom: 6px;
  }

  .training-modal-card .modal-main-summary,
  .line-editor-modal-card .modal-main-summary,
  .create-repertoire-modal-card .modal-main-summary,
  #treePickerPanel .modal-main-summary {
    font-size: 0.92rem;
    line-height: 1.28;
  }

  .training-modal-card .panel-header-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    justify-items: end;
  }

  .training-modal-card .panel-header-actions .panel-header-button {
    width: 136px;
    min-height: 34px;
    padding: 6px 8px;
    font-size: 0.72rem;
    line-height: 1.1;
  }

  .training-modal-card .board-layout {
    gap: 8px;
  }

  .training-modal-card .board-main {
    display: grid;
    justify-items: center;
  }

  .training-modal-card .board-frame {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0;
  }

  .training-modal-card .board-frame.board-expanded {
    width: 100% !important;
    max-width: 100% !important;
  }

  .training-modal-card .board-frame-middle {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0;
    width: 100%;
  }

  .training-modal-card .board-files {
    display: none !important;
  }

  .training-modal-card .board-coordinate {
    font-size: 0.68rem;
  }

  .training-modal-card .chessboard {
    width: min(100%, calc(100vw - 76px)) !important;
    height: min(100%, calc(100vw - 76px)) !important;
    max-width: calc(100vw - 76px) !important;
    max-height: calc(100vw - 76px) !important;
    aspect-ratio: auto !important;
    justify-self: center;
    align-self: center;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-template-rows: repeat(8, minmax(0, 1fr));
  }

  .training-modal-card .square {
    min-width: 0;
    min-height: 0;
  }

  .training-modal-card .moves-box {
    min-height: 118px;
    max-height: 118px;
  }

  .training-modal-card .move-history {
    max-height: 66px;
  }

  .training-modal-card .controls {
    position: static;
    bottom: auto;
    z-index: auto;
    background: transparent;
    border-radius: 0;
    padding: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .training-modal-card .controls button {
    min-height: 40px;
    font-size: 0.74rem;
    line-height: 1.15;
  }

  .explorer-table-wrap {
    overflow: auto;
  }

  .training-modal-card .explorer-table {
    min-width: 360px;
  }

  .explorer-table {
    min-width: 360px;
    font-size: 0.72rem;
  }

  .explorer-table th {
    font-size: 0.6rem;
  }

  #treePickerPanel,
  .line-editor-modal-card,
  .create-repertoire-setup-modal-card,
  .create-repertoire-modal-card,
  #explorerSettingsModal .modal-card,
  #spacedSettingsModal .modal-card {
    border-radius: 12px;
    padding: 12px;
  }

}

/* Mobile simplification overrides (keep desktop unchanged) */
@media (max-width: 920px) {
  /* Browse tree: compact single-column flow */
  #treePickerPanel {
    height: min(100dvh, calc(100vh - 10px));
    max-height: min(100dvh, calc(100vh - 10px));
    padding: 10px;
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  .tree-picker {
    gap: 8px;
  }

  .tree-content-row {
    grid-template-columns: 1fr !important;
    gap: 8px;
    height: auto;
    min-height: 0;
  }

  .tree-board-column {
    grid-template-rows: auto auto;
    gap: 8px;
  }

  .tree-preview-frame,
  .tree-preview-frame.board-expanded {
    width: min(100%, calc(100dvh - 300px), 92vw);
  }

  .tree-right-column {
    gap: 8px;
  }

  .tree-action-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  /* Training: simplified stacked layout */
  .training-modal-card {
    padding: 8px;
    gap: 8px;
  }

  .training-modal-card .board-layout {
    grid-template-columns: 1fr !important;
    gap: 8px;
    padding-bottom: 8px;
  }

  .training-modal-card .board-main {
    gap: 8px;
    overflow: visible;
  }

  .training-modal-card .board-frame,
  .training-modal-card .board-frame.board-expanded {
    width: min(100%, calc(100dvh - 320px), 92vw) !important;
    max-width: 92vw !important;
  }

  .training-modal-card .board-side {
    gap: 8px;
    overflow: visible;
    padding-bottom: 0;
  }

  .training-modal-card .board-side .engine-box-lichess,
  .training-modal-card .board-side .engine-box-stockfish {
    min-height: 0;
    max-height: none;
  }

  .training-modal-card .board-side .engine-box-lichess .explorer-table th,
  .training-modal-card .board-side .engine-box-lichess .explorer-table td {
    font-size: 0.68rem;
    padding: 3px 5px;
  }

  /* Edit / Create: keep single column and reduce vertical density */
  .line-editor-modal-card,
  .create-repertoire-modal-card {
    padding: 10px;
    gap: 8px;
  }

  .line-editor-layout,
  .create-repertoire-layout {
    grid-template-columns: 1fr !important;
    gap: 8px;
    min-height: 0;
  }

  .line-editor-board-frame {
    width: min(100%, calc(100dvh - 330px), 92vw);
  }

  .line-editor-footer-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
}

/* Desktop modal alignment + symbol action rows */
@media (min-width: 921px) {
  :root {
    --modal-board-size-desktop: min(calc(100dvh - 190px), 1260px);
    --modal-side-width-desktop: clamp(360px, 28vw, 560px);
    --modal-columns-gap-desktop: 10px;
  }

  .training-modal-card .board-layout,
  .line-editor-layout,
  .create-repertoire-layout,
  .tree-content-row {
    width: max-content;
    max-width: 100%;
    justify-content: start;
    gap: var(--modal-columns-gap-desktop);
  }

  .training-modal-card .board-layout {
    grid-template-columns: minmax(0, var(--modal-board-size-desktop)) minmax(0, var(--modal-side-width-desktop));
  }

  .line-editor-layout,
  .create-repertoire-layout,
  .tree-content-row {
    grid-template-columns: minmax(0, var(--modal-board-size-desktop)) minmax(0, var(--modal-side-width-desktop));
  }

  .training-modal-card .board-main,
  .line-editor-board-column,
  .tree-board-column {
    justify-items: start;
    width: min(100%, var(--modal-board-size-desktop));
    max-width: min(100%, var(--modal-board-size-desktop));
  }

  .training-modal-card .board-side,
  .line-editor-side-column,
  .tree-right-column {
    width: min(100%, var(--modal-side-width-desktop));
    max-width: var(--modal-side-width-desktop);
    justify-self: start;
  }

  .training-modal-card .board-main .board-frame,
  .training-modal-card .board-main .board-frame.board-expanded,
  .line-editor-board-frame,
  .tree-preview-frame,
  .tree-preview-frame.board-expanded {
    width: min(100%, var(--modal-board-size-desktop)) !important;
    justify-self: start !important;
  }

  .training-modal-card .controls,
  .line-editor-footer-actions,
  .tree-action-row {
    width: min(100%, var(--modal-board-size-desktop));
    max-width: min(100%, var(--modal-board-size-desktop));
    justify-self: start;
    margin-left: 0;
  }

  .training-modal-card .controls {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin-bottom: 0;
  }

  .line-editor-action-row-all,
  .create-repertoire-footer-actions {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .tree-action-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .training-modal-card .controls button,
  .line-editor-action-row-all button,
  .tree-action-row .tree-action-button {
    min-width: 0;
    min-height: 32px;
    height: 32px;
    max-height: 32px;
    padding: 4px 2px;
    font-size: 1rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}