* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-deep: #14181f;
  --bg-card: #1c2230;
  --bg-elevated: #232a3b;
  --bg-input: #0e1219;
  --border: #2d3548;
  --border-soft: #232a3b;
  --text: #e6e8ec;
  --text-dim: #9aa3b6;
  --text-faint: #6c7689;
  --accent: #c9a55a;
  --accent-soft: #8a7340;
  --light-sq: #ead8b0;
  --dark-sq: #9d7a4f;
  --excellent: #6bbe6b;
  --good: #95d195;
  --book: #a4a4a4;
  --inaccuracy: #f5c542;
  --mistake: #ed8a3d;
  --blunder: #d65656;
  --brilliant: #44c7d6;
  --board-size: 480px;
  --piece-size: 52px;
}
@media (max-width: 1180px) {
  :root { --board-size: 420px; --piece-size: 44px; }
}
@media (max-width: 760px) {
  :root { --board-size: min(92vw, 420px); --piece-size: calc(min(92vw, 420px) * 0.108); }
}

body {
  font-family: ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
  background: var(--bg-deep);
  background-image:
    radial-gradient(at 20% 0%, rgba(201, 165, 90, 0.04) 0%, transparent 50%),
    radial-gradient(at 80% 100%, rgba(68, 199, 214, 0.03) 0%, transparent 50%);
  color: var(--text);
  min-height: 100vh;
  padding: 18px;
  font-size: 14px;
  line-height: 1.5;
}

.container { max-width: 1380px; margin: 0 auto; }

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 22px 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--text);
}
h1 .accent { color: var(--accent); font-style: italic; }
h1 .king { font-size: 22px; vertical-align: -1px; margin-right: 6px; }

.actions { display: flex; gap: 8px; }

button {
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
button:hover { background: #2c344a; border-color: var(--accent-soft); }
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.4; cursor: not-allowed; }

button.primary {
  background: var(--accent);
  color: #1a1a1a;
  border-color: var(--accent);
  font-weight: 600;
}
button.primary:hover { background: #d6b369; }

.main-grid {
  display: grid;
  grid-template-columns: minmax(420px, 540px) 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 1180px) {
  .main-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body { padding: 10px; font-size: 13px; }
  header { padding: 10px 12px 14px; margin-bottom: 12px; flex-wrap: wrap; gap: 10px; }
  h1 { font-size: 20px; }
  .card { padding: 12px; }
  .nav-primary { gap: 4px; }
  .nav-btn-big { padding: 12px 4px; font-size: 16px; min-height: 44px; }
  .nav-play { font-size: 12px !important; }
  .move-san { font-size: 22px; }
  .stats-acc { font-size: 26px; }
  .moves-list { max-height: 220px; font-size: 12px; }
  .modal { padding: 14px; }
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
}

.player-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg-elevated);
  border-radius: 4px;
  margin-bottom: 10px;
}
.player-bar.white { background: linear-gradient(to right, #ead8b0 0%, #d4c198 100%); color: #1a1a1a; }
.player-bar.black { background: linear-gradient(to right, #2a2a2a 0%, #1a1a1a 100%); color: #ead8b0; }

.player-name { font-weight: 600; font-size: 14px; }
.player-elo { font-size: 12px; opacity: 0.7; margin-left: 8px; }
.player-acc { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.player-meta { display: flex; align-items: center; gap: 14px; }
.player-clock {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  background: var(--bg-input);
  border: 1px solid var(--border);
  padding: 3px 8px;
  border-radius: 3px;
  min-width: 56px;
  text-align: center;
}
.player-clock.low { color: var(--inaccuracy); border-color: var(--inaccuracy); }
.player-clock.crit { color: var(--blunder); border-color: var(--blunder); }
.acc-perf-elo {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
  cursor: help;
}
.player-bar.white .acc-perf-elo { background: rgba(0, 0, 0, 0.12); color: #2a2618; }
.player-bar.black .acc-perf-elo { background: rgba(255, 255, 255, 0.10); color: #ead8b0; }
.acc-pct { font-size: 13px; font-weight: 600; }

.board-wrap {
  display: flex;
  gap: 10px;
  margin: 12px 0;
}

.eval-bar {
  width: 32px;
  height: var(--board-size);
  background: #1a1a1a;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  border: 1px solid #000;
}
.eval-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ead8b0;
  transition: height 0.3s ease;
  height: 50%;
}
.eval-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-weight: 700;
  pointer-events: none;
  white-space: nowrap;
}
.eval-label.top { top: 4px; color: #ead8b0; }
.eval-label.bottom { bottom: 4px; color: #1a1a1a; }

.board-container { position: relative; }
.board-arrows {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

.board {
  width: var(--board-size);
  height: var(--board-size);
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  border: 2px solid #1a1a1a;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

.square {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--piece-size);
  line-height: 1;
  position: relative;
  user-select: none;
}
.square.light { background: var(--light-sq); }
.square.dark { background: var(--dark-sq); }
.square.from { background: rgba(201, 165, 90, 0.55) !important; }
.square.to { background: rgba(201, 165, 90, 0.75) !important; }
.square.check { background: radial-gradient(circle, rgba(214,86,86,0.9) 0%, rgba(214,86,86,0) 70%) !important; }
.square.best-from { box-shadow: inset 0 0 0 3px rgba(68, 199, 214, 0.55); }
.square.best-to { box-shadow: inset 0 0 0 3px rgba(68, 199, 214, 0.85); }

.square.exp-selected {
  box-shadow: inset 0 0 0 4px rgba(91, 107, 181, 0.85);
  background: rgba(91, 107, 181, 0.35) !important;
}
.legal-mark { position: absolute; pointer-events: none; }
.legal-mark.move {
  width: 18px; height: 18px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(91, 107, 181, 0.65);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
}
.legal-mark.capture {
  width: 56px; height: 56px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border: 4px solid rgba(91, 107, 181, 0.85);
  border-radius: 50%;
  box-sizing: border-box;
}

.board.exploring {
  box-shadow: 0 0 0 3px #5b6bb5, 0 0 24px rgba(91, 107, 181, 0.5), 0 4px 24px rgba(0,0,0,0.4);
}
.board.exploring .square.light { background: #d8d4ea; }
.board.exploring .square.dark { background: #7a78a8; }
.board.exploring .square.from { background: rgba(91, 107, 181, 0.55) !important; }
.board.exploring .square.to { background: rgba(91, 107, 181, 0.75) !important; }

.exploration-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, rgba(91, 107, 181, 0.25), rgba(91, 107, 181, 0.1));
  border: 1px solid #5b6bb5;
  border-radius: 6px;
  font-size: 12.5px;
}
.exp-banner-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.exp-banner-right { display: flex; gap: 6px; flex-wrap: wrap; }
.exp-tag {
  background: #5b6bb5;
  color: white;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.exp-info { color: var(--text-dim); }
.exp-info strong { color: var(--text); font-family: ui-monospace, monospace; }
.exp-btn {
  padding: 6px 12px;
  font-size: 12px;
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}
.exp-btn:hover { background: #2c344a; }
.exp-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.exp-btn.primary { background: #5b6bb5; border-color: #5b6bb5; color: white; }
.exp-btn.primary:hover { background: #6b7bc5; }
.exp-btn.warn { color: #e89090; border-color: rgba(232, 144, 144, 0.4); }
.exp-btn.warn:hover { background: rgba(214, 86, 86, 0.15); }

.explore-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px 12px;
  background: linear-gradient(135deg, #5b6bb5, #4a5a9e);
  border: none;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
}
.explore-btn:hover { background: linear-gradient(135deg, #6b7bc5, #5a6aae); }

.piece {
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  pointer-events: none;
}
.piece.white { color: #fff; -webkit-text-stroke: 1.2px #1a1a1a; text-stroke: 1.2px #1a1a1a; }
.piece.black { color: #1a1a1a; -webkit-text-stroke: 1px #000; text-stroke: 1px #000; }

.square-coord {
  position: absolute;
  font-size: 9px;
  font-weight: 700;
  font-family: ui-monospace, monospace;
  opacity: 0.7;
}
.square-coord.file { right: 3px; bottom: 1px; }
.square-coord.rank { left: 3px; top: 1px; }
.square.light .square-coord { color: #9d7a4f; }
.square.dark .square-coord { color: #ead8b0; }

.move-marker {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  z-index: 2;
}

.nav-primary {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1.6fr 1.4fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
.nav-btn-big {
  padding: 14px 8px;
  font-size: 18px;
  font-family: ui-monospace, monospace;
  line-height: 1;
  min-height: 48px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.nav-btn-big:hover { background: #2c344a; border-color: var(--accent-soft); }
.nav-btn-big:active { transform: translateY(1px); }
.nav-btn-big:disabled { opacity: 0.3; cursor: not-allowed; }

.nav-play {
  background: var(--accent) !important;
  color: #1a1a1a !important;
  border-color: var(--accent) !important;
  font-weight: 700;
  font-family: inherit;
  font-size: 14px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.nav-play:hover { background: #d6b369 !important; }
.nav-play.playing { background: #c75151 !important; border-color: #c75151 !important; color: #fff !important; }
.nav-play.playing:hover { background: #d66464 !important; }

.nav-secondary {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  justify-content: space-between;
  align-items: center;
}
.nav-btn-small {
  padding: 7px 12px;
  font-size: 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.15s;
}
.nav-btn-small:hover { color: var(--text); border-color: var(--accent-soft); }
.nav-btn-small.active { color: var(--accent); border-color: var(--accent); }

.playback-popover {
  display: none;
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px;
  width: 260px;
  z-index: 30;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.playback-popover.show { display: block; }
.playback-popover .pp-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-bottom: 8px;
  font-weight: 700;
}
.pp-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.pp-checkbox input { cursor: pointer; }
.pp-checkbox .dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pp-speed {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}
.pp-speed button {
  flex: 1;
  padding: 6px 4px;
  font-size: 11px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-dim);
  cursor: pointer;
}
.pp-speed button.active {
  background: var(--accent);
  color: #1a1a1a;
  border-color: var(--accent);
  font-weight: 600;
}
.secondary-right { position: relative; }

.analysis-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.board-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.move-info {
  min-height: 130px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.move-info .head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.move-san {
  font-size: 26px;
  font-weight: 700;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  letter-spacing: -0.01em;
}
.cls-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  color: #1a1a1a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cls-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0,0,0,0.4);
}
.description {
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}
.best-line {
  margin-top: 6px;
  padding: 8px 12px;
  background: var(--bg-input);
  border-left: 3px solid var(--brilliant);
  border-radius: 3px;
  font-size: 13px;
  color: var(--text-dim);
  font-family: ui-monospace, monospace;
}
.best-line strong { color: var(--brilliant); }
.pv-line {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(68, 199, 214, 0.25);
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.5;
}
.pv-line .pv-label {
  color: var(--text-faint);
  font-family: inherit;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin-right: 8px;
}

.ai-section { margin-top: 8px; }
.notes-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}
.notes-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight: 600;
  margin-bottom: 6px;
}
.notes-textarea {
  width: 100%;
  min-height: 56px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
}
.notes-textarea:focus { outline: none; border-color: var(--accent-soft); }
.ai-btn {
  background: linear-gradient(135deg, #5b6bb5, #4a5a9e);
  color: white;
  border: none;
  font-size: 12px;
  padding: 6px 12px;
}
.ai-btn:hover { background: linear-gradient(135deg, #6b7bc5, #5a6aae); }
.ai-response {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--bg-input);
  border-left: 3px solid #5b6bb5;
  border-radius: 3px;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
}
.ai-loading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-dim);
  font-size: 12px;
  margin-top: 8px;
}
.ai-loading::before {
  content: "";
  width: 10px; height: 10px;
  border: 2px solid var(--text-faint);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-overlay, .analysis-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 22, 0.88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  color: white;
}
.loading-card {
  text-align: center;
  padding: 32px 40px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  min-width: 260px;
}
.loading-piece-anim {
  font-size: 36px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
  color: var(--accent);
  text-shadow: 0 0 12px rgba(201, 165, 90, 0.4);
}
.lpa-piece {
  display: inline-block;
  animation: lpa-bounce 1.2s ease-in-out infinite;
}
.lpa-1 { animation-delay: 0s; }
.lpa-2 { animation-delay: 0.15s; }
.lpa-3 { animation-delay: 0.30s; }
.lpa-4 { animation-delay: 0.45s; }
@keyframes lpa-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40% { transform: translateY(-12px); opacity: 1; }
}
.loading-msg {
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
}

.analysis-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 22px 26px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  text-align: center;
  min-width: 320px;
}
.analysis-card-title {
  font-family: Georgia, serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--accent);
  margin-bottom: 4px;
}
.analysis-card-subtitle {
  font-size: 12px;
  color: var(--text-faint);
  margin-bottom: 16px;
}
.analysis-mini-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 280px;
  height: 280px;
  margin: 0 auto 8px;
  border: 1px solid #1a1a1a;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.mini-square {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
}
.mini-light { background: var(--light-sq); }
.mini-dark { background: var(--dark-sq); }
.mini-piece {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.mini-white { color: #fff; -webkit-text-stroke: 0.8px #1a1a1a; }
.mini-black { color: #1a1a1a; -webkit-text-stroke: 0.6px #000; }
.analysis-mini-eval {
  font-family: ui-monospace, monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  margin: 4px 0 14px;
  min-height: 22px;
}

.parallel-engines {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 8px 0 22px;
  height: 280px;
  width: 280px;
}
.parallel-engine {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 22px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  flex: 1;
}
.pe-icon {
  font-size: 48px;
  color: var(--accent);
  text-shadow: 0 0 14px rgba(201, 165, 90, 0.45);
  animation: pe-pulse 1.4s ease-in-out infinite;
  line-height: 1;
}
.parallel-engine:nth-child(3) .pe-icon { animation-delay: 0.7s; }
@keyframes pe-pulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.12); opacity: 1; }
}
.pe-label {
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.parallel-divider {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(to bottom, transparent, var(--border), transparent);
}
.analysis-progress-wrap {
  margin-top: 4px;
}
.analysis-progress-bar {
  width: 280px;
  height: 6px;
  background: var(--bg-input);
  border-radius: 3px;
  overflow: hidden;
  margin: 0 auto 6px;
}
.analysis-progress-bar .fill {
  height: 100%;
  background: linear-gradient(to right, var(--accent), #e0c080);
  width: 0%;
  transition: width 0.2s ease-out;
}
.analysis-progress-text {
  font-size: 11px;
  color: var(--text-faint);
  font-family: ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.eval-graph-container {
  background: var(--bg-input);
  border-radius: 4px;
  padding: 8px;
  height: 90px;
  position: relative;
}
.eval-graph-svg {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.graph-title {
  position: absolute;
  top: 4px;
  left: 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  font-weight: 600;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.stats-block .stats-title {
  font-family: Georgia, serif;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-soft);
}
.color-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}
.color-dot.white-dot {
  background: #ead8b0;
  color: #1a1a1a;
  box-shadow: 0 0 0 1px #c9a55a;
}
.color-dot.black-dot {
  background: #2a2a2a;
  color: #ead8b0;
  box-shadow: 0 0 0 1px #444;
}
.player-name-line {
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.stats-acc {
  font-family: Georgia, serif;
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 4px;
  color: var(--accent);
}
.stats-perf {
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 1.4;
}
.perf-elo {
  font-family: ui-monospace, monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.perf-label {
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 2px;
}
.perf-acpl {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
}
.perf-na {
  font-size: 11px;
  color: var(--text-faint);
  font-style: italic;
}
.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  font-size: 12.5px;
  color: var(--text-dim);
}
.stat-row .label { display: flex; align-items: center; gap: 8px; }
.stat-row .count { font-weight: 600; color: var(--text); font-family: ui-monospace, monospace; }
.stat-icon {
  width: 14px; height: 14px;
  border-radius: 50%;
  display: inline-block;
}
.stat-row-v2 {
  display: grid;
  grid-template-columns: 100px 1fr 28px;
  gap: 10px;
  align-items: center;
  padding: 4px 0;
  font-size: 12px;
  color: var(--text-dim);
}
.stat-row-v2.dim { opacity: 0.4; }
.cls-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.cls-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stat-icon-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.65);
  flex-shrink: 0;
  font-family: Georgia, serif;
  line-height: 1;
}
.cls-bar {
  height: 6px;
  background: var(--bg-input);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.cls-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease-out;
}
.cls-count {
  text-align: right;
  font-weight: 700;
  color: var(--text);
  font-family: ui-monospace, monospace;
  font-size: 13px;
}
.stats-extras {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-extra-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-faint);
}
.se-label {
  flex-shrink: 0;
}
.se-value {
  color: var(--text);
  font-weight: 600;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-family: ui-monospace, monospace;
}

.moves-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.moves-card .moves-title {
  font-family: Georgia, serif;
  font-size: 13px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.moves-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.moves-tool-btn {
  padding: 4px 10px;
  font-size: 11px;
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.moves-tool-btn:hover { color: var(--text); border-color: var(--accent-soft); }
.moves-tool-btn.active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(201, 165, 90, 0.1);
}
.moves-list {
  max-height: 280px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 36px 1fr 1fr;
  column-gap: 6px;
  row-gap: 2px;
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 13px;
  padding-right: 6px;
}
.moves-list::-webkit-scrollbar { width: 6px; }
.moves-list::-webkit-scrollbar-track { background: var(--bg-input); }
.moves-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.move-num {
  color: var(--text-faint);
  text-align: right;
  padding: 4px 4px 4px 0;
  font-size: 12px;
}
.move-cell {
  padding: 4px 8px;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  transition: background 0.1s;
}
.move-cell:hover { background: var(--bg-elevated); }
.move-cell.active { background: var(--accent-soft); color: #fff; }
.move-cell .marker {
  width: 14px; height: 14px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  color: #1a1a1a;
  flex-shrink: 0;
}

/* Color helpers */
.bg-brilliant { background: #26c4d9; }
.bg-great { background: #26b369; }
.bg-best { background: #3acf3a; }
.bg-excellent { background: var(--excellent); }
.bg-good { background: var(--good); }
.bg-book { background: var(--book); }
.bg-inaccuracy { background: var(--inaccuracy); }
.bg-miss { background: #e06b6b; }
.bg-mistake { background: var(--mistake); }
.bg-blunder { background: var(--blunder); }
.text-brilliant { color: #26c4d9; }
.text-great { color: #26b369; }
.text-best { color: #3acf3a; }
.text-excellent { color: var(--excellent); }
.text-good { color: var(--good); }
.text-book { color: var(--book); }
.text-inaccuracy { color: var(--inaccuracy); }
.text-miss { color: #e06b6b; }
.text-mistake { color: var(--mistake); }
.text-blunder { color: var(--blunder); }

.modal-bg {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-bg.show { display: flex; }
.modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 20px;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
}
.modal h2 {
  font-family: Georgia, serif;
  font-weight: 400;
  margin-bottom: 6px;
  font-size: 20px;
}
.modal p { color: var(--text-dim); font-size: 13px; margin-bottom: 12px; }
textarea {
  width: 100%;
  min-height: 220px;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  resize: vertical;
  margin-bottom: 12px;
}
textarea:focus { outline: none; border-color: var(--accent); }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
.file-input {
  display: block;
  margin-bottom: 12px;
  color: var(--text-dim);
  font-size: 13px;
}
.file-input input { color: var(--text-dim); }

.modal-label {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 4px 0 6px;
}
select {
  width: 100%;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position: calc(100% - 16px) center, calc(100% - 11px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}
select:focus { outline: none; border-color: var(--accent); }
.elo-hint {
  font-size: 11.5px;
  color: var(--text-faint);
  margin: 6px 0 12px;
  min-height: 14px;
}

.pgn-sources {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 12px;
  margin: 10px 0 12px;
  font-size: 12px;
}
.pgn-sources summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
  user-select: none;
  outline: none;
}
.pgn-sources summary:hover { color: var(--text); }
.pgn-sources-body {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
  color: var(--text-dim);
  line-height: 1.55;
}
.pgn-sources-body strong { color: var(--text); }
.pgn-sources-body em { color: var(--accent); font-style: normal; font-weight: 600; }

.textarea-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: -4px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.textarea-tools-hint {
  font-size: 11px;
  color: var(--text-faint);
  font-family: ui-monospace, monospace;
}

.multigame-info {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: rgba(91, 107, 181, 0.1);
  border-left: 3px solid #5b6bb5;
  border-radius: 4px;
  font-size: 12.5px;
  color: var(--text);
}
.multigame-info strong { color: #8a9be0; }
.multigame-info select { margin-top: 6px; max-width: 100%; }

.multigame-selbar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.multigame-list {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-input);
}
.multigame-item {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  transition: background 0.15s;
  align-items: center;
}
.multigame-item:last-child { border-bottom: none; }
.multigame-item:hover { background: var(--bg-elevated); }
.multigame-item.selected { background: rgba(201, 165, 90, 0.1); }
.multigame-item.in-library { opacity: 0.7; }
.multigame-item.in-library > div:last-child::after {
  content: ' · 📚 déjà en bibliothèque';
  color: var(--accent);
  font-size: 10px;
  font-weight: 600;
  margin-left: 4px;
}
.multigame-cb {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent);
}

.library-modal { width: 100%; max-width: 760px; }
.drill-modal { width: 100%; max-width: 920px; }

.drill-options {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px 14px;
  margin: 12px 0;
}
.drill-opt-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: 12.5px;
}
.drill-opt-row:last-child { margin-bottom: 0; }
.drill-opt-row strong {
  min-width: 90px;
  color: var(--text);
  font-weight: 600;
}
.drill-opt-row label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text);
  cursor: pointer;
}
.drill-opt-row input { cursor: pointer; }
.drill-summary {
  background: rgba(201, 165, 90, 0.08);
  border: 1px solid var(--accent-soft);
  border-radius: 4px;
  padding: 10px 12px;
  margin: 12px 0;
  font-size: 13px;
  color: var(--text);
  min-height: 20px;
}
.drill-summary.empty {
  background: rgba(214, 86, 86, 0.08);
  border-color: var(--blunder);
  color: var(--text-faint);
  font-style: italic;
}

.drill-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 14px;
}
.drill-progress {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
}
.drill-score {
  color: var(--accent);
  font-family: ui-monospace, monospace;
  font-size: 12px;
}
.drill-body {
  display: grid;
  grid-template-columns: minmax(0, 380px) 1fr;
  gap: 20px;
}
@media (max-width: 760px) {
  .drill-body { grid-template-columns: 1fr; }
}
.drill-board-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.drill-board-wrap {
  --board-size: 360px;
  --piece-size: 26px;
}
.drill-board-wrap .board {
  width: var(--board-size);
  height: var(--board-size);
}
.drill-board-wrap .board-arrows {
  width: var(--board-size);
  height: var(--board-size);
}
.drill-side-to-move {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
}
.drill-question {
  font-size: 14px;
  color: var(--accent);
  font-weight: 600;
  text-align: center;
  padding: 8px;
  background: var(--bg-input);
  border-radius: 4px;
}
.drill-info-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.drill-context {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.5;
}
.drill-context strong { color: var(--text); }
.drill-feedback {
  min-height: 100px;
  padding: 12px 14px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.6;
  background: var(--bg-input);
  border-left: 3px solid var(--border);
  color: var(--text);
}
.drill-feedback.correct {
  background: rgba(107, 190, 107, 0.1);
  border-left-color: var(--good);
}
.drill-feedback.incorrect {
  background: rgba(214, 86, 86, 0.1);
  border-left-color: var(--blunder);
}
.drill-feedback.hint {
  background: rgba(91, 107, 181, 0.1);
  border-left-color: #5b6bb5;
  color: var(--text-dim);
}
.drill-feedback .df-title {
  font-weight: 700;
  margin-bottom: 4px;
}
.drill-feedback .df-best {
  margin-top: 6px;
  font-family: ui-monospace, monospace;
  color: var(--accent);
  font-size: 13px;
}
.drill-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.drill-actions button.primary {
  background: var(--accent);
  color: #1a1a1a;
  font-weight: 700;
}

.drill-results {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 16px;
  margin: 14px 0;
}
.drill-results-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.drill-results-stat {
  text-align: center;
  padding: 10px;
  background: var(--bg-elevated);
  border-radius: 4px;
}
.drill-results-num {
  font-family: Georgia, serif;
  font-size: 28px;
  color: var(--accent);
}
.drill-results-num.good { color: var(--good); }
.drill-results-num.bad { color: var(--blunder); }
.drill-results-label {
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.drill-results-detail {
  font-size: 12px;
  color: var(--text-dim);
  max-height: 200px;
  overflow-y: auto;
}
.drill-results-detail .drr-item {
  padding: 4px 0;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.drill-results-detail .drr-item:last-child { border-bottom: none; }
.drill-results-detail .drr-ok { color: var(--good); }
.drill-results-detail .drr-ko { color: var(--blunder); }
.drill-results-detail .drr-skip { color: var(--text-faint); }

.drill-board-wrap .square {
  position: relative;
}
.drill-board-wrap .square.light {
  background: #f0d9b5;
}
.drill-board-wrap .square.dark {
  background: #b58863;
}
.drill-board-wrap .square.drill-selected {
  box-shadow: inset 0 0 0 3px #c9a55a;
}
.drill-board-wrap .square.opp-move-from {
  box-shadow: inset 0 0 0 3px rgba(91, 107, 181, 0.55);
}
.drill-board-wrap .square.opp-move-to {
  box-shadow: inset 0 0 0 3px rgba(91, 107, 181, 0.85);
}
.drill-board-wrap .square.opp-move-from.drill-selected,
.drill-board-wrap .square.opp-move-to.drill-selected {
  box-shadow: inset 0 0 0 3px #c9a55a;
}
.drill-board-wrap .square.legal-move::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28%;
  height: 28%;
  background: #c9a55a;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.55;
  pointer-events: none;
  z-index: 1;
}

.drill-board-wrap .piece.white {
  color: #ffffff;
  -webkit-text-stroke: 1px #000;
  text-stroke: 1px #000;
  text-shadow: none;
}
.drill-board-wrap .piece.black {
  color: #1a1a1a;
  -webkit-text-stroke: 0.5px #000;
  text-stroke: 0.5px #000;
  text-shadow: none;
}
.drill-board-wrap .sq-coord {
  position: absolute;
  font-size: 10px;
  font-weight: 700;
  font-family: ui-monospace, "SF Mono", monospace;
  pointer-events: none;
  line-height: 1;
  z-index: 2;
}
.drill-board-wrap .sq-file {
  bottom: 2px;
  right: 3px;
}
.drill-board-wrap .sq-rank {
  top: 2px;
  left: 3px;
}
.drill-board-wrap .square.light .sq-coord {
  color: #b58863;
}
.drill-board-wrap .square.dark .sq-coord {
  color: #f0d9b5;
}
.library-list {
  max-height: 60vh;
  overflow-y: auto;
  margin: 8px 0 16px;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.library-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
  flex-wrap: wrap;
}
.library-filter {
  display: flex;
  gap: 4px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px;
}
.lib-filter-btn {
  padding: 5px 12px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.lib-filter-btn:hover { color: var(--text); }
.lib-filter-btn.active {
  background: var(--accent);
  color: #1a1a1a;
}
.library-usage {
  font-size: 11px;
  color: var(--text-faint);
  font-family: ui-monospace, monospace;
  text-align: right;
}
.library-usage .usage-warn { color: var(--inaccuracy); }
.library-usage .usage-crit { color: var(--blunder); }

.library-advanced-filters {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 10px;
}
.laf-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.laf-row:last-child { margin-bottom: 0; }
.laf-input {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 5px 8px;
  border-radius: 3px;
  font-family: inherit;
  font-size: 12px;
  min-width: 0;
}
.laf-input:focus { outline: none; border-color: var(--accent-soft); }
.laf-num { width: 70px; }
#laf-opponent { flex: 1; min-width: 140px; }
#laf-opening { flex: 1; min-width: 140px; }
.laf-label {
  font-size: 11px;
  color: var(--text-faint);
  margin-left: 4px;
}
.library-item.dup-warning {
  border-left: 3px solid var(--inaccuracy);
}
.lib-dup-actions {
  display: flex;
  gap: 4px;
  margin-top: 2px;
}
.lib-dup-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  cursor: pointer;
}
.lib-dup-btn:hover { color: var(--text); border-color: var(--accent-soft); }

.import-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.import-tab {
  padding: 8px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.import-tab:hover { color: var(--text); }
.import-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.import-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.import-label {
  font-size: 12px;
  color: var(--text-dim);
  min-width: 140px;
  font-weight: 600;
}
.import-row input[type="text"],
.import-row input[type="number"],
.import-row input[type="date"],
.import-row select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
}
.import-row input:focus, .import-row select:focus {
  outline: none;
  border-color: var(--accent-soft);
}
.import-toggle {
  display: flex;
  gap: 4px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px;
}
.import-toggle button {
  padding: 5px 12px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.import-toggle button:hover { color: var(--text); }
.import-toggle button.active {
  background: var(--accent);
  color: #1a1a1a;
}
.import-checkboxes {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.import-checkboxes label {
  font-size: 12px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.import-checkboxes input { cursor: pointer; }
.import-hint {
  font-size: 11px;
  color: var(--text-faint);
}
.import-results-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}
.import-results-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.import-games-list {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-input);
}
.import-game-item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  transition: background 0.15s;
}
.import-game-item:last-child { border-bottom: none; }
.import-game-item:hover { background: var(--bg-elevated); }
.import-game-item.selected {
  background: rgba(201, 165, 90, 0.1);
}
.import-game-item.in-library {
  opacity: 0.7;
}
.import-game-item.in-library .igi-players::after {
  content: ' · 📚 déjà en bibliothèque';
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
}
.import-game-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--accent);
  margin-top: 2px;
}
.import-selection-bar {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 8px 4px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.import-selection-bar .primary {
  background: var(--accent);
  color: #1a1a1a;
  font-weight: 700;
  border-color: var(--accent);
}
.import-selection-bar .primary:hover { background: #d6b06a; }
.import-selection-bar .primary:disabled { opacity: 0.4; cursor: not-allowed; }
.igi-players {
  font-size: 12.5px;
  color: var(--text);
}
.igi-result {
  font-weight: 700;
  color: var(--accent);
  margin-left: 6px;
}
.igi-detail {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
}
.igi-stats {
  text-align: right;
  font-size: 11px;
  color: var(--text-faint);
  font-family: ui-monospace, monospace;
}
.import-loading {
  text-align: center;
  padding: 24px;
  color: var(--text-faint);
  font-size: 13px;
}
.import-loading::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin-right: 8px;
  vertical-align: middle;
}
.library-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  transition: background 0.15s;
}
.library-item:last-child { border-bottom: none; }
.library-item:hover { background: var(--bg-elevated); }
.li-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.li-players {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.li-detail {
  font-size: 11px;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.li-stats { font-size: 11px; color: var(--text-dim); font-family: ui-monospace, monospace; text-align: right; }
.li-perf { font-size: 12px; color: var(--accent); font-weight: 700; }

.aliases-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 32px;
  padding: 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 12px;
}
.alias-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--accent-soft);
  border-radius: 14px;
  font-size: 12.5px;
  color: var(--text);
  font-family: ui-monospace, "SF Mono", monospace;
}
.alias-chip-remove {
  background: transparent;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  margin-left: 2px;
}
.alias-chip-remove:hover { color: var(--blunder); }
.alias-chip-edit {
  background: transparent;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 0;
  margin-right: 2px;
}
.alias-chip-edit:hover { color: var(--accent); }
.alias-chip-text:hover { color: var(--accent); }
.alias-edit-input {
  background: var(--bg-input);
  border: 1px solid var(--accent-soft);
  color: var(--text);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: ui-monospace, monospace;
  font-size: 12.5px;
  width: 140px;
}
.alias-edit-input:focus { outline: none; border-color: var(--accent); }
.alias-chip-save, .alias-chip-cancel {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}
.alias-chip-save { color: var(--good); }
.alias-chip-save:hover { color: var(--excellent); }
.alias-chip-cancel { color: var(--text-faint); }
.alias-chip-cancel:hover { color: var(--blunder); }
.aliases-empty {
  color: var(--text-faint);
  font-size: 12px;
  font-style: italic;
  padding: 4px 2px;
}
.alias-input-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.alias-input-row input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 4px;
  font-family: ui-monospace, monospace;
  font-size: 13px;
}
.alias-input-row input:focus { outline: none; border-color: var(--accent-soft); }

.li-you-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  font-family: ui-monospace, monospace;
  margin-right: 6px;
  background: rgba(201, 165, 90, 0.15);
  border: 1px solid var(--accent-soft);
  color: var(--accent);
}
.li-you-badge.win { background: rgba(107, 190, 107, 0.15); border-color: var(--good); color: var(--good); }
.li-you-badge.loss { background: rgba(214, 86, 86, 0.15); border-color: var(--blunder); color: var(--blunder); }
.li-you-badge.draw { background: rgba(165, 165, 165, 0.15); border-color: var(--book); color: var(--book); }

.agg-perspective-toggle {
  display: flex;
  gap: 4px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px;
  margin-bottom: 14px;
  width: fit-content;
}
.agg-toggle-btn {
  padding: 6px 14px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.agg-toggle-btn.active {
  background: var(--accent);
  color: #1a1a1a;
}
.user-results-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 12px 0;
}
.urs-block {
  padding: 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  text-align: center;
}
.urs-num {
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--accent);
}
.urs-label {
  font-size: 10px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.urs-block.win .urs-num { color: var(--good); }
.urs-block.loss .urs-num { color: var(--blunder); }
.urs-block.draw .urs-num { color: var(--book); }
.li-delete {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-faint);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
}
.li-delete:hover { color: var(--blunder); border-color: var(--blunder); }
.library-empty {
  padding: 30px 14px;
  text-align: center;
  color: var(--text-faint);
  font-size: 13px;
}

.agg-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
.agg-block {
  padding: 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.agg-block-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-bottom: 8px;
  font-weight: 700;
}
.agg-big {
  font-family: Georgia, serif;
  font-size: 30px;
  color: var(--accent);
  line-height: 1.1;
  margin-bottom: 4px;
}
.agg-sub {
  font-size: 12px;
  color: var(--text-dim);
}
.agg-list-block {
  grid-column: 1 / -1;
  padding: 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.agg-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 12.5px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border-soft);
}
.agg-row:last-child { border-bottom: none; }
.agg-row .agg-label { display: flex; align-items: center; gap: 8px; }
.agg-row .agg-count { font-family: ui-monospace, monospace; color: var(--text); font-weight: 600; }

.opt-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.opt-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.opt-row:hover { border-color: var(--accent-soft); }
.opt-row input[type=checkbox] {
  margin-top: 3px;
  cursor: pointer;
  flex-shrink: 0;
}
.opt-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.opt-title {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}
.opt-desc {
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.4;
}

.empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-dim);
}
.empty-icon { font-size: 48px; margin-bottom: 12px; }

.game-meta {
  background: var(--bg-input);
  padding: 10px 14px;
  border-radius: 4px;
  margin-bottom: 12px;
  font-size: 12.5px;
  color: var(--text-dim);
  border-left: 3px solid var(--accent);
}
.game-meta strong { color: var(--text); font-weight: 600; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-dim);
}
.legend-item { display: flex; align-items: center; gap: 4px; }

.error-msg {
  color: var(--blunder);
  font-size: 12px;
  margin-top: 4px;
}

hr { border: none; border-top: 1px solid var(--border-soft); margin: 4px 0; }