.cg-wrap {
  box-sizing: content-box;
  position: relative;
  display: block;
}

cg-container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  top: 0;
}

cg-board {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  line-height: 0;
  background-size: cover;
}

.cg-wrap.manipulable cg-board {
  cursor: pointer;
}

cg-board square {
  position: absolute;
  top: 0;
  left: 0;
  width: 12.5%;
  height: 12.5%;
  pointer-events: none;
}

cg-board square.move-dest {
  pointer-events: auto;
}

cg-board square.last-move {
  will-change: transform;
}

.cg-wrap piece {
  position: absolute;
  top: 0;
  left: 0;
  width: 12.5%;
  height: 12.5%;
  background-size: cover;
  z-index: 2;
  will-change: transform;
  pointer-events: none;
}

cg-board piece.dragging {
  cursor: move;
  /* !important to override z-index from 3D piece inline style */
  z-index: 11 !important;
}

piece.anim {
  z-index: 8;
}

piece.fading {
  z-index: 1;
  opacity: 0.5;
}

.cg-wrap piece.ghost {
  opacity: 0.3;
}

.cg-wrap piece svg {
  overflow: hidden;
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  opacity: 0.6;
}

.cg-wrap cg-auto-pieces,
.cg-wrap .cg-shapes,
.cg-wrap .cg-custom-svgs,
.cg-wrap .cg-shapes-below,
.cg-wrap .cg-custom-below {
  overflow: visible;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.cg-wrap cg-auto-pieces {
  z-index: 2;
}

.cg-wrap cg-auto-pieces piece {
  opacity: 0.3;
}

.cg-wrap .cg-shapes {
  overflow: hidden;
  opacity: 0.6;
  z-index: 2;
}

.cg-wrap .cg-shapes-below {
  overflow: hidden;
  z-index: 1;
}

.cg-wrap .cg-custom-below {
  z-index: 1;
}

.cg-wrap .cg-custom-svgs {
  /* over piece.anim = 8, but under piece.dragging = 11 */
  z-index: 9;
}

.cg-wrap .cg-custom-svgs svg,
.cg-wrap .cg-custom-below svg {
  overflow: visible;
}

.cg-wrap coords {
  position: absolute;
  display: flex;
  pointer-events: none;
  opacity: 0.8;
  font-family: sans-serif;
  font-size: 9px;
}

.cg-wrap coords.ranks {
  left: 4px;
  top: -20px;
  flex-flow: column-reverse;
  height: 100%;
  width: 12px;
}

.cg-wrap coords.ranks.black {
  flex-flow: column;
}

.cg-wrap coords.ranks.left {
  left: -15px;
  align-items: flex-end;
}

.cg-wrap coords.files {
  bottom: -4px;
  left: 24px;
  flex-flow: row;
  width: 100%;
  height: 16px;
  text-transform: uppercase;
  text-align: center;
}

.cg-wrap coords.files.black {
  flex-flow: row-reverse;
}

.cg-wrap coords coord {
  flex: 1 1 auto;
}

.cg-wrap coords.ranks coord {
  transform: translateY(39%);
}

.cg-wrap coords.squares {
  bottom: 0;
  left: 0;
  text-transform: uppercase;
  text-align: right;
  flex-flow: column-reverse;
  height: 100%;
  width: 12.5%;
}

.cg-wrap coords.squares.black {
  flex-flow: column;
}

.cg-wrap coords.squares.left {
  text-align: left;
}

.cg-wrap coords.squares coord {
  padding: 6% 4%;
}

.cg-wrap coords.squares.rank2 {
  transform: translateX(100%);
}

.cg-wrap coords.squares.rank3 {
  transform: translateX(200%);
}

.cg-wrap coords.squares.rank4 {
  transform: translateX(300%);
}

.cg-wrap coords.squares.rank5 {
  transform: translateX(400%);
}

.cg-wrap coords.squares.rank6 {
  transform: translateX(500%);
}

.cg-wrap coords.squares.rank7 {
  transform: translateX(600%);
}

.cg-wrap coords.squares.rank8 {
  transform: translateX(700%);
}

/** Colored board squares as an embedded SVG */
cg-board {
  background-color: #f0d9b5;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4PSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIgogICAgIHZpZXdCb3g9IjAgMCA4IDgiIHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyI+CjxnIGlkPSJhIj4KICA8ZyBpZD0iYiI+CiAgICA8ZyBpZD0iYyI+CiAgICAgIDxnIGlkPSJkIj4KICAgICAgICA8cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBpZD0iZSIgb3BhY2l0eT0iMCIvPgogICAgICAgIDx1c2UgeD0iMSIgeT0iMSIgaHJlZj0iI2UiIHg6aHJlZj0iI2UiLz4KICAgICAgICA8cmVjdCB5PSIxIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBpZD0iZiIgb3BhY2l0eT0iMC4yIi8+CiAgICAgICAgPHVzZSB4PSIxIiB5PSItMSIgaHJlZj0iI2YiIHg6aHJlZj0iI2YiLz4KICAgICAgPC9nPgogICAgICA8dXNlIHg9IjIiIGhyZWY9IiNkIiB4OmhyZWY9IiNkIi8+CiAgICA8L2c+CiAgICA8dXNlIHg9IjQiIGhyZWY9IiNjIiB4OmhyZWY9IiNjIi8+CiAgPC9nPgogIDx1c2UgeT0iMiIgaHJlZj0iI2IiIHg6aHJlZj0iI2IiLz4KPC9nPgo8dXNlIHk9IjQiIGhyZWY9IiNhIiB4OmhyZWY9IiNhIi8+Cjwvc3ZnPg==');
}

/** Interactive board square colors */
cg-board square.move-dest {
  background: radial-gradient(rgba(20, 85, 30, 0.5) 22%, #208530 0, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0) 0);
}
cg-board square.premove-dest {
  background: radial-gradient(rgba(20, 30, 85, 0.5) 22%, #203085 0, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0) 0);
}
cg-board square.oc.move-dest {
  background: radial-gradient(transparent 0%, transparent 80%, rgba(20, 85, 0, 0.3) 80%);
}
cg-board square.oc.premove-dest {
  background: radial-gradient(transparent 0%, transparent 80%, rgba(20, 30, 85, 0.2) 80%);
}
cg-board square.move-dest:hover,
cg-board square.move-dest.hover {
  background: rgba(20, 85, 30, 0.3);
}
cg-board square.premove-dest:hover,
cg-board square.premove-dest.hover {
  background: rgba(20, 30, 85, 0.2);
}
cg-board square.last-move {
  background-color: rgba(155, 199, 0, 0.41);
}
cg-board square.selected {
  background-color: rgba(20, 85, 30, 0.5);
}
cg-board square.check {
  background: radial-gradient(
    ellipse at center,
    rgba(255, 0, 0, 1) 0%,
    rgba(231, 0, 0, 1) 25%,
    rgba(169, 0, 0, 0) 89%,
    rgba(158, 0, 0, 0) 100%
  );
}
cg-board square.current-premove {
  background-color: rgba(20, 30, 85, 0.5);
}

/** Alternating colors in rank/file/square labels */
.orientation-white .ranks :nth-child(odd),
.orientation-white .files :nth-child(even),
.orientation-black .ranks :nth-child(even),
.orientation-black .files :nth-child(odd),
coords.squares:nth-of-type(odd) :nth-child(even),
coords.squares:nth-of-type(even) :nth-child(odd) {
  color: rgba(72, 72, 72, 0.8);
}

.orientation-white .ranks :nth-child(even),
.orientation-white .files :nth-child(odd),
.orientation-black .ranks :nth-child(odd),
.orientation-black .files :nth-child(even),
coords.squares:nth-of-type(odd) :nth-child(odd),
coords.squares:nth-of-type(even) :nth-child(even) {
  color: rgba(255, 255, 255, 0.8);
}

/** Embedded SVGs for all chess pieces */
.cg-wrap piece.pawn.white {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PHBhdGggZD0iTTIyLjUgOWMtMi4yMSAwLTQgMS43OS00IDQgMCAuODkuMjkgMS43MS43OCAyLjM4QzE3LjMzIDE2LjUgMTYgMTguNTkgMTYgMjFjMCAyLjAzLjk0IDMuODQgMi40MSA1LjAzLTMgMS4wNi03LjQxIDUuNTUtNy40MSAxMy40N2gyM2MwLTcuOTItNC40MS0xMi40MS03LjQxLTEzLjQ3IDEuNDctMS4xOSAyLjQxLTMgMi40MS01LjAzIDAtMi40MS0xLjMzLTQuNS0zLjI4LTUuNjIuNDktLjY3Ljc4LTEuNDkuNzgtMi4zOCAwLTIuMjEtMS43OS00LTQtNHoiIGZpbGw9IiNmZmYiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvc3ZnPg==');
}
.cg-wrap piece.bishop.white {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxnIGZpbGw9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJidXR0Ij48cGF0aCBkPSJNOSAzNmMzLjM5LS45NyAxMC4xMS40MyAxMy41LTIgMy4zOSAyLjQzIDEwLjExIDEuMDMgMTMuNSAyIDAgMCAxLjY1LjU0IDMgMi0uNjguOTctMS42NS45OS0zIC41LTMuMzktLjk3LTEwLjExLjQ2LTEzLjUtMS0zLjM5IDEuNDYtMTAuMTEuMDMtMTMuNSAxLTEuMzU0LjQ5LTIuMzIzLjQ3LTMtLjUgMS4zNTQtMS45NCAzLTIgMy0yeiIvPjxwYXRoIGQ9Ik0xNSAzMmMyLjUgMi41IDEyLjUgMi41IDE1IDAgLjUtMS41IDAtMiAwLTIgMC0yLjUtMi41LTQtMi41LTQgNS41LTEuNSA2LTExLjUtNS0xNS41LTExIDQtMTAuNSAxNC01IDE1LjUgMCAwLTIuNSAxLjUtMi41IDQgMCAwLS41LjUgMCAyeiIvPjxwYXRoIGQ9Ik0yNSA4YTIuNSAyLjUgMCAxIDEtNSAwIDIuNSAyLjUgMCAxIDEgNSAweiIvPjwvZz48cGF0aCBkPSJNMTcuNSAyNmgxME0xNSAzMGgxNW0tNy41LTE0LjV2NU0yMCAxOGg1IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIi8+PC9nPjwvc3ZnPg==');
}
.cg-wrap piece.knight.white {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMiAxMGMxMC41IDEgMTYuNSA4IDE2IDI5SDE1YzAtOSAxMC02LjUgOC0yMSIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0yNCAxOGMuMzggMi45MS01LjU1IDcuMzctOCA5LTMgMi0yLjgyIDQuMzQtNSA0LTEuMDQyLS45NCAxLjQxLTMuMDQgMC0zLTEgMCAuMTkgMS4yMy0xIDItMSAwLTQuMDAzIDEtNC00IDAtMiA2LTEyIDYtMTJzMS44OS0xLjkgMi0zLjVjLS43My0uOTk0LS41LTItLjUtMyAxLTEgMyAyLjUgMyAyLjVoMnMuNzgtMS45OTIgMi41LTNjMSAwIDEgMyAxIDMiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNOS41IDI1LjVhLjUuNSAwIDEgMS0xIDAgLjUuNSAwIDEgMSAxIDB6bTUuNDMzLTkuNzVhLjUgMS41IDMwIDEgMS0uODY2LS41LjUgMS41IDMwIDEgMSAuODY2LjV6IiBmaWxsPSIjMDAwIi8+PC9nPjwvc3ZnPg==');
}
.cg-wrap piece.rook.white {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik05IDM5aDI3di0zSDl2M3ptMy0zdi00aDIxdjRIMTJ6bS0xLTIyVjloNHYyaDVWOWg1djJoNVY5aDR2NSIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiLz48cGF0aCBkPSJNMzQgMTRsLTMgM0gxNGwtMy0zIi8+PHBhdGggZD0iTTMxIDE3djEyLjVIMTRWMTciIHN0cm9rZS1saW5lY2FwPSJidXR0IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIi8+PHBhdGggZD0iTTMxIDI5LjVsMS41IDIuNWgtMjBsMS41LTIuNSIvPjxwYXRoIGQ9Ik0xMSAxNGgyMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIvPjwvZz48L3N2Zz4=');
}
.cg-wrap piece.queen.white {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik04IDEyYTIgMiAwIDEgMS00IDAgMiAyIDAgMSAxIDQgMHptMTYuNS00LjVhMiAyIDAgMSAxLTQgMCAyIDIgMCAxIDEgNCAwek00MSAxMmEyIDIgMCAxIDEtNCAwIDIgMiAwIDEgMSA0IDB6TTE2IDguNWEyIDIgMCAxIDEtNCAwIDIgMiAwIDEgMSA0IDB6TTMzIDlhMiAyIDAgMSAxLTQgMCAyIDIgMCAxIDEgNCAweiIvPjxwYXRoIGQ9Ik05IDI2YzguNS0xLjUgMjEtMS41IDI3IDBsMi0xMi03IDExVjExbC01LjUgMTMuNS0zLTE1LTMgMTUtNS41LTE0VjI1TDcgMTRsMiAxMnoiIHN0cm9rZS1saW5lY2FwPSJidXR0Ii8+PHBhdGggZD0iTTkgMjZjMCAyIDEuNSAyIDIuNSA0IDEgMS41IDEgMSAuNSAzLjUtMS41IDEtMS41IDIuNS0xLjUgMi41LTEuNSAxLjUuNSAyLjUuNSAyLjUgNi41IDEgMTYuNSAxIDIzIDAgMCAwIDEuNS0xIDAtMi41IDAgMCAuNS0xLjUtMS0yLjUtLjUtMi41LS41LTIgLjUtMy41IDEtMiAyLjUtMiAyLjUtNC04LjUtMS41LTE4LjUtMS41LTI3IDB6IiBzdHJva2UtbGluZWNhcD0iYnV0dCIvPjxwYXRoIGQ9Ik0xMS41IDMwYzMuNS0xIDE4LjUtMSAyMiAwTTEyIDMzLjVjNi0xIDE1LTEgMjEgMCIgZmlsbD0ibm9uZSIvPjwvZz48L3N2Zz4=');
}
.cg-wrap piece.king.white {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMi41IDExLjYzVjZNMjAgOGg1IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIi8+PHBhdGggZD0iTTIyLjUgMjVzNC41LTcuNSAzLTEwLjVjMCAwLTEtMi41LTMtMi41cy0zIDIuNS0zIDIuNWMtMS41IDMgMyAxMC41IDMgMTAuNSIgZmlsbD0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiLz48cGF0aCBkPSJNMTEuNSAzN2M1LjUgMy41IDE1LjUgMy41IDIxIDB2LTdzOS00LjUgNi0xMC41Yy00LTYuNS0xMy41LTMuNS0xNiA0VjI3di0zLjVjLTMuNS03LjUtMTMtMTAuNS0xNi00LTMgNiA1IDEwIDUgMTBWMzd6IiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTExLjUgMzBjNS41LTMgMTUuNS0zIDIxIDBtLTIxIDMuNWM1LjUtMyAxNS41LTMgMjEgMG0tMjEgMy41YzUuNS0zIDE1LjUtMyAyMSAwIi8+PC9nPjwvc3ZnPg==');
}
.cg-wrap piece.pawn.black {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PHBhdGggZD0iTTIyLjUgOWMtMi4yMSAwLTQgMS43OS00IDQgMCAuODkuMjkgMS43MS43OCAyLjM4QzE3LjMzIDE2LjUgMTYgMTguNTkgMTYgMjFjMCAyLjAzLjk0IDMuODQgMi40MSA1LjAzLTMgMS4wNi03LjQxIDUuNTUtNy40MSAxMy40N2gyM2MwLTcuOTItNC40MS0xMi40MS03LjQxLTEzLjQ3IDEuNDctMS4xOSAyLjQxLTMgMi40MS01LjAzIDAtMi40MS0xLjMzLTQuNS0zLjI4LTUuNjIuNDktLjY3Ljc4LTEuNDkuNzgtMi4zOCAwLTIuMjEtMS43OS00LTQtNHoiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvc3ZnPg==');
}
.cg-wrap piece.bishop.black {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxnIGZpbGw9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJidXR0Ij48cGF0aCBkPSJNOSAzNmMzLjM5LS45NyAxMC4xMS40MyAxMy41LTIgMy4zOSAyLjQzIDEwLjExIDEuMDMgMTMuNSAyIDAgMCAxLjY1LjU0IDMgMi0uNjguOTctMS42NS45OS0zIC41LTMuMzktLjk3LTEwLjExLjQ2LTEzLjUtMS0zLjM5IDEuNDYtMTAuMTEuMDMtMTMuNSAxLTEuMzU0LjQ5LTIuMzIzLjQ3LTMtLjUgMS4zNTQtMS45NCAzLTIgMy0yeiIvPjxwYXRoIGQ9Ik0xNSAzMmMyLjUgMi41IDEyLjUgMi41IDE1IDAgLjUtMS41IDAtMiAwLTIgMC0yLjUtMi41LTQtMi41LTQgNS41LTEuNSA2LTExLjUtNS0xNS41LTExIDQtMTAuNSAxNC01IDE1LjUgMCAwLTIuNSAxLjUtMi41IDQgMCAwLS41LjUgMCAyeiIvPjxwYXRoIGQ9Ik0yNSA4YTIuNSAyLjUgMCAxIDEtNSAwIDIuNSAyLjUgMCAxIDEgNSAweiIvPjwvZz48cGF0aCBkPSJNMTcuNSAyNmgxME0xNSAzMGgxNW0tNy41LTE0LjV2NU0yMCAxOGg1IiBzdHJva2U9IiNlY2VjZWMiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiLz48L2c+PC9zdmc+');
}
.cg-wrap piece.knight.black {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMiAxMGMxMC41IDEgMTYuNSA4IDE2IDI5SDE1YzAtOSAxMC02LjUgOC0yMSIgZmlsbD0iIzAwMCIvPjxwYXRoIGQ9Ik0yNCAxOGMuMzggMi45MS01LjU1IDcuMzctOCA5LTMgMi0yLjgyIDQuMzQtNSA0LTEuMDQyLS45NCAxLjQxLTMuMDQgMC0zLTEgMCAuMTkgMS4yMy0xIDItMSAwLTQuMDAzIDEtNC00IDAtMiA2LTEyIDYtMTJzMS44OS0xLjkgMi0zLjVjLS43My0uOTk0LS41LTItLjUtMyAxLTEgMyAyLjUgMyAyLjVoMnMuNzgtMS45OTIgMi41LTNjMSAwIDEgMyAxIDMiIGZpbGw9IiMwMDAiLz48cGF0aCBkPSJNOS41IDI1LjVhLjUuNSAwIDEgMS0xIDAgLjUuNSAwIDEgMSAxIDB6bTUuNDMzLTkuNzVhLjUgMS41IDMwIDEgMS0uODY2LS41LjUgMS41IDMwIDEgMSAuODY2LjV6IiBmaWxsPSIjZWNlY2VjIiBzdHJva2U9IiNlY2VjZWMiLz48cGF0aCBkPSJNMjQuNTUgMTAuNGwtLjQ1IDEuNDUuNS4xNWMzLjE1IDEgNS42NSAyLjQ5IDcuOSA2Ljc1UzM1Ljc1IDI5LjA2IDM1LjI1IDM5bC0uMDUuNWgyLjI1bC4wNS0uNWMuNS0xMC4wNi0uODgtMTYuODUtMy4yNS0yMS4zNC0yLjM3LTQuNDktNS43OS02LjY0LTkuMTktNy4xNmwtLjUxLS4xeiIgZmlsbD0iI2VjZWNlYyIgc3Ryb2tlPSJub25lIi8+PC9nPjwvc3ZnPg==');
}
.cg-wrap piece.rook.black {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik05IDM5aDI3di0zSDl2M3ptMy41LTdsMS41LTIuNWgxN2wxLjUgMi41aC0yMHptLS41IDR2LTRoMjF2NEgxMnoiIHN0cm9rZS1saW5lY2FwPSJidXR0Ii8+PHBhdGggZD0iTTE0IDI5LjV2LTEzaDE3djEzSDE0eiIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiLz48cGF0aCBkPSJNMTQgMTYuNUwxMSAxNGgyM2wtMyAyLjVIMTR6TTExIDE0VjloNHYyaDVWOWg1djJoNVY5aDR2NUgxMXoiIHN0cm9rZS1saW5lY2FwPSJidXR0Ii8+PHBhdGggZD0iTTEyIDM1LjVoMjFtLTIwLTRoMTltLTE4LTJoMTdtLTE3LTEzaDE3TTExIDE0aDIzIiBmaWxsPSJub25lIiBzdHJva2U9IiNlY2VjZWMiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIvPjwvZz48L3N2Zz4=');
}
.cg-wrap piece.queen.black {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxnIHN0cm9rZT0ibm9uZSI+PGNpcmNsZSBjeD0iNiIgY3k9IjEyIiByPSIyLjc1Ii8+PGNpcmNsZSBjeD0iMTQiIGN5PSI5IiByPSIyLjc1Ii8+PGNpcmNsZSBjeD0iMjIuNSIgY3k9IjgiIHI9IjIuNzUiLz48Y2lyY2xlIGN4PSIzMSIgY3k9IjkiIHI9IjIuNzUiLz48Y2lyY2xlIGN4PSIzOSIgY3k9IjEyIiByPSIyLjc1Ii8+PC9nPjxwYXRoIGQ9Ik05IDI2YzguNS0xLjUgMjEtMS41IDI3IDBsMi41LTEyLjVMMzEgMjVsLS4zLTE0LjEtNS4yIDEzLjYtMy0xNC41LTMgMTQuNS01LjItMTMuNkwxNCAyNSA2LjUgMTMuNSA5IDI2eiIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiLz48cGF0aCBkPSJNOSAyNmMwIDIgMS41IDIgMi41IDQgMSAxLjUgMSAxIC41IDMuNS0xLjUgMS0xLjUgMi41LTEuNSAyLjUtMS41IDEuNS41IDIuNS41IDIuNSA2LjUgMSAxNi41IDEgMjMgMCAwIDAgMS41LTEgMC0yLjUgMCAwIC41LTEuNS0xLTIuNS0uNS0yLjUtLjUtMiAuNS0zLjUgMS0yIDIuNS0yIDIuNS00LTguNS0xLjUtMTguNS0xLjUtMjcgMHoiIHN0cm9rZS1saW5lY2FwPSJidXR0Ii8+PHBhdGggZD0iTTExIDM4LjVhMzUgMzUgMSAwIDAgMjMgMCIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiLz48cGF0aCBkPSJNMTEgMjlhMzUgMzUgMSAwIDEgMjMgMG0tMjEuNSAyLjVoMjBtLTIxIDNhMzUgMzUgMSAwIDAgMjIgMG0tMjMgM2EzNSAzNSAxIDAgMCAyNCAwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlY2VjZWMiLz48L2c+PC9zdmc+');
}
.cg-wrap piece.king.black {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMi41IDExLjYzVjYiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiLz48cGF0aCBkPSJNMjIuNSAyNXM0LjUtNy41IDMtMTAuNWMwIDAtMS0yLjUtMy0yLjVzLTMgMi41LTMgMi41Yy0xLjUgMyAzIDEwLjUgMyAxMC41IiBmaWxsPSIjMDAwIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIvPjxwYXRoIGQ9Ik0xMS41IDM3YzUuNSAzLjUgMTUuNSAzLjUgMjEgMHYtN3M5LTQuNSA2LTEwLjVjLTQtNi41LTEzLjUtMy41LTE2IDRWMjd2LTMuNWMtMy41LTcuNS0xMy0xMC41LTE2LTQtMyA2IDUgMTAgNSAxMFYzN3oiIGZpbGw9IiMwMDAiLz48cGF0aCBkPSJNMjAgOGg1IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIi8+PHBhdGggZD0iTTMyIDI5LjVzOC41LTQgNi4wMy05LjY1QzM0LjE1IDE0IDI1IDE4IDIyLjUgMjQuNWwuMDEgMi4xLS4wMS0yLjFDMjAgMTggOS45MDYgMTQgNi45OTcgMTkuODVjLTIuNDk3IDUuNjUgNC44NTMgOSA0Ljg1MyA5IiBzdHJva2U9IiNlY2VjZWMiLz48cGF0aCBkPSJNMTEuNSAzMGM1LjUtMyAxNS41LTMgMjEgMG0tMjEgMy41YzUuNS0zIDE1LjUtMyAyMSAwbS0yMSAzLjVjNS41LTMgMTUuNS0zIDIxIDAiIHN0cm9rZT0iI2VjZWNlYyIvPjwvZz48L3N2Zz4=');
}

@charset "UTF-8";
@font-face {
  font-family: "lichess";
  src: url("/font/lichess.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
:root[data-theme=light] {
  --app-qnr-openings-ink: #5f471d;
  --app-qnr-planning-ink: #454c85;
  --app-qnr-tactics-ink: #4c3f8f;
  --app-qnr-endgame-ink: #713976;
  --app-qnr-time-ink: #7b3f16;
  --app-qnr-material-ink: #813833;
  --app-qnr-character-ink: #843552;
  --app-engine-route-ink: #28523a;
  --app-sync-route-ink: #1f625f;
  --app-amber-route-ink: #75460c;
  --app-danger-route-ink: #7f302e;
}
:root[data-theme=light] body ::-webkit-scrollbar,
:root[data-theme=light] body ::-webkit-scrollbar-corner {
  background: var(--app-canvas);
}
:root[data-theme=light] body ::-webkit-scrollbar-thumb {
  background: var(--app-border-strong);
}
:root[data-theme=light] body ::-webkit-scrollbar-thumb:hover,
:root[data-theme=light] body ::-webkit-scrollbar-thumb:active {
  background: var(--app-text-muted);
}
:root[data-theme=light] * {
  scrollbar-color: var(--app-border-strong) var(--app-canvas);
}
:root[data-theme=light] input[type=range]:not(.severity-range)::-webkit-slider-runnable-track {
  background: var(--app-border);
}
:root[data-theme=light] input[type=range]:not(.severity-range)::-moz-range-track {
  background: var(--app-border);
}
:root[data-theme=light] input[type=range]:not(.severity-range)::-webkit-slider-thumb {
  border-color: var(--app-border-strong);
  background: var(--app-surface-raised);
}
:root[data-theme=light] input[type=range]:not(.severity-range)::-moz-range-thumb {
  border-color: var(--app-border-strong);
  background: var(--app-surface-raised);
}
:root[data-theme=light] input[type=range]:not(.severity-range):hover::-webkit-slider-thumb {
  border-color: var(--app-focus);
  background: var(--app-surface);
}
:root[data-theme=light] input[type=range]:not(.severity-range):hover::-moz-range-thumb {
  border-color: var(--app-focus);
  background: var(--app-surface);
}
:root[data-theme=light] input[type=range]:not(.severity-range):focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
}
:root[data-theme=light] input[type=range]:not(.severity-range):focus-visible::-moz-range-thumb {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
}
:root[data-theme=light] input[type=range].severity-range:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
}
:root[data-theme=light] input[type=range].severity-range:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
}
:root[data-theme=light] .app-legal {
  background: var(--app-surface);
  border-top-color: var(--app-border);
  color: var(--app-text-muted);
}
:root[data-theme=light] .app-legal__notice {
  color: var(--app-text-muted);
}
:root[data-theme=light] .app-legal a {
  color: var(--app-link);
}
:root[data-theme=light] .app-legal__sep {
  color: var(--app-text-faint);
}
:root[data-theme=light] .header {
  background: var(--app-surface);
  border-bottom-color: var(--app-border);
  box-shadow: 0 1px 4px var(--app-shadow);
}
:root[data-theme=light] .header__bar {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
}
:root[data-theme=light] .header__platform-toggle {
  color: var(--app-text);
  border-right-color: var(--app-border);
}
:root[data-theme=light] .header__platform-toggle:hover {
  background: var(--app-surface-selected);
  color: var(--app-text);
}
:root[data-theme=light] .header__platform-toggle:disabled,
:root[data-theme=light] .header__platform-toggle:disabled:hover {
  background: transparent;
  color: var(--app-text-muted);
}
:root[data-theme=light] .header__input,
:root[data-theme=light] .header__account-select {
  color: var(--app-text);
}
:root[data-theme=light] .header__input::placeholder {
  color: var(--app-text-muted);
}
:root[data-theme=light] .header__input:focus-visible,
:root[data-theme=light] .header__account-select:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: -2px;
}
:root[data-theme=light] .header__account-select option {
  background: var(--app-surface-raised);
  color: var(--app-text);
}
:root[data-theme=light] .header__account-back {
  color: var(--app-text-muted);
  border-left-color: var(--app-border);
}
:root[data-theme=light] .header__account-back:hover:not(:disabled) {
  color: var(--app-text);
  background: var(--app-surface-selected);
}
:root[data-theme=light] .header__import {
  background: var(--app-engine-soft);
  color: var(--app-engine);
  border-left-color: var(--app-border);
}
:root[data-theme=light] .header__import:hover:not(:disabled) {
  background: var(--app-surface-selected);
}
:root[data-theme=light] .header__count {
  color: var(--app-engine);
  border-left-color: var(--app-border);
}
:root[data-theme=light] .header__count:hover {
  color: var(--app-text);
}
:root[data-theme=light] .header__error,
:root[data-theme=light] .header__panel-error {
  color: var(--app-danger);
}
:root[data-theme=light] .header__toggle {
  color: var(--app-text-muted);
  border-left-color: var(--app-border);
}
:root[data-theme=light] .header__toggle:hover,
:root[data-theme=light] .header__toggle.active {
  color: var(--app-text);
}
:root[data-theme=light] .header__toggle--filtered {
  color: var(--app-engine);
}
:root[data-theme=light] .header__toggle--filtered::after {
  background: var(--app-engine);
}
:root[data-theme=light] .header__nav a {
  color: var(--app-text-muted);
}
:root[data-theme=light] .header__nav a:hover {
  color: var(--app-text);
  background: var(--app-surface-selected);
}
:root[data-theme=light] .header__nav a.active {
  color: var(--app-text);
}
:root[data-theme=light] .header__login {
  color: var(--app-sync);
  border-color: var(--app-sync);
}
:root[data-theme=light] .header__login:hover {
  color: var(--app-text);
  border-color: var(--app-sync);
  background: var(--app-sync-soft);
}
:root[data-theme=light] .header__username {
  color: var(--app-sync);
}
:root[data-theme=light] .header__logout {
  color: var(--app-text-muted);
  border-color: var(--app-border);
}
:root[data-theme=light] .header__logout:hover {
  color: var(--app-danger);
  border-color: var(--app-danger);
}
:root[data-theme=light] .header__logout--text {
  color: var(--app-text-soft);
}
:root[data-theme=light] .header__sync-warning {
  color: var(--app-amber);
}
:root[data-theme=light] .header__panel {
  background: var(--app-surface-raised);
  border-color: var(--app-border);
  box-shadow: 0 8px 28px var(--app-shadow);
}
:root[data-theme=light] .header__panel-divider {
  background: var(--app-border);
}
:root[data-theme=light] .header__panel-label,
:root[data-theme=light] .header__panel-hint {
  color: var(--app-text-muted);
}
:root[data-theme=light] .header__panel-warn {
  color: var(--app-amber-ink);
}
:root[data-theme=light] .header__panel-check,
:root[data-theme=light] .header__panel-disclaimer {
  color: var(--app-text-soft);
}
:root[data-theme=light] .header__date-input,
:root[data-theme=light] .header__text-input,
:root[data-theme=light] .header__pgn-input {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
  color: var(--app-text);
}
:root[data-theme=light] .header__date-input:focus-visible,
:root[data-theme=light] .header__text-input:focus-visible,
:root[data-theme=light] .header__pgn-input:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 1px;
  border-color: var(--app-focus);
  box-shadow: none;
}
:root[data-theme=light] .header__text-input::placeholder,
:root[data-theme=light] .header__pgn-input::placeholder {
  color: var(--app-text-muted);
}
:root[data-theme=light] .header__panel-btn,
:root[data-theme=light] .header__pill {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
  color: var(--app-text-soft);
}
:root[data-theme=light] .header__panel-btn:hover,
:root[data-theme=light] .header__pill:hover {
  background: var(--app-surface-selected);
  color: var(--app-text);
  border-color: var(--app-border-strong);
}
:root[data-theme=light] .header__panel-btn:disabled:hover {
  background: var(--app-surface-soft);
  color: var(--app-text-soft);
}
:root[data-theme=light] .header__pill.active {
  background: var(--app-engine-soft);
  border-color: var(--app-engine);
  color: var(--app-engine);
}
:root[data-theme=light] .header__game-row {
  color: var(--app-text-soft);
}
:root[data-theme=light] .header__game-row:hover {
  background: var(--app-surface-selected);
  color: var(--app-text);
}
:root[data-theme=light] .header__game-row.active {
  background: var(--app-engine-soft);
  color: var(--app-engine);
}
:root[data-theme=light] .header__hamburger {
  color: var(--app-text-muted);
}
:root[data-theme=light] .header__hamburger:hover,
:root[data-theme=light] .header__hamburger.active {
  background: var(--app-surface-selected);
  color: var(--app-text);
}
:root[data-theme=light] .header__mobile-dropdown {
  background: var(--app-surface-raised);
  border-color: var(--app-border);
  box-shadow: 0 8px 28px var(--app-shadow);
}
:root[data-theme=light] .header__mobile-link,
:root[data-theme=light] .header__mobile-submenu-item {
  color: var(--app-text-soft);
}
:root[data-theme=light] .header__mobile-link:hover,
:root[data-theme=light] .header__mobile-submenu-item:hover {
  background: var(--app-surface-selected);
  color: var(--app-text);
}
:root[data-theme=light] .header__mobile-link.active {
  background: var(--app-surface-selected);
  color: var(--app-text);
}
:root[data-theme=light] .header__mobile-submenu {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
}
:root[data-theme=light] .header__mobile-submenu-label {
  color: var(--app-text-muted);
}
:root[data-theme=light] .header__mobile-submenu-item.active {
  background: var(--app-study-soft);
  color: var(--app-study-ink);
}
:root[data-theme=light] .header__platform-toggle:focus-visible,
:root[data-theme=light] .header__account-back:focus-visible,
:root[data-theme=light] .header__import:focus-visible,
:root[data-theme=light] .header__toggle:focus-visible,
:root[data-theme=light] .header__nav a:focus-visible,
:root[data-theme=light] .header__login:focus-visible,
:root[data-theme=light] .header__logout:focus-visible,
:root[data-theme=light] .header__panel-btn:focus-visible,
:root[data-theme=light] .header__pill:focus-visible,
:root[data-theme=light] .header__game-row:focus-visible,
:root[data-theme=light] .header__hamburger:focus-visible,
:root[data-theme=light] .header__mobile-link:focus-visible,
:root[data-theme=light] .header__mobile-submenu-item:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
}
:root[data-theme=light] .global-menu__trigger {
  color: var(--app-text);
  border-color: var(--app-border-strong);
}
:root[data-theme=light] .global-menu__trigger:hover,
:root[data-theme=light] .global-menu__trigger.active {
  background: var(--app-surface-selected);
  border-color: var(--app-focus);
}
:root[data-theme=light] .global-menu__trigger:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
}
:root[data-theme=light] .global-menu__dropdown {
  background: var(--app-surface);
  border-color: var(--app-border);
  box-shadow: 0 6px 16px var(--app-shadow);
}
:root[data-theme=light] .global-menu__item {
  color: var(--app-text);
}
:root[data-theme=light] .global-menu__item:hover {
  background: var(--app-surface-selected);
}
:root[data-theme=light] .global-menu__item--logout {
  color: var(--app-danger);
  border-top-color: var(--app-border);
}
:root[data-theme=light] .global-menu__item--logout:hover {
  background: var(--app-danger-soft);
  color: var(--app-danger);
}
:root[data-theme=light] .global-menu__arrow {
  color: var(--app-text-muted);
}
:root[data-theme=light] .global-menu__sync-identity {
  background: var(--app-surface-soft);
  border-top-color: var(--app-border);
  color: var(--app-text-muted);
}
:root[data-theme=light] .global-menu__sync-label {
  color: var(--app-text-muted);
}
:root[data-theme=light] .global-menu__sync-value {
  color: var(--app-text-soft);
}
:root[data-theme=light] .global-menu__sync-value--warning {
  color: var(--app-amber-ink);
}
:root[data-theme=light] .global-menu__release {
  background: var(--app-surface-soft);
  border-top-color: var(--app-border);
  color: var(--app-text-muted);
}
:root[data-theme=light] .global-menu__release-toggle:hover {
  background: var(--app-surface-selected);
  color: var(--app-text-soft);
}
:root[data-theme=light] .global-menu__release-product {
  color: var(--app-text);
}
:root[data-theme=light] .global-menu__release-deploy,
:root[data-theme=light] .global-menu__release-timestamp,
:root[data-theme=light] .global-menu__release-chevron,
:root[data-theme=light] .global-menu__release-copy-status {
  color: var(--app-text-muted);
}
:root[data-theme=light] .global-menu__release-details {
  border-top-color: var(--app-border);
  color: var(--app-text-muted);
}
:root[data-theme=light] .global-menu__release-copy {
  background: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text-soft);
}
:root[data-theme=light] .global-menu__release-copy:hover {
  background: var(--app-surface-selected);
  border-color: var(--app-border-strong);
  color: var(--app-text);
}
:root[data-theme=light] .global-menu__release-detail-label {
  color: var(--app-text-muted);
}
:root[data-theme=light] .global-menu__release-detail-value,
:root[data-theme=light] .global-menu__release-message {
  color: var(--app-text-soft);
}
:root[data-theme=light] .global-menu__submenu {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
}
:root[data-theme=light] .global-menu__submenu .global-menu__item {
  color: var(--app-text-soft);
}
:root[data-theme=light] .global-menu__item:focus-visible,
:root[data-theme=light] .global-menu__release-toggle:focus-visible,
:root[data-theme=light] .global-menu__release-copy:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: -2px;
}
:root[data-theme=light] .board-settings {
  border-top-color: var(--app-border);
}
:root[data-theme=light] .board-settings__label,
:root[data-theme=light] .board-settings__slider-val {
  color: var(--app-text-muted);
}
:root[data-theme=light] .board-settings__slider-row label,
:root[data-theme=light] .board-settings__segmented-label {
  color: var(--app-text-soft);
}
:root[data-theme=light] .board-settings__segmented-control {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
}
:root[data-theme=light] .board-settings__segmented-option {
  color: var(--app-text-muted);
  border-right-color: var(--app-border);
}
:root[data-theme=light] .board-settings__segmented-option:hover {
  color: var(--app-text);
  background: var(--app-surface-selected);
}
:root[data-theme=light] .board-settings__segmented-option.active {
  color: var(--app-accepted-alternate-ink);
  background: var(--app-accepted-alternate-soft);
}
:root[data-theme=light] .board-settings__reset {
  border-color: var(--app-border-strong);
  color: var(--app-text-muted);
}
:root[data-theme=light] .board-settings__reset:hover {
  border-color: var(--app-focus);
  color: var(--app-text);
}
:root[data-theme=light] .board-settings__segmented-option:focus-visible,
:root[data-theme=light] .board-settings__reset:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
}
:root[data-theme=light] .settings-toggle-row__label {
  color: var(--app-text-soft);
}
:root[data-theme=light] .settings-toggle .settings-toggle__track {
  background: var(--app-border-strong);
}
:root[data-theme=light] .settings-toggle .settings-toggle__track::after {
  background: var(--app-surface-raised);
}
:root[data-theme=light] .settings-toggle input[type=checkbox]:checked + .settings-toggle__track {
  background: var(--app-focus);
}
:root[data-theme=light] .settings-toggle input[type=checkbox]:focus-visible + .settings-toggle__track {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
}
:root[data-theme=light] .auth-modal__backdrop,
:root[data-theme=light] .detection-modal__backdrop,
:root[data-theme=light] .report-issue-modal__backdrop {
  background: rgba(41, 40, 36, 0.48);
}
:root[data-theme=light] .auth-modal__card {
  background: var(--app-surface-raised);
  border-color: var(--app-border);
  box-shadow: 0 12px 40px var(--app-shadow);
}
:root[data-theme=light] .auth-modal__header h2,
:root[data-theme=light] .auth-modal__secondary-block h3 {
  color: var(--app-text);
}
:root[data-theme=light] .auth-modal__close {
  color: var(--app-text-muted);
}
:root[data-theme=light] .auth-modal__close:hover {
  color: var(--app-text);
  background: var(--app-surface-selected);
  border-color: var(--app-border-strong);
}
:root[data-theme=light] .auth-modal__body p {
  color: var(--app-text-soft);
}
:root[data-theme=light] .auth-modal__error {
  color: var(--app-danger) !important;
}
:root[data-theme=light] .auth-modal__success {
  color: var(--app-engine) !important;
}
:root[data-theme=light] .auth-modal__dev-link {
  color: var(--app-text-soft) !important;
}
:root[data-theme=light] .auth-modal__dev-link a {
  color: var(--app-link);
}
:root[data-theme=light] .auth-modal__label {
  color: var(--app-text-soft);
}
:root[data-theme=light] .auth-modal__input {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
  color: var(--app-text);
}
:root[data-theme=light] .auth-modal__input:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 1px;
  border-color: var(--app-focus);
  box-shadow: none;
}
:root[data-theme=light] .auth-modal__input:disabled {
  color: var(--app-text-muted);
  background: var(--app-canvas-strong);
}
:root[data-theme=light] .auth-modal__secondary-block {
  border-top-color: var(--app-border);
}
:root[data-theme=light] .auth-modal__primary {
  background: var(--app-sync);
  border-color: var(--app-sync);
  color: var(--app-surface-raised);
}
:root[data-theme=light] .auth-modal__primary:hover {
  background: var(--app-sync);
  border-color: var(--app-text);
}
:root[data-theme=light] .auth-modal__secondary {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
  color: var(--app-text-soft);
}
:root[data-theme=light] .auth-modal__secondary:hover {
  background: var(--app-surface-selected);
  color: var(--app-text);
}
:root[data-theme=light] .auth-modal__close:focus-visible,
:root[data-theme=light] .auth-modal__primary:focus-visible,
:root[data-theme=light] .auth-modal__secondary:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
}
:root[data-theme=light] .detection-modal__card {
  background: var(--app-surface-raised);
  border-color: var(--app-border);
  box-shadow: 0 8px 40px var(--app-shadow);
}
:root[data-theme=light] .detection-modal__header h2,
:root[data-theme=light] .detection-modal__label,
:root[data-theme=light] .detection-modal__preset-label {
  color: var(--app-text);
}
:root[data-theme=light] .detection-modal__close {
  color: var(--app-text-muted);
}
:root[data-theme=light] .detection-modal__close:hover {
  color: var(--app-text);
  border-color: var(--app-border-strong);
  background: var(--app-surface-selected);
}
:root[data-theme=light] .detection-modal__value,
:root[data-theme=light] .detection-modal__preset-helper {
  color: var(--app-text-soft);
}
:root[data-theme=light] .detection-modal__desc,
:root[data-theme=light] .detection-modal__preview-empty,
:root[data-theme=light] .detection-modal__severity-ticks span {
  color: var(--app-text-muted);
}
:root[data-theme=light] .detection-modal__preset-option {
  border-color: var(--app-border);
  background: var(--app-surface-soft);
  color: var(--app-text);
}
:root[data-theme=light] .detection-modal__preset-option:hover {
  border-color: var(--app-analysis);
}
:root[data-theme=light] .detection-modal__preset-option.is-active {
  border-color: var(--app-analysis);
  background: var(--app-analysis-soft);
}
:root[data-theme=light] .detection-modal__preset-option:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
}
:root[data-theme=light] .detection-modal__preset-count,
:root[data-theme=light] .detection-modal__preview-total {
  color: var(--app-analysis);
}
:root[data-theme=light] .detection-modal__chip {
  background: var(--app-analysis-soft);
  border-color: var(--app-analysis);
  color: var(--app-analysis);
}
:root[data-theme=light] .detection-modal__chip--more {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
  color: var(--app-text-muted);
}
:root[data-theme=light] .detection-modal__tone-option {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
  color: var(--app-text);
}
:root[data-theme=light] .detection-modal__tone-option:hover,
:root[data-theme=light] .detection-modal__tone-option.is-active {
  background: var(--app-analysis-soft);
  border-color: var(--app-analysis);
}
:root[data-theme=light] .detection-modal__tone-option:focus-visible,
:root[data-theme=light] .detection-modal__close:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
}
:root[data-theme=light] .detection-modal__tone-label {
  color: var(--app-text);
}
:root[data-theme=light] .detection-modal__tone-desc {
  color: var(--app-text-muted);
}
:root[data-theme=light] .report-issue-modal__card {
  background: var(--app-surface-raised);
  border-color: var(--app-border);
  box-shadow: 0 12px 44px var(--app-shadow);
  color: var(--app-text);
}
:root[data-theme=light] .report-issue-modal__header {
  border-bottom-color: var(--app-border);
}
:root[data-theme=light] .report-issue-modal__route {
  color: var(--app-text-muted);
}
:root[data-theme=light] .report-issue-modal__close {
  color: var(--app-text-muted);
}
:root[data-theme=light] .report-issue-modal__close:hover {
  background: var(--app-surface-selected);
  border-color: var(--app-border-strong);
  color: var(--app-text);
}
:root[data-theme=light] .report-issue-modal__close:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
}
:root[data-theme=light] .report-issue-modal__copy-status,
:root[data-theme=light] .report-issue-modal__status {
  color: var(--app-engine);
}
:root[data-theme=light] .report-issue-modal__error {
  color: var(--app-danger);
}
:root[data-theme=light] .report-issue-modal__issue-id {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
}
:root[data-theme=light] .report-issue-modal__issue-id span {
  color: var(--app-text-soft);
}
:root[data-theme=light] .report-issue-modal__issue-id code {
  color: var(--app-text);
}
:root[data-theme=light] .report-issue-modal__upload-progress,
:root[data-theme=light] .report-issue-modal__upload-item {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
}
:root[data-theme=light] .report-issue-modal__upload-title,
:root[data-theme=light] .report-issue-modal__upload-name {
  color: var(--app-text);
}
:root[data-theme=light] .report-issue-modal__upload-count,
:root[data-theme=light] .report-issue-modal__upload-item--uploaded .report-issue-modal__upload-state {
  color: var(--app-engine);
}
:root[data-theme=light] .report-issue-modal__upload-state,
:root[data-theme=light] .report-issue-modal__upload-meta {
  color: var(--app-text-muted);
}
:root[data-theme=light] .report-issue-modal__upload-item--failed .report-issue-modal__upload-state {
  color: var(--app-danger);
}
:root[data-theme=light] .report-issue-modal__upload-bar {
  background: var(--app-border);
}
:root[data-theme=light] .report-issue-modal__upload-bar span {
  background: var(--app-analysis);
}
:root[data-theme=light] .report-issue-modal__upload-item--uploaded .report-issue-modal__upload-bar span {
  background: var(--app-engine);
}
:root[data-theme=light] .report-issue-modal__upload-item--failed .report-issue-modal__upload-bar span {
  background: var(--app-danger);
}
:root[data-theme=light] .report-form__issue-id,
:root[data-theme=light] .report-form__draft-state,
:root[data-theme=light] .report-form__dropzone,
:root[data-theme=light] .report-form__attachment-list li {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
}
:root[data-theme=light] .report-form__issue-id code,
:root[data-theme=light] .report-form__issue-label,
:root[data-theme=light] .report-form__draft-label,
:root[data-theme=light] .report-form__label,
:root[data-theme=light] .report-form__dropzone-title,
:root[data-theme=light] .report-form__attachment-list {
  color: var(--app-text);
}
:root[data-theme=light] .report-form__draft-state,
:root[data-theme=light] .report-form__hint,
:root[data-theme=light] .report-form__muted,
:root[data-theme=light] .report-form__dropzone-hint,
:root[data-theme=light] .report-form__file-input,
:root[data-theme=light] .report-form__attachment-meta {
  color: var(--app-text-muted);
}
:root[data-theme=light] .report-form__draft-value {
  color: var(--app-engine);
}
:root[data-theme=light] .report-form__copy-message,
:root[data-theme=light] .report-form__link-button {
  color: var(--app-link);
}
:root[data-theme=light] .report-form__error {
  color: var(--app-danger);
}
:root[data-theme=light] .report-form__field .admin-token-input,
:root[data-theme=light] .report-form__textarea,
:root[data-theme=light] .report-form__select {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
  color: var(--app-text);
}
:root[data-theme=light] .report-form__field .admin-token-input:focus-visible,
:root[data-theme=light] .report-form__textarea:focus-visible,
:root[data-theme=light] .report-form__select:focus-visible,
:root[data-theme=light] .report-form__file-input:focus-visible,
:root[data-theme=light] .report-form__link-button:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
  border-color: var(--app-focus);
}
:root[data-theme=light] .report-form__dropzone:hover {
  background: var(--app-surface-selected);
  border-color: var(--app-focus);
}
:root[data-theme=light] .pp-toast {
  background: var(--app-text);
  color: var(--app-surface-raised);
  box-shadow: 0 4px 16px var(--app-shadow);
}
:root[data-theme=light] .skeleton-block {
  background: var(--app-surface-selected);
}

:root[data-theme=light] .analyse__tools {
  background: var(--app-surface);
  color: var(--app-text);
  border-color: var(--app-border);
}
:root[data-theme=light] .analyse__engine-block,
:root[data-theme=light] .analyse__moves-stack {
  background: var(--app-surface);
}
:root[data-theme=light] .analyse__middle-lower,
:root[data-theme=light] .analyse__secondary {
  background: var(--app-surface-soft);
  color: var(--app-text-soft);
}
:root[data-theme=light] .analyse__split-handle-grip,
:root[data-theme=light] .analyse .eval-graph__resize-handle::before {
  background: var(--app-border-strong);
}
:root[data-theme=light] .analyse__split-handle:hover .analyse__split-handle-grip,
:root[data-theme=light] .analyse__split-handle:focus-visible .analyse__split-handle-grip,
:root[data-theme=light] .analyse .eval-graph__resize-handle:hover::before,
:root[data-theme=light] .analyse .eval-graph__resize-handle:active::before {
  background: var(--app-focus);
  opacity: 1;
}
:root[data-theme=light] .analyse__split-handle:focus-visible,
:root[data-theme=light] .analyse .eval-graph__resize-handle:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
}
:root[data-theme=light] .action-menu {
  background: var(--app-surface-raised);
  border-color: var(--app-border);
  color: var(--app-text);
  box-shadow: 0 8px 28px var(--app-shadow);
}
:root[data-theme=light] .action-menu h2 {
  color: var(--app-text-muted);
}
:root[data-theme=light] .action-menu h2::before,
:root[data-theme=light] .action-menu h2::after {
  border-top-color: var(--app-border);
}
:root[data-theme=light] .action-menu__close-btn,
:root[data-theme=light] .action-menu__back-btn {
  color: var(--app-text-muted);
}
:root[data-theme=light] .action-menu__close-btn:hover,
:root[data-theme=light] .action-menu__back-btn:hover {
  color: var(--app-text);
}
:root[data-theme=light] .action-menu__tools button,
:root[data-theme=light] .action-menu__tools > a,
:root[data-theme=light] .action-menu__slider-row {
  color: var(--app-text-soft);
}
:root[data-theme=light] .action-menu__tools button:hover,
:root[data-theme=light] .action-menu__tools > a:hover,
:root[data-theme=light] .action-menu__display .settings-toggle-row:hover .settings-toggle-row__label {
  color: var(--app-focus);
}
:root[data-theme=light] .action-menu__display .settings-toggle-row,
:root[data-theme=light] .action-menu__slider-row,
:root[data-theme=light] .action-menu__subpanel .detection-modal__row {
  border-color: var(--app-border);
}
:root[data-theme=light] .action-menu__coming,
:root[data-theme=light] .action-menu__val,
:root[data-theme=light] .action-menu__subpanel .detection-modal__value,
:root[data-theme=light] .action-menu__subpanel .detection-modal__desc {
  color: var(--app-text-muted);
}
:root[data-theme=light] .action-menu__subpanel .detection-modal__label {
  color: var(--app-text-soft);
}
:root[data-theme=light] .action-menu button:focus-visible,
:root[data-theme=light] .action-menu a:focus-visible,
:root[data-theme=light] .action-menu input:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
}
:root[data-theme=light] .analyse__moves {
  color: var(--app-text);
}
:root[data-theme=light] .analyse .tview2 move {
  color: var(--app-text-soft);
}
:root[data-theme=light] .analyse .tview2 move:hover:not(.active) {
  background: var(--app-surface-selected);
  color: var(--app-text);
}
:root[data-theme=light] .analyse .tview2 move.active {
  background: var(--app-engine);
  color: var(--app-surface-raised);
}
:root[data-theme=light] .analyse .tview2 move.active index,
:root[data-theme=light] .analyse .tview2 move.active eval {
  color: var(--app-surface-raised);
}
:root[data-theme=light] .analyse .tview2 move.context-active:not(.active) {
  background: var(--app-analysis-soft);
  color: var(--app-text);
  outline-color: var(--app-analysis);
}
:root[data-theme=light] .analyse .tview2 move index,
:root[data-theme=light] .analyse .tview2-column > index {
  color: var(--app-text-muted);
}
:root[data-theme=light] .analyse .tview2-column > index {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
}
:root[data-theme=light] .analyse .tview2-column > move.empty {
  color: var(--app-text-faint);
}
:root[data-theme=light] .analyse .tview2-column > interrupt {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
}
:root[data-theme=light] .analyse .tview2-column > interrupt line > branch,
:root[data-theme=light] .analyse .tview2-column > interrupt line > branch::after {
  border-color: var(--app-border-strong);
}
:root[data-theme=light] .analyse .tview2-column > interrupt line > button.variation-remove {
  color: var(--app-text-muted);
}
:root[data-theme=light] .analyse .tview2-column > interrupt line > button.variation-remove:hover {
  color: var(--app-danger);
}
:root[data-theme=light] .analyse .tview2 move:focus-visible,
:root[data-theme=light] .analyse .tview2-column > interrupt line > button.variation-remove:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: -2px;
}
:root[data-theme=light] .analyse .ceval,
:root[data-theme=light] .analyse .pv_box {
  background: var(--app-surface-soft);
  color: var(--app-text);
}
:root[data-theme=light] .analyse .ceval__progress {
  background: var(--app-border);
}
:root[data-theme=light] .analyse .ceval .cmn-toggle,
:root[data-theme=light] .analyse .ceval .settings-gear {
  color: var(--app-text-muted);
}
:root[data-theme=light] .analyse .ceval .cmn-toggle:hover,
:root[data-theme=light] .analyse .ceval .settings-gear:hover {
  color: var(--app-text);
}
:root[data-theme=light] .analyse .ceval .cmn-toggle.active {
  color: var(--app-engine);
}
:root[data-theme=light] .analyse .ceval .settings-gear.active {
  color: var(--app-surface-raised);
  background: var(--app-engine);
}
:root[data-theme=light] .analyse .ceval pearl,
:root[data-theme=light] .analyse .ceval__score {
  color: var(--app-text);
}
:root[data-theme=light] .analyse .ceval .engine {
  color: var(--app-text-soft);
}
:root[data-theme=light] .analyse .ceval .engine .info,
:root[data-theme=light] .analyse .ceval__info {
  color: var(--app-text-muted);
}
:root[data-theme=light] .analyse .ceval .engine .info.info--active {
  color: var(--app-engine);
}
:root[data-theme=light] .analyse .ceval .cmn-toggle:focus-visible,
:root[data-theme=light] .analyse .ceval .settings-gear:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
}
:root[data-theme=light] .analyse .pv {
  color: var(--app-text-soft);
}
:root[data-theme=light] .analyse .pv--nowrap {
  border-color: var(--app-border);
}
:root[data-theme=light] .analyse .pv-num,
:root[data-theme=light] .analyse .pv-cont,
:root[data-theme=light] .analyse .pv-cont .pv-num,
:root[data-theme=light] .analyse .pv-cont .pv-san {
  color: var(--app-text-muted);
}
:root[data-theme=light] .analyse .pv-first .pv-num {
  color: var(--app-text-muted);
}
:root[data-theme=light] .analyse .pv-first .pv-san {
  color: var(--app-text);
}
:root[data-theme=light] .analyse .pv-san:hover,
:root[data-theme=light] .analyse .pv-cont .pv-san:hover {
  color: var(--app-text);
  background: var(--app-surface-selected);
}
:root[data-theme=light] .analyse .ceval-settings {
  background: var(--app-surface-raised);
  border: 1px solid var(--app-border);
  color: var(--app-text);
}
:root[data-theme=light] .analyse .ceval-settings__label {
  color: var(--app-text-soft);
}
:root[data-theme=light] .analyse .ceval-settings__val {
  color: var(--app-text-muted);
}
:root[data-theme=light] .analyse .move-nav-bar,
:root[data-theme=light] .analyse .jumps,
:root[data-theme=light] .analyse__controls .jumps,
:root[data-theme=light] .analyse .practice-rail__btn,
:root[data-theme=light] .analyse .practice-rail__settings {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
  color: var(--app-text-soft);
}
:root[data-theme=light] .analyse__controls .move-nav-bar {
  --mobile-move-nav-tab-bg: var(--app-surface-soft);
  --mobile-move-nav-tab-bg-active: var(--app-analysis-soft);
  --mobile-move-nav-tab-border: var(--app-border);
  --mobile-move-nav-tab-border-active: var(--app-focus);
}
:root[data-theme=light] .analyse .move-nav-bar__right {
  border-color: var(--app-border);
}
:root[data-theme=light] .analyse .move-nav-bar > button.fbt {
  border-color: var(--app-border);
}
:root[data-theme=light] .analyse .fbt:hover:not(:disabled),
:root[data-theme=light] .analyse .practice-rail__btn:hover:not([disabled]) {
  background: var(--app-surface-selected);
  color: var(--app-text);
}
:root[data-theme=light] .analyse .fbt.active,
:root[data-theme=light] .analyse .practice-rail__btn.active {
  background: var(--app-analysis-soft);
  color: var(--app-focus);
  border-color: var(--app-focus);
}
:root[data-theme=light] .analyse .fbt:disabled,
:root[data-theme=light] .analyse .practice-rail__btn:disabled {
  color: var(--app-text-muted);
  opacity: 0.55;
}
:root[data-theme=light] .analyse .fbt:focus-visible,
:root[data-theme=light] .analyse .practice-rail__btn:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: -2px;
}
:root[data-theme=light] .retro-box,
:root[data-theme=light] .practice-box {
  background: var(--app-surface-soft);
  color: var(--app-text-soft);
  border-color: var(--app-border);
}
:root[data-theme=light] .retro-box .retro-box__title,
:root[data-theme=light] .practice-box__title {
  background: var(--app-surface-selected);
  border-color: var(--app-border);
  color: var(--app-text);
}
:root[data-theme=light] .retro-box .retro-box__progress,
:root[data-theme=light] .retro-box .retro-box__close,
:root[data-theme=light] .retro-choice__section-title {
  color: var(--app-text-muted);
}
:root[data-theme=light] .retro-box .retro-box__close:hover {
  color: var(--app-text);
}
:root[data-theme=light] .retro-choice__row {
  background: var(--app-surface);
  border-color: var(--app-border);
}
:root[data-theme=light] .retro-choice__row:hover {
  background: var(--app-surface-selected);
  border-color: var(--app-border-strong);
}
:root[data-theme=light] .analyse-review-controls,
:root[data-theme=light] .analysis-summary,
:root[data-theme=light] .pgn-import,
:root[data-theme=light] .keyboard-help__box {
  background: var(--app-surface);
  color: var(--app-text);
}
:root[data-theme=light] .analyse-review-controls__status,
:root[data-theme=light] .analyse-review-controls__hint,
:root[data-theme=light] .pgn-import__status,
:root[data-theme=light] .summary__name,
:root[data-theme=light] .summary__breakdown {
  color: var(--app-text-muted);
}
:root[data-theme=light] .summary__accuracy {
  color: var(--app-text);
}
:root[data-theme=light] .analysis-summary,
:root[data-theme=light] .summary__col + .summary__col {
  border-color: var(--app-border);
}
:root[data-theme=light] .pgn-import__input {
  background: var(--app-surface-raised);
  color: var(--app-text);
  border-color: var(--app-border);
}
:root[data-theme=light] .pgn-import__input:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 1px;
  border-color: var(--app-focus);
}
:root[data-theme=light] .analyse__controls .analyse-review-controls__row > button,
:root[data-theme=light] .analyse__underboard .analyse-review-controls__row > button {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
  color: var(--app-text-soft);
}
:root[data-theme=light] .analyse__controls .analyse-review-controls__row > button:hover:not([disabled]),
:root[data-theme=light] .analyse__underboard .analyse-review-controls__row > button:hover:not([disabled]) {
  background: var(--app-surface-selected);
  border-color: var(--app-focus);
  color: var(--app-text);
}
:root[data-theme=light] .analyse__controls .analyse-review-controls__row > button:focus-visible,
:root[data-theme=light] .analyse__underboard .analyse-review-controls__row > button:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
}
:root[data-theme=light] .btn-review--primary,
:root[data-theme=light] .btn-review--complete,
:root[data-theme=light] .btn-review--running {
  border-color: var(--app-engine) !important;
  color: var(--app-engine) !important;
}
:root[data-theme=light] .btn-review--primary:hover:not([disabled]),
:root[data-theme=light] .btn-review--complete:hover:not([disabled]),
:root[data-theme=light] .btn-review--running:hover:not([disabled]) {
  background: var(--app-engine-soft) !important;
}
:root[data-theme=light] .btn-mistakes {
  border-color: var(--app-amber-ink) !important;
  color: var(--app-amber-ink) !important;
}
:root[data-theme=light] .btn-mistakes:hover:not([disabled]) {
  background: var(--app-amber-soft) !important;
}
:root[data-theme=light] .btn-mistakes--active {
  background: var(--app-amber) !important;
  border-color: var(--app-amber) !important;
  color: var(--app-amber-fill-ink) !important;
}
:root[data-theme=light] .btn-study-tools {
  color: var(--app-study-ink) !important;
  border-color: var(--app-study-ink) !important;
}
:root[data-theme=light] .btn-study-tools:hover:not([disabled]) {
  background: var(--app-study-soft) !important;
}
:root[data-theme=light] .btn-study-tools--active {
  background: var(--app-study) !important;
  border-color: var(--app-study) !important;
  color: #10233b !important;
}
:root[data-theme=light] .analyse__player_strip {
  color: var(--app-text-soft);
}
:root[data-theme=light] .player-strip__identity:not(.player-strip__identity--winner):not(.player-strip__identity--loser):not(.player-strip__identity--draw) {
  border-color: var(--app-border);
}
:root[data-theme=light] .player-strip__identity--winner {
  border-color: var(--app-engine);
}
:root[data-theme=light] .player-strip__identity--loser {
  border-color: var(--app-danger);
}
:root[data-theme=light] .player-strip__identity--draw {
  border-color: var(--app-text-muted);
}
:root[data-theme=light] .analyse__clock {
  background: var(--app-surface-soft);
  color: var(--app-text-soft);
}
:root[data-theme=light] .analyse__clock.active {
  background: var(--app-amber-soft);
  color: var(--app-amber-ink);
}
:root[data-theme=light] .analyse__move-time {
  color: var(--app-text-soft);
}
:root[data-theme=light] .analyse__remaining-time {
  color: inherit;
}
:root[data-theme=light] .analyse__clock-separator {
  color: var(--app-border-strong);
}
:root[data-theme=light] .analyse .bookmark-btn {
  color: var(--app-text-muted);
}
:root[data-theme=light] .analyse .bookmark-btn:hover,
:root[data-theme=light] .analyse .bookmark-btn--active {
  color: var(--app-amber-ink);
}
:root[data-theme=light] .analyse .tview2 move.bookmarked {
  background: var(--app-amber-soft);
}
:root[data-theme=light] .analyse .variation-fold {
  color: var(--app-text-muted);
}
:root[data-theme=light] .analyse .variation-fold:hover,
:root[data-theme=light] .analyse .variation-fold--open {
  color: var(--app-text);
}
:root[data-theme=light] .analyse .bookmark-btn:focus-visible,
:root[data-theme=light] .analyse .variation-fold:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 1px;
}
:root[data-theme=light] .analyse .annotation-form {
  background: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text);
}
:root[data-theme=light] .analyse .annotation-form__title {
  color: var(--app-text);
}
:root[data-theme=light] .analyse .annotation-form__close {
  color: var(--app-text-muted);
}
:root[data-theme=light] .analyse .annotation-form__glyph-group-label {
  color: var(--app-text-soft);
}
:root[data-theme=light] .analyse .annotation-form__close:hover {
  color: var(--app-text);
}
:root[data-theme=light] .analyse .annotation-form__other-comment {
  background: var(--app-surface-soft);
  color: var(--app-text-soft);
}
:root[data-theme=light] .analyse .annotation-form__other-by {
  color: var(--app-link);
}
:root[data-theme=light] .analyse .annotation-form__textarea {
  background: var(--app-surface-raised);
  border-color: var(--app-border);
  color: var(--app-text);
}
:root[data-theme=light] .analyse .annotation-form__discard-btn,
:root[data-theme=light] .analyse .annotation-form__glyph-btn {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
  color: var(--app-text-soft);
}
:root[data-theme=light] .analyse .annotation-form__save-btn {
  background: var(--app-analysis-soft);
  border-color: var(--app-analysis);
  color: var(--app-analysis);
}
:root[data-theme=light] .analyse .annotation-form__discard-btn:hover {
  background: var(--app-danger-soft);
  border-color: var(--app-danger);
  color: var(--app-text);
}
:root[data-theme=light] .analyse .annotation-form__glyph-btn:hover,
:root[data-theme=light] .analyse .annotation-form__save-btn:hover {
  background: var(--app-surface-selected);
}
:root[data-theme=light] .analyse .annotation-form__glyph-btn.active {
  background: var(--app-engine-soft);
  border-color: var(--app-engine);
  color: var(--app-text);
}
:root[data-theme=light] .analyse .annotation-form button:focus-visible,
:root[data-theme=light] .analyse .annotation-form textarea:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
}
:root[data-theme=light] .save-flow-modal__card {
  background: var(--app-surface-raised);
  border-color: var(--app-border);
  color: var(--app-text);
  box-shadow: 0 12px 40px var(--app-shadow);
}
:root[data-theme=light] .save-flow-modal__head,
:root[data-theme=light] .save-flow-modal__foot {
  border-color: var(--app-border);
}
:root[data-theme=light] .save-flow-modal__ctx-line {
  background: var(--app-study-soft);
  border-color: var(--app-study-ink);
  color: var(--app-study-ink);
}
:root[data-theme=light] .save-flow-modal__ctx-src,
:root[data-theme=light] .save-flow-modal__field-label,
:root[data-theme=light] .save-flow-modal__hint {
  color: var(--app-text-soft);
}
:root[data-theme=light] .save-flow-modal__cat-tile {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
  color: var(--app-text);
}
:root[data-theme=light] .save-flow-modal__cat-tile:hover,
:root[data-theme=light] .save-flow-modal__cat-tile--picked {
  background: var(--app-study-soft);
  border-color: var(--app-study-ink);
  color: var(--app-study-ink);
}
:root[data-theme=light] .save-flow-modal__tags-line,
:root[data-theme=light] .save-flow-modal__text-line,
:root[data-theme=light] .save-flow-modal__notes-field,
:root[data-theme=light] .save-flow-modal__select-line {
  background: var(--app-surface-raised);
  border-color: var(--app-border);
  color: var(--app-text);
}
:root[data-theme=light] .save-flow-modal__quick-save {
  color: var(--app-text-muted);
}
:root[data-theme=light] .save-flow-modal__quick-save:hover {
  color: var(--app-text);
}
:root[data-theme=light] .save-flow-modal__save {
  background: var(--app-study);
  color: var(--app-study-fill-ink);
}
:root[data-theme=light] .save-flow-modal__save:hover:not(:disabled) {
  background: #78ace8;
}
:root[data-theme=light] .save-flow-modal__save:active:not(:disabled) {
  background: #337acb;
  color: var(--app-study-pressed-ink);
}
:root[data-theme=light] .save-flow-modal__save:disabled {
  background: var(--app-canvas-strong);
  color: var(--app-text-muted);
  border: 1px solid var(--app-border);
  opacity: 1;
}
:root[data-theme=light] .save-flow-modal button:focus-visible,
:root[data-theme=light] .save-flow-modal input:focus-visible,
:root[data-theme=light] .save-flow-modal textarea:focus-visible,
:root[data-theme=light] .save-flow-modal select:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
}
:root[data-theme=light] .analyse .qnr-wiz {
  background: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text);
}
:root[data-theme=light] .analyse .qnr-module {
  background: var(--app-surface);
  border-color: var(--app-border);
  box-shadow: 0 0 0 1px var(--app-border);
}
:root[data-theme=light] .analyse .qnr-module__title,
:root[data-theme=light] .analyse .qnr-module__body {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
  color: var(--app-text);
}
:root[data-theme=light] .analyse .qnr-wiz__q {
  color: var(--app-text);
}
:root[data-theme=light] .analyse .qnr-wiz__label,
:root[data-theme=light] .analyse .qnr-wiz__sub,
:root[data-theme=light] .analyse .qnr-wiz__status,
:root[data-theme=light] .analyse .qnr-wiz__restart,
:root[data-theme=light] .analyse .qnr-wiz__link,
:root[data-theme=light] .analyse .qnr-answer-row__label,
:root[data-theme=light] .analyse .qnr-answer-empty {
  color: var(--app-text-soft);
}
:root[data-theme=light] .analyse .qnr-opt-tile {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
  color: var(--app-text);
}
:root[data-theme=light] .analyse .qnr-opt-tile:hover:not(:disabled) {
  filter: none;
}
:root[data-theme=light] .analyse .qnr-opt-tile--win:hover:not(:disabled),
:root[data-theme=light] .analyse .qnr-opt-tile--loss:hover:not(:disabled) {
  background: var(--qnr-fam-wash);
  border-color: var(--qnr-fam-solid);
  color: var(--app-text);
}
:root[data-theme=light] .analyse .qnr-opt-tile--win,
:root[data-theme=light] .analyse .qnr-opt-tile--loss,
:root[data-theme=light] .analyse .qnr-chip,
:root[data-theme=light] .analyse .qnr-answer-chip {
  background: var(--qnr-fam-wash, var(--app-surface-soft));
  border-color: var(--qnr-fam-solid, var(--app-border));
  color: var(--app-text);
}
:root[data-theme=light] .analyse .qnr-opt-tile--picked {
  background: var(--qnr-fam-solid, var(--app-study));
  border-color: var(--qnr-fam-solid, var(--app-study));
  color: var(--qnr-fam-ink, var(--app-text));
}
:root[data-theme=light] .analyse .qnr-opt-tile--disabled {
  background: var(--qnr-fam-wash, var(--app-surface-soft));
  border-color: var(--qnr-fam-solid, var(--app-border));
  color: var(--app-text-muted);
  opacity: 1;
}
:root[data-theme=light] .analyse .qnr-opt-tile--fam-material {
  --qnr-fam-ink: #100303;
}
:root[data-theme=light] .analyse .qnr-wiz__yn-btn,
:root[data-theme=light] .analyse .qnr-wiz__confirm {
  background: var(--app-study-soft);
  border-color: var(--app-study-ink);
  color: var(--app-study-ink);
}
:root[data-theme=light] .analyse .qnr-pulse--satisfied {
  color: var(--app-study-fill-ink);
}
:root[data-theme=light] .analyse .qnr-wiz button:focus-visible,
:root[data-theme=light] .analyse .qnr-module button:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
}
:root[data-theme=light] .analyse .analysis-repertoire {
  background: var(--app-surface);
  border-color: var(--app-border);
}
:root[data-theme=light] .analyse .analysis-repertoire__header {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
}
:root[data-theme=light] .analyse .analysis-repertoire__header:hover {
  background: var(--app-surface-selected);
}
:root[data-theme=light] .analyse .analysis-repertoire__title,
:root[data-theme=light] .analyse .analysis-repertoire__status {
  color: var(--app-text);
}
:root[data-theme=light] .analyse .analysis-repertoire__header-meta,
:root[data-theme=light] .analyse .analysis-repertoire__toggle,
:root[data-theme=light] .analyse .analysis-repertoire__meta,
:root[data-theme=light] .analyse .analysis-repertoire__jump,
:root[data-theme=light] .analyse .analysis-repertoire__message {
  color: var(--app-text-muted);
}
:root[data-theme=light] .analyse .analysis-repertoire__source-row {
  border-color: var(--app-border);
}
:root[data-theme=light] .analyse .analysis-repertoire__divergence {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
  color: var(--app-text);
}
:root[data-theme=light] .analyse .analysis-repertoire__divergence:hover {
  background: var(--app-surface-selected);
}
:root[data-theme=light] .analyse .analysis-repertoire .repertoire__line-prefix,
:root[data-theme=light] .analyse .analysis-repertoire .repertoire__line-metrics {
  color: var(--app-text-muted);
}
:root[data-theme=light] .analyse .analysis-repertoire .repertoire__line-text,
:root[data-theme=light] .analyse .analysis-repertoire .repertoire__line-expected {
  color: var(--app-text-soft);
}
:root[data-theme=light] .analyse .analysis-repertoire .repertoire__line-action {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
  color: var(--app-text-soft);
}
:root[data-theme=light] .analyse .analysis-repertoire .repertoire__line-action:hover:not(:disabled) {
  background: var(--app-surface-selected);
  border-color: var(--app-focus);
}
:root[data-theme=light] .analyse .analysis-repertoire .repertoire__line-action:disabled {
  background: var(--app-canvas-strong);
  border-color: var(--app-border);
  color: var(--app-text-muted);
  opacity: 1;
}
:root[data-theme=light] .analyse .analysis-repertoire button:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
}
:root[data-theme=light] .analyse .eval-graph svg,
:root[data-theme=light] .analyse .eval-graph__empty {
  background: var(--app-surface-soft);
}
:root[data-theme=light] .analyse .eval-graph__empty,
:root[data-theme=light] .analyse .eval-graph__review-engine {
  color: var(--app-text-muted);
}
:root[data-theme=light] .analyse .eval-graph__tooltip {
  background: var(--app-surface-raised);
  border-color: var(--app-border);
  color: var(--app-text);
  box-shadow: 0 4px 16px var(--app-shadow);
}
:root[data-theme=light] .keyboard-help {
  background: rgba(41, 40, 36, 0.48);
}
:root[data-theme=light] .keyboard-help__box {
  border-color: var(--app-border);
  box-shadow: 0 12px 40px var(--app-shadow);
}
:root[data-theme=light] .keyboard-help__box h2,
:root[data-theme=light] .keyboard-help__box td:first-child {
  color: var(--app-text);
}
:root[data-theme=light] .keyboard-help__box td {
  color: var(--app-text-soft);
}
:root[data-theme=light] .keyboard-help__box tr + tr td {
  border-color: var(--app-border);
}
:root[data-theme=light] .keyboard-help__close {
  color: var(--app-text-muted);
}
:root[data-theme=light] .keyboard-help__close:hover {
  color: var(--app-text);
}
:root[data-theme=light] .keyboard-help__close:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
}
:root[data-theme=light] #move-ctx-menu {
  background: var(--app-surface-raised);
  border-color: var(--app-border);
  box-shadow: 0 4px 16px var(--app-shadow);
}
:root[data-theme=light] #move-ctx-menu p.title {
  color: var(--app-text-soft);
  border-color: var(--app-border);
}
:root[data-theme=light] #move-ctx-menu a {
  color: var(--app-text-soft);
}
:root[data-theme=light] #move-ctx-menu a:hover {
  background: var(--app-surface-selected);
  color: var(--app-text);
}
:root[data-theme=light] #move-ctx-menu a.ctx-puzzle {
  border-color: var(--app-border);
}
:root[data-theme=light] .board-editor {
  color: var(--app-text);
}
:root[data-theme=light] .board-editor .spare {
  background: var(--app-surface-soft);
  box-shadow: inset 0 2px 5px var(--app-shadow);
}
:root[data-theme=light] .board-editor .spare .no-square:hover {
  background: var(--app-surface-selected);
}
:root[data-theme=light] .board-editor .spare .no-square.selected-square {
  background: var(--app-analysis-soft);
}
:root[data-theme=light] .board-editor .spare .no-square.pointer:hover {
  background: var(--app-study-soft);
}
:root[data-theme=light] .board-editor .spare .no-square.pointer.selected-square {
  background: rgba(74, 144, 226, 0.26);
}
:root[data-theme=light] .board-editor .spare .no-square.trash:hover {
  background: var(--app-danger-soft);
}
:root[data-theme=light] .board-editor .spare .no-square.trash.selected-square {
  background: rgba(168, 70, 67, 0.24);
}
:root[data-theme=light] .board-editor .spare piece.pointer,
:root[data-theme=light] .board-editor .spare piece.trash {
  color: var(--app-text-muted);
}
:root[data-theme=light] .board-editor .spare .no-square.pointer.selected-square piece.pointer {
  color: var(--app-study-ink);
}
:root[data-theme=light] .board-editor .spare .no-square.trash.selected-square piece.trash {
  color: var(--app-danger);
}
:root[data-theme=light] .board-editor__controls {
  color: var(--app-text-soft);
}
:root[data-theme=light] .board-editor .metadata {
  background: var(--app-surface);
  border-color: var(--app-border);
}
:root[data-theme=light] .board-editor__controls strong,
:root[data-theme=light] .board-editor__inputs strong {
  color: var(--app-text-muted);
}
:root[data-theme=light] .board-editor__controls select,
:root[data-theme=light] .board-editor select.positions,
:root[data-theme=light] .board-editor__fen-input,
:root[data-theme=light] .board-editor__url-input {
  background: var(--app-surface-raised);
  border-color: var(--app-border);
  color: var(--app-text);
}
:root[data-theme=light] .board-editor__url-input {
  color: var(--app-text-muted);
}
:root[data-theme=light] .board-editor__controls select:disabled,
:root[data-theme=light] .board-editor__fen-input:disabled,
:root[data-theme=light] .board-editor__url-input:disabled {
  background: var(--app-canvas-strong);
  color: var(--app-text-muted);
}
:root[data-theme=light] .board-editor .actions .button {
  background: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text-soft);
}
:root[data-theme=light] .board-editor .actions .button:hover:not(.disabled):not(:disabled) {
  background: var(--app-surface-selected);
  border-color: var(--app-focus);
  color: var(--app-text);
}
:root[data-theme=light] .board-editor .actions .button.disabled,
:root[data-theme=light] .board-editor .actions .button:disabled {
  background: var(--app-canvas-strong);
  border-color: var(--app-border);
  color: var(--app-text-muted);
  opacity: 1;
}
:root[data-theme=light] .board-editor .actions .button:focus-visible,
:root[data-theme=light] .board-editor__controls select:focus-visible,
:root[data-theme=light] .board-editor__fen-input:focus-visible,
:root[data-theme=light] .board-editor__url-input:focus-visible,
:root[data-theme=light] .board-editor .spare .no-square:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
  border-color: var(--app-focus);
}
:root[data-theme=light] .board-editor__fen-input:invalid {
  border-color: var(--app-danger);
}

:root[data-theme=light] .games-view,
:root[data-theme=light] .stats-page,
:root[data-theme=light] .puzzle-page {
  color: var(--app-text);
}
:root[data-theme=light] .games-view__controls,
:root[data-theme=light] .games-view__quick-pills {
  background: var(--app-surface);
  border-color: var(--app-border);
}
:root[data-theme=light] .games-view__filter-label,
:root[data-theme=light] .games-view__summary,
:root[data-theme=light] .games-view__page-info,
:root[data-theme=light] .games-view__empty-hint,
:root[data-theme=light] .game-list__header,
:root[data-theme=light] .game-list__page-size,
:root[data-theme=light] .game-list__page-info {
  color: var(--app-text-muted);
}
:root[data-theme=light] .games-view__pill,
:root[data-theme=light] .games-view__density-btn,
:root[data-theme=light] .games-view__advanced-toggle,
:root[data-theme=light] .games-view__account-trigger,
:root[data-theme=light] .games-view__page-btn,
:root[data-theme=light] .game-list__page-size-btn,
:root[data-theme=light] .games-view__select-toggle,
:root[data-theme=light] .games-view__clear {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
  color: var(--app-text-soft);
}
:root[data-theme=light] .games-view__pill:hover,
:root[data-theme=light] .games-view__density-btn:hover,
:root[data-theme=light] .games-view__advanced-toggle:hover,
:root[data-theme=light] .games-view__account-trigger:hover,
:root[data-theme=light] .games-view__page-btn:hover:not(:disabled),
:root[data-theme=light] .game-list__page-size-btn:hover,
:root[data-theme=light] .games-view__select-toggle:hover,
:root[data-theme=light] .games-view__clear:hover {
  background: var(--app-surface-selected);
  border-color: var(--app-border-strong);
  color: var(--app-text);
}
:root[data-theme=light] .games-view__pill.active,
:root[data-theme=light] .games-view__density-btn.active,
:root[data-theme=light] .games-view__advanced-toggle.active,
:root[data-theme=light] .games-view__account-trigger.active,
:root[data-theme=light] .game-list__page-size-btn.active,
:root[data-theme=light] .games-view__select-toggle.active {
  background: var(--app-analysis-soft);
  border-color: var(--app-analysis);
  color: var(--app-analysis);
}
:root[data-theme=light] .games-view__search {
  background: var(--app-surface-raised);
  border-color: var(--app-border);
  color: var(--app-text);
}
:root[data-theme=light] .games-view__search::placeholder {
  color: var(--app-text-muted);
}
:root[data-theme=light] .games-view__search:focus-visible,
:root[data-theme=light] .games-view__pill:focus-visible,
:root[data-theme=light] .games-view__density-btn:focus-visible,
:root[data-theme=light] .games-view__advanced-toggle:focus-visible,
:root[data-theme=light] .games-view__account-trigger:focus-visible,
:root[data-theme=light] .games-view__account-option:focus-visible,
:root[data-theme=light] .games-view__page-btn:focus-visible,
:root[data-theme=light] .game-list__page-size-btn:focus-visible,
:root[data-theme=light] .games-view__select-toggle:focus-visible,
:root[data-theme=light] .games-view__clear:focus-visible,
:root[data-theme=light] .games-view__advanced-apply:focus-visible,
:root[data-theme=light] .game-list__row:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
}
:root[data-theme=light] .games-view__page-btn:disabled,
:root[data-theme=light] .game-list__page-size-btn:disabled {
  background: var(--app-canvas-strong);
  border-color: var(--app-border);
  color: var(--app-text-muted);
  opacity: 1;
}
:root[data-theme=light] .games-view__account-menu {
  background: var(--app-surface-raised);
  border-color: var(--app-border);
  box-shadow: 0 8px 24px var(--app-shadow);
}
:root[data-theme=light] .games-view__account-option {
  color: var(--app-text-soft);
}
:root[data-theme=light] .games-view__account-option:hover {
  background: var(--app-surface-selected);
  color: var(--app-text);
}
:root[data-theme=light] .games-view__account-option.active {
  color: var(--app-analysis);
}
:root[data-theme=light] .games-view__account-menu-sep {
  background: var(--app-border);
}
:root[data-theme=light] .games-view__advanced-panel {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
}
:root[data-theme=light] .games-view__advanced-group-title {
  color: var(--app-text);
}
:root[data-theme=light] .games-view__chip {
  background: var(--app-analysis-soft);
  border-color: var(--app-analysis);
  color: var(--app-analysis);
}
:root[data-theme=light] .games-view__chip-remove {
  color: var(--app-text-muted);
}
:root[data-theme=light] .games-view__advanced-apply,
:root[data-theme=light] .games-view__review-all-btn {
  background: var(--app-analysis);
  border-color: var(--app-analysis);
  color: var(--app-surface-raised);
}
:root[data-theme=light] .games-view__empty,
:root[data-theme=light] .game-list__no-results,
:root[data-theme=light] .game-list__queue-status,
:root[data-theme=light] .games-view__analyzing-progress,
:root[data-theme=light] .games-view__review-lifecycle {
  background: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text-soft);
}
:root[data-theme=light] .games-view__feed,
:root[data-theme=light] .game-list > ul {
  border-color: var(--app-border);
}
:root[data-theme=light] .grr,
:root[data-theme=light] .grr:nth-child(even),
:root[data-theme=light] .game-list__row {
  background: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text);
}
:root[data-theme=light] .grr:hover,
:root[data-theme=light] .game-list__row:hover {
  background: var(--app-surface-selected);
}
:root[data-theme=light] .grr.selected,
:root[data-theme=light] .game-list__row.selected {
  background: var(--app-analysis-soft);
  border-color: var(--app-focus);
  outline-color: var(--app-focus);
}
:root[data-theme=light] .grr.open,
:root[data-theme=light] .game-list__row.active {
  background: var(--app-analysis-soft);
}
:root[data-theme=light] .game-list li:nth-child(even) > .grr {
  background: var(--app-surface);
}
:root[data-theme=light] .game-list li:nth-child(even) > .grr:hover {
  background: var(--app-surface-selected);
}
:root[data-theme=light] .game-list li:nth-child(even) > .grr.selected {
  background: var(--app-analysis-soft);
}
:root[data-theme=light] .game-list li:nth-child(even) > .grr.selected:hover {
  background: var(--app-surface-selected);
}
:root[data-theme=light] .game-list li:nth-child(even) > .grr.open {
  background: var(--app-analysis-soft);
}
:root[data-theme=light] .game-list li:nth-child(even) > .grr.open:hover {
  background: var(--app-surface-selected);
}
:root[data-theme=light] .game-list__row.analyzing {
  background: var(--app-engine-soft);
}
:root[data-theme=light] .grr__player-name,
:root[data-theme=light] .grl__name {
  color: var(--app-text);
}
:root[data-theme=light] .grr__player-rating,
:root[data-theme=light] .grr__accuracy-label,
:root[data-theme=light] .grr__opening-moves,
:root[data-theme=light] .grr__rail-meta-row,
:root[data-theme=light] .grl__rating,
:root[data-theme=light] .grl__opening-san,
:root[data-theme=light] .grl__opening-moves,
:root[data-theme=light] .grl__timestamp {
  color: var(--app-text-muted);
}
:root[data-theme=light] .grr__opening-name,
:root[data-theme=light] .grl__opening-name {
  color: var(--app-text-soft);
}
:root[data-theme=light] .grr__vs-pill,
:root[data-theme=light] .grr__tag,
:root[data-theme=light] .grr__chip,
:root[data-theme=light] .grl__badge {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
  color: var(--app-text-muted);
}
:root[data-theme=light] .grr__hairline,
:root[data-theme=light] .grr__accuracy-divider {
  background: var(--app-border);
}
:root[data-theme=light] .grr__rail {
  border-left-color: var(--app-border);
}
:root[data-theme=light] .grr__secondary-btn {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
  color: var(--app-text-muted);
}
:root[data-theme=light] .grr__secondary-btn:hover {
  background: var(--app-surface-selected);
  color: var(--app-text);
}
:root[data-theme=light] .grr__review.--unreviewed,
:root[data-theme=light] .grr__review.--running {
  color: var(--app-engine-route-ink);
  border-color: var(--app-engine);
}
:root[data-theme=light] .grr__review.--queued {
  color: var(--app-text-soft);
}
:root[data-theme=light] .grr__review.--stalled,
:root[data-theme=light] .grr__review.--incomplete {
  background: var(--app-amber-soft);
  border-color: var(--app-amber);
  color: var(--app-amber-route-ink);
}
:root[data-theme=light] .grr__review.--stalled:hover,
:root[data-theme=light] .grr__review.--incomplete:hover {
  background: var(--app-amber-soft);
  border-color: var(--app-amber-route-ink);
  color: var(--app-amber-route-ink);
}
:root[data-theme=light] .grr__review.--failed .grr__review-retry,
:root[data-theme=light] .grr__review.--failed .grr__review-skip {
  background: var(--app-danger-soft);
  border-color: var(--app-danger);
  color: var(--app-danger-route-ink);
}
:root[data-theme=light] .grr__review.--reviewed {
  color: var(--app-surface-raised);
}
:root[data-theme=light] .grr__review.--reviewed .grr__review-main {
  background-color: #283555;
}
:root[data-theme=light] .grr__review:focus-visible,
:root[data-theme=light] .grr__review-retry:focus-visible,
:root[data-theme=light] .grr__review-skip:focus-visible,
:root[data-theme=light] .grr__secondary-btn:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
}
:root[data-theme=light] .grr__chip.--studied.--fam-openings {
  color: var(--app-qnr-openings-ink);
}
:root[data-theme=light] .grr__chip.--studied.--fam-planning {
  color: var(--app-qnr-planning-ink);
}
:root[data-theme=light] .grr__chip.--studied.--fam-tactics {
  color: var(--app-qnr-tactics-ink);
}
:root[data-theme=light] .grr__chip.--studied.--fam-endgame {
  color: var(--app-qnr-endgame-ink);
}
:root[data-theme=light] .grr__chip.--studied.--fam-time {
  color: var(--app-qnr-time-ink);
}
:root[data-theme=light] .grr__chip.--studied.--fam-material {
  color: var(--app-qnr-material-ink);
}
:root[data-theme=light] .grr__chip.--studied.--fam-character {
  color: var(--app-qnr-character-ink);
}
:root[data-theme=light] .stats-title {
  color: var(--app-text);
}
:root[data-theme=light] .stats-game-count,
:root[data-theme=light] .stats-section-note,
:root[data-theme=light] .stats-insufficient,
:root[data-theme=light] .stats-insufficient__count,
:root[data-theme=light] .stats-no-weaknesses {
  color: var(--app-text-muted);
}
:root[data-theme=light] .stats-filter-tab {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
  color: var(--app-text-soft);
}
:root[data-theme=light] .stats-filter-tab:hover {
  background: var(--app-surface-selected);
  color: var(--app-text);
}
:root[data-theme=light] .stats-filter-tab--active {
  background: var(--app-analysis-soft);
  color: var(--app-analysis);
}
:root[data-theme=light] .stats-filter-tab:focus-visible,
:root[data-theme=light] .stats-expand-btn:focus-visible,
:root[data-theme=light] .weakness-card__action-btn:focus-visible,
:root[data-theme=light] .conversion-metric__game:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
}
:root[data-theme=light] .stats-section,
:root[data-theme=light] .stats-empty {
  background: var(--app-surface);
  border-color: var(--app-border);
}
:root[data-theme=light] .stats-section-title {
  color: var(--app-text);
}
:root[data-theme=light] .stats-loading {
  color: var(--app-text-muted);
}
:root[data-theme=light] .weakness-card,
:root[data-theme=light] .stats-chart,
:root[data-theme=light] .tactical-profile,
:root[data-theme=light] .conversion-metric,
:root[data-theme=light] .clock-profile {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
}
:root[data-theme=light] .weakness-card__category,
:root[data-theme=light] .weakness-card__description,
:root[data-theme=light] .weakness-card__recommendation,
:root[data-theme=light] .tactical-stat__label,
:root[data-theme=light] .conversion-metric__label,
:root[data-theme=light] .clock-stat__label {
  color: var(--app-text-soft);
}
:root[data-theme=light] .weakness-card__confidence,
:root[data-theme=light] .weakness-card__meta,
:root[data-theme=light] .conversion-metric__sample,
:root[data-theme=light] .conversion-metric__note {
  color: var(--app-text-muted);
}
:root[data-theme=light] .weakness-card__action-btn,
:root[data-theme=light] .stats-expand-btn {
  background: var(--app-surface-raised);
  border-color: var(--app-border-strong);
  color: var(--app-analysis);
}
:root[data-theme=light] .weakness-card__action-btn:hover,
:root[data-theme=light] .stats-expand-btn:hover {
  background: var(--app-surface-selected);
  border-color: var(--app-focus);
}
:root[data-theme=light] .stats-chart__axis {
  stroke: var(--app-border-strong);
}
:root[data-theme=light] .stats-chart__label,
:root[data-theme=light] .stats-chart__label-top {
  fill: var(--app-text-muted);
  color: var(--app-text-muted);
}
:root[data-theme=light] .opening-table {
  color: var(--app-text-soft);
}
:root[data-theme=light] .opening-table th {
  background: var(--app-surface-soft);
  color: var(--app-text);
  border-bottom-color: var(--app-border-strong);
}
:root[data-theme=light] .opening-table th,
:root[data-theme=light] .opening-table td {
  border-bottom-color: var(--app-border);
}
:root[data-theme=light] .opening-table tbody tr:hover {
  background: var(--app-surface-selected);
}
:root[data-theme=light] .tactical-stat,
:root[data-theme=light] .clock-stat {
  background: var(--app-surface-raised);
  border-color: var(--app-border);
}
:root[data-theme=light] .tactical-stat__value,
:root[data-theme=light] .conversion-metric__value,
:root[data-theme=light] .clock-stat__value {
  color: var(--app-text);
}
:root[data-theme=light] .tactical-profile__breakdown,
:root[data-theme=light] .clock-profile__comparison {
  border-top-color: var(--app-border);
  color: var(--app-text-soft);
}
:root[data-theme=light] .puzzle-library__card,
:root[data-theme=light] .puzzle-library__section,
:root[data-theme=light] .puzzle-library__preview-side,
:root[data-theme=light] .session-info,
:root[data-theme=light] .session-history,
:root[data-theme=light] .puzzle-info,
:root[data-theme=light] .puzzle-meta {
  background: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text);
}
:root[data-theme=light] .puzzle-library__resume {
  background: var(--app-engine-soft);
  border-color: var(--app-engine);
}
:root[data-theme=light] .puzzle-library__resume-header {
  color: var(--app-engine);
}
:root[data-theme=light] .puzzle-library__resume-count {
  color: var(--app-text-soft);
}
:root[data-theme=light] .puzzle-library__resume-btn {
  background: var(--app-engine);
  border-color: var(--app-engine);
  color: var(--app-surface-raised);
}
:root[data-theme=light] .puzzle-library__resume-btn:hover:not(:disabled) {
  background: var(--app-engine);
  color: var(--app-surface-raised);
}
:root[data-theme=light] .puzzle-library__resume-end {
  background: var(--app-surface-raised);
  border-color: var(--app-border-strong);
  color: var(--app-text-soft);
}
:root[data-theme=light] .puzzle-library__resume-end:hover:not(:disabled) {
  background: var(--app-danger-soft);
  border-color: var(--app-danger);
  color: var(--app-danger-route-ink);
}
:root[data-theme=light] .puzzle-library__resume-btn:disabled,
:root[data-theme=light] .puzzle-library__resume-end:disabled {
  background: var(--app-canvas-strong);
  border-color: var(--app-border);
  color: var(--app-text-soft);
  opacity: 1;
}
:root[data-theme=light] .puzzle-library__resume-btn:focus-visible,
:root[data-theme=light] .puzzle-library__resume-end:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
}
:root[data-theme=light] .puzzle-library__card-count,
:root[data-theme=light] .puzzle-library__card-desc,
:root[data-theme=light] .puzzle-library__count,
:root[data-theme=light] .puzzle-list__count,
:root[data-theme=light] .puzzle-list__filter-label,
:root[data-theme=light] .puzzle-list__filter-count,
:root[data-theme=light] .puzzle-list__empty,
:root[data-theme=light] .puzzle-list__loading,
:root[data-theme=light] .puzzle-session__label,
:root[data-theme=light] .puzzle-session__range-label,
:root[data-theme=light] .puzzle-session__selection-hint,
:root[data-theme=light] .puzzle-info__rating,
:root[data-theme=light] .puzzle-meta__label,
:root[data-theme=light] .puzzle-meta__fav-label,
:root[data-theme=light] .puzzle-meta__folder-empty,
:root[data-theme=light] .puzzle__mq-header,
:root[data-theme=light] .puzzle__mq-note,
:root[data-theme=light] .puzzle__mq-cp,
:root[data-theme=light] .session-info__rating,
:root[data-theme=light] .session-info__auto-next,
:root[data-theme=light] .session-history__label {
  color: var(--app-text-muted);
}
:root[data-theme=light] .puzzle-library__card-action,
:root[data-theme=light] .puzzle-library__action,
:root[data-theme=light] .puzzle-list__load-more,
:root[data-theme=light] .puzzle-session__tab,
:root[data-theme=light] .puzzle__hint,
:root[data-theme=light] .puzzle__reveal,
:root[data-theme=light] .puzzle__skip,
:root[data-theme=light] .puzzle__engine-lines,
:root[data-theme=light] .puzzle__engine-arrows,
:root[data-theme=light] .puzzle__analyse,
:root[data-theme=light] .puzzle__retry,
:root[data-theme=light] .puzzle-round__back,
:root[data-theme=light] .puzzle__back-link {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
  color: var(--app-text-soft);
}
:root[data-theme=light] .puzzle-library__card-action:hover:not(:disabled),
:root[data-theme=light] .puzzle-library__action:hover:not(:disabled),
:root[data-theme=light] .puzzle-list__load-more:hover,
:root[data-theme=light] .puzzle-session__tab:hover,
:root[data-theme=light] .puzzle__hint:hover:not(:disabled),
:root[data-theme=light] .puzzle__reveal:hover:not(:disabled),
:root[data-theme=light] .puzzle__skip:hover:not(:disabled),
:root[data-theme=light] .puzzle__engine-lines:hover:not(:disabled),
:root[data-theme=light] .puzzle__engine-arrows:hover:not(:disabled),
:root[data-theme=light] .puzzle__analyse:hover:not(:disabled),
:root[data-theme=light] .puzzle__retry:hover,
:root[data-theme=light] .puzzle-round__back:hover,
:root[data-theme=light] .puzzle__back-link:hover {
  background: var(--app-surface-selected);
  border-color: var(--app-border-strong);
  color: var(--app-text);
}
:root[data-theme=light] .puzzle-library__card-action:disabled,
:root[data-theme=light] .puzzle-library__action:disabled,
:root[data-theme=light] .puzzle-session__start:disabled,
:root[data-theme=light] .puzzle__hint:disabled,
:root[data-theme=light] .puzzle__reveal:disabled,
:root[data-theme=light] .puzzle__skip:disabled {
  background: var(--app-canvas-strong);
  border-color: var(--app-border);
  color: var(--app-text-muted);
  opacity: 1;
}
:root[data-theme=light] .puzzle-library__card-action:focus-visible,
:root[data-theme=light] .puzzle-library__action:focus-visible,
:root[data-theme=light] .puzzle-list__load-more:focus-visible,
:root[data-theme=light] .puzzle-list__row:focus-visible,
:root[data-theme=light] .puzzle-list__filter-input:focus-visible,
:root[data-theme=light] .puzzle-list__filter-select:focus-visible,
:root[data-theme=light] .puzzle-session__tab:focus-visible,
:root[data-theme=light] .puzzle-session__theme-row:focus-visible,
:root[data-theme=light] .puzzle-session__search-input:focus-visible,
:root[data-theme=light] .puzzle-session__range-val:focus-visible,
:root[data-theme=light] .puzzle-session__start:focus-visible,
:root[data-theme=light] .puzzle__hint:focus-visible,
:root[data-theme=light] .puzzle__reveal:focus-visible,
:root[data-theme=light] .puzzle__skip:focus-visible,
:root[data-theme=light] .puzzle__engine-lines:focus-visible,
:root[data-theme=light] .puzzle__engine-arrows:focus-visible,
:root[data-theme=light] .puzzle__analyse:focus-visible,
:root[data-theme=light] .puzzle__next:focus-visible,
:root[data-theme=light] .puzzle__retry:focus-visible,
:root[data-theme=light] .puzzle-meta__notes:focus-visible,
:root[data-theme=light] .puzzle-meta__tags:focus-visible,
:root[data-theme=light] .puzzle-meta__folder-input:focus-visible,
:root[data-theme=light] .puzzle-library__preview-close:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
}
:root[data-theme=light] .puzzle-list__scroll,
:root[data-theme=light] .puzzle-session__themes {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
}
:root[data-theme=light] .puzzle-list__row {
  border-bottom-color: var(--app-border);
  color: var(--app-text-soft);
}
:root[data-theme=light] .puzzle-list__row:hover:not(.puzzle-list__row--header) {
  background: var(--app-surface-selected);
}
:root[data-theme=light] .puzzle-list__row--header {
  background: var(--app-surface);
  color: var(--app-text-muted);
  border-color: var(--app-border);
}
:root[data-theme=light] .puzzle-list__row--selected {
  background: var(--app-analysis-soft);
  color: var(--app-analysis);
}
:root[data-theme=light] .puzzle-list__filter-input,
:root[data-theme=light] .puzzle-list__filter-select,
:root[data-theme=light] .puzzle-session__range-val,
:root[data-theme=light] .puzzle-session__search-input,
:root[data-theme=light] .puzzle-meta__notes,
:root[data-theme=light] .puzzle-meta__tags,
:root[data-theme=light] .puzzle-meta__folder-input {
  background: var(--app-surface-raised);
  border-color: var(--app-border);
  color: var(--app-text);
}
:root[data-theme=light] .puzzle-list__filter-input::placeholder,
:root[data-theme=light] .puzzle-session__search-input::placeholder,
:root[data-theme=light] .puzzle-meta__notes::placeholder,
:root[data-theme=light] .puzzle-meta__tags::placeholder,
:root[data-theme=light] .puzzle-meta__folder-input::placeholder {
  color: var(--app-text-muted);
}
:root[data-theme=light] .puzzle-session__category:not(:first-child),
:root[data-theme=light] .puzzle-session__tabs {
  border-color: var(--app-border);
}
:root[data-theme=light] .puzzle-session__category-label,
:root[data-theme=light] .puzzle-session__search {
  background: var(--app-surface-soft);
  color: var(--app-text-muted);
  border-color: var(--app-border);
}
:root[data-theme=light] .puzzle-session__theme-row {
  color: var(--app-text-soft);
}
:root[data-theme=light] .puzzle-session__theme-row:hover {
  background: var(--app-surface-selected);
}
:root[data-theme=light] .puzzle-session__theme-row.active {
  background: var(--app-analysis-soft);
  color: var(--app-analysis);
}
:root[data-theme=light] .puzzle-session__tab.active {
  background: var(--app-analysis-soft);
  color: var(--app-analysis);
}
:root[data-theme=light] .puzzle-session__start-bar {
  background: var(--app-surface);
  border-color: var(--app-border);
}
:root[data-theme=light] .puzzle-session__start,
:root[data-theme=light] .puzzle__next {
  background: var(--app-engine);
  border-color: var(--app-engine);
  color: var(--app-surface-raised);
}
:root[data-theme=light] .puzzle-session__error,
:root[data-theme=light] .puzzle-round__error {
  background: var(--app-danger-soft);
  border-color: var(--app-danger);
  color: var(--app-danger);
}
:root[data-theme=light] .puzzle-round__loading {
  color: var(--app-text-muted);
}
:root[data-theme=light] .puzzle__side,
:root[data-theme=light] .puzzle-library__preview-side {
  background: var(--app-surface-soft);
}
:root[data-theme=light] .puzzle-library__preview-header,
:root[data-theme=light] .puzzle-ceval,
:root[data-theme=light] .puzzle__mq-summary,
:root[data-theme=light] .puzzle-meta,
:root[data-theme=light] .puzzle__feedback__nav {
  border-color: var(--app-border);
}
:root[data-theme=light] .puzzle-library__preview-header h2,
:root[data-theme=light] .puzzle__mq-move,
:root[data-theme=light] .puzzle-meta__folder-pill,
:root[data-theme=light] .session-info__themes {
  color: var(--app-text-soft);
}
:root[data-theme=light] .puzzle-library__preview-close {
  color: var(--app-text-muted);
}
:root[data-theme=light] .puzzle-library__preview-close:hover {
  color: var(--app-text);
}
:root[data-theme=light] .puzzle__feedback:not(.good):not(.fail):not(.solved):not(.failed) {
  background: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text);
}
:root[data-theme=light] .puzzle__feedback__instruction em,
:root[data-theme=light] .puzzle__feedback__message em {
  color: var(--app-text-muted);
}
:root[data-theme=light] .puzzle-meta__folder-pill {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
}
:root[data-theme=light] .puzzle__assistance-warning__modal {
  background: var(--app-surface-raised);
  border-color: var(--app-border-strong);
  box-shadow: 0 12px 36px var(--app-shadow);
}
:root[data-theme=light] .puzzle__assistance-warning__title {
  color: var(--app-text);
}
:root[data-theme=light] .puzzle__assistance-warning__body,
:root[data-theme=light] .puzzle__assistance-warning__remember {
  color: var(--app-text-soft);
}
:root[data-theme=light] .study-page,
:root[data-theme=light] .study-detail,
:root[data-theme=light] .study-player-bar,
:root[data-theme=light] .drill-sidebar,
:root[data-theme=light] .openings {
  color: var(--app-text);
}
:root[data-theme=light] .study-page__bottom-controls,
:root[data-theme=light] .study-detail__tools-col,
:root[data-theme=light] .study-card,
:root[data-theme=light] .study-filter-bar__search,
:root[data-theme=light] .study-view-toggle,
:root[data-theme=light] .study-bulk-bar,
:root[data-theme=light] .study-bulk-bar__btn,
:root[data-theme=light] .study-bulk-bar__folder-menu,
:root[data-theme=light] .study-modal,
:root[data-theme=light] .study-modal__pgn,
:root[data-theme=light] .lib-shell,
:root[data-theme=light] .lib-nav,
:root[data-theme=light] .lib-items,
:root[data-theme=light] .lib-rail,
:root[data-theme=light] .sentry-group-header,
:root[data-theme=light] .sentry-row,
:root[data-theme=light] .lib-nav,
:root[data-theme=light] .lib-items,
:root[data-theme=light] .nav-toolbar,
:root[data-theme=light] .item-toolbar,
:root[data-theme=light] .item-toolbar__search-row,
:root[data-theme=light] .item-adv,
:root[data-theme=light] .lib-game-open-header,
:root[data-theme=light] .openings__collection-row,
:root[data-theme=light] .openings__account-menu,
:root[data-theme=light] .openings__account-menu-section-btn,
:root[data-theme=light] .openings__account-menu-placeholder,
:root[data-theme=light] .openings__account-menu-delete,
:root[data-theme=light] .openings__account-section-empty,
:root[data-theme=light] .openings__preload-panel,
:root[data-theme=light] .openings__preload-speed,
:root[data-theme=light] .openings__preload-period,
:root[data-theme=light] .openings__preload-sync,
:root[data-theme=light] .openings__preload-sync-refresh,
:root[data-theme=light] .openings__loading-card,
:root[data-theme=light] .openings__session-panel,
:root[data-theme=light] .openings__data-column-inner,
:root[data-theme=light] .openings__tree-build,
:root[data-theme=light] .openings__explorer,
:root[data-theme=light] .openings__explorer-tabs,
:root[data-theme=light] .openings__explorer-config,
:root[data-theme=light] .openings__sample-row {
  border-color: var(--app-border);
}
:root[data-theme=light] .lib-shell,
:root[data-theme=light] .study-card,
:root[data-theme=light] .study-orp-row,
:root[data-theme=light] .openings__collection-row,
:root[data-theme=light] .openings__session-panel,
:root[data-theme=light] .openings__data-column-inner,
:root[data-theme=light] .openings__explorer {
  background: var(--app-surface);
}
:root[data-theme=light] .lib-nav,
:root[data-theme=light] .lib-items,
:root[data-theme=light] .sentry-group-header {
  background: var(--app-surface);
}
:root[data-theme=light] .sentry-row {
  background: var(--app-surface-raised);
}
:root[data-theme=light] .lib-rail,
:root[data-theme=light] .study-player-bar,
:root[data-theme=light] .openings__account-menu,
:root[data-theme=light] .openings__preload-panel,
:root[data-theme=light] .openings__tree-build,
:root[data-theme=light] .openings__sample-row {
  background: var(--app-surface-soft);
}
:root[data-theme=light] .nav-toolbar,
:root[data-theme=light] .item-toolbar,
:root[data-theme=light] .item-toolbar__search-row,
:root[data-theme=light] .item-adv,
:root[data-theme=light] .lib-game-open-header,
:root[data-theme=light] .study-modal {
  background: var(--app-surface-raised);
}
:root[data-theme=light] .lib-divider {
  background: var(--app-surface-soft);
}
:root[data-theme=light] .lib-divider::after {
  background: var(--app-border);
}
:root[data-theme=light] .lib-divider:hover::after,
:root[data-theme=light] .lib-divider.--dragging::after {
  background: var(--app-study);
}
:root[data-theme=light] .lib-divider.--dragging {
  background: var(--app-study-soft);
}
:root[data-theme=light] .divider-badge {
  background: var(--app-study-soft);
  color: var(--app-study-ink);
}
:root[data-theme=light] .study-page__seeding,
:root[data-theme=light] .study-page__loading,
:root[data-theme=light] .study-detail__loading,
:root[data-theme=light] .study-detail__empty,
:root[data-theme=light] .study-sort-bar__label,
:root[data-theme=light] .study-card__meta,
:root[data-theme=light] .study-modal__file-label,
:root[data-theme=light] .drill-move-counter,
:root[data-theme=light] .study-orp-section__loading,
:root[data-theme=light] .study-orp-section__empty,
:root[data-theme=light] .study-orp-row__meta,
:root[data-theme=light] .study-orp-bucket__label,
:root[data-theme=light] .openings__empty,
:root[data-theme=light] .openings__hint,
:root[data-theme=light] .openings__loading,
:root[data-theme=light] .openings__loading-detail,
:root[data-theme=light] .openings__session-meta,
:root[data-theme=light] .openings__moves-empty,
:root[data-theme=light] .openings__explorer-loading,
:root[data-theme=light] .openings__explorer-empty,
:root[data-theme=light] .openings__explorer-explanation {
  color: var(--app-text-muted);
}
:root[data-theme=light] .study-card__title,
:root[data-theme=light] .study-orp-row__label,
:root[data-theme=light] .drill-sequence-label,
:root[data-theme=light] .openings__loading-title,
:root[data-theme=light] .openings__section-title,
:root[data-theme=light] .openings__collection-name,
:root[data-theme=light] .openings__move-san,
:root[data-theme=light] .openings__sample-player-name,
:root[data-theme=light] .openings__explorer-message strong {
  color: var(--app-text);
}
:root[data-theme=light] .study-filter-btn,
:root[data-theme=light] .study-sort-btn,
:root[data-theme=light] .study-bulk-bar__btn,
:root[data-theme=light] .study-bulk-bar__folder-item,
:root[data-theme=light] .study-modal__close,
:root[data-theme=light] .lib-rail__btn,
:root[data-theme=light] .nav-toolbar__btn,
:root[data-theme=light] .item-toolbar__btn,
:root[data-theme=light] .lib-game-open-header__chevron,
:root[data-theme=light] .openings__account-open-btn,
:root[data-theme=light] .openings__reorder-toggle,
:root[data-theme=light] .openings__back-lib-btn,
:root[data-theme=light] .openings__flip-btn,
:root[data-theme=light] .openings__explorer-tab,
:root[data-theme=light] .openings__explorer-gear {
  color: var(--app-text-muted);
}
:root[data-theme=light] .study-filter-btn:hover:not(.active),
:root[data-theme=light] .study-sort-btn:hover,
:root[data-theme=light] .study-modal__close:hover,
:root[data-theme=light] .lib-rail__btn:hover:not([aria-disabled=true]),
:root[data-theme=light] .nav-toolbar__btn:hover:not([aria-disabled=true]),
:root[data-theme=light] .item-toolbar__btn:hover,
:root[data-theme=light] .lib-game-open-header__chevron:hover,
:root[data-theme=light] .openings__reorder-toggle:hover,
:root[data-theme=light] .openings__back-lib-btn:hover,
:root[data-theme=light] .openings__flip-btn:hover,
:root[data-theme=light] .openings__explorer-tab:hover,
:root[data-theme=light] .openings__explorer-gear:hover {
  background: var(--app-surface-selected);
  color: var(--app-text);
}
:root[data-theme=light] .study-filter-btn.active,
:root[data-theme=light] .study-btn--active {
  background: var(--app-study);
  border-color: var(--app-study);
  color: var(--app-study-fill-ink);
}
:root[data-theme=light] .lib-rail__btn.--active,
:root[data-theme=light] .nav-toolbar__btn.--active,
:root[data-theme=light] .item-toolbar__btn.--active,
:root[data-theme=light] .nav-row.--active,
:root[data-theme=light] .openings__explorer-tab.active,
:root[data-theme=light] .openings__explorer-gear.active {
  background: var(--app-study-soft);
  color: var(--app-study-ink);
}
:root[data-theme=light] .lib-rail__btn.--active::before {
  background: var(--app-study);
}
:root[data-theme=light] .study-card--selected,
:root[data-theme=light] .study-row--selected {
  background: var(--app-study-soft) !important;
  border-color: var(--app-study) !important;
}
:root[data-theme=light] .study-card__title:hover,
:root[data-theme=light] .lib-game-open-header__breadcrumb {
  color: var(--app-study-ink);
}
:root[data-theme=light] .study-filter-bar__search,
:root[data-theme=light] .study-modal__pgn,
:root[data-theme=light] .nav-toolbar__new-folder-input,
:root[data-theme=light] .item-toolbar__search-input,
:root[data-theme=light] .openings__input,
:root[data-theme=light] .openings__textarea,
:root[data-theme=light] .openings__date-input,
:root[data-theme=light] .openings__explorer-player-input,
:root[data-theme=light] .openings__explorer-date-label input {
  background: var(--app-surface);
  border-color: var(--app-border-strong);
  color: var(--app-text);
}
:root[data-theme=light] .study-filter-bar__search::placeholder,
:root[data-theme=light] .study-modal__pgn::placeholder,
:root[data-theme=light] .nav-toolbar__new-folder-input::placeholder,
:root[data-theme=light] .item-toolbar__search-input::placeholder,
:root[data-theme=light] .openings__input::placeholder,
:root[data-theme=light] .openings__textarea::placeholder {
  color: var(--app-text-muted);
}
:root[data-theme=light] .study-filter-bar__search:focus-visible,
:root[data-theme=light] .study-btn:focus-visible,
:root[data-theme=light] .study-filter-btn:focus-visible,
:root[data-theme=light] .study-sort-btn:focus-visible,
:root[data-theme=light] .study-bulk-bar__btn:focus-visible,
:root[data-theme=light] .study-modal__close:focus-visible,
:root[data-theme=light] .study-modal__pgn:focus,
:root[data-theme=light] .lib-rail__btn:focus-visible,
:root[data-theme=light] .nav-toolbar__btn:focus-visible,
:root[data-theme=light] .nav-toolbar__new-folder-input:focus,
:root[data-theme=light] .item-toolbar__btn:focus-visible,
:root[data-theme=light] .item-toolbar__search-input:focus,
:root[data-theme=light] .lib-game-open-header__chevron:focus-visible,
:root[data-theme=light] .lib-game-open-header__breadcrumb:focus-visible,
:root[data-theme=light] .openings__new-btn:focus-visible,
:root[data-theme=light] .openings__start-btn:focus-visible,
:root[data-theme=light] .openings__account-open-btn:focus-visible,
:root[data-theme=light] .openings__account-gear-btn:focus-visible,
:root[data-theme=light] .openings__reorder-toggle:focus-visible,
:root[data-theme=light] .openings__preload-build:focus-visible,
:root[data-theme=light] .openings__preload-sync-btn:focus-visible,
:root[data-theme=light] .openings__back-lib-btn:focus-visible,
:root[data-theme=light] .openings__flip-btn:focus-visible,
:root[data-theme=light] .openings__move-row:focus-visible,
:root[data-theme=light] .openings__explorer-tab:focus-visible,
:root[data-theme=light] .openings__explorer-gear:focus-visible,
:root[data-theme=light] .openings__input:focus-visible,
:root[data-theme=light] .openings__textarea:focus-visible,
:root[data-theme=light] .openings__date-input:focus-visible,
:root[data-theme=light] .openings__explorer-player-input:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
}
:root[data-theme=light] .lib-nav__label,
:root[data-theme=light] .nav-row__count,
:root[data-theme=light] .nav-chevron,
:root[data-theme=light] .sentry-group-header,
:root[data-theme=light] .sentry-empty {
  color: var(--app-text-muted);
}
:root[data-theme=light] .sentry-title {
  color: var(--app-text);
}
:root[data-theme=light] .nav-row.--section,
:root[data-theme=light] .nav-reorder-header__title,
:root[data-theme=light] .nav-reorder-row {
  color: var(--app-text);
}
:root[data-theme=light] .nav-reorder-row {
  background: var(--app-surface-raised);
}
:root[data-theme=light] .nav-row,
:root[data-theme=light] .sentry-row {
  color: var(--app-text-soft);
}
:root[data-theme=light] .sentry-row {
  border-color: var(--app-border);
}
:root[data-theme=light] .nav-row:hover,
:root[data-theme=light] .sentry-row:hover,
:root[data-theme=light] .study-bulk-bar__btn:hover,
:root[data-theme=light] .study-bulk-bar__folder-item:hover,
:root[data-theme=light] .openings__collection-row:hover,
:root[data-theme=light] .openings__move-row:hover {
  background: var(--app-surface-selected);
}
:root[data-theme=light] .study-bulk-bar {
  background: var(--app-study-soft);
  border-color: var(--app-study-ink);
}
:root[data-theme=light] .study-bulk-bar__count {
  color: var(--app-study-ink);
}
:root[data-theme=light] .study-bulk-bar__btn,
:root[data-theme=light] .study-bulk-bar__folder-menu {
  background: var(--app-surface-raised);
  border-color: var(--app-border);
  color: var(--app-text-soft);
}
:root[data-theme=light] .study-modal__status {
  color: var(--app-engine-route-ink);
}
:root[data-theme=light] .study-orp-section__heading {
  color: var(--app-text-soft);
}
:root[data-theme=light] .study-orp-section__error {
  color: var(--app-danger);
}
:root[data-theme=light] .study-orp-row {
  border-color: var(--app-border);
}
:root[data-theme=light] .study-orp-row:hover {
  border-color: var(--app-border-strong);
}
:root[data-theme=light] .repertoire__scan-section,
:root[data-theme=light] .repertoire__source-section,
:root[data-theme=light] .repertoire__report-tabs,
:root[data-theme=light] .repertoire__line-list,
:root[data-theme=light] .repertoire__line-row,
:root[data-theme=light] .repertoire__source-menu,
:root[data-theme=light] .repertoire__explorer-group,
:root[data-theme=light] .repertoire__out-of-line,
:root[data-theme=light] .repertoire__browse-header,
:root[data-theme=light] .repertoire__chapter-row {
  border-color: var(--app-border);
}
:root[data-theme=light] .repertoire__source-row {
  background: var(--app-surface);
  border-top-color: var(--app-border);
  border-right-color: var(--app-border);
  border-bottom-color: var(--app-border);
}
:root[data-theme=light] .repertoire__filter-select,
:root[data-theme=light] .repertoire__source-name-input,
:root[data-theme=light] .repertoire__side-select,
:root[data-theme=light] .repertoire__rating-input {
  background: var(--app-surface);
  border-color: var(--app-border-strong);
  color: var(--app-text);
}
:root[data-theme=light] .repertoire__report-tab,
:root[data-theme=light] .repertoire__account-candidate,
:root[data-theme=light] .repertoire__source-menu,
:root[data-theme=light] .repertoire__annotation--expanded,
:root[data-theme=light] .repertoire__annotation--position,
:root[data-theme=light] .repertoire__chapter-row.active {
  background: var(--app-surface);
  border-color: var(--app-border);
}
:root[data-theme=light] .repertoire__report-tab:hover,
:root[data-theme=light] .repertoire__line-summary:hover,
:root[data-theme=light] .repertoire__line-game:hover,
:root[data-theme=light] .repertoire__source-menu-item:hover,
:root[data-theme=light] .repertoire__source-toggle:hover,
:root[data-theme=light] .repertoire__source-menu-button:hover,
:root[data-theme=light] .repertoire__move-row:hover,
:root[data-theme=light] .repertoire__move-row--expanded,
:root[data-theme=light] .repertoire__chapter-row:hover {
  background: var(--app-surface-selected);
  color: var(--app-text);
}
:root[data-theme=light] .repertoire__report-tab.active {
  background: var(--app-study-soft);
  color: var(--app-study-ink);
}
:root[data-theme=light] .repertoire__scan-progress,
:root[data-theme=light] .repertoire__section-title,
:root[data-theme=light] .repertoire__studies-heading,
:root[data-theme=light] .repertoire__line-text,
:root[data-theme=light] .repertoire__line-highlight,
:root[data-theme=light] .repertoire__chip,
:root[data-theme=light] .repertoire__move-san {
  color: var(--app-text);
}
:root[data-theme=light] .repertoire__scan-message,
:root[data-theme=light] .repertoire__report-summary,
:root[data-theme=light] .repertoire__line-prefix,
:root[data-theme=light] .repertoire__line-expected,
:root[data-theme=light] .repertoire__line-game-count,
:root[data-theme=light] .repertoire__account-candidate-meta,
:root[data-theme=light] .repertoire__filter-summary,
:root[data-theme=light] .repertoire__account-empty,
:root[data-theme=light] .repertoire__source-loading,
:root[data-theme=light] .repertoire__source-empty,
:root[data-theme=light] .repertoire__chapter-count,
:root[data-theme=light] .repertoire__source-meta,
:root[data-theme=light] .repertoire__expected-reply,
:root[data-theme=light] .repertoire__main-tag,
:root[data-theme=light] .repertoire__reply-tag,
:root[data-theme=light] .repertoire__account-stats,
:root[data-theme=light] .repertoire__account-result-counts,
:root[data-theme=light] .repertoire__comment-preview,
:root[data-theme=light] .repertoire__annotation-text,
:root[data-theme=light] .repertoire__browse-count,
:root[data-theme=light] .repertoire__chapter-meta,
:root[data-theme=light] .repertoire__browse-chapter-heading,
:root[data-theme=light] .repertoire__browse-loading,
:root[data-theme=light] .repertoire__browse-empty {
  color: var(--app-text-muted);
}
:root[data-theme=light] .repertoire__scan-message--error,
:root[data-theme=light] .repertoire__source-error,
:root[data-theme=light] .repertoire__browse-error {
  color: var(--app-danger);
}
:root[data-theme=light] .repertoire__category-badge,
:root[data-theme=light] .repertoire__side-badge,
:root[data-theme=light] .repertoire__source-toggle,
:root[data-theme=light] .repertoire__source-menu-button,
:root[data-theme=light] .repertoire__source-menu-item,
:root[data-theme=light] .repertoire__jump,
:root[data-theme=light] .repertoire__browse-back {
  border-color: var(--app-border-strong);
  color: var(--app-text-soft);
}
:root[data-theme=light] .openings__new-btn,
:root[data-theme=light] .openings__start-btn,
:root[data-theme=light] .openings__preload-build,
:root[data-theme=light] .openings__preload-sync-btn {
  background: var(--app-engine-soft);
  border-color: var(--app-engine);
  color: var(--app-engine-route-ink);
}
:root[data-theme=light] .openings__new-btn:hover,
:root[data-theme=light] .openings__start-btn:hover,
:root[data-theme=light] .openings__preload-build:hover,
:root[data-theme=light] .openings__preload-sync-btn:hover:not(:disabled) {
  background: var(--app-surface-selected);
}
:root[data-theme=light] .openings__collection-row:hover {
  border-color: var(--app-border-strong);
}
:root[data-theme=light] .openings__account-badge,
:root[data-theme=light] .openings__account-open-btn,
:root[data-theme=light] .openings__reorder-toggle,
:root[data-theme=light] .openings__account-menu-section-btn,
:root[data-theme=light] .openings__account-menu-placeholder,
:root[data-theme=light] .openings__preload-speed,
:root[data-theme=light] .openings__preload-period,
:root[data-theme=light] .openings__preload-sync-refresh,
:root[data-theme=light] .openings__back-lib-btn,
:root[data-theme=light] .openings__flip-btn,
:root[data-theme=light] .openings__filter-pill,
:root[data-theme=light] .openings__explorer-filter-btn,
:root[data-theme=light] .openings__explorer-prev-btn {
  background: var(--app-surface-raised);
  border-color: var(--app-border);
}
:root[data-theme=light] .openings__tree-eval-switch,
:root[data-theme=light] .openings__tree-eval-level,
:root[data-theme=light] .openings__date-range-btn,
:root[data-theme=light] .openings__date-range-clear,
:root[data-theme=light] .openings__date-range-popup {
  background: var(--app-surface-raised);
  border-color: var(--app-border);
  color: var(--app-text-soft);
}
:root[data-theme=light] .openings__tree-eval-level:hover:not(:disabled):not(.active),
:root[data-theme=light] .openings__date-range-btn:hover,
:root[data-theme=light] .openings__date-range-clear:hover {
  background: var(--app-surface-selected);
  border-color: var(--app-border-strong);
  color: var(--app-text);
}
:root[data-theme=light] .openings__tree-eval-level.active,
:root[data-theme=light] .openings__date-range-btn.active {
  background: var(--app-study-soft);
  border-color: var(--app-study-ink);
  color: var(--app-study-ink);
}
:root[data-theme=light] .openings__account-menu-section-btn:hover:not(.active):not(:disabled),
:root[data-theme=light] .openings__preload-speed:hover:not(.active),
:root[data-theme=light] .openings__preload-period:hover:not(.active),
:root[data-theme=light] .openings__preload-sync-refresh:hover,
:root[data-theme=light] .openings__filter-pill:hover:not(.active),
:root[data-theme=light] .openings__explorer-filter-btn:hover,
:root[data-theme=light] .openings__explorer-prev-btn:hover {
  background: var(--app-surface-selected);
  color: var(--app-text);
}
:root[data-theme=light] .openings__account-menu-section-btn.active,
:root[data-theme=light] .openings__preload-speed.active,
:root[data-theme=light] .openings__preload-period.active,
:root[data-theme=light] .openings__filter-pill.active,
:root[data-theme=light] .openings__explorer-filter-btn.active {
  background: var(--app-study-soft);
  border-color: var(--app-study-ink);
  color: var(--app-study-ink);
}
:root[data-theme=light] .openings__account-divider,
:root[data-theme=light] .openings__account-menu-divider {
  border-color: var(--app-border);
}
:root[data-theme=light] .openings__account-divider,
:root[data-theme=light] .openings__account-menu-divider {
  background: var(--app-border);
}
:root[data-theme=light] .openings__account-menu-label,
:root[data-theme=light] .openings__preload-label,
:root[data-theme=light] .openings__section-count,
:root[data-theme=light] .openings__account-section-empty,
:root[data-theme=light] .openings__preload-sync-date,
:root[data-theme=light] .openings__preload-sync-peek,
:root[data-theme=light] .openings__sample-info {
  color: var(--app-text-muted);
}
:root[data-theme=light] .openings__tree-top,
:root[data-theme=light] .openings__speed-filter,
:root[data-theme=light] table.explorer-moves th {
  border-color: var(--app-border);
}
:root[data-theme=light] table.explorer-moves th {
  background: var(--app-surface-soft);
  color: var(--app-text-muted);
}
:root[data-theme=light] table.explorer-moves tr:nth-child(even) {
  background: var(--app-surface-soft);
}
:root[data-theme=light] table.explorer-moves tr:hover {
  background: var(--app-surface-selected);
}
:root[data-theme=light] table.explorer-moves tr.sum {
  background: var(--app-surface-raised);
}
:root[data-theme=light] .openings__explorer-message {
  color: var(--app-text-soft);
}
:root[data-theme=light] .openings__explorer-box .overlay {
  background: rgba(67, 58, 45, 0.24);
}
:root[data-theme=light] .sentry-move-dialog,
:root[data-theme=light] .nav-ctx-menu,
:root[data-theme=light] .nav-ctx-menu__submenu {
  background: var(--app-surface-raised);
  border-color: var(--app-border);
  box-shadow: 0 12px 32px var(--app-shadow);
}
:root[data-theme=light] .sentry-move-dialog__header,
:root[data-theme=light] .sentry-move-dialog__footer {
  border-color: var(--app-border);
}
:root[data-theme=light] .sentry-move-dialog__header h3 {
  color: var(--app-text);
}
:root[data-theme=light] .sentry-move-dialog__header p,
:root[data-theme=light] .sentry-move-dialog__desc,
:root[data-theme=light] .sentry-move-dialog__empty {
  color: var(--app-text-muted);
}
:root[data-theme=light] .sentry-move-dialog__seg {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
}
:root[data-theme=light] .sentry-move-dialog__seg-btn,
:root[data-theme=light] .sentry-move-dialog__pick,
:root[data-theme=light] .sentry-move-dialog__btn--ghost {
  color: var(--app-text-soft);
}
:root[data-theme=light] .sentry-move-dialog__seg-btn--on {
  background: var(--app-study);
  color: var(--app-study-fill-ink);
}
:root[data-theme=light] .sentry-move-dialog__pick:hover {
  background: var(--app-surface-selected);
}
:root[data-theme=light] .sentry-move-dialog__pick--on {
  background: var(--app-study-soft);
  color: var(--app-study-ink);
  box-shadow: inset 0 0 0 1px var(--app-study-ink);
}
:root[data-theme=light] .sentry-move-dialog__btn--ghost {
  border-color: var(--app-border);
}
:root[data-theme=light] .sentry-move-dialog__btn--ghost:hover {
  background: var(--app-surface-selected);
  border-color: var(--app-border-strong);
}
:root[data-theme=light] .sentry-move-dialog__btn--primary {
  background: var(--app-study);
  border-color: var(--app-study);
  color: var(--app-study-fill-ink);
}
:root[data-theme=light] .sentry-move-dialog__btn--primary:hover {
  background: var(--app-study);
}
:root[data-theme=light] .sentry-move-dialog__btn--primary:disabled {
  opacity: 1;
  background: var(--app-study-soft);
  border-color: var(--app-study-ink);
  color: var(--app-study-ink);
}
:root[data-theme=light] .sentry-tag-dialog__input {
  background: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text);
}
:root[data-theme=light] .sentry-tag-dialog__input::placeholder {
  color: var(--app-text-muted);
}
:root[data-theme=light] .nav-ctx-menu__sep {
  background: var(--app-border);
}
:root[data-theme=light] .nav-ctx-menu__item {
  color: var(--app-text);
}
:root[data-theme=light] .nav-ctx-menu__item:hover:not(.nav-ctx-menu__item--disabled) {
  background: var(--app-surface-selected);
}
:root[data-theme=light] .nav-ctx-menu__item.nav-ctx-menu__item--warning {
  color: var(--app-danger);
}
:root[data-theme=light] .nav-ctx-menu__item.nav-ctx-menu__item--disabled {
  color: var(--app-text-muted);
}
:root[data-theme=light] .nav-ctx-menu__icon {
  color: var(--app-study-ink);
}
:root[data-theme=light] .nav-ctx-menu__caret {
  color: var(--app-text-muted);
}
:root[data-theme=light] .item-adv__section-title,
:root[data-theme=light] .item-adv__field-label,
:root[data-theme=light] .item-adv__folders-note {
  color: var(--app-text-muted);
}
:root[data-theme=light] .item-adv__input {
  background: var(--app-surface);
  border-color: var(--app-border-strong);
  color: var(--app-text);
  color-scheme: light;
}
:root[data-theme=light] .item-adv__chip,
:root[data-theme=light] .item-adv__clear,
:root[data-theme=light] .item-adv__apply {
  border-color: var(--app-border);
  color: var(--app-text-soft);
}
:root[data-theme=light] .item-adv__chip:hover,
:root[data-theme=light] .item-adv__clear:hover,
:root[data-theme=light] .item-adv__apply:hover {
  background: var(--app-surface-selected);
  color: var(--app-text);
}
:root[data-theme=light] .item-adv__chip.--active,
:root[data-theme=light] .item-adv__active-chip {
  background: var(--app-study-soft);
  border-color: var(--app-study-ink);
  color: var(--app-study-ink);
}
:root[data-theme=light] .item-adv__apply,
:root[data-theme=light] .item-adv__active-chip-remove {
  color: var(--app-study-ink);
}
:root[data-theme=light] .nav-row--drop-over {
  background: var(--app-study-soft);
  color: var(--app-study-ink);
  box-shadow: inset 0 0 0 1px var(--app-study-ink);
}
:root[data-theme=light] .study-local-analysis {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
  color: var(--app-text-soft);
}
:root[data-theme=light] .study-local-analysis__head,
:root[data-theme=light] .study-local-analysis__pv-row {
  border-color: var(--app-border);
}
:root[data-theme=light] .study-local-analysis__engine {
  color: var(--app-text);
}
:root[data-theme=light] .study-local-analysis__mode,
:root[data-theme=light] .study-local-analysis__status,
:root[data-theme=light] .study-local-analysis__idle,
:root[data-theme=light] .study-local-analysis__pv-placeholder,
:root[data-theme=light] .study-local-analysis__pv-index {
  color: var(--app-text-muted);
}
:root[data-theme=light] .study-local-analysis__pv-row--empty {
  color: var(--app-text-faint);
}
:root[data-theme=light] .study-local-analysis__pv-score {
  color: var(--app-analysis);
}
:root[data-theme=light] .study-manual-review-toggle {
  background: var(--app-surface-raised);
  border-color: var(--app-border);
  color: var(--app-text-soft);
}
:root[data-theme=light] .study-manual-review-toggle:hover {
  background: var(--app-surface-selected);
  color: var(--app-text);
}
:root[data-theme=light] .study-manual-review-toggle--active {
  background: var(--app-study-soft);
  border-color: var(--app-study-ink);
  color: var(--app-study-ink);
}
:root[data-theme=light] .study-manual-review-toggle--active:hover {
  background: var(--app-surface-selected);
}
:root[data-theme=light] .study-tools-col__back {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
  color: var(--app-study-ink);
}
:root[data-theme=light] .study-tools-col__back:hover {
  background: var(--app-surface-selected);
}
:root[data-theme=light] .study-tools-col__tabs,
:root[data-theme=light] .study-tools-col__comment-row {
  border-color: var(--app-border);
}
:root[data-theme=light] .study-tools-col__tab {
  color: var(--app-text-soft);
}
:root[data-theme=light] .study-tools-col__tab:hover {
  color: var(--app-text);
}
:root[data-theme=light] .study-tools-col__tab.--active {
  color: var(--app-study-ink);
  border-bottom-color: var(--app-study);
}
:root[data-theme=light] .study-tools-col__placeholder,
:root[data-theme=light] .study-tools-col__empty,
:root[data-theme=light] .study-tools-col__label,
:root[data-theme=light] .study-tools-col__hint {
  color: var(--app-text-soft);
}
:root[data-theme=light] .study-tools-col__comment-row {
  color: var(--app-text-soft);
}
:root[data-theme=light] .study-tools-col__comment-row:hover {
  background: var(--app-surface-selected);
}
:root[data-theme=light] .study-tools-col__comment-move {
  color: var(--app-study-ink);
}
:root[data-theme=light] .study-tools-col__comment-text,
:root[data-theme=light] .study-tools-col__organize {
  color: var(--app-text-soft);
}
:root[data-theme=light] .study-tools-col__title-input,
:root[data-theme=light] .study-tools-col__folder-select,
:root[data-theme=light] .study-tools-col__tag-input {
  background: var(--app-surface);
  border-color: var(--app-border-strong);
  color: var(--app-text);
  color-scheme: light;
}
:root[data-theme=light] .study-tools-col__chip--folder {
  background: var(--app-engine-soft);
  color: var(--app-engine-route-ink);
}
:root[data-theme=light] .study-tools-col__chip--tag {
  background: var(--app-analysis-soft);
  color: var(--app-analysis);
}
:root[data-theme=light] .study-tools-col__chip-remove {
  color: var(--app-text-soft);
}
:root[data-theme=light] .study-tools-col__chip-remove:hover {
  color: var(--app-danger);
}
:root[data-theme=light] .study-ctx-menu {
  background: var(--app-surface-raised);
  border-color: var(--app-border-strong);
  box-shadow: 0 8px 24px var(--app-shadow);
}
:root[data-theme=light] .study-ctx-item {
  color: var(--app-text);
}
:root[data-theme=light] .study-ctx-item:hover {
  background: var(--app-surface-selected);
}
:root[data-theme=light] .study-ctx-item--danger {
  color: var(--app-danger);
}
:root[data-theme=light] .study-ctx-item--danger:hover {
  background: var(--app-danger-soft);
}
:root[data-theme=light] .study-color-picker {
  background: var(--app-surface-raised);
  border-color: var(--app-border-strong);
  box-shadow: 0 8px 24px var(--app-shadow);
}
:root[data-theme=light] .study-color-picker__title,
:root[data-theme=light] .study-scope-selector__title {
  color: var(--app-text);
}
:root[data-theme=light] .study-scope-btn {
  background: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text-soft);
}
:root[data-theme=light] .study-scope-btn:hover {
  background: var(--app-surface-selected);
  border-color: var(--app-border-strong);
  color: var(--app-text);
}
:root[data-theme=light] .study-scope-btn--active {
  background: var(--app-study-soft);
  border-color: var(--app-study-ink);
  color: var(--app-study-ink);
}
:root[data-theme=light] .study-scope-btn--active:hover {
  background: var(--app-surface-selected);
}
:root[data-theme=light] .study-color-picker__cancel {
  color: var(--app-text-muted);
}
:root[data-theme=light] .study-color-picker__cancel:hover {
  color: var(--app-text);
}
:root[data-theme=light] .study-tools-col__questionnaire,
:root[data-theme=light] .study-tools-col__orp {
  color: var(--app-text-soft);
}
:root[data-theme=light] .study-tools-col__questionnaire-title,
:root[data-theme=light] .study-tools-col__orp-title {
  color: var(--app-text);
}
:root[data-theme=light] .study-tools-col__orp-context,
:root[data-theme=light] .study-tools-col__orp-summary {
  background: var(--app-surface);
  border-color: var(--app-border);
}
:root[data-theme=light] .study-tools-col__orp-context-label,
:root[data-theme=light] .study-tools-col__orp-scope-detail {
  color: var(--app-text-muted);
}
:root[data-theme=light] .study-tools-col__orp-context-value,
:root[data-theme=light] .study-tools-col__orp-scope-name {
  color: var(--app-text);
}
:root[data-theme=light] .study-tools-col__orp-scope,
:root[data-theme=light] .study-tools-col__orp-train {
  background: var(--app-surface-raised);
  border-color: var(--app-border);
  color: var(--app-text-soft);
}
:root[data-theme=light] .study-tools-col__orp-scope:hover {
  background: var(--app-surface-selected);
}
:root[data-theme=light] .study-tools-col__orp-scope--active {
  background: var(--app-study-soft);
  border-color: var(--app-study-ink);
}
:root[data-theme=light] .study-tools-col__orp-train--active {
  background: var(--app-engine-soft);
  border-color: var(--app-engine);
  color: var(--app-engine-route-ink);
}
:root[data-theme=light] .study-tools-col__orp-save {
  background: var(--app-engine);
  border-color: var(--app-engine);
  color: var(--app-surface-raised);
}
:root[data-theme=light] .study-tools-col__orp-save:not(:disabled):hover {
  background: var(--app-engine);
}
:root[data-theme=light] .study-tools-col__orp-save--busy {
  background: var(--app-analysis-soft);
  border-color: var(--app-analysis);
  color: var(--app-analysis);
}
:root[data-theme=light] .study-tools-col__orp-save:disabled {
  opacity: 1;
}
:root[data-theme=light] .study-tools-col__orp-feedback--saving {
  background: var(--app-analysis-soft);
  color: var(--app-analysis);
}
:root[data-theme=light] .study-tools-col__orp-feedback--saved {
  background: var(--app-engine-soft);
  color: var(--app-engine-route-ink);
}
:root[data-theme=light] .study-tools-col__orp-feedback--error {
  background: var(--app-danger-soft);
  color: var(--app-danger-route-ink);
}
:root[data-theme=light] .drill-feedback:not(.drill-feedback--correct):not(.drill-feedback--incorrect):not(.drill-feedback--answer) {
  background: var(--app-surface);
  color: var(--app-text-soft);
}
:root[data-theme=light] .drill-progress-bar {
  background: var(--app-border);
}
:root[data-theme=light] .drill-progress-label,
:root[data-theme=light] .drill-summary__key {
  color: var(--app-text-muted);
}
:root[data-theme=light] .drill-summary__title {
  color: var(--app-text);
}
:root[data-theme=light] .drill-summary__stat {
  background: var(--app-surface);
}
:root[data-theme=light] .drill-btn--next,
:root[data-theme=light] .drill-btn--again {
  background: var(--app-study);
  color: var(--app-study-fill-ink);
}
:root[data-theme=light] .drill-btn--end,
:root[data-theme=light] .drill-btn--back {
  background: var(--app-surface-raised);
  color: var(--app-text-soft);
}
:root[data-theme=light] .openings__loading-card {
  background: var(--app-surface);
}
:root[data-theme=light] .openings__loading--error {
  color: var(--app-danger-route-ink);
}
:root[data-theme=light] .openings__loading-bar,
:root[data-theme=light] .openings__transfer-track {
  background: var(--app-surface-soft);
}
:root[data-theme=light] .openings__loading-pct,
:root[data-theme=light] .openings__transfer-count {
  color: var(--app-engine-route-ink);
}
:root[data-theme=light] .openings__import-btn, :root[data-theme=light] .openings__done-btn,
:root[data-theme=light] .openings__next-btn {
  background: var(--app-engine);
  color: var(--app-surface-raised);
}
:root[data-theme=light] .openings__import-btn:hover:not(:disabled), :root[data-theme=light] .openings__done-btn:hover:not(:disabled),
:root[data-theme=light] .openings__next-btn:hover:not(:disabled) {
  background: var(--app-engine);
}
:root[data-theme=light] .openings__import-btn:disabled, :root[data-theme=light] .openings__done-btn:disabled,
:root[data-theme=light] .openings__next-btn:disabled {
  opacity: 1;
  background: var(--app-engine-soft);
  color: var(--app-engine-route-ink);
}
:root[data-theme=light] .openings__cancel-import-btn {
  background: var(--app-danger);
  color: var(--app-surface-raised);
}
:root[data-theme=light] .openings__cancel-import-btn:hover {
  background: var(--app-danger);
}
:root[data-theme=light] .openings__error,
:root[data-theme=light] .openings__account-stats-msg.error,
:root[data-theme=light] .openings__preload-sync-error {
  color: var(--app-danger);
}
:root[data-theme=light] .openings__account-stats-msg {
  color: var(--app-text-muted);
}
:root[data-theme=light] .openings__account-stats-skeleton-col {
  background: var(--app-surface-soft);
}
:root[data-theme=light] .openings__path-start {
  color: var(--app-text-muted);
}
:root[data-theme=light] .openings__path-start:hover {
  color: var(--app-text);
}
:root[data-theme=light] .openings__path-move {
  color: var(--app-text-soft);
}
:root[data-theme=light] .openings__path-move:hover {
  color: var(--app-text);
}
:root[data-theme=light] .openings__path-move::before,
:root[data-theme=light] .openings__nav-depth {
  color: var(--app-text-muted);
}
:root[data-theme=light] .openings__nav-btn {
  background: var(--app-surface-raised);
  border-color: var(--app-border);
  color: var(--app-text-soft);
}
:root[data-theme=light] .openings__nav-btn:hover:not(:disabled) {
  background: var(--app-surface-selected);
  border-color: var(--app-border-strong);
  color: var(--app-text);
}
:root[data-theme=light] .openings__nav-btn:disabled {
  opacity: 1;
  background: var(--app-surface-soft);
  color: var(--app-text-muted);
}
:root[data-theme=light] .openings__lines-panel {
  background: var(--app-surface);
}
:root[data-theme=light] .openings__pos-header {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
}
:root[data-theme=light] .openings__pos-label {
  color: var(--app-text-muted);
}
:root[data-theme=light] .openings__filter-badge {
  background: var(--app-study-soft);
  border-color: var(--app-study-ink);
  color: var(--app-study-ink);
}
:root[data-theme=light] .openings__filter-badge-clear {
  color: var(--app-study-ink);
}
:root[data-theme=light] .openings__filter-badge-clear:hover {
  color: var(--app-text);
}
:root[data-theme=light] .openings__save-feedback {
  color: var(--app-engine-route-ink);
}
:root[data-theme=light] .openings__tree-eval-controls,
:root[data-theme=light] .openings__date-range-row {
  border-color: var(--app-border);
}
:root[data-theme=light] .openings__tree-eval-toggle {
  color: var(--app-text-soft);
}
:root[data-theme=light] .openings__tree-eval-level:disabled {
  opacity: 1;
  color: var(--app-text-muted);
}
:root[data-theme=light] .openings__date-range-option {
  color: var(--app-text-soft);
}
:root[data-theme=light] .openings__date-range-option:hover {
  background: var(--app-surface-selected);
  color: var(--app-text);
}
:root[data-theme=light] .openings__date-range-option.active {
  background: var(--app-study-soft);
  color: var(--app-study-ink);
}
:root[data-theme=light] .openings__date-range-count {
  background: var(--app-surface-soft);
  color: var(--app-text-muted);
}
:root[data-theme=light] .openings__date-range-option.active .openings__date-range-count {
  color: var(--app-study-ink);
}
:root[data-theme=light] .openings__samples {
  background: var(--app-surface);
}
:root[data-theme=light] .openings__samples-title {
  color: var(--app-text);
}
:root[data-theme=light] .openings__samples-empty {
  color: var(--app-text-muted);
}
:root[data-theme=light] .openings__sample-row + .openings__sample-row {
  border-color: var(--app-border);
}
:root[data-theme=light] .openings__sample-row:hover,
:root[data-theme=light] .openings__sample-row--clickable:hover {
  background: var(--app-surface-selected);
}
:root[data-theme=light] .openings__sample-copy,
:root[data-theme=light] .openings__sample-link {
  background: var(--app-surface-raised);
  color: var(--app-text-soft);
}
:root[data-theme=light] .openings__sample-copy:hover,
:root[data-theme=light] .openings__sample-link:hover {
  background: var(--app-surface-selected);
  color: var(--app-text);
}
:root[data-theme=light] .openings__sample-next-move {
  background: var(--app-engine-soft);
  color: var(--app-engine-route-ink);
}
:root[data-theme=light] .openings__sample-preview {
  background: var(--app-surface-raised);
  border-color: var(--app-border-strong);
  box-shadow: 0 8px 24px var(--app-shadow);
}
:root[data-theme=light] .openings__explorer-config-close,
:root[data-theme=light] .openings__explorer-retry {
  background: var(--app-engine-soft);
  border-color: var(--app-engine);
  color: var(--app-engine-route-ink);
}
:root[data-theme=light] .openings__explorer-config-close:hover,
:root[data-theme=light] .openings__explorer-retry:hover {
  background: var(--app-surface-selected);
}
:root[data-theme=light] .openings__explorer-error {
  color: var(--app-danger);
}
:root[data-theme=light] .sentry-move-dialog__seg-btn:focus-visible,
:root[data-theme=light] .sentry-move-dialog__pick:focus-visible,
:root[data-theme=light] .sentry-move-dialog__btn:focus-visible,
:root[data-theme=light] .sentry-tag-dialog__input:focus-visible,
:root[data-theme=light] .nav-ctx-menu__item:focus-visible,
:root[data-theme=light] .item-adv__input:focus-visible,
:root[data-theme=light] .item-adv__chip:focus-visible,
:root[data-theme=light] .item-adv__clear:focus-visible,
:root[data-theme=light] .item-adv__apply:focus-visible,
:root[data-theme=light] .study-manual-review-toggle:focus-visible,
:root[data-theme=light] .study-tools-col__back:focus-visible,
:root[data-theme=light] .study-tools-col__tab:focus-visible,
:root[data-theme=light] .study-tools-col__comment-row:focus-visible,
:root[data-theme=light] .study-tools-col__title-input:focus-visible,
:root[data-theme=light] .study-tools-col__folder-select:focus-visible,
:root[data-theme=light] .study-tools-col__tag-input:focus-visible,
:root[data-theme=light] .study-tools-col__chip-remove:focus-visible,
:root[data-theme=light] .study-scope-btn:focus-visible,
:root[data-theme=light] .study-color-picker__btn:focus-visible,
:root[data-theme=light] .study-color-picker__cancel:focus-visible,
:root[data-theme=light] .study-tools-col__orp-scope:focus-visible,
:root[data-theme=light] .study-tools-col__orp-train:focus-visible,
:root[data-theme=light] .study-tools-col__orp-save:focus-visible,
:root[data-theme=light] .drill-btn:focus-visible,
:root[data-theme=light] .openings__import-btn:focus-visible,
:root[data-theme=light] .openings__done-btn:focus-visible,
:root[data-theme=light] .openings__next-btn:focus-visible,
:root[data-theme=light] .openings__cancel-import-btn:focus-visible,
:root[data-theme=light] .openings__nav-btn:focus-visible,
:root[data-theme=light] .openings__filter-badge-clear:focus-visible,
:root[data-theme=light] .openings__date-range-btn:focus-visible,
:root[data-theme=light] .openings__date-range-option:focus-visible,
:root[data-theme=light] .openings__sample-copy:focus-visible,
:root[data-theme=light] .openings__sample-link:focus-visible,
:root[data-theme=light] .openings__explorer-config-close:focus-visible,
:root[data-theme=light] .openings__explorer-retry:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
}

:root[data-theme=light] .admin-page {
  background: var(--app-canvas-strong);
  color: var(--app-text);
}
:root[data-theme=light] .admin-header {
  border-color: var(--app-border);
}
:root[data-theme=light] .admin-title {
  color: var(--app-text);
}
:root[data-theme=light] .admin-desc {
  color: var(--app-text-soft);
}
:root[data-theme=light] .admin-panel__header,
:root[data-theme=light] .admin-sync-status,
:root[data-theme=light] .report-list__empty {
  color: var(--app-text-muted);
}
:root[data-theme=light] .admin-log__empty {
  color: var(--app-text-soft);
}
:root[data-theme=light] .admin-panel {
  background: var(--app-surface);
  border-color: var(--app-border);
}
:root[data-theme=light] .admin-panel__header h3,
:root[data-theme=light] .admin-backup-preview__header strong,
:root[data-theme=light] .admin-log__action,
:root[data-theme=light] .report-list__section-header h4,
:root[data-theme=light] .review-error-packages__item strong,
:root[data-theme=light] .admin-data-progress__header strong,
:root[data-theme=light] .admin-data-section__header h4,
:root[data-theme=light] .admin-library-actions__copy strong,
:root[data-theme=light] .admin-account-row__main strong,
:root[data-theme=light] .admin-settings-reset-row > div:first-child strong {
  color: var(--app-text);
}
:root[data-theme=light] .admin-panel__header > span,
:root[data-theme=light] .admin-backup-preview__header span,
:root[data-theme=light] .report-list__section-header span,
:root[data-theme=light] .review-error-packages__item span,
:root[data-theme=light] .review-error-packages__item small,
:root[data-theme=light] .admin-data-section__header span,
:root[data-theme=light] .admin-account-row__main span,
:root[data-theme=light] .admin-settings-reset-row > div:first-child span,
:root[data-theme=light] .admin-account-row__counts {
  color: var(--app-text-muted);
}
:root[data-theme=light] .admin-token-input {
  background: var(--app-surface-raised);
  border-color: var(--app-border);
  color: var(--app-text);
}
:root[data-theme=light] .admin-token-input::placeholder {
  color: var(--app-text-muted);
}
:root[data-theme=light] .admin-token-input option {
  background: var(--app-surface-raised);
  color: var(--app-text);
}
:root[data-theme=light] .admin-btn {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
  color: var(--app-text-soft);
}
:root[data-theme=light] .admin-btn:hover:not(:disabled) {
  background: var(--app-surface-selected);
  border-color: var(--app-border-strong);
  color: var(--app-text);
}
:root[data-theme=light] .admin-btn:disabled {
  background: var(--app-canvas-strong);
  border-color: var(--app-border);
  color: var(--app-text-soft);
  opacity: 1;
}
:root[data-theme=light] .admin-btn--primary {
  background: var(--app-analysis-soft);
  border-color: var(--app-analysis);
  color: var(--app-analysis);
}
:root[data-theme=light] .admin-btn--primary:hover:not(:disabled) {
  background: var(--app-surface-selected);
  border-color: var(--app-analysis);
  color: var(--app-analysis);
}
:root[data-theme=light] .admin-btn--danger {
  background: var(--app-danger-soft);
  border-color: var(--app-danger);
  color: var(--app-danger-route-ink);
}
:root[data-theme=light] .admin-btn--danger:disabled {
  background: var(--app-danger-soft);
  border-color: var(--app-danger);
  color: var(--app-danger-route-ink);
  opacity: 1;
}
:root[data-theme=light] .admin-btn--danger:hover:not(:disabled) {
  background: var(--app-surface-selected);
  border-color: var(--app-danger);
  color: var(--app-danger-route-ink);
}
:root[data-theme=light] .admin-btn--working,
:root[data-theme=light] .admin-btn--working:disabled {
  background: var(--app-amber-soft);
  border-color: var(--app-amber);
  color: var(--app-amber-route-ink);
  opacity: 1;
}
:root[data-theme=light] .admin-token-input:focus-visible,
:root[data-theme=light] .admin-btn:focus-visible,
:root[data-theme=light] .review-error-packages__item:focus-visible,
:root[data-theme=light] .admin-file-btn input:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
}
:root[data-theme=light] .admin-file-btn:focus-within {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
}
:root[data-theme=light] a.admin-btn--primary[href="#/sync"] {
  background: var(--app-sync-soft);
  border-color: var(--app-sync);
  color: var(--app-sync-route-ink);
}
:root[data-theme=light] a.admin-btn--primary[href="#/sync"]:hover:not(:disabled) {
  background: var(--app-surface-selected);
  border-color: var(--app-sync);
  color: var(--app-sync-route-ink);
}
:root[data-theme=light] .admin-count,
:root[data-theme=light] .admin-data-metric {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
  color: var(--app-text-muted);
}
:root[data-theme=light] .admin-count__num,
:root[data-theme=light] .admin-data-metric__value {
  color: var(--app-text);
}
:root[data-theme=light] .sync-severity--active {
  color: var(--app-engine-route-ink);
}
:root[data-theme=light] .sync-severity--warning {
  color: var(--app-amber-route-ink);
}
:root[data-theme=light] .sync-severity--error {
  color: var(--app-danger-route-ink);
}
:root[data-theme=light] .admin-sync-banner.sync-severity--active {
  border-color: #4f7b4f;
}
:root[data-theme=light] .admin-sync-banner.sync-severity--warning {
  border-color: #7a5f26;
}
:root[data-theme=light] .admin-sync-banner.sync-severity--error {
  border-color: #7a3a3a;
}
:root[data-theme=light] .admin-sync-badge {
  border-color: var(--app-border-strong);
}
:root[data-theme=light] .admin-sync-badge--active {
  color: var(--app-amber-route-ink);
  border-color: var(--app-amber);
}
:root[data-theme=light] .admin-sync-badge--done {
  color: var(--app-engine-route-ink);
  border-color: var(--app-engine);
}
:root[data-theme=light] .admin-sync-badge--error {
  color: var(--app-danger-route-ink);
  border-color: var(--app-danger);
}
:root[data-theme=light] .admin-sync-message {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
  color: var(--app-text);
}
:root[data-theme=light] .admin-sync-message--warning {
  border-color: var(--app-amber);
  color: var(--app-amber-route-ink);
}
:root[data-theme=light] .admin-sync-banner__identity-line,
:root[data-theme=light] .admin-sync-banner__op-label {
  color: var(--app-text);
}
:root[data-theme=light] .admin-sync-banner__scope-note,
:root[data-theme=light] .admin-sync-banner__op-detail,
:root[data-theme=light] .admin-sync-banner__idle,
:root[data-theme=light] .admin-sync-banner__queued {
  color: var(--app-text-muted);
}
:root[data-theme=light] .admin-sync-banner__section-title {
  color: var(--app-text-soft);
}
:root[data-theme=light] .admin-sync-banner__op-progress,
:root[data-theme=light] .admin-sync-banner__idle-label {
  color: var(--app-engine-route-ink);
}
:root[data-theme=light] .admin-sync-banner__issue {
  background: var(--app-surface-soft);
}
:root[data-theme=light] .admin-sync-banner__issue--warning {
  color: var(--app-amber-route-ink);
}
:root[data-theme=light] .admin-sync-banner__issue--error {
  color: var(--app-danger-route-ink);
}
:root[data-theme=light] .admin-panel--backup {
  border-color: var(--app-analysis);
}
:root[data-theme=light] .admin-panel--lichess-auth {
  border-color: var(--app-sync);
}
:root[data-theme=light] .admin-backup-copy,
:root[data-theme=light] .admin-log__message,
:root[data-theme=light] .admin-library-actions__copy span {
  color: var(--app-text-soft);
}
:root[data-theme=light] .admin-backup-preview,
:root[data-theme=light] .admin-data-section,
:root[data-theme=light] .report-list__section {
  border-color: var(--app-border);
}
:root[data-theme=light] .admin-backup-hash {
  color: var(--app-analysis);
}
:root[data-theme=light] .admin-backup-store-list span {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
  color: var(--app-text-soft);
}
:root[data-theme=light] .admin-backup-warnings {
  color: var(--app-amber-route-ink);
}
:root[data-theme=light] .admin-file-btn--disabled {
  opacity: 1;
}
:root[data-theme=light] .admin-log__entry {
  background: var(--app-surface-soft);
  border-color: var(--app-border-strong);
}
:root[data-theme=light] .admin-log__entry--success {
  border-color: #4f9a5f;
}
:root[data-theme=light] .admin-log__entry--error {
  border-color: #b85a5a;
}
:root[data-theme=light] .admin-log__entry--info {
  border-color: #6a83a8;
}
:root[data-theme=light] .admin-log__meta {
  color: var(--app-text-muted);
}
:root[data-theme=light] .report-list__section-header,
:root[data-theme=light] .report-list__heading,
:root[data-theme=light] .report-list__cell {
  border-color: var(--app-border);
}
:root[data-theme=light] .report-list__heading {
  color: var(--app-text-muted);
}
:root[data-theme=light] .report-list__cell {
  color: var(--app-text);
}
:root[data-theme=light] .report-preview__list {
  color: var(--app-text-soft);
}
:root[data-theme=light] .review-error-packages__detail {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
}
:root[data-theme=light] .review-error-packages__item {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
  color: var(--app-text);
}
:root[data-theme=light] .review-error-packages__item:hover,
:root[data-theme=light] .review-error-packages__item--selected {
  background: var(--app-surface-selected);
  border-color: var(--app-analysis);
}
:root[data-theme=light] .admin-panel--danger {
  background: var(--app-danger-soft);
  border-color: #423030;
}
:root[data-theme=light] .admin-danger-copy {
  color: var(--app-danger-route-ink);
}
:root[data-theme=light] .admin-data-progress {
  background: var(--app-amber-soft);
  border-color: var(--app-amber);
}
:root[data-theme=light] .admin-data-progress--done {
  background: var(--app-engine-soft);
  border-color: var(--app-engine);
}
:root[data-theme=light] .admin-data-progress--error {
  background: var(--app-danger-soft);
  border-color: var(--app-danger);
}
:root[data-theme=light] .admin-data-progress__message {
  color: var(--app-text-soft);
}
:root[data-theme=light] .admin-data-progress__step {
  border-color: var(--app-border-strong);
  color: var(--app-text-muted);
}
:root[data-theme=light] .admin-data-progress__step--active {
  border-color: var(--app-amber);
  color: var(--app-amber-route-ink);
}
:root[data-theme=light] .admin-data-progress__step--complete {
  border-color: var(--app-engine);
  color: var(--app-engine-route-ink);
}
:root[data-theme=light] .admin-data-progress__step--error {
  border-color: var(--app-danger);
  color: var(--app-danger-route-ink);
}
:root[data-theme=light] .admin-library-actions,
:root[data-theme=light] .admin-account-row,
:root[data-theme=light] .admin-settings-reset-row {
  background: var(--app-surface-soft);
  border-color: var(--app-border);
}

:root {
  --app-canvas: #1a1a1a;
  --app-canvas-strong: #111;
  --app-surface: #1e1e1e;
  --app-surface-raised: #222;
  --app-surface-soft: #181818;
  --app-surface-selected: #2a2a2a;
  --app-text: #e8e8e8;
  --app-text-soft: #bbb;
  --app-text-muted: #888;
  --app-text-faint: #666;
  --app-border: #333;
  --app-border-strong: #666;
  --app-focus: #9cc9f5;
  --app-link: #9fc7ff;
  --app-shadow: rgba(0, 0, 0, 0.6);
  --app-analysis: #7cb5e8;
  --app-analysis-soft: rgba(124, 181, 232, 0.12);
  --app-study: #4a90e2;
  --app-study-soft: rgba(74, 144, 226, 0.14);
  --app-engine: #55c26a;
  --app-engine-soft: rgba(85, 194, 106, 0.1);
  --app-amber: #e8a33d;
  --app-amber-soft: rgba(232, 163, 61, 0.12);
  --app-sync: #4fb3ba;
  --app-sync-soft: rgba(79, 179, 186, 0.12);
  --app-accepted-alternate: #d7c77a;
  --app-accepted-alternate-ink: #f1e9bb;
  --app-accepted-alternate-soft: rgba(215, 199, 122, 0.12);
  --app-danger: #d66;
  --app-danger-soft: rgba(221, 102, 102, 0.12);
  --bg: var(--app-canvas);
  --text: var(--app-text);
  --control-explainer-bg: color-mix(in srgb, var(--bg) 84%, #000 16%);
  --control-explainer-border: color-mix(in srgb, var(--text) 24%, transparent);
  --control-explainer-muted: color-mix(in srgb, var(--text) 72%, transparent);
}

:root[data-theme=light] {
  --app-canvas: #f3efe6;
  --app-canvas-strong: #e9e2d5;
  --app-surface: #fffdf8;
  --app-surface-raised: #ffffff;
  --app-surface-soft: #f8f3e9;
  --app-surface-selected: #e9f0f4;
  --app-text: #292824;
  --app-text-soft: #514e47;
  --app-text-muted: #746f65;
  --app-text-faint: #999184;
  --app-border: #d8d0c2;
  --app-border-strong: #9a9080;
  --app-focus: #146bc0;
  --app-link: #146bc0;
  --app-shadow: rgba(70, 58, 38, 0.16);
  --app-analysis: #315f7c;
  --app-analysis-soft: rgba(49, 95, 124, 0.12);
  --app-study: #4a90e2;
  --app-study-ink: #245a96;
  --app-study-fill-ink: #10233b;
  --app-study-pressed-ink: #050a10;
  --app-study-soft: rgba(74, 144, 226, 0.14);
  --app-engine: #397353;
  --app-engine-soft: rgba(57, 115, 83, 0.12);
  --app-amber: #ad6d1d;
  --app-amber-ink: #895411;
  --app-amber-fill-ink: #100b05;
  --app-amber-soft: rgba(173, 109, 29, 0.13);
  --app-sync: #287a75;
  --app-sync-soft: rgba(40, 122, 117, 0.12);
  --app-accepted-alternate: #d7c77a;
  --app-accepted-alternate-ink: #625929;
  --app-accepted-alternate-soft: #f2eccb;
  --app-danger: #a84643;
  --app-danger-soft: rgba(168, 70, 67, 0.12);
  --bg: var(--app-canvas);
  --text: var(--app-text);
}

.pp-control-explainer {
  position: fixed;
  z-index: 12000;
  box-sizing: border-box;
  width: max-content;
  max-width: min(320px, 100vw - 16px);
  padding: 8px 10px;
  border: 1px solid var(--control-explainer-border);
  border-radius: 6px;
  background: var(--control-explainer-bg);
  color: var(--text);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.34);
  font-size: 0.78rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  pointer-events: none;
  opacity: 1;
  transition: opacity 80ms ease-out;
}
.pp-control-explainer[hidden] {
  display: none;
}
.pp-control-explainer::before {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: -1;
}
.pp-control-explainer__label {
  font-weight: 650;
}
.pp-control-explainer__description {
  margin-top: 2px;
  color: var(--control-explainer-muted);
  font-weight: 400;
}
.pp-control-explainer--pointer {
  pointer-events: auto;
}

.control-explainer-disabled {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  cursor: not-allowed;
}
.control-explainer-disabled__visual {
  display: inline-flex;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.control-explainer-disabled__visual > * {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.control-explainer-disabled > * {
  pointer-events: none;
}
.control-explainer-disabled:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--text) 70%, transparent);
  outline-offset: 2px;
}

.pp-teaching-card {
  position: fixed;
  z-index: 11950;
  box-sizing: border-box;
  width: min(340px, 100vw - 24px);
  padding: 14px;
  border: 1px solid var(--app-border-strong);
  border-radius: 12px;
  background: var(--app-surface-raised);
  color: var(--app-text);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42);
}
.pp-teaching-card__header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.pp-teaching-card h2 {
  flex: 1 1 auto;
  margin: 0;
  font-size: 1rem;
  line-height: 1.35;
}
.pp-teaching-card__close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin: -5px -5px 0 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--app-text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.pp-teaching-card__close:hover, .pp-teaching-card__close:focus-visible {
  background: var(--app-surface-selected);
  color: var(--app-text);
}
.pp-teaching-card__body {
  margin: 8px 0 0;
  color: var(--app-text-soft);
  font-size: 0.88rem;
  line-height: 1.5;
}
.pp-teaching-card__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
.pp-teaching-card__not-now {
  padding: 6px 10px;
  border: 1px solid var(--app-border);
  border-radius: 7px;
  background: var(--app-surface-soft);
  color: var(--app-text-soft);
  cursor: pointer;
}
.pp-teaching-card__not-now:hover, .pp-teaching-card__not-now:focus-visible {
  background: var(--app-surface-selected);
  color: var(--app-text);
}

html[data-motion=reduced] {
  scroll-behavior: auto;
}
html[data-motion=reduced] *,
html[data-motion=reduced] *::before,
html[data-motion=reduced] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion=full]) .pp-control-explainer {
    transition: none;
  }
}
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  flex: 1;
  height: 1.4em;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.5em;
  cursor: pointer;
  background: #3a3a3a;
  border-radius: 0.5em;
  border: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  border: 2px solid #777;
  height: 1.1em;
  width: 1.1em;
  border-radius: 50%;
  background: #999;
  cursor: pointer;
  margin-top: -0.3em;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 0.5em;
  cursor: pointer;
  background: #3a3a3a;
  border-radius: 0.5em;
  border: none;
}
input[type=range]::-moz-range-thumb {
  appearance: none;
  border: 2px solid #777;
  height: 1.1em;
  width: 1.1em;
  border-radius: 50%;
  background: #999;
  cursor: pointer;
  margin-top: -0.3em;
}
input[type=range]:hover::-webkit-slider-thumb {
  border-color: #4a9;
  background: #bbb;
}
input[type=range]:hover::-moz-range-thumb {
  border-color: #4a9;
  background: #bbb;
}
input[type=range]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid #4a9;
  outline-offset: 1px;
}

body ::-webkit-scrollbar,
body ::-webkit-scrollbar-corner {
  width: 0.5rem;
  background: #1a1a1a;
}

body ::-webkit-scrollbar-thumb {
  background: #3a3a3a;
}

body ::-webkit-scrollbar-thumb:hover,
body ::-webkit-scrollbar-thumb:active {
  background: #555;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #3a3a3a #1a1a1a;
}

html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

.app-legal {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px 14px;
  border-top: 1px solid #222;
  background: #111;
  color: #8b8b8b;
  font-size: 0.78rem;
}
.app-legal__notice {
  flex-basis: 100%;
  text-align: center;
  color: #777;
}
.app-legal__links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.app-legal a {
  color: #9fc7ff;
  text-decoration: none;
}
.app-legal a:hover {
  text-decoration: underline;
}
.app-legal__sep {
  color: #555;
}

.header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  height: 52px;
  background: #111;
  border-bottom: 1px solid #222;
  position: relative;
}
.header__brand {
  display: flex;
  align-items: center;
  height: 34px;
  text-decoration: none;
  flex-shrink: 0;
}
.header__brand-logo {
  display: block;
  width: auto;
  height: 30px;
  max-width: 150px;
  object-fit: contain;
}
.header__search {
  position: relative;
  flex: 1;
  min-width: 0;
  max-width: 546px;
}
.header__bar {
  display: flex;
  align-items: center;
  gap: 0;
  height: 34px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  overflow: hidden;
}
.header__platform-toggle {
  flex-shrink: 0;
  padding: 0 12px;
  height: 34px;
  background: transparent;
  color: #e8e8e8;
  border: none;
  border-right: 1px solid #333;
  border-radius: 0;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s;
}
.header__platform-toggle:hover {
  background: #222;
  color: #fff;
}
.header__platform-toggle:disabled {
  color: #aaa;
  cursor: default;
  opacity: 0.75;
}
.header__platform-toggle:disabled:hover {
  background: transparent;
  color: #aaa;
}
.header__input {
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  background: transparent;
  color: #e8e8e8;
  border: none;
  outline: none;
  font-size: 0.875rem;
}
.header__input::placeholder {
  color: #555;
}
.header__input:disabled {
  opacity: 0.5;
}
.header__input::-webkit-credentials-auto-fill-button, .header__input::-webkit-contacts-auto-fill-button, .header__input::-webkit-search-cancel-button, .header__input::-webkit-search-decoration {
  display: none;
}
.header__account-entry {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  height: 34px;
}
.header__account-select {
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0 28px 0 10px;
  background: transparent;
  color: #e8e8e8;
  border: none;
  outline: none;
  font-size: 0.875rem;
  cursor: pointer;
  appearance: auto;
}
.header__account-select:disabled {
  opacity: 0.5;
  cursor: default;
}
.header__account-select option {
  background: #181818;
  color: #e8e8e8;
}
.header__bar > .control-explainer-disabled:has(.header__input), .header__bar > .control-explainer-disabled:has(.header__account-select), .header__account-entry > .control-explainer-disabled:has(.header__input) {
  flex: 1 1 0;
}
.header__bar > .control-explainer-disabled:has(.header__import) {
  flex-shrink: 0;
  max-width: none;
}
.header__account-back {
  flex-shrink: 0;
  height: 34px;
  padding: 0 9px;
  background: transparent;
  color: #888;
  border: none;
  border-left: 1px solid #2a2a2a;
  font-size: 0.76rem;
  cursor: pointer;
  white-space: nowrap;
}
.header__account-back:hover:not(:disabled) {
  color: #ccc;
  background: #202020;
}
.header__account-back:disabled {
  opacity: 0.45;
  cursor: default;
}
.header__import {
  flex-shrink: 0;
  height: 34px;
  padding: 0 14px;
  background: #2a4a2a;
  color: #8f8;
  border: none;
  border-left: 1px solid #333;
  border-radius: 0;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.1s;
}
.header__import:hover:not(:disabled) {
  background: #335533;
}
.header__import:disabled {
  opacity: 0.45;
  cursor: default;
}
.header__count {
  flex-shrink: 0;
  padding: 0 8px;
  font-size: 0.75rem;
  color: #6a9;
  cursor: pointer;
  white-space: nowrap;
  border-left: 1px solid #2a2a2a;
  height: 34px;
  display: flex;
  align-items: center;
}
.header__count:hover {
  color: #8fc;
}
.header__error {
  flex-shrink: 0;
  padding: 0 8px;
  font-size: 0.85rem;
  color: #f84;
  cursor: help;
  height: 34px;
  display: flex;
  align-items: center;
}
.header__toggle {
  flex-shrink: 0;
  width: 28px;
  height: 34px;
  background: transparent;
  color: #666;
  border: none;
  border-left: 1px solid #2a2a2a;
  cursor: pointer;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.1s;
}
.header__toggle:hover, .header__toggle.active {
  color: #aaa;
}
.header__toggle--filtered {
  color: #6a9;
}
.header__toggle--filtered::after {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6a9;
  position: absolute;
  top: 6px;
  right: 4px;
}
.header__nav {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.header__nav a {
  padding: 6px 10px;
  color: #888;
  text-decoration: none;
  font-size: 0.82rem;
  border-radius: 4px;
  white-space: nowrap;
  transition: color 0.1s, background 0.1s;
}
.header__nav a:hover {
  color: #ccc;
  background: #1a1a1a;
}
.header__nav a.active {
  color: #e8e8e8;
}
.header__login {
  flex-shrink: 0;
  padding: 5px 10px;
  font-size: 0.8rem;
  font: inherit;
  background: transparent;
  color: #6a9;
  text-decoration: none;
  border: 1px solid #2a4a2a;
  border-radius: 4px;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.1s, border-color 0.1s;
}
.header__login:hover {
  color: #8fc;
  border-color: #3a6a3a;
}
.header__user {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.header__sync-loading {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: block;
  pointer-events: none;
}
.header__sync-status {
  min-height: 16px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.header__sync-warning {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #d9a441;
  font-size: 14px;
  line-height: 1;
}
.header__username {
  font-size: 0.8rem;
  color: #8a8;
  white-space: nowrap;
}
.header__logout {
  width: 20px;
  height: 20px;
  background: transparent;
  border: 1px solid #333;
  border-radius: 3px;
  color: #666;
  cursor: pointer;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.1s, border-color 0.1s;
}
.header__logout:hover {
  color: #f66;
  border-color: #633;
}
.header__logout--text {
  width: auto;
  min-width: 58px;
  padding: 0 9px;
  color: #bbb;
  font-size: 0.78rem;
}
.header__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 340px;
  max-width: 480px;
  background: #181818;
  border: 1px solid #333;
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.7);
  z-index: 200;
  padding: 4px 0;
}
.header__backdrop {
  position: fixed;
  inset: 0;
  z-index: 199;
}
.header__panel-section {
  padding: 10px 14px;
}
.header__panel-divider {
  height: 1px;
  background: #252525;
  margin: 0;
}
.header__panel-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: #666;
  flex-shrink: 0;
  margin-right: 2px;
}
.header__panel-label.--mt {
  margin-top: 14px;
}
.header__panel-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.header__panel-row + .header__panel-row {
  margin-top: 8px;
}
.header__panel-row.--mt {
  margin-top: 10px;
}
.header__date-input {
  height: 26px;
  padding: 0 6px;
  background: #222;
  border: 1px solid #333;
  border-radius: 4px;
  color: #ccc;
  font-size: 0.78rem;
  outline: none;
  cursor: pointer;
}
.header__date-input:focus {
  border-color: #555;
}
.header__date-input::-webkit-calendar-picker-indicator {
  filter: invert(0.5);
  cursor: pointer;
}
.header__panel-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: #aaa;
  cursor: pointer;
  user-select: none;
}
.header__panel-hint {
  font-size: 0.75rem;
  color: #555;
  margin-right: 2px;
  flex-shrink: 0;
}
.header__panel-warn {
  font-size: 0.75rem;
  color: #c9a227;
  margin: 4px 0 0;
  line-height: 1.35;
}
.header__panel-btn {
  padding: 4px 12px;
  background: #222;
  color: #ccc;
  border: 1px solid #444;
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
}
.header__panel-btn:hover {
  background: #2a2a2a;
  color: #e8e8e8;
}
.header__panel-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.header__panel-btn:disabled:hover {
  background: #222;
  color: #ccc;
}
.header__panel-error {
  font-size: 0.78rem;
  color: #f84;
}
.header__pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 16px;
  background: #222;
  color: #888;
  border: 1px solid #333;
  border-radius: 4px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.header__pill:hover {
  background: #2a2a2a;
  color: #ccc;
}
.header__pill.active {
  background: #1e3a1e;
  color: #6f6;
  border-color: #3a7a3a;
}
.header__pill[data-icon]::before {
  font-family: "lichess";
  content: attr(data-icon);
  font-size: 1em;
  line-height: 1;
}
.header__text-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  background: #111;
  border: 1px solid #383838;
  border-radius: 6px;
  color: #e0e0e0;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  margin-top: 6px;
}
.header__text-input::placeholder {
  color: #444;
}
.header__text-input:focus {
  border-color: #5a9a5a;
  box-shadow: 0 0 0 2px rgba(90, 154, 90, 0.15);
}
.header__text-input--short {
  width: 80px;
}
.header__pgn-input {
  width: 100%;
  background: #111;
  color: #ccc;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 0.78rem;
  font-family: monospace;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
  margin-bottom: 6px;
}
.header__pgn-input::placeholder {
  color: #444;
}
.header__pgn-input:focus {
  border-color: #555;
}
.header__games-list {
  max-height: 240px;
  overflow-y: auto;
  margin: 0 -14px;
  padding: 0 0 2px;
}
.header__game-item {
  display: flex;
  align-items: center;
}
.header__game-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
  min-width: 0;
  padding: 6px 14px;
  background: transparent;
  color: #aaa;
  border: none;
  border-radius: 0;
  text-align: left;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.1s;
}
.header__game-row:hover {
  background: #222;
  color: #e8e8e8;
}
.header__game-row.active {
  background: #1a2a1a;
  color: #8f8;
}
.header__panel-disclaimer {
  margin: 6px 0 0;
  color: #777;
  font-size: 0.72rem;
  line-height: 1.35;
}
.header__game-badge {
  font-size: 0.75em;
  font-weight: 700;
  flex-shrink: 0;
}
.header__game-badge.--ok {
  color: #4a8;
}
.header__game-badge.--warn {
  color: #f84;
}
.header__game-badge.--missed-mate {
  color: #a855f7;
}
.header__mobile-nav {
  display: none;
  position: relative;
  flex-shrink: 0;
}
.header__hamburger {
  width: 38px;
  height: 38px;
  background: transparent;
  border: none;
  color: #aaa;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.1s, color 0.1s;
}
.header__hamburger:hover, .header__hamburger.active {
  background: #1e1e1e;
  color: #e8e8e8;
}
.header__mobile-backdrop {
  position: fixed;
  inset: 0;
  z-index: 299;
}
.header__mobile-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 160px;
  background: #181818;
  border: 1px solid #333;
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.7);
  z-index: 300;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
}
.header__mobile-link {
  padding: 11px 18px;
  color: #aaa;
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s;
}
.header__mobile-link:hover {
  background: #222;
  color: #e8e8e8;
}
.header__mobile-link.active {
  color: #e8e8e8;
  background: #1a2a1a;
}
.header__mobile-submenu {
  padding: 4px 0 6px;
  border-top: 1px solid #252525;
  border-bottom: 1px solid #252525;
  background: #141414;
}
.header__mobile-submenu-label {
  padding: 7px 18px 5px 28px;
  color: #777;
  font-size: 0.64rem;
  line-height: 1;
  text-transform: uppercase;
}
.header__mobile-submenu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 40px;
  padding: 8px 18px 8px 28px;
  background: transparent;
  border: none;
  color: #aaa;
  font-size: 0.84rem;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.header__mobile-submenu-item:hover {
  background: #202020;
  color: #e8e8e8;
}
.header__mobile-submenu-item.active {
  color: #d9e4ff;
  background: #1a1a2e;
}
.header__mobile-submenu-icon {
  width: 18px;
  color: inherit;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1;
}
.header__mobile-submenu-icon[data-icon]::before {
  font-family: "lichess";
  content: attr(data-icon);
}
.header__mobile-submenu-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 600px) {
  .header {
    padding: 0 10px;
    gap: 6px;
  }
  .header__brand {
    display: none;
  }
  .header__nav {
    display: none;
  }
  .header__mobile-nav {
    display: block;
  }
  .header__search {
    max-width: none;
    flex: 1;
  }
  .header__platform-toggle {
    display: none;
  }
  .header__import {
    padding: 0 10px;
    font-size: 0.75rem;
  }
  .header__panel {
    left: -48px;
    right: 0;
    min-width: 0;
    max-width: none;
    border-radius: 0 0 8px 8px;
  }
}

@media (max-width: 600px) {
  .global-menu__dropdown.board-open {
    width: min(264px, 100vw - 20px);
  }
  .board-settings__slider-row {
    grid-template-columns: 68px 1fr 32px;
    gap: 4px;
  }
}
.dev-reset {
  margin-left: auto;
  padding: 4px 10px;
  font-size: 0.75rem;
  background: #2a1a1a;
  color: #f66;
  border: 1px solid #4a2a2a;
  border-radius: 3px;
  cursor: pointer;
  opacity: 0.7;
}
.dev-reset:hover {
  opacity: 1;
  background: #3a1a1a;
}

.auth-modal__backdrop {
  position: fixed;
  inset: 0;
  z-index: 260;
  background: rgba(0, 0, 0, 0.66);
}
.auth-modal__card {
  position: fixed;
  z-index: 261;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, 92vw);
  background: #1b1b1b;
  border: 1px solid #3b3b3b;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.72);
  padding: 22px 24px 24px;
}
.auth-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.auth-modal__header h2 {
  margin: 0;
  color: #e8e8e8;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0;
}
.auth-modal__close {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #888;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 4px 9px;
}
.auth-modal__close:hover {
  color: #eee;
  background: #252525;
  border-color: #444;
}
.auth-modal__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}
.auth-modal__body p {
  margin: 0;
  color: #aaa;
  font-size: 0.9rem;
  line-height: 1.45;
}
.auth-modal__error {
  color: #f08f8f !important;
}
.auth-modal__success {
  color: #8fd7a2 !important;
}
.auth-modal__dev-link {
  color: #bbb !important;
}
.auth-modal__dev-link a {
  color: #8fc;
  text-decoration: none;
}
.auth-modal__dev-link a:hover {
  text-decoration: underline;
}
.auth-modal__form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 2px;
}
.auth-modal__label {
  color: #cfcfcf;
  font-size: 0.78rem;
  font-weight: 600;
}
.auth-modal__email-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.auth-modal__input {
  min-width: 0;
  border: 1px solid #3b3b3b;
  border-radius: 4px;
  background: #111;
  color: #eee;
  font: inherit;
  font-size: 0.88rem;
  padding: 8px 10px;
}
.auth-modal__input:focus {
  outline: none;
  border-color: #4f8f6a;
  box-shadow: 0 0 0 2px rgba(79, 143, 106, 0.18);
}
.auth-modal__input:disabled {
  color: #777;
  background: #181818;
}
.auth-modal__secondary-block {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid #2d2d2d;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.auth-modal__secondary-block h3 {
  margin: 0;
  color: #d8d8d8;
  font-size: 0.86rem;
  font-weight: 600;
}
.auth-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.auth-modal__primary, .auth-modal__secondary {
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  padding: 8px 14px;
}
.auth-modal__primary {
  background: #2b5c43;
  border: 1px solid #3e7c5c;
  color: #e9fff0;
}
.auth-modal__primary:hover {
  background: #346c50;
  border-color: #58a173;
}
.auth-modal__primary:disabled {
  cursor: default;
  opacity: 0.58;
}
.auth-modal__primary:disabled:hover {
  background: #2b5c43;
  border-color: #3e7c5c;
}
.auth-modal__secondary {
  background: #242424;
  border: 1px solid #3b3b3b;
  color: #ccc;
}
.auth-modal__secondary:hover {
  background: #2d2d2d;
  color: #eee;
}

@media (max-width: 520px) {
  .auth-modal__email-row {
    grid-template-columns: 1fr;
  }
  .auth-modal__actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
}
.detection-modal__backdrop {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(0, 0, 0, 0.65);
}
.detection-modal__card {
  position: fixed;
  z-index: 200;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(580px, 92vw);
  max-height: 85vh;
  overflow-y: auto;
  background: #1c1c1c;
  border: 1px solid #484848;
  border-radius: 10px;
  padding: 28px 32px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7);
}
.detection-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.detection-modal__header h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: #e8e8e8;
}
.detection-modal__close {
  background: transparent;
  border: 1px solid transparent;
  color: #888;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 4px;
  line-height: 1;
}
.detection-modal__close:hover {
  color: #fff;
  border-color: #555;
  background: #2a2a2a;
}
.detection-modal__body {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.detection-modal__row-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}
.detection-modal__label {
  font-size: 1rem;
  font-weight: 600;
  color: #ddd;
}
.detection-modal__value {
  font-size: 0.9rem;
  color: #aaa;
  font-variant-numeric: tabular-nums;
  min-width: 5em;
  text-align: right;
}
.detection-modal__desc {
  margin: 0 0 12px;
  font-size: 0.82rem;
  color: #888;
  line-height: 1.5;
}
.detection-modal__preset-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.detection-modal__preset-grid--sensitivity {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.detection-modal__preset-option {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  min-height: 72px;
  padding: 9px;
  border: 1px solid #333;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.035);
  color: #ddd;
  cursor: pointer;
  text-align: left;
}
.detection-modal__preset-option.is-active {
  border-color: rgba(124, 181, 232, 0.72);
  background: rgba(124, 181, 232, 0.12);
}
.detection-modal__preset-option:hover {
  border-color: rgba(124, 181, 232, 0.52);
}
.detection-modal__preset-label {
  color: #eee;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.18;
}
.detection-modal__preset-helper {
  color: #999;
  font-size: 0.75rem;
  line-height: 1.2;
}
.detection-modal__preset-count {
  margin-top: auto;
  color: #7cb5e8;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
}
.detection-modal__slider-wrap {
  position: relative;
  padding-bottom: 18px;
}
.detection-modal input[type=range] {
  width: 100%;
}
.detection-modal__severity-slider {
  position: relative;
  padding-bottom: 26px;
}
.detection-modal__severity-slider .severity-range {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(to right, #4caf50, #f0a500, #e53935);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}
.detection-modal__severity-slider .severity-range::-webkit-slider-runnable-track {
  height: 6px;
  background: linear-gradient(to right, #4caf50, #f0a500, #e53935);
  border-radius: 3px;
}
.detection-modal__severity-slider .severity-range::-moz-range-track {
  height: 6px;
  background: linear-gradient(to right, #4caf50, #f0a500, #e53935);
  border-radius: 3px;
  border: none;
}
.detection-modal__severity-slider .severity-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border-radius: 50%;
  background: #e8e8e8;
  border: 2px solid #555;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  transition: border-color 0.15s;
}
.detection-modal__severity-slider .severity-range::-webkit-slider-thumb:hover {
  border-color: #aaa;
}
.detection-modal__severity-slider .severity-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e8e8e8;
  border: 2px solid #555;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.detection-modal .severity-divider--inaccuracy,
.detection-modal .severity-divider--mistake,
.detection-modal .severity-divider--blunder {
  position: absolute;
  top: 0;
  width: 2px;
  height: 6px;
  background: rgba(255, 255, 255, 0.55);
  transform: translateX(-50%);
  pointer-events: none;
  border-radius: 1px;
}
.detection-modal .severity-divider--inaccuracy {
  left: 16.7%;
}
.detection-modal .severity-divider--mistake {
  left: 37.5%;
  background: rgba(255, 255, 255, 0.85);
}
.detection-modal .severity-divider--blunder {
  left: 58.3%;
}
.detection-modal__severity-ticks {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.detection-modal__severity-ticks span {
  font-size: 0.72rem;
  color: #777;
}
.detection-modal__default-mark {
  position: absolute;
  bottom: 2px;
  width: 2px;
  height: 10px;
  background: #c44;
  transform: translateX(-50%);
  border-radius: 1px;
  pointer-events: none;
}
.detection-modal__default-mark::after {
  content: "L";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  color: #c44;
  margin-top: 2px;
  white-space: nowrap;
}
.detection-modal__preview-total {
  margin: 6px 0 0;
  font-size: 0.8rem;
  color: #9cc9f5;
  font-weight: 600;
}
.detection-modal__preview-empty {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: #777;
  font-style: italic;
}
.detection-modal__chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.detection-modal__chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(124, 181, 232, 0.14);
  border: 1px solid rgba(124, 181, 232, 0.35);
  color: #cfe4f7;
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.detection-modal__chip--more {
  background: rgba(255, 255, 255, 0.06);
  border-color: #444;
  color: #999;
}
.detection-modal__chip-loss {
  margin-left: 5px;
  font-weight: 700;
}

.global-menu {
  position: relative;
  margin-left: auto;
}
.global-menu__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  background: transparent;
  color: var(--text);
  border: 1px solid #444;
  border-radius: 9px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.global-menu__trigger:hover, .global-menu__trigger.active {
  background: #2a2a2a;
  border-color: #666;
}
.global-menu__trigger.active {
  position: relative;
  z-index: 101;
}
.global-menu__backdrop {
  position: fixed;
  inset: 0;
  z-index: 99;
}
.global-menu__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 100;
  background: #1e1e1e;
  border: 1px solid #333;
  width: min(380px, 100vw - 24px);
  max-height: min(80dvh, 760px);
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
}
.global-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  padding: 8px 16px;
  background: transparent;
  color: var(--text);
  border: none;
  border-radius: 0;
  text-align: left;
  cursor: pointer;
  font-size: 0.875rem;
  gap: 8px;
  box-sizing: border-box;
}
.global-menu__item:hover {
  background: #2a2a2a;
}
.global-menu__item--has-sub {
  user-select: none;
}
.global-menu__item--logout {
  color: #c77;
  border-top: 1px solid #2a2a2a;
  margin-top: 4px;
}
.global-menu__item--logout:hover {
  background: #2a1a1a;
  color: #f88;
}
.global-menu__item--toggle {
  cursor: default;
  padding-top: 7px;
  padding-bottom: 7px;
}
.global-menu__item--toggle .settings-toggle-row {
  width: 100%;
}
.global-menu__section {
  padding: 7px 0;
  border-bottom: 1px solid var(--app-border);
}
.global-menu__section:last-of-type {
  border-bottom: 0;
}
.global-menu__section-label {
  margin: 0;
  padding: 7px 16px 5px;
  color: var(--app-text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}
.global-menu__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) 12px;
}
.global-menu__row:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}
.global-menu__row--destructive {
  color: var(--app-danger);
}
.global-menu__row--destructive:hover {
  background: var(--app-danger-soft);
}
.global-menu__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.global-menu__value {
  min-width: 0;
  max-width: 150px;
  color: var(--app-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.global-menu__chevron {
  color: var(--app-text-faint);
  text-align: right;
}
.global-menu__range-row {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) minmax(90px, 1.4fr) 42px;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 5px 16px;
  color: var(--app-text-soft);
  font-size: 0.82rem;
}
.global-menu__range-row output {
  color: var(--app-text-muted);
  text-align: right;
}
.global-menu .settings-icon {
  display: block;
}
.global-menu__appearance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  min-inline-size: 0;
  margin: 0;
  padding: 9px 10px 10px;
  border: 0;
  background: var(--app-surface);
  cursor: default;
}
.global-menu__appearance:hover {
  background: var(--app-surface);
}
.global-menu__appearance legend {
  grid-column: 1/-1;
  width: 100%;
  padding: 0 4px 3px;
  color: var(--app-text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  box-sizing: border-box;
}
.global-menu__appearance-choice {
  min-width: 0;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 3px;
  border: 1px solid var(--app-border);
  border-radius: 4px;
  background: var(--app-surface-soft);
  color: var(--app-text-soft);
  cursor: pointer;
  font-size: 0.72rem;
  line-height: 1;
  box-sizing: border-box;
  touch-action: manipulation;
}
.global-menu__appearance-choice input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--app-focus);
  cursor: pointer;
}
.global-menu__appearance-choice:hover {
  background: var(--app-surface-selected);
  border-color: var(--app-border-strong);
  color: var(--app-text);
}
.global-menu__appearance-choice:has(input:checked) {
  background: var(--app-surface-selected);
  border-color: var(--app-focus);
  color: var(--app-text);
  font-weight: 600;
}
.global-menu__appearance-choice:has(input:focus-visible) {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
}
.global-menu__arrow {
  color: #888;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.global-menu__sync-identity {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 9px 14px 10px;
  border-top: 1px solid #2a2a2a;
  background: #181818;
  color: #888;
  font-size: 0.72rem;
  line-height: 1.35;
  text-align: left;
  box-sizing: border-box;
}
.global-menu__sync-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}
.global-menu__sync-label {
  color: #666;
}
.global-menu__sync-value {
  min-width: 0;
  color: #999;
  overflow-wrap: anywhere;
}
.global-menu__sync-value--warning {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #d9a441;
}
.global-menu__sync-warning-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
}
.global-menu__release {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 0;
  border-top: 1px solid #2a2a2a;
  background: #181818;
  color: #888;
  font-size: 0.72rem;
  line-height: 1.35;
  text-align: left;
  user-select: text;
  box-sizing: border-box;
}
.global-menu__release-toggle {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 9px 14px 10px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  line-height: inherit;
  text-align: left;
  user-select: text;
  box-sizing: border-box;
}
.global-menu__release-toggle:hover {
  background: #1d1d1d;
  color: #999;
}
.global-menu__release-summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.global-menu__release-primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.global-menu__release-product {
  color: #aaa;
  font-weight: 600;
}
.global-menu__release-deploy {
  color: #777;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  overflow-wrap: anywhere;
}
.global-menu__release-timestamp {
  color: #777;
  overflow-wrap: anywhere;
}
.global-menu__release-chevron {
  color: #777;
  flex-shrink: 0;
  font-size: 0.82rem;
}
.global-menu__release-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 7px 14px 10px;
  border-top: 1px solid #282828;
  color: #888;
}
.global-menu__release-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.global-menu__release-copy {
  padding: 2px 7px;
  border: 1px solid #333;
  border-radius: 3px;
  background: #202020;
  color: #aaa;
  cursor: pointer;
  font: inherit;
  font-size: 0.68rem;
  line-height: 1.3;
}
.global-menu__release-copy:hover {
  background: #272727;
  border-color: #444;
  color: #bbb;
}
.global-menu__release-copy-status {
  min-width: 0;
  color: #777;
  overflow-wrap: anywhere;
}
.global-menu__release-detail, .global-menu__release-message-wrap {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}
.global-menu__release-detail-label {
  color: #666;
  font-family: inherit;
}
.global-menu__release-detail-value, .global-menu__release-message {
  min-width: 0;
  color: #999;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  overflow-wrap: anywhere;
}
.global-menu__release-message {
  display: block;
  max-height: 8rem;
  overflow: auto;
  white-space: pre-wrap;
}
.global-menu__submenu {
  background: #161616;
  border-top: 1px solid #2a2a2a;
  border-bottom: 1px solid #2a2a2a;
  display: flex;
  flex-direction: column;
}
.global-menu__submenu .global-menu__item {
  padding-left: 28px;
  font-size: 0.825rem;
  color: #bbb;
}

.advanced-appearance {
  position: fixed;
  inset: 0;
  z-index: 12500;
  display: grid;
  place-items: center;
  padding: 16px;
  box-sizing: border-box;
}
.advanced-appearance__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(0, 0, 0, 0.7);
  cursor: default;
}
.advanced-appearance__dialog {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(900px, 100vw - 32px);
  max-height: 85dvh;
  border: 1px solid var(--app-border-strong);
  border-radius: 16px;
  background: var(--app-surface-raised);
  color: var(--app-text);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.62);
  overflow: hidden;
}
.advanced-appearance__header, .advanced-appearance__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--app-border);
}
.advanced-appearance__footer {
  justify-content: flex-end;
  border-top: 1px solid var(--app-border);
  border-bottom: 0;
}
.advanced-appearance__eyebrow {
  margin: 0 0 3px;
  color: var(--app-text-muted);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.advanced-appearance h2 {
  margin: 0;
  font-size: 1.25rem;
}
.advanced-appearance__close {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--app-text-muted);
  font-size: 1.4rem;
  cursor: pointer;
}
.advanced-appearance__close:hover, .advanced-appearance__close:focus-visible {
  background: var(--app-surface-selected);
  color: var(--app-text);
}
.advanced-appearance__nav {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--app-border);
  overflow-x: auto;
}
.advanced-appearance__nav-item {
  min-height: 36px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--app-text-muted);
  white-space: nowrap;
  cursor: pointer;
}
.advanced-appearance__nav-item:hover {
  background: var(--app-surface-soft);
  color: var(--app-text);
}
.advanced-appearance__nav-item.active {
  background: var(--app-surface-selected);
  color: var(--app-text);
}
.advanced-appearance__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.advanced-appearance__section {
  min-width: 0;
  align-self: start;
  padding: 16px;
  border: 1px solid var(--app-border);
  border-radius: 12px;
  background: var(--app-surface);
  scroll-margin-top: 12px;
}
.advanced-appearance__section h3 {
  margin: 0 0 14px;
  font-size: 1rem;
}
.advanced-appearance__field {
  min-width: 0;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}
.advanced-appearance__field legend,
.advanced-appearance__field > label {
  display: block;
  margin-bottom: 7px;
  color: var(--app-text-soft);
  font-size: 0.8rem;
  font-weight: 600;
}
.advanced-appearance__segments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  gap: 5px;
}
.advanced-appearance__segment {
  min-height: 36px;
  padding: 6px 8px;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: var(--app-surface-soft);
  color: var(--app-text-muted);
  cursor: pointer;
}
.advanced-appearance__segment:hover {
  color: var(--app-text);
  border-color: var(--app-border-strong);
}
.advanced-appearance__segment.active {
  color: var(--app-text);
  border-color: var(--app-focus);
  background: var(--app-surface-selected);
}
.advanced-appearance__range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px;
  align-items: center;
  gap: 12px;
}
.advanced-appearance__range output {
  color: var(--app-text-muted);
  text-align: right;
}
.advanced-appearance__learned {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--app-text-muted);
  font-size: 0.8rem;
}
.advanced-appearance__learned button {
  min-height: 36px;
}
.advanced-appearance__stack {
  display: grid;
  gap: 14px;
}
.advanced-appearance__reset, .advanced-appearance__done, .advanced-appearance__learned button {
  padding: 8px 12px;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: var(--app-surface-soft);
  color: var(--app-text-soft);
  cursor: pointer;
}
.advanced-appearance__reset:hover, .advanced-appearance__reset:focus-visible, .advanced-appearance__done:hover, .advanced-appearance__done:focus-visible, .advanced-appearance__learned button:hover, .advanced-appearance__learned button:focus-visible {
  background: var(--app-surface-selected);
  color: var(--app-text);
}
.advanced-appearance__reset {
  margin-right: auto;
  color: var(--app-danger);
}
.advanced-appearance__done {
  border-color: var(--app-focus);
}
.advanced-appearance .board-settings {
  padding: 0;
  border-top: 0;
}

@media (max-width: 600px) {
  .global-menu__dropdown {
    position: fixed;
    inset: 52px 0 0;
    width: 100vw;
    max-height: none;
    border-width: 1px 0 0;
    border-radius: 0;
  }
  .advanced-appearance {
    padding: 0;
  }
  .advanced-appearance__dialog {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
  .advanced-appearance__body {
    grid-template-columns: 1fr;
    padding: 12px;
  }
  .advanced-appearance__header, .advanced-appearance__footer {
    padding: 12px 14px;
  }
}
.review-menu {
  position: relative;
}
.review-menu__trigger {
  display: inline-flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  height: 26px;
  padding: 0 10px;
  gap: 5px;
  background: transparent;
  color: #cfe6d2;
  border: 1px solid #2e6b3c;
  border-radius: 13px;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.review-menu__trigger:hover, .review-menu__trigger.active {
  filter: brightness(1.18);
}
.review-menu__trigger:disabled {
  cursor: default;
}
.review-menu__trigger--loading {
  color: #9a9a9a;
  border-color: #3d3d3d;
}
.review-menu__trigger--paused, .review-menu__trigger--paused-auto, .review-menu__trigger--stalled, .review-menu__trigger--resume {
  color: #e2b35c;
  border-color: #6d5525;
}
.review-menu__trigger--paused-auto {
  border-style: dashed;
}
.review-menu__trigger--stalled {
  animation: review-pill-stall-border 2.4s ease-in-out infinite;
}
.review-menu__trigger--failed, .review-menu__trigger--breaker, .review-menu__trigger--storage, .review-menu__trigger--engine-error {
  color: #e08a8a;
  border-color: #7a3a3a;
}
.review-menu__trigger--complete {
  background: linear-gradient(180deg, #35446c, #283555);
  color: #dce5f8;
  border-color: transparent;
}
.review-menu__trigger--running::before, .review-menu__trigger--paused::before, .review-menu__trigger--paused-auto::before, .review-menu__trigger--stalled::before, .review-menu__trigger--resume::before, .review-menu__trigger--failed::before, .review-menu__trigger--breaker::before, .review-menu__trigger--storage::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.5px;
  background: #2a2a2a;
}
.review-menu__trigger-content {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  position: relative;
  z-index: 1;
}
.review-menu__trigger-icon {
  flex: 0 0 auto;
  display: block;
}
.review-menu__trigger-icon--spin {
  animation: review-pill-spin 0.9s linear infinite;
}
.review-menu__trigger-number {
  min-width: 0;
}
.review-menu__trigger-bolt {
  display: inline-flex;
  line-height: 1;
  font-size: 0.85em;
  color: #55c26a;
}
.review-menu__trigger-bolt.--breathing {
  animation: grr-review-bolt-breathe 1.4s ease-in-out infinite;
}
.review-menu__trigger-fill {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2.5px;
  z-index: 0;
  pointer-events: none;
  transition: width 0.3s linear;
}
.review-menu__trigger-fill--green {
  background: #55c26a;
}
.review-menu__trigger-fill--amber {
  background: #e2b35c;
}
.review-menu__trigger-fill--red {
  background: #e08a8a;
}
.review-menu__trigger-fill--shimmer {
  top: 0;
  height: auto;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 8px, rgba(255, 255, 255, 0.12) 8px, rgba(255, 255, 255, 0.12) 16px);
  background-size: 160% 160%;
  animation: review-pill-shimmer-drift 1.8s linear infinite;
}
.review-menu__backdrop {
  position: fixed;
  inset: 0;
  z-index: 99;
}
.review-menu__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 100;
  background: #1e1e1e;
  border: 1px solid #333;
  border-radius: 4px;
  min-width: 200px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  min-width: 320px;
  max-width: min(420px, 100vw - 24px);
}
.review-menu__panel-header {
  display: none;
}
.review-menu__section {
  padding: 6px 14px;
  border-bottom: 1px solid #2a2a2a;
}
.review-menu__section:last-child {
  border-bottom: none;
}
.review-menu__section-title {
  margin-bottom: 6px;
  color: #cfcfcf;
  font-size: 0.78rem;
  font-weight: 600;
}
.review-menu__label {
  font-size: 0.75rem;
  color: #888;
  margin-bottom: 5px;
}
.review-menu__label--ok {
  color: #7fbf7f;
}
.review-menu__label--warning {
  color: #e2b35c;
  font-weight: 600;
}
.review-menu__label--error {
  color: #d77;
  font-weight: 600;
}
.review-menu__row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.review-menu__btn {
  padding: 3px 10px;
  background: #2a2a2a;
  color: var(--text);
  border: 1px solid #444;
  border-radius: 3px;
  font-size: 0.8rem;
  cursor: pointer;
}
.review-menu__btn:hover {
  background: #3a3a3a;
}
.review-menu__btn.--cancel {
  border-color: #7a3a3a;
  color: #c88;
}
.review-menu__btn.--cancel:hover {
  background: #3a1a1a;
}
.review-menu__pill {
  padding: 2px 8px;
  background: #2a2a2a;
  color: #aaa;
  border: 1px solid #444;
  border-radius: 3px;
  font-size: 0.78rem;
  cursor: pointer;
}
.review-menu__pill.active {
  background: #1e3020;
  border-color: #5a8a5a;
  color: #9dca9d;
}
.review-menu__pill:hover {
  background: #333;
}
.review-menu__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 14px;
  font-size: 0.82rem;
  color: var(--text);
  cursor: default;
  gap: 8px;
}
.review-menu__toggle input {
  cursor: pointer;
  margin: 0;
}
.review-menu__toggle--inline {
  padding: 6px 0 2px;
}
.review-menu__section--queue {
  padding-right: 10px;
}
.review-menu__queue-empty {
  color: #777;
  font-size: 0.76rem;
}
.review-menu__queue-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}
.review-menu__queue-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-top: 1px solid #2a2a2a;
}
.review-menu__queue-item:first-child {
  border-top: none;
}
.review-menu__queue-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 8px;
  min-width: 0;
}
.review-menu__queue-status {
  align-self: start;
  padding: 1px 5px;
  color: #aaa;
  background: #252525;
  border: 1px solid #3d3d3d;
  border-radius: 3px;
  font-size: 0.66rem;
  line-height: 1.35;
}
.review-menu__queue-status--active {
  color: #9dca9d;
  border-color: #4f7b4f;
  background: #1e3020;
}
.review-menu__queue-status--error {
  color: #d77;
  border-color: #7a3a3a;
  background: #301c1c;
}
.review-menu__queue-title {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.8rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.review-menu__queue-meta {
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
  color: #888;
  font-size: 0.7rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.review-menu__queue-actions {
  display: grid;
  grid-template-columns: repeat(3, 26px);
  gap: 4px;
}
.review-menu__queue-action {
  width: 26px;
  height: 26px;
  padding: 0;
  color: #ccc;
  background: #2a2a2a;
  border: 1px solid #444;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1;
}
.review-menu__queue-action:hover:not(:disabled) {
  background: #3a3a3a;
}
.review-menu__queue-action:disabled {
  cursor: default;
  opacity: 0.38;
}
.review-menu__queue-action--remove {
  color: #d99;
  border-color: #6e3636;
}
.review-menu__queue-action--remove:hover:not(:disabled) {
  background: #3a1a1a;
}
.review-menu__cap-input {
  width: 64px;
  padding: 3px 8px;
  background: #2a2a2a;
  color: var(--text);
  border: 1px solid #444;
  border-radius: 3px;
  font-size: 0.8rem;
}

.review-run-member {
  --review-run-wave-color: #629924;
}

.review-run-wave--0 {
  --review-run-wave-color: #629924;
}

.review-run-wave--1 {
  --review-run-wave-color: #44aa99;
}

.review-run-wave--2 {
  --review-run-wave-color: #5b9b5b;
}

.review-run-wave--3 {
  --review-run-wave-color: #7a8f3a;
}

.review-run-wave--4 {
  --review-run-wave-color: #4f8a78;
}

.review-run-wave--5 {
  --review-run-wave-color: #8a7a45;
}

.review-menu__queue-item.review-run-member {
  position: relative;
  padding-left: 8px;
}
.review-menu__queue-item.review-run-member::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 2px;
  background: var(--review-run-wave-color);
  opacity: 0.92;
}

.review-menu__queue-item--future .review-menu__queue-status {
  color: #8a9b8a;
  border-color: #354635;
  background: #1e261e;
}

@media (max-width: 600px) {
  .review-menu {
    position: static;
  }
  .review-menu__trigger {
    min-height: 34px;
    padding: 5px 12px;
    font-size: 0.82rem;
  }
  .review-menu__backdrop {
    z-index: 220;
    background: rgba(0, 0, 0, 0.58);
  }
  .review-menu__dropdown {
    position: fixed;
    inset: 0;
    z-index: 230;
    width: auto;
    min-width: 0;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    padding: 0 0 calc(18px + env(safe-area-inset-bottom));
    overflow-y: auto;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  .review-menu__panel-header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
    padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
    background: #1e1e1e;
    border-bottom: 1px solid #333;
  }
  .review-menu__panel-title {
    min-width: 0;
    overflow: hidden;
    color: #e0e0e0;
    font-size: 0.95rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .review-menu__panel-close {
    width: 34px;
    height: 34px;
    padding: 0;
    color: #ddd;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
  }
  .review-menu__section {
    padding: 12px 16px;
  }
  .review-menu__section--queue {
    padding-right: 16px;
  }
  .review-menu__queue-list {
    max-height: none;
    padding-right: 0;
  }
  .review-menu__queue-action {
    width: 34px;
    height: 34px;
    font-size: 0.92rem;
  }
  .review-menu__queue-actions {
    grid-template-columns: repeat(3, 34px);
  }
}
@keyframes review-pill-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes review-pill-shimmer-drift {
  to {
    background-position: 22px 22px;
  }
}
@keyframes review-pill-stall-border {
  0%, 100% {
    border-color: #6d5525;
  }
  50% {
    border-color: #a8842f;
  }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion=full]) .review-menu__trigger,
  html:not([data-motion=full]) .review-menu__trigger *,
  html:not([data-motion=full]) .review-menu__trigger-fill {
    animation: none !important;
    transition: none !important;
  }
}
.review-progress-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
}

.review-progress-label__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.review-menu__label--progress {
  color: #b8c7b8;
}

.sync-severity--active {
  border-color: #4f7b4f;
  color: #9dca9d;
}
.sync-severity--warning {
  border-color: #7a5f26;
  color: #f0c46a;
}
.sync-severity--error {
  border-color: #7a3a3a;
  color: #d77;
}

.sync-menu {
  position: relative;
}
.sync-menu__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  inline-size: 46px;
  height: 26px;
  padding: 0 8px;
  gap: 5px;
  background: transparent;
  color: #c9e4e6;
  border: 1px solid #2a5f63;
  border-radius: 13px;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sync-menu__trigger:hover, .sync-menu__trigger.active {
  filter: brightness(1.18);
}
.sync-menu__trigger--idle {
  color: #7fb9bd;
  border-color: #24484b;
}
.sync-menu__trigger--warning {
  color: #e2b35c;
  border-color: #6d5525;
}
.sync-menu__trigger--error {
  color: #e08a8a;
  border-color: #7a3a3a;
}
.sync-menu__trigger--counted {
  inline-size: auto;
  min-inline-size: 72px;
  padding: 0 10px;
}
.sync-menu__trigger-fill {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2.5px;
  z-index: 0;
  pointer-events: none;
  transition: width 0.3s linear;
}
.sync-menu__trigger-fill--teal {
  background: #4fb3ba;
}
.sync-menu__trigger-fill--indeterminate {
  width: 100%;
  background: repeating-linear-gradient(135deg, rgba(79, 179, 186, 0.14) 0, rgba(79, 179, 186, 0.14) 8px, rgba(79, 179, 186, 0.32) 8px, rgba(79, 179, 186, 0.32) 16px);
  background-size: 160% 160%;
  animation: review-pill-shimmer-drift 1.8s linear infinite;
}
.sync-menu__trigger-content {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  position: relative;
  z-index: 1;
}
.sync-menu__trigger-arrows {
  display: inline-flex;
  line-height: 1;
  font-size: 0.85em;
}
.sync-menu__trigger-arrows.--breathing {
  color: #4fb3ba;
  animation: grr-review-bolt-breathe 1.4s ease-in-out infinite;
}
.sync-menu__trigger-glyph {
  display: inline-flex;
  line-height: 1;
}
.sync-menu__trigger-count {
  min-width: 0;
}
.sync-menu__issue-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.sync-menu__issue-row > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.sync-menu__issue-row button {
  flex: 0 0 auto;
  padding: 1px 8px;
  background: transparent;
  color: var(--text);
  border: 1px solid #444;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.72rem;
  line-height: 1.6;
}
.sync-menu__issue-row button:hover {
  background: #1e3020;
  border-color: #5a8a5a;
  color: #9dca9d;
}
.sync-menu__backdrop {
  position: fixed;
  inset: 0;
  z-index: 99;
}
.sync-menu__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 100;
  background: #1e1e1e;
  border: 1px solid #333;
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  min-width: 320px;
  max-width: min(420px, 100vw - 24px);
}
.sync-menu__panel-header {
  display: none;
}
.sync-menu__section {
  padding: 6px 14px;
  border-bottom: 1px solid #2a2a2a;
}
.sync-menu__section:last-child {
  border-bottom: none;
}
.sync-menu__section-title {
  margin-bottom: 6px;
  color: #cfcfcf;
  font-size: 0.78rem;
  font-weight: 600;
}
.sync-menu__identity-line {
  color: var(--text);
  font-size: 0.78rem;
  margin-bottom: 3px;
  word-break: break-word;
}
.sync-menu__label {
  font-size: 0.75rem;
  color: #888;
  margin-bottom: 5px;
}
.sync-menu__label--warning {
  color: #e2b35c;
  font-weight: 600;
}
.sync-menu__label--error {
  color: #d77;
  font-weight: 600;
}
.sync-menu__op {
  margin-bottom: 6px;
}
.sync-menu__op:last-child {
  margin-bottom: 0;
}
.sync-menu__op-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.sync-menu__op-label {
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 600;
}
.sync-menu__op-progress {
  color: #9dca9d;
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}
.sync-menu__row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.sync-menu__btn {
  padding: 3px 10px;
  background: #2a2a2a;
  color: var(--text);
  border: 1px solid #444;
  border-radius: 3px;
  font-size: 0.8rem;
  cursor: pointer;
}
.sync-menu__btn:hover {
  background: #3a3a3a;
}
.sync-menu__btn:disabled {
  cursor: default;
  opacity: 0.5;
}

@media (max-width: 600px) {
  .sync-menu {
    position: static;
  }
  .sync-menu__trigger {
    min-height: 34px;
    padding: 5px 8px;
    font-size: 0.82rem;
  }
  .sync-menu__trigger--counted {
    padding: 5px 12px;
  }
  .sync-menu__backdrop {
    z-index: 220;
    background: rgba(0, 0, 0, 0.58);
  }
  .sync-menu__dropdown {
    position: fixed;
    inset: 0;
    z-index: 230;
    width: auto;
    min-width: 0;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    padding: 0 0 calc(18px + env(safe-area-inset-bottom));
    overflow-y: auto;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  .sync-menu__panel-header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
    padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
    background: #1e1e1e;
    border-bottom: 1px solid #333;
  }
  .sync-menu__panel-title {
    min-width: 0;
    overflow: hidden;
    color: #e0e0e0;
    font-size: 0.95rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sync-menu__panel-close {
    width: 34px;
    height: 34px;
    padding: 0;
    color: #ddd;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
  }
  .sync-menu__section {
    padding: 12px 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion=full]) .sync-menu__trigger,
  html:not([data-motion=full]) .sync-menu__trigger *,
  html:not([data-motion=full]) .sync-menu__trigger-fill {
    animation: none !important;
    transition: none !important;
  }
}
body {
  ---zoom: 70;
  ---board-scale: calc((var(---zoom) / 100) * 0.75 + 0.25);
  ---games-board-preview-size: 136px;
}

.analyse {
  display: grid;
  ---board-size: min(
    calc((100vw - 32px - 34px - 240px) * var(---board-scale)),
    calc((100vh - 5rem) * var(---board-scale))
  );
  ---player-strip-height: 32px;
  ---board-stack-height: calc(
    var(---board-size) +
    var(---player-strip-height) +
    var(---player-strip-height)
  );
  grid-template-columns: var(---board-size) 34px minmax(240px, 380px);
  grid-template-rows: var(---board-stack-height) auto;
  grid-template-areas: "board  gauge  tools" "under  .      controls";
  align-items: start;
  padding: 24px 16px;
  gap: 0 0;
}
@media (min-width: 801px) and (max-width: 1280px) {
  .analyse {
    grid-template-columns: var(---board-size) 34px minmax(240px, 1fr);
  }
}

cg-resize {
  display: block;
  position: absolute;
  right: -9px;
  bottom: -9px;
  width: 22px;
  height: 22px;
  cursor: nwse-resize;
  z-index: 100;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
cg-resize::before, cg-resize::after {
  content: "";
  position: absolute;
  height: 2px;
  background: #aaa;
  border-radius: 1px;
  transition: background 0.12s;
}
cg-resize::before {
  width: 5px;
  transform: translate(7px, 8px) rotate(-45deg);
}
cg-resize::after {
  width: 12px;
  transform: translate(1px, 6px) rotate(-45deg);
}
cg-resize:hover {
  border-radius: 50%;
  background: rgba(74, 136, 136, 0.35);
}
cg-resize:hover::before, cg-resize:hover::after {
  background: #6bbfbf;
}
.resizing cg-resize {
  border-radius: 50%;
  background: rgba(74, 136, 136, 0.55);
}
.resizing cg-resize::before, .resizing cg-resize::after {
  background: #8dd4d4;
}

body.resizing {
  user-select: none;
  cursor: nwse-resize;
}

.eval-bar {
  grid-area: gauge;
  width: 26px;
  align-self: stretch;
  background: #333;
  display: flex;
  flex-direction: column-reverse;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5) inset;
}
.eval-bar--off {
  background: transparent;
  box-shadow: none;
}
.eval-bar__fill {
  background: #c8c8c8;
  width: 100%;
  transition: height 0.3s;
}
.eval-bar__tick {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  opacity: 0.35;
  border-bottom: 1px solid #888;
  pointer-events: none;
}
.eval-bar__tick.zero {
  opacity: 0.7;
  border-bottom: 2px solid #aaa;
}
.eval-bar__score {
  position: absolute;
  left: 0;
  right: 0;
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  pointer-events: none;
  line-height: 1;
  transform: translateY(-2px);
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9), 0 0 3px rgba(0, 0, 0, 0.9);
  z-index: 1;
}

.analyse__board {
  grid-area: board;
  display: flex;
  flex-direction: column;
}

.analyse__tools {
  grid-area: tools;
  display: flex;
  flex-direction: column;
  background: #1a1a1a;
  min-height: 0;
  overflow: hidden;
  align-self: stretch;
  position: relative;
}

.analyse__middle-lower {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: #181818;
}

.analyse__mobile-moves-context {
  display: none;
}

.analyse__split-handle {
  display: flex;
  align-items: center;
  justify-content: stretch;
  width: 100%;
  height: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: row-resize;
  outline: none;
}
.analyse__split-handle:hover .analyse__split-handle-grip, .analyse__split-handle:focus-visible .analyse__split-handle-grip {
  background: #4b5f4b;
  opacity: 0.9;
}

.analyse__split-handle-grip {
  width: 100%;
  height: 2px;
  background: #303030;
  opacity: 0.65;
  transition: background 0.12s, opacity 0.12s;
}

body.analysis-layout-resizing {
  user-select: none;
  cursor: row-resize;
}

.analyse__engine-block {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-height: 0;
}

.analyse__moves-stack {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}
.analyse__moves-stack--shared {
  display: grid;
  grid-template-rows: minmax(120px, var(---analysis-moves-slot-fr)) 10px minmax(160px, var(---analysis-lower-slot-fr));
}

.action-menu {
  position: absolute;
  z-index: 10;
  inset: 0;
  background: #1a1a1a;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  gap: 6px;
  border-bottom: 2px solid #2e2e2e;
}
.action-menu h2 {
  font-size: 0.8em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  display: table;
  width: 100%;
  color: #666;
  margin: 4px 0 2px;
}
.action-menu h2::before, .action-menu h2::after {
  border-top: 1px solid #2e2e2e;
  content: "";
  display: table-cell;
  position: relative;
  top: 0.5em;
  width: 45%;
}
.action-menu h2::before {
  padding-inline-end: 8px;
}
.action-menu h2::after {
  padding-inline-start: 8px;
}
.action-menu__close-btn {
  align-self: flex-end;
  background: none;
  border: none;
  color: #666;
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.action-menu__close-btn:hover {
  color: #ccc;
}
.action-menu__tools {
  display: grid;
  gap: 0 0.8em;
  grid-template-columns: repeat(auto-fill, minmax(14ch, 1fr));
}
.action-menu__tools button, .action-menu__tools > a {
  color: #ccc;
  display: flex;
  align-items: center;
  line-height: 1.2em;
  min-height: 3em;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 4px 0;
  font-size: 0.9em;
}
.action-menu__tools button::before, .action-menu__tools > a::before {
  padding-inline-end: 8px;
  font-size: 1.5em;
}
.action-menu__tools button:hover, .action-menu__tools > a:hover {
  color: #9cc9f5;
}
.action-menu__display {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.action-menu__display .settings-toggle-row {
  padding: 5px 0;
  border-bottom: 1px solid #222;
  font-size: 0.9em;
}
.action-menu__display .settings-toggle-row:last-of-type {
  border-bottom: none;
}
.action-menu__display .settings-toggle-row:hover .settings-toggle-row__label {
  color: #9cc9f5;
}
.action-menu__coming {
  color: #444;
  font-size: 0.8em;
  font-style: italic;
  padding: 6px 0;
}
.action-menu__slider-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #222;
  font-size: 0.9em;
  color: #ccc;
}
.action-menu__slider-row:last-child {
  border-bottom: none;
}
.action-menu__slider-row label {
  flex: 0 0 auto;
}
.action-menu__slider-row input[type=range] {
  flex: 1 1 auto;
  accent-color: #3893e8;
  min-width: 0;
}
.action-menu__val {
  flex: 0 0 auto;
  font-size: 0.85em;
  color: #888;
  min-width: 3ch;
  text-align: right;
}
.action-menu__back-btn {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  color: #888;
  font-size: 0.85em;
  cursor: pointer;
  padding: 2px 0 6px;
  text-align: left;
}
.action-menu__back-btn:hover {
  color: #ccc;
}
.action-menu__subpanel {
  overflow-y: auto;
  flex: 1 1 0;
  min-height: 0;
  padding: 0 2px;
}
.action-menu__subpanel .detection-modal__row {
  border-bottom: 1px solid #222;
  padding: 8px 0;
}
.action-menu__subpanel .detection-modal__row:last-child {
  border-bottom: none;
}
.action-menu__subpanel .detection-modal__row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.action-menu__subpanel .detection-modal__label {
  font-size: 0.85em;
  color: #ccc;
}
.action-menu__subpanel .detection-modal__value {
  font-size: 0.8em;
  color: #888;
}
.action-menu__subpanel .detection-modal__desc {
  font-size: 0.75em;
  color: #666;
  margin: 0 0 6px;
  line-height: 1.4;
}
.action-menu__subpanel .detection-modal__preset-grid {
  gap: 6px;
}
.action-menu__subpanel .detection-modal__preset-option {
  min-height: 62px;
  padding: 7px;
}
.action-menu__subpanel .detection-modal__preset-label {
  font-size: 0.78em;
}
.action-menu__subpanel .detection-modal__preset-helper {
  font-size: 0.7em;
}
.action-menu__subpanel .detection-modal__preview-total,
.action-menu__subpanel .detection-modal__preview-empty {
  font-size: 0.72em;
}
.action-menu__subpanel .detection-modal__chip {
  font-size: 0.68em;
}
.action-menu__subpanel .detection-modal__slider-wrap {
  position: relative;
  padding-bottom: 16px;
}
.action-menu__subpanel .detection-modal__severity-slider {
  position: relative;
  margin-top: 6px;
  padding-bottom: 24px;
}
.action-menu__subpanel input[type=range] {
  width: 100%;
  accent-color: #3893e8;
}
.action-menu__subpanel .settings-toggle-row {
  padding: 4px 0;
  font-size: 0.85em;
}

.lichess-compare__busy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 0;
  color: #999;
}
.lichess-compare__spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #333;
  border-top-color: #9cc9f5;
  animation: lichess-compare-spin 0.8s linear infinite;
}
.lichess-compare__busy-label {
  font-size: 0.85em;
}
.lichess-compare__desc, .lichess-compare__note {
  font-size: 0.8em;
  color: #999;
  line-height: 1.4;
  margin: 0 0 8px;
}
.lichess-compare__note {
  color: #d9a15a;
}
.lichess-compare__textarea {
  width: 100%;
  min-height: 140px;
  background: #111;
  color: #ddd;
  border: 1px solid #333;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.8em;
  padding: 8px;
  resize: vertical;
}
.lichess-compare__error {
  color: #ff8f8f;
  font-size: 0.8em;
  margin: 6px 0 0;
}
.lichess-compare__error-panel h3 {
  margin: 0 0 6px;
  font-size: 0.95em;
  color: #ccc;
}
.lichess-compare__error-panel p {
  font-size: 0.85em;
  color: #aaa;
  line-height: 1.4;
}
.lichess-compare__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.lichess-compare__verdict {
  font-size: 0.95em;
  font-weight: bold;
  color: #ccc;
  text-transform: capitalize;
}
.lichess-compare__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.lichess-compare__stat {
  font-size: 0.78em;
  color: #999;
}
.lichess-compare__open-link {
  align-self: flex-start;
  font-size: 0.8em;
  color: #9cc9f5;
  text-decoration: none;
}
.lichess-compare__open-link:hover {
  text-decoration: underline;
}
.lichess-compare__mistake-moments h3, .lichess-compare__report h3 {
  font-size: 0.85em;
  color: #999;
  margin: 10px 0 4px;
}
.lichess-compare__empty {
  font-size: 0.78em;
  color: #666;
  font-style: italic;
}
.lichess-compare__mistake-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lichess-compare__mistake-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 0.78em;
  padding: 4px 6px;
  border-radius: 3px;
  border-left: 3px solid #333;
}
.lichess-compare__mistake-row--agree {
  border-left-color: #4caf7d;
}
.lichess-compare__mistake-row--disagree {
  border-left-color: #d9a15a;
}
.lichess-compare__mistake-move {
  color: #ccc;
  font-weight: bold;
  min-width: 8ch;
}
.lichess-compare__mistake-patzer, .lichess-compare__mistake-lichess {
  color: #999;
}
.lichess-compare__markdown {
  background: #111;
  border: 1px solid #2e2e2e;
  border-radius: 4px;
  padding: 8px;
  font-size: 0.72em;
  line-height: 1.4;
  color: #bbb;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 260px;
  overflow-y: auto;
}
.lichess-compare__actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.lichess-compare__btn {
  background: #2a2a2a;
  color: #ccc;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 0.8em;
  cursor: pointer;
}
.lichess-compare__btn:hover {
  background: #333;
  color: #fff;
}
.lichess-compare__btn--ghost {
  background: none;
  border-color: #333;
  color: #888;
}

@keyframes lichess-compare-spin {
  to {
    transform: rotate(360deg);
  }
}
.analyse__moves {
  flex: 2 1 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 8px;
}

.move-list-inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

.retro-box {
  display: flex;
  flex-direction: column;
  flex: 0 0 50%;
  border-top: 1px solid #333;
  background: #1e1e1e;
  min-height: 0;
  overflow: hidden;
}
.retro-box .retro-box__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.88em;
  line-height: 2em;
  background: rgba(255, 255, 255, 0.06);
  padding: 0 8px;
  flex-shrink: 0;
  border-bottom: 1px solid #2a2a2a;
  color: #ccc;
}
.retro-box .retro-box__title-main {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.retro-box .retro-box__title-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex: 0 0 auto;
  min-width: 0;
}
.retro-box .retro-box__progress {
  color: #888;
  font-size: 0.95em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.retro-box .retro-box__severity {
  display: inline-flex;
  align-items: center;
  max-width: min(14rem, 46vw);
  padding: 2px 6px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.retro-box .retro-box__close {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  font-size: 1em;
  padding: 0 2px;
  line-height: 1;
}
.retro-box .retro-box__close:hover {
  color: #ccc;
}
.retro-box .retro-feedback {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(50px, 10vh, 120px);
  overflow-y: auto;
}
.retro-box .retro-feedback.win, .retro-box .retro-feedback.view {
  flex-direction: row;
}
.retro-box.retro-choice {
  flex: 1 1 auto;
}
.retro-box .retro-choice__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  overflow-y: auto;
}
.retro-box .retro-choice__section {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.retro-box .retro-choice__section-title {
  color: #aaa;
  font-size: 0.78em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}
.retro-box .retro-choice__rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.retro-box .retro-choice__row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) minmax(34px, auto);
  gap: 8px;
  align-items: center;
  min-height: 48px;
  padding: 8px;
  border: 1px solid #333;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
}
.retro-box .retro-choice__row.is-selected {
  border-color: rgba(117, 153, 0, 0.55);
  background: rgba(117, 153, 0, 0.1);
}
.retro-box .retro-choice__row input {
  inline-size: 16px;
  block-size: 16px;
  accent-color: #759900;
}
.retro-box .retro-choice__row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.retro-box .retro-choice__row-label {
  color: #e0e0e0;
  font-size: 0.92em;
  font-weight: 700;
  line-height: 1.25;
}
.retro-box .retro-choice__row-desc {
  color: #999;
  font-size: 0.78em;
  line-height: 1.25;
}
.retro-box .retro-choice__count {
  min-width: 30px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #d8d8d8;
  font-size: 0.82em;
  font-weight: 700;
  text-align: center;
}
.retro-box .retro-choice__severity {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.retro-box .retro-choice__severity-option {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: stretch;
  min-width: 0;
  min-height: 72px;
  padding: 8px;
  border: 1px solid #333;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.035);
  color: #ccc;
  cursor: pointer;
  text-align: left;
}
.retro-box .retro-choice__severity-option.is-active {
  border-color: rgba(124, 181, 232, 0.7);
  background: rgba(124, 181, 232, 0.12);
}
.retro-box .retro-choice__severity-label {
  color: #eee;
  font-size: 0.84em;
  font-weight: 700;
  line-height: 1.18;
}
.retro-box .retro-choice__severity-helper {
  color: #9f9f9f;
  font-size: 0.73em;
  line-height: 1.2;
}
.retro-box .retro-choice__severity-count {
  margin-top: auto;
  color: #7cb5e8;
  font-size: 0.96em;
  font-weight: 800;
  line-height: 1;
}
.retro-box .retro-choice__empty {
  border: 1px solid rgba(224, 160, 48, 0.32);
  border-radius: 6px;
  padding: 8px;
  background: rgba(224, 160, 48, 0.08);
  color: #e0b96e;
  font-size: 0.82em;
}
.retro-box .retro-choice__begin {
  min-height: 38px;
  border: none;
  border-radius: 6px;
  background: rgba(56, 147, 232, 0.88);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.retro-box .retro-choice__begin:hover:not(:disabled) {
  background: rgba(80, 166, 240, 0.94);
}
.retro-box .retro-choice__begin:disabled {
  cursor: default;
  opacity: 0.48;
}
.retro-box .retro-player {
  display: flex;
  align-items: center;
  margin: 0 1em;
  flex: 1;
}
.retro-box .retro-player.retro-player--center {
  justify-content: center;
}
.retro-box .retro-king {
  font-size: 48px;
  line-height: 1;
  width: 56px;
  text-align: center;
  flex-shrink: 0;
  margin-inline-end: 10px;
  opacity: 0.85;
}
.retro-box .retro-icon {
  font-size: 52px;
  line-height: 1;
  width: 56px;
  text-align: center;
  flex-shrink: 0;
  margin-inline-end: 10px;
}
.retro-box .retro-icon.retro-icon--win {
  color: #759900;
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 1;
}
.retro-box .retro-icon.retro-icon--fail {
  color: #dc322f;
}
.retro-box .retro-icon.retro-icon--off {
  color: #e0a030;
}
.retro-box .retro-instruction {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.retro-box .retro-instruction strong {
  font-weight: normal;
  font-size: 1.1em;
  line-height: 1.35;
}
.retro-box .retro-instruction em {
  font-style: normal;
  font-size: 0.88em;
  color: #aaa;
  margin-top: clamp(0px, 0.3vh, 2px);
}
.retro-box .retro-choices {
  display: flex;
  justify-content: space-between;
  margin-top: clamp(2px, 0.8vh, 8px);
  line-height: 1.6em;
  font-size: 0.85em;
}
.retro-box .retro-choices a {
  color: #7cb5e8;
  cursor: pointer;
}
.retro-box .retro-choices a:hover {
  color: #aad4f5;
}
.retro-box .retro-choices.retro-choices--off {
  justify-content: flex-start;
}
.retro-box .retro-progress {
  margin-top: clamp(1px, 0.6vh, 6px);
  width: 100%;
  height: 4px;
  background: #2a2a2a;
}
.retro-box .retro-progress div {
  background: #759900;
  height: 4px;
  transition: width 0.5s;
  max-width: 100%;
}
.retro-box .retro-half {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
}
.retro-box .retro-half.retro-half--top {
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.retro-box .retro-continue {
  display: flex;
  flex: 0 1 30%;
  align-items: center;
  justify-content: center;
  background: rgba(56, 147, 232, 0.85);
  color: #fff;
  font-size: 1.2em;
  text-transform: uppercase;
  gap: 8px;
  cursor: pointer;
  padding: 0 12px;
  min-height: 60px;
  user-select: none;
}
.retro-box .retro-continue:hover {
  background: rgb(56, 147, 232);
}
.retro-box .retro-continue .retro-continue__icon {
  font-size: 1.6em;
}
.retro-box .retro-engine-reveal {
  text-align: center;
  padding: 6px 0 8px;
  border-top: 1px solid #2a2a2a;
  font-size: 0.82em;
}
.retro-box .retro-engine-reveal a {
  color: #888;
  cursor: pointer;
}
.retro-box .retro-engine-reveal a:hover {
  color: #aaa;
}
.retro-box .retro-vindication {
  margin-top: 12px;
  padding: 10px 12px;
  border-left: 3px solid #759900;
  background: rgba(117, 153, 0, 0.1);
  border-radius: 0 4px 4px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.retro-box .retro-vindication__icon {
  font-size: 1.2rem;
  color: #759900;
}
.retro-box .retro-vindication__msg {
  margin: 0;
  font-size: 0.82rem;
  color: #aaa;
  line-height: 1.5;
}
.retro-box .retro-eval-boxes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.retro-box .retro-eval-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid transparent;
}
.retro-box .retro-eval-box__label {
  font-size: 0.78rem;
  color: #888;
}
.retro-box .retro-eval-box__value {
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 2.5em;
  text-align: right;
}
.retro-box .retro-eval-box.retro-eval-box--best {
  border-color: rgba(117, 153, 0, 0.45);
  background: rgba(117, 153, 0, 0.08);
}
.retro-box .retro-eval-box.retro-eval-box--best .retro-eval-box__value {
  color: #759900;
}
.retro-box .retro-eval-box.retro-eval-box--near {
  border-color: rgba(240, 165, 0, 0.45);
  background: rgba(240, 165, 0, 0.08);
}
.retro-box .retro-eval-box.retro-eval-box--near .retro-eval-box__value {
  color: #f0a500;
}
.retro-box .retro-eval-box.retro-eval-box--ok {
  border-color: rgba(122, 173, 223, 0.45);
  background: rgba(122, 173, 223, 0.08);
}
.retro-box .retro-eval-box.retro-eval-box--ok .retro-eval-box__value {
  color: #7aaddf;
}
.retro-box .retro-eval-box.retro-eval-box--bad {
  border-color: rgba(220, 50, 47, 0.45);
  background: rgba(220, 50, 47, 0.08);
}
.retro-box .retro-eval-box.retro-eval-box--bad .retro-eval-box__value {
  color: #dc322f;
}
.retro-box .retro-reason {
  margin-top: 10px;
  padding: 7px 10px;
  border-left: 3px solid #3a5a8a;
  background: rgba(56, 100, 160, 0.1);
  border-radius: 0 4px 4px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.retro-box .retro-reason__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #7aaddf;
}
.retro-box .retro-reason__detail {
  font-size: 0.82rem;
  line-height: 1.4;
  margin-top: 4px;
  padding-left: 8px;
  border-left: 2px solid;
  border-radius: 0 3px 3px 0;
}
.retro-box .retro-reason__summary {
  font-size: 0.78rem;
  color: #888;
  line-height: 1.4;
  margin-top: 4px;
  font-style: italic;
}
.retro-box .retro-save {
  margin-top: 10px;
}
.retro-box .retro-save__btn {
  font-size: 0.8rem;
  padding: 4px 12px;
  border-radius: 4px;
  border: 1px solid #3a5a8a;
  background: transparent;
  color: #7aaddf;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.retro-box .retro-save__btn:hover {
  background: rgba(56, 100, 160, 0.2);
  color: #a8ccee;
}
.retro-box .retro-save__done {
  font-size: 0.8rem;
  color: #666;
}
.retro-box .retro-save__confirm {
  font-size: 0.8rem;
  color: #759900;
  font-weight: 600;
}
.retro-box .retro-feedback {
  position: relative;
}
.retro-box .retro-engine-reveal {
  position: absolute;
  right: 10px;
  bottom: 8px;
  text-align: right;
  padding: 0;
  border-top: none;
  font-size: 0.82em;
  z-index: 1;
}
.retro-box .retro-engine-reveal a {
  display: inline-block;
  padding: 3px 6px;
  border-radius: 4px;
  background: rgba(30, 30, 30, 0.88);
  color: #888;
  cursor: pointer;
}
.retro-box .retro-engine-reveal a:hover {
  color: #aaa;
}

.fbt {
  background: transparent;
  color: #bbb;
  border: none;
  border-radius: 6px;
  padding: 7px 10px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.5;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
  user-select: none;
}
.fbt[data-icon]::before {
  font-family: "lichess";
  font-style: normal;
  font-weight: normal;
  text-transform: none;
  speak: never;
  content: attr(data-icon);
  unicode-bidi: isolate;
  font-size: 1.3em;
  opacity: 0.9;
  vertical-align: middle;
}
@media (hover: hover) {
  .fbt:hover:not([disabled]) {
    background: rgba(56, 147, 232, 0.15);
    color: #e0e0e0;
  }
}
.fbt.active {
  background: rgba(56, 147, 232, 0.22);
  color: #9cc9f5;
}
.fbt[disabled] {
  opacity: 0.35;
  cursor: default;
}

.jumps {
  display: flex;
  flex: 1 1 0;
  align-items: stretch;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  gap: 0;
}
.jumps .fbt {
  font-size: 1.25rem;
  flex: 1 1 0;
  border-radius: 0;
  padding: 9px 0;
  text-align: center;
  min-width: 0;
}
.jumps .fbt + .fbt {
  border-left: 1px solid #222;
}
.jumps .fbt[data-icon] {
  letter-spacing: 0;
  text-transform: none;
}
.jumps > .control-explainer-disabled {
  flex: 1 1 0;
  align-items: stretch;
}
.jumps > .control-explainer-disabled > .control-explainer-disabled__visual {
  flex: 1 1 0;
  width: 100%;
  align-items: stretch;
}
.jumps > .control-explainer-disabled > .control-explainer-disabled__visual > .fbt {
  flex: 1 1 0;
  width: 100%;
}
.jumps > .fbt + .control-explainer-disabled .fbt,
.jumps > .control-explainer-disabled + .control-explainer-disabled .fbt,
.jumps > .control-explainer-disabled + .fbt {
  border-left: 1px solid #222;
}

.analyse__controls .analyse-review-controls__row > button,
.analyse__controls .analyse-review-controls__row > .control-explainer-disabled > .control-explainer-disabled__visual > button,
.analyse__underboard .analyse-review-controls__row > button,
.analyse__underboard .analyse-review-controls__row > .control-explainer-disabled > .control-explainer-disabled__visual > button {
  background: #1e1e1e;
  color: #bbb;
  border: 1px solid #303030;
  border-radius: 6px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.5;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  user-select: none;
}
@media (hover: hover) {
  .analyse__controls .analyse-review-controls__row > button:hover:not([disabled]),
  .analyse__controls .analyse-review-controls__row > .control-explainer-disabled > .control-explainer-disabled__visual > button:hover:not([disabled]),
  .analyse__underboard .analyse-review-controls__row > button:hover:not([disabled]),
  .analyse__underboard .analyse-review-controls__row > .control-explainer-disabled > .control-explainer-disabled__visual > button:hover:not([disabled]) {
    background: rgba(56, 147, 232, 0.15);
    border-color: rgba(56, 147, 232, 0.35);
    color: #e0e0e0;
  }
}
.analyse__controls .analyse-review-controls__row > button[disabled],
.analyse__controls .analyse-review-controls__row > .control-explainer-disabled > .control-explainer-disabled__visual > button[disabled],
.analyse__underboard .analyse-review-controls__row > button[disabled],
.analyse__underboard .analyse-review-controls__row > .control-explainer-disabled > .control-explainer-disabled__visual > button[disabled] {
  opacity: 0.35;
  cursor: default;
}
.analyse__controls .analyse-review-controls__row > button.active,
.analyse__controls .analyse-review-controls__row > .control-explainer-disabled > .control-explainer-disabled__visual > button.active,
.analyse__underboard .analyse-review-controls__row > button.active,
.analyse__underboard .analyse-review-controls__row > .control-explainer-disabled > .control-explainer-disabled__visual > button.active {
  background: rgba(56, 147, 232, 0.2);
  border-color: rgba(56, 147, 232, 0.5);
  color: #9cc9f5;
}

.move-nav-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}
.move-nav-bar__left {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
}
.move-nav-bar__middle {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: stretch;
}
.move-nav-bar__right {
  flex: 0 0 44px;
  display: flex;
  align-items: stretch;
  border-left: 1px solid #2a2a2a;
  margin-inline-start: 0;
}
.move-nav-bar__right .fbt {
  flex: 1 1 0;
}
.move-nav-bar > button.fbt {
  flex: 0 0 44px;
  border-right: 1px solid #2a2a2a;
}
.move-nav-bar .fbt {
  border-radius: 0;
  padding: 9px 0;
  text-align: center;
}

@media (min-width: 801px) {
  .move-nav-bar {
    background: #161616;
    border-top: 1px solid #2a2a2a;
  }
}
.analyse__controls {
  grid-area: controls;
  align-self: start;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.analyse__controls .eval-graph--bg {
  display: none;
}

.analyse__mobile-controls-nav {
  display: none;
}

.practice-rail {
  flex: 0 0 auto;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.practice-rail__row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.practice-rail__btn {
  flex: 1 1 auto;
  min-width: 0;
  background: #1e1e1e;
  color: #bbb;
  border: 1px solid #303030;
  border-radius: 6px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
@media (hover: hover) {
  .practice-rail__btn:hover:not([disabled]) {
    background: rgba(56, 147, 232, 0.15);
    border-color: rgba(56, 147, 232, 0.35);
    color: #e0e0e0;
  }
}
.practice-rail__btn.active {
  background: rgba(56, 147, 232, 0.2);
  border-color: rgba(56, 147, 232, 0.5);
  color: #9cc9f5;
}
.practice-rail__btn--settings {
  flex: 0 0 auto;
  font-size: 1rem;
  padding: 6px 12px;
}

.premove-queue-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  padding: 6px;
  background: #15191c;
  border: 1px solid #40505a;
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.premove-queue-controls__moves {
  display: flex;
  flex: 1 1 auto;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  padding: 1px 0;
}

.premove-queue-controls__move {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  min-height: 28px;
  padding: 2px 6px 2px 4px;
  color: #e7edf1;
  background: #232a2f;
  border: 1px solid #50606a;
  border-radius: 5px;
}

.premove-queue-controls__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e0b144;
  color: #141414;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
}

.premove-queue-controls__uci {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

.premove-queue-controls__cost {
  flex: 0 0 auto;
  color: #d8bd73;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.premove-queue-controls__status {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 28px;
  padding: 3px 6px;
  color: #f0ce7a;
  background: #241f16;
  border: 1px solid #58472b;
  border-radius: 5px;
  font-size: 0.74rem;
  line-height: 1.25;
}

.premove-queue-controls__status span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.premove-queue-controls__status-close {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 1px solid #6b5733;
  border-radius: 50%;
  background: #19150f;
  color: #f0ce7a;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.premove-queue-controls__promotion,
.premove-queue-controls__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.premove-queue-controls__promotion {
  padding-left: 6px;
  border-left: 1px solid #33434b;
}

.premove-queue-controls__promotion-btn,
.premove-queue-controls__btn {
  min-height: 30px;
  border: 1px solid #50606a;
  border-radius: 5px;
  background: #22282c;
  color: #e1e9ee;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
@media (hover: hover) {
  .premove-queue-controls__promotion-btn:hover,
  .premove-queue-controls__btn:hover {
    background: rgba(56, 147, 232, 0.15);
    border-color: rgba(56, 147, 232, 0.35);
    color: #e8f2fb;
  }
}
.premove-queue-controls__promotion-btn:focus-visible,
.premove-queue-controls__btn:focus-visible {
  outline: 2px solid #8fc5f7;
  outline-offset: 2px;
}

.premove-queue-controls__promotion-btn {
  width: 30px;
  padding: 0;
}
.premove-queue-controls__promotion-btn.is-active, .premove-queue-controls__promotion-btn[aria-pressed=true] {
  background: #e0b144;
  border-color: #f2cc68;
  color: #141414;
}

.premove-queue-controls__btn {
  padding: 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.premove-queue-controls__btn--clear {
  border-color: #574138;
  color: #e0b6a6;
}

.practice-rail__settings {
  padding: 12px;
  background: #181818;
  border: 1px solid #303030;
  border-radius: 6px;
}

.analyse__desktop-controls-nav {
  flex: 0 0 auto;
  margin-top: 4px;
}

.analyse__secondary {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-top: 8px;
  background: #181818;
}

.analyse__underboard {
  grid-area: under;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 8px;
  min-width: 0;
}

@media (max-width: 800px) {
  .analyse {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "engine" "board" "controls" "moves" "under";
    grid-template-rows: auto auto auto auto auto;
    padding: 12px 10px 18px;
    gap: 8px 0;
    overflow-x: hidden;
  }
  .analyse--retro-tool-open {
    grid-template-areas: "engine" "board" "controls" "retro" "moves" "under";
    grid-template-rows: auto auto auto auto auto auto;
  }
  .analyse__board,
  .analyse__tools,
  .analyse__controls,
  .analyse__underboard {
    min-width: 0;
  }
  .analyse__underboard .eval-graph {
    display: none;
  }
  .analyse__underboard .analyse-review-controls {
    display: none;
  }
  .analyse__controls {
    padding: 4px 4px 0;
    gap: 4px;
    height: 5rem;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    touch-action: pan-y;
    position: relative;
    overflow: hidden;
    flex-wrap: nowrap;
  }
  .analyse__controls .move-nav-bar {
    --mobile-move-nav-tab-bg: rgba(20, 20, 20, 0.54);
    --mobile-move-nav-tab-bg-active: rgba(56, 147, 232, 0.22);
    --mobile-move-nav-tab-border: #2e2e2e;
    --mobile-move-nav-tab-border-active: rgba(56, 147, 232, 0.42);
    height: 100%;
    gap: 2px;
    flex-wrap: nowrap;
  }
  .analyse__controls .move-nav-bar__left button,
  .analyse__controls .move-nav-bar > button.fbt, .analyse__controls .move-nav-bar__middle .jumps .fbt, .analyse__controls .move-nav-bar__right .fbt {
    height: 100%;
    border-radius: 6px 6px 0 0;
    border: 1px solid var(--mobile-move-nav-tab-border);
    border-bottom: none;
    background: var(--mobile-move-nav-tab-bg);
  }
  .analyse__controls .move-nav-bar__left button[data-icon]::before,
  .analyse__controls .move-nav-bar > button.fbt[data-icon]::before, .analyse__controls .move-nav-bar__middle .jumps .fbt[data-icon]::before, .analyse__controls .move-nav-bar__right .fbt[data-icon]::before {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 4px rgba(0, 0, 0, 0.55);
  }
  .analyse__controls .move-nav-bar__left button.active,
  .analyse__controls .move-nav-bar > button.fbt.active, .analyse__controls .move-nav-bar__middle .jumps .fbt.active, .analyse__controls .move-nav-bar__right .fbt.active {
    color: #9cc9f5;
    background: var(--mobile-move-nav-tab-bg-active);
    border-color: var(--mobile-move-nav-tab-border-active);
  }
  .analyse__controls .move-nav-bar__left {
    flex: 0 0 auto;
    height: 100%;
  }
  .analyse__controls .move-nav-bar__left .analyse-review-controls {
    display: flex;
    height: 100%;
  }
  .analyse__controls .move-nav-bar__left .analyse-review-controls__row {
    display: flex;
    align-items: stretch;
    height: 100%;
    gap: 2px;
    flex-wrap: nowrap;
  }
  .analyse__controls .move-nav-bar__left .analyse-review-controls__status {
    display: none;
  }
  .analyse__controls .move-nav-bar__left button {
    min-width: 0;
    padding: 4px 8px;
    color: #bbb;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    cursor: pointer;
    line-height: 1.2;
  }
  .analyse__controls .move-nav-bar__left button[disabled] {
    opacity: 0.35;
    cursor: default;
  }
  .analyse__controls .move-nav-bar > button.fbt {
    font-size: 1.4rem;
    padding: 6px 8px;
  }
  .analyse__controls .move-nav-bar__middle {
    flex: 1 1 auto;
    height: 100%;
  }
  .analyse__controls .move-nav-bar__middle .jumps {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    gap: 2px;
  }
  .analyse__controls .move-nav-bar__middle .jumps .fbt {
    font-size: 1.4rem;
    padding: 6px 4px;
  }
  .analyse__controls .move-nav-bar__middle .jumps > .control-explainer-disabled {
    padding: 6px 4px;
    border: 1px solid var(--mobile-move-nav-tab-border);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    background: var(--mobile-move-nav-tab-bg);
  }
  .analyse__controls .move-nav-bar__middle .jumps > .control-explainer-disabled > .control-explainer-disabled__visual > .fbt {
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .analyse__controls .move-nav-bar__right {
    flex: 0 0 auto;
    height: 100%;
    margin-inline-start: 0;
  }
  .analyse__controls .move-nav-bar__right .fbt {
    font-size: 1.4rem;
    padding: 6px 8px;
  }
  .analyse__controls .move-nav-bar__left button[disabled],
  .analyse__controls .move-nav-bar > button.fbt[disabled], .analyse__controls .move-nav-bar__middle .jumps .fbt[disabled], .analyse__controls .move-nav-bar__right .fbt[disabled] {
    opacity: 1;
    cursor: default;
  }
  .analyse__controls .move-nav-bar__left button[disabled] {
    color: rgba(187, 187, 187, 0.45);
  }
  .analyse__controls .move-nav-bar > button.fbt[disabled][data-icon]::before, .analyse__controls .move-nav-bar__middle .jumps .fbt[disabled][data-icon]::before, .analyse__controls .move-nav-bar__right .fbt[disabled][data-icon]::before {
    opacity: 0.35;
  }
  .analyse__controls .jumps {
    flex: unset;
  }
  .analyse__controls .jumps > :is(.fbt, .control-explainer-disabled):last-child {
    display: none;
  }
  .analyse__controls--premove-queue {
    height: auto;
    min-height: 5rem;
    flex-direction: column;
    align-items: stretch;
    overflow: visible;
  }
  .analyse__controls--premove-queue .eval-graph--bg {
    height: 5rem;
    bottom: auto;
  }
  .analyse__controls .eval-graph--bg {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }
  .analyse__controls .eval-graph--bg svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .analyse__controls > :not(.eval-graph--bg) {
    position: relative;
    z-index: 1;
  }
  .analyse__mobile-controls-nav {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
  }
  .analyse__controls--premove-queue .analyse__mobile-controls-nav {
    flex: 0 0 5rem;
    width: 100%;
  }
  .analyse__split-handle {
    display: none;
  }
  .analyse__middle-lower {
    display: none;
  }
  .analyse__desktop-controls-nav,
  .analyse__secondary {
    display: none;
  }
  .practice-rail {
    display: none;
    margin-top: 6px;
  }
  .practice-rail--queue-visible {
    display: flex;
    width: 100%;
    flex: 0 0 auto;
  }
  .practice-rail--queue-visible .practice-rail__row,
  .practice-rail--queue-visible .practice-rail__settings {
    display: none;
  }
  .premove-queue-controls {
    width: 100%;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
  }
  .premove-queue-controls__moves {
    flex: 1 1 100%;
    order: 1;
  }
  .premove-queue-controls__move {
    min-height: 32px;
  }
  .premove-queue-controls__cost {
    order: 2;
  }
  .premove-queue-controls__status {
    order: 2;
    flex-basis: 100%;
  }
  .premove-queue-controls__promotion {
    order: 3;
    padding-left: 0;
    border-left: 0;
  }
  .premove-queue-controls__actions {
    order: 4;
    margin-left: auto;
  }
  .premove-queue-controls__promotion-btn,
  .premove-queue-controls__btn {
    min-height: 36px;
  }
  .analyse__mobile-moves-context {
    display: flex;
    flex-direction: column;
  }
  .eval-bar,
  .analyse__player_strip,
  cg-resize {
    display: none !important;
  }
  .analyse__tools {
    display: contents;
    align-self: start;
    min-height: 0;
    overflow: visible;
  }
  .analyse__engine-block {
    grid-area: engine;
    min-width: 0;
    background: #1a1a1a;
  }
  .analyse__moves-stack {
    grid-area: moves;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: #1a1a1a;
  }
  .analyse--retro-tool-open .retro-box {
    grid-area: retro;
    min-width: 0;
  }
  .action-menu {
    position: fixed;
    inset: 58px 10px 18px;
    z-index: 1000;
    border: 1px solid #2e2e2e;
    border-radius: 6px;
    max-height: calc(100vh - 76px);
  }
  .ceval {
    min-height: 40px;
    column-gap: 4px;
  }
  .analyse__moves {
    flex: 0 0 auto;
    min-height: max(18em, 40vh);
    overflow-y: auto;
  }
  .retro-box {
    flex: 0 0 auto;
  }
  .retro-box .retro-icon {
    font-size: 38px;
    width: 42px;
    margin-inline-end: 8px;
  }
  .retro-box .retro-player {
    margin: 0 0.6em;
  }
  .retro-box .retro-feedback {
    min-height: 88px;
  }
  .retro-box .retro-instruction strong {
    font-size: 1em;
  }
  .retro-box .retro-continue {
    min-height: 52px;
    font-size: 1.05em;
  }
}
@media (max-height: 520px) {
  .retro-box .retro-player {
    margin: 0 6px;
  }
  .retro-box .retro-continue {
    flex: 0 1 18%;
    font-size: 0;
    gap: 0;
    padding: 0 8px;
    min-height: 52px;
  }
  .retro-box .retro-continue .retro-continue__icon {
    font-size: 1.5em;
  }
}
@media (max-height: 380px) {
  .retro-box .retro-box__title {
    line-height: 1.6em;
  }
  .retro-box .retro-box__severity {
    max-width: 38vw;
    padding: 1px 5px;
    font-size: 0.68rem;
  }
  .retro-box .retro-feedback {
    min-height: 40px;
  }
  .retro-box .retro-continue {
    position: absolute;
    bottom: 0;
    right: 0;
    flex: none;
    width: auto;
    min-height: 32px;
    padding: 6px 10px;
    font-size: 0;
  }
  .retro-box .retro-continue .retro-continue__icon {
    font-size: 1.1em;
  }
}
@media (max-width: 800px) {
  .analyse__underboard {
    gap: 8px;
    padding-top: 0;
    overflow-x: hidden;
  }
  .game-list ul,
  .game-list__row,
  .games-view__table-wrap {
    min-width: 0;
  }
  .eval-graph,
  .game-list {
    width: 100%;
    max-width: 100%;
  }
}
.analyse__board-inner {
  position: relative;
  flex: 1;
}

.skeleton-board {
  aspect-ratio: 1;
  background: #1a1a2e;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  font-size: 0.9rem;
}

.skeleton-block {
  height: 200px;
  background: #1a1a2e;
  border-radius: 4px;
}

.promotion-wrap {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  aspect-ratio: unset !important;
}

#promotion-choice {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
#promotion-choice square {
  position: absolute;
  width: 12.5%;
  height: 12.5%;
  background: #222;
  border: 1px solid #555;
  cursor: pointer;
  box-sizing: border-box;
}
#promotion-choice square:hover {
  background: #3a3a3a;
}
#promotion-choice piece {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
}

.analyse__player_strip {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  gap: 6px;
  padding: 3px 2px;
  min-height: var(---player-strip-height, 32px);
  font-size: 0.85rem;
  color: #ccc;
  width: 100%;
}

.player-strip__identity {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 0 1 auto;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid #454545;
}
.player-strip__identity--winner {
  border-color: #2f7f52;
}
.player-strip__identity--loser {
  border-color: #9a3d44;
}
.player-strip__identity--draw {
  border-color: #505050;
}

.analyse__clock {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #aaa;
  white-space: nowrap;
  padding: 1px 5px;
  background: #1e1e1e;
  border-radius: 3px;
}
.analyse__clock.active {
  background: #2a2418;
  color: #d8d0c2;
}

.analyse__move-time {
  color: #858585;
  font-weight: 500;
}

.analyse__clock-separator {
  color: #666;
}

.analyse__remaining-time {
  color: inherit;
}

.player-strip__color-icon {
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.player-strip__color-icon--white {
  background: #e8e8e8;
  border: 1px solid #999;
}
.player-strip__color-icon--black {
  background: #222;
  border: 1px solid #777;
}

.player-strip__name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.material {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
.material div {
  display: inline-block;
  margin-inline-start: 10px;
}
.material mpiece {
  margin-inline-start: -10px;
  background-size: cover;
  display: inline-block;
  width: 16px;
  height: 16px;
  opacity: 0.7;
}
.material mpiece.pawn {
  background-image: url("../piece/mono/P.svg");
}
.material mpiece.bishop {
  background-image: url("../piece/mono/B.svg");
}
.material mpiece.knight {
  background-image: url("../piece/mono/N.svg");
}
.material mpiece.rook {
  background-image: url("../piece/mono/R.svg");
}
.material mpiece.queen {
  background-image: url("../piece/mono/Q.svg");
}
.material mpiece.king {
  background-image: url("../piece/mono/K.svg");
}
.material score {
  font-size: 0.75rem;
  color: #888;
  font-variant-numeric: tabular-nums;
  margin-top: -2px;
  margin-inline-start: 2px;
}

.cg-wrap piece.pawn.white {
  background-image: var(---white-pawn);
}

.cg-wrap piece.knight.white {
  background-image: var(---white-knight);
}

.cg-wrap piece.bishop.white {
  background-image: var(---white-bishop);
}

.cg-wrap piece.rook.white {
  background-image: var(---white-rook);
}

.cg-wrap piece.queen.white {
  background-image: var(---white-queen);
}

.cg-wrap piece.king.white {
  background-image: var(---white-king);
}

.cg-wrap piece.pawn.black {
  background-image: var(---black-pawn);
}

.cg-wrap piece.knight.black {
  background-image: var(---black-knight);
}

.cg-wrap piece.bishop.black {
  background-image: var(---black-bishop);
}

.cg-wrap piece.rook.black {
  background-image: var(---black-rook);
}

.cg-wrap piece.queen.black {
  background-image: var(---black-queen);
}

.cg-wrap piece.king.black {
  background-image: var(---black-king);
}

cg-board::before,
.grr__thumb-grid.--populated::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  border-radius: inherit;
  pointer-events: none;
}

body:not(.simple-board) cg-board::before,
body:not(.simple-board) .grr__thumb-grid.--populated::before {
  filter: brightness(calc(var(---board-brightness) / 100)) contrast(calc(var(---board-contrast) / 100)) hue-rotate(calc(var(---board-hue) * 3.6deg));
}

body[data-board=brown] cg-board::before,
body[data-board=brown] .grr__thumb-grid.--populated::before {
  background-image: url("/images/board/brown.png");
}

body[data-board=horsey] cg-board::before,
body[data-board=horsey] .grr__thumb-grid.--populated::before {
  background-image: url("/images/board/horsey.png");
}

body[data-board=blue] cg-board::before,
body[data-board=blue] .grr__thumb-grid.--populated::before {
  background-image: url("/images/board/blue.png");
}

body[data-board=green] cg-board::before,
body[data-board=green] .grr__thumb-grid.--populated::before {
  background-image: url("/images/board/green.png");
}

body[data-board=purple] cg-board::before,
body[data-board=purple] .grr__thumb-grid.--populated::before {
  background-image: url("/images/board/purple.png");
}

body[data-board=purple-diag] cg-board::before,
body[data-board=purple-diag] .grr__thumb-grid.--populated::before {
  background-image: url("/images/board/purple-diag.png");
}

body[data-board=wood4] cg-board::before,
body[data-board=wood4] .grr__thumb-grid.--populated::before {
  background-image: url("/images/board/wood4.jpg");
}

body[data-board=maple] cg-board::before,
body[data-board=maple] .grr__thumb-grid.--populated::before {
  background-image: url("/images/board/maple.jpg");
}

body[data-board=blue2] cg-board::before,
body[data-board=blue2] .grr__thumb-grid.--populated::before {
  background-image: url("/images/board/blue2.jpg");
}

body[data-board=blue3] cg-board::before,
body[data-board=blue3] .grr__thumb-grid.--populated::before {
  background-image: url("/images/board/blue3.jpg");
}

body[data-board=marble] cg-board::before,
body[data-board=marble] .grr__thumb-grid.--populated::before {
  background-image: url("/images/board/marble.jpg");
}

body[data-board=olive] cg-board::before,
body[data-board=olive] .grr__thumb-grid.--populated::before {
  background-image: url("/images/board/olive.jpg");
}

body[data-board=grey] cg-board::before,
body[data-board=grey] .grr__thumb-grid.--populated::before {
  background-image: url("/images/board/grey.jpg");
}

body[data-board=metal] cg-board::before,
body[data-board=metal] .grr__thumb-grid.--populated::before {
  background-image: url("/images/board/metal.jpg");
}

body[data-board=newspaper] cg-board::before,
body[data-board=newspaper] .grr__thumb-grid.--populated::before {
  background-image: url("/images/board/svg/newspaper.svg");
}

body[data-board=blue] .cg-wrap coords {
  ---cg-ccw: #dee3e6;
  ---cg-ccb: #788a94;
  ---cg-cs: none;
}

body[data-board=blue2] .cg-wrap coords {
  ---cg-ccw: #97b2c7;
  ---cg-ccb: #546f82;
  ---cg-cs: none;
}

body[data-board=blue3] .cg-wrap coords {
  ---cg-ccw: #d9e0e6;
  ---cg-ccb: #315991;
  ---cg-cs: none;
}

body[data-board=brown] .cg-wrap coords {
  ---cg-ccw: #f0d9b5;
  ---cg-ccb: #946f51;
  ---cg-cs: none;
}

body[data-board=green] .cg-wrap coords {
  ---cg-ccw: #ffd;
  ---cg-ccb: #6d8753;
  ---cg-cs: none;
}

body[data-board=grey] .cg-wrap coords {
  ---cg-ccw: #b8b8b8;
  ---cg-ccb: #7d7d7d;
  ---cg-cs: none;
}

body[data-board=horsey] .cg-wrap coords {
  ---cg-ccw: #f0d9b5;
  ---cg-ccb: #946f51;
  ---cg-cs: none;
}

body[data-board=maple] .cg-wrap coords {
  ---cg-ccw: #e8ceab;
  ---cg-ccb: #bc7944;
  ---cg-cs: none;
}

body[data-board=marble] .cg-wrap coords {
  ---cg-ccw: #93ab91;
  ---cg-ccb: #4f644e;
  ---cg-cs: none;
}

body[data-board=metal] .cg-wrap coords {
  ---cg-ccw: #c9c9c9;
  ---cg-ccb: #727272;
  ---cg-cs: none;
}

body[data-board=newspaper] .cg-wrap coords {
  ---cg-ccw: #fff;
  ---cg-ccb: #8d8d8d;
  ---cg-cs: none;
}

body[data-board=olive] .cg-wrap coords {
  ---cg-ccw: #b8b19f;
  ---cg-ccb: #6d6655;
  ---cg-cs: none;
}

body[data-board=purple] .cg-wrap coords {
  ---cg-ccw: #9f90b0;
  ---cg-ccb: #7d4a8d;
  ---cg-cs: none;
}

body[data-board=purple-diag] .cg-wrap coords {
  ---cg-ccw: #e5daf0;
  ---cg-ccb: #957ab0;
  ---cg-cs: none;
}

body[data-board=wood4] .cg-wrap coords {
  ---cg-ccw: #caaf7d;
  ---cg-ccb: #7b5330;
  ---cg-cs: none;
}

.global-menu__dropdown.board-open {
  width: 264px;
  max-height: 85vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.board-settings {
  padding: 8px 10px 12px;
  border-top: 1px solid #2a2a2a;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.board-settings__label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #666;
  margin: 10px 0 5px;
}
.board-settings__label:first-of-type {
  margin-top: 2px;
}
.board-settings__toggle-row {
  padding: 2px 0;
}
.board-settings__slider-row {
  display: grid;
  grid-template-columns: 80px 1fr 38px;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}
.board-settings__slider-row label {
  font-size: 0.78rem;
  color: #aaa;
  white-space: nowrap;
}
.board-settings__slider-row input[type=range] {
  width: 100%;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.board-settings__slider-val {
  font-size: 0.72rem;
  color: #888;
  text-align: right;
  white-space: nowrap;
}
.board-settings__segmented-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}
.board-settings__segmented-label {
  font-size: 0.78rem;
  color: #aaa;
  white-space: nowrap;
}
.board-settings__segmented-control {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid #333;
  border-radius: 4px;
  overflow: hidden;
  background: #151515;
}
.board-settings__segmented-option {
  min-width: 0;
  border: 0;
  border-right: 1px solid #333;
  border-radius: 0;
  padding: 4px 3px;
  background: transparent;
  color: #888;
  font-size: 0.68rem;
  line-height: 1.1;
  cursor: pointer;
}
.board-settings__segmented-option:last-child {
  border-right: 0;
}
.board-settings__segmented-option:hover {
  color: #ccc;
  background: #202020;
}
.board-settings__segmented-option.active {
  color: #e7c77d;
  background: #2b2415;
}
.board-settings__reset {
  align-self: flex-end;
  margin-top: 2px;
  padding: 2px 8px;
  font-size: 0.72rem;
  background: transparent;
  border: 1px solid #444;
  border-radius: 3px;
  color: #888;
  cursor: pointer;
}
.board-settings__reset:hover {
  border-color: #666;
  color: #ccc;
}
.board-settings__theme-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.board-settings__theme-tile {
  padding: 0;
  border: 2px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  background: transparent;
  line-height: 0;
}
.board-settings__theme-tile span {
  display: block;
  width: 58px;
  height: 29px;
  background-size: cover;
  background-position: center;
  border-radius: 1px;
}
.board-settings__theme-tile:hover {
  border-color: #777;
}
.board-settings__theme-tile.active {
  border-color: #6a9;
}
.board-settings__piece-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  background: #1a1a1a;
  padding: 3px;
  border-radius: 3px;
}
.board-settings__piece-tile {
  position: relative;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  background: transparent;
}
.board-settings__piece-tile piece {
  position: absolute;
  inset: 4px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}
.board-settings__piece-tile:hover {
  background: rgba(255, 255, 255, 0.08);
}
.board-settings__piece-tile.active {
  border-color: #6a9;
}

.eval-graph-settings__toggle-row {
  padding: 3px 0;
}
.eval-graph-settings .board-settings__segmented-row {
  grid-template-columns: 1fr;
}
.eval-graph-settings .board-settings__segmented-control {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cg-wrap coords {
  position: absolute;
  display: flex;
  pointer-events: none;
  opacity: 0.8;
  font-family: sans-serif;
  font-weight: bold;
  color: #fff;
  font-size: clamp(8px, 1.5cqw, 12px);
  text-shadow: var(---cg-cs, 0 1px 2px #000);
  user-select: none;
}

.cg-wrap coords.ranks {
  top: 1px;
  right: 0;
  left: auto;
  flex-flow: column-reverse;
  height: 100%;
  width: 0.8em;
}

.cg-wrap coords.ranks.black {
  flex-flow: column;
}

.cg-wrap coords.ranks coord {
  transform: none;
}

.cg-wrap coords.files {
  bottom: 0;
  left: 0;
  text-align: left;
  flex-flow: row;
  width: 100%;
  height: 1.4em;
}

.cg-wrap coords.files.black {
  flex-flow: row-reverse;
}

.cg-wrap coords.files coord {
  padding-left: 4px;
}

body[data-board] .cg-wrap coords .coord-light {
  color: var(---cg-ccb, #fff);
}
body[data-board] .cg-wrap coords .coord-dark {
  color: var(---cg-ccw, #fff);
}

.cg-wrap {
  width: 100%;
  aspect-ratio: 1/1;
  container-type: inline-size;
}

.tview2 {
  white-space: normal;
}
.tview2 move {
  display: inline-block;
  padding: 0.25em 0.17em;
  cursor: pointer;
  color: #ccc;
}
.tview2 move.active {
  background: #2a6644;
  color: #fff;
}
.tview2 move.active index, .tview2 move.active eval {
  color: #fff;
}
.tview2 move:hover:not(.active) {
  background: rgba(255, 255, 255, 0.08);
  color: #eee;
}
.tview2 move.context-active:not(.active) {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  outline: 1px solid rgba(255, 255, 255, 0.25);
}
.tview2 move.worst-miss {
  outline: 1px solid #9a3d44;
  border-radius: 2px;
}
.tview2 move index {
  font-size: 90%;
  color: #888;
  padding-inline-end: 0.15em;
}
.tview2 move glyph {
  margin-inline-start: 0.08em;
  vertical-align: bottom;
  font-size: 0.85em;
  user-select: none;
}
.tview2 move eval {
  margin-inline-start: 0.3em;
  font-size: 0.75em;
  color: #c084fc;
  user-select: none;
}
.tview2 inline {
  display: inline;
  font-style: italic;
  font-size: 0.9em;
  opacity: 0.8;
}
.tview2 inline move {
  margin-inline-start: 0;
}
.tview2 inline::before {
  content: "(";
  vertical-align: 0.7em;
  opacity: 0.7;
  font-size: 1.1em;
  margin-inline: 2px -2px;
}
.tview2 inline::after {
  content: ")";
  vertical-align: 0.7em;
  opacity: 0.7;
  font-size: 1.1em;
  margin-inline: -1px 1px;
}

.tview2-column {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  align-content: flex-start;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.tview2-column > index {
  flex: 0 0 13%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-inline-end: 6px;
  border-inline-end: 1px solid #222;
  background: #141414;
  color: #666;
  font-size: 0.82em;
  line-height: 1.75em;
  user-select: none;
}
.tview2-column > move {
  flex: 0 0 43.5%;
  box-sizing: border-box;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 0 0.3em 0 0.5em;
  font-size: 1.185em;
  line-height: 1.75em;
  border-radius: 0;
  margin-inline-end: 0;
  white-space: nowrap;
  overflow: hidden;
}
.tview2-column > move.empty {
  pointer-events: none;
  color: #444;
}
.tview2-column > interrupt {
  flex: 0 0 100%;
  background: #141414;
  border-top: 1px solid #222;
  border-bottom: 1px solid #222;
}
.tview2-column > interrupt lines {
  display: block;
  padding: 3px 4px 3px 8px;
}
.tview2-column > interrupt inline::before,
.tview2-column > interrupt inline::after {
  content: none;
}
.tview2-column > interrupt line {
  display: block;
  padding-inline-start: 7px;
  position: relative;
}
.tview2-column > interrupt line > button.variation-remove {
  background: transparent;
  border: none;
  padding: 0 4px 0 0;
  color: #555;
  font-size: 0.85em;
  cursor: pointer;
  vertical-align: middle;
  line-height: inherit;
  user-select: none;
}
.tview2-column > interrupt line > button.variation-remove:hover {
  color: #c66;
}
.tview2-column > interrupt line > branch {
  border-inline-start: 2px solid rgba(255, 255, 255, 0.12);
  margin-inline-start: -9px;
  position: absolute;
  width: 8px;
  height: 100%;
}
.tview2-column > interrupt line > branch::after {
  margin-top: 0.8em;
  content: " ";
  border-top: 2px solid rgba(255, 255, 255, 0.12);
  position: absolute;
  width: 7px;
}
.tview2-column > interrupt move {
  font-size: 13px;
}

.btn-review {
  min-width: 90px;
  text-align: center;
}
.btn-review--primary {
  background: transparent !important;
  border-color: #2e6b3c !important;
  color: #55c26a !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
@media (hover: hover) {
  .btn-review--primary:hover:not([disabled]) {
    background: rgba(85, 194, 106, 0.1) !important;
    border-color: #3da354 !important;
  }
}
.btn-review--complete {
  font-size: 0.7rem !important;
  background: transparent !important;
  border-color: #275c33 !important;
  color: #49a55c !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
@media (hover: hover) {
  .btn-review--complete:hover:not([disabled]) {
    background: rgba(85, 194, 106, 0.08) !important;
    border-color: #3da354 !important;
  }
}
.btn-review--running {
  position: relative;
  overflow: hidden;
  background: transparent !important;
  border-color: #2e6b3c !important;
  color: #55c26a !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.btn-review--running::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.5px;
  background: #2a2a2a;
}
@media (hover: hover) {
  .btn-review--running:hover:not([disabled]) {
    background: rgba(85, 194, 106, 0.1) !important;
  }
}
.btn-review__bolt {
  display: inline-flex;
  line-height: 1;
}
.btn-review__bolt.--breathing {
  animation: grr-review-bolt-breathe 1.4s ease-in-out infinite;
}
.btn-review__icon {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  letter-spacing: -2px;
}
.btn-review__icon-bolt {
  font-size: 0.85em;
}
.btn-review__label {
  position: relative;
}
.btn-review__pct {
  display: inline-block;
  width: 4ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.btn-review__fill {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2.5px;
  background: #55c26a;
  transition: width 0.3s linear;
}

.lfym-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  height: 1.4em;
  padding: 0 0.15em;
  border-radius: 3.5px;
  background: #e8a33d;
  color: #231a08;
  font-weight: 800;
  font-size: 0.75em;
  line-height: 1;
  flex: 0 0 auto;
}
.lfym-badge--inverted {
  background: #231a08;
  color: #e8a33d;
}

.btn-mistakes {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent !important;
  border-color: #6d5525 !important;
  color: #e8a33d !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
@media (hover: hover) {
  .btn-mistakes:hover:not([disabled]) {
    background: rgba(232, 163, 61, 0.1) !important;
    border-color: #a3822f !important;
  }
}
.btn-mistakes--active {
  background: #e8a33d !important;
  border-color: #e8a33d !important;
  color: #231a08 !important;
  font-weight: 700 !important;
}
@media (hover: hover) {
  .btn-mistakes--active:hover:not([disabled]) {
    background: #e8a33d !important;
    border-color: #e8a33d !important;
    filter: brightness(1.08);
  }
}

.btn-study-tools {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent !important;
  border-color: #24507e !important;
  color: #8fb3e0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
@media (hover: hover) {
  .btn-study-tools:hover:not([disabled]) {
    background: rgba(74, 144, 226, 0.1) !important;
    border-color: #3568ad !important;
  }
}
.btn-study-tools--active {
  background: #4a90e2 !important;
  border-color: #4a90e2 !important;
  color: #10233b !important;
  font-weight: 700 !important;
}
@media (hover: hover) {
  .btn-study-tools--active:hover:not([disabled]) {
    background: #4a90e2 !important;
    border-color: #4a90e2 !important;
    filter: brightness(1.08);
  }
}
.btn-study-tools--active .qnr-pulse--unsatisfied {
  border-color: #10233b;
}

.analyse-review-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 12px;
}

.analyse-review-controls__row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.analyse-review-controls__status {
  font-size: 0.75rem;
  color: #888;
  line-height: 1.2;
}

.analyse-review-controls__hint {
  font-size: 0.78rem;
  color: #888;
  line-height: 1.4;
}

.pgn-import {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pgn-import__input {
  width: 100%;
  box-sizing: border-box;
  background: #111;
  color: var(--text);
  border: 1px solid #333;
  border-radius: 4px;
  padding: 8px;
  font-family: monospace;
  font-size: 0.8rem;
  resize: vertical;
}
.pgn-import__row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pgn-import__error {
  color: #f66;
  font-size: 0.8rem;
}
.pgn-import__status {
  font-size: 0.78rem;
  color: #888;
  padding: 0 2px;
}

.game-list {
  width: 100%;
  container-type: inline-size;
}
.game-list__header {
  font-size: 0.8rem;
  color: #888;
  padding: 4px 0;
}
.game-list__toolbar {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px 0 6px;
}
.game-list__toolbar .games-view__search {
  width: 100%;
  box-sizing: border-box;
}
.game-list__toolbar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.game-list__density-toggle {
  display: inline-flex;
  flex-shrink: 0;
  border: 1px solid #333;
  border-radius: 4px;
  overflow: hidden;
}
.game-list__density-toggle .games-view__density-btn {
  padding: 2px 7px;
  font-size: 0.78rem;
}
.game-list__filter-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.game-list__filter-pills .games-view__pill {
  padding: 2px 7px;
  font-size: 0.75rem;
}
.game-list__filter-pills .games-view__clear {
  padding: 2px 7px;
  font-size: 0.75rem;
}
.game-list__filter-pills.--overflow {
  padding-top: 2px;
}
.game-list__page-size {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  color: #777;
  font-size: 0.74rem;
}
.game-list__page-size-label {
  padding-right: 2px;
}
.game-list__page-size-btn {
  padding: 2px 7px;
  background: transparent;
  color: #888;
  border: 1px solid #444;
  border-radius: 4px;
  font-size: 0.74rem;
  line-height: 1.2;
  cursor: pointer;
}
.game-list__page-size-btn:hover {
  background: #222;
  color: #ccc;
}
.game-list__page-size-btn.active {
  background: #1e3a6e;
  color: #9cf;
  border-color: #2a5a9a;
}
.game-list__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 7px 0 2px;
}
.game-list__no-results {
  font-size: 0.85rem;
  color: #888;
  padding: 8px 10px;
  font-style: italic;
}
.game-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #333;
  border-radius: 4px;
  overflow: hidden;
}
.game-list li {
  display: flex;
  align-items: center;
}
.game-list li + li {
  border-top: 1px solid #2a2a2a;
}
.game-list li.review-run-member {
  position: relative;
}
.game-list li.review-run-member::before {
  content: "";
  align-self: stretch;
  width: 3px;
  min-height: 24px;
  background: var(--review-run-wave-color);
  opacity: 0.92;
}
.game-list__row {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  text-align: left;
  background: none;
  border: none;
  color: var(--text);
  padding: 6px 10px;
  font-size: 0.85rem;
  cursor: pointer;
}
.game-list__row:hover {
  background: #2a2a2a;
}
.game-list__row.active {
  background: rgba(56, 147, 232, 0.14);
  box-shadow: inset 3px 0 0 #3893e8;
}
.game-list__row.selected {
  background: #1a2035;
  outline: 1px inset #3a5a9a;
}
.game-list__row.analyzing {
  background: #1a2a18;
}
.game-list li > .grr {
  flex: 1;
  min-width: 0;
  border-bottom: none;
}
.game-list li:nth-child(even) > .grr {
  background: #202020;
}
.game-list li:nth-child(even) > .grr:hover {
  background: #262626;
}
.game-list li:nth-child(even) > .grr.selected {
  background: #1a2035;
}
.game-list li:nth-child(even) > .grr.open {
  background: rgba(56, 147, 232, 0.14);
}
.game-list__queue-status {
  padding: 3px 0 4px;
  color: #888;
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.4;
}
.game-list__queue-status.--active {
  color: #5a9a5a;
}
.game-list__queue-status.--stalled {
  color: #d0a85c;
}
.game-list__queue-counter {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
  .game-list .grl__badge.--new {
    display: none;
  }
}

.games-view__analyzing-progress {
  font-size: 0.8rem;
  color: #5a9a5a;
  font-variant-numeric: tabular-nums;
}

.games-view__review-lifecycle {
  display: inline-block;
  min-width: 6ch;
  font-size: 0.74rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.games-view__review-lifecycle.--active {
  color: #5a9a5a;
}
.games-view__review-lifecycle.--queued {
  color: #777;
  font-style: italic;
}
.games-view__review-lifecycle.--paused {
  color: #d0a85c;
}
.games-view__review-lifecycle.--warning {
  color: #e2b35c;
}

.games-view__select-toggle {
  padding: 2px 9px;
  background: transparent;
  color: #888;
  border: 1px solid #444;
  border-radius: 4px;
  font-size: 0.75rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.games-view__select-toggle:hover {
  background: #222;
  color: #ccc;
}
.games-view__select-toggle.active {
  background: #2a3a2a;
  color: #8f8;
  border-color: #4a7a4a;
}

.games-view__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 0;
  font-size: 0.85rem;
  color: #999;
}

.games-view__page-btn {
  padding: 3px 10px;
  background: #1e3a6e;
  color: #7ab;
  border: 1px solid #2a5a9a;
  border-radius: 4px;
  font-size: 0.75rem;
  cursor: pointer;
}
.games-view__page-btn:hover:not(:disabled) {
  background: #2a4a8e;
  color: #9cf;
}
.games-view__page-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.games-view__page-info {
  font-size: 0.8rem;
  color: #999;
}

.games-view__review-all-btn {
  padding: 2px 9px;
  background: #1e3a6e;
  color: #7ab;
  border: 1px solid #2a5a9a;
  border-radius: 4px;
  font-size: 0.75rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s;
}
.games-view__review-all-btn:hover {
  background: #2a4a8e;
  color: #9cf;
}

.grl__dot {
  font-size: 0.6em;
  flex-shrink: 0;
  line-height: 1;
}
.grl__dot::before {
  content: "●";
}
.grl__dot.--win {
  color: #4a8;
}
.grl__dot.--loss {
  color: #f66;
}
.grl__dot.--draw {
  color: #888;
}
.grl__dot.--unknown {
  color: #3a3a3a;
}
.grl__line1 {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.grl__matchup {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
.grl__player {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
}
.grl__player.--opponent {
  flex: 0 0 auto;
  overflow: visible;
}
.grl__player.--account {
  flex: 1 1 0%;
  min-width: 0;
  overflow: hidden;
  color: #666;
}
.grl__name {
  white-space: nowrap;
}
.grl__name.--account {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  color: #999;
}
.grl__rating {
  flex-shrink: 0;
  font-size: 0.75em;
  color: #666;
  font-variant-numeric: tabular-nums;
}
.grl__delta {
  flex-shrink: 0;
  font-size: 0.74em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.grl__delta.--gain {
  color: #4a8;
}
.grl__delta.--loss {
  color: #f66;
}
.grl__accuracy {
  flex-shrink: 0;
  font-size: 0.72em;
  color: #7ab;
  font-variant-numeric: tabular-nums;
}
.grl__tactic-icons {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 3px;
}
@container (max-width: 420px) {
  .grl__matchup {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
  }
  .grl__player {
    align-self: stretch;
  }
  .grl__player.--account {
    padding-left: 12px;
  }
}
.grl__line2 {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 0.78em;
}
.grl__opening {
  flex: 1 10 150px;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #666;
}
.grl__opening-name {
  font-weight: 600;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}
.grl__opening-san {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #555;
  font-variant-numeric: tabular-nums;
}
.grl__opening-moves {
  color: #666;
  flex-shrink: 0;
}
.grl__tc-icon {
  flex-shrink: 0;
  font-family: "lichess";
  line-height: 1;
}
.grl__tc-icon::before {
  content: attr(data-icon);
}
.grl__tc-icon.--bullet {
  color: #e2c422;
}
.grl__tc-icon.--blitz {
  color: #f28030;
}
.grl__tc-icon.--rapid {
  color: #7bb33a;
}
.grl__tc-icon.--classical {
  color: #2fb3a3;
}
.grl__tc-icon.--no-clock {
  color: #3893e8;
}
.grl__timestamp {
  flex-shrink: 0;
  margin-left: auto;
  color: #555;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.grl__badge {
  font-size: 0.7em;
  font-weight: 700;
}
.grl__badge.--new {
  color: #8fd36b;
}
.grl__badge.--ok {
  color: #4a8;
}

@container (max-width: 220px) {
  .grr__review-collapse {
    display: none;
  }
  .grr__review.--reviewed.--compact,
  .grr__review.--unreviewed.--compact {
    width: 28px;
    height: 24px;
    padding: 0;
    gap: 0;
    justify-content: center;
  }
  .grr__review.--reviewed.--compact {
    border-radius: 5px;
  }
  .grr__review.--reviewed.--compact .grr__review-main {
    flex: 1;
    align-self: stretch;
    justify-content: center;
    padding: 0;
  }
  .grr__review.--reviewed.--compact .grr__review-icon-cell {
    display: none;
  }
  .grl__opening-san {
    display: none;
  }
}
@container (max-width: 420px) {
  .grr__review.--reviewed {
    display: none;
  }
  .grr__chips {
    display: none;
  }
}
.color-chip {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  vertical-align: middle;
  margin-left: 5px;
  flex-shrink: 0;
}
.color-chip.--white {
  background: #d8d8d8;
  border: 1px solid #888;
}
.color-chip.--black {
  background: #333;
  border: 1px solid #666;
}

.game-list .game-ext-link {
  display: none;
}

.game-ext-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: #3a3a3a;
  text-decoration: none;
  border-radius: 3px;
  transition: color 0.1s, background 0.1s;
}
.game-ext-link::before {
  font-family: "lichess";
  content: "\e00f";
  font-size: 0.8rem;
  line-height: 1;
}
.game-ext-link:hover {
  color: #888;
  background: #2a2a2a;
}

.ceval {
  display: flex;
  align-items: stretch;
  column-gap: 6px;
  padding-top: 3px;
  background: #111;
  position: relative;
  min-height: 44px;
}
.ceval__progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #1a1a1a;
  overflow: hidden;
  pointer-events: none;
}
.ceval__progress-fill {
  position: relative;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #4a9, #5cb);
  transition: width 0.4s linear;
}
.ceval__progress-fill::after {
  content: "";
  position: absolute;
  top: 0;
  right: -20px;
  width: 24px;
  height: 100%;
  background: linear-gradient(90deg, #7de, rgba(100, 230, 210, 0.6), transparent);
}
.ceval__progress-fill--done {
  background: #4a9;
  transition: none;
}
.ceval__progress-fill--done::after {
  display: none;
}
.ceval .cmn-toggle {
  flex: 0 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #888;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-inline-start: 6px;
}
.ceval .cmn-toggle.active {
  color: #6f6;
}
.ceval .cmn-toggle:hover {
  color: #ccc;
}
.ceval pearl {
  display: block;
  flex: 1 0 auto;
  line-height: 38px;
  font-size: 1.6em;
  text-align: center;
  font-weight: bold;
  color: #e8e8e8;
  font-variant-numeric: tabular-nums;
}
.ceval pearl.ceval__ko {
  color: #a855f7;
}
.ceval .engine {
  flex: 2 1 auto;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 14px;
  margin-top: 3px;
  color: #b8b8b8;
  overflow: hidden;
  white-space: nowrap;
  align-self: center;
}
.ceval .engine .info {
  display: block;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 13px;
  margin-top: 1px;
  color: #767676;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ceval .engine .info.info--active {
  color: #6aa896;
}
.ceval .settings-gear {
  color: #888;
  font-size: 16px;
  padding: 0 8px;
  margin-inline-end: 4px;
  background: none;
  border: none;
  cursor: pointer;
  align-self: center;
}
.ceval .settings-gear:hover {
  color: #ccc;
}
.ceval .settings-gear.active {
  color: #fff;
  background: #2a6644;
  border-radius: 3px;
}

.pv_box {
  width: 100%;
  background: #111;
  font-size: 13px;
  position: relative;
}

.pv {
  font-size: 0.82rem;
  color: #aaa;
}
.pv--nowrap {
  display: block;
  height: 2em;
  line-height: 2em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-top: 1px solid #222;
  padding-inline-end: 6px;
}
.pv strong {
  display: inline-block;
  width: 34px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
}
.pv__score--white {
  color: #d4d4a0;
}
.pv__score--black {
  color: #8fb8d4;
}
.pv__score--ko {
  color: #a855f7;
  font-weight: 700;
}
.pv__score--massive {
  color: hsl(129, 71%, 55%);
  font-weight: 700;
}
.pv--empty {
  color: transparent;
}

.pv-num {
  color: #555;
  font-size: 0.78rem;
  margin-inline-start: 4px;
  user-select: none;
}

.pv-san {
  cursor: pointer;
  margin-inline-start: 4px;
  border-radius: 2px;
}
.pv-san:hover {
  color: #e8e8e8;
  background: #2a2a2a;
  padding: 0 1px;
}

.pv-first {
  margin-inline-start: 4px;
  margin-inline-end: 8px;
}
.pv-first .pv-num {
  color: #888;
}
.pv-first .pv-san {
  color: #e8e8e8;
  font-weight: 700;
  font-size: 0.92rem;
}

.pv-cont {
  color: #666;
}
.pv-cont .pv-num {
  color: #444;
}
.pv-cont .pv-san {
  color: #666;
}
.pv-cont .pv-san:hover {
  color: #e8e8e8;
}

.pv-board-float {
  position: fixed;
  z-index: 50;
  pointer-events: none;
}
@media (max-width: 600px) {
  .pv-board-float {
    display: none;
  }
}
.pv-board-float {
  width: 384px;
  height: 384px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
}
.pv-board-float .cg-wrap {
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
}

.ceval__score {
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 52px;
  color: #e8e8e8;
}
.ceval__score--white {
  color: #d4d4a0;
}
.ceval__score--black {
  color: #8fb8d4;
}

.ceval__best {
  font-family: monospace;
  font-size: 0.85rem;
  color: #aaa;
  letter-spacing: 0.02em;
}

.ceval__info {
  font-size: 0.8rem;
  color: #555;
}

.ceval-settings {
  width: 100%;
  max-width: 600px;
  background: #111;
  border-radius: 4px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
}
.ceval-settings__row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ceval-settings__row > .control-explainer-disabled {
  flex: 1 1 0;
}
.ceval-settings__row--disabled {
  opacity: 0.35;
  pointer-events: none;
}
.ceval-settings__label {
  font-size: 0.8rem;
  color: #888;
  min-width: 46px;
}
.ceval-settings__val {
  font-size: 0.8rem;
  color: #aaa;
  min-width: 36px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ceval-settings input[type=range] {
  flex: 1;
}
.ceval-settings input[type=checkbox] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.eval-graph {
  position: relative;
  width: 100%;
  padding-bottom: 30px;
}
.eval-graph--bg {
  padding-bottom: 0;
}
.eval-graph svg {
  display: block;
  border-radius: 3px;
  overflow: hidden;
  background: #111;
  cursor: default;
}
.eval-graph rect[fill=transparent] {
  cursor: pointer;
}
.eval-graph circle {
  cursor: pointer;
}
.eval-graph__appearance {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 4;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid var(--app-border);
  border-radius: 7px;
  background: color-mix(in srgb, var(--app-surface) 88%, transparent);
  color: var(--app-text-muted);
  font-size: 0.7rem;
  cursor: pointer;
}
.eval-graph__appearance:hover, .eval-graph__appearance:focus-visible {
  background: var(--app-surface-selected);
  color: var(--app-text);
}
.eval-graph__tooltip {
  position: absolute;
  top: 6px;
  z-index: 3;
  padding: 3px 6px;
  background: #222;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  font-family: "SF Mono", "Consolas", "Menlo", monospace;
  font-size: 0.7rem;
  color: #ddd;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s;
}
.eval-graph__empty {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  font-size: 0.8rem;
  background: #111;
  border-radius: 3px;
}
.eval-graph__review-engine {
  position: absolute;
  left: 0;
  bottom: 16px;
  color: #777;
  font-size: 0.72rem;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
.eval-graph__resize-handle {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 14px;
  cursor: ns-resize;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eval-graph__resize-handle::before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: #303030;
  opacity: 0.65;
  transition: background 0.12s, opacity 0.12s;
}
.eval-graph__resize-handle:hover::before, .eval-graph__resize-handle:active::before, .eval-graph__resize-handle:focus-visible::before {
  background: #4b5f4b;
  opacity: 0.9;
}
.eval-graph__resize-handle:focus-visible {
  outline: 2px solid #4a9;
  outline-offset: 2px;
}

.analysis-summary-wrap {
  width: 100%;
  max-width: 600px;
}

.analysis-summary {
  display: flex;
  gap: 0;
  width: 100%;
  border: 1px solid #333;
  border-radius: 4px;
  overflow: hidden;
}

.summary__col {
  flex: 1;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.summary__col + .summary__col {
  border-left: 1px solid #333;
}

.summary__name {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.summary__color-icon {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.summary__color-icon--white {
  background: #e8e8e8;
  border: 1px solid #999;
}
.summary__color-icon--black {
  background: #333;
  border: 1px solid #888;
}

.summary__accuracy {
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #e8e8e8;
}

.summary__breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 0.75rem;
  color: #888;
}

.summary__blunder {
  color: hsl(0, 69%, 60%);
}

.summary__mistake {
  color: hsl(41, 100%, 45%);
}

.summary__inaccuracy {
  color: hsl(202, 78%, 62%);
}

.keyboard-help {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.keyboard-help__box {
  background: #1e1e1e;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 20px 24px;
  min-width: 320px;
  position: relative;
}
.keyboard-help__box h2 {
  margin: 0 0 14px;
  font-size: 1rem;
  color: #e8e8e8;
}
.keyboard-help__box table {
  width: 100%;
  border-collapse: collapse;
}
.keyboard-help__box td {
  padding: 4px 8px 4px 0;
  font-size: 0.82rem;
  color: #aaa;
  vertical-align: middle;
}
.keyboard-help__box td:first-child {
  font-family: monospace;
  color: #e8e8e8;
  white-space: nowrap;
  padding-right: 16px;
}
.keyboard-help__box tr + tr td {
  border-top: 1px solid #2a2a2a;
}
.keyboard-help__close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: #666;
  font-size: 1rem;
  cursor: pointer;
  padding: 2px 6px;
}
.keyboard-help__close:hover {
  color: #e8e8e8;
}

.games-view {
  padding: 16px 20px;
  max-width: 1100px;
  margin: 0 auto;
}
.games-view__controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-bottom: 16px;
  padding: 10px 14px;
  background: #181818;
  border: 1px solid #282828;
  border-radius: 6px;
}
.games-view__filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.games-view__filter-group.--right {
  margin-left: auto;
  gap: 10px;
}
.games-view__filter-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.games-view__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: #222;
  color: #888;
  border: 1px solid #333;
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.games-view__pill:hover {
  background: #2a2a2a;
  color: #ccc;
}
.games-view__pill.active {
  background: #1e3a1e;
  color: #6f6;
  border-color: #3a7a3a;
}
.games-view__pill.--tactics {
  color: #f84;
  font-weight: 600;
}
.games-view__pill.--tactics:hover {
  background: #2a1a0a;
  color: #ffa060;
}
.games-view__pill.--tactics.active {
  background: #2e1500;
  color: #ffa060;
  border-color: #8b3a00;
}
.games-view__pill.--quick {
  background: transparent;
  color: #999;
  border-color: #444;
}
.games-view__pill.--quick:hover {
  background: #262626;
  color: #ddd;
  border-color: #666;
}
.games-view__pill.--quick.active {
  background: #629924;
  color: #fff;
  border-color: #629924;
}
.games-view__pill[data-icon]::before {
  font-family: "lichess";
  content: attr(data-icon);
  font-size: 0.9em;
  line-height: 1;
}
.games-view__pill.--more {
  color: #777;
  font-style: italic;
}
.games-view__pill.--more:hover {
  background: #262626;
  color: #bbb;
}
.games-view__pill.--more.active {
  background: #262626;
  color: #ccc;
  border-color: #555;
}
.games-view__quick-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-bottom: 10px;
  padding: 8px 14px;
  background: #151515;
  border: 1px solid #262626;
  border-radius: 6px;
}
.games-view__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.games-view__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px 3px 10px;
  background: #1e2d1e;
  color: #9c9;
  border: 1px solid #3a5a3a;
  border-radius: 12px;
  font-size: 0.76rem;
}
.games-view__chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  background: transparent;
  color: #9c9;
  border: none;
  border-radius: 50%;
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
}
.games-view__chip-remove:hover {
  background: #2e4a2e;
  color: #cfc;
}
.games-view__advanced-toggle {
  padding: 3px 10px;
  background: transparent;
  color: #888;
  border: 1px solid #333;
  border-radius: 4px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: color 0.1s, border-color 0.1s;
}
.games-view__advanced-toggle:hover {
  color: #ccc;
  border-color: #555;
}
.games-view__advanced-toggle.active {
  color: #9cf;
  border-color: #2a5a9a;
  background: #16233a;
}
.games-view__advanced-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
  padding: 14px;
  background: #151515;
  border: 1px solid #262626;
  border-radius: 6px;
}
.games-view__advanced-group-title {
  margin: 0 0 8px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.games-view__advanced-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 18px;
}
.games-view__advanced-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.games-view__advanced-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid #262626;
}
.games-view__advanced-apply {
  padding: 4px 14px;
  background: #1e3a1e;
  color: #6f6;
  border: 1px solid #3a7a3a;
  border-radius: 4px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.games-view__advanced-apply:hover {
  background: #274d27;
  color: #8f8;
}
.games-view__search {
  height: 26px;
  padding: 0 8px;
  background: #222;
  border: 1px solid #333;
  border-radius: 4px;
  color: #ccc;
  font-size: 0.8rem;
  outline: none;
  width: 130px;
}
.games-view__search:focus {
  border-color: #555;
}
.games-view__search::placeholder {
  color: #444;
}
.games-view__search::-webkit-search-cancel-button {
  display: none;
}
.games-view__search.--num {
  width: 70px;
}
.games-view__account-filter {
  position: relative;
  display: inline-flex;
  min-width: 0;
}
.games-view__account-trigger {
  height: 26px;
  max-width: 260px;
  padding: 0 24px 0 8px;
  background: #222;
  border: 1px solid #333;
  border-radius: 4px;
  color: #ccc;
  font-size: 0.8rem;
  line-height: 24px;
  outline: none;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  text-align: left;
}
.games-view__account-trigger::after {
  content: "▾";
  position: absolute;
  right: 8px;
  top: 0;
  color: #777;
  line-height: 24px;
}
.games-view__account-trigger:hover, .games-view__account-trigger.active {
  border-color: #555;
  background: #262626;
}
.games-view__account-trigger:focus {
  border-color: #555;
}
.games-view__account-backdrop {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: default;
}
.games-view__account-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 36;
  min-width: 230px;
  max-width: min(320px, 100vw - 24px);
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
  background: #181818;
  border: 1px solid #333;
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}
.games-view__account-option {
  width: 100%;
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: #aaa;
  font-size: 0.8rem;
  text-align: left;
  cursor: pointer;
}
.games-view__account-option:hover {
  background: #242424;
  color: #ddd;
}
.games-view__account-option.active {
  color: #8f8;
  background: #1e2d1e;
}
.games-view__account-check {
  width: 14px;
  flex: 0 0 14px;
  color: #8f8;
  font-size: 0.8rem;
  line-height: 1;
  text-align: center;
}
.games-view__account-menu-sep {
  height: 1px;
  margin: 4px;
  background: #303030;
}
.games-view__summary {
  font-size: 0.78rem;
  color: #555;
  white-space: nowrap;
}
.games-view__clear {
  padding: 3px 10px;
  background: transparent;
  color: #888;
  border: 1px solid #333;
  border-radius: 4px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: color 0.1s, border-color 0.1s;
}
.games-view__clear:hover {
  color: #ccc;
  border-color: #555;
}
.games-view__density-toggle {
  display: inline-flex;
  flex-shrink: 0;
  border: 1px solid #333;
  border-radius: 4px;
  overflow: hidden;
}
.games-view__density-btn {
  padding: 3px 9px;
  background: #222;
  color: #888;
  border: none;
  font-size: 0.85rem;
  line-height: 1.3;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.games-view__density-btn + .games-view__density-btn {
  border-left: 1px solid #333;
}
.games-view__density-btn:hover {
  background: #2a2a2a;
  color: #ccc;
}
.games-view__density-btn.active {
  background: #1e3a6e;
  color: #9cf;
}
.games-view__feed {
  border: 1px solid #282828;
  border-radius: 6px;
  overflow: hidden;
}
.games-view__table-wrap {
  overflow-x: auto;
}
.games-view__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.games-view__table thead tr {
  background: #1a1a1a;
  border-bottom: 1px solid #2a2a2a;
}
.games-view__table th {
  padding: 8px 10px;
  text-align: left;
  font-size: 0.68rem;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.games-view__table th:hover {
  color: #999;
}
.games-view__table--active {
  color: #aaa !important;
}
.games-view__th--active {
  color: #aaa !important;
}
.games-view__row {
  border-bottom: 1px solid #222;
  cursor: pointer;
  transition: background 0.08s;
}
.games-view__row td {
  padding: 8px 10px;
  vertical-align: middle;
}
.games-view__row:hover {
  background: #1e1e1e;
}
.games-view__row.active {
  background: #1a2a1a;
}
.games-view__row.selected {
  background: #1a2035;
  outline: 1px inset #3a5a9a;
}
.games-view__row.review-run-member td:first-child {
  box-shadow: inset 3px 0 0 var(--review-run-wave-color);
}
.games-view__review-all-btn {
  padding: 4px 12px;
  background: #1e3a6e;
  color: #7ab;
  border: 1px solid #2a5a9a;
  border-radius: 4px;
  font-size: 0.78rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s;
}
.games-view__review-all-btn:hover {
  background: #2a4a8e;
  color: #9cf;
}
.games-view__result {
  font-size: 0.65rem;
}
.games-view__result.--win {
  color: #4c8;
}
.games-view__result.--loss {
  color: #e44;
}
.games-view__result.--draw {
  color: #aa6;
}
.games-view__opponent {
  color: #ccc;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.games-view__rating-th {
  white-space: nowrap;
}
.games-view__rating {
  color: #666;
  font-size: 0.78rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.games-view__account-th {
  white-space: nowrap;
  text-align: right !important;
}
.games-view__account {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #666;
  font-size: 0.78rem;
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.games-view__date {
  color: #666;
  white-space: nowrap;
}
.games-view__tc {
  color: #888;
  white-space: nowrap;
}
.games-view__tc [data-icon]::before {
  font-family: "lichess";
  content: attr(data-icon);
  font-size: 0.9em;
}
.games-view__opening {
  color: #666;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.games-view__new-import {
  margin-left: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #8fd36b;
  letter-spacing: 0.04em;
  vertical-align: middle;
}
.games-view__link-cell {
  width: 32px;
  text-align: center;
  padding: 4px !important;
}
.games-view__review-th {
  white-space: nowrap;
}
.games-view__review-cell {
  white-space: nowrap;
  text-align: center;
  padding: 4px 8px !important;
}
.games-view__reviewed {
  color: #4c8;
  font-weight: 700;
  font-size: 0.9rem;
  margin-right: 2px;
  cursor: default;
}
.games-view__missed {
  color: #f84;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: default;
}
.games-view__accuracy {
  font-size: 0.75rem;
  color: #8c8;
  margin-left: 5px;
  font-variant-numeric: tabular-nums;
  cursor: default;
}
.games-view__review-error {
  padding: 2px 8px;
  background: #241616;
  color: #d77;
  border: 1px solid #5a2a2a;
  border-radius: 3px;
  font-size: 0.75rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s;
}
.games-view__review-error:hover {
  background: #321d1d;
  color: #faa;
}
.games-view__review-failed {
  display: inline-block;
  min-width: 8ch;
  color: #d77;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.games-view__review-failed-skip {
  display: inline-block;
  min-width: 8ch;
  padding: 2px 8px;
  background: #241616;
  color: #d77;
  border: 1px solid #5a2a2a;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  white-space: nowrap;
}
.games-view__review-failed-skip .--skip-label {
  display: none;
}
.games-view__review-failed-skip:hover, .games-view__review-failed-skip:focus-visible {
  background: #321d1d;
  color: #faa;
}
.games-view__review-failed-skip:hover .--failed-label, .games-view__review-failed-skip:focus-visible .--failed-label {
  display: none;
}
.games-view__review-failed-skip:hover .--skip-label, .games-view__review-failed-skip:focus-visible .--skip-label {
  display: inline;
}
.games-view__review-incomplete {
  display: inline-block;
  min-width: 10ch;
  padding: 2px 8px;
  background: #2a2318;
  color: #d0a85c;
  border: 1px solid #5a4a26;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  white-space: nowrap;
}
.games-view__review-incomplete .--resume-label {
  display: none;
}
.games-view__review-incomplete:hover, .games-view__review-incomplete:focus-visible {
  background: #3a2f1d;
  color: #e2b35c;
}
.games-view__review-incomplete:hover .--incomplete-label, .games-view__review-incomplete:focus-visible .--incomplete-label {
  display: none;
}
.games-view__review-incomplete:hover .--resume-label, .games-view__review-incomplete:focus-visible .--resume-label {
  display: inline;
}
.games-view__puzzles-th {
  white-space: nowrap;
}
.games-view__puzzles-cell {
  text-align: center;
  padding: 4px 8px !important;
}
.games-view__puzzle-count {
  font-size: 0.8rem;
  color: #88c;
  font-weight: 600;
  cursor: default;
}
.games-view__puzzle-none {
  color: #3a3a3a;
  font-size: 0.8rem;
  cursor: default;
}
.games-view__review-btn {
  padding: 2px 8px;
  font-size: 0.75rem;
  background: #1a1a1a;
  color: #888;
  border: 1px solid #333;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s;
}
.games-view__review-btn:hover {
  background: #222;
  color: #ccc;
  border-color: #555;
}
.games-view__review-split {
  display: inline-flex;
  border: 1px solid #333;
  border-radius: 3px;
  overflow: hidden;
}
.games-view__review-queue-btn {
  flex: 1;
  padding: 2px 7px;
  background: #1a1a1a;
  color: #888;
  border: none;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.games-view__review-queue-btn:hover {
  background: #222;
  color: #ccc;
}
.games-view__review-queue-btn.--top {
  border-right: 1px solid #333;
}
.games-view__empty {
  padding: 48px 0;
  text-align: center;
  color: #555;
}
.games-view__empty p {
  margin: 4px 0;
}
.games-view__empty-hint {
  font-size: 0.82rem;
  color: #444;
}

.grr {
  display: grid;
  grid-template-columns: var(---games-board-preview-size) 1fr 175px;
  column-gap: 20px;
  align-items: stretch;
  padding: 14px;
  min-height: 156px;
  background: #1c1c1c;
  border-bottom: 1px solid #2a2a2a;
  cursor: pointer;
  transition: background 0.1s, box-shadow 0.1s;
}
.grr:nth-child(even) {
  background: #202020;
}
.grr:hover {
  background: #262626;
}
.grr.selected {
  background: #1a2035;
  outline: 1px inset #3a5a9a;
}
.grr.open {
  background: rgba(56, 147, 232, 0.14);
  box-shadow: inset 3px 0 0 #3893e8;
}
body.games-board-preview-off .grr__thumb {
  display: none;
}
.grr__thumb {
  align-self: center;
  width: var(---games-board-preview-size);
  height: var(---games-board-preview-size);
  flex-shrink: 0;
  border: 2px solid transparent;
  border-radius: 5px;
  overflow: hidden;
  background: #141414;
}
.grr__thumb.--win {
  border-color: #4a8;
}
.grr__thumb.--loss {
  border-color: #f66;
}
.grr__thumb.--draw {
  border-color: #888;
}
.grr__thumb.--unknown {
  border-color: transparent;
}
.grr__thumb-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 100%;
  height: 100%;
}
.grr__thumb-sq {
  position: relative;
}
.grr__thumb-sq piece {
  position: absolute;
  inset: 6%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.grr__thumb-sq piece.pawn.white {
  background-image: var(---white-pawn);
}
.grr__thumb-sq piece.knight.white {
  background-image: var(---white-knight);
}
.grr__thumb-sq piece.bishop.white {
  background-image: var(---white-bishop);
}
.grr__thumb-sq piece.rook.white {
  background-image: var(---white-rook);
}
.grr__thumb-sq piece.queen.white {
  background-image: var(---white-queen);
}
.grr__thumb-sq piece.king.white {
  background-image: var(---white-king);
}
.grr__thumb-sq piece.pawn.black {
  background-image: var(---black-pawn);
}
.grr__thumb-sq piece.knight.black {
  background-image: var(---black-knight);
}
.grr__thumb-sq piece.bishop.black {
  background-image: var(---black-bishop);
}
.grr__thumb-sq piece.rook.black {
  background-image: var(---black-rook);
}
.grr__thumb-sq piece.queen.black {
  background-image: var(---black-queen);
}
.grr__thumb-sq piece.king.black {
  background-image: var(---black-king);
}
.grr__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
}
.grr__matchup {
  display: grid;
  grid-template-columns: max-content max-content minmax(0, max-content);
  align-items: center;
  column-gap: 10px;
  row-gap: 3px;
}
.grr__player {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.grr__player.--opponent {
  justify-self: start;
}
.grr__player.--account {
  justify-self: stretch;
  min-width: 0;
}
.grr__player-name {
  font-weight: 600;
  font-size: 1.02em;
  color: #ddd;
}
.grr__player.--account .grr__player-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.grr__player.--opponent .grr__player-name {
  white-space: nowrap;
}
.grr__player-rating {
  font-size: 0.78em;
  color: #888;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.grr__delta {
  font-size: 0.76em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.grr__delta.--gain {
  color: #4a8;
}
.grr__delta.--loss {
  color: #f66;
}
.grr__vs-pill {
  justify-self: center;
  padding: 1px 8px;
  border-radius: 10px;
  background: #262626;
  color: #888;
  font-size: 0.7em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.grr__accuracy {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-size: 0.78em;
}
.grr__accuracy.--opponent {
  justify-self: start;
}
.grr__accuracy.--account {
  justify-self: stretch;
}
.grr__accuracy-value {
  color: #4fa8e8;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.grr__accuracy-label {
  color: #888;
}
.grr__accuracy-divider {
  justify-self: center;
  width: 1px;
  height: 0.9em;
  background: #3a3a3a;
}
.grr__hairline {
  width: 100%;
  height: 1px;
  margin: 0;
  border: none;
  background: #2e2e2e;
}
.grr__opening {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.85em;
}
.grr__opening-icon {
  font-family: "lichess";
  align-self: center;
  color: #777;
  flex-shrink: 0;
}
.grr__opening-icon::before {
  content: attr(data-icon);
}
.grr__opening-name {
  font-weight: 600;
  color: #bbb;
  flex-shrink: 0;
}
.grr__opening-moves {
  color: #777;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.grr__tags {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  min-width: 0;
}
.grr__tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 0.72em;
  white-space: nowrap;
  background: #262626;
  color: #999;
  border: 1px solid #383838;
}
.grr__tag.--add-library {
  background: transparent;
  color: #888;
  border: 1px solid #333;
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
  transition: color 0.1s, border-color 0.1s;
}
.grr__tag.--add-library:hover:not(:disabled) {
  color: #ccc;
  border-color: #555;
}
.grr__tag.--add-library:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.grr__tag.--lfym {
  color: #e8a33d;
  border-color: #6d5525;
}
.grr__tag.--puzzles {
  color: #a9c98a;
  border-color: #3a5a2a;
}
.grr__tag.--manual {
  color: #c9a96a;
  border-color: #5a4a26;
}
.grr__tag.--notes {
  color: #999;
}
.grr__tag.--overflow {
  color: #666;
  background: transparent;
  border-color: transparent;
}
.grr__chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.grr__chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
  background: transparent;
  border: 1px solid #383838;
  color: #999;
}
.grr__chip.--library {
  cursor: pointer;
  font-weight: 500;
  transition: color 0.1s, border-color 0.1s;
}
.grr__chip.--library:hover:not(:disabled) {
  color: #ccc;
  border-color: #555;
}
.grr__chip.--library:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.grr__chip-icons {
  display: inline-flex;
  gap: 3px;
}
.grr__rail {
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: start;
  gap: 10px;
  padding-left: 20px;
  border-left: 1px solid #2a2a2a;
}
.grr__rail .grr__rail-meta--top {
  align-self: start;
}
.grr__rail .grr__review-group {
  align-self: center;
}
.grr__rail .grr__rail-meta--bottom {
  align-self: end;
}
.grr__icon {
  font-size: 0.8em;
  font-weight: 700;
  cursor: default;
}
.grr__icon.--missed-mate {
  color: #a855f7;
}
.grr__icon.--missed-tactic {
  color: #f84;
}
.grr__rail-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.grr__rail-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76em;
  color: #888;
  white-space: nowrap;
  text-decoration: none;
}
.grr__rail-meta-icon {
  display: inline-flex;
  justify-content: center;
  width: 14px;
  flex-shrink: 0;
  font-family: "lichess";
  line-height: 1;
}
.grr__rail-meta-icon::before {
  content: attr(data-icon);
}
.grr__rail-meta-icon.--bullet {
  color: #e2c422;
}
.grr__rail-meta-icon.--blitz {
  color: #f28030;
}
.grr__rail-meta-icon.--rapid {
  color: #7bb33a;
}
.grr__rail-meta-icon.--classical {
  color: #2fb3a3;
}
.grr__rail-meta-icon.--no-clock {
  color: #3893e8;
}
.grr__rail-meta-text {
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.grr__rail-ext-link {
  cursor: pointer;
}
.grr__rail-ext-link:hover .grr__rail-meta-icon {
  color: #3893e8;
}
.grr__review {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 0.78em;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  background: none;
  font-family: inherit;
}
.grr__review.--unreviewed {
  background: transparent;
  color: #55c26a;
  border: 1px solid #2e6b3c;
}
.grr__review.--unreviewed:hover {
  background: rgba(85, 194, 106, 0.1);
  border-color: #3da354;
}
.grr__review.--queued {
  color: #999;
  font-style: italic;
  font-weight: 500;
  cursor: default;
}
.grr__review.--running {
  position: relative;
  overflow: hidden;
  background: transparent;
  border: 1px solid #2e6b3c;
  color: #55c26a;
  min-width: 11ch;
  justify-content: center;
  cursor: default;
}
.grr__review.--running::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.5px;
  background: #2a2a2a;
}
.grr__review.--failed {
  align-items: center;
  gap: 4px;
  cursor: default;
  padding: 0;
  background: none;
  border: none;
}
.grr__review.--reviewed {
  padding: 0;
  gap: 0;
  overflow: hidden;
  border: none;
  border-radius: 7px;
  color: #dce5f8;
  transition: filter 0.15s;
}
.grr__review.--reviewed:hover {
  filter: brightness(1.12);
}
.grr__review.--stalled {
  background: rgba(224, 179, 92, 0.1);
  color: #e2b35c;
  border: 1px solid #5a4a26;
}
.grr__review.--stalled:hover {
  background: rgba(224, 179, 92, 0.18);
}
.grr__review.--incomplete {
  background: transparent;
  color: #d0a85c;
  border: 1px dashed #5a4a26;
}
.grr__review.--incomplete:hover {
  background: rgba(208, 168, 92, 0.1);
}
.grr__review-fill {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2.5px;
  background: #55c26a;
  transition: width 0.3s linear;
}
.grr__review-label {
  position: relative;
}
.grr__review-bolt {
  display: inline-flex;
  line-height: 1;
}
.grr__review-bolt.--breathing {
  animation: grr-review-bolt-breathe 1.4s ease-in-out infinite;
}
.grr__review-main {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: linear-gradient(180deg, #35446c, #283555);
  font-weight: 600;
}
.grr__review-mark {
  display: inline-flex;
  align-items: center;
}
.grr__review-mark svg {
  display: block;
  width: 15px;
  height: 15px;
}
.grr__review-icon-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  align-self: stretch;
  background: #1d2740;
  color: #8fa3cf;
  border-left: 1px solid rgba(0, 0, 0, 0.35);
}
.grr__review-pct {
  display: inline-block;
  width: 4ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.grr__review-num {
  display: inline-block;
  min-width: 2ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.grr__review-retry, .grr__review-skip {
  padding: 2px 8px;
  font-size: 0.85em;
  background: #241616;
  color: #d77;
  border: 1px solid #5a2a2a;
  border-radius: 3px;
  cursor: pointer;
}
.grr__review-retry:hover, .grr__review-skip:hover {
  background: #321d1d;
  color: #faa;
}
.grr__review-group {
  display: flex;
  align-items: center;
  gap: 5px;
}
.grr__secondary {
  display: flex;
  gap: 3px;
}
.grr__secondary-btn {
  padding: 2px 7px;
  font-size: 0.85em;
  line-height: 1;
  background: #1a1a1a;
  color: #888;
  border: 1px solid #333;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.grr__secondary-btn:hover {
  background: #242424;
  color: #ccc;
}
@media (max-width: 600px) {
  .grr {
    grid-template-columns: 1fr;
    row-gap: 8px;
  }
  .grr__thumb {
    display: none;
  }
  .grr__rail-ext-link {
    display: none;
  }
  .grr__rail {
    border-left: none;
    padding-left: 0;
    padding-top: 8px;
    border-top: 1px solid #2a2a2a;
  }
  .grr__matchup {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "opp-player" "opp-accuracy" "acct-player" "acct-accuracy";
    row-gap: 2px;
  }
  .grr__player.--opponent {
    grid-area: opp-player;
  }
  .grr__player.--account {
    grid-area: acct-player;
  }
  .grr__accuracy.--opponent {
    grid-area: opp-accuracy;
  }
  .grr__accuracy.--account {
    grid-area: acct-accuracy;
  }
  .grr__vs-pill, .grr__accuracy-divider {
    display: none;
  }
}
@container (max-width: 680px) {
  .grr {
    grid-template-columns: 1fr;
    row-gap: 8px;
  }
  .grr__thumb {
    display: none;
  }
  .grr__rail-ext-link {
    display: none;
  }
  .grr__rail {
    border-left: none;
    padding-left: 0;
    padding-top: 8px;
    border-top: 1px solid #2a2a2a;
  }
  .grr__matchup {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "opp-player" "opp-accuracy" "acct-player" "acct-accuracy";
    row-gap: 2px;
  }
  .grr__player.--opponent {
    grid-area: opp-player;
  }
  .grr__player.--account {
    grid-area: acct-player;
  }
  .grr__accuracy.--opponent {
    grid-area: opp-accuracy;
  }
  .grr__accuracy.--account {
    grid-area: acct-accuracy;
  }
  .grr__vs-pill, .grr__accuracy-divider {
    display: none;
  }
}

@keyframes grr-review-bolt-breathe {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion=full]) .grr__review-bolt.--breathing,
  html:not([data-motion=full]) .btn-review__bolt.--breathing {
    animation: none;
  }
}
#move-ctx-menu {
  position: fixed;
  z-index: 9999;
  background: #2a2a2a;
  border: 1px solid #444;
  border-radius: 4px;
  min-width: 180px;
  padding: 4px 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  display: none;
}
#move-ctx-menu.visible {
  display: block;
}
#move-ctx-menu p.title {
  margin: 0;
  padding: 6px 12px 4px;
  font-size: 0.85em;
  font-weight: bold;
  color: #aaa;
  border-bottom: 1px solid #3a3a3a;
}
#move-ctx-menu a {
  display: block;
  padding: 6px 12px;
  color: #ccc;
  cursor: pointer;
  font-size: 0.9em;
  text-decoration: none;
}
#move-ctx-menu a:hover {
  background: #383838;
  color: #fff;
}
#move-ctx-menu a.ctx-puzzle {
  border-top: 1px solid #3a3a3a;
}
#move-ctx-menu a.ctx-puzzle + .ctx-puzzle {
  border-top: none;
}

.puzzle-create-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  background: #2a2a2a;
  border: 1px solid #555;
  border-radius: 6px;
  padding: 8px 18px;
  color: #ddd;
  font-size: 0.9em;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.puzzle-page {
  padding: 24px 16px 24px 8px;
}

.puzzle-library__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 10px;
}
.puzzle-library__resume {
  background: rgba(68, 170, 153, 0.1);
  border: 1px solid rgba(68, 170, 153, 0.3);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.puzzle-library__resume-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.85rem;
  font-weight: 600;
  color: #4a9;
  margin-bottom: 8px;
}
.puzzle-library__resume-count {
  font-size: 0.78rem;
  font-weight: 400;
  color: #888;
}
.puzzle-library__resume-actions {
  display: flex;
  gap: 6px;
}
.puzzle-library__resume-btn {
  flex: 1;
  padding: 6px 12px;
  background: #4a9;
  color: #111;
  border: none;
  border-radius: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.puzzle-library__resume-btn:hover {
  background: #5cb;
}
.puzzle-library__resume-end {
  padding: 6px 10px;
  background: none;
  color: #888;
  border: 1px solid #444;
  border-radius: 4px;
  font-size: 0.78rem;
  cursor: pointer;
}
.puzzle-library__resume-end:hover {
  color: #ccc;
  border-color: #666;
}
.puzzle-library__card {
  background: #222;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 8px;
}
.puzzle-library__card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.puzzle-library__card-title {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0;
}
.puzzle-library__card-count {
  font-size: 0.78rem;
  color: #888;
}
.puzzle-library__card-desc {
  font-size: 0.78rem;
  color: #666;
  margin: 0;
  line-height: 1.3;
}
.puzzle-library__card-action {
  align-self: flex-start;
  margin-top: 2px;
  padding: 4px 12px;
  background: #333;
  color: #ccc;
  border: 1px solid #444;
  border-radius: 4px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.puzzle-library__card-action:hover:not(:disabled) {
  background: #4a9;
  color: #111;
  border-color: #4a9;
}
.puzzle-library__card-action:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.puzzle-library__section {
  background: #222;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.puzzle-library__section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.puzzle-library__section-header h3 {
  font-size: 0.88rem;
  font-weight: 600;
  margin: 0;
}
.puzzle-library__count {
  font-size: 0.82rem;
  color: #888;
  font-weight: 600;
}
.puzzle-library__action {
  padding: 5px 14px;
  background: #333;
  color: #ccc;
  border: 1px solid #444;
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.puzzle-library__action:hover:not(:disabled) {
  background: #4a9;
  color: #111;
  border-color: #4a9;
}
.puzzle-library__action:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.puzzle-list__header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.puzzle-list__back {
  font-size: 0.82rem;
  color: #888;
  text-decoration: none;
  cursor: pointer;
}
.puzzle-list__back:hover {
  color: #4a9;
}
.puzzle-list__title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  flex: 1;
}
.puzzle-list__count {
  font-size: 0.78rem;
  color: #888;
}
.puzzle-list__filters {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
  font-size: 0.82rem;
}
.puzzle-list__filter-label {
  color: #888;
  font-size: 0.78rem;
  font-weight: 500;
}
.puzzle-list__filter-input {
  width: 60px;
  padding: 3px 6px;
  background: #1a1a1a;
  color: #ccc;
  border: 1px solid #444;
  border-radius: 3px;
  font-size: 0.78rem;
}
.puzzle-list__filter-input::placeholder {
  color: #555;
}
.puzzle-list__filter-sep {
  color: #555;
  font-size: 0.78rem;
}
.puzzle-list__filter-select {
  padding: 3px 6px;
  background: #1a1a1a;
  color: #ccc;
  border: 1px solid #444;
  border-radius: 3px;
  font-size: 0.78rem;
  max-width: 140px;
}
.puzzle-list__filter-count {
  color: #888;
  font-size: 0.75rem;
  margin-left: auto;
}
.puzzle-list__scroll {
  overflow-y: auto;
  max-height: calc(100vh - 14rem);
  border: 1px solid #333;
  border-radius: 4px;
  background: #1a1a1a;
}
.puzzle-list__row {
  display: grid;
  grid-template-columns: 1fr 50px 1fr 46px;
  gap: 4px 8px;
  padding: 5px 8px;
  font-size: 0.78rem;
  cursor: pointer;
  border-bottom: 1px solid #262626;
  transition: background 0.1s;
}
.puzzle-list__row:hover {
  background: #252525;
}
.puzzle-list__row--header {
  background: #222;
  color: #888;
  font-weight: 600;
  cursor: default;
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: 1px solid #333;
}
.puzzle-list__row--header:hover {
  background: #222;
}
.puzzle-list__row-id {
  color: #4a9;
  font-family: monospace;
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.puzzle-list__row-rating {
  color: #ccc;
  text-align: right;
}
.puzzle-list__row-themes {
  color: #888;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.puzzle-list__row-moves {
  color: #666;
  text-align: right;
}
.puzzle-list__empty {
  padding: 16px;
  color: #666;
  font-size: 0.85rem;
  text-align: center;
}
.puzzle-list__loading {
  color: #888;
  font-style: italic;
  padding: 12px;
}
.puzzle-list__load-more {
  width: 100%;
  padding: 6px;
  margin-top: 4px;
  font-size: 0.78rem;
  background: #333;
  color: #ccc;
  border: 1px solid #444;
  border-radius: 4px;
  cursor: pointer;
}
.puzzle-list__load-more:hover {
  background: #4a9;
  color: #111;
  border-color: #4a9;
}
.puzzle-list__load-shards {
  width: 100%;
  margin-top: 6px;
  font-size: 0.78rem;
}

.puzzle-session__rating {
  margin-bottom: 10px;
}
.puzzle-session__label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: #888;
  margin-bottom: 4px;
}
.puzzle-session__range-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.puzzle-session__range-label {
  font-size: 0.72rem;
  color: #666;
  width: 26px;
  flex-shrink: 0;
}
.puzzle-session__range {
  flex: 1;
  cursor: pointer;
}
.puzzle-session__range-val {
  font-size: 0.78rem;
  color: #ccc;
  font-family: monospace;
  width: 52px;
  text-align: right;
  flex-shrink: 0;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 3px;
  padding: 2px 4px;
  -moz-appearance: textfield;
}
.puzzle-session__range-val::-webkit-inner-spin-button, .puzzle-session__range-val::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.puzzle-session__range-val:focus {
  outline: 1px solid #4a9;
  border-color: #4a9;
}
.puzzle-session__themes {
  overflow-y: auto;
  max-height: calc(100vh - 20rem);
  border: 1px solid #333;
  border-radius: 4px;
  background: #1a1a1a;
  margin-bottom: 10px;
}
.puzzle-session__category:not(:first-child) {
  border-top: 1px solid #333;
}
.puzzle-session__category-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #666;
  padding: 6px 10px 2px;
  position: sticky;
  top: 0;
  background: #1a1a1a;
  z-index: 1;
}
.puzzle-session__category-label--clickable {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color 0.15s;
  user-select: none;
}
.puzzle-session__category-label--clickable:hover {
  color: #aaa;
}
.puzzle-session__category-label--clickable.active {
  color: #4a9;
}
.puzzle-session__category-label--clickable.partial {
  color: #888;
}
.puzzle-session__theme-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.1s;
  user-select: none;
}
.puzzle-session__theme-row:hover {
  background: #252525;
}
.puzzle-session__theme-row.active {
  background: rgba(68, 170, 153, 0.15);
  color: #fff;
}
.puzzle-session__theme-row.active:hover {
  background: rgba(68, 170, 153, 0.22);
}
.puzzle-session__checkbox {
  font-size: 0.95rem;
  color: #666;
  line-height: 1;
  flex-shrink: 0;
}
.active > .puzzle-session__checkbox {
  color: #4a9;
}
.puzzle-session__theme-name {
  color: #ccc;
}
.active > .puzzle-session__theme-name {
  color: #fff;
}
.puzzle-session__tabs {
  display: flex;
  gap: 0;
  margin-bottom: 8px;
  border: 1px solid #333;
  border-radius: 4px;
  overflow: hidden;
}
.puzzle-session__tab {
  flex: 1;
  padding: 6px 8px;
  background: #1a1a1a;
  color: #888;
  border: none;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.puzzle-session__tab:not(:last-child) {
  border-right: 1px solid #333;
}
.puzzle-session__tab:hover {
  background: #252525;
  color: #ccc;
}
.puzzle-session__tab.active {
  background: #333;
  color: #fff;
}
.puzzle-session__search {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 6px 8px;
  background: #1a1a1a;
  border-bottom: 1px solid #333;
}
.puzzle-session__search-input {
  width: 100%;
  padding: 5px 8px;
  background: #222;
  color: #ccc;
  border: 1px solid #444;
  border-radius: 3px;
  font-size: 0.82rem;
}
.puzzle-session__search-input::placeholder {
  color: #555;
}
.puzzle-session__search-input:focus {
  outline: 1px solid #4a9;
  border-color: #4a9;
}
.puzzle-session__start-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #222;
  border: 1px solid #333;
  border-radius: 6px;
  margin-bottom: 4px;
}
.puzzle-session__start-bar .puzzle-session__selection-hint {
  flex: 1;
  font-size: 0.78rem;
  color: #888;
}
.puzzle-session__start-bar .puzzle-session__start {
  flex-shrink: 0;
  padding: 6px 14px;
  font-size: 0.82rem;
}
.puzzle-session__error {
  background: rgba(224, 85, 85, 0.15);
  border: 1px solid rgba(224, 85, 85, 0.3);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 0.82rem;
  color: #e05555;
  margin-bottom: 6px;
}
.puzzle-session__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.puzzle-session__selection-hint {
  font-size: 0.78rem;
  color: #888;
  text-align: center;
}
.puzzle-session__start {
  padding: 8px 16px;
  background: #4a9;
  color: #111;
  border: none;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.puzzle-session__start:hover:not(:disabled) {
  background: #5cb;
}
.puzzle-session__start:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.puzzle__session-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
}

.puzzle__side {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-height: 0;
  overflow: hidden;
  background: #1a1a1a;
  position: relative;
}
.puzzle__side .analyse__moves {
  flex: 2 1 0;
  overflow-y: auto;
}
.puzzle__side .puzzle__feedback {
  flex: 1 0 auto;
  overflow-y: auto;
}

.session-info {
  background: #222;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 10px 12px;
}
.session-info__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.session-info__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #4a9;
}
.session-info__actions {
  display: flex;
  gap: 6px;
}
.session-info__retry {
  background: none;
  border: 1px solid #e8a040;
  border-radius: 3px;
  color: #e8a040;
  font-size: 0.72rem;
  padding: 2px 8px;
  cursor: pointer;
}
.session-info__retry:hover {
  background: #e8a040;
  color: #111;
}
.session-info__end {
  background: none;
  border: 1px solid #444;
  border-radius: 3px;
  color: #888;
  font-size: 0.72rem;
  padding: 2px 8px;
  cursor: pointer;
}
.session-info__end:hover {
  color: #ccc;
  border-color: #666;
}
.session-info__themes {
  font-size: 0.82rem;
  color: #ccc;
  line-height: 1.4;
  margin-bottom: 4px;
}
.session-info__rating {
  font-size: 0.78rem;
  color: #888;
  margin-bottom: 8px;
}
.session-info__stats {
  display: flex;
  gap: 10px;
  font-size: 0.78rem;
}
.session-info__stat {
  color: #888;
}
.session-info__stat--clean {
  color: #4a9;
  font-weight: 600;
}
.session-info__stat--assisted {
  color: #e8a040;
  font-weight: 600;
}
.session-info__stat--failed {
  color: #e05555;
  font-weight: 600;
}
.session-info__auto-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 0.78rem;
  color: #888;
  user-select: none;
}

.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}
.settings-toggle-row__label {
  flex: 1 1 auto;
  font-size: 0.85rem;
  color: #ccc;
}

.settings-toggle {
  flex-shrink: 0;
  position: relative;
  width: 36px;
  height: 20px;
}
.settings-toggle input[type=checkbox] {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.settings-toggle .settings-toggle__track {
  display: block;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: #444;
  cursor: pointer;
  transition: background 0.2s;
  position: relative;
}
.settings-toggle .settings-toggle__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ccc;
  transition: transform 0.2s, background 0.2s;
}
.settings-toggle input[type=checkbox]:checked + .settings-toggle__track {
  background: #4a9;
}
.settings-toggle input[type=checkbox]:checked + .settings-toggle__track::after {
  transform: translateX(16px);
  background: #fff;
}
.settings-toggle input[type=checkbox]:disabled + .settings-toggle__track {
  opacity: 0.4;
  cursor: not-allowed;
}

.review-error-modal__backdrop {
  position: fixed;
  inset: 0;
  z-index: 209;
  background: rgba(0, 0, 0, 0.68);
}
.review-error-modal__card {
  position: fixed;
  z-index: 210;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(620px, 94vw);
  max-height: 88vh;
  overflow-y: auto;
  background: #191b1f;
  border: 1px solid #434a54;
  border-radius: 8px;
  box-shadow: 0 10px 42px rgba(0, 0, 0, 0.72);
  color: #e8edf2;
}
.review-error-modal__header, .review-error-modal__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
}
.review-error-modal__header {
  border-bottom: 1px solid #303741;
}
.review-error-modal__header h2 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 650;
}
.review-error-modal__subtitle {
  margin: 4px 0 0;
  color: #a8b1bc;
  font-size: 0.84rem;
}
.review-error-modal__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 22px;
}
.review-error-modal__summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.review-error-modal__summary > div {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #303741;
  background: #20242a;
  border-radius: 6px;
}
.review-error-modal__summary span {
  display: block;
  color: #95a0ad;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.review-error-modal__summary strong,
.review-error-modal__summary code {
  display: block;
  color: #edf2f7;
  font-size: 0.9rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.review-error-modal__warning {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid #d09a36;
  background: rgba(208, 154, 54, 0.12);
  color: #f1d7a7;
  line-height: 1.45;
  font-size: 0.86rem;
}
.review-error-modal__label {
  color: #d9e1e8;
  font-weight: 650;
  font-size: 0.9rem;
}
.review-error-modal__memo {
  width: 100%;
  resize: vertical;
  min-height: 110px;
  padding: 10px 12px;
  background: #101215;
  color: #f4f7fa;
  border: 1px solid #414955;
  border-radius: 6px;
  font: inherit;
  line-height: 1.45;
}
.review-error-modal__memo:focus {
  outline: 2px solid rgba(124, 181, 236, 0.5);
  outline-offset: 1px;
  border-color: #7cb5ec;
}
.review-error-modal__error, .review-error-modal__success {
  margin: 0;
  padding: 9px 10px;
  border-radius: 6px;
  font-size: 0.86rem;
}
.review-error-modal__error {
  color: #ffd8d8;
  background: rgba(185, 55, 55, 0.2);
  border: 1px solid rgba(230, 94, 94, 0.4);
}
.review-error-modal__success {
  color: #c7f1d5;
  background: rgba(53, 128, 78, 0.22);
  border: 1px solid rgba(96, 176, 116, 0.4);
}
.review-error-modal__upload-progress {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px;
  border: 1px solid #303741;
  border-radius: 6px;
  background: #111418;
}
.review-error-modal__upload-summary, .review-error-modal__upload-row, .review-error-modal__upload-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.review-error-modal__upload-title, .review-error-modal__upload-name {
  color: #edf2f7;
  font-weight: 650;
}
.review-error-modal__upload-count, .review-error-modal__upload-state {
  color: #b8dfc4;
}
.review-error-modal__upload-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.review-error-modal__upload-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid #303741;
  border-radius: 6px;
  background: #171b20;
}
.review-error-modal__upload-item--failed .review-error-modal__upload-state {
  color: #ffd8d8;
}
.review-error-modal__upload-meta {
  color: #9aa5b1;
  font-size: 0.8rem;
}
.review-error-modal__upload-bar {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #303741;
}
.review-error-modal__upload-bar span {
  display: block;
  width: var(--upload-progress, 0%);
  height: 100%;
  background: #7cb5ec;
}
.review-error-modal__actions {
  border-top: 1px solid #303741;
  justify-content: flex-end;
}
.review-error-modal__close, .review-error-modal__secondary, .review-error-modal__primary {
  border-radius: 6px;
  padding: 8px 12px;
  font: inherit;
  cursor: pointer;
}
.review-error-modal__close, .review-error-modal__secondary {
  border: 1px solid #444d59;
  background: #242932;
  color: #d7dee7;
}
.review-error-modal__primary {
  border: 1px solid #6a933f;
  background: #5d8534;
  color: #f8fff2;
  font-weight: 650;
}
.review-error-modal button:disabled,
.review-error-modal textarea:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .review-error-modal__card {
    width: 96vw;
    max-height: 92vh;
  }
  .review-error-modal__header, .review-error-modal__actions {
    align-items: stretch;
    flex-direction: column;
  }
  .review-error-modal__summary {
    grid-template-columns: 1fr;
  }
}
.report-issue-modal__backdrop {
  position: fixed;
  inset: 0;
  z-index: 209;
  background: rgba(0, 0, 0, 0.68);
}
.report-issue-modal__card {
  position: fixed;
  z-index: 210;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  width: min(720px, 96vw);
  max-height: 92vh;
  overflow: hidden;
  background: #191b1f;
  border: 1px solid #434a54;
  border-radius: 8px;
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.72);
  color: #e8edf2;
}
.report-issue-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  border-bottom: 1px solid #303741;
}
.report-issue-modal__header h2 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 650;
}
.report-issue-modal__route {
  margin: 5px 0 0;
  color: #a8b1bc;
  font-size: 0.84rem;
  overflow-wrap: anywhere;
}
.report-issue-modal__close {
  flex: 0 0 auto;
  min-width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #98a2ae;
  cursor: pointer;
  font: inherit;
  font-size: 1.2rem;
  line-height: 1;
}
.report-issue-modal__close:hover {
  background: #242a31;
  border-color: #3c4652;
  color: #fff;
}
.report-issue-modal__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 22px 20px;
}
.report-issue-modal__preview, .report-issue-modal__done, .report-issue-modal__submitted {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.report-issue-modal__copy-status, .report-issue-modal__status {
  margin: 0;
  color: #b8dfc4;
  font-size: 0.9rem;
}
.report-issue-modal__error {
  margin: 0;
  color: #ffd8d8;
}
.report-issue-modal__issue-id {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid #303741;
  border-radius: 6px;
  background: #111418;
}
.report-issue-modal__issue-id span {
  color: #cfd6df;
  font-weight: 650;
  font-size: 0.84rem;
}
.report-issue-modal__issue-id code {
  color: #f1f7ff;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}
.report-issue-modal__copy-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.report-issue-modal__copy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.report-issue-modal__upload-progress {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px;
  border: 1px solid #303741;
  border-radius: 7px;
  background: #111418;
}
.report-issue-modal__upload-summary, .report-issue-modal__upload-row, .report-issue-modal__upload-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.report-issue-modal__upload-title {
  color: #edf3fa;
  font-size: 0.9rem;
  font-weight: 650;
}
.report-issue-modal__upload-count {
  color: #b8dfc4;
  font-size: 0.84rem;
  white-space: nowrap;
}
.report-issue-modal__upload-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.report-issue-modal__upload-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 9px;
  border: 1px solid #303741;
  border-radius: 6px;
  background: #161b21;
}
.report-issue-modal__upload-name {
  min-width: 0;
  overflow: hidden;
  color: #e1e8f0;
  font-size: 0.86rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.report-issue-modal__upload-state {
  flex: 0 0 auto;
  color: #c2ccd7;
  font-size: 0.82rem;
  white-space: nowrap;
}
.report-issue-modal__upload-item--uploaded .report-issue-modal__upload-state {
  color: #b8dfc4;
}
.report-issue-modal__upload-item--failed .report-issue-modal__upload-state {
  color: #ffd8d8;
}
.report-issue-modal__upload-meta {
  color: #95a2af;
  font-size: 0.78rem;
}
.report-issue-modal__upload-meta span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.report-issue-modal__upload-meta span:last-child {
  flex: 0 0 auto;
}
.report-issue-modal__upload-bar {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #252d36;
}
.report-issue-modal__upload-bar span {
  display: block;
  width: var(--upload-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: #7cb7ff;
  transition: width 160ms ease;
}
.report-issue-modal__upload-item--uploaded .report-issue-modal__upload-bar span {
  background: #83d49b;
}
.report-issue-modal__upload-item--failed .report-issue-modal__upload-bar span {
  background: #ff8d8d;
}

.report-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.report-form__issue-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
}
.report-form__issue-id, .report-form__draft-state {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #303741;
  border-radius: 6px;
  background: #111418;
}
.report-form__issue-id {
  flex-wrap: wrap;
}
.report-form__issue-id code {
  color: #f1f7ff;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}
.report-form__issue-label, .report-form__draft-label, .report-form__label {
  color: #e1e6ec;
  font-weight: 650;
  font-size: 0.9rem;
}
.report-form__draft-state {
  justify-content: flex-end;
  color: #aab5c1;
  white-space: nowrap;
}
.report-form__draft-value {
  color: #b8dfc4;
  font-size: 0.84rem;
}
.report-form__copy-message {
  color: #a9d1ff;
  font-size: 0.84rem;
}
.report-form__field, .report-form__screenshots {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.report-form__field .admin-token-input, .report-form__textarea, .report-form__select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}
.report-form__textarea {
  resize: vertical;
  line-height: 1.45;
}
.report-form__hint, .report-form__muted {
  margin: 0;
  color: #9aa5b1;
  font-size: 0.82rem;
  line-height: 1.35;
}
.report-form__section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.report-form__section-header > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.report-form__dropzone {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px;
  border: 1px dashed #4a5664;
  border-radius: 7px;
  background: #12161b;
  cursor: pointer;
}
.report-form__dropzone:hover {
  border-color: #66809b;
  background: #151b22;
}
.report-form__dropzone-title {
  color: #edf3fa;
  font-weight: 650;
}
.report-form__dropzone-hint {
  color: #98a4b0;
  font-size: 0.84rem;
  line-height: 1.35;
}
.report-form__file-input {
  margin-top: 6px;
  max-width: 100%;
  color: #c9d3de;
}
.report-form__attachment-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #d9e2ec;
  font-size: 0.85rem;
}
.report-form__attachment-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid #303741;
  border-radius: 6px;
  background: #12161b;
}
.report-form__attachment-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.report-form__attachment-meta {
  flex: 0 0 auto;
  color: #9aa5b1;
}
.report-form__error {
  margin: 0;
  color: #ffd8d8;
}
.report-form__link-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #a9d1ff;
  cursor: pointer;
  font: inherit;
  font-size: 0.84rem;
}
.report-form__link-button:hover {
  color: #d2e8ff;
  text-decoration: underline;
}
.report-form__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 4px;
}
.report-form__discard {
  margin-right: auto;
}

@media (max-width: 640px) {
  .report-issue-modal__card {
    width: 96vw;
    max-height: 94vh;
  }
  .report-issue-modal__header, .report-issue-modal__body {
    padding-left: 16px;
    padding-right: 16px;
  }
  .report-issue-modal__upload-summary, .report-issue-modal__upload-row, .report-issue-modal__upload-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
  .report-issue-modal__upload-count, .report-issue-modal__upload-state, .report-issue-modal__upload-meta span:last-child {
    white-space: normal;
  }
  .report-form__issue-panel {
    grid-template-columns: 1fr;
  }
  .report-form__draft-state {
    justify-content: flex-start;
    white-space: normal;
  }
  .report-form__actions {
    align-items: stretch;
  }
  .report-form__actions .admin-btn, .report-form__discard {
    width: 100%;
    margin-right: 0;
  }
  .report-form__attachment-list li {
    flex-direction: column;
    gap: 2px;
  }
}
.detection-modal__tone-segment {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.detection-modal__tone-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid #3a3a3a;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  color: #bbb;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.detection-modal__tone-option:hover {
  border-color: #666;
  color: #ddd;
}
.detection-modal__tone-option.is-active {
  border-color: #e06c4e;
  background: rgba(224, 108, 78, 0.14);
  color: #f2d2c8;
}
.detection-modal__tone-option--standard .detection-modal__tone-label {
  color: #ccc;
}
.detection-modal__tone-option--harsh .detection-modal__tone-label {
  color: #f0b36c;
}
.detection-modal__tone-option--brutal .detection-modal__tone-label {
  color: #ff9a7a;
}
.detection-modal__tone-option--unhinged .detection-modal__tone-label {
  color: #ff8f8f;
}
.detection-modal__tone-option--standard.is-active {
  border-color: #888;
  background: rgba(255, 255, 255, 0.08);
}
.detection-modal__tone-option--harsh.is-active {
  border-color: #e6a15c;
  background: rgba(230, 161, 92, 0.14);
}
.detection-modal__tone-option--brutal.is-active {
  border-color: #e06c4e;
  background: rgba(224, 108, 78, 0.14);
}
.detection-modal__tone-option--unhinged.is-active {
  border-color: #ff8f8f;
  background: rgba(139, 26, 26, 0.22);
}

.detection-modal__tone-label {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
}

.detection-modal__tone-desc {
  font-size: 0.68rem;
  line-height: 1.25;
  color: #888;
}

.toggle-switch {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: #444;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}
.toggle-switch__knob {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ccc;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.2s, background 0.2s;
}
.toggle-switch--on {
  background: #4a9;
}
.toggle-switch--on .toggle-switch__knob {
  transform: translateX(16px);
  background: #fff;
}

.session-history {
  background: #222;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 10px 12px;
}
.session-history__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #666;
  margin-bottom: 8px;
}
.session-history__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 22px);
  gap: 4px;
}
.session-history__cell {
  width: 22px;
  height: 22px;
  border-radius: 3px;
  background: #333;
  border: 1px solid #444;
  transition: background 0.2s;
}
.session-history__cell--clean {
  background: #2d8a5e;
  border-color: #3a9;
}
.session-history__cell--assisted {
  background: #8a7a2d;
  border-color: #bb4;
}
.session-history__cell--failed {
  background: #a03030;
  border-color: #c44;
}
.session-history__cell--active {
  background: #8a7a2d;
  border-color: #bb4;
  animation: pulse-active 1.5s ease-in-out infinite;
}
.session-history__cell--current {
  outline: 2px solid #fff;
  outline-offset: 1px;
}
.session-history__continue {
  margin-top: 8px;
  width: 100%;
  padding: 6px 12px;
  background: #4a9;
  color: #111;
  border: none;
  border-radius: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.session-history__continue:hover {
  background: #5cb;
}

@keyframes pulse-active {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}
.puzzle {
  display: grid;
  grid-template-columns: min((100vw - 32px - 240px) * var(---board-scale), (100vh - 5rem) * var(---board-scale)) minmax(240px, 380px);
  gap: 0 16px;
  align-items: start;
}
.puzzle--with-session {
  grid-template-columns: minmax(280px, 320px) min((100vw - 32px - 280px - 280px) * var(---board-scale), (100vh - 5rem) * var(---board-scale)) minmax(240px, 340px);
}
.puzzle--library {
  grid-template-columns: minmax(280px, 320px) min((100vw - 32px - 320px) * var(---board-scale), (100vh - 5rem) * var(---board-scale));
}
.puzzle--library-preview {
  grid-template-columns: minmax(280px, 320px) min((100vw - 32px - 320px - 280px) * var(---board-scale), (100vh - 5rem) * var(---board-scale)) minmax(240px, 320px);
}
.puzzle__board {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: visible;
}
.puzzle__board-inner {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  overflow: visible;
  flex-shrink: 0;
}
.puzzle__board-inner .cg-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.puzzle__board-inner .cg-wrap cg-container {
  overflow: visible !important;
}
.puzzle__side {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  align-self: stretch;
  overflow: hidden;
  max-height: calc(100vh - 5rem);
}
.puzzle__side-top {
  display: flex;
  flex-direction: column;
  flex: 1 1 50%;
  min-height: 0;
  border-bottom: 1px solid #333;
}
.puzzle__side-bottom {
  display: flex;
  flex-direction: column;
  flex: 1 1 50%;
  min-height: 0;
  overflow-y: auto;
  gap: 8px;
  padding-top: 8px;
}

.puzzle-round__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.puzzle-round__back {
  font-size: 0.82rem;
  color: #888;
  text-decoration: none;
}
.puzzle-round__back:hover {
  color: #4a9;
}
.puzzle-round__title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}
.puzzle-round__info {
  font-size: 0.85rem;
  border-collapse: collapse;
  width: 100%;
}
.puzzle-round__info td {
  padding: 3px 8px 3px 0;
  vertical-align: top;
}
.puzzle-round__label {
  color: #888;
  white-space: nowrap;
  font-weight: 500;
  width: 1%;
}
.puzzle-round__fen {
  font-family: monospace;
  font-size: 0.78rem;
  word-break: break-all;
  color: #aaa;
}
.puzzle-round__loading {
  color: #888;
  font-style: italic;
}
.puzzle-round__error {
  color: #e05555;
  font-weight: 500;
  margin-bottom: 8px;
}

.puzzle-moves {
  background: #222;
  border: 1px solid #333;
  border-radius: 0 0 6px 6px;
  padding: 8px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 4px;
  align-items: baseline;
  min-height: 32px;
  font-size: 0.85rem;
  flex: 1;
  overflow-y: auto;
  align-content: flex-start;
}
.puzzle-moves__empty {
  color: #666;
  font-style: italic;
  font-size: 0.82rem;
}
.puzzle-moves__num {
  color: #666;
  font-size: 0.78rem;
  font-weight: 600;
  margin-right: 1px;
}
.puzzle-moves__move {
  padding: 1px 4px;
  border-radius: 3px;
  cursor: default;
}
.puzzle-moves__move--opponent {
  color: #aaa;
}
.puzzle-moves__move--user {
  color: #fff;
  font-weight: 600;
}
.puzzle-moves__move--current {
  background: rgba(68, 170, 153, 0.25);
}
.puzzle-moves__move--future {
  color: #555;
}

.puzzle-engine {
  background: #1e2228;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 8px 10px;
}
.puzzle-engine__header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.puzzle-engine__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6ba3d6;
}
.puzzle-engine__score {
  font-size: 1rem;
  font-weight: 700;
  font-family: monospace;
  color: #ccc;
}
.puzzle-engine__score.positive {
  color: #4a9;
}
.puzzle-engine__score.negative {
  color: #e05555;
}
.puzzle-engine__depth {
  font-size: 0.72rem;
  color: #555;
  margin-left: auto;
}
.puzzle-engine__toggle {
  margin-left: auto;
  background: #333;
  color: #ccc;
  border: 1px solid #444;
  border-radius: 3px;
  padding: 2px 10px;
  font-size: 0.72rem;
  cursor: pointer;
}
.puzzle-engine__toggle:hover {
  background: #4a9;
  color: #111;
  border-color: #4a9;
}
.puzzle-engine__hint {
  margin-left: auto;
  font-size: 0.72rem;
  color: #555;
  font-style: italic;
}
.puzzle-engine__close {
  background: none;
  border: none;
  color: #666;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
}
.puzzle-engine__close:hover {
  color: #ccc;
}
.puzzle-engine__pv {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 4px;
  padding: 4px 0;
  font-size: 0.82rem;
}
.puzzle-engine__pv-move {
  color: #ccc;
  padding: 1px 3px;
  border-radius: 2px;
}
.puzzle-engine__pv-move:nth-child(odd) {
  color: #fff;
}
.puzzle-engine__pv-move:nth-child(even) {
  color: #999;
}
.puzzle-engine__pv-loading {
  color: #666;
  font-style: italic;
  font-size: 0.78rem;
}
.puzzle-engine--off {
  opacity: 0.7;
}
.puzzle-engine--on {
  border-color: rgba(107, 163, 214, 0.3137254902);
  background: #1e2228;
}

.puzzle-info {
  background: #222;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 6px 10px;
}
.puzzle-info__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.puzzle-info__summary:hover {
  color: #fff;
}
.puzzle-info__rating {
  font-size: 0.88rem;
  font-weight: 600;
  color: #ccc;
}
.puzzle-info__expand {
  margin-left: auto;
  font-size: 0.65rem;
  color: #666;
}
.puzzle-info .puzzle-round__info {
  margin-top: 8px;
}

.puzzle__analyse {
  transition: background 0.15s, color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.puzzle__analyse.active {
  background: #4a9 !important;
  color: #111 !important;
  border-color: #4a9 !important;
}
.puzzle__analyse svg {
  display: block;
  color: inherit;
}

.puzzle-ceval {
  border-bottom: 1px solid #333;
}

.puzzle__feedback {
  background: #222;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 12px 16px;
}
.puzzle__feedback__player {
  display: flex;
  align-items: center;
  gap: 10px;
}
.puzzle__feedback__icon {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
}
.puzzle__feedback__icon--turn {
  color: #888;
}
.puzzle__feedback__icon--success {
  color: #22c55e;
  font-size: 1.8rem;
}
.puzzle__feedback__icon--fail {
  color: #ef4444;
  font-size: 1.8rem;
}
.puzzle__feedback__instruction {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.puzzle__feedback__instruction strong {
  font-size: 0.95rem;
}
.puzzle__feedback__instruction em {
  font-size: 0.82rem;
  color: #999;
  font-style: normal;
}
.puzzle__feedback__result {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.puzzle__feedback__message {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.puzzle__feedback__message strong {
  font-size: 1rem;
}
.puzzle__feedback__message em {
  font-size: 0.82rem;
  color: #999;
  font-style: normal;
}
.puzzle__feedback__actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.puzzle__feedback__nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #333;
}
.puzzle__feedback__revealed {
  margin-top: 8px;
  font-size: 0.85rem;
  color: #eab308;
}
.puzzle__feedback__revealed em {
  font-style: normal;
}
.puzzle__feedback.good {
  border-color: rgba(34, 197, 94, 0.2509803922);
  background: rgba(34, 197, 94, 0.062745098);
}
.puzzle__feedback.fail {
  border-color: rgba(239, 68, 68, 0.1882352941);
  background: rgba(239, 68, 68, 0.062745098);
}
.puzzle__feedback.solved {
  border-color: rgba(34, 197, 94, 0.1882352941);
}
.puzzle__feedback.failed {
  border-color: rgba(239, 68, 68, 0.1882352941);
}

.puzzle__hint,
.puzzle__reveal,
.puzzle__skip,
.puzzle__engine-lines,
.puzzle__engine-arrows,
.puzzle__analyse {
  padding: 5px 12px;
  background: #333;
  color: #ccc;
  border: 1px solid #444;
  border-radius: 4px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.15s;
}
.puzzle__hint:hover:not(:disabled),
.puzzle__reveal:hover:not(:disabled),
.puzzle__skip:hover:not(:disabled),
.puzzle__engine-lines:hover:not(:disabled),
.puzzle__engine-arrows:hover:not(:disabled),
.puzzle__analyse:hover:not(:disabled) {
  background: #444;
}
.puzzle__hint:disabled,
.puzzle__reveal:disabled,
.puzzle__skip:disabled,
.puzzle__engine-lines:disabled,
.puzzle__engine-arrows:disabled,
.puzzle__analyse:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.puzzle__next,
.puzzle__retry {
  padding: 6px 16px;
  background: #4a9;
  color: #111;
  border: 1px solid #4a9;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.puzzle__next:hover,
.puzzle__retry:hover {
  background: #5cb;
}

.puzzle__retry {
  background: #333;
  color: #ccc;
  border-color: #444;
  font-weight: 400;
}
.puzzle__retry:hover {
  background: #444;
}

.puzzle__back-link {
  font-size: 0.82rem;
  color: #888;
  text-decoration: none;
  margin-left: auto;
}
.puzzle__back-link:hover {
  color: #4a9;
}

.puzzle__mq-summary {
  margin-top: 10px;
  border-top: 1px solid #333;
  padding-top: 8px;
}

.puzzle__mq-header {
  font-size: 0.82rem;
  font-weight: 600;
  color: #888;
  margin-bottom: 4px;
}

.puzzle__mq-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 3px 0;
  font-size: 0.85rem;
}

.puzzle__mq-move {
  font-family: monospace;
  color: #ccc;
  min-width: 48px;
}

.puzzle__mq-badge {
  display: inline-block;
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 0.78rem;
  font-weight: 600;
}

.puzzle__mq-check {
  color: #22c55e;
  font-size: 0.9rem;
}

.puzzle__mq-note {
  font-size: 0.78rem;
  color: #999;
  font-style: italic;
}

.puzzle__mq-cp {
  font-size: 0.78rem;
  color: #888;
  font-family: monospace;
}

.puzzle-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid #333;
}
.puzzle-meta__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.puzzle-meta__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.puzzle-meta__favorite {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.puzzle-meta__fav-btn {
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: #555;
  line-height: 1;
  padding: 0;
  transition: color 0.15s;
}
.puzzle-meta__fav-btn:hover {
  color: #e05555;
}
.puzzle-meta__fav-btn--active {
  color: #e05555;
}
.puzzle-meta__fav-label {
  font-size: 0.85rem;
  color: #999;
}
.puzzle-meta__notes {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 4px;
  color: #ccc;
  font-size: 0.85rem;
  padding: 6px 8px;
  resize: vertical;
  min-height: 56px;
  font-family: inherit;
}
.puzzle-meta__notes::placeholder {
  color: #555;
}
.puzzle-meta__notes:focus {
  outline: 1px solid #4a9;
  border-color: #4a9;
}
.puzzle-meta__tags {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 4px;
  color: #ccc;
  font-size: 0.85rem;
  padding: 5px 8px;
}
.puzzle-meta__tags::placeholder {
  color: #555;
}
.puzzle-meta__tags:focus {
  outline: 1px solid #4a9;
  border-color: #4a9;
}
.puzzle-meta__folder-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.puzzle-meta__folder-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #333;
  border: 1px solid #444;
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 0.78rem;
  color: #ccc;
}
.puzzle-meta__folder-remove {
  background: none;
  border: none;
  color: #888;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
.puzzle-meta__folder-remove:hover {
  color: #e05555;
}
.puzzle-meta__folder-empty {
  font-size: 0.78rem;
  color: #555;
  font-style: italic;
}
.puzzle-meta__folder-input {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 4px;
  color: #ccc;
  font-size: 0.82rem;
  padding: 4px 8px;
  margin-top: 4px;
}
.puzzle-meta__folder-input::placeholder {
  color: #555;
}
.puzzle-meta__folder-input:focus {
  outline: 1px solid #4a9;
  border-color: #4a9;
}

@media (max-width: 800px) {
  .puzzle-page {
    padding: 12px 10px 18px;
  }
  .puzzle,
  .puzzle--with-session,
  .puzzle--library {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .puzzle__board {
    order: 1;
    width: 100%;
  }
  .puzzle__session-sidebar {
    order: 2;
    max-height: none;
    overflow-y: visible;
  }
  .puzzle-library__sidebar {
    order: 2;
  }
  .puzzle__side {
    order: 2;
    max-height: none;
    padding: 0 2px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .puzzle__side .puzzle__feedback {
    order: 1;
    flex: none;
    overflow-y: visible;
  }
  .puzzle__side .puzzle-ceval,
  .puzzle__side .analyse__moves {
    order: 2;
    flex: none;
    overflow-y: visible;
    border-bottom: none;
  }
  .puzzle__session-sidebar {
    order: 3;
    max-height: none;
    overflow-y: visible;
  }
  .puzzle__feedback {
    padding: 8px 10px;
  }
  .puzzle__feedback__actions {
    flex-wrap: wrap;
  }
  .puzzle__feedback__actions button {
    min-height: 40px;
    font-size: 0.85rem;
  }
  .session-info {
    padding: 8px 10px;
  }
  .session-info__stats {
    flex-wrap: wrap;
    gap: 6px;
  }
  .session-info__header {
    flex-wrap: wrap;
    gap: 6px;
  }
  .session-history__grid {
    grid-template-columns: repeat(auto-fill, 18px);
    gap: 3px;
  }
  .session-history__cell {
    width: 18px;
    height: 18px;
  }
  .puzzle-moves {
    max-height: 100px;
    overflow-y: auto;
    font-size: 0.82rem;
    padding: 6px 8px;
    border-radius: 4px;
  }
  .puzzle-ceval .ceval {
    min-height: auto;
    padding: 4px 8px;
    font-size: 0.82rem;
  }
  .puzzle-ceval .ceval pearl {
    font-size: 1.3em;
  }
  .puzzle-ceval .ceval .engine {
    font-size: 0.78rem;
  }
  .puzzle-ceval .pv {
    font-size: 0.78rem;
    padding: 4px 8px;
  }
  .puzzle-engine {
    padding: 6px 8px;
  }
  .puzzle-engine__pv {
    font-size: 0.78rem;
  }
  .puzzle-session__themes {
    max-height: 50vh;
  }
  .session-info__themes {
    font-size: 0.8rem;
  }
  .session-info__rating {
    font-size: 0.75rem;
  }
  .session-info__auto-next {
    font-size: 0.8rem;
  }
  .session-history__label {
    font-size: 0.7rem;
  }
  .session-history__continue {
    min-height: 40px;
    font-size: 0.85rem;
  }
  .puzzle-session__start-bar {
    flex-wrap: wrap;
  }
  .puzzle-session__start-bar .puzzle-session__start {
    width: 100%;
    min-height: 44px;
    font-size: 0.9rem;
  }
  .puzzle-session__tab {
    padding: 10px 8px;
    font-size: 0.85rem;
  }
  .puzzle-session__theme-row {
    padding: 8px 10px;
    min-height: 40px;
    font-size: 0.85rem;
  }
  .puzzle-session__category-label {
    padding: 8px 10px 4px;
    font-size: 0.75rem;
  }
  .puzzle-session__range {
    height: 24px;
  }
  .puzzle-session__range-val {
    width: 56px;
    font-size: 0.82rem;
    padding: 4px 6px;
  }
  .puzzle-session__range-label {
    font-size: 0.75rem;
  }
  .puzzle-session__search-input {
    padding: 8px 10px;
    font-size: 0.85rem;
  }
  .puzzle-library__card-action {
    min-height: 40px;
    padding: 8px 16px;
    font-size: 0.85rem;
  }
  .puzzle-library__action {
    min-height: 40px;
    padding: 8px 16px;
    font-size: 0.85rem;
  }
  .puzzle-library__card {
    padding: 10px;
  }
  .puzzle-info {
    padding: 6px 8px;
  }
  .puzzle-meta {
    padding: 6px 8px;
  }
  .puzzle-library__resume {
    padding: 8px 10px;
  }
  .puzzle-library__resume .puzzle-library__resume-btn {
    min-height: 44px;
    font-size: 0.9rem;
  }
  .puzzle-round__back {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
  }
  .puzzle__feedback__nav {
    gap: 6px;
  }
  .puzzle__feedback__nav button {
    min-height: 44px;
    font-size: 0.85rem;
    padding: 8px 14px;
  }
  .puzzle__feedback__nav a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
  .puzzle__next, .puzzle__retry {
    min-height: 44px;
    font-size: 0.9rem;
  }
  .toggle-switch {
    width: 40px;
    height: 22px;
    border-radius: 11px;
  }
  .toggle-switch__knob {
    width: 18px;
    height: 18px;
  }
  .toggle-switch--on .toggle-switch__knob {
    transform: translateX(18px);
  }
  .puzzle-info__summary {
    min-height: 36px;
    padding: 4px 0;
  }
  .session-info__end, .session-info__retry {
    min-height: 32px;
    padding: 4px 12px;
    font-size: 0.75rem;
  }
  .puzzle__feedback,
  .session-info,
  .session-history,
  .puzzle-info,
  .puzzle-meta,
  .puzzle-library__card,
  .puzzle-library__section,
  .puzzle-library__resume {
    border-radius: 4px;
  }
}
.puzzle-library__preview-side {
  display: flex;
  flex-direction: column;
  background: #1a1a1a;
  position: relative;
}

.puzzle-library__preview-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid #2e2e2e;
  flex-wrap: wrap;
}
.puzzle-library__preview-header h2 {
  font-size: 0.85rem;
  color: #ccc;
  margin: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.puzzle-library__preview-play {
  font-size: 0.8rem;
  padding: 4px 10px;
  white-space: nowrap;
}

.puzzle-library__preview-close {
  background: none;
  border: none;
  color: #666;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  flex-shrink: 0;
}
.puzzle-library__preview-close:hover {
  color: #ccc;
}

.puzzle-list__row--selected {
  background: #2a3a2a;
  color: #4a9;
}

.openings {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}

.openings__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.openings__title {
  font-size: 1.4em;
  margin: 0;
}

.openings__new-btn,
.openings__start-btn {
  padding: 8px 16px;
  background: #2a4a2a;
  color: #8f8;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.95em;
}
.openings__new-btn:hover,
.openings__start-btn:hover {
  background: #335533;
}

.openings__empty {
  text-align: center;
  padding: 40px 20px;
  color: #999;
}
.openings__empty p {
  margin: 8px 0;
}

.openings__hint {
  font-size: 0.9em;
  color: #777;
}

.openings__empty-icon {
  font-size: 3em;
  opacity: 0.3;
  margin-bottom: 8px;
}

.openings__empty-title {
  margin: 0 0 8px;
  font-size: 1.3em;
}

.openings__loading {
  text-align: center;
  padding: 40px;
  color: #999;
}

.openings--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

.openings__loading-card {
  text-align: center;
  padding: 40px 60px;
  background: #1e1e1e;
  border-radius: 8px;
  min-width: 360px;
}

.openings__loading-pct {
  font-size: 3.5rem;
  font-weight: 700;
  color: #4a9;
  text-align: center;
  line-height: 1;
  margin-bottom: 12px;
  font-family: monospace;
  letter-spacing: -2px;
  width: 4.5ch;
  margin-left: auto;
  margin-right: auto;
}

.openings__loading-title {
  margin: 0 0 8px;
  font-size: 1.1em;
  color: #ccc;
}

.openings__loading-bar {
  width: 100%;
  height: 22px;
  background: #252525;
  border-radius: 11px;
  overflow: hidden;
  margin: 12px 0 8px;
}

.openings__loading-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #2d7a3a, #4a9);
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78em;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  transition: width 0.15s ease-out;
  box-shadow: 0 0 10px rgba(74, 153, 74, 0.3);
}

.openings__loading-detail {
  margin: 0;
  font-size: 0.9em;
  color: #888;
}

.openings__transfer {
  margin: 16px 0;
  text-align: center;
}

.openings__transfer-track {
  position: relative;
  height: 6px;
  background: #252525;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 12px;
}

.openings__transfer-pulse {
  position: absolute;
  top: 0;
  left: -30%;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #4a9, transparent);
  border-radius: 3px;
  animation: transfer-slide 1.5s ease-in-out infinite;
}

.openings__transfer-pulse--delayed {
  animation-delay: 0.75s;
  background: linear-gradient(90deg, transparent, #6ba3d6, transparent);
}

@keyframes transfer-slide {
  0% {
    left: -30%;
  }
  100% {
    left: 100%;
  }
}
.openings__transfer-count {
  font-size: 0.9rem;
  color: #ccc;
  font-weight: 600;
}

.openings__collections {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 10px;
  min-width: 0;
}

.openings__collection-row {
  display: block;
  padding: 14px 16px;
  background: #202020;
  border: 1px solid #2d2d2d;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.openings__collection-row:hover {
  background: #252525;
  border-color: #3a3a3a;
}

.openings__account-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
  flex-shrink: 0;
  margin-left: 10px;
}
.openings__account-actions .openings__hint {
  min-width: 0;
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.openings__account-open-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1b1b1b;
  border: 1px solid #343434;
  border-radius: 4px;
  color: #9b9b9b;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1;
}
.openings__account-open-btn:hover, .openings__account-open-btn.active {
  background: #263b2b;
  border-color: #42724c;
  color: #b7e3bc;
}

.openings__account-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #8a8a8a;
  background: #1b1b1b;
  border: 1px solid #343434;
  border-radius: 3px;
  padding: 2px 6px;
  white-space: nowrap;
}

.openings__account-gear-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 4px;
  color: #4a4a4a;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.1s, background 0.1s;
}
.openings__account-gear-btn:hover, .openings__account-gear-btn.active {
  color: #ccc;
  background: #333;
}

.openings__account-platform-row {
  margin-bottom: 10px;
}

.openings__account-platform-link {
  display: inline-block;
  font-size: 0.75rem;
  color: #6a6a6a;
  text-decoration: none;
}
.openings__account-platform-link:hover {
  color: #b7e3bc;
  text-decoration: underline;
}

.openings__account-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 10px;
}

.openings__account-divider {
  height: 1px;
  background: #2a2a2a;
  margin: 0 0 10px;
}

.openings__account-menu {
  margin: 0 0 10px;
  padding: 12px;
  background: #181818;
  border: 1px solid #303030;
  border-radius: 6px;
  cursor: default;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.openings__account-menu-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.openings__account-menu-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6a6a6a;
}

.openings__account-menu-section-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.openings__account-menu-section-btn {
  flex: 1 1 auto;
  min-width: 64px;
  padding: 6px 8px;
  background: #1a1a1a;
  color: #6a6a6a;
  border: 1px solid #252525;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.openings__account-menu-section-btn:hover:not(.active):not(:disabled) {
  background: #222;
  color: #888;
  border-color: #303030;
}
.openings__account-menu-section-btn.active {
  background: #2a2a2a;
  color: #c8c8c8;
  border-color: #404040;
}
.openings__account-menu-section-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.openings__account-menu-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.openings__account-menu-placeholder {
  align-self: flex-start;
  font-size: 0.75rem;
  color: #555;
  background: #151515;
  border: 1px dashed #2d2d2d;
  border-radius: 3px;
  padding: 3px 8px;
}

.openings__account-menu-divider {
  height: 1px;
  background: #2a2a2a;
}

.openings__account-menu-error {
  font-size: 0.78rem;
  color: #f84;
  margin: 0;
}

.openings__account-menu-delete {
  padding: 7px 12px;
  background: #1a1a1a;
  color: #a05a5a;
  border: 1px solid #3a2424;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.openings__account-menu-delete:hover:not(:disabled) {
  background: #321818;
  color: #d05050;
  border-color: #4a2828;
}
.openings__account-menu-delete:disabled {
  opacity: 0.6;
  cursor: default;
}

.openings__accounts-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.openings__reorder-toggle {
  flex-shrink: 0;
  padding: 6px 12px;
  background: #1b1b1b;
  color: #9b9b9b;
  border: 1px solid #343434;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
}
.openings__reorder-toggle:hover {
  background: #232323;
  color: #c5c5c5;
}
.openings__reorder-toggle.active {
  background: #263b2b;
  border-color: #42724c;
  color: #b7e3bc;
}

.openings__account-section {
  margin-bottom: 18px;
}
.openings__account-section:last-child {
  margin-bottom: 0;
}

.openings__account-section-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 8px;
}

.openings__account-section-header--toggle {
  cursor: pointer;
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: -6px;
  transition: background 0.1s;
}
.openings__account-section-header--toggle:hover {
  background: #1c1c1c;
}
.openings__account-section-header--toggle:hover .openings__section-title {
  color: #e0e0e0;
}

.openings__section-chevron {
  font-size: 0.7rem;
  line-height: 1;
  color: #8a8a8a;
  align-self: center;
}

.openings__account-section-header--toggle:hover .openings__section-chevron {
  color: #c5c5c5;
}

.openings__section-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #c5c5c5;
}

.openings__section-count {
  font-size: 0.78rem;
  color: #6a6a6a;
}

.openings__account-section-empty {
  grid-column: 1/-1;
  padding: 14px 16px;
  margin: 0;
  color: #6a6a6a;
  font-size: 0.85rem;
  font-style: italic;
  background: #181818;
  border: 1px dashed #303030;
  border-radius: 6px;
}

.openings__collections--drag-over-end {
  outline: 2px dashed #42724c;
  outline-offset: 4px;
  border-radius: 6px;
}

.openings__collection-row--dragging {
  opacity: 0.45;
}

.openings__collection-row--drag-over-top {
  box-shadow: inset 0 2px 0 #4a9;
}

.openings__collection-row--drag-over-bottom {
  box-shadow: inset 0 -2px 0 #4a9;
}

.openings__account-stats-msg {
  font-size: 0.78rem;
  color: #6a6a6a;
  margin: 4px 0 2px;
}
.openings__account-stats-msg.error {
  color: #b06a6a;
}

.openings__account-stats-skeleton-col {
  min-height: 86px;
  background: linear-gradient(90deg, #1c1c1c 25%, #232323 37%, #1c1c1c 63%);
  background-size: 400% 100%;
  animation: openings-stats-skeleton-pulse 1.4s ease infinite;
}

@keyframes openings-stats-skeleton-pulse {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
.openings__preload-panel {
  margin-top: 10px;
  padding: 12px;
  background: #181818;
  border: 1px solid #303030;
  border-radius: 6px;
  cursor: default;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.openings__preload-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.openings__preload-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6a6a6a;
}

.openings__preload-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.openings__preload-speed,
.openings__preload-period {
  flex: 1 1 auto;
  min-width: 64px;
  padding: 6px 8px;
  background: #1a1a1a;
  color: #6a6a6a;
  border: 1px solid #252525;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.openings__preload-speed:hover:not(.active),
.openings__preload-period:hover:not(.active) {
  background: #222;
  color: #888;
  border-color: #303030;
}
.openings__preload-speed.active,
.openings__preload-period.active {
  background: #2a2a2a;
  color: #c8c8c8;
  border-color: #404040;
}

.openings__preload-build {
  margin-top: 2px;
  padding: 9px 12px;
  background: #1f3024;
  color: #b7e3bc;
  border: 1px solid #31543a;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background 0.12s, border-color 0.12s;
}
.openings__preload-build:hover {
  background: #26492f;
  border-color: #42724c;
}

.openings__preload-sync {
  padding: 10px;
  background: #151515;
  border: 1px solid #2a2a2a;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.openings__preload-sync-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.openings__preload-sync-date {
  flex: 1 1 12rem;
  min-width: 0;
  font-size: 0.78rem;
  color: #8a8a8a;
  overflow-wrap: anywhere;
}

.openings__preload-sync-refresh {
  padding: 3px 7px;
  background: #1a1a1a;
  color: #888;
  border: 1px solid #2d2d2d;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
}
.openings__preload-sync-refresh:hover {
  background: #242424;
  color: #bbb;
}

.openings__preload-sync-btn {
  padding: 4px 12px;
  background: #1f3024;
  color: #8fca95;
  border: 1px solid #31543a;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
}
.openings__preload-sync-btn:hover:not(:disabled) {
  background: #263b2b;
  color: #b7e3bc;
}
.openings__preload-sync-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.openings__preload-sync-peek {
  font-size: 0.78rem;
  color: #7a7a7a;
}
.openings__preload-sync-peek.has-new {
  color: #b7e3bc;
  font-weight: 600;
  animation: openings-peek-reveal 0.28s ease-out;
}

.openings__preload-sync-msg {
  font-size: 0.78rem;
  color: #8fca95;
}

.openings__preload-sync-error {
  font-size: 0.78rem;
  color: #f84;
}

@keyframes openings-peek-reveal {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.openings__card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
  margin-bottom: 3px;
}

.openings__collection-name {
  display: block;
  flex: 1 1 12rem;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  font-size: 1rem;
  color: #ddd;
  letter-spacing: 0.01em;
}

.openings__collection-meta {
  font-size: 0.75rem;
  color: #555;
  margin-bottom: 10px;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

.openings__collection-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  margin-left: 8px;
}

.openings__col-rename,
.openings__col-delete {
  background: none;
  border: none;
  color: #4a4a4a;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 3px;
  font-size: 0.9em;
  transition: color 0.1s, background 0.1s;
}
.openings__col-rename:hover,
.openings__col-delete:hover {
  color: #ccc;
  background: #333;
}

.openings__col-delete:hover {
  color: #d05050;
  background: #321818;
}

.openings__card-wdl {
  margin-bottom: 12px;
}

.openings__card-wdl-bar {
  display: flex;
  width: 100%;
  height: 7px;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 5px;
}
.openings__card-wdl-bar span {
  display: inline-block;
  height: 100%;
  font-size: 0.6rem;
  line-height: 7px;
  text-align: center;
  overflow: hidden;
  transition: width 0.3s;
}
.openings__card-wdl-bar .wdl-w {
  background: #3a6e46;
}
.openings__card-wdl-bar .wdl-d {
  background: #3a3a3a;
}
.openings__card-wdl-bar .wdl-l {
  background: #5c2e2e;
}

.openings__card-wdl-labels {
  display: flex;
  gap: 12px;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}
.openings__card-wdl-labels .wdl-w {
  color: #5a9a6a;
}
.openings__card-wdl-labels .wdl-d {
  color: #555;
}
.openings__card-wdl-labels .wdl-l {
  color: #8a4a4a;
}

.openings__card-speeds {
  display: grid;
  gap: 1px;
  background: #2a2a2a;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  overflow: hidden;
  min-width: 0;
}

.openings__card-speed-col {
  background: #1c1c1c;
  padding: 8px 10px;
  min-width: 0;
}

.openings__card-speed-hdr {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 7px;
  padding-bottom: 6px;
  border-bottom: 1px solid #242424;
  min-width: 0;
}

.openings__card-speed-icon {
  font-size: 0.8rem;
  color: #666;
}
.openings__card-speed-icon[data-icon]::before {
  font-family: "lichess";
  content: attr(data-icon);
  font-style: normal;
  font-weight: normal;
}

.openings__card-speed-name {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #666;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.openings__card-speed-count {
  font-size: 0.7rem;
  font-weight: 700;
  color: #444;
  font-variant-numeric: tabular-nums;
}

.openings__card-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  font-size: 0.72rem;
  line-height: 1.75;
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
.openings__card-stat span:first-child {
  color: #444;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.openings__card-stat span:last-child {
  color: #888;
  font-weight: 600;
  flex-shrink: 0;
}
.openings__card-stat.muted span:first-child {
  color: #383838;
}
.openings__card-stat.muted span:last-child {
  color: #585858;
  font-weight: 400;
}

@media (max-width: 420px) {
  .openings__account-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
  .openings__account-badge {
    flex: 0 0 auto;
  }
  .openings__card-speeds {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
.openings__save-line-row {
  display: flex;
  justify-content: center;
  padding: 4px 0;
}

.openings__save-line-btn {
  font-size: 0.68rem;
  padding: 3px 12px;
  background: transparent;
  border: 1px solid #383838;
  border-radius: 4px;
  color: #888;
  cursor: pointer;
  transition: all 0.15s;
}
.openings__save-line-btn:hover {
  background: #222;
  color: #aaa;
}

.openings__save-feedback {
  font-size: 0.68rem;
  color: #629924;
  font-weight: 600;
}

.openings__pr-recency-toggle {
  display: flex;
  gap: 2px;
  margin-left: auto;
}

.openings__pr-recency-btn {
  font-size: 0.65rem;
  padding: 2px 8px;
  border: 1px solid #333;
  background: transparent;
  color: #666;
  cursor: pointer;
  transition: all 0.15s;
}
.openings__pr-recency-btn:first-child {
  border-radius: 3px 0 0 3px;
}
.openings__pr-recency-btn:last-child {
  border-radius: 0 3px 3px 0;
}
.openings__pr-recency-btn.active {
  background: #282828;
  color: #aaa;
  border-color: #444;
}
.openings__pr-recency-btn:hover:not(.active) {
  color: #888;
}

.openings__pr-traps {
  margin-top: 16px;
}

.openings__pr-traps-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.openings__pr-trap-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #1a1a1a;
  border: 1px solid #282828;
  border-left: 3px solid #ac3232;
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.openings__pr-trap-card:hover {
  background: #222;
}

.openings__pr-trap-moves {
  font-size: 0.75rem;
  font-weight: 600;
  color: #bbb;
  flex: 1;
}

.openings__pr-trap-detail {
  display: flex;
  gap: 8px;
  font-size: 0.68rem;
  color: #777;
  flex: 2;
}

.openings__pr-trap-losses {
  color: #ac3232;
  font-weight: 600;
}

.openings__deviation-panel {
  padding: 8px 0;
}

.openings__deviation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.openings__deviation-scan-btn {
  font-size: 0.68rem;
  padding: 3px 10px;
  background: #282828;
  border: 1px solid #383838;
  border-radius: 4px;
  color: #aaa;
  cursor: pointer;
  transition: background 0.15s;
}
.openings__deviation-scan-btn:hover {
  background: #333;
  color: #ccc;
}

.openings__deviation-progress {
  font-size: 0.68rem;
  color: #666;
}

.openings__deviation-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.openings__deviation-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: #1a1a1a;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.72rem;
  transition: background 0.15s;
}
.openings__deviation-row:hover {
  background: #222;
}

.openings__deviation-moves {
  font-weight: 600;
  color: #bbb;
  min-width: 80px;
}

.openings__deviation-detail {
  display: flex;
  gap: 6px;
  flex: 1;
  color: #777;
  font-size: 0.68rem;
}

.openings__deviation-opp {
  color: #c89b3c;
}

.openings__deviation-theory {
  color: #629924;
}

.openings__deviation-count {
  font-size: 0.62rem;
  color: #555;
}

.openings__deviation-empty {
  font-size: 0.7rem;
  color: #555;
  padding: 8px 0;
}

.openings__pr-term-section {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.openings__pr-term-grid,
.openings__pr-length-grid {
  background: #1a1a1a;
  border-radius: 6px;
  padding: 12px 14px;
}

.openings__pr-term-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.openings__pr-term-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.openings__pr-term-label {
  font-size: 0.65rem;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.openings__pr-term-value {
  font-size: 0.85rem;
  font-weight: 600;
  color: #aaa;
  font-variant-numeric: tabular-nums;
}

.openings__pr-term-stat--highlight .openings__pr-term-value {
  color: #c89b3c;
}

.openings__pr-term-flag {
  font-size: 0.65rem;
  color: #c89b3c;
}

.openings__pr-recs {
  margin-top: 16px;
}

.openings__pr-recs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.openings__pr-rec-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #1a1a1a;
  border: 1px solid #282828;
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.openings__pr-rec-card:hover {
  background: #222;
}

.openings__pr-rec-action {
  font-size: 0.78rem;
  font-weight: 600;
  color: #bbb;
  flex: 1;
}

.openings__pr-rec-reason {
  font-size: 0.68rem;
  color: #666;
  flex: 2;
}

.openings__pr-rec--high {
  border-left: 3px solid #629924;
}

.openings__pr-rec--medium {
  border-left: 3px solid #c89b3c;
}

.openings__pr-rec--low {
  border-left: 3px solid #555;
}

.openings__practice-panel {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.openings__practice-setup {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}

.openings__practice-setup-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #e0e0e0;
}

.openings__practice-setup-desc {
  font-size: 0.875rem;
  color: #999;
  line-height: 1.5;
}

.openings__practice-color-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.openings__practice-color-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #777;
}

.openings__practice-color-btns {
  display: flex;
  gap: 8px;
}

.openings__practice-color-btn {
  flex: 1;
  padding: 9px 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  color: #aaa;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.openings__practice-color-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #e0e0e0;
}
.openings__practice-color-btn--active {
  background: #2a4a2a;
  border-color: #5a9a5a;
  color: #97c847;
  font-weight: 600;
}

.openings__practice-strength {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
}

.openings__practice-strength-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #ccc;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.strength-selector {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.strength-selector__section-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.strength-selector__levels {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  border: 1px solid #444;
  border-radius: 4px;
}

.strength-selector__item {
  flex: 1 1 auto;
  position: relative;
}
.strength-selector__item input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.strength-selector__item label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 8px 6px;
  cursor: pointer;
  background: #2a2a2a;
  color: #ccc;
  font-size: 0.85rem;
  font-weight: 600;
  border-right: 1px solid #444;
  transition: background 0.15s;
}
.strength-selector__item:last-child label {
  border-right: 0;
}
.strength-selector__item input:checked + label {
  background: #1565a8;
  color: #fff;
}
.strength-selector__item input:focus-visible + label {
  outline: 2px solid #2196f3;
  outline-offset: -2px;
}
.strength-selector__item label:hover {
  background: #333;
}
.strength-selector__item input:checked + label:hover {
  background: #1565a8;
}

.strength-selector__engine {
  padding: 6px 8px;
  background: #2a2a2a;
  border: 1px solid #444;
  border-radius: 4px;
  color: #ccc;
  font-size: 0.8rem;
}
.strength-selector__engine:disabled {
  opacity: 0.75;
  cursor: default;
}

@media (max-width: 600px) {
  .strength-selector__item label {
    min-width: 26px;
    padding: 7px 4px;
    font-size: 0.78rem;
  }
}
.openings__practice-setup-note {
  font-size: 0.72rem;
  color: #555;
  font-style: italic;
}

.openings__practice-active {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.openings__practice-source-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 0.85rem;
}
.openings__practice-source-banner.openings__practice-source--opponent-repertoire {
  background: rgba(97, 200, 71, 0.1);
  border: 1px solid rgba(97, 200, 71, 0.25);
  color: #97c847;
}
.openings__practice-source-banner.openings__practice-source--engine {
  background: rgba(90, 159, 212, 0.1);
  border: 1px solid rgba(90, 159, 212, 0.25);
  color: #5a9fd4;
}
.openings__practice-source-banner.openings__practice-source--exhausted {
  background: rgba(200, 100, 60, 0.1);
  border: 1px solid rgba(200, 100, 60, 0.25);
  color: #d48060;
}

.openings__practice-source-icon {
  font-size: 0.75rem;
  opacity: 0.9;
}

.openings__practice-source-text {
  font-size: 0.82rem;
  line-height: 1.4;
}

.openings__practice-freq-note {
  font-size: 0.75rem;
  color: #666;
  font-style: italic;
}

.openings__practice-controls {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.openings__practice-stat {
  font-size: 0.8rem;
  color: #888;
}

.openings__practice-stop-btn {
  margin-top: 8px;
  padding: 8px 0;
  background: rgba(180, 60, 60, 0.15);
  border: 1px solid rgba(180, 60, 60, 0.3);
  border-radius: 4px;
  color: #d48080;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.12s;
}
.openings__practice-stop-btn:hover {
  background: rgba(180, 60, 60, 0.25);
}

.openings__style {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 20px;
  max-width: 720px;
}

.openings__style-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.openings__style-label {
  font-size: 1.2rem;
  font-weight: 700;
  color: #e0e0e0;
}

.openings__style-context {
  font-size: 0.85rem;
  color: #888;
}

.openings__style-confidence {
  font-size: 0.75rem;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: #888;
}
.openings__style-confidence.openings__style-conf--high {
  color: #97c847;
  background: rgba(151, 200, 71, 0.12);
}
.openings__style-confidence.openings__style-conf--medium {
  color: #c89b3c;
  background: rgba(200, 155, 60, 0.12);
}
.openings__style-confidence.openings__style-conf--low {
  color: #888;
}
.openings__style-confidence.openings__style-conf--insufficient {
  color: #666;
}

.openings__style-loading {
  color: #888;
  font-size: 0.9rem;
  padding: 12px 0;
}

.openings__style-section-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #888;
  margin-bottom: 10px;
}

.openings__style-signals {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.openings__style-signals-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.openings__style-signals-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #666;
  margin-bottom: 4px;
}

.openings__style-signal {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 10px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
}
.openings__style-signal--descriptive {
  border-left: 3px solid #555;
}
.openings__style-signal--interpretive {
  border-left: 3px solid #c89b3c;
}
.openings__style-signal--cautious {
  border-left: 3px solid #e06060;
}
.openings__style-signal--insufficient {
  opacity: 0.5;
}

.openings__style-signal-label {
  font-size: 0.875rem;
  color: #d4d4d4;
}

.openings__style-signal-caveat {
  font-size: 0.72rem;
  color: #666;
  font-style: italic;
}

.openings__style-first-moves {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 540px) {
  .openings__style-first-moves {
    grid-template-columns: 1fr;
  }
}

.openings__style-fm-col {
  display: flex;
  flex-direction: column;
}

.openings__style-move-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.openings__style-move-row {
  display: grid;
  grid-template-columns: 40px 1fr 36px 46px;
  align-items: center;
  gap: 6px;
}

.openings__style-move-san {
  font-family: monospace;
  font-size: 0.875rem;
  color: #e0e0e0;
  font-weight: 600;
}

.openings__style-move-bar-wrap {
  background: rgba(255, 255, 255, 0.07);
  border-radius: 2px;
  height: 6px;
  overflow: hidden;
}

.openings__style-move-bar {
  height: 100%;
  background: #5a9fd4;
  border-radius: 2px;
  max-width: 100%;
}

.openings__style-move-pct {
  font-size: 0.8rem;
  color: #aaa;
  text-align: right;
}

.openings__style-move-count {
  font-size: 0.72rem;
  color: #666;
  text-align: right;
}

.openings__style-empty {
  font-size: 0.85rem;
  color: #666;
  font-style: italic;
}

.openings__style-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.openings__style-form-periods {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.openings__style-form-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center;
  gap: 10px;
}

.openings__style-form-label {
  font-size: 0.75rem;
  color: #888;
  text-align: right;
}

.openings__style-wdl-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.openings__style-wdl-bar {
  display: flex;
  height: 7px;
  border-radius: 3px;
  overflow: hidden;
}

.openings__style-wdl-counts {
  display: flex;
  gap: 8px;
  font-size: 0.75rem;
}

.openings__style-wdl-total {
  color: #555;
  margin-left: auto;
}

.openings__style-trend {
  font-size: 0.85rem;
  color: #c89b3c;
  padding: 4px 0;
}

.openings__style-form-caveat {
  font-size: 0.72rem;
  color: #555;
  font-style: italic;
}

.openings__style-player-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.openings__style-archetype {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.openings__style-archetype-label {
  font-size: 1.05rem;
  font-weight: 700;
  color: #e0e0e0;
}

.openings__style-archetype-qualifier {
  font-size: 0.78rem;
  color: #888;
}

.openings__style-card-wdl {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.openings__style-axes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.openings__style-axes-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.openings__style-axis-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.openings__style-axis-label {
  font-size: 0.72rem;
  color: #777;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.openings__style-axis-track {
  display: grid;
  grid-template-columns: 90px 1fr 90px;
  align-items: center;
  gap: 6px;
}

.openings__style-axis-pole {
  font-size: 0.72rem;
  color: #666;
}
.openings__style-axis-pole:first-child {
  text-align: right;
}
.openings__style-axis-pole:last-child {
  text-align: left;
}

.openings__style-axis-bar-wrap {
  position: relative;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
}

.openings__style-axis-bar {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: #5a9fd4;
  border-radius: 50%;
}

.openings__style-behavioral {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.openings__style-behavioral-caveat-banner {
  font-size: 0.72rem;
  color: #555;
  font-style: italic;
  padding: 4px 0;
}

.openings__style-behavioral-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.openings__style-behavioral-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
  border-left: 3px solid rgba(255, 255, 255, 0.1);
}

.openings__style-behavioral-label {
  font-size: 0.875rem;
  color: #c8c8c8;
  font-weight: 600;
}

.openings__style-behavioral-detail {
  font-size: 0.8rem;
  color: #888;
}

.openings__style-behavioral-caveat {
  font-size: 0.72rem;
  color: #555;
  font-style: italic;
}

.openings__small-sample-badge {
  display: inline-block;
  font-size: 0.65rem;
  color: #c89b3c;
  background: rgba(200, 155, 60, 0.12);
  border: 1px solid rgba(200, 155, 60, 0.25);
  border-radius: 3px;
  padding: 1px 6px;
  margin-left: 8px;
  white-space: nowrap;
}

.openings__pr-sparse-banner {
  background: rgba(200, 155, 60, 0.1);
  border: 1px solid rgba(200, 155, 60, 0.25);
  border-radius: 4px;
  color: #c89b3c;
  font-size: 0.75rem;
  padding: 6px 12px;
  margin-bottom: 12px;
}

.openings__sparkline-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 2px;
}

.openings__sparkline-svg {
  flex-shrink: 0;
}

.openings__sparkline-current {
  font-size: 0.75rem;
  font-weight: 600;
  color: #999;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.openings__sparkline-trend {
  font-size: 0.7rem;
}
.openings__sparkline-trend.trend-up {
  color: #629924;
}
.openings__sparkline-trend.trend-down {
  color: #ac3232;
}
.openings__sparkline-trend.trend-flat {
  color: #666;
}

.openings__import {
  max-width: 500px;
  margin: 0 auto;
}

.openings__import-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.openings__import-header h2 {
  margin: 0;
  font-size: 1.2em;
}

.openings__cancel-btn,
.openings__back-btn {
  padding: 6px 14px;
  background: #444;
  color: #ccc;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.openings__cancel-btn:hover,
.openings__back-btn:hover {
  background: #555;
}

.openings__step h3 {
  margin: 0 0 12px;
  font-size: 1.05em;
}

.openings__source-options {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.openings__source-btn {
  padding: 8px 16px;
  background: #333;
  color: #ccc;
  border: 1px solid #555;
  border-radius: 4px;
  cursor: pointer;
}
.openings__source-btn.active {
  background: #629924;
  color: #fff;
  border-color: #629924;
}
.openings__source-btn:hover:not(.active) {
  background: #444;
}

.openings__field {
  margin-bottom: 14px;
}
.openings__field label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.9em;
  color: #bbb;
}

.openings__input,
.openings__textarea {
  width: 100%;
  padding: 8px 10px;
  background: #2a2a2a;
  color: #e8e8e8;
  border: 1px solid #555;
  border-radius: 4px;
  font-size: 0.95em;
  box-sizing: border-box;
}

.openings__color-options {
  display: flex;
  gap: 8px;
}

.openings__filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.openings__filter-pill {
  padding: 5px 12px;
  background: #333;
  color: #ccc;
  border: 1px solid #555;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.88em;
  font-family: "lichess", sans-serif;
}
.openings__filter-pill.active {
  background: #629924;
  color: #fff;
  border-color: #629924;
}
.openings__filter-pill:hover:not(.active) {
  background: #444;
}

.openings__custom-dates {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.88em;
  color: #999;
}

.openings__date-input {
  padding: 4px 8px;
  background: #2a2a2a;
  color: #e8e8e8;
  border: 1px solid #555;
  border-radius: 4px;
  font-size: 0.88em;
}

.openings__check-label {
  font-size: 0.92em;
  color: #ccc;
  cursor: pointer;
}
.openings__check-label input {
  margin-right: 6px;
}

.openings__input--short {
  width: 80px;
}

.openings__error {
  color: #e05050;
  font-size: 0.9em;
  margin-bottom: 10px;
}

.openings__actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.openings__import-btn, .openings__done-btn {
  display: block;
  width: 100%;
  padding: 13px 20px;
  margin-top: 4px;
  background: #629924;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-align: center;
  transition: background 0.12s;
}
.openings__import-btn:disabled, .openings__done-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.openings__import-btn:hover:not(:disabled), .openings__done-btn:hover:not(:disabled) {
  background: #4e7e1e;
}

.openings__next-btn {
  padding: 8px 20px;
  background: #629924;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.95em;
}
.openings__next-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.openings__next-btn:hover:not(:disabled) {
  background: #4e7e1e;
}

.openings__cancel-import-btn {
  padding: 3px 10px;
  background: #803030;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.75em;
  flex-shrink: 0;
}
.openings__cancel-import-btn:hover {
  background: #993838;
}

.openings__done-summary {
  margin: 0 0 16px;
  color: #8c8;
}

.openings__progress {
  color: #bbb;
  margin-bottom: 8px;
}

.openings--session {
  box-sizing: border-box;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 10px 8px 16px;
}

@media (min-width: 2200px) {
  .openings--session {
    max-width: 2100px;
  }
}
.openings__session-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.openings__back-lib-btn {
  padding: 6px 12px;
  background: #444;
  color: #ccc;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.openings__back-lib-btn:hover {
  background: #555;
}

.openings__session-title {
  margin: 0;
  font-size: 1.15em;
}

.openings__session-meta {
  font-size: 0.85em;
  color: #999;
}

.openings__flip-btn {
  padding: 4px 10px;
  background: #333;
  color: #ccc;
  border: 1px solid #555;
  border-radius: 3px;
  cursor: pointer;
  font-size: 1.1em;
}
.openings__flip-btn:hover {
  background: #444;
}

.openings__session-body {
  ---openings-rail-width: 72px;
  ---openings-layout-gap: 12px;
  ---openings-left-slot-min: 264px;
  ---openings-right-slot-min: 240px;
  ---openings-split-handle-width: 12px;
  ---openings-right-min-width: calc(
    var(---openings-left-slot-min) +
    var(---openings-split-handle-width) +
    var(---openings-right-slot-min)
  );
  ---openings-eval-slot-width: 0px;
  ---openings-eval-slot-gap: 0px;
  ---openings-board-size: min(
    calc(
      (
        100vw -
        16px -
        var(---openings-rail-width) -
        var(---openings-right-min-width) -
        (var(---openings-layout-gap) * 2) -
        var(---openings-eval-slot-width) -
        var(---openings-eval-slot-gap)
      ) * var(---board-scale)
    ),
    calc((100vh - 5rem) * var(---board-scale))
  );
  ---openings-board-col-width: calc(
    var(---openings-board-size) +
    var(---openings-eval-slot-width) +
    var(---openings-eval-slot-gap)
  );
  ---openings-player-strip-height: 32px;
  ---openings-board-bottom-gap: 8px;
  ---openings-left-slot-fr: 60fr;
  ---openings-right-slot-fr: 40fr;
  display: grid;
  grid-template-columns: var(---openings-rail-width) var(---openings-board-col-width) minmax(var(---openings-right-min-width), 1fr);
  gap: var(---openings-layout-gap);
  align-items: start;
}

.openings__session-body--eval-on {
  ---openings-eval-slot-width: 26px;
  ---openings-eval-slot-gap: 4px;
}

.openings__session-body--tree {
  grid-template-rows: calc(var(---openings-board-size) + var(---openings-player-strip-height) + var(---openings-player-strip-height)) var(---openings-board-bottom-gap) auto;
}

.openings__tool-rail {
  grid-column: 1;
  grid-row: 1/span 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
  align-self: start;
}

.openings__tool-rail-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 10px 4px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #666;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.openings__tool-rail-btn:hover {
  background: #222;
  color: #aaa;
}
.openings__tool-rail-btn--active {
  background: #1a1a2e;
  color: #8b9fe8;
  border-left: 2px solid #8b9fe8;
}

.openings__tool-rail-icon {
  font-size: 1.4rem;
}
.openings__tool-rail-icon[data-icon]::before {
  font-family: "lichess";
  content: attr(data-icon);
}

.openings__tool-rail-label {
  font-size: 0.56rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 64px;
}

.openings__board-col {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.openings__board-stage {
  display: flex;
  align-items: stretch;
  gap: var(---openings-eval-slot-gap);
  width: 100%;
}

.openings__eval-slot {
  flex: 0 0 var(---openings-eval-slot-width);
  width: var(---openings-eval-slot-width);
  height: var(---openings-board-size);
}
.openings__eval-slot .eval-bar {
  width: 100%;
  height: 100%;
}

.openings__tool-content {
  grid-column: 2/-1;
  min-width: 0;
}
.openings__tool-content--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

.openings__tool-placeholder-inner {
  text-align: center;
  color: #666;
}
.openings__tool-placeholder-inner h3 {
  font-size: 1.2em;
  margin: 0 0 8px;
  color: #888;
}
.openings__tool-placeholder-inner p {
  font-size: 0.9em;
  margin: 0;
}

.openings__session-panel {
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
  overflow-x: hidden;
  position: relative;
}

.openings__right-workspace {
  grid-column: 3;
  grid-row: 1/span 3;
  min-width: 0;
  position: relative;
}

.openings__right-columns,
.openings__nav-tools-row {
  display: grid;
  grid-template-columns: minmax(var(---openings-left-slot-min), var(---openings-left-slot-fr)) var(---openings-split-handle-width) minmax(var(---openings-right-slot-min), var(---openings-right-slot-fr));
  min-width: 0;
}

.openings__right-columns {
  height: calc(var(---openings-player-strip-height) + var(---openings-board-size));
  overflow: hidden;
  align-items: stretch;
}

.openings__data-column {
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

.openings__data-column-inner {
  width: 100%;
  height: 100%;
  min-width: 0;
}

.openings__data-column-inner--tree {
  display: grid;
  grid-template-rows: var(---openings-player-strip-height) minmax(0, 1fr);
  max-width: 34rem;
}

.openings__data-column-inner--engine {
  display: flex;
  flex-direction: column;
  max-width: 22rem;
}

.openings__tree-top {
  min-width: 0;
  overflow: visible;
}
.openings__tree-top .openings__color-toggle {
  height: 100%;
  margin: 0;
}
.openings__tree-top .openings__color-toggle button {
  min-height: 0;
  padding: 3px 0;
}

.openings__tree-scroll {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
}

.openings__engine-fixed {
  flex: 0 0 auto;
  min-width: 0;
}

.openings__engine-played-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.openings__split-handle {
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: var(---openings-split-handle-width);
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: col-resize;
  outline: none;
}
.openings__split-handle:hover .openings__split-handle-grip, .openings__split-handle:focus-visible .openings__split-handle-grip {
  background: #4b5f4b;
  opacity: 0.9;
}

.openings__split-handle-grip {
  width: 2px;
  min-height: 100%;
  background: #303030;
  opacity: 0.65;
  transition: background 0.12s, opacity 0.12s;
}

body.openings-column-resizing {
  user-select: none;
  cursor: col-resize;
}

.openings__nav-tools-row {
  margin-top: var(---openings-board-bottom-gap);
  align-items: stretch;
}

.openings__nav-slot,
.openings__future-tools-slot {
  min-width: 0;
}

.openings__future-tools-slot {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  max-width: 22rem;
  background: #111;
  border-top: 1px solid #242424;
}

.openings__swap-columns-btn {
  min-width: 44px;
  padding: 0 10px;
  border: 0;
  border-left: 1px solid #242424;
  background: #151515;
  color: #858585;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  cursor: pointer;
}
.openings__swap-columns-btn:hover, .openings__swap-columns-btn:focus-visible {
  background: #202020;
  color: #c0c0c0;
  outline: none;
}

.openings__swap-columns-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.openings__right-underboard {
  margin-top: 12px;
  max-width: calc(34rem + var(---openings-split-handle-width) + 22rem);
  min-width: 0;
}

.openings__underboard {
  grid-column: 2;
  grid-row: 3;
  min-width: 0;
}

.openings__repertoire-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0 8px;
  border-bottom: 1px solid #2a2a2a;
  margin-bottom: 6px;
}

.openings__repertoire-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8b9fe8;
}

.openings__repertoire-context {
  font-size: 0.78rem;
  color: #666;
}

.openings__opponent-repertoire-overview {
  margin-bottom: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #222;
}

.openings__overview-wdl {
  margin-bottom: 6px;
}

.openings__overview-wdl-bar {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 3px;
}
.openings__overview-wdl-bar .wdl-w {
  background: #5b9b5b;
}
.openings__overview-wdl-bar .wdl-d {
  background: #666;
}
.openings__overview-wdl-bar .wdl-l {
  background: #9b5b5b;
}

.openings__overview-wdl-counts {
  display: flex;
  gap: 10px;
  font-size: 0.72rem;
}
.openings__overview-wdl-counts .wdl-w {
  color: #5b9b5b;
}
.openings__overview-wdl-counts .wdl-d {
  color: #888;
}
.openings__overview-wdl-counts .wdl-l {
  color: #9b5b5b;
}

.openings__overview-stats {
  display: flex;
  gap: 12px;
  margin-top: 6px;
}

.openings__overview-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.openings__overview-stat-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #555;
}

.openings__overview-stat-value {
  font-size: 0.82rem;
  color: #ccc;
  font-weight: 500;
}

.openings__overview-caveat {
  font-size: 0.68rem;
  color: #555;
  margin-top: 5px;
  font-style: italic;
}

.openings__opponent-repertoire-summary {
  margin-bottom: 10px;
  border-bottom: 1px solid #222;
  padding-bottom: 8px;
}

.openings__sum-section {
  margin-bottom: 8px;
}

.openings__sum-title {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #555;
  margin-bottom: 4px;
}

.openings__sum-perspective {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.openings__sum-color {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #aaa;
}
.openings__sum-color .white-dot {
  color: #ccc;
}
.openings__sum-color .black-dot {
  color: #777;
}

.openings__mini-wdl {
  display: flex;
  flex: 1;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  min-width: 40px;
}
.openings__mini-wdl .wdl-w {
  background: #5b9b5b;
}
.openings__mini-wdl .wdl-d {
  background: #555;
}
.openings__mini-wdl .wdl-l {
  background: #9b5b5b;
}

.openings__sum-speeds {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.openings__sum-speed-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  cursor: pointer;
  min-width: 52px;
  transition: background 0.1s, border-color 0.1s;
}
.openings__sum-speed-card:hover {
  background: #222;
  border-color: #444;
}
.openings__sum-speed-card--active {
  background: #1a1a2e;
  border-color: #8b9fe8;
}

.openings__sum-speed-name {
  font-size: 0.65rem;
  text-transform: uppercase;
  color: #888;
  letter-spacing: 0.04em;
}

.openings__sum-speed-count {
  font-size: 0.85rem;
  color: #ccc;
  font-weight: 500;
}

.openings__sum-recency {
  display: flex;
  gap: 12px;
  font-size: 0.75rem;
  color: #888;
}

.openings__line-insights {
  margin-bottom: 10px;
  border-bottom: 1px solid #222;
  padding-bottom: 8px;
}

.openings__insights-header {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #555;
  margin-bottom: 6px;
}

.openings__insight-group {
  margin-bottom: 6px;
}

.openings__insight-group-label {
  font-size: 0.63rem;
  color: #666;
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.openings__insight-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 4px 8px;
  margin-bottom: 2px;
  background: #161616;
  border: 1px solid #252525;
  border-radius: 3px;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}
.openings__insight-card:hover {
  background: #1e1e1e;
  border-color: #333;
}

.openings__insight-moves {
  font-size: 0.75rem;
  color: #ccc;
  font-family: monospace;
}

.openings__insight-meta {
  display: flex;
  gap: 6px;
  align-items: center;
}

.openings__insight-freq {
  font-size: 0.68rem;
  color: #666;
}

.openings__insight-pct {
  font-size: 0.68rem;
  color: #8b9fe8;
}

.openings__prep-zone {
  background: #141414;
  border: 1px solid #1e1e1e;
  border-radius: 4px;
  padding: 8px;
  margin-bottom: 10px;
}
.openings__prep-zone .openings__opponent-repertoire-overview {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.openings__prep-zone .openings__opponent-repertoire-overview:not(:last-child) {
  border-bottom: 1px solid #1e1e1e;
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.openings__prep-zone .openings__opponent-repertoire-summary {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.openings__prep-zone .openings__opponent-repertoire-summary:not(:last-child) {
  border-bottom: 1px solid #1e1e1e;
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.openings__prep-zone .openings__line-insights {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.openings__prep-zone-loading {
  font-size: 0.75rem;
  color: #555;
  padding: 4px 0;
  font-style: italic;
}

.openings__zone-divider {
  height: 1px;
  background: #252525;
  margin: 6px 0 8px;
}

.openings__prep-report {
  padding: 8px 12px;
  max-width: 900px;
}

.openings__pr-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0 10px;
  border-bottom: 1px solid #2a2a2a;
  margin-bottom: 12px;
}

.openings__pr-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7ba4d4;
}

.openings__pr-context {
  font-size: 0.8rem;
  color: #666;
}

.openings__pr-loading {
  font-size: 0.8rem;
  color: #555;
  padding: 16px 0;
  font-style: italic;
}

.openings__pr-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.openings__pr-note {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  background: #141414;
  border: 1px solid #1e1e1e;
  border-radius: 4px;
  flex: 1;
  min-width: 180px;
  max-width: 300px;
}
.openings__pr-note--low {
  opacity: 0.7;
}

.openings__pr-note-title {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #555;
}

.openings__pr-note-body {
  font-size: 0.78rem;
  color: #bbb;
  line-height: 1.4;
}

.openings__pr-overview {
  display: flex;
  gap: 20px;
  margin-bottom: 14px;
  align-items: flex-start;
}

.openings__pr-wdl {
  flex-shrink: 0;
  min-width: 160px;
}

.openings__pr-wdl-bar {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}
.openings__pr-wdl-bar .wdl-w {
  background: #5b9b5b;
}
.openings__pr-wdl-bar .wdl-d {
  background: #666;
}
.openings__pr-wdl-bar .wdl-l {
  background: #9b5b5b;
}

.openings__pr-wdl-counts {
  display: flex;
  gap: 10px;
  font-size: 0.72rem;
}
.openings__pr-wdl-counts .wdl-w {
  color: #5b9b5b;
}
.openings__pr-wdl-counts .wdl-d {
  color: #888;
}
.openings__pr-wdl-counts .wdl-l {
  color: #9b5b5b;
}

.openings__pr-ecos {
  flex: 1;
  min-width: 0;
}

.openings__pr-section-title {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #555;
  margin-bottom: 6px;
}

.openings__pr-eco-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.75rem;
  color: #aaa;
  padding: 2px 0;
}
.openings__pr-eco-row:not(:last-child) {
  border-bottom: 1px solid #1a1a1a;
}

.openings__pr-eco-code {
  font-size: 0.68rem;
  color: #555;
  font-family: monospace;
  flex-shrink: 0;
}

.openings__pr-eco-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
}

.openings__pr-eco-count {
  font-size: 0.68rem;
  color: #666;
  flex-shrink: 0;
}

.openings__pr-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.openings__pr-col {
  min-width: 0;
}

.openings__pr-lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.openings__pr-line-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 4px 8px;
  background: #161616;
  border: 1px solid #222;
  border-radius: 3px;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}
.openings__pr-line-row:hover {
  background: #1e1e1e;
  border-color: #333;
}

.openings__pr-line-moves {
  font-size: 0.75rem;
  color: #ccc;
  font-family: monospace;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.openings__pr-line-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
  margin-left: 8px;
}

.openings__pr-line-freq {
  font-size: 0.68rem;
  color: #555;
}

.openings__pr-line-pct {
  font-size: 0.68rem;
  color: #7ba4d4;
}

.openings__pr-line-recent {
  font-size: 0.63rem;
  color: #5b9b5b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.openings__pr-weaknesses {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.openings__pr-weakness-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 8px;
  background: #161616;
  border: 1px solid #222;
  border-radius: 3px;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}
.openings__pr-weakness-row:hover {
  background: #1e1e1e;
  border-color: #333;
}
.openings__pr-weakness-row.openings__pr-weakness--low-score {
  border-left: 2px solid #9b5b5b;
}
.openings__pr-weakness-row.openings__pr-weakness--drift {
  border-left: 2px solid #7a6a4a;
}
.openings__pr-weakness-row.openings__pr-weakness--fresh-risk {
  border-left: 2px solid #5b7b9b;
}
.openings__pr-weakness-row.openings__pr-weakness--narrow {
  border-left: 2px solid #7a5b9b;
}

.openings__pr-weakness-label {
  font-size: 0.65rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  min-width: 60px;
}

.openings__pr-weakness-moves {
  font-size: 0.75rem;
  color: #bbb;
  font-family: monospace;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.openings__pr-weakness-freq {
  font-size: 0.68rem;
  color: #555;
  flex-shrink: 0;
}

.openings__pr-empty {
  font-size: 0.75rem;
  color: #444;
  padding: 8px 0;
  font-style: italic;
}

.openings__pr-caveat {
  font-size: 0.68rem;
  color: #555;
  margin-top: 6px;
  font-style: italic;
}

.openings__pr-section-hint {
  font-size: 0.68rem;
  color: #444;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
}

.openings__pr-line-nav {
  font-size: 0.75rem;
  color: #3a3a3a;
  flex-shrink: 0;
  margin-left: 4px;
  transition: color 0.1s;
}
.openings__pr-line-row:hover .openings__pr-line-nav, .openings__pr-target-row:hover .openings__pr-line-nav, .openings__pr-weakness-row:hover .openings__pr-line-nav {
  color: #7ba4d4;
}

.openings__pr-line-caveat {
  font-size: 0.63rem;
  color: #444;
  font-style: italic;
}

.openings__pr-boost-badge {
  font-size: 0.63rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 4px;
  border-radius: 2px;
  flex-shrink: 0;
}
.openings__pr-boost-badge.openings__pr-boost--hot {
  color: #d4a44a;
  background: rgba(212, 164, 74, 0.1);
  border: 1px solid rgba(212, 164, 74, 0.2);
}
.openings__pr-boost-badge.openings__pr-boost--fresh {
  color: #5b9b7a;
  background: rgba(91, 155, 122, 0.1);
  border: 1px solid rgba(91, 155, 122, 0.2);
}

.openings__pr-target-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 4px 8px;
  background: #161616;
  border: 1px solid #222;
  border-left: 2px solid #5b7b5b;
  border-radius: 3px;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}
.openings__pr-target-row:hover {
  background: #1e1e1e;
  border-color: #333;
  border-left-color: #7ba47a;
}

.openings__pr-target-score {
  font-size: 0.68rem;
  color: #5b9b7a;
  flex-shrink: 0;
}

.openings__pr-risk-strip {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #1e1e1e;
}

.openings__board-wrap {
  position: relative;
  flex: 0 0 var(---openings-board-size);
  width: var(---openings-board-size);
  aspect-ratio: 1/1;
  overflow: visible;
}
.openings__board-wrap .openings__board {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.openings__off-tree-indicator {
  align-self: flex-start;
  margin-top: 6px;
  padding: 3px 7px;
  border: 1px solid #3a3420;
  border-radius: 4px;
  background: #201c12;
  color: #d8c884;
  font-size: 0.72rem;
  line-height: 1.2;
  letter-spacing: 0;
}

.openings__color-toggle {
  display: flex;
  border: 1px solid #303030;
  border-radius: 4px;
  overflow: hidden;
  margin: 8px 0 0;
}
.openings__color-toggle button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 6px 0;
  min-height: 46px;
  background: #222;
  color: #666;
  border: none;
  border-right: 1px solid #303030;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background 0.12s, color 0.12s;
}
.openings__color-toggle button:last-child {
  border-right: none;
}
.openings__color-toggle button:hover:not(.active) {
  background: #2a2a2a;
  color: #aaa;
}
.openings__color-toggle button.white-btn.active {
  background: #d0d0d0;
  color: #111;
  box-shadow: inset 0 0 0 4px rgba(35, 110, 35, 0.75), inset 0 5px 8px -4px rgba(0, 0, 0, 0.28);
}
.openings__color-toggle button.black-btn.active {
  background: #181818;
  color: #ccc;
  box-shadow: inset 0 0 0 2px rgba(80, 160, 80, 0.55), inset 0 3px 8px -2px rgba(0, 0, 0, 0.6);
}
.openings__color-toggle .openings__color-dot {
  font-size: 0.72rem;
  line-height: 1;
}
.openings__color-toggle .openings__color-username {
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  opacity: 0.55;
  line-height: 1;
  min-height: 0.75em;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.openings__color-toggle .openings__color-label {
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}
.openings__color-toggle .openings__color-flip {
  flex: 0 0 36px;
  letter-spacing: 0;
  text-transform: none;
}
.openings__color-toggle .openings__color-flip[data-icon]::before {
  font-family: "lichess";
  content: attr(data-icon);
  font-style: normal;
  font-weight: normal;
  font-size: 1rem;
}

.openings__board {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.openings__board cg-container {
  overflow: visible !important;
}

.openings__player-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  font-size: 0.82rem;
  color: #888;
  min-height: 24px;
}
.openings__player-strip--target {
  color: #ccc;
  font-weight: 600;
}
.openings__player-strip--top {
  border-bottom: 1px solid #2a2a2a;
}
.openings__player-strip--bottom {
  border-top: 1px solid #2a2a2a;
}

.openings__player-dot {
  font-size: 0.9rem;
  line-height: 1;
}

.openings__player-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.openings__ceval {
  margin-top: 4px;
}

.openings__engine-lines {
  position: relative;
}
.openings__engine-lines--stale .pv_box {
  opacity: 0.48;
  filter: saturate(0.65);
}

.openings__engine-lines-stale {
  position: absolute;
  top: 4px;
  right: 6px;
  z-index: 1;
  padding: 2px 6px;
  border: 1px solid #3a3420;
  border-radius: 4px;
  background: #201c12;
  color: #d8c884;
  font-size: 0.68rem;
  line-height: 1.2;
  letter-spacing: 0;
  pointer-events: none;
}

.openings__path {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
  font-size: 0.88em;
}

.openings__path-start {
  color: #999;
  cursor: pointer;
}
.openings__path-start:hover {
  color: #ccc;
}

.openings__path-move {
  color: #bbb;
  cursor: pointer;
}
.openings__path-move:hover {
  color: #fff;
  text-decoration: underline;
}
.openings__path-move::before {
  content: "›";
  color: #666;
}

.openings__nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.openings__nav-btn {
  padding: 4px 10px;
  background: #333;
  color: #ccc;
  border: 1px solid #555;
  border-radius: 3px;
  cursor: pointer;
  font-size: 1em;
}
.openings__nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.openings__nav-btn:hover:not(:disabled) {
  background: #444;
}

.openings__nav-depth {
  font-size: 0.85em;
  color: #888;
  margin-left: 8px;
}

.openings__tree-build {
  margin-bottom: 8px;
  padding: 6px 8px;
  background: #1a2520;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.openings__tree-build-bar {
  height: 6px;
  background: #252525;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}

.openings__tree-build-fill {
  height: 100%;
  background: linear-gradient(90deg, #2d7a3a, #4a9);
  border-radius: 3px;
  transition: width 0.15s ease-out;
}

.openings__tree-build-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.openings__tree-build-label {
  font-size: 0.75em;
  color: #8a8;
}

.openings__fetch-label {
  font-size: 0.75rem;
  color: #888;
  font-style: italic;
}

.openings__lines-panel {
  background: #1e1e1e;
  border-radius: 4px;
  padding: 10px;
  min-width: 0;
}

.openings__pos-header {
  padding: 7px 6px;
  margin-bottom: 8px;
  background: #272727;
  border: 1px solid #383838;
  border-radius: 4px;
}

.openings__pos-summary {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
}

.openings__pos-label {
  font-size: 0.78rem;
  color: #666;
}

.openings__pos-total {
  font-weight: 600;
  font-size: 0.95em;
}

.openings__moves-empty {
  text-align: center;
  color: #777;
  padding: 16px;
  font-size: 0.9em;
}

.openings__move-row {
  display: grid;
  grid-template-rows: 16px 18px;
  row-gap: 4px;
  align-content: center;
  box-sizing: border-box;
  height: 48px;
  padding: 5px 6px;
  border-radius: 3px;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.12s;
}
.openings__move-row:hover {
  background: #2a2a2a;
}

.openings__move-line {
  display: grid;
  grid-template-columns: auto 7.25rem minmax(max-content, 1fr);
  align-items: center;
  column-gap: 8px;
  min-height: 16px;
  line-height: 16px;
  min-width: 0;
}

.openings__move-san {
  font-weight: 700;
  font-size: 0.88em;
  color: #e8e8e8;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.openings__move-eval {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: 7.25rem;
  min-width: 7.25rem;
  height: 16px;
  line-height: 16px;
  overflow: hidden;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.openings__move-score {
  font-size: 0.78em;
  font-weight: 700;
  line-height: 1;
}

.openings__move-swing {
  color: #aaa;
  font-size: 0.74em;
  font-weight: 700;
  line-height: 1;
}

.openings__move-swing--bad {
  color: #ff7b72;
}

.openings__move-swing--good {
  color: #78d987;
}

.openings__move-book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  height: 1.1em;
  color: #b7a46a;
  font-size: 0.82em;
  line-height: 1;
}
.openings__move-book[data-icon]::before {
  font-family: "lichess";
  content: attr(data-icon);
}

.openings__deviation-badge {
  display: inline-block;
  margin-left: 4px;
  color: #e6a520;
  font-size: 0.75em;
  vertical-align: super;
}

.openings__move-row--deviation {
  border-left: 2px solid #e6a520;
  padding-left: 6px;
}

.openings__move-count {
  font-size: 0.85em;
  color: #bbb;
  justify-self: end;
  text-align: right;
  white-space: nowrap;
}

.openings__result-bar {
  display: block;
  height: 18px;
  border-radius: 4px;
  overflow: hidden;
  font-size: 0;
  white-space: nowrap;
  margin-top: 3px;
}

.openings__bar-w,
.openings__bar-d,
.openings__bar-b {
  display: inline-block;
  height: 18px;
  line-height: 18px;
  text-align: center;
  overflow: hidden;
  font-size: 11px;
  vertical-align: top;
  transition: width 0.3s;
}

.openings__bar-w {
  background: #ccc;
  color: #222;
  box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.2);
}

.openings__bar-d {
  background: #666;
  color: #ddd;
  box-shadow: inset 0 3px 5px rgba(255, 255, 255, 0.08);
  min-width: 3px;
}

.openings__bar-b {
  background: #333;
  color: #ddd;
  box-shadow: inset 0 3px 5px rgba(255, 255, 255, 0.08);
}

.openings__speed-filter {
  border-top: 1px solid #282828;
  margin-top: 8px;
  padding-top: 8px;
}

.openings__speed-label-row {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #444;
  margin-bottom: 6px;
}

.openings__speed-chips {
  display: flex;
  gap: 6px;
}

.openings__speed-chip {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 4px;
  background: #1a1a1a;
  color: #484848;
  border: 1px solid #252525;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  white-space: nowrap;
}
.openings__speed-chip:hover:not(.active) {
  background: #222;
  color: #666;
  border-color: #303030;
}
.openings__speed-chip.active {
  background: #2a2a2a;
  color: #b0b0b0;
  border-color: #404040;
}
.openings__speed-chip.active:hover {
  background: #313131;
  color: #c8c8c8;
}
.openings__speed-chip.no-games {
  opacity: 0.45;
}

.openings__speed-icon {
  font-size: 0.85rem;
  line-height: 1;
}
.openings__speed-icon[data-icon]::before {
  font-family: "lichess";
  content: attr(data-icon);
  font-style: normal;
  font-weight: normal;
}

.openings__speed-count {
  font-size: 0.68rem;
  font-weight: 700;
  color: #3a3a3a;
  background: #141414;
  border-radius: 3px;
  padding: 1px 4px;
  min-width: 16px;
  text-align: center;
  line-height: 1.4;
  letter-spacing: 0;
}
.active .openings__speed-count {
  background: #1e1e1e;
  color: #666;
}

.openings__tree-eval-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid #282828;
  margin-top: 8px;
  padding-top: 8px;
}

.openings__tree-eval-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #a8a8a8;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.openings__tree-eval-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.openings__tree-eval-activity {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  opacity: 0;
  visibility: hidden;
}

.openings__tree-eval-activity--active {
  opacity: 0.72;
  visibility: visible;
}

.openings__tree-eval-activity--refining {
  opacity: 0.48;
}

.openings__tree-eval-activity-icon {
  display: block;
  width: 12px;
  height: 12px;
  object-fit: contain;
}

.openings__tree-eval-switch {
  position: relative;
  width: 30px;
  height: 16px;
  border-radius: 999px;
  background: #181818;
  border: 1px solid #303030;
  transition: background 0.12s, border-color 0.12s;
}
.openings__tree-eval-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #777;
  transition: transform 0.12s, background 0.12s;
}

.openings__tree-eval-toggle input:checked + .openings__tree-eval-switch {
  background: #263426;
  border-color: #536f43;
}
.openings__tree-eval-toggle input:checked + .openings__tree-eval-switch::after {
  transform: translateX(14px);
  background: #9fcb79;
}

.openings__tree-eval-levels {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.openings__tree-eval-levels--disabled {
  opacity: 0.48;
}

.openings__tree-eval-level {
  padding: 5px 7px;
  background: #1a1a1a;
  color: #555;
  border: 1px solid #252525;
  border-radius: 3px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
}
.openings__tree-eval-level:hover:not(:disabled):not(.active) {
  background: #222;
  color: #777;
}
.openings__tree-eval-level.active {
  background: #2a2a2a;
  color: #b8b8b8;
  border-color: #444;
}
.openings__tree-eval-level:disabled {
  cursor: not-allowed;
}

.openings__date-range-row {
  position: relative;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid #1e1e1e;
}

.openings__date-range-btn-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}

.openings__date-range-btn {
  flex: 1;
  padding: 5px 8px;
  background: #2a2a2a;
  color: #b0b0b0;
  border: 1px solid #404040;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-align: left;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.openings__date-range-btn:hover {
  background: #313131;
  color: #c8c8c8;
  border-color: #505050;
}
.openings__date-range-btn.active {
  background: #2a2a2a;
  color: #b0b0b0;
  border-color: #404040;
}

.openings__date-range-clear {
  flex-shrink: 0;
  padding: 4px 7px;
  background: #1a1a1a;
  color: #555;
  border: 1px solid #252525;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
}
.openings__date-range-clear:hover {
  background: #282828;
  color: #aaa;
  border-color: #404040;
}

.openings__date-popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
}

.openings__date-range-popup {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  z-index: 51;
  min-width: 160px;
  background: #222;
  border: 1px solid #333;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.openings__date-range-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  color: #aaa;
  border: none;
  cursor: pointer;
  font-size: 0.78rem;
  gap: 8px;
  text-align: left;
}
.openings__date-range-option:hover {
  background: #2a2a2a;
  color: #ddd;
}
.openings__date-range-option.active {
  color: #e0e0e0;
  background: #2e2e2e;
}

.openings__date-range-count {
  font-size: 0.7rem;
  color: #555;
  font-weight: 700;
  background: #1a1a1a;
  border-radius: 3px;
  padding: 1px 4px;
}
.active .openings__date-range-count {
  color: #777;
}

.openings__filter-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 4px 0 6px;
}

.openings__filter-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  background: #2a2a2a;
  color: #b0b0b0;
  border: 1px solid #404040;
  border-radius: 3px;
  font-size: 0.72rem;
  font-weight: 600;
}

.openings__filter-badge-clear {
  padding: 0 3px;
  background: transparent;
  color: #666;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
}
.openings__filter-badge-clear:hover {
  color: #c8c8c8;
}

.openings__move-list {
  margin-top: 12px;
}
.openings__move-list .analyse__moves {
  flex: 0 1 auto;
  min-height: 0;
  overflow: visible;
  background: #1e1e1e;
  border-radius: 4px;
  padding: 6px 4px;
}
.openings__move-list .move-list-inner,
.openings__move-list .tview2-column {
  flex: 0 1 auto;
  overflow: visible;
}

.openings__engine-played-scroll .openings__move-list {
  margin-top: 8px;
}

@media (max-width: 700px) {
  .openings__move-list .tview2-column {
    max-height: clamp(7rem, 28vh, 16em);
    overflow-y: auto;
    overflow-x: hidden;
  }
}
.openings__samples {
  margin-top: 12px;
  background: #1e1e1e;
  border-radius: 4px;
  padding: 10px;
}

.openings__samples-title {
  margin: 0 0 8px;
  font-size: 0.95em;
  color: #bbb;
}

.openings__sample-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}

.openings__sample-control-chip {
  width: auto;
}

.openings__samples-empty {
  color: #777;
  font-size: 0.88em;
  text-align: center;
  padding: 8px;
}

.openings__samples-list {
  max-height: clamp(14rem, 32vh, 24rem);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
}

.openings__sample-row {
  position: relative;
  padding: 8px 8px 28px;
  border-radius: 3px;
}
.openings__sample-row:hover {
  background: #2a2a2a;
}
.openings__sample-row + .openings__sample-row {
  border-top: 1px solid #2a2a2a;
}
.openings__sample-row--clickable {
  cursor: pointer;
}
.openings__sample-row--clickable:hover {
  background: #2a3a2a;
}

.openings__sample-players {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.92em;
}

.openings__sample-player-lines {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.openings__sample-player-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.openings__sample-player-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.openings__sample-color-icon {
  flex: 0 0 auto;
  width: 0.72em;
  height: 0.72em;
  border-radius: 50%;
  border: 1px solid #555;
}
.openings__sample-color-icon--white {
  background: #f2f2f2;
  border-color: #999;
}
.openings__sample-color-icon--black {
  background: #333;
  border-color: #777;
}

.openings__sample-result {
  flex: 0 0 auto;
  font-weight: 600;
  color: #999;
}
.openings__sample-result--win {
  color: #6fc36f;
}
.openings__sample-result--loss {
  color: #df6464;
}
.openings__sample-result--draw {
  color: #aaa;
}

.openings__sample-info {
  font-size: 0.8em;
  color: #777;
  margin-top: 2px;
}

.openings__sample-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  justify-content: flex-end;
}

.openings__sample-next-move {
  position: absolute;
  left: 8px;
  bottom: 6px;
  max-width: calc(100% - 120px);
  padding: 2px 7px;
  border-radius: 3px;
  background: #2b342c;
  color: #9fca9f;
  font-size: 0.78em;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.openings__sample-copy,
.openings__sample-link {
  font-size: 0.78em;
  padding: 2px 8px;
  background: #333;
  color: #bbb;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
}
.openings__sample-copy:hover,
.openings__sample-link:hover {
  background: #444;
  color: #fff;
}

.openings__sample-link-wrap {
  display: inline-flex;
}

.openings__sample-preview {
  position: fixed;
  z-index: 1000;
  padding: 4px;
  border-radius: 4px;
  background: #111;
  border: 1px solid #444;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.openings__sample-preview-board {
  width: 100%;
  height: 100%;
}

.openings__explorer {
  margin-top: 12px;
  background: #1a1a1a;
  border-radius: 4px;
  overflow: hidden;
  font-size: 0.9em;
}

.analyse__middle-lower .openings__explorer {
  margin-top: 0;
  border-radius: 0;
}

.openings__explorer-tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border-bottom: 1px solid #242424;
}

.openings__explorer-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: #888;
  font-size: 0.82em;
  padding: 6px 0;
  border-radius: 0;
  cursor: pointer;
}
.openings__explorer-tab:hover {
  color: #bbb;
  background: #222;
}
.openings__explorer-tab.active {
  background: #2b2b2b;
  color: #ddd;
  font-weight: 600;
}

.openings__explorer-gear {
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  color: #888;
}
.openings__explorer-gear:hover {
  color: #ccc;
  background: #222;
}
.openings__explorer-gear.active {
  color: #ddd;
  background: #2b2b2b;
}

.openings__explorer-config {
  padding: 8px 10px;
}

.openings__explorer-config-section {
  margin-bottom: 10px;
}
.openings__explorer-config-section label {
  display: block;
  font-size: 0.8em;
  color: #999;
  margin-bottom: 4px;
}

.openings__explorer-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.openings__explorer-filter-btn {
  background: #2a2a2a;
  border: 1px solid #444;
  color: #888;
  font-size: 0.78em;
  padding: 2px 6px;
  border-radius: 3px;
  cursor: pointer;
}
.openings__explorer-filter-btn:hover {
  color: #bbb;
}
.openings__explorer-filter-btn.active {
  background: #3a5a3a;
  border-color: #4a8;
  color: #8d8;
}

.openings__explorer-date-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82em;
  color: #999;
  margin-bottom: 4px;
}
.openings__explorer-date-label input {
  background: #222;
  border: 1px solid #444;
  color: #ccc;
  padding: 3px 6px;
  border-radius: 3px;
  font-size: 0.9em;
  width: 90px;
}

.openings__explorer-player-input {
  width: 100%;
  background: #222;
  border: 1px solid #444;
  color: #ccc;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 0.88em;
  margin-bottom: 6px;
  box-sizing: border-box;
}

.openings__explorer-player-prev {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: 6px;
}

.openings__explorer-prev-btn {
  background: #2a2a2a;
  border: 1px solid #444;
  color: #aaa;
  font-size: 0.78em;
  padding: 2px 6px;
  border-radius: 3px;
  cursor: pointer;
}
.openings__explorer-prev-btn:hover {
  color: #ddd;
  border-color: #666;
}

.openings__explorer-color-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.openings__explorer-color-row label {
  margin-bottom: 0;
}

.openings__explorer-config-close {
  display: block;
  width: 100%;
  background: #2a3a2a;
  border: 1px solid #4a8;
  color: #8d8;
  padding: 5px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.88em;
  margin-top: 4px;
}
.openings__explorer-config-close:hover {
  background: #3a4a3a;
}

.openings__explorer-loading,
.openings__explorer-empty {
  color: #777;
  font-size: 0.88em;
  text-align: center;
  padding: 10px 8px;
}

.openings__explorer-error {
  color: #e05050;
  font-size: 0.88em;
  padding: 8px 10px;
}

.openings__explorer-box {
  position: relative;
  min-height: 48px;
  transition: opacity 0.3s;
}
.openings__explorer-box.reduced {
  opacity: 0.5;
}
.openings__explorer-box.loading .overlay {
  opacity: 1;
  pointer-events: all;
}
.openings__explorer-box .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 1;
}
.openings__explorer-box .overlay::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 3px solid #555;
  border-top-color: #6bbfbf;
  border-radius: 50%;
  animation: explorer-spin 0.6s linear infinite;
}

@keyframes explorer-spin {
  to {
    transform: rotate(360deg);
  }
}
.openings__explorer-message {
  padding: 16px 10px;
  text-align: center;
  color: #aaa;
}
.openings__explorer-message strong {
  display: block;
  font-size: 1em;
  color: #ccc;
  margin-bottom: 6px;
}

.openings__explorer-explanation {
  font-size: 0.85em;
  color: #888;
  margin: 4px 0 0;
}
.openings__explorer-explanation--notice {
  color: #9aaabd;
}

.openings__explorer-retry {
  margin-top: 10px;
  padding: 4px 14px;
  background: #1e2e1e;
  color: #8c8;
  border: 1px solid #3a5a3a;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.88em;
}
.openings__explorer-retry:hover {
  background: #2a3e2a;
}

.tablebase-view {
  padding: 0;
}

.tablebase__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  border-bottom: 1px solid #2a2a2a;
  font-size: 0.78rem;
}
.tablebase__header .tablebase__label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5cb;
}
.tablebase__header .tablebase__pieces {
  color: #666;
}

.tablebase__body {
  padding: 4px 0;
}

.tablebase__section {
  margin-bottom: 2px;
}

.tablebase__section-title {
  padding: 4px 10px 2px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #666;
}

.tablebase {
  width: 100%;
  border-collapse: collapse;
}
.tablebase .tablebase__row {
  cursor: pointer;
}
.tablebase .tablebase__row:hover {
  background: rgba(255, 255, 255, 0.04);
}
.tablebase .tablebase__row td {
  padding: 3px 10px;
}
.tablebase .tablebase__san {
  font-weight: 600;
  color: #ddd;
  width: 4em;
}
.tablebase .tablebase__result {
  text-align: right;
}

result {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.78rem;
  font-weight: 700;
}
result.white {
  background: rgba(34, 197, 94, 0.18);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.25);
}
result.black {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.2);
}
result.draws {
  background: rgba(156, 163, 175, 0.12);
  color: #9ca3af;
  border: 1px solid rgba(156, 163, 175, 0.18);
}

.openings__explorer-connect-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 18px;
  background: #1a3a5c;
  color: #7bc;
  border: 1px solid #2a5a8c;
  border-radius: 3px;
  text-decoration: none;
  font-size: 0.9em;
  cursor: pointer;
}
.openings__explorer-connect-btn:hover {
  background: #244d78;
  color: #9cd;
}

.openings__explorer-auth-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.openings__explorer-auth-actions .openings__explorer-connect-btn,
.openings__explorer-auth-actions .openings__explorer-retry {
  margin-top: 0;
}

.openings__explorer-opening {
  font-size: 0.88em;
  color: #8c8;
  padding: 4px 10px;
}

.openings__explorer-data {
  padding-bottom: 4px;
}

table.explorer-moves {
  width: 100%;
  border-collapse: collapse;
  will-change: transform, opacity;
}
table.explorer-moves th {
  font-size: 0.78rem;
  line-height: 1.8em;
  background: #252525;
  padding-left: 7px;
  color: #999;
  font-weight: normal;
  text-align: left;
}
table.explorer-moves th:last-child {
  padding-right: 7px;
}
table.explorer-moves td {
  cursor: pointer;
  padding: 3px 0 3px 7px;
}
table.explorer-moves td:last-child {
  padding-right: 7px;
}
table.explorer-moves td:first-child {
  font-weight: 600;
  line-height: 28px;
}
table.explorer-moves td:nth-child(2),
table.explorer-moves td:nth-child(3) {
  font-size: 0.78em;
  text-align: right;
  color: #aaa;
  white-space: nowrap;
}
table.explorer-moves td:last-child {
  width: 100%;
}
table.explorer-moves tr:nth-child(even) {
  background: #1f1f1f;
}
table.explorer-moves tr:hover {
  background: rgba(74, 136, 136, 0.12);
}
table.explorer-moves tr.sum {
  background: #222;
  font-weight: bold;
}
table.explorer-moves tr.sum td {
  cursor: default;
}

.openings__explorer-data .bar {
  display: flex;
  height: 16px;
  border-radius: 2px;
  overflow: hidden;
}
.openings__explorer-data .bar span {
  display: inline-block;
  overflow: hidden;
  text-align: center;
  height: 16px;
  line-height: 14px;
  font-size: 0.82em;
  transition: width 1s;
  vertical-align: middle;
}
.openings__explorer-data .bar span.white {
  background: #ccc;
  color: #222;
  box-shadow: 0 -3px 5px rgba(0, 0, 0, 0.2) inset;
}
.openings__explorer-data .bar span.draws {
  background: #666;
  color: #ddd;
  box-shadow: 0 3px 5px rgba(255, 255, 255, 0.08) inset;
}
.openings__explorer-data .bar span.black {
  background: #333;
  color: #ddd;
  box-shadow: 0 3px 5px rgba(255, 255, 255, 0.08) inset;
}

table.explorer-games {
  width: 100%;
  border-collapse: collapse;
  margin-top: 4px;
  font-size: 0.85em;
}
table.explorer-games thead th {
  text-align: left;
  padding: 4px 6px;
  color: #aaa;
  font-weight: normal;
  border-bottom: 1px solid #444;
}
table.explorer-games tbody tr {
  cursor: pointer;
  transition: background 0.1s;
}
table.explorer-games tbody tr:hover {
  background: #2a2a2a;
}
table.explorer-games td {
  padding: 3px 5px;
  white-space: nowrap;
  overflow: hidden;
  max-width: 0;
}
table.explorer-games td.ratings {
  width: 64px;
  text-align: right;
}
table.explorer-games td.ratings span {
  display: block;
  color: #999;
  font-size: 0.9em;
}
table.explorer-games td.players {
  width: auto;
  max-width: 140px;
}
table.explorer-games td.players span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
table.explorer-games td result {
  display: inline-block;
  padding: 1px 3px;
  border-radius: 2px;
  font-size: 0.85em;
  font-weight: bold;
}
table.explorer-games td result.white {
  background: #ccc;
  color: #222;
}
table.explorer-games td result.black {
  background: #333;
  color: #eee;
  border: 1px solid #555;
}
table.explorer-games td result.draws {
  background: #666;
  color: #eee;
}
table.explorer-games td.date {
  color: #999;
  font-size: 0.85em;
  width: 60px;
}
table.explorer-games td.speed {
  width: 28px;
  text-align: center;
}
table.explorer-games td.speed span {
  cursor: default;
}

@media (max-width: 700px) {
  .openings__session-body {
    grid-template-columns: 1fr;
    ---openings-eval-slot-width: 0px;
    ---openings-eval-slot-gap: 0px;
  }
  .openings__session-body--tree {
    grid-template-rows: auto;
  }
  .openings__session-body--tree .openings__session-panel {
    max-height: none;
    overflow-y: visible;
  }
  .openings__tool-rail {
    display: none;
  }
  .openings__board-col,
  .openings__session-panel,
  .openings__right-workspace,
  .openings__underboard {
    grid-column: 1;
    grid-row: auto;
  }
  .openings__board-col {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .openings__board-wrap {
    width: 100%;
    flex-basis: auto;
    max-width: none;
    margin: 0;
  }
  .openings__eval-slot {
    display: none;
  }
  .openings__right-workspace {
    margin-top: 12px;
  }
  .openings__right-columns {
    display: flex;
    flex-direction: column;
    height: auto;
    overflow: visible;
  }
  .openings__data-column {
    height: auto;
    overflow: visible;
  }
  .openings__data-column--tree {
    order: 1;
  }
  .openings__data-column--engine {
    order: 2;
  }
  .openings__data-column-inner,
  .openings__data-column-inner--tree,
  .openings__data-column-inner--engine {
    display: block;
    max-width: none;
    height: auto;
  }
  .openings__tree-top .openings__color-toggle {
    min-height: 46px;
  }
  .openings__tree-scroll,
  .openings__engine-played-scroll {
    overflow: visible;
    max-height: none;
  }
  .openings__split-handle,
  .openings__nav-split-spacer {
    display: none;
  }
  .openings__nav-tools-row {
    display: block;
    margin-top: 8px;
  }
  .openings__future-tools-slot {
    margin-top: 6px;
    min-height: 36px;
    max-width: none;
  }
  .openings__right-underboard {
    max-width: none;
  }
  .openings__collections {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) and (orientation: landscape), (max-width: 700px) and (max-height: 520px) {
  .openings__board-col {
    width: min(100%, 400px, 82vh);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }
}
.puzzle__rated-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--color-border, #3a3a3a);
  font-size: 0.82rem;
}
.puzzle__rated-badge--practice-only {
  color: #999;
  font-style: italic;
}
.puzzle__rated-badge__mode {
  display: flex;
  gap: 4px;
}
.puzzle__rated-badge__btn {
  padding: 3px 10px;
  border: 1px solid #555;
  background: transparent;
  color: #ccc;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.8rem;
}
.puzzle__rated-badge__btn.active {
  background: var(--color-accent, #629924);
  border-color: var(--color-accent, #629924);
  color: #fff;
}
.puzzle__rated-badge__controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.puzzle__rated-badge__rating {
  font-weight: bold;
  color: #e0c060;
  font-size: 0.9rem;
  min-width: 36px;
  text-align: right;
}
.puzzle__rated-badge__difficulty {
  background: #2a2a2a;
  border: 1px solid #555;
  color: #ccc;
  border-radius: 3px;
  padding: 2px 4px;
  font-size: 0.8rem;
  cursor: pointer;
}

.puzzle__rating-display {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  font-size: 0.85rem;
  color: #bbb;
  border-top: 1px solid var(--color-border, #3a3a3a);
}
.puzzle__rating-display__label {
  color: #888;
}
.puzzle__rating-display__value {
  font-weight: bold;
  color: #e0c060;
}
.puzzle__rating-display__delta {
  font-weight: bold;
  font-size: 0.8rem;
}
.puzzle__rating-display__delta.positive {
  color: #5ca85c;
}
.puzzle__rating-display__delta.negative {
  color: #c05050;
}

.puzzle__solved-repeat-notice {
  padding: 6px 8px;
  background: #2a2a1a;
  border-left: 3px solid #c08030;
  color: #c0a060;
  font-size: 0.8rem;
  display: flex;
  gap: 6px;
  align-items: flex-start;
}
.puzzle__solved-repeat-notice__icon {
  font-style: normal;
}

.puzzle__assistance-warning {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
}
.puzzle__assistance-warning__modal {
  background: #222;
  border: 1px solid #555;
  border-radius: 6px;
  padding: 16px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.puzzle__assistance-warning__title {
  font-size: 0.95rem;
  font-weight: bold;
  color: #eee;
  margin: 0;
}
.puzzle__assistance-warning__body {
  font-size: 0.82rem;
  color: #bbb;
  margin: 0;
}
.puzzle__assistance-warning__remember {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #999;
  cursor: pointer;
}
.puzzle__assistance-warning__buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.puzzle__rated-stream-entry {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: #1e2a1e;
  border: 1px solid var(--color-accent, #629924);
  border-radius: 5px;
  font-size: 0.85rem;
}
.puzzle__rated-stream-entry__rating {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.puzzle__rated-stream-entry__rating-label {
  color: #999;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.puzzle__rated-stream-entry__rating-value {
  font-weight: bold;
  font-size: 1.15rem;
  color: #e0c060;
}
.puzzle__rated-stream-entry__rating-dev {
  font-size: 0.78rem;
  color: #888;
}
.puzzle__rated-stream-entry__difficulty {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.puzzle__rated-stream-entry__difficulty-label {
  font-size: 0.78rem;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.puzzle__rated-stream-entry__difficulty-select {
  width: 100%;
  background: #2a2a2a;
  border: 1px solid #555;
  color: #ccc;
  border-radius: 3px;
  padding: 4px 6px;
  font-size: 0.85rem;
  cursor: pointer;
}
.puzzle__rated-stream-entry__difficulty-select:focus {
  outline: none;
  border-color: var(--color-accent, #629924);
}
.puzzle__rated-stream-entry__count {
  font-size: 0.78rem;
  color: #aaa;
  text-align: center;
  letter-spacing: 0.03em;
}
.puzzle__rated-stream-entry__empty {
  font-size: 0.8rem;
  color: #888;
  font-style: italic;
  text-align: center;
  padding: 4px 0;
}
.puzzle__rated-stream-entry__start {
  width: 100%;
  padding: 8px 0;
  background: var(--color-accent, #629924);
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: bold;
  cursor: pointer;
  letter-spacing: 0.03em;
}
.puzzle__rated-stream-entry__start:hover {
  background: #7ab830;
}
.puzzle__rated-stream-entry__start:active {
  background: #518020;
}
.puzzle__rated-stream-entry__stop {
  width: 100%;
  padding: 8px 0;
  background: transparent;
  border: 1px solid #888;
  border-radius: 4px;
  color: #aaa;
  font-size: 0.9rem;
  cursor: pointer;
}
.puzzle__rated-stream-entry__stop:hover {
  border-color: #ccc;
  color: #ccc;
}

.pp-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(40, 40, 40, 0.95);
  color: #e0e0e0;
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 0.9rem;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0.25s ease;
}
.pp-toast--visible {
  opacity: 1;
}
.pp-toast--hidden {
  opacity: 0;
}

.study-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  max-width: 900px;
  margin: 0 auto;
}
.study-page__header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.study-page__header h1 {
  margin: 0;
  font-size: 1.4rem;
}
.study-page__bottom-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #2a2a2a;
}
.study-page__seeding {
  color: #888;
  font-size: 0.9rem;
}
.study-page__loading {
  color: #888;
  padding: 32px;
  text-align: center;
}
.study-page__subordinate {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.study-btn {
  padding: 6px 14px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
}
.study-btn--import {
  background: #4a90d9;
  color: #fff;
}
.study-btn--import:hover {
  background: #3a7fc9;
}

.study-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.study-filter-bar__search {
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid #555;
  background: #1e1e1e;
  color: #e0e0e0;
  font-size: 0.9rem;
  width: 180px;
}

.study-filter-btn {
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid #555;
  background: transparent;
  color: #aaa;
  cursor: pointer;
  font-size: 0.85rem;
}
.study-filter-btn.active {
  background: #4a90d9;
  border-color: #4a90d9;
  color: #fff;
}
.study-filter-btn:hover:not(.active) {
  border-color: #888;
  color: #ddd;
}

.study-sort-bar {
  display: flex;
  align-items: center;
  gap: 6px;
}
.study-sort-bar__label {
  color: #888;
  font-size: 0.85rem;
}

.study-sort-btn {
  padding: 3px 8px;
  border: 1px solid transparent;
  background: transparent;
  color: #aaa;
  cursor: pointer;
  font-size: 0.85rem;
  border-radius: 4px;
}
.study-sort-btn.active {
  color: #ddd;
  border-color: #555;
}
.study-sort-btn:hover {
  color: #ddd;
}
.study-sort-btn__dir {
  font-size: 0.8rem;
}

.study-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.repertoire__scan-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid #333;
}
.repertoire__scan-header {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.repertoire__scan-action {
  margin-left: auto;
  white-space: nowrap;
}
.repertoire__scan-progress {
  color: #aaa;
  font-size: 0.84rem;
  white-space: nowrap;
}
.repertoire__scan-message {
  color: #888;
  font-size: 0.84rem;
}
.repertoire__scan-message--error {
  color: #e08a8a;
}
.repertoire__report {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.repertoire__report-filters {
  padding: 2px 0;
}
.repertoire__filter-group {
  min-width: 0;
}
.repertoire__filter-select {
  min-height: 25px;
  max-width: 180px;
  padding: 3px 7px;
  border: 1px solid #444;
  border-radius: 4px;
  background: #151515;
  color: #aaa;
  font-size: 0.78rem;
}
.repertoire__filter-pill {
  white-space: nowrap;
}
.repertoire__filter-clear-wrap {
  margin-left: auto;
}
.repertoire__report-summary {
  color: #888;
  font-size: 0.82rem;
}
.repertoire__report-tabs {
  display: inline-flex;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid #333;
  border-radius: 4px;
}
.repertoire__report-tab {
  min-width: 112px;
  padding: 5px 10px;
  border: 0;
  border-right: 1px solid #333;
  background: #1a1a1a;
  color: #888;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
}
.repertoire__report-tab:last-child {
  border-right: 0;
}
.repertoire__report-tab:hover {
  background: #222;
  color: #ccc;
}
.repertoire__report-tab.active {
  background: #2d2d2d;
  color: #eee;
}
.repertoire__line-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid #333;
}
.repertoire__line-row {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-bottom: 1px solid #333;
}
.repertoire__line-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 7px 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.repertoire__line-summary:hover {
  background: #202020;
}
.repertoire__line-main, .repertoire__line-metrics {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.repertoire__line-main {
  flex: 1 1 auto;
  padding-left: 8px;
}
.repertoire__line-metrics {
  flex: 0 0 auto;
  padding-right: 8px;
}
.repertoire__line-text {
  min-width: 0;
  color: #ddd;
  font-size: 0.9rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.repertoire__line-prefix, .repertoire__line-expected {
  color: #888;
  font-weight: 400;
}
.repertoire__line-move {
  white-space: nowrap;
}
.repertoire__line-highlight {
  color: #e0e0e0;
  font-weight: 700;
}
.repertoire__category-badge {
  flex: 0 0 auto;
  padding: 2px 6px;
  border: 1px solid #4a4a4a;
  border-radius: 3px;
  color: #aaa;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}
.repertoire__loss-ratio {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: #aaa;
  font-size: 0.78rem;
  white-space: nowrap;
}
.repertoire__loss-ratio-bar {
  display: inline-flex;
  width: 118px;
  height: 7px;
  overflow: hidden;
  border-radius: 3px;
  background: #252525;
}
.repertoire__loss-ratio-segment {
  display: inline-block;
  height: 100%;
  min-width: 0;
}
.repertoire__loss-ratio-counts, .repertoire__line-game-count {
  color: #888;
  font-size: 0.78rem;
  white-space: nowrap;
}
.repertoire__study-next-formula {
  color: #c6c6c6;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.repertoire__line-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 8px 7px 20px;
}
.repertoire__line-action {
  min-height: 28px;
  padding: 4px 9px;
  font-size: 0.78rem;
}
.repertoire__line-action:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}
.repertoire__line-feedback {
  align-self: center;
  padding: 0 2px;
}
.repertoire__line-games {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 8px 7px 20px;
}
.repertoire__line-game {
  color: inherit;
  text-decoration: none;
}
.repertoire__line-game:hover {
  background: #202020;
}
@media (max-width: 760px) {
  .repertoire__scan-header, .repertoire__line-summary, .repertoire__line-main, .repertoire__line-metrics {
    flex-wrap: wrap;
  }
  .repertoire__scan-action {
    margin-left: 0;
  }
  .repertoire__line-metrics {
    flex-basis: 100%;
    padding-left: 8px;
  }
  .repertoire__line-text {
    flex-basis: 100%;
  }
  .repertoire__loss-ratio {
    flex-wrap: wrap;
  }
}
.repertoire__source-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid #333;
}
.repertoire__section-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.repertoire__section-title, .repertoire__studies-heading {
  margin: 0;
  color: #aaa;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.repertoire__studies-heading {
  margin-top: 4px;
}
.repertoire__upload {
  position: relative;
}
.repertoire__account-add {
  margin-left: auto;
}
.repertoire__account-picker {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 0;
}
.repertoire__account-candidate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 32px;
  padding: 6px 8px;
  border: 1px solid #333;
  border-radius: 4px;
  background: #1b1b1b;
  color: #aaa;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.repertoire__account-candidate:hover:not(:disabled) {
  border-color: #555;
  color: #ddd;
}
.repertoire__account-candidate:disabled {
  cursor: default;
  opacity: 0.58;
}
.repertoire__account-candidate-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.repertoire__account-candidate-meta, .repertoire__filter-summary, .repertoire__account-empty {
  color: #888;
  font-size: 0.76rem;
}
.repertoire__account-candidate-meta {
  flex: 0 0 auto;
  white-space: nowrap;
}
.repertoire__file-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}
.repertoire__source-loading, .repertoire__source-empty, .repertoire__source-error, .repertoire__source-status {
  color: #888;
  font-size: 0.85rem;
}
.repertoire__source-error {
  color: #e08a8a;
}
.repertoire__source-status {
  color: #9bb;
}
.repertoire__source-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.repertoire__source-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #1e1e1e;
  border: 1px solid #333;
  border-left-width: 3px;
  border-radius: 4px;
}
.repertoire__source-main {
  flex: 1;
  min-width: 0;
}
.repertoire__source-open {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.repertoire__source-open:hover .repertoire__chip-name {
  color: #f0f0f0;
}
.repertoire__source-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.repertoire__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: #e0e0e0;
  font-size: 0.9rem;
}
.repertoire__chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.repertoire__source-row.repertoire__accent--0 {
  border-left-color: #8b5cf6;
}
.repertoire .analysis-repertoire__source-row.repertoire__accent--0 {
  border-left-color: #8b5cf6;
}
.repertoire__explorer-group.repertoire__accent--0 {
  border-left-color: #8b5cf6;
}
.repertoire__accent--0 .repertoire__chip-dot {
  background: #8b5cf6;
}
.repertoire__source-row.repertoire__accent--1 {
  border-left-color: #0ea5e9;
}
.repertoire .analysis-repertoire__source-row.repertoire__accent--1 {
  border-left-color: #0ea5e9;
}
.repertoire__explorer-group.repertoire__accent--1 {
  border-left-color: #0ea5e9;
}
.repertoire__accent--1 .repertoire__chip-dot {
  background: #0ea5e9;
}
.repertoire__source-row.repertoire__accent--2 {
  border-left-color: #f59e0b;
}
.repertoire .analysis-repertoire__source-row.repertoire__accent--2 {
  border-left-color: #f59e0b;
}
.repertoire__explorer-group.repertoire__accent--2 {
  border-left-color: #f59e0b;
}
.repertoire__accent--2 .repertoire__chip-dot {
  background: #f59e0b;
}
.repertoire__source-row.repertoire__accent--3 {
  border-left-color: #10b981;
}
.repertoire .analysis-repertoire__source-row.repertoire__accent--3 {
  border-left-color: #10b981;
}
.repertoire__explorer-group.repertoire__accent--3 {
  border-left-color: #10b981;
}
.repertoire__accent--3 .repertoire__chip-dot {
  background: #10b981;
}
.repertoire__source-row.repertoire__accent--4 {
  border-left-color: #ec4899;
}
.repertoire .analysis-repertoire__source-row.repertoire__accent--4 {
  border-left-color: #ec4899;
}
.repertoire__explorer-group.repertoire__accent--4 {
  border-left-color: #ec4899;
}
.repertoire__accent--4 .repertoire__chip-dot {
  background: #ec4899;
}
.repertoire__source-row.repertoire__accent--5 {
  border-left-color: #14b8a6;
}
.repertoire .analysis-repertoire__source-row.repertoire__accent--5 {
  border-left-color: #14b8a6;
}
.repertoire__explorer-group.repertoire__accent--5 {
  border-left-color: #14b8a6;
}
.repertoire__accent--5 .repertoire__chip-dot {
  background: #14b8a6;
}
.repertoire__source-row.repertoire__accent--6 {
  border-left-color: #f97316;
}
.repertoire .analysis-repertoire__source-row.repertoire__accent--6 {
  border-left-color: #f97316;
}
.repertoire__explorer-group.repertoire__accent--6 {
  border-left-color: #f97316;
}
.repertoire__accent--6 .repertoire__chip-dot {
  background: #f97316;
}
.repertoire__source-row.repertoire__accent--7 {
  border-left-color: #6366f1;
}
.repertoire .analysis-repertoire__source-row.repertoire__accent--7 {
  border-left-color: #6366f1;
}
.repertoire__explorer-group.repertoire__accent--7 {
  border-left-color: #6366f1;
}
.repertoire__accent--7 .repertoire__chip-dot {
  background: #6366f1;
}
.repertoire__chip-name {
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.repertoire__side-badge {
  padding: 1px 5px;
  border: 1px solid #555;
  border-radius: 3px;
  color: #aaa;
  font-size: 0.7rem;
  line-height: 1.2;
}
.repertoire__chapter-count, .repertoire__source-meta {
  color: #888;
  font-size: 0.78rem;
  white-space: nowrap;
}
.repertoire__source-meta {
  display: flex;
  gap: 6px;
  margin-top: 3px;
}
.repertoire__source-sep {
  color: #555;
}
.repertoire__source-name-input, .repertoire__side-select {
  border: 1px solid #4a90d9;
  border-radius: 3px;
  background: #111;
  color: #e0e0e0;
  font-size: 0.85rem;
}
.repertoire__source-name-input {
  min-width: 180px;
  padding: 3px 6px;
}
.repertoire__source-toggle, .repertoire__source-menu-button, .repertoire__source-menu-item {
  border: 1px solid #444;
  border-radius: 4px;
  background: transparent;
  color: #aaa;
  cursor: pointer;
  font-size: 0.82rem;
}
.repertoire__source-toggle {
  min-width: 42px;
  padding: 4px 8px;
}
.repertoire__source-toggle.active {
  color: #ddd;
  border-color: #666;
}
.repertoire__source-menu-wrap {
  position: relative;
  flex: 0 0 auto;
}
.repertoire__source-menu-button {
  width: 28px;
  height: 28px;
  padding: 0;
  line-height: 1;
}
.repertoire__source-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 190px;
  padding: 6px;
  background: #1a1a1a;
  border: 1px solid #444;
  border-radius: 4px;
}
.repertoire__source-menu-item, .repertoire__source-menu-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 7px;
  color: #aaa;
  font-size: 0.82rem;
  text-align: left;
}
.repertoire__source-menu-item:hover, .repertoire__source-toggle:hover, .repertoire__source-menu-button:hover {
  border-color: #777;
  color: #ddd;
}
.repertoire__source-menu-item--danger:hover {
  border-color: #8a3a3a;
  color: #e08a8a;
}
.repertoire__replace-label {
  position: relative;
  cursor: pointer;
}
.repertoire__side-select {
  max-width: 104px;
  padding: 2px 4px;
}
.repertoire__rating-filter {
  align-items: flex-start;
}
.repertoire__rating-inputs {
  display: inline-flex;
  gap: 4px;
}
.repertoire__rating-input {
  width: 58px;
  padding: 2px 4px;
  border: 1px solid #444;
  border-radius: 3px;
  background: #111;
  color: #e0e0e0;
  font-size: 0.78rem;
}
.repertoire__explorer-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
}
.repertoire__explorer-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.repertoire__explorer-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-left: 3px solid transparent;
  border-bottom: 1px solid #333;
}
.repertoire__explorer-group:last-child {
  border-bottom: 0;
}
.repertoire__explorer-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 30px;
  padding: 6px 8px 4px 10px;
}
.repertoire__source-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.repertoire__expected-reply {
  padding: 0 10px 5px;
  color: #888;
  font-size: 0.74rem;
  line-height: 1.2;
  text-transform: uppercase;
}
.repertoire__move-list {
  display: flex;
  flex-direction: column;
}
.repertoire__move-row {
  min-height: 30px;
  padding: 5px 10px 5px 14px;
  cursor: pointer;
}
.repertoire__move-row:hover {
  background: #202020;
}
.repertoire__move-row--expanded {
  background: #202020;
}
.repertoire__move-main {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.repertoire__move-san {
  color: #e0e0e0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
}
.repertoire__main-tag, .repertoire__reply-tag {
  color: #888;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.repertoire__nags {
  color: #aaa;
  font-size: 0.82rem;
}
.repertoire__account-stats {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: #888;
  font-size: 0.76rem;
}
.repertoire__account-result {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.repertoire__account-result-bar {
  display: inline-flex;
  width: 44px;
  height: 5px;
  overflow: hidden;
  border-radius: 2px;
  background: #2a2a2a;
}
.repertoire__account-result-segment {
  display: inline-block;
  height: 100%;
}
.repertoire__account-result-counts {
  color: #777;
  font-size: 0.72rem;
  white-space: nowrap;
}
.repertoire__account-empty {
  padding: 0 10px 8px 14px;
}
.repertoire__comment-preview {
  display: block;
  width: 100%;
  margin-top: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #888;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78rem;
  line-height: 1.25;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.repertoire__comment-preview:hover {
  color: #ccc;
}
.repertoire__comment-preview:focus-visible {
  outline: 1px solid #666;
  outline-offset: 2px;
}
.repertoire__annotation {
  margin-top: 6px;
  max-height: 132px;
  overflow-y: auto;
  transition: max-height 160ms ease;
}
.repertoire__annotation--expanded, .repertoire__annotation--position {
  padding: 6px 8px;
  background: #1a1a1a;
  border-left: 2px solid #444;
}
.repertoire__annotation--position {
  max-height: 150px;
}
.repertoire__annotation-nags {
  margin-bottom: 4px;
  color: #aaa;
  font-size: 0.8rem;
  line-height: 1.2;
}
.repertoire__annotation-text {
  color: #aaa;
  font-size: 0.82rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.repertoire__annotation-text + .repertoire__annotation-text {
  margin-top: 6px;
}
.repertoire__position-annotations {
  margin: 6px 10px 8px 14px;
  padding: 8px 10px;
  border-radius: 4px;
  gap: 8px;
}
.repertoire__position-annotation {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.repertoire__out-of-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-top: 1px solid #333;
  color: #aaa;
  font-size: 0.82rem;
}
.repertoire__jump {
  border: 1px solid #444;
  border-radius: 4px;
  background: transparent;
  color: #aaa;
  cursor: pointer;
  font-size: 0.78rem;
  padding: 3px 7px;
}
.repertoire__jump:hover {
  border-color: #777;
  color: #ddd;
}
.repertoire__empty-link {
  color: #aaa;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.repertoire__empty-link:hover {
  color: #ddd;
}
.repertoire__source-error--inline {
  padding: 4px 10px 8px 14px;
}
.repertoire__browse {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.repertoire__browse-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #333;
}
.repertoire__browse-back {
  border: 1px solid #444;
  border-radius: 4px;
  background: transparent;
  color: #aaa;
  cursor: pointer;
  font-size: 0.82rem;
  padding: 5px 9px;
}
.repertoire__browse-back:hover {
  border-color: #777;
  color: #ddd;
}
.repertoire__browse-count, .repertoire__chapter-meta {
  color: #888;
  font-size: 0.78rem;
  white-space: nowrap;
}
.repertoire__browse-content {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
}
.repertoire__chapter-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.repertoire__chapter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #aaa;
  cursor: pointer;
  font-size: 0.86rem;
  text-align: left;
}
.repertoire__chapter-row:hover {
  background: #202020;
  color: #ddd;
}
.repertoire__chapter-row.active {
  border-color: #555;
  background: #1e1e1e;
  color: #e0e0e0;
}
.repertoire__chapter-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.repertoire__browse-layout {
  display: flex;
  gap: 16px;
  min-width: 0;
  min-height: 0;
}
.repertoire__browse-board-col {
  display: flex;
  flex: 0 0 min(42vh, 42vw);
  flex-direction: column;
  gap: 8px;
  min-width: 260px;
}
.repertoire__browse-board {
  aspect-ratio: 1;
  width: 100%;
}
.repertoire__browse-tree-col {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
}
.repertoire__browse-chapter-heading {
  margin-bottom: 6px;
  color: #aaa;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.repertoire__browse-move-list .move-list-inner {
  min-height: 0;
}
.repertoire__browse-move-list comment {
  display: block;
  padding: 6px 10px;
  color: #aaa;
  font-size: 0.84rem;
  line-height: 1.35;
  white-space: pre-wrap;
}
.repertoire__browse-loading, .repertoire__browse-empty, .repertoire__browse-error {
  color: #888;
  font-size: 0.85rem;
  padding: 10px 0;
}
.repertoire__browse-error {
  color: #e08a8a;
}
@media (max-width: 900px) {
  .repertoire__browse-content {
    grid-template-columns: 1fr;
  }
  .repertoire__browse-layout {
    flex-direction: column;
  }
  .repertoire__browse-board-col {
    flex: 0 0 auto;
    width: min(82vw, 430px);
    min-width: 0;
  }
}

.analysis-repertoire {
  width: 100%;
  max-width: 600px;
  overflow: hidden;
  border: 1px solid #333;
  border-radius: 4px;
  background: #181818;
}
.analysis-repertoire__header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  border: 0;
  border-bottom: 1px solid #303030;
  background: #1b1b1b;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.analysis-repertoire__header:hover {
  background: #202020;
}
.analysis-repertoire__title {
  min-width: 0;
  color: #aaa;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.analysis-repertoire__header-meta, .analysis-repertoire__toggle, .analysis-repertoire__meta, .analysis-repertoire__jump {
  color: #888;
  font-size: 0.76rem;
  white-space: nowrap;
}
.analysis-repertoire__header-meta {
  margin-left: auto;
}
.analysis-repertoire__toggle {
  width: 14px;
  text-align: center;
}
.analysis-repertoire__body {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.analysis-repertoire__message {
  padding: 10px 12px;
  color: #888;
  font-size: 0.84rem;
}
.analysis-repertoire__message--error {
  color: #e08a8a;
}
.analysis-repertoire__source-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 8px 10px 9px;
  border-top: 1px solid #2c2c2c;
  border-left: 3px solid transparent;
}
.analysis-repertoire__source-row:first-child {
  border-top: 0;
}
.analysis-repertoire__source-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.analysis-repertoire__status {
  min-width: 0;
  color: #d6d6d6;
  font-size: 0.84rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.analysis-repertoire__meta {
  margin-left: auto;
}
.analysis-repertoire__divergence {
  margin-left: 17px;
  width: calc(100% - 17px);
  padding: 6px 8px;
  border: 1px solid #303030;
  border-radius: 4px;
  background: #1c1c1c;
}
.analysis-repertoire__divergence:hover {
  background: #222;
}
.analysis-repertoire__divergence:disabled {
  cursor: default;
  opacity: 0.58;
}
.analysis-repertoire__divergence-wrap > .control-explainer-disabled:has(.analysis-repertoire__divergence) {
  margin-left: 17px;
  width: calc(100% - 17px);
}
.analysis-repertoire__divergence-wrap > .control-explainer-disabled:has(.analysis-repertoire__divergence) > .control-explainer-disabled__visual > .analysis-repertoire__divergence {
  margin-left: 0;
  width: 100%;
}
.analysis-repertoire__orp-actions {
  padding-left: 17px;
}
@media (max-width: 760px) {
  .analysis-repertoire__header, .analysis-repertoire__source-summary, .analysis-repertoire__divergence,
  .analysis-repertoire .repertoire__line-main,
  .analysis-repertoire .repertoire__line-metrics {
    flex-wrap: wrap;
  }
  .analysis-repertoire__header-meta, .analysis-repertoire__meta {
    margin-left: 0;
  }
  .analysis-repertoire__source-summary .repertoire__chip, .analysis-repertoire__status,
  .analysis-repertoire .repertoire__line-main,
  .analysis-repertoire .repertoire__line-text {
    flex-basis: 100%;
  }
  .analysis-repertoire__divergence {
    margin-left: 0;
    width: 100%;
  }
  .analysis-repertoire__divergence-wrap > .control-explainer-disabled:has(.analysis-repertoire__divergence) {
    margin-left: 0;
    width: 100%;
  }
  .analysis-repertoire__orp-actions {
    padding-left: 0;
  }
  .analysis-repertoire .repertoire__line-metrics {
    padding-left: 0;
  }
}

.study-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: #1e1e1e;
  border-radius: 6px;
  border: 1px solid #333;
  cursor: grab;
}
.study-row:hover {
  border-color: #555;
}
.study-row:active {
  cursor: grabbing;
}
.study-row__fav {
  background: transparent;
  border: none;
  color: #888;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0;
  flex-shrink: 0;
}
.study-row__fav.active {
  color: #f5c518;
}
.study-row__fav:hover {
  color: #f5c518;
}
.study-row__main {
  flex: 1;
  cursor: pointer;
  min-width: 0;
}
.study-row__title {
  font-size: 1rem;
  font-weight: 500;
  color: #e0e0e0;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.study-row__title:hover {
  color: #4a90d9;
  text-decoration: underline;
}
.study-row__title-input {
  font-size: 1rem;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid #4a90d9;
  background: #111;
  color: #e0e0e0;
  width: 100%;
  margin-bottom: 4px;
  box-sizing: border-box;
}
.study-row__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #888;
  margin-bottom: 6px;
}
.study-row__source {
  color: #aaa;
}
.study-row__sep {
  color: #555;
}
.study-row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.study-row__delete {
  background: transparent;
  border: none;
  color: #666;
  cursor: pointer;
  font-size: 1rem;
  padding: 0 4px;
  flex-shrink: 0;
  align-self: flex-start;
}
.study-row__delete:hover {
  color: #e44;
}

.study-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  background: #2a3a4a;
  border-radius: 10px;
  font-size: 0.78rem;
  color: #9bb;
}
.study-tag__remove {
  background: transparent;
  border: none;
  color: #778;
  cursor: pointer;
  padding: 0;
  font-size: 0.75rem;
}
.study-tag__remove:hover {
  color: #e44;
}
.study-tag__add {
  background: transparent;
  border: 1px dashed #555;
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 0.78rem;
  color: #888;
  cursor: pointer;
}
.study-tag__add:hover {
  border-color: #888;
  color: #ccc;
}
.study-tag__input {
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid #4a90d9;
  background: #111;
  color: #e0e0e0;
  font-size: 0.78rem;
  width: 90px;
}

.study-back {
  color: #888;
  text-decoration: none;
  font-size: 0.9rem;
}
.study-back:hover {
  color: #ddd;
}

.study-row__title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.study-row__open {
  color: #4a90d9;
  text-decoration: none;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.study-row__open:hover {
  color: #7ab8f5;
}
.study-row__expand {
  background: transparent;
  border: none;
  color: #888;
  cursor: pointer;
  font-size: 0.7rem;
  padding: 0 2px;
  flex-shrink: 0;
  margin-left: auto;
}
.study-row__expand:hover {
  color: #ddd;
}
.study-row__expanded {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.study-row__notes-label, .study-row__folder-label {
  font-size: 0.78rem;
  color: #888;
  margin-bottom: 2px;
  display: block;
}
.study-row__notes {
  width: 100%;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid #444;
  background: #141414;
  color: #e0e0e0;
  font-size: 0.85rem;
  resize: vertical;
  box-sizing: border-box;
}
.study-row__notes:focus {
  border-color: #4a90d9;
  outline: none;
}
.study-row__folder-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.study-row__folder-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.study-folder {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  background: #2a3a2a;
  border-radius: 10px;
  font-size: 0.78rem;
  color: #8c8;
}
.study-folder__remove {
  background: transparent;
  border: none;
  color: #778;
  cursor: pointer;
  padding: 0;
  font-size: 0.75rem;
}
.study-folder__remove:hover {
  color: #e44;
}
.study-folder__input {
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid #4a90d9;
  background: #111;
  color: #e0e0e0;
  font-size: 0.78rem;
  width: 110px;
}

.study-detail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  height: 100%;
  box-sizing: border-box;
}
.study-detail__header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.study-detail__title {
  margin: 0;
  font-size: 1.1rem;
}
.study-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 340px);
  gap: 16px;
  flex: 1;
  min-height: 0;
}
.study-detail__board-col {
  ---study-board-size: min(52vh, 38vw, 560px);
  min-width: 0;
  position: relative;
}
.study-detail__tools-col {
  min-width: 0;
  overflow-y: auto;
  position: relative;
  border-left: 1px solid #242a31;
}
.study-detail__tools-col .move-list-inner,
.study-detail__tools-col .tview2-column {
  flex: 0 1 auto;
  overflow: visible;
}
.study-detail__loading, .study-detail__empty {
  color: #888;
  padding: 24px;
  text-align: center;
}

.study-board-region {
  display: grid;
  grid-template-columns: minmax(340px, var(---study-board-size)) minmax(220px, 280px);
  gap: 14px;
  align-items: start;
  justify-content: center;
  min-width: 0;
}

.study-board-stack {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: var(---study-board-size);
  max-width: 100%;
  min-width: 0;
  justify-self: center;
  position: relative;
}

.study-board-wrap {
  width: 100%;
  position: relative;
}

.study-player-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 31px;
  padding: 4px 8px;
  box-sizing: border-box;
  border: 1px solid #29313a;
  background: #10161c;
  color: #d6dbe2;
  font-size: 0.82rem;
}

.study-player-bar__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.study-player-bar__dot--white {
  background: #e4e4e0;
  border: 1px solid #8e928d;
}
.study-player-bar__dot--black {
  background: #202225;
  border: 1px solid #747b83;
}

.study-player-bar__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.study-player-bar__result {
  color: #9aa5af;
  font-variant-numeric: tabular-nums;
}

.study-board-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}
.study-board-controls .analyse-controls,
.study-board-controls .study-manual-review-toggle {
  margin: 0;
}

.study-eval-graph-placeholder {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 5px 8px;
  box-sizing: border-box;
  border: 1px dashed #33404b;
  background: #0e1318;
  color: #7f8994;
  font-size: 0.78rem;
}

.study-eval-graph-placeholder__line {
  height: 1px;
  background: linear-gradient(90deg, transparent, #53616d 18%, #53616d 82%, transparent);
}

.study-eval-graph-placeholder__text {
  white-space: nowrap;
}

.study-local-analysis {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-height: calc(var(---study-board-size) + 38px);
  border: 1px solid #29313a;
  background: #10151b;
  color: #c7cdd4;
  overflow: hidden;
}

.study-local-analysis__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px 8px;
  border-bottom: 1px solid #29313a;
}

.study-local-analysis__title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.study-local-analysis__engine {
  color: #edf1f4;
  font-size: 0.86rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.study-local-analysis__mode,
.study-local-analysis__status,
.study-local-analysis__idle,
.study-local-analysis__pv-placeholder {
  color: #7f8994;
  font-size: 0.74rem;
}

.study-local-analysis__status {
  flex: 0 0 auto;
  padding-top: 1px;
  font-variant-numeric: tabular-nums;
}

.study-local-analysis__idle {
  padding: 11px 10px;
  line-height: 1.35;
}

.study-local-analysis__pv-list {
  min-height: 0;
  overflow-y: auto;
}

.study-local-analysis__pv-row {
  display: grid;
  grid-template-columns: 22px 48px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 24px;
  padding: 3px 9px;
  box-sizing: border-box;
  border-bottom: 1px solid #202730;
  font-size: 0.77rem;
}

.study-local-analysis__pv-row--empty {
  grid-template-columns: 22px minmax(0, 1fr);
  color: #59636f;
}

.study-local-analysis__pv-index {
  color: #65717d;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.study-local-analysis__pv-score {
  color: #9cc9f5;
  font-variant-numeric: tabular-nums;
}

.study-local-analysis__pv-moves,
.study-local-analysis__pv-placeholder {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1320px) {
  .study-board-region {
    grid-template-columns: minmax(320px, var(---study-board-size)) minmax(210px, 260px);
    gap: 10px;
  }
}
@media (max-width: 1180px) {
  .study-detail__layout {
    grid-template-columns: 1fr;
  }
  .study-detail__board-col {
    ---study-board-size: min(58vh, 74vw, 560px);
  }
  .study-detail__tools-col {
    border-left: none;
    border-top: 1px solid #242a31;
    min-height: 220px;
  }
  .study-board-region {
    grid-template-columns: minmax(280px, var(---study-board-size));
  }
  .study-local-analysis {
    max-height: 240px;
  }
}
.annotation-panel {
  margin-top: 12px;
  padding: 10px 12px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.annotation-panel__title {
  margin: 0;
  font-size: 0.85rem;
  color: #888;
  font-weight: normal;
}
.annotation-panel__text {
  font-size: 0.9rem;
  color: #ddd;
  cursor: pointer;
  white-space: pre-wrap;
}
.annotation-panel__text:hover {
  color: #4a90d9;
}
.annotation-panel__add {
  background: transparent;
  border: 1px dashed #555;
  border-radius: 4px;
  color: #888;
  cursor: pointer;
  padding: 4px 10px;
  font-size: 0.85rem;
}
.annotation-panel__add:hover {
  border-color: #888;
  color: #ccc;
}
.annotation-panel__textarea {
  width: 100%;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid #4a90d9;
  background: #111;
  color: #e0e0e0;
  font-size: 0.88rem;
  resize: vertical;
  box-sizing: border-box;
}
.annotation-panel__textarea:focus {
  outline: none;
}
.annotation-panel__actions {
  display: flex;
  gap: 6px;
}

.glyph-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.glyph-toolbar__label {
  font-size: 0.78rem;
  color: #888;
  margin-right: 4px;
}

.glyph-btn {
  width: 32px;
  height: 28px;
  padding: 0;
  border: 1px solid #555;
  border-radius: 4px;
  background: #1e1e1e;
  color: #ccc;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: bold;
}
.glyph-btn.active {
  background: #2a4a2a;
  border-color: #4a8a4a;
  color: #8f8;
}
.glyph-btn:hover:not(.active) {
  border-color: #888;
  color: #fff;
}

.glyph-quick-select {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  background: #1e1e1e;
  border: 1px solid #4a90d9;
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 100;
}
.glyph-quick-select__label {
  font-size: 0.78rem;
  color: #888;
}

.study-header-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

move-wrap {
  display: contents;
}

.bookmark-btn {
  background: none;
  border: none;
  color: #555;
  font-size: 0.7rem;
  padding: 0 2px;
  cursor: pointer;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s;
}
move-wrap:hover .bookmark-btn {
  opacity: 0.7;
}
.bookmark-btn:hover {
  opacity: 1 !important;
  color: #f5a623;
}
.bookmark-btn--active {
  opacity: 1 !important;
  color: #f5a623;
}

move.bookmarked {
  background: rgba(245, 166, 35, 0.12);
  border-radius: 3px;
}

.study-tools-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-bottom: 1px solid #2a2a2a;
}

.study-bookmark-indicator {
  color: #f5a623;
  font-size: 0.85rem;
}

.study-btn--active {
  background: rgba(74, 144, 217, 0.15);
  color: #4a90d9;
}

.study-manual-review-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 8px;
  padding: 4px 10px;
  border-radius: 5px;
  border: 1px solid #2a2a2a;
  background: transparent;
  color: #8d918b;
  font-size: 0.8rem;
  cursor: pointer;
}
.study-manual-review-toggle:hover {
  background: #1c1c1c;
  color: #c7cbc4;
}
.study-manual-review-toggle:focus-visible {
  outline: 2px solid #4a90d9;
  outline-offset: 1px;
}
.study-manual-review-toggle--active {
  background: rgba(74, 144, 217, 0.15);
  color: #4a90d9;
  border-color: #4a90d9;
}

.study-manual-review-toggle__icon {
  font-size: 0.95rem;
  line-height: 1;
}

.study-tools-col__back-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.study-tools-col__back {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 8px;
  border: none;
  border-bottom: 1px solid #2a2a2a;
  background: #14181e;
  color: #9cc9f5;
  font-size: 0.85rem;
  cursor: pointer;
  text-align: left;
}
.study-tools-col__back:hover {
  background: #1c1c1c;
}
.study-tools-col__back:focus-visible {
  outline: 2px solid #4a90d9;
  outline-offset: -2px;
}

.study-tools-col__tabs {
  display: flex;
  flex: 0 0 auto;
  border-bottom: 1px solid #2a2a2a;
}

.study-tools-col__tab {
  flex: 1 1 0;
  padding: 8px 4px;
  border: none;
  background: transparent;
  color: #8d918b;
  font-size: 0.75rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.study-tools-col__tab:hover {
  color: #c7cbc4;
}
.study-tools-col__tab.--active {
  color: #9cc9f5;
  border-bottom-color: #4a90d9;
}

.study-tools-col__placeholder {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 12px;
  color: #8d918b;
  font-size: 0.85rem;
}

.study-tools-col__panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.study-tools-col__empty {
  padding: 16px 12px;
  color: #8d918b;
  font-size: 0.85rem;
}

.study-tools-col__comment-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-bottom: 1px solid #2a2a2a;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.study-tools-col__comment-row:hover {
  background: #1c1c1c;
}
.study-tools-col__comment-row:focus-visible {
  outline: 2px solid #4a90d9;
  outline-offset: -2px;
}

.study-tools-col__comment-move {
  font-size: 0.8rem;
  font-weight: 600;
  color: #9cc9f5;
}

.study-tools-col__comment-text {
  font-size: 0.85rem;
  color: #c7cbc4;
  white-space: pre-wrap;
  word-break: break-word;
}

.study-tools-col__questionnaire {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  box-sizing: border-box;
  color: #c7cbc4;
}
.study-tools-col__questionnaire .qnr-wiz,
.study-tools-col__questionnaire .qnr-module {
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}
.study-tools-col__questionnaire .qnr-opt-grid {
  grid-template-columns: 1fr;
}

.study-tools-col__questionnaire-title {
  color: #dce8fb;
  font-size: 0.86rem;
  font-weight: 700;
}

.study-tools-col__hint--questionnaire {
  padding-top: 2px;
}

.study-tools-col__organize {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 12px;
  box-sizing: border-box;
  color: #c7cbc4;
}

.study-tools-col__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.study-tools-col__label {
  color: #8d918b;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.study-tools-col__title-input,
.study-tools-col__folder-select,
.study-tools-col__tag-input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 7px 8px;
  border: 1px solid #2a2a2a;
  border-radius: 5px;
  background: #0f1318;
  color: #d8dce0;
  font-size: 0.85rem;
}
.study-tools-col__title-input:focus,
.study-tools-col__folder-select:focus,
.study-tools-col__tag-input:focus {
  border-color: #4a90d9;
  outline: none;
}

.study-tools-col__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.study-tools-col__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 3px 7px;
  border-radius: 10px;
  font-size: 0.76rem;
  line-height: 1.2;
}

.study-tools-col__chip--folder {
  background: #203424;
  color: #9ed49d;
}

.study-tools-col__chip--tag {
  background: #203348;
  color: #9cc9f5;
}

.study-tools-col__chip-label {
  min-width: 0;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.study-tools-col__chip-remove {
  flex: 0 0 auto;
  padding: 0;
  border: none;
  background: transparent;
  color: #7f8994;
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1;
}
.study-tools-col__chip-remove:hover {
  color: #f08a8a;
}
.study-tools-col__chip-remove:focus-visible {
  outline: 2px solid #4a90d9;
  outline-offset: 1px;
}

.study-tools-col__hint {
  color: #7f858c;
  font-size: 0.78rem;
  line-height: 1.35;
}

.study-tools-col__orp {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 12px;
  box-sizing: border-box;
  color: #c7cbc4;
}

.study-tools-col__orp-head {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.study-tools-col__orp-title {
  color: #dce8fb;
  font-size: 0.9rem;
  font-weight: 700;
}

.study-tools-col__orp-context,
.study-tools-col__orp-summary {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 8px;
  border: 1px solid #26313c;
  border-radius: 6px;
  background: #111820;
  font-size: 0.8rem;
}

.study-tools-col__orp-context-label {
  color: #7f858c;
  font-size: 0.72rem;
  text-transform: uppercase;
}

.study-tools-col__orp-context-value {
  color: #d8dce0;
  overflow-wrap: anywhere;
}

.study-tools-col__orp-scope-list,
.study-tools-col__orp-train-as {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.study-tools-col__orp-scope,
.study-tools-col__orp-train,
.study-tools-col__orp-save {
  border: 1px solid #2b3440;
  border-radius: 6px;
  background: #12161c;
  color: #c7cbc4;
  cursor: pointer;
}
.study-tools-col__orp-scope:focus-visible,
.study-tools-col__orp-train:focus-visible,
.study-tools-col__orp-save:focus-visible {
  outline: 2px solid #4a90d9;
  outline-offset: 1px;
}
.study-tools-col__orp-scope:disabled,
.study-tools-col__orp-train:disabled,
.study-tools-col__orp-save:disabled {
  cursor: default;
  opacity: 0.55;
}

.study-tools-col__orp-scope {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 8px;
  text-align: left;
}
.study-tools-col__orp-scope:hover {
  background: #18202a;
}

.study-tools-col__orp-scope--active {
  border-color: #4a90d9;
  background: #172536;
}

.study-tools-col__orp-scope-name {
  color: #e2e7ed;
  font-size: 0.82rem;
  font-weight: 650;
}

.study-tools-col__orp-scope-detail {
  color: #8d918b;
  font-size: 0.74rem;
  line-height: 1.3;
}

.study-tools-col__orp-train-as {
  flex-direction: row;
}

.study-tools-col__orp-train {
  flex: 1 1 0;
  padding: 7px 8px;
  font-size: 0.82rem;
}

.study-tools-col__orp-train--active {
  border-color: #7aa86f;
  background: #16251b;
  color: #d8f1d1;
}

.study-tools-col__orp-save {
  width: 100%;
  padding: 9px 10px;
  background: #1e4f38;
  border-color: #2c7a55;
  color: #ecfff4;
  font-weight: 700;
}

.study-tools-col__orp-save:not(:disabled):hover {
  background: #266244;
}

.study-tools-col__orp-save--busy {
  background: #253342;
  border-color: #38506a;
}

.study-tools-col__orp-feedback {
  padding: 7px 8px;
  border-radius: 5px;
  font-size: 0.78rem;
}

.study-tools-col__orp-feedback--saving {
  background: #172536;
  color: #a8c8ee;
}

.study-tools-col__orp-feedback--saved {
  background: #16251b;
  color: #aee2a8;
}

.study-tools-col__orp-feedback--error {
  background: #351d21;
  color: #f0a3a3;
}

.lib-items-wrap--tools {
  display: flex;
  flex-direction: column;
}

.study-engine-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 8px;
  font-size: 0.82rem;
  background: #1a1a1a;
  border-top: 1px solid #333;
}
.study-engine-bar__score {
  color: #9bc;
  font-weight: bold;
  min-width: 40px;
}
.study-engine-bar__depth {
  color: #666;
}

.variation-fold {
  background: none;
  border: none;
  color: #888;
  font-size: 0.65rem;
  padding: 0 4px;
  cursor: pointer;
  line-height: 1;
  vertical-align: middle;
  opacity: 0.7;
}
.variation-fold:hover {
  opacity: 1;
  color: #ccc;
}
.variation-fold--open {
  color: #aaa;
}

.study-ctx-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
}

.study-ctx-menu {
  position: fixed;
  background: #1e1e1e;
  border: 1px solid #555;
  border-radius: 6px;
  padding: 4px 0;
  min-width: 180px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  z-index: 501;
}

.study-ctx-item {
  padding: 8px 14px;
  font-size: 0.85rem;
  cursor: pointer;
  color: #ddd;
}
.study-ctx-item:hover {
  background: #2d2d2d;
}
.study-ctx-item--danger {
  color: hsl(0, 69%, 60%);
}
.study-ctx-item--danger:hover {
  background: rgba(180, 50, 50, 0.2);
}

.study-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.study-modal {
  background: #1e1e1e;
  border: 1px solid #444;
  border-radius: 8px;
  padding: 20px;
  width: min(560px, 90vw);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.study-modal__header {
  display: flex;
  align-items: center;
}
.study-modal__header h2 {
  margin: 0;
  font-size: 1.1rem;
}
.study-modal__close {
  margin-left: auto;
  background: transparent;
  border: none;
  color: #888;
  font-size: 1.2rem;
  cursor: pointer;
}
.study-modal__close:hover {
  color: #ddd;
}
.study-modal__pgn {
  width: 100%;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #444;
  background: #141414;
  color: #e0e0e0;
  font-family: monospace;
  font-size: 0.82rem;
  resize: vertical;
  box-sizing: border-box;
}
.study-modal__pgn:focus {
  border-color: #4a90d9;
  outline: none;
}
.study-modal__file-label {
  font-size: 0.85rem;
  color: #aaa;
}
.study-modal__status {
  font-size: 0.85rem;
  color: #8c8;
}
.study-modal__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.drill-session {
  display: flex;
  gap: 16px;
  padding: 16px;
  max-width: 900px;
  margin: 0 auto;
}

.drill-board-wrap {
  flex: 0 0 auto;
  width: 400px;
  height: 400px;
  position: relative;
}
.drill-board-wrap.drill-flash--correct {
  animation: drill-flash-green 0.35s ease;
}
.drill-board-wrap.drill-flash--incorrect {
  animation: drill-flash-red 0.35s ease;
}

@keyframes drill-flash-green {
  0% {
    box-shadow: 0 0 0 0 rgba(80, 200, 100, 0);
  }
  30% {
    box-shadow: 0 0 0 8px rgba(80, 200, 100, 0.6);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(80, 200, 100, 0);
  }
}
@keyframes drill-flash-red {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 60, 60, 0);
  }
  30% {
    box-shadow: 0 0 0 8px rgba(220, 60, 60, 0.6);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(220, 60, 60, 0);
  }
}
.drill-sidebar {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.drill-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.drill-sequence-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e0e0e0;
}

.drill-move-counter {
  font-size: 0.8rem;
  color: #888;
}

.drill-progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.drill-progress-bar {
  height: 6px;
  background: #2a2a2a;
  border-radius: 3px;
  overflow: hidden;
}

.drill-progress-fill {
  height: 100%;
  background: #4a90d9;
  transition: width 0.3s ease;
}

.drill-progress-label {
  font-size: 0.78rem;
  color: #888;
}

.drill-feedback {
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 0.9rem;
  background: #1e1e1e;
  color: #aaa;
}
.drill-feedback--correct {
  background: #1a3a1a;
  color: #8c8;
}
.drill-feedback--incorrect {
  background: #3a1a1a;
  color: #c88;
}
.drill-feedback--answer {
  background: #1e2a3a;
  color: #8af;
}

.drill-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.drill-btn {
  padding: 7px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 500;
}
.drill-btn--next {
  background: #4a90d9;
  color: #fff;
}
.drill-btn--end {
  background: #2a2a2a;
  color: #aaa;
}
.drill-btn--again {
  background: #4a90d9;
  color: #fff;
}
.drill-btn--back {
  background: #2a2a2a;
  color: #aaa;
}
.drill-btn:hover {
  filter: brightness(1.1);
}

.drill-summary {
  max-width: 480px;
  margin: 40px auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.drill-summary__title {
  font-size: 1.3rem;
  font-weight: 600;
  color: #e0e0e0;
  margin: 0;
}
.drill-summary__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.drill-summary__stat {
  background: #1e1e1e;
  border-radius: 6px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.drill-summary__val {
  font-size: 1.5rem;
  font-weight: 700;
  color: #4a90d9;
}
.drill-summary__key {
  font-size: 0.8rem;
  color: #888;
}
.drill-summary__actions {
  display: flex;
  gap: 10px;
}

.study-color-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.study-color-picker {
  background: #1e1e1e;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 260px;
}
.study-color-picker__title {
  font-size: 1rem;
  font-weight: 600;
  color: #e0e0e0;
  text-align: center;
}
.study-color-picker__buttons {
  display: flex;
  gap: 10px;
}
.study-color-picker__btn {
  flex: 1;
  padding: 12px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
}
.study-color-picker__btn--white {
  background: #e0e0e0;
  color: #111;
}
.study-color-picker__btn--black {
  background: #222;
  color: #e0e0e0;
  border: 1px solid #444;
}
.study-color-picker__btn:hover {
  filter: brightness(1.1);
}
.study-color-picker__cancel {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  font-size: 0.85rem;
  text-align: center;
  padding: 4px;
}
.study-color-picker__cancel:hover {
  color: #ccc;
}

.study-scope-selector {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.study-scope-selector__label {
  font-size: 0.8rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.study-scope-selector__buttons {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.study-scope-btn {
  padding: 8px 12px;
  border-radius: 5px;
  border: 1px solid #444;
  background: #2a2a2a;
  color: #ccc;
  cursor: pointer;
  font-size: 0.875rem;
  text-align: left;
  transition: background 0.12s, border-color 0.12s;
}
.study-scope-btn:hover {
  background: #333;
  border-color: #555;
}
.study-scope-btn--active {
  background: #1a3a5a;
  border-color: #4a90d9;
  color: #e0e0e0;
}

.study-btn--practice {
  background: #4a90d9;
  color: #fff;
  border-color: transparent;
}

.study-practice-dashboard {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.study-practice-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #1a2a3a;
  border: 1px solid #2a4a6a;
  border-radius: 6px;
  padding: 10px 14px;
}
.study-practice-banner__text {
  color: #8af;
  font-size: 0.9rem;
  flex: 1;
}

.study-practice-learn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #1a2a1a;
  border: 1px solid #2a4a2a;
  border-radius: 6px;
  padding: 10px 14px;
}
.study-practice-learn__label {
  color: #8c8;
  font-size: 0.9rem;
  flex: 1;
}

.study-row__due {
  font-size: 0.75rem;
  color: #8af;
  background: #1a2a3a;
  border-radius: 3px;
  padding: 1px 5px;
}

.study-btn--review {
  background: #4a90d9;
  color: #fff;
}

.study-practice-lines {
  margin-top: 12px;
  padding: 10px 0;
  border-top: 1px solid #2a2a2a;
}
.study-practice-lines__title {
  font-size: 0.82rem;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.study-practice-lines__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.study-practice-lines--empty {
  font-size: 0.82rem;
  color: #666;
}

.study-practice-line {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: #1a1a1a;
  border-radius: 4px;
  font-size: 0.82rem;
}
.study-practice-line__label {
  flex: 1;
  color: #ddd;
  cursor: default;
}
.study-practice-line__rename {
  flex: 1;
  background: #111;
  border: 1px solid #444;
  color: #ddd;
  padding: 2px 4px;
  border-radius: 3px;
  font-size: 0.82rem;
}
.study-practice-line__color {
  color: #888;
}
.study-practice-line__status {
  color: #4c4;
  font-size: 0.7rem;
}
.study-practice-line__status--paused {
  color: #888;
}
.study-practice-line__count {
  color: #666;
  font-size: 0.75rem;
}
.study-practice-line__due {
  font-size: 0.72rem;
  color: #8af;
  background: #1a2a3a;
  border-radius: 3px;
  padding: 1px 4px;
}
.study-practice-line__actions {
  display: flex;
  gap: 3px;
}
.study-practice-line__btn {
  background: #2a2a2a;
  border: none;
  color: #aaa;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.78rem;
}
.study-practice-line__btn:hover {
  background: #3a3a3a;
}
.study-practice-line__btn--danger:hover {
  background: #4a1a1a;
  color: #f88;
}

.study-library-layout {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.study-library-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.study-sidebar {
  flex-shrink: 0;
  width: 160px;
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  overflow: hidden;
}
.study-sidebar__header {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid #2a2a2a;
}
.study-sidebar__title {
  flex: 1;
  font-size: 0.8rem;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.study-sidebar__toggle {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 0 2px;
  font-size: 1rem;
  line-height: 1;
}
.study-sidebar__toggle:hover {
  color: #aaa;
}
.study-sidebar__folders {
  display: flex;
  flex-direction: column;
  padding: 4px;
  gap: 2px;
}
.study-sidebar__folder {
  display: block;
  width: 100%;
  text-align: left;
  padding: 5px 8px;
  background: none;
  border: none;
  border-radius: 4px;
  color: #aaa;
  cursor: pointer;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.study-sidebar__folder:hover {
  background: #1e1e1e;
  color: #ddd;
}
.study-sidebar__folder.active {
  background: #1a2a3a;
  color: #4a90d9;
}
.study-sidebar__folder.drag-over {
  background: #1a3a2a;
  border: 1px dashed #4a9d6f;
  color: #4a9d6f;
}
.study-sidebar__folder-row {
  display: flex;
  align-items: center;
  border-radius: 4px;
}
.study-sidebar__folder-row:hover .study-sidebar__folder-actions {
  opacity: 1;
}
.study-sidebar__folder-row .study-sidebar__folder {
  flex: 1;
  min-width: 0;
}
.study-sidebar__folder-rename {
  flex: 1;
  background: #1a1a1a;
  border: 1px solid #444;
  color: #ddd;
  padding: 3px 6px;
  border-radius: 3px;
  font-size: 0.83rem;
  width: 100%;
}
.study-sidebar__folder-actions {
  display: flex;
  gap: 1px;
  opacity: 0;
  transition: opacity 0.1s;
  flex-shrink: 0;
}
.study-sidebar__folder-action {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 2px 4px;
  font-size: 0.75rem;
  border-radius: 3px;
}
.study-sidebar__folder-action:hover {
  color: #aaa;
  background: #2a2a2a;
}
.study-sidebar__folder-action--danger:hover {
  color: #f88;
}
.study-sidebar__new-folder {
  width: 100%;
  background: #1a1a1a;
  border: 1px solid #444;
  color: #ddd;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 0.83rem;
  margin-top: 2px;
}
.study-sidebar__new-folder-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 5px 8px;
  background: none;
  border: none;
  border-radius: 4px;
  color: #556;
  cursor: pointer;
  font-size: 0.8rem;
  margin-top: 4px;
}
.study-sidebar__new-folder-btn:hover {
  color: #4a90d9;
  background: #1a1a1a;
}

.lib-nav {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  background: #14181e;
  color: #e4e6e2;
  font-size: 12.5px;
}
.lib-nav__chrome {
  flex: 0 0 auto;
}
.lib-nav__pinned {
  padding: 6px 0;
  border-bottom: 1px solid #2a2a2a;
}
.lib-nav__scroller {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.lib-nav__content {
  display: flex;
  flex-direction: column;
}
.lib-nav__sections {
  padding: 6px 0 12px;
}
.lib-nav__tags {
  padding: 6px 0 12px;
}
.lib-nav__label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5c605a;
  padding: 8px 12px 4px;
}

.nav-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: var(--nav-item-height, 28px);
  padding: 0 12px;
  font-size: var(--nav-item-font-size, 12.5px);
  color: #8d918b;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.nav-row:hover {
  background: #1c222c;
  color: #e4e6e2;
}
.nav-row.--section {
  font-weight: 700;
  color: #e4e6e2;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.03em;
  margin-top: 4px;
}
.nav-row.--empty {
  color: #5c605a;
  font-style: italic;
  cursor: default;
}
.nav-row.--empty:hover {
  background: none;
  color: #5c605a;
}
.nav-row__icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.nav-row__label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-row__count {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  color: #5c605a;
  flex: 0 0 auto;
}

.nav-chevron {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s;
  color: #5c605a;
  flex: 0 0 auto;
}
.nav-chevron.--open {
  transform: rotate(90deg);
}

.lib-nav__reorder {
  height: 100%;
  overflow-y: auto;
  padding: 6px 0 12px;
}

.nav-reorder-header {
  padding: 8px 12px 10px;
  border-bottom: 1px solid #2a2a2a;
  margin-bottom: 4px;
}
.nav-reorder-header__title {
  font-weight: 700;
  font-size: 12px;
  color: #e4e6e2;
}
.nav-reorder-header__hint {
  font-size: 10.5px;
  color: #5c605a;
  margin-top: 2px;
}

.nav-reorder-list {
  display: flex;
  flex-direction: column;
}

.nav-reorder-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--nav-item-height, 28px);
  padding: 0 12px;
  font-size: var(--nav-item-font-size, 12.5px);
  color: #e4e6e2;
  background: #14181e;
  transition: transform 0.15s ease;
}
.nav-reorder-row.--dragging {
  position: relative;
  z-index: 5;
  transition: none;
  background: #1a2a3a;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  border-radius: 4px;
}

.nav-reorder-handle {
  position: relative;
  width: 12px;
  height: 18px;
  flex: 0 0 auto;
  cursor: grab;
  touch-action: none;
}
.nav-reorder-handle::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 1px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #6a6e68;
  box-shadow: 0 5px 0 #6a6e68, 0 10px 0 #6a6e68, 5px 0 0 #6a6e68, 5px 5px 0 #6a6e68, 5px 10px 0 #6a6e68;
}
.nav-reorder-handle:hover::before, .nav-reorder-handle:active::before {
  background: #c7cbc4;
  box-shadow: 0 5px 0 #c7cbc4, 0 10px 0 #c7cbc4, 5px 0 0 #c7cbc4, 5px 5px 0 #c7cbc4, 5px 10px 0 #c7cbc4;
}
.nav-reorder-handle:active {
  cursor: grabbing;
}

.nav-reorder-row__controls {
  display: flex;
  gap: 2px;
  margin-left: auto;
  flex: 0 0 auto;
}

.nav-reorder-move {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #8d918b;
  cursor: pointer;
}
.nav-reorder-move:hover:not([aria-disabled=true]) {
  background: #1c222c;
  color: #e4e6e2;
}
.nav-reorder-move[aria-disabled=true] {
  opacity: 0.35;
  cursor: not-allowed;
}

.nav-reorder-move__icon.--up {
  transform: rotate(180deg);
}

.lib-items {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  background: #161616;
  color: #e4e6e2;
}

.sentry-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.sentry-group-header {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 4px 6px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8d918b;
  background: #161616;
}

.sentry-empty {
  padding: 24px 12px;
  text-align: center;
  color: #5c605a;
  font-size: 12.5px;
  font-style: italic;
}

.sentry-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  padding: calc(2px + (var(--item-list-row-height, 28px) - 20px) * 0.75) 9px;
  min-height: var(--item-list-row-height, 28px);
  cursor: pointer;
}
.sentry-row:hover {
  border-color: #333333;
}

.sentry-stack {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sentry-title {
  font-size: var(--item-list-title-font-size, 12.5px);
  font-weight: 650;
  color: #e4e6e2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sentry-title-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.sentry-title-row > .sentry-title {
  flex: 1;
  min-width: 0;
}

.sentry-alias-badge {
  flex: 0 0 auto;
  color: #6b6f68;
}

.sentry-alias-from {
  font-size: 10.5px;
  color: #6b6f68;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sentry-alias-chip,
.sentry-home-chip {
  flex: 0 0 auto;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 5px;
  line-height: 1.5;
}

.sentry-alias-chip {
  color: #7f9fd4;
  background: #1b273b;
  border: 1px solid #33456b;
}

.sentry-home-chip {
  color: #7fd8cb;
  background: #143630;
  border: 1px solid #1e5148;
}

.sentry-row--alias .grr__thumb {
  position: relative;
}

.sentry-row--alias .grr__thumb::after {
  content: "↪";
  position: absolute;
  left: 2px;
  bottom: 2px;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  background: #7f9fd4;
  color: #fff;
  font-size: 10px;
  line-height: 15px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.sentry-rail {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  padding-top: 1px;
}
.sentry-rail.--expanded {
  gap: 4px;
}

.sentry-rail.--expanded .sentry-rail__toggle {
  color: #8fb3e0;
  border-color: #24507e;
}

.sentry-rail__actions {
  display: flex;
  gap: 3px;
}

.sentry-rail__btn {
  width: 21px;
  height: 21px;
  border-radius: 4px;
  border: 1px solid #333333;
  background: transparent;
  color: #8d918b;
  font-size: 10.5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sentry-rail__btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.sentry-rail__toggle {
  width: 19px;
  height: 19px;
  border-radius: 4px;
  border: 1px solid #333333;
  background: transparent;
  color: #5c605a;
  font-size: 10.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sentry-rail__toggle:hover {
  border-color: #24507e;
  color: #8fb3e0;
}

.sentry-row {
  position: relative;
  user-select: none;
}
.sentry-row.sentry-row--selected {
  border-color: transparent;
}
.sentry-row.sentry-row--selected::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(74, 144, 226, 0.16);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px #3d6fa8;
  z-index: 0;
  pointer-events: none;
}
.sentry-row.sentry-row--selected.sentry-row--adj-above::before {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.sentry-row.sentry-row--selected.sentry-row--adj-below::before {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.sentry-row > .sentry-stack, .sentry-row > .sentry-rail, .sentry-row > .sentry-checkbox {
  position: relative;
  z-index: 1;
}

.sentry-checkbox {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin-top: 2px;
  accent-color: #4a90d9;
  cursor: pointer;
}

.sentry-pinned-group,
.sentry-pinned-group__rows {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.sentry-group-header--pinned {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
}
.sentry-group-header--pinned:hover {
  color: #b7bab3;
}

.sentry-group-header__chevron {
  flex: 0 0 auto;
}

.sentry-group-header--date {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
}
.sentry-group-header--date:hover {
  color: #b7bab3;
}

.sentry-bulk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 8px 0;
  padding: 6px 8px;
  background: #141e2a;
  border: 1px solid #3d6fa8;
  border-radius: 6px;
  flex-wrap: wrap;
}

.sentry-bulk-bar__count {
  font-size: 11.5px;
  font-weight: 650;
  color: #9cc9f5;
  margin-right: auto;
}

.sentry-bulk-bar__actions {
  display: flex;
  gap: 5px;
}

.sentry-bulk-bar__btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid #333333;
  border-radius: 4px;
  background: #1a1a1a;
  color: #b7bab3;
  font-size: 11px;
  cursor: pointer;
}
.sentry-bulk-bar__btn:hover {
  border-color: #24507e;
  color: #8fb3e0;
}
.sentry-bulk-bar__btn--danger {
  border-color: #6a2a2a;
  color: #f2a4a4;
}
.sentry-bulk-bar__btn--danger:hover {
  border-color: #8a3a3a;
  background: #2a1414;
  color: #ff8a8a;
}
.sentry-bulk-bar__btn--clear {
  color: #8d918b;
}

.sentry-select-all-page {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 8px 0;
  padding: 4px 8px;
  font-size: 11px;
  color: #8d918b;
}

.sentry-scope-banner {
  gap: 8px;
}

.sentry-scope-banner__text {
  font-size: 11.5px;
  color: #9cc9f5;
}

.sentry-scope-banner__action {
  padding: 3px 8px;
  border: 1px solid #3d6fa8;
  border-radius: 4px;
  background: transparent;
  color: #9cc9f5;
  font-size: 11px;
  cursor: pointer;
}
.sentry-scope-banner__action:hover {
  background: #1a2a3d;
}

.sentry-move-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 700;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sentry-move-dialog {
  width: min(380px, 90vw);
  background: #1c1c1c;
  border: 1px solid #333333;
  border-radius: 10px;
  box-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
}

.sentry-move-dialog__header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid #2a2a2a;
}
.sentry-move-dialog__header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  color: #e4e6e2;
}
.sentry-move-dialog__header p {
  margin: 5px 0 0;
  font-size: 11.5px;
  color: #8d918b;
}

.sentry-move-dialog__seg {
  display: flex;
  gap: 3px;
  margin: 14px 16px 4px;
  padding: 3px;
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
}

.sentry-move-dialog__seg-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #8d918b;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.sentry-move-dialog__seg-btn--on {
  background: #4a90d9;
  color: #0d1520;
}
.sentry-move-dialog__seg-btn--on.sentry-move-dialog__seg-btn--alias {
  background: #6b6f68;
  color: #f2f3f0;
}

.sentry-move-dialog__desc {
  margin: 2px 0 0;
  padding: 0 16px 8px;
  font-size: 11.5px;
  color: #8d918b;
  min-height: 30px;
}

.sentry-move-dialog__picker {
  padding: 2px 10px 8px;
  max-height: 160px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sentry-move-dialog__empty {
  padding: 10px 6px;
  font-size: 12px;
  color: #5c605a;
  font-style: italic;
}

.sentry-move-dialog__pick {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #b7bab3;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.sentry-move-dialog__pick:hover {
  background: #242424;
}
.sentry-move-dialog__pick--on {
  background: rgba(74, 144, 226, 0.16);
  box-shadow: inset 0 0 0 1px #3d6fa8;
  color: #e4e6e2;
}

.sentry-move-dialog__footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 16px;
  border-top: 1px solid #2a2a2a;
}

.sentry-move-dialog__btn {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.sentry-move-dialog__btn--ghost {
  background: transparent;
  border: 1px solid #333333;
  color: #b7bab3;
}
.sentry-move-dialog__btn--ghost:hover {
  border-color: #444444;
}
.sentry-move-dialog__btn--primary {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #4a90d9;
  border: 1px solid #4a90d9;
  color: #0d1520;
}
.sentry-move-dialog__btn--primary:hover {
  background: #5b9de0;
}
.sentry-move-dialog__btn--primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.sentry-move-dialog__btn--primary.sentry-move-dialog__btn--alias {
  background: #6b6f68;
  border-color: #6b6f68;
  color: #f2f3f0;
}
.sentry-move-dialog__btn--primary.sentry-move-dialog__btn--alias:hover {
  background: #7a7e76;
}

.sentry-tag-dialog__body {
  padding: 4px 16px 14px;
}

.sentry-tag-dialog__input {
  width: 100%;
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  color: #e4e6e2;
  font-size: 12.5px;
  padding: 8px 10px;
}
.sentry-tag-dialog__input::placeholder {
  color: #5c605a;
}
.sentry-tag-dialog__input:focus {
  outline: none;
  border-color: #4a90d9;
}

.nav-ctx-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
}

.nav-ctx-menu {
  position: fixed;
  background: #1e1e1e;
  border: 1px solid #333333;
  border-radius: 6px;
  padding: 4px;
  min-width: 190px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  z-index: 601;
}

.nav-ctx-menu__sep {
  height: 1px;
  margin: 4px 2px;
  background: #333333;
}

.nav-ctx-menu__item-wrap {
  position: relative;
}

.nav-ctx-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border: none;
  background: transparent;
  color: #ddd;
  font-size: 0.85rem;
  text-align: left;
  border-radius: 4px;
  cursor: pointer;
}
.nav-ctx-menu__item:hover:not(.nav-ctx-menu__item--disabled) {
  background: #2a2a2a;
}
.nav-ctx-menu__item.nav-ctx-menu__item--warning {
  color: #e07a7a;
}
.nav-ctx-menu__item.nav-ctx-menu__item--disabled {
  color: #666666;
  cursor: not-allowed;
}

.nav-ctx-menu__icon {
  flex: 0 0 auto;
  color: #9cc9f5;
}

.nav-ctx-menu__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-ctx-menu__caret {
  flex: 0 0 auto;
  color: #777777;
}

.nav-ctx-menu__submenu {
  position: absolute;
  left: 100%;
  top: 0;
  background: #1e1e1e;
  border: 1px solid #333333;
  border-radius: 6px;
  padding: 4px;
  min-width: 170px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  z-index: 602;
}

.study-page--dual-pane {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  gap: 0;
  overflow-x: hidden;
}

.lib-shell {
  display: grid;
  grid-template-columns: 44px var(---study-nav-pane-width, 240px) 6px minmax(360px, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: calc(100vh - 52px);
  min-height: 420px;
  overflow: hidden;
}
.lib-shell > .lib-rail,
.lib-shell > .lib-nav-wrap,
.lib-shell > .lib-items-wrap {
  min-height: 0;
}

.lib-divider {
  cursor: col-resize;
  position: relative;
  touch-action: none;
  background: #1a1a1a;
}
.lib-divider::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2px;
  width: 2px;
  background: #333333;
}
.lib-divider:hover::after, .lib-divider.--dragging::after {
  background: #4a90d9;
}
.lib-divider.--dragging {
  background: rgba(74, 144, 226, 0.08);
}

.divider-badge {
  position: absolute;
  top: 6px;
  left: 10px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  color: #9cc9f5;
  background: #16324d;
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s;
  z-index: 1;
}
.divider-badge.--show {
  opacity: 1;
}

body.study-nav-resizing {
  cursor: col-resize;
  user-select: none;
}

body.study-nav-reordering {
  cursor: grabbing;
  user-select: none;
}

.nav-row.--active {
  background: #1a2a3a;
  color: #4a90d9;
}

.lib-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  background: #101010;
  border-right: 1px solid #2a2a2a;
}

.lib-rail__btn {
  position: relative;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #8d918b;
  cursor: pointer;
}
.lib-rail__btn:hover:not([aria-disabled=true]) {
  background: #1c1c1c;
  color: #c7cbc4;
}
.lib-rail__btn:focus-visible {
  outline: 2px solid #4a90d9;
  outline-offset: 1px;
}
.lib-rail__btn[aria-disabled=true] {
  opacity: 0.4;
  cursor: not-allowed;
}
.lib-rail__btn.--active {
  background: rgba(74, 144, 226, 0.14);
  color: #8fb3e0;
}
.lib-rail__btn.--active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: #4a90d9;
  border-radius: 0 2px 2px 0;
}

.lib-rail__icon {
  display: block;
}

.lib-items-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}

.lib-items-wrap > .lib-items {
  flex: 1;
  height: auto;
  min-height: 0;
}

.lib-shell--game-open {
  grid-template-columns: 44px var(---study-item-list-pane-width, 280px) 6px minmax(0, 1fr);
}

.lib-main-region {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.lib-game-open-header {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 6px 8px;
  border-bottom: 1px solid #2a2a2a;
  background: #14181e;
}

.lib-game-open-header__chevron {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: #8d918b;
  cursor: pointer;
}
.lib-game-open-header__chevron:hover {
  background: #1c1c1c;
  color: #c7cbc4;
}
.lib-game-open-header__chevron:focus-visible {
  outline: 2px solid #4a90d9;
  outline-offset: 1px;
}

.lib-game-open-header__breadcrumb {
  border: none;
  background: transparent;
  color: #9cc9f5;
  font-size: 0.8rem;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.lib-game-open-header__breadcrumb:hover {
  background: #1c1c1c;
  text-decoration: underline;
}
.lib-game-open-header__breadcrumb:focus-visible {
  outline: 2px solid #4a90d9;
  outline-offset: 1px;
}

.lib-nav-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}

.lib-nav-wrap > .lib-nav {
  flex: 1;
  height: auto;
  min-height: 0;
}

.nav-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  flex: 0 0 auto;
  padding: 6px 8px;
  border-bottom: 1px solid #2a2a2a;
  background: #14181e;
}

.nav-toolbar__btn {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: #8d918b;
  cursor: pointer;
}
.nav-toolbar__btn:hover:not([aria-disabled=true]) {
  background: #1c222c;
  color: #e4e6e2;
}
.nav-toolbar__btn:focus-visible {
  outline: 2px solid #4a90d9;
  outline-offset: 1px;
}
.nav-toolbar__btn[aria-disabled=true] {
  opacity: 0.4;
  cursor: not-allowed;
}
.nav-toolbar__btn.--active {
  background: #1a2a3a;
  color: #8fb3e0;
}

.nav-toolbar__new-folder-input {
  width: 100%;
  background: #0d1015;
  border: 1px solid #2a507e;
  border-radius: 4px;
  color: #e4e6e2;
  font-size: 12px;
  padding: 4px 8px;
}
.nav-toolbar__new-folder-input:focus {
  outline: none;
  border-color: #4a90d9;
}

.item-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  flex: 0 0 auto;
  padding: 6px 10px;
  border-bottom: 1px solid #2a2a2a;
  background: #14181e;
}

.item-toolbar__group {
  position: relative;
  display: flex;
  align-items: center;
}

.item-toolbar__btn {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: #8d918b;
  cursor: pointer;
}
.item-toolbar__btn:hover {
  background: #1c222c;
  color: #e4e6e2;
}
.item-toolbar__btn:focus-visible {
  outline: 2px solid #4a90d9;
  outline-offset: 1px;
}
.item-toolbar__btn.--active {
  background: #1a2a3a;
  color: #8fb3e0;
}

.item-toolbar__search-row {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid #2a2a2a;
  background: #14181e;
}

.item-toolbar__search-input {
  flex: 1 1 auto;
  min-width: 0;
  background: #0d1015;
  border: 1px solid #2a507e;
  border-radius: 4px;
  color: #e4e6e2;
  font-size: 12.5px;
  padding: 5px 9px;
}
.item-toolbar__search-input:focus {
  outline: none;
  border-color: #4a90d9;
}

.item-adv {
  flex: 0 0 auto;
  border-bottom: 1px solid #2a2a2a;
  background: #14181e;
}

.item-adv__toggle {
  flex: 0 0 auto;
}

.item-adv__panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 2px 12px 12px;
}

.item-adv__section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.item-adv__section-title {
  margin: 0;
  color: #5c605a;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.item-adv__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.item-adv__field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.item-adv__field-label {
  color: #8d918b;
  font-size: 11px;
}

.item-adv__input {
  background: #0d1015;
  border: 1px solid #2a507e;
  border-radius: 4px;
  color: #e4e6e2;
  font-size: 12.5px;
  padding: 5px 9px;
}
.item-adv__input:focus {
  outline: none;
  border-color: #4a90d9;
}
.item-adv__input.--date {
  color-scheme: dark;
}

.item-adv__chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.item-adv__chip {
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid #2a2a2a;
  background: transparent;
  color: #c7cbc4;
  font-size: 11.5px;
  cursor: pointer;
}
.item-adv__chip:hover {
  background: #1c222c;
  color: #e4e6e2;
}
.item-adv__chip.--active {
  background: #1a2a3a;
  border-color: #2a507e;
  color: #8fb3e0;
}
.item-adv__chip:focus-visible {
  outline: 2px solid #4a90d9;
  outline-offset: 1px;
}

.item-adv__folders-note {
  margin: 0;
  color: #8d918b;
  font-size: 11.5px;
  font-style: italic;
}

.item-adv__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.item-adv__clear,
.item-adv__apply {
  padding: 5px 12px;
  border-radius: 4px;
  border: 1px solid #2a2a2a;
  background: transparent;
  color: #c7cbc4;
  font-size: 12px;
  cursor: pointer;
}
.item-adv__clear:hover,
.item-adv__apply:hover {
  background: #1c222c;
  color: #e4e6e2;
}

.item-adv__apply {
  border-color: #2a507e;
  color: #8fb3e0;
}

.item-adv__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
}

.item-adv__active-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 10px;
  border-radius: 12px;
  background: #1a2a3a;
  color: #8fb3e0;
  font-size: 11.5px;
}

.item-adv__active-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #8fb3e0;
  cursor: pointer;
}
.item-adv__active-chip-remove:hover {
  background: #2a507e;
  color: #e4e6e2;
}

.nav-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  min-width: 190px;
  display: flex;
  flex-direction: column;
  padding: 4px;
  background: #14181e;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.nav-menu__header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 4px;
  color: #5c605a;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: default;
}

.nav-menu__sep {
  height: 1px;
  margin: 4px 2px;
  background: #2a2a2a;
}

.nav-menu__item {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #c7cbc4;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.nav-menu__item:hover {
  background: #1c222c;
  color: #e4e6e2;
}

.nav-menu__check {
  flex: 0 0 auto;
  width: 12px;
  text-align: center;
  color: #4a90d9;
  font-size: 11px;
}

@media (max-width: 700px) {
  .lib-shell {
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: none;
  }
  .lib-rail {
    flex-direction: row;
    width: 100%;
    height: 40px;
    border-right: none;
    border-bottom: 1px solid #2a2a2a;
  }
  .lib-nav-wrap,
  .lib-nav {
    height: auto;
    max-height: 240px;
  }
  .lib-divider {
    display: none;
  }
  .lib-items-wrap,
  .lib-items {
    height: auto;
    min-height: 360px;
  }
}
.nav-settings-trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 5px;
  border: 1px solid #333333;
  background: transparent;
  color: #8d918b;
  font-size: 11.5px;
  cursor: pointer;
}
.nav-settings-trigger:hover {
  border-color: #24507e;
  color: #8fb3e0;
}
.nav-settings-trigger.--active {
  border-color: #24507e;
  color: #8fb3e0;
  background: #1a2a3a;
}
.nav-settings-trigger__icon {
  font-size: 12px;
}

.item-toolbar__btn.nav-settings-trigger {
  gap: 0;
  padding: 0;
  border: none;
  font-size: inherit;
}

.nav-appearance-settings {
  border-top: none;
  background: #14181e;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 10px 12px 12px;
  margin-bottom: 10px;
  max-width: 480px;
}
.nav-appearance-settings .board-settings__slider-row {
  grid-template-columns: 130px 1fr 42px;
}
.nav-appearance-settings__note {
  font-size: 11px;
  color: #5c605a;
  border-top: 1px dashed #2a2a2a;
  padding-top: 8px;
  margin-top: 6px;
}

.sentry-row--dragging,
.nav-row--dragging {
  opacity: 0.5;
}

.nav-row--drop-over {
  background: rgba(74, 144, 226, 0.16);
  box-shadow: inset 0 0 0 1px #3d6fa8;
  color: #e4e6e2;
  border-radius: 4px;
}

.nav-drag-cue {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(var(--nav-drag-cue-x, -1000px), var(--nav-drag-cue-y, -1000px));
  pointer-events: none;
  z-index: 999999;
  background: #1c222c;
  color: #e4e6e2;
  border: 1px solid #3d6fa8;
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.nav-drag-empty-placeholder {
  position: absolute;
  width: 1px;
  height: 1px;
  left: -9999px;
  top: -9999px;
  opacity: 0;
}

.admin-page {
  min-height: calc(100vh - 48px);
  padding: 24px;
  background: #101010;
  color: #ddd;
}

.admin-page__inner {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #2a2a2a;
}

.admin-header__state {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 700;
}

.admin-desc {
  margin: 0;
  color: #aaa;
  line-height: 1.45;
  max-width: 680px;
}

.admin-panel {
  border: 1px solid #303030;
  border-radius: 6px;
  background: #181818;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  color: #999;
}
.admin-panel__header h3 {
  margin: 0;
  color: #eee;
  font-size: 1rem;
}
.admin-panel__header > span {
  font-size: 0.86rem;
  text-align: right;
}

.admin-token-row,
.admin-device-row,
.admin-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.admin-token-input {
  min-width: min(320px, 100%);
  flex: 1;
  border: 1px solid #444;
  border-radius: 4px;
  background: #101010;
  color: #eee;
  padding: 8px 10px;
  font: inherit;
}

.admin-btn {
  border: 1px solid #444;
  border-radius: 4px;
  background: #242424;
  color: #ddd;
  padding: 8px 12px;
  font: inherit;
  cursor: pointer;
}
.admin-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.admin-btn:not(:disabled):hover {
  background: #303030;
}
.admin-btn--primary {
  border-color: #4a78a8;
  background: #1b3b5a;
}
.admin-btn--muted {
  color: #bbb;
}
.admin-btn--danger {
  border-color: #874141;
  background: #4a1d1d;
  color: #ffd6d6;
}
.admin-btn--working, .admin-btn--working:disabled {
  border-color: #8d6a2b;
  background: #302414;
  color: #ffe0a0;
  opacity: 1;
  cursor: progress;
}

.admin-counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
}

.admin-count {
  border: 1px solid #303030;
  border-radius: 5px;
  background: #111;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #999;
}

.admin-count__num {
  color: #eee;
  font-weight: 700;
  font-size: 1.15rem;
}

.admin-sync-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  color: #aaa;
  flex-wrap: wrap;
}

.admin-sync-badge {
  border-radius: 999px;
  padding: 3px 8px;
  border: 1px solid #444;
}
.admin-sync-badge--active {
  color: #ffd27a;
  border-color: #7a5a20;
}
.admin-sync-badge--done {
  color: #8be28b;
  border-color: #2f7a2f;
}
.admin-sync-badge--error {
  color: #ff9a9a;
  border-color: #7a3030;
}

.admin-sync-message {
  border: 1px solid #303030;
  border-radius: 4px;
  background: #101010;
  padding: 9px 10px;
  color: #ddd;
}
.admin-sync-message--warning {
  border-color: #70542a;
  color: #f1c982;
}

.admin-panel--backup {
  border-color: #354358;
}

.admin-panel--lichess-auth {
  border-color: #354850;
}

.admin-sync-banner.sync-severity--active {
  border-color: #4f7b4f;
}
.admin-sync-banner.sync-severity--warning {
  border-color: #7a5f26;
}
.admin-sync-banner.sync-severity--error {
  border-color: #7a3a3a;
}
.admin-sync-banner__identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-sync-banner__identity-line {
  color: var(--text);
  font-size: 0.86rem;
  word-break: break-word;
}
.admin-sync-banner__scope-note {
  color: #888;
  font-size: 0.78rem;
}
.admin-sync-banner__section-title {
  margin-bottom: 2px;
  color: #cfcfcf;
  font-size: 0.78rem;
  font-weight: 600;
}
.admin-sync-banner__ops, .admin-sync-banner__issues {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-sync-banner__op-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.admin-sync-banner__op-label {
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 600;
}
.admin-sync-banner__op-progress {
  color: #9dca9d;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}
.admin-sync-banner__op-detail {
  color: #999;
  font-size: 0.8rem;
}
.admin-sync-banner__issue {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 8px;
  border-radius: 4px;
  background: #151515;
}
.admin-sync-banner__issue--warning {
  color: #f0c46a;
}
.admin-sync-banner__issue--error {
  color: #d77;
}
.admin-sync-banner__issue-message {
  font-size: 0.84rem;
}
.admin-sync-banner__issue-action {
  white-space: nowrap;
}
.admin-sync-banner__idle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  color: #999;
  font-size: 0.85rem;
}
.admin-sync-banner__idle-label {
  color: #9dca9d;
  font-weight: 600;
}
.admin-sync-banner__queued {
  color: #999;
  font-size: 0.8rem;
}

.admin-backup-copy {
  margin: 0;
  color: #b7c2d2;
  line-height: 1.4;
}

.admin-backup-actions {
  align-items: stretch;
}

.admin-file-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
}
.admin-file-btn input {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.admin-file-btn:not(.admin-file-btn--disabled) {
  cursor: pointer;
}
.admin-file-btn:not(.admin-file-btn--disabled) input {
  pointer-events: auto;
  cursor: pointer;
}

.admin-file-btn--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.admin-backup-preview {
  border-top: 1px solid #303030;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-backup-preview__header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.admin-backup-preview__header strong {
  color: #eee;
}
.admin-backup-preview__header span {
  color: #999;
  font-size: 0.82rem;
  text-align: right;
}

.admin-backup-hash {
  color: #9aaabd;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.admin-backup-store-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.admin-backup-store-list span {
  border: 1px solid #303030;
  border-radius: 4px;
  background: #101010;
  color: #aaa;
  padding: 4px 6px;
  font-size: 0.78rem;
}

.admin-backup-warnings {
  margin: 0;
  padding-left: 20px;
  color: #f1c982;
  font-size: 0.84rem;
}

.admin-log__tools {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-log {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-log__entry {
  border-left: 3px solid #555;
  background: #101010;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.admin-log__entry--success {
  border-left-color: #4f9a5f;
}
.admin-log__entry--error {
  border-left-color: #b85a5a;
}
.admin-log__entry--info {
  border-left-color: #6a83a8;
}

.admin-log__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.admin-log__action {
  color: #eee;
  font-weight: 700;
  text-transform: capitalize;
}

.admin-log__message {
  color: #bbb;
  overflow-wrap: anywhere;
}

.admin-log__meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-end;
  color: #858585;
  font-size: 0.78rem;
  text-align: right;
  min-width: 180px;
}

.admin-log__empty {
  margin: 0;
  color: #888;
}

.report-list__section {
  border-top: 1px solid #303030;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.report-list__section-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.report-list__section-header h4 {
  margin: 0;
  color: #eee;
  font-size: 0.95rem;
}
.report-list__section-header span {
  color: #8e8e8e;
  font-size: 0.82rem;
  text-align: right;
}

.report-list {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.report-list__heading,
.report-list__cell {
  border-bottom: 1px solid #303030;
  padding: 7px 8px;
  text-align: left;
  vertical-align: top;
}

.report-list__heading {
  color: #aaa;
  font-weight: 700;
}

.report-list__cell {
  color: #ddd;
  overflow-wrap: anywhere;
}

.report-list__empty {
  margin: 0;
  color: #888;
}

.admin-diagnostic-events-table-scroll {
  min-width: 0;
  max-width: 100%;
}
.admin-diagnostic-events-table-scroll:focus-visible {
  outline: 2px solid var(--app-focus);
  outline-offset: 2px;
}

.review-error-packages {
  display: grid;
  grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.review-error-packages__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.review-error-packages__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #343434;
  border-left: 3px solid #6a83a8;
  border-radius: 5px;
  background: #101010;
  color: #d7d7d7;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.review-error-packages__item strong {
  color: #eee;
  font-size: 0.9rem;
}
.review-error-packages__item span,
.review-error-packages__item small {
  color: #969696;
  overflow-wrap: anywhere;
}
.review-error-packages__item:hover, .review-error-packages__item--selected {
  border-color: #56789f;
  background: #17212c;
}

.review-error-packages__detail {
  min-width: 0;
  border: 1px solid #303030;
  border-radius: 5px;
  background: #111;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-panel--danger {
  border-color: #423030;
}

.admin-danger-copy {
  margin: 0;
  color: #bba1a1;
  line-height: 1.4;
}

.admin-data-management {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.admin-data-progress {
  border: 1px solid #4c3a22;
  border-radius: 5px;
  background: #14120f;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-data-progress--active {
  border-color: #8d6a2b;
}
.admin-data-progress--done {
  border-color: #2f7a2f;
  background: #101510;
}
.admin-data-progress--error {
  border-color: #7a3030;
  background: #171010;
}

.admin-data-progress__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.admin-data-progress__header strong {
  min-width: 0;
  color: #eee;
  overflow-wrap: anywhere;
}

.admin-data-progress__message {
  margin: 0;
  color: #cfc2ae;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.admin-data-progress__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-data-progress__step {
  border: 1px solid #353535;
  border-radius: 999px;
  padding: 3px 8px;
  color: #8c8c8c;
  font-size: 0.78rem;
}
.admin-data-progress__step--active {
  border-color: #8d6a2b;
  color: #ffe0a0;
}
.admin-data-progress__step--complete {
  border-color: #2f7a2f;
  color: #8be28b;
}
.admin-data-progress__step--error {
  border-color: #7a3030;
  color: #ff9a9a;
}

.admin-data-section {
  border-top: 1px solid #303030;
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-data-section__header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.admin-data-section__header h4 {
  margin: 0;
  color: #eee;
  font-size: 0.95rem;
}
.admin-data-section__header span {
  color: #8e8e8e;
  font-size: 0.82rem;
}

.admin-account-list,
.admin-settings-reset-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-library-actions {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid #403030;
  border-radius: 5px;
  background: #151111;
  padding: 10px;
}

.admin-library-actions__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.admin-library-actions__copy strong {
  color: #eee;
}
.admin-library-actions__copy span {
  color: #aaa;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.admin-account-row,
.admin-settings-reset-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.3fr) minmax(180px, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid #303030;
  border-radius: 5px;
  background: #111;
  padding: 10px;
}

.admin-settings-reset-row {
  grid-template-columns: minmax(220px, 1fr) auto;
}

.admin-account-row__main,
.admin-account-row__counts,
.admin-settings-reset-row > div:first-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.admin-account-row__main strong,
.admin-account-row__counts strong,
.admin-settings-reset-row > div:first-child strong {
  color: #eee;
}
.admin-account-row__main span,
.admin-account-row__counts span,
.admin-settings-reset-row > div:first-child span {
  color: #999;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.admin-account-row__counts {
  color: #aaa;
}

.admin-account-row__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  gap: 8px;
}

.admin-data-metric {
  border: 1px solid #303030;
  border-radius: 5px;
  background: #101010;
  padding: 9px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #999;
}

.admin-data-metric__value {
  color: #eee;
  font-weight: 700;
}

@media (max-width: 720px) {
  .admin-page {
    padding: 16px 12px;
  }
  .admin-header,
  .admin-panel__header,
  .admin-backup-preview__header,
  .admin-log__entry {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-header__state,
  .admin-log__tools {
    justify-content: flex-start;
  }
  .admin-panel__header > span,
  .admin-backup-preview__header span,
  .admin-log__meta {
    text-align: left;
    align-items: flex-start;
  }
  .admin-log__meta {
    min-width: 0;
  }
  .admin-library-actions,
  .admin-account-row,
  .admin-settings-reset-row {
    grid-template-columns: 1fr;
  }
  .review-error-packages {
    grid-template-columns: 1fr;
  }
  .admin-diagnostic-events-table-scroll {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }
  .admin-diagnostic-events-table-scroll > .report-list {
    min-width: 720px;
  }
  .admin-library-actions .admin-account-row__actions,
  .admin-account-row__actions {
    justify-content: flex-start;
  }
}
.study-view-toggle {
  display: flex;
  gap: 2px;
  border: 1px solid #333;
  border-radius: 4px;
  overflow: hidden;
}
.study-view-toggle__btn {
  padding: 4px 8px;
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  font-size: 1rem;
}
.study-view-toggle__btn:hover {
  background: #1e1e1e;
  color: #aaa;
}
.study-view-toggle__btn.active {
  background: #2a2a2a;
  color: #ddd;
}

.study-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.study-card {
  background: #1e1e1e;
  border: 1px solid #333;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: border-color 0.1s;
}
.study-card:hover {
  border-color: #555;
}
.study-card--selected {
  border-color: #4a90d9;
  background: #141e2a;
}
.study-card__board {
  width: 100%;
  padding-top: 100%;
  position: relative;
}
.study-card__board .cg-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100% !important;
  height: 100% !important;
}
.study-card__body {
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.study-card__title {
  font-size: 0.82rem;
  color: #ddd;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.study-card__title:hover {
  color: #4a90d9;
}
.study-card__meta {
  font-size: 0.72rem;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.study-card__sep {
  margin: 0 3px;
}
.study-card__fav {
  font-size: 0.75rem;
  color: #f0c040;
  margin-top: 1px;
}

.study-row--selected {
  border-color: #4a90d9 !important;
  background: #141e2a !important;
}
.study-row__checkbox {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  accent-color: #4a90d9;
  cursor: pointer;
  margin-top: 2px;
}

.study-bulk-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: #1a2a3a;
  border: 1px solid #3a6090;
  border-radius: 5px;
  flex-wrap: wrap;
}
.study-bulk-bar__count {
  font-size: 0.85rem;
  color: #8af;
  font-weight: 600;
}
.study-bulk-bar__btn {
  padding: 3px 10px;
  border: 1px solid #444;
  border-radius: 4px;
  background: #1e1e1e;
  color: #ccc;
  cursor: pointer;
  font-size: 0.82rem;
}
.study-bulk-bar__btn:hover {
  background: #2a2a2a;
}
.study-bulk-bar__btn--danger {
  border-color: #6a2a2a;
  color: #f88;
}
.study-bulk-bar__btn--danger:hover {
  background: #3a1a1a;
}
.study-bulk-bar__folder-wrap {
  position: relative;
}
.study-bulk-bar__folder-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  background: #1e1e1e;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
}
.study-bulk-bar__folder-item {
  padding: 4px 8px;
  background: none;
  border: none;
  color: #ccc;
  cursor: pointer;
  font-size: 0.82rem;
  text-align: left;
  border-radius: 3px;
}
.study-bulk-bar__folder-item:hover {
  background: #2a2a2a;
}

.study-orp-section {
  margin-bottom: 16px;
}
.study-orp-section__heading {
  font-size: 1rem;
  font-weight: 600;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 8px;
}
.study-orp-section__loading {
  font-size: 0.85rem;
  color: #666;
}
.study-orp-section__error {
  font-size: 0.85rem;
  color: #c66;
}
.study-orp-section__empty {
  font-size: 0.85rem;
  color: #666;
}
.study-orp-section__list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.study-orp-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  background: #1a1e28;
  border: 1px solid #2a2e3a;
  border-radius: 5px;
}
.study-orp-row:hover {
  border-color: #3a4a5a;
}
.study-orp-row__fav {
  color: #f0c040;
  font-size: 0.8rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.study-orp-row__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.study-orp-row__title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.study-orp-row__label {
  font-size: 0.92rem;
  font-weight: 500;
  color: #ddd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.study-orp-row__state {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #2a2a2a;
  color: #888;
}
.study-orp-row__state--new {
  background: #1e2e1e;
  color: #6c6;
}
.study-orp-row__state--due {
  background: #1a2a3a;
  color: #8af;
}
.study-orp-row__state--in_progress {
  background: #2a2a1a;
  color: #cc8;
}
.study-orp-row__state--paused {
  background: #2a2a2a;
  color: #666;
}
.study-orp-row__due {
  font-size: 0.72rem;
  color: #8af;
  background: #1a2a3a;
  border-radius: 3px;
  padding: 1px 5px;
  flex-shrink: 0;
}
.study-orp-row__meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: #777;
}
.study-orp-row__sep {
  color: #444;
}
.study-orp-row__opening {
  color: #99a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.study-orp-row__color {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  flex-shrink: 0;
}
.study-orp-row__color--white {
  background: #3a3a2a;
  color: #eee;
}
.study-orp-row__color--black {
  background: #1a1a2a;
  color: #88a;
}
.study-orp-row__moves {
  color: #666;
}
.study-orp-row__last {
  color: #555;
}
.study-orp-row__last--never {
  color: #444;
  font-style: italic;
}
@media (max-width: 480px) {
  .study-orp-row {
    padding: 7px 10px;
  }
  .study-orp-row__opening {
    max-width: 140px;
  }
  .study-orp-row__label {
    font-size: 0.88rem;
  }
}

.study-orp-bucket {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.study-orp-bucket:last-child {
  margin-bottom: 0;
}
.study-orp-bucket__header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}
.study-orp-bucket__label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #777;
}
.study-orp-bucket__count {
  font-size: 0.72rem;
  font-weight: 600;
  background: #2a2a2a;
  color: #666;
  border-radius: 10px;
  padding: 1px 7px;
  min-width: 1.4em;
  text-align: center;
}
.study-orp-bucket__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.route-render-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
}
.route-render-fallback__message {
  color: var(--text, #e8e8e8);
  font-size: 1rem;
  text-align: center;
  opacity: 0.7;
}

.board-editor {
  ---editor-board-size: min(
    calc((100vw - 32px - 24px - 320px) * var(---board-scale)),
    calc((100vh - 5rem) * var(---board-scale))
  );
  display: grid;
  grid-template-columns: var(---editor-board-size) 24px minmax(240px, 320px);
  grid-template-rows: auto var(---editor-board-size) auto;
  grid-template-areas: "spare-top    .  tools" "board        .  tools" "spare-bottom .  tools";
  align-items: start;
  justify-content: center;
  gap: 8px 0;
  padding: 24px 16px 32px;
}
.board-editor .main-board {
  grid-area: board;
}
.board-editor cg-board {
  cursor: inherit;
}
.board-editor .spare {
  display: flex;
  background: #202020;
  border-radius: 5px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.board-editor .spare-top {
  grid-area: spare-top;
  margin-bottom: 6px;
}
.board-editor .spare-bottom {
  grid-area: spare-bottom;
  margin-top: 6px;
}
.board-editor .spare .no-square {
  flex: 1 1 12.5%;
  aspect-ratio: 1/1;
  position: relative;
  cursor: pointer;
  transition: background-color 0.12s;
}
.board-editor .spare .no-square:hover {
  background: rgba(255, 255, 255, 0.07);
}
.board-editor .spare .no-square.selected-square {
  background: rgba(74, 144, 217, 0.3);
}
.board-editor .spare .no-square.pointer:hover {
  background: rgba(156, 201, 245, 0.14);
}
.board-editor .spare .no-square.pointer.selected-square {
  background: rgba(156, 201, 245, 0.32);
}
.board-editor .spare .no-square.trash:hover {
  background: rgba(229, 72, 77, 0.16);
}
.board-editor .spare .no-square.trash.selected-square {
  background: rgba(229, 72, 77, 0.34);
}
.board-editor .spare .no-square > div {
  width: 100%;
  height: 100%;
}
.board-editor .spare piece.pointer,
.board-editor .spare piece.trash {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1.3rem;
  color: #999;
  opacity: 0.8;
}
.board-editor .spare piece.pointer::before {
  content: "↖";
}
.board-editor .spare piece.trash::before {
  content: "🗑";
}
.board-editor .spare .no-square.pointer.selected-square piece.pointer,
.board-editor .spare .no-square.trash.selected-square piece.trash {
  color: #fff;
  opacity: 1;
}
.board-editor__tools {
  grid-area: tools;
  align-self: start;
  max-height: calc(var(---editor-board-size) + 100px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.board-editor__controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: default;
  font-size: 0.88rem;
  color: #ccc;
}
.board-editor__controls button, .board-editor__controls .button, .board-editor__controls select, .board-editor__controls label, .board-editor__controls input[type=checkbox] {
  cursor: pointer;
}
.board-editor__controls button:disabled, .board-editor__controls select:disabled, .board-editor__controls input:disabled {
  cursor: not-allowed;
}
.board-editor__controls select {
  width: 100%;
  background: #111;
  color: #e0e0e0;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 5px 6px;
  font-size: 0.88rem;
}
.board-editor__controls strong {
  display: block;
  margin-bottom: 4px;
  color: #999;
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.board-editor .metadata {
  background: #1e1e1e;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.board-editor .metadata .castling div {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
}
.board-editor .metadata .castling label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.board-editor .metadata .castling input.not-allowed {
  visibility: hidden;
}
.board-editor .metadata .enpassant {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.board-editor .metadata .enpassant label {
  margin: 0;
  font-weight: 600;
}
.board-editor .metadata .enpassant select {
  width: 9ch;
}
.board-editor select.positions {
  width: 100%;
  background: #1e1e1e;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 6px 8px;
}
.board-editor .actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.board-editor .actions .button {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  padding: 7px 10px;
  border-radius: 4px;
  border: 1px solid #3a3a3a;
  background: #202020;
  color: #ccc;
  font-size: 0.85rem;
}
.board-editor .actions .button:hover:not(.disabled):not(:disabled) {
  background: #262626;
  border-color: #4a90d9;
  color: #9cc9f5;
}
.board-editor .actions .button.disabled, .board-editor .actions .button:disabled {
  opacity: 0.4;
  color: #777;
}
.board-editor__inputs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.board-editor__inputs p {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.board-editor__inputs strong {
  flex: 0 0 auto;
  color: #999;
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.board-editor__fen-input, .board-editor__url-input {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  background: #111;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 6px 8px;
  color: #e0e0e0;
  font-family: monospace;
  font-size: 0.78rem;
}
.board-editor__fen-input:focus, .board-editor__url-input:focus {
  outline: none;
  border-color: #4a90d9;
}
.board-editor__fen-input:invalid {
  border-color: #e5484d;
}
.board-editor__url-input {
  color: #888;
}

.board-editor .spare piece,
.practice-box__no-square piece {
  display: block;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

.board-editor .spare piece.pawn.white {
  background-image: var(---white-pawn);
}

.board-editor .spare piece.knight.white {
  background-image: var(---white-knight);
}

.board-editor .spare piece.bishop.white {
  background-image: var(---white-bishop);
}

.board-editor .spare piece.rook.white {
  background-image: var(---white-rook);
}

.board-editor .spare piece.queen.white {
  background-image: var(---white-queen);
}

.board-editor .spare piece.pawn.black {
  background-image: var(---black-pawn);
}

.board-editor .spare piece.knight.black {
  background-image: var(---black-knight);
}

.board-editor .spare piece.bishop.black {
  background-image: var(---black-bishop);
}

.board-editor .spare piece.rook.black {
  background-image: var(---black-rook);
}

.board-editor .spare piece.queen.black {
  background-image: var(---black-queen);
}

.board-editor .spare piece.king.white,
.practice-box__no-square piece.king.white {
  background-image: var(---white-king);
}

.board-editor .spare piece.king.black,
.practice-box__no-square piece.king.black {
  background-image: var(---black-king);
}

@media (max-width: 800px) {
  .board-editor {
    ---editor-board-size: min(calc(100vw - 20px), calc(100vh - 30vh));
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "spare-top" "board" "spare-bottom" "tools";
    padding: 12px 10px 24px;
  }
  .board-editor__tools {
    max-height: none;
    overflow-y: visible;
  }
}
.practice-box {
  display: flex;
  flex-direction: column;
  background: #181818;
  color: #ccc;
  font-size: 0.88rem;
}
.practice-box__title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid #2a2a2a;
  font-weight: 600;
  color: #ddd;
}
.practice-box__title span:first-child {
  flex: 1 1 auto;
}
.practice-box__strength {
  font-size: 0.74rem;
  font-weight: 500;
  color: #9cc9f5;
  background: #1e2a36;
  border-radius: 10px;
  padding: 2px 8px;
  white-space: nowrap;
}
.practice-box__close {
  background: none;
  border: none;
  color: #888;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 5px;
}
.practice-box__close:hover {
  color: #fff;
}
.practice-box__feedback {
  padding: 12px;
}
.practice-box__player {
  display: flex;
  align-items: center;
  gap: 12px;
}
.practice-box__no-square {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  background: #222;
  border-radius: 4px;
  position: relative;
}
.practice-box__icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  font-size: 1.15rem;
}
.practice-box__icon.off {
  background: rgba(229, 72, 77, 0.16);
  color: hsl(0, 69%, 60%);
}
.practice-box__instruction {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.practice-box__instruction strong {
  color: #eee;
  font-size: 0.92rem;
  font-weight: 600;
}
.practice-box__instruction em {
  color: #999;
  font-style: normal;
  font-size: 0.84rem;
}
.practice-box__choices a {
  color: #4a90d9;
  cursor: pointer;
  font-size: 0.84rem;
}
.practice-box__choices a:hover {
  color: #9cc9f5;
}
.practice-box__comment {
  padding: 8px 12px;
  border-top: 1px solid #2a2a2a;
  font-size: 0.85rem;
  color: #bbb;
}
.practice-box__verdict {
  font-weight: 700;
}
.practice-box--goodMove .practice-box__verdict {
  color: #78d987;
}
.practice-box--inaccuracy .practice-box__verdict {
  color: hsl(202, 78%, 62%);
}
.practice-box--mistake .practice-box__verdict {
  color: hsl(41, 100%, 45%);
}
.practice-box--blunder .practice-box__verdict {
  color: hsl(0, 69%, 60%);
}
.practice-box__best {
  color: #4a90d9;
  cursor: pointer;
}
.practice-box__best:hover {
  color: #9cc9f5;
  text-decoration: underline;
}
.practice-box__wait {
  color: #777;
  font-style: italic;
}

.annotation-form {
  flex: 0 0 auto;
  max-height: 46vh;
  overflow-y: auto;
  background: #1a1a1a;
  border-top: 1px solid #2a2a2a;
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.86rem;
  color: #ccc;
}
.annotation-form:focus {
  outline: none;
}
.annotation-form__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.annotation-form__title {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: #ddd;
}
.annotation-form__close {
  background: none;
  border: none;
  color: #888;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.annotation-form__close:hover {
  color: #fff;
}
.annotation-form__other-comment {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  background: #202020;
  border-radius: 4px;
  font-size: 0.82rem;
}
.annotation-form__other-by {
  font-weight: 600;
  color: #9cc9f5;
}
.annotation-form__other-text {
  color: #bbb;
  white-space: pre-wrap;
}
.annotation-form__textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  background: #111;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 8px;
  color: #e0e0e0;
  font-size: 0.86rem;
  font-family: inherit;
}
.annotation-form__textarea:focus {
  outline: none;
  border-color: #4a90d9;
}
.annotation-form__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.annotation-form__discard-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  color: #ccc;
  cursor: pointer;
  font-size: 0.8rem;
}
.annotation-form__discard-btn:hover {
  border-color: #a33;
  color: #f88;
  background: rgba(180, 50, 50, 0.14);
}
.annotation-form__discard-icon {
  font-size: 0.9em;
}
.annotation-form__save-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: #223a4f;
  border: 1px solid #4a90d9;
  border-radius: 4px;
  color: #9cc9f5;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
}
.annotation-form__save-btn:hover {
  background: #2a4a63;
  color: #fff;
}
.annotation-form__glyph-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.annotation-form__glyph-group-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #777;
}
.annotation-form__glyph-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.annotation-form__glyph-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: #1e1e1e;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  color: #ccc;
  cursor: pointer;
  font-size: 0.8rem;
}
.annotation-form__glyph-btn:hover {
  border-color: #666;
  color: #9cc9f5;
}
.annotation-form__glyph-btn.active {
  background: #2a4a2a;
  border-color: #4a8a4a;
  color: #8f8;
}
.annotation-form__glyph-symbol {
  font-weight: 700;
  min-width: 1.4em;
  text-align: center;
}
.annotation-form__glyph-name {
  color: inherit;
}

@media (max-width: 800px) {
  .annotation-form {
    max-height: 50vh;
  }
}
#move-ctx-menu a.ctx-annotate {
  display: flex;
  align-items: center;
  gap: 8px;
}

#move-ctx-menu .ctx-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  color: #9cc9f5;
}
#move-ctx-menu .ctx-icon--glyph {
  font-size: 0.8em;
  font-weight: 700;
}

.save-flow-modal__backdrop {
  position: fixed;
  inset: 0;
  z-index: 209;
  background: rgba(0, 0, 0, 0.68);
}
.save-flow-modal__card {
  position: fixed;
  z-index: 210;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(440px, 94vw);
  max-height: 88vh;
  overflow-y: auto;
  background: #1c1c1c;
  border: 1px solid #333333;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  color: #e4e6e2;
}
.save-flow-modal__head {
  padding: 16px 20px 12px;
  border-bottom: 1px solid #2a2a2a;
}
.save-flow-modal__title {
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 700;
}
.save-flow-modal__ctx-line {
  display: block;
  font-size: 0.75rem;
  color: #8fb3e0;
  background: rgba(74, 144, 226, 0.14);
  border: 1px solid #24507e;
  border-radius: 5px;
  padding: 5px 10px;
}
.save-flow-modal__ctx-src {
  margin-top: 5px;
  font-size: 0.66rem;
  color: #5c605a;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.save-flow-modal__body {
  padding: 16px 20px;
}
.save-flow-modal__field-label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5c605a;
  margin: 14px 0 8px;
}
.save-flow-modal__field-label:first-child {
  margin-top: 0;
}
.save-flow-modal__req {
  color: #e08a8a;
  margin-left: 4px;
}
.save-flow-modal__hint {
  color: #5c605a;
  text-transform: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.69rem;
}
.save-flow-modal__cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.save-flow-modal__cat-tile {
  border: 1px solid #333333;
  background: transparent;
  color: #e4e6e2;
  border-radius: 6px;
  padding: 9px 10px;
  font-size: 0.78rem;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.save-flow-modal__cat-tile:hover {
  border-color: #24507e;
  background: rgba(74, 144, 226, 0.14);
}
.save-flow-modal__cat-tile--picked {
  border-color: #4a90e2;
  background: rgba(74, 144, 226, 0.14);
  color: #dce8fb;
  font-weight: 600;
}
.save-flow-modal__tags-line, .save-flow-modal__text-line, .save-flow-modal__notes-field, .save-flow-modal__select-line {
  width: 100%;
  background: #1e1e1e;
  border: 1px solid #333333;
  color: #e4e6e2;
  border-radius: 6px;
  padding: 8px 10px;
  font: inherit;
  font-size: 0.78rem;
}
.save-flow-modal__tags-line:focus, .save-flow-modal__text-line:focus, .save-flow-modal__notes-field:focus, .save-flow-modal__select-line:focus {
  outline: 2px solid rgba(74, 144, 226, 0.5);
  outline-offset: 1px;
  border-color: #4a90e2;
}
.save-flow-modal__notes-field {
  resize: vertical;
  min-height: 54px;
}
.save-flow-modal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 18px;
  border-top: 1px dashed #2a2a2a;
  gap: 10px;
}
.save-flow-modal__quick-save {
  background: none;
  border: none;
  color: #8d918b;
  font-size: 0.75rem;
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  text-decoration-color: #444444;
  padding: 0;
}
.save-flow-modal__quick-save:hover {
  color: #e4e6e2;
}
.save-flow-modal__save {
  background: #4a90e2;
  color: #dce8fb;
  border: none;
  border-radius: 6px;
  padding: 9px 18px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  font: inherit;
}
.save-flow-modal__save:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  .save-flow-modal__cat-grid {
    grid-template-columns: 1fr;
  }
  .save-flow-modal__foot {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .save-flow-modal__save {
    width: 100%;
  }
}
.oi {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.oi--lg {
  width: 20px;
  height: 20px;
}
.oi--sm {
  width: 13px;
  height: 13px;
}

.qnr-icon {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.qnr-opt-tile--fam-openings,
.qnr-chip--fam-openings {
  --qnr-fam-solid: #a98a54;
  --qnr-fam-wash: rgba(169, 138, 84, 0.16);
  --qnr-fam-out: #8a7248;
  --qnr-fam-txt: #d3bb8c;
  --qnr-fam-ink: #241c0e;
}
.qnr-opt-tile--fam-planning,
.qnr-chip--fam-planning {
  --qnr-fam-solid: #7b85c2;
  --qnr-fam-wash: rgba(123, 133, 194, 0.16);
  --qnr-fam-out: #5c649c;
  --qnr-fam-txt: #b3b9de;
  --qnr-fam-ink: #12142a;
}
.qnr-opt-tile--fam-tactics,
.qnr-chip--fam-tactics {
  --qnr-fam-solid: #8874d1;
  --qnr-fam-wash: rgba(136, 116, 209, 0.16);
  --qnr-fam-out: #6152a3;
  --qnr-fam-txt: #bbaee9;
  --qnr-fam-ink: #17102e;
}
.qnr-opt-tile--fam-endgame,
.qnr-chip--fam-endgame {
  --qnr-fam-solid: #ab68ba;
  --qnr-fam-wash: rgba(171, 104, 186, 0.16);
  --qnr-fam-out: #85508f;
  --qnr-fam-txt: #d3a6da;
  --qnr-fam-ink: #240b28;
}
.qnr-opt-tile--fam-time,
.qnr-chip--fam-time {
  --qnr-fam-solid: #c96f38;
  --qnr-fam-wash: rgba(201, 111, 56, 0.16);
  --qnr-fam-out: #a35a2c;
  --qnr-fam-txt: #e3a878;
  --qnr-fam-ink: #241206;
}
.qnr-opt-tile--fam-material,
.qnr-chip--fam-material {
  --qnr-fam-solid: #c15750;
  --qnr-fam-wash: rgba(193, 87, 80, 0.16);
  --qnr-fam-out: #96423c;
  --qnr-fam-txt: #e29a95;
  --qnr-fam-ink: #2a0e0c;
}
.qnr-opt-tile--fam-character,
.qnr-chip--fam-character {
  --qnr-fam-solid: #cc6690;
  --qnr-fam-wash: rgba(204, 102, 144, 0.16);
  --qnr-fam-out: #a34f71;
  --qnr-fam-txt: #e5a5c0;
  --qnr-fam-ink: #2b0d18;
}

.qnr-opt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(206px, 1fr));
  gap: 10px;
}

.qnr-opt-tile {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: 1px solid #333333;
  color: #e4e6e2;
  border-radius: 6px;
  padding: 10px 13px;
  font-size: 0.78rem;
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s, background 0.12s, color 0.12s, filter 0.12s;
}
.qnr-opt-tile:hover:not(.qnr-opt-tile--picked):not(.qnr-opt-tile--disabled) {
  filter: brightness(1.2);
}
.qnr-opt-tile--win {
  background: var(--qnr-fam-wash, transparent);
  border-color: var(--qnr-fam-solid, #333333);
  color: var(--qnr-fam-txt, #e4e6e2);
}
.qnr-opt-tile--loss {
  background: transparent;
  border-color: var(--qnr-fam-out, #333333);
  color: var(--qnr-fam-out, #e4e6e2);
}
.qnr-opt-tile--picked {
  background: var(--qnr-fam-solid, #4a90e2);
  border-color: var(--qnr-fam-solid, #4a90e2);
  color: var(--qnr-fam-ink, #ffffff);
  font-weight: 700;
}
.qnr-opt-tile--disabled {
  opacity: 0.38;
  cursor: not-allowed;
}
.qnr-opt-tile__label {
  flex: 1;
  min-width: 0;
}

.qnr-rank-badge {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--qnr-fam-solid, #4a90e2);
  color: var(--qnr-fam-ink, #ffffff);
  box-shadow: 0 0 0 2px #181818;
}
.qnr-rank-badge--primary {
  box-shadow: 0 0 0 2px #181818, 0 0 0 4px var(--qnr-fam-solid, #4a90e2);
}

.qnr-wiz {
  background: #181818;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 16px 18px 18px;
}
.qnr-wiz__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 10px;
}
.qnr-wiz__label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8d918b;
}
.qnr-wiz__dots {
  display: flex;
  gap: 6px;
}
.qnr-wiz__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #333333;
}
.qnr-wiz__dot--active {
  background: #4a90e2;
}
.qnr-wiz__dot--done {
  background: #3568ad;
}
.qnr-wiz__restart {
  background: none;
  border: none;
  color: #5c605a;
  font-size: 11.5px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
}
.qnr-wiz__q {
  font-size: 14.5px;
  font-weight: 600;
  margin: 0 0 4px;
  color: #e4e6e2;
}
.qnr-wiz__sub {
  font-size: 12px;
  color: #8d918b;
  margin: 0 0 12px;
}
.qnr-wiz__status {
  font-size: 11.5px;
  color: #5c605a;
  margin-top: 12px;
  min-height: 15px;
}
.qnr-wiz__yn {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.qnr-wiz__yn-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 6px;
  border: 1px solid #333333;
  background: transparent;
  color: #e4e6e2;
  font-size: 13px;
  cursor: pointer;
  font: inherit;
}
.qnr-wiz__yn-btn:hover {
  border-color: #24507e;
  background: rgba(74, 144, 226, 0.14);
}
.qnr-wiz__confirm {
  font-size: 13px;
  color: #8fb3e0;
  background: rgba(74, 144, 226, 0.14);
  border: 1px solid #24507e;
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 10px;
}
.qnr-wiz__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed #2a2a2a;
  min-height: 14px;
  gap: 10px;
}
.qnr-wiz__link {
  background: none;
  border: none;
  color: #8d918b;
  font-size: 12.5px;
  cursor: pointer;
  font: inherit;
  padding: 0;
}
.qnr-wiz__link:hover {
  color: #8fb3e0;
}
.qnr-wiz__link--hidden {
  visibility: hidden;
}
.qnr-wiz__link:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.qnr-wiz__link:disabled:hover {
  color: #8d918b;
}

.qnr-module {
  background: #1e1e1e;
  border-top: 1px solid #333333;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 0 0 1px #262626;
  max-width: 540px;
}
.qnr-module__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  line-height: 2em;
  background: rgba(255, 255, 255, 0.06);
  padding: 0 12px;
  border-bottom: 1px solid #2a2a2a;
  color: #cccccc;
}
.qnr-module__title-main {
  display: flex;
  align-items: center;
  gap: 8px;
}
.qnr-module__body {
  padding: 16px 18px 18px;
  background: #181818;
}
.qnr-module__foot {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

.qnr-pulse {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
}
.qnr-pulse--satisfied {
  background: #4a90e2;
  color: #dce8fb;
}
.qnr-pulse--unsatisfied {
  width: 14px;
  height: 14px;
  background: transparent;
  border: 2px solid #4a90e2;
  animation: pulse-active 2s ease-in-out infinite;
}

.qnr-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.qnr-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px 2px 6px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--qnr-fam-wash, transparent);
  border: 1px solid var(--qnr-fam-solid, #444444);
  color: var(--qnr-fam-txt, #8d918b);
}
.qnr-chip--ghost {
  background: transparent;
  border-style: dashed;
  opacity: 0.7;
}

.qnr-answer-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qnr-answer-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 10px 0;
  border-top: 1px solid #2a2a2a;
}
.qnr-answer-row:first-child {
  border-top: none;
}
.qnr-answer-row__main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.qnr-answer-row__label {
  color: #8d918b;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}
.qnr-answer-row__value {
  min-width: 0;
}
.qnr-answer-row__change {
  flex: 0 0 auto;
  padding: 0;
  border: none;
  background: transparent;
  color: #8fb3e0;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
}
.qnr-answer-row__change:hover {
  color: #dce8fb;
  text-decoration: underline;
}
.qnr-answer-row__change:focus-visible {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

.qnr-answer-empty {
  color: #7f858c;
  font-size: 0.8rem;
}

.qnr-answer-deciders {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.qnr-answer-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
  padding: 3px 8px 3px 5px;
  border-radius: 10px;
  background: var(--qnr-fam-wash, transparent);
  border: 1px solid var(--qnr-fam-solid, #444444);
  color: var(--qnr-fam-txt, #8d918b);
  font-size: 0.72rem;
  font-weight: 600;
}
.qnr-answer-chip--primary {
  box-shadow: inset 2px 0 0 var(--qnr-fam-solid, #4a90e2);
}
.qnr-answer-chip__rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border-radius: 50%;
  background: var(--qnr-fam-solid, #4a90e2);
  color: var(--qnr-fam-ink, #ffffff);
  font-size: 10px;
  font-weight: 800;
}
.qnr-answer-chip__label {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  .qnr-opt-grid {
    grid-template-columns: 1fr;
  }
  .qnr-wiz__top {
    flex-wrap: wrap;
  }
  .qnr-wiz__foot {
    flex-direction: column;
    align-items: stretch;
  }
}
.qnr-pulse.grr__studied-pulse {
  width: 14px;
  height: 14px;
  font-size: 9px;
}

.grr__chip.--studied {
  gap: 5px;
  min-width: 0;
  max-width: 190px;
}
.grr__chip.--studied.--fam-openings {
  color: #d3bb8c;
  border-color: #8a7248;
  background: rgba(169, 138, 84, 0.16);
}
.grr__chip.--studied.--fam-planning {
  color: #b3b9de;
  border-color: #5c649c;
  background: rgba(123, 133, 194, 0.16);
}
.grr__chip.--studied.--fam-tactics {
  color: #bbaee9;
  border-color: #6152a3;
  background: rgba(136, 116, 209, 0.16);
}
.grr__chip.--studied.--fam-endgame {
  color: #d3a6da;
  border-color: #85508f;
  background: rgba(171, 104, 186, 0.16);
}
.grr__chip.--studied.--fam-time {
  color: #e3a878;
  border-color: #a35a2c;
  background: rgba(201, 111, 56, 0.16);
}
.grr__chip.--studied.--fam-material {
  color: #e29a95;
  border-color: #96423c;
  background: rgba(193, 87, 80, 0.16);
}
.grr__chip.--studied.--fam-character {
  color: #e5a5c0;
  border-color: #a34f71;
  background: rgba(204, 102, 144, 0.16);
}

.grl__line2 .grr__chip.--studied {
  max-width: 110px;
}

.grr__chip-icon {
  display: inline-flex;
  flex: 0 0 auto;
}
.grr__chip-icon svg {
  display: block;
}

.grr__chip-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}