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

:root {
  --bg: #1e1e2e;
  --surface: #2a2a3e;
  --surface2: #313148;
  --border: #44446a;
  --text: #cdd6f4;
  --muted: #6c7086;
  --accent: #89b4fa;
  --green: #a6e3a1;
  --red: #f38ba8;
  --yellow: #f9e2af;
  --radius: 8px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

h1 {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

.controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.controls label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.controls input[type="number"] {
  width: 70px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 13px;
}

.controls input[type="number"]:focus {
  outline: none;
  border-color: var(--accent);
}

button {
  padding: 5px 14px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s;
}

button:hover { background: var(--border); }

button.primary {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  font-weight: 600;
}

button.primary:hover { opacity: 0.85; }

select {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 13px;
  cursor: pointer;
}

select:focus { outline: none; border-color: var(--accent); }

.custom-name-input {
  width: 130px;
  background: var(--surface2);
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 13px;
  font-weight: 600;
  display: none;
  transition: opacity 0.15s;
}

.custom-name-input:focus { outline: none; box-shadow: 0 0 0 2px rgba(137,180,250,0.25); }
.custom-name-input.visible { display: block; }

/* Saved flash animation */
@keyframes saved-flash {
  0%   { border-color: var(--green); color: var(--green); }
  80%  { border-color: var(--green); color: var(--green); }
  100% { border-color: var(--accent); color: var(--accent); }
}
.custom-name-input.saved { animation: saved-flash 1.2s ease forwards; }

#newCustomBtn {
  padding: 4px 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  border-color: var(--accent);
}

#newCustomBtn:hover { background: rgba(137,180,250,0.15); }

button.danger {
  color: var(--red);
  border-color: var(--red);
  display: none;
  padding: 4px 9px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

button.danger:hover { background: rgba(243,139,168,0.15); }
button.danger.visible { display: block; }

#infoBtn {
  padding: 5px 10px;
  font-size: 14px;
}

#infoBtn.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.separator-v {
  width: 1px;
  height: 22px;
  background: var(--border);
  margin: 0 4px;
}

/* Complexity badge */
.complexity-badge {
  font-family: monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 20px;
  border: 1px solid;
}

.complexity-badge.good    { color: var(--green);  border-color: var(--green);  background: rgba(166,227,161,0.1); }
.complexity-badge.medium  { color: var(--yellow); border-color: var(--yellow); background: rgba(249,226,175,0.1); }
.complexity-badge.bad     { color: var(--red);    border-color: var(--red);    background: rgba(243,139,168,0.1); }
.complexity-badge.unknown { color: var(--muted);  border-color: var(--border); }

/* Info bar */
.info-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease, padding 0.25s ease;
  flex-shrink: 0;
}

.info-bar.open { max-height: 160px; }

.info-bar-inner {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.info-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.info-name {
  font-weight: 700;
  color: var(--accent);
  font-size: 14px;
}

.info-complexity {
  font-family: monospace;
  font-size: 12px;
  color: var(--yellow);
  background: rgba(249, 226, 175, 0.1);
  border: 1px solid rgba(249, 226, 175, 0.3);
  padding: 1px 8px;
  border-radius: 20px;
}

.info-description {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.info-lists {
  display: flex;
  gap: 24px;
}

.info-list { display: flex; align-items: baseline; gap: 8px; }

.list-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.pros .list-label { color: var(--green); }
.cons .list-label { color: var(--red); }

.info-list ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  list-style: none;
  font-size: 12px;
}

.pros ul li::before { content: '✓ '; color: var(--green); }
.cons ul li::before { content: '✗ '; color: var(--red); }

.stats {
  display: flex;
  gap: 14px;
  margin-left: 8px;
}

#durationDisplay, #distanceDisplay {
  font-family: monospace;
  font-size: 13px;
  padding: 3px 10px;
  background: var(--surface2);
  border-radius: 4px;
  border: 1px solid var(--border);
  min-width: 90px;
  text-align: center;
  color: var(--muted);
}

#durationDisplay.active { color: var(--green); border-color: var(--green); }
#distanceDisplay.active { color: var(--yellow); border-color: var(--yellow); }

main {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.editor-pane, .canvas-pane {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Allow canvas pane to scroll when test panel is open */
.canvas-pane.test-open { overflow-y: auto; }

.editor-pane {
  width: 50%;
  border-right: 1px solid var(--border);
}

.canvas-pane {
  flex: 1;
  position: relative;
}

.pane-label {
  padding: 6px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.hint {
  font-style: italic;
  font-size: 11px;
  color: var(--border);
}

.CodeMirror {
  flex: 1;
  height: 100%;
  font-size: 13px;
  line-height: 1.6;
}

.CodeMirror-scroll { height: 100%; }

#canvas {
  display: block;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
}

.canvas-pane.test-open #canvas { height: 280px; min-height: 280px; }

#errorBox {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  background: rgba(243, 139, 168, 0.15);
  border: 1px solid var(--red);
  color: var(--red);
  padding: 8px 12px;
  border-radius: var(--radius);
  font-family: monospace;
  font-size: 12px;
  display: none;
  white-space: pre-wrap;
}

/* ── Challenge bar ── */
.challenge-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
  flex-shrink: 0;
}

.challenge-bar.open { max-height: 200px; }

.challenge-bar-inner {
  padding: 12px 16px;
  display: flex;
  gap: 24px;
  overflow-x: auto;
}

.challenge-section { flex: 1; min-width: 180px; }

.challenge-heading {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 4px;
}

.challenge-subheading {
  font-size: 12px;
  font-weight: 700;
  color: var(--yellow);
  margin-bottom: 3px;
}

.challenge-text {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.challenge-text strong { color: var(--text); }
.challenge-text em     { color: var(--accent); }
.challenge-text code   { color: var(--accent); font-family: monospace; }
.challenge-link        { color: var(--accent); text-decoration: underline; }

#challengeBtn.active {
  background: var(--yellow);
  color: var(--bg);
  border-color: var(--yellow);
}

/* ── Button tooltip ── */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 5px 9px;
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 200;
}
[data-tooltip]:hover::after { opacity: 1; }

/* ── Test panel ── */
.test-panel {
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px 14px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.test-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.test-panel-meta { flex: 1; display: flex; flex-direction: column; gap: 4px; }

.test-panel-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.test-panel-desc {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
}

.test-panel-desc code { color: var(--accent); font-family: monospace; }

.test-panel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.test-status {
  font-size: 11px;
  font-family: monospace;
  color: var(--muted);
}

.test-close-btn {
  padding: 2px 7px;
  font-size: 11px;
  border-color: var(--muted);
  color: var(--muted);
}

.chart-canvas {
  display: block;
  width: 100%;
  height: 150px;
  border-radius: var(--radius);
  background: var(--bg);
  border: 1px solid var(--border);
}

/* Results table */
.test-results {
  overflow-x: auto;
}

.results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-family: monospace;
}

.results-table thead tr {
  border-bottom: 1px solid var(--border);
}

.results-table th {
  padding: 3px 10px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  white-space: nowrap;
}

.results-table td {
  padding: 3px 10px;
  border-bottom: 1px solid rgba(68,68,106,0.4);
  white-space: nowrap;
}

.results-table tbody tr:last-child td { border-bottom: none; }
.results-table tbody tr:hover td { background: rgba(255,255,255,0.02); }

.r-n    { color: var(--text); font-weight: 600; }
.r-ms   { color: var(--green); }
.r-ms.timeout { color: var(--red); }
.r-runs { color: var(--muted); }
.r-opt  { }
.r-opt.optimal    { color: var(--green); }
.r-opt.suboptimal { color: var(--red); }
.r-opt.na         { color: var(--border); }

.test-verdict {
  display: none;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius);
  border: 1px solid;
  text-align: center;
}

.test-verdict.polynomial    { color: var(--green);  border-color: var(--green);  background: rgba(166,227,161,0.1); }
.test-verdict.super-poly    { color: var(--yellow); border-color: var(--yellow); background: rgba(249,226,175,0.1); }
.test-verdict.indeterminate { color: var(--muted);  border-color: var(--border); }

/* ── Proof panel extras ── */
.test-panel-desc em { color: var(--yellow); font-style: normal; font-weight: 600; }
.r-gap.pass { color: var(--green); }
.r-gap.fail { color: var(--red); }
.r-result.pass { color: var(--green); font-weight: 700; }
.r-result.fail { color: var(--red);   font-weight: 700; }

/* ── Tour dialog ── */
.dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: min(560px, 95vw);
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border);
}

.dialog-title-group { display: flex; flex-direction: column; gap: 2px; }

.dialog-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.dialog-subtitle {
  font-size: 11px;
  color: var(--muted);
  font-family: monospace;
}

.dialog-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
}

.dialog-tab {
  flex: 1;
  padding: 7px 0;
  font-size: 12px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.dialog-tab:hover { color: var(--text); background: transparent; }

.dialog-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: transparent;
}

.dialog-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--bg);
}

.dialog-footer {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--border);
}

.dialog-stat {
  flex: 1;
  padding: 8px 14px;
  font-size: 11px;
  font-family: monospace;
  color: var(--muted);
  text-align: center;
  border-right: 1px solid var(--border);
}

.dialog-stat:last-child { border-right: none; }
.dialog-stat strong { display: block; font-size: 13px; color: var(--text); }

.view-tour-btn {
  padding: 2px 6px;
  font-size: 13px;
  border-color: var(--border);
  color: var(--muted);
  background: transparent;
}
.view-tour-btn:hover { color: var(--accent); border-color: var(--accent); background: transparent; }