:root[data-bs-theme='dark'],
:root {
  --grid-gap: 2px;
  --cell-bg: var(--bs-body-bg);
  --cell-border: #475569;
  --cell-hover: rgba(255,255,255,0.04);
  --cell-active: rgba(59,130,246,0.15);
  --error: rgba(239,68,68,0.25);
  --ok: rgba(34,197,94,0.25);
}

body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

.tango-grid {
  position: absolute;
  inset: 0;
  display: grid;
  gap: var(--grid-gap);
  padding: 6px;
}

.tango-cell {
  background: var(--cell-bg);
  border: 1px solid var(--cell-border);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 120ms ease, transform 60ms ease;
  font-size: clamp(14px, 4vmin, 28px);
}

.tango-cell:hover { background: var(--cell-hover); }
.tango-cell:active { background: var(--cell-active); transform: scale(0.99); }

.tango-cell.error { background: var(--error); }
.tango-cell.ok { background: var(--ok); }

.constraint {
  position: absolute;
  color: #64748b;
  font-weight: 700;
  font-size: clamp(10px, 2vmin, 16px);
  pointer-events: none;
}

.constraint.equal::after { content: '='; }
.constraint.diff::after { content: '×'; }

/* Constraint anchors (between cells) */
.constraint.h {
  transform: translate(-50%, -50%);
}

.constraint.v {
  transform: translate(-50%, -50%);
}

.legend {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.legend .dot.ok { background: var(--ok); }
.legend .dot.error { background: var(--error); }

.hold-btn {
  overflow: hidden;
}

.hold-btn .hold-progress {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(59,130,246,0.3) 0%, rgba(59,130,246,0.15) 45%, transparent 46%);
  transform: scale(0);
  transform-origin: center;
  transition: transform 0.1s linear;
  pointer-events: none;
}